@storybook-astro/framework 0.1.0-beta.9 → 1.0.0

package/src/vitePluginAstroRoutesFallback.ts

@@ -0,0 +1,37 @@
+import type { Plugin } from 'vite';
+
+const ROUTES_STUB = `
+export const routes = [];
+`;
+
+/**
+ * Provides fallback resolution for Astro's routes virtual module
+ * in Storybook's SSR Vite server.
+ *
+ * In Astro 6, the manifest and app entrypoints import from "virtual:astro:routes"
+ * to get route data. In Storybook's context, there are no routes, so this plugin
+ * stubs the virtual module with an empty routes array.
+ */
+export function vitePluginAstroRoutesFallback(): Plugin {
+  const VIRTUAL_ID = 'virtual:astro:routes';
+  const RESOLVED_VIRTUAL_ID = '\0' + VIRTUAL_ID;
+
+  return {
+    name: 'storybook-astro-routes-fallback',
+    // Must run before vite:resolve to intercept virtual modules
+    // before Vite tries to resolve them as Node package imports
+    enforce: 'pre',
+
+    resolveId(id) {
+      if (id === VIRTUAL_ID) {
+        return RESOLVED_VIRTUAL_ID;
+      }
+    },
+
+    load(id) {
+      if (id === RESOLVED_VIRTUAL_ID) {
+        return { code: ROUTES_STUB };
+      }
+    }
+  };
+}

package/src/vitePluginAstroVueFallback.ts

@@ -0,0 +1,47 @@
+import type { Plugin } from 'vite';
+
+const VUE_APP_STUB = `
+export const setup = () => {};
+`;
+
+// Different versions of @astrojs/vue use different virtual module names
+const VIRTUAL_IDS = ['virtual:astro:vue-app', 'virtual:@astrojs/vue/app'];
+
+/**
+ * Provides fallback resolution for @astrojs/vue's virtual module
+ * in Storybook's SSR Vite server.
+ *
+ * @astrojs/vue's server.js imports a virtual module to get a setup function
+ * for configuring the Vue app instance. The virtual module name varies by version:
+ * - v6.0.0-beta.1: "virtual:astro:vue-app"
+ * - Later versions: "virtual:@astrojs/vue/app"
+ *
+ * The Vite plugin that normally creates this virtual module may not run in
+ * Storybook's SSR context, so this plugin stubs it with a no-op setup function
+ * (the default behavior when no appEntrypoint is configured).
+ */
+export function vitePluginAstroVueFallback(): Plugin {
+  const resolvedIds = new Map(VIRTUAL_IDS.map((id) => [id, '\0' + id]));
+  const resolvedIdSet = new Set(resolvedIds.values());
+
+  return {
+    name: 'storybook-astro-vue-fallback',
+    // Must run before vite:resolve to intercept virtual modules
+    // before Vite tries to resolve them as Node package imports
+    enforce: 'pre',
+
+    resolveId(id) {
+      const resolved = resolvedIds.get(id);
+
+      if (resolved) {
+        return resolved;
+      }
+    },
+
+    load(id) {
+      if (resolvedIdSet.has(id)) {
+        return { code: VUE_APP_STUB };
+      }
+    }
+  };
+}

package/src/viteStorybookAstroMiddlewarePlugin.ts

@@ -1,29 +1,60 @@
+import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import { createServer, type PluginOption, type ViteDevServer } from 'vite';
 import type { RenderRequestMessage, RenderResponseMessage } from '@storybook-astro/renderer/types';
 import type { FrameworkOptions } from './types.ts';
 import type { Integration } from './integrations/index.ts';
+import { importAstroConfig } from './importAstroConfig.ts';
 import { viteAstroContainerRenderersPlugin } from './viteAstroContainerRenderersPlugin.ts';
 import { vitePluginAstroFontsFallback } from './vitePluginAstroFontsFallback.ts';
