@storybook-astro/framework 1.0.3 → 1.1.0

package/src/vite/storybookAstroRulesConfigVirtualModulePlugin.ts

@@ -0,0 +1,37 @@
+import type { Plugin } from 'vite';
+import type { StoryRulesOptions } from '../rules-options.ts';
+import { resolveRulesConfigFilePath } from '../rules-options.ts';
+import { createVirtualModulePlugin } from './createVirtualModulePlugin.ts';
+
+export const STORYBOOK_ASTRO_STORY_RULES_CONFIG_VIRTUAL_MODULE_ID =
+  'virtual:storybook-astro-story-rules-config';
+
+export function storybookAstroStoryRulesConfigVirtualModulePlugin(
+  options?: StoryRulesOptions,
+  resolveFrom = process.cwd()
+): Plugin {
+  return createVirtualModulePlugin({
+    pluginName: 'storybook-astro:virtual-story-rules-config',
+    virtualModuleId: STORYBOOK_ASTRO_STORY_RULES_CONFIG_VIRTUAL_MODULE_ID,
+    load() {
+      const configFilePath = resolveRulesConfigFilePath(options, resolveFrom);
+
+      if (!configFilePath) {
+        return [
+          'const storybookAstroStoryRulesConfig = { rules: [] };',
+          'export default storybookAstroStoryRulesConfig;',
+          'export const storybookAstroStoryRulesConfigFilePath = undefined;'
+        ].join('\n');
+      }
+
+      const importPath = JSON.stringify(configFilePath.replace(/\\/g, '/'));
+      const configPath = JSON.stringify(configFilePath.replace(/\\/g, '/'));
+
+      return [
+        `import * as storybookAstroStoryRulesConfigModule from ${importPath};`,
+        'export default storybookAstroStoryRulesConfigModule;',
+        `export const storybookAstroStoryRulesConfigFilePath = ${configPath};`
+      ].join('\n');
+    }
+  });
+}

package/src/vite/storybookAstroSanitizationConfigVirtualModulePlugin.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+import type { SanitizationOptions } from '../lib/sanitization.ts';
+import { serializeSanitizationOptions } from '../lib/sanitization.ts';
+import { createVirtualModulePlugin } from './createVirtualModulePlugin.ts';
+
+export const STORYBOOK_ASTRO_SANITIZATION_CONFIG_VIRTUAL_MODULE_ID =
+  'virtual:storybook-astro-sanitization-config';
+
+export function storybookAstroSanitizationConfigVirtualModulePlugin(
+  options?: SanitizationOptions
+): Plugin {
+  return createVirtualModulePlugin({
+    pluginName: 'storybook-astro:virtual-sanitization-config',
+    virtualModuleId: STORYBOOK_ASTRO_SANITIZATION_CONFIG_VIRTUAL_MODULE_ID,
+    load() {
+      const serializedConfig = serializeSanitizationOptions(options);
+
+      return `export default ${serializedConfig};`;
+    }
+  });
+}

package/src/vite/storybookAstroServerAuthConfigVirtualModulePlugin.test.ts

