@gyral/core 0.3.0 → 0.3.1

package/dist/view/render/raw.js.map

@@ -1 +1 @@
-{"version":3,"file":"raw.js","sourceRoot":"","sources":["../../../src/view/render/raw.ts"],"names":[],"mappings":"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","sourcesContent":["// `raw(html)` (view/02-bindings.md \"`raw(html)`\"): trusted markup parsed in a child hole, kept\n// as a node range after a start anchor and re-parsed only when the string changes. Its result\n// carries `commitRaw`, so apps that never call `raw` don't bundle this module.\nimport { DEV } from '#view-dev';\nimport { EMPTY, RAW, type ChildPart } from './child-part.js';\nimport { removeRange } from './nodes.js';\nimport { report } from './seen.js';\nimport { MARKUP, type RawResult } from './values.js';\nimport { warnRaw } from './warn.js';\n\n/** Parsed `raw()` markup: the start anchor, the last node, and the string. */\nexport class RawRange {\n  constructor(\n    readonly start: Comment,\n    public end: Node,\n    public html: string,\n  ) {}\n\n  first(): Node {\n    return this.start;\n  }\n\n  last(): Node {\n    return this.end;\n  }\n\n  remove(): void {\n    removeRange(this.start, this.end);\n  }\n}\n\nlet parser: HTMLTemplateElement | undefined;\n\n/** `html` parsed by a <template> (its content is reused: read it before the next call). */\nexport function parse(html: string): DocumentFragment {\n  parser ??= document.createElement('template');\n  parser.innerHTML = html;\n  return parser.content;\n}\n\n/** Commits `raw()` markup into `part`. */\nfunction commitRaw(part: ChildPart, html: string): void {\n  if (DEV) warnRaw();\n  report({ html });\n  if (part.kind === RAW) {\n    const range = part.content as RawRange;\n    if (range.html === html) return;\n    if (range.end !== range.start) removeRange(range.start.nextSibling as Node, range.end);\n    const frag = parse(html);\n    range.end = frag.lastChild ?? range.start;\n    range.html = html;\n    range.start.after(frag);\n    return;\n  }\n  if (part.kind !== EMPTY) part.clear();\n  const start = document.createComment('');\n  const frag = parse(html);\n  const end = frag.lastChild ?? start;\n  frag.prepend(start);\n  part.parent().insertBefore(frag, part.end());\n  part.kind = RAW;\n  part.content = new RawRange(start, end, html);\n}\n\n/**\n * Trusted markup from your own code (Markdown output, JSON-LD), parsed in a child hole and\n * re-parsed only when the string changes. Never pass user input.\n */\nexport function raw(html: string): RawResult {\n  return { [MARKUP]: commitRaw, html };\n}\n"]}
+{"version":3,"file":"raw.js","sourceRoot":"","sources":["../../../src/view/render/raw.ts"],"names":[],"mappings":"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","sourcesContent":["// `raw(html)` (view/02-bindings.md \"`raw(html)`\"): trusted markup parsed in a child hole, kept\n// as a node range after a start anchor and re-parsed only when the string changes. Its result\n// carries `commitRaw`, so apps that never call `raw` don't bundle this module.\nimport { DEV } from '#view-dev';\nimport { EMPTY, RAW, type ChildPart } from './child-part.js';\nimport { removeRange } from './nodes.js';\nimport { trustedHTML } from '../trusted-html.js';\nimport { report } from './seen.js';\nimport { MARKUP, type RawResult } from './values.js';\nimport { warnRaw } from './warn.js';\n\n/** Parsed `raw()` markup: the start anchor, the last node, and the string. */\nexport class RawRange {\n  constructor(\n    readonly start: Comment,\n    public end: Node,\n    public html: string,\n  ) {}\n\n  first(): Node {\n    return this.start;\n  }\n\n  last(): Node {\n    return this.end;\n  }\n\n  remove(): void {\n    removeRange(this.start, this.end);\n  }\n}\n\nlet parser: HTMLTemplateElement | undefined;\n\n/**\n * `html` parsed by a <template> through the `gyral` Trusted Types policy (its content is reused:\n * read it before the next call).\n */\nexport function parse(html: string): DocumentFragment {\n  parser ??= document.createElement('template');\n  parser.innerHTML = trustedHTML(html);\n  return parser.content;\n}\n\n/** Commits `raw()` markup into `part`. */\nfunction commitRaw(part: ChildPart, html: string): void {\n  if (DEV) warnRaw();\n  report({ html });\n  if (part.kind === RAW) {\n    const range = part.content as RawRange;\n    if (range.html === html) return;\n    if (range.end !== range.start) removeRange(range.start.nextSibling as Node, range.end);\n    const frag = parse(html);\n    range.end = frag.lastChild ?? range.start;\n    range.html = html;\n    range.start.after(frag);\n    return;\n  }\n  if (part.kind !== EMPTY) part.clear();\n  const start = document.createComment('');\n  const frag = parse(html);\n  const end = frag.lastChild ?? start;\n  frag.prepend(start);\n  part.parent().insertBefore(frag, part.end());\n  part.kind = RAW;\n  part.content = new RawRange(start, end, html);\n}\n\n/**\n * Trusted markup from your own code (Markdown output, JSON-LD), parsed in a child hole and\n * re-parsed only when the string changes. Never pass user input.\n */\nexport function raw(html: string): RawResult {\n  return { [MARKUP]: commitRaw, html };\n}\n"]}

package/dist/view/render/render.d.ts

@@ -1,7 +1,10 @@
 import { ChildPart } from './child-part.js';
 import { type SeenMarkup } from './seen.js';
 import type { ChildValue } from './values.js';
