tutuca 0.9.28 → 0.9.30

package/README.md

@@ -11,6 +11,9 @@ Zero-dependency batteries included SPA framework.
 
 ## Quick Start
 
+For an interactive walk-through with editable examples, see the
+[tutorial](https://marianoguerra.github.io/tutuca/tutorial.html).
+
 ### CDN (no install)
 
 ```html

package/dist/tutuca-cli.js

@@ -1372,13 +1372,13 @@ class IterInfo {
 }
 
 class ParseContext {
-  constructor(DOMParser, Text, Comment, nodes, events, macroNodes, frame, parent) {
+  constructor(document2, Text, Comment, nodes, events, macroNodes, frame, parent) {
     this.nodes = nodes ?? [];
     this.events = events ?? [];
     this.macroNodes = macroNodes ?? [];
     this.parent = parent ?? null;
     this.frame = frame ?? {};
-    this.DOMParser = DOMParser ?? globalThis.DOMParser;
+    this.document = document2 ?? globalThis.document;
     this.Text = Text ?? globalThis.Text;
     this.Comment = Comment ?? globalThis.Comment;
     this.cacheConstNodes = true;
@@ -1387,12 +1387,14 @@ class ParseContext {
     return this.frame.macroName === name || this.parent?.isInsideMacro(name);
   }
   enterMacro(macroName, macroVars, macroSlots) {
-    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
+    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
     const frame = { macroName, macroVars, macroSlots };
-    return new ParseContext(DP, Text, Comment, nodes, events, macroNodes, frame, this);
+    return new ParseContext(document2, Text, Comment, nodes, events, macroNodes, frame, this);
   }
-  newDOMParser() {
-    return new this.DOMParser;
+  parseHTML(html) {
+    const t = this.document.createElement("template");
+    t.innerHTML = html;
+    return Array.from(t.content.childNodes);
   }
   addNodeIf(Class, val, extra) {
     if (val !== null) {
@@ -1515,7 +1517,7 @@ 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, _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) => {
+var TextNode, CommentNode, ChildsNode, DomNode, FragmentNode, maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs), VALID_NODE_RE, 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;
@@ -1612,9 +1614,7 @@ var init_anode = __esm(() => {
       return this.val.toPathItem();
     }
     static parse(html, px) {
-      _parser ??= px.newDOMParser();
-      const nodes = _parser.parseFromString(html, "text/html").body.childNodes;
-      return ANode.fromDOM(nodes[0] ?? new px.Text(""), px);
+      return ANode.fromDOM(px.parseHTML(html)[0] ?? new px.Text(""), px);
     }
     static fromDOM(node, px) {
       if (node instanceof px.Text)
@@ -2258,8 +2258,21 @@ function checkConsistentAttrs(lx, Comp, referencedAlters, referencedComputed) {
       for (const attr of view.ctx.attrs) {
         const { attrs, wrapperAttrs, textChild, isMacroCall } = attr;
         if (attrs?.constructor.name === "DynAttrs") {
+          const seenNames = new Set;
           for (const attr2 of attrs.items) {
-            if (attr2?.constructor.name === "Attr") {
+            const name = attr2?.name;
+            if (name !== undefined && name !== "data-eid") {
+              if (seenNames.has(name)) {
+                lx.error(DUPLICATE_ATTR_DEFINITION, { name });
+              } else {
+                seenNames.add(name);
+              }
+            }
+            if (attr2?.constructor.name === "IfAttr") {
+              for (const subVal of [attr2.condVal, attr2.thenVal, attr2.elseVal]) {
+                checkConsistentAttrVal(lx, subVal, fields, proto, computed, scope, alter, referencedAlters, referencedComputed, isMacroCall);
+              }
+            } else if (attr2?.val !== undefined) {
               checkConsistentAttrVal(lx, attr2.val, fields, proto, computed, scope, alter, referencedAlters, referencedComputed, isMacroCall);
             }
           }
@@ -2346,7 +2359,7 @@ class LintContext {
     this.reports.push({ id, info, level, context: { ...this.frame } });
   }
 }
-var ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", 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", COMPUTED_VAL_NOT_DEFINED = "COMPUTED_VAL_NOT_DEFINED", COMPUTED_NOT_REFERENCED = "COMPUTED_NOT_REFERENCED", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", LEVEL_WARN = "warn", LEVEL_ERROR = "error", LEVEL_HINT = "hint", NO_WRAPPERS, KNOWN_HANDLER_NAMES, LintParseContext;
+var ALT_HANDLER_NOT_DEFINED = "ALT_HANDLER_NOT_DEFINED", ALT_HANDLER_NOT_REFERENCED = "ALT_HANDLER_NOT_REFERENCED", 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", COMPUTED_VAL_NOT_DEFINED = "COMPUTED_VAL_NOT_DEFINED", COMPUTED_NOT_REFERENCED = "COMPUTED_NOT_REFERENCED", DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION", UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME", UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME", UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG", LEVEL_WARN = "warn", LEVEL_ERROR = "error", LEVEL_HINT = "hint", NO_WRAPPERS, KNOWN_HANDLER_NAMES, LintParseContext;
 var init_lint_check = __esm(() => {
   init_anode();
   NO_WRAPPERS = {};
@@ -2371,8 +2384,8 @@ var init_lint_check = __esm(() => {
     "dragInfo"
   ]);
   LintParseContext = class LintParseContext extends ParseContext {
-    constructor(DOMParser, Text, Comment) {
-      super(DOMParser, Text, Comment);
+    constructor(document2, Text, Comment) {
+      super(document2, Text, Comment);
       this.attrs = [];
     }
     onAttributes(attrs, wrapperAttrs, textChild, isMacroCall = false) {
@@ -8183,18 +8196,18 @@ init_lint_check();
 import { JSDOM } from "jsdom";
 async function createNodeEnv() {
   const dom = new JSDOM("<!DOCTYPE html><html><head></head><body></body></html>");
-  const { DOMParser, Text, Comment } = dom.window;
-  globalThis.document = dom.window.document;
+  const { document: document2, Text, Comment } = dom.window;
+  globalThis.document = document2;
 
   class HeadlessParseContext extends ParseContext {
     constructor() {
-      super(DOMParser, Text, Comment);
+      super(document2, Text, Comment);
     }
   }
 
   class HeadlessLintParseContext extends LintParseContext {
     constructor() {
-      super(DOMParser, Text, Comment);
+      super(document2, Text, Comment);
     }
   }
   return {

package/dist/tutuca-dev.js

@@ -812,6 +812,7 @@ class Attr extends BaseAttr {
 
 class ConstAttr extends Attr {
 }
+
 class RawHtmlAttr extends Attr {
   constructor(val) {
     super("dangerouslySetInnerHTML", val ?? vp.nullConstVal);
@@ -993,7 +994,6 @@ class FragmentNode extends ChildsNode {
 }
 var maybeFragment = (xs) => xs.length === 1 ? xs[0] : new FragmentNode(xs);
 var VALID_NODE_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
-var _parser = null;
 
 class ANode extends BaseNode {
   constructor(nodeId, val) {
@@ -1005,9 +1005,7 @@ class ANode extends BaseNode {
     return this.val.toPathItem();
   }
   static parse(html, px) {
-    _parser ??= px.newDOMParser();
-    const nodes = _parser.parseFromString(html, "text/html").body.childNodes;
-    return ANode.fromDOM(nodes[0] ?? new px.Text(""), px);
+    return ANode.fromDOM(px.parseHTML(html)[0] ?? new px.Text(""), px);
   }
   static fromDOM(node, px) {
     if (node instanceof px.Text)
@@ -1300,13 +1298,13 @@ var WRAPPER_NODES = {
 };
 
 class ParseContext {
-  constructor(DOMParser, Text, Comment, nodes, events, macroNodes, frame, parent) {
+  constructor(document2, Text, Comment, nodes, events, macroNodes, frame, parent) {
     this.nodes = nodes ?? [];
     this.events = events ?? [];
     this.macroNodes = macroNodes ?? [];
     this.parent = parent ?? null;
     this.frame = frame ?? {};
-    this.DOMParser = DOMParser ?? globalThis.DOMParser;
+    this.document = document2 ?? globalThis.document;
     this.Text = Text ?? globalThis.Text;
     this.Comment = Comment ?? globalThis.Comment;
     this.cacheConstNodes = true;
@@ -1315,12 +1313,14 @@ class ParseContext {
     return this.frame.macroName === name || this.parent?.isInsideMacro(name);
   }
   enterMacro(macroName, macroVars, macroSlots) {
-    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
+    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
     const frame = { macroName, macroVars, macroSlots };
-    return new ParseContext(DP, Text, Comment, nodes, events, macroNodes, frame, this);
+    return new ParseContext(document2, Text, Comment, nodes, events, macroNodes, frame, this);
   }
-  newDOMParser() {
-    return new this.DOMParser;
+  parseHTML(html) {
+    const t = this.document.createElement("template");
+    t.innerHTML = html;
+    return Array.from(t.content.childNodes);
   }
   addNodeIf(Class, val, extra) {
     if (val !== null) {
@@ -1500,9 +1500,9 @@ class ParseCtxClassSetCollector extends ParseContext {
     }
   }
   enterMacro(macroName, macroVars, macroSlots) {
-    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
+    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
     const frame = { macroName, macroVars, macroSlots };
-    const v = new ParseCtxClassSetCollector(DP, Text, Comment, nodes, events, macroNodes, frame, this);
+    const v = new ParseCtxClassSetCollector(document2, Text, Comment, nodes, events, macroNodes, frame, this);
     v.classes = this.classes;
     return v;
   }
@@ -1559,6 +1559,7 @@ var INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER = "INPUT_HANDLER_METHOD_FOR_INPUT_HAN
 var FIELD_VAL_NOT_DEFINED = "FIELD_VAL_NOT_DEFINED";
 var COMPUTED_VAL_NOT_DEFINED = "COMPUTED_VAL_NOT_DEFINED";
 var COMPUTED_NOT_REFERENCED = "COMPUTED_NOT_REFERENCED";
+var DUPLICATE_ATTR_DEFINITION = "DUPLICATE_ATTR_DEFINITION";
 var UNKNOWN_REQUEST_NAME = "UNKNOWN_REQUEST_NAME";
 var UNKNOWN_COMPONENT_NAME = "UNKNOWN_COMPONENT_NAME";
 var UNKNOWN_MACRO_ARG = "UNKNOWN_MACRO_ARG";
@@ -1792,8 +1793,21 @@ function checkConsistentAttrs(lx, Comp, referencedAlters, referencedComputed) {
       for (const attr of view.ctx.attrs) {
         const { attrs, wrapperAttrs, textChild, isMacroCall } = attr;
         if (attrs?.constructor.name === "DynAttrs") {
+          const seenNames = new Set;
           for (const attr2 of attrs.items) {
-            if (attr2?.constructor.name === "Attr") {
+            const name = attr2?.name;
+            if (name !== undefined && name !== "data-eid") {
+              if (seenNames.has(name)) {
+                lx.error(DUPLICATE_ATTR_DEFINITION, { name });
+              } else {
+                seenNames.add(name);
+              }
+            }
+            if (attr2?.constructor.name === "IfAttr") {
+              for (const subVal of [attr2.condVal, attr2.thenVal, attr2.elseVal]) {
+                checkConsistentAttrVal(lx, subVal, fields, proto, computed, scope, alter, referencedAlters, referencedComputed, isMacroCall);
+              }
+            } else if (attr2?.val !== undefined) {
               checkConsistentAttrVal(lx, attr2.val, fields, proto, computed, scope, alter, referencedAlters, referencedComputed, isMacroCall);
             }
           }
@@ -1882,8 +1896,8 @@ class LintContext {
 }
 
 class LintParseContext extends ParseContext {
-  constructor(DOMParser, Text, Comment) {
-    super(DOMParser, Text, Comment);
+  constructor(document2, Text, Comment) {
+    super(document2, Text, Comment);
     this.attrs = [];
   }
   onAttributes(attrs, wrapperAttrs, textChild, isMacroCall = false) {
@@ -1916,6 +1930,8 @@ function lintIdToMessage(id, info) {
       return `Computed property '$${info.name}' is not defined`;
     case "COMPUTED_NOT_REFERENCED":
       return `Computed property '$${info.name}' is defined but not referenced`;
+    case "DUPLICATE_ATTR_DEFINITION":
+      return `Attribute '${info.name}' is defined more than once`;
     case "UNKNOWN_REQUEST_NAME":
       return `Unknown request '!${info.name}'`;
     case "UNKNOWN_COMPONENT_NAME":
@@ -7739,12 +7755,6 @@ class Field {
     proto[`reset${uname}`] = function() {
       return this.set(name, that.defaultValue);
     };
-    proto[`is${uname}NotSet`] = function() {
-      return this.get(name) == null;
-    };
-    proto[`is${uname}Set`] = function() {
-      return this.get(name) != null;
-    };
     this.extendProtoForType(proto, uname);
   }
 }
@@ -7797,6 +7807,7 @@ class FieldBool extends Field {
     proto[`set${uname}`] = function(v) {
       return this.set(name, !!v);
     };
+    extendProtoTruthy(proto, name, uname);
   }
 }
 
@@ -7809,6 +7820,10 @@ class FieldAny extends Field {
     const type = getTypeName(dv) ?? "any";
     return { type, defaultValue: dv?.toJS ? dv.toJS() : dv };
   }
+  extendProtoForType(proto, uname) {
+    extendProtoNullable(proto, this.name, uname);
+    extendProtoTruthy(proto, this.name, uname);
+  }
 }
 var stringCoercer = (v) => v?.toString?.() ?? "";
 
@@ -7826,6 +7841,9 @@ class FieldInt extends Field {
   constructor(name, defaultValue = 0) {
     super("int", name, CHECK_TYPE_INT, intCoercer, defaultValue);
   }
+  extendProtoForType(proto, uname) {
+    extendProtoTruthy(proto, this.name, uname);
+  }
 }
 var floatCoercer = (_) => null;
 
@@ -7833,6 +7851,9 @@ class FieldFloat extends Field {
   constructor(name, defaultValue = 0) {
     super("float", name, CHECK_TYPE_FLOAT, floatCoercer, defaultValue);
   }
+  extendProtoForType(proto, uname) {
+    extendProtoTruthy(proto, this.name, uname);
+  }
 }
 var getTypeName = (v) => v?.constructor?.getMetaClass?.()?.name;
 
@@ -7857,6 +7878,10 @@ class FieldComp extends Field {
   toDataDef() {
     return { component: this.typeName, args: this.args };
   }
+  extendProtoForType(proto, uname) {
+    extendProtoNullable(proto, this.name, uname);
+    extendProtoTruthy(proto, this.name, uname);
+  }
 }
 var NONE2 = Symbol("NONE");
 function extendProtoForKeyed(proto, name, uname) {
@@ -7928,6 +7953,25 @@ function extendProtoSized(proto, name, uname, defaultEmpty, propName = "size") {
   proto[`${name}Len`] = function() {
     return this.get(name, defaultEmpty)[propName];
   };
+  proto[`is${uname}Truthy`] = function() {
+    return this.get(name, defaultEmpty)[propName] > 0;
+  };
+  proto[`is${uname}Falsy`] = function() {
+    return this.get(name, defaultEmpty)[propName] === 0;
+  };
+}
+function extendProtoNullable(proto, name, uname) {
+  proto[`is${uname}Null`] = function() {
+    return this.get(name) == null;
+  };
+}
+function extendProtoTruthy(proto, name, uname) {
+  proto[`is${uname}Truthy`] = function() {
+    return !!this.get(name);
+  };
+  proto[`is${uname}Falsy`] = function() {
+    return !this.get(name);
+  };
 }
 var EMPTY_SET2 = Set2();
 var isetCoercer = (v) => Array.isArray(v) ? Set2(v) : v instanceof Set ? Set2(v) : null;
@@ -8564,9 +8608,9 @@ class LintClassCollectorCtx extends ParseCtxClassSetCollector {
     this.attrs = [];
   }
   enterMacro(macroName, macroVars, macroSlots) {
-    const { DOMParser: DP, Text, Comment, nodes, events, macroNodes } = this;
+    const { document: document2, Text, Comment, nodes, events, macroNodes } = this;
     const frame = { macroName, macroVars, macroSlots };
-    const v = new LintClassCollectorCtx(DP, Text, Comment, nodes, events, macroNodes, frame, this);
+    const v = new LintClassCollectorCtx(document2, Text, Comment, nodes, events, macroNodes, frame, this);
     v.classes = this.classes;
     v.attrs = this.attrs;
     return v;
@@ -8659,6 +8703,7 @@ export {
   INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD,
   Map2 as IMap,
   FIELD_VAL_NOT_DEFINED,
+  DUPLICATE_ATTR_DEFINITION,
   Collection,
   COMPUTED_VAL_NOT_DEFINED,
   COMPUTED_NOT_REFERENCED,