@@ -0,0 +1,71 @@
+import type { PluginOption } from 'vite';
+import { describe, expect, test } from 'vitest';
+import {
+  STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID,
+  storybookAstroServerAuthConfigVirtualModulePlugin
+} from './storybookAstroServerAuthConfigVirtualModulePlugin.ts';
+
+function getPlugin(pluginOption: PluginOption) {
+  if (Array.isArray(pluginOption)) {
+    throw new Error('Expected a single plugin object, but got a plugin array.');
+  }
+
+  if (!pluginOption || typeof pluginOption !== 'object') {
+    throw new Error('Expected plugin option to be an object.');
+  }
+
+  return pluginOption;
+}
+
+function getHookHandler<T extends (...args: unknown[]) => unknown>(hook: unknown): T {
+  if (typeof hook === 'function') {
+    return hook as T;
+  }
+
+  if (
+    typeof hook === 'object' &&
+    hook !== null &&
+    'handler' in hook &&
+    typeof (hook as { handler?: unknown }).handler === 'function'
+  ) {
+    return (hook as { handler: T }).handler;
+  }
+
+  throw new Error('Expected hook to be a function or an object with a handler function.');
+}
+
+describe('storybookAstroServerAuthConfigVirtualModulePlugin', () => {
+  test('normalizes auth token and header values', async () => {
+    const plugin = getPlugin(
+      storybookAstroServerAuthConfigVirtualModulePlugin({
+        authToken: '  test-token  ',
+        authHeader: '  X-Storybook-Token  '
+      })
+    );
+    const resolveId = getHookHandler<(id: string) => string | undefined>(plugin.resolveId);
+    const load = getHookHandler<(id: string) => Promise<string | undefined>>(plugin.load);
+    const resolvedId = resolveId(STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID);
+
+    expect(resolvedId).toBe(`\0${STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID}`);
+    await expect(load(resolvedId!)).resolves.toBe(
+      'export const storybookAstroServerAuthToken = "test-token";\n' +
+        'export const storybookAstroServerAuthHeader = "x-storybook-token";'
+    );
+  });
+
+  test('falls back to authorization header and undefined token', async () => {
+    const plugin = getPlugin(
+      storybookAstroServerAuthConfigVirtualModulePlugin({
+        authToken: '   '
+      })
+    );
+    const load = getHookHandler<(id: string) => Promise<string | undefined>>(plugin.load);
+
+    await expect(
+      load(`\0${STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID}`)
+    ).resolves.toBe(
+      'export const storybookAstroServerAuthToken = undefined;\n' +
+        'export const storybookAstroServerAuthHeader = "authorization";'
+    );
+  });
+});

package/src/vite/storybookAstroServerAuthConfigVirtualModulePlugin.ts

@@ -0,0 +1,42 @@
+import type { Plugin } from 'vite';
+import type { ServerBuildOptions } from '../types.ts';
+import { createVirtualModulePlugin } from './createVirtualModulePlugin.ts';
+
+export const STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID =
+  'virtual:storybook-astro-server-auth-config';
+
+export function storybookAstroServerAuthConfigVirtualModulePlugin(
+  options?: ServerBuildOptions
+): Plugin {
+  const authToken = normalizeOptionalString(options?.authToken);
+  const authHeader = normalizeAuthHeader(options?.authHeader);
+
+  return createVirtualModulePlugin({
+    pluginName: 'storybook-astro:virtual-server-auth-config',
+    virtualModuleId: STORYBOOK_ASTRO_SERVER_AUTH_CONFIG_VIRTUAL_MODULE_ID,
+    load() {
+      return [
+        `export const storybookAstroServerAuthToken = ${
+          authToken ? JSON.stringify(authToken) : 'undefined'
+        };`,
+        `export const storybookAstroServerAuthHeader = ${JSON.stringify(authHeader)};`
+      ].join('\n');
+    }
+  });
+}
+
+function normalizeOptionalString(value: string | undefined) {
+  if (!value) {
+    return undefined;
+  }
+
+  const normalizedValue = value.trim();
+
+  return normalizedValue || undefined;
+}
+
+function normalizeAuthHeader(value: string | undefined) {
+  const normalizedValue = normalizeOptionalString(value);
+
+  return (normalizedValue ?? 'authorization').toLowerCase();
+}

package/src/vitePluginAstroBuildPrerender.ts

@@ -9,11 +9,11 @@ import type { Integration } from './integrations/index.ts';
 import { ssrLoadModuleWithFsFallback } from './lib/ssr-load-module-with-fs-fallback.ts';
 import { resolveSanitizationOptions, sanitizeRenderPayload } from './lib/sanitization.ts';
 import { resolveStoryModuleMock, withStoryModuleMocks } from './module-mocks.ts';
-import { applyMswHandlers } from './msw.ts';
 import { resolveRulesConfigFilePath } from './rules-options.ts';
-import { selectStoryRules } from './rules.ts';
+import { selectStoryRules, withStoryRuleCleanups } from './rules.ts';
 import type { FrameworkOptions } from './types.ts';
 import { vitePluginAstroFontsFallback } from './vitePluginAstroFontsFallback.ts';
+import { vitePluginAstroIntegrationOptsFallback } from './vitePluginAstroIntegrationOptsFallback.ts';
 import { vitePluginAstroRoutesFallback } from './vitePluginAstroRoutesFallback.ts';
 import { vitePluginAstroVueFallback } from './vitePluginAstroVueFallback.ts';
 
