tutuca 0.9.27 → 0.9.28

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**
-- ~107KB minified, ~29KB brotli compressed
+- ~169KB minified, ~37KB brotli compressed
 
 ## Quick Start
 
@@ -64,17 +64,17 @@ Zero-dependency batteries included SPA framework.
 Tutuca ships a single-file CLI (`dist/tutuca-cli.js`) for inspecting, linting,
 documenting, and rendering components defined in an ES module. The module just
 needs to export `getComponents()` and, for render-time commands, `getExamples()`
-in the storybook shape `{ title, description?, groups?, items: [{ title, description?, value, view? }] }`.
+in the storybook shape `{ title, description?, items: [{ title, description?, value, view? }] }` (a single section, or an array of sections).
 
 ### Setup
 
 ```sh
-npm install --save-dev tutuca jsdom
+npm install --save-dev tutuca
 # prettier is optional, only needed for --pretty
 npm install --save-dev prettier
 ```
 
-The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca jsdom`) just works. `jsdom` is a peer dep because it's only needed for `render`, `lint`, and `doctor`.
+The package exposes `tutuca` via `bin`, so `npx tutuca` (or a global `npm i -g tutuca`) just works. `jsdom` ships as a regular dependency (it's needed by `render`, `lint`, and `doctor`) and is installed automatically.
 
 ### Commands
 

package/dist/tutuca-cli.js

@@ -221,15 +221,11 @@ function normalizeModule(mod, { path = null } = {}) {
     "getMacros",
     "getRequestHandlers",
     "getExamples",
-    "getStoryBookSection",
     "getRoot"
   ]) {
     if (typeof mod[key] === "function")
       present.add(key);
   }
-  if (present.has("getStoryBookSection") && !present.has("getExamples")) {
-    throw shapeError("module exports getStoryBookSection; rename it to getExamples.", "module");
-  }
   const components = present.has("getComponents") ? mod.getComponents() : [];
   const macros = present.has("getMacros") ? mod.getMacros() : null;
   const requestHandlers = present.has("getRequestHandlers") ? mod.getRequestHandlers() : null;
@@ -1442,26 +1438,28 @@ class ParseContext {
   onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall) {}
 }
 function condenseChildsWhites(childs) {
-  let end = childs.length;
-  if (end === 0)
+  if (childs.length === 0)
     return childs;
-  let start = 0;
   let changed = false;
-  if (isTextNodeAllBlanks(childs[0])) {
-    start = 1;
+  if (childs[0].isWhiteSpace?.()) {
+    childs[0].condenseWhiteSpace();
     changed = true;
   }
-  if (end > 1 && isTextNodeAllBlanks(childs[end - 1])) {
-    end -= 1;
+  const last = childs.length - 1;
+  if (last > 0 && childs[last].isWhiteSpace?.()) {
+    childs[last].condenseWhiteSpace();
     changed = true;
   }
-  for (let i = 1;i < end - 1; i++) {
+  for (let i = 1;i < last; i++) {
     const cur = childs[i];
-    if (isTextNodeAllBlanks(cur) && isFirstDomNode(childs[i - 1]) && isFirstDomNode(childs[i + 1]) && cur.hasNewLine()) {
-      cur.condenseWhiteSpace();
+    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
+      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+      cur.condenseWhiteSpace(bothBlock ? "" : " ");
+      if (bothBlock)
+        changed = true;
     }
   }
-  return changed ? childs.slice(start, end) : childs;
+  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
 }
 
 class NodeEvents {
@@ -1517,7 +1515,10 @@ function compileModifiers(eventName, names) {
     return w(this, f, args, ctx);
   };
 }
-var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, _parser = null, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ seq }), WRAPPER_NODES, isTextNodeAllBlanks = (n) => n instanceof TextNode && n.isWhiteSpace(), isFirstDomNode = (n) => n instanceof DomNode || n instanceof FragmentNode && n.childs[0] instanceof DomNode, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
+var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, _parser = null, ANode, MacroNode, RenderViewId, RenderNode, RenderItNode, RenderEachNode, RenderTextNode, RenderOnceNode, WrapperNode, ShowNode, HideNode, PushViewNameNode, SlotNode, ScopeNode, EachNode, filterAlwaysTrue = (_v, _k, _seq) => true, nullLoopWith = (seq) => ({ seq }), WRAPPER_NODES, _htmlBlockTags = "ADDRESS,ARTICLE,ASIDE,BLOCKQUOTE,CAPTION,COL,COLGROUP,DETAILS,DIALOG,DIV,DD,DL,DT,FIELDSET,FIGCAPTION,FIGURE,FOOTER,FORM,H1,H2,H3,H4,H5,H6,HEADER,HGROUP,HR,LEGEND,LI,MAIN,MENU,NAV,OL,P,PRE,SECTION,SUMMARY,TABLE,TBODY,TD,TFOOT,TH,THEAD,TR,UL", HTML_BLOCK_TAGS, isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+}, isMac, fwdIfCtxPred = (pred) => (w) => (that, f, args, ctx) => pred(ctx) ? w(that, f, args, ctx) : that, fwdIfKey = (keyName) => fwdIfCtxPred((ctx) => ctx.e.key === keyName), fwdCtrl, fwdMeta, fwdAlt, metaWraps, MOD_WRAPPERS_BY_EVENT, identityModifierWrapper = (f, _ctx) => f;
 var init_anode = __esm(() => {
   init_attribute();
   init_path();
@@ -1546,8 +1547,8 @@ var init_anode = __esm(() => {
       }
       return false;
     }
-    condenseWhiteSpace() {
-      this.val = "";
+    condenseWhiteSpace(replacement = "") {
+      this.val = replacement;
     }
     isConstant() {
       return true;
@@ -1664,7 +1665,7 @@ var init_anode = __esm(() => {
         if (textChild)
           childs.unshift(new RenderTextNode(null, textChild));
         const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-        return wrap(new DomNode(tag.toLowerCase(), nAttrs, domChilds), px, wrappers);
+        return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
       }
       return new CommentNode(`Error: InvalidTagName ${tag}`);
     }
@@ -1840,6 +1841,7 @@ var init_anode = __esm(() => {
     scope: ScopeNode,
     "push-view": PushViewNameNode
   };
+  HTML_BLOCK_TAGS = new Set(_htmlBlockTags.split(","));
   isMac = (globalThis.navigator?.userAgent ?? "").toLowerCase().includes("mac");
   fwdCtrl = fwdIfCtxPred(({ e }) => isMac && e.metaKey || e.ctrlKey);
   fwdMeta = fwdIfCtxPred(({ e }) => e.metaKey);
@@ -2987,23 +2989,20 @@ function morphNode(domNode, source, target, opts) {
       domNode.data = target.text;
       return domNode;
     }
-    if (type === 1 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+    if (type === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
       const isSelect = source.tag === "SELECT";
       if (propsDiff) {
         if (isSelect && "value" in propsDiff) {
           const { value: _v, ...rest } = propsDiff;
           applyProperties(domNode, rest, source.attrs);
-        } else {
+        } else
           applyProperties(domNode, propsDiff, source.attrs);
-        }
       }
-      if (!target.attrs.dangerouslySetInnerHTML) {
+      if (!target.attrs.dangerouslySetInnerHTML)
         morphChildren(domNode, source.childs, target.childs, opts);
-      }
-      if (isSelect && target.attrs.value !== undefined) {
+      if (isSelect && target.attrs.value !== undefined)
         applyProperties(domNode, { value: target.attrs.value }, source.attrs);
-      }
       return domNode;
     }
     if (type === 11) {
@@ -3082,23 +3081,20 @@ function morphChildren(parentDom, oldChilds, newChilds, opts) {
     if (!used[i] && domNodes[i].parentNode === parentDom)
       parentDom.removeChild(domNodes[i]);
 }
-function render(vnode, container, options) {
-  const cached = renderCache.get(container);
+function render(vnode, container, options, prev) {
   const isFragment = vnode instanceof VFragment;
-  if (cached && cached.vnode instanceof VFragment === isFragment) {
-    const oldDom = isFragment ? container : cached.dom;
-    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
-    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
-    return newDom;
+  if (prev && prev.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : prev.dom;
+    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
+    return { vnode, dom: isFragment ? container : newDom };
   }
-  renderCache.delete(container);
   const domNode = vnode.toDom(options);
   container.replaceChildren(domNode);
-  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
-  return domNode;
+  return { vnode, dom: isFragment ? container : domNode };
 }
 function h(tagName, properties, children) {
-  const tag = tagName.toUpperCase();
+  const c = tagName.charCodeAt(0);
+  const tag = c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
   const props = {};
   let key, namespace;
   if (properties) {
@@ -3126,7 +3122,7 @@ function h(tagName, properties, children) {
   addChild(normalizedChildren, children);
   return new VNode(tag, props, normalizedChildren, key, namespace);
 }
-var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), isObject = (v) => v !== null && typeof v === "object", prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b), getKey = (child) => child instanceof VNode ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode, renderCache;
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a"), isObject = (v) => v !== null && typeof v === "object", prototypesDiffer = (a, b) => Object.getPrototypeOf(a) !== Object.getPrototypeOf(b), getKey = (child) => child instanceof VNode ? child.key : undefined, isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function", VText, VComment, VFragment, VNode;
 var init_vdom = __esm(() => {
   VText = class VText extends VBase {
     constructor(text) {
@@ -3190,10 +3186,13 @@ var init_vdom = __esm(() => {
     get nodeType() {
       return 1;
     }
+    isSameKind(other) {
+      return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+    }
     isEqualTo(other) {
       if (this === other)
         return true;
-      if (!(other instanceof VNode) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
+      if (!(other instanceof VNode) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
         return false;
       }
       if (this.attrs !== other.attrs) {
@@ -3221,7 +3220,6 @@ var init_vdom = __esm(() => {
       return node;
     }
   };
-  renderCache = new WeakMap;
 });
 
 // src/app.js
@@ -3244,6 +3242,7 @@ class App {
     };
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
+    this._renderState = null;
   }
   get state() {
     return this.transactor.state;
@@ -3350,7 +3349,10 @@ class App {
   render() {
     const root = this.state.val;
     const stack = this.makeStack(root);
-    return render(this.renderer.renderRoot(stack, root), this.rootNode, this._renderOpts);
+    const { renderer, rootNode, _renderOpts, _renderState } = this;
+    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    this._renderState = newState;
+    return newState.dom;
   }
   onChange(callback) {
     this.transactor.state.onChange(callback);
@@ -7721,7 +7723,7 @@ class Renderer {
   renderToDOM(stack, val) {
     const rootNode = document.createElement("div");
     const rOpts = { document };
-    render(h("div", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
+    render(h("DIV", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
     return rootNode.childNodes[0];
   }
   renderToString(stack, val, cleanAttrs = true) {
@@ -8069,9 +8071,6 @@ MODULE CONVENTION
 
     export function getRoot()             // optional; returned by info
 
-  The legacy \`getStoryBookSection()\` name fails fast with
-  EXAMPLES_SHAPE_MISMATCH — rename it to \`getExamples\`.
-
 COMMANDS (require <module-path>)
   info
       Summarize which getX() exports are present and count components,

package/dist/tutuca-dev.js

@@ -918,8 +918,8 @@ class TextNode extends BaseNode {
     }
     return false;
   }
-  condenseWhiteSpace() {
-    this.val = "";
+  condenseWhiteSpace(replacement = "") {
+    this.val = replacement;
   }
   isConstant() {
     return true;
@@ -1058,7 +1058,7 @@ class ANode extends BaseNode {
       if (textChild)
         childs.unshift(new RenderTextNode(null, textChild));
       const domChilds = tag !== "PRE" ? condenseChildsWhites(childs) : childs;
-      return wrap(new DomNode(tag.toLowerCase(), nAttrs, domChilds), px, wrappers);
+      return wrap(new DomNode(tag, nAttrs, domChilds), px, wrappers);
     }
     return new CommentNode(`Error: InvalidTagName ${tag}`);
   }
@@ -1365,29 +1365,35 @@ class ParseContext {
   }
   onAttributes(_attrs, _wrapperAttrs, _textChild, _isMacroCall) {}
 }
-var isTextNodeAllBlanks = (n) => n instanceof TextNode && n.isWhiteSpace();
-var isFirstDomNode = (n) => n instanceof DomNode || n instanceof FragmentNode && n.childs[0] instanceof DomNode;
+var _htmlBlockTags = "ADDRESS,ARTICLE,ASIDE,BLOCKQUOTE,CAPTION,COL,COLGROUP,DETAILS,DIALOG,DIV,DD,DL,DT,FIELDSET,FIGCAPTION,FIGURE,FOOTER,FORM,H1,H2,H3,H4,H5,H6,HEADER,HGROUP,HR,LEGEND,LI,MAIN,MENU,NAV,OL,P,PRE,SECTION,SUMMARY,TABLE,TBODY,TD,TFOOT,TH,THEAD,TR,UL";
+var HTML_BLOCK_TAGS = new Set(_htmlBlockTags.split(","));
+var isBlockDomNode = (n) => {
+  const node = n instanceof FragmentNode ? n.childs[0] : n;
+  return node instanceof DomNode && HTML_BLOCK_TAGS.has(node.tagName);
+};
 function condenseChildsWhites(childs) {
-  let end = childs.length;
-  if (end === 0)
+  if (childs.length === 0)
     return childs;
-  let start = 0;
   let changed = false;
-  if (isTextNodeAllBlanks(childs[0])) {
-    start = 1;
+  if (childs[0].isWhiteSpace?.()) {
+    childs[0].condenseWhiteSpace();
     changed = true;
   }
-  if (end > 1 && isTextNodeAllBlanks(childs[end - 1])) {
-    end -= 1;
+  const last = childs.length - 1;
+  if (last > 0 && childs[last].isWhiteSpace?.()) {
+    childs[last].condenseWhiteSpace();
     changed = true;
   }
-  for (let i = 1;i < end - 1; i++) {
+  for (let i = 1;i < last; i++) {
     const cur = childs[i];
-    if (isTextNodeAllBlanks(cur) && isFirstDomNode(childs[i - 1]) && isFirstDomNode(childs[i + 1]) && cur.hasNewLine()) {
-      cur.condenseWhiteSpace();
+    if (cur.isWhiteSpace?.() && cur.hasNewLine()) {
+      const bothBlock = isBlockDomNode(childs[i - 1]) && isBlockDomNode(childs[i + 1]);
+      cur.condenseWhiteSpace(bothBlock ? "" : " ");
+      if (bothBlock)
+        changed = true;
     }
   }
-  return changed ? childs.slice(start, end) : childs;
+  return changed ? childs.filter((c) => !(c instanceof TextNode && c.val === "")) : childs;
 }
 
 class View {
@@ -2824,10 +2830,13 @@ class VNode extends VBase {
   get nodeType() {
     return 1;
   }
+  isSameKind(other) {
+    return this.tag === other.tag && this.namespace === other.namespace && this.key === other.key;
+  }
   isEqualTo(other) {
     if (this === other)
       return true;
-    if (!(other instanceof VNode) || this.tag !== other.tag || this.key !== other.key || this.namespace !== other.namespace || this.childs.length !== other.childs.length) {
+    if (!(other instanceof VNode) || !this.isSameKind(other) || this.childs.length !== other.childs.length) {
       return false;
     }
     if (this.attrs !== other.attrs) {
@@ -2902,23 +2911,20 @@ function morphNode(domNode, source, target, opts) {
       domNode.data = target.text;
       return domNode;
     }
-    if (type === 1 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+    if (type === 1 && source.isSameKind(target)) {
       const propsDiff = diffProps(source.attrs, target.attrs);
       const isSelect = source.tag === "SELECT";
       if (propsDiff) {
         if (isSelect && "value" in propsDiff) {
           const { value: _v, ...rest } = propsDiff;
           applyProperties(domNode, rest, source.attrs);
-        } else {
+        } else
           applyProperties(domNode, propsDiff, source.attrs);
-        }
       }
-      if (!target.attrs.dangerouslySetInnerHTML) {
+      if (!target.attrs.dangerouslySetInnerHTML)
         morphChildren(domNode, source.childs, target.childs, opts);
-      }
-      if (isSelect && target.attrs.value !== undefined) {
+      if (isSelect && target.attrs.value !== undefined)
         applyProperties(domNode, { value: target.attrs.value }, source.attrs);
-      }
       return domNode;
     }
     if (type === 11) {
@@ -2997,24 +3003,20 @@ function morphChildren(parentDom, oldChilds, newChilds, opts) {
     if (!used[i] && domNodes[i].parentNode === parentDom)
       parentDom.removeChild(domNodes[i]);
 }
-var renderCache = new WeakMap;
-function render(vnode, container, options) {
-  const cached = renderCache.get(container);
+function render(vnode, container, options, prev) {
   const isFragment = vnode instanceof VFragment;
-  if (cached && cached.vnode instanceof VFragment === isFragment) {
-    const oldDom = isFragment ? container : cached.dom;
-    const newDom = morphNode(oldDom, cached.vnode, vnode, options);
-    renderCache.set(container, { vnode, dom: isFragment ? container : newDom });
-    return newDom;
+  if (prev && prev.vnode instanceof VFragment === isFragment) {
+    const oldDom = isFragment ? container : prev.dom;
+    const newDom = morphNode(oldDom, prev.vnode, vnode, options);
+    return { vnode, dom: isFragment ? container : newDom };
   }
-  renderCache.delete(container);
   const domNode = vnode.toDom(options);
   container.replaceChildren(domNode);
-  renderCache.set(container, { vnode, dom: isFragment ? container : domNode });
-  return domNode;
+  return { vnode, dom: isFragment ? container : domNode };
 }
 function h(tagName, properties, children) {
-  const tag = tagName.toUpperCase();
+  const c = tagName.charCodeAt(0);
+  const tag = c >= 97 && c <= 122 ? tagName.toUpperCase() : tagName;
   const props = {};
   let key, namespace;
   if (properties) {
@@ -3065,6 +3067,7 @@ class App {
     };
     this._compiled = false;
     this._renderOpts = { document: rootNode.ownerDocument };
+    this._renderState = null;
   }
   get state() {
     return this.transactor.state;
@@ -3171,7 +3174,10 @@ class App {
   render() {
     const root = this.state.val;
     const stack = this.makeStack(root);
-    return render(this.renderer.renderRoot(stack, root), this.rootNode, this._renderOpts);
+    const { renderer, rootNode, _renderOpts, _renderState } = this;
+    const newState = render(renderer.renderRoot(stack, root), rootNode, _renderOpts, _renderState);
+    this._renderState = newState;
+    return newState.dom;
   }
   onChange(callback) {
     this.transactor.state.onChange(callback);
@@ -8093,7 +8099,7 @@ class Renderer {
   renderToDOM(stack, val) {
     const rootNode = document.createElement("div");
     const rOpts = { document };
-    render(h("div", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
+    render(h("DIV", null, [this.renderRoot(stack, val)]), rootNode, rOpts);
     return rootNode.childNodes[0];
   }
   renderToString(stack, val, cleanAttrs = true) {