@storybook/codemod 7.0.0-beta.53 → 7.0.0-beta.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -49,7 +49,7 @@ Defaulting to 2020, but this will stop working in the future.`)),options.ecmaVer
|
|
|
49
49
|
`),map3)):attributesOnOneLine&&(value+=tracker.move(" "+attributesOnOneLine)),attributesOnTheirOwnLine&&(value+=tracker.move(`
|
|
50
50
|
`)),selfClosing&&(value+=tracker.move((tightSelfClosing||attributesOnTheirOwnLine?"":" ")+"/")),value+=tracker.move(">"),node3.children&&node3.children.length>0&&(node3.type==="mdxJsxFlowElement"?(tracker.shift(2),value+=tracker.move(`
|
|
51
51
|
`),value+=tracker.move(indentLines(containerFlow(node3,context,tracker.current()),map3)),value+=tracker.move(`
|
|
52
|
-
`)):value+=tracker.move(containerPhrasing(node3,context,{...tracker.current(),before:"<",after:">"}))),selfClosing||(value+=tracker.move("</"+(node3.name||"")+">")),exit2(),value}function map3(line,_,blank){return(blank?"":" ")+line}function peekElement(){return"<"}}var mdxjsEsmFromMarkdown={enter:{mdxjsEsm:enterMdxjsEsm},exit:{mdxjsEsm:exitMdxjsEsm,mdxjsEsmData:exitMdxjsEsmData}},mdxjsEsmToMarkdown={handlers:{mdxjsEsm:handleMdxjsEsm}};function enterMdxjsEsm(token){this.enter({type:"mdxjsEsm",value:""},token),this.buffer()}function exitMdxjsEsm(token){let value=this.resume(),node3=this.exit(token),estree=token.estree;node3.value=value,estree&&(node3.data={estree})}function exitMdxjsEsmData(token){this.config.enter.data.call(this,token),this.config.exit.data.call(this,token)}function handleMdxjsEsm(node3){return node3.value||""}function mdxFromMarkdown(){return[mdxExpressionFromMarkdown,mdxJsxFromMarkdown(),mdxjsEsmFromMarkdown]}function mdxToMarkdown(options){return{extensions:[mdxExpressionToMarkdown,mdxJsxToMarkdown(options),mdxjsEsmToMarkdown]}}function remarkMdx(options){let data2=this.data();add("micromarkExtensions",mdxjs(options)),add("fromMarkdownExtensions",mdxFromMarkdown()),add("toMarkdownExtensions",mdxToMarkdown(options));function add(field,value){(data2[field]?data2[field]:data2[field]=[]).push(value)}}var t=__toESM(require("@babel/types")),babel=__toESM(require("@babel/core")),recast=__toESM(require("recast")),path=__toESM(require("path")),import_prettier=__toESM(require("prettier")),fs=__toESM(require("fs")),import_camelCase=__toESM(require("lodash/camelCase")),mdxProcessor=remark().use(remarkMdx);function jscodeshift(info){let parsed=path.parse(info.path),baseName=path.join(parsed.dir,parsed.name.replace(".mdx","").replace(".stories","").replace(".story",""));for(;fs.existsSync(`${baseName}.stories.js`);)baseName+="_";let result=transform(info.source,path.basename(baseName));if(result==null)return;let[mdx,csf]=result;return fs.writeFileSync(`${baseName}.stories.js`,csf),mdx}function transform(source,baseName){let root2=mdxProcessor.parse(source),storyNamespaceName=nameToValidExport(`${baseName}Stories`),
|
|
52
|
+
`)):value+=tracker.move(containerPhrasing(node3,context,{...tracker.current(),before:"<",after:">"}))),selfClosing||(value+=tracker.move("</"+(node3.name||"")+">")),exit2(),value}function map3(line,_,blank){return(blank?"":" ")+line}function peekElement(){return"<"}}var mdxjsEsmFromMarkdown={enter:{mdxjsEsm:enterMdxjsEsm},exit:{mdxjsEsm:exitMdxjsEsm,mdxjsEsmData:exitMdxjsEsmData}},mdxjsEsmToMarkdown={handlers:{mdxjsEsm:handleMdxjsEsm}};function enterMdxjsEsm(token){this.enter({type:"mdxjsEsm",value:""},token),this.buffer()}function exitMdxjsEsm(token){let value=this.resume(),node3=this.exit(token),estree=token.estree;node3.value=value,estree&&(node3.data={estree})}function exitMdxjsEsmData(token){this.config.enter.data.call(this,token),this.config.exit.data.call(this,token)}function handleMdxjsEsm(node3){return node3.value||""}function mdxFromMarkdown(){return[mdxExpressionFromMarkdown,mdxJsxFromMarkdown(),mdxjsEsmFromMarkdown]}function mdxToMarkdown(options){return{extensions:[mdxExpressionToMarkdown,mdxJsxToMarkdown(options),mdxjsEsmToMarkdown]}}function remarkMdx(options){let data2=this.data();add("micromarkExtensions",mdxjs(options)),add("fromMarkdownExtensions",mdxFromMarkdown()),add("toMarkdownExtensions",mdxToMarkdown(options));function add(field,value){(data2[field]?data2[field]:data2[field]=[]).push(value)}}var t=__toESM(require("@babel/types")),babel=__toESM(require("@babel/core")),recast=__toESM(require("recast")),path=__toESM(require("path")),import_prettier=__toESM(require("prettier")),fs=__toESM(require("fs")),import_camelCase=__toESM(require("lodash/camelCase")),mdxProcessor=remark().use(remarkMdx);function jscodeshift(info){let parsed=path.parse(info.path),baseName=path.join(parsed.dir,parsed.name.replace(".mdx","").replace(".stories","").replace(".story",""));for(;fs.existsSync(`${baseName}.stories.js`);)baseName+="_";let result=transform(info.source,path.basename(baseName));if(result==null)return;let[mdx,csf]=result;return fs.writeFileSync(`${baseName}.stories.js`,csf),mdx}function transform(source,baseName){let root2=mdxProcessor.parse(source),storyNamespaceName=nameToValidExport(`${baseName}Stories`),metaAttributes=[],storiesMap=new Map;visit(root2,["mdxjsEsm"],node3=>{node3.value=node3.value.replaceAll("@storybook/addon-docs","@storybook/blocks").replaceAll("@storybook/addon-docs/blocks","@storybook/blocks")});let file=getEsmAst(root2);addStoriesImport(root2,baseName,storyNamespaceName),visit(root2,["mdxJsxFlowElement","mdxJsxTextElement"],(node3,index4,parent)=>{if(is(node3,{name:"Meta"})&&(metaAttributes.push(...node3.attributes),node3.attributes=[{type:"mdxJsxAttribute",name:"of",value:{type:"mdxJsxAttributeValueExpression",value:storyNamespaceName}}]),is(node3,{name:"Story"})){let nameAttribute=node3.attributes.find(it=>it.type==="mdxJsxAttribute"&&it.name==="name"),idAttribute=node3.attributes.find(it=>it.type==="mdxJsxAttribute"&&it.name==="id"),storyAttribute=node3.attributes.find(it=>it.type==="mdxJsxAttribute"&&it.name==="story");if(typeof(nameAttribute==null?void 0:nameAttribute.value)=="string"){let name2=nameToValidExport(nameAttribute.value);for(;variableNameExists(name2);)name2+="_";storiesMap.set(name2,{type:"value",attributes:node3.attributes,children:node3.children}),node3.attributes=[{type:"mdxJsxAttribute",name:"of",value:{type:"mdxJsxAttributeValueExpression",value:`${storyNamespaceName}.${name2}`}}],node3.children=[]}else if(idAttribute!=null&&idAttribute.value){let newNode={type:"mdxFlowExpression",value:`/* ${mdxProcessor.stringify({type:"root",children:[node3]}).trim()} is deprecated, please migrate it to <Story of={referenceToStory} /> */`};return storiesMap.set(idAttribute.value,{type:"id"}),parent.children.splice(index4,0,newNode),[SKIP,index4+2]}else if((storyAttribute==null?void 0:storyAttribute.type)==="mdxJsxAttribute"&&typeof storyAttribute.value=="object"&&storyAttribute.value.type==="mdxJsxAttributeValueExpression"){let name2=storyAttribute.value.value;node3.attributes=[{type:"mdxJsxAttribute",name:"of",value:{type:"mdxJsxAttributeValueExpression",value:`${storyNamespaceName}.${name2}`}}],node3.children=[],storiesMap.set(name2,{type:"reference"})}else return parent.children.splice(index4,1),[SKIP,index4]}});let metaProperties=metaAttributes.flatMap(attribute=>attribute.type==="mdxJsxAttribute"?typeof attribute.value=="string"?[t.objectProperty(t.identifier(attribute.name),t.stringLiteral(attribute.value))]:[t.objectProperty(t.identifier(attribute.name),(0,import_csf_tools.babelParseExpression)(attribute.value.value))]:[]);if(file.path.traverse({ImportDeclaration(path2){path2.node.source.value==="@storybook/blocks"&&path2.remove()},ExportNamedDeclaration(path2){path2.replaceWith(path2.node.declaration)}}),storiesMap.size===0)return null;let newStatements=[t.exportDefaultDeclaration(t.objectExpression(metaProperties))];function mapChildrenToRender(children){let child=children[0];if(!child)return;if(child.type==="text")return t.arrowFunctionExpression([],t.stringLiteral(child.value));if(child.type==="mdxFlowExpression"||child.type==="mdxTextExpression"){let expression2=(0,import_csf_tools.babelParseExpression)(child.value);return/\.bind\(.*\)/.test(child.value)||t.isIdentifier(expression2)||t.isArrowFunctionExpression(expression2)?expression2:t.arrowFunctionExpression([],expression2)}let expression=(0,import_csf_tools.babelParseExpression)(mdxProcessor.stringify({type:"root",children:[child]}));return t.arrowFunctionExpression([],expression)}function variableNameExists(name2){let found=!1;return file.path.traverse({VariableDeclarator:path2=>{let lVal=path2.node.id;t.isIdentifier(lVal)&&lVal.name===name2&&(found=!0)}}),found}newStatements.push(...[...storiesMap].flatMap(([key,value])=>{if(value.type==="id")return[];if(value.type==="reference")return[t.exportNamedDeclaration(null,[t.exportSpecifier(t.identifier(key),t.identifier(key))])];let renderProperty=mapChildrenToRender(value.children),newObject=t.objectExpression([...renderProperty?[t.objectProperty(t.identifier("render"),mapChildrenToRender(value.children))]:[],...value.attributes.flatMap(attribute=>attribute.type==="mdxJsxAttribute"?typeof attribute.value=="string"?[t.objectProperty(t.identifier(attribute.name),t.stringLiteral(attribute.value))]:[t.objectProperty(t.identifier(attribute.name),(0,import_csf_tools.babelParseExpression)(attribute.value.value))]:[])]);return[t.exportNamedDeclaration(t.variableDeclaration("const",[t.variableDeclarator(t.identifier(key),newObject)]))]})),file.path.node.body=[...file.path.node.body,...newStatements];let newMdx=mdxProcessor.stringify(root2),output=recast.print(file.path.node).code,prettierConfig=import_prettier.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return output=import_prettier.default.format(output,{...prettierConfig,filepath:"file.jsx"}),[newMdx,output]}function getEsmAst(root2){let esm=[];visit(root2,["mdxjsEsm"],node3=>{esm.push(node3.value)});let esmSource=`${esm.join(`
|
|
53
53
|
|
|
54
54
|
`)}`;return new babel.File({filename:"info.path"},{code:esmSource,ast:(0,import_csf_tools.babelParse)(esmSource)})}function addStoriesImport(root2,baseName,storyNamespaceName){let found=!1;visit(root2,["mdxjsEsm"],node3=>{found||(node3.value+=`
|
|
55
55
|
import * as ${storyNamespaceName} from './${baseName}.stories';`,found=!0)})}function nameToValidExport(name2){let[first,...rest]=Array.from((0,import_camelCase.default)(name2));return`${first.match(/[a-zA-Z_$]/)?first.toUpperCase():`$${first}`}${rest.join("")}`}0&&(module.exports={nameToValidExport,transform});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/codemod",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.55",
|
|
4
4
|
"description": "A collection of codemod scripts written with JSCodeshift",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -49,9 +49,9 @@
|
|
|
49
49
|
"@babel/preset-env": "^7.20.2",
|
|
50
50
|
"@babel/types": "^7.20.7",
|
|
51
51
|
"@storybook/csf": "next",
|
|
52
|
-
"@storybook/csf-tools": "7.0.0-beta.
|
|
53
|
-
"@storybook/node-logger": "7.0.0-beta.
|
|
54
|
-
"@storybook/types": "7.0.0-beta.
|
|
52
|
+
"@storybook/csf-tools": "7.0.0-beta.55",
|
|
53
|
+
"@storybook/node-logger": "7.0.0-beta.55",
|
|
54
|
+
"@storybook/types": "7.0.0-beta.55",
|
|
55
55
|
"cross-spawn": "^7.0.3",
|
|
56
56
|
"globby": "^11.0.2",
|
|
57
57
|
"jscodeshift": "^0.14.0",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"cjs"
|
|
98
98
|
]
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "fcabbb3d1837b193348cbdb7935d497049cd5243"
|
|
101
101
|
}
|
|
@@ -368,10 +368,23 @@ test('duplicate story name', () => {
|
|
|
368
368
|
|
|
369
369
|
`;
|
|
370
370
|
|
|
371
|
-
jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
|
|
372
|
-
|
|
371
|
+
const mdx = jscodeshift({ source: input, path: 'Foobar.stories.mdx' });
|
|
373
372
|
const [, csf] = fs.writeFileSync.mock.calls[0];
|
|
374
373
|
|
|
374
|
+
expect(mdx).toMatchInlineSnapshot(`
|
|
375
|
+
import { Meta, Story } from '@storybook/blocks';
|
|
376
|
+
import { Button } from './Button';
|
|
377
|
+
import * as FoobarStories from './Foobar.stories';
|
|
378
|
+
|
|
379
|
+
export const Default = (args) => <Button {...args} />;
|
|
380
|
+
|
|
381
|
+
<Meta of={FoobarStories} />
|
|
382
|
+
|
|
383
|
+
<Story of={FoobarStories.Default_} />
|
|
384
|
+
|
|
385
|
+
<Story of={FoobarStories.Second} />
|
|
386
|
+
|
|
387
|
+
`);
|
|
375
388
|
expect(csf).toMatchInlineSnapshot(`
|
|
376
389
|
import { Button } from './Button';
|
|
377
390
|
|
|
@@ -56,7 +56,6 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
|
|
|
56
56
|
const root = mdxProcessor.parse(source);
|
|
57
57
|
const storyNamespaceName = nameToValidExport(`${baseName}Stories`);
|
|
58
58
|
|
|
59
|
-
let containsMeta = false;
|
|
60
59
|
const metaAttributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> = [];
|
|
61
60
|
const storiesMap = new Map<
|
|
62
61
|
string,
|
|
@@ -80,12 +79,14 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
|
|
|
80
79
|
.replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks');
|
|
81
80
|
});
|
|
82
81
|
|
|
82
|
+
const file = getEsmAst(root);
|
|
83
|
+
addStoriesImport(root, baseName, storyNamespaceName);
|
|
84
|
+
|
|
83
85
|
visit(
|
|
84
86
|
root,
|
|
85
87
|
['mdxJsxFlowElement', 'mdxJsxTextElement'],
|
|
86
88
|
(node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
|
|
87
89
|
if (is(node, { name: 'Meta' })) {
|
|
88
|
-
containsMeta = true;
|
|
89
90
|
metaAttributes.push(...node.attributes);
|
|
90
91
|
node.attributes = [
|
|
91
92
|
{
|
|
@@ -109,7 +110,9 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
|
|
|
109
110
|
(it) => it.type === 'mdxJsxAttribute' && it.name === 'story'
|
|
110
111
|
);
|
|
111
112
|
if (typeof nameAttribute?.value === 'string') {
|
|
112
|
-
|
|
113
|
+
let name = nameToValidExport(nameAttribute.value);
|
|
114
|
+
while (variableNameExists(name)) name += '_';
|
|
115
|
+
|
|
113
116
|
storiesMap.set(name, {
|
|
114
117
|
type: 'value',
|
|
115
118
|
attributes: node.attributes,
|
|
@@ -182,12 +185,6 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
|
|
|
182
185
|
return [];
|
|
183
186
|
});
|
|
184
187
|
|
|
185
|
-
const file = getEsmAst(root);
|
|
186
|
-
|
|
187
|
-
if (containsMeta || storiesMap.size > 0) {
|
|
188
|
-
addStoriesImport(root, baseName, storyNamespaceName);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
188
|
file.path.traverse({
|
|
192
189
|
// remove mdx imports from csf
|
|
193
190
|
ImportDeclaration(path) {
|
|
@@ -283,16 +280,9 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
|
|
|
283
280
|
}),
|
|
284
281
|
]);
|
|
285
282
|
|
|
286
|
-
let newExportName = key;
|
|
287
|
-
while (variableNameExists(newExportName)) {
|
|
288
|
-
newExportName += '_';
|
|
289
|
-
}
|
|
290
|
-
|
|
291
283
|
return [
|
|
292
284
|
t.exportNamedDeclaration(
|
|
293
|
-
t.variableDeclaration('const', [
|
|
294
|
-
t.variableDeclarator(t.identifier(newExportName), newObject),
|
|
295
|
-
])
|
|
285
|
+
t.variableDeclaration('const', [t.variableDeclarator(t.identifier(key), newObject)])
|
|
296
286
|
),
|
|
297
287
|
];
|
|
298
288
|
})
|