Merge pull request #24909 from storybookjs/valentin/fix-check-depende…

…ncies-scripts

Scripts: Change check-dependencies script to js

.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

.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

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',

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);
+});

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 }) =>