Merge pull request #20936 from zhyd1997/feature/add-satisfies-to-conf…

…ig-file Csf-tools: Add `satisfies` support to ConfigFile
storybookjs · Feb 6, 2023 · 6ab515a · 6ab515a
2 parents c68f3b7 + 7d5d648
commit 6ab515a
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 1 deletion.
diff --git a/code/lib/csf-tools/src/ConfigFile.test.ts b/code/lib/csf-tools/src/ConfigFile.test.ts
@@ -763,6 +763,48 @@ describe('ConfigFile', () => {
         expect(config.getNameFromPath(['framework'])).toEqual('foo');
       });
 
+      describe('satisfies', () => {
+        it(`supports string literal node`, () => {
+          const source = dedent`
+            import type { StorybookConfig } from '@storybook/react-webpack5';
+  
+            const config = {
+              framework: 'foo',
+            } satisfies StorybookConfig
+            export default config;
+          `;
+          const config = loadConfig(source).parse();
+          expect(config.getNameFromPath(['framework'])).toEqual('foo');
+        });
+
+        it(`supports string literal node without variables`, () => {
+          const source = dedent`
+            import type { StorybookConfig } from '@storybook/react-webpack5';
+  
+            export default {
+              framework: 'foo',
+            } satisfies StorybookConfig;
+          `;
+          const config = loadConfig(source).parse();
+          expect(config.getNameFromPath(['framework'])).toEqual('foo');
+        });
+
+        it(`supports object expression node with name property`, () => {
+          const source = dedent`
+            import type { StorybookConfig } from '@storybook/react-webpack5';
+  
+            const config = {
+              framework: { name: 'foo', options: { bar: require('baz') } },
+              "otherField": { "name": 'foo', options: { bar: require('baz') } },
+            } satisfies StorybookConfig
+            export default config;
+          `;
+          const config = loadConfig(source).parse();
+          expect(config.getNameFromPath(['framework'])).toEqual('foo');
+          expect(config.getNameFromPath(['otherField'])).toEqual('foo');
+        });
+      });
+
       it(`supports object expression node with name property`, () => {
         const source = dedent`
           import type { StorybookConfig } from '@storybook/react-webpack5';
@@ -826,6 +868,49 @@ describe('ConfigFile', () => {
         expect(config.getNamesFromPath(['addons'])).toEqual(['foo', 'bar']);
         expect(config.getNamesFromPath(['otherField'])).toEqual(['foo', 'bar']);
       });
+
+      describe('satisfies', () => {
+        it(`supports an array with string literal and object expression with name property`, () => {
+          const source = dedent`
+            import type { StorybookConfig } from '@storybook/react-webpack5';
+  
+            const config = {
+              addons: [
+                'foo',
+                { name: 'bar', options: {} },
+              ],
+              "otherField": [
+                "foo",
+                { "name": 'bar', options: {} },
+              ],
+            } satisfies StorybookConfig
+            export default config;
+          `;
+          const config = loadConfig(source).parse();
+          expect(config.getNamesFromPath(['addons'])).toEqual(['foo', 'bar']);
+          expect(config.getNamesFromPath(['otherField'])).toEqual(['foo', 'bar']);
+        });
+
+        it(`supports an array with string literal and object expression with name property without variable`, () => {
+          const source = dedent`
+            import type { StorybookConfig } from '@storybook/react-webpack5';
+  
+            export default {
+              addons: [
+                'foo',
+                { name: 'bar', options: {} },
+              ],
+              "otherField": [
+                "foo",
+                { "name": 'bar', options: {} },
+              ],
+            } satisfies StorybookConfig;
+          `;
+          const config = loadConfig(source).parse();
+          expect(config.getNamesFromPath(['addons'])).toEqual(['foo', 'bar']);
+          expect(config.getNamesFromPath(['otherField'])).toEqual(['foo', 'bar']);
+        });
+      });
     });
 
     it(`returns undefined when accessing a field that does not exist`, () => {

diff --git a/code/lib/csf-tools/src/ConfigFile.ts b/code/lib/csf-tools/src/ConfigFile.ts
@@ -134,10 +134,13 @@ export class ConfigFile {
       ExportDefaultDeclaration: {
         enter({ node, parent }) {
           self.hasDefaultExport = true;
-          const decl =
+          let decl =
             t.isIdentifier(node.declaration) && t.isProgram(parent)
               ? _findVarInitialization(node.declaration.name, parent)
               : node.declaration;
+          if (t.isTSAsExpression(decl) || t.isTSSatisfiesExpression(decl)) {
+            decl = decl.expression;
+          }
 
           if (t.isObjectExpression(decl)) {
             self._exportsObject = decl;