tutuca 0.9.99 → 0.9.101

package/dist/tutuca-cli.js

@@ -9776,7 +9776,7 @@ class Renderer {
     return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
   }
   _rValComp(stack, val, comp, node, key, viewName) {
-    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${key}`;
+    const cacheKey = `${viewName ?? ""}\x1F${stack.viewsId ?? ""}\x1F${key}`;
     const cachePath = [node, val];
     stack._pushDynBindValuesToArray(cachePath, comp);
     const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -9821,7 +9821,7 @@ class Renderer {
     const renderOne = (key, value, attrName) => {
       const cachePath = enricher ? [view, it, value] : [view, value];
       const binds = { key, value };
-      const cacheKey = `${nid}-${key}`;
+      const cacheKey = `${stack.viewsId ?? ""}\x1F${nid}\x1F${key}`;
       if (enricher)
         enricher.call(it, binds, key, value, iterData);
       const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -9958,7 +9958,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 +9999,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 +10431,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 +10454,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 +10470,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)
@@ -16138,7 +16145,7 @@ ${JSON.stringify({ imports }, null, 6)}
 </html>
 `;
 }
-function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3 }) {
+function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache }) {
   const lines = ['import { mountStorybook } from "tutuca/storybook";'];
   if (margaui) {
     lines.push('import { compileClassesToStyleText } from "tutuca/extra";');
@@ -16158,6 +16165,8 @@ function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3 }) {
     optParts.push("compileCss: (app) => compileClassesToStyleText(app, compile)");
   if (inspect3)
     optParts.push("dev: { shadowCheckComponent, runTests, expect }");
+  if (noCache)
+    optParts.push("noCache: true");
   const opts = optParts.length ? `{ ${optParts.join(", ")} }` : "{}";
   lines.push("");
   lines.push(`const app = await mountStorybook("#app", [${modules}], ${opts});`);
@@ -16274,6 +16283,7 @@ async function run4(argv, opts = {}) {
       "no-check": { type: "boolean", default: false },
       "no-inspect": { type: "boolean", default: false },
       "no-tests": { type: "boolean", default: false },
+      "no-cache": { type: "boolean", default: false },
       "dry-run": { type: "boolean", default: false },
       help: { type: "boolean", short: "h", default: false }
     },
@@ -16282,6 +16292,7 @@ async function run4(argv, opts = {}) {
   if (parsed.values.help) {
     process.stdout.write(`tutuca storybook [dir] [--port <n>] [--out <dir>] [--dry-run]
                  [--no-margaui] [--no-check] [--no-inspect] [--no-tests]
+                 [--no-cache]
 
   Auto-discovers co-located *.dev.js modules (recursively, skipping
   node_modules/dotdirs) and serves a live storybook that mounts them via
@@ -16298,6 +16309,7 @@ async function run4(argv, opts = {}) {
   --no-check     skip the in-browser check(app) dev validation
   --no-inspect   skip the per-example Component/Instance/Data/Lint/Test tabs
   --no-tests     skip running the modules' getTests() before serving
+  --no-cache     disable the render cache (NullDomCache); see every re-render
 `);
     return;
   }
@@ -16320,6 +16332,7 @@ async function run4(argv, opts = {}) {
   const margaui = !parsed.values["no-margaui"];
   const check = !parsed.values["no-check"];
   const inspect3 = !parsed.values["no-inspect"];
+  const noCache = parsed.values["no-cache"];
   const self = findSelf();
   if (parsed.values.out) {
     const outDir = resolve5(parsed.values.out);
@@ -16328,7 +16341,7 @@ async function run4(argv, opts = {}) {
     const imports2 = buildImports(base2, { margaui });
     const bootstrapName = "tutuca-storybook.bootstrap.js";
     writeFileSync(resolve5(outDir, "index.html"), renderIndexHtml(imports2, { margaui, bootstrapUrl: `./${bootstrapName}` }));
-    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3 }));
+    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache }));
     process.stdout.write(`wrote static storybook → ${relative2(process.cwd(), outDir) || "."}/
   index.html + ${bootstrapName} (${devModuleUrls.length} dev modules, CDN import map)
   Host it from the project root so /*.dev.js paths resolve.
@@ -16344,7 +16357,7 @@ async function run4(argv, opts = {}) {
     const result = {
       projectDir,
       tutuca: { source, base: base2, version: self.version },
-      options: { margaui, check, runTests: !parsed.values["no-tests"] },
+      options: { margaui, check, noCache, runTests: !parsed.values["no-tests"] },
       imports: imports2,
       modules,
       tests
@@ -16357,7 +16370,7 @@ async function run4(argv, opts = {}) {
     process.stdout.write(`tutuca storybook dry run (no server started)
   project: ${projectDir}
   tutuca runtime: ${source} (${base2}, version ${self.version})
-  margaui: ${margaui ? "on" : "off"}, in-browser check: ${check ? "on" : "off"}
+  margaui: ${margaui ? "on" : "off"}, in-browser check: ${check ? "on" : "off"}, cache: ${noCache ? "off" : "on"}
   ${modules.length} dev module(s):
 `);
     for (const m of modules) {
@@ -16413,7 +16426,7 @@ async function run4(argv, opts = {}) {
   const { base, serveDist } = resolveTutucaBase(projectDir, self, false);
   const imports = buildImports(base, { margaui });
   const indexHtml = renderIndexHtml(imports, { margaui, bootstrapUrl: BOOTSTRAP_URL });
-  const bootstrapJs = renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3 });
+  const bootstrapJs = renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache });
   const server = createServer((req, res) => {
     const path = req.url.split("?")[0];
     if (path === "/" || path === "/index.html") {

package/dist/tutuca-dev.ext.js

@@ -1818,7 +1818,7 @@ class Renderer {
     return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
   }
   _rValComp(stack, val, comp, node, key, viewName) {
-    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${key}`;
+    const cacheKey = `${viewName ?? ""}\x1F${stack.viewsId ?? ""}\x1F${key}`;
     const cachePath = [node, val];
     stack._pushDynBindValuesToArray(cachePath, comp);
     const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -1863,7 +1863,7 @@ class Renderer {
     const renderOne = (key, value, attrName) => {
       const cachePath = enricher ? [view, it, value] : [view, value];
       const binds = { key, value };
-      const cacheKey = `${nid}-${key}`;
+      const cacheKey = `${stack.viewsId ?? ""}\x1F${nid}\x1F${key}`;
       if (enricher)
         enricher.call(it, binds, key, value, iterData);
       const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -2156,7 +2156,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 +2197,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 +2296,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 +2315,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 +2327,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 +2344,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)

package/dist/tutuca-dev.js

@@ -9469,7 +9469,7 @@ class Renderer {
     return comp ? this._rValComp(stack, stack.it, comp, node, key, viewName) : null;
   }
   _rValComp(stack, val, comp, node, key, viewName) {
-    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${key}`;
+    const cacheKey = `${viewName ?? ""}\x1F${stack.viewsId ?? ""}\x1F${key}`;
     const cachePath = [node, val];
     stack._pushDynBindValuesToArray(cachePath, comp);
     const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -9514,7 +9514,7 @@ class Renderer {
     const renderOne = (key, value, attrName) => {
       const cachePath = enricher ? [view, it, value] : [view, value];
       const binds = { key, value };
-      const cacheKey = `${nid}-${key}`;
+      const cacheKey = `${stack.viewsId ?? ""}\x1F${nid}\x1F${key}`;
       if (enricher)
         enricher.call(it, binds, key, value, iterData);
       const cachedNode = this.cache.get(cachePath, cacheKey);
@@ -9807,7 +9807,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 +9848,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 +9947,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 +9966,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 +9978,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 +9995,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)