convert-storiesof-to-module: user exports, collisions, reserved keywords

lib/codemod/src/lib/isReserved.js

@@ -0,0 +1,3 @@
+const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
+
+export const isReserved = name => RESERVED.exec(name);

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/collision.input.js

@@ -0,0 +1,2 @@
+export const foo = 1;
+storiesOf('bar', module).add('foo', () => <button />);

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/collision.output.js

@@ -0,0 +1,12 @@
+export const foo = 1;
+
+export default {
+  title: 'bar',
+  excludeStories: ['foo'],
+};
+
+export const story0 = () => <button />;
+
+story0.story = {
+  name: 'foo',
+};

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/const.input.js

@@ -0,0 +1 @@
+storiesOf('bar', module).add('const', () => <button />);

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/const.output.js

@@ -0,0 +1,9 @@
+export default {
+  title: 'bar',
+};
+
+export const constStory = () => <button />;
+
+constStory.story = {
+  name: 'const',
+};

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/exports.input.js

@@ -0,0 +1,2 @@
+export const foo = 1;
+storiesOf('bar', module).add('baz', () => <button />);

lib/codemod/src/transforms/__testfixtures__/convert-storiesof-to-module/exports.output.js

@@ -0,0 +1,8 @@
+export const foo = 1;
+
+export default {
+  title: 'bar',
+  excludeStories: ['foo'],
+};
+
+export const baz = () => <button />;

lib/codemod/src/transforms/__tests__/convert-storiesof-to-module.test.js

@@ -10,6 +10,9 @@ const testNames = [
   'module',
   'multi',
   'default',
+  'exports',
+  'collision',
+  'const',
 ];
 
 testNames.forEach(testName => {

lib/codemod/src/transforms/convert-storiesof-to-module.js

@@ -1,6 +1,7 @@
 import prettier from 'prettier';
 import camelCase from 'lodash/camelCase';
 import { logger } from '@storybook/node-logger';
+import { isReserved } from '../lib/isReserved';
 
 /**
  * Convert a legacy story file to module format
@@ -27,7 +28,7 @@ export default function transformer(file, api, options) {
   const j = api.jscodeshift;
   const root = j(file.source);
 
-  function convertToModuleExports(path) {
+  function convertToModuleExports(path, originalExports, counter) {
     const base = j(path);
 
     const statements = [];
@@ -72,6 +73,16 @@ export default function transformer(file, api, options) {
       );
     }
 
+    if (originalExports.length > 0) {
+      extraExports.push(
+        j.property(
+          'init',
+          j.identifier('excludeStories'),
+          j.arrayExpression(originalExports.map(exp => j.literal(exp)))
+        )
+      );
+    }
+
     // storiesOf(...)
     base
       .find(j.CallExpression)
@@ -106,10 +117,18 @@ export default function transformer(file, api, options) {
       if (/\s/.exec(key)) {
         name = key;
         key = camelCase(key);
-      } else if (key === 'default') {
+      } else if (isReserved(key)) {
         name = key;
-        key = 'defaultStory';
+        key = `${key}Story`;
       }
+
+      if (originalExports.includes(key)) {
+        if (!name) {
+          name = key;
+        }
+        key = `story${counter}`;
+      }
+
       const val = add.node.arguments[1];
       statements.push(
         j.exportDeclaration(
@@ -163,6 +182,12 @@ export default function transformer(file, api, options) {
     return root.toSource();
   }
 
+  // Exclude all the original named exports
+  const originalExports = [];
+  root
+    .find(j.ExportNamedDeclaration)
+    .forEach(exp => originalExports.push(exp.node.declaration.declarations[0].id.name));
+
   // each top-level add expression corresponds to the last "add" of the chain.
   // replace it with the entire export statements
   root
@@ -170,7 +195,7 @@ export default function transformer(file, api, options) {
     .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
     .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
     .filter(add => add.parentPath.node.type === 'ExpressionStatement')
-    .forEach(convertToModuleExports);
+    .forEach((path, i) => convertToModuleExports(path, originalExports, i));
 
   // remove storiesOf import
   root