tutuca 0.9.98 → 0.9.100

package/README.md

@@ -7,7 +7,7 @@ Zero-dependency batteries included SPA framework.
 - **Fits in your head** (and the context window)
 - **View source friendly** — step through the whole stack
 - **As much HTML as possible, as little JS as needed**
-- ~177KB minified, ~40KB brotli compressed
+- ~182KB minified, ~41KB brotli compressed
 
 ## Quick Start
 
@@ -95,6 +95,7 @@ tutuca help [command]
 | `lint <module> [name]` | Run lint checks — all, or one by name (exit 2 on errors) |
 | `render <module> [name] [--title t] [--view v]` | Render examples to HTML |
 | `test <module> [name] [--grep p] [--bail]` | Run `getTests()` (exit 4 on failures) |
+| `storybook [dir]` | Serve a live storybook, auto-discovering co-located `*.dev.js` modules (`--port`, `--out`, `--dry-run`, `--no-margaui`, `--no-check`, `--no-tests`; no module path needed) |
 | `feedback [message]` | Append a feedback note (positional or stdin) to `~/.tutuca/feedback.jsonl` (no module path needed) |
 | `install-skill [--user\|--project] [--margaui-skill\|--immutable-skill\|--all] [--dot-agents] [--dry-run] [--force]` | Install bundled Claude Code skills (no module path needed) |
 | `agent-context` | Print a versioned JSON schema of the entire CLI surface (no module path needed) |
@@ -146,8 +147,9 @@ The invocation stays short even without wrapping, but common patterns:
 
 ## Use with Claude Code
 