-/** Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it. */
+/**
+ * Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it, and
+ * element hooks deferred to `flushHooks` (after each pass) and the end of the flush.
+ */
 export declare function renderBatch(fn: () => void): void;
 /**
  * Renders `value` into `root`, updating what an earlier call rendered there. `seen` is told

package/dist/view/render/render.js

@@ -1,30 +1,35 @@
 // `render(value, root)`: the client renderer's entry point (view/02-bindings.md "Commit order").
 // The root's child part is cached per root, so later calls update in place. Synchronous: when
-// it returns, the DOM is committed and every element hook's `client` call has run. The
-// scheduler (view/04-scheduler.md) calls it once per dirty host, inside `renderBatch`, so the
-// list dev check's budget (03) is per flush; a call outside a batch gets a budget of its own.
+// it returns, the DOM is committed, and outside a flush every element hook's `client` call has
+// run. The scheduler (view/04-scheduler.md) calls it once per dirty host, inside `renderBatch`,
+// so the list dev check's budget (03) is per flush and hooks run once every host has rendered,
+// children first (hooks.ts); a call outside a batch gets a budget and a hook run of its own.
 // `hydrate(value, root)` (hydrate.ts) makes the same root part from server DOM instead (07).
 import { DEV } from '#view-dev';
 import { ChildPart } from './child-part.js';
 import { resetRowChecks } from './dev-check.js';
-import { dropHooks, hookMark, runHooks } from './hooks.js';
+import { dropHooks, endHooks, hookMark, runHooks, startHooks } from './hooks.js';
 import { listenFor } from './seen.js';
 const roots = new WeakMap();
 let batching = false;
-/** Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it. */
+/**
+ * Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it, and
+ * element hooks deferred to `flushHooks` (after each pass) and the end of the flush.
+ */
 export function renderBatch(fn) {
-    if (!DEV) {
-        fn(); // the budget is a development check: production needs no batch state
-        return;
-    }
-    resetRowChecks();
+    if (DEV)
+        resetRowChecks(); // the budget is a development check
     const outer = batching;
+    startHooks(); // element hooks wait for the flush (hook-run.ts)
+    let ok = false;
     batching = true;
     try {
         fn();
+        ok = true;
     }
     finally {
         batching = outer;
+        endHooks(ok);
     }
 }
 /**
@@ -37,7 +42,7 @@ export function render(value, root, seen) {
         part = new ChildPart(root, null, null, 0, false, 0);
         roots.set(root, part);
     }
-    const mark = hookMark();
+    const mark = hookMark(root);
     if (DEV && !batching)
         resetRowChecks();
     const outer = listenFor(seen);
@@ -51,7 +56,7 @@ export function render(value, root, seen) {
     finally {
         listenFor(outer);
     }
-    runHooks(mark);
+    runHooks(mark, root);
 }
 /** Hydration (hydrate.ts): `part`, built over server DOM, is `root`'s part from now on. */
 export function setRootPart(root, part) {

package/dist/view/render/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/view/render/render.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,8FAA8F;AAC9F,uFAAuF;AACvF,8FAA8F;AAC9F,8FAA8F;AAC9F,6FAA6F;AAC7F,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAmB,MAAM,WAAW,CAAC;AAGvD,MAAM,KAAK,GAAG,IAAI,OAAO,EAAmB,CAAC;AAC7C,IAAI,QAAQ,GAAG,KAAK,CAAC;AAErB,+FAA+F;AAC/F,MAAM,UAAU,WAAW,CAAC,EAAc;IACxC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,EAAE,EAAE,CAAC,CAAC,qEAAqE;QAC3E,OAAO;IACT,CAAC;IACD,cAAc,EAAE,CAAC;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC;IACvB,QAAQ,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC;QACH,EAAE,EAAE,CAAC;IACP,CAAC;YAAS,CAAC;QACT,QAAQ,GAAG,KAAK,CAAC;IACnB,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,MAAM,CACpB,KAAiB,EACjB,IAA6C,EAC7C,IAAiB;IAEjB,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,IAAI,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACpD,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACxB,CAAC;IACD,MAAM,IAAI,GAAG,QAAQ,EAAE,CAAC;IACxB,IAAI,GAAG,IAAI,CAAC,QAAQ;QAAE,cAAc,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAI,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,MAAM,KAAK,CAAC;IACd,CAAC;YAAS,CAAC;QACT,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC;IACD,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjB,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,WAAW,CAAC,IAAU,EAAE,IAAe;IACrD,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACxB,CAAC","sourcesContent":["// `render(value, root)`: the client renderer's entry point (view/02-bindings.md \"Commit order\").\n// The root's child part is cached per root, so later calls update in place. Synchronous: when\n// it returns, the DOM is committed and every element hook's `client` call has run. The\n// scheduler (view/04-scheduler.md) calls it once per dirty host, inside `renderBatch`, so the\n// list dev check's budget (03) is per flush; a call outside a batch gets a budget of its own.\n// `hydrate(value, root)` (hydrate.ts) makes the same root part from server DOM instead (07).\nimport { DEV } from '#view-dev';\nimport { ChildPart } from './child-part.js';\nimport { resetRowChecks } from './dev-check.js';\nimport { dropHooks, hookMark, runHooks } from './hooks.js';\nimport { listenFor, type SeenMarkup } from './seen.js';\nimport type { ChildValue } from './values.js';\n\nconst roots = new WeakMap<Node, ChildPart>();\nlet batching = false;\n\n/** Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it. */\nexport function renderBatch(fn: () => void): void {\n  if (!DEV) {\n    fn(); // the budget is a development check: production needs no batch state\n    return;\n  }\n  resetRowChecks();\n  const outer = batching;\n  batching = true;\n  try {\n    fn();\n  } finally {\n    batching = outer;\n  }\n}\n\n/**\n * Renders `value` into `root`, updating what an earlier call rendered there. `seen` is told\n * about each template the render instantiates (seen.ts).\n */\nexport function render(\n  value: ChildValue,\n  root: Element | ShadowRoot | DocumentFragment,\n  seen?: SeenMarkup,\n): void {\n  let part = roots.get(root);\n  if (part === undefined) {\n    part = new ChildPart(root, null, null, 0, false, 0);\n    roots.set(root, part);\n  }\n  const mark = hookMark();\n  if (DEV && !batching) resetRowChecks();\n  const outer = listenFor(seen);\n  try {\n    part.commit(value);\n  } catch (error) {\n    dropHooks(mark);\n    throw error;\n  } finally {\n    listenFor(outer);\n  }\n  runHooks(mark);\n}\n\n/** Hydration (hydrate.ts): `part`, built over server DOM, is `root`'s part from now on. */\nexport function setRootPart(root: Node, part: ChildPart): void {\n  roots.set(root, part);\n}\n"]}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/view/render/render.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,8FAA8F;AAC9F,+FAA+F;AAC/F,gGAAgG;AAChG,+FAA+F;AAC/F,6FAA6F;AAC7F,6FAA6F;AAC7F,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,EAAE,SAAS,EAAmB,MAAM,WAAW,CAAC;AAGvD,MAAM,KAAK,GAAG,IAAI,OAAO,EAAmB,CAAC;AAC7C,IAAI,QAAQ,GAAG,KAAK,CAAC;AAErB;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAAc;IACxC,IAAI,GAAG;QAAE,cAAc,EAAE,CAAC,CAAC,oCAAoC;IAC/D,MAAM,KAAK,GAAG,QAAQ,CAAC;IACvB,UAAU,EAAE,CAAC,CAAC,iDAAiD;IAC/D,IAAI,EAAE,GAAG,KAAK,CAAC;IACf,QAAQ,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC;QACH,EAAE,EAAE,CAAC;QACL,EAAE,GAAG,IAAI,CAAC;IACZ,CAAC;YAAS,CAAC;QACT,QAAQ,GAAG,KAAK,CAAC;QACjB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,MAAM,CACpB,KAAiB,EACjB,IAA6C,EAC7C,IAAiB;IAEjB,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,IAAI,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACpD,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACxB,CAAC;IACD,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,GAAG,IAAI,CAAC,QAAQ;QAAE,cAAc,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;IAC9B,IAAI,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,MAAM,KAAK,CAAC;IACd,CAAC;YAAS,CAAC;QACT,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC;IACD,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACvB,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,WAAW,CAAC,IAAU,EAAE,IAAe;IACrD,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACxB,CAAC","sourcesContent":["// `render(value, root)`: the client renderer's entry point (view/02-bindings.md \"Commit order\").\n// The root's child part is cached per root, so later calls update in place. Synchronous: when\n// it returns, the DOM is committed, and outside a flush every element hook's `client` call has\n// run. The scheduler (view/04-scheduler.md) calls it once per dirty host, inside `renderBatch`,\n// so the list dev check's budget (03) is per flush and hooks run once every host has rendered,\n// children first (hooks.ts); a call outside a batch gets a budget and a hook run of its own.\n// `hydrate(value, root)` (hydrate.ts) makes the same root part from server DOM instead (07).\nimport { DEV } from '#view-dev';\nimport { ChildPart } from './child-part.js';\nimport { resetRowChecks } from './dev-check.js';\nimport { dropHooks, endHooks, hookMark, runHooks, startHooks } from './hooks.js';\nimport { listenFor, type SeenMarkup } from './seen.js';\nimport type { ChildValue } from './values.js';\n\nconst roots = new WeakMap<Node, ChildPart>();\nlet batching = false;\n\n/**\n * Runs `fn` (one scheduler flush) with one shared row-check budget for every render in it, and\n * element hooks deferred to `flushHooks` (after each pass) and the end of the flush.\n */\nexport function renderBatch(fn: () => void): void {\n  if (DEV) resetRowChecks(); // the budget is a development check\n  const outer = batching;\n  startHooks(); // element hooks wait for the flush (hook-run.ts)\n  let ok = false;\n  batching = true;\n  try {\n    fn();\n    ok = true;\n  } finally {\n    batching = outer;\n    endHooks(ok);\n  }\n}\n\n/**\n * Renders `value` into `root`, updating what an earlier call rendered there. `seen` is told\n * about each template the render instantiates (seen.ts).\n */\nexport function render(\n  value: ChildValue,\n  root: Element | ShadowRoot | DocumentFragment,\n  seen?: SeenMarkup,\n): void {\n  let part = roots.get(root);\n  if (part === undefined) {\n    part = new ChildPart(root, null, null, 0, false, 0);\n    roots.set(root, part);\n  }\n  const mark = hookMark(root);\n  if (DEV && !batching) resetRowChecks();\n  const outer = listenFor(seen);\n  try {\n    part.commit(value);\n  } catch (error) {\n    dropHooks(mark);\n    throw error;\n  } finally {\n    listenFor(outer);\n  }\n  runHooks(mark, root);\n}\n\n/** Hydration (hydrate.ts): `part`, built over server DOM, is `root`'s part from now on. */\nexport function setRootPart(root: Node, part: ChildPart): void {\n  roots.set(root, part);\n}\n"]}

package/dist/view/render/toggles.d.ts

@@ -0,0 +1,6 @@
+import type { HookPart } from './hooks.js';
+/** Queues a native action after this part's DOM is committed and inserted. */
+export type Toggle = (part: HookPart, name: string, on: boolean) => void;
+export declare let toggle: Toggle | undefined;
+/** Internal: turns the bindings on (modal.ts's `applyToggle`). */
+export declare function useToggles(run: Toggle): void;

package/dist/view/render/toggles.js

@@ -0,0 +1,6 @@
+export let toggle;
+/** Internal: turns the bindings on (modal.ts's `applyToggle`). */
+export function useToggles(run) {
+    toggle = run;
+}
+//# sourceMappingURL=toggles.js.map

package/dist/view/render/toggles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggles.js","sourceRoot":"","sources":["../../../src/view/render/toggles.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,IAAI,MAA0B,CAAC;AAEtC,kEAAkE;AAClE,MAAM,UAAU,UAAU,CAAC,GAAW;IACpC,MAAM,GAAG,GAAG,CAAC;AACf,CAAC","sourcesContent":["// Dialogs and popovers from state (view/02-bindings.md \"Dialogs and popovers\", gyral-1zd.27):\n// `?modal=${open}` on a `<dialog>` and `?popover-open=${open}` on a `[popover]` element open and\n// close them with the platform's methods. The code that does it (modal.ts) registers here, so\n// only builds that use the bindings bundle it: core's `#spec-features` registers it at load\n// without a build step, and compiled builds register it when a module writes either binding.\nimport type { HookPart } from './hooks.js';\n\n/** Queues a native action after this part's DOM is committed and inserted. */\nexport type Toggle = (part: HookPart, name: string, on: boolean) => void;\n\nexport let toggle: Toggle | undefined;\n\n/** Internal: turns the bindings on (modal.ts's `applyToggle`). */\nexport function useToggles(run: Toggle): void {\n  toggle = run;\n}\n"]}

package/dist/view/render/warn.d.ts

@@ -4,6 +4,12 @@ export declare function badChild(value: unknown): never;
 export declare function warnTrue(part: object): void;
 /** An attribute or text-content hole got an object or function, once per part. */
 export declare function warnValue(part: object, value: unknown, where: string): void;
+/**
+ * A property binding got a function, once per part (02 "Properties"): views attach no
+ * closures. Built-in elements and Gyral components warn; other custom elements may take a
+ * callback (a third-party widget's API), so they don't.
+ */
+export declare function warnFunctionProp(part: object, el: Element, name: string): void;
 /** `raw()` parsed in the browser, once per page. */
 export declare function warnRaw(): void;
 /** Keys must be unique strings or numbers: an error in development. */
@@ -11,4 +17,12 @@ export declare function badKey(key: unknown, index: number, duplicate: boolean):
 /** A skipped row would render differently: it reads something besides `item` and `pick`. */
 export declare function warnImpureRow(row: (...args: never[]) => unknown): void;
 /** A hook hole got something other than a hook result. */
+/** `?modal`/`?popover-open` with the bindings' code left out of the build (toggles.ts). */
+export declare function warnToggle(el: Element, name: string): void;
 export declare function badHook(value: unknown): never;
+/**
+ * An svg template renders only in SVG content: an SVG element other than <foreignObject>,
+ * <desc> or <title>, whose content is HTML (01 "svg templates"). A detached fragment (an
+ * instance being built) isn't checked: its place is known only when it is inserted.
+ */
+export declare function checkSvgParent(parent: Node): void;

package/dist/view/render/warn.js

@@ -35,6 +35,24 @@ export function warnValue(part, value, where) {
         `number or boolean, or null/undefined/nothing to leave it out ` +
         `(${SPEC}/02-bindings.md "Attribute values").`);
 }
