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

package/src/vitePluginAstroBuildServer.ts

@@ -1,15 +1,24 @@
-import type { Dirent } from 'node:fs';
-import { readdir } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { mkdir, writeFile } from 'node:fs/promises';
 import { build, type Rollup } from 'vite';
+import { resolveRulesConfigFilePath } from './rules-options.ts';
 import type { FrameworkOptions } from './types.ts';
+import {
+  buildStaticModuleMap,
+  buildSnapshotFilePath,
+  collectHydratedComponentPaths,
+  copyRuntimeSnapshot,
+  collectTrackedSpecifiers,
+  emitBuildEntrypoints,
+  loadVirtualBuildModule,
+  resolveVirtualBuildModuleId,
+} from './vitePluginAstroBuildShared.ts';
 import { mergeWithAstroConfig } from './vitePluginAstro.ts';
 import { viteAstroContainerRenderersPlugin } from './viteAstroContainerRenderersPlugin.ts';
-import { astroFilesVirtualModulePlugin } from './vite/astroFilesVirtualModulePlugin.ts';
-import { storybookAstroStoryRulesConfigVirtualModulePlugin } from './vite/storybookAstroRulesConfigVirtualModulePlugin.ts';
-import { storybookAstroSanitizationConfigVirtualModulePlugin } from './vite/storybookAstroSanitizationConfigVirtualModulePlugin.ts';
-import { storybookAstroServerAuthConfigVirtualModulePlugin } from './vite/storybookAstroServerAuthConfigVirtualModulePlugin.ts';
+import { sanitizeConfigPlugin } from './vite/sanitizeConfigPlugin.ts';
+import { serverAuthPlugin } from './vite/serverAuthPlugin.ts';
+import { serverRuntimePlugin } from './vite/serverRuntimePlugin.ts';
 
 const moduleRoot = resolve(dirname(fileURLToPath(import.meta.url)), '.');
 // packageRoot works regardless of whether this file is running from src/ or dist/
