fix number literals on static attributes

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

@@ -723,6 +723,7 @@ function transformAttributes(path, results) {
           }
 
           let text = value.value;
+          if (typeof text === "number") text = String(text);
           let needsQuoting = false;
 
           if (key === "style" || key === "class") {
@@ -732,6 +733,7 @@ function transformAttributes(path, results) {
             }
           }
 
+          if (key === "valu") console.log("HHHHHHHHHHHHH", text, text.length)
           if (!text.length) {
             needsSpacing = false;
             results.template += `=""`;

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

@@ -199,3 +199,5 @@ const template36 = <div ref={a().b?.c} />
 const template37 = <div ref={a() ? b : c} />
 
 const template38 = <div ref={a() ?? b} />
+
+const template39 = <input value={10} />

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

@@ -30,7 +30,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$17 = /*#__PURE__*/ _$template(
     `<div class="class1 class2 class3 class4 class5 class6"style="color:red;background-color:blue !important;border:1px solid black;font-size:12px;"random="random1 random2\n    random3 random4">`
   ),
-  _tmpl$18 = /*#__PURE__*/ _$template(`<button>`);
+  _tmpl$18 = /*#__PURE__*/ _$template(`<button>`),
+  _tmpl$19 = /*#__PURE__*/ _$template(`<input value=10>`);
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -404,4 +405,5 @@ const template38 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$54);
   return _el$54;
 })();
+const template39 = _tmpl$19();
 _$delegateEvents(["click", "input"]);

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

@@ -199,3 +199,5 @@ const template36 = <div ref={a().b?.c} />
 const template37 = <div ref={a() ? b : c} />
 
 const template38 = <div ref={a() ?? b} />
+
+const template39 = <input value={10} />

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

@@ -34,7 +34,8 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
   _tmpl$17 = /*#__PURE__*/ _$template(
     `<div class="class1 class2 class3 class4 class5 class6"style="color:red;background-color:blue !important;border:1px solid black;font-size:12px;"random="random1 random2\n    random3 random4">`
   ),
-  _tmpl$18 = /*#__PURE__*/ _$template(`<button>`);
+  _tmpl$18 = /*#__PURE__*/ _$template(`<button>`),
+  _tmpl$19 = /*#__PURE__*/ _$template(`<input value=10>`);
 import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
@@ -423,4 +424,5 @@ const template38 = (() => {
   typeof _ref$7 === "function" && _$use(_ref$7, _el$58);
   return _el$58;
 })();
+const template39 = _$getNextElement(_tmpl$19);
 _$delegateEvents(["click", "input"]);

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

@@ -1,3 +1,5 @@
+import * as styles from './styles.module.css';
+
 const selected = true;
 let id = "my-h1";
 let link;
@@ -44,11 +46,14 @@ const template5 = <div class="a" className="b"></div>;
 
 const template6 = <div style={someStyle()} textContent="Hi" />;
 
+let undefVar;
 const template7 = (
   <div
     style={{ "background-color": color(), "margin-right": "40px", ...props.style }}
     style:padding-top={props.top}
     class:my-class={props.active}
+    class:other-class={undefVar}
+    classList={{ 'other-class2': undefVar}}
   />
 );
 
@@ -61,7 +66,7 @@ const template10 = <div ref={refFactory()} />;
 
 const template11 = <div use:something use:another={thing} use:zero={0} />;
 
-const template12 = <div prop:htmlFor={thing} />;
+const template12 = <div prop:htmlFor={thing} prop:number={123} />;
 
 const template13 = <input type="checkbox" checked={true} />;
 
@@ -164,12 +169,35 @@ const template30 = (
   />
 );
 
-const template31 = <div use:something {...somethingElse} use:zero={0} />;
+const template31 = (
+  <div
+    style={{ "background-color": getStore.itemProperties.color }}
+  />
+);
+
+const template32 = (
+  <div
+    style={{ "background-color": undefined }}
+  />
+);
+
+const template33 = (
+  <>
+    <button class={styles.button}></button>
+    <button class={styles["foo--bar"]}></button>
+    <button class={styles.foo.bar}></button>
+    <button class={styles[foo()]}></button>
+  </>
+);
+
+const template34 = <div use:something {...somethingElse} use:zero={0} />;
+
+const template35 = <div ref={a().b.c} />
 
-const template32 = <div ref={a().b.c} />
+const template36 = <div ref={a().b?.c} />
 
-const template33 = <div ref={a().b?.c} />
+const template37 = <div ref={a() ? b : c} />
 
-const template34 = <div ref={a() ? b : c} />
+const template38 = <div ref={a() ?? b} />
 
-const template35 = <div ref={a() ?? b} />
+const template39 = <input value={10} />

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

