babel-plugin-jsx-dom-expressions 0.36.0-beta.0 → 0.36.0-beta.2

package/README.md

@@ -38,29 +38,33 @@ const view = ({ item }) => {
 Compiles to:
 
 ```jsx
-import { insert as _$insert } from "dom";
+import { template as _$template } from "dom";
+import { delegateEvents as _$delegateEvents } from "dom";
+import { className as _$className } from "dom";
 import { effect as _$effect } from "dom";
+import { insert as _$insert } from "dom";
 
-const _tmpl$ = document.createElement("template");
-_tmpl$.innerHTML = `<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`;
-
-const view = ({ item }) => {
+const _tmpl$ = /*#__PURE__*/_$template(`<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`, 16);
+const view = ({
+  item
+}) => {
   const itemId = item.id;
-  return (function() {
-    const _el$ = _tmpl$.content.firstChild.cloneNode(true),
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.nextSibling,
       _el$4 = _el$3.firstChild,
       _el$5 = _el$3.nextSibling,
       _el$6 = _el$5.firstChild;
-    _$effect(() => (_el$.className = itemId === selected() ? "danger" : ""));
     _$insert(_el$2, itemId);
-    _el$4.onclick = e => select(item, e);
+    _el$4.$$click = e => select(item, e);
     _$insert(_el$4, () => item.label);
-    _el$6.onclick = e => del(item, e);
+    _el$6.$$click = e => del(item, e);
+    _$effect(() => _$className(_el$, itemId === selected() ? "danger" : ""));
     return _el$;
   })();
 };
+_$delegateEvents(["click"]);
 ```
 
 The use of cloneNode improves repeat insert performance and precompilation reduces the number of references to the minimal traversal path. This is a basic example which doesn't leverage event delegation or any of the more advanced features described below.

package/index.js

@@ -76,15 +76,38 @@ const Aliases = /*#__PURE__*/ Object.assign(Object.create(null), {
   className: "class",
   htmlFor: "for"
 });
+
 const PropAliases = /*#__PURE__*/ Object.assign(Object.create(null), {
   class: "className",
-  formnovalidate: "formNoValidate",
-  ismap: "isMap",
-  nomodule: "noModule",
-  playsinline: "playsInline",
-  readonly: "readOnly"
+  formnovalidate: {
+    $: "formNoValidate",
+    BUTTON: 1,
+    INPUT: 1
+  },
+  ismap: {
+    $: "isMap",
+    IMG: 1
+  },
+  nomodule: {
+    $: "noModule",
+    SCRIPT: 1
+  },
+  playsinline: {
+    $: "playsInline",
+    VIDEO: 1
+  },
+  readonly: {
+    $: "readOnly",
+    INPUT: 1,
+    TEXTAREA: 1
+  }
 });
 
+function getPropAlias(prop, tagName) {
+  const a = PropAliases[prop];
+  return typeof a === "object" ? (a[tagName] ? a["$"] : undefined) : a;
+}
+
 // list of Element events that will be delegated
 const DelegatedEvents = /*#__PURE__*/ new Set([
   "beforeinput",
@@ -261,7 +284,7 @@ function registerImportMethod(path, name, moduleName) {
     // the cloning is required to play well with babel-preset-env which is
     // transpiling import as we add them and using the same identifier causes
     // problems with the multiple identifiers of the same thing
-    return t__namespace.cloneDeep(iden);
+    return t__namespace.cloneNode(iden);
   }
 }
 
@@ -585,7 +608,7 @@ function transformElement$3(path, info) {
     isCustomElement = tagName.indexOf("-") > -1,
     results = {
       template: `<${tagName}`,
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
@@ -638,7 +661,7 @@ function transformElement$3(path, info) {
   return results;
 }
 
-function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
+function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE, tagName }) {
   // pull out namespace
   const config = getConfig(path);
   let parts, namespace;
@@ -698,7 +721,7 @@ function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
 
   const isChildProp = ChildProperties.has(name);
   const isProp = Properties.has(name);
-  const alias = PropAliases[name];
+  const alias = getPropAlias(name, tagName.toUpperCase());
   if (namespace !== "attr" && (isChildProp || (!isSVG && isProp) || isCE || namespace === "prop")) {
     if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
     return t__namespace.assignmentExpression(
@@ -1144,6 +1167,7 @@ function transformAttributes$2(path, results) {
                   t__namespace.arrowFunctionExpression(
                     [],
                     setAttr$2(path, elem, key, value.expression, {
+                      tagName,
                       isSVG,
                       isCE
                     })
@@ -1157,14 +1181,14 @@ function transformAttributes$2(path, results) {
             nextElem = attribute.scope.generateUidIdentifier("el$");
             children = t__namespace.JSXText(" ");
             children.extra = { raw: " ", rawValue: " " };
-            results.decl.push(
+            results.declarations.push(
               t__namespace.variableDeclarator(nextElem, t__namespace.memberExpression(elem, t__namespace.identifier("firstChild")))
             );
           }
-          results.dynamics.push({ elem: nextElem, key, value: value.expression, isSVG, isCE });
+          results.dynamics.push({ elem: nextElem, key, value: value.expression, isSVG, isCE, tagName });
         } else {
           results.exprs.push(
-            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE }))
+            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE, tagName }))
           );
         }
       } else {
@@ -1176,7 +1200,7 @@ function transformAttributes$2(path, results) {
         key = Aliases[key] || key;
         if (value && ChildProperties.has(key)) {
           results.exprs.push(
-            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value, { isSVG, isCE }))
+            t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value, { isSVG, isCE, tagName }))
           );
         } else {
           !isSVG && (key = key.toLowerCase());
@@ -1258,7 +1282,7 @@ function transformChildren$2(path, results, config) {
         t__namespace.identifier(tempPath),
         t__namespace.identifier(i === 0 ? "firstChild" : "nextSibling")
       );
-      results.decl.push(
+      results.declarations.push(
         t__namespace.variableDeclarator(
           child.id,
           config.hydratable && tagName === "html"
@@ -1266,7 +1290,7 @@ function transformChildren$2(path, results, config) {
             : walk
         )
       );
-      results.decl.push(...child.decl);
+      results.declarations.push(...child.declarations);
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
       results.postExprs.push(...child.postExprs);
@@ -1326,7 +1350,7 @@ function createPlaceholder(path, results, tempPath, i, char) {
   results.template += `<!${char}>`;
   if (config.hydratable && char === "/") {
     contentId = path.scope.generateUidIdentifier("co$");
-    results.decl.push(
+    results.declarations.push(
       t__namespace.variableDeclarator(
         t__namespace.arrayPattern([exprId, contentId]),
         t__namespace.callExpression(
@@ -1336,7 +1360,7 @@ function createPlaceholder(path, results, tempPath, i, char) {
       )
     );
   } else
-    results.decl.push(
+    results.declarations.push(
       t__namespace.variableDeclarator(
         exprId,
         t__namespace.memberExpression(
@@ -1602,8 +1626,8 @@ function registerTemplate(path, results) {
           ])
     );
   }
-  results.decl.unshift(decl);
-  results.decl = t__namespace.variableDeclaration("const", results.decl);
+  results.declarations.unshift(decl);
+  results.decl = t__namespace.variableDeclaration("const", results.declarations);
 }
 
 function wrapDynamics$1(path, dynamics) {
@@ -1632,6 +1656,7 @@ function wrapDynamics$1(path, dynamics) {
           setAttr$2(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
             isSVG: dynamics[0].isSVG,
             isCE: dynamics[0].isCE,
+            tagName: dynamics[0].tagName,
             dynamic: true,
             prevId: prevValue
           })
@@ -1639,17 +1664,17 @@ function wrapDynamics$1(path, dynamics) {
       ])
     );
   }
-  const decls = [],
+  const declarations = [],
     statements = [],
     identifiers = [],
     prevId = t__namespace.identifier("_p$");
-  dynamics.forEach(({ elem, key, value, isSVG, isCE }) => {
+  dynamics.forEach(({ elem, key, value, isSVG, isCE, tagName }) => {
     const identifier = path.scope.generateUidIdentifier("v$");
     if (key.startsWith("class:") && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
       value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
     }
     identifiers.push(identifier);
-    decls.push(t__namespace.variableDeclarator(identifier, value));
+    declarations.push(t__namespace.variableDeclarator(identifier, value));
     if (key === "classList" || key === "style") {
       const prev = t__namespace.memberExpression(prevId, identifier);
       statements.push(
@@ -1657,7 +1682,7 @@ function wrapDynamics$1(path, dynamics) {
           t__namespace.assignmentExpression(
             "=",
             prev,
-            setAttr$2(path, elem, key, identifier, { isSVG, isCE, dynamic: true, prevId: prev })
+            setAttr$2(path, elem, key, identifier, { isSVG, isCE, tagName, dynamic: true, prevId: prev })
           )
         )
       );
@@ -1672,7 +1697,7 @@ function wrapDynamics$1(path, dynamics) {
               elem,
               key,
               t__namespace.assignmentExpression("=", t__namespace.memberExpression(prevId, identifier), identifier),
-              { isSVG, isCE, dynamic: true }
+              { isSVG, isCE, tagName, dynamic: true }
             )
           )
         )
@@ -1685,7 +1710,7 @@ function wrapDynamics$1(path, dynamics) {
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
-          t__namespace.variableDeclaration("const", decls),
+          t__namespace.variableDeclaration("const", declarations),
           ...statements,
           t__namespace.returnStatement(prevId)
         ])
@@ -1786,7 +1811,7 @@ function transformElement$2(path, info) {
     results = {
       template: [`<${tagName}`],
       templateValues: [],
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       tagName,
@@ -2310,57 +2335,6 @@ function createElement(path, { topLevel, hydratable }) {
     if (props.length > 1 || dynamicSpread) {
       props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
     }
-
-    // transformed = t.arrowFunctionExpression(
-    //   [],
-    //   t.objectExpression(
-    //     attributes.reduce((memo, attribute) => {
-    //       const node = attribute.node;
-
-    //       if (t.isJSXSpreadAttribute(node)) {
-    //         const expr = node.argument;
-    //         memo.push(t.spreadElement(expr));
-    //         return memo;
-    //       }
-    //       let value = node.value,
-    //         key = t.isJSXNamespacedName(node.name)
-    //           ? `${node.name.namespace.name}:${node.name.name.name}`
-    //           : node.name.name,
-    //         reservedNameSpace =
-    //           t.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
-    //       if (
-    //         ((t.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
-    //         !t.isJSXExpressionContainer(value)
-    //       ) {
-    //         node.value = value = t.JSXExpressionContainer(value || t.JSXEmptyExpression());
-    //       }
-
-    //       if (
-    //         t.isJSXExpressionContainer(value) &&
-    //         (reservedNameSpace ||
-    //           ChildProperties.has(key) ||
-    //           !(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression)))
-    //       ) {
-    //         if (
-    //           key === "ref" ||
-    //           key.startsWith("use:") ||
-    //           key.startsWith("prop:") ||
-    //           key.startsWith("on")
-    //         )
-    //           return memo;
-
-    //         memo.push(t.objectProperty(t.stringLiteral(key), value.expression));
-    //       } else {
-    //         if (key === "$ServerOnly") return memo;
-    //         if (t.isJSXExpressionContainer(value)) value = value.expression;
-    //         memo.push(
-    //           t.objectProperty(t.stringLiteral(key), value ? value : t.booleanLiteral(true))
-    //         );
-    //       }
-    //       return memo;
-    //     }, [])
-    //   )
-    // );
   }
 
   const exprs = [
@@ -2387,7 +2361,7 @@ function transformElement$1(path, info) {
   let tagName = getTagName(path.node),
     results = {
       id: path.scope.generateUidIdentifier("el$"),
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
@@ -2395,7 +2369,7 @@ function transformElement$1(path, info) {
       renderer: "universal"
     };
 
-  results.decl.push(
+  results.declarations.push(
     t__namespace.variableDeclarator(
       results.id,
       t__namespace.callExpression(
@@ -2611,7 +2585,7 @@ function transformChildren(path, results) {
           getRendererConfig(path, "universal").moduleName
         );
         if (multi) {
-          results.decl.push(
+          results.declarations.push(
             t__namespace.variableDeclarator(
               child.id,
               t__namespace.callExpression(createTextNode, [
@@ -2625,7 +2599,7 @@ function transformChildren(path, results) {
           ]);
       }
       appends.push(t__namespace.expressionStatement(t__namespace.callExpression(insertNode, [results.id, insert])));
-      results.decl.push(...child.decl);
+      results.declarations.push(...child.declarations);
       results.exprs.push(...child.exprs);
       results.dynamics.push(...child.dynamics);
     } else if (child.exprs.length) {
@@ -2749,7 +2723,7 @@ function processSpreads(path, attributes, { elem, hasChildren, wrapConditionals
 function createTemplate(path, result, wrap) {
   const config = getConfig(path);
   if (result.id) {
-    result.decl = t__namespace.variableDeclaration("const", result.decl);
+    result.decl = t__namespace.variableDeclaration("const", result.declarations);
     if (
       !(result.exprs.length || result.dynamics.length || result.postExprs.length) &&
       result.decl.declarations.length === 1
@@ -2799,14 +2773,14 @@ function wrapDynamics(path, dynamics) {
       ])
     );
   }
-  const decls = [],
+  const declarations = [],
     statements = [],
     identifiers = [],
     prevId = t__namespace.identifier("_p$");
   dynamics.forEach(({ elem, key, value }) => {
     const identifier = path.scope.generateUidIdentifier("v$");
     identifiers.push(identifier);
-    decls.push(t__namespace.variableDeclarator(identifier, value));
+    declarations.push(t__namespace.variableDeclarator(identifier, value));
     const prev = t__namespace.memberExpression(prevId, identifier);
     statements.push(
       t__namespace.expressionStatement(
@@ -2830,7 +2804,7 @@ function wrapDynamics(path, dynamics) {
       t__namespace.arrowFunctionExpression(
         [prevId],
         t__namespace.blockStatement([
-          t__namespace.variableDeclaration("const", decls),
+          t__namespace.variableDeclaration("const", declarations),
           ...statements,
           t__namespace.returnStatement(prevId)
         ])
@@ -2890,7 +2864,8 @@ function transformComponent(path) {
             : node.argument
         );
       } else {
-        const value = node.value || t__namespace.booleanLiteral(true),
+        // handle weird babel bug around HTML entities
+        const value = (t__namespace.isStringLiteral(node.value) ? t__namespace.stringLiteral(node.value.value): node.value) || t__namespace.booleanLiteral(true),
           id = convertJSXIdentifier(node.name),
           key = id.name;
         if (hasChildren && key === "children") return;
@@ -3032,11 +3007,15 @@ function transformComponentChildren(children, config) {
   const filteredChildren = filterChildren(children);
   if (!filteredChildren.length) return;
   let dynamic = false;
+  let pathNodes = [];
 
   let transformedChildren = filteredChildren.reduce((memo, path) => {
     if (t__namespace.isJSXText(path.node)) {
       const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
-      if (v.length) memo.push(t__namespace.stringLiteral(v));
+      if (v.length) {
+        pathNodes.push(path.node);
+        memo.push(t__namespace.stringLiteral(v));
+      }
     } else {
       const child = transformNode(path, {
         topLevel: true,
@@ -3051,6 +3030,7 @@ function transformComponentChildren(children, config) {
       ) {
         child.exprs[0] = child.exprs[0].body;
       }
+      pathNodes.push(path.node);
       memo.push(getCreateTemplate(config, path, child)(path, child, filteredChildren.length > 1));
     }
     return memo;
@@ -3059,9 +3039,9 @@ function transformComponentChildren(children, config) {
   if (transformedChildren.length === 1) {
     transformedChildren = transformedChildren[0];
     if (
-      !t__namespace.isJSXExpressionContainer(filteredChildren[0]) &&
-      !t__namespace.isJSXSpreadChild(filteredChildren[0]) &&
-      !t__namespace.isJSXText(filteredChildren[0])
+      !t__namespace.isJSXExpressionContainer(pathNodes[0]) &&
+      !t__namespace.isJSXSpreadChild(pathNodes[0]) &&
+      !t__namespace.isJSXText(pathNodes[0])
     ) {
       transformedChildren =
         t__namespace.isCallExpression(transformedChildren) &&
@@ -3078,15 +3058,43 @@ function transformComponentChildren(children, config) {
   return [transformedChildren, dynamic];
 }
 
+function insertMarker(path, config, result) {
+  if (config.generate === "ssr") {
+    const open = { template: "<!---->", exprs: [] };
+    result.push(getCreateTemplate(config, path, open)(path, open, true));
+  } else {
+    result.push(t__namespace.stringLiteral("<!>"));
+  }
+}
+
 function transformFragmentChildren(children, results, config) {
+  let prevResult;
   const filteredChildren = filterChildren(children),
     childNodes = filteredChildren.reduce((memo, path) => {
       if (t__namespace.isJSXText(path.node)) {
         const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
-        if (v.length) memo.push(t__namespace.stringLiteral(v));
+        if (v.length) {
+          if (config.hydratable &&
+            prevResult &&
+            !prevResult.tagName &&
+            !prevResult.component &&
+            prevResult.exprs.length &&
+            !prevResult.spreadElement) insertMarker(path, config, memo);
+          memo.push(t__namespace.stringLiteral(v));
+          prevResult = v;
+        }
       } else {
         const child = transformNode(path, { topLevel: true, fragmentChild: true });
+        const insertMarkers =
+          config.hydratable &&
+          !child.component &&
+          child.exprs.length &&
+          !child.spreadElement &&
+          prevResult &&
+          (typeof prevResult !== "object" || !(prevResult.tagName || prevResult.component));
+        if (insertMarkers) insertMarker(path, config, memo);
         memo.push(getCreateTemplate(config, path, child)(path, child, true));
+        prevResult = child;
       }
       return memo;
     }, []);
@@ -3137,21 +3145,21 @@ function transformNode(path, info = {}) {
   if (t__namespace.isJSXElement(node)) {
     return transformElement(config, path, info);
   } else if (t__namespace.isJSXFragment(node)) {
-    let results = { template: "", decl: [], exprs: [], dynamics: [] };
+    let results = { template: "", declarations: [], exprs: [], dynamics: [] };
     // <><div /><Component /></>
     transformFragmentChildren(path.get("children"), results, config);
     return results;
   } else if (t__namespace.isJSXText(node) || (staticValue = getStaticExpression(path))) {
     const text =
       staticValue !== undefined
-        ? !info.doNotEscape
-          ? escapeHTML(staticValue.toString())
-          : staticValue.toString()
+        ? info.doNotEscape
+          ? staticValue.toString()
+          : escapeHTML(staticValue.toString())
         : trimWhitespace(node.extra.raw);
     if (!text.length) return null;
     const results = {
       template: config.generate === "ssr" ? text : escapeBackticks(text),
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
@@ -3237,13 +3245,9 @@ function transformElement(config, path, info = {}) {
   // <div ...></div>
   // const element = getTransformElemet(config, path, tagName);
 
-  let tagRenderer;
-  for (var renderer of config.renderers ?? []) {
-    if (renderer.elements.indexOf(tagName) !== -1) {
-      tagRenderer = renderer;
-      break;
-    }
-  }
+  const tagRenderer = (config.renderers ?? []).find(
+    renderer => renderer.elements.includes(tagName)
+  );
 
   if (tagRenderer?.name === "dom" || getConfig(path).generate === "dom") {
     return transformElement$3(path, info);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-jsx-dom-expressions",
   "description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
-  "version": "0.36.0-beta.0",
+  "version": "0.36.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "7ec6ae14b120b30decc6da719e751f33988a3c39"
+  "gitHead": "3afd7a16f14cae485c63e6227492bb6ed151d1b3"
 }