@@ -18,10 +27,8 @@ const packageRoot = resolve(moduleRoot, '..');
 export function vitePluginAstroBuildServer(options: FrameworkOptions) {
   const integrations = options.integrations ?? [];
   const resolveFrom = options.resolveFrom ?? process.cwd();
-  const storiesMap = new Map<string, Set<string>>();
   const trackedSpecifiers = collectTrackedSpecifiers(integrations);
   const staticEntrypointRefs = new Map<string, string>();
-  const componentEntrypointRefs = new Map<string, string>();
   let storybookStaticOutDir = resolve(resolveFrom, 'storybook-static');
 
   return {
@@ -33,108 +40,88 @@ export function vitePluginAstroBuildServer(options: FrameworkOptions) {
       storybookStaticOutDir = resolve(resolveFrom, config.build.outDir ?? 'storybook-static');
     },
 
-    resolveId(id: string, importer?: string) {
-      if (id.endsWith('.astro') && importer) {
-        const absoluteAstroPath = resolve(dirname(importer), id);
-
-        if (!storiesMap.has(absoluteAstroPath)) {
-          storiesMap.set(absoluteAstroPath, new Set());
-        }
-
-        storiesMap.get(absoluteAstroPath)?.add(importer);
-      }
-
-      if (id.startsWith('virtual:astro-static-module/')) {
-        return `\0${id}`;
-      }
-
-      if (id.startsWith('virtual:astro-component-module/')) {
-        return `\0${id}`;
-      }
+    resolveId(id: string) {
+      return resolveVirtualBuildModuleId(id);
     },
 
     load(id: string) {
-      if (id.startsWith('\0virtual:astro-static-module/')) {
-        const encodedSpecifier = id.replace('\0virtual:astro-static-module/', '');
-        const specifier = decodeURIComponent(encodedSpecifier);
-
-        if (isClientEntrypoint(specifier)) {
-          return [`export { default } from '${specifier}';`, `export * from '${specifier}';`].join('\n');
-        }
-
-        return [`import '${specifier}';`, 'export default undefined;'].join('\n');
-      }
-
-      if (id.startsWith('\0virtual:astro-component-module/')) {
-        const encodedSpecifier = id.replace('\0virtual:astro-component-module/', '');
-        const specifier = decodeURIComponent(encodedSpecifier);
-
-        return [`export { default } from '${specifier}';`, `export * from '${specifier}';`].join('\n');
-      }
+      return loadVirtualBuildModule(id);
     },
 
     async buildStart(this: Rollup.PluginContext) {
-      integrations.forEach((integration) => {
-        const entrypoint = integration.renderer.client?.entrypoint;
-
-        if (entrypoint) {
-          this.addWatchFile(entrypoint);
-        }
-      });
-
-      trackedSpecifiers.forEach((specifier) => {
-        const fileReferenceId = this.emitFile({
-          type: 'chunk',
-          id: toStaticVirtualId(specifier)
-        });
-
-        staticEntrypointRefs.set(specifier, fileReferenceId);
-      });
-
-      const srcRoot = resolve(resolveFrom, 'src/components');
-      const specifiers = await collectHydratableSourceModules(srcRoot);
-
-      specifiers.forEach((specifier) => {
-        const fileReferenceId = this.emitFile({
-          type: 'chunk',
-          id: toComponentVirtualId(specifier)
-        });
-
-        componentEntrypointRefs.set(specifier, fileReferenceId);
+      await emitBuildEntrypoints({
+        pluginContext: this,
+        integrations,
+        resolveFrom,
+        trackedSpecifiers,
+        staticEntrypointRefs
       });
     },
 
-    async writeBundle(this: Rollup.PluginContext) {
-      const astroComponents = Array.from(storiesMap.keys());
-      const staticModuleMap = buildStaticModuleMap(
-        this,
-        staticEntrypointRefs,
-        componentEntrypointRefs
-      );
+    async writeBundle(
+      this: Rollup.PluginContext,
+      _outputOptions: Rollup.NormalizedOutputOptions
+    ) {
       const serverOutDir = resolve(dirname(storybookStaticOutDir), 'storybook-server');
+      const snapshotDirName = 'project';
+      const astroStories = await collectAstroStories(storybookStaticOutDir, resolveFrom);
+      const storyAstroComponentPaths = Array.from(new Set(astroStories.map((story) => story.componentPath)));
+      const componentPathMap = buildComponentPathMap(storyAstroComponentPaths, resolveFrom, snapshotDirName);
+      const storyRulesConfigFilePath = resolveRulesConfigFilePath(options.storyRules, resolveFrom);
+      const trackedModuleMap = buildStaticModuleMap(this, staticEntrypointRefs, new Map());
+      const hydratedComponentAssets = await buildHydratedComponentAssets({
+        componentPaths: storyAstroComponentPaths,
+        integrations,
+        resolveFrom,
+        outDir: storybookStaticOutDir
+      });
+      const staticModuleMap = addSnapshotModuleAliases({
+        ...trackedModuleMap,
+        ...hydratedComponentAssets.staticModuleMap
+      }, {
+        resolveFrom,
+        snapshotRoot: resolve(serverOutDir, snapshotDirName),
+        snapshotDirName
+      });
+      const staticCssMap = hydratedComponentAssets.staticCssMap;
 
       await buildAstroServer({
-        astroComponents,
         integrations,
         sanitization: options.sanitization,
         storyRules: options.storyRules,
         server: options.server,
         outDir: serverOutDir,
+        snapshotDirName,
+        componentPathMap,
         staticModuleMap,
+        staticCssMap,
+        trackedSpecifiers: Array.from(trackedSpecifiers),
         resolveFrom
       });
+
+      await copyRuntimeSnapshot({
+        resolveFrom,
+        snapshotRoot: resolve(serverOutDir, snapshotDirName),
+        snapshotDirName,
+        astroComponents: storyAstroComponentPaths,
+        storyRulesConfigFilePath
+      });
     }
   };
 }
 
+/** Builds the standalone Astro render server used by server-mode Storybook output. */
 async function buildAstroServer(options: {
-  astroComponents: string[];
-  integrations: FrameworkOptions['integrations'];
+  integrations: NonNullable<FrameworkOptions['integrations']>;
   sanitization?: FrameworkOptions['sanitization'];
   storyRules?: FrameworkOptions['storyRules'];
   server?: FrameworkOptions['server'];
   outDir: string;
+  snapshotDirName: string;
+  componentPathMap: Record<string, string>;
   staticModuleMap: Record<string, string>;
+  staticCssMap: Record<string, string[]>;
+  trackedSpecifiers: string[];
   resolveFrom: string;
 }) {
   const buildConfig = {
@@ -154,10 +141,18 @@ async function buildAstroServer(options: {
       }
     },
     plugins: [
-      astroFilesVirtualModulePlugin(options.astroComponents),
-      storybookAstroSanitizationConfigVirtualModulePlugin(options.sanitization),
-      storybookAstroStoryRulesConfigVirtualModulePlugin(options.storyRules, options.resolveFrom),
-      storybookAstroServerAuthConfigVirtualModulePlugin(options.server),
+      sanitizeConfigPlugin(options.sanitization),
+      serverAuthPlugin(options.server),
+      serverRuntimePlugin({
+        integrations: options.integrations,
+        storyRules: options.storyRules,
+        resolveFrom: options.resolveFrom,
+        snapshotDirName: options.snapshotDirName,
+        componentPathMap: options.componentPathMap,
+        staticModuleMap: options.staticModuleMap,
+        staticCssMap: options.staticCssMap,
+        trackedSpecifiers: options.trackedSpecifiers
+      }),
       viteAstroContainerRenderersPlugin(options.integrations, {
         mode: 'production',
         staticModuleMap: options.staticModuleMap
@@ -176,114 +171,171 @@ async function buildAstroServer(options: {
   await build(finalConfig);
 }
 
-function collectTrackedSpecifiers(integrations: FrameworkOptions['integrations']) {
-  const specifiers = new Set<string>(['astro:scripts/page.js', 'astro:scripts/before-hydration.js']);
-
-  integrations.forEach((integration) => {
-    const entrypoint = integration.renderer.client?.entrypoint;
+/** Rewrites Astro component module ids so the standalone server loads them from the snapshot tree. */
+function buildComponentPathMap(
+  astroComponents: string[],
+  resolveFrom: string,
+  snapshotDirName: string
+) {
+  // The built render server loads Astro component modules from the snapshot,
+  // not from the original project root that existed during the build.
+  return Object.fromEntries(
+    astroComponents.map((componentPath) => [
+      componentPath,
+      buildSnapshotFilePath(resolveFrom, componentPath, snapshotDirName).replace(
+        new RegExp(`^${snapshotDirName}/`),
+        ''
+      )
+    ])
+  );
+}
 
-    if (entrypoint) {
-      specifiers.add(entrypoint);
-    }
-  });
+async function collectAstroStories(outDir: string, resolveFrom: string) {
+  const indexFile = resolve(outDir, 'index.json');
+  const indexRaw = await import('node:fs/promises').then(({ readFile }) => readFile(indexFile, 'utf-8'));
+  const indexJson = JSON.parse(indexRaw) as {
+    entries?: Record<string, { type?: string; componentPath?: string; importPath?: string; exportName?: string }>
+  };
 
-  return specifiers;
+  return Object.values(indexJson.entries ?? [])
+    .filter((entry) => entry.type === 'story' && entry.componentPath?.endsWith('.astro'))
+    .map((entry) => ({
+      componentPath: entry.componentPath?.startsWith('./') || entry.componentPath?.startsWith('../')
+        ? resolve(resolveFrom, entry.componentPath)
+        : entry.componentPath
+    }))
+    .filter((entry): entry is { componentPath: string } => Boolean(entry.componentPath));
 }
 
-function buildStaticModuleMap(
-  pluginContext: Rollup.PluginContext,
-  staticEntrypointRefs: Map<string, string>,
-  componentEntrypointRefs: Map<string, string>
-) {
-  const map: Record<string, string> = {};
+async function buildHydratedComponentAssets(options: {
+  componentPaths: string[];
+  integrations: NonNullable<FrameworkOptions['integrations']>;
+  resolveFrom: string;
+  outDir: string;
+}) {
+  const hydratedComponentPaths = Array.from(
+    new Set((await Promise.all(options.componentPaths.map((componentPath) => collectHydratedComponentPaths(componentPath)))).flat())
+  );
 
-  staticEntrypointRefs.forEach((fileReferenceId, specifier) => {
-    const fileName = pluginContext.getFileName(fileReferenceId);
+  if (hydratedComponentPaths.length === 0) {
+    return {
+      staticModuleMap: {},
+      staticCssMap: {}
+    };
+  }
 
-    if (fileName) {
-      map[specifier] = toPublicPath(fileName);
+  const clientEntrypoints = Array.from(
+    new Set(
+      options.integrations
+        .map((integration) => integration.renderer.client?.entrypoint)
+        .filter((entrypoint): entrypoint is string => Boolean(entrypoint))
+    )
+  );
+  const entryNames = Object.fromEntries(
+    [
+      ...hydratedComponentPaths.map((componentPath, index) => [`component-${index}`, componentPath]),
+      ...clientEntrypoints.map((entrypoint, index) => [`renderer-${index}`, entrypoint])
+    ]
+  );
+  const buildConfig = {
+    root: options.resolveFrom,
+    build: {
+      write: false,
+      outDir: options.outDir,
+      emptyOutDir: false,
+      manifest: false,
+      rollupOptions: {
+        input: entryNames,
+        preserveEntrySignatures: 'strict',
+        output: {
+          entryFileNames: '_astro/[name]-[hash].js',
+          chunkFileNames: '_astro/[name]-[hash].js',
+          assetFileNames: '_astro/[name]-[hash][extname]'
+        }
+      }
     }
-  });
+  };
+  const finalConfig = await mergeWithAstroConfig(
+    buildConfig,
+    options.integrations,
+    options.resolveFrom,
+    'production',
+    'build'
+  );
+  const buildOutput = await build(finalConfig);
+  const output = Array.isArray(buildOutput) ? buildOutput.flatMap((result) => result.output) : buildOutput.output;
+  const staticModuleMap: Record<string, string> = {};
+  const staticCssMap: Record<string, string[]> = {};
 
-  componentEntrypointRefs.forEach((fileReferenceId, specifier) => {
-    const fileName = pluginContext.getFileName(fileReferenceId);
+  for (const item of output) {
+    await writeBuildOutputFile(options.outDir, item);
 
-    if (fileName) {
-      map[specifier] = toPublicPath(fileName);
+    if (item.type !== 'chunk' || !item.facadeModuleId) {
+      continue;
     }
-  });
 
-  return map;
-}
-
-function toStaticVirtualId(specifier: string) {
-  return `virtual:astro-static-module/${encodeURIComponent(specifier)}`;
-}
-
-function toComponentVirtualId(specifier: string) {
-  return `virtual:astro-component-module/${encodeURIComponent(specifier)}`;
-}
+    const normalizedFacadeId = item.facadeModuleId.replace(/\\/g, '/');
+    const originalInputSpecifier = entryNames[item.name];
 
-function isClientEntrypoint(specifier: string) {
-  return specifier.startsWith('@astrojs/') && specifier.endsWith('/client.js');
-}
+    staticModuleMap[normalizedFacadeId] = `./${item.fileName}`;
 
-function toPublicPath(fileName: string) {
-  return `./${fileName}`;
-}
+    if (originalInputSpecifier && originalInputSpecifier !== normalizedFacadeId) {
+      staticModuleMap[originalInputSpecifier] = `./${item.fileName}`;
+    }
 
-async function collectHydratableSourceModules(srcRoot: string): Promise<string[]> {
-  const modules: string[] = [];
+    const importedCss = Array.from((item.viteMetadata?.importedCss ?? new Set<string>()).values());
 
-  async function walk(directory: string) {
-    let entries: Dirent[];
+    if (importedCss.length > 0) {
+      staticCssMap[normalizedFacadeId] = importedCss.map((fileName) => `./${fileName}`);
 
-    try {
-      entries = await readdir(directory, { withFileTypes: true });
-    } catch {
-      return;
+      if (originalInputSpecifier && originalInputSpecifier !== normalizedFacadeId) {
+        staticCssMap[originalInputSpecifier] = importedCss.map((fileName) => `./${fileName}`);
+      }
     }
+  }
 
-    await Promise.all(
-      entries.map(async (entry) => {
-        const absolutePath = resolve(directory, entry.name);
-
-        if (entry.isDirectory()) {
-          await walk(absolutePath);
+  return {
+    staticModuleMap,
+    staticCssMap
+  };
+}
 
-          return;
-        }
+async function writeBuildOutputFile(outDir: string, item: Rollup.OutputAsset | Rollup.OutputChunk) {
+  const outputPath = resolve(outDir, item.fileName);
 
-        if (!entry.isFile()) {
-          return;
-        }
+  await mkdir(dirname(outputPath), { recursive: true });
 
-        const normalizedPath = absolutePath.replace(/\\/g, '/');
+  if (item.type === 'asset') {
+    await writeFile(outputPath, item.source);
 
-        if (!isHydratableSourceFile(normalizedPath)) {
-          return;
-        }
+    return;
+  }
 
-        if (isNonHydratableSourceFile(normalizedPath)) {
-          return;
-        }
+  await writeFile(outputPath, item.code);
+}
 
-        modules.push(normalizedPath);
-      })
-    );
+function addSnapshotModuleAliases(
+  staticModuleMap: Record<string, string>,
+  options: {
+    resolveFrom: string;
+    snapshotRoot: string;
+    snapshotDirName: string;
   }
+) {
+  const mapWithSnapshotPaths = { ...staticModuleMap };
 
-  await walk(srcRoot);
+  for (const [sourcePath, builtPath] of Object.entries(staticModuleMap)) {
+    if (!sourcePath.startsWith('/')) {
+      continue;
+    }
 
-  return modules;
-}
+    const snapshotPath = resolve(
+      dirname(options.snapshotRoot),
+      buildSnapshotFilePath(options.resolveFrom, sourcePath, options.snapshotDirName)
+    ).replace(/\\/g, '/');
 
-function isHydratableSourceFile(input: string) {
-  return /\.(jsx|tsx|vue|svelte|js|ts)$/.test(input);
-}
+    mapWithSnapshotPaths[snapshotPath] = builtPath;
+  }
 
-function isNonHydratableSourceFile(input: string) {
-  return /\.stories\.[jt]sx?$|\.stories\.vue$|\.stories\.svelte$|\.(spec|test)\.[jt]sx?$/.test(
-    input
-  );
+  return mapWithSnapshotPaths;
 }

package/src/vitePluginAstroBuildShared.test.ts

@@ -0,0 +1,87 @@
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+import { collectHydratedComponentPaths } from './vitePluginAstroBuildShared.ts';
+
+describe('collectHydratedComponentPaths', () => {
+  let tmpDir: string;
+
+  beforeEach(async () => {
+    tmpDir = await mkdtemp(join(tmpdir(), 'storybook-astro-build-test-'));
+  });
+
+  afterEach(async () => {
+    await rm(tmpDir, { recursive: true, force: true });
+  });
+
+  test('excludes a .tsx file that has only named exports', async () => {
+    const astroFile = join(tmpDir, 'Island.astro');
+    const namedOnlyTsx = join(tmpDir, 'Helper.tsx');
+
+    await writeFile(astroFile, `---\nimport Helper from './Helper.tsx';\n---`);
+    await writeFile(namedOnlyTsx, `export const Helper = () => <div />;`);
+
+    const result = await collectHydratedComponentPaths(astroFile);
+
+    expect(result).not.toContain(namedOnlyTsx.replace(/\\/g, '/'));
+  });
+
+  test('includes a .tsx file that has a default export', async () => {
+    const astroFile = join(tmpDir, 'Island.astro');
+    const defaultTsx = join(tmpDir, 'Button.tsx');
+
+    await writeFile(astroFile, `---\nimport Button from './Button.tsx';\n---`);
+    await writeFile(defaultTsx, `export default function Button() { return <div />; }`);
+
+    const result = await collectHydratedComponentPaths(astroFile);
+
+    expect(result).toContain(defaultTsx.replace(/\\/g, '/'));
+  });
+
+  test('includes a .svelte file even though it has no literal export default in source', async () => {
+    // Svelte SFCs have no `export default` — the compiler generates one.
+    // If the check were applied to .svelte, these files would be falsely excluded.
+    const astroFile = join(tmpDir, 'Island.astro');
+    const svelteFile = join(tmpDir, 'Counter.svelte');
+
+    await writeFile(astroFile, `---\nimport Counter from './Counter.svelte';\n---`);
+    await writeFile(svelteFile, `<script>\n  let count = 0;\n</script>\n<button>{count}</button>`);
+
+    const result = await collectHydratedComponentPaths(astroFile);
+
+    expect(result).toContain(svelteFile.replace(/\\/g, '/'));
+  });
+
+  test('includes a .vue <script setup> file even though it has no literal export default in source', async () => {
+    // Vue <script setup> components have no `export default` — the compiler generates one.
+    const astroFile = join(tmpDir, 'Island.astro');
+    const vueFile = join(tmpDir, 'Counter.vue');
+
+    await writeFile(astroFile, `---\nimport Counter from './Counter.vue';\n---`);
+    await writeFile(
+      vueFile,
+      `<script setup>\nconst count = ref(0);\n</script>\n<template><button>{{ count }}</button></template>`
+    );
+
+    const result = await collectHydratedComponentPaths(astroFile);
+
+    expect(result).toContain(vueFile.replace(/\\/g, '/'));
+  });
+
+  test('includes a .tsx file on read error, preserving prior behaviour', async () => {
+    // When the file cannot be read, hasDefaultExport returns true so the file
+    // is kept rather than silently dropped.
+    const astroFile = join(tmpDir, 'Island.astro');
+    const missingTsx = join(tmpDir, 'Missing.tsx');
+
+    // Point the Astro file at a component path that won't exist on disk.
+    await writeFile(astroFile, `---\nimport Missing from './Missing.tsx';\n---`);
+
+    // Don't write missingTsx — resolveLocalImportPath will not find it,
+    // so it never reaches hasDefaultExport. Confirm the result is just empty.
+    const result = await collectHydratedComponentPaths(astroFile);
+
+    expect(result).not.toContain(missingTsx.replace(/\\/g, '/'));
+  });
+});