@storybook-astro/framework 1.4.0-canary.2 → 1.4.0

package/dist/index.js

@@ -7,8 +7,35 @@ import "./chunk-G3PMV62Z.js";
 
 // src/index.ts
 import { definePreview as definePreviewBase } from "storybook/internal/csf";
+var rendererImpl;
+var rendererLoadPromise;
+function loadRendererEntryPreview() {
+  rendererLoadPromise ??= import("@storybook-astro/renderer/entry-preview").then((mod) => {
+    rendererImpl = mod;
+    return mod;
+  });
+  return rendererLoadPromise;
+}
+var composedRender = (args, context) => {
+  if (!rendererImpl) {
+    throw new Error(
+      "@storybook-astro: renderer not ready when `render` was called. This should be reached only after `definePreview()` has kicked off the renderer load. If you see this in tests, import the renderer module yourself or render via portable stories."
+    );
+  }
+  return rendererImpl.render(args, context);
+};
+var composedRenderToCanvas = async (context, canvasElement) => {
+  const impl = await loadRendererEntryPreview();
+  return impl.renderToCanvas(context, canvasElement);
+};
 function definePreview(input) {
-  return definePreviewBase(input);
+  void loadRendererEntryPreview();
+  return definePreviewBase({
+    ...input,
+    parameters: { renderer: "astro", ...input.parameters },
+    render: input.render ?? composedRender,
+    renderToCanvas: input.renderToCanvas ?? composedRenderToCanvas
+  });
 }
 export {
   composeStories,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Re-export types from storybook internal\nexport type {\n  Args,\n  ArgTypes,\n  Parameters,\n  ProjectAnnotations,\n  StrictArgs\n} from 'storybook/internal/types';\n\nimport { definePreview as definePreviewBase, type PreviewAddon, type InferTypes, type Preview as CsfPreview } from 'storybook/internal/csf';\nimport type { ProjectAnnotations } from 'storybook/internal/types';\nimport type { AstroRenderer } from './portable-stories.ts';\n\n/**\n * Preview configuration type for `.storybook/preview.ts` in Astro projects.\n * Reflects the full type returned by `definePreview`, including addon type extensions.\n * Use this to annotate your preview module when needed:\n *\n * ```ts\n * import type { Preview } from '@storybook-astro/framework';\n * const preview: Preview = { ... };\n * export default preview;\n * ```\n */\nexport type Preview<Addons extends PreviewAddon<never>[] = []> = CsfPreview<AstroRenderer & InferTypes<Addons>>;\n\n// Export portable stories functionality\nexport {\n  composeStories,\n  composeStory,\n  setProjectAnnotations,\n  type AstroRenderer\n} from './portable-stories.ts';\n\n// Export framework types\nexport type {\n  FrameworkOptions,\n  RenderMode,\n  RenderStoryInput,\n  ServerBuildOptions,\n  SanitizationOptions,\n  StoryRulesOptions,\n  StorybookConfig\n} from './types.ts';\n\n// Preview configuration helper\nexport function definePreview<Addons extends PreviewAddon<never>[] = []>(\n  input: ProjectAnnotations<AstroRenderer> & { addons?: Addons }\n): CsfPreview<AstroRenderer & InferTypes<Addons>> {\n  return definePreviewBase<AstroRenderer, Addons>(input);\n}\n"],"mappings":";;;;;;;;AASA,SAAS,iBAAiB,yBAAyF;AAqC5G,SAAS,cACd,OACgD;AAChD,SAAO,kBAAyC,KAAK;AACvD;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Re-export types from storybook internal\nexport type {\n  Args,\n  ArgTypes,\n  Parameters,\n  ProjectAnnotations,\n  StrictArgs\n} from 'storybook/internal/types';\n\nimport { definePreview as definePreviewBase, type PreviewAddon, type InferTypes, type Preview as CsfPreview } from 'storybook/internal/csf';\nimport type { ArgsStoryFn, ProjectAnnotations, RenderContext, Renderer } from 'storybook/internal/types';\nimport type { AstroRenderer } from './portable-stories.ts';\n\n// CSF4 consumers reach `definePreview` from the preview iframe; Node test setup\n// files (e.g. `vitest.setup.ts`) only import the type helpers and\n// `setProjectAnnotations`. Loading `@storybook-astro/renderer/entry-preview` at\n// module scope here would pull `render.tsx`'s virtual-module chain — including\n// the configured framework integrations like Alpine.js — into the Node test\n// process, which has no `MutationObserver` etc. The dynamic import below keeps\n// that load inside `definePreview` so test setups don't pay for it.\n// Types come from src/renderer-entry-preview.d.ts; entry-preview.ts itself\n// isn't dts-built because it imports Vite virtual modules.\nimport type * as RendererEntryPreviewModule from '@storybook-astro/renderer/entry-preview';\n\ntype RendererEntryPreview = typeof RendererEntryPreviewModule;\nlet rendererImpl: RendererEntryPreview | undefined;\nlet rendererLoadPromise: Promise<RendererEntryPreview> | undefined;\n\nfunction loadRendererEntryPreview(): Promise<RendererEntryPreview> {\n  rendererLoadPromise ??= import('@storybook-astro/renderer/entry-preview').then((mod) => {\n    rendererImpl = mod;\n\n    return mod;\n  });\n\n  return rendererLoadPromise;\n}\n\nconst composedRender: ArgsStoryFn<AstroRenderer> = (args, context) => {\n  if (!rendererImpl) {\n    throw new Error(\n      '@storybook-astro: renderer not ready when `render` was called. ' +\n        'This should be reached only after `definePreview()` has kicked off the renderer load. ' +\n        'If you see this in tests, import the renderer module yourself or render via portable stories.'\n    );\n  }\n\n  return rendererImpl.render(args, context);\n};\n\nconst composedRenderToCanvas = async (\n  context: RenderContext<Renderer>,\n  canvasElement: HTMLElement\n): Promise<void> => {\n  const impl = await loadRendererEntryPreview();\n\n  return impl.renderToCanvas(context, canvasElement);\n};\n\n/**\n * Preview configuration type for `.storybook/preview.ts` in Astro projects.\n * Reflects the full type returned by `definePreview`, including addon type extensions.\n * Use this to annotate your preview module when needed:\n *\n * ```ts\n * import type { Preview } from '@storybook-astro/framework';\n * const preview: Preview = { ... };\n * export default preview;\n * ```\n */\nexport type Preview<Addons extends PreviewAddon<never>[] = []> = CsfPreview<AstroRenderer & InferTypes<Addons>>;\n\n// Export portable stories functionality\nexport {\n  composeStories,\n  composeStory,\n  setProjectAnnotations,\n  type AstroRenderer\n} from './portable-stories.ts';\n\n// Export framework types\nexport type {\n  FrameworkOptions,\n  RenderMode,\n  RenderStoryInput,\n  ServerBuildOptions,\n  SanitizationOptions,\n  StoryRulesOptions,\n  StorybookConfig\n} from './types.ts';\n\n// Preview configuration helper\nexport function definePreview<Addons extends PreviewAddon<never>[] = []>(\n  input: ProjectAnnotations<AstroRenderer> & { addons?: Addons }\n): CsfPreview<AstroRenderer & InferTypes<Addons>> {\n  // Kick off the renderer load eagerly so the impl is ready by the time\n  // Storybook calls renderToCanvas — but don't await, so this stays sync.\n  void loadRendererEntryPreview();\n\n  return definePreviewBase<AstroRenderer, Addons>({\n    ...input,\n    parameters: { renderer: 'astro' as const, ...input.parameters },\n    render: input.render ?? composedRender,\n    renderToCanvas: input.renderToCanvas ?? composedRenderToCanvas\n  });\n}\n"],"mappings":";;;;;;;;AASA,SAAS,iBAAiB,yBAAyF;AAgBnH,IAAI;AACJ,IAAI;AAEJ,SAAS,2BAA0D;AACjE,0BAAwB,OAAO,yCAAyC,EAAE,KAAK,CAAC,QAAQ;AACtF,mBAAe;AAEf,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,IAAM,iBAA6C,CAAC,MAAM,YAAY;AACpE,MAAI,CAAC,cAAc;AACjB,UAAM,IAAI;AAAA,MACR;AAAA,IAGF;AAAA,EACF;AAEA,SAAO,aAAa,OAAO,MAAM,OAAO;AAC1C;AAEA,IAAM,yBAAyB,OAC7B,SACA,kBACkB;AAClB,QAAM,OAAO,MAAM,yBAAyB;AAE5C,SAAO,KAAK,eAAe,SAAS,aAAa;AACnD;AAmCO,SAAS,cACd,OACgD;AAGhD,OAAK,yBAAyB;AAE9B,SAAO,kBAAyC;AAAA,IAC9C,GAAG;AAAA,IACH,YAAY,EAAE,UAAU,SAAkB,GAAG,MAAM,WAAW;AAAA,IAC9D,QAAQ,MAAM,UAAU;AAAA,IACxB,gBAAgB,MAAM,kBAAkB;AAAA,EAC1C,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-astro/framework",
-  "version": "1.4.0-canary.2",
+  "version": "1.4.0",
   "description": "Community-supported Storybook framework for Astro 5 & 6 components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -142,7 +142,7 @@
     }
   },
   "dependencies": {
-    "@storybook-astro/renderer": "1.4.0-canary.2",
+    "@storybook-astro/renderer": "1.4.0",
     "hono": "^4.11.12",
     "sanitize-html": "^2.17.0",
     "tsconfck": "^3.1.6",

package/src/index.ts

@@ -8,9 +8,55 @@ export type {
 } from 'storybook/internal/types';
 
 import { definePreview as definePreviewBase, type PreviewAddon, type InferTypes, type Preview as CsfPreview } from 'storybook/internal/csf';
-import type { ProjectAnnotations } from 'storybook/internal/types';
+import type { ArgsStoryFn, ProjectAnnotations, RenderContext, Renderer } from 'storybook/internal/types';
 import type { AstroRenderer } from './portable-stories.ts';
 
+// CSF4 consumers reach `definePreview` from the preview iframe; Node test setup
+// files (e.g. `vitest.setup.ts`) only import the type helpers and
+// `setProjectAnnotations`. Loading `@storybook-astro/renderer/entry-preview` at
+// module scope here would pull `render.tsx`'s virtual-module chain — including
+// the configured framework integrations like Alpine.js — into the Node test
+// process, which has no `MutationObserver` etc. The dynamic import below keeps
+// that load inside `definePreview` so test setups don't pay for it.
+// Types come from src/renderer-entry-preview.d.ts; entry-preview.ts itself
+// isn't dts-built because it imports Vite virtual modules.
+import type * as RendererEntryPreviewModule from '@storybook-astro/renderer/entry-preview';
+
+type RendererEntryPreview = typeof RendererEntryPreviewModule;
+let rendererImpl: RendererEntryPreview | undefined;
+let rendererLoadPromise: Promise<RendererEntryPreview> | undefined;
+
+function loadRendererEntryPreview(): Promise<RendererEntryPreview> {
+  rendererLoadPromise ??= import('@storybook-astro/renderer/entry-preview').then((mod) => {
+    rendererImpl = mod;
+
+    return mod;
+  });
+
+  return rendererLoadPromise;
+}
+
+const composedRender: ArgsStoryFn<AstroRenderer> = (args, context) => {
+  if (!rendererImpl) {
+    throw new Error(
+      '@storybook-astro: renderer not ready when `render` was called. ' +
+        'This should be reached only after `definePreview()` has kicked off the renderer load. ' +
+        'If you see this in tests, import the renderer module yourself or render via portable stories.'
+    );
+  }
+
+  return rendererImpl.render(args, context);
+};
+
+const composedRenderToCanvas = async (
+  context: RenderContext<Renderer>,
+  canvasElement: HTMLElement
+): Promise<void> => {
+  const impl = await loadRendererEntryPreview();
+
+  return impl.renderToCanvas(context, canvasElement);
+};
+
 /**
  * Preview configuration type for `.storybook/preview.ts` in Astro projects.
  * Reflects the full type returned by `definePreview`, including addon type extensions.
@@ -47,5 +93,14 @@ export type {
 export function definePreview<Addons extends PreviewAddon<never>[] = []>(
   input: ProjectAnnotations<AstroRenderer> & { addons?: Addons }
 ): CsfPreview<AstroRenderer & InferTypes<Addons>> {
-  return definePreviewBase<AstroRenderer, Addons>(input);
+  // Kick off the renderer load eagerly so the impl is ready by the time
+  // Storybook calls renderToCanvas — but don't await, so this stays sync.
+  void loadRendererEntryPreview();
+
+  return definePreviewBase<AstroRenderer, Addons>({
+    ...input,
+    parameters: { renderer: 'astro' as const, ...input.parameters },
+    render: input.render ?? composedRender,
+    renderToCanvas: input.renderToCanvas ?? composedRenderToCanvas
+  });
 }

package/src/renderer-entry-preview.d.ts

@@ -0,0 +1,17 @@
+// Ambient declaration for the renderer's runtime-only entry-preview module.
+//
+// `@storybook-astro/renderer/entry-preview` is built into JS but no .d.ts is
+// emitted, because the source imports Vite virtual modules that fail isolated
+// DTS compilation. We import the runtime values from `definePreview` so the
+// renderer's `renderToCanvas`, `render`, and `parameters` end up composed into
+// CSF4 previews — see src/index.ts for the why.
+declare module '@storybook-astro/renderer/entry-preview' {
+  import type { ArgsStoryFn, Renderer, RenderContext } from 'storybook/internal/types';
+
+  export const parameters: { renderer: 'astro' };
+  export const render: ArgsStoryFn<Renderer>;
+  export const renderToCanvas: (
+    context: RenderContext<Renderer>,
+    canvasElement: HTMLElement
+  ) => void | Promise<void>;
+}