@analogjs/storybook-angular 3.0.0-alpha.29 → 3.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/storybook-angular",
-  "version": "3.0.0-alpha.29",
+  "version": "3.0.0-alpha.30",
   "description": "Storybook Integration for Angular & Vite",
   "type": "module",
   "keywords": [
@@ -36,7 +36,7 @@
   },
   "main": "./src/index.js",
   "dependencies": {
-    "@storybook/builder-vite": "^10.3.3"
+    "@storybook/builder-vite": "^10.3.5"
   },
   "peerDependencies": {
     "@storybook/angular": "^10.0.0",

package/src/index.d.ts

@@ -1,2 +1,3 @@
-export { type AngularOptions, type Parameters as AngularParameters, type AngularRenderer, type Decorator, type IStory, type Loader, type Meta, type Preview, type StoryContext, type StoryFn, type StoryObj, applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations } from "@storybook/angular";
+export { type AngularOptions, type Parameters as AngularParameters, type AngularRenderer, type Decorator, type IStory, type Loader, type Meta, type Preview, type StoryContext, type StoryFn, type StoryObj, applicationConfig, argsToTemplate, moduleMetadata, setProjectAnnotations } from "@storybook/angular";
+export { componentWrapperDecorator } from "./lib/component-wrapper-decorator";
 export { type FrameworkOptions, type StorybookConfig } from "./types";

package/src/index.js

@@ -1,2 +1,3 @@
-import { applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations } from "@storybook/angular";
+import { componentWrapperDecorator } from "./lib/component-wrapper-decorator.js";
+import { applicationConfig, argsToTemplate, moduleMetadata, setProjectAnnotations } from "@storybook/angular";
 export { applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata, setProjectAnnotations };

package/src/lib/component-wrapper-decorator.d.ts

@@ -0,0 +1,6 @@
+import { type Type } from "@angular/core";
+import { type AngularRenderer, type StoryContext } from "@storybook/angular";
+import type { DecoratorFunction } from "storybook/internal/types";
+type StoryProps = Record<string, unknown>;
+export declare function componentWrapperDecorator<TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: StoryProps | ((storyContext: StoryContext<TArgs>) => StoryProps)): DecoratorFunction<AngularRenderer, TArgs>;
+export {};

package/src/lib/component-wrapper-decorator.js

@@ -0,0 +1,66 @@
+import { argsToTemplate, componentWrapperDecorator } from "@storybook/angular";
+import { reflectComponentType } from "@angular/core";
+//#region packages/storybook-angular/src/lib/component-wrapper-decorator.ts
+var VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"command",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"keygen",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+function componentWrapperDecorator$1(element, props) {
+	const decorator = componentWrapperDecorator(element, props);
+	return (storyFn, storyContext) => decorator(() => ensureStoryTemplate(storyFn(), storyContext), storyContext);
+}
+function ensureStoryTemplate(story, storyContext) {
+	if (story.template || !storyContext.component) return story;
+	const component = reflectComponentType(storyContext.component);
+	if (!component) return story;
+	return {
+		...story,
+		template: createTemplate(component, story.props ?? storyContext.args),
+		userDefinedTemplate: false
+	};
+}
+function createTemplate(component, props) {
+	const selector = component.selector.split(",")[0]?.trim();
+	if (!selector) return "<ng-container *ngComponentOutlet=\"storyComponent\"></ng-container>";
+	return buildTemplate(selector, argsToTemplate(filterTemplateBindings(component, props)));
+}
+function filterTemplateBindings(component, props) {
+	if (!props || typeof props !== "object") return {};
+	const supportedBindings = new Set([...component.inputs.map((input) => input.templateName), ...component.outputs.map((output) => output.templateName)]);
+	return Object.fromEntries(Object.entries(props).filter(([key, value]) => {
+		return value !== void 0 && supportedBindings.has(key);
+	}));
+}
+function buildTemplate(selector, attributes) {
+	const tagName = selector.match(/^[A-Za-z][\w-]*/)?.[0] ?? "div";
+	const id = selector.match(/#([\w-]+)/)?.[1];
+	const classes = [...selector.matchAll(/\.([\w-]+)/g)].map((match) => match[1]);
+	const selectorAttributes = [...selector.matchAll(/\[([^\]]+)\]/g)].map((match) => match[1].trim());
+	const parts = [
+		id ? `id="${id}"` : "",
+		classes.length > 0 ? `class="${classes.join(" ")}"` : "",
+		...selectorAttributes,
+		attributes
+	].filter(Boolean);
+	const openingTag = parts.length > 0 ? `<${tagName} ${parts.join(" ")}>` : `<${tagName}>`;
+	if (VOID_ELEMENTS.has(tagName)) return openingTag.replace(/>$/, " />");
+	return `${openingTag}</${tagName}>`;
+}
+//#endregion
+export { componentWrapperDecorator$1 as componentWrapperDecorator };
+
+//# sourceMappingURL=component-wrapper-decorator.js.map

