From a724e02ca7502beba5eb9ac86e64f6abcadd7009 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Sat, 3 Aug 2024 17:27:35 +0200
Subject: [PATCH 01/20] Vite: improve handling of preview annotations

---
 code/builders/builder-vite/package.json       |  4 +-
 .../codegen-modern-iframe-script.test.ts.snap | 61 ++++++++++++
 .../src/codegen-modern-iframe-script.test.ts  | 23 +++++
 .../src/codegen-modern-iframe-script.ts       | 95 ++++++++++++-------
 .../utils/process-preview-annotation.test.ts  | 93 +++++++++---------
 .../src/utils/process-preview-annotation.ts   | 53 +++--------
 code/yarn.lock                                | 16 ++++
 7 files changed, 229 insertions(+), 116 deletions(-)
 create mode 100644 code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
 create mode 100644 code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index a7d790840ea1..054d67877b7a 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -50,14 +50,16 @@
     "express": "^4.19.2",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
+    "knitwork": "^1.1.0",
     "magic-string": "^0.30.0",
+    "pathe": "^1.1.2",
+    "slash": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "glob": "^10.0.0",
-    "slash": "^5.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
new file mode 100644
index 000000000000..486c806b7df1
--- /dev/null
+++ b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateModernIframeScriptCodeFromPreviews > handle multiple annotations 1`] = `
+"import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
+import '/virtual:/@storybook/builder-vite/setup-addons.js';
+import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
+import previewAnnotations1_2032 from "/previewAnnotations1";
+import previewAnnotations2_2033 from "/previewAnnotations2";
+const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
+  const configs = [
+    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations1_2032,
+    hmrPreviewAnnotationModules.at(1) ?? previewAnnotations2_2033
+  ]
+  return composeConfigs(configs);
+}
+
+window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
+
+window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
+
+if (import.meta.hot) {
+  import.meta.hot.accept('/virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
+    // importFn has changed so we need to patch the new one in
+    window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
+  });
+
+  import.meta.hot.accept(["/previewAnnotations1","/previewAnnotations2"], (previewAnnotationModules) => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
+  });
+};"
+`;
+
+exports[`generateModernIframeScriptCodeFromPreviews > handle one annotation 1`] = `
+"import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
+import '/virtual:/@storybook/builder-vite/setup-addons.js';
+import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
+import previewAnnotations_1983 from "/previewAnnotations";
+const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
+  const configs = [
+    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations_1983
+  ]
+  return composeConfigs(configs);
+}
+
+window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
+
+window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
+
+if (import.meta.hot) {
+  import.meta.hot.accept('/virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
+    // importFn has changed so we need to patch the new one in
+    window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
+  });
+
+  import.meta.hot.accept(["/previewAnnotations"], (previewAnnotationModules) => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
+  });
+};"
+`;
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
new file mode 100644
index 000000000000..3add0caf4ea0
--- /dev/null
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { generateModernIframeScriptCodeFromPreviews } from './codegen-modern-iframe-script';
+
+const projectRoot = 'projectRoot';
+
+describe('generateModernIframeScriptCodeFromPreviews', () => {
+  it('handle one annotation', async () => {
+    const result = await generateModernIframeScriptCodeFromPreviews({
+      previewAnnotations: ['previewAnnotations'],
+      projectRoot,
+      frameworkName: 'frameworkName',
+    });
+    expect(result).toMatchSnapshot();
+  });
+  it('handle multiple annotations', async () => {
+    const result = await generateModernIframeScriptCodeFromPreviews({
+      previewAnnotations: ['previewAnnotations1', 'previewAnnotations2'],
+      projectRoot,
+      frameworkName: 'frameworkName',
+    });
+    expect(result).toMatchSnapshot();
+  });
+});
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index bcafede02125..9fa9ada03036 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -3,6 +3,10 @@ import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
 
+import { genArrayFromRaw, genImport, genSafeVariableName } from 'knitwork';
+import { filename } from 'pathe/utils';
+import { dedent } from 'ts-dedent';
+
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
   const { presets, configDir } = options;
   const frameworkName = await getFrameworkName(options);
@@ -13,27 +17,52 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
     [],
     options
   );
-  const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile]
-    .filter(Boolean)
+  return generateModernIframeScriptCodeFromPreviews({
+    previewAnnotations: [...previewAnnotations, previewOrConfigFile],
+    projectRoot,
+    frameworkName,
+  });
+}
+
+export async function generateModernIframeScriptCodeFromPreviews(options: {
+  previewAnnotations: (string | undefined)[];
+  projectRoot: string;
+  frameworkName: string;
+}) {
+  const { projectRoot, frameworkName } = options;
+  const previewAnnotationURLs = options.previewAnnotations
+    .filter((path) => path !== undefined)
     .map((path) => processPreviewAnnotation(path, projectRoot));
 
+  const variables: string[] = [];
+  const imports: string[] = [];
+  for (const previewAnnotation of previewAnnotationURLs) {
+    const variable =
+      genSafeVariableName(filename(previewAnnotation)).replace(/_(45|46|47)/g, '_') +
+      '_' +
+      hash(previewAnnotation);
+    variables.push(variable);
+    imports.push(genImport(previewAnnotation, variable));
+  }
+
   // This is pulled out to a variable because it is reused in both the initial page load
-  // and the HMR handler.  We don't use the hot.accept callback params because only the changed
-  // modules are provided, the rest are null.  We can just re-import everything again in that case.
-  const getPreviewAnnotationsFunction = `
-  const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
-    const configs = await Promise.all([${previewAnnotationURLs
-      .map(
+  // and the HMR handler.
+  // The `hmrPreviewAnnotationModules` parameter is used to pass the updated modules from HMR.
+  // However, only the changed modules are provided, the rest are null.
+  const getPreviewAnnotationsFunction = dedent`
+  const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
+    const configs = ${genArrayFromRaw(
+      variables.map(
         (previewAnnotation, index) =>
-          // Prefer the updated module from an HMR update, otherwise import the original module
-          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
-      )
-      .join(',\n')}])
+          // Prefer the updated module from an HMR update, otherwise the original module
+          `hmrPreviewAnnotationModules.at(${index}) ?? ${previewAnnotation}`
+      ),
+      '  '
+    )}
     return composeConfigs(configs);
   }`;
 
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const generateHMRHandler = (frameworkName: string): string => {
+  const generateHMRHandler = (): string => {
     // Web components are not compatible with HMR, so disable HMR, reload page instead.
     if (frameworkName === '@storybook/web-components-vite') {
       return `
@@ -42,19 +71,18 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       }`.trim();
     }
 
-    return `
+    return dedent`
     if (import.meta.hot) {
       import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
-      // importFn has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
+        // importFn has changed so we need to patch the new one in
+        window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
-    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
-      ${getPreviewAnnotationsFunction}
-      // getProjectAnnotations has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
-    });
-  }`.trim();
+      import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
+        // getProjectAnnotations has changed so we need to patch the new one in
+        window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
+      });
+    }`.trim();
   };
 
   /**
@@ -63,18 +91,21 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    * and the HMR implementation has been tweaked to work with Vite.
    * @todo Inline variable and remove `noinspection`
    */
-  const code = `
+  const code = dedent`
   import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
   import '${virtualAddonSetupFile}';
   import { importFn } from '${virtualStoriesFile}';
-  
-    ${getPreviewAnnotationsFunction}
+  ${imports.join('\n')}
+  ${getPreviewAnnotationsFunction}
 
-    window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
-    
-    window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
-    
-    ${generateHMRHandler(frameworkName)};
-    `.trim();
+  window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
+  
+  window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
+  
+  ${generateHMRHandler()};
+  `.trim();
   return code;
 }
+function hash(value: string) {
+  return value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+}
diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts
index 4d211fd5fafb..8d51a1aec11b 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.test.ts
@@ -3,64 +3,71 @@ import { processPreviewAnnotation } from './process-preview-annotation';
 import { onlyWindows, skipWindows } from '../../../../vitest.helpers';
 
 describe('processPreviewAnnotation()', () => {
-  it('should pull the `bare` value from an object', () => {
+  it('should pull the `absolute` value from an object', () => {
     const annotation = {
       bare: '@storybook/addon-links/preview',
       absolute: '/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.mjs',
     };
     const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-    expect(url).toBe('@storybook/addon-links/preview');
+    expect(url).toBe('/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.mjs');
   });
 
-  it('should convert relative paths into urls', () => {
-    const annotation = './src/stories/components';
+  it('should convert relative paths into absolute paths', () => {
+    const annotation = './src/stories/preview';
     const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-    expect(url).toBe('/src/stories/components');
+    expect(url).toBe('/Users/foo/storybook/src/stories/preview');
   });
 
-  skipWindows(() => {
-    it('should convert absolute filesystem paths into urls relative to project root', () => {
-      const annotation = '/Users/foo/storybook/.storybook/preview.js';
-      const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-      expect(url).toBe('/.storybook/preview.js');
-    });
+  it('should keep absolute filesystem paths', () => {
+    const annotation = '/Users/foo/storybook/.storybook/preview.js';
+    const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
+    expect(url).toBe('/Users/foo/storybook/.storybook/preview.js');
+  });
 
-    // TODO: figure out why this fails on windows. Could be related to storybook-metadata.test file altering path.sep
-    it('should convert node_modules into bare paths', () => {
-      const annotation = '/Users/foo/storybook/node_modules/storybook-addon/preview';
-      const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-      expect(url).toBe('storybook-addon/preview');
-    });
+  it('should keep absolute node_modules paths', () => {
+    const annotation = '/Users/foo/storybook/node_modules/storybook-addon/preview';
+    const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
+    expect(url).toBe('/Users/foo/storybook/node_modules/storybook-addon/preview');
+  });
 
-    it('should convert relative paths outside the root into absolute', () => {
-      const annotation = '../parent.js';
-      const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-      expect(url).toBe('/Users/foo/parent.js');
-    });
+  it('should convert relative paths outside the root into absolute', () => {
+    const annotation = '../parent.js';
+    const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
+    expect(url).toBe('/Users/foo/parent.js');
+  });
 
-    it('should not change absolute paths outside of the project root', () => {
-      const annotation = '/Users/foo/parent.js';
-      const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
-      expect(url).toBe(annotation);
-    });
+  it('should not change absolute paths outside of the project root', () => {
+    const annotation = '/Users/foo/parent.js';
+    const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
+    expect(url).toBe(annotation);
   });
 
-  onlyWindows(() => {
-    it('should convert absolute windows filesystem paths into urls relative to project root', () => {
-      const annotation = 'C:/foo/storybook/.storybook/preview.js';
-      const url = processPreviewAnnotation(annotation, 'C:/foo/storybook');
-      expect(url).toBe('/.storybook/preview.js');
-    });
-    it('should convert relative paths outside the root into absolute on Windows', () => {
-      const annotation = '../parent.js';
-      const url = processPreviewAnnotation(annotation, 'C:/Users/foo/storybook/');
-      expect(url).toBe('C:/Users/foo/parent.js');
-    });
+  it('should keep absolute windows filesystem paths as is', () => {
+    const annotation = 'C:/foo/storybook/.storybook/preview.js';
+    const url = processPreviewAnnotation(annotation, 'C:/foo/storybook');
+    expect(url).toBe('C:/foo/storybook/.storybook/preview.js');
+  });
+  it('should convert relative paths outside the root into absolute on Windows', () => {
+    const annotation = '../parent.js';
+    const url = processPreviewAnnotation(annotation, 'C:/Users/foo/storybook/');
+    expect(url).toBe('C:/Users/foo/parent.js');
+  });
+
+  it('should not change Windows absolute paths outside of the project root', () => {
+    const annotation = 'D:/Users/foo/parent.js';
+    const url = processPreviewAnnotation(annotation, 'D:/Users/foo/storybook/');
+    expect(url).toBe(annotation);
+  });
+
+  it('should normalize absolute Windows paths using \\', () => {
+    const annotation = 'C:\\foo\\storybook\\.storybook\\preview.js';
+    const url = processPreviewAnnotation(annotation, 'C:\\foo\\storybook');
+    expect(url).toBe('C:/foo/storybook/.storybook/preview.js');
+  });
 
-    it('should not change Windows absolute paths outside of the project root', () => {
-      const annotation = 'D:/Users/foo/parent.js';
-      const url = processPreviewAnnotation(annotation, 'D:/Users/foo/storybook/');
-      expect(url).toBe(annotation);
-    });
+  it('should normalize relative Windows paths using \\', () => {
+    const annotation = '.\\src\\stories\\preview';
+    const url = processPreviewAnnotation(annotation, 'C:\\foo\\storybook');
+    expect(url).toBe('C:/foo/storybook/src/stories/preview');
   });
 });
diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
index e87259d00941..35c034cea68d 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,53 +1,26 @@
 import type { PreviewAnnotation } from 'storybook/internal/types';
-import { resolve, isAbsolute, relative } from 'path';
-import slash from 'slash';
-import { stripAbsNodeModulesPath } from 'storybook/internal/common';
+import { normalize, resolve, isAbsolute } from 'pathe';
 
 /**
- * Preview annotations can take several forms, and vite needs them to be
- * a bit more restrained.
- *
- * For node_modules, we want bare imports (so vite can process them),
- * and for files in the user's source, we want URLs absolute relative to project root.
+ * Preview annotations can take several forms, so we normalize them here to absolute file paths.
  */
-export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) {
-  // If entry is an object, take the first, which is the
-  // bare (non-absolute) specifier.
+export function processPreviewAnnotation(path: PreviewAnnotation, projectRoot: string) {
+  // If entry is an object, take the absolute specifier.
   // This is so that webpack can use an absolute path, and
   // continue supporting super-addons in pnp/pnpm without
   // requiring them to re-export their sub-addons as we do
   // in addon-essentials.
   if (typeof path === 'object') {
-    return path.bare;
+    console.log(
+      'Deprecated: Preview annotations should be strings, not objects. Use the `absolute` property instead.'
+    );
+    return path.absolute;
   }
 
-  // This should not occur, since we use `.filter(Boolean)` prior to
-  // calling this function, but this makes typescript happy
-  if (!path) {
-    throw new Error('Could not determine path for previewAnnotation');
+  // If it's already an absolute path, return it.
+  if (isAbsolute(path)) {
+    return normalize(path);
   }
-
-  // For addon dependencies that use require.resolve(), we need to convert to a bare path
-  // so that vite will process it as a dependency (cjs -> esm, etc).
-  // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct
-  if (path.includes('node_modules')) {
-    return stripAbsNodeModulesPath(path);
-  }
-
-  // resolve absolute paths relative to project root
-  const relativePath = isAbsolute(path) ? slash(relative(projectRoot, path)) : path;
-
-  // resolve relative paths into absolute urls
-  // note: this only works if vite's projectRoot === cwd.
-  if (relativePath.startsWith('./')) {
-    return slash(relativePath.replace(/^\.\//, '/'));
-  }
-
-  // If something is outside of root, convert to absolute.  Uncommon?
-  if (relativePath.startsWith('../')) {
-    return slash(resolve(projectRoot, relativePath));
-  }
-
-  // At this point, it must be relative to the root but not start with a ./ or ../
-  return slash(`/${relativePath}`);
+  // resolve relative paths, relative to project root
+  return normalize(resolve(projectRoot, path));
 }
diff --git a/code/yarn.lock b/code/yarn.lock
index 2810b36b4760..5a16742b235d 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5568,7 +5568,9 @@ __metadata:
     find-cache-dir: "npm:^3.0.0"
     fs-extra: "npm:^11.1.0"
     glob: "npm:^10.0.0"
+    knitwork: "npm:^1.1.0"
     magic-string: "npm:^0.30.0"
+    pathe: "npm:^1.1.2"
     slash: "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
@@ -18238,6 +18240,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"knitwork@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "knitwork@npm:1.1.0"
+  checksum: 10c0/e23c679d4ded01890ab2669ccde2e85e4d7e6ba327b1395ff657f8067c7d73dc134fc8cd8188c653de4a687be7fa9c130bd36c3e2f76d8685e8b97ff8b30779c
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:^0.3.20":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -21977,6 +21986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "pathe@npm:1.1.2"
+  checksum: 10c0/64ee0a4e587fb0f208d9777a6c56e4f9050039268faaaaecd50e959ef01bf847b7872785c36483fa5cdcdbdfdb31fef2ff222684d4fc21c330ab60395c681897
+  languageName: node
+  linkType: hard
+
 "pathval@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathval@npm:1.1.1"

From 74be16ea370a3158c0966c62136f87d27a80f9a6 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Sat, 3 Aug 2024 17:50:10 +0200
Subject: [PATCH 02/20] use absolute paths in tests

---
 .../codegen-modern-iframe-script.test.ts.snap    | 16 ++++++++--------
 .../src/codegen-modern-iframe-script.test.ts     |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
index 486c806b7df1..61cf84593c09 100644
--- a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
+++ b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
@@ -4,12 +4,12 @@ exports[`generateModernIframeScriptCodeFromPreviews > handle multiple annotation
 "import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
 import '/virtual:/@storybook/builder-vite/setup-addons.js';
 import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
-import previewAnnotations1_2032 from "/previewAnnotations1";
-import previewAnnotations2_2033 from "/previewAnnotations2";
+import previewAnnotations1_2526 from "/user/previewAnnotations1";
+import previewAnnotations2_2527 from "/user/previewAnnotations2";
 const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
   const configs = [
-    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations1_2032,
-    hmrPreviewAnnotationModules.at(1) ?? previewAnnotations2_2033
+    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations1_2526,
+    hmrPreviewAnnotationModules.at(1) ?? previewAnnotations2_2527
   ]
   return composeConfigs(configs);
 }
@@ -24,7 +24,7 @@ if (import.meta.hot) {
     window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
   });
 
-  import.meta.hot.accept(["/previewAnnotations1","/previewAnnotations2"], (previewAnnotationModules) => {
+  import.meta.hot.accept(["/user/previewAnnotations1","/user/previewAnnotations2"], (previewAnnotationModules) => {
     // getProjectAnnotations has changed so we need to patch the new one in
     window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
   });
@@ -35,10 +35,10 @@ exports[`generateModernIframeScriptCodeFromPreviews > handle one annotation 1`]
 "import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
 import '/virtual:/@storybook/builder-vite/setup-addons.js';
 import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
-import previewAnnotations_1983 from "/previewAnnotations";
+import previewAnnotations_2477 from "/user/previewAnnotations";
 const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
   const configs = [
-    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations_1983
+    hmrPreviewAnnotationModules.at(0) ?? previewAnnotations_2477
   ]
   return composeConfigs(configs);
 }
@@ -53,7 +53,7 @@ if (import.meta.hot) {
     window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
   });
 
-  import.meta.hot.accept(["/previewAnnotations"], (previewAnnotationModules) => {
+  import.meta.hot.accept(["/user/previewAnnotations"], (previewAnnotationModules) => {
     // getProjectAnnotations has changed so we need to patch the new one in
     window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
   });
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
index 3add0caf4ea0..b27db178c3ea 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
@@ -6,7 +6,7 @@ const projectRoot = 'projectRoot';
 describe('generateModernIframeScriptCodeFromPreviews', () => {
   it('handle one annotation', async () => {
     const result = await generateModernIframeScriptCodeFromPreviews({
-      previewAnnotations: ['previewAnnotations'],
+      previewAnnotations: ['/user/previewAnnotations'],
       projectRoot,
       frameworkName: 'frameworkName',
     });
@@ -14,7 +14,7 @@ describe('generateModernIframeScriptCodeFromPreviews', () => {
   });
   it('handle multiple annotations', async () => {
     const result = await generateModernIframeScriptCodeFromPreviews({
-      previewAnnotations: ['previewAnnotations1', 'previewAnnotations2'],
+      previewAnnotations: ['/user/previewAnnotations1', '/user/previewAnnotations2'],
       projectRoot,
       frameworkName: 'frameworkName',
     });

From e625e782be1c45da771d4689fa768e3b5b2dad3b Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Sat, 3 Aug 2024 17:50:28 +0200
Subject: [PATCH 03/20] update comment

---
 .../builder-webpack5/src/preview/virtual-module-mapping.ts       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
index 69f64ad41921..108c5e540b57 100644
--- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
+++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
@@ -30,7 +30,6 @@ export const getVirtualModules = async (options: Options) => {
         // If entry is an object, use the absolute import specifier.
         // This is to maintain back-compat with community addons that bundle other addons
         // and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp)
-        // The vite builder uses the bare import specifier.
         if (typeof entry === 'object') {
           return entry.absolute;
         }

From 71c7c57971da2ab8675a959f8a45622031e5fd7e Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Mon, 5 Aug 2024 23:29:27 +0200
Subject: [PATCH 04/20] use star imports for loading previews

---
 .../__snapshots__/codegen-modern-iframe-script.test.ts.snap | 6 +++---
 .../builder-vite/src/codegen-modern-iframe-script.ts        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
index 61cf84593c09..b6d37f297d9e 100644
--- a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
+++ b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
@@ -4,8 +4,8 @@ exports[`generateModernIframeScriptCodeFromPreviews > handle multiple annotation
 "import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
 import '/virtual:/@storybook/builder-vite/setup-addons.js';
 import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
-import previewAnnotations1_2526 from "/user/previewAnnotations1";
-import previewAnnotations2_2527 from "/user/previewAnnotations2";
+import * as previewAnnotations1_2526 from "/user/previewAnnotations1";
+import * as previewAnnotations2_2527 from "/user/previewAnnotations2";
 const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
   const configs = [
     hmrPreviewAnnotationModules.at(0) ?? previewAnnotations1_2526,
@@ -35,7 +35,7 @@ exports[`generateModernIframeScriptCodeFromPreviews > handle one annotation 1`]
 "import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
 import '/virtual:/@storybook/builder-vite/setup-addons.js';
 import { importFn } from '/virtual:/@storybook/builder-vite/storybook-stories.js';
-import previewAnnotations_2477 from "/user/previewAnnotations";
+import * as previewAnnotations_2477 from "/user/previewAnnotations";
 const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
   const configs = [
     hmrPreviewAnnotationModules.at(0) ?? previewAnnotations_2477
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 9fa9ada03036..ab018c613c63 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -42,7 +42,7 @@ export async function generateModernIframeScriptCodeFromPreviews(options: {
       '_' +
       hash(previewAnnotation);
     variables.push(variable);
-    imports.push(genImport(previewAnnotation, variable));
+    imports.push(genImport(previewAnnotation, { name: '*', as: variable }));
   }
 
   // This is pulled out to a variable because it is reused in both the initial page load

From f33697e0d657d5f410ff9140d408570e749806d1 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Tue, 6 Aug 2024 11:10:00 +0200
Subject: [PATCH 05/20] move preview variable declaration

---
 code/.storybook/preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 548f29473efc..3db4ee6cb03b 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -116,8 +116,6 @@ const ThemedSetRoot = () => {
   return null;
 };
 
-// eslint-disable-next-line no-underscore-dangle
-const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
 export const loaders = [
   /**
@@ -129,6 +127,8 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
+    // eslint-disable-next-line no-underscore-dangle
+    const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
     if (!relativeCsfPaths) return {};
     const csfFiles = await Promise.all(
       (relativeCsfPaths as string[]).map(async (blocksRelativePath) => {

From 7d1b3f09b7d0a9cd23eac59db338c4250c90f666 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Tue, 13 Aug 2024 10:38:11 +0200
Subject: [PATCH 06/20] update lock file

---
 code/yarn.lock | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/code/yarn.lock b/code/yarn.lock
index 856d79ca7527..1ced8d65c2df 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -22300,13 +22300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathe@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "pathe@npm:1.1.2"
-  checksum: 10c0/64ee0a4e587fb0f208d9777a6c56e4f9050039268faaaaecd50e959ef01bf847b7872785c36483fa5cdcdbdfdb31fef2ff222684d4fc21c330ab60395c681897
-  languageName: node
-  linkType: hard
-
 "pathval@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathval@npm:1.1.1"

From eddb6cdfa08b6bd872f1b3222838519cd6e723f8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 14 Aug 2024 12:48:43 +0200
Subject: [PATCH 07/20] fixes

---
 .../builder-vite/src/codegen-modern-iframe-script.test.ts   | 3 ++-
 .../builder-vite/src/codegen-modern-iframe-script.ts        | 6 +++---
 .../builder-vite/src/utils/process-preview-annotation.ts    | 4 +---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
index b27db178c3ea..aa5d8584abf9 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
@@ -1,4 +1,5 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
+
 import { generateModernIframeScriptCodeFromPreviews } from './codegen-modern-iframe-script';
 
 const projectRoot = 'projectRoot';
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 31125178c6f0..29f57e3a34af 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -1,13 +1,13 @@
 import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/common';
 import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 
-import { processPreviewAnnotation } from './utils/process-preview-annotation';
-import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
-
 import { genArrayFromRaw, genImport, genSafeVariableName } from 'knitwork';
 import { filename } from 'pathe/utils';
 import { dedent } from 'ts-dedent';
 
+import { processPreviewAnnotation } from './utils/process-preview-annotation';
+import { virtualAddonSetupFile, virtualStoriesFile } from './virtual-file-names';
+
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
   const { presets, configDir } = options;
   const frameworkName = await getFrameworkName(options);
diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
index 5ae5c38f63ee..1e0965e9d302 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,8 +1,6 @@
-import { isAbsolute, relative, resolve } from 'node:path';
+import { isAbsolute, normalize, resolve } from 'node:path';
 
-import { stripAbsNodeModulesPath } from 'storybook/internal/common';
 import type { PreviewAnnotation } from 'storybook/internal/types';
-import { normalize, resolve, isAbsolute } from 'pathe';
 
 /**
  * Preview annotations can take several forms, so we normalize them here to absolute file paths.

From d0c7fb515678e6f5fc023b3691f995e3a10abb33 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 14 Aug 2024 12:54:53 +0200
Subject: [PATCH 08/20] fixes

---
 .../builder-vite/src/codegen-modern-iframe-script.ts       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 29f57e3a34af..b7febc828e2d 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -19,7 +19,10 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
     options
   );
   return generateModernIframeScriptCodeFromPreviews({
-    previewAnnotations: [...previewAnnotations, previewOrConfigFile],
+    previewAnnotations: [
+      ...previewAnnotations.map((p) => (typeof p === 'string' ? p : p.absolute)),
+      previewOrConfigFile,
+    ],
     projectRoot,
     frameworkName,
   });
@@ -33,7 +36,7 @@ export async function generateModernIframeScriptCodeFromPreviews(options: {
   const { projectRoot, frameworkName } = options;
   const previewAnnotationURLs = options.previewAnnotations
     .filter((path) => path !== undefined)
-    .map((path) => processPreviewAnnotation(path, projectRoot));
+    .map((path) => processPreviewAnnotation(path as string, projectRoot));
 
   const variables: string[] = [];
   const imports: string[] = [];

From 1e989124a3b298ea1f366863b0ff8d2ed23cfc95 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 14 Aug 2024 13:06:07 +0200
Subject: [PATCH 09/20] fix incorrect import

---
 .../builder-vite/src/utils/process-preview-annotation.ts      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
index 1e0965e9d302..24f7cc8ce689 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,7 +1,9 @@
-import { isAbsolute, normalize, resolve } from 'node:path';
+import { isAbsolute, resolve } from 'node:path';
 
 import type { PreviewAnnotation } from 'storybook/internal/types';
 
+import { normalize } from 'pathe';
+
 /**
  * Preview annotations can take several forms, so we normalize them here to absolute file paths.
  */

From aef9463da164aa69e93c1a3ae765d19212f31100 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Fri, 16 Aug 2024 14:09:39 +0200
Subject: [PATCH 10/20] fix imports

---
 .../builder-vite/src/utils/process-preview-annotation.ts      | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
index 24f7cc8ce689..fedfb40d724f 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,8 +1,6 @@
-import { isAbsolute, resolve } from 'node:path';
-
 import type { PreviewAnnotation } from 'storybook/internal/types';
 
-import { normalize } from 'pathe';
+import { normalize, resolve, isAbsolute } from 'pathe';
 
 /**
  * Preview annotations can take several forms, so we normalize them here to absolute file paths.

From 83c947a706cd98c6bf2bcf3296d5229a1247deb2 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 16 Aug 2024 16:10:50 +0200
Subject: [PATCH 11/20] linting

---
 .../builder-vite/src/utils/process-preview-annotation.ts    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
index fedfb40d724f..3e4dcf988eba 100644
--- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts
+++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,10 +1,8 @@
 import type { PreviewAnnotation } from 'storybook/internal/types';
 
-import { normalize, resolve, isAbsolute } from 'pathe';
+import { isAbsolute, normalize, resolve } from 'pathe';
 
-/**
- * Preview annotations can take several forms, so we normalize them here to absolute file paths.
- */
+/** Preview annotations can take several forms, so we normalize them here to absolute file paths. */
 export function processPreviewAnnotation(path: PreviewAnnotation, projectRoot: string) {
   // If entry is an object, take the absolute specifier.
   // This is so that webpack can use an absolute path, and

From 32352497df02571dce1510cfa0f93f5ea998aa44 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Mon, 23 Sep 2024 22:56:30 +0800
Subject: [PATCH 12/20] fix tests

---
 .../codegen-modern-iframe-script.test.ts.snap | Bin 3056 -> 3058 bytes
 .../src/codegen-modern-iframe-script.ts       |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
index b6d37f297d9e566659c5e23b2d3fcc0b9a6473e0..97b7efe17c9a16d9ec2f3e7749366ebc50a4bbb6 100644
GIT binary patch
delta 26
ecmew${z-g;77HW8W-XR^tYAulaq|N%0Y(6BqX!)T

delta 22
ccmew){y}_$7RzRBmU*l|LV|JgBQ60(0AJ$=9{>OV

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index c23967cc347f..b701e3cad692 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -78,8 +78,8 @@ export async function generateModernIframeScriptCodeFromPreviews(options: {
     return dedent`
     if (import.meta.hot) {
       import.meta.hot.accept('${getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)}', (newModule) => {
-      // importFn has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
+        // importFn has changed so we need to patch the new one in
+        window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
       import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {

From 4ad25a5cec84ddad838d8dab3084bc79ecbcd588 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Mon, 23 Sep 2024 23:33:59 +0800
Subject: [PATCH 13/20] optimze semver

---
 code/builders/builder-vite/src/optimizeDeps.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts
index 0e81d7d5afc4..c4757ffba57f 100644
--- a/code/builders/builder-vite/src/optimizeDeps.ts
+++ b/code/builders/builder-vite/src/optimizeDeps.ts
@@ -99,6 +99,7 @@ const INCLUDE_CANDIDATES = [
   'refractor/lang/typescript.js',
   'refractor/lang/yaml.js',
   'regenerator-runtime/runtime.js',
+  'semver', // TODO: Remove once https://github.com/npm/node-semver/issues/712 is fixed
   'slash',
   'store2',
   'synchronous-promise',

From 531b5272727d48ceeff1c03b8a31be7f95e0bc4f Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Mon, 23 Sep 2024 23:54:07 +0800
Subject: [PATCH 14/20] move slsah back to dev dep

---
 code/builders/builder-vite/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 7692e0b69d6c..16370d536f5b 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -52,13 +52,13 @@
     "knitwork": "^1.1.0",
     "magic-string": "^0.30.0",
     "pathe": "^1.1.2",
-    "slash": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
     "@types/node": "^22.0.0",
     "glob": "^10.0.0",
+    "slash": "^5.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },

From 502248bf352b80d055772f7c4bd2378995725e2c Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Mon, 7 Oct 2024 10:38:58 +0800
Subject: [PATCH 15/20] fix tests

---
 .../codegen-modern-iframe-script.test.ts.snap | Bin 3058 -> 3049 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
index 97b7efe17c9a16d9ec2f3e7749366ebc50a4bbb6..e3620563f954e9599bd018907e0fd950801d77c6 100644
GIT binary patch
delta 41
vcmew){!)BH2NQF&LG0v<Ok$JgGqO!y#iYm_Z5X@xBGW8Zki_Ofjz(qxI#3Pp

delta 42
pcmaDU{z-g82NRoKVu^-<=HzZBTQJj5bMtAYS*%du%^4hx%m6Ir4F&)J


From f5af3eb63f81d728440e0489a0bff0bfd530e699 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 3 Dec 2024 13:45:18 +0100
Subject: [PATCH 16/20] Use inline snapshots

---
 .../codegen-modern-iframe-script.test.ts.snap  | Bin 3049 -> 0 bytes
 .../src/codegen-modern-iframe-script.test.ts   | Bin 839 -> 3946 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap

diff --git a/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap b/code/builders/builder-vite/src/__snapshots__/codegen-modern-iframe-script.test.ts.snap
deleted file mode 100644
index e3620563f954e9599bd018907e0fd950801d77c6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3049
zcmeHIU2oGc6y-U;;;JvrP@2#RnAB+-qZ(*JXw!-|p{h!~<hJoh?8tT+(ANLX%}1LJ
z+77`Uc<4h@%hx{locm?ZgDY-O8yE_f>PQ-xcO8g~Np;`z=B3RIaqi7B9-^n~Q*LCE
z*s}0@DwWZr$qWT5X7IBNQHisuVhIid#Zxn&oexST7YgSba}7rjF%iZHNfsNP(t-&g
z4KrK{4c*BY4q;-ocv3*a9R!kA8V6EL`Aj=d16|{d1A~~OFefR81x(2aw6&4y$BmTV
zJT44TVX>E1o;xh%?E|aEZId=-G8Xr}cg>xfjK?IPQ|R_Ink?<GFeF~?t#0n#K?U+b
ztla(q+LBnOaL4g6<V#>0YN97iIJ$oCP48_bt>tAJ)l$vFL#>sn4KTd|X8#G89>D}8
z)xZqRg_5@zm<L`cD|VEqI{J-)GM>e#$vhhG!Qm0ySwJ}}aOhj4tT53Yz?SQyS7SIn
z-WUPr$@|?6_bcgieM~<^8CBw!in42(dk5CSvT`m$nY+F}{BnNz_5JzzC;#H|^y=*N
z+V@GwR`dNm2+SW8sJ*NcXMIe`<vNF@>yp6fCZ~^&kmGH{+_J!jRCY)X`4nniZi0rn
z)bo2~(kim6O_v1$rp9i+_{-vUz@~6i^|7i90MBdMC!(qkXdKKi1T7&)3Lq_wgp`>e
z0uvQGIY@!PMOg$}g-TJVq~;n_pmx)${Q{^W<1W(z3(5eLU;5jif3&6XoQ<|#YfSoo
z>*%^$9*1Lnzde6!KCbKQCQ@r@^uaF4t~GAa*F<)4(6S~}cmMQO6a~Omb8+`dVBSn%
i?e|{qKQ-O|%i&%Ur_S5W=G|<5=GnX(zxBgbkKdp68ZZO^

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
index aa5d8584abf9a9d8752928d360a1d84d5022463a..00b5785eef0b20332dc4b79fb176e318950a4e40 100644
GIT binary patch
literal 3946
zcmeHJ(Qeu>6x}mlam7o*6q13qRif&;u4<=h>ROd))r1fY!GPOfN49BJwfy_8<HXRC
z&}!1OKEMM?V*B3XbI<iLoh4i-xQ7vuk)T830r{PfNO?dNEMP4744hl4h*ZvQtwxLa
z6T*lH6*=W2BG}1Tgfr5`2#GqxFUPp-T##EzQfZ_3L4-rNusO>XHEFi0sS_tz^oTR5
zAQAi;5nOPtU=N&?SB;<m>N+on;CSFRVDA&$*8unBI@6GiVgj5I2pQulRFpHE70Npn
zt;_{5kOYzQSfdHk5P5ldW>;s_zr?U{V6({%^qgQWi3rxmoW5t*Su%=G8EYvQH{X%-
z4mgkA9W!gu*v$f%V!8%@!&m$?RMGT=#gvgQ3lllz%Du{S)opbnj&+vgkh3wJNDuN_
zUXq~)hcP8g9VFBiRw^#;hMeC7lqpn07#CY=h6%-@84B{~PH;<wnul>G_`F;>oYNSU
z)YMW7BvJFE8IDG%2me|=jc^Yp)G@OVUJ$bY+0;oXDGU4-1yE9{LHqsAj%kH@RmJMX
zE{$L&M4cNMuT&iM<4$KHCv!P~Jv5Jr#Nl4w%G7XXqT#=;gPxFcsYf@2>b>j3{(jX~
zY>d8r63Dn<sP@&myLsMRO8|>nz96M+#8ZDT=>9mn`1R%N?Aze{;^^ne(dA%(C^rs2
zJOCr<ilp44njSV*32m6ZI&B6ZgK<=q`tcM@zX_h7NwSL)AvP@?Lypm(5f%E_GmY#h
zS=F^2^1~=12_7<U{!)~9SRp}16i?&;5Clu{Pf@KA9%U0U0?8pINGv`o4vFq^P*eRS
z&5k+BY^`B40i5aGV}l%;(C)I`Iy#&I<`+eS;;7MN=x3Y9%vj^4SKUK>-1^#Kn0H4R
z6Qy#2e?`mJGI1_RDh1QY&7^d2!(N|~YLvFvt!M0BWgThetk~HMJ&GpiYfDd)ugKI|
zh^5l;+FQ$eO_tXhv_G^zKI3^UYkH>Dp~64gI@ogt+P1-7w}TpHio2NZ%S}Gqs_<b$
mi9IT}M!a^7*c$QwGvZd=t2F6$ee2TZzTQ~7`c%2JcIrQN9v&6|

delta 45
pcmaDQcbsj*H%89jyu^ayjQkRf&D+_H7{%aRO=~U%g<2p9!T^T64zvIO


From 48f2b8d6d0f1cf4b7954b9e5f22b998b241061a1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 3 Dec 2024 14:22:42 +0100
Subject: [PATCH 17/20] Fix eslint

---
 code/.storybook/preview.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 056e887575e0..cc4481a56d1c 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -134,8 +134,6 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    // eslint-disable-next-line no-underscore-dangle
-    const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
     // __STORYBOOK_PREVIEW__ and __STORYBOOK_ADDONS_CHANNEL__ is set in the PreviewWeb constructor
     // which isn't loaded in portable stories/vitest
     if (!relativeCsfPaths || !preview || !channel) {

From d411b1940da498a029c370b82ea89c13e77f71b1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 3 Dec 2024 15:46:21 +0100
Subject: [PATCH 18/20] Fix timing issue

---
 code/.storybook/preview.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index cc4481a56d1c..6f0fd1393410 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -117,9 +117,6 @@ const ThemedSetRoot = () => {
   return null;
 };
 
-// eslint-disable-next-line no-underscore-dangle
-const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
-const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
 export const loaders = [
   /**
    * This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
@@ -134,6 +131,9 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
+    // eslint-disable-next-line no-underscore-dangle
+    const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
+    const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
     // __STORYBOOK_PREVIEW__ and __STORYBOOK_ADDONS_CHANNEL__ is set in the PreviewWeb constructor
     // which isn't loaded in portable stories/vitest
     if (!relativeCsfPaths || !preview || !channel) {

From f8fdac1a9195a0f97dd18f465907df5a3dd5de10 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 3 Dec 2024 16:29:42 +0100
Subject: [PATCH 19/20] Update snapshots

---
 .../src/codegen-modern-iframe-script.test.ts  | Bin 3946 -> 4212 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts
index 00b5785eef0b20332dc4b79fb176e318950a4e40..02c1e9fa6c02f3fb14a0c289baf34f2a64e8b6ae 100644
GIT binary patch
delta 472
zcmaDQ_eEiYIFn&<YDsB<LajntQGTw1x<heEeo<voetx!oa(+>&enC-cS!Qaveo<*&
zNoH=Ux;2-=<Va2@NiGEl0PEJ!wB~{dOlIVao4kNCidg}ul94%Z@?<Xm$q%_?Cp&Y?
zPL|@9nEZj6k3}JtOJNd=9;-qvP~T)jmNHJLaUdQKGEbgWb@CHliOJEdVUsO+-6or{
z$WETkYs;rl3$zoV=`OG3<X$$t$-CHs!Aj2aRkJ~qO!niK*nEK9i;>12RhcZor9at?
U%MZ=NT0oDx(89wl*gY!)0M+q*%K!iX

delta 296
zcmeyO@JeojIMZZhuF%OxIc+BYVTzxe!t6b{oZD~mF>aa3T0An7|8q-B4q)M9ishPI
z$fL(m%f+Pt0+SP1WhZZE31NeCMJ5NZ@=dm8^=IUoJegH>@=n&=$?9yblXvsWPwru}
zVy)G*=Hi;XkyU>3XEu+?8T>&&ndvMb(aky>NsMTYkemFIOCRVMxyf-nY?FPtHPIZU
b1$3M<bsZ%&S%%*m#bJ|mI3y+)2(SPEIn-8F


From cc21e5f9dddf87c794789dd68a7eb41e3eae47ef Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Thu, 5 Dec 2024 17:24:42 +0800
Subject: [PATCH 20/20] Fix import

---
 code/builders/builder-vite/src/codegen-modern-iframe-script.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index b9f7d98c93a2..da278c124f83 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -98,7 +98,7 @@ export async function generateModernIframeScriptCodeFromPreviews(options: {
    * @todo Inline variable and remove `noinspection`
    */
   const code = dedent`
-  import { setup } from '@storybook/core/preview/runtime';
+  import { setup } from 'storybook/internal/preview/runtime';
 
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';