+/**
+ * A property binding got a function, once per part (02 "Properties"): views attach no
+ * closures. Built-in elements and Gyral components warn; other custom elements may take a
+ * callback (a third-party widget's API), so they don't.
+ */
+export function warnFunctionProp(part, el, name) {
+    const gyral = el.constructor.spec !== undefined;
+    if (warned.has(part) || (el.localName.includes('-') && !gyral))
+        return;
+    warned.add(part);
+    console.warn(`gyral: .${name}=\${…} on <${el.localName}> got a function. Views attach no closures: ` +
+        (gyral
+            ? 'props are data (they travel in hydration seeds); pass data and let the component ' +
+                'decide what to do with it, and hear back from it through its outputs'
+            : 'name an intent with data-intent=${i.Name} for events, and put behaviour on an ' +
+                'element in a hook (defineHook)') +
+        ` (${SPEC}/02-bindings.md "Properties").`);
+}
 let rawWarned = false;
 /** `raw()` parsed in the browser, once per page. */
 export function warnRaw() {
@@ -61,9 +79,36 @@ export function warnImpureRow(row) {
         `the second argument (${SPEC}/03-lists.md "Rows must be pure").`);
 }
 /** A hook hole got something other than a hook result. */
+/** `?modal`/`?popover-open` with the bindings' code left out of the build (toggles.ts). */
+export function warnToggle(el, name) {
+    if (warned.has(el))
+        return;
+    warned.add(el);
+    console.warn(`gyral: ?${name} on <${el.localName}> does nothing: the build left its code out ` +
+        `(${SPEC}/05-element.md "Features register themselves").`);
+}
 export function badHook(value) {
     throw new TypeError(`gyral: an element hook position (\${…} inside a start tag) got ${describe(value)}. Only ` +
         `hooks made with defineHook() go there, e.g. <input \${invalid(errors)}> ` +
         `(${SPEC}/02-bindings.md "Element hooks").`);
 }
