@pyreon/storybook 0.12.9 → 0.12.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
5386
5386
  </script>
5387
5387
  <script>
5388
5388
  /*<!--*/
5389
- const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"92260a4b-1","name":"render-impl.tsx"},{"uid":"92260a4b-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"92260a4b-1":{"renderedLength":1280,"gzipLength":673,"brotliLength":0,"metaUid":"92260a4b-0"},"92260a4b-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"92260a4b-2"}},"nodeMetas":{"92260a4b-0":{"id":"/src/render-impl.tsx","moduleParts":{"index.js":"92260a4b-1"},"imported":[{"uid":"92260a4b-7"},{"uid":"92260a4b-8"}],"importedBy":[{"uid":"92260a4b-4"}]},"92260a4b-2":{"id":"/src/index.ts","moduleParts":{"index.js":"92260a4b-3"},"imported":[{"uid":"92260a4b-4"},{"uid":"92260a4b-5"},{"uid":"92260a4b-6"},{"uid":"92260a4b-7"}],"importedBy":[],"isEntry":true},"92260a4b-4":{"id":"/src/render.ts","moduleParts":{},"imported":[{"uid":"92260a4b-0"}],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-5":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-6":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"}]},"92260a4b-7":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-2"},{"uid":"92260a4b-0"}]},"92260a4b-8":{"id":"@pyreon/core/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"92260a4b-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
5389
+ const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"home/runner/work/pyreon/pyreon/packages/core/core/lib/jsx-runtime.js","uid":"85ab537a-1"},{"name":"src","children":[{"uid":"85ab537a-3","name":"render-impl.tsx"},{"uid":"85ab537a-5","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"85ab537a-1":{"renderedLength":1587,"gzipLength":802,"brotliLength":0,"metaUid":"85ab537a-0"},"85ab537a-3":{"renderedLength":1280,"gzipLength":673,"brotliLength":0,"metaUid":"85ab537a-2"},"85ab537a-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"85ab537a-4"}},"nodeMetas":{"85ab537a-0":{"id":"/home/runner/work/pyreon/pyreon/packages/core/core/lib/jsx-runtime.js","moduleParts":{"index.js":"85ab537a-1"},"imported":[],"importedBy":[{"uid":"85ab537a-2"}]},"85ab537a-2":{"id":"/src/render-impl.tsx","moduleParts":{"index.js":"85ab537a-3"},"imported":[{"uid":"85ab537a-9"},{"uid":"85ab537a-0"}],"importedBy":[{"uid":"85ab537a-6"}]},"85ab537a-4":{"id":"/src/index.ts","moduleParts":{"index.js":"85ab537a-5"},"imported":[{"uid":"85ab537a-6"},{"uid":"85ab537a-7"},{"uid":"85ab537a-8"},{"uid":"85ab537a-9"}],"importedBy":[],"isEntry":true},"85ab537a-6":{"id":"/src/render.ts","moduleParts":{},"imported":[{"uid":"85ab537a-2"}],"importedBy":[{"uid":"85ab537a-4"}]},"85ab537a-7":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"85ab537a-4"}]},"85ab537a-8":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"85ab537a-4"}]},"85ab537a-9":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"85ab537a-4"},{"uid":"85ab537a-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
5390
5390
 
5391
5391
  const run = () => {
5392
5392
  const width = window.innerWidth;
@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
5386
5386
  </script>
5387
5387
  <script>
5388
5388
  /*<!--*/
5389
- const data = {"version":2,"tree":{"name":"root","children":[{"name":"preview.js","children":[{"name":"src","children":[{"uid":"08ed9fb2-1","name":"render-impl.tsx"},{"uid":"08ed9fb2-3","name":"preview-impl.tsx"},{"uid":"08ed9fb2-5","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"08ed9fb2-1":{"renderedLength":1100,"gzipLength":595,"brotliLength":0,"metaUid":"08ed9fb2-0"},"08ed9fb2-3":{"renderedLength":452,"gzipLength":313,"brotliLength":0,"metaUid":"08ed9fb2-2"},"08ed9fb2-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"08ed9fb2-4"}},"nodeMetas":{"08ed9fb2-0":{"id":"/src/render-impl.tsx","moduleParts":{"preview.js":"08ed9fb2-1"},"imported":[{"uid":"08ed9fb2-7"},{"uid":"08ed9fb2-6"}],"importedBy":[{"uid":"08ed9fb2-2"}]},"08ed9fb2-2":{"id":"/src/preview-impl.tsx","moduleParts":{"preview.js":"08ed9fb2-3"},"imported":[{"uid":"08ed9fb2-0"},{"uid":"08ed9fb2-6"}],"importedBy":[{"uid":"08ed9fb2-4"}]},"08ed9fb2-4":{"id":"/src/preview.ts","moduleParts":{"preview.js":"08ed9fb2-5"},"imported":[{"uid":"08ed9fb2-2"}],"importedBy":[],"isEntry":true},"08ed9fb2-6":{"id":"@pyreon/core/jsx-runtime","moduleParts":{},"imported":[],"importedBy":[{"uid":"08ed9fb2-2"},{"uid":"08ed9fb2-0"}]},"08ed9fb2-7":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"08ed9fb2-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
5389
+ const data = {"version":2,"tree":{"name":"root","children":[{"name":"preview.js","children":[{"name":"home/runner/work/pyreon/pyreon/packages/core/core/lib/jsx-runtime.js","uid":"9241ddad-1"},{"name":"src","children":[{"uid":"9241ddad-3","name":"render-impl.tsx"},{"uid":"9241ddad-5","name":"preview-impl.tsx"},{"uid":"9241ddad-7","name":"preview.ts"}]}]}],"isRoot":true},"nodeParts":{"9241ddad-1":{"renderedLength":1581,"gzipLength":798,"brotliLength":0,"metaUid":"9241ddad-0"},"9241ddad-3":{"renderedLength":1100,"gzipLength":595,"brotliLength":0,"metaUid":"9241ddad-2"},"9241ddad-5":{"renderedLength":452,"gzipLength":313,"brotliLength":0,"metaUid":"9241ddad-4"},"9241ddad-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"9241ddad-6"}},"nodeMetas":{"9241ddad-0":{"id":"/home/runner/work/pyreon/pyreon/packages/core/core/lib/jsx-runtime.js","moduleParts":{"preview.js":"9241ddad-1"},"imported":[],"importedBy":[{"uid":"9241ddad-4"},{"uid":"9241ddad-2"}]},"9241ddad-2":{"id":"/src/render-impl.tsx","moduleParts":{"preview.js":"9241ddad-3"},"imported":[{"uid":"9241ddad-8"},{"uid":"9241ddad-0"}],"importedBy":[{"uid":"9241ddad-4"}]},"9241ddad-4":{"id":"/src/preview-impl.tsx","moduleParts":{"preview.js":"9241ddad-5"},"imported":[{"uid":"9241ddad-2"},{"uid":"9241ddad-0"}],"importedBy":[{"uid":"9241ddad-6"}]},"9241ddad-6":{"id":"/src/preview.ts","moduleParts":{"preview.js":"9241ddad-7"},"imported":[{"uid":"9241ddad-4"}],"importedBy":[],"isEntry":true},"9241ddad-8":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"9241ddad-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
5390
5390
 
5391
5391
  const run = () => {
5392
5392
  const width = window.innerWidth;
package/lib/index.js CHANGED
@@ -1,8 +1,56 @@
1
1
  import { mount, mount as mount$1 } from "@pyreon/runtime-dom";
2
- import { jsx } from "@pyreon/core/jsx-runtime";
3
2
  import { Fragment, h } from "@pyreon/core";
4
3
  import { computed, effect, signal } from "@pyreon/reactivity";
5
4
 
5
+ //#region ../../core/core/lib/jsx-runtime.js
6
+ /**
7
+ * Hyperscript function — the compiled output of JSX.
8
+ * `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
9
+ *
10
+ * Generic on P so TypeScript validates props match the component's signature
11
+ * at the call site, then stores the result in the loosely-typed VNode.
12
+ */
13
+ /** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
14
+ const EMPTY_PROPS = {};
15
+ function h$1(type, props, ...children) {
16
+ return {
17
+ type,
18
+ props: props ?? EMPTY_PROPS,
19
+ children: normalizeChildren(children),
20
+ key: props?.key ?? null
21
+ };
22
+ }
23
+ function normalizeChildren(children) {
24
+ for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
25
+ return children;
26
+ }
27
+ function flattenChildren(children) {
28
+ const result = [];
29
+ for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
30
+ else result.push(child);
31
+ return result;
32
+ }
33
+ /**
34
+ * JSX automatic runtime.
35
+ *
36
+ * When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
37
+ * rewrites JSX to imports from this file automatically:
38
+ * <div class="x" /> → jsx("div", { class: "x" })
39
+ */
40
+ function jsx(type, props, key) {
41
+ const { children, ...rest } = props;
42
+ const propsWithKey = key != null ? {
43
+ ...rest,
44
+ key
45
+ } : rest;
46
+ if (typeof type === "function") return h$1(type, children !== void 0 ? {
47
+ ...propsWithKey,
48
+ children
49
+ } : propsWithKey);
50
+ return h$1(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
51
+ }
52
+
53
+ //#endregion
6
54
  //#region src/render-impl.tsx
7
55
  /**
8
56
  * State tracked per canvas element so we can clean up between renders.
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["mount"],"sources":["../src/render-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n {\n storyFn,\n showMain,\n showError,\n }: {\n storyFn: () => VNodeChild\n storyContext: {\n component?: ComponentFn<any>\n args: Record<string, unknown>\n [key: string]: unknown\n }\n showMain: () => void\n showError: (error: { title: string; description: string }) => void\n forceRemount: boolean\n },\n canvasElement: HTMLElement,\n): void {\n // Always clean up the previous render\n const prevUnmount = canvasState.get(canvasElement)\n if (prevUnmount) {\n prevUnmount()\n canvasState.delete(canvasElement)\n }\n\n try {\n const element = storyFn()\n const unmount = mount(element, canvasElement)\n canvasState.set(canvasElement, unmount)\n showMain()\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err))\n showError({\n title: `Error rendering story`,\n description: error.message,\n })\n }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n component: ComponentFn<any>,\n args: Record<string, unknown>,\n): VNodeChild {\n const Component = component\n return <Component {...args} />\n}\n"],"mappings":";;;;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAUA,QADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;AAON,SAAgB,cACd,WACA,MACY;AAEZ,QAAO,oBADW,WACX,EAAW,GAAI,MAAQ"}
1
+ {"version":3,"file":"index.js","names":["h","mount"],"sources":["../../../core/core/lib/jsx-runtime.js","../src/render-impl.tsx"],"sourcesContent":["//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n* <div class=\"x\" /> → jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n {\n storyFn,\n showMain,\n showError,\n }: {\n storyFn: () => VNodeChild\n storyContext: {\n component?: ComponentFn<any>\n args: Record<string, unknown>\n [key: string]: unknown\n }\n showMain: () => void\n showError: (error: { title: string; description: string }) => void\n forceRemount: boolean\n },\n canvasElement: HTMLElement,\n): void {\n // Always clean up the previous render\n const prevUnmount = canvasState.get(canvasElement)\n if (prevUnmount) {\n prevUnmount()\n canvasState.delete(canvasElement)\n }\n\n try {\n const element = storyFn()\n const unmount = mount(element, canvasElement)\n canvasState.set(canvasElement, unmount)\n showMain()\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err))\n showError({\n title: `Error rendering story`,\n description: error.message,\n })\n }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n component: ComponentFn<any>,\n args: Record<string, unknown>,\n): VNodeChild {\n const Component = component\n return <Component {...args} />\n}\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,cAAc,EAAE;AACtB,SAASA,IAAE,MAAM,OAAO,GAAG,UAAU;AACpC,QAAO;EACN;EACA,OAAO,SAAS;EAChB,UAAU,kBAAkB,SAAS;EACrC,KAAK,OAAO,OAAO;EACnB;;AAEF,SAAS,kBAAkB,UAAU;AACpC,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,IAAK,KAAI,MAAM,QAAQ,SAAS,GAAG,CAAE,QAAO,gBAAgB,SAAS;AAC1G,QAAO;;AAER,SAAS,gBAAgB,UAAU;CAClC,MAAM,SAAS,EAAE;AACjB,MAAK,MAAM,SAAS,SAAU,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,KAAK,GAAG,gBAAgB,MAAM,CAAC;KACzF,QAAO,KAAK,MAAM;AACvB,QAAO;;;;;;;;;AAYR,SAAS,IAAI,MAAM,OAAO,KAAK;CAC9B,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAe,OAAO,OAAO;EAClC,GAAG;EACH;EACA,GAAG;AACJ,KAAI,OAAO,SAAS,WAAY,QAAOA,IAAE,MAAM,aAAa,KAAK,IAAI;EACpE,GAAG;EACH;EACA,GAAG,aAAa;AACjB,QAAOA,IAAE,MAAM,cAAc,GAAG,aAAa,KAAK,IAAI,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC;;;;;;;;AC5C5G,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAUC,QADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;AAON,SAAgB,cACd,WACA,MACY;AAEZ,QAAO,oBADW,WACX,EAAW,GAAI,MAAQ"}
package/lib/preview.js CHANGED
@@ -1,6 +1,54 @@
1
1
  import { mount } from "@pyreon/runtime-dom";
2
- import { jsx } from "@pyreon/core/jsx-runtime";
3
2
 
3
+ //#region ../../core/core/lib/jsx-runtime.js
4
+ /**
5
+ * Hyperscript function — the compiled output of JSX.
6
+ * `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
7
+ *
8
+ * Generic on P so TypeScript validates props match the component's signature
9
+ * at the call site, then stores the result in the loosely-typed VNode.
10
+ */
11
+ /** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
12
+ const EMPTY_PROPS = {};
13
+ function h(type, props, ...children) {
14
+ return {
15
+ type,
16
+ props: props ?? EMPTY_PROPS,
17
+ children: normalizeChildren(children),
18
+ key: props?.key ?? null
19
+ };
20
+ }
21
+ function normalizeChildren(children) {
22
+ for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
23
+ return children;
24
+ }
25
+ function flattenChildren(children) {
26
+ const result = [];
27
+ for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
28
+ else result.push(child);
29
+ return result;
30
+ }
31
+ /**
32
+ * JSX automatic runtime.
33
+ *
34
+ * When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
35
+ * rewrites JSX to imports from this file automatically:
36
+ * <div class="x" /> → jsx("div", { class: "x" })
37
+ */
38
+ function jsx(type, props, key) {
39
+ const { children, ...rest } = props;
40
+ const propsWithKey = key != null ? {
41
+ ...rest,
42
+ key
43
+ } : rest;
44
+ if (typeof type === "function") return h(type, children !== void 0 ? {
45
+ ...propsWithKey,
46
+ children
47
+ } : propsWithKey);
48
+ return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
49
+ }
50
+
51
+ //#endregion
4
52
  //#region src/render-impl.tsx
5
53
  /**
6
54
  * State tracked per canvas element so we can clean up between renders.
@@ -1 +1 @@
1
- {"version":3,"file":"preview.js","names":[],"sources":["../src/render-impl.tsx","../src/preview-impl.tsx"],"sourcesContent":["import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n {\n storyFn,\n showMain,\n showError,\n }: {\n storyFn: () => VNodeChild\n storyContext: {\n component?: ComponentFn<any>\n args: Record<string, unknown>\n [key: string]: unknown\n }\n showMain: () => void\n showError: (error: { title: string; description: string }) => void\n forceRemount: boolean\n },\n canvasElement: HTMLElement,\n): void {\n // Always clean up the previous render\n const prevUnmount = canvasState.get(canvasElement)\n if (prevUnmount) {\n prevUnmount()\n canvasState.delete(canvasElement)\n }\n\n try {\n const element = storyFn()\n const unmount = mount(element, canvasElement)\n canvasState.set(canvasElement, unmount)\n showMain()\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err))\n showError({\n title: `Error rendering story`,\n description: error.message,\n })\n }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n component: ComponentFn<any>,\n args: Record<string, unknown>,\n): VNodeChild {\n const Component = component\n return <Component {...args} />\n}\n","import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { renderToCanvas } from './render-impl'\n\n/**\n * Preview entry — Storybook loads this in the preview iframe.\n *\n * Exports the render function and default decorators/parameters\n * that apply to all stories using this renderer.\n */\n\nexport { renderToCanvas }\n\n/**\n * Default render function — if the story CSF has a `component` but no\n * explicit `render`, this is used to create the VNode.\n */\nexport function render<TArgs extends Record<string, unknown>>(\n args: TArgs,\n context: { component?: ComponentFn<any> },\n): VNodeChild {\n const Component = context.component\n if (!Component) {\n throw new Error(\n '[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.',\n )\n }\n return <Component {...args} />\n}\n"],"mappings":";;;;;;;AAMA,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAU,MADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;;;;ACvCN,SAAgB,OACd,MACA,SACY;CACZ,MAAM,YAAY,QAAQ;AAC1B,KAAI,CAAC,UACH,OAAM,IAAI,MACR,iHACD;AAEH,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAQ"}
1
+ {"version":3,"file":"preview.js","names":[],"sources":["../../../core/core/lib/jsx-runtime.js","../src/render-impl.tsx","../src/preview-impl.tsx"],"sourcesContent":["//#region src/h.ts\n/** Marker for fragment nodes — renders children without a wrapper element */\nconst Fragment = Symbol(\"Pyreon.Fragment\");\n/**\n* Hyperscript function — the compiled output of JSX.\n* `<div class=\"x\">hello</div>` → `h(\"div\", { class: \"x\" }, \"hello\")`\n*\n* Generic on P so TypeScript validates props match the component's signature\n* at the call site, then stores the result in the loosely-typed VNode.\n*/\n/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */\nconst EMPTY_PROPS = {};\nfunction h(type, props, ...children) {\n\treturn {\n\t\ttype,\n\t\tprops: props ?? EMPTY_PROPS,\n\t\tchildren: normalizeChildren(children),\n\t\tkey: props?.key ?? null\n\t};\n}\nfunction normalizeChildren(children) {\n\tfor (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);\n\treturn children;\n}\nfunction flattenChildren(children) {\n\tconst result = [];\n\tfor (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));\n\telse result.push(child);\n\treturn result;\n}\n\n//#endregion\n//#region src/jsx-runtime.ts\n/**\n* JSX automatic runtime.\n*\n* When tsconfig has `\"jsxImportSource\": \"@pyreon/core\"`, the TS/bundler compiler\n* rewrites JSX to imports from this file automatically:\n* <div class=\"x\" /> → jsx(\"div\", { class: \"x\" })\n*/\nfunction jsx(type, props, key) {\n\tconst { children, ...rest } = props;\n\tconst propsWithKey = key != null ? {\n\t\t...rest,\n\t\tkey\n\t} : rest;\n\tif (typeof type === \"function\") return h(type, children !== void 0 ? {\n\t\t...propsWithKey,\n\t\tchildren\n\t} : propsWithKey);\n\treturn h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);\n}\nconst jsxs = jsx;\n\n//#endregion\nexport { Fragment, jsx, jsxs };\n//# sourceMappingURL=jsx-runtime.js.map","import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { mount } from '@pyreon/runtime-dom'\n\n/**\n * State tracked per canvas element so we can clean up between renders.\n */\nconst canvasState = new WeakMap<HTMLElement, () => void>()\n\n/**\n * Render a Pyreon story into a Storybook canvas element.\n *\n * This is the core integration point — Storybook calls this function\n * every time a story needs to be displayed or re-rendered (e.g. when\n * the user changes args via the Controls panel).\n *\n * It handles:\n * 1. Cleaning up the previous mount (disposing effects, removing DOM)\n * 2. Building the VNode from the story function or component + args\n * 3. Mounting the new VNode into the canvas\n */\nexport function renderToCanvas(\n {\n storyFn,\n showMain,\n showError,\n }: {\n storyFn: () => VNodeChild\n storyContext: {\n component?: ComponentFn<any>\n args: Record<string, unknown>\n [key: string]: unknown\n }\n showMain: () => void\n showError: (error: { title: string; description: string }) => void\n forceRemount: boolean\n },\n canvasElement: HTMLElement,\n): void {\n // Always clean up the previous render\n const prevUnmount = canvasState.get(canvasElement)\n if (prevUnmount) {\n prevUnmount()\n canvasState.delete(canvasElement)\n }\n\n try {\n const element = storyFn()\n const unmount = mount(element, canvasElement)\n canvasState.set(canvasElement, unmount)\n showMain()\n } catch (err) {\n const error = err instanceof Error ? err : new Error(String(err))\n showError({\n title: `Error rendering story`,\n description: error.message,\n })\n }\n}\n\n/**\n * Default render implementation used when no custom `render` is provided.\n */\nexport function defaultRender(\n component: ComponentFn<any>,\n args: Record<string, unknown>,\n): VNodeChild {\n const Component = component\n return <Component {...args} />\n}\n","import type { ComponentFn, VNodeChild } from '@pyreon/core'\nimport { renderToCanvas } from './render-impl'\n\n/**\n * Preview entry — Storybook loads this in the preview iframe.\n *\n * Exports the render function and default decorators/parameters\n * that apply to all stories using this renderer.\n */\n\nexport { renderToCanvas }\n\n/**\n * Default render function — if the story CSF has a `component` but no\n * explicit `render`, this is used to create the VNode.\n */\nexport function render<TArgs extends Record<string, unknown>>(\n args: TArgs,\n context: { component?: ComponentFn<any> },\n): VNodeChild {\n const Component = context.component\n if (!Component) {\n throw new Error(\n '[@pyreon/storybook] No component provided. Either set `component` in your meta or provide a `render` function.',\n )\n }\n return <Component {...args} />\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,cAAc,EAAE;AACtB,SAAS,EAAE,MAAM,OAAO,GAAG,UAAU;AACpC,QAAO;EACN;EACA,OAAO,SAAS;EAChB,UAAU,kBAAkB,SAAS;EACrC,KAAK,OAAO,OAAO;EACnB;;AAEF,SAAS,kBAAkB,UAAU;AACpC,MAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,IAAK,KAAI,MAAM,QAAQ,SAAS,GAAG,CAAE,QAAO,gBAAgB,SAAS;AAC1G,QAAO;;AAER,SAAS,gBAAgB,UAAU;CAClC,MAAM,SAAS,EAAE;AACjB,MAAK,MAAM,SAAS,SAAU,KAAI,MAAM,QAAQ,MAAM,CAAE,QAAO,KAAK,GAAG,gBAAgB,MAAM,CAAC;KACzF,QAAO,KAAK,MAAM;AACvB,QAAO;;;;;;;;;AAYR,SAAS,IAAI,MAAM,OAAO,KAAK;CAC9B,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAe,OAAO,OAAO;EAClC,GAAG;EACH;EACA,GAAG;AACJ,KAAI,OAAO,SAAS,WAAY,QAAO,EAAE,MAAM,aAAa,KAAK,IAAI;EACpE,GAAG;EACH;EACA,GAAG,aAAa;AACjB,QAAO,EAAE,MAAM,cAAc,GAAG,aAAa,KAAK,IAAI,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC;;;;;;;;AC5C5G,MAAM,8BAAc,IAAI,SAAkC;;;;;;;;;;;;;AAc1D,SAAgB,eACd,EACE,SACA,UACA,aAYF,eACM;CAEN,MAAM,cAAc,YAAY,IAAI,cAAc;AAClD,KAAI,aAAa;AACf,eAAa;AACb,cAAY,OAAO,cAAc;;AAGnC,KAAI;EAEF,MAAM,UAAU,MADA,SAAS,EACM,cAAc;AAC7C,cAAY,IAAI,eAAe,QAAQ;AACvC,YAAU;UACH,KAAK;AAEZ,YAAU;GACR,OAAO;GACP,cAHY,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,EAG5C;GACpB,CAAC;;;;;;;;;;ACvCN,SAAgB,OACd,MACA,SACY;CACZ,MAAM,YAAY,QAAQ;AAC1B,KAAI,CAAC,UACH,OAAM,IAAI,MACR,iHACD;AAEH,QAAO,oBAAC,WAAD,EAAW,GAAI,MAAQ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pyreon/storybook",
3
- "version": "0.12.9",
3
+ "version": "0.12.11",
4
4
  "description": "Storybook renderer for Pyreon — mount, render, and interact with Pyreon components in Storybook",
5
5
  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/storybook#readme",
6
6
  "bugs": {
@@ -52,9 +52,9 @@
52
52
  "lint": "oxlint ."
53
53
  },
54
54
  "peerDependencies": {
55
- "@pyreon/core": "^0.12.9",
56
- "@pyreon/reactivity": "^0.12.9",
57
- "@pyreon/runtime-dom": "^0.12.9",
55
+ "@pyreon/core": "^0.12.11",
56
+ "@pyreon/reactivity": "^0.12.11",
57
+ "@pyreon/runtime-dom": "^0.12.11",
58
58
  "storybook": ">=8.0.0"
59
59
  }
60
60
  }