tutuca 0.9.100 → 0.9.102

package/dist/tutuca-cli.js

@@ -3447,9 +3447,10 @@ function resolveComponentName(value, components) {
 }
 
 class ExampleSection {
-  constructor({ title, description = null, items = [] }) {
+  constructor({ title, description = null, group = "", items = [] }) {
     this.title = title;
     this.description = description;
+    this.group = group;
     this.items = items;
   }
 }
@@ -3500,9 +3501,13 @@ function parseSection(raw, components, where) {
   if (items.length === 0) {
     throw shapeError(`section at ${where} has no items`, where);
   }
+  if (raw.group != null && typeof raw.group !== "string") {
+    throw shapeError(`section at ${where} has a non-string "group" (got ${typeof raw.group}); ` + `group must be a string naming the sidebar group, or be omitted`, where);
+  }
   return new ExampleSection({
     title: raw.title ?? "Examples",
     description: raw.description ?? null,
+    group: raw.group ?? "",
     items
   });
 }
@@ -3547,6 +3552,34 @@ function normalizeModule(mod, { path = null } = {}) {
     present
   };
 }
+function findComponentNameConflicts(entries) {
+  const byName = new Map;
+  for (const { path, components } of entries) {
+    for (const comp of components ?? []) {
+      if (!comp || typeof comp.name !== "string")
+        continue;
+      let objs = byName.get(comp.name);
+      if (!objs)
+        byName.set(comp.name, objs = new Map);
+      let paths = objs.get(comp);
+      if (!paths)
+        objs.set(comp, paths = new Set);
+      if (path != null)
+        paths.add(path);
+    }
+  }
+  const conflicts = [];
+  for (const [name, objs] of byName) {
+    if (objs.size < 2)
+      continue;
+    const paths = new Set;
+    for (const set2 of objs.values())
+      for (const p of set2)
+        paths.add(p);
+    conflicts.push({ name, paths: [...paths].sort() });
+  }
+  return conflicts.sort((a, b) => a.name.localeCompare(b.name));
+}
 var EXAMPLES_SHAPE_MISMATCH = "EXAMPLES_SHAPE_MISMATCH";
 
 // tools/core/results.js
