@torpor/view 0.0.13 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @torpor/view
 
+## 0.1.0
+
+### Minor Changes
+
+- 995513a: Break: specify binding with `&` rather than `:`
+
+### Patch Changes
+
+- 98602ec: Fix: don't re-run the entire loop/control statement
+- a49d307: Fix: allow const destructuring in components
+- c9a9cf8: Fix: flush :onmounts when adding a fragment
+- cbd07ca: Feat: bind component props with `&name`
+- f53b184: Feat: watch $props
+- 215db17: Fix: allow $unwrapping a null object
+- 95e866b: Feat: shortcut syntax for object properties
+
+## 0.0.14
+
+### Patch Changes
+
+- fb896c6: Fix: make sure we've got $props on the server
+- 85bccf6: Fix: apply scope to elements without a class
+
 ## 0.0.13
 
 ### Patch Changes

package/README.md

@@ -38,8 +38,8 @@ npm install torpor
   - $mount to create an effect that runs after a component has been mounted
   - $unwrap to get the target object from the proxy
 - Automatic scoping of styles to component
-- Two-way binding with :value, :checked, etc
-- Element binding to a script variable with :self={...}
+- Two-way binding with &value, &checked, etc
+- Element binding to a script variable with &ref={...}
 - Element in and out transitions using the Web Animations API
 - Run an effect when an element is added to the DOM with :onmount={(el) => ...}
 - Special tags (mostly not yet implemented...)
