babel-plugin-jsx-dom-expressions 0.35.9 → 0.35.12

package/index.js

@@ -5,10 +5,7 @@ var t = require('@babel/types');
 var helperModuleImports = require('@babel/helper-module-imports');
 var htmlEntities = require('html-entities');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -21,12 +18,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var SyntaxJSX__default = /*#__PURE__*/_interopDefaultLegacy(SyntaxJSX);
-var t__namespace = /*#__PURE__*/_interopNamespace(t);
+var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
 
 const booleans = [
   "allowfullscreen",
@@ -1735,9 +1731,31 @@ function createTemplate$1(path, result) {
     });
   } else id = found.id;
 
+  if (result.wontEscape) {
+    if (!Array.isArray(result.template) || result.template.length === 1) return id;
+    else if (
+      Array.isArray(result.template) &&
+      result.template.length === 2 &&
+      result.templateValues[0].type === "CallExpression" &&
+      result.templateValues[0].callee.name === "_$ssrHydrationKey"
+    ) {
+      // remove unnecessary ssr call when only hydration key is used
+      return t__namespace.binaryExpression(
+        "+",
+        t__namespace.binaryExpression(
+          "+",
+          t__namespace.memberExpression(id, t__namespace.numericLiteral(0), true),
+          result.templateValues[0]
+        ),
+        t__namespace.memberExpression(id, t__namespace.numericLiteral(1), true)
+      );
+    }
+  }
   return t__namespace.callExpression(
     registerImportMethod(path, "ssr"),
-    Array.isArray(result.template) && result.template.length > 1 ? [id, ...result.templateValues] : [id]
+    Array.isArray(result.template) && result.template.length > 1
+      ? [id, ...result.templateValues]
+      : [id]
   );
 }
 
@@ -1772,6 +1790,7 @@ function transformElement$2(path, info) {
       exprs: [],
       dynamics: [],
       tagName,
+      wontEscape: path.node.wontEscape,
       renderer: "ssr"
     };
 
@@ -1821,6 +1840,7 @@ function setAttr$1(attribute, 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);
@@ -1890,6 +1910,9 @@ function escapeExpression(path, expression, attr, escapeLiterals) {
     } else
       expression.callee.body = escapeExpression(path, expression.callee.body, attr, escapeLiterals);
     return expression;
+  } else if(t__namespace.isJSXElement(expression) && !isComponent(getTagName(expression))) {
+    expression.wontEscape = true;
+    return expression;
   }
 
   return t__namespace.callExpression(
@@ -3196,27 +3219,60 @@ var config = {
   contextToCustomElements: false,
   staticMarker: "@once",
   effectWrapper: "effect",
-  memoWrapper: "memo"
+  memoWrapper: "memo",
+  validate: false
+};
+
+const { isValidHTMLNesting } = require("validate-html-nesting");
+
+// From https://github.com/MananTank/babel-plugin-validate-jsx-nesting/blob/main/src/index.js
+const JSXValidator = {
+  JSXElement(path) {
+    const elName = path.node.openingElement.name;
+    if (!t__namespace.isJSXIdentifier(elName)) return;
+    const elTagName = elName.name;
+    if (!isComponent(elTagName)) return;
+    const parent = path.parent;
+    if (!t__namespace.isJSXElement(parent)) return;
+    const parentElName = parent.openingElement.name;
+    if (!t__namespace.isJSXIdentifier(parentElName)) return;
+    const parentElTagName = parentElName.name;
+    if (!isComponent(parentElTagName)) {
+      if (!isValidHTMLNesting(parentElTagName, elTagName)) {
+        throw path.buildCodeFrameError(
+          `Invalid JSX: <${elTagName}> cannot be child of <${parentElTagName}>`
+        );
+      }
+    }
+  }
 };
 
-var preprocess = (path, { opts })  => {
-  const merged = path.hub.file.metadata.config = Object.assign({}, config, opts);
+var preprocess = (path, { opts }) => {
+  const merged = (path.hub.file.metadata.config = Object.assign({}, config, opts));
   const lib = merged.requireImportSource;
   if (lib) {
     const comments = path.hub.file.ast.comments;
-    for(let i = 0; i < comments.length; i++) {
+    let process = false;
+    for (let i = 0; i < comments.length; i++) {
       const comment = comments[i];
       const index = comment.value.indexOf("@jsxImportSource");
-      if (index > -1 && comment.value.slice(index).includes(lib)) return;
+      if (index > -1 && comment.value.slice(index).includes(lib)) {
+        process = true;
+        break;
+      }
+    }
+    if (!process) {
+      path.skip();
+      return;
     }
-    path.skip();
   }
+  if (merged.validate) path.traverse(JSXValidator);
 };
 
 var index = () => {
   return {
     name: "JSX DOM Expressions",
-    inherits: SyntaxJSX__default["default"],
+    inherits: SyntaxJSX.default,
     visitor: {
       JSXElement: transformJSX,
       JSXFragment: transformJSX,

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.9",
+  "version": "0.35.12",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -12,20 +12,24 @@
   "main": "index.js",
   "sideEffects": false,
   "scripts": {
-    "build": "rollup -c",
-    "test": "npm run build && jest --no-cache",
-    "test:coverage": "npm run build && jest --coverage --no-cache",
-    "prepublishOnly": "npm run build",
-    "prepare": "npm run build"
+    "build": "rollup -c --bundleConfigAsCjs",
+    "test": "pnpm run build && jest --no-cache",
+    "test:coverage": "pnpm run build && jest --coverage --no-cache",
+    "prepublishOnly": "pnpm run build",
+    "prepare": "pnpm run build"
   },
   "dependencies": {
-    "@babel/helper-module-imports": "7.16.0",
-    "@babel/plugin-syntax-jsx": "^7.16.5",
-    "@babel/types": "^7.16.0",
-    "html-entities": "2.3.2"
+    "@babel/helper-module-imports": "7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/types": "^7.20.7",
+    "html-entities": "2.3.3",
+    "validate-html-nesting": "^1.0.2"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0"
+    "@babel/core": "^7.20.12"
   },
-  "gitHead": "c0e2bc4bf3ce42c2a266529d43fad1d1e4a651f5"
+  "devDependencies": {
+    "@babel/core": "^7.20.12"
+  },
+  "gitHead": "7c83569e6b30a64cc08e5c8cbdc4b44235551b4b"
 }