fix hydration setProperty not using PropAliases

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/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"]);

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

@@ -225,4 +225,11 @@ const template44 = (
     <style {...styleProps()} innerText={css()} />
     <style {...styleProps()} textContent={css()} />
   </>
-);
+);
+
+const template45 = <video playsinline={value}/>
+const template46 = <video playsinline={true}/>
+const template47 = <video playsinline={false}/>
+const template48 = <video playsInline={value}/>
+const template49 = <video playsInline={true}/>
+const template50 = <video playsInline={false}/>

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

@@ -29,7 +29,10 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$22 = '<input value="10">',
   _tmpl$23 = ["<select", "><option", ">Red</option><option", ">Blue</option></select>"],
   _tmpl$24 = ['<div a a a checked a="true" a="false" a="0" a a', " a></div>"],
-  _tmpl$25 = ["<style>", "</style>"];
+  _tmpl$25 = ["<style>", "</style>"],
+  _tmpl$26 = ["<video", "></video>"],
+  _tmpl$27 = "<video playsinline></video>",
+  _tmpl$28 = "<video></video>";
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -294,3 +297,9 @@ const template44 = [
     false
   )
 ];
+const template45 = _$ssr(_tmpl$26, _$ssrAttribute("playsinline", value, true));
+const template46 = _$ssr(_tmpl$27);
+const template47 = _$ssr(_tmpl$28);
+const template48 = _$ssr(_tmpl$26, _$ssrAttribute("playsinline", _$escape(value, true), false));
+const template49 = _$ssr(_tmpl$27);
+const template50 = _$ssr(_tmpl$28);

packages/babel-plugin-jsx-dom-expressions/test/dynamic-hydratable.spec.js

@@ -50,6 +50,7 @@ pluginTester({
           "script",
           "noscript",
           "select",
+          "video",
           "option"
         ],
         moduleName: "r-dom"