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

package/README.md

@@ -0,0 +1,38 @@
+# @storybook-astro/framework
+
+The community-supported [Storybook](https://storybook.js.org/) framework for [Astro](https://astro.build/).
+
+> Astro 5 & 6 + Storybook 10
+
+## Install
+
+```bash
+npm install -D storybook @storybook/builder-vite @storybook-astro/framework
+```
+
+## Setup
+
+```javascript
+// .storybook/main.js
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  framework: {
+    name: '@storybook-astro/framework',
+    options: {},
+  },
+};
+```
+
+## Requirements
+
+Node.js 20.16+, Storybook 10, Astro 5.5.3+ or 6.0.0+, Vite 6+
+
+## Links
+
+- [Getting Started](https://storybook-astro.org/getting-started)
+- [Live Demo](https://demo.storybook-astro.org)
+- [GitHub](https://github.com/storybook-astro/storybook-astro)
+
+## License
+
+MIT

package/dist/base-IRZo3zgK.d.ts

@@ -0,0 +1,23 @@
+import { AstroIntegration } from 'astro';
+
+type RendererDeclaration = {
+    server?: {
+        name: string;
+        entrypoint: string;
+    };
+    client?: {
+        name: string;
+        entrypoint: string;
+    };
+};
+declare abstract class Integration {
+    abstract readonly name: string;
+    abstract readonly dependencies: string[];
+    abstract readonly options: Record<string | number | symbol, unknown>;
+    abstract readonly renderer: RendererDeclaration;
+    abstract readonly storybookEntryPreview?: string;
+    abstract resolveClient(moduleName: string): string | undefined;
+    abstract loadIntegration(resolveFrom?: string): Promise<AstroIntegration>;
+}
+
+export { Integration as I };

package/dist/chunk-4SWPVM6R.js

@@ -0,0 +1,96 @@
+import {
+  alpinejs,
+  preact,
+  react,
+  solid,
+  svelte,
+  vue
+} from "./chunk-PJEDXZVN.js";
+
+// src/testing/integration-config.ts
+import { resolve as resolvePath } from "path";
+var TESTING_INTEGRATIONS_ENV = "STORYBOOK_ASTRO_TESTING_INTEGRATIONS";
+var REGEXP_TAG = "__storybookAstroRegExp";
+function replacer(_key, value) {
+  if (value instanceof RegExp) {
+    return {
+      [REGEXP_TAG]: true,
+      source: value.source,
+      flags: value.flags
+    };
+  }
+  return value;
+}
+function reviver(_key, value) {
+  if (value && typeof value === "object" && REGEXP_TAG in value && value[REGEXP_TAG] === true) {
+    const source = value.source;
+    const flags = value.flags;
+    if (typeof source === "string" && typeof flags === "string") {
+      return new RegExp(source, flags);
+    }
+  }
+  return value;
+}
+function readIntegrationMapFromEnv() {
+  const raw = process.env[TESTING_INTEGRATIONS_ENV];
+  if (!raw) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw, reviver);
+    if (!parsed || typeof parsed !== "object") {
+      return {};
+    }
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+function writeIntegrationMapToEnv(value) {
+  process.env[TESTING_INTEGRATIONS_ENV] = JSON.stringify(value, replacer);
+}
+function serializeIntegration(integration) {
+  return {
+    name: integration.name,
+    options: integration.options
+  };
+}
+function deserializeIntegration(integration) {
+  switch (integration.name) {
+    case "react":
+      return react(integration.options);
+    case "solid":
+      return solid(integration.options);
+    case "preact":
+      return preact(integration.options);
+    case "vue":
+      return vue(integration.options);
+    case "svelte":
+      return svelte(integration.options);
+    case "alpine":
+      return alpinejs(integration.options);
+    default:
+      throw new Error(`Unknown testing integration: ${integration.name}`);
+  }
+}
+function registerTestingIntegrationsForRoot(root, integrations) {
+  const normalizedRoot = resolvePath(root);
+  const integrationMap = readIntegrationMapFromEnv();
+  integrationMap[normalizedRoot] = integrations.map(serializeIntegration);
+  writeIntegrationMapToEnv(integrationMap);
+}
+function resolveTestingIntegrationsForRoot(root) {
+  const normalizedRoot = resolvePath(root);
+  const integrationMap = readIntegrationMapFromEnv();
+  const integrations = integrationMap[normalizedRoot];
+  if (!integrations) {
+    return [];
+  }
+  return integrations.map(deserializeIntegration);
+}
+
+export {
+  registerTestingIntegrationsForRoot,
+  resolveTestingIntegrationsForRoot
+};
+//# sourceMappingURL=chunk-4SWPVM6R.js.map

package/dist/chunk-4SWPVM6R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testing/integration-config.ts"],"sourcesContent":["import { resolve as resolvePath } from 'node:path';\nimport type { Integration } from '../integrations/base.ts';\nimport {\n  alpinejs,\n  preact,\n  react,\n  solid,\n  svelte,\n  vue,\n} from '../integrations/index.ts';\n\nconst TESTING_INTEGRATIONS_ENV = 'STORYBOOK_ASTRO_TESTING_INTEGRATIONS';\n\ntype SerializedIntegration = {\n  name: string;\n  options: unknown;\n};\n\ntype SerializedIntegrationMap = Record<string, SerializedIntegration[]>;\n\nconst REGEXP_TAG = '__storybookAstroRegExp';\n\nfunction replacer(_key: string, value: unknown): unknown {\n  if (value instanceof RegExp) {\n    return {\n      [REGEXP_TAG]: true,\n      source: value.source,\n      flags: value.flags\n    };\n  }\n\n  return value;\n}\n\nfunction reviver(_key: string, value: unknown): unknown {\n  if (\n    value &&\n    typeof value === 'object' &&\n    REGEXP_TAG in value &&\n    (value as Record<string, unknown>)[REGEXP_TAG] === true\n  ) {\n    const source = (value as Record<string, unknown>).source;\n    const flags = (value as Record<string, unknown>).flags;\n\n    if (typeof source === 'string' && typeof flags === 'string') {\n      return new RegExp(source, flags);\n    }\n  }\n\n  return value;\n}\n\nfunction readIntegrationMapFromEnv(): SerializedIntegrationMap {\n  const raw = process.env[TESTING_INTEGRATIONS_ENV];\n\n  if (!raw) {\n    return {};\n  }\n\n  try {\n    const parsed = JSON.parse(raw, reviver);\n\n    if (!parsed || typeof parsed !== 'object') {\n      return {};\n    }\n\n    return parsed as SerializedIntegrationMap;\n  } catch {\n    return {};\n  }\n}\n\nfunction writeIntegrationMapToEnv(value: SerializedIntegrationMap) {\n  process.env[TESTING_INTEGRATIONS_ENV] = JSON.stringify(value, replacer);\n}\n\nfunction serializeIntegration(integration: Integration): SerializedIntegration {\n  return {\n    name: integration.name,\n    options: integration.options\n  };\n}\n\nfunction deserializeIntegration(integration: SerializedIntegration): Integration {\n  switch (integration.name) {\n    case 'react':\n      return react(integration.options as Parameters<typeof react>[0]);\n    case 'solid':\n      return solid(integration.options as Parameters<typeof solid>[0]);\n    case 'preact':\n      return preact(integration.options as Parameters<typeof preact>[0]);\n    case 'vue':\n      return vue(integration.options as Parameters<typeof vue>[0]);\n    case 'svelte':\n      return svelte(integration.options as Parameters<typeof svelte>[0]);\n    case 'alpine':\n      return alpinejs(integration.options as Parameters<typeof alpinejs>[0]);\n    default:\n      throw new Error(`Unknown testing integration: ${integration.name}`);\n  }\n}\n\nexport function registerTestingIntegrationsForRoot(root: string, integrations: Integration[]) {\n  const normalizedRoot = resolvePath(root);\n  const integrationMap = readIntegrationMapFromEnv();\n\n  integrationMap[normalizedRoot] = integrations.map(serializeIntegration);\n  writeIntegrationMapToEnv(integrationMap);\n}\n\nexport function resolveTestingIntegrationsForRoot(root: string): Integration[] {\n  const normalizedRoot = resolvePath(root);\n  const integrationMap = readIntegrationMapFromEnv();\n  const integrations = integrationMap[normalizedRoot];\n\n  if (!integrations) {\n    return [];\n  }\n\n  return integrations.map(deserializeIntegration);\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,WAAW,mBAAmB;AAWvC,IAAM,2BAA2B;AASjC,IAAM,aAAa;AAEnB,SAAS,SAAS,MAAc,OAAyB;AACvD,MAAI,iBAAiB,QAAQ;AAC3B,WAAO;AAAA,MACL,CAAC,UAAU,GAAG;AAAA,MACd,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,IACf;AAAA,EACF;AAEA,SAAO;AACT;AAEA,SAAS,QAAQ,MAAc,OAAyB;AACtD,MACE,SACA,OAAO,UAAU,YACjB,cAAc,SACb,MAAkC,UAAU,MAAM,MACnD;AACA,UAAM,SAAU,MAAkC;AAClD,UAAM,QAAS,MAAkC;AAEjD,QAAI,OAAO,WAAW,YAAY,OAAO,UAAU,UAAU;AAC3D,aAAO,IAAI,OAAO,QAAQ,KAAK;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AACT;AAEA,SAAS,4BAAsD;AAC7D,QAAM,MAAM,QAAQ,IAAI,wBAAwB;AAEhD,MAAI,CAAC,KAAK;AACR,WAAO,CAAC;AAAA,EACV;AAEA,MAAI;AACF,UAAM,SAAS,KAAK,MAAM,KAAK,OAAO;AAEtC,QAAI,CAAC,UAAU,OAAO,WAAW,UAAU;AACzC,aAAO,CAAC;AAAA,IACV;AAEA,WAAO;AAAA,EACT,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;AAEA,SAAS,yBAAyB,OAAiC;AACjE,UAAQ,IAAI,wBAAwB,IAAI,KAAK,UAAU,OAAO,QAAQ;AACxE;AAEA,SAAS,qBAAqB,aAAiD;AAC7E,SAAO;AAAA,IACL,MAAM,YAAY;AAAA,IAClB,SAAS,YAAY;AAAA,EACvB;AACF;AAEA,SAAS,uBAAuB,aAAiD;AAC/E,UAAQ,YAAY,MAAM;AAAA,IACxB,KAAK;AACH,aAAO,MAAM,YAAY,OAAsC;AAAA,IACjE,KAAK;AACH,aAAO,MAAM,YAAY,OAAsC;AAAA,IACjE,KAAK;AACH,aAAO,OAAO,YAAY,OAAuC;AAAA,IACnE,KAAK;AACH,aAAO,IAAI,YAAY,OAAoC;AAAA,IAC7D,KAAK;AACH,aAAO,OAAO,YAAY,OAAuC;AAAA,IACnE,KAAK;AACH,aAAO,SAAS,YAAY,OAAyC;AAAA,IACvE;AACE,YAAM,IAAI,MAAM,gCAAgC,YAAY,IAAI,EAAE;AAAA,EACtE;AACF;AAEO,SAAS,mCAAmC,MAAc,cAA6B;AAC5F,QAAM,iBAAiB,YAAY,IAAI;AACvC,QAAM,iBAAiB,0BAA0B;AAEjD,iBAAe,cAAc,IAAI,aAAa,IAAI,oBAAoB;AACtE,2BAAyB,cAAc;AACzC;AAEO,SAAS,kCAAkC,MAA6B;AAC7E,QAAM,iBAAiB,YAAY,IAAI;AACvC,QAAM,iBAAiB,0BAA0B;AACjD,QAAM,eAAe,eAAe,cAAc;AAElD,MAAI,CAAC,cAAc;AACjB,WAAO,CAAC;AAAA,EACV;AAEA,SAAO,aAAa,IAAI,sBAAsB;AAChD;","names":[]}

package/dist/chunk-5EF25G5S.js

@@ -0,0 +1,69 @@
+// src/portable-stories.ts
+import {
+  composeStory as originalComposeStory,
+  composeStories as originalComposeStories,
+  setProjectAnnotations as originalSetProjectAnnotations
+} from "storybook/internal/preview-api";
+var render = (args, context) => {
+  const Component = context?.component;
+  const renderer = context?.parameters?.renderer;
+  const id = context?.id || "test-story";
+  const brokenRenderers = [];
+  if (renderer && brokenRenderers.includes(renderer)) {
+    throw new Error(`Renderer '${renderer}' not found. Available renderers: react, vue, svelte, solid, preact`);
+  }
+  if (!Component) {
+    throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+  }
+  if (typeof Component === "function" && Component.isAstroComponentFactory) {
+    return Component;
+  }
+  if (typeof Component === "function") {
+    if (renderer && !brokenRenderers.includes(renderer)) {
+      return Component;
+    }
+    if (!renderer) {
+      throw new Error(
+        `Component appears to be a framework component but no renderer is specified. Add 'parameters: { renderer: "framework-name" }' to your story configuration.`
+      );
+    }
+  }
+  return {
+    component: Component,
+    args,
+    renderer: renderer || "astro"
+  };
+};
+function setProjectAnnotations(projectAnnotations) {
+  return originalSetProjectAnnotations(projectAnnotations);
+}
+function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
+  const mergedProjectAnnotations = projectAnnotations ? {
+    ...projectAnnotations,
+    render: projectAnnotations.render || render
+  } : {
+    render
+  };
+  return originalComposeStory(
+    story,
+    componentAnnotations,
+    mergedProjectAnnotations,
+    exportsName
+  );
+}
+function composeStories(storiesImport, projectAnnotations) {
+  const mergedProjectAnnotations = projectAnnotations ? {
+    ...projectAnnotations,
+    render: projectAnnotations.render || render
+  } : {
+    render
+  };
+  return originalComposeStories(storiesImport, mergedProjectAnnotations);
+}
+
+export {
+  setProjectAnnotations,
+  composeStory,
+  composeStories
+};
+//# sourceMappingURL=chunk-5EF25G5S.js.map

package/dist/chunk-5EF25G5S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portable-stories.ts"],"sourcesContent":["// @ts-ignore - Storybook internal modules have complex module resolution\nimport type {\n  Args,\n  ComponentAnnotations,\n  NamedOrDefaultProjectAnnotations,\n  NormalizedProjectAnnotations,\n  ProjectAnnotations,\n  StoryAnnotationsOrFn,\n  WebRenderer,\n} from 'storybook/internal/types';\n// @ts-ignore - Storybook internal modules have complex module resolution\nimport {\n  composeStory as originalComposeStory,\n  composeStories as originalComposeStories,\n  setProjectAnnotations as originalSetProjectAnnotations,\n} from 'storybook/internal/preview-api';\n\n// Define the AstroRenderer type to match other frameworks\nexport interface AstroRenderer extends WebRenderer {\n  component: any;\n  storyResult: any;\n}\n\n// Create a render function for testing that mimics Storybook's render behavior\nconst render = (args: Args, context?: any) => {\n  const Component = context?.component;\n  const renderer = context?.parameters?.renderer;\n  const id = context?.id || 'test-story';\n  \n  // Renderers that are known to not work in the current integration\n  const brokenRenderers: string[] = [];\n  \n  // Mimic the renderer detection logic from the main renderer\n  if (renderer && brokenRenderers.includes(renderer)) {\n    throw new Error(`Renderer '${renderer}' not found. Available renderers: react, vue, svelte, solid, preact`);\n  }\n  \n  // For Astro components and working integrations, return a renderable object\n  if (!Component) {\n    throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);\n  }\n  \n  // Astro components can be identified by isAstroComponentFactory\n  if (typeof Component === 'function' && (Component as any).isAstroComponentFactory) {\n    // This is an Astro component - return it for server-side rendering\n    return Component;\n  }\n  \n  // For framework components that have working integrations\n  if (typeof Component === 'function') {\n    if (renderer && !brokenRenderers.includes(renderer)) {\n      // This would delegate to working framework renderer\n      return Component;\n    }\n    \n    // If no renderer specified for function component\n    if (!renderer) {\n      throw new Error(\n        `Component appears to be a framework component but no renderer is specified. ` +\n        `Add 'parameters: { renderer: \"framework-name\" }' to your story configuration.`\n      );\n    }\n  }\n  \n  // Return a basic representation for testing\n  return {\n    component: Component,\n    args: args,\n    renderer: renderer || 'astro'\n  };\n};\n\n/**\n * Function that sets the globalConfig of your storybook. The global config is the preview module of\n * your .storybook folder.\n *\n * It should be run a single time, so that your global config (e.g. decorators) is applied to your\n * stories when using `composeStories` or `composeStory`.\n *\n * Example:\n *\n * ```jsx\n * // setup-file.js\n * import { setProjectAnnotations } from '@storybook-astro/framework';\n * import projectAnnotations from './.storybook/preview';\n *\n * setProjectAnnotations(projectAnnotations);\n * ```\n *\n * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')\n */\nexport function setProjectAnnotations(\n  projectAnnotations:\n    | NamedOrDefaultProjectAnnotations<AstroRenderer>\n    | NamedOrDefaultProjectAnnotations<AstroRenderer>[]\n): NormalizedProjectAnnotations<AstroRenderer> {\n  return originalSetProjectAnnotations<AstroRenderer>(projectAnnotations);\n}\n\n/**\n * Function that will receive a story along with meta (e.g. a default export from a .stories file)\n * and optionally projectAnnotations e.g. (import * as projectAnnotations from '../.storybook/preview')\n * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.\n *\n * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.\n *\n * Example:\n * ```jsx\n * import { render } from '@testing-library/react';\n * import { composeStory } from '@storybook-astro/framework';\n * import meta, { Primary as PrimaryStory } from './Button.stories';\n *\n * const Primary = composeStory(PrimaryStory, meta);\n *\n * test('renders primary button', () => {\n *   const { getByRole } = render(<Primary>Hello world</Primary>);\n *   expect(getByRole('button')).toBeInTheDocument();\n * });\n * ```\n *\n * @param story - E.g. (import { Primary } from './Button.stories')\n * @param componentAnnotations - E.g. (import meta from './Button.stories')\n * @param projectAnnotations - E.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.\n * @param exportsName - In case your story does not contain a name and you want it to have a name.\n */\nexport function composeStory<TArgs extends Args = Args>(\n  story: StoryAnnotationsOrFn<AstroRenderer, TArgs>,\n  componentAnnotations: ComponentAnnotations<AstroRenderer, TArgs>,\n  projectAnnotations?: ProjectAnnotations<AstroRenderer>,\n  exportsName?: string\n) {\n  // Merge project annotations with Astro renderer\n  const mergedProjectAnnotations: any = projectAnnotations ? {\n    ...projectAnnotations,\n    render: projectAnnotations.render || render\n  } : {\n    render\n  };\n  \n  return originalComposeStory<AstroRenderer, TArgs>(\n    story as any,\n    componentAnnotations,\n    mergedProjectAnnotations as any,\n    exportsName as any\n  );\n}\n\n/**\n * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)\n * and optionally a globalConfig (e.g. `import * from '../.storybook/preview`)\n * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.\n *\n * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.\n *\n * Example:\n * ```jsx\n * import { render } from '@testing-library/react';\n * import { composeStories } from '@storybook-astro/framework';\n * import * as stories from './Button.stories';\n *\n * const { Primary, Secondary } = composeStories(stories);\n *\n * test('renders primary button', () => {\n *   const { getByRole } = render(<Primary>Hello world</Primary>);\n *   expect(getByRole('button')).toBeInTheDocument();\n * });\n * ```\n *\n * @param storiesImport - E.g. (import * as stories from './Button.stories')\n * @param projectAnnotations - E.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.\n */\nexport function composeStories<TModule extends Record<string, any>>(\n  storiesImport: TModule,\n  projectAnnotations?: ProjectAnnotations<AstroRenderer>\n): { [K in keyof Omit<TModule, 'default'>]: any } {\n  // Merge project annotations with Astro renderer\n  const mergedProjectAnnotations: any = projectAnnotations ? {\n    ...projectAnnotations,\n    render: projectAnnotations.render || render\n  } : {\n    render\n  };\n  \n  return originalComposeStories(storiesImport as any, mergedProjectAnnotations as any) as { [K in keyof Omit<TModule, 'default'>]: any };\n}\n"],"mappings":";AAWA;AAAA,EACE,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,yBAAyB;AAAA,OACpB;AASP,IAAM,SAAS,CAAC,MAAY,YAAkB;AAC5C,QAAM,YAAY,SAAS;AAC3B,QAAM,WAAW,SAAS,YAAY;AACtC,QAAM,KAAK,SAAS,MAAM;AAG1B,QAAM,kBAA4B,CAAC;AAGnC,MAAI,YAAY,gBAAgB,SAAS,QAAQ,GAAG;AAClD,UAAM,IAAI,MAAM,aAAa,QAAQ,qEAAqE;AAAA,EAC5G;AAGA,MAAI,CAAC,WAAW;AACd,UAAM,IAAI,MAAM,0BAA0B,EAAE,iEAAiE;AAAA,EAC/G;AAGA,MAAI,OAAO,cAAc,cAAe,UAAkB,yBAAyB;AAEjF,WAAO;AAAA,EACT;AAGA,MAAI,OAAO,cAAc,YAAY;AACnC,QAAI,YAAY,CAAC,gBAAgB,SAAS,QAAQ,GAAG;AAEnD,aAAO;AAAA,IACT;AAGA,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR;AAAA,MAEF;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,IACA,UAAU,YAAY;AAAA,EACxB;AACF;AAqBO,SAAS,sBACd,oBAG6C;AAC7C,SAAO,8BAA6C,kBAAkB;AACxE;AA4BO,SAAS,aACd,OACA,sBACA,oBACA,aACA;AAEA,QAAM,2BAAgC,qBAAqB;AAAA,IACzD,GAAG;AAAA,IACH,QAAQ,mBAAmB,UAAU;AAAA,EACvC,IAAI;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AA0BO,SAAS,eACd,eACA,oBACgD;AAEhD,QAAM,2BAAgC,qBAAqB;AAAA,IACzD,GAAG;AAAA,IACH,QAAQ,mBAAmB,UAAU;AAAA,EACvC,IAAI;AAAA,IACF;AAAA,EACF;AAEA,SAAO,uBAAuB,eAAsB,wBAA+B;AACrF;","names":[]}