@storybook-astro/framework 1.3.0 → 1.4.0-canary.1

package/dist/{types-BCpJLSTo.d.ts → types--SvYP5Ri.d.ts}

@@ -14,6 +14,54 @@ type StoryRulesOptions = string | {
     configFile: string;
 };
 
+interface StorybookFontProvider {
+    name: string;
+    init?: (context: {
+        storage: FontStorage;
+        root: URL;
+    }) => Promise<void> | void;
+    resolveFont: (options: {
+        familyName: string;
+        weights: string[];
+        styles: string[];
+        subsets: string[];
+        formats: string[];
+    }) => Promise<{
+        fonts: FontFaceData[];
+    } | undefined> | {
+        fonts: FontFaceData[];
+    } | undefined;
+}
+interface FontFaceData {
+    src: Array<{
+        url?: string;
+        name?: string;
+        format?: string;
+        tech?: string;
+    }>;
+    weight?: string | number | [number, number];
+    style?: string;
+    display?: string;
+    unicodeRange?: string[];
+    featureSettings?: string;
+    variationSettings?: string;
+}
+interface StorybookFontFamily {
+    name: string;
+    cssVariable: string;
+    provider: StorybookFontProvider;
+    weights?: Array<string | number>;
+    styles?: string[];
+    subsets?: string[];
+    formats?: string[];
+    fallbacks?: string[];
+    display?: string;
+}
+interface FontStorage {
+    getItem: <T = unknown>(key: string, init?: () => Promise<T> | T) => Promise<T | null>;
+    setItem: (key: string, value: unknown) => Promise<void> | void;
+}
+
 type FrameworkName = CompatibleString<'@storybook-astro/framework'>;
 
 type RenderMode = 'server' | 'static';
@@ -31,6 +79,13 @@ type BaseFrameworkOptions = {
     integrations?: Integration[];
     sanitization?: SanitizationOptions;
     resolveFrom?: string;
+    /**
+     * Astro font families to resolve and inject as @font-face CSS during story
+     * rendering. Pass the same array you have in your `astro.config.ts` under
+     * `fonts:`. Currently honored in development; static/server builds fall
+     * back to no-op stubs.
+     */
+    fonts?: StorybookFontFamily[];
 };
 type ServerFrameworkOptions = BaseFrameworkOptions & {
     renderMode?: 'server';

package/dist/{viteStorybookAstroMiddlewarePlugin-UB6ZLJ4B.js → viteStorybookAstroMiddlewarePlugin-RPIBVJAV.js}

@@ -1,7 +1,7 @@
 import {
   createViteServer,
   vitePluginStorybookAstroMiddleware
-} from "./chunk-AYYMNFI6.js";
+} from "./chunk-EU6E5SJE.js";
 import "./chunk-PUTCAN6X.js";
 import "./chunk-B5HHF6FC.js";
 import "./chunk-G3PMV62Z.js";
@@ -9,4 +9,4 @@ export {
   createViteServer,
   vitePluginStorybookAstroMiddleware
 };
-//# sourceMappingURL=viteStorybookAstroMiddlewarePlugin-UB6ZLJ4B.js.map
+//# sourceMappingURL=viteStorybookAstroMiddlewarePlugin-RPIBVJAV.js.map

package/dist/vitest/global-setup.js

@@ -1,9 +1,9 @@
 import {
   TESTING_RENDERER_DAEMON_URL_ENV,
   startTestingRendererDaemon
-} from "../chunk-2EABPTOY.js";
+} from "../chunk-AIEYHH2G.js";
 import "../chunk-WUTCMEF5.js";
-import "../chunk-AYYMNFI6.js";
+import "../chunk-EU6E5SJE.js";
 import "../chunk-PUTCAN6X.js";
 import "../chunk-7YBE4TTI.js";
 import "../chunk-B5HHF6FC.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-astro/framework",
-  "version": "1.3.0",
+  "version": "1.4.0-canary.1",
   "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.3.0",
+    "@storybook-astro/renderer": "1.4.0-canary.1",
     "hono": "^4.11.12",
     "sanitize-html": "^2.17.0",
     "vite": "^6.4.1 || ^7.0.0 || ^8.0.0"

package/src/loadUserAstroConfig.ts