+import { vitePluginAstroVueFallback } from './vitePluginAstroVueFallback.ts';
+import { vitePluginAstroRoutesFallback } from './vitePluginAstroRoutesFallback.ts';
+import { ssrLoadModuleWithFsFallback } from './lib/ssr-load-module-with-fs-fallback.ts';
+import { resolveRulesConfigFilePath } from './rules-options.ts';
 
 export async function vitePluginStorybookAstroMiddleware(options: FrameworkOptions) {
   // The internal Vite server is created lazily inside configureServer (dev-only).
   // During builds, configureServer never fires, so no server is created.
   let viteServer: ViteDevServer | null = null;
 
+  const resolveFrom = options.resolveFrom ?? process.cwd();
+
   const vitePlugin = {
     name: 'storybook-astro-middleware-plugin',
     async configureServer(server) {
-      viteServer = await createViteServer(options.integrations);
+      viteServer = await createViteServer(options.integrations, resolveFrom);
+      const storyRulesConfigFilePath = resolveRulesConfigFilePath(options.storyRules, resolveFrom);
 
       const filePath = fileURLToPath(new URL('./middleware', import.meta.url));
       const middleware = await viteServer.ssrLoadModule(filePath, {
         fixStacktrace: true
       });
-      const handler = await middleware.handlerFactory(options.integrations ?? []);
+
+      const createHandler = () => middleware.handlerFactory(options.integrations ?? [], {
+        mode: 'development',
+        sanitization: options.sanitization,
+        rulesConfigFilePath: storyRulesConfigFilePath,
+        resolveRulesConfigModule: () =>
+          loadRulesConfigModule(viteServer!, storyRulesConfigFilePath),
+        loadModule: (id: string) =>
+          ssrLoadModuleWithFsFallback(viteServer!, id, {
+            fixStacktrace: true
+          })
+      });
+
+      let handlerPromise = createHandler();
+
+      const resetHandler = () => {
+        handlerPromise = createHandler();
+      };
+
+      server.watcher.on('add', resetHandler);
+      server.watcher.on('change', resetHandler);
+      server.watcher.on('unlink', resetHandler);
 
       server.ws.on('astro:render:request', async (data: RenderRequestMessage['data']) => {
         try {
+          const handler = await handlerPromise;
           const html = await handler(data);
 
           server.ws.send('astro:render:response', {
@@ -57,8 +88,8 @@ export async function vitePluginStorybookAstroMiddleware(options: FrameworkOptio
       server.middlewares.use('/_image', (req, res, next) => {
         if (!viteServer) {
           next();
-          
-return;
+
+          return;
         }
         // Forward the request to the Astro vite server
         viteServer.middlewares.handle(req, res, (err) => {
@@ -74,11 +105,11 @@ return;
   // The extracted CSS plugins from Astro's internal Vite server cause Vue SFC
   // <style> blocks to be double-processed (once by these plugins, once by
   // Storybook's built-in CSS plugins), resulting in PostCSS errors.
-  // 
+  //
   // Solution: Don't extract Astro's CSS plugins. Storybook's built-in CSS
   // plugins handle both Vue styles AND Astro style sub-modules (which are
   // standard CSS imports like `Component.astro?astro&type=style&index=0&lang.css`).
-  // 
+  //
   // The Astro internal server's CSS plugins are only needed for SSR rendering
   // within that server - they don't need to be shared with Storybook's server.
   return {
@@ -91,16 +122,17 @@ return;
   };
 }
 
-export async function createViteServer(integrations: Integration[]) {
-  const { getViteConfig } = await import('astro/config');
+export async function createViteServer(integrations: Integration[], resolveFrom = process.cwd()) {
+  const { getViteConfig } = await importAstroConfig(resolveFrom);
   const safeIntegrations = integrations ?? [];
+  const projectAstroResolutionPlugin = createProjectAstroResolutionPlugin(resolveFrom);
 
   const config = await getViteConfig(
-    {},
+    { root: resolveFrom },
     {
       configFile: false,
       integrations: await Promise.all(
-        safeIntegrations.map((integration) => integration.loadIntegration())
+        safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
       )
     }
   )({ mode: 'development', command: 'serve' });
@@ -109,9 +141,13 @@ export async function createViteServer(integrations: Integration[]) {
     configFile: false,
     ...config,
     plugins: [
+      projectAstroResolutionPlugin,
+      // Fallbacks must come first to intercept before Astro's plugins
+      vitePluginAstroFontsFallback(),
+      vitePluginAstroVueFallback(),
+      vitePluginAstroRoutesFallback(),
       ...(config.plugins?.filter(Boolean) ?? []),
-      viteAstroContainerRenderersPlugin(safeIntegrations),
-      vitePluginAstroFontsFallback()
+      viteAstroContainerRenderersPlugin(safeIntegrations)
     ]
   });
 
@@ -122,3 +158,43 @@ export async function createViteServer(integrations: Integration[]) {
 
   return viteServer;
 }
+
+function createProjectAstroResolutionPlugin(resolveFrom: string): PluginOption {
+  const require = createRequire(import.meta.url);
+
+  return {
+    name: 'storybook-astro:resolve-project-astro',
+    enforce: 'pre',
+    resolveId(id: string) {
+      if (id !== 'astro' && !id.startsWith('astro/')) {
+        return null;
+      }
+
+      try {
+        return require.resolve(id, {
+          paths: [resolveFrom]
+        });
+      } catch {
+        return null;
+      }
+    }
+  } satisfies PluginOption;
+}
+
+async function loadRulesConfigModule(viteServer: ViteDevServer, configFilePath?: string) {
+  if (!configFilePath) {
+    return undefined;
+  }
+
+  try {
+    return await ssrLoadModuleWithFsFallback(viteServer, configFilePath, {
+      fixStacktrace: true
+    });
+  } catch (error) {
+    const reason = error instanceof Error ? error.message : String(error);
+
+    throw new Error(
+      `Unable to load framework.options.storyRules config module at ${configFilePath}: ${reason}`
+    );
+  }
+}

package/src/viteStorybookRendererFallbackPlugin.ts

@@ -1,30 +1,20 @@
 import type { Integration } from './integrations/index.ts';
+import { createVirtualModulePlugin } from './vite/createVirtualModulePlugin.ts';
 
 export function viteStorybookRendererFallbackPlugin(integrations: Integration[]) {
   const safeIntegrations = integrations ?? [];
-  const name = 'storybook-renderer-fallback';
-  const virtualModuleId = `virtual:${name}`;
-  const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 
-  return {
-    name,
-
-    resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
-    },
-
-    load(id: string) {
-      if (id === resolvedVirtualModuleId) {
-        return safeIntegrations
-          .filter((integration) => integration.storybookEntryPreview)
-          .map(
-            (integration) =>
-              `export * as ${integration.name} from '${integration.storybookEntryPreview}';`
-          )
-          .join('\n');
-      }
+  return createVirtualModulePlugin({
+    pluginName: 'storybook-renderer-fallback',
+    virtualModuleId: 'virtual:storybook-renderer-fallback',
+    load() {
+      return safeIntegrations
+        .filter((integration) => integration.storybookEntryPreview)
+        .map(
+          (integration) =>
+            `export * as ${integration.name} from '${integration.storybookEntryPreview}';`
+        )
+        .join('\n');
     }
-  };
+  });
 }

package/src/vitest/config.ts

@@ -0,0 +1,95 @@
+import { defineConfig as defineVitestConfig } from 'vitest/config';
+import { fileURLToPath } from 'node:url';
+import type { InlineConfig, PluginOption } from 'vite';
+import type { Integration } from '../integrations/base.ts';
+import { importAstroConfig } from '../importAstroConfig.ts';
+import { vitePluginAstroComponentMarker } from '../vitePluginAstroComponentMarker.ts';
+import { registerTestingIntegrationsForRoot } from '../testing/integration-config.ts';
+import { cjsInteropPlugin, vitestPatchForSolidJs } from './vite-plugins.ts';
+
+// Type definition omits 'test' to allow Vitest-specific config options
+// Vite 8 type definitions conflict with Vitest config when used in monorepo
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Vitest config requires any type for test option
+export type TestingDefineConfig = Omit<InlineConfig, 'plugins' | 'test'> & {
+  integrations?: Integration[];
+  plugins?: PluginOption[];
+  astroConfigFile?: false | string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  test?: any;
+};
+
+function normalizeGlobalSetup(globalSetup: string | string[] | undefined, value: string) {
+  // Inject our setup without clobbering any user-provided global setup hooks.
+  if (!globalSetup) {
+    return [value];
+  }
+
+  if (Array.isArray(globalSetup)) {
+    if (globalSetup.includes(value)) {
+      return globalSetup;
+    }
+
+    return [...globalSetup, value];
+  }
+
+  if (globalSetup === value) {
+    return [globalSetup];
+  }
+
+  return [globalSetup, value];
+}
+
+export function defineConfig(options: TestingDefineConfig) {
+  const {
+    integrations = [],
+    plugins = [],
+    root = process.cwd(),
+    mode = 'test',
+    astroConfigFile = false,
+    ...rest
+  } = options;
+
+  registerTestingIntegrationsForRoot(root, integrations);
+
+  const globalSetupFilePath = fileURLToPath(new URL('./global-setup.ts', import.meta.url));
+  const testConfig = {
+    ...rest.test,
+    globalSetup: normalizeGlobalSetup(rest.test?.globalSetup, globalSetupFilePath)
+  };
+
+  // Cast to any to work around Vite 8 type conflicts in monorepo environments
+  // where multiple Vite versions exist in node_modules
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Type conflict with Vite 8 in monorepo
+  const vitestConfig = defineVitestConfig({
+    ...rest,
+    root,
+    mode,
+    test: testConfig,
+    plugins: [
+      cjsInteropPlugin(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      vitePluginAstroComponentMarker() as any,
+      ...plugins
+    ]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } as any);
+
+  const astroConfigFactoryPromise = Promise
+    .all([
+      importAstroConfig(root),
+      Promise.all(integrations.map((integration) => integration.loadIntegration(root)))
+    ])
+    .then(([astroConfigModule, resolvedIntegrations]) =>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      astroConfigModule.getViteConfig(vitestConfig as any, {
+        configFile: astroConfigFile,
+        integrations: [...resolvedIntegrations, vitestPatchForSolidJs()]
+      })
+    );
+
+  return async ({ mode: viteMode, command }: { mode: string; command: 'build' | 'serve' }) => {
+    const astroConfigFactory = await astroConfigFactoryPromise;
+
+    return astroConfigFactory({ mode: viteMode, command });
+  };
+}

package/src/vitest/global-setup.ts

@@ -0,0 +1,16 @@
+import {
+  TESTING_RENDERER_DAEMON_URL_ENV,
+  startTestingRendererDaemon
+} from '../testing/renderer-daemon.ts';
+
+export default async function globalSetup() {
+  const daemon = await startTestingRendererDaemon();
+
+  // Workers discover the shared renderer via env instead of creating their own SSR stack.
+  process.env[TESTING_RENDERER_DAEMON_URL_ENV] = daemon.url;
+
+  return async () => {
+    await daemon.close();
+    delete process.env[TESTING_RENDERER_DAEMON_URL_ENV];
+  };
+}

package/src/vitest/index.ts

@@ -0,0 +1,2 @@
+export { defineConfig, type TestingDefineConfig } from './config.ts';
+export { cjsInteropPlugin, vitestPatchForSolidJs } from './vite-plugins.ts';

package/src/vitest/vite-plugins.ts

@@ -0,0 +1,187 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import type { AstroIntegration } from 'astro';
+import type { Plugin } from 'vite';
+
+type ResolveConfig = { resolve?: { alias?: Record<string, string> | Array<{ find: string | RegExp; replacement: string }> } };
+
+function findPackageDir(pkgName: string): string | null {
+  let dir = process.cwd();
+
+  while (true) {
+    const candidate = join(dir, 'node_modules', pkgName);
+
+    if (existsSync(join(candidate, 'package.json'))) {
+      return candidate;
+    }
+
+    const parent = dirname(dir);
+
+    if (parent === dir) {
+      break;
+    }
+
+    dir = parent;
+  }
+
+  return null;
+}
+
+export function vitestPatchForSolidJs(): AstroIntegration {
+  return {
+    name: 'fix-solid',
+    hooks: {
+      'astro:config:done': ({ config }) => {
+        const solidPlugin = config.vite.plugins?.find(
+          (plugin) => plugin && 'name' in plugin && plugin.name === 'solid'
+        ) as Plugin | undefined;
+
+        if (!solidPlugin) {
+          return;
+        }
+
+        const originalConfigEnvironment = solidPlugin.configEnvironment;
+
+        if (typeof originalConfigEnvironment !== 'function') {
+          return;
+        }
+
+        // Use bracket notation to avoid type assignment issues
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (solidPlugin as any).configEnvironment = async (name: unknown, resolvedConfig: unknown, opts: unknown): Promise<void> => {
+          await (originalConfigEnvironment as (name: unknown, config: unknown, opts: unknown) => Promise<void>)(name, resolvedConfig, opts);
+
+          const config = resolvedConfig as ResolveConfig;
+
+          config.resolve ??= {};
+          const alias = config.resolve.alias;
+          const replacement = 'solid-js/web/dist/web.js';
+
+          if (Array.isArray(alias)) {
+            const hasAlias = alias.some((entry) => {
+              if (!entry || typeof entry !== 'object' || !('find' in entry)) {
+                return false;
+              }
+
+              return entry.find === 'solid-js/web' || String(entry.find) === '/^solid-js\\/web$/';
+            });
+
+            if (!hasAlias) {
+              alias.unshift({ find: /^solid-js\/web$/, replacement });
+            }
+
+            return;
+          }
+
+          config.resolve!.alias = {
+            ...(alias ?? {}),
+            'solid-js/web': replacement
+          };
+        };
+      }
+    }
+  };
+}
+
+export function cjsInteropPlugin(): Plugin {
+  return {
+    name: 'cjs-esm-interop',
+    enforce: 'pre',
+    resolveId(id) {
+      if (id.startsWith('.') || id.startsWith('/') || id.startsWith('\0') || id.includes('node_modules')) {
+        return;
+      }
+
+      const parts = id.split('/');
+      const pkgName = id.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0];
+      const subpath = parts.slice(pkgName.split('/').length).join('/');
+
+      if (subpath && !['server-renderer', 'server', 'client'].includes(subpath)) {
+        return;
+      }
+
+      try {
+        const nmDir = findPackageDir(pkgName);
+
+        if (!nmDir) {
+          return;
+        }
+
+        const pkgJsonPath = join(nmDir, 'package.json');
+
+        if (!existsSync(pkgJsonPath)) {
+          return;
+        }
+
+        const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+
+        const exportKey = subpath ? `./${subpath}` : '.';
+        const exportEntry = pkgJson.exports?.[exportKey];
+
+        if (exportEntry) {
+          const importEntry = exportEntry.import;
+
+          if (importEntry) {
+            const esmPath =
+              typeof importEntry === 'string'
+                ? importEntry
+                : importEntry.default || importEntry.node;
+
+            if (esmPath) {
+              const resolved = join(nmDir, esmPath);
+
+              if (existsSync(resolved)) {
+                return resolved;
+              }
+            }
+          }
+        }
+
+        if (!subpath && pkgJson.module) {
+          const resolved = join(nmDir, pkgJson.module);
+
+          if (existsSync(resolved)) {
+            return resolved;
+          }
+        }
+      } catch {
+        // Ignore resolution errors
+      }
+    },
+    transform(code, id) {
+      if (!id.includes('node_modules')) {
+        return;
+      }
+
+      if (id.startsWith('\0')) {
+        return;
+      }
+
+      if (/\bexport\s+(default|const|let|var|function|class|\{|\*)/.test(code)) {
+        return;
+      }
+
+      if (!code.includes('module.exports') && !code.includes('exports.')) {
+        return;
+      }
+
+      const dirPath = id.substring(0, id.lastIndexOf('/'));
+      const fileName = id;
+
+      return {
+        code: [
+          'import { createRequire as __createRequire } from "module";',
+          `var __require = __createRequire("file://${dirPath}/");`,
+          'var module = { exports: {} };',
+          'var exports = module.exports;',
+          'function require(id) { return __require(id); }',
+          `var __dirname = ${JSON.stringify(dirPath)};`,
+          `var __filename = ${JSON.stringify(fileName)};`,
+          code,
+          'export default module.exports;'
+        ].join('\n'),
+        map: null
+      };
+    }
+  };
+}