@@ -10,7 +10,7 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$4 = ["<div foo", ' style="', '"', ">", "</div>"],
   _tmpl$5 = ['<div class="', '"></div>'],
   _tmpl$6 = ['<div style="', '">Hi</div>'],
-  _tmpl$7 = ['<div style="', '" class="', '"></div>'],
+  _tmpl$7 = ['<div style="', '"', "></div>"],
   _tmpl$8 = "<div></div>",
   _tmpl$9 = '<input type="checkbox" checked="">',
   _tmpl$10 = ['<input type="checkbox"', ">"],
@@ -23,7 +23,10 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$17 = ["<div", ">", "</div>"],
   _tmpl$18 = ["<div>", "", "</div>"],
   _tmpl$19 =
-    '<div class="class1 class2 class3 class4 class5 class6" style="color:red;background-color:blue !important;border:1px solid black;font-size:12px;" random="random1 random2\n    random3 random4"></div>';
+    '<div class="class1 class2 class3 class4 class5 class6" style="color:red;background-color:blue !important;border:1px solid black;font-size:12px;" random="random1 random2\n    random3 random4"></div>',
+  _tmpl$20 = ["<button", "></button>"],
+  _tmpl$21 = '<input value="10">';
+import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
 let link;
@@ -88,6 +91,7 @@ const template3 = _$ssr(
 const template4 = _$ssr(_tmpl$5, `hi ${_$escape(state.class, true) || ""} ccc:ddd`);
 const template5 = _$ssr(_tmpl$5, `a b`);
 const template6 = _$ssr(_tmpl$6, _$ssrStyle(someStyle()));
+let undefVar;
 const template7 = _$ssr(
   _tmpl$7,
   _$ssrStyle({
@@ -96,7 +100,7 @@ const template7 = _$ssr(
     ...props.style,
     "padding-top": props.top
   }),
-  props.active ? "my-class" : ""
+  _$ssrAttribute("other-class", _$escape(undefVar, true), false)
 );
 let refTarget;
 const template8 = _$ssr(_tmpl$8);
@@ -202,8 +206,20 @@ const template28 = _$ssrElement(
 );
 const template29 = _$ssr(_tmpl$17, _$ssrAttribute("attribute", !!someValue, false), !!someValue);
 const template30 = _$ssr(_tmpl$19);
-const template31 = _$ssrElement("div", somethingElse, undefined, false);
-const template32 = _$ssr(_tmpl$8);
-const template33 = _$ssr(_tmpl$8);
-const template34 = _$ssr(_tmpl$8);
+const template31 = _$ssr(
+  _tmpl$15,
+  "background-color:" + _$escape(getStore.itemProperties.color, true)
+);
+const template32 = _$ssr(_tmpl$15, "background-color:" + _$escape(undefined, true));
+const template33 = [
+  _$ssr(_tmpl$20, _$ssrAttribute("class", _$escape(styles.button, true), false)),
+  _$ssr(_tmpl$20, _$ssrAttribute("class", _$escape(styles["foo--bar"], true), false)),
+  _$ssr(_tmpl$20, _$ssrAttribute("class", _$escape(styles.foo.bar, true), false)),
+  _$ssr(_tmpl$20, _$ssrAttribute("class", _$escape(styles[foo()], true), false))
+];
+const template34 = _$ssrElement("div", somethingElse, undefined, false);
 const template35 = _$ssr(_tmpl$8);
+const template36 = _$ssr(_tmpl$8);
+const template37 = _$ssr(_tmpl$8);
+const template38 = _$ssr(_tmpl$8);
+const template39 = _$ssr(_tmpl$21);

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

@@ -1,3 +1,5 @@
+import * as styles from './styles.module.css';
+
 const selected = true;
 let id = "my-h1";
 let link;
@@ -44,11 +46,14 @@ const template5 = <div class="a" className="b"></div>;
 
 const template6 = <div style={someStyle()} textContent="Hi" />;
 
+let undefVar;
 const template7 = (
   <div
     style={{ "background-color": color(), "margin-right": "40px", ...props.style }}
     style:padding-top={props.top}
     class:my-class={props.active}
+    class:other-class={undefVar}
+    classList={{ 'other-class2': undefVar}}
   />
 );
 
@@ -61,7 +66,7 @@ const template10 = <div ref={refFactory()} />;
 
 const template11 = <div use:something use:another={thing} use:zero={0} />;
 
-const template12 = <div prop:htmlFor={thing} />;
+const template12 = <div prop:htmlFor={thing} prop:number={123} />;
 
 const template13 = <input type="checkbox" checked={true} />;
 
@@ -164,12 +169,35 @@ const template30 = (
   />
 );
 
-const template31 = <div use:something {...somethingElse} use:zero={0} />;
+const template31 = (
+  <div
+    style={{ "background-color": getStore.itemProperties.color }}
+  />
+);
+
+const template32 = (
+  <div
+    style={{ "background-color": undefined }}
+  />
+);
+
+const template33 = (
+  <>
+    <button class={styles.button}></button>
+    <button class={styles["foo--bar"]}></button>
+    <button class={styles.foo.bar}></button>
+    <button class={styles[foo()]}></button>
+  </>
+);
+
+const template34 = <div use:something {...somethingElse} use:zero={0} />;
+
+const template35 = <div ref={a().b.c} />
 
-const template32 = <div ref={a().b.c} />
+const template36 = <div ref={a().b?.c} />
 
-const template33 = <div ref={a().b?.c} />
+const template37 = <div ref={a() ? b : c} />
 
-const template34 = <div ref={a() ? b : c} />
+const template38 = <div ref={a() ?? b} />
 
-const template35 = <div ref={a() ?? b} />
+const template39 = <input value={10} />

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

@@ -11,7 +11,7 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$4 = ["<div", " foo", ' style="', '"', ">", "</div>"],
   _tmpl$5 = ["<div", ' class="', '"></div>'],
   _tmpl$6 = ["<div", ' style="', '">Hi</div>'],
-  _tmpl$7 = ["<div", ' style="', '" class="', '"></div>'],
+  _tmpl$7 = ["<div", ' style="', '"', "></div>"],
   _tmpl$8 = ["<div", "></div>"],
   _tmpl$9 = ["<input", ' type="checkbox" checked="">'],
   _tmpl$10 = ["<input", ' type="checkbox"', ">"],
@@ -27,7 +27,10 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
   _tmpl$20 = [
     "<div",
     ' class="class1 class2 class3 class4 class5 class6" style="color:red;background-color:blue !important;border:1px solid black;font-size:12px;" random="random1 random2\n    random3 random4"></div>'
-  ];
+  ],
+  _tmpl$21 = ["<button", "></button>"],
+  _tmpl$22 = ["<input", ' value="10">'];
+import * as styles from "./styles.module.css";
 const selected = true;
 let id = "my-h1";
 let link;
@@ -102,6 +105,7 @@ const template4 = _$ssr(
 );
 const template5 = _$ssr(_tmpl$5, _$ssrHydrationKey(), `a b`);
 const template6 = _$ssr(_tmpl$6, _$ssrHydrationKey(), _$ssrStyle(someStyle()));
+let undefVar;
 const template7 = _$ssr(
   _tmpl$7,
   _$ssrHydrationKey(),
@@ -111,7 +115,7 @@ const template7 = _$ssr(
     ...props.style,
     "padding-top": props.top
   }),
-  props.active ? "my-class" : ""
+  _$ssrAttribute("other-class", _$escape(undefVar, true), false)
 );
 let refTarget;
 const template8 = _$ssr(_tmpl$8, _$ssrHydrationKey());