@@ -162,10 +162,10 @@ export default function Component($props: { name: string }) {
             </div>
 
             <h2>Two way binding</h2>
-            <p>Two way binding can be accomplished with :value (or :checked etc).</p>
+            <p>Two way binding can be accomplished with &value (or &checked etc).</p>
             <div class="demo">
                 <p>
-                    Count: <input type="number" :value={$state.count} />
+                    Count: <input type="number" &value={$state.count} />
                 </p>
             </div>
 
@@ -211,7 +211,7 @@ export default function Component($props: { name: string }) {
 function TaskItem() {
     @render {
         <li :class={{ done: $props.task.done }}>
-            <input type="checkbox" :checked={$props.task.done} />
+            <input type="checkbox" &checked={$props.task.done} />
             {$props.task.text}
         </li>
     }

package/dist/compile.cjs

@@ -203,6 +203,7 @@ function buildComponentFragmentText(node, status, fragments, currentFragment) {
   }
 }
 function buildElementFragmentText(node, status, fragments, currentFragment) {
+  let needsClass = node.scopeStyles;
   currentFragment.text += `<${node.tagName}`;
   let attributesText = node.attributes.filter((a) => !a.name.startsWith("on") && !a.name.includes(":")).map((a) => {
     if (a.value && isReactive(a.value) && !a.name.includes(":")) {
@@ -210,6 +211,7 @@ function buildElementFragmentText(node, status, fragments, currentFragment) {
         return `${a.name}=""`;
       }
     } else if (a.name === "class" && node.scopeStyles) {
+      needsClass = false;
       let value = a.value ? `"${trimQuotes(a.value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
       return `${a.name}=${value}`;
     } else {
@@ -219,6 +221,9 @@ function buildElementFragmentText(node, status, fragments, currentFragment) {
   if (attributesText) {
     currentFragment.text += " " + attributesText;
   }
+  if (needsClass) {
+    currentFragment.text += ` class="torp-${status.styleHash}"`;
+  }
   currentFragment.text += ">";
   for (let child of node.children) {
     buildNodeFragmentText(child, status, fragments, currentFragment);
@@ -840,6 +845,29 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
     varPaths.set(varPath, name);
     varPaths.set(name, name);
   }
+  while (varPath.includes("t_next(t_next(")) {
+    const match = varPath.match(/(t_next\(){2,}/)[0];
+    const count = match.length / "t_next(".length;
+    const pos = varPath.indexOf("t_next(t_next(");
+    const head = varPath.substring(0, pos);
+    let level = 0;
+    let end = 0;
+    for (let i = pos + match.length; i < varPath.length; i++) {
+      if (varPath[i] === "(") {
+        level++;
+      } else if (varPath[i] === ")") {
+        if (level === 0) {
+          end = i;
+          break;
+        } else {
+          level--;
+        }
+      }
+    }
+    const tail = varPath.substring(end + count);
+    const param = varPath.substring(pos + match.length, end);
+    varPath = `${head}t_next(${param}, ${count})${tail}`;
+  }
   return varPath;
 }
 function getFragmentVarPathPart(path, varPath, status, root = false) {
@@ -889,12 +917,19 @@ function buildComponentNode(node, status, b, root = false) {
   const componentHasProps = node.attributes.length || root;
   const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
   if (componentHasProps) {
-    b.append(`const ${propsName}: any = {};`);
+    status.imports.add("$watch");
+    b.append(`const ${propsName}: any = $watch({});`);
     for (let { name, value } of node.attributes) {
       if (name === "self" && node.tagName === ":component") {
       } else if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
-        buildRun("setProp", `${propsName}["${name}"] = ${name};`, status, b);
+        const propName = name.split(".").at(-1);
+        buildRun("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
+      } else if (name.startsWith("&") && value != null && isFullyReactive(value)) {
+        name = name.substring(1);
+        value = value.substring(1, value.length - 1);
+        buildRun("setProp", `${propsName}["${name}"] = ${value};`, status, b);
+        buildRun("setBinding", `${value} = ${propsName}["${name}"];`, status, b);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
         let partlyReactive = isReactive(value);
@@ -1174,6 +1209,7 @@ function buildHtmlNode(node, status, b) {
 }
 function buildHtmlBranch(node, status, b, parentName, rangeName) {
   status.imports.add("t_run_branch");
+  b.append(`${node.statement};`);
   b.append(`t_run_branch(${rangeName}, -1, () => {`);
   const templateName = nextVarName("template", status);
   const fragmentName = `t_fragment_${node.fragment.number}`;
@@ -1494,7 +1530,8 @@ function buildHeadNode(node, status, b) {
   for (let { name, value } of node.attributes) {
     if (name.startsWith("{") && name.endsWith("}")) {
       name = name.substring(1, name.length - 1);
-      buildRun("setAttribute", `t_head_el.setAttribute("${name}", ${name});`, status, b);
+      const propName = name.split(".").at(-1);
+      buildRun("setAttribute", `t_head_el.setAttribute("${propName}", ${name});`, status, b);
     } else if (value != null && isReactive(value)) {
       if (isFullyReactive(value)) {
         value = value.substring(1, value.length - 1);
@@ -1517,18 +1554,19 @@ function buildElementAttributes(node, varName, status, b) {
     if (name === "self" && node.tagName === ":element") {
     } else if (name.startsWith("{") && name.endsWith("}")) {
       name = name.substring(1, name.length - 1);
-      buildRun("setAttribute", `${varName}.setAttribute("${name}", ${name});`, status, b);
+      const propName = name.split(".").at(-1);
+      buildRun("setAttribute", `${varName}.setAttribute("${propName}", ${name});`, status, b);
     } else if (value != null && isReactive(value)) {
       if (isFullyReactive(value)) {
         value = value.substring(1, value.length - 1);
       } else {
         value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
       }
-      if (name === ":self") {
+      if (name === "&ref") {
         b.append(`${value} = ${varName};`);
-      } else if (name === ":group") {
+      } else if (name === "&group") {
         buildBindGroupAttribute(node, varName, value, status, b);
-      } else if (name === ":value" || name === ":checked") {
+      } else if (name === "&value" || name === "&checked") {
         buildBindAttribute(node, varName, name, value, status, b);
       } else if (name === ":onmount") {
         buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
@@ -1717,7 +1755,8 @@ function buildSlotNode(node, status, b) {
     for (let { name, value } of slotAttributes) {
       if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
-        buildRun("setProp", `${propsName}["${name}"] = ${name};`, status, b);
+        const propName = name.split(".").at(-1);
+        buildRun("setProp", `${propsName}["${propName}"] = ${name};`, status, b);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
         let partlyReactive = isReactive(value);
@@ -1910,7 +1949,6 @@ var importsMap = {
   $unwrap: 'import { $unwrap } from "${folder}";',
   $run: 'import { $run } from "${folder}";',
   $mount: 'import { $mount } from "${folder}";',
-  t_flush: 'import { t_flush } from "${folder}";',
   t_range: 'import { t_range } from "${folder}";',
   t_push_range: 'import { t_push_range } from "${folder}";',
   t_pop_range: 'import { t_pop_range } from "${folder}";',
@@ -1977,7 +2015,8 @@ function buildTemplate(template, imports, b) {
     } else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
       b.append(script.substring(marker, i));
       if (current.props?.length) {
-        b.append(`$props ??= {};`);
+        imports.add("$watch");
+        b.append(`$props ??= $watch({});`);
       }
       if (current.contextProps?.length) {
         b.append(`$context = Object.assign({}, $context);`);
@@ -2010,11 +2049,6 @@ function buildTemplate(template, imports, b) {
       b.append(script.substring(marker, i));
       currentIndex += 1;
       current = template.components[currentIndex];
-      if (imports.has("$mount")) {
-        imports.add("t_flush");
-        b.append("");
-        b.append("t_flush();");
-      }
       marker = i + "/* @end */".length;
     }
   }
@@ -2066,7 +2100,8 @@ function buildServerComponentNode(node, status, b) {
     for (let { name, value } of node.attributes) {
       if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
-        b.append(`${propsName}["${name}"] = ${name};`);
+        const propName = name.split(".").at(-1);
+        b.append(`${propsName}["${propName}"] = ${name};`);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
         let partlyReactive = isReactive(value);
@@ -2412,6 +2447,7 @@ function buildServerElementNode(node, status, b) {
   }
 }
 function buildElementAttributes2(node, status) {
+  let needsClass = node.scopeStyles;
   let attributes = [];
   for (let { name, value } of node.attributes) {
     if (name === "self" && node.tagName === ":element") {
@@ -2429,11 +2465,12 @@ function buildElementAttributes2(node, status) {
       );
     } else if (name.startsWith("{") && name.endsWith("}")) {
       name = name.substring(1, name.length - 1);
+      const propName = name.split(".").at(-1);
       status.imports.add("t_attr");
-      attributes.push(`${name}="\${t_attr(${name})}"`);
+      attributes.push(`${propName}="\${t_attr(${name})}"`);
     } else if (value != null && isFullyReactive(value)) {
       value = value.substring(1, value.length - 1);
-      if (name === ":self" || name === ":value" || name === ":checked" || name === ":group") {
+      if (name === "&ref" || name === "&value" || name === "&checked" || name === "&group") {
         let defaultValue = "";
         let typeAttribute = node.attributes.find((a) => a.name === "type");
         if (typeAttribute && typeAttribute.value) {
@@ -2460,6 +2497,7 @@ function buildElementAttributes2(node, status) {
         status.imports.add("t_class");
         if (node.scopeStyles) {
           value += `, "torp-${status.styleHash}"`;
+          needsClass = false;
         }
         attributes.push(`class="\${t_class(${value})}"`);
       } else if (name === ":style") {
@@ -2477,12 +2515,16 @@ function buildElementAttributes2(node, status) {
     } else if (name === "class" && node.scopeStyles) {
       value = value ? `"${trimQuotes(value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
       attributes.push(`${name}="${trimQuotes(value).replaceAll('"', "&quot;")}"`);
+      needsClass = false;
     } else if (value != null) {
       attributes.push(`${name}="${trimQuotes(value).replaceAll('"', "&quot;")}"`);
     } else {
       attributes.push(`${name}`);
     }
   }
+  if (needsClass) {
+    attributes.push(`class="torp-${status.styleHash}"`);
+  }
   return attributes.join(" ");
 }
 
@@ -2508,7 +2550,8 @@ function buildServerSlotNode(node, status, b) {
     for (let { name, value } of slotAttributes) {
       if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
-        b.append(`${propsName}["${name}"] = ${name};`);
+        const propName = name.split(".").at(-1);
+        b.append(`${propsName}["${propName}"] = ${name};`);
       } else if (value != null) {
         let fullyReactive = isFullyReactive(value);
         let partlyReactive = isReactive(value);
@@ -2719,6 +2762,9 @@ function buildServerTemplate(template, imports, b, options) {
       marker = i + "/* @params */".length;
     } else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
       b.append(script.substring(marker, i));
+      if (current.props?.length) {
+        b.append(`$props ??= {};`);
+      }
       if (current.contextProps?.length) {
         b.append(`$context = Object.assign({}, $context);`);
       }
@@ -3661,22 +3707,28 @@ function parseCode(source) {
         parseComponentEnd(status);
       }
     } else if (accept("function", status)) {
-      consumeSpace(status);
-      if (/[A-Z]/.test(source[status.i])) {
-        parseComponentStart(status);
+      if (consumeSpace(status)) {
+        if (/[A-Z]/.test(source[status.i])) {
+          parseComponentStart(status);
+        } else {
+          status.i--;
+        }
       }
     } else if (accept("const", status)) {
-      consumeSpace(status);
-      if (/[A-Z]/.test(source[status.i])) {
-        const start = status.i;
-        consumeAlphaNumeric(status);
-        consumeSpace(status);
-        if (accept("=", status)) {
+      if (consumeSpace(status)) {
+        if (/[A-Z]/.test(source[status.i])) {
+          const start = status.i;
+          consumeAlphaNumeric(status);
           consumeSpace(status);
-          if (accept("(", status, false)) {
-            status.i = start;
-            parseComponentStart(status);
+          if (accept("=", status)) {
+            consumeSpace(status);
+            if (accept("(", status, false)) {
+              status.i = start;
+              parseComponentStart(status);
+            }
           }
+        } else {
+          status.i--;
         }
       }
     } else if (accept("export", status)) {