Merge pull request #28607 from storybookjs/revert-28479-revert/26884

CLI: Re-Add Nuxt support
storybookjs · Dec 20, 2024 · eeb7001 · eeb7001
2 parents 3d2eaaf + 54ec63f
commit eeb7001
Show file tree

Hide file tree

Showing 22 changed files with 195 additions and 67 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -836,27 +836,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 13
+          parallelism: 14
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 10
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 8
+          parallelism: 9
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -912,27 +912,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - build
       - build-sandboxes:
-          parallelism: 19
+          parallelism: 20
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 16
+          parallelism: 17
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -986,30 +986,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 36
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 36
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 32
           requires:
             - build-sandboxes
       - vitest-integration:

diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts
@@ -2,6 +2,7 @@ import { readdir, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { isNotNil } from 'es-toolkit';
 
 import { dedent, esbuild, getWorkspace, prettier } from '../../../../scripts/prepare/tools';
 import { temporaryFile } from '../../src/common/utils/cli';
@@ -26,7 +27,7 @@ export const generateSourceFiles = async () => {
 async function generateVersionsFile(prettierConfig: prettier.Options | null): Promise<void> {
   const location = join(__dirname, '..', '..', 'src', 'common', 'versions.ts');
 
-  const workspace = await getWorkspace();
+  const workspace = (await getWorkspace()).filter(isNotNil);
 
   const versions = JSON.stringify(
     workspace
@@ -55,7 +56,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'react-rsbuild', 'vue3-rsbuild'];
+  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
   const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
 

diff --git a/code/core/src/cli/detect.test.ts b/code/core/src/cli/detect.test.ts
@@ -43,6 +43,28 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          nuxt: '^3.11.2',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          // Nuxt projects may have Vue 3 as an explicit dependency
+          nuxt: '^3.11.2',
+          vue: '^3.0.0',
+        },
+      },
+    },
+  },
   {
     name: ProjectType.VUE3,
     files: {
@@ -435,16 +457,6 @@ describe('Detect', () => {
       expect(result).toBe(ProjectType.UNDETECTED);
     });
 
-    // TODO(blaine): Remove once Nuxt3 is supported
-    it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
-      const result = detectFrameworkPreset({
-        dependencies: {
-          nuxt: '3.0.0',
-        },
-      });
-      expect(result).toBe(ProjectType.UNSUPPORTED);
-    });
-
     // TODO: The mocking in this test causes tests after it to fail
     it('REACT_SCRIPTS for custom react scripts config', () => {
       const forkedReactScriptsConfig = {

diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts
@@ -123,7 +123,11 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
+  if (
+    webpackConfig ||
+    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
+      dependencies.vite !== undefined)
+  ) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
@@ -138,6 +142,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
     case ProjectType.NEXTJS:
     case ProjectType.EMBER:
       return CoreBuilder.Webpack5;
+    case ProjectType.NUXT:
+      return CoreBuilder.Vite;
     default:
       const { builder } = await prompts(
         {
@@ -207,6 +213,13 @@ export async function detectLanguage(packageManager: JsPackageManager) {
     } else if (semver.lt(typescriptVersion, '3.8.0')) {
       logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
     }
+  } else {
+    // No direct dependency on TypeScript, but could be a transitive dependency
+    // This is eg the case for Nuxt projects, which support a recent version of TypeScript
+    // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+    if (existsSync('tsconfig.json')) {
+      language = SupportedLanguage.TYPESCRIPT_4_9;
+    }
   }
 
   return language;

diff --git a/code/core/src/cli/dirs.ts b/code/core/src/cli/dirs.ts
@@ -40,7 +40,7 @@ export async function getRendererDir(
 ) {
   const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
   const frameworkPackageName =
-    externalFramework?.renderer || externalFramework?.packageName || `@storybook/${renderer}`;
+    externalFramework?.packageName || externalFramework?.renderer || `@storybook/${renderer}`;
 
   const packageJsonPath = join(frameworkPackageName, 'package.json');
 

diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
@@ -153,6 +153,7 @@ export const frameworkToDefaultBuilder: Record<
   'html-vite': CoreBuilder.Vite,
   'html-webpack5': CoreBuilder.Webpack5,
   nextjs: CoreBuilder.Webpack5,
+  nuxt: CoreBuilder.Vite,
   'experimental-nextjs-vite': CoreBuilder.Vite,
   'preact-vite': CoreBuilder.Vite,
   'preact-webpack5': CoreBuilder.Webpack5,

diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts
@@ -1,5 +1,5 @@
 import type {
-  SupportedRenderers as CoreSupportedFrameworks,
+  SupportedRenderers as CoreSupportedRenderers,
   SupportedFrameworks,
 } from '@storybook/core/types';
 
@@ -24,10 +24,16 @@ export type ExternalFramework = {
 export const externalFrameworks: ExternalFramework[] = [
   { name: 'qwik', packageName: 'storybook-framework-qwik' },
   { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
+  {
+    name: 'nuxt',
+    packageName: '@storybook-vue/nuxt',
+    frameworks: ['@storybook-vue/nuxt'],
+    renderer: '@storybook/vue3',
+  },
 ];
 
-/** @deprecated Please use `SupportedFrameworks` from `@storybook/types` instead */
-export type SupportedRenderers = CoreSupportedFrameworks;
+/** @deprecated Please use `SupportedRenderers` from `@storybook/types` instead */
+export type SupportedRenderers = CoreSupportedRenderers;
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
@@ -52,6 +58,7 @@ export enum ProjectType {
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',
   VUE3 = 'VUE3',
+  NUXT = 'NUXT',
   ANGULAR = 'ANGULAR',
   EMBER = 'EMBER',
   WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -121,6 +128,13 @@ export type TemplateConfiguration = {
  * specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
+  {
+    preset: ProjectType.NUXT,
+    dependencies: ['nuxt'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies?.every(Boolean) ?? true;
+    },
+  },
   {
     preset: ProjectType.VUE3,
     dependencies: {
@@ -242,10 +256,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,
-  dependencies: {
-    // TODO(blaine): Remove when we support Nuxt 3
-    nuxt: (versionRange) => eqMajor(versionRange, 3),
-  },
+  dependencies: {},
   matcherFunction: ({ dependencies }) => {
     return dependencies?.some(Boolean) ?? false;
   },

diff --git a/code/core/src/common/utils/framework-to-renderer.ts b/code/core/src/common/utils/framework-to-renderer.ts
@@ -24,6 +24,7 @@ export const frameworkToRenderer: Record<
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
   'vue3-webpack5': 'vue3',
+  nuxt: 'vue3',
   'web-components-vite': 'web-components',
   'web-components-webpack5': 'web-components',
   'react-rsbuild': 'react',

diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts
@@ -21,5 +21,6 @@ export type SupportedFrameworks =
   | 'web-components-webpack5'
   | 'qwik'
   | 'solid'
+  | 'nuxt'
   | 'react-rsbuild'
   | 'vue3-rsbuild';
diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts
@@ -11,4 +11,5 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid';
+  | 'solid'
+  | 'nuxt';
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
@@ -191,7 +191,7 @@ test.describe('addon-docs', () => {
 
   test('should resolve react to the correct version', async ({ page }) => {
     test.skip(
-      templateName?.includes('nextjs'),
+      templateName?.includes('nextjs') || templateName?.includes('nuxt'),
       'TODO: remove this once sandboxes are synced (SOON!!)'
     );
     // Arrange - Navigate to MDX docs

diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -400,6 +400,16 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'nuxt-vite/default-ts': {
+    name: 'Nuxt v3 (Vite | TypeScript)',
+    script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}',
+    expected: {
+      framework: '@storybook-vue/nuxt',
+      renderer: '@storybook/vue3',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
   'html-webpack/default': {
     name: 'HTML Latest (Webpack | JavaScript)',
     script: 'yarn create webpack5-html {{beforeDir}}',
@@ -809,6 +819,7 @@ export const normal: TemplateKey[] = [
   'react-vite/default-ts',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
+  'nuxt-vite/default-ts',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',

diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
@@ -311,7 +311,8 @@
   ],
   "scripts": {
     "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "prep": "jiti ../../../scripts/prepare/bundle.ts",
+    "sb": "node ./bin/index.js"
   },
   "dependencies": {
     "@storybook/core": "workspace:*"

diff --git a/code/lib/create-storybook/src/generators/NUXT/index.ts b/code/lib/create-storybook/src/generators/NUXT/index.ts
@@ -0,0 +1,31 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'vue3',
+    {
+      extraPackages: async () => {
+        return ['@nuxtjs/storybook'];
+      },
+      installFrameworkPackages: false,
+      componentsDestinationPath: './components',
+      extraMain: {
+        stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+      },
+    },
+    'nuxt'
+  );
+  // Add nuxtjs/storybook to nuxt.config.js
+  await packageManager.runPackageCommand('nuxi', [
+    'module',
+    'add',
+    '@nuxtjs/storybook',
+    '--skipInstall',
+  ]);
+};
+
+export default generator;