@@ -218,7 +218,6 @@ async function prerenderStories(options: {
       const selectedRules = await selectStoryRules({
         configModule: rulesConfigModule,
         configFilePath: options.storyRulesConfigFilePath,
-        mode: 'production',
         story: {
           id: story.id,
           title: story.title,
@@ -226,42 +225,47 @@ async function prerenderStories(options: {
         }
       });
 
-      await applyMswHandlers(selectedRules.mswHandlers);
-
       if (selectedRules.moduleMocks.size > 0) {
         viteServer.moduleGraph.invalidateAll();
       }
 
-      const html = await withStoryModuleMocks(selectedRules.moduleMocks, async () => {
-        const modulePath = resolveImportPath(story.importPath, options.resolveFrom);
-        const storyModule = await viteServer.ssrLoadModule(modulePath);
-        const meta = isRecord(storyModule.default) ? storyModule.default : {};
-        const storyExport = isRecord(storyModule[story.exportName]) ? storyModule[story.exportName] : {};
+      const html = await withStoryRuleCleanups(selectedRules.cleanups, async () => {
+        return withStoryModuleMocks(selectedRules.moduleMocks, async () => {
+          const modulePath = resolveImportPath(story.importPath, options.resolveFrom);
+          const storyModule = await viteServer.ssrLoadModule(modulePath);
+          const meta = isRecord(storyModule.default) ? storyModule.default : {};
+          const storyExport = isRecord(storyModule[story.exportName])
+            ? storyModule[story.exportName]
+            : {};
+
+          if (typeof meta.component !== 'function') {
+            throw new Error(
+              `Unable to prerender story "${story.id}". Missing default export component in ${story.importPath}.`
+            );
+          }
 
-        if (typeof meta.component !== 'function') {
-          throw new Error(
-            `Unable to prerender story "${story.id}". Missing default export component in ${story.importPath}.`
-          );
-        }
+          if (storyExport.component && storyExport.component !== meta.component) {
+            return undefined;
+          }
 
-        if (storyExport.component && storyExport.component !== meta.component) {
-          return undefined;
-        }
+          const mergedArgs = mergeStoryArgs(toRecord(meta.args), toRecord(storyExport.args));
+          const { args, slots } = separateSlots(mergedArgs);
+          const processedArgs = await processImageMetadata(args);
+          const sanitizedPayload = sanitizeRenderPayload(
+            {
+              args: processedArgs,
+              slots
+            },
+            sanitizationOptions
+          );
 
-        const mergedArgs = mergeStoryArgs(toRecord(meta.args), toRecord(storyExport.args));
-        const { args, slots } = separateSlots(mergedArgs);
-        const processedArgs = await processImageMetadata(args);
-        const sanitizedPayload = sanitizeRenderPayload(
-          {
-            args: processedArgs,
-            slots
-          },
-          sanitizationOptions
-        );
-
-        return container.renderToString(patchCreateAstroCompat(meta.component), {
-          props: sanitizedPayload.args,
-          slots: sanitizedPayload.slots
+          return container.renderToString(
+            patchCreateAstroCompat(meta.component) as Parameters<typeof container.renderToString>[0],
+            {
+              props: sanitizedPayload.args,
+              slots: sanitizedPayload.slots
+            }
+          );
         });
       });
 
@@ -281,14 +285,18 @@ async function createStorySsrServer(
   trackedSpecifiers: Set<string>,
   resolveFrom: string
 ) {
-  const { getViteConfig } = await importAstroConfig(resolveFrom);
+  const { getViteConfig, passthroughImageService } = await importAstroConfig(resolveFrom);
   const astroConfig = await getViteConfig(
     { root: resolveFrom },
     {
       configFile: false,
       integrations: await Promise.all(
         integrations.map((integration) => integration.loadIntegration(resolveFrom))
-      )
+      ),
+      // Use the passthrough image service so nested components that use <Image>
+      // from astro:assets render as plain <img> tags without triggering image
+      // optimization (which fails in the Storybook SSR context).
+      image: { service: passthroughImageService() }
     }
   )({
     mode: 'production',
@@ -303,6 +311,7 @@ async function createStorySsrServer(
     plugins: [
       createProjectAstroResolutionPlugin(resolveFrom),
       vitePluginAstroFontsFallback(),
+      vitePluginAstroIntegrationOptsFallback(),
       vitePluginAstroVueFallback(),
       vitePluginAstroRoutesFallback(),
       {
@@ -364,7 +373,7 @@ async function addContainerRenderers(
           renderer: {
             ...renderer,
             name: serverRenderer.name
-          }
+          } as Parameters<typeof container.addServerRenderer>[0]['renderer']
         });
       } else {
         container.addServerRenderer({
@@ -633,7 +642,11 @@ async function processImageMetadata(
 
   for (const [key, value] of Object.entries(args)) {
     if (isImageMetadata(value)) {
-      processed[key] = convertImageMetadataToUrl(value);
+      // Keep ImageMetadata as a plain object — Astro's image service checks
+      // isESMImportedImage (typeof src === 'object') and skips the /@fs/ string
+      // validation that throws LocalImageUsedWrongly. Converting to a URL string
+      // causes that error when the string starts with /@fs/.
+      processed[key] = value;
 
       continue;
     }
@@ -642,7 +655,7 @@ async function processImageMetadata(
       processed[key] = await Promise.all(
         value.map(async (item) => {
           if (isImageMetadata(item)) {
-            return convertImageMetadataToUrl(item);
+            return item;
           }
 
           if (isRecord(item)) {
@@ -676,20 +689,6 @@ function isImageMetadata(value: unknown): value is Record<string, unknown> {
   );
 }
 
-function convertImageMetadataToUrl(imageMetadata: Record<string, unknown>): string {
-  const src = imageMetadata.src;
-  const fsPath = imageMetadata.fsPath;
-
-  if (typeof src === 'string') {
-    return src;
-  }
-
-  if (typeof fsPath === 'string') {
-    return fsPath;
-  }
-
-  return String(imageMetadata);
-}
 
 function createProjectAstroResolutionPlugin(resolveFrom: string): Plugin {
   const require = createRequire(import.meta.url);

package/src/vitePluginAstroBuildServer.ts

@@ -0,0 +1,289 @@
+import type { Dirent } from 'node:fs';
+import { readdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { build, type Rollup } from 'vite';
+import type { FrameworkOptions } from './types.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';
+
+const moduleRoot = resolve(dirname(fileURLToPath(import.meta.url)), '.');
+// packageRoot works regardless of whether this file is running from src/ or dist/
+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 {
+    name: 'storybook-astro:build-server',
+    apply: 'build',
+    enforce: 'post',
+
+    configResolved(config: { build: { outDir?: string } }) {
+      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}`;
+      }
+    },
+
+    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');
+      }
+    },
+
+    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);
+      });
+    },
+
+    async writeBundle(this: Rollup.PluginContext) {
+      const astroComponents = Array.from(storiesMap.keys());
+      const staticModuleMap = buildStaticModuleMap(
+        this,
+        staticEntrypointRefs,
+        componentEntrypointRefs
+      );
+      const serverOutDir = resolve(dirname(storybookStaticOutDir), 'storybook-server');
+
+      await buildAstroServer({
+        astroComponents,
+        integrations,
+        sanitization: options.sanitization,
+        storyRules: options.storyRules,
+        server: options.server,
+        outDir: serverOutDir,
+        staticModuleMap,
+        resolveFrom
+      });
+    }
+  };
+}
+
+async function buildAstroServer(options: {
+  astroComponents: string[];
+  integrations: FrameworkOptions['integrations'];
+  sanitization?: FrameworkOptions['sanitization'];
+  storyRules?: FrameworkOptions['storyRules'];
+  server?: FrameworkOptions['server'];
+  outDir: string;
+  staticModuleMap: Record<string, string>;
+  resolveFrom: string;
+}) {
+  const buildConfig = {
+    root: resolve(packageRoot, 'src/server'),
+    ssr: {
+      noExternal: /(@astrojs\/.+|react|react-dom)/
+    },
+    build: {
+      ssr: true,
+      outDir: options.outDir,
+      emptyOutDir: true,
+      sourcemap: true,
+      manifest: false,
+      rollupOptions: {
+        input: resolve(packageRoot, 'src/server/index.ts'),
+        treeshake: true
+      }
+    },
+    plugins: [
+      astroFilesVirtualModulePlugin(options.astroComponents),
+      storybookAstroSanitizationConfigVirtualModulePlugin(options.sanitization),
+      storybookAstroStoryRulesConfigVirtualModulePlugin(options.storyRules, options.resolveFrom),
+      storybookAstroServerAuthConfigVirtualModulePlugin(options.server),
+      viteAstroContainerRenderersPlugin(options.integrations, {
+        mode: 'production',
+        staticModuleMap: options.staticModuleMap
+      })
+    ]
+  };
+
+  const finalConfig = await mergeWithAstroConfig(
+    buildConfig,
+    options.integrations,
+    options.resolveFrom,
+    'production',
+    'build'
+  );
+
+  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;
+
+    if (entrypoint) {
+      specifiers.add(entrypoint);
+    }
+  });
+
+  return specifiers;
+}
+
+function buildStaticModuleMap(
+  pluginContext: Rollup.PluginContext,
+  staticEntrypointRefs: Map<string, string>,
+  componentEntrypointRefs: Map<string, string>
+) {
+  const map: Record<string, string> = {};
+
+  staticEntrypointRefs.forEach((fileReferenceId, specifier) => {
+    const fileName = pluginContext.getFileName(fileReferenceId);
+
+    if (fileName) {
+      map[specifier] = toPublicPath(fileName);
+    }
+  });
+
+  componentEntrypointRefs.forEach((fileReferenceId, specifier) => {
+    const fileName = pluginContext.getFileName(fileReferenceId);
+
+    if (fileName) {
+      map[specifier] = toPublicPath(fileName);
+    }
+  });
+
+  return map;
+}
+
+function toStaticVirtualId(specifier: string) {
+  return `virtual:astro-static-module/${encodeURIComponent(specifier)}`;
+}
+
+function toComponentVirtualId(specifier: string) {
+  return `virtual:astro-component-module/${encodeURIComponent(specifier)}`;
+}
+
+function isClientEntrypoint(specifier: string) {
+  return specifier.startsWith('@astrojs/') && specifier.endsWith('/client.js');
+}
+
+function toPublicPath(fileName: string) {
+  return `./${fileName}`;
+}
+
+async function collectHydratableSourceModules(srcRoot: string): Promise<string[]> {
+  const modules: string[] = [];
+
+  async function walk(directory: string) {
+    let entries: Dirent[];
+
+    try {
+      entries = await readdir(directory, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    await Promise.all(
+      entries.map(async (entry) => {
+        const absolutePath = resolve(directory, entry.name);
+
+        if (entry.isDirectory()) {
+          await walk(absolutePath);
+
+          return;
+        }
+
+        if (!entry.isFile()) {
+          return;
+        }
+
+        const normalizedPath = absolutePath.replace(/\\/g, '/');
+
+        if (!isHydratableSourceFile(normalizedPath)) {
+          return;
+        }
+
+        if (isNonHydratableSourceFile(normalizedPath)) {
+          return;
+        }
+
+        modules.push(normalizedPath);
+      })
+    );
+  }
+
+  await walk(srcRoot);
+
+  return modules;
+}
+
+function isHydratableSourceFile(input: string) {
+  return /\.(jsx|tsx|vue|svelte|js|ts)$/.test(input);
+}
+
+function isNonHydratableSourceFile(input: string) {
+  return /\.stories\.[jt]sx?$|\.stories\.vue$|\.stories\.svelte$|\.(spec|test)\.[jt]sx?$/.test(
+    input
+  );
+}

package/src/vitePluginAstroIntegrationOptsFallback.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from 'vite';
+
+const OPTS_STUB = 'export default {}';
+
+const VIRTUAL_IDS = ['astro:react:opts', 'astro:preact:opts'];
+
+export function vitePluginAstroIntegrationOptsFallback(): Plugin {
+  const resolvedIds = new Map(VIRTUAL_IDS.map((id) => [id, `\0${id}`]));
+  const resolvedIdSet = new Set(resolvedIds.values());
+
+  return {
+    name: 'storybook-astro-integration-opts-fallback',
+    enforce: 'pre',
+
+    resolveId(id) {
+      return resolvedIds.get(id);
+    },
+
+    load(id) {
+      if (resolvedIdSet.has(id)) {
+        return { code: OPTS_STUB };
+      }
+    }
+  };
+}