@torpor/view 0.0.14 → 0.1.1

package/dist/compile.js

@@ -819,6 +819,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) {
@@ -868,12 +891,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);
@@ -1153,6 +1183,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}`;
@@ -1473,7 +1504,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);
@@ -1492,22 +1524,30 @@ function buildHeadNode(node, status, b) {
 		});`);
 }
 function buildElementAttributes(node, varName, status, b) {
+  const refAttribute = node.attributes.find((a) => a.name === "&ref");
+  if (refAttribute) {
+    let value = refAttribute.value;
+    if (value != null && isFullyReactive(value)) {
+      value = value.substring(1, value.length - 1);
+      b.append(`${value} = ${varName};`);
+    }
+  }
   for (let { name, value } of node.attributes) {
     if (name === "self" && node.tagName === ":element") {
+    } else if (name === "&ref") {
     } 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") {
-        b.append(`${value} = ${varName};`);
-      } else if (name === ":group") {
+      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);
@@ -1696,7 +1736,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);
@@ -1889,7 +1930,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}";',
@@ -1956,7 +1996,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);`);
@@ -1989,11 +2030,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;
     }
   }
@@ -2045,7 +2081,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);
@@ -2409,11 +2446,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) {
@@ -2493,7 +2531,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);
@@ -3649,22 +3688,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)) {