@@ -0,0 +1,59 @@
+import { loadConfigFromFile } from 'vite';
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import type { AstroIntegration } from 'astro';
+
+const CONFIG_FILENAMES = [
+  'astro.config.ts',
+  'astro.config.mjs',
+  'astro.config.js',
+  'astro.config.cjs',
+];
+
+/**
+ * Loads integrations declared in the user's astro.config.* so that any Vite
+ * plugins they register (e.g. astro-icon's virtual:astro-icon resolver) are
+ * present in both the main Storybook Vite server and the internal Astro SSR
+ * server.  Returns an empty array on any failure so the calling code can
+ * continue with only the framework-level integrations.
+ */
+export async function loadUserAstroIntegrations(resolveFrom: string): Promise<AstroIntegration[]> {
+  const configFile = CONFIG_FILENAMES.find(name => existsSync(resolve(resolveFrom, name)));
+
+  if (!configFile) {
+    return [];
+  }
+
+  try {
+    const result = await loadConfigFromFile(
+      { command: 'serve', mode: 'development' },
+      configFile,
+      resolveFrom
+    );
+
+    if (!result?.config) {
+      return [];
+    }
+
+    const config = result.config as { integrations?: unknown };
+    const raw = config.integrations;
+
+    if (!raw) {
+      return [];
+    }
+
+    // Astro allows nested arrays from conditional spreads (e.g. ...whenX(() => mdx()))
+    const flat = (Array.isArray(raw) ? raw : [raw]).flat(Infinity);
+
+    return flat.filter(
+      (i): i is AstroIntegration => Boolean(i) && typeof i === 'object' && 'name' in i && 'hooks' in i
+    );
+  } catch (err) {
+    console.warn(
+      '[storybook-astro] Could not load astro.config to discover integrations:',
+      err instanceof Error ? err.message : String(err)
+    );
+
+    return [];
+  }
+}

package/src/productionRenderRuntime.ts

@@ -2,6 +2,7 @@ import { resolve } from 'node:path';
 import { createAstroRenderHandler, type HandlerProps } from './astroRenderHandler.ts';
 import type { Integration } from './integrations/index.ts';
 import type { SanitizationOptions } from './lib/sanitization.ts';
