babel-plugin-jsx-dom-expressions 0.35.16 → 0.35.17

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

@@ -2,8 +2,8 @@
 
 var SyntaxJSX = require('@babel/plugin-syntax-jsx');
 var t = require('@babel/types');
-var helperModuleImports = require('@babel/helper-module-imports');
 var htmlEntities = require('html-entities');
+var helperModuleImports = require('@babel/helper-module-imports');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -261,7 +261,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 +585,7 @@ function transformElement$3(path, info) {
     isCustomElement = tagName.indexOf("-") > -1,
     results = {
       template: `<${tagName}`,
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
@@ -1157,7 +1157,7 @@ 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")))
             );
           }
@@ -1181,7 +1181,7 @@ function transformAttributes$2(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += ` ${key}`;
-          results.template += value ? `="${escapeBackticks(escapeHTML(value.value, true))}"` : "";
+          results.template += value ? `="${escapeBackticks(escapeHTML(htmlEntities.decode(value.value), true))}"` : "";
         }
       }
     });
@@ -1258,7 +1258,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 +1266,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 +1326,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 +1336,7 @@ function createPlaceholder(path, results, tempPath, i, char) {
       )
     );
   } else
-    results.decl.push(
+    results.declarations.push(
       t__namespace.variableDeclarator(
         exprId,
         t__namespace.memberExpression(
@@ -1602,8 +1602,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) {
@@ -1639,7 +1639,7 @@ function wrapDynamics$1(path, dynamics) {
       ])
     );
   }
-  const decls = [],
+  const declarations = [],
     statements = [],
     identifiers = [],
     prevId = t__namespace.identifier("_p$");
@@ -1649,7 +1649,7 @@ function wrapDynamics$1(path, dynamics) {
       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(
@@ -1685,7 +1685,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 +1786,7 @@ function transformElement$2(path, info) {
     results = {
       template: [`<${tagName}`],
       templateValues: [],
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       tagName,
@@ -2126,7 +2126,7 @@ function transformAttributes$1(path, results, info) {
       if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
       key = toAttribute(key, isSVG);
       appendToTemplate(results.template, ` ${key}`);
-      appendToTemplate(results.template, value ? `="${escapeHTML(value.value, true)}"` : "");
+      appendToTemplate(results.template, value ? `="${escapeHTML(htmlEntities.decode(value.value), true)}"` : "");
     }
   });
   if (!hasChildren && children) {
@@ -2387,7 +2387,7 @@ function transformElement$1(path, info) {
   let tagName = getTagName(path.node),
     results = {
       id: path.scope.generateUidIdentifier("el$"),
-      decl: [],
+      declarations: [],
       exprs: [],
       dynamics: [],
       postExprs: [],
@@ -2395,7 +2395,7 @@ function transformElement$1(path, info) {
       renderer: "universal"
     };
 
-  results.decl.push(
+  results.declarations.push(
     t__namespace.variableDeclarator(
       results.id,
       t__namespace.callExpression(
@@ -2611,7 +2611,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 +2625,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 +2749,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 +2799,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 +2830,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)
         ])
@@ -3032,11 +3032,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 +3055,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 +3064,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) &&
@@ -3137,21 +3142,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 +3242,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.35.16",
+  "version": "0.35.17",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,5 +31,5 @@
   "devDependencies": {
     "@babel/core": "^7.20.12"
   },
-  "gitHead": "764c717918d199a630bb0c7f85c7b8f772ef9e07"
+  "gitHead": "fbbe545542d31315282b78accbba552b686085b5"
 }