tutuca 0.9.110 → 0.9.112

package/dist/tutuca-cli.js

@@ -4727,7 +4727,6 @@ function sizeOf(v) {
 
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -6108,7 +6107,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -6201,7 +6200,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -6288,6 +6287,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events = new NodeEvents(id);
@@ -14456,16 +14461,23 @@ class Example {
     value,
     view = "main",
     componentName = null,
-    requestHandlerNames = []
+    requestHandlers = null,
+    requestHandlerNames = [],
+    on = null
   }) {
     this.title = title;
     this.description = description;
     this.value = value;
     this.view = view;
     this.componentName = componentName;
+    this.requestHandlers = requestHandlers;
     this.requestHandlerNames = requestHandlerNames;
+    this.on = on;
   }
 }
+function isPlainObject2(v) {
+  return v != null && typeof v === "object" && !Array.isArray(v);
+}
 function resolveComponentName(value, components) {
   for (const comp of components) {
     if (value instanceof comp.Class)
@@ -14512,13 +14524,29 @@ function parseExample(raw, index, components, parentPath) {
   if (rh != null && (typeof rh !== "object" || Array.isArray(rh))) {
     throw shapeError(`example at ${where} "requestHandlers" must be an object of functions`, where);
   }
+  const on = raw.on;
+  if (on != null) {
+    if (!isPlainObject2(on)) {
+      throw shapeError(`example at ${where} "on" must be an object of lifecycle phases (${PHASE_NAMES.join(", ")})`, where);
+    }
+    for (const key in on) {
+      if (!PHASE_NAMES.includes(key)) {
+        throw shapeError(`example at ${where} has unknown lifecycle phase "on.${key}"; expected one of ${PHASE_NAMES.join(", ")}`, where);
+      }
+      if (!isPlainObject2(on[key])) {
+        throw shapeError(`example at ${where} "on.${key}" must be an object of actions (send, bubble, request, input, do)`, where);
+      }
+    }
+  }
   return new Example({
     title: raw.title ?? `Example ${index + 1}`,
     description: raw.description ?? null,
     value: raw.value,
     view: raw.view ?? "main",
     componentName: resolveComponentName(raw.value, components),
-    requestHandlerNames: rh ? Object.keys(rh) : []
+    requestHandlers: rh ?? null,
+    requestHandlerNames: rh ? Object.keys(rh) : [],
+    on: on ?? null
   });
 }
 function parseSection(raw, components, where) {
@@ -14612,7 +14640,10 @@ function findComponentNameConflicts(entries) {
   }
   return conflicts.sort((a, b) => a.name.localeCompare(b.name));
 }
-var EXAMPLES_SHAPE_MISMATCH = "EXAMPLES_SHAPE_MISMATCH";
+var EXAMPLES_SHAPE_MISMATCH = "EXAMPLES_SHAPE_MISMATCH", PHASE_NAMES;
+var init_module = __esm(() => {
+  PHASE_NAMES = ["init", "resume", "suspend"];
+});
 
 // tools/core/results.js
 class ModuleInfo {
@@ -14784,7 +14815,9 @@ function describeModule(mod, { path = null } = {}) {
   }
   return new ModuleInfo({ path, present, counts, warnings });
 }
-var init_describe = () => {};
+var init_describe = __esm(() => {
+  init_module();
+});
 
 // tools/core/docs.js
 function getSignature(name, fn) {
@@ -15191,7 +15224,7 @@ class Stack2 {
     return new Stack2(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack2(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
@@ -15822,6 +15855,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -15933,7 +15967,7 @@ class App {
     const root = this.state.val;
     const stack = this.makeStack(root);
     const { renderer, rootNode, _renderOpts, _renderState } = this;
-    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    const newState = render(renderer.renderRoot(stack, root, this.rootViewName), rootNode, _renderOpts, _renderState);
     this._renderState = newState;
     return newState.dom;
   }
@@ -16072,12 +16106,71 @@ var init_app = __esm(() => {
   _evs = "dragstart dragover dragend touchstart touchmove touchend touchcancel".split(" ");
 });
 
+// src/on.js
+function phaseOps(phase) {
+  const ops = [];
+  for (const type3 of OP_KINDS)
+    for (const a of phase[type3] ?? [])
+      ops.push({ type: type3, ...a });
+  for (const a of phase.do ?? [])
+    ops.push(a);
+  return ops;
+}
+function resolveArgs(args, self) {
+  return typeof args === "function" ? args(self) ?? [] : args ?? [];
+}
+function phaseHasBubble(phase) {
+  if (!phase)
+    return false;
+  if (phase.bubble?.length)
+    return true;
+  return (phase.do ?? []).some((op) => op.type === "bubble");
+}
+function dispatchPhase(dispatcher, targetPath, phase, self) {
+  if (!phase)
+    return;
+  for (const op of phaseOps(phase)) {
+    const args = resolveArgs(op.args, self);
+    switch (op.type) {
+      case "send":
+        dispatcher.sendAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "bubble":
+        dispatcher.sendAtPath(targetPath, op.name, args, {
+          skipSelf: true,
+          bubbles: true,
+          ...op.opts
+        });
+        break;
+      case "request":
+        dispatcher.requestAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "input":
+        dispatcher.inputAtPath(targetPath, op.name, args, op.opts);
+        break;
+    }
+  }
+}
+var OP_KINDS;
+var init_on = __esm(() => {
+  OP_KINDS = ["send", "bubble", "request", "input"];
+});
+
 // src/util/render.js
 function reindexComponents(comps) {
   for (let i = 0;i < comps.length; i++) {
     comps[i].id = i;
   }
 }
+function serializeContainer(container) {
+  for (const input of container.querySelectorAll("input")) {
+    if (input.value)
+      input.setAttribute("value", input.value);
+    if (input.checked)
+      input.setAttribute("checked", "");
+  }
+  return container.innerHTML;
+}
 function renderToHTMLNode(document2, components, macros, rootState, ParseContext2, opts = { noCache: true }) {
   const container = document2.createElement("div");
   document2.body.appendChild(container);
@@ -16088,14 +16181,11 @@ function renderToHTMLNode(document2, components, macros, rootState, ParseContext
   const scope = app.registerComponents(components);
   if (macros)
     scope.registerMacros(macros);
+  if (opts.requestHandlers)
+    scope.registerRequestHandlers(opts.requestHandlers);
+  app.rootViewName = opts.view ?? null;
   app.transactor.state.set(rootState);
   app.start(opts);
-  for (const input of container.querySelectorAll("input")) {
-    if (input.value)
-      input.setAttribute("value", input.value);
-    if (input.checked)
-      input.setAttribute("checked", "");
-  }
   return {
     container,
     app,
@@ -16105,20 +16195,44 @@ function renderToHTMLNode(document2, components, macros, rootState, ParseContext
     }
   };
 }
-function renderToHTML(document2, components, macros, rootState, ParseContext2) {
-  const { container, cleanup } = renderToHTMLNode(document2, components, macros, rootState, ParseContext2);
-  const html = container.innerHTML;
-  cleanup();
-  return html;
+async function renderToHTMLDriven(document2, components, macros, rootState, ParseContext2, { phase = null, requestHandlers = null, view = null, warn = console.warn } = {}) {
+  const { container, app, cleanup } = renderToHTMLNode(document2, components, macros, rootState, ParseContext2, { noCache: true, requestHandlers, view });
+  try {
+    if (phase) {
+      if (phaseHasBubble(phase))
+        warn("render: a `bubble` action is a no-op here — the example's value is the render root, so there is no ancestor to receive it. Use send/request/input to drive a preset state.");
+      dispatchPhase(rootDispatcher(app.transactor), new Path([]), phase, app.state.val);
+      await app.transactor.settle();
+    }
+    return serializeContainer(container);
+  } finally {
+    cleanup();
+  }
 }
 var init_render = __esm(() => {
   init_app();
   init_components();
+  init_on();
+  init_path();
   init_renderer();
+  init_transactor();
 });
 
 // tools/core/render.js
-function renderExamples(normalized, env, { name = null, title = null, view = null } = {}) {
+function checkView2(value, components, viewName) {
+  if (viewName === "main")
+    return null;
+  const comp = components.find((c) => value instanceof c.Class);
+  if (!comp || comp.views[viewName])
+    return null;
+  const known = Object.keys(comp.views).sort().join(", ");
+  return new Error(`view "${viewName}" is not defined on ${comp.name} (has: ${known})`);
+}
+function handlersFor(normalized, example) {
+  const merged = { ...normalized.requestHandlers ?? {}, ...example.requestHandlers ?? {} };
+  return Object.keys(merged).length > 0 ? merged : null;
+}
+async function renderExamples(normalized, env, { name = null, title = null, view = null } = {}) {
   const sections = [];
   for (const section of normalized.sections) {
     const items = [];
@@ -16132,7 +16246,14 @@ function renderExamples(normalized, env, { name = null, title = null, view = nul
       let html = "";
       let error = null;
       try {
-        html = renderToHTML(env.document, normalized.components, normalized.macros, example.value, env.ParseContext);
+        const bad = checkView2(example.value, normalized.components, viewName);
+        if (bad)
+          throw bad;
+        html = await renderToHTMLDriven(env.document, normalized.components, normalized.macros, example.value, env.ParseContext, {
+          phase: example.on?.init ?? null,
+          requestHandlers: handlersFor(normalized, example),
+          view: viewName
+        });
       } catch (e) {
         error = { message: e.message, stack: e.stack };
       }
@@ -16159,56 +16280,6 @@ var init_render2 = __esm(() => {
   init_render();
 });
 
-// src/on.js
-function phaseOps(phase) {
-  const ops = [];
-  for (const type3 of OP_KINDS)
-    for (const a of phase[type3] ?? [])
-      ops.push({ type: type3, ...a });
-  for (const a of phase.do ?? [])
-    ops.push(a);
-  return ops;
-}
-function resolveArgs(args, self) {
-  return typeof args === "function" ? args(self) ?? [] : args ?? [];
-}
-function phaseHasBubble(phase) {
-  if (!phase)
-    return false;
-  if (phase.bubble?.length)
-    return true;
-  return (phase.do ?? []).some((op) => op.type === "bubble");
-}
-function dispatchPhase(dispatcher, targetPath, phase, self) {
-  if (!phase)
-    return;
-  for (const op of phaseOps(phase)) {
-    const args = resolveArgs(op.args, self);
-    switch (op.type) {
-      case "send":
-        dispatcher.sendAtPath(targetPath, op.name, args, op.opts);
-        break;
-      case "bubble":
-        dispatcher.sendAtPath(targetPath, op.name, args, {
-          skipSelf: true,
-          bubbles: true,
-          ...op.opts
-        });
-        break;
-      case "request":
-        dispatcher.requestAtPath(targetPath, op.name, args, op.opts);
-        break;
-      case "input":
-        dispatcher.inputAtPath(targetPath, op.name, args, op.opts);
-        break;
-    }
-  }
-}
-var OP_KINDS;
-var init_on = __esm(() => {
-  OP_KINDS = ["send", "bubble", "request", "input"];
-});
-
 // tools/core/tests.js
 class Describe {
   constructor({ title, componentName = null, parent = null }) {
@@ -17689,6 +17760,7 @@ async function run5(argv, opts = {}) {
 var describe5 = "Serve a storybook for the project's co-located *.dev.js modules (auto-discovered).", BOOTSTRAP_URL = "/__tutuca_storybook__.js", DIST_PREFIX = "/__tutuca__/", MARGAUI_PREFIX = "/__margaui__/", MIME, MARGAUI_CDN = "https://cdn.jsdelivr.net/npm/margaui/+esm", MARGAUI_THEME = "https://marianoguerra.github.io/margaui/themes/theme.css";
 var init_storybook = __esm(() => {
   init_chai2();
+  init_module();
   init_test();
   init_env2();
   init_errors();
@@ -17867,6 +17939,7 @@ import { statSync as statSync2 } from "node:fs";
 import { parseArgs as parseArgs4 } from "node:util";
 
 // tools/cli/load.js
+init_module();
 import { existsSync as existsSync4 } from "node:fs";
 import { resolve as resolve6 } from "node:path";
 async function loadAndNormalize(modulePath) {
@@ -18016,6 +18089,7 @@ function extractGlobals(argv) {
 function dispatchKnownCommands() {
   return [...Object.keys(COMMANDS), ...Object.keys(NO_MODULE_COMMANDS)];
 }
+var DEV_BUILD_COMMANDS = new Set(["test", "storybook"]);
 async function main() {
   const { opts, rest } = extractGlobals(process.argv.slice(2));
   if (rest.length === 0) {
@@ -18023,6 +18097,8 @@ async function main() {
     return;
   }
   const command = rest[0];
+  if (DEV_BUILD_COMMANDS.has(command))
+    installDevBuildResolveHook();
   if (NO_MODULE_COMMANDS[command]) {
     const commandArgs2 = rest.slice(1);
     const args = opts.help ? [...commandArgs2, "--help"] : commandArgs2;
@@ -18056,8 +18132,6 @@ async function main() {
     opts.module = rest[1];
     commandArgs = rest.slice(2);
   }
-  if (command === "test")
-    installDevBuildResolveHook();
   try {
     await runCommand(cmd, commandArgs, opts);
   } catch (e) {

package/dist/tutuca-dev.ext.js

@@ -637,7 +637,6 @@ var PREDICATES = {
 
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -2183,7 +2182,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -2366,7 +2365,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -2566,6 +2565,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events = new NodeEvents(id);
@@ -6297,7 +6302,7 @@ class Stack {
     return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
@@ -7645,6 +7650,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -7756,7 +7762,7 @@ class App {
     const root = this.state.val;
     const stack = this.makeStack(root);
     const { renderer, rootNode, _renderOpts, _renderState } = this;
-    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    const newState = render(renderer.renderRoot(stack, root, this.rootViewName), rootNode, _renderOpts, _renderState);
     this._renderState = newState;
     return newState.dom;
   }

package/dist/tutuca-dev.js

@@ -8289,7 +8289,6 @@ var PREDICATES = {
 
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -9832,7 +9831,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -10015,7 +10014,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -10215,6 +10214,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events2 = new NodeEvents(id);
@@ -13946,7 +13951,7 @@ class Stack2 {
     return new Stack2(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack2(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
@@ -15294,6 +15299,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -15405,7 +15411,7 @@ class App {
     const root = this.state.val;
     const stack = this.makeStack(root);
     const { renderer, rootNode, _renderOpts, _renderState } = this;
-    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    const newState = render(renderer.renderRoot(stack, root, this.rootViewName), rootNode, _renderOpts, _renderState);
     this._renderState = newState;
     return newState.dom;
   }