From b9bf7d39ff58df17365fe309cd629e5b4669ea78 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Jul 2024 15:05:45 +0200 Subject: [PATCH 01/19] Revert "Revert: Nuxt support" --- code/core/scripts/helpers/sourcefiles.ts | 2 +- .../src/common/utils/framework-to-renderer.ts | 1 + code/core/src/types/modules/frameworks.ts | 3 +- code/core/src/types/modules/renderers.ts | 3 +- code/lib/cli/package.json | 3 +- code/lib/cli/src/detect.test.ts | 32 +++++++++++++------ code/lib/cli/src/detect.ts | 15 ++++++++- code/lib/cli/src/generators/NUXT/index.ts | 31 ++++++++++++++++++ code/lib/cli/src/generators/baseGenerator.ts | 24 +++++++++----- code/lib/cli/src/generators/types.ts | 2 ++ code/lib/cli/src/helpers.ts | 1 + code/lib/cli/src/initiate.ts | 6 ++++ code/lib/cli/src/project_types.ts | 14 +++++--- 13 files changed, 110 insertions(+), 27 deletions(-) create mode 100644 code/lib/cli/src/generators/NUXT/index.ts diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts index 867f401ad15b..df232a7a9ee7 100644 --- 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 { - const thirdPartyFrameworks = ['qwik', 'solid']; + const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt']; 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 index a34ac765c2c7..8efc821a8e43 100644 --- a/code/core/src/common/utils/framework-to-renderer.ts +++ b/code/core/src/common/utils/framework-to-renderer.ts @@ -23,6 +23,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', // renderers diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 9ae2cc538b51..9feef71ffdb8 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -18,4 +18,5 @@ export type SupportedFrameworks = | 'web-components-vite' | 'web-components-webpack5' | 'qwik' - | 'solid'; + | 'solid' + | 'nuxt'; diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts index 4fcf0be99d87..e6fd0f650bf3 100644 --- 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/lib/cli/package.json b/code/lib/cli/package.json index 3b7f10bf0838..3299261d8e7a 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -282,7 +282,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", diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index cf21f8bc423c..4ea3d075babe 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -42,6 +42,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: { @@ -434,16 +456,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/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 440336f74bb8..084890783427 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.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; diff --git a/code/lib/cli/src/generators/NUXT/index.ts b/code/lib/cli/src/generators/NUXT/index.ts new file mode 100644 index 000000000000..3832f2d6551d --- /dev/null +++ b/code/lib/cli/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, + 'nuxt', + { + extraPackages: async ({ builder }) => { + 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; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 26af38afdbf4..2cd67d52d52e 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -23,6 +23,7 @@ const defaultOptions: FrameworkOptions = { staticDir: undefined, addScripts: true, addMainFile: true, + addPreviewFile: true, addComponents: true, webpackCompiler: () => undefined, extraMain: undefined, @@ -30,6 +31,7 @@ const defaultOptions: FrameworkOptions = { extensions: undefined, componentsDestinationPath: undefined, storybookConfigFolder: '.storybook', + installFrameworkPackages: true, }; const getBuilderDetails = (builder: string) => { @@ -202,12 +204,14 @@ export async function baseGenerator( staticDir, addScripts, addMainFile, + addPreviewFile, addComponents, extraMain, extensions, storybookConfigFolder, componentsDestinationPath, webpackCompiler, + installFrameworkPackages, } = { ...defaultOptions, ...options, @@ -281,7 +285,7 @@ export async function baseGenerator( const allPackages = [ 'storybook', getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`, - ...frameworkPackages, + ...(installFrameworkPackages ? frameworkPackages : []), ...addonPackages, ...(extraPackagesToInstall || []), ].filter(Boolean); @@ -323,7 +327,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 +377,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({ diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index d1478019be0a..6040840a3956 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -22,6 +22,7 @@ export interface FrameworkOptions { staticDir?: string; addScripts?: boolean; addMainFile?: boolean; + addPreviewFile?: boolean; addComponents?: boolean; webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined; extraMain?: any; @@ -29,6 +30,7 @@ export interface FrameworkOptions { framework?: Record; storybookConfigFolder?: string; componentsDestinationPath?: string; + installFrameworkPackages?: boolean; } export type Generator = ( diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index f2256e11c2b8..2c467b27bc8b 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -143,6 +143,7 @@ export const frameworkToDefaultBuilder: Record '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 index 747e2c6f6ea7..abf5ef0f404b 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -28,6 +28,7 @@ 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'; @@ -109,6 +110,11 @@ const installStorybook = async ( 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 index b0f6c889c7c5..404c8f01d9b3 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -23,6 +23,7 @@ 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' }, ]; /** @@ -52,6 +53,7 @@ export enum ProjectType { WEBPACK_REACT = 'WEBPACK_REACT', NEXTJS = 'NEXTJS', VUE3 = 'VUE3', + NUXT = 'NUXT', ANGULAR = 'ANGULAR', EMBER = 'EMBER', WEB_COMPONENTS = 'WEB_COMPONENTS', @@ -117,6 +119,13 @@ 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: { @@ -238,10 +247,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; }, From a729e4f7582ad357cee8357d381e35e0a59f6c4c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 14 Aug 2024 14:39:20 +0200 Subject: [PATCH 02/19] dedupe --- code/yarn.lock | 348 +------------------------------------------------ 1 file changed, 3 insertions(+), 345 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 2aa5193261ef..e0bdf07ca5ca 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2459,15 +2459,6 @@ __metadata: languageName: node linkType: hard -"@emnapi/runtime@npm:^1.1.0": - version: 1.1.1 - resolution: "@emnapi/runtime@npm:1.1.1" - dependencies: - tslib: "npm:^2.4.0" - checksum: 10c0/c11ee57abf0ec643e64ccdace4b4fcc0b0c7b1117a191f969e84ae3669841aa90d2c17fa35b73f5a66fc0c843c8caca7bf11187faaeaa526bcfb7dbfb9b85de9 - languageName: node - linkType: hard - "@emnapi/runtime@npm:^1.1.1": version: 1.2.0 resolution: "@emnapi/runtime@npm:1.2.0" @@ -3390,18 +3381,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-darwin-arm64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-darwin-arm64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-darwin-arm64": - optional: true - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - "@img/sharp-darwin-arm64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-darwin-arm64@npm:0.33.4" @@ -3414,18 +3393,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-darwin-x64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-darwin-x64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-darwin-x64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-darwin-x64": - optional: true - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - "@img/sharp-darwin-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-darwin-x64@npm:0.33.4" @@ -3494,18 +3461,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linux-arm64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linux-arm64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linux-arm64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linux-arm64": - optional: true - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - "@img/sharp-linux-arm64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-arm64@npm:0.33.4" @@ -3518,18 +3473,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linux-arm@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linux-arm@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linux-arm": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linux-arm": - optional: true - conditions: os=linux & cpu=arm & libc=glibc - languageName: node - linkType: hard - "@img/sharp-linux-arm@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-arm@npm:0.33.4" @@ -3542,18 +3485,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linux-s390x@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linux-s390x@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linux-s390x": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linux-s390x": - optional: true - conditions: os=linux & cpu=s390x & libc=glibc - languageName: node - linkType: hard - "@img/sharp-linux-s390x@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-s390x@npm:0.33.4" @@ -3566,18 +3497,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linux-x64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linux-x64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linux-x64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linux-x64": - optional: true - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - "@img/sharp-linux-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linux-x64@npm:0.33.4" @@ -3590,18 +3509,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linuxmusl-arm64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linuxmusl-arm64": - optional: true - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - "@img/sharp-linuxmusl-arm64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4" @@ -3614,18 +3521,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-linuxmusl-x64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" - dependencies: - "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" - dependenciesMeta: - "@img/sharp-libvips-linuxmusl-x64": - optional: true - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - "@img/sharp-linuxmusl-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4" @@ -3638,15 +3533,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-wasm32@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-wasm32@npm:0.33.3" - dependencies: - "@emnapi/runtime": "npm:^1.1.0" - conditions: cpu=wasm32 - languageName: node - linkType: hard - "@img/sharp-wasm32@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-wasm32@npm:0.33.4" @@ -3656,13 +3542,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-win32-ia32@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-win32-ia32@npm:0.33.3" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - "@img/sharp-win32-ia32@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-win32-ia32@npm:0.33.4" @@ -3670,13 +3549,6 @@ __metadata: languageName: node linkType: hard -"@img/sharp-win32-x64@npm:0.33.3": - version: 0.33.3 - resolution: "@img/sharp-win32-x64@npm:0.33.3" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@img/sharp-win32-x64@npm:0.33.4": version: 0.33.4 resolution: "@img/sharp-win32-x64@npm:0.33.4" @@ -3939,13 +3811,6 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.1.0": - version: 14.1.0 - resolution: "@next/env@npm:14.1.0" - checksum: 10c0/f45ce1e3dad87cdbddc58b06bd411f44a6d21dfc2c344d02a5e1b07f56fbc9a39e192c0b0917df9f2e9e4e2156306a8c78f173ca4b53932c2793e67797462a23 - languageName: node - linkType: hard - "@next/env@npm:14.2.5, @next/env@npm:^14.2.5": version: 14.2.5 resolution: "@next/env@npm:14.2.5" @@ -3953,13 +3818,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-darwin-arm64@npm:14.1.0" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - "@next/swc-darwin-arm64@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-darwin-arm64@npm:14.2.5" @@ -3967,13 +3825,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-darwin-x64@npm:14.1.0" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - "@next/swc-darwin-x64@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-darwin-x64@npm:14.2.5" @@ -3981,13 +3832,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - "@next/swc-linux-arm64-gnu@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-linux-arm64-gnu@npm:14.2.5" @@ -3995,13 +3839,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-arm64-musl@npm:14.1.0" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - "@next/swc-linux-arm64-musl@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-linux-arm64-musl@npm:14.2.5" @@ -4009,13 +3846,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-x64-gnu@npm:14.1.0" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - "@next/swc-linux-x64-gnu@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-linux-x64-gnu@npm:14.2.5" @@ -4023,13 +3853,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-x64-musl@npm:14.1.0" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - "@next/swc-linux-x64-musl@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-linux-x64-musl@npm:14.2.5" @@ -4037,13 +3860,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - "@next/swc-win32-arm64-msvc@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-win32-arm64-msvc@npm:14.2.5" @@ -4051,13 +3867,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - "@next/swc-win32-ia32-msvc@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-win32-ia32-msvc@npm:14.2.5" @@ -4065,13 +3874,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-x64-msvc@npm:14.1.0" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@next/swc-win32-x64-msvc@npm:14.2.5": version: 14.2.5 resolution: "@next/swc-win32-x64-msvc@npm:14.2.5" @@ -7233,15 +7035,6 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.5.2": - version: 0.5.2 - resolution: "@swc/helpers@npm:0.5.2" - dependencies: - tslib: "npm:^2.4.0" - checksum: 10c0/b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164 - languageName: node - linkType: hard - "@swc/helpers@npm:0.5.5": version: 0.5.5 resolution: "@swc/helpers@npm:0.5.5" @@ -17015,18 +16808,7 @@ __metadata: languageName: node linkType: hard -"image-size@npm:^1.0.0": - version: 1.0.2 - resolution: "image-size@npm:1.0.2" - dependencies: - queue: "npm:6.0.2" - bin: - image-size: bin/image-size.js - checksum: 10c0/df518606c75d0ee12a6d7e822a64ef50d9eabbb303dcee8c9df06bad94e49b4d4680b9003968203f239ff39a9cc51d4ff1781cd331cc0a4b3b858d9fc9836c68 - languageName: node - linkType: hard - -"image-size@npm:^1.1.1": +"image-size@npm:^1.0.0, image-size@npm:^1.1.1": version: 1.1.1 resolution: "image-size@npm:1.1.1" dependencies: @@ -20902,62 +20684,7 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.1.0": - version: 14.1.0 - resolution: "next@npm:14.1.0" - dependencies: - "@next/env": "npm:14.1.0" - "@next/swc-darwin-arm64": "npm:14.1.0" - "@next/swc-darwin-x64": "npm:14.1.0" - "@next/swc-linux-arm64-gnu": "npm:14.1.0" - "@next/swc-linux-arm64-musl": "npm:14.1.0" - "@next/swc-linux-x64-gnu": "npm:14.1.0" - "@next/swc-linux-x64-musl": "npm:14.1.0" - "@next/swc-win32-arm64-msvc": "npm:14.1.0" - "@next/swc-win32-ia32-msvc": "npm:14.1.0" - "@next/swc-win32-x64-msvc": "npm:14.1.0" - "@swc/helpers": "npm:0.5.2" - busboy: "npm:1.6.0" - caniuse-lite: "npm:^1.0.30001579" - graceful-fs: "npm:^4.2.11" - postcss: "npm:8.4.31" - styled-jsx: "npm:5.1.1" - peerDependencies: - "@opentelemetry/api": ^1.1.0 - react: ^18.2.0 - react-dom: ^18.2.0 - sass: ^1.3.0 - dependenciesMeta: - "@next/swc-darwin-arm64": - optional: true - "@next/swc-darwin-x64": - optional: true - "@next/swc-linux-arm64-gnu": - optional: true - "@next/swc-linux-arm64-musl": - optional: true - "@next/swc-linux-x64-gnu": - optional: true - "@next/swc-linux-x64-musl": - optional: true - "@next/swc-win32-arm64-msvc": - optional: true - "@next/swc-win32-ia32-msvc": - optional: true - "@next/swc-win32-x64-msvc": - optional: true - peerDependenciesMeta: - "@opentelemetry/api": - optional: true - sass: - optional: true - bin: - next: dist/bin/next - checksum: 10c0/dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f - languageName: node - linkType: hard - -"next@npm:^14.2.5": +"next@npm:^14.1.0, next@npm:^14.2.5": version: 14.2.5 resolution: "next@npm:14.2.5" dependencies: @@ -25190,76 +24917,7 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.33.3": - version: 0.33.3 - resolution: "sharp@npm:0.33.3" - dependencies: - "@img/sharp-darwin-arm64": "npm:0.33.3" - "@img/sharp-darwin-x64": "npm:0.33.3" - "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" - "@img/sharp-libvips-darwin-x64": "npm:1.0.2" - "@img/sharp-libvips-linux-arm": "npm:1.0.2" - "@img/sharp-libvips-linux-arm64": "npm:1.0.2" - "@img/sharp-libvips-linux-s390x": "npm:1.0.2" - "@img/sharp-libvips-linux-x64": "npm:1.0.2" - "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" - "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" - "@img/sharp-linux-arm": "npm:0.33.3" - "@img/sharp-linux-arm64": "npm:0.33.3" - "@img/sharp-linux-s390x": "npm:0.33.3" - "@img/sharp-linux-x64": "npm:0.33.3" - "@img/sharp-linuxmusl-arm64": "npm:0.33.3" - "@img/sharp-linuxmusl-x64": "npm:0.33.3" - "@img/sharp-wasm32": "npm:0.33.3" - "@img/sharp-win32-ia32": "npm:0.33.3" - "@img/sharp-win32-x64": "npm:0.33.3" - color: "npm:^4.2.3" - detect-libc: "npm:^2.0.3" - semver: "npm:^7.6.0" - dependenciesMeta: - "@img/sharp-darwin-arm64": - optional: true - "@img/sharp-darwin-x64": - optional: true - "@img/sharp-libvips-darwin-arm64": - optional: true - "@img/sharp-libvips-darwin-x64": - optional: true - "@img/sharp-libvips-linux-arm": - optional: true - "@img/sharp-libvips-linux-arm64": - optional: true - "@img/sharp-libvips-linux-s390x": - optional: true - "@img/sharp-libvips-linux-x64": - optional: true - "@img/sharp-libvips-linuxmusl-arm64": - optional: true - "@img/sharp-libvips-linuxmusl-x64": - optional: true - "@img/sharp-linux-arm": - optional: true - "@img/sharp-linux-arm64": - optional: true - "@img/sharp-linux-s390x": - optional: true - "@img/sharp-linux-x64": - optional: true - "@img/sharp-linuxmusl-arm64": - optional: true - "@img/sharp-linuxmusl-x64": - optional: true - "@img/sharp-wasm32": - optional: true - "@img/sharp-win32-ia32": - optional: true - "@img/sharp-win32-x64": - optional: true - checksum: 10c0/12f5203426595b4e64c807162a6d52358b591d25fbb414a51fe38861584759fba38485be951ed98d15be3dfe21f2def5336f78ca35bf8bbd22d88cc78ca03f2a - languageName: node - linkType: hard - -"sharp@npm:^0.33.4": +"sharp@npm:^0.33.3, sharp@npm:^0.33.4": version: 0.33.4 resolution: "sharp@npm:0.33.4" dependencies: From 0356e4468e9aefd9f49ee9a0761670746a9c1b0a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 14 Aug 2024 14:50:54 +0200 Subject: [PATCH 03/19] fixes --- code/core/src/cli/detect.ts | 2 +- code/frameworks/nextjs/src/routing/app-router-provider.tsx | 1 + code/lib/{cli => create-storybook}/src/generators/NUXT/index.ts | 0 3 files changed, 2 insertions(+), 1 deletion(-) rename code/lib/{cli => create-storybook}/src/generators/NUXT/index.ts (100%) diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts index 92e884a6dd7b..8a51241374ae 100644 --- a/code/core/src/cli/detect.ts +++ b/code/core/src/cli/detect.ts @@ -215,7 +215,7 @@ export async function detectLanguage(packageManager: JsPackageManager) { // 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')) { + if (existsSync('tsconfig.json')) { language = SupportedLanguage.TYPESCRIPT_4_9; } } diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index 5685ec8bbf85..9f37f5768e15 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -101,6 +101,7 @@ export const AppRouterProvider: React.FC {children} diff --git a/code/lib/cli/src/generators/NUXT/index.ts b/code/lib/create-storybook/src/generators/NUXT/index.ts similarity index 100% rename from code/lib/cli/src/generators/NUXT/index.ts rename to code/lib/create-storybook/src/generators/NUXT/index.ts From 846bf4bf4ba83135bbf2d66b9cfebff64dd87f5a Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Fri, 23 Aug 2024 13:04:26 +0200 Subject: [PATCH 04/19] add nuxt sandbox --- code/lib/cli-storybook/src/sandbox-templates.ts | 12 ++++++++++++ scripts/utils/yarn.ts | 2 ++ 2 files changed, 14 insertions(+) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index ffdbccdd5e4d..e388d24d6737 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -354,6 +354,17 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, + 'nuxt/v3-vite': { + name: 'Nuxt v3 (Vite | TypeScript)', + script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}', + inDevelopment: true, + expected: { + framework: '@storybook-vue/nuxt', + renderer: '@storybook/vue3', + builder: '@storybook/builder-vite', + }, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'html-webpack/default': { name: 'HTML Latest (Webpack | JavaScript)', script: 'yarn create webpack5-html {{beforeDir}}', @@ -722,6 +733,7 @@ export const normal: TemplateKey[] = [ 'react-vite/default-ts', 'angular-cli/default-ts', 'vue3-vite/default-ts', + 'nuxt/v3-vite', 'lit-vite/default-ts', 'svelte-vite/default-ts', 'svelte-kit/skeleton-ts', diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 95f686a382a4..9e29b91aeedf 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -123,6 +123,8 @@ export const configureYarn2ForVerdaccio = async ({ command.push( `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'` ); + } else if (key.includes('nuxt')) { + // Nothing to do for Nuxt } else { // Discard all YN0013 - FETCH_NOT_CACHED messages // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY From 00ffb6bdc81977f0196d9d63861ee92f1a620ad8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 10 Sep 2024 14:48:55 +0200 Subject: [PATCH 05/19] Update sandbox template for Nuxt v3 (Vite | TypeScript) --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index c30d740a245e..873804df841a 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -349,7 +349,7 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, - 'nuxt/v3-vite': { + 'nuxt-vite/default-ts': { name: 'Nuxt v3 (Vite | TypeScript)', script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}', inDevelopment: true, From a4f3e0c77231d2eb58f59487ecd17bf512d53888 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 28 Oct 2024 12:50:02 +0100 Subject: [PATCH 06/19] Fix sandbox generation for Nuxt --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- scripts/sandbox/generate.ts | 2 +- scripts/tasks/sandbox-parts.ts | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index bb48c4ea7e9d..508ad33f342d 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -386,7 +386,7 @@ const baseTemplates = { renderer: '@storybook/vue3', builder: '@storybook/builder-vite', }, - skipTasks: ['e2e-tests-dev', 'bench'], + skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'html-webpack/default': { name: 'HTML Latest (Webpack | JavaScript)', diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 495d142c0196..18ce30660135 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -42,7 +42,7 @@ const sbInit = async ( debug?: boolean ) => { const sbCliBinaryPath = join(__dirname, `../../code/lib/create-storybook/bin/index.cjs`); - console.log(`🎁 Installing storybook`); + console.log(`🎁 Installing Storybook`); const env = { STORYBOOK_DISABLE_TELEMETRY: 'true', ...envVars }; const fullFlags = ['--yes', ...(flags || [])]; await runCommand(`${sbCliBinaryPath} ${fullFlags.join(' ')}`, { cwd, env }, debug); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 7123357ae93f..1d8e42f85ae4 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -565,9 +565,10 @@ export const addStories: Task['run'] = async ( { sandboxDir, template, key }, { addon: extraAddons, disableDocs } ) => { - logger.log('💃 adding stories'); + logger.log('💃 Adding stories'); const cwd = sandboxDir; - const storiesPath = await findFirstPath([join('src', 'stories'), 'stories'], { cwd }); + const storiesPath = + (await findFirstPath([join('src', 'stories'), 'stories'], { cwd })) || 'stories'; const mainConfig = await readConfig({ fileName: 'main', cwd }); const packageManager = JsPackageManagerFactory.getPackageManager({}, sandboxDir); From 94396773a747b85321c8f1a0af9168ceae675f2d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 28 Oct 2024 13:25:38 +0100 Subject: [PATCH 07/19] Refactor sandbox generation for Nuxt templates --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- code/lib/create-storybook/src/generators/NUXT/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 508ad33f342d..c4ede2ed6810 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -759,7 +759,7 @@ export const normal: TemplateKey[] = [ 'react-vite/default-ts', 'angular-cli/default-ts', 'vue3-vite/default-ts', - 'nuxt/v3-vite', + 'nuxt-vite/default-ts', 'lit-vite/default-ts', 'svelte-vite/default-ts', 'svelte-kit/skeleton-ts', diff --git a/code/lib/create-storybook/src/generators/NUXT/index.ts b/code/lib/create-storybook/src/generators/NUXT/index.ts index 3832f2d6551d..be5a98793a80 100644 --- a/code/lib/create-storybook/src/generators/NUXT/index.ts +++ b/code/lib/create-storybook/src/generators/NUXT/index.ts @@ -8,7 +8,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { options, 'nuxt', { - extraPackages: async ({ builder }) => { + extraPackages: async () => { return ['@nuxtjs/storybook']; }, installFrameworkPackages: false, From 4ca546bcfe857f2c39690ecb8348ad4eab2592b3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 28 Oct 2024 14:43:45 +0100 Subject: [PATCH 08/19] Refactor parallelism values in CircleCI config to add Nuxt sandbox --- .circleci/config.yml | 30 +++++++++---------- .../cli-storybook/src/sandbox-templates.ts | 1 - 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ffe339dcda97..f014d2fd4835 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -772,19 +772,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 14 + parallelism: 15 requires: - build - build-sandboxes: - parallelism: 14 + parallelism: 15 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 11 + parallelism: 12 requires: - build-sandboxes - e2e-production: - parallelism: 9 + parallelism: 10 requires: - build-sandboxes - e2e-dev: @@ -792,7 +792,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 9 + parallelism: 10 requires: - build-sandboxes - vitest-integration: @@ -847,19 +847,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 20 + parallelism: 21 requires: - build - build-sandboxes: - parallelism: 20 + parallelism: 21 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 17 + parallelism: 18 requires: - build-sandboxes - e2e-production: - parallelism: 15 + parallelism: 16 requires: - build-sandboxes - e2e-dev: @@ -867,7 +867,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 15 + parallelism: 16 requires: - build-sandboxes - vitest-integration: @@ -920,22 +920,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 38 + parallelism: 39 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 38 + parallelism: 39 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 35 + parallelism: 36 requires: - build-sandboxes - e2e-production: - parallelism: 33 + parallelism: 34 requires: - build-sandboxes - e2e-dev: @@ -943,7 +943,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 33 + parallelism: 34 requires: - build-sandboxes - vitest-integration: diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index c4ede2ed6810..65d1b2652b0e 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -380,7 +380,6 @@ const baseTemplates = { 'nuxt-vite/default-ts': { name: 'Nuxt v3 (Vite | TypeScript)', script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}', - inDevelopment: true, expected: { framework: '@storybook-vue/nuxt', renderer: '@storybook/vue3', From 1f8bcbbe967fcba630acb034f1decadd4d09224c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Nov 2024 13:57:46 +0100 Subject: [PATCH 09/19] Skip e2e tests for nuxt sandbox --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 65d1b2652b0e..c3c4357caf6c 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -385,7 +385,7 @@ const baseTemplates = { renderer: '@storybook/vue3', builder: '@storybook/builder-vite', }, - skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], + skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'], }, 'html-webpack/default': { name: 'HTML Latest (Webpack | JavaScript)', From 19f21e042d95423699cc6c2aa326b79140a81586 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Nov 2024 14:01:29 +0100 Subject: [PATCH 10/19] Fix typings --- code/core/scripts/helpers/sourcefiles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts index e9c99aa241d2..e7a5394cb9b7 100644 --- 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 { const location = join(__dirname, '..', '..', 'src', 'common', 'versions.ts'); - const workspace = await getWorkspace(); + const workspace = (await getWorkspace()).filter(isNotNil); const versions = JSON.stringify( workspace From bf7484a98c148c3da5ad7b8fe64d77bc006c1767 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Nov 2024 14:12:24 +0100 Subject: [PATCH 11/19] Fix CI scripts --- .circleci/config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index f014d2fd4835..c2a6e5b068d8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -784,7 +784,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 10 + parallelism: 9 requires: - build-sandboxes - e2e-dev: @@ -859,7 +859,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 16 + parallelism: 15 requires: - build-sandboxes - e2e-dev: @@ -935,7 +935,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 34 + parallelism: 33 requires: - build-sandboxes - e2e-dev: From e8daf4e652024d1f4876e28c22f05f755367aa38 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 2 Dec 2024 15:50:16 +0100 Subject: [PATCH 12/19] Use vue3 template stories for sandbox creation --- code/core/src/cli/dirs.ts | 2 +- code/core/src/cli/project_types.ts | 13 +++++--- code/core/src/types/modules/frameworks.ts | 1 + .../src/generators/NUXT/index.ts | 2 +- .../src/generators/baseGenerator.ts | 33 ++++++++++++------- .../src/generators/configure.ts | 4 +-- 6 files changed, 36 insertions(+), 19 deletions(-) diff --git a/code/core/src/cli/dirs.ts b/code/core/src/cli/dirs.ts index 11ca9cb67441..6e6867e38d57 100644 --- 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/project_types.ts b/code/core/src/cli/project_types.ts index f57c63da08b7..1a35703e3c1f 100644 --- 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,11 +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' }, + { + 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', diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 7ba44134d6a5..8e0ec1a7eea0 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -8,6 +8,7 @@ export type SupportedFrameworks = | 'nextjs' | 'preact-vite' | 'preact-webpack5' + | 'react-native-web-vite' | 'react-vite' | 'react-webpack5' | 'server-webpack5' diff --git a/code/lib/create-storybook/src/generators/NUXT/index.ts b/code/lib/create-storybook/src/generators/NUXT/index.ts index be5a98793a80..a7d7be640eb7 100644 --- a/code/lib/create-storybook/src/generators/NUXT/index.ts +++ b/code/lib/create-storybook/src/generators/NUXT/index.ts @@ -6,7 +6,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { packageManager, npmOptions, options, - 'nuxt', + 'vue3', { extraPackages: async () => { return ['@nuxtjs/storybook']; diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts index 84434fdd8438..bb6cdd00cc9f 100644 --- a/code/lib/create-storybook/src/generators/baseGenerator.ts +++ b/code/lib/create-storybook/src/generators/baseGenerator.ts @@ -1,14 +1,14 @@ import { mkdir } from 'node:fs/promises'; import { dirname, join } from 'node:path'; -import type { NpmOptions } from 'storybook/internal/cli'; -import type { Builder, SupportedRenderers } from 'storybook/internal/cli'; +import type { Builder, NpmOptions } from 'storybook/internal/cli'; import { SupportedLanguage, externalFrameworks } from 'storybook/internal/cli'; import { copyTemplateFiles } from 'storybook/internal/cli'; import { configureEslintPlugin, extractEslintInfo } from 'storybook/internal/cli'; import { detectBuilder } from 'storybook/internal/cli'; import type { JsPackageManager } from 'storybook/internal/common'; import { getPackageDetails, versions as packageVersions } from 'storybook/internal/common'; +import type { SupportedRenderers } from 'storybook/internal/types'; import type { SupportedFrameworks } from 'storybook/internal/types'; // eslint-disable-next-line depend/ban-dependencies @@ -84,13 +84,10 @@ const getFrameworkPackage = (framework: string | undefined, renderer: string, bu ); } - if (externalFramework.frameworks !== undefined) { - return externalFramework.frameworks.find((item) => - item.match(new RegExp(`-${storybookBuilder}`)) - ); - } - - return externalFramework.packageName; + return ( + externalFramework.frameworks?.find((item) => item.match(new RegExp(`-${storybookBuilder}`))) ?? + externalFramework.packageName + ); }; const getRendererPackage = (framework: string | undefined, renderer: string) => { @@ -119,6 +116,7 @@ const getFrameworkDetails = ( framework?: string; renderer?: string; rendererId: SupportedRenderers; + frameworkPackage?: string; } => { const frameworkPackage = getFrameworkPackage(framework, renderer, builder); invariant(frameworkPackage, 'Missing framework package.'); @@ -146,6 +144,7 @@ const getFrameworkDetails = ( return { packages: [rendererPackage, frameworkPackage], framework: frameworkPackagePath, + frameworkPackage, rendererId: renderer, type: 'framework', }; @@ -171,8 +170,18 @@ const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDeta const hasInteractiveStories = (rendererId: SupportedRenderers) => ['react', 'angular', 'preact', 'svelte', 'vue3', 'html', 'solid', 'qwik'].includes(rendererId); -const hasFrameworkTemplates = (framework?: SupportedFrameworks) => - framework ? ['angular', 'nextjs'].includes(framework) : false; +const hasFrameworkTemplates = (framework?: SupportedFrameworks) => { + if (!framework) { + return false; + } + // Nuxt has framework templates, but for sandboxes we create them from the Vue3 renderer + // As the Nuxt framework templates are not compatible with the stories we need for CI. + // See: https://github.com/storybookjs/storybook/pull/28607#issuecomment-2467903327 + if (framework === 'nuxt') { + return process.env.IN_STORYBOOK_SANDBOX !== 'true'; + } + return ['angular', 'nextjs'].includes(framework); +}; export async function baseGenerator( packageManager: JsPackageManager, @@ -195,6 +204,7 @@ export async function baseGenerator( rendererId, framework: frameworkInclude, builder: builderInclude, + frameworkPackage, } = getFrameworkDetails( renderer, builder, @@ -360,6 +370,7 @@ export async function baseGenerator( name: frameworkInclude, options: options.framework || {}, }, + frameworkPackage, prefixes, storybookConfigFolder, addons: shouldApplyRequireWrapperOnPackageNames diff --git a/code/lib/create-storybook/src/generators/configure.ts b/code/lib/create-storybook/src/generators/configure.ts index c7002c58c045..401509dc2399 100644 --- a/code/lib/create-storybook/src/generators/configure.ts +++ b/code/lib/create-storybook/src/generators/configure.ts @@ -13,6 +13,7 @@ interface ConfigureMainOptions { storybookConfigFolder: string; language: SupportedLanguage; prefixes: string[]; + frameworkPackage: string; /** * Extra values for main.js * @@ -61,6 +62,7 @@ export async function configureMain({ extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'], storybookConfigFolder, language, + frameworkPackage, prefixes = [], ...custom }: ConfigureMainOptions) { @@ -78,8 +80,6 @@ export async function configureMain({ let mainConfigTemplate = dedent`<><>const config<> = <>; export default config;`; - const frameworkPackage = sanitizeFramework(custom.framework?.name); - if (!frameworkPackage) { mainConfigTemplate = mainConfigTemplate.replace('<>', '').replace('<>', ''); logger.warn('Could not find framework package name'); From dee3222d73ca549cbb4db7b403a7fb097ee212fb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 2 Dec 2024 15:56:10 +0100 Subject: [PATCH 13/19] Run e2e tests for Nuxt --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index c3c4357caf6c..65d1b2652b0e 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -385,7 +385,7 @@ const baseTemplates = { renderer: '@storybook/vue3', builder: '@storybook/builder-vite', }, - skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'html-webpack/default': { name: 'HTML Latest (Webpack | JavaScript)', From d02250ab920f22bd100890726497e2ec45fd69f1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 2 Dec 2024 15:58:35 +0100 Subject: [PATCH 14/19] Fix parallelism --- .circleci/config.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c2a6e5b068d8..f014d2fd4835 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -784,7 +784,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 9 + parallelism: 10 requires: - build-sandboxes - e2e-dev: @@ -859,7 +859,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 15 + parallelism: 16 requires: - build-sandboxes - e2e-dev: @@ -935,7 +935,7 @@ workflows: requires: - build-sandboxes - e2e-production: - parallelism: 33 + parallelism: 34 requires: - build-sandboxes - e2e-dev: From bf3a3ca1c90a88bf50af5f47016019da22a9024f Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 3 Dec 2024 11:51:58 +0100 Subject: [PATCH 15/19] Adjust tests --- code/lib/create-storybook/src/generators/configure.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/create-storybook/src/generators/configure.test.ts b/code/lib/create-storybook/src/generators/configure.test.ts index 853e1102a055..e593810dd971 100644 --- a/code/lib/create-storybook/src/generators/configure.test.ts +++ b/code/lib/create-storybook/src/generators/configure.test.ts @@ -26,6 +26,7 @@ describe('configureMain', () => { framework: { name: '@storybook/react-vite', }, + frameworkPackage: '@storybook/react-vite', }); const { calls } = vi.mocked(fsp.writeFile).mock; @@ -55,6 +56,7 @@ describe('configureMain', () => { framework: { name: '@storybook/react-vite', }, + frameworkPackage: '@storybook/react-vite', }); const { calls } = vi.mocked(fsp.writeFile).mock; @@ -89,6 +91,7 @@ describe('configureMain', () => { framework: { name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%", }, + frameworkPackage: '@storybook/react-webpack5', }); const { calls } = vi.mocked(fsp.writeFile).mock; From e7f32c8eb48946059d423f6bd67caa352af0b305 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 5 Dec 2024 15:39:34 +0100 Subject: [PATCH 16/19] Add temporary workaround for Nuxt sandboxes --- scripts/tasks/sandbox-parts.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 83ee9dc6b8eb..d298d2f2e1aa 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -245,7 +245,19 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) { And allow source directories to complement any existing allow patterns (".storybook" is already being allowed by builder-vite) */ -function setSandboxViteFinal(mainConfig: ConfigFile) { +function setSandboxViteFinal(mainConfig: ConfigFile, template: TemplateKey) { + const temporaryAliasWorkaround = template.includes('nuxt') + ? ` + // TODO: Remove this once Storybook Nuxt applies this internally + resolve: { + ...config.resolve, + alias: { + ...config.resolve.alias, + vue: 'vue/dist/vue.esm-bundler.js', + } + } + ` + : ''; const viteFinalCode = ` (config) => ({ ...config, @@ -257,6 +269,7 @@ function setSandboxViteFinal(mainConfig: ConfigFile) { allow: ['stories', 'src', 'template-stories', 'node_modules', ...(config.server?.fs?.allow || [])], }, }, + ${temporaryAliasWorkaround} })`; // @ts-expect-error (Property 'expression' does not exist on type 'BlockStatement') mainConfig.setFieldNode(['viteFinal'], babelParse(viteFinalCode).program.body[0].expression); @@ -801,7 +814,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d } if (template.expected.builder === '@storybook/builder-vite') { - setSandboxViteFinal(mainConfig); + setSandboxViteFinal(mainConfig, key); } await writeConfig(mainConfig); }; From abd2d6296b007d6e9c481f7de4963706fded0547 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 9 Dec 2024 18:14:21 +0100 Subject: [PATCH 17/19] Fix parallelism --- .circleci/config.yml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 4956ba5bf561..2d46aa891fee 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -836,19 +836,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 16 + parallelism: 14 requires: - build - build-sandboxes: - parallelism: 16 + parallelism: 14 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 13 + parallelism: 11 requires: - build-sandboxes - e2e-production: - parallelism: 11 + parallelism: 9 requires: - build-sandboxes - e2e-dev: @@ -916,15 +916,15 @@ workflows: requires: - build - build-sandboxes: - parallelism: 22 + parallelism: 20 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 19 + parallelism: 17 requires: - build-sandboxes - e2e-production: - parallelism: 17 + parallelism: 15 requires: - build-sandboxes - e2e-dev: @@ -932,7 +932,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 17 + parallelism: 15 requires: - build-sandboxes - vitest-integration: @@ -986,22 +986,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 40 + parallelism: 37 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 40 + parallelism: 37 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 37 + parallelism: 34 requires: - build-sandboxes - e2e-production: - parallelism: 35 + parallelism: 32 requires: - build-sandboxes - e2e-dev: @@ -1009,7 +1009,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 35 + parallelism: 32 requires: - build-sandboxes - vitest-integration: From 1c0791e9ec222eb75862008ea8fd83c509a21931 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 9 Dec 2024 18:29:18 +0100 Subject: [PATCH 18/19] Fix parallelism --- .circleci/config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 2d46aa891fee..f67b712e04df 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -856,7 +856,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 11 + parallelism: 9 requires: - build-sandboxes - vitest-integration: @@ -912,7 +912,7 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 22 + parallelism: 20 requires: - build - build-sandboxes: From f3b3e56dc53b7fef8bd8f9c5d36d88459fd35678 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 13 Dec 2024 17:01:40 +0100 Subject: [PATCH 19/19] Disable react check for nuxt --- code/e2e-tests/addon-docs.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 54c046a8aec7..6d0542bf4b8d 100644 --- 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