+/**
+ * An svg template renders only in SVG content: an SVG element other than <foreignObject>,
+ * <desc> or <title>, whose content is HTML (01 "svg templates"). A detached fragment (an
+ * instance being built) isn't checked: its place is known only when it is inserted.
+ */
+export function checkSvgParent(parent) {
+    if (parent.nodeType === 11 && !('host' in parent))
+        return;
+    const el = parent;
+    if (el.namespaceURI === 'http://www.w3.org/2000/svg' &&
+        !/^(foreignObject|desc|title)$/.test(el.localName)) {
+        return;
+    }
+    const where = el.nodeType === 1 ? `<${el.localName}>` : 'a shadow root';
+    throw new Error(`gyral: an svg template is rendered into ${where}, which isn't SVG content. svg\`…\` ` +
+        'fragments are SVG elements: render them inside an <svg> (or another SVG element, not ' +
+        '<foreignObject>) of an html template, html`<svg viewBox="…">${svg`…`}</svg>`, or write ' +
+        `the whole graphic with html (${SPEC}/01-templates.md "svg templates").`);
+}
 //# sourceMappingURL=warn.js.map

package/dist/view/render/warn.js.map

@@ -1 +1 @@
-{"version":3,"file":"warn.js","sourceRoot":"","sources":["../../../src/view/render/warn.ts"],"names":[],"mappings":"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","sourcesContent":["// Development-only errors and warnings of the renderer (view/02-bindings.md \"Child values\",\n// view/03-lists.md \"Keys\", view/09-template-rules.md \"Warnings\"). Every call site is guarded by\n// `if (DEV)`, so production bundles drop this module. Messages say what to write instead.\n\nconst SPEC = 'docs/design-docs/view';\nconst warned = new WeakSet<object>();\n\nconst describe = (value: unknown): string =>\n  typeof value === 'function'\n    ? 'a function'\n    : Array.isArray(value)\n      ? 'an array'\n      : typeof value === 'object'\n        ? `an object (${Object.prototype.toString.call(value).slice(8, -1)})`\n        : `a ${typeof value}`;\n\n/** A child hole got a value it can't render: an error in development. */\nexport function badChild(value: unknown): never {\n  throw new TypeError(\n    `gyral: a child hole got ${describe(value)}, which it can't render. Child holes take ` +\n      `text, numbers, html\\`…\\` results, each(…), arrays, raw(…), or null/undefined/false/` +\n      `nothing for nothing. Format the value as text, or render it with a template ` +\n      `(${SPEC}/02-bindings.md \"Child values\").`,\n  );\n}\n\n/** `true` in a child hole, once per part: usually a `cond && x` slip. */\nexport function warnTrue(part: object): void {\n  if (warned.has(part)) return;\n  warned.add(part);\n  console.warn(\n    'gyral: `true` in a child hole renders nothing. It is usually a `cond && x` slip where ' +\n      'cond is a boolean and x is missing; write `cond ? x : nothing` ' +\n      `(${SPEC}/02-bindings.md \"Child values\").`,\n  );\n}\n\n/** An attribute or text-content hole got an object or function, once per part. */\nexport function warnValue(part: object, value: unknown, where: string): void {\n  if (warned.has(part)) return;\n  warned.add(part);\n  console.warn(\n    `gyral: ${where} got ${describe(value)}; it is written as String(value). Pass a string, ` +\n      `number or boolean, or null/undefined/nothing to leave it out ` +\n      `(${SPEC}/02-bindings.md \"Attribute values\").`,\n  );\n}\n\nlet rawWarned = false;\n\n/** `raw()` parsed in the browser, once per page. */\nexport function warnRaw(): void {\n  if (rawWarned) return;\n  rawWarned = true;\n  console.warn(\n    'gyral: raw() rendered in the browser. It works, but every change re-parses the markup; ' +\n      'prefer templates for content that changes, and keep raw() for server-rendered markup ' +\n      `(${SPEC}/09-template-rules.md \"Warnings\").`,\n  );\n}\n\n/** Keys must be unique strings or numbers: an error in development. */\nexport function badKey(key: unknown, index: number, duplicate: boolean): never {\n  const problem = duplicate\n    ? `the key ${JSON.stringify(key)} appears twice (again at index ${String(index)})`\n    : `the key at index ${String(index)} is ${describe(key)}`;\n  throw new Error(\n    `gyral: each(): ${problem}. Keys must be unique strings or numbers within a list, such ` +\n      `as a stable id: each(items, (x) => x.id, Row) (${SPEC}/03-lists.md \"Keys\").`,\n  );\n}\n\n/** A skipped row would render differently: it reads something besides `item` and `pick`. */\nexport function warnImpureRow(row: (...args: never[]) => unknown): void {\n  const name = row.name === '' ? 'a row function' : `the row function ${row.name}`;\n  console.warn(\n    `gyral: each(): ${name} depends on something not passed through \\`item\\` or \\`pick\\`, so ` +\n      'skipped rows would show stale content. Return what it reads from `pick` and take it as ' +\n      `the second argument (${SPEC}/03-lists.md \"Rows must be pure\").`,\n  );\n}\n\n/** A hook hole got something other than a hook result. */\nexport function badHook(value: unknown): never {\n  throw new TypeError(\n    `gyral: an element hook position (\\${…} inside a start tag) got ${describe(value)}. Only ` +\n      `hooks made with defineHook() go there, e.g. <input \\${invalid(errors)}> ` +\n      `(${SPEC}/02-bindings.md \"Element hooks\").`,\n  );\n}\n"]}
+{"version":3,"file":"warn.js","sourceRoot":"","sources":["../../../src/view/render/warn.ts"],"names":[],"mappings":"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","sourcesContent":["// Development-only errors and warnings of the renderer (view/02-bindings.md \"Child values\",\n// view/03-lists.md \"Keys\", view/09-template-rules.md \"Warnings\"). Every call site is guarded by\n// `if (DEV)`, so production bundles drop this module. Messages say what to write instead.\n\nconst SPEC = 'docs/design-docs/view';\nconst warned = new WeakSet<object>();\n\nconst describe = (value: unknown): string =>\n  typeof value === 'function'\n    ? 'a function'\n    : Array.isArray(value)\n      ? 'an array'\n      : typeof value === 'object'\n        ? `an object (${Object.prototype.toString.call(value).slice(8, -1)})`\n        : `a ${typeof value}`;\n\n/** A child hole got a value it can't render: an error in development. */\nexport function badChild(value: unknown): never {\n  throw new TypeError(\n    `gyral: a child hole got ${describe(value)}, which it can't render. Child holes take ` +\n      `text, numbers, html\\`…\\` results, each(…), arrays, raw(…), or null/undefined/false/` +\n      `nothing for nothing. Format the value as text, or render it with a template ` +\n      `(${SPEC}/02-bindings.md \"Child values\").`,\n  );\n}\n\n/** `true` in a child hole, once per part: usually a `cond && x` slip. */\nexport function warnTrue(part: object): void {\n  if (warned.has(part)) return;\n  warned.add(part);\n  console.warn(\n    'gyral: `true` in a child hole renders nothing. It is usually a `cond && x` slip where ' +\n      'cond is a boolean and x is missing; write `cond ? x : nothing` ' +\n      `(${SPEC}/02-bindings.md \"Child values\").`,\n  );\n}\n\n/** An attribute or text-content hole got an object or function, once per part. */\nexport function warnValue(part: object, value: unknown, where: string): void {\n  if (warned.has(part)) return;\n  warned.add(part);\n  console.warn(\n    `gyral: ${where} got ${describe(value)}; it is written as String(value). Pass a string, ` +\n      `number or boolean, or null/undefined/nothing to leave it out ` +\n      `(${SPEC}/02-bindings.md \"Attribute values\").`,\n  );\n}\n\n/**\n * A property binding got a function, once per part (02 \"Properties\"): views attach no\n * closures. Built-in elements and Gyral components warn; other custom elements may take a\n * callback (a third-party widget's API), so they don't.\n */\nexport function warnFunctionProp(part: object, el: Element, name: string): void {\n  const gyral = (el.constructor as { readonly spec?: unknown }).spec !== undefined;\n  if (warned.has(part) || (el.localName.includes('-') && !gyral)) return;\n  warned.add(part);\n  console.warn(\n    `gyral: .${name}=\\${…} on <${el.localName}> got a function. Views attach no closures: ` +\n      (gyral\n        ? 'props are data (they travel in hydration seeds); pass data and let the component ' +\n          'decide what to do with it, and hear back from it through its outputs'\n        : 'name an intent with data-intent=${i.Name} for events, and put behaviour on an ' +\n          'element in a hook (defineHook)') +\n      ` (${SPEC}/02-bindings.md \"Properties\").`,\n  );\n}\n\nlet rawWarned = false;\n\n/** `raw()` parsed in the browser, once per page. */\nexport function warnRaw(): void {\n  if (rawWarned) return;\n  rawWarned = true;\n  console.warn(\n    'gyral: raw() rendered in the browser. It works, but every change re-parses the markup; ' +\n      'prefer templates for content that changes, and keep raw() for server-rendered markup ' +\n      `(${SPEC}/09-template-rules.md \"Warnings\").`,\n  );\n}\n\n/** Keys must be unique strings or numbers: an error in development. */\nexport function badKey(key: unknown, index: number, duplicate: boolean): never {\n  const problem = duplicate\n    ? `the key ${JSON.stringify(key)} appears twice (again at index ${String(index)})`\n    : `the key at index ${String(index)} is ${describe(key)}`;\n  throw new Error(\n    `gyral: each(): ${problem}. Keys must be unique strings or numbers within a list, such ` +\n      `as a stable id: each(items, (x) => x.id, Row) (${SPEC}/03-lists.md \"Keys\").`,\n  );\n}\n\n/** A skipped row would render differently: it reads something besides `item` and `pick`. */\nexport function warnImpureRow(row: (...args: never[]) => unknown): void {\n  const name = row.name === '' ? 'a row function' : `the row function ${row.name}`;\n  console.warn(\n    `gyral: each(): ${name} depends on something not passed through \\`item\\` or \\`pick\\`, so ` +\n      'skipped rows would show stale content. Return what it reads from `pick` and take it as ' +\n      `the second argument (${SPEC}/03-lists.md \"Rows must be pure\").`,\n  );\n}\n\n/** A hook hole got something other than a hook result. */\n/** `?modal`/`?popover-open` with the bindings' code left out of the build (toggles.ts). */\nexport function warnToggle(el: Element, name: string): void {\n  if (warned.has(el)) return;\n  warned.add(el);\n  console.warn(\n    `gyral: ?${name} on <${el.localName}> does nothing: the build left its code out ` +\n      `(${SPEC}/05-element.md \"Features register themselves\").`,\n  );\n}\n\nexport function badHook(value: unknown): never {\n  throw new TypeError(\n    `gyral: an element hook position (\\${…} inside a start tag) got ${describe(value)}. Only ` +\n      `hooks made with defineHook() go there, e.g. <input \\${invalid(errors)}> ` +\n      `(${SPEC}/02-bindings.md \"Element hooks\").`,\n  );\n}\n\n/**\n * An svg template renders only in SVG content: an SVG element other than <foreignObject>,\n * <desc> or <title>, whose content is HTML (01 \"svg templates\"). A detached fragment (an\n * instance being built) isn't checked: its place is known only when it is inserted.\n */\nexport function checkSvgParent(parent: Node): void {\n  if (parent.nodeType === 11 && !('host' in parent)) return;\n  const el = parent as Element;\n  if (\n    el.namespaceURI === 'http://www.w3.org/2000/svg' &&\n    !/^(foreignObject|desc|title)$/.test(el.localName)\n  ) {\n    return;\n  }\n  const where = el.nodeType === 1 ? `<${el.localName}>` : 'a shadow root';\n  throw new Error(\n    `gyral: an svg template is rendered into ${where}, which isn't SVG content. svg\\`…\\` ` +\n      'fragments are SVG elements: render them inside an <svg> (or another SVG element, not ' +\n      '<foreignObject>) of an html template, html`<svg viewBox=\"…\">${svg`…`}</svg>`, or write ' +\n      `the whole graphic with html (${SPEC}/01-templates.md \"svg templates\").`,\n  );\n}\n"]}

