@torpor/view 0.0.13 → 0.1.0

package/dist/compile.js

@@ -177,6 +177,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(":")) {
@@ -184,6 +185,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 {
@@ -193,6 +195,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);
@@ -814,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) {
@@ -863,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);
@@ -1148,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}`;
@@ -1468,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);
@@ -1491,18 +1528,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);
@@ -1691,7 +1729,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);
@@ -1884,7 +1923,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}";',
@@ -1951,7 +1989,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);`);
@@ -1984,11 +2023,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;
     }
   }
@@ -2040,7 +2074,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);
@@ -2386,6 +2421,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") {
@@ -2403,11 +2439,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) {
@@ -2434,6 +2471,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") {
@@ -2451,12 +2489,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(" ");
 }
 
@@ -2482,7 +2524,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);
@@ -2693,6 +2736,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);`);
       }
@@ -3635,22 +3681,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)) {