package/src/lib/component-wrapper-decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-wrapper-decorator.js","names":[],"sources":["../../../src/lib/component-wrapper-decorator.ts"],"sourcesContent":["import {\n  reflectComponentType,\n  type ComponentMirror,\n  type Type,\n} from '@angular/core';\nimport {\n  argsToTemplate,\n  componentWrapperDecorator as originalComponentWrapperDecorator,\n  type AngularRenderer,\n  type IStory,\n  type StoryContext,\n} from '@storybook/angular';\nimport type { DecoratorFunction } from 'storybook/internal/types';\n\ntype StoryProps = Record<string, unknown>;\n\nconst VOID_ELEMENTS = new Set([\n  'area',\n  'base',\n  'br',\n  'col',\n  'command',\n  'embed',\n  'hr',\n  'img',\n  'input',\n  'keygen',\n  'link',\n  'meta',\n  'param',\n  'source',\n  'track',\n  'wbr',\n]);\n\nexport function componentWrapperDecorator<TArgs = any>(\n  element: Type<unknown> | ((story: string) => string),\n  props?: StoryProps | ((storyContext: StoryContext<TArgs>) => StoryProps),\n): DecoratorFunction<AngularRenderer, TArgs> {\n  const decorator = originalComponentWrapperDecorator(element, props);\n\n  return (storyFn, storyContext) =>\n    decorator(() => ensureStoryTemplate(storyFn(), storyContext), storyContext);\n}\n\nfunction ensureStoryTemplate<TArgs>(\n  story: IStory,\n  storyContext: StoryContext<TArgs>,\n): IStory {\n  if (story.template || !storyContext.component) {\n    return story;\n  }\n\n  const component = reflectComponentType(\n    storyContext.component as Type<unknown>,\n  );\n\n  if (!component) {\n    return story;\n  }\n\n  return {\n    ...story,\n    template: createTemplate(component, story.props ?? storyContext.args),\n    userDefinedTemplate: false,\n  };\n}\n\nfunction createTemplate(\n  component: ComponentMirror<unknown>,\n  props: unknown,\n): string {\n  const selector = component.selector.split(',')[0]?.trim();\n  if (!selector) {\n    return '<ng-container *ngComponentOutlet=\"storyComponent\"></ng-container>';\n  }\n\n  const bindings = filterTemplateBindings(component, props);\n  const attributes = argsToTemplate(bindings);\n\n  return buildTemplate(selector, attributes);\n}\n\nfunction filterTemplateBindings(\n  component: ComponentMirror<unknown>,\n  props: unknown,\n): StoryProps {\n  if (!props || typeof props !== 'object') {\n    return {};\n  }\n\n  const supportedBindings = new Set([\n    ...component.inputs.map((input) => input.templateName),\n    ...component.outputs.map((output) => output.templateName),\n  ]);\n\n  return Object.fromEntries(\n    Object.entries(props).filter(([key, value]) => {\n      return value !== undefined && supportedBindings.has(key);\n    }),\n  );\n}\n\nfunction buildTemplate(selector: string, attributes: string): string {\n  const elementMatch = selector.match(/^[A-Za-z][\\w-]*/);\n  const tagName = elementMatch?.[0] ?? 'div';\n  const id = selector.match(/#([\\w-]+)/)?.[1];\n  const classes = [...selector.matchAll(/\\.([\\w-]+)/g)].map(\n    (match) => match[1],\n  );\n  const selectorAttributes = [...selector.matchAll(/\\[([^\\]]+)\\]/g)].map(\n    (match) => match[1].trim(),\n  );\n  const parts = [\n    id ? `id=\"${id}\"` : '',\n    classes.length > 0 ? `class=\"${classes.join(' ')}\"` : '',\n    ...selectorAttributes,\n    attributes,\n  ].filter(Boolean);\n  const openingTag =\n    parts.length > 0 ? `<${tagName} ${parts.join(' ')}>` : `<${tagName}>`;\n\n  if (VOID_ELEMENTS.has(tagName)) {\n    return openingTag.replace(/>$/, ' />');\n  }\n\n  return `${openingTag}</${tagName}>`;\n}\n"],"mappings":";;;AAgBA,IAAM,gBAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,SAAgB,4BACd,SACA,OAC2C;CAC3C,MAAM,YAAY,0BAAkC,SAAS,MAAM;AAEnE,SAAQ,SAAS,iBACf,gBAAgB,oBAAoB,SAAS,EAAE,aAAa,EAAE,aAAa;;AAG/E,SAAS,oBACP,OACA,cACQ;AACR,KAAI,MAAM,YAAY,CAAC,aAAa,UAClC,QAAO;CAGT,MAAM,YAAY,qBAChB,aAAa,UACd;AAED,KAAI,CAAC,UACH,QAAO;AAGT,QAAO;EACL,GAAG;EACH,UAAU,eAAe,WAAW,MAAM,SAAS,aAAa,KAAK;EACrE,qBAAqB;EACtB;;AAGH,SAAS,eACP,WACA,OACQ;CACR,MAAM,WAAW,UAAU,SAAS,MAAM,IAAI,CAAC,IAAI,MAAM;AACzD,KAAI,CAAC,SACH,QAAO;AAMT,QAAO,cAAc,UAFF,eADF,uBAAuB,WAAW,MAAM,CACd,CAED;;AAG5C,SAAS,uBACP,WACA,OACY;AACZ,KAAI,CAAC,SAAS,OAAO,UAAU,SAC7B,QAAO,EAAE;CAGX,MAAM,oBAAoB,IAAI,IAAI,CAChC,GAAG,UAAU,OAAO,KAAK,UAAU,MAAM,aAAa,EACtD,GAAG,UAAU,QAAQ,KAAK,WAAW,OAAO,aAAa,CAC1D,CAAC;AAEF,QAAO,OAAO,YACZ,OAAO,QAAQ,MAAM,CAAC,QAAQ,CAAC,KAAK,WAAW;AAC7C,SAAO,UAAU,KAAA,KAAa,kBAAkB,IAAI,IAAI;GACxD,CACH;;AAGH,SAAS,cAAc,UAAkB,YAA4B;CAEnE,MAAM,UADe,SAAS,MAAM,kBAAkB,GACvB,MAAM;CACrC,MAAM,KAAK,SAAS,MAAM,YAAY,GAAG;CACzC,MAAM,UAAU,CAAC,GAAG,SAAS,SAAS,cAAc,CAAC,CAAC,KACnD,UAAU,MAAM,GAClB;CACD,MAAM,qBAAqB,CAAC,GAAG,SAAS,SAAS,gBAAgB,CAAC,CAAC,KAChE,UAAU,MAAM,GAAG,MAAM,CAC3B;CACD,MAAM,QAAQ;EACZ,KAAK,OAAO,GAAG,KAAK;EACpB,QAAQ,SAAS,IAAI,UAAU,QAAQ,KAAK,IAAI,CAAC,KAAK;EACtD,GAAG;EACH;EACD,CAAC,OAAO,QAAQ;CACjB,MAAM,aACJ,MAAM,SAAS,IAAI,IAAI,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC,KAAK,IAAI,QAAQ;AAErE,KAAI,cAAc,IAAI,QAAQ,CAC5B,QAAO,WAAW,QAAQ,MAAM,MAAM;AAGxC,QAAO,GAAG,WAAW,IAAI,QAAQ"}