package/dist/view/server/component.d.ts

@@ -1,9 +1,12 @@
 import type { ServerComponent } from '../registry.js';
-import { type Deferred, type Item } from './writer.js';
+import { type Deferred, type Item, type StyleValues } from './writer.js';
 /**
  * The text of a shadow component's `<style>` (its CSS texts joined by newlines, `</style`
  * escaped), exactly as written, so `styleHashes()` hashes what the browser sees. `''`: none.
  */
 export declare function styleText(component: ServerComponent): string;
-/** Writes a deferred component; nested components are deferred again. */
-export declare function expand({ component, input }: Deferred, dev: boolean): Item[];
+/**
+ * Writes a deferred component; nested components are deferred again. A component that fails
+ * (ADR 0024) writes its error view instead, marked `data-gyral-error`, and `onError` hears it.
+ */
+export declare function expand({ component, input }: Deferred, dev: boolean, styles: StyleValues | undefined, onError: (error: unknown) => void): Item[];

package/dist/view/server/component.js

@@ -2,7 +2,7 @@
 // tag (light mark, seed, island attributes), then its view, inside a declarative shadow root
 // with the component's CSS (08 "Server") or as light-DOM children (ADR 0014). The parent's
 // children of a shadow component follow in the parent's walk, after the `<template>`.
-import { ISLAND_ATTRIBUTE, LIGHT_ATTRIBUTE, SEED_ATTRIBUTE } from '../attributes.js';
+import { ERROR_ATTRIBUTE, ISLAND_ATTRIBUTE, LIGHT_ATTRIBUTE, SEED_ATTRIBUTE, } from '../attributes.js';
 import { escapeSeed, styleSafe } from './escape.js';
 import { ROOT, Writer } from './writer.js';
 const styleTexts = new WeakMap();
@@ -18,13 +18,34 @@ export function styleText(component) {
     }
     return text;
 }
