diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index adea48c1b2f6..53814040f610 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -32,7 +32,7 @@ jobs: - name: Install dependencies run: | cd ./scripts - node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + node --experimental-modules ./check-dependencies.js cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 9a00f8b99cdc..d9355f593dc8 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -32,7 +32,7 @@ jobs: - name: Install dependencies run: | cd ./scripts - node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + node --experimental-modules ./check-dependencies.js cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 7047dc138e16..600a01044e56 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -120,7 +120,8 @@ const baseTemplates = { }, 'nextjs/default-js': { name: 'Next.js Latest (Webpack | JavaScript)', - script: 'yarn create next-app {{beforeDir}} --javascript --eslint', + script: + 'yarn create next-app {{beforeDir}} --javascript --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', @@ -130,7 +131,8 @@ const baseTemplates = { }, 'nextjs/default-ts': { name: 'Next.js Latest (Webpack | TypeScript)', - script: 'yarn create next-app {{beforeDir}} --typescript --eslint', + script: + 'yarn create next-app {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', @@ -301,7 +303,7 @@ const baseTemplates = { 'angular-cli/prerelease': { name: 'Angular CLI Prerelease (Webpack | TypeScript)', script: - 'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', + 'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr', expected: { framework: '@storybook/angular', renderer: '@storybook/angular', @@ -312,7 +314,7 @@ const baseTemplates = { 'angular-cli/default-ts': { name: 'Angular CLI Latest (Webpack | TypeScript)', script: - 'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', + 'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr', expected: { framework: '@storybook/angular', renderer: '@storybook/angular', diff --git a/scripts/check-dependencies.js b/scripts/check-dependencies.js new file mode 100644 index 000000000000..0bad76f507cc --- /dev/null +++ b/scripts/check-dependencies.js @@ -0,0 +1,72 @@ +/** + * This file needs to be run before any other script to ensure dependencies are installed + * Therefore, we cannot transform this file to Typescript, because it would require esbuild to be installed + */ +import { spawn } from 'child_process'; +import { join } from 'path'; +import { existsSync } from 'fs'; +import * as url from 'url'; + +const logger = console; + +const filename = url.fileURLToPath(import.meta.url); +const dirname = url.fileURLToPath(new URL('.', import.meta.url)); + +const checkDependencies = async () => { + const scriptsPath = join(dirname); + const codePath = join(dirname, '..', 'code'); + + const tasks = []; + + if (!existsSync(join(scriptsPath, 'node_modules'))) { + tasks.push( + spawn('yarn', ['install'], { + cwd: scriptsPath, + shell: true, + stdio: ['inherit', 'inherit', 'inherit'], + }) + ); + } + if (!existsSync(join(codePath, 'node_modules'))) { + tasks.push( + spawn('yarn', ['install'], { + cwd: codePath, + shell: true, + stdio: ['inherit', 'inherit', 'inherit'], + }) + ); + } + + if (tasks.length > 0) { + logger.log('installing dependencies'); + + await Promise.all( + tasks.map( + (t) => + new Promise((res, rej) => { + t.on('exit', (code) => { + if (code !== 0) { + rej(); + } else { + res(); + } + }); + }) + ) + ).catch(() => { + tasks.forEach((t) => t.kill()); + throw new Error('Failed to install dependencies'); + }); + + // give the filesystem some time + await new Promise((res) => { + setTimeout(res, 1000); + }); + } +}; + +checkDependencies().catch((e) => { + // eslint-disable-next-line no-console + console.error(e); + process.exit(1); +}); diff --git a/scripts/check-dependencies.ts b/scripts/check-dependencies.ts deleted file mode 100755 index babee83b82f6..000000000000 --- a/scripts/check-dependencies.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { checkDependencies } from './utils/cli-utils'; - -checkDependencies().catch((e) => { - // eslint-disable-next-line no-console - console.error(e); - process.exit(1); -}); diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 8f7ae78fb0d2..e14b8bac5f04 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -15,8 +15,6 @@ import { allTemplates as sandboxTemplates } from '../../code/lib/cli/src/sandbox import storybookVersions from '../../code/lib/cli/src/versions'; import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory'; -import { maxConcurrentTasks } from '../utils/maxConcurrentTasks'; - // eslint-disable-next-line import/no-cycle import { localizeYarnConfigFiles, setupYarn } from './utils/yarn'; import type { GeneratorConfig } from './utils/types'; @@ -71,23 +69,31 @@ const addStorybook = async ({ }) => { const beforeDir = join(baseDir, BEFORE_DIR_NAME); const afterDir = join(baseDir, AFTER_DIR_NAME); - const tmpDir = join(baseDir, 'tmp'); - - await ensureDir(tmpDir); - await emptyDir(tmpDir); - await copy(beforeDir, tmpDir); + const tmpDir = directory(); - const packageManager = JsPackageManagerFactory.getPackageManager({}, tmpDir); - if (localRegistry) { - await withLocalRegistry(packageManager, async () => { - await packageManager.addPackageResolutions(storybookVersions); + try { + await copy(beforeDir, tmpDir); + + const packageManager = JsPackageManagerFactory.getPackageManager({}, tmpDir); + if (localRegistry) { + await withLocalRegistry(packageManager, async () => { + await packageManager.addPackageResolutions({ + ...storybookVersions, + // Yarn1 Issue: https://github.com/storybookjs/storybook/issues/22431 + jackspeak: '2.1.1', + }); + await sbInit(tmpDir, flags, debug); + }); + } else { await sbInit(tmpDir, flags, debug); - }); - } else { - await sbInit(tmpDir, flags, debug); + } + } catch (e) { + await remove(tmpDir); + throw e; } + await rename(tmpDir, afterDir); }; @@ -131,9 +137,9 @@ const runGenerators = async ( console.log('Debug mode enabled. Verbose logs will be printed to the console.'); } - console.log(`🤹‍♂️ Generating sandboxes with a concurrency of ${maxConcurrentTasks}`); + console.log(`🤹‍♂️ Generating sandboxes with a concurrency of ${1}`); - const limit = pLimit(maxConcurrentTasks); + const limit = pLimit(1); await Promise.all( generators.map(({ dirName, name, script, expected }) =>