@@ -234,8 +238,37 @@ const template29 = _$ssr(
   !!someValue
 );
 const template30 = _$ssr(_tmpl$20, _$ssrHydrationKey());
-const template31 = _$ssrElement("div", somethingElse, undefined, true);
-const template32 = _$ssr(_tmpl$8, _$ssrHydrationKey());
-const template33 = _$ssr(_tmpl$8, _$ssrHydrationKey());
-const template34 = _$ssr(_tmpl$8, _$ssrHydrationKey());
+const template31 = _$ssr(
+  _tmpl$15,
+  _$ssrHydrationKey(),
+  "background-color:" + _$escape(getStore.itemProperties.color, true)
+);
+const template32 = _$ssr(
+  _tmpl$15,
+  _$ssrHydrationKey(),
+  "background-color:" + _$escape(undefined, true)
+);
+const template33 = [
+  _$ssr(
+    _tmpl$21,
+    _$ssrHydrationKey() + _$ssrAttribute("class", _$escape(styles.button, true), false)
+  ),
+  _$ssr(
+    _tmpl$21,
+    _$ssrHydrationKey() + _$ssrAttribute("class", _$escape(styles["foo--bar"], true), false)
+  ),
+  _$ssr(
+    _tmpl$21,
+    _$ssrHydrationKey() + _$ssrAttribute("class", _$escape(styles.foo.bar, true), false)
+  ),
+  _$ssr(
+    _tmpl$21,
+    _$ssrHydrationKey() + _$ssrAttribute("class", _$escape(styles[foo()], true), false)
+  )
+];
+const template34 = _$ssrElement("div", somethingElse, undefined, true);
 const template35 = _$ssr(_tmpl$8, _$ssrHydrationKey());
+const template36 = _$ssr(_tmpl$8, _$ssrHydrationKey());
+const template37 = _$ssr(_tmpl$8, _$ssrHydrationKey());
+const template38 = _$ssr(_tmpl$8, _$ssrHydrationKey());
+const template39 = _$ssr(_tmpl$22, _$ssrHydrationKey());