babel-plugin-jsx-dom-expressions 0.29.13 → 0.29.17

package/index.js

@@ -46,7 +46,6 @@ var config = {
 
 const booleans = [
   "allowfullscreen",
-  "allowpaymentrequest",
   "async",
   "autofocus",
   "autoplay",
@@ -56,8 +55,8 @@ const booleans = [
   "disabled",
   "formnovalidate",
   "hidden",
+  "indeterminate",
   "ismap",
-  "itemscope",
   "loop",
   "multiple",
   "muted",
@@ -69,13 +68,12 @@ const booleans = [
   "required",
   "reversed",
   "seamless",
-  "selected",
-  "truespeed"
+  "selected"
 ];
 
 const BooleanAttributes = new Set(booleans);
 
-const Properties = new Set(["className", "indeterminate", "value", "readOnly", ...booleans]);
+const Properties = new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 
 const ChildProperties = new Set(["innerHTML", "textContent", "innerText", "children"]);
 
@@ -87,6 +85,10 @@ const Aliases = {
 
 const PropAliases = {
   class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
   readonly: "readOnly"
 };
 
@@ -337,12 +339,11 @@ function getStaticExpression(path) {
 }
 
 // remove unnecessary JSX Text nodes
-function filterChildren(children, loose) {
+function filterChildren(children) {
   return children.filter(
     ({ node: child }) =>
       !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) &&
-      (!t__namespace.isJSXText(child) ||
-        (loose ? !/^[\r\n]\s*$/.test(child.extra.raw) : !/^\s*$/.test(child.extra.raw)))
+      (!t__namespace.isJSXText(child) || !/^[\r\n]\s*$/.test(child.extra.raw))
   );
 }
 
@@ -588,7 +589,11 @@ function setAttr$1(path, elem, name, value, { isSVG, dynamic, prevId, isCE }) {
   const alias = PropAliases[name];
   if (namespace !== "attr" && (isChildProp || (!isSVG && isProp) || isCE || namespace === "prop")) {
     if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
-    return t__namespace.assignmentExpression("=", t__namespace.memberExpression(elem, t__namespace.identifier(alias || name)), value);
+    return t__namespace.assignmentExpression(
+      "=",
+      t__namespace.memberExpression(elem, t__namespace.identifier(alias || name)),
+      value
+    );
   }
 
   let isNameSpaced = name.indexOf(":") > -1;
@@ -632,44 +637,9 @@ function transformAttributes$1(path, results) {
     tagName = getTagName(path.node),
     isSVG = SVGElements.has(tagName),
     isCE = tagName.includes("-"),
-    hasChildren = path.node.children.length > 0,
-    classAttributes = attributes.filter(
-      a => a.node.name && (a.node.name.name === "class" || a.node.name.name === "className")
-    );
-  // combine class propertoes
-  if (classAttributes.length > 1) {
-    const first = classAttributes[0].node,
-      values = [],
-      quasis = [t__namespace.TemplateElement({ raw: "" })];
-    for (let i = 0; i < classAttributes.length; i++) {
-      const attr = classAttributes[i].node,
-        isLast = i === classAttributes.length - 1;
-      if (!t__namespace.isJSXExpressionContainer(attr.value)) {
-        const prev = quasis.pop();
-        quasis.push(
-          t__namespace.TemplateElement({
-            raw:
-              (prev ? prev.value.raw : "") +
-              (i ? " " : "") +
-              `${attr.value.value}` +
-              (isLast ? "" : " ")
-          })
-        );
-      } else {
-        values.push(t__namespace.logicalExpression("||", attr.value.expression, t__namespace.stringLiteral("")));
-        quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
-      }
-      i && attributes.splice(classAttributes[i].key, 1);
-    }
-    first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
-  }
-  path.get("openingElement").set(
-    "attributes",
-    attributes.map(a => a.node)
-  );
+    hasChildren = path.node.children.length > 0;
 
   // preprocess styles
-  attributes = path.get("openingElement").get("attributes");
   const styleAttribute = attributes.find(
     a =>
       a.node.name &&
@@ -721,28 +691,77 @@ function transformAttributes$1(path, results) {
   );
   if (classListAttribute) {
     let i = 0,
-      leading = classListAttribute.node.value.expression.leadingComments;
-    classListAttribute.node.value.expression.properties.slice().forEach((p, index) => {
+      leading = classListAttribute.node.value.expression.leadingComments,
+      classListProperties = classListAttribute.get("value").get("expression").get("properties");
+    classListProperties.slice().forEach((propPath, index) => {
+      const p = propPath.node;
+      const { confident, value: computed } = propPath.get("value").evaluate();
       if (leading) p.value.leadingComments = leading;
-      path
-        .get("openingElement")
-        .node.attributes.splice(
-          classListAttribute.key + ++i,
-          0,
-          t__namespace.JSXAttribute(
-            t__namespace.JSXNamespacedName(
+      if (!confident) {
+        path
+          .get("openingElement")
+          .node.attributes.splice(
+            classListAttribute.key + ++i,
+            0,
+            t__namespace.JSXAttribute(
+              t__namespace.JSXNamespacedName(
+                t__namespace.JSXIdentifier("class"),
+                t__namespace.JSXIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
+              ),
+              t__namespace.JSXExpressionContainer(p.value)
+            )
+          );
+      } else if (computed) {
+        path
+          .get("openingElement")
+          .node.attributes.splice(
+            classListAttribute.key + ++i,
+            0,
+            t__namespace.JSXAttribute(
               t__namespace.JSXIdentifier("class"),
-              t__namespace.JSXIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
-            ),
-            t__namespace.JSXExpressionContainer(p.value)
-          )
-        );
-      classListAttribute.node.value.expression.properties.splice(index - i - 1, 1);
+              t__namespace.stringLiteral(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)
+            )
+          );
+      }
+      classListProperties.splice(index - i - 1, 1);
     });
-    if (!classListAttribute.node.value.expression.properties.length)
+    if (!classListProperties.length)
       path.get("openingElement").node.attributes.splice(classListAttribute.key, 1);
   }
 
+  // combine class properties
+  attributes = path.get("openingElement").get("attributes");
+  const classAttributes = attributes.filter(
+    a => a.node.name && (a.node.name.name === "class" || a.node.name.name === "className")
+  );
+  if (classAttributes.length > 1) {
+    const first = classAttributes[0].node,
+      values = [],
+      quasis = [t__namespace.TemplateElement({ raw: "" })];
+    for (let i = 0; i < classAttributes.length; i++) {
+      const attr = classAttributes[i].node,
+        isLast = i === classAttributes.length - 1;
+      if (!t__namespace.isJSXExpressionContainer(attr.value)) {
+        const prev = quasis.pop();
+        quasis.push(
+          t__namespace.TemplateElement({
+            raw: (prev ? prev.value.raw : "") + `${attr.value.value}` + (isLast ? "" : " ")
+          })
+        );
+      } else {
+        values.push(t__namespace.logicalExpression("||", attr.value.expression, t__namespace.stringLiteral("")));
+        quasis.push(t__namespace.TemplateElement({ raw: isLast ? "" : " " }));
+      }
+      i && attributes.splice(classAttributes[i].key, 1);
+    }
+    if (values.length) first.value = t__namespace.JSXExpressionContainer(t__namespace.TemplateLiteral(quasis, values));
+    else first.value = t__namespace.stringLiteral(quasis[0].value.raw);
+  }
+  path.get("openingElement").set(
+    "attributes",
+    attributes.map(a => a.node)
+  );
+
   path
     .get("openingElement")
     .get("attributes")
@@ -788,6 +807,10 @@ function transformAttributes$1(path, results) {
           !(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
       ) {
         if (key === "ref") {
+          // Normalize expressions for non-null and type-as
+          while (t__namespace.isTSNonNullExpression(value.expression) || t__namespace.isTSAsExpression(value.expression)) {
+            value.expression = value.expression.expression;
+          }
           if (t__namespace.isLVal(value.expression)) {
             const refIdentifier = path.scope.generateUidIdentifier("_ref$");
             results.exprs.unshift(
@@ -966,15 +989,9 @@ function transformAttributes$1(path, results) {
           if (key === "textContent") {
             nextElem = attribute.scope.generateUidIdentifier("el$");
             children = t__namespace.JSXText(" ");
-            children.extra = { raw: " ", rawValue: " "};
+            children.extra = { raw: " ", rawValue: " " };
             results.decl.push(
-              t__namespace.variableDeclarator(
-                nextElem,
-                t__namespace.memberExpression(
-                  elem,
-                  t__namespace.identifier("firstChild")
-                )
-              )
+              t__namespace.variableDeclarator(nextElem, t__namespace.memberExpression(elem, t__namespace.identifier("firstChild")))
             );
           }
           results.dynamics.push({ elem: nextElem, key, value: value.expression, isSVG, isCE });
@@ -997,7 +1014,7 @@ function transformAttributes$1(path, results) {
         } else {
           !isSVG && (key = key.toLowerCase());
           results.template += ` ${key}`;
-          results.template += value ? `="${value.value}"` : `=""`;
+          results.template += value ? `="${value.value}"` : "";
         }
       }
     });
@@ -1037,7 +1054,7 @@ function transformChildren$1(path, results) {
     tagName = getTagName(path.node),
     nextPlaceholder,
     i = 0;
-  const filteredChildren = filterChildren(path.get("children"), true),
+  const filteredChildren = filterChildren(path.get("children")),
     childNodes = filteredChildren
       .map(
         (child, index) =>
@@ -1221,7 +1238,7 @@ function detectExpressions(children, index) {
         )
       )
         return true;
-      const nextChildren = filterChildren(children[i].get("children"), true);
+      const nextChildren = filterChildren(children[i].get("children"));
       if (nextChildren.length) if (detectExpressions(nextChildren, 0)) return true;
     }
   }
@@ -1451,7 +1468,6 @@ function setAttr(results, name, value, isSVG) {
   let parts;
   if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
     name = parts[1];
-    parts[0];
   }
 
   name = toAttribute(name, isSVG);
@@ -1727,7 +1743,7 @@ function transformAttributes(path, results) {
       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(value.value, true)}"` : "");
     }
   });
   if (!hasChildren && children) {
@@ -1769,7 +1785,7 @@ function transformClasslistObject(path, expr, values, quasis) {
 function transformChildren(path, results) {
   const { hydratable } = config,
     doNotEscape = path.doNotEscape;
-  const filteredChildren = filterChildren(path.get("children"), true);
+  const filteredChildren = filterChildren(path.get("children"));
   filteredChildren.forEach(node => {
     const child = transformNode(node, { doNotEscape });
     appendToTemplate(results.template, child.template);
@@ -1871,6 +1887,10 @@ function transformComponent(path) {
         if (t__namespace.isJSXExpressionContainer(value))
           if (key === "ref") {
             if (config.generate === "ssr") return;
+            // Normalize expressions for non-null and type-as
+            while (t__namespace.isTSNonNullExpression(value.expression) || t__namespace.isTSAsExpression(value.expression)) {
+              value.expression = value.expression.expression;
+            }
             if (t__namespace.isLVal(value.expression)) {
               const refIdentifier = path.scope.generateUidIdentifier("_ref$");
               runningObject.push(
@@ -1972,9 +1992,9 @@ function transformComponent(path) {
       );
     } else runningObject.push(t__namespace.objectProperty(t__namespace.identifier("children"), childResult[0]));
   }
-  props.push(t__namespace.objectExpression(runningObject));
+  if (runningObject.length || !props.length) props.push(t__namespace.objectExpression(runningObject));
 
-  if (props.length > 1 && runningObject.length) {
+  if (props.length > 1) {
     registerImportMethod(path, "mergeProps");
     props = [t__namespace.callExpression(t__namespace.identifier("_$mergeProps"), props)];
   }
@@ -2001,18 +2021,20 @@ function transformComponentChildren(children) {
   if (!filteredChildren.length) return;
   let dynamic = false;
 
-  let transformedChildren = filteredChildren.map(path => {
+  let transformedChildren = filteredChildren.reduce((memo, path) => {
     if (t__namespace.isJSXText(path.node)) {
-      return t__namespace.stringLiteral(trimWhitespace(path.node.extra.rawValue));
+      const v = trimWhitespace(path.node.extra.rawValue);
+      if (v.length) memo.push(t__namespace.stringLiteral(v));
     } else {
       const child = transformNode(path, {
         topLevel: true,
         componentChild: true
       });
       dynamic = dynamic || child.dynamic;
-      return createTemplate$2(path, child, filteredChildren.length > 1);
+      memo.push(createTemplate$2(path, child, filteredChildren.length > 1));
     }
-  });
+    return memo;
+  }, []);
 
   if (filteredChildren.length === 1) {
     transformedChildren = transformedChildren[0];
@@ -2040,11 +2062,16 @@ function transformFragmentChildren(children, results) {
   const createTemplate$2 = config.generate === "ssr" ? createTemplate : createTemplate$1,
     filteredChildren = filterChildren(children),
     singleChild = filteredChildren.length === 1,
-    childNodes = filteredChildren.map(path => {
-      if (t__namespace.isJSXText(path.node)) return t__namespace.stringLiteral(trimWhitespace(path.node.extra.raw));
-      const child = transformNode(path, { topLevel: true, fragmentChild: true });
-      return createTemplate$2(path, child, !singleChild);
-    });
+    childNodes = filteredChildren.reduce((memo, path) => {
+      if (t__namespace.isJSXText(path.node)) {
+        const v = trimWhitespace(path.node.extra.raw);
+        if (v.length) memo.push(t__namespace.stringLiteral(v));
+      } else {
+        const child = transformNode(path, { topLevel: true, fragmentChild: true });
+        memo.push(createTemplate$2(path, child, !singleChild));
+      }
+      return memo;
+    }, []);
   results.exprs.push(singleChild ? childNodes[0] : t__namespace.arrayExpression(childNodes));
 }
 

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.29.13",
+  "version": "0.29.17",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -22,5 +22,5 @@
     "@babel/plugin-syntax-jsx": "^7.10.4",
     "@babel/types": "^7.11.5"
   },
-  "gitHead": "301546a2f0a6702d0ac00fb600c7285171657061"
+  "gitHead": "bdec422181ff938226a7a21b92ad4862b799f687"
 }