@@ -9783,13 +9816,16 @@ class Renderer {
     if (cachedNode)
       return cachedNode;
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
+    const body = this.renderView(view, stack);
+    if (body == null)
+      return null;
     const meta = this._renderMetadata({
       $: "Comp",
       nid: node?.nodeId ?? null,
       cid: comp.id,
       vid: view.name
     });
-    const dom = new VFragment([meta, this.renderView(view, stack)]);
+    const dom = new VFragment([meta, body]);
     this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
@@ -9802,7 +9838,8 @@ class Renderer {
     const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
     const renderOne = (key, value, attrName) => {
       const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
-      this.pushEachEntry(r, node.nodeId, attrName, key, dom);
+      if (dom != null)
+        this.pushEachEntry(r, node.nodeId, attrName, key, dom);
     };
     if (keys)
       imKeysIter(seq, renderOne, keys);
@@ -9829,7 +9866,8 @@ class Renderer {
         this.pushEachEntry(r, nid, attrName, key, cachedNode);
       else {
         const dom = this.renderView(view, stack.enter(value, binds, false));
-        this.pushEachEntry(r, nid, attrName, key, dom);
+        if (dom != null)
+          this.pushEachEntry(r, nid, attrName, key, dom);
         this.cache.set(cachePath, cacheKey, dom);
       }
     };
@@ -9958,7 +9996,8 @@ function parseXOp(attrs, childs, opIdx, px) {
   if (attrs.length <= opIdx)
     return maybeFragment(childs);
   const { name, value } = attrs[opIdx];
-  const as = attrs.getNamedItem("as")?.value ?? null;
+  const asAttr = attrs.getNamedItem("as")?.value ?? null;
+  const as = asAttr === null ? null : parseViewName(asAttr, px);
   let node;
   switch (name) {
     case "slot":
@@ -9998,6 +10037,9 @@ function parseXOpVal(opName, value, px, parserFn) {
     px.onParseIssue("bad-value", { role: "x-op", op: opName, value });
   return val;
 }
+function parseViewName(s, px) {
+  return vp.parseText(s, px) ?? vp.const(s);
+}
 function processXExtras(node, attrs, opName, startIdx, px) {
   const { consumed, wrappable } = X_OPS[opName];
   const wrappers = [];
@@ -10427,16 +10469,19 @@ var init_anode = __esm(() => {
     }
   };
   RenderViewId = class RenderViewId extends ANode {
-    constructor(nodeId, val, viewId) {
+    constructor(nodeId, val, viewVal) {
       super(nodeId, val);
-      this.viewId = viewId;
+      this.viewVal = viewVal;
+    }
+    evalViewName(stack) {
+      return this.viewVal ? this.viewVal.eval(stack) : null;
     }
     setDataAttr(_key, _val) {}
   };
   RenderNode = class RenderNode extends RenderViewId {
     render(stack, rx) {
       const newStack = stack.enter(this.val.eval(stack), {}, true);
-      return rx.renderIt(newStack, this, "", this.viewId);
+      return rx.renderIt(newStack, this, "", this.evalViewName(stack));
     }
     toPathStep(ctx) {
       if (this.val instanceof DynVal)
@@ -10447,7 +10492,7 @@ var init_anode = __esm(() => {
   RenderItNode = class RenderItNode extends RenderViewId {
     render(stack, rx) {
       const newStack = stack.enter(stack.it, {}, true);
-      return rx.renderIt(newStack, this, "", this.viewId);
+      return rx.renderIt(newStack, this, "", this.evalViewName(stack));
     }
     toPathStep(ctx) {
       const next = ctx.next();
@@ -10463,12 +10508,12 @@ var init_anode = __esm(() => {
     }
   };
   RenderEachNode = class RenderEachNode extends RenderViewId {
-    constructor(nodeId, val, viewId) {
-      super(nodeId, val, viewId);
+    constructor(nodeId, val, viewVal) {
+      super(nodeId, val, viewVal);
       this.iterInfo = new IterInfo(val, null, null, null);
     }
     render(stack, rx) {
-      return rx.renderEach(stack, this.iterInfo, this, this.viewId);
+      return rx.renderEach(stack, this.iterInfo, this, this.evalViewName(stack));
     }
     toPathStep(ctx) {
       if (this.val instanceof DynVal)
@@ -13003,6 +13048,7 @@ function checkComponent(Comp, lx = new LintContext, { wellKnownExtras = EMPTY_SE
   return lx.push({ componentName: Comp.name }, () => {
     checkUnknownSpecKeys(lx, Comp, wellKnownExtras);
     checkFieldDeclarations(lx, Comp);
+    checkRecordFieldNameCollisions(lx, Comp);
     checkProvidesAreAddressable(lx, Comp);
     checkLookupShapes(lx, Comp);
     checkHandlersNotAsync(lx, Comp);
@@ -13393,6 +13439,16 @@ function checkFieldDeclarations(lx, Comp) {
     }
   }
 }
+function checkRecordFieldNameCollisions(lx, Comp) {
+  const fields = Comp.Class?.getMetaClass?.().fields;
+  if (!fields)
+    return;
+  for (const name in fields) {
+    if (RECORD_FIELD_NAME_COLLISIONS.has(name)) {
+      lx.error(FIELD_NAME_RESERVED_BY_RECORD, { name });
+    }
+  }
+}
 function checkUnreferencedAlterHandlers(lx, Comp, referencedAlters) {
   for (const name in Comp.alter) {
     if (!referencedAlters.has(name)) {
@@ -13554,7 +13610,7 @@ class LintContext {
     this.reports.push({ id, info, level, context: { ...this.frame }, suggestion });
   }
 }
-var KNOWN_COMPONENT_SPEC_KEYS, EMPTY_SET2, FRAMEWORK_WELL_KNOWN_EXTRAS, KNOWN_DIRECTIVE_NAMES, ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", DYN_VAL_NOT_DEFINED = "DYN_VAL_NOT_DEFINED", DYN_ALIAS_NOT_REFERENCED = "DYN_ALIAS_NOT_REFERENCED", PROVIDE_NOT_ADDRESSABLE = "PROVIDE_NOT_ADDRESSABLE", LOOKUP_BAD_SHAPE = "LOOKUP_BAD_SHAPE", LOOKUP_TARGET_MALFORMED = "LOOKUP_TARGET_MALFORMED", RENDER_IT_OUTSIDE_OF_LOOP = "RENDER_IT_OUTSIDE_OF_LOOP", UNKNOWN_EVENT_MODIFIER = "UNKNOWN_EVENT_MODIFIER", UNKNOWN_HANDLER_ARG_NAME = "UNKNOWN_HANDLER_ARG_NAME", INPUT_HANDLER_NOT_IMPLEMENTED = "INPUT_HANDLER_NOT_IMPLEMENTED", INPUT_HANDLER_NOT_REFERENCED = "INPUT_HANDLER_NOT_REFERENCED", INPUT_HANDLER_METHOD_NOT_IMPLEMENTED = "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED", INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD = "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD", INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER = "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER", FIELD_VAL_NOT_DEFINED = "FIELD_VAL_NOT_DEFINED", FIELD_VAL_IS_METHOD = "FIELD_VAL_IS_METHOD", METHOD_VAL_NOT_DEFINED = "METHOD_VAL_NOT_DEFINED", METHOD_VAL_IS_FIELD = "METHOD_VAL_IS_FIELD", DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION", IF_NO_BRANCH_SET = "IF_NO_BRANCH_SET", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", UNKNOWN_DIRECTIVE = "UNKNOWN_DIRECTIVE", UNKNOWN_X_OP = "UNKNOWN_X_OP", UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR", MAYBE_DROP_AT_PREFIX = "MAYBE_DROP_AT_PREFIX", MAYBE_ADD_AT_PREFIX = "MAYBE_ADD_AT_PREFIX", BAD_VALUE = "BAD_VALUE", UNSUPPORTED_EXPR_SYNTAX = "UNSUPPORTED_EXPR_SYNTAX", REDUNDANT_TEMPLATE_STRING = "REDUNDANT_TEMPLATE_STRING", PLACEHOLDERLESS_TEMPLATE_STRING = "PLACEHOLDERLESS_TEMPLATE_STRING", UNKNOWN_COMPONENT_SPEC_KEY = "UNKNOWN_COMPONENT_SPEC_KEY", COMP_FIELD_BAD_SHAPE = "COMP_FIELD_BAD_SHAPE", ASYNC_HANDLER = "ASYNC_HANDLER", TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE = "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE", GLOBAL_SELECTOR_IN_SCOPED_STYLE = "GLOBAL_SELECTOR_IN_SCOPED_STYLE", X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, HOST_DIRECTIVE_ONLY_NAMES, LEVEL_WARN2 = "warn", LEVEL_ERROR2 = "error", LEVEL_HINT = "hint", PARSE_ISSUES, UNSUPPORTED_EXPR_GUIDANCE, HTML_LINT_OPTS, NO_WRAPPERS, KNOWN_HANDLER_NAMES, fixTo = (from, to) => ({ kind: "rewrite", from, to }), ATTR_VAL_CHECKERS, NODE_KIND_TO_CTX, HANDLER_CHANNELS, ASYNC_HANDLER_HELP, NON_NESTABLE_AT_RULE, GLOBAL_LEADING_SELECTOR, IGNORE_DIRECTIVE, blankRun = (m) => m.replace(/[^\n]/g, " "), STYLE_TO_GLOBAL_HELP, KNOWN_LOOKUP_KEYS, LintParseContext;
+var KNOWN_COMPONENT_SPEC_KEYS, EMPTY_SET2, FRAMEWORK_WELL_KNOWN_EXTRAS, KNOWN_DIRECTIVE_NAMES, ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", DYN_VAL_NOT_DEFINED = "DYN_VAL_NOT_DEFINED", DYN_ALIAS_NOT_REFERENCED = "DYN_ALIAS_NOT_REFERENCED", PROVIDE_NOT_ADDRESSABLE = "PROVIDE_NOT_ADDRESSABLE", LOOKUP_BAD_SHAPE = "LOOKUP_BAD_SHAPE", LOOKUP_TARGET_MALFORMED = "LOOKUP_TARGET_MALFORMED", RENDER_IT_OUTSIDE_OF_LOOP = "RENDER_IT_OUTSIDE_OF_LOOP", UNKNOWN_EVENT_MODIFIER = "UNKNOWN_EVENT_MODIFIER", UNKNOWN_HANDLER_ARG_NAME = "UNKNOWN_HANDLER_ARG_NAME", INPUT_HANDLER_NOT_IMPLEMENTED = "INPUT_HANDLER_NOT_IMPLEMENTED", INPUT_HANDLER_NOT_REFERENCED = "INPUT_HANDLER_NOT_REFERENCED", INPUT_HANDLER_METHOD_NOT_IMPLEMENTED = "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED", INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD = "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD", INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER = "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER", FIELD_VAL_NOT_DEFINED = "FIELD_VAL_NOT_DEFINED", FIELD_VAL_IS_METHOD = "FIELD_VAL_IS_METHOD", METHOD_VAL_NOT_DEFINED = "METHOD_VAL_NOT_DEFINED", METHOD_VAL_IS_FIELD = "METHOD_VAL_IS_FIELD", DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION", IF_NO_BRANCH_SET = "IF_NO_BRANCH_SET", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", UNKNOWN_DIRECTIVE = "UNKNOWN_DIRECTIVE", UNKNOWN_X_OP = "UNKNOWN_X_OP", UNKNOWN_X_ATTR = "UNKNOWN_X_ATTR", MAYBE_DROP_AT_PREFIX = "MAYBE_DROP_AT_PREFIX", MAYBE_ADD_AT_PREFIX = "MAYBE_ADD_AT_PREFIX", BAD_VALUE = "BAD_VALUE", UNSUPPORTED_EXPR_SYNTAX = "UNSUPPORTED_EXPR_SYNTAX", REDUNDANT_TEMPLATE_STRING = "REDUNDANT_TEMPLATE_STRING", PLACEHOLDERLESS_TEMPLATE_STRING = "PLACEHOLDERLESS_TEMPLATE_STRING", UNKNOWN_COMPONENT_SPEC_KEY = "UNKNOWN_COMPONENT_SPEC_KEY", COMP_FIELD_BAD_SHAPE = "COMP_FIELD_BAD_SHAPE", ASYNC_HANDLER = "ASYNC_HANDLER", TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE = "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE", GLOBAL_SELECTOR_IN_SCOPED_STYLE = "GLOBAL_SELECTOR_IN_SCOPED_STYLE", FIELD_NAME_RESERVED_BY_RECORD = "FIELD_NAME_RESERVED_BY_RECORD", RECORD_FIELD_NAME_COLLISIONS, X_KNOWN_OP_NAMES, X_KNOWN_ATTR_NAMES, HOST_DIRECTIVE_ONLY_NAMES, LEVEL_WARN2 = "warn", LEVEL_ERROR2 = "error", LEVEL_HINT = "hint", PARSE_ISSUES, UNSUPPORTED_EXPR_GUIDANCE, HTML_LINT_OPTS, NO_WRAPPERS, KNOWN_HANDLER_NAMES, fixTo = (from, to) => ({ kind: "rewrite", from, to }), ATTR_VAL_CHECKERS, NODE_KIND_TO_CTX, HANDLER_CHANNELS, ASYNC_HANDLER_HELP, NON_NESTABLE_AT_RULE, GLOBAL_LEADING_SELECTOR, IGNORE_DIRECTIVE, blankRun = (m) => m.replace(/[^\n]/g, " "), STYLE_TO_GLOBAL_HELP, KNOWN_LOOKUP_KEYS, LintParseContext;
 var init_lint_check = __esm(() => {
   init_anode();
   init_htmllinter();
@@ -13575,6 +13631,7 @@ var init_lint_check = __esm(() => {
     "then",
     "else"
   ]);
+  RECORD_FIELD_NAME_COLLISIONS = new Set(["entries", "hashCode"]);
   X_KNOWN_OP_NAMES = new Set([
     "slot",
     "text",
@@ -15408,6 +15465,12 @@ var init_lint_rules = __esm(() => {
       level: "error",
       group: "Component field declarations",
       summary: "`fields: { x: { component, args } }` shape is wrong: `component` must be a string and `args` must be a plain object."
+    },
+    {
+      code: FIELD_NAME_RESERVED_BY_RECORD,
+      level: "error",
+      group: "Component field declarations",
+      summary: "Field name matches an Immutable Record API member, so `.field` reads the API member instead of the value."
     }
   ];
 });
@@ -15501,6 +15564,8 @@ function lintIdToMessage(id, info) {
       return `'$${info.name}' is a method reference, but '${info.name}' is defined as an input handler${fmtEventSuffix(info)}`;
     case "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER":
       return `'${info.name}' is an input handler reference, but '${info.name}' is defined as a method${fmtEventSuffix(info)}`;
+    case "FIELD_NAME_RESERVED_BY_RECORD":
+      return `Field '${info.name}' collides with the Immutable Record API: '.${info.name}' reads the Record member, not your value — rename the field (its value is only reachable via .get('${info.name}'))`;
     case "FIELD_VAL_NOT_DEFINED":
       return `Field '.${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "FIELD_VAL_IS_METHOD":
@@ -16205,6 +16270,23 @@ async function runDevTests(projectDir, devModuleUrls) {
   }
   return { totalTests, failedTests, withTests, failures, importErrors };
 }
+async function checkComponentNameConflicts(projectDir, devModuleUrls) {
+  await createNodeEnv();
+  const entries = [];
+  for (const url of devModuleUrls) {
+    const abs = resolve5(projectDir, url.slice(1));
+    try {
+      const mod = await import(abs);
+      const components = typeof mod.getComponents === "function" ? mod.getComponents() : [];
+      entries.push({ path: url, components });
+    } catch {}
+  }
+  return findComponentNameConflicts(entries);
+}
+function formatComponentNameConflict(c) {
+  return `  ! component name conflict: "${c.name}" is defined by different component objects in ${c.paths.length} modules (${c.paths.join(", ")}). They share a name but are distinct objects, so the storybook registers one and the other renders uncompiled (throws on ` + `render). Make those modules import the same definition — e.g. all from "tutuca/components" ` + `rather than a relative path.
+`;
+}
 async function discoverModules(projectDir, devModuleUrls) {
   await createNodeEnv();
   const modules = [];
@@ -16346,6 +16428,7 @@ async function run4(argv, opts = {}) {
     const imports2 = buildImports(base2, { margaui });
     const modules = await discoverModules(projectDir, devModuleUrls);
     const tests = parsed.values["no-tests"] ? null : await runDevTests(projectDir, devModuleUrls);
+    const componentNameConflicts = await checkComponentNameConflicts(projectDir, devModuleUrls);
     const source = tutucaSource(base2);
     const result = {
       projectDir,
@@ -16353,7 +16436,8 @@ async function run4(argv, opts = {}) {
       options: { margaui, check, noCache, runTests: !parsed.values["no-tests"] },
       imports: imports2,
       modules,
-      tests
+      tests,
+      componentNameConflicts
     };
     if (opts.format === "json") {
       process.stdout.write(`${JSON.stringify(result, null, 2)}
@@ -16396,6 +16480,9 @@ async function run4(argv, opts = {}) {
       process.stdout.write(`  tests: skipped (--no-tests)
 `);
     }
+    for (const c of componentNameConflicts) {
+      process.stdout.write(formatComponentNameConflict(c));
+    }
     return;
   }
   if (!parsed.values["no-tests"]) {
@@ -16416,6 +16503,9 @@ async function run4(argv, opts = {}) {
       }
     }
   }
+  for (const c of await checkComponentNameConflicts(projectDir, devModuleUrls)) {
+    process.stdout.write(formatComponentNameConflict(c));
+  }
   const { base, serveDist } = resolveTutucaBase(projectDir, self, false);
   const imports = buildImports(base, { margaui });
   const indexHtml = renderIndexHtml(imports, { margaui, bootstrapUrl: BOOTSTRAP_URL });

package/dist/tutuca-dev.ext.js

@@ -1825,13 +1825,16 @@ class Renderer {
     if (cachedNode)
       return cachedNode;
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
+    const body = this.renderView(view, stack);
+    if (body == null)
+      return null;
     const meta = this._renderMetadata({
       $: "Comp",
       nid: node?.nodeId ?? null,
       cid: comp.id,
       vid: view.name
     });
-    const dom = new VFragment([meta, this.renderView(view, stack)]);
+    const dom = new VFragment([meta, body]);
     this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
@@ -1844,7 +1847,8 @@ class Renderer {
     const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
     const renderOne = (key, value, attrName) => {
       const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
-      this.pushEachEntry(r, node.nodeId, attrName, key, dom);
+      if (dom != null)
+        this.pushEachEntry(r, node.nodeId, attrName, key, dom);
     };
     if (keys)
       imKeysIter(seq, renderOne, keys);
@@ -1871,7 +1875,8 @@ class Renderer {
         this.pushEachEntry(r, nid, attrName, key, cachedNode);
       else {
         const dom = this.renderView(view, stack.enter(value, binds, false));
-        this.pushEachEntry(r, nid, attrName, key, dom);
+        if (dom != null)
+          this.pushEachEntry(r, nid, attrName, key, dom);
         this.cache.set(cachePath, cacheKey, dom);
       }
     };
@@ -2156,7 +2161,8 @@ function parseXOp(attrs, childs, opIdx, px) {
   if (attrs.length <= opIdx)
     return maybeFragment(childs);
   const { name, value } = attrs[opIdx];
-  const as = attrs.getNamedItem("as")?.value ?? null;
+  const asAttr = attrs.getNamedItem("as")?.value ?? null;
+  const as = asAttr === null ? null : parseViewName(asAttr, px);
   let node;
   switch (name) {
     case "slot":
@@ -2196,6 +2202,9 @@ function parseXOpVal(opName, value, px, parserFn) {
     px.onParseIssue("bad-value", { role: "x-op", op: opName, value });
   return val;
 }
+function parseViewName(s, px) {
+  return vp.parseText(s, px) ?? vp.const(s);
+}
 function processXExtras(node, attrs, opName, startIdx, px) {
   const { consumed, wrappable } = X_OPS[opName];
   const wrappers = [];
@@ -2292,9 +2301,12 @@ class Macro {
 }
 
 class RenderViewId extends ANode {
-  constructor(nodeId, val, viewId) {
+  constructor(nodeId, val, viewVal) {
     super(nodeId, val);
-    this.viewId = viewId;
+    this.viewVal = viewVal;
+  }
+  evalViewName(stack) {
+    return this.viewVal ? this.viewVal.eval(stack) : null;
   }
   setDataAttr(_key, _val) {}
 }
@@ -2308,7 +2320,7 @@ function dynRenderStep(comp, name, key) {
 class RenderNode extends RenderViewId {
   render(stack, rx) {
     const newStack = stack.enter(this.val.eval(stack), {}, true);
-    return rx.renderIt(newStack, this, "", this.viewId);
+    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
   }
   toPathStep(ctx) {
     if (this.val instanceof DynVal)
@@ -2320,7 +2332,7 @@ class RenderNode extends RenderViewId {
 class RenderItNode extends RenderViewId {
   render(stack, rx) {
     const newStack = stack.enter(stack.it, {}, true);
-    return rx.renderIt(newStack, this, "", this.viewId);
+    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
   }
   toPathStep(ctx) {
     const next = ctx.next();
@@ -2337,12 +2349,12 @@ class RenderItNode extends RenderViewId {
 }
 
 class RenderEachNode extends RenderViewId {
-  constructor(nodeId, val, viewId) {
-    super(nodeId, val, viewId);
+  constructor(nodeId, val, viewVal) {
+    super(nodeId, val, viewVal);
     this.iterInfo = new IterInfo(val, null, null, null);
   }
   render(stack, rx) {
-    return rx.renderEach(stack, this.iterInfo, this, this.viewId);
+    return rx.renderEach(stack, this.iterInfo, this, this.evalViewName(stack));
   }
   toPathStep(ctx) {
     if (this.val instanceof DynVal)
@@ -2628,6 +2640,9 @@ class View {
       this.anode = optimizeNode(this.anode);
   }
   render(stack, rx) {
+    if (this.anode === null) {
+      throw new Error(`tutuca: view "${this.name}" was rendered before it was compiled — its ` + `component is not registered in this app/scope. Source: ` + `${String(this.rawView).slice(0, 80).replace(/\s+/g, " ")}…`);
+    }
     return this.anode.render(stack, rx);
   }
 }
@@ -5081,6 +5096,8 @@ var COMP_FIELD_BAD_SHAPE = "COMP_FIELD_BAD_SHAPE";
 var ASYNC_HANDLER = "ASYNC_HANDLER";
 var TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE = "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE";
 var GLOBAL_SELECTOR_IN_SCOPED_STYLE = "GLOBAL_SELECTOR_IN_SCOPED_STYLE";
+var FIELD_NAME_RESERVED_BY_RECORD = "FIELD_NAME_RESERVED_BY_RECORD";
+var RECORD_FIELD_NAME_COLLISIONS = new Set(["entries", "hashCode"]);
 var X_KNOWN_OP_NAMES = new Set([
   "slot",
   "text",
@@ -5169,6 +5186,7 @@ function checkComponent(Comp, lx = new LintContext, { wellKnownExtras = EMPTY_SE
   return lx.push({ componentName: Comp.name }, () => {
     checkUnknownSpecKeys(lx, Comp, wellKnownExtras);
     checkFieldDeclarations(lx, Comp);
+    checkRecordFieldNameCollisions(lx, Comp);
     checkProvidesAreAddressable(lx, Comp);
     checkLookupShapes(lx, Comp);
     checkHandlersNotAsync(lx, Comp);
@@ -5661,6 +5679,16 @@ function checkFieldDeclarations(lx, Comp) {
     }
   }
 }
+function checkRecordFieldNameCollisions(lx, Comp) {
+  const fields = Comp.Class?.getMetaClass?.().fields;
+  if (!fields)
+    return;
+  for (const name in fields) {
+    if (RECORD_FIELD_NAME_COLLISIONS.has(name)) {
+      lx.error(FIELD_NAME_RESERVED_BY_RECORD, { name });
+    }
+  }
+}
 function checkUnreferencedAlterHandlers(lx, Comp, referencedAlters) {
   for (const name in Comp.alter) {
     if (!referencedAlters.has(name)) {
@@ -7249,6 +7277,8 @@ function lintIdToMessage(id, info) {
       return `'$${info.name}' is a method reference, but '${info.name}' is defined as an input handler${fmtEventSuffix(info)}`;
     case "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER":
       return `'${info.name}' is an input handler reference, but '${info.name}' is defined as a method${fmtEventSuffix(info)}`;
+    case "FIELD_NAME_RESERVED_BY_RECORD":
+      return `Field '${info.name}' collides with the Immutable Record API: '.${info.name}' reads the Record member, not your value — rename the field (its value is only reachable via .get('${info.name}'))`;
     case "FIELD_VAL_NOT_DEFINED":
       return `Field '.${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "FIELD_VAL_IS_METHOD":
@@ -8562,6 +8592,7 @@ export {
   GLOBAL_SELECTOR_IN_SCOPED_STYLE,
   FIELD_VAL_NOT_DEFINED,
   FIELD_VAL_IS_METHOD,
+  FIELD_NAME_RESERVED_BY_RECORD,
   FIELD_CLASS,
   ExampleIndex,
   DescribeResult,

package/dist/tutuca-dev.js

@@ -9476,13 +9476,16 @@ class Renderer {
     if (cachedNode)
       return cachedNode;
     const view = viewName ? comp.getView(viewName) : stack.lookupBestView(comp.views, "main");
+    const body = this.renderView(view, stack);
+    if (body == null)
+      return null;
     const meta = this._renderMetadata({
       $: "Comp",
       nid: node?.nodeId ?? null,
       cid: comp.id,
       vid: view.name
     });
-    const dom = new VFragment([meta, this.renderView(view, stack)]);
+    const dom = new VFragment([meta, body]);
     this.cache.set(cachePath, cacheKey, dom);
     return dom;
   }
@@ -9495,7 +9498,8 @@ class Renderer {
     const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
     const renderOne = (key, value, attrName) => {
       const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
-      this.pushEachEntry(r, node.nodeId, attrName, key, dom);
+      if (dom != null)
+        this.pushEachEntry(r, node.nodeId, attrName, key, dom);
     };
     if (keys)
       imKeysIter(seq, renderOne, keys);
@@ -9522,7 +9526,8 @@ class Renderer {
         this.pushEachEntry(r, nid, attrName, key, cachedNode);
       else {
         const dom = this.renderView(view, stack.enter(value, binds, false));
-        this.pushEachEntry(r, nid, attrName, key, dom);
+        if (dom != null)
+          this.pushEachEntry(r, nid, attrName, key, dom);
         this.cache.set(cachePath, cacheKey, dom);
       }
     };
@@ -9807,7 +9812,8 @@ function parseXOp(attrs, childs, opIdx, px) {
   if (attrs.length <= opIdx)
     return maybeFragment(childs);
   const { name, value } = attrs[opIdx];
-  const as = attrs.getNamedItem("as")?.value ?? null;
+  const asAttr = attrs.getNamedItem("as")?.value ?? null;
+  const as = asAttr === null ? null : parseViewName(asAttr, px);
   let node;
   switch (name) {
     case "slot":
@@ -9847,6 +9853,9 @@ function parseXOpVal(opName, value, px, parserFn) {
     px.onParseIssue("bad-value", { role: "x-op", op: opName, value });
   return val;
 }
+function parseViewName(s, px) {
+  return vp.parseText(s, px) ?? vp.const(s);
+}
 function processXExtras(node, attrs, opName, startIdx, px) {
   const { consumed, wrappable } = X_OPS[opName];
   const wrappers = [];
@@ -9943,9 +9952,12 @@ class Macro {
 }
 
 class RenderViewId extends ANode {
-  constructor(nodeId, val, viewId) {
+  constructor(nodeId, val, viewVal) {
     super(nodeId, val);
-    this.viewId = viewId;
+    this.viewVal = viewVal;
+  }
+  evalViewName(stack) {
+    return this.viewVal ? this.viewVal.eval(stack) : null;
   }
   setDataAttr(_key, _val) {}
 }
@@ -9959,7 +9971,7 @@ function dynRenderStep(comp, name, key) {
 class RenderNode extends RenderViewId {
   render(stack, rx) {
     const newStack = stack.enter(this.val.eval(stack), {}, true);
-    return rx.renderIt(newStack, this, "", this.viewId);
+    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
   }
   toPathStep(ctx) {
     if (this.val instanceof DynVal)
@@ -9971,7 +9983,7 @@ class RenderNode extends RenderViewId {
 class RenderItNode extends RenderViewId {
   render(stack, rx) {
     const newStack = stack.enter(stack.it, {}, true);
-    return rx.renderIt(newStack, this, "", this.viewId);
+    return rx.renderIt(newStack, this, "", this.evalViewName(stack));
   }
   toPathStep(ctx) {
     const next = ctx.next();
@@ -9988,12 +10000,12 @@ class RenderItNode extends RenderViewId {
 }
 
 class RenderEachNode extends RenderViewId {
-  constructor(nodeId, val, viewId) {
-    super(nodeId, val, viewId);
+  constructor(nodeId, val, viewVal) {
+    super(nodeId, val, viewVal);
     this.iterInfo = new IterInfo(val, null, null, null);
   }
   render(stack, rx) {
-    return rx.renderEach(stack, this.iterInfo, this, this.viewId);
+    return rx.renderEach(stack, this.iterInfo, this, this.evalViewName(stack));
   }
   toPathStep(ctx) {
     if (this.val instanceof DynVal)
@@ -10279,6 +10291,9 @@ class View {
       this.anode = optimizeNode(this.anode);
   }
   render(stack, rx) {
+    if (this.anode === null) {
+      throw new Error(`tutuca: view "${this.name}" was rendered before it was compiled — its ` + `component is not registered in this app/scope. Source: ` + `${String(this.rawView).slice(0, 80).replace(/\s+/g, " ")}…`);
+    }
     return this.anode.render(stack, rx);
   }
 }
@@ -12732,6 +12747,8 @@ var COMP_FIELD_BAD_SHAPE = "COMP_FIELD_BAD_SHAPE";
 var ASYNC_HANDLER = "ASYNC_HANDLER";
 var TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE = "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE";
 var GLOBAL_SELECTOR_IN_SCOPED_STYLE = "GLOBAL_SELECTOR_IN_SCOPED_STYLE";
+var FIELD_NAME_RESERVED_BY_RECORD = "FIELD_NAME_RESERVED_BY_RECORD";
+var RECORD_FIELD_NAME_COLLISIONS = new Set(["entries", "hashCode"]);
 var X_KNOWN_OP_NAMES = new Set([
   "slot",
   "text",
@@ -12820,6 +12837,7 @@ function checkComponent(Comp, lx = new LintContext, { wellKnownExtras = EMPTY_SE
   return lx.push({ componentName: Comp.name }, () => {
     checkUnknownSpecKeys(lx, Comp, wellKnownExtras);
     checkFieldDeclarations(lx, Comp);
+    checkRecordFieldNameCollisions(lx, Comp);
     checkProvidesAreAddressable(lx, Comp);
     checkLookupShapes(lx, Comp);
     checkHandlersNotAsync(lx, Comp);
@@ -13312,6 +13330,16 @@ function checkFieldDeclarations(lx, Comp) {
     }
   }
 }
+function checkRecordFieldNameCollisions(lx, Comp) {
+  const fields = Comp.Class?.getMetaClass?.().fields;
+  if (!fields)
+    return;
+  for (const name in fields) {
+    if (RECORD_FIELD_NAME_COLLISIONS.has(name)) {
+      lx.error(FIELD_NAME_RESERVED_BY_RECORD, { name });
+    }
+  }
+}
 function checkUnreferencedAlterHandlers(lx, Comp, referencedAlters) {
   for (const name in Comp.alter) {
     if (!referencedAlters.has(name)) {
@@ -14900,6 +14928,8 @@ function lintIdToMessage(id, info) {
       return `'$${info.name}' is a method reference, but '${info.name}' is defined as an input handler${fmtEventSuffix(info)}`;
     case "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER":
       return `'${info.name}' is an input handler reference, but '${info.name}' is defined as a method${fmtEventSuffix(info)}`;
+    case "FIELD_NAME_RESERVED_BY_RECORD":
+      return `Field '${info.name}' collides with the Immutable Record API: '.${info.name}' reads the Record member, not your value — rename the field (its value is only reachable via .get('${info.name}'))`;
     case "FIELD_VAL_NOT_DEFINED":
       return `Field '.${info.name}' is not defined${fmtOriginSuffix(info)}`;
     case "FIELD_VAL_IS_METHOD":
@@ -16156,6 +16186,7 @@ export {
   GLOBAL_SELECTOR_IN_SCOPED_STYLE,
   FIELD_VAL_NOT_DEFINED,
   FIELD_VAL_IS_METHOD,
+  FIELD_NAME_RESERVED_BY_RECORD,
   FIELD_CLASS,
   ExampleIndex,
   DescribeResult,