Build: Fix sandbox generation in linked mode

storybookjs · Feb 5, 2025 · 9b1de99 · 9b1de99
1 parent 05b3fac
commit 9b1de99
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/code/lib/cli-storybook/src/link.ts b/code/lib/cli-storybook/src/link.ts
@@ -1,4 +1,4 @@
-import { mkdir, readFile } from 'node:fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { basename, extname, join } from 'node:path';
 
 import { logger } from 'storybook/internal/node-logger';
@@ -108,14 +108,24 @@ export const link = async ({ target, local, start }: LinkOptions) => {
   await exec(`yarn link --all --relative ${storybookDir}`, { cwd: reproDir });
 
   logger.info(`Installing ${reproName}`);
-  await exec(`yarn install`, { cwd: reproDir });
 
   if (!reproPackageJson.devDependencies?.vite) {
+    reproPackageJson.devDependencies = {
+      ...reproPackageJson.devDependencies,
+      'webpack-hot-middleware': '*',
+    };
     await exec(`yarn add -D webpack-hot-middleware`, { cwd: reproDir });
   }
 
   // ensure that linking is possible
-  await exec(`yarn add @types/node@22`, { cwd: reproDir });
+  reproPackageJson.devDependencies = {
+    ...reproPackageJson.devDependencies,
+    '@types/node': '^22',
+  };
+
+  await writeFile(join(reproDir, 'package.json'), JSON.stringify(reproPackageJson, null, 2));
+
+  await exec(`yarn install`, { cwd: reproDir });
 
   if (start) {
     logger.info(`Running ${reproName} storybook`);

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
@@ -13,6 +13,7 @@ import {
   writeFile,
   writeJson,
 } from 'fs-extra';
+import { readFile } from 'fs/promises';
 import JSON5 from 'json5';
 import { createRequire } from 'module';
 import { join, relative, resolve, sep } from 'path';
@@ -144,7 +145,7 @@ export const init: Task['run'] = async (
 
   await executeCLIStep(steps.init, {
     cwd,
-    optionValues: { debug, yes: true, ...extra },
+    optionValues: { debug, yes: true, 'skip-install': true, ...extra },
     dryRun,
     debug,
   });
@@ -538,17 +539,24 @@ export async function addExtraDependencies({
     return;
   }
 
+  const packageJson = JSON.parse(await readFile(join(cwd, 'package.json'), { encoding: 'utf8' }));
+
   const packageManager = JsPackageManagerFactory.getPackageManager({}, cwd);
-  await packageManager.addDependencies({ installAsDevDependencies: true }, extraDevDeps);
+  await packageManager.addDependencies(
+    { installAsDevDependencies: true, skipInstall: true, packageJson },
+    extraDevDeps
+  );
 
   if (extraDeps) {
     const versionedExtraDeps = await packageManager.getVersionedPackages(extraDeps);
     if (debug) {
       logger.log('\uD83C\uDF81 Adding extra deps', versionedExtraDeps);
     }
-    await packageManager.addDependencies({ installAsDevDependencies: true }, versionedExtraDeps);
+    await packageManager.addDependencies(
+      { installAsDevDependencies: true, skipInstall: true, packageJson },
+      versionedExtraDeps
+    );
   }
-  await packageManager.installDependencies();
 }
 
 export const addStories: Task['run'] = async (

diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
@@ -4,6 +4,7 @@ import { pathExists, remove } from 'fs-extra';
 import { join } from 'path';
 import { promisify } from 'util';
 
+import { JsPackageManagerFactory } from '../../code/core/src/common';
 import { now, saveBench } from '../bench/utils';
 import type { Task, TaskKey } from '../task';
 
@@ -147,6 +148,10 @@ export const sandbox: Task = {
 
     await setImportMap(details.sandboxDir);
 
+    const packageManager = JsPackageManagerFactory.getPackageManager({}, details.sandboxDir);
+
+    await packageManager.installDependencies();
+
     logger.info(`✅ Storybook sandbox created at ${details.sandboxDir}`);
   },
 };
diff --git a/scripts/utils/cli-step.ts b/scripts/utils/cli-step.ts
@@ -40,6 +40,7 @@ export const steps = {
       yes: { type: 'boolean' },
       type: { type: 'string' },
       debug: { type: 'boolean' },
+      'skip-install': { type: 'boolean' },
     }),
   },
   add: {