Merge pull request #19738 from storybookjs/shilman/csf-tools-configfile-default-export

CSF-tools: Support default exports for SB7

code/lib/csf-tools/src/ConfigFile.test.ts

@@ -1,3 +1,5 @@
+/// <reference types="@types/jest" />;
+
 import { dedent } from 'ts-dedent';
 import { formatConfig, loadConfig } from './ConfigFile';
 
@@ -83,6 +85,7 @@ describe('ConfigFile', () => {
         ).toEqual('webpack5');
       });
     });
+
     describe('module exports', () => {
       it('missing export', () => {
         expect(
@@ -142,6 +145,66 @@ describe('ConfigFile', () => {
         ).toEqual([{ directory: '../src', titlePrefix: 'Demo' }]);
       });
     });
+
+    describe('default export', () => {
+      it('missing export', () => {
+        expect(
+          getField(
+            ['core', 'builder'],
+            dedent`
+            export default { foo: { builder: 'webpack5' } }
+            `
+          )
+        ).toBeUndefined();
+      });
+      it('found scalar', () => {
+        expect(
+          getField(
+            ['core', 'builder'],
+            dedent`
+            export default { core: { builder: 'webpack5' } }
+            `
+          )
+        ).toEqual('webpack5');
+      });
+      it('variable ref export', () => {
+        expect(
+          getField(
+            ['core', 'builder'],
+            dedent`
+            const core = { builder: 'webpack5' };
+            export default { core };
+            `
+          )
+        ).toEqual('webpack5');
+      });
+      it('variable rename', () => {
+        expect(
+          getField(
+            ['core', 'builder'],
+            dedent`
+            const coreVar = { builder: 'webpack5' };
+            export default { core: coreVar };
+            `
+          )
+        ).toEqual('webpack5');
+      });
+      it('variable exports', () => {
+        expect(
+          getField(
+            ['stories'],
+            dedent`
+              import type { StorybookConfig } from '@storybook/react-webpack5';
+
+              const config: StorybookConfig = {
+                stories: [{ directory: '../src', titlePrefix: 'Demo' }],
+              }
+              export default config;
+            `
+          )
+        ).toEqual([{ directory: '../src', titlePrefix: 'Demo' }]);
+      });
+    });
   });
 
   describe('setField', () => {
@@ -228,6 +291,7 @@ describe('ConfigFile', () => {
         `);
       });
     });
+
     describe('module exports', () => {
       it('missing export', () => {
         expect(
@@ -283,6 +347,63 @@ describe('ConfigFile', () => {
         `);
       });
     });
+
+    describe('default export', () => {
+      it('missing export', () => {
+        expect(
+          setField(
+            ['core', 'builder'],
+            'webpack5',
+            dedent`
+              export default { addons: [] };
+            `
+          )
+        ).toMatchInlineSnapshot(`
+          export default {
+            addons: [],
+            core: {
+              builder: "webpack5"
+            }
+          };
+        `);
+      });
+      it('missing field', () => {
+        expect(
+          setField(
+            ['core', 'builder'],
+            'webpack5',
+            dedent`
+              export default { core: { foo: 'bar' }};
+            `
+          )
+        ).toMatchInlineSnapshot(`
+          export default {
+            core: {
+              foo: 'bar',
+              builder: 'webpack5'
+            }
+          };
+        `);
+      });
+      it('found scalar', () => {
+        expect(
+          setField(
+            ['core', 'builder'],
+            'webpack5',
+            dedent`
+              export default { core: { builder: 'webpack4' } };
+            `
+          )
+        ).toMatchInlineSnapshot(`
+          export default {
+            core: {
+              builder: 'webpack5'
+            }
+          };
+        `);
+      });
+    });
+
     describe('quotes', () => {
       it('no quotes', () => {
         expect(setField(['foo', 'bar'], 'baz', '')).toMatchInlineSnapshot(`

code/lib/csf-tools/src/ConfigFile.ts

@@ -108,6 +108,30 @@ export class ConfigFile {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
     traverse.default(this._ast, {
+      ExportDefaultDeclaration: {
+        enter({ node, parent }) {
+          const decl =
+            t.isIdentifier(node.declaration) && t.isProgram(parent)
+              ? _findVarInitialization(node.declaration.name, parent)
+              : node.declaration;
+
+          if (t.isObjectExpression(decl)) {
+            self._exportsObject = decl;
+            decl.properties.forEach((p: t.ObjectProperty) => {
+              const exportName = propKey(p);
+              if (exportName) {
+                let exportVal = p.value;
+                if (t.isIdentifier(exportVal)) {
+                  exportVal = _findVarInitialization(exportVal.name, parent as t.Program);
+                }
+                self._exports[exportName] = exportVal as t.Expression;
+              }
+            });
+          } else {
+            logger.warn(`Unexpected ${JSON.stringify(node)}`);
+          }
+        },
+      },
       ExportNamedDeclaration: {
         enter({ node, parent }) {
           if (t.isVariableDeclaration(node.declaration)) {