Codemod: CSF2 to CSF3

lib/codemod/package.json

@@ -41,8 +41,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "0.0.1",
+    "@storybook/csf-tools": "6.3.0-rc.4",
     "@storybook/node-logger": "6.3.0-rc.4",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",

lib/codemod/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 
-export const sanitizeName = (name) => {
+export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name));
   // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
@@ -14,8 +14,8 @@ export const sanitizeName = (name) => {
   return key;
 };
 
-export function jscodeshiftToPrettierParser(parser) {
-  const parserMap = {
+export function jscodeshiftToPrettierParser(parser?: string) {
+  const parserMap: Record<string, string> = {
     babylon: 'babel',
     flow: 'flow',
     ts: 'typescript',

lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts

@@ -0,0 +1,205 @@
+import { describe } from '@jest/globals';
+import dedent from 'ts-dedent';
+import _transform from '../csf-2-to-3';
+
+// @ts-ignore
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: (val) => true,
+});
+
+const jsTransform = (source: string) => _transform({ source }, null, {}).trim();
+const tsTransform = (source: string) => _transform({ source }, null, { parser: 'tsx' }).trim();
+
+describe('csf-2-to-3', () => {
+  describe('javascript', () => {
+    it('should replace function exports with objects', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          export const A = () => <Cat />;
+          export const B = (args) => <Button {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: () => <Cat />,
+        };
+        export const B = {
+          render: (args) => <Button {...args} />,
+        };
+      `);
+    });
+
+    it('should move annotations into story objects', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          export const A = () => <Cat />;
+          A.storyName = 'foo';
+          A.parameters = { bar: 2 };
+          A.setup = () => {};
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: () => <Cat />,
+          name: 'foo',
+          parameters: {
+            bar: 2,
+          },
+          setup: () => {},
+        };
+      `);
+    });
+
+    it('should ignore non-story exports, statements', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'components/Fruit', includeStories: ['A'] };
+          export const A = () => <Apple />;
+          export const B = (args) => <Banana {...args} />;
+          const C = (args) => <Cherry {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'components/Fruit',
+          includeStories: ['A'],
+        };
+        export const A = {
+          render: () => <Apple />,
+        };
+        export const B = (args) => <Banana {...args} />;
+
+        const C = (args) => <Cherry {...args} />;
+      `);
+    });
+
+    it('should do nothing when there is no meta', () => {
+      expect(
+        jsTransform(dedent`
+          export const A = () => <Apple />;
+          export const B = (args) => <Banana {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export const A = () => <Apple />;
+        export const B = (args) => <Banana {...args} />;
+      `);
+    });
+
+    it('should remove implicit global render function (react)', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          export const A = (args) => <Cat {...args} />;
+          export const B = (args) => <Banana {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {};
+        export const B = {
+          render: (args) => <Banana {...args} />,
+        };
+      `);
+    });
+
+    it('should ignore object exports', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          export const A = {
+            render: (args) => <Cat {...args} />
+          };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {
+          render: (args) => <Cat {...args} />,
+        };
+      `);
+    });
+
+    it('should hoist template.bind (if there is only one)', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          const Template = (args) => <Cat {...args} />;
+          export const A = Template.bind({});
+          A.args = { isPrimary: false };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: (args) => <Cat {...args} />,
+          args: {
+            isPrimary: false,
+          },
+        };
+      `);
+    });
+
+    it('should remove implicit global render for template.bind', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          const Template = (args) => <Cat {...args} />;
+          export const A = Template.bind({});
+          A.args = { isPrimary: false };
+          const Template2 = (args) => <Banana {...args} />;
+          export const B = Template2.bind({});
+          B.args = { isPrimary: true };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {
+          args: {
+            isPrimary: false,
+          },
+        };
+        export const B = {
+          render: (args) => <Banana {...args} />,
+          args: {
+            isPrimary: true,
+          },
+        };
+      `);
+    });
+  });
+
+  describe('typescript', () => {
+    it('should replace function exports with objects', () => {
+      expect(
+        tsTransform(dedent`
+          export default { title: 'Cat' } as Meta<CatProps>;
+          export const A: Story<CatProps> = () => <Cat />;
+          export const B: any = (args) => <Button {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        } as Meta<CatProps>;
+        export const A: Story<CatProps> = {
+          render: () => <Cat />,
+        };
+        export const B: any = {
+          render: (args) => <Button {...args} />,
+        };
+      `);
+    });
+  });
+});

lib/codemod/src/transforms/csf-2-to-3.ts

@@ -0,0 +1,160 @@
+/* eslint-disable no-underscore-dangle */
+import prettier from 'prettier';
+import * as t from '@babel/types';
+import { CsfFile, formatCsf, loadCsf } from '@storybook/csf-tools';
+import { logger } from '@storybook/node-logger';
+import { jscodeshiftToPrettierParser } from '../lib/utils';
+
+const _rename = (annotation: string) => {
+  return annotation === 'storyName' ? 'name' : annotation;
+};
+
+const getTemplateBindVariable = (init: t.Expression) =>
+  t.isCallExpression(init) &&
+  t.isMemberExpression(init.callee) &&
+  t.isIdentifier(init.callee.object) &&
+  t.isIdentifier(init.callee.property) &&
+  init.callee.property.name === 'bind' &&
+  (init.arguments.length === 0 ||
+    (init.arguments.length === 1 &&
+      t.isObjectExpression(init.arguments[0]) &&
+      init.arguments[0].properties.length === 0))
+    ? init.callee.object.name
+    : null;
+
+// export const A = ...
+// A.parameters = { ... }; <===
+const isStoryAnnotation = (stmt: t.Statement, objectExports: Record<string, any>) =>
+  t.isExpressionStatement(stmt) &&
+  t.isAssignmentExpression(stmt.expression) &&
+  t.isMemberExpression(stmt.expression.left) &&
+  t.isIdentifier(stmt.expression.left.object) &&
+  objectExports[stmt.expression.left.object.name];
+
+const isTemplateDeclaration = (stmt: t.Statement, templates: Record<string, any>) =>
+  t.isVariableDeclaration(stmt) &&
+  stmt.declarations.length === 1 &&
+  t.isIdentifier(stmt.declarations[0].id) &&
+  templates[stmt.declarations[0].id.name];
+
+const getNewExport = (stmt: t.Statement, objectExports: Record<string, any>) => {
+  if (
+    t.isExportNamedDeclaration(stmt) &&
+    t.isVariableDeclaration(stmt.declaration) &&
+    stmt.declaration.declarations.length === 1
+  ) {
+    const decl = stmt.declaration.declarations[0];
+    if (t.isVariableDeclarator(decl) && t.isIdentifier(decl.id)) {
+      return objectExports[decl.id.name];
+    }
+  }
+  return null;
+};
+
+// Remove render function when it matches the global render function in react
+// export default { component: Cat };
+// export const A = (args) => <Cat {...args} />;
+const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
+  if (
+    csf._meta?.component &&
+    t.isArrowFunctionExpression(storyFn) &&
+    storyFn.params.length === 1 &&
+    t.isJSXElement(storyFn.body)
+  ) {
+    const { openingElement } = storyFn.body;
+    if (
+      openingElement.selfClosing &&
+      t.isJSXIdentifier(openingElement.name) &&
+      openingElement.attributes.length === 1
+    ) {
+      const attr = openingElement.attributes[0];
+      const param = storyFn.params[0];
+      if (
+        t.isJSXSpreadAttribute(attr) &&
+        t.isIdentifier(attr.argument) &&
+        t.isIdentifier(param) &&
+        param.name === attr.argument.name &&
+        csf._meta.component === openingElement.name.name
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
+  const csf = loadCsf(source).parse();
+
+  const objectExports: Record<string, t.Statement> = {};
+  Object.entries(csf._storyExports).forEach(([key, decl]) => {
+    const annotations = Object.entries(csf._storyAnnotations[key]).map(([annotation, val]) => {
+      return t.objectProperty(t.identifier(_rename(annotation)), val as t.Expression);
+    });
+
+    const { init, id } = decl;
+    // only replace arrow function expressions
+    const template = getTemplateBindVariable(init);
+    if (!t.isArrowFunctionExpression(init) && !template) {
+      return;
+    }
+
+    // Remove the render function when we can hoist the template
+    // const Template = (args) => <Cat {...args} />;
+    // export const A = Template.bind({});
+    let storyFn = template && csf._templates[template];
+    if (!storyFn) storyFn = init;
+
+    const keyId = t.identifier(key);
+    // @ts-ignore
+    const { typeAnnotation } = id;
+    if (typeAnnotation) {
+      keyId.typeAnnotation = typeAnnotation;
+    }
+
+    const renderAnnotation = isReactGlobalRenderFn(csf, storyFn)
+      ? []
+      : [t.objectProperty(t.identifier('render'), storyFn)];
+
+    objectExports[key] = t.exportNamedDeclaration(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(keyId, t.objectExpression([...renderAnnotation, ...annotations])),
+      ])
+    );
+  });
+
+  const updatedBody = csf._ast.program.body.reduce((acc, stmt) => {
+    // remove story annotations & template declarations
+    if (isStoryAnnotation(stmt, objectExports) || isTemplateDeclaration(stmt, csf._templates)) {
+      return acc;
+    }
+
+    // replace story exports with new object exports
+    const newExport = getNewExport(stmt, objectExports);
+    if (newExport) {
+      acc.push(newExport);
+      return acc;
+    }
+
+    // include unknown statements
+    acc.push(stmt);
+    return acc;
+  }, []);
+  csf._ast.program.body = updatedBody;
+  const output = formatCsf(csf);
+
+  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  };
+
+  return prettier.format(output, {
+    ...prettierConfig,
+    parser: jscodeshiftToPrettierParser(options?.parser),
+  });
+}
+
+export default transform;

lib/codemod/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
+}

lib/csf-tools/src/CsfFile.ts

@@ -9,6 +9,7 @@ import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
 const logger = console;
 interface Meta {
   title?: string;
+  component?: string;
   includeStories?: string[] | RegExp;
   excludeStories?: string[] | RegExp;
 }
@@ -41,7 +42,7 @@ const parseTitle = (value: any) => {
 };
 
 const findVarInitialization = (identifier: string, program: t.Program) => {
-  let init: t.Node = null;
+  let init: t.Expression = null;
   let declarations: t.VariableDeclarator[] = null;
   program.body.find((node: t.Node) => {
     if (t.isVariableDeclaration(node)) {
@@ -68,7 +69,7 @@ const findVarInitialization = (identifier: string, program: t.Program) => {
   return init;
 };
 
-const isArgsStory = ({ init }: t.VariableDeclarator, parent: t.Node) => {
+const isArgsStory = ({ init }: t.VariableDeclarator, parent: t.Node, csf: CsfFile) => {
   let storyFn: t.Node = init;
   // export const Foo = Bar.bind({})
   if (t.isCallExpression(init)) {
@@ -87,6 +88,8 @@ const isArgsStory = ({ init }: t.VariableDeclarator, parent: t.Node) => {
       const boundIdentifier = callee.object.name;
       const template = findVarInitialization(boundIdentifier, parent);
       if (template) {
+        // eslint-disable-next-line no-param-reassign
+        csf._templates[boundIdentifier] = template;
         storyFn = template;
       }
     }
@@ -97,7 +100,7 @@ const isArgsStory = ({ init }: t.VariableDeclarator, parent: t.Node) => {
   return false;
 };
 export class CsfFile {
-  _ast: Node;
+  _ast: t.File;
 
   _meta?: Meta;
 
@@ -105,9 +108,13 @@ export class CsfFile {
 
   _metaAnnotations: Record<string, Node> = {};
 
+  _storyExports: Record<string, t.VariableDeclarator> = {};
+
   _storyAnnotations: Record<string, Record<string, Node>> = {};
 
-  constructor(ast: Node) {
+  _templates: Record<string, t.Expression> = {};
+
+  constructor(ast: t.File) {
     this._ast = ast;
   }
 
@@ -122,6 +129,12 @@ export class CsfFile {
         } else if (['includeStories', 'excludeStories'].includes(p.key.name)) {
           // @ts-ignore
           meta[p.key.name] = parseIncludeExclude(p.value);
+        } else if (p.key.name === 'component') {
+          if (t.isIdentifier(p.value)) {
+            meta.component = p.value.name;
+          } else if (t.isStringLiteral(p.value)) {
+            meta.component = p.value.value;
+          }
         }
       }
     });
@@ -165,14 +178,15 @@ export class CsfFile {
                 const { name } = decl.id;
                 const parameters = {
                   // __id: toId(self._meta.title, name),
-                  // FiXME: Template.bind({});
-                  __isArgsStory: isArgsStory(decl, parent),
+                  // FIXME: Template.bind({});
+                  __isArgsStory: isArgsStory(decl, parent, self),
                 };
                 self._stories[name] = {
                   id: 'FIXME',
                   name,
                   parameters,
                 };
+                self._storyExports[name] = decl;
                 if (self._storyAnnotations[name]) {
                   logger.warn(`Unexpected annotations for "${name}" before story declaration`);
                 } else {
@@ -216,16 +230,28 @@ export class CsfFile {
     });
 
     // default export can come at any point in the file, so we do this post processing last
-    self._stories =
-      self._meta && self._meta.title
-        ? Object.entries(self._stories).reduce((acc, [key, story]) => {
+    if (self._meta?.title || self._meta?.component) {
+      self._stories = Object.entries(self._stories).reduce((acc, [key, story]) => {
         if (isExportStory(key, self._meta)) {
           const id = toId(self._meta.title, storyNameFromExport(key));
           acc[key] = { ...story, id, parameters: { ...story.parameters, __id: id } };
         }
         return acc;
-          }, {} as Record<string, Story>)
-        : {}; // no meta = no stories
+      }, {} as Record<string, Story>);
+
+      Object.keys(self._storyExports).forEach((key) => {
+        if (!isExportStory(key, self._meta)) {
+          delete self._storyExports[key];
+          delete self._storyAnnotations[key];
+        }
+      });
+    } else {
+      // no meta = no stories
+      self._stories = {};
+      self._storyExports = {};
+      self._storyAnnotations = {};
+    }
+
     return self;
   }