Merge pull request #28479 from storybookjs/revert/26884

Revert: Nuxt support
storybookjs · Jul 8, 2024 · d5b0fb7 · d5b0fb7
2 parents 6d3212b + a5b4809
commit d5b0fb7
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 110 deletions.
diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts
@@ -54,7 +54,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt'];
+  const thirdPartyFrameworks = ['qwik', 'solid'];
   const location = join(
     import.meta.dirname,
     '..',

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

diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts
@@ -18,5 +18,4 @@ export type SupportedFrameworks =
   | 'web-components-vite'
   | 'web-components-webpack5'
   | 'qwik'
-  | 'solid'
-  | 'nuxt';
+  | 'solid';
diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts
@@ -11,5 +11,4 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid'
-  | 'nuxt';
+  | 'solid';
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
@@ -282,8 +282,7 @@
   ],
   "scripts": {
     "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts",
-    "sb": "node ./bin/index.js"
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@babel/core": "^7.24.4",

diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts
@@ -42,28 +42,6 @@ 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: {
@@ -456,6 +434,16 @@ 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/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts
@@ -120,11 +120,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (
-    webpackConfig ||
-    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
-      dependencies.vite !== undefined)
-  ) {
+  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
@@ -137,8 +133,6 @@ 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(
         {
@@ -208,13 +202,6 @@ 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 (fs.existsSync('tsconfig.json')) {
-      language = SupportedLanguage.TYPESCRIPT_4_9;
-    }
   }
 
   return language;

diff --git a/code/lib/cli/src/generators/NUXT/index.ts b/code/lib/cli/src/generators/NUXT/index.ts
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
@@ -23,15 +23,13 @@ const defaultOptions: FrameworkOptions = {
   staticDir: undefined,
   addScripts: true,
   addMainFile: true,
-  addPreviewFile: true,
   addComponents: true,
   webpackCompiler: () => undefined,
   extraMain: undefined,
   framework: undefined,
   extensions: undefined,
   componentsDestinationPath: undefined,
   storybookConfigFolder: '.storybook',
-  installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -204,14 +202,12 @@ export async function baseGenerator(
     staticDir,
     addScripts,
     addMainFile,
-    addPreviewFile,
     addComponents,
     extraMain,
     extensions,
     storybookConfigFolder,
     componentsDestinationPath,
     webpackCompiler,
-    installFrameworkPackages,
   } = {
     ...defaultOptions,
     ...options,
@@ -285,7 +281,7 @@ export async function baseGenerator(
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...(installFrameworkPackages ? frameworkPackages : []),
+    ...frameworkPackages,
     ...addonPackages,
     ...(extraPackagesToInstall || []),
   ].filter(Boolean);
@@ -327,9 +323,7 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
-  if (addMainFile || addPreviewFile) {
-    await fse.ensureDir(`./${storybookConfigFolder}`);
-  }
+  await fse.ensureDir(`./${storybookConfigFolder}`);
 
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -377,14 +371,12 @@ export async function baseGenerator(
     });
   }
 
-  if (addPreviewFile) {
-    await configurePreview({
-      frameworkPreviewParts,
-      storybookConfigFolder: storybookConfigFolder as string,
-      language,
-      rendererId,
-    });
-  }
+  await configurePreview({
+    frameworkPreviewParts,
+    storybookConfigFolder: storybookConfigFolder as string,
+    language,
+    rendererId,
+  });
 
   if (addScripts) {
     await packageManager.addStorybookCommandInScripts({

diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
@@ -22,15 +22,13 @@ export interface FrameworkOptions {
   staticDir?: string;
   addScripts?: boolean;
   addMainFile?: boolean;
-  addPreviewFile?: boolean;
   addComponents?: boolean;
   webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined;
   extraMain?: any;
   extensions?: string[];
   framework?: Record<string, any>;
   storybookConfigFolder?: string;
   componentsDestinationPath?: string;
-  installFrameworkPackages?: boolean;
 }
 
 export type Generator<T = void> = (

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

diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
@@ -28,7 +28,6 @@ import reactNativeGenerator from './generators/REACT_NATIVE';
 import reactScriptsGenerator from './generators/REACT_SCRIPTS';
 import nextjsGenerator from './generators/NEXTJS';
 import vue3Generator from './generators/VUE3';
-import nuxtGenerator from './generators/NUXT';
 import webpackReactGenerator from './generators/WEBPACK_REACT';
 import htmlGenerator from './generators/HTML';
 import webComponentsGenerator from './generators/WEB-COMPONENTS';
@@ -110,11 +109,6 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "Vue 3" app')
         );
 
-      case ProjectType.NUXT:
-        return nuxtGenerator(packageManager, npmOptions, generatorOptions).then(
-          commandLog('Adding Storybook support to your "Nuxt" app')
-        );
-
       case ProjectType.ANGULAR:
         commandLog('Adding Storybook support to your "Angular" app');
         return angularGenerator(packageManager, npmOptions, generatorOptions, options);

diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
@@ -23,7 +23,6 @@ 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' },
 ];
 
 /**
@@ -53,7 +52,6 @@ export enum ProjectType {
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',
   VUE3 = 'VUE3',
-  NUXT = 'NUXT',
   ANGULAR = 'ANGULAR',
   EMBER = 'EMBER',
   WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -119,13 +117,6 @@ export type TemplateConfiguration = {
  * therefore WEBPACK_REACT has to come first, as it's more specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
-  {
-    preset: ProjectType.NUXT,
-    dependencies: ['nuxt'],
-    matcherFunction: ({ dependencies }) => {
-      return dependencies?.every(Boolean) ?? true;
-    },
-  },
   {
     preset: ProjectType.VUE3,
     dependencies: {
@@ -247,7 +238,10 @@ export const supportedTemplates: TemplateConfiguration[] = [
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,
-  dependencies: {},
+  dependencies: {
+    // TODO(blaine): Remove when we support Nuxt 3
+    nuxt: (versionRange) => eqMajor(versionRange, 3),
+  },
   matcherFunction: ({ dependencies }) => {
     return dependencies?.some(Boolean) ?? false;
   },