Merge branch 'next' into pq

Author: 43081j

CHANGELOG.md

@@ -53,7 +53,8 @@
   ],
   "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"
+    "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"
   },
   "dependencies": {
     "@babel/core": "^7.24.4",

code/lib/cli/package.json

@@ -41,6 +41,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: {
@@ -433,16 +455,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 = {

code/lib/cli/src/detect.test.ts

@@ -120,7 +120,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;
   }
@@ -133,6 +137,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(
         {
@@ -202,6 +208,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 (fs.existsSync('tsconfig.json')) {
+      language = SupportedLanguage.TYPESCRIPT_4_9;
+    }
   }
 
   return language;

code/lib/cli/src/detect.ts

@@ -0,0 +1,32 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'nuxt',
+    {
+      extraPackages: async ({ builder }) => {
+        return ['@nuxtjs/storybook'];
+      },
+      installStorybookPackage: false,
+      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;

code/lib/cli/src/generators/NUXT/index.ts

@@ -23,13 +23,16 @@ 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',
+  installStorybookPackage: true,
+  installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -202,12 +205,15 @@ export async function baseGenerator(
     staticDir,
     addScripts,
     addMainFile,
+    addPreviewFile,
     addComponents,
     extraMain,
     extensions,
     storybookConfigFolder,
     componentsDestinationPath,
     webpackCompiler,
+    installStorybookPackage,
+    installFrameworkPackages,
   } = {
     ...defaultOptions,
     ...options,
@@ -279,9 +285,9 @@ export async function baseGenerator(
       : extraPackages;
 
   const allPackages = [
-    'storybook',
+    installStorybookPackage ? 'storybook' : undefined,
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...frameworkPackages,
+    ...(installFrameworkPackages ? frameworkPackages : []),
     ...addonPackages,
     ...(extraPackagesToInstall || []),
   ].filter(Boolean);
@@ -323,7 +329,9 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
-  await fse.ensureDir(`./${storybookConfigFolder}`);
+  if (addMainFile || addPreviewFile) {
+    await fse.ensureDir(`./${storybookConfigFolder}`);
+  }
 
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -371,12 +379,14 @@ export async function baseGenerator(
     });
   }
 
-  await configurePreview({
-    frameworkPreviewParts,
-    storybookConfigFolder: storybookConfigFolder as string,
-    language,
-    rendererId,
-  });
+  if (addPreviewFile) {
+    await configurePreview({
+      frameworkPreviewParts,
+      storybookConfigFolder: storybookConfigFolder as string,
+      language,
+      rendererId,
+    });
+  }
 
   if (addScripts) {
     await packageManager.addStorybookCommandInScripts({

code/lib/cli/src/generators/baseGenerator.ts

@@ -29,7 +29,7 @@ describe('configureMain', () => {
     expect(mainConfigContent).toMatchInlineSnapshot(`
       "/** @type { import('@storybook/react-vite').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs)'],
         addons: [],
         framework: {
           name: '@storybook/react-vite',
@@ -95,7 +95,7 @@ describe('configureMain', () => {
 
       /** @type { import('@storybook/react-webpack5').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs)'],
         addons: [
           path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),

code/lib/cli/src/generators/configure.test.ts

@@ -49,6 +49,8 @@ const sanitizeFramework = (framework: string) => {
   return matches[0];
 };
 
+const typescriptExtensions = ['ts', 'tsx', 'mts', 'cts'];
+
 export async function configureMain({
   addons,
   extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'],
@@ -57,10 +59,14 @@ export async function configureMain({
   prefixes = [],
   ...custom
 }: ConfigureMainOptions) {
+  const isLanguageJavascript = language === SupportedLanguage.JAVASCRIPT;
+  const filteredExtensions = extensions.filter((extension) =>
+    isLanguageJavascript ? !typescriptExtensions.includes(extension) : true
+  );
   const srcPath = path.resolve(storybookConfigFolder, '../src');
   const prefix = (await fse.pathExists(srcPath)) ? '../src' : '../stories';
   const config = {
-    stories: [`${prefix}/**/*.mdx`, `${prefix}/**/*.stories.@(${extensions.join('|')})`],
+    stories: [`${prefix}/**/*.mdx`, `${prefix}/**/*.stories.@(${filteredExtensions.join('|')})`],
     addons,
     ...custom,
   };

code/lib/cli/src/generators/configure.ts

@@ -22,13 +22,16 @@ 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;
+  installStorybookPackage?: boolean;
+  installFrameworkPackages?: boolean;
 }
 
 export type Generator<T = void> = (

code/lib/cli/src/generators/types.ts

@@ -143,6 +143,7 @@ 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,