-Tutuca ships an LLM-facing reference (`SKILL.md` + `core.md` / `cli.md` /
-`advanced.md` / `testing.md`) packaged as a [Claude Code skill](https://docs.claude.com/en/docs/claude-code/skills).
+Tutuca ships an LLM-facing reference (`SKILL.md` plus topic files such as
+`core.md`, `cli.md`, `advanced.md`, `testing.md`, `storybook.md`, and more)
+packaged as a [Claude Code skill](https://docs.claude.com/en/docs/claude-code/skills).
 Once installed, Claude auto-loads it whenever a session touches tutuca
 components, views, macros, or the CLI.
 

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);
@@ -11394,7 +11394,7 @@ var init_html_tokenizer = __esm(() => {
 });
 
 // tools/core/htmllinter-tables.js
-var VOID_ELEMENTS, RAW_TEXT_ELEMENTS, RCDATA_ELEMENTS, SPECIAL_ELEMENTS, FORMATTING_ELEMENTS, DEFAULT_SCOPE_BOUNDARIES, MATHML_TEXT_INTEGRATION_POINT_NAMES, SVG_HTML_INTEGRATION_POINT_NAMES, SCOPE_LIST_ITEM, SCOPE_BUTTON, SCOPE_DEFAULT, SCOPE_TABLE, SCOPE_SELECT, STANDARD_SVG_CAMEL_ELEMENTS, STANDARD_SVG_CAMEL_ATTRS, MATHML_CAMEL_ATTRS, SVG_ATTR_LOWERCASE_TO_CAMEL, MATHML_ATTR_LOWERCASE_TO_CAMEL, FOREIGN_BREAKOUT_TAGS, MATHML_TEXT_INTEGRATION_POINTS, BLOCK_LEVEL_AUTO_CLOSE_P, SELECT_VALID_CHILDREN, SELECT_BREAKOUT_TAGS, MODES, NS, FRAGMENT_CONTEXT_MODES;
+var VOID_ELEMENTS, RAW_TEXT_ELEMENTS, SPECIAL_ELEMENTS, FORMATTING_ELEMENTS, DEFAULT_SCOPE_BOUNDARIES, MATHML_TEXT_INTEGRATION_POINT_NAMES, SVG_HTML_INTEGRATION_POINT_NAMES, SCOPE_LIST_ITEM, SCOPE_BUTTON, SCOPE_DEFAULT, SCOPE_TABLE, STANDARD_SVG_CAMEL_ELEMENTS, STANDARD_SVG_CAMEL_ATTRS, MATHML_CAMEL_ATTRS, SVG_ATTR_LOWERCASE_TO_CAMEL, MATHML_ATTR_LOWERCASE_TO_CAMEL, FOREIGN_BREAKOUT_TAGS, BLOCK_LEVEL_AUTO_CLOSE_P, SELECT_BREAKOUT_TAGS, MODES, NS, FRAGMENT_CONTEXT_MODES;
 var init_htmllinter_tables = __esm(() => {
   VOID_ELEMENTS = new Set([
     "area",
@@ -11421,7 +11421,6 @@ var init_htmllinter_tables = __esm(() => {
     "xmp",
     "plaintext"
   ]);
-  RCDATA_ELEMENTS = new Set(["textarea", "title"]);
   SPECIAL_ELEMENTS = new Set([
     "address",
     "applet",
@@ -11536,7 +11535,6 @@ var init_htmllinter_tables = __esm(() => {
   SCOPE_BUTTON = new Set([...DEFAULT_SCOPE_BOUNDARIES, "button"]);
   SCOPE_DEFAULT = DEFAULT_SCOPE_BOUNDARIES;
   SCOPE_TABLE = new Set(["html", "table", "template"]);
-  SCOPE_SELECT = new Set;
   STANDARD_SVG_CAMEL_ELEMENTS = new Set([
     "altGlyph",
     "altGlyphDef",
@@ -11688,7 +11686,6 @@ var init_htmllinter_tables = __esm(() => {
     "ul",
     "var"
   ]);
-  MATHML_TEXT_INTEGRATION_POINTS = new Set(["mi", "mo", "mn", "ms", "mtext"]);
   BLOCK_LEVEL_AUTO_CLOSE_P = new Set([
     "address",
     "article",
@@ -11731,7 +11728,6 @@ var init_htmllinter_tables = __esm(() => {
     "dd",
     "dt"
   ]);
-  SELECT_VALID_CHILDREN = new Set(["option", "optgroup", "hr", "script", "template"]);
   SELECT_BREAKOUT_TAGS = new Set(["input", "keygen", "textarea", "select"]);
   MODES = Object.freeze({
     inBody: "inBody",
@@ -16115,7 +16111,8 @@ function buildImports(base, { margaui }) {
     tutuca: dev,
     "tutuca/extra": dev,
     "tutuca/dev": dev,
-    "tutuca/storybook": `${base}/tutuca-storybook.js`
+    "tutuca/storybook": `${base}/tutuca-storybook.js`,
+    "tutuca/components": `${base}/tutuca-components.js`
   };
   if (margaui)
     imports.margaui = MARGAUI_CDN;
@@ -16141,19 +16138,29 @@ ${JSON.stringify({ imports }, null, 6)}
 </html>
 `;
 }
-function renderBootstrap(devModuleUrls, { margaui, check }) {
+function renderBootstrap(devModuleUrls, { margaui, check, inspect: inspect3, noCache }) {
   const lines = ['import { mountStorybook } from "tutuca/storybook";'];
   if (margaui) {
     lines.push('import { compileClassesToStyleText } from "tutuca/extra";');
     lines.push('import { compile } from "margaui";');
   }
+  if (inspect3) {
+    lines.push('import { shadowCheckComponent, runTests, expect } from "tutuca/dev";');
+  }
   if (check)
     lines.push('import { check } from "tutuca/dev";');
   devModuleUrls.forEach((url, i) => {
     lines.push(`import * as m${i} from ${JSON.stringify(url)};`);
   });
   const modules = devModuleUrls.map((_, i) => `m${i}`).join(", ");
-  const opts = margaui ? "{ compileCss: (app) => compileClassesToStyleText(app, compile) }" : "{}";
+  const optParts = [];
+  if (margaui)
+    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});`);
   if (check)
@@ -16267,7 +16274,9 @@ async function run4(argv, opts = {}) {
       out: { type: "string" },
       "no-margaui": { type: "boolean", default: false },
       "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 }
     },
@@ -16275,7 +16284,8 @@ 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-tests]
+                 [--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
@@ -16290,7 +16300,9 @@ async function run4(argv, opts = {}) {
                  shown instead of serving; pass --json for structured output
   --no-margaui   skip margaui styling (renders functional but unstyled)
   --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;
   }
@@ -16312,6 +16324,8 @@ 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);
@@ -16320,7 +16334,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 }));
+    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.
@@ -16336,7 +16350,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
@@ -16349,7 +16363,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) {
@@ -16405,7 +16419,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 });
+  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") {