+import type { FrameworkOptions } from './types.ts';
 import {
   createClientModuleResolver,
   createProductionAstroContainer,
@@ -34,6 +35,7 @@ type ProductionRenderRuntimeOptions = {
   trackedSpecifiers: Set<string>;
   resolveFrom: string;
   resolveComponentId?: (id: string) => string;
+  fonts?: FrameworkOptions['fonts'];
 };
 
 /** Creates the shared SSR runtime used by both build-time prerendering and the standalone render server. */
@@ -43,7 +45,8 @@ export async function createProductionRenderRuntime(
   const viteServer = await createStorySsrViteServer({
     integrations: options.integrations,
     trackedSpecifiers: options.trackedSpecifiers,
-    resolveFrom: options.resolveFrom
+    resolveFrom: options.resolveFrom,
+    fonts: options.fonts
   });
 
   try {

package/src/storySsrVite.ts

@@ -6,7 +6,8 @@ import { importAstroConfig } from './importAstroConfig.ts';
 import type { Integration } from './integrations/index.ts';
 import { ssrLoadModuleWithFsFallback } from './lib/ssr-load-module-with-fs-fallback.ts';
 import { resolveStoryModuleMock } from './module-mocks.ts';
-import { vitePluginAstroFontsFallback } from './vitePluginAstroFontsFallback.ts';
+import type { FrameworkOptions } from './types.ts';
+import { vitePluginAstroFonts } from './vitePluginAstroFonts.ts';
 import { vitePluginAstroIntegrationOptsFallback } from './vitePluginAstroIntegrationOptsFallback.ts';
 import { vitePluginAstroRoutesFallback } from './vitePluginAstroRoutesFallback.ts';
 import { vitePluginAstroVueFallback } from './vitePluginAstroVueFallback.ts';
@@ -16,6 +17,7 @@ export async function createStorySsrViteServer(options: {
   integrations: Integration[];
   trackedSpecifiers: Set<string>;
   resolveFrom: string;
+  fonts?: FrameworkOptions['fonts'];
 }) {
   const { getViteConfig, passthroughImageService } = await importAstroConfig(options.resolveFrom);
   const astroConfig = await getViteConfig(
@@ -44,7 +46,7 @@ export async function createStorySsrViteServer(options: {
     },
     plugins: [
       createProjectAstroResolutionPlugin(options.resolveFrom),
-      vitePluginAstroFontsFallback(),
+      vitePluginAstroFonts({ fonts: options.fonts, root: options.resolveFrom }),
       vitePluginAstroIntegrationOptsFallback(),
       vitePluginAstroVueFallback(),
       vitePluginAstroRoutesFallback(),

package/src/types.ts

@@ -3,10 +3,11 @@ import type { InlineConfig } from 'vite';
 import type { Integration } from './integrations/index.ts';
 import type { SanitizationOptions } from './lib/sanitization.ts';
 import type { StoryRulesOptions } from './rules-options.ts';
+import type { StorybookFontFamily } from './vitePluginAstroFonts.ts';
 
 type FrameworkName = CompatibleString<'@storybook-astro/framework'>;
 
-export type { Integration, SanitizationOptions, StoryRulesOptions };
+export type { Integration, SanitizationOptions, StoryRulesOptions, StorybookFontFamily };
 export type RenderMode = 'server' | 'static';
 
 export type ServerBuildOptions = {
@@ -25,6 +26,13 @@ type BaseFrameworkOptions = {
   integrations?: Integration[];
   sanitization?: SanitizationOptions;
   resolveFrom?: string;
+  /**
+   * Astro font families to resolve and inject as @font-face CSS during story
+   * rendering. Pass the same array you have in your `astro.config.ts` under
+   * `fonts:`. Currently honored in development; static/server builds fall
+   * back to no-op stubs.
+   */
+  fonts?: StorybookFontFamily[];
 };
 
 type ServerFrameworkOptions = BaseFrameworkOptions & {

package/src/vitePluginAstro.ts

@@ -1,6 +1,7 @@
 import { mergeConfig, type InlineConfig } from 'vite';
 import type { Integration } from './integrations/index.ts';
 import { importAstroConfig } from './importAstroConfig.ts';
+import { loadUserAstroIntegrations } from './loadUserAstroConfig.ts';
 
 const ASTRO_PLUGINS_THAT_ARE_SUPPOSEDLY_NOT_NEEDED_IN_STORYBOOK = [
   '@astro/plugin-actions',
@@ -38,13 +39,19 @@ export async function mergeWithAstroConfig(
   const { getViteConfig } = await importAstroConfig(resolveFrom);
   const safeIntegrations = integrations ?? [];
 
+  const frameworkIntegrations = await Promise.all(
+    safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
+  );
+
+  const userIntegrations = await loadUserAstroIntegrations(resolveFrom);
+  const frameworkNames = new Set(frameworkIntegrations.map(i => i.name));
+  const extraIntegrations = userIntegrations.filter(i => !frameworkNames.has(i.name));
+
   const astroConfig = await getViteConfig(
     {},
     {
       configFile: false,
-      integrations: await Promise.all(
-        safeIntegrations.map((integration) => integration.loadIntegration(resolveFrom))
-      )
+      integrations: [...frameworkIntegrations, ...extraIntegrations]
     }
   )({
     mode,

package/src/vitePluginAstroBuildPrerender.ts

@@ -138,6 +138,7 @@ export function vitePluginAstroBuildPrerender(options: FrameworkOptions): Plugin
         staticCssMap,
         trackedSpecifiers,
         resolveFrom,
+        fonts: options.fonts,
         bundle
       });
 
@@ -162,6 +163,7 @@ async function prerenderAstroStories(options: {
   staticCssMap: StaticCssMap;
   trackedSpecifiers: Set<string>;
   resolveFrom: string;
+  fonts?: FrameworkOptions['fonts'];
   bundle: Rollup.OutputBundle;
 }) {
   const runtime = await createProductionRenderRuntime({
@@ -170,7 +172,8 @@ async function prerenderAstroStories(options: {
     storyRulesConfigFilePath: options.storyRulesConfigFilePath,
     staticModuleMap: options.staticModuleMap,
     trackedSpecifiers: options.trackedSpecifiers,
-    resolveFrom: options.resolveFrom
+    resolveFrom: options.resolveFrom,
+    fonts: options.fonts
   });
   const assetPathMap = buildAssetPathMap(options.bundle);
 

package/src/vitePluginAstroFonts.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, test } from 'vitest';
+import {
+  buildFamilyCss,
+  vitePluginAstroFonts,
+  type FontFaceData,
+  type StorybookFontFamily,
+  type StorybookFontProvider
+} from './vitePluginAstroFonts.ts';
+
+function makeProvider(faces: FontFaceData[]): StorybookFontProvider {
+  return {
+    name: 'test',
+    resolveFont: () => ({ fonts: faces })
+  };
+}
+
+describe('buildFamilyCss', () => {
+  test('emits @font-face block with src url and font-display: swap by default', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [
+      { src: [{ url: 'https://example.com/inter-400.woff2', format: 'woff2' }], weight: 400, style: 'normal' }
+    ]);
+
+    expect(css).toContain('@font-face');
+    expect(css).toContain('font-family: "Inter"');
+    expect(css).toContain('src: url("https://example.com/inter-400.woff2") format("woff2");');
+    expect(css).toContain('font-display: swap');
+    expect(css).toContain('font-weight: 400');
+    expect(css).toContain('font-style: normal');
+  });
+
+  test('emits CSS variable rule binding cssVariable to family name and fallbacks', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([]),
+      fallbacks: ['system-ui', 'sans-serif']
+    };
+    const css = buildFamilyCss(family, []);
+
+    expect(css).toContain(':root { --font-inter: "Inter", system-ui, sans-serif; }');
+  });
+
+  test('handles local() source entries from local font providers', () => {
+    const family: StorybookFontFamily = {
+      name: 'CustomFont',
+      cssVariable: '--font-custom',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [
+      { src: [{ name: 'CustomFont Regular' }, { url: '/fonts/custom.woff2', format: 'woff2' }] }
+    ]);
+
+    expect(css).toContain('local("CustomFont Regular")');
+    expect(css).toContain('url("/fonts/custom.woff2") format("woff2")');
+  });
+
+  test('emits variable-font weight range when provider returns a tuple', () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([])
+    };
+    const css = buildFamilyCss(family, [{ src: [{ url: '/x.woff2' }], weight: [100, 900] }]);
+
+    expect(css).toContain('font-weight: 100 900');
+  });
+});
+
+describe('vitePluginAstroFonts virtual modules', () => {
+  test('resolveId maps both virtual ids and the bare astro/assets/fonts/runtime import', async () => {
+    const plugin = vitePluginAstroFonts();
+    const resolveId = plugin.resolveId as (this: unknown, id: string) => string | undefined;
+
+    expect(resolveId.call({}, 'virtual:astro:assets/fonts/internal')).toBe(
+      '\0virtual:astro:assets/fonts/internal'
+    );
+    expect(resolveId.call({}, 'virtual:astro:assets/fonts/runtime')).toBe(
+      '\0virtual:astro:assets/fonts/runtime'
+    );
+    expect(resolveId.call({}, 'astro/assets/fonts/runtime')).toBe('\0storybook:astro-fonts-runtime');
+    expect(resolveId.call({}, 'astro/assets/fonts/runtime.js')).toBe('\0storybook:astro-fonts-runtime');
+    expect(resolveId.call({}, 'some-other-id')).toBeUndefined();
+  });
+
+  test('internal virtual module exports a Map populated from the resolved families', async () => {
+    const family: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([
+        { src: [{ url: 'https://example.com/inter.woff2', format: 'woff2' }], weight: 400 }
+      ])
+    };
+    const plugin = vitePluginAstroFonts({ fonts: [family] });
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('componentDataByCssVariable = new Map(');
+    expect(result?.code).toContain('--font-inter');
+    expect(result?.code).toContain('@font-face');
+    expect(result?.code).toContain('fontDataByCssVariable = ');
+    expect(result?.code).toContain('https://example.com/inter.woff2');
+  });
+
+  test('emits empty maps when no families are configured (no-op behavior preserved)', async () => {
+    const plugin = vitePluginAstroFonts();
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('componentDataByCssVariable = new Map([])');
+    expect(result?.code).toContain('fontDataByCssVariable = {}');
+  });
+
+  test('continues processing remaining families if one provider throws', async () => {
+    const failing: StorybookFontFamily = {
+      name: 'Broken',
+      cssVariable: '--font-broken',
+      provider: {
+        name: 'broken',
+        resolveFont: () => {
+          throw new Error('boom');
+        }
+      }
+    };
+    const working: StorybookFontFamily = {
+      name: 'Inter',
+      cssVariable: '--font-inter',
+      provider: makeProvider([{ src: [{ url: '/inter.woff2' }], weight: 400 }])
+    };
+    const plugin = vitePluginAstroFonts({ fonts: [failing, working] });
+
+    const buildStart = plugin.buildStart as (this: unknown) => Promise<void>;
+    const load = plugin.load as (this: unknown, id: string) => Promise<{ code: string } | undefined>;
+
+    await buildStart.call({});
+    const result = await load.call({ load: async () => null }, '\0virtual:astro:assets/fonts/internal');
+
+    expect(result?.code).toContain('--font-inter');
+    expect(result?.code).not.toContain('--font-broken');
+  });
+});