-/** Writes a deferred component; nested components are deferred again. */
-export function expand({ component, input }, dev) {
-    const { view, seed } = component.render(input);
-    const w = new Writer(dev, input.scope);
+/**
+ * Writes a deferred component; nested components are deferred again. A component that fails
+ * (ADR 0024) writes its error view instead, marked `data-gyral-error`, and `onError` hears it.
+ */
+export function expand({ component, input }, dev, styles, onError) {
+    let rendering = component.render(input);
+    let items;
+    try {
+        items = write(component, input.scope, rendering, dev, styles);
+    }
+    catch (cause) {
+        if (component.fallback === undefined || rendering.failed !== undefined)
+            throw cause;
+        rendering = component.fallback(cause);
+        items = write(component, input.scope, rendering, dev, styles);
+    }
+    if (rendering.failed !== undefined)
+        onError(rendering.failed);
+    return items;
+}
+function write(component, scope, { view, seed, failed }, dev, styles) {
+    const w = new Writer(dev, scope, styles);
     let tail = component.light ? ` ${LIGHT_ATTRIBUTE}` : '';
     // Single-quoted, so the JSON's double quotes stay raw (ADR 0012).
-    tail += ` ${SEED_ATTRIBUTE}='${escapeSeed(JSON.stringify(seed))}'`;
+    if (failed === undefined)
+        tail += ` ${SEED_ATTRIBUTE}='${escapeSeed(JSON.stringify(seed))}'`;
+    else
+        tail += ` ${ERROR_ATTRIBUTE}`;
     if (component.hydrate !== 'load') {
         tail += ` defer-hydration ${ISLAND_ATTRIBUTE}="${component.hydrate}"`;
     }
@@ -34,7 +55,8 @@ export function expand({ component, input }, dev) {
         return w.done();
     }
     const css = styleText(component);
-    w.write(`<template shadowrootmode="open">${css === '' ? '' : `<style>${css}</style>`}`);
+    const focus = component.delegatesFocus === true ? ' shadowrootdelegatesfocus' : '';
+    w.write(`<template shadowrootmode="open"${focus}>${css === '' ? '' : `<style>${css}</style>`}`);
     w.child(view, undefined, ROOT);
     w.write('</template>');
     return w.done();

package/dist/view/server/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/view/server/component.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,6FAA6F;AAC7F,2FAA2F;AAC3F,sFAAsF;AACtF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAErF,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,EAA4B,MAAM,aAAa,CAAC;AAErE,MAAM,UAAU,GAAG,IAAI,OAAO,EAA2B,CAAC;AAE1D;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,SAA0B;IAClD,IAAI,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACvB,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9C,UAAU,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,EAAY,EAAE,GAAY;IACjE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACxD,kEAAkE;IAClE,IAAI,IAAI,IAAI,cAAc,KAAK,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC;IACnE,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;QACjC,IAAI,IAAI,oBAAoB,gBAAgB,KAAK,SAAS,CAAC,OAAO,GAAG,CAAC;IACxE,CAAC;IACD,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;IACpB,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QAC/B,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;IAClB,CAAC;IACD,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,CAAC,KAAK,CAAC,mCAAmC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,GAAG,UAAU,EAAE,CAAC,CAAC;IACxF,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACvB,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC;AAClB,CAAC","sourcesContent":["// Rendering one Gyral component in place (view/06-server.md \"Components\"): the end of its start\n// tag (light mark, seed, island attributes), then its view, inside a declarative shadow root\n// with the component's CSS (08 \"Server\") or as light-DOM children (ADR 0014). The parent's\n// children of a shadow component follow in the parent's walk, after the `<template>`.\nimport { ISLAND_ATTRIBUTE, LIGHT_ATTRIBUTE, SEED_ATTRIBUTE } from '../attributes.js';\nimport type { ServerComponent } from '../registry.js';\nimport { escapeSeed, styleSafe } from './escape.js';\nimport { ROOT, Writer, type Deferred, type Item } from './writer.js';\n\nconst styleTexts = new WeakMap<ServerComponent, string>();\n\n/**\n * The text of a shadow component's `<style>` (its CSS texts joined by newlines, `</style`\n * escaped), exactly as written, so `styleHashes()` hashes what the browser sees. `''`: none.\n */\nexport function styleText(component: ServerComponent): string {\n  let text = styleTexts.get(component);\n  if (text === undefined) {\n    text = styleSafe(component.styles.join('\\n'));\n    styleTexts.set(component, text);\n  }\n  return text;\n}\n\n/** Writes a deferred component; nested components are deferred again. */\nexport function expand({ component, input }: Deferred, dev: boolean): Item[] {\n  const { view, seed } = component.render(input);\n  const w = new Writer(dev, input.scope);\n  let tail = component.light ? ` ${LIGHT_ATTRIBUTE}` : '';\n  // Single-quoted, so the JSON's double quotes stay raw (ADR 0012).\n  tail += ` ${SEED_ATTRIBUTE}='${escapeSeed(JSON.stringify(seed))}'`;\n  if (component.hydrate !== 'load') {\n    tail += ` defer-hydration ${ISLAND_ATTRIBUTE}=\"${component.hydrate}\"`;\n  }\n  w.write(`${tail}>`);\n  if (component.light) {\n    w.child(view, undefined, ROOT);\n    return w.done();\n  }\n  const css = styleText(component);\n  w.write(`<template shadowrootmode=\"open\">${css === '' ? '' : `<style>${css}</style>`}`);\n  w.child(view, undefined, ROOT);\n  w.write('</template>');\n  return w.done();\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/view/server/component.ts"],"names":[],"mappings":"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","sourcesContent":["// Rendering one Gyral component in place (view/06-server.md \"Components\"): the end of its start\n// tag (light mark, seed, island attributes), then its view, inside a declarative shadow root\n// with the component's CSS (08 \"Server\") or as light-DOM children (ADR 0014). The parent's\n// children of a shadow component follow in the parent's walk, after the `<template>`.\nimport {\n  ERROR_ATTRIBUTE,\n  ISLAND_ATTRIBUTE,\n  LIGHT_ATTRIBUTE,\n  SEED_ATTRIBUTE,\n} from '../attributes.js';\nimport type { ServerComponent, ServerRendering } from '../registry.js';\nimport { escapeSeed, styleSafe } from './escape.js';\nimport { ROOT, Writer, type Deferred, type Item, type StyleValues } from './writer.js';\n\nconst styleTexts = new WeakMap<ServerComponent, string>();\n\n/**\n * The text of a shadow component's `<style>` (its CSS texts joined by newlines, `</style`\n * escaped), exactly as written, so `styleHashes()` hashes what the browser sees. `''`: none.\n */\nexport function styleText(component: ServerComponent): string {\n  let text = styleTexts.get(component);\n  if (text === undefined) {\n    text = styleSafe(component.styles.join('\\n'));\n    styleTexts.set(component, text);\n  }\n  return text;\n}\n\n/**\n * Writes a deferred component; nested components are deferred again. A component that fails\n * (ADR 0024) writes its error view instead, marked `data-gyral-error`, and `onError` hears it.\n */\nexport function expand(\n  { component, input }: Deferred,\n  dev: boolean,\n  styles: StyleValues | undefined,\n  onError: (error: unknown) => void,\n): Item[] {\n  let rendering = component.render(input);\n  let items: Item[];\n  try {\n    items = write(component, input.scope, rendering, dev, styles);\n  } catch (cause) {\n    if (component.fallback === undefined || rendering.failed !== undefined) throw cause;\n    rendering = component.fallback(cause);\n    items = write(component, input.scope, rendering, dev, styles);\n  }\n  if (rendering.failed !== undefined) onError(rendering.failed);\n  return items;\n}\n\nfunction write(\n  component: ServerComponent,\n  scope: unknown,\n  { view, seed, failed }: ServerRendering,\n  dev: boolean,\n  styles: StyleValues | undefined,\n): Item[] {\n  const w = new Writer(dev, scope, styles);\n  let tail = component.light ? ` ${LIGHT_ATTRIBUTE}` : '';\n  // Single-quoted, so the JSON's double quotes stay raw (ADR 0012).\n  if (failed === undefined) tail += ` ${SEED_ATTRIBUTE}='${escapeSeed(JSON.stringify(seed))}'`;\n  else tail += ` ${ERROR_ATTRIBUTE}`;\n  if (component.hydrate !== 'load') {\n    tail += ` defer-hydration ${ISLAND_ATTRIBUTE}=\"${component.hydrate}\"`;\n  }\n  w.write(`${tail}>`);\n  if (component.light) {\n    w.child(view, undefined, ROOT);\n    return w.done();\n  }\n  const css = styleText(component);\n  const focus = component.delegatesFocus === true ? ' shadowrootdelegatesfocus' : '';\n  w.write(`<template shadowrootmode=\"open\"${focus}>${css === '' ? '' : `<style>${css}</style>`}`);\n  w.child(view, undefined, ROOT);\n  w.write('</template>');\n  return w.done();\n}\n"]}

package/dist/view/server/index.d.ts

@@ -1,4 +1,6 @@
 import type { ChildValue } from '../render/values.js';
+import { type StyleValues } from './writer.js';
+export type { StyleValues };
 export interface ServerRenderOptions {
     /**
      * Development markers (`<!--gyral:ID-->` before each template instance, for hydration's
@@ -6,6 +8,24 @@ export interface ServerRenderOptions {
      * export condition, as for the client), off otherwise.
      */
     readonly dev?: boolean;
+    /**
+     * Collects every `style` attribute value the render writes, decoded (as the DOM sees it),
+     * each mapped to where it was first written (template `loc` or id): static, bound,
+     * multi-part and element-hook values; not `raw()` markup. For hashing them into a CSP
+     * (ADR 0020). The markup is the same with or without it.
+     */
+    readonly styleAttributes?: StyleValues;
+    /**
+     * Hears each component whose `init` or view threw (ADR 0024; core's `GyralError`): the page
+     * goes on with that component's error view, or nothing. Default `console.error`. Throwing
+     * from it ends the render with that error.
+     */
+    readonly onError?: (error: unknown) => void;
+    /**
+     * Collects the tag of every Gyral component the render writes, in document order, so a page
+     * can load exactly those components' client modules (automatic component loading).
+     */
+    readonly tags?: Set<string>;
 }
 /**
  * Renders `value` to HTML chunks, lazily: each step writes up to the next component boundary.

package/dist/view/server/index.js

@@ -1,11 +1,14 @@
 // The server renderer (view/06-server.md "API"): synchronous, chunked, runtime-agnostic (no
-// DOM, no Node-only APIs: a JavaScript SHA-256 for the style hashes). `@gyral/core/server` wraps these,
+// DOM, no Node-only APIs: a JavaScript SHA-256 for the style hashes). `@gyral/core/internal/server` wraps these,
 // registering recorded specs first; code outside view/ may import only this module of view/server/.
 import { DEV } from '../flags.js';
 import { serverComponents } from '../registry.js';
 import { expand, styleText } from './component.js';
 import { sha256 } from './sha256.js';
 import { ROOT, Writer } from './writer.js';
+const logError = (error) => {
+    console.error(error);
+};
 function push(stack, items) {
     for (let i = items.length - 1; i >= 0; i--)
         stack.push(items[i]);
@@ -17,15 +20,20 @@ function push(stack, items) {
  */
 export function* render(value, options = {}) {
     const dev = options.dev ?? DEV;
-    const root = new Writer(dev, undefined);
+    const styles = options.styleAttributes;
+    const onError = options.onError ?? logError;
+    const tags = options.tags;
+    const root = new Writer(dev, undefined, styles);
     root.child(value, undefined, ROOT);
     const stack = [];
     push(stack, root.done());
     for (let item = stack.pop(); item !== undefined; item = stack.pop()) {
         if (typeof item === 'string')
             yield item;
-        else
-            push(stack, expand(item, dev));
+        else {
+            tags?.add(item.component.tag);
+            push(stack, expand(item, dev, styles, onError));
+        }
     }
 }
 /** Renders `value` to one string. */

package/dist/view/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/view/server/index.ts"],"names":[],"mappings":"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","sourcesContent":["// The server renderer (view/06-server.md \"API\"): synchronous, chunked, runtime-agnostic (no\n// DOM, no Node-only APIs: a JavaScript SHA-256 for the style hashes). `@gyral/core/server` wraps these,\n// registering recorded specs first; code outside view/ may import only this module of view/server/.\nimport { DEV } from '../flags.js';\nimport { serverComponents } from '../registry.js';\nimport type { ChildValue } from '../render/values.js';\nimport { expand, styleText } from './component.js';\nimport { sha256 } from './sha256.js';\nimport { ROOT, Writer, type Item } from './writer.js';\n\nexport interface ServerRenderOptions {\n  /**\n   * Development markers (`<!--gyral:ID-->` before each template instance, for hydration's\n   * checks, 07) and development checks. Default: on in development builds (the `development`\n   * export condition, as for the client), off otherwise.\n   */\n  readonly dev?: boolean;\n}\n\nfunction push(stack: Item[], items: readonly Item[]): void {\n  for (let i = items.length - 1; i >= 0; i--) stack.push(items[i] as Item);\n}\n\n/**\n * Renders `value` to HTML chunks, lazily: each step writes up to the next component boundary.\n * Every component's `init` and view run in the step that writes it, so a caller can wrap each\n * step in a per-request scope (ADR 0013).\n */\nexport function* render(value: ChildValue, options: ServerRenderOptions = {}): Iterable<string> {\n  const dev = options.dev ?? DEV;\n  const root = new Writer(dev, undefined);\n  root.child(value, undefined, ROOT);\n  const stack: Item[] = [];\n  push(stack, root.done());\n  for (let item = stack.pop(); item !== undefined; item = stack.pop()) {\n    if (typeof item === 'string') yield item;\n    else push(stack, expand(item, dev));\n  }\n}\n\n/** Renders `value` to one string. */\nexport function renderToString(value: ChildValue, options?: ServerRenderOptions): string {\n  let html = '';\n  for (const chunk of render(value, options)) html += chunk;\n  return html;\n}\n\nconst hashes = new Map<string, string>();\n\n/**\n * `'sha256-…'` of a `<style>` element's text, for a CSP `style-src` (cached per text).\n * Synchronous (sha256.ts), so a page can build its policy while it renders.\n */\nexport function styleHashSync(text: string): string {\n  let hash = hashes.get(text);\n  if (hash === undefined) {\n    // The parser turns CR and CRLF into LF before the browser hashes the element's text.\n    const digest = sha256(new TextEncoder().encode(text.replace(/\\r\\n?/g, '\\n')));\n    let binary = '';\n    for (const byte of digest) binary += String.fromCharCode(byte);\n    hash = `'sha256-${btoa(binary)}'`;\n    hashes.set(text, hash);\n  }\n  return hash;\n}\n\n/** `styleHashSync`, as a promise (the API before it existed). */\nexport const styleHash = (text: string): Promise<string> => Promise.resolve(styleHashSync(text));\n\n/** Tag → `<style>` text of every registered shadow component with CSS (08 \"Server\"). */\nexport function componentStyles(): ReadonlyMap<string, string> {\n  const styles = new Map<string, string>();\n  for (const component of serverComponents()) {\n    const text = styleText(component);\n    if (text !== '') styles.set(component.tag, text);\n  }\n  return styles;\n}\n\n/** The hashes of every registered shadow component's `<style>` (08 \"Server\"), deduplicated. */\nexport function styleHashes(): Promise<readonly string[]> {\n  return Promise.resolve([...new Set([...componentStyles().values()].map(styleHashSync))]);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/view/server/index.ts"],"names":[],"mappings":"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","sourcesContent":["// The server renderer (view/06-server.md \"API\"): synchronous, chunked, runtime-agnostic (no\n// DOM, no Node-only APIs: a JavaScript SHA-256 for the style hashes). `@gyral/core/internal/server` wraps these,\n// registering recorded specs first; code outside view/ may import only this module of view/server/.\nimport { DEV } from '../flags.js';\nimport { serverComponents } from '../registry.js';\nimport type { ChildValue } from '../render/values.js';\nimport { expand, styleText } from './component.js';\nimport { sha256 } from './sha256.js';\nimport { ROOT, Writer, type Item, type StyleValues } from './writer.js';\n\nexport type { StyleValues };\n\nexport interface ServerRenderOptions {\n  /**\n   * Development markers (`<!--gyral:ID-->` before each template instance, for hydration's\n   * checks, 07) and development checks. Default: on in development builds (the `development`\n   * export condition, as for the client), off otherwise.\n   */\n  readonly dev?: boolean;\n  /**\n   * Collects every `style` attribute value the render writes, decoded (as the DOM sees it),\n   * each mapped to where it was first written (template `loc` or id): static, bound,\n   * multi-part and element-hook values; not `raw()` markup. For hashing them into a CSP\n   * (ADR 0020). The markup is the same with or without it.\n   */\n  readonly styleAttributes?: StyleValues;\n  /**\n   * Hears each component whose `init` or view threw (ADR 0024; core's `GyralError`): the page\n   * goes on with that component's error view, or nothing. Default `console.error`. Throwing\n   * from it ends the render with that error.\n   */\n  readonly onError?: (error: unknown) => void;\n  /**\n   * Collects the tag of every Gyral component the render writes, in document order, so a page\n   * can load exactly those components' client modules (automatic component loading).\n   */\n  readonly tags?: Set<string>;\n}\n\nconst logError = (error: unknown): void => {\n  console.error(error);\n};\n\nfunction push(stack: Item[], items: readonly Item[]): void {\n  for (let i = items.length - 1; i >= 0; i--) stack.push(items[i] as Item);\n}\n\n/**\n * Renders `value` to HTML chunks, lazily: each step writes up to the next component boundary.\n * Every component's `init` and view run in the step that writes it, so a caller can wrap each\n * step in a per-request scope (ADR 0013).\n */\nexport function* render(value: ChildValue, options: ServerRenderOptions = {}): Iterable<string> {\n  const dev = options.dev ?? DEV;\n  const styles = options.styleAttributes;\n  const onError = options.onError ?? logError;\n  const tags = options.tags;\n  const root = new Writer(dev, undefined, styles);\n  root.child(value, undefined, ROOT);\n  const stack: Item[] = [];\n  push(stack, root.done());\n  for (let item = stack.pop(); item !== undefined; item = stack.pop()) {\n    if (typeof item === 'string') yield item;\n    else {\n      tags?.add(item.component.tag);\n      push(stack, expand(item, dev, styles, onError));\n    }\n  }\n}\n\n/** Renders `value` to one string. */\nexport function renderToString(value: ChildValue, options?: ServerRenderOptions): string {\n  let html = '';\n  for (const chunk of render(value, options)) html += chunk;\n  return html;\n}\n\nconst hashes = new Map<string, string>();\n\n/**\n * `'sha256-…'` of a `<style>` element's text, for a CSP `style-src` (cached per text).\n * Synchronous (sha256.ts), so a page can build its policy while it renders.\n */\nexport function styleHashSync(text: string): string {\n  let hash = hashes.get(text);\n  if (hash === undefined) {\n    // The parser turns CR and CRLF into LF before the browser hashes the element's text.\n    const digest = sha256(new TextEncoder().encode(text.replace(/\\r\\n?/g, '\\n')));\n    let binary = '';\n    for (const byte of digest) binary += String.fromCharCode(byte);\n    hash = `'sha256-${btoa(binary)}'`;\n    hashes.set(text, hash);\n  }\n  return hash;\n}\n\n/** `styleHashSync`, as a promise (the API before it existed). */\nexport const styleHash = (text: string): Promise<string> => Promise.resolve(styleHashSync(text));\n\n/** Tag → `<style>` text of every registered shadow component with CSS (08 \"Server\"). */\nexport function componentStyles(): ReadonlyMap<string, string> {\n  const styles = new Map<string, string>();\n  for (const component of serverComponents()) {\n    const text = styleText(component);\n    if (text !== '') styles.set(component.tag, text);\n  }\n  return styles;\n}\n\n/** The hashes of every registered shadow component's `<style>` (08 \"Server\"), deduplicated. */\nexport function styleHashes(): Promise<readonly string[]> {\n  return Promise.resolve([...new Set([...componentStyles().values()].map(styleHashSync))]);\n}\n"]}

package/dist/view/server/tags.d.ts

@@ -5,6 +5,12 @@ export interface Deferred {
     readonly component: ServerComponent;
     readonly input: ServerRenderInput;
 }
+/**
+ * A render's `style` attribute values for a CSP (ADR 0020): each distinct value as the DOM sees
+ * it (decoded), mapped to where it was first written (the template's `loc` or id; `''` when
+ * neither is known).
+ */
+export type StyleValues = Map<string, string>;
 /** What a walk produces: markup, with deferred components in document order. */
 export type Item = string | Deferred;
 /** A custom element's start tag while its attribute holes are written. */
@@ -30,13 +36,18 @@ export declare const PLAIN: Frame;
 export declare class Markup {
     protected readonly dev: boolean;
     protected scope: unknown;
+    protected readonly styles?: StyleValues | undefined;
     protected buf: string;
     protected readonly items: Item[];
+    /** The template being written, for `styles` (its `loc` or id). */
+    protected where: string;
     /**
      * `dev`: development markers and checks. `scope`: the nearest provider's scope, passed to
-     * components (undefined: the request's).
+     * components (undefined: the request's). `styles`: collects every `style` value written.
      */
-    constructor(dev: boolean, scope: unknown);
+    constructor(dev: boolean, scope: unknown, styles?: StyleValues | undefined);
+    /** Records a `style` value the DOM will see (empty values declare nothing). */
+    protected style(value: string): void;
     write(markup: string): void;
     /** The markup and deferred components written so far. */
     done(): Item[];

package/dist/view/server/tags.js

@@ -7,13 +7,22 @@ export const PLAIN = { k: 'plain' };
 export class Markup {
     /**
      * `dev`: development markers and checks. `scope`: the nearest provider's scope, passed to
-     * components (undefined: the request's).
+     * components (undefined: the request's). `styles`: collects every `style` value written.
      */
-    constructor(dev, scope) {
+    constructor(dev, scope, styles) {
         this.dev = dev;
         this.scope = scope;
+        this.styles = styles;
         this.buf = '';
         this.items = [];
+        /** The template being written, for `styles` (its `loc` or id). */
+        this.where = '';
+    }
+    /** Records a `style` value the DOM will see (empty values declare nothing). */
+    style(value) {
+        if (value !== '' && this.styles !== undefined && !this.styles.has(value)) {
+            this.styles.set(value, this.where);
+        }
     }
     write(markup) {
         this.buf += markup;
@@ -40,6 +49,8 @@ export class Markup {
     }
     valued(name, value, opening) {
         this.buf += ` ${name}="${escapeAttr(value)}"`;
+        if (name === 'style')
+            this.style(value);
         if (opening !== undefined)
             opening.attributes[name] = value;
     }