@storybook-astro/framework 1.2.0 → 1.3.0-canary.2

package/src/viteAstroContainerRenderersPlugin.ts

@@ -1,5 +1,5 @@
 import type { Integration } from './integrations/index.ts';
-import { createVirtualModulePlugin } from './vite/createVirtualModulePlugin.ts';
+import { createVirtualModule } from './vite/virtualModulePlugin.ts';
 
 type PluginOptions = {
   mode?: 'development' | 'production';
@@ -14,11 +14,15 @@ export function viteAstroContainerRenderersPlugin(
   const mode = options.mode ?? 'development';
   const staticModuleMap = options.staticModuleMap ?? {};
 
-  return createVirtualModulePlugin({
+  return createVirtualModule({
     pluginName: 'storybook-astro:container-renderers',
     virtualModuleId: 'virtual:astro-container-renderers',
     load() {
       const importStatements = buildImportStatements(safeIntegrations);
+      const browserModuleResolverHelpers =
+        mode === 'development' ? buildBrowserModuleResolverHelpers() : '';
+      const clientModuleEntrypoints =
+        mode === 'development' ? buildClientModuleEntrypoints(safeIntegrations) : '[]';
       const clientResolvers =
         mode === 'development'
           ? safeIntegrations
@@ -31,12 +35,14 @@ export function viteAstroContainerRenderersPlugin(
 
       return `
         ${importStatements}
+        ${browserModuleResolverHelpers}
 
         export function addRenderers(container) {
           ${safeIntegrations.map((integration) => buildServerRenderer(integration) + '\n' + buildClientRenderer(integration)).join('\n')}
         }
 
         const staticClientModules = ${JSON.stringify(staticModuleMap, null, 2)};
+        const clientModuleEntrypoints = ${clientModuleEntrypoints};
 
         const clientModulesResolvers = [
           ${clientResolvers}
@@ -53,6 +59,12 @@ export function viteAstroContainerRenderersPlugin(
             return staticClientModules[normalizedSpecifier];
           }
 
+          for (const entrypoint of clientModuleEntrypoints) {
+            if (normalizedSpecifier === entrypoint || normalizedSpecifier.startsWith(entrypoint)) {
+              return storybookAstroResolveBrowserModulePath(normalizedSpecifier);
+            }
+          }
+
           for (const resolver of clientModulesResolvers) {
             const resolution = resolver(specifier);
 
@@ -66,6 +78,64 @@ export function viteAstroContainerRenderersPlugin(
   });
 }
 
+function buildClientModuleEntrypoints(integrations: Integration[]) {
+  return JSON.stringify(
+    Array.from(
+      new Set(
+        integrations
+          .map((integration) => integration.renderer.client?.entrypoint)
+          .filter((entrypoint): entrypoint is string => Boolean(entrypoint))
+      )
+    )
+  );
+}
+
+function buildBrowserModuleResolverHelpers() {
+  return `
+    import path from 'node:path';
+    import { createRequire } from 'node:module';
+    import { pathToFileURL } from 'node:url';
+
+    function storybookAstroToFileHref(filePath) {
+      return pathToFileURL(filePath).href;
+    }
+
+    function storybookAstroResolveFrom(moduleName, fromDirectory) {
+      const fromFile = path.join(fromDirectory, '__storybook_astro_resolve__.js');
+
+      return createRequire(storybookAstroToFileHref(fromFile)).resolve(moduleName);
+    }
+
+    function storybookAstroResolveFromCandidates(moduleName, primaryDirectory) {
+      const directories = [primaryDirectory, process.env.INIT_CWD].filter(Boolean);
+      const visited = new Set();
+      let lastError;
+
+      for (const directory of directories) {
+        if (visited.has(directory)) {
+          continue;
+        }
+
+        visited.add(directory);
+
+        try {
+          return storybookAstroResolveFrom(moduleName, directory);
+        } catch (error) {
+          lastError = error;
+        }
+      }
+
+      throw lastError;
+    }
+
+    function storybookAstroResolveBrowserModulePath(moduleName, resolveFrom = process.cwd()) {
+      const resolvedPath = storybookAstroResolveFromCandidates(moduleName, resolveFrom).replace(/\\\\/g, '/');
+
+      return '/@fs/' + resolvedPath;
+    }
+  `;
+}
+
 function buildImportStatements(integrations: Integration[]) {
   return integrations
     .filter((integration) => integration.renderer.server)