what-compiler 0.10.0 → 0.11.0

package/dist/babel-plugin.js

@@ -573,7 +573,7 @@ function whatBabelPlugin({ types: t }) {
         t.variableDeclarator(t.identifier(elId), t.callExpression(t.identifier(tmplId), []))
       ])
     ];
-    applyDynamicAttrs(statements, elId, attributes, state);
+    applyDynamicAttrs(statements, elId, attributes, state, tagName);
     applyDynamicChildren(statements, elId, children, node, state);
     if (!state._pendingSetup) state._pendingSetup = [];
     state._pendingSetup.push(...statements);
@@ -616,8 +616,33 @@ function whatBabelPlugin({ types: t }) {
     const propsExpr = props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
     return t.callExpression(t.identifier("h"), [t.stringLiteral(tagName), propsExpr, ...transformedChildren]);
   }
-  function applyDynamicAttrs(statements, elId, attributes, state) {
+  const VALUE_PROP_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "option"]);
+  function applyDynamicAttrs(statements, elId, attributes, state, tagName) {
     function buildSetPropCall(propName, valueExpr) {
+      if (propName === "class") {
+        state.needsSetClass = true;
+        return t.callExpression(t.identifier("_$setClass"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "style") {
+        state.needsSetStyle = true;
+        return t.callExpression(t.identifier("_$setStyle"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "value" && tagName && VALUE_PROP_TAGS.has(tagName)) {
+        state.needsSetValue = true;
+        return t.callExpression(t.identifier("_$setValue"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName === "checked" && tagName === "input") {
+        state.needsSetChecked = true;
+        return t.callExpression(t.identifier("_$setChecked"), [t.identifier(elId), valueExpr]);
+      }
+      if (propName.startsWith("data-") || propName.startsWith("aria-")) {
+        state.needsSetAttr = true;
+        return t.callExpression(t.identifier("_$setAttr"), [
+          t.identifier(elId),
+          t.stringLiteral(propName),
+          valueExpr
+        ]);
+      }
       state.needsSetProp = true;
       return t.callExpression(t.identifier("_$setProp"), [
         t.identifier(elId),
@@ -625,6 +650,14 @@ function whatBabelPlugin({ types: t }) {
         valueExpr
       ]);
     }
+    let delegateInitEmitted = false;
+    function emitDelegateInit() {
+      if (delegateInitEmitted) return;
+      delegateInitEmitted = true;
+      statements.push(
+        t.expressionStatement(t.callExpression(t.identifier("_$delegate$"), []))
+      );
+    }
     for (const attr of attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
         state.needsSpread = true;
@@ -665,6 +698,7 @@ function whatBabelPlugin({ types: t }) {
           state.needsDelegation = true;
           if (!state.delegatedEvents) state.delegatedEvents = /* @__PURE__ */ new Set();
           state.delegatedEvents.add(event);
+          emitDelegateInit();
           statements.push(
             t.expressionStatement(
               t.assignmentExpression(
@@ -808,6 +842,50 @@ function whatBabelPlugin({ types: t }) {
       }
     }
   }
+  function buildsDOM(node) {
+    if (!node || typeof node !== "object") return false;
+    if (Array.isArray(node)) return node.some(buildsDOM);
+    if (node.type === "JSXElement" || node.type === "JSXFragment") return true;
+    if (node.type === "CallExpression" && node.callee && node.callee.type === "Identifier" && (node.callee.name === "_$mapArray" || node.callee.name === "mapArray")) {
+      return true;
+    }
+    for (const key of Object.keys(node)) {
+      if (key === "loc" || key === "start" || key === "end" || key === "leadingComments" || key === "trailingComments" || key === "innerComments") continue;
+      const v = node[key];
+      if (v && typeof v === "object" && buildsDOM(v)) return true;
+    }
+    return false;
+  }
+  function memoizeBranchCondition(expr, statements, state) {
+    let testExpr = null;
+    let isTernary = false;
+    if (t.isConditionalExpression(expr)) {
+      testExpr = expr.test;
+      isTernary = true;
+    } else if (t.isLogicalExpression(expr) && (expr.operator === "&&" || expr.operator === "||")) {
+      testExpr = expr.left;
+    } else {
+      return expr;
+    }
+    if (!isPotentiallyReactive(testExpr, state.signalNames, state.importedIdentifiers)) return expr;
+    const branches = isTernary ? [expr.consequent, expr.alternate] : [expr.right];
+    if (!branches.some(buildsDOM)) return expr;
+    const condId = state.nextMemoId();
+    state.needsMemo = true;
+    const memoBody = isTernary ? t.unaryExpression("!", t.unaryExpression("!", testExpr)) : testExpr;
+    statements.push(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          t.identifier(condId),
+          t.callExpression(t.identifier("_$memo"), [
+            t.arrowFunctionExpression([], memoBody)
+          ])
+        )
+      ])
+    );
+    const condRead = t.callExpression(t.identifier(condId), []);
+    return isTernary ? t.conditionalExpression(condRead, expr.consequent, expr.alternate) : t.logicalExpression(expr.operator, condRead, expr.right);
+  }
   function applyDynamicChildren(statements, elId, children, parentNode, state) {
     const entries = [];
     let childIndex = 0;
@@ -880,11 +958,16 @@ function whatBabelPlugin({ types: t }) {
         let expr = entry.child.expression;
         const marker = getMarker(entry.childIndex);
         state.needsInsert = true;
-        const mapResult = tryLowerMapToMapArray(expr, state);
+        let mapResult = tryLowerMapToMapArray(expr, state);
         if (mapResult) {
           state.needsMapArray = true;
           const isBareMapArray = t.isCallExpression(mapResult) && t.isIdentifier(mapResult.callee) && (mapResult.callee.name === "_$mapArray" || mapResult.callee.name === "mapArray");
           const isArrowAlready = t.isArrowFunctionExpression(mapResult);
+          if (isArrowAlready && t.isExpression(mapResult.body)) {
+            mapResult.body = memoizeBranchCondition(mapResult.body, statements, state);
+          } else if (!isBareMapArray && !isArrowAlready) {
+            mapResult = memoizeBranchCondition(mapResult, statements, state);
+          }
           const insertArg = isBareMapArray || isArrowAlready ? mapResult : t.arrowFunctionExpression([], mapResult);
           statements.push(
             t.expressionStatement(
@@ -913,6 +996,7 @@ function whatBabelPlugin({ types: t }) {
           continue;
         }
         if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+          expr = memoizeBranchCondition(expr, statements, state);
           const insertCall = t.callExpression(t.identifier("_$insert"), [
             t.identifier(elId),
             t.arrowFunctionExpression([], expr),
@@ -970,7 +1054,7 @@ function whatBabelPlugin({ types: t }) {
             ])
           );
         }
-        applyDynamicAttrs(statements, childElRef, entry.child.openingElement.attributes, state);
+        applyDynamicAttrs(statements, childElRef, entry.child.openingElement.attributes, state, entry.child.openingElement.name.name);
         applyDynamicChildren(statements, childElRef, entry.child.children, entry.child, state);
         continue;
       }
@@ -978,8 +1062,9 @@ function whatBabelPlugin({ types: t }) {
         for (const fChild of entry.child.children) {
           if (t.isJSXExpressionContainer(fChild) && !t.isJSXEmptyExpression(fChild.expression)) {
             state.needsInsert = true;
-            const expr = fChild.expression;
+            let expr = fChild.expression;
             if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+              expr = memoizeBranchCondition(expr, statements, state);
               statements.push(
                 t.expressionStatement(
                   t.callExpression(t.identifier("_$insert"), [
@@ -1272,8 +1357,26 @@ function whatBabelPlugin({ types: t }) {
       condition = whenExpr;
     }
     const vId = path.scope ? path.scope.generateUidIdentifier("v") : t.identifier("_v");
-    const consequent = t.isFunction(contentExpr) ? t.callExpression(contentExpr, [t.cloneNode(vId)]) : contentExpr;
+    const contentIsFn = t.isFunction(contentExpr);
+    const consequent = contentIsFn ? t.callExpression(contentExpr, [t.cloneNode(vId)]) : contentExpr;
     const alternate = fallbackExpr || t.nullLiteral();
+    if (isPotentiallyReactive(condition, state.signalNames, state.importedIdentifiers)) {
+      const condId = state.nextMemoId();
+      state.needsMemo = true;
+      const memoBody = contentIsFn ? condition : t.unaryExpression("!", t.unaryExpression("!", condition));
+      if (!state._pendingSetup) state._pendingSetup = [];
+      state._pendingSetup.push(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(
+            t.identifier(condId),
+            t.callExpression(t.identifier("_$memo"), [
+              t.arrowFunctionExpression([], memoBody)
+            ])
+          )
+        ])
+      );
+      condition = t.callExpression(t.identifier(condId), []);
+    }
     return t.arrowFunctionExpression([], t.blockStatement([
       t.variableDeclaration("const", [
         t.variableDeclarator(vId, condition)
@@ -1283,6 +1386,34 @@ function whatBabelPlugin({ types: t }) {
       )
     ]));
   }
+  function lowerFragmentExprChild(expr, state) {
+    if (!state._pendingSetup) state._pendingSetup = [];
+    const setup = state._pendingSetup;
+    const mapResult = tryLowerMapToMapArray(expr, state);
+    if (mapResult) {
+      state.needsMapArray = true;
+      const isBareMapArray = t.isCallExpression(mapResult) && t.isIdentifier(mapResult.callee) && (mapResult.callee.name === "_$mapArray" || mapResult.callee.name === "mapArray");
+      const isArrowAlready = t.isArrowFunctionExpression(mapResult);
+      if (isArrowAlready && t.isExpression(mapResult.body)) {
+        mapResult.body = memoizeBranchCondition(mapResult.body, setup, state);
+        return mapResult;
+      }
+      if (isBareMapArray) return mapResult;
+      const memoized = memoizeBranchCondition(mapResult, setup, state);
+      return t.arrowFunctionExpression([], memoized);
+    }
+    const isMapArrayCall = t.isCallExpression(expr) && t.isIdentifier(expr.callee) && (expr.callee.name === "mapArray" || expr.callee.name === "_$mapArray");
+    if (isMapArrayCall) {
+      state.needsMapArray = true;
+      if (expr.callee.name === "mapArray") expr.callee.name = "_$mapArray";
+      return expr;
+    }
+    if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+      expr = memoizeBranchCondition(expr, setup, state);
+      return t.arrowFunctionExpression([], expr);
+    }
+    return expr;
+  }
   function transformFragmentFineGrained(path, state) {
     const { node } = path;
     const children = node.children;
@@ -1293,7 +1424,7 @@ function whatBabelPlugin({ types: t }) {
         if (text) transformed.push(t.stringLiteral(text));
       } else if (t.isJSXExpressionContainer(child)) {
         if (!t.isJSXEmptyExpression(child.expression)) {
-          transformed.push(child.expression);
+          transformed.push(lowerFragmentExprChild(child.expression, state));
         }
       } else if (t.isJSXElement(child)) {
         transformed.push(transformElementFineGrained({ node: child }, state));
@@ -1313,6 +1444,46 @@ function whatBabelPlugin({ types: t }) {
     state.templates.push({ id, html });
     return id;
   }
+  function transformJsxRoot(path, state, transform) {
+    const scope = path.scope;
+    let cache = state._signalNamesCache;
+    if (!cache) cache = state._signalNamesCache = /* @__PURE__ */ new WeakMap();
+    let names = cache.get(scope);
+    if (!names) {
+      names = collectSignalNamesFromScope(path);
+      cache.set(scope, names);
+    }
+    state.signalNames = names;
+    state._pendingSetup = [];
+    const transformed = transform(path, state);
+    const pending = state._pendingSetup;
+    state._pendingSetup = [];
+    if (pending.length > 0) {
+      let stmtPath = path;
+      let crossedFunctionBoundary = false;
+      while (stmtPath && !stmtPath.isStatement()) {
+        if (stmtPath.isArrowFunctionExpression() || stmtPath.isFunctionExpression()) {
+          crossedFunctionBoundary = true;
+        }
+        stmtPath = stmtPath.parentPath;
+      }
+      const inStatementList = stmtPath && stmtPath.isStatement() && (stmtPath.listKey === "body" || stmtPath.listKey === "consequent") && Array.isArray(stmtPath.container);
+      if (inStatementList && !crossedFunctionBoundary) {
+        stmtPath.insertBefore(pending);
+        path.replaceWith(transformed);
+      } else {
+        pending.push(t.returnStatement(transformed));
+        path.replaceWith(
+          t.callExpression(
+            t.arrowFunctionExpression([], t.blockStatement(pending)),
+            []
+          )
+        );
+      }
+    } else {
+      path.replaceWith(transformed);
+    }
+  }
   return {
     name: "what-jsx-transform",
     visitor: {
@@ -1324,6 +1495,12 @@ function whatBabelPlugin({ types: t }) {
           state.needsMapArray = false;
           state.needsSpread = false;
           state.needsSetProp = false;
+          state.needsMemo = false;
+          state.needsSetClass = false;
+          state.needsSetStyle = false;
+          state.needsSetAttr = false;
+          state.needsSetValue = false;
+          state.needsSetChecked = false;
           state.needsH = false;
           state.needsCreateComponent = false;
           state.needsFragment = false;
@@ -1334,8 +1511,10 @@ function whatBabelPlugin({ types: t }) {
           state.templateMap = /* @__PURE__ */ new Map();
           state.templateCount = 0;
           state._varCounter = 0;
+          state._memoCounter = 0;
           state._pendingSetup = [];
           state.nextVarId = () => `_el$${state._varCounter++}`;
+          state.nextMemoId = () => `_c$${state._memoCounter++}`;
           state.signalNames = /* @__PURE__ */ new Set();
           state.importedIdentifiers = /* @__PURE__ */ new Set();
           for (const node of path.node.body) {
@@ -1391,20 +1570,19 @@ function whatBabelPlugin({ types: t }) {
         },
         exit(path, state) {
           for (const tmpl of state.templates.reverse()) {
+            const tmplCall = t.callExpression(t.identifier("_$template"), [t.stringLiteral(tmpl.html)]);
+            t.addComment(tmplCall, "leading", " @__PURE__ ");
             path.unshiftContainer(
               "body",
               t.variableDeclaration("const", [
-                t.variableDeclarator(
-                  t.identifier(tmpl.id),
-                  t.callExpression(t.identifier("_$template"), [t.stringLiteral(tmpl.html)])
-                )
+                t.variableDeclarator(t.identifier(tmpl.id), tmplCall)
               ])
             );
           }
           const fgSpecifiers = [];
           if (state.needsTemplate) {
             fgSpecifiers.push(
-              t.importSpecifier(t.identifier("_$template"), t.identifier("template"))
+              t.importSpecifier(t.identifier("_$template"), t.identifier("_$template"))
             );
           }
           if (state.needsInsert) {
@@ -1432,6 +1610,36 @@ function whatBabelPlugin({ types: t }) {
               t.importSpecifier(t.identifier("_$setProp"), t.identifier("setProp"))
             );
           }
+          if (state.needsMemo) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$memo"), t.identifier("memo"))
+            );
+          }
+          if (state.needsSetClass) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setClass"), t.identifier("setClass"))
+            );
+          }
+          if (state.needsSetStyle) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setStyle"), t.identifier("setStyle"))
+            );
+          }
+          if (state.needsSetAttr) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setAttr"), t.identifier("setAttr"))
+            );
+          }
+          if (state.needsSetValue) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setValue"), t.identifier("setValue"))
+            );
+          }
+          if (state.needsSetChecked) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier("_$setChecked"), t.identifier("setChecked"))
+            );
+          }
           if (state.needsCreateComponent) {
             fgSpecifiers.push(
               t.importSpecifier(t.identifier("_$createComponent"), t.identifier("_$createComponent"))
@@ -1489,58 +1697,36 @@ function whatBabelPlugin({ types: t }) {
             const eventArray = t.arrayExpression(
               [...state.delegatedEvents].map((e) => t.stringLiteral(e))
             );
-            path.pushContainer(
-              "body",
-              t.expressionStatement(
-                t.callExpression(t.identifier("_$delegateEvents"), [eventArray])
-              )
+            const helperFn = t.functionDeclaration(
+              t.identifier("_$delegate$"),
+              [],
+              t.blockStatement([
+                t.ifStatement(
+                  t.identifier("_$delegated$"),
+                  t.returnStatement()
+                ),
+                t.expressionStatement(
+                  t.assignmentExpression("=", t.identifier("_$delegated$"), t.booleanLiteral(true))
+                ),
+                t.expressionStatement(
+                  t.callExpression(t.identifier("_$delegateEvents"), [eventArray])
+                )
+              ])
             );
+            path.unshiftContainer("body", [
+              t.variableDeclaration("let", [
+                t.variableDeclarator(t.identifier("_$delegated$"), t.booleanLiteral(false))
+              ]),
+              helperFn
+            ]);
           }
         }
       },
       JSXElement(path, state) {
-        const scope = path.scope;
-        let cache = state._signalNamesCache;
-        if (!cache) cache = state._signalNamesCache = /* @__PURE__ */ new WeakMap();
-        let names = cache.get(scope);
-        if (!names) {
-          names = collectSignalNamesFromScope(path);
-          cache.set(scope, names);
-        }
-        state.signalNames = names;
-        state._pendingSetup = [];
-        const transformed = transformElementFineGrained(path, state);
-        const pending = state._pendingSetup;
-        state._pendingSetup = [];
-        if (pending.length > 0) {
-          let stmtPath = path;
-          let crossedFunctionBoundary = false;
-          while (stmtPath && !stmtPath.isStatement()) {
-            if (stmtPath.isArrowFunctionExpression() || stmtPath.isFunctionExpression()) {
-              crossedFunctionBoundary = true;
-            }
-            stmtPath = stmtPath.parentPath;
-          }
-          const inStatementList = stmtPath && stmtPath.isStatement() && (stmtPath.listKey === "body" || stmtPath.listKey === "consequent") && Array.isArray(stmtPath.container);
-          if (inStatementList && !crossedFunctionBoundary) {
-            stmtPath.insertBefore(pending);
-            path.replaceWith(transformed);
-          } else {
-            pending.push(t.returnStatement(transformed));
-            path.replaceWith(
-              t.callExpression(
-                t.arrowFunctionExpression([], t.blockStatement(pending)),
-                []
-              )
-            );
-          }
-        } else {
-          path.replaceWith(transformed);
-        }
+        transformJsxRoot(path, state, transformElementFineGrained);
       },
       JSXFragment(path, state) {
-        const transformed = transformFragmentFineGrained(path, state);
-        path.replaceWith(transformed);
+        transformJsxRoot(path, state, transformFragmentFineGrained);
       }
     }
   };