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

package/dist/chunk-UK43WNEA.js

@@ -0,0 +1,657 @@
+import {
+  applyMswHandlers,
+  resolveSanitizationOptions,
+  resolveStoryModuleMock,
+  sanitizeRenderPayload,
+  selectStoryRules,
+  withStoryModuleMocks
+} from "./chunk-C5OH4VBR.js";
+import {
+  vitePluginAstroComponentMarker
+} from "./chunk-E4LB75JN.js";
+import {
+  createVirtualModulePlugin,
+  resolveRulesConfigFilePath,
+  ssrLoadModuleWithFsFallback,
+  vitePluginAstroFontsFallback,
+  vitePluginAstroRoutesFallback,
+  vitePluginAstroVueFallback,
+  vitePluginStorybookAstroMiddleware
+} from "./chunk-7GHEQUPV.js";
+import {
+  importAstroConfig
+} from "./chunk-DNGQBPT7.js";
+
+// src/viteStorybookRendererFallbackPlugin.ts
+function viteStorybookRendererFallbackPlugin(integrations) {
+  const safeIntegrations = integrations ?? [];
+  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");
+    }
+  });
+}
+
+// src/vitePluginAstroBuildPrerender.ts
+import { createRequire } from "module";
+import { mkdir, readFile, readdir, writeFile } from "fs/promises";
+import { resolve } from "path";
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { createServer, mergeConfig } from "vite";
+var PRERENDERED_STORIES_FILE = "astro-prerendered-stories.json";
+function vitePluginAstroBuildPrerender(options) {
+  const integrations = options.integrations ?? [];
+  const resolveFrom = options.resolveFrom ?? process.cwd();
+  const storyRulesConfigFilePath = resolveRulesConfigFilePath(options.storyRules, resolveFrom);
+  const trackedSpecifiers = collectTrackedSpecifiers(integrations);
+  const staticEntrypointRefs = /* @__PURE__ */ new Map();
+  const componentEntrypointRefs = /* @__PURE__ */ new Map();
+  let outDir = resolve(resolveFrom, "storybook-static");
+  return {
+    name: "storybook-astro:build-prerender",
+    apply: "build",
+    enforce: "post",
+    configResolved(config) {
+      outDir = resolve(resolveFrom, config.build.outDir ?? "storybook-static");
+    },
+    resolveId(id) {
+      if (id.startsWith("virtual:astro-static-module/")) {
+        return `\0${id}`;
+      }
+      if (id.startsWith("virtual:astro-component-module/")) {
+        return `\0${id}`;
+      }
+    },
+    load(id) {
+      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() {
+      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() {
+      const staticModuleMap = buildStaticModuleMap(
+        this,
+        staticEntrypointRefs,
+        componentEntrypointRefs
+      );
+      const stories = await collectAstroStories(outDir);
+      if (stories.length === 0) {
+        await writePrerenderedStoriesFile(outDir, {});
+        return;
+      }
+      const prerenderedStories = await prerenderStories({
+        stories,
+        integrations,
+        sanitization: options.sanitization,
+        storyRulesConfigFilePath,
+        staticModuleMap,
+        trackedSpecifiers,
+        resolveFrom
+      });
+      await writePrerenderedStoriesFile(outDir, prerenderedStories);
+    }
+  };
+}
+async function writePrerenderedStoriesFile(outDir, payload) {
+  await mkdir(outDir, { recursive: true });
+  await writeFile(resolve(outDir, PRERENDERED_STORIES_FILE), JSON.stringify(payload), "utf-8");
+}
+async function prerenderStories(options) {
+  const sanitizationOptions = resolveSanitizationOptions(options.sanitization ?? void 0);
+  const resolveClientModule = createClientModuleResolver(
+    options.integrations,
+    options.staticModuleMap
+  );
+  const viteServer = await createStorySsrServer(
+    options.integrations,
+    options.trackedSpecifiers,
+    options.resolveFrom
+  );
+  const rulesConfigModule = await loadRulesConfigModule(viteServer, options.storyRulesConfigFilePath);
+  try {
+    const container = await AstroContainer.create({
+      resolve: async (specifier) => {
+        const mockedModule = resolveStoryModuleMock(specifier);
+        if (mockedModule) {
+          return mockedModule;
+        }
+        const resolution = resolveClientModule(specifier);
+        if (resolution) {
+          return resolution;
+        }
+        return specifier;
+      }
+    });
+    await addContainerRenderers(container, options.integrations, resolveClientModule, viteServer);
+    const output = {};
+    for (const story of options.stories) {
+      const selectedRules = await selectStoryRules({
+        configModule: rulesConfigModule,
+        configFilePath: options.storyRulesConfigFilePath,
+        mode: "production",
+        story: {
+          id: story.id,
+          title: story.title,
+          name: story.name
+        }
+      });
+      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] : {};
+        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 void 0;
+        }
+        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
+        });
+      });
+      if (html !== void 0) {
+        output[story.id] = html;
+      }
+    }
+    return output;
+  } finally {
+    await viteServer.close();
+  }
+}
+async function createStorySsrServer(integrations, trackedSpecifiers, resolveFrom) {
+  const { getViteConfig } = await importAstroConfig(resolveFrom);
+  const astroConfig = await getViteConfig(
+    { root: resolveFrom },
+    {
+      configFile: false,
+      integrations: await Promise.all(
+        integrations.map((integration) => integration.loadIntegration(resolveFrom))
+      )
+    }
+  )({
+    mode: "production",
+    command: "serve"
+  });
+  const config = mergeConfig(astroConfig, {
+    appType: "custom",
+    server: {
+      middlewareMode: true
+    },
+    plugins: [
+      createProjectAstroResolutionPlugin(resolveFrom),
+      vitePluginAstroFontsFallback(),
+      vitePluginAstroVueFallback(),
+      vitePluginAstroRoutesFallback(),
+      {
+        name: "storybook-astro:static-prerender-ssr-stubs",
+        resolveId(id) {
+          if (trackedSpecifiers.has(id)) {
+            return `\0storybook-astro-static-prerender-stub:${encodeURIComponent(id)}`;
+          }
+        },
+        load(id) {
+          if (id.startsWith("\0storybook-astro-static-prerender-stub:")) {
+            return "export default undefined;";
+          }
+        }
+      }
+    ]
+  });
+  return createServer(config);
+}
+async function loadRulesConfigModule(viteServer, configFilePath) {
+  if (!configFilePath) {
+    return void 0;
+  }
+  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}`
+    );
+  }
+}
+async function addContainerRenderers(container, integrations, resolveClientModule, viteServer) {
+  for (const integration of integrations) {
+    const serverRenderer = integration.renderer.server;
+    if (serverRenderer) {
+      const serverRendererModule = await viteServer.ssrLoadModule(serverRenderer.entrypoint);
+      const renderer = serverRendererModule.default ?? serverRendererModule;
+      if (integration.name === "solid" && isRecord(renderer)) {
+        container.addServerRenderer({
+          name: serverRenderer.name,
+          renderer: {
+            ...renderer,
+            name: serverRenderer.name
+          }
+        });
+      } else {
+        container.addServerRenderer({
+          name: serverRenderer.name,
+          renderer
+        });
+      }
+    }
+    const clientRenderer = integration.renderer.client;
+    if (clientRenderer) {
+      const resolvedEntrypoint = resolveClientModule(clientRenderer.entrypoint) ?? clientRenderer.entrypoint;
+      container.addClientRenderer({
+        name: clientRenderer.name,
+        entrypoint: resolvedEntrypoint
+      });
+    }
+  }
+}
+function createClientModuleResolver(integrations, staticModuleMap) {
+  return function resolveClientModule(specifier) {
+    if (Object.hasOwn(staticModuleMap, specifier)) {
+      return staticModuleMap[specifier];
+    }
+    const normalizedSpecifier = specifier.replace(/\\/g, "/").replace(/\?.*$/, "");
+    if (Object.hasOwn(staticModuleMap, normalizedSpecifier)) {
+      return staticModuleMap[normalizedSpecifier];
+    }
+    for (const integration of integrations) {
+      const resolution = integration.resolveClient(specifier);
+      if (resolution) {
+        return resolution;
+      }
+    }
+  };
+}
+async function collectAstroStories(outDir) {
+  const indexFile = resolve(outDir, "index.json");
+  const indexRaw = await readFile(indexFile, "utf-8");
+  const indexJson = JSON.parse(indexRaw);
+  return Object.values(indexJson.entries ?? {}).filter((entry) => entry.type === "story" && entry.componentPath?.endsWith(".astro")).map((entry) => {
+    if (!entry.id || !entry.importPath || !entry.exportName) {
+      throw new Error(`Encountered an invalid Storybook index entry in ${indexFile}.`);
+    }
+    return {
+      id: entry.id,
+      importPath: entry.importPath,
+      exportName: entry.exportName,
+      title: entry.title,
+      name: entry.name
+    };
+  });
+}
+function mergeStoryArgs(metaArgs, storyArgs) {
+  return {
+    ...metaArgs ?? {},
+    ...storyArgs ?? {}
+  };
+}
+function separateSlots(inputArgs) {
+  const args = { ...inputArgs };
+  const slotsCandidate = args.slots;
+  delete args.slots;
+  if (!isRecord(slotsCandidate)) {
+    return {
+      args,
+      slots: {}
+    };
+  }
+  return {
+    args,
+    slots: slotsCandidate
+  };
+}
+function resolveImportPath(importPath, resolveFrom) {
+  if (importPath.startsWith("./")) {
+    return resolve(resolveFrom, importPath.slice(2));
+  }
+  return resolve(resolveFrom, importPath);
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function toRecord(value) {
+  if (!isRecord(value)) {
+    return void 0;
+  }
+  return value;
+}
+function collectTrackedSpecifiers(integrations) {
+  const specifiers = /* @__PURE__ */ new Set(["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, staticEntrypointRefs, componentEntrypointRefs) {
+  const map = {};
+  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) {
+  return `virtual:astro-static-module/${encodeURIComponent(specifier)}`;
+}
+function toComponentVirtualId(specifier) {
+  return `virtual:astro-component-module/${encodeURIComponent(specifier)}`;
+}
+function isClientEntrypoint(specifier) {
+  return specifier.startsWith("@astrojs/") && specifier.endsWith("/client.js");
+}
+function toPublicPath(fileName) {
+  return `./${fileName}`;
+}
+async function collectHydratableSourceModules(srcRoot) {
+  const modules = [];
+  async function walk(directory) {
+    let entries;
+    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) {
+  return /\.(jsx|tsx|vue|svelte|js|ts)$/.test(input);
+}
+function isNonHydratableSourceFile(input) {
+  return /\.stories\.[jt]sx?$|\.stories\.vue$|\.stories\.svelte$|\.(spec|test)\.[jt]sx?$/.test(
+    input
+  );
+}
+function patchCreateAstroCompat(component) {
+  if (typeof component !== "function") {
+    throw new Error("Expected Astro component factory to be a function.");
+  }
+  const originalComponent = component;
+  const wrapped = ((result, props, slots) => {
+    if (result && typeof result.createAstro === "function") {
+      const originalCreateAstro = result.createAstro;
+      const runtimeExpectsAstroGlobal = originalCreateAstro.length >= 3;
+      result.createAstro = (...args) => {
+        if (args.length === 3 && !runtimeExpectsAstroGlobal) {
+          return originalCreateAstro(args[1], args[2]);
+        }
+        return originalCreateAstro(...args);
+      };
+    }
+    return originalComponent(result, props, slots);
+  });
+  wrapped.isAstroComponentFactory = originalComponent.isAstroComponentFactory;
+  wrapped.moduleId = originalComponent.moduleId;
+  wrapped.propagation = originalComponent.propagation;
+  return wrapped;
+}
+async function processImageMetadata(args) {
+  const processed = {};
+  for (const [key, value] of Object.entries(args)) {
+    if (isImageMetadata(value)) {
+      processed[key] = convertImageMetadataToUrl(value);
+      continue;
+    }
+    if (Array.isArray(value)) {
+      processed[key] = await Promise.all(
+        value.map(async (item) => {
+          if (isImageMetadata(item)) {
+            return convertImageMetadataToUrl(item);
+          }
+          if (isRecord(item)) {
+            return processImageMetadata(item);
+          }
+          return item;
+        })
+      );
+      continue;
+    }
+    if (isRecord(value)) {
+      processed[key] = await processImageMetadata(value);
+      continue;
+    }
+    processed[key] = value;
+  }
+  return processed;
+}
+function isImageMetadata(value) {
+  return isRecord(value) && typeof value.src === "string" && ("width" in value || "height" in value || "format" in value);
+}
+function convertImageMetadataToUrl(imageMetadata) {
+  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) {
+  const require2 = createRequire(import.meta.url);
+  return {
+    name: "storybook-astro:resolve-project-astro-prerender",
+    enforce: "pre",
+    resolveId(id) {
+      if (id !== "astro" && !id.startsWith("astro/")) {
+        return null;
+      }
+      try {
+        return require2.resolve(id, {
+          paths: [resolveFrom]
+        });
+      } catch {
+        return null;
+      }
+    }
+  };
+}
+
+// src/vitePluginAstro.ts
+import { mergeConfig as mergeConfig2 } from "vite";
+var ASTRO_PLUGINS_THAT_ARE_SUPPOSEDLY_NOT_NEEDED_IN_STORYBOOK = [
+  "@astro/plugin-actions",
+  "@astrojs/vite-plugin-astro-ssr-manifest",
+  "astro-content-virtual-mod-plugin",
+  "astro:actions",
+  "astro:build:normal",
+  "astro:container",
+  "astro:content-asset-propagation",
+  "astro:content-imports",
+  "astro:content-listen",
+  "astro:dev-toolbar",
+  "astro:head-metadata",
+  "astro:html",
+  "astro:i18n",
+  "astro:integration-container",
+  "astro:jsx",
+  "astro:markdown",
+  "astro:postprocess",
+  "astro:prefetch",
+  "astro:scanner",
+  "astro:scripts:page-ssr",
+  "astro:server",
+  "astro:vite-plugin-env",
+  "astro:vite-plugin-file-url"
+];
+async function mergeWithAstroConfig(config, integrations = [], resolveFrom = process.cwd(), mode = "development", command = "serve") {
+  const { getViteConfig } = await importAstroConfig(resolveFrom);
+  const safeIntegrations = integrations ?? [];
+  const astroConfig = await getViteConfig(
+    {},
+    {
+      configFile: false,
+      integrations: await Promise.all(
+        safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
+      )
+    }
+  )({
+    mode,
+    command
+  });
+  const filteredPlugins = astroConfig.plugins.flat().filter(
+    (plugin) => plugin && "name" in plugin && !ASTRO_PLUGINS_THAT_ARE_SUPPOSEDLY_NOT_NEEDED_IN_STORYBOOK.includes(plugin.name)
+  );
+  return mergeConfig2(config, {
+    ...astroConfig,
+    plugins: filteredPlugins
+  });
+}
+
+// src/preset.ts
+var core = {
+  builder: "@storybook/builder-vite",
+  renderer: "@storybook-astro/renderer"
+};
+var viteFinal = async (config, { configType, presets }) => {
+  const options = await presets.apply("frameworkOptions");
+  const { vitePlugin: storybookAstroMiddlewarePlugin, viteConfig } = await vitePluginStorybookAstroMiddleware(options);
+  if (!config.plugins) {
+    config.plugins = [];
+  }
+  const integrations = options.integrations ?? [];
+  const resolveFrom = options.resolveFrom ?? process.cwd();
+  const mode = configType === "DEVELOPMENT" ? "development" : "production";
+  const command = configType === "DEVELOPMENT" ? "serve" : "build";
+  resolveSanitizationOptions(options.sanitization);
+  config.plugins.push(
+    storybookAstroMiddlewarePlugin,
+    viteStorybookRendererFallbackPlugin(integrations),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    vitePluginAstroComponentMarker(),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    vitePluginAstroBuildPrerender(options),
+    vitePluginAstroVueFallback(),
+    ...viteConfig.plugins
+  );
+  if (!config.resolve) {
+    config.resolve = {};
+  }
+  if (!config.resolve.alias) {
+    config.resolve.alias = {};
+  }
+  const aliases = config.resolve.alias;
+  if (!aliases["react"]) {
+    aliases["react"] = "react";
+  }
+  if (!aliases["react-dom"]) {
+    aliases["react-dom"] = "react-dom";
+  }
+  const finalConfig = await mergeWithAstroConfig(config, integrations, resolveFrom, mode, command);
+  if (!finalConfig.optimizeDeps) {
+    finalConfig.optimizeDeps = {};
+  }
+  if (!finalConfig.optimizeDeps.exclude) {
+    finalConfig.optimizeDeps.exclude = [];
+  }
+  if (!finalConfig.optimizeDeps.exclude.includes("@astrojs/vue")) {
+    finalConfig.optimizeDeps.exclude.push("@astrojs/vue");
+  }
+  if (!finalConfig.optimizeDeps.esbuildOptions) {
+    finalConfig.optimizeDeps.esbuildOptions = {};
+  }
+  if (!finalConfig.optimizeDeps.esbuildOptions.external) {
+    finalConfig.optimizeDeps.esbuildOptions.external = [];
+  }
+  const vueVirtualModules = ["virtual:@astrojs/vue/app", "virtual:astro:vue-app"];
+  for (const mod of vueVirtualModules) {
+    if (!finalConfig.optimizeDeps.esbuildOptions.external.includes(mod)) {
+      finalConfig.optimizeDeps.esbuildOptions.external.push(mod);
+    }
+  }
+  return finalConfig;
+};
+
+export {
+  core,
+  viteFinal
+};
+//# sourceMappingURL=chunk-UK43WNEA.js.map