Merge branch 'main' into style-attr-undefined-var

Author: ryansolid

.github/workflows/main-ci.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: pnpm/action-setup@v4
       with:
-        version: 8
+        version: 10
     - uses: actions/setup-node@v4
       with:
         node-version: 20

package.json

@@ -21,7 +21,8 @@
     "publish:release": "lerna run build && lerna publish",
     "report:coverage": "lerna run report:coverage --parallel",
     "bootstrap": "lerna bootstrap",
-    "init": "pnpm install && pnpm run bootstrap"
+    "init": "pnpm install && pnpm run bootstrap",
+    "jsx-sync-types": "node packages/dom-expressions/src/jsx-update.mjs"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -47,6 +48,5 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "s-js": "0.4.9",
     "typescript": "~5.3.3"
-  },
-  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
+  }
 }

packages/babel-plugin-jsx-dom-expressions/rollup.config.js

@@ -1,31 +1,31 @@
-import babel from "@rollup/plugin-babel";
-import nodeResolve from "@rollup/plugin-node-resolve";
-import path from "path";
-
-const plugins = [
-  nodeResolve({
-    extensions: [".js", ".ts"],
-    rootDir: path.join(process.cwd(), "../.."),
-    moduleDirectories: ["node_modules", "packages"]
-  }),
-  babel({
-    extensions: ['.js', '.ts'],
-    babelHelpers: "bundled",
-    presets: ["@babel/preset-typescript"],
-    exclude: 'node_modules/**',
-    babelrc: false,
-    configFile: false,
-    retainLines: true
-  })
-];
-
-export default {
-  input: "src/index.ts",
-  external: ["@babel/plugin-syntax-jsx", "@babel/helper-module-imports", "@babel/types", "html-entities", "validate-html-nesting"],
-  output: {
-    file: "index.js",
-    format: "cjs",
-    exports: "auto"
-  },
-  plugins
-};
+import babel from "@rollup/plugin-babel";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import path from "path";
+
+const plugins = [
+  nodeResolve({
+    extensions: [".js", ".ts"],
+    rootDir: path.join(process.cwd(), "../.."),
+    moduleDirectories: ["node_modules", "packages"]
+  }),
+  babel({
+    extensions: ['.js', '.ts'],
+    babelHelpers: "bundled",
+    presets: ["@babel/preset-typescript"],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    configFile: false,
+    retainLines: true
+  })
+];
+
+export default {
+  input: "src/index.ts",
+  external: ["@babel/plugin-syntax-jsx", "@babel/helper-module-imports", "@babel/types", "html-entities"],
+  output: {
+    file: "index.js",
+    format: "cjs",
+    exports: "auto"
+  },
+  plugins
+};

packages/babel-plugin-jsx-dom-expressions/src/dom/element.js

@@ -259,7 +259,7 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE,
     if (config.hydratable && namespace !== "prop") {
       return t.callExpression(registerImportMethod(path, "setProperty"), [
         elem,
-        t.stringLiteral(name),
+        t.stringLiteral(alias || name),
         value
       ]);
     }

packages/babel-plugin-jsx-dom-expressions/src/shared/preprocess.js

@@ -1,29 +1,4 @@
-import * as t from "@babel/types";
 import config from "../config";
-import { isComponent } from "./utils";
-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;
-    const parent = path.parent;
-
-    if (!t.isJSXElement(parent) || !t.isJSXIdentifier(elName)) return;
-    const elTagName = elName.name;
-    if (isComponent(elTagName)) return;
-    const parentElName = parent.openingElement.name;
-    if (!t.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}>`
-        );
-      }
-    }
-  }
-};
 
 export default (path, { opts }) => {
   const merged = (path.hub.file.metadata.config = Object.assign({}, config, opts));
@@ -44,5 +19,4 @@ export default (path, { opts }) => {
       return;
     }
   }
-  if (merged.validate) path.traverse(JSXValidator);
 };

packages/babel-plugin-jsx-dom-expressions/src/shared/validate.js

@@ -87,7 +87,7 @@ export function isInvalidMarkup(html) {
   /** Parse HTML. `browser` is a string with the supposed resulting html of a real `innerHTML` call */
   const browser = innerHTML(html);
 
-  if (html !== browser) {
+  if (html.toLowerCase() !== browser.toLowerCase()) {
     return {
       html,
       browser

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/code.js

@@ -270,3 +270,9 @@ const template86 = <div><video prop:poster="1.jpg"/></div>
 const template87 = <video bool:poster="1.jpg"/>
 const template88 = <div><video bool:poster="1.jpg"/></div>
 
+const template89 = <video playsinline={value}/>
+const template90 = <video playsinline={true}/>
+const template91 = <video playsinline={false}/>
+const template92 = <video playsInline={value}/>
+const template93 = <video playsInline={true}/>
+const template94 = <video playsInline={false}/>

packages/babel-plugin-jsx-dom-expressions/test/__dom_compatible_fixtures__/attributeExpressions/output.js

@@ -610,4 +610,34 @@ const template86 = (() => {
 })();
 const template87 = _tmpl$58();
 const template88 = _tmpl$59();
+const template89 = (() => {
+  var _el$107 = _tmpl$56();
+  _el$107.playsInline = value;
+  return _el$107;
+})();
+const template90 = (() => {
+  var _el$108 = _tmpl$56();
+  _el$108.playsInline = true;
+  return _el$108;
+})();
+const template91 = (() => {
+  var _el$109 = _tmpl$56();
+  _el$109.playsInline = false;
+  return _el$109;
+})();
+const template92 = (() => {
+  var _el$110 = _tmpl$56();
+  _el$110.playsInline = value;
+  return _el$110;
+})();
+const template93 = (() => {
+  var _el$111 = _tmpl$56();
+  _el$111.playsInline = true;
+  return _el$111;
+})();
+const template94 = (() => {
+  var _el$112 = _tmpl$56();
+  _el$112.playsInline = false;
+  return _el$112;
+})();
 _$delegateEvents(["click", "input"]);

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js

@@ -204,3 +204,10 @@ const template41 = (
 );
 
 const template42 = <div a a="" a='' a={true} a={false} a={0} a={''} a={""} a={undefined} a={null} a={void 0} a/>
+
+const template43 = <video playsinline={value}/>
+const template44 = <video playsinline={true}/>
+const template45 = <video playsinline={false}/>
+const template46 = <video playsInline={value}/>
+const template47 = <video playsInline={true}/>
+const template48 = <video playsInline={false}/>

packages/babel-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js

@@ -37,7 +37,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$18 = /*#__PURE__*/ _$template(`<button>`),
   _tmpl$19 = /*#__PURE__*/ _$template(`<input value=10>`),
   _tmpl$20 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
-  _tmpl$21 = /*#__PURE__*/ _$template(`<div a a a a=0 a a a>`);
+  _tmpl$21 = /*#__PURE__*/ _$template(`<div a a a a=0 a a a>`),
+  _tmpl$22 = /*#__PURE__*/ _$template(`<video>`);
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -236,7 +237,7 @@ const template20 = (() => {
     _el$28 = _el$27.nextSibling;
   _$addEventListener(_el$27, "input", doSomething, true);
   _$addEventListener(_el$28, "input", doSomethingElse, true);
-  _$setProperty(_el$28, "readonly", value);
+  _$setProperty(_el$28, "readOnly", value);
   _$effect(
     _p$ => {
       var _v$4 = min(),
@@ -455,4 +456,34 @@ const template42 = (() => {
   _$setAttribute(_el$64, "a", void 0);
   return _el$64;
 })();
+const template43 = (() => {
+  var _el$65 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$65, "playsInline", value);
+  return _el$65;
+})();
+const template44 = (() => {
+  var _el$66 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$66, "playsInline", true);
+  return _el$66;
+})();
+const template45 = (() => {
+  var _el$67 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$67, "playsInline", false);
+  return _el$67;
+})();
+const template46 = (() => {
+  var _el$68 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$68, "playsInline", value);
+  return _el$68;
+})();
+const template47 = (() => {
+  var _el$69 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$69, "playsInline", true);
+  return _el$69;
+})();
+const template48 = (() => {
+  var _el$70 = _$getNextElement(_tmpl$22);
+  _$setProperty(_el$70, "playsInline", false);
+  return _el$70;
+})();
 _$delegateEvents(["click", "input"]);