fix(storybook): handle main.js file correctly in storybook plugin (nr…

…wl#22081)
Coly010 · Mar 1, 2024 · 49861e3 · 49861e3
1 parent ea66a26
commit 49861e3
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 32 deletions.
diff --git a/packages/storybook/src/plugins/plugin.spec.ts b/packages/storybook/src/plugins/plugin.spec.ts
@@ -26,6 +26,10 @@ describe('@nx/storybook/plugin', () => {
       'my-ng-app/project.json',
       JSON.stringify({ name: 'my-ng-app' })
     );
+    tempFs.createFileSync(
+      'my-react-lib/project.json',
+      JSON.stringify({ name: 'my-react-lib' })
+    );
   });
 
   afterEach(() => {
@@ -176,4 +180,66 @@ describe('@nx/storybook/plugin', () => {
       command: 'test-storybook',
     });
   });
+
+  it('should support main.js', () => {
+    tempFs.createFileSync(
+      'my-react-lib/.storybook/main.js',
+      `const config = {
+        stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+        addons: ['@storybook/addon-essentials'],
+        framework: {
+          name: '@storybook/react-vite',
+          options: {
+            builder: {
+              viteConfigPath: 'vite.config.js',
+            },
+          },
+        },
+      };
+      export default config;`
+    );
+    const nodes = createNodesFunction(
+      'my-react-lib/.storybook/main.js',
+      {
+        buildStorybookTargetName: 'build-storybook',
+        staticStorybookTargetName: 'static-storybook',
+        serveStorybookTargetName: 'serve-storybook',
+        testStorybookTargetName: 'test-storybook',
+      },
+      context
+    );
+
+    expect(nodes?.['projects']?.['my-react-lib']?.targets).toBeDefined();
+    expect(
+      nodes?.['projects']?.['my-react-lib']?.targets?.['build-storybook']
+    ).toMatchObject({
+      command: 'storybook build',
+      options: {
+        cwd: 'my-react-lib',
+      },
+      cache: true,
+      outputs: [
+        '{workspaceRoot}/{projectRoot}/storybook-static',
+        '{options.output-dir}',
+        '{options.outputDir}',
+        '{options.o}',
+      ],
+      inputs: [
+        'production',
+        '^production',
+        { externalDependencies: ['storybook', '@storybook/test-runner'] },
+      ],
+    });
+
+    expect(
+      nodes?.['projects']?.['my-react-lib']?.targets?.['storybook']
+    ).toMatchObject({
+      command: 'storybook dev',
+    });
+    expect(
+      nodes?.['projects']?.['my-react-lib']?.targets?.['test-storybook']
+    ).toMatchObject({
+      command: 'test-storybook',
+    });
+  });
 });
diff --git a/packages/storybook/src/plugins/plugin.ts b/packages/storybook/src/plugins/plugin.ts
@@ -116,7 +116,7 @@ function buildStorybookTargets(
 
   const namedInputs = getNamedInputs(projectRoot, context);
 
-  const storybookFramework = getStorybookConfig(configFilePath, context);
+  const storybookFramework = getStorybookFramework(configFilePath, context);
 
   const frameworkIsAngular = storybookFramework === "'@storybook/angular'";
 
@@ -262,7 +262,7 @@ function serveStaticTarget(
   return targetConfig;
 }
 
-function getStorybookConfig(
+function getStorybookFramework(
   configFilePath: string,
   context: CreateNodesContext
 ): string {
@@ -273,47 +273,50 @@ function getStorybookConfig(
     'ImportDeclaration:has(ImportSpecifier:has([text="StorybookConfig"]))'
   )?.[0];
 
+  if (!importDeclarations) {
+    return parseFrameworkName(mainTsJs);
+  }
+
   const storybookConfigImportPackage = tsquery.query(
     importDeclarations,
     'StringLiteral'
   )?.[0];
 
-  let frameworkName: string | undefined;
-
   if (storybookConfigImportPackage?.getText() === `'@storybook/core-common'`) {
-    const frameworkPropertyAssignment = tsquery.query(
-      mainTsJs,
-      `PropertyAssignment:has(Identifier:has([text="framework"]))`
-    )?.[0];
+    return parseFrameworkName(mainTsJs);
+  }
 
-    if (!frameworkPropertyAssignment) {
-      return;
-    }
+  return storybookConfigImportPackage?.getText();
+}
 
-    const propertyAssignments = tsquery.query(
-      frameworkPropertyAssignment,
-      `PropertyAssignment:has(Identifier:has([text="name"]))`
-    );
+function parseFrameworkName(mainTsJs: string) {
+  const frameworkPropertyAssignment = tsquery.query(
+    mainTsJs,
+    `PropertyAssignment:has(Identifier:has([text="framework"]))`
+  )?.[0];
 
-    const namePropertyAssignment = propertyAssignments?.find((expression) => {
-      return expression.getText().startsWith('name');
-    });
+  if (!frameworkPropertyAssignment) {
+    return undefined;
+  }
 
-    if (!namePropertyAssignment) {
-      const storybookConfigImportPackage = tsquery.query(
-        frameworkPropertyAssignment,
-        'StringLiteral'
-      )?.[0];
-      frameworkName = storybookConfigImportPackage?.getText();
-    } else {
-      frameworkName = tsquery
-        .query(namePropertyAssignment, `StringLiteral`)?.[0]
-        ?.getText();
-    }
-  } else {
-    frameworkName = storybookConfigImportPackage?.getText();
+  const propertyAssignments = tsquery.query(
+    frameworkPropertyAssignment,
+    `PropertyAssignment:has(Identifier:has([text="name"]))`
+  );
+
+  const namePropertyAssignment = propertyAssignments?.find((expression) => {
+    return expression.getText().startsWith('name');
+  });
+
+  if (!namePropertyAssignment) {
+    const storybookConfigImportPackage = tsquery.query(
+      frameworkPropertyAssignment,
+      'StringLiteral'
+    )?.[0];
+    return storybookConfigImportPackage?.getText();
   }
-  return frameworkName;
+
+  return tsquery.query(namePropertyAssignment, `StringLiteral`)?.[0]?.getText();
 }
 
 function getOutputs(projectRoot: string): string[] {