tutuca 0.9.109 → 0.9.111

package/dist/tutuca-cli.js

@@ -6210,9 +6210,12 @@ function parseRenderEach(px, value, as, attrs) {
       maybeDeprecateBareXDirective(px, "render-each", "when");
     attrParser._parseWhen(when.value);
   }
-  const lWith = attrs.getNamedItem("loop-with");
-  if (lWith)
+  const lWith = attrs.getNamedItem("@loop-with") ?? attrs.getNamedItem("loop-with");
+  if (lWith) {
+    if (lWith.name.charCodeAt(0) !== 64)
+      maybeDeprecateBareXDirective(px, "render-each", "loop-with");
     attrParser._parseLoopWith(lWith.value);
+  }
   const each = px.addNodeIf(EachNode, seqVal);
   each.iterInfo.whenVal = eachAttr.whenVal ?? null;
   each.iterInfo.loopWithVal = eachAttr.loopWithVal ?? null;
@@ -6726,7 +6729,7 @@ var init_anode = __esm(() => {
     text: xOp([], { wrappable: true, ignoresChildren: true }),
     render: xOp(["as"], { wrappable: true, ignoresChildren: true }),
     "render-it": xOp(["as"], { wrappable: true, ignoresChildren: true }),
-    "render-each": xOp(["as", "when", "loop-with", "@when"], {
+    "render-each": xOp(["as", "when", "loop-with", "@when", "@loop-with"], {
       wrappable: true,
       ignoresChildren: true
     }),
@@ -9473,11 +9476,11 @@ function checkConsistentAttrs(lx, Comp, referencedAlters, referencedDynamics) {
           const iter = node.iterInfo;
           if (iter.whenVal)
             checkConsistentAttrVal(lx, iter.whenVal, env, false, {
-              originAttr: "<x render-each when>"
+              originAttr: "<x render-each @when>"
             });
           if (iter.loopWithVal)
             checkConsistentAttrVal(lx, iter.loopWithVal, env, false, {
-              originAttr: "<x render-each loop-with>"
+              originAttr: "<x render-each @loop-with>"
             });
         }
       }
@@ -9741,7 +9744,7 @@ var init_lint_check = __esm(() => {
   };
   BINDING_MEMBER_TOO_DEEP_RE = /^@[a-zA-Z]\w*\??(\.[a-zA-Z]\w*\??){2,}$/;
   UNSUPPORTED_EXPR_GUIDANCE = {
-    ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed field on the component that returns the value, then reference it as '$methodName'.",
+    ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed value on the component that returns the value, then reference it as '$methodName'.",
     comparison: "Comparisons aren't supported in dynamic attributes. Define a method like 'isFooSelected' that returns the boolean, then reference it as '$isFooSelected'.",
     logical: "Logical operators aren't supported in dynamic attributes. Combine the conditions in a method on the component and reference it as '$methodName'.",
     "call-with-args": "Method calls with arguments aren't supported here. Reference a no-arg method ('$methodName') and read what you need from component state, or split into per-case methods.",
@@ -10076,7 +10079,7 @@ var init_lint_rules = __esm(() => {
       code: DEPRECATED_BARE_X_DIRECTIVE,
       level: "warn",
       group: "Templates / events",
-      summary: "Bare `show`/`hide`/`when` on an `<x>` op is deprecated — use the `@`-prefixed directive (`@show`/`@hide`/`@when`)."
+      summary: "Bare `show`/`hide`/`when`/`loop-with` on an `<x>` op is deprecated — use the `@`-prefixed directive (`@show`/`@hide`/`@when`/`@loop-with`)."
     },
     {
       code: BAD_VALUE,
@@ -10212,7 +10215,7 @@ function badValueMessage(info) {
     case "handler-arg":
       return `Cannot parse handler argument ${v}`;
     case "macro-var":
-      return `Macro variable '^${info.name}' is not defined`;
+      return `Macro parameter '^${info.name}' is not defined`;
     default:
       return `Cannot parse value ${v}`;
   }
@@ -10292,7 +10295,7 @@ function lintIdToMessage(id, info) {
     case "ALT_HANDLER_NOT_REFERENCED":
       return `Alter handler '${info.name}' is defined but never used — remove it or reference it from @when, @enrich-with, or @loop-with`;
     case "DYN_VAL_NOT_DEFINED":
-      return `Dynamic variable '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
+      return `Dynamic binding '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "DYN_ALIAS_NOT_REFERENCED":
       return `Lookup '${info.name}' is defined but never used — remove it or reference it as '*${info.name}' in a view`;
     case "PROVIDE_NOT_ADDRESSABLE":
@@ -10330,9 +10333,9 @@ function lintIdToMessage(id, info) {
       return `Enrich handler '${info.name}' only copies members of the loop value — read them directly${reads ? ` (${reads})` : ""} and remove the '@enrich-with'`;
     }
     case "REDUNDANT_TEMPLATE_STRING":
-      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
+      return `Redundant string template — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
     case "PLACEHOLDERLESS_TEMPLATE_STRING":
-      return `Template string has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
+      return `String template has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
     case "CONSTANT_CONDITION":
       return `Condition is the constant literal ${info.literal} — it never changes; reference a field ('.name') or a method ('$name') instead${fmtOriginSuffix(info)}`;
     case "UNKNOWN_COMPONENT_SPEC_KEY":
@@ -14453,16 +14456,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)
@@ -14509,13 +14519,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) {
@@ -14609,7 +14635,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 {
@@ -14781,7 +14810,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) {
@@ -15819,6 +15850,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -15930,7 +15962,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;
   }
@@ -16069,12 +16101,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);
@@ -16085,14 +16176,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,
@@ -16102,20 +16190,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 = [];
@@ -16129,7 +16241,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 };
       }
@@ -16156,56 +16275,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 }) {
@@ -17686,6 +17755,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();
@@ -17864,6 +17934,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) {

package/dist/tutuca-components.js

@@ -151,7 +151,7 @@ function makeCompositeView({
       @show=".isExpanded"
       class="ml-1 flex flex-col gap-0.5 border-l ${borderClass} pl-2 mt-0.5"
     >
-      <x render-each=".items" loop-with="getPageRange"></x>
+      <x render-each=".items" @loop-with="getPageRange"></x>
     </div>
   </span>`;
 }
@@ -786,13 +786,13 @@ var GRID_BODY = html4`<div
   class="ml-1 grid gap-x-2 gap-y-0.5 items-baseline border-l border-base-content/10 pl-2 mt-0.5"
   style="grid-template-columns: auto 1fr"
 >
-  <x render-each=".items" loop-with="getPageRange"></x>
+  <x render-each=".items" @loop-with="getPageRange"></x>
 </div>`;
 var LIST_BODY = html4`<div
   @show=".isExpanded"
   class="ml-1 flex flex-col gap-0.5 border-l border-base-content/10 pl-2 mt-0.5"
 >
-  <x render-each=".items" loop-with="getPageRange"></x>
+  <x render-each=".items" @loop-with="getPageRange"></x>
 </div>`;
 function makeSchemaView(accent, body = GRID_BODY) {
   return html4`<span class="font-mono text-sm leading-tight inline-block">
@@ -1640,7 +1640,7 @@ function lintMessage(id, info = {}) {
     case "ALT_HANDLER_NOT_DEFINED":
       return `Alter handler '${info.name}' is not defined${originSuffix(info)}`;
     case "DYN_VAL_NOT_DEFINED":
-      return `Dynamic variable '*${info.name}' is not defined${originSuffix(info)}`;
+      return `Dynamic binding '*${info.name}' is not defined${originSuffix(info)}`;
     case "UNKNOWN_COMPONENT_NAME":
       return `Unknown component '${info.name}'${originSuffix(info)}`;
     case "UNKNOWN_DIRECTIVE":
@@ -1648,9 +1648,9 @@ function lintMessage(id, info = {}) {
     case "IF_NO_BRANCH_SET":
       return `'@if.${info.attr}' has no '@then' or '@else' branch${tagSuffix(info)}`;
     case "REDUNDANT_TEMPLATE_STRING":
-      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${originSuffix(info)}`;
+      return `Redundant string template — '{${info.simpler}}' should be just '${info.simpler}'${originSuffix(info)}`;
     case "PLACEHOLDERLESS_TEMPLATE_STRING":
-      return `Template string has no dynamic parts — use the literal ${info.literal} instead${originSuffix(info)}`;
+      return `String template has no dynamic parts — use the literal ${info.literal} instead${originSuffix(info)}`;
     case "CONSTANT_CONDITION":
       return `Constant condition ${info.literal} — reference a field ('.name') or method ('$name')${originSuffix(info)}`;
     case "ASYNC_HANDLER":

package/dist/tutuca-dev.ext.js

@@ -2375,9 +2375,12 @@ function parseRenderEach(px, value, as, attrs) {
       maybeDeprecateBareXDirective(px, "render-each", "when");
     attrParser._parseWhen(when.value);
   }
-  const lWith = attrs.getNamedItem("loop-with");
-  if (lWith)
+  const lWith = attrs.getNamedItem("@loop-with") ?? attrs.getNamedItem("loop-with");
+  if (lWith) {
+    if (lWith.name.charCodeAt(0) !== 64)
+      maybeDeprecateBareXDirective(px, "render-each", "loop-with");
     attrParser._parseLoopWith(lWith.value);
+  }
   const each = px.addNodeIf(EachNode, seqVal);
   each.iterInfo.whenVal = eachAttr.whenVal ?? null;
   each.iterInfo.loopWithVal = eachAttr.loopWithVal ?? null;
@@ -2513,7 +2516,7 @@ var X_OPS = {
   text: xOp([], { wrappable: true, ignoresChildren: true }),
   render: xOp(["as"], { wrappable: true, ignoresChildren: true }),
   "render-it": xOp(["as"], { wrappable: true, ignoresChildren: true }),
-  "render-each": xOp(["as", "when", "loop-with", "@when"], {
+  "render-each": xOp(["as", "when", "loop-with", "@when", "@loop-with"], {
     wrappable: true,
     ignoresChildren: true
   }),
@@ -5200,7 +5203,7 @@ function classifyBadValue(value) {
 }
 var BINDING_MEMBER_TOO_DEEP_RE = /^@[a-zA-Z]\w*\??(\.[a-zA-Z]\w*\??){2,}$/;
 var UNSUPPORTED_EXPR_GUIDANCE = {
-  ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed field on the component that returns the value, then reference it as '$methodName'.",
+  ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed value on the component that returns the value, then reference it as '$methodName'.",
   comparison: "Comparisons aren't supported in dynamic attributes. Define a method like 'isFooSelected' that returns the boolean, then reference it as '$isFooSelected'.",
   logical: "Logical operators aren't supported in dynamic attributes. Combine the conditions in a method on the component and reference it as '$methodName'.",
   "call-with-args": "Method calls with arguments aren't supported here. Reference a no-arg method ('$methodName') and read what you need from component state, or split into per-case methods.",
@@ -5728,11 +5731,11 @@ function checkConsistentAttrs(lx, Comp, referencedAlters, referencedDynamics) {
           const iter = node.iterInfo;
           if (iter.whenVal)
             checkConsistentAttrVal(lx, iter.whenVal, env, false, {
-              originAttr: "<x render-each when>"
+              originAttr: "<x render-each @when>"
             });
           if (iter.loopWithVal)
             checkConsistentAttrVal(lx, iter.loopWithVal, env, false, {
-              originAttr: "<x render-each loop-with>"
+              originAttr: "<x render-each @loop-with>"
             });
         }
       }
@@ -7399,7 +7402,7 @@ function badValueMessage(info) {
     case "handler-arg":
       return `Cannot parse handler argument ${v}`;
     case "macro-var":
-      return `Macro variable '^${info.name}' is not defined`;
+      return `Macro parameter '^${info.name}' is not defined`;
     default:
       return `Cannot parse value ${v}`;
   }
@@ -7479,7 +7482,7 @@ function lintIdToMessage(id, info) {
     case "ALT_HANDLER_NOT_REFERENCED":
       return `Alter handler '${info.name}' is defined but never used — remove it or reference it from @when, @enrich-with, or @loop-with`;
     case "DYN_VAL_NOT_DEFINED":
-      return `Dynamic variable '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
+      return `Dynamic binding '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "DYN_ALIAS_NOT_REFERENCED":
       return `Lookup '${info.name}' is defined but never used — remove it or reference it as '*${info.name}' in a view`;
     case "PROVIDE_NOT_ADDRESSABLE":
@@ -7517,9 +7520,9 @@ function lintIdToMessage(id, info) {
       return `Enrich handler '${info.name}' only copies members of the loop value — read them directly${reads ? ` (${reads})` : ""} and remove the '@enrich-with'`;
     }
     case "REDUNDANT_TEMPLATE_STRING":
-      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
+      return `Redundant string template — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
     case "PLACEHOLDERLESS_TEMPLATE_STRING":
-      return `Template string has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
+      return `String template has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
     case "CONSTANT_CONDITION":
       return `Condition is the constant literal ${info.literal} — it never changes; reference a field ('.name') or a method ('$name') instead${fmtOriginSuffix(info)}`;
     case "UNKNOWN_COMPONENT_SPEC_KEY":
@@ -7642,6 +7645,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -7753,7 +7757,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

@@ -10024,9 +10024,12 @@ function parseRenderEach(px, value, as, attrs) {
       maybeDeprecateBareXDirective(px, "render-each", "when");
     attrParser._parseWhen(when.value);
   }
-  const lWith = attrs.getNamedItem("loop-with");
-  if (lWith)
+  const lWith = attrs.getNamedItem("@loop-with") ?? attrs.getNamedItem("loop-with");
+  if (lWith) {
+    if (lWith.name.charCodeAt(0) !== 64)
+      maybeDeprecateBareXDirective(px, "render-each", "loop-with");
     attrParser._parseLoopWith(lWith.value);
+  }
   const each = px.addNodeIf(EachNode, seqVal);
   each.iterInfo.whenVal = eachAttr.whenVal ?? null;
   each.iterInfo.loopWithVal = eachAttr.loopWithVal ?? null;
@@ -10162,7 +10165,7 @@ var X_OPS = {
   text: xOp([], { wrappable: true, ignoresChildren: true }),
   render: xOp(["as"], { wrappable: true, ignoresChildren: true }),
   "render-it": xOp(["as"], { wrappable: true, ignoresChildren: true }),
-  "render-each": xOp(["as", "when", "loop-with", "@when"], {
+  "render-each": xOp(["as", "when", "loop-with", "@when", "@loop-with"], {
     wrappable: true,
     ignoresChildren: true
   }),
@@ -12849,7 +12852,7 @@ function classifyBadValue(value) {
 }
 var BINDING_MEMBER_TOO_DEEP_RE = /^@[a-zA-Z]\w*\??(\.[a-zA-Z]\w*\??){2,}$/;
 var UNSUPPORTED_EXPR_GUIDANCE = {
-  ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed field on the component that returns the value, then reference it as '$methodName'.",
+  ternary: "Ternary expressions aren't supported in dynamic attributes. Define a method or computed value on the component that returns the value, then reference it as '$methodName'.",
   comparison: "Comparisons aren't supported in dynamic attributes. Define a method like 'isFooSelected' that returns the boolean, then reference it as '$isFooSelected'.",
   logical: "Logical operators aren't supported in dynamic attributes. Combine the conditions in a method on the component and reference it as '$methodName'.",
   "call-with-args": "Method calls with arguments aren't supported here. Reference a no-arg method ('$methodName') and read what you need from component state, or split into per-case methods.",
@@ -13377,11 +13380,11 @@ function checkConsistentAttrs(lx, Comp, referencedAlters, referencedDynamics) {
           const iter = node.iterInfo;
           if (iter.whenVal)
             checkConsistentAttrVal(lx, iter.whenVal, env, false, {
-              originAttr: "<x render-each when>"
+              originAttr: "<x render-each @when>"
             });
           if (iter.loopWithVal)
             checkConsistentAttrVal(lx, iter.loopWithVal, env, false, {
-              originAttr: "<x render-each loop-with>"
+              originAttr: "<x render-each @loop-with>"
             });
         }
       }
@@ -15048,7 +15051,7 @@ function badValueMessage(info) {
     case "handler-arg":
       return `Cannot parse handler argument ${v}`;
     case "macro-var":
-      return `Macro variable '^${info.name}' is not defined`;
+      return `Macro parameter '^${info.name}' is not defined`;
     default:
       return `Cannot parse value ${v}`;
   }
@@ -15128,7 +15131,7 @@ function lintIdToMessage(id, info) {
     case "ALT_HANDLER_NOT_REFERENCED":
       return `Alter handler '${info.name}' is defined but never used — remove it or reference it from @when, @enrich-with, or @loop-with`;
     case "DYN_VAL_NOT_DEFINED":
-      return `Dynamic variable '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
+      return `Dynamic binding '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "DYN_ALIAS_NOT_REFERENCED":
       return `Lookup '${info.name}' is defined but never used — remove it or reference it as '*${info.name}' in a view`;
     case "PROVIDE_NOT_ADDRESSABLE":
@@ -15166,9 +15169,9 @@ function lintIdToMessage(id, info) {
       return `Enrich handler '${info.name}' only copies members of the loop value — read them directly${reads ? ` (${reads})` : ""} and remove the '@enrich-with'`;
     }
     case "REDUNDANT_TEMPLATE_STRING":
-      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
+      return `Redundant string template — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
     case "PLACEHOLDERLESS_TEMPLATE_STRING":
-      return `Template string has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
+      return `String template has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
     case "CONSTANT_CONDITION":
       return `Condition is the constant literal ${info.literal} — it never changes; reference a field ('.name') or a method ('$name') instead${fmtOriginSuffix(info)}`;
     case "UNKNOWN_COMPONENT_SPEC_KEY":
@@ -15291,6 +15294,7 @@ class App {
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
     this._renderState = null;
+    this.rootViewName = null;
   }
   get state() {
     return this.transactor.state;
@@ -15402,7 +15406,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;
   }