GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 19:11:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Delete broken mdx-to-csf codemod (will be replaced)

Browse Source
This commit is contained in:
Michael Shilman 2022-10-15 18:19:31 +08:00
parent d46e80a6df
commit 3f2430b2d9
6 changed files with 3 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
MIGRATION.md
View File

@ -711,7 +711,9 @@ Storybook 7 Docs uses MDXv2 instead of MDXv1. This means an improved syntax, sup
If you use `.stories.mdx` files in your project, you may need to edit them since MDX2 contains [breaking changes](https://mdxjs.com/migrating/v2/#update-mdx-files).
We will update this section with specific pointers based on user feedback during the prerelease period and probably add an automigration to help streamline the upgrade before final 7.0 release.
We will update this section with specific pointers based on user feedback during the prerelease period and probably add an codemod to help streamline the upgrade before final 7.0 release.
As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release.
## From version 6.4.x to 6.5.0

7
code/addons/docs/docs/recipes.md
View File

@ -4,7 +4,6 @@
- [Component Story Format (CSF) with DocsPage](#component-story-format-csf-with-docspage)
- [Pure MDX Stories](#pure-mdx-stories)
- [Mixed CSF / MDX Stories](#mixed-csf--mdx-stories)
- [CSF Stories with MDX Docs](#csf-stories-with-mdx-docs)
- [CSF Stories with arbitrary MDX](#csf-stories-with-arbitrary-mdx)
- [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx)
@ -30,12 +29,6 @@ If you want to intersperse longform documentation in your Storybook, for example
[MDX](mdx.md) is an alternative syntax to CSF that allows you to co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.
## Mixed CSF / MDX Stories
Can't decide between CSF and MDX? In transition? Or have you found that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md) can help.
The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.
## CSF Stories with MDX Docs
Perhaps you want to write your stories in CSF, but document them in MDX? Here's how to do that:

36
code/lib/codemod/README.md
View File

@ -240,42 +240,6 @@ import { Meta, Story } from '@storybook/addon-docs';
</Story>
```
### mdx-to-csf
This converts all your MDX stories into Component Story Format.
```sh
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/mdx-to-csf.js . --ignore-pattern "node_modules|dist" --extensions=mdx
```
For example:
```js
import React from 'react';
import Button from './Button';
import { Meta, Story } from '@storybook/addon-docs';
<Meta title='Button' />
<Story name='basic stories'><Button label='The Button' /></Story>
```
Becomes:
```js
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const basicStory = () => <Button label="The Button" />;
basicStory.story = {
name: 'basic stories',
};
```
### upgrade-hierarchy-separators
Starting in 5.3, Storybook is moving to using a single path separator, `/`, to specify the story hierarchy. It previously defaulted to `|` for story "roots" (optional) and either `/` or `.` for denoting paths. This codemod updates the old default to the new default.

1
code/lib/codemod/package.json
View File

@ -36,7 +36,6 @@
},
"dependencies": {
"@babel/types": "^7.12.11",
"@mdx-js/mdx": "^2.1.5",
"@storybook/csf": "0.0.2--canary.49.258942b.0",
"@storybook/csf-tools": "7.0.0-alpha.38",
"@storybook/node-logger": "7.0.0-alpha.38",

184
code/lib/codemod/src/transforms/mdx-to-csf.js
View File

@ -1,184 +0,0 @@
// import recast from 'recast';
import mdx from '@mdx-js/mdx';
import prettier from 'prettier';
import { sanitizeName } from '../lib/utils';
/**
* Convert a component's MDX file into module story format
*/
export default function transformer(file, api) {
const j = api.jscodeshift;
const code = mdx.sync(file.source, {});
const root = j(code);
function parseJsxAttributes(attributes) {
const result = {};
attributes.forEach((attr) => {
const key = attr.name.name;
const val = attr.value.type === 'JSXExpressionContainer' ? attr.value.expression : attr.value;
result[key] = val;
});
return result;
}
function genObjectExpression(attrs) {
return j.objectExpression(
Object.entries(attrs).map(([key, val]) => j.property('init', j.identifier(key), val))
);
}
function convertToStories(path) {
const base = j(path);
const meta = {};
const includeStories = [];
const storyStatements = [];
// get rid of all mdxType junk
base
.find(j.JSXAttribute)
.filter((attr) => attr.node.name.name === 'mdxType')
.remove();
// parse <Meta title="..." />
base
.find(j.JSXElement)
.filter((elt) => elt.node.openingElement.name.name === 'Meta')
.forEach((elt) => {
const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
Object.assign(meta, attrs);
});
// parse <Story name="..." />
base
.find(j.JSXElement)
.filter((elt) => elt.node.openingElement.name.name === 'Story')
.forEach((elt) => {
const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
if (attrs.name) {
const storyKey = sanitizeName(attrs.name.value);
includeStories.push(storyKey);
if (storyKey === attrs.name.value) {
delete attrs.name;
}
let body =
elt.node.children.find((n) => n.type !== 'JSXText') ||
j.literal(elt.node.children[0].value);
if (body.type === 'JSXExpressionContainer') {
body = body.expression;
}
storyStatements.push(
j.exportDeclaration(
false,
j.variableDeclaration('const', [
j.variableDeclarator(
j.identifier(storyKey),
body.type === 'ArrowFunctionExpression'
? body
: j.arrowFunctionExpression([], body)
),
])
)
);
if (Object.keys(attrs).length > 0) {
storyStatements.push(
j.assignmentStatement(
'=',
j.memberExpression(j.identifier(storyKey), j.identifier('story')),
genObjectExpression(attrs)
)
);
}
storyStatements.push(j.emptyStatement());
}
});
if (root.find(j.ExportNamedDeclaration).size() > 0) {
meta.includeStories = j.arrayExpression(includeStories.map((key) => j.literal(key)));
}
const statements = [
j.exportDefaultDeclaration(genObjectExpression(meta)),
j.emptyStatement(),
...storyStatements,
];
const lastStatement = root.find(j.Statement).at(-1);
statements.reverse().forEach((stmt) => {
lastStatement.insertAfter(stmt);
});
base.remove();
}
root.find(j.ExportDefaultDeclaration).forEach(convertToStories);
// strip out Story/Meta import and MDX junk
// /* @jsx mdx */
root
.find(j.ImportDeclaration)
.at(0)
.replaceWith((exp) => j.importDeclaration(exp.node.specifiers, exp.node.source));
// import { Story, Meta } from '@storybook/addon-docs';
root
.find(j.ImportDeclaration)
.filter((exp) => exp.node.source.value === '@storybook/addon-docs')
.remove();
// const makeShortcode = ...
// const layoutProps = {};
// const MDXLayout = 'wrapper';
const MDX_DECLS = ['makeShortcode', 'layoutProps', 'MDXLayout'];
root
.find(j.VariableDeclaration)
.filter(
(decl) =>
decl.node.declarations.length === 1 && MDX_DECLS.includes(decl.node.declarations[0].id.name)
)
.remove();
// const Source = makeShortcode('Source');
root
.find(j.VariableDeclarator)
.filter(
(expr) =>
expr.node.init.type === 'CallExpression' &&
expr.node.init.callee.type === 'Identifier' &&
expr.node.init.callee.name === 'makeShortcode'
)
.remove();
// MDXContent.isMDXComponent = true;
root
.find(j.AssignmentExpression)
.filter(
(expr) =>
expr.node.left.type === 'MemberExpression' &&
expr.node.left.object.type === 'Identifier' &&
expr.node.left.object.name === 'MDXContent'
)
.remove();
// Add back `import React from 'react';` which is implicit in MDX
const react = root.find(j.ImportDeclaration).filter((decl) => decl.node.source.value === 'react');
if (react.size() === 0) {
root
.find(j.Statement)
.at(0)
.insertBefore(
j.importDeclaration([j.importDefaultSpecifier(j.identifier('React'))], j.literal('react'))
);
}
const source = root.toSource({ trailingComma: true, quote: 'single', tabWidth: 2 });
return prettier.format(source, {
parser: 'babel',
printWidth: 100,
tabWidth: 2,
bracketSpacing: true,
trailingComma: 'es5',
singleQuote: true,
});
}

26
code/yarn.lock
View File

@ -4626,31 +4626,6 @@ __metadata:
languageName: node
linkType: hard
"@mdx-js/mdx@npm:^2.1.5":
version: 2.1.5
resolution: "@mdx-js/mdx@npm:2.1.5"
dependencies:
"@types/estree-jsx": ^1.0.0
"@types/mdx": ^2.0.0
estree-util-build-jsx: ^2.0.0
estree-util-is-identifier-name: ^2.0.0
estree-util-to-js: ^1.1.0
estree-walker: ^3.0.0
hast-util-to-estree: ^2.0.0
markdown-extensions: ^1.0.0
periscopic: ^3.0.0
remark-mdx: ^2.0.0
remark-parse: ^10.0.0
remark-rehype: ^10.0.0
unified: ^10.0.0
unist-util-position-from-estree: ^1.0.0
unist-util-stringify-position: ^3.0.0
unist-util-visit: ^4.0.0
vfile: ^5.0.0
checksum: 364f70656038ea9f9281b867ca4ce9efa7c678621f489711cc293bdd253687704b68303101c2446b1bb6296adda99ef07f601e8278410399438ac8f1dc9311aa
languageName: node
linkType: hard
"@mdx-js/react@npm:^1.6.16, @mdx-js/react@npm:^1.6.22":
version: 1.6.22
resolution: "@mdx-js/react@npm:1.6.22"
@ -7321,7 +7296,6 @@ __metadata:
resolution: "@storybook/codemod@workspace:lib/codemod"
dependencies:
"@babel/types": ^7.12.11
"@mdx-js/mdx": ^2.1.5
"@storybook/csf": 0.0.2--canary.49.258942b.0
"@storybook/csf-tools": 7.0.0-alpha.38
"@storybook/node-logger": 7.0.0-alpha.38