npm - tutuca - Versions diffs - 0.9.7 → 0.9.8 - Mend

tutuca 0.9.7 → 0.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -1 +1,70 @@
-# tutuca
+# Tutuca
+Zero-dependency batteries included SPA framework.
+- **Single file, no build, no dependencies, no setup** — a script tag is all you need
+- **Batteries included** — state management, side effects, automatic memoization, drag and drop and more
+- **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
+## Quick Start
+### CDN (no install)
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tutuca: Getting Started</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { component, html, tutuca } from "https://esm.sh/tutuca";
+      const Counter = component({
+        name: "Counter",
+        fields: {
+          count: 0,
+        },
+        methods: {
+          inc() {
+            return this.setCount(this.count + 1);
+          },
+          dec() {
+            return this.setCount(this.count - 1);
+          },
+        },
+        view: html`<div>
+          <button @on.click=".dec">-</button>
+          <div @text=".count"></div>
+          <button @on.click=".inc">+</button>
+        </div>`,
+      });
+      function main() {
+        const app = tutuca("#app");
+        app.state.set(Counter.make({}));
+        app.registerComponents([Counter]);
+        app.start();
+      }
+      main();
+    </script>
+  </body>
+</html>
+```
+## License
+MIT
+## Links
+- [Documentation & Playground](https://marianoguerra.github.io/tutuca/)
+- [Tutorial](https://marianoguerra.github.io/tutuca/tutorial.html)
+- [GitHub](https://github.com/marianoguerra/tutuca)

package/dist/tutuca-dev.js CHANGED Viewed

@@ -1089,6 +1089,10 @@ class ANode extends BaseNode {
           return px.addNodeIf(RenderItNode, vp.bindValIt, as);
         case "render-each":
           return RenderEachNode.parse(px, vp, value, as, attrs);
+        case "show":
+          return px.addNodeIf(ShowNode, vp.parseCondValue(value, px), maybeFragment(childs));
+        case "hide":
+          return px.addNodeIf(HideNode, vp.parseCondValue(value, px), maybeFragment(childs));
       }
       return new CommentNode(`Error: InvalidSpecialTagOp ${name}=${value}`);
     } else if (tag.charCodeAt(1) === 58 && tag.charCodeAt(0) === 88) {
@@ -6959,14 +6963,8 @@ class FieldString extends Field {
   constructor(name, defaultValue = "") {
     super("text", name, CHECK_TYPE_STRING, stringCoercer, defaultValue);
   }
-  extendProtoForType(proto, _uname) {
-    const { name } = this;
-    proto[`${name}IsEmpty`] = function() {
-      return this.get(name, "").length === 0;
-    };
-    proto[`${name}Len`] = function() {
-      return this.get(name, "").length;
-    };
+  extendProtoForType(proto, uname) {
+    extendProtoSized(proto, this.name, uname, "", "length");
   }
 }
 var intCoercer = (v) => Number.isFinite(v) ? Math.trunc(v) : null;
@@ -7009,7 +7007,7 @@ class FieldComp extends Field {
 }
 var NONE2 = Symbol("NONE");
 function extendProtoForKeyed(proto, name, uname) {
-  extendProtoSeq(proto, name, EMPTY_LIST);
+  extendProtoSized(proto, name, uname, EMPTY_LIST);
   proto[`setIn${uname}At`] = function(i, v) {
     return this.set(name, this.get(name).set(i, v));
   };
@@ -7025,11 +7023,13 @@ function extendProtoForKeyed(proto, name, uname) {
     console.warn("key", i, "not found in", name, col);
     return this;
   };
-  function deleteInAt(i) {
-    return this.set(name, this.get(name).delete(i));
-  }
-  proto[`deleteIn${uname}At`] = deleteInAt;
-  proto[`removeIn${uname}At`] = deleteInAt;
+  extendDeleteInAt(proto, name, `${uname}At`);
+}
+function extendDeleteInAt(proto, name, uname) {
+  proto[`deleteIn${uname}`] = function(v) {
+    return this.set(name, this.get(name).delete(v));
+  };
+  proto[`removeIn${uname}`] = proto[`deleteIn${uname}`];
 }
 var EMPTY_LIST = List();
 var listCoercer = (v) => Array.isArray(v) ? List(v) : null;
@@ -7069,12 +7069,12 @@ class FieldOMap extends Field {
     extendProtoForKeyed(proto, this.name, uname);
   }
 }
-function extendProtoSeq(proto, name, defaultEmpty) {
-  proto[`${name}IsEmpty`] = function() {
-    return this.get(name, defaultEmpty).size === 0;
+function extendProtoSized(proto, name, uname, defaultEmpty, propName = "size") {
+  proto[`is${uname}Empty`] = function() {
+    return this.get(name, defaultEmpty)[propName] === 0;
   };
   proto[`${name}Len`] = function() {
-    return this.get(name, defaultEmpty).size;
+    return this.get(name, defaultEmpty)[propName];
   };
 }
 var EMPTY_SET2 = Set2();
@@ -7086,14 +7086,11 @@ class FieldSet extends Field {
   }
   extendProtoForType(proto, uname) {
     const { name } = this;
-    extendProtoSeq(proto, name, EMPTY_SET2);
+    extendProtoSized(proto, name, uname, EMPTY_SET2);
     proto[`addIn${uname}`] = function(v) {
       return this.set(name, this.get(name).add(v));
     };
-    proto[`deleteIn${uname}`] = function(v) {
-      return this.set(name, this.get(name).delete(v));
-    };
-    proto[`removeIn${uname}`] = proto[`deleteIn${uname}`];
+    extendDeleteInAt(proto, name, uname);
     proto[`hasIn${uname}`] = function(v) {
       return this.get(name).has(v);
     };
@@ -7468,9 +7465,8 @@ function* klistEntries(seq) {
 }
 seqInfoByClass.set(KList, ["data-sk", klistEntries]);
 // src/vdom.js
-function isHtmlAttribute(propName) {
-  return propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
-}
+var isHtmlAttribute = (propName) => propName[4] === "-" && (propName[0] === "d" || propName[0] === "a");
+var isObject = (v) => v !== null && typeof v === "object";
 function applyProperties(node, props, previous) {
   for (const propName in props) {
     const propValue = props[propName];
@@ -7480,7 +7476,7 @@ function applyProperties(node, props, previous) {
       node.setAttribute(propName, propValue);
     } else if (propName === "dangerouslySetInnerHTML") {
       node.innerHTML = propValue.__html ?? "";
-    } else if (typeof propValue === "object" && propValue !== null) {
+    } else if (isObject(propValue)) {
       patchObject(node, previous, propName, propValue);
     } else if (propName === "className") {
       node.setAttribute("class", propValue);
@@ -7493,11 +7489,7 @@ function removeProperty(node, propName, previous) {
   const previousValue = previous[propName];
   if (propName === "dangerouslySetInnerHTML") {
     node.innerHTML = "";
-  } else if (isHtmlAttribute(propName)) {
-    node.removeAttribute(propName);
-  } else if (typeof previousValue === "string") {
-    if (propName !== "className")
-      node[propName] = "";
+  } else if (typeof previousValue === "string" || isHtmlAttribute(propName)) {
     const attrName = propName === "className" ? "class" : propName === "htmlFor" ? "for" : propName;
     node.removeAttribute(attrName);
   } else {
@@ -7506,12 +7498,12 @@ function removeProperty(node, propName, previous) {
 }
 function patchObject(node, previous, propName, propValue) {
   const previousValue = previous?.[propName];
-  if (previousValue && typeof previousValue === "object" && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
+  if (isObject(previousValue) && Object.getPrototypeOf(previousValue) !== Object.getPrototypeOf(propValue)) {
     node[propName] = propValue;
     return;
   }
   let current = node[propName];
-  if (typeof current !== "object" || current === null) {
+  if (!isObject(current)) {
     node[propName] = {};
     current = node[propName];
   }
@@ -7529,16 +7521,11 @@ class VBase {
     return null;
   }
 }
-function getKey(child) {
-  return child instanceof VNode2 ? child.key : undefined;
-}
-function isIterable(obj) {
-  return obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
-}
+var getKey = (child) => child instanceof VNode2 ? child.key : undefined;
+var isIterable = (obj) => obj != null && typeof obj !== "string" && typeof obj[Symbol.iterator] === "function";
 function addChild(normalizedChildren, child) {
-  if (child == null) {
+  if (child == null)
     return;
-  }
   if (isIterable(child)) {
     for (const c of child) {
       addChild(normalizedChildren, c);
@@ -7589,9 +7576,8 @@ class VComment extends VBase {
 class VFragment extends VBase {
   constructor(childs) {
     super();
-    const normalized = [];
-    addChild(normalized, childs);
-    this.childs = normalized;
+    this.childs = [];
+    addChild(this.childs, childs);
   }
   get nodeType() {
     return 11;
@@ -7675,7 +7661,7 @@ function diffProps(a, b) {
     }
     const aValue = a[aKey];
     const bValue = b[aKey];
-    if (aValue === bValue) {} else if (typeof aValue === "object" && aValue !== null && typeof bValue === "object" && bValue !== null) {
+    if (aValue === bValue) {} else if (isObject(aValue) && isObject(bValue)) {
       if (Object.getPrototypeOf(bValue) !== Object.getPrototypeOf(aValue)) {
         diff ??= {};
         diff[aKey] = bValue;
@@ -7707,14 +7693,15 @@ function replaceNode(domNode, vnode, options) {
   }
   return newNode || domNode;
 }
+var bothInstanceOf = (a, b, C) => a instanceof C && b instanceof C;
 function morphNode(domNode, source, target, opts) {
   if (source === target || source.isEqualTo(target))
     return domNode;
-  if (source instanceof VText && target instanceof VText || source instanceof VComment && target instanceof VComment) {
+  if (bothInstanceOf(source, target, VText) || bothInstanceOf(source, target, VComment)) {
     domNode.data = target.text;
     return domNode;
   }
-  if (source instanceof VNode2 && target instanceof VNode2 && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
+  if (bothInstanceOf(source, target, VNode2) && source.tag === target.tag && source.namespace === target.namespace && source.key === target.key) {
     const propsDiff = diffProps(source.attrs, target.attrs);
     if (propsDiff) {
       applyProperties(domNode, propsDiff, source.attrs);
@@ -7724,7 +7711,7 @@ function morphNode(domNode, source, target, opts) {
     }
     return domNode;
   }
-  if (source instanceof VFragment && target instanceof VFragment) {
+  if (bothInstanceOf(source, target, VFragment)) {
     morphChildren(domNode, source.childs, target.childs, null, opts);
     return domNode;
   }
@@ -7801,10 +7788,8 @@ function render(vnode, container, options) {
     if (wasFragment === isFragment) {
       const rootNode = wasFragment ? container : cached.dom;
       const newDom = morphNode(rootNode, cached.vnode, vnode, options);
-      renderCache.set(container, {
-        vnode,
-        dom: isFragment ? container : newDom
-      });
+      const domToCache = isFragment ? container : newDom;
+      renderCache.set(container, { vnode, dom: domToCache });
       return newDom;
     }
     renderCache.delete(container);
@@ -7813,32 +7798,33 @@ function render(vnode, container, options) {
   if (domNode) {
     container.innerHTML = "";
     container.appendChild(domNode);
-    renderCache.set(container, {
-      vnode,
-      dom: isFragment ? container : domNode
-    });
+    const domToCache = isFragment ? container : domNode;
+    renderCache.set(container, { vnode, dom: domToCache });
   }
   return domNode;
 }
 function h(tagName, properties, children) {
   const tag = tagName.toUpperCase();
   const props = {};
-  let key;
-  let namespace;
+  let key, namespace;
   if (properties) {
     for (const propName in properties) {
-      if (propName === "key") {
-        key = properties[propName];
-      } else if (propName === "namespace") {
-        namespace = properties[propName];
-      } else if (propName === "class") {
-        props.className = properties[propName];
-      } else if (propName === "for") {
-        props.htmlFor = properties[propName];
-      } else if (isHtmlAttribute(propName)) {
-        props[propName] = String(properties[propName]);
-      } else {
-        props[propName] = properties[propName];
+      const propVal = properties[propName];
+      switch (propName) {
+        case "key":
+          key = propVal;
+          break;
+        case "namespace":
+          namespace = propVal;
+          break;
+        case "class":
+          props.className = propVal;
+          break;
+        case "for":
+          props.htmlFor = propVal;
+          break;
+        default:
+          props[propName] = isHtmlAttribute(propName) ? String(propVal) : propVal;
       }
     }
   }