Skip to content

Commit

Permalink
handle literal boolean in attributes, <el attr={true}/> becomes `<e…
Browse files Browse the repository at this point in the history
…l attr/>`, `<el attr={false}/>` becomes `<el/>`
  • Loading branch information
titoBouzout committed Nov 28, 2024
1 parent a1d24a1 commit 849a980
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 144 deletions.
20 changes: 19 additions & 1 deletion packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,12 @@ function transformAttributes(path, results) {
if (
t.isJSXExpressionContainer(value) &&
(reservedNameSpace ||
!(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression)))
!(
t.isStringLiteral(value.expression) ||
t.isNumericLiteral(value.expression) ||
// remove `!isCE` when custom elements start defaulting to attributes
(t.isBooleanLiteral(value.expression) && !isCE)
))
) {
if (key === "ref") {
// Normalize expressions for non-null and type-as
Expand Down Expand Up @@ -804,6 +809,19 @@ function transformAttributes(path, results) {
return;
}
if (t.isJSXExpressionContainer(value)) value = value.expression;

// boolean as `<el attr={true | false}/>`, not as `<el attr={"true" | "false"}/>`
// `<el attr={true}/>` becomes `<el attr/>`
// `<el attr={false}/>` becomes `<el/>`
if (t.isBooleanLiteral(value)) {
if (value.value === true) {
results.template += `${needsSpacing ? " " : ""}${key}`;
needsSpacing = true;
}
return;
}

// properties
key = Aliases[key] || key;
if (value && ChildProperties.has(key)) {
results.exprs.push(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -254,4 +254,9 @@ const template73 = <div ref={binding.prop} />;
const template74 = <div ref={refFn} />
const template75 = <div ref={refConst} />

const template76 = <div ref={refUnknown} />
const template76 = <div ref={refUnknown} />

const template77 = <div true={true} truestr="true" truestrjs={"true"}/>
const template78 = <div false={false} falsestr="false" falsestrjs={"false"} />
const template79 = <div prop:true={true} prop:false={false}/>
const template80 = <div attr:true={true} attr:false={false}/>
Original file line number Diff line number Diff line change
Expand Up @@ -17,52 +17,55 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
_tmpl$3 = /*#__PURE__*/ _$template(`<div foo>`),
_tmpl$4 = /*#__PURE__*/ _$template(`<div>`),
_tmpl$5 = /*#__PURE__*/ _$template(`<div class="a b">`),
_tmpl$6 = /*#__PURE__*/ _$template(`<input type=checkbox>`),
_tmpl$7 = /*#__PURE__*/ _$template(`<div class="\`a">\`$\``),
_tmpl$8 = /*#__PURE__*/ _$template(`<button class="static hi"type=button>Write`),
_tmpl$9 = /*#__PURE__*/ _$template(`<button class="a b c">Hi`),
_tmpl$10 = /*#__PURE__*/ _$template(`<div class="bg-red-500 flex flex-col">`),
_tmpl$11 = /*#__PURE__*/ _$template(`<div><input readonly=""><input>`),
_tmpl$12 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
_tmpl$13 = /*#__PURE__*/ _$template(`<a>`),
_tmpl$14 = /*#__PURE__*/ _$template(`<div><a>`),
_tmpl$15 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
_tmpl$16 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div>`),
_tmpl$17 = /*#__PURE__*/ _$template(
_tmpl$6 = /*#__PURE__*/ _$template(`<input type=checkbox checked>`),
_tmpl$7 = /*#__PURE__*/ _$template(`<input type=checkbox>`),
_tmpl$8 = /*#__PURE__*/ _$template(`<div class="\`a">\`$\``),
_tmpl$9 = /*#__PURE__*/ _$template(`<button class="static hi"type=button>Write`),
_tmpl$10 = /*#__PURE__*/ _$template(`<button class="a b c">Hi`),
_tmpl$11 = /*#__PURE__*/ _$template(`<div class="bg-red-500 flex flex-col">`),
_tmpl$12 = /*#__PURE__*/ _$template(`<div><input readonly=""><input>`),
_tmpl$13 = /*#__PURE__*/ _$template(`<div data="&quot;hi&quot;"data2="&quot;">`),
_tmpl$14 = /*#__PURE__*/ _$template(`<a>`),
_tmpl$15 = /*#__PURE__*/ _$template(`<div><a>`),
_tmpl$16 = /*#__PURE__*/ _$template(`<div start=Hi>Hi`),
_tmpl$17 = /*#__PURE__*/ _$template(`<label><span>Input is </span><input><div>`),
_tmpl$18 = /*#__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$19 = /*#__PURE__*/ _$template(`<input value=10>`),
_tmpl$20 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
_tmpl$21 = /*#__PURE__*/ _$template(`<div>empty string`),
_tmpl$22 = /*#__PURE__*/ _$template(`<div>js empty`),
_tmpl$23 = /*#__PURE__*/ _$template(`<div quack>hola`),
_tmpl$24 = /*#__PURE__*/ _$template(`<div quack>"hola js"`),
_tmpl$25 = /*#__PURE__*/ _$template(`<div quack>true`),
_tmpl$26 = /*#__PURE__*/ _$template(`<div>false`),
_tmpl$27 = /*#__PURE__*/ _$template(`<div quack>1`),
_tmpl$28 = /*#__PURE__*/ _$template(`<div>0`),
_tmpl$29 = /*#__PURE__*/ _$template(`<div quack>"1"`),
_tmpl$30 = /*#__PURE__*/ _$template(`<div>"0"`),
_tmpl$31 = /*#__PURE__*/ _$template(`<div>undefined`),
_tmpl$32 = /*#__PURE__*/ _$template(`<div>null`),
_tmpl$33 = /*#__PURE__*/ _$template(`<div>boolTest()`),
_tmpl$34 = /*#__PURE__*/ _$template(`<div>boolTest`),
_tmpl$35 = /*#__PURE__*/ _$template(`<div>boolTestBinding`),
_tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value`),
_tmpl$37 = /*#__PURE__*/ _$template(`<div>fn`),
_tmpl$38 = /*#__PURE__*/ _$template(`<div before quack>should have space before`),
_tmpl$39 = /*#__PURE__*/ _$template(`<div before quack after>should have space before/after`),
_tmpl$40 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after`),
_tmpl$41 = /*#__PURE__*/ _$template(`<img src="">`),
_tmpl$42 = /*#__PURE__*/ _$template(`<div><img src="">`),
_tmpl$43 = /*#__PURE__*/ _$template(`<img src=""loading=lazy>`, true, false),
_tmpl$44 = /*#__PURE__*/ _$template(`<div><img src=""loading=lazy>`, true, false),
_tmpl$45 = /*#__PURE__*/ _$template(`<iframe src="">`),
_tmpl$46 = /*#__PURE__*/ _$template(`<div><iframe src="">`),
_tmpl$47 = /*#__PURE__*/ _$template(`<iframe src=""loading=lazy>`, true, false),
_tmpl$48 = /*#__PURE__*/ _$template(`<div><iframe src=""loading=lazy>`, true, false),
_tmpl$49 = /*#__PURE__*/ _$template(`<div title="<u>data</u>">`);
_tmpl$19 = /*#__PURE__*/ _$template(`<button>`),
_tmpl$20 = /*#__PURE__*/ _$template(`<input value=10>`),
_tmpl$21 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
_tmpl$22 = /*#__PURE__*/ _$template(`<div>empty string`),
_tmpl$23 = /*#__PURE__*/ _$template(`<div>js empty`),
_tmpl$24 = /*#__PURE__*/ _$template(`<div quack>hola`),
_tmpl$25 = /*#__PURE__*/ _$template(`<div quack>"hola js"`),
_tmpl$26 = /*#__PURE__*/ _$template(`<div quack>true`),
_tmpl$27 = /*#__PURE__*/ _$template(`<div>false`),
_tmpl$28 = /*#__PURE__*/ _$template(`<div quack>1`),
_tmpl$29 = /*#__PURE__*/ _$template(`<div>0`),
_tmpl$30 = /*#__PURE__*/ _$template(`<div quack>"1"`),
_tmpl$31 = /*#__PURE__*/ _$template(`<div>"0"`),
_tmpl$32 = /*#__PURE__*/ _$template(`<div>undefined`),
_tmpl$33 = /*#__PURE__*/ _$template(`<div>null`),
_tmpl$34 = /*#__PURE__*/ _$template(`<div>boolTest()`),
_tmpl$35 = /*#__PURE__*/ _$template(`<div>boolTest`),
_tmpl$36 = /*#__PURE__*/ _$template(`<div>boolTestBinding`),
_tmpl$37 = /*#__PURE__*/ _$template(`<div>boolTestObjBinding.value`),
_tmpl$38 = /*#__PURE__*/ _$template(`<div>fn`),
_tmpl$39 = /*#__PURE__*/ _$template(`<div before quack>should have space before`),
_tmpl$40 = /*#__PURE__*/ _$template(`<div before quack after>should have space before/after`),
_tmpl$41 = /*#__PURE__*/ _$template(`<div quack after>should have space before/after`),
_tmpl$42 = /*#__PURE__*/ _$template(`<img src="">`),
_tmpl$43 = /*#__PURE__*/ _$template(`<div><img src="">`),
_tmpl$44 = /*#__PURE__*/ _$template(`<img src=""loading=lazy>`, true, false),
_tmpl$45 = /*#__PURE__*/ _$template(`<div><img src=""loading=lazy>`, true, false),
_tmpl$46 = /*#__PURE__*/ _$template(`<iframe src="">`),
_tmpl$47 = /*#__PURE__*/ _$template(`<div><iframe src="">`),
_tmpl$48 = /*#__PURE__*/ _$template(`<iframe src=""loading=lazy>`, true, false),
_tmpl$49 = /*#__PURE__*/ _$template(`<div><iframe src=""loading=lazy>`, true, false),
_tmpl$50 = /*#__PURE__*/ _$template(`<div title="<u>data</u>">`),
_tmpl$51 = /*#__PURE__*/ _$template(`<div true truestr=true truestrjs=true>`),
_tmpl$52 = /*#__PURE__*/ _$template(`<div falsestr=false falsestrjs=false>`);
import * as styles from "./styles.module.css";
import { binding } from "somewhere";
function refFn() {}
Expand Down Expand Up @@ -222,20 +225,16 @@ const template12 = (() => {
_$setAttribute(_el$18, "onclick", "console.log('hi')");
return _el$18;
})();
const template13 = (() => {
var _el$19 = _tmpl$6();
_el$19.checked = true;
return _el$19;
})();
const template13 = _tmpl$6();
const template14 = (() => {
var _el$20 = _tmpl$6();
var _el$20 = _tmpl$7();
_$effect(() => (_el$20.checked = state.visible));
return _el$20;
})();
const template15 = _tmpl$7();
const template16 = _tmpl$8();
const template15 = _tmpl$8();
const template16 = _tmpl$9();
const template17 = (() => {
var _el$23 = _tmpl$9();
var _el$23 = _tmpl$10();
_$addEventListener(_el$23, "click", increment, true);
return _el$23;
})();
Expand All @@ -253,9 +252,9 @@ const template18 = (() => {
);
return _el$24;
})();
const template19 = _tmpl$10();
const template19 = _tmpl$11();
const template20 = (() => {
var _el$26 = _tmpl$11(),
var _el$26 = _tmpl$12(),
_el$27 = _el$26.firstChild,
_el$28 = _el$27.nextSibling;
_$addEventListener(_el$27, "input", doSomething, true);
Expand Down Expand Up @@ -298,15 +297,15 @@ const template21 = (() => {
);
return _el$29;
})();
const template22 = _tmpl$12();
const template22 = _tmpl$13();
const template23 = (() => {
var _el$31 = _tmpl$4();
_$insert(_el$31, () => "t" in test && "true");
_$effect(() => (_el$31.disabled = "t" in test));
return _el$31;
})();
const template24 = (() => {
var _el$32 = _tmpl$13();
var _el$32 = _tmpl$14();
_$spread(
_el$32,
_$mergeProps(props, {
Expand All @@ -318,7 +317,7 @@ const template24 = (() => {
return _el$32;
})();
const template25 = (() => {
var _el$33 = _tmpl$14(),
var _el$33 = _tmpl$15(),
_el$34 = _el$33.firstChild;
_$insert(_el$33, () => props.children, _el$34);
_$spread(
Expand All @@ -332,13 +331,13 @@ const template25 = (() => {
return _el$33;
})();
const template26 = (() => {
var _el$35 = _tmpl$15();
var _el$35 = _tmpl$16();
_$setAttribute(_el$35, "middle", middle);
_$spread(_el$35, spread, false, true);
return _el$35;
})();
const template27 = (() => {
var _el$36 = _tmpl$15();
var _el$36 = _tmpl$16();
_$spread(
_el$36,
_$mergeProps(
Expand All @@ -354,7 +353,7 @@ const template27 = (() => {
return _el$36;
})();
const template28 = (() => {
var _el$37 = _tmpl$16(),
var _el$37 = _tmpl$17(),
_el$38 = _el$37.firstChild,
_el$39 = _el$38.firstChild,
_el$40 = _el$38.nextSibling,
Expand All @@ -372,7 +371,7 @@ const template29 = (() => {
_$insert(_el$42, !!someValue);
return _el$42;
})();
const template30 = _tmpl$17();
const template30 = _tmpl$18();
const template31 = (() => {
var _el$44 = _tmpl$4();
_$effect(_$p =>
Expand All @@ -389,22 +388,22 @@ const template32 = (() => {
})();
const template33 = [
(() => {
var _el$46 = _tmpl$18();
var _el$46 = _tmpl$19();
_$className(_el$46, styles.button);
return _el$46;
})(),
(() => {
var _el$47 = _tmpl$18();
var _el$47 = _tmpl$19();
_$className(_el$47, styles["foo--bar"]);
return _el$47;
})(),
(() => {
var _el$48 = _tmpl$18();
var _el$48 = _tmpl$19();
_$effect(() => _$className(_el$48, styles.foo.bar));
return _el$48;
})(),
(() => {
var _el$49 = _tmpl$18();
var _el$49 = _tmpl$19();
_$effect(() => _$className(_el$49, styles[foo()]));
return _el$49;
})()
Expand Down Expand Up @@ -440,7 +439,7 @@ const template38 = (() => {
typeof _ref$7 === "function" && _$use(_ref$7, _el$54);
return _el$54;
})();
const template39 = _tmpl$19();
const template39 = _tmpl$20();
const template40 = (() => {
var _el$56 = _tmpl$4();
_$effect(_$p =>
Expand All @@ -451,7 +450,7 @@ const template40 = (() => {
return _el$56;
})();
const template41 = (() => {
var _el$57 = _tmpl$20(),
var _el$57 = _tmpl$21(),
_el$58 = _el$57.firstChild,
_el$59 = _el$58.nextSibling;
_$effect(() => (_el$58.value = Color.Red));
Expand All @@ -468,57 +467,57 @@ const boolTestBinding = false;
const boolTestObjBinding = {
value: false
};
const template42 = _tmpl$21();
const template43 = _tmpl$22();
const template44 = _tmpl$23();
const template45 = _tmpl$24();
const template46 = _tmpl$25();
const template47 = _tmpl$26();
const template48 = _tmpl$27();
const template49 = _tmpl$28();
const template50 = _tmpl$29();
const template51 = _tmpl$30();
const template52 = _tmpl$31();
const template53 = _tmpl$32();
const template42 = _tmpl$22();
const template43 = _tmpl$23();
const template44 = _tmpl$24();
const template45 = _tmpl$25();
const template46 = _tmpl$26();
const template47 = _tmpl$27();
const template48 = _tmpl$28();
const template49 = _tmpl$29();
const template50 = _tmpl$30();
const template51 = _tmpl$31();
const template52 = _tmpl$32();
const template53 = _tmpl$33();
const template54 = (() => {
var _el$72 = _tmpl$33();
var _el$72 = _tmpl$34();
_$effect(() => _$setBoolAttribute(_el$72, "quack", boolTest()));
return _el$72;
})();
const template55 = (() => {
var _el$73 = _tmpl$34();
var _el$73 = _tmpl$35();
_$setBoolAttribute(_el$73, "quack", boolTest);
return _el$73;
})();
const template56 = (() => {
var _el$74 = _tmpl$35();
var _el$74 = _tmpl$36();
_$setBoolAttribute(_el$74, "quack", boolTestBinding);
return _el$74;
})();
const template57 = (() => {
var _el$75 = _tmpl$36();
var _el$75 = _tmpl$37();
_$effect(() => _$setBoolAttribute(_el$75, "quack", boolTestObjBinding.value));
return _el$75;
})();
const template58 = (() => {
var _el$76 = _tmpl$37();
var _el$76 = _tmpl$38();
_$setBoolAttribute(_el$76, "quack", () => false);
return _el$76;
})();
const template59 = _tmpl$38();
const template60 = _tmpl$39();
const template61 = _tmpl$40();
const template59 = _tmpl$39();
const template60 = _tmpl$40();
const template61 = _tmpl$41();
// this crash it for some reason- */ const template62 = <div bool:quack>really empty</div>;

const template63 = _tmpl$41();
const template64 = _tmpl$42();
const template65 = _tmpl$43();
const template66 = _tmpl$44();
const template67 = _tmpl$45();
const template68 = _tmpl$46();
const template69 = _tmpl$47();
const template70 = _tmpl$48();
const template71 = _tmpl$49();
const template63 = _tmpl$42();
const template64 = _tmpl$43();
const template65 = _tmpl$44();
const template66 = _tmpl$45();
const template67 = _tmpl$46();
const template68 = _tmpl$47();
const template69 = _tmpl$48();
const template70 = _tmpl$49();
const template71 = _tmpl$50();
const template72 = (() => {
var _el$89 = _tmpl$4();
_$use(binding, _el$89);
Expand Down Expand Up @@ -547,4 +546,18 @@ const template76 = (() => {
typeof _ref$10 === "function" ? _$use(_ref$10, _el$93) : (refUnknown = _el$93);
return _el$93;
})();
const template77 = _tmpl$51();
const template78 = _tmpl$52();
const template79 = (() => {
var _el$96 = _tmpl$4();
_el$96.true = true;
_el$96.false = false;
return _el$96;
})();
const template80 = (() => {
var _el$97 = _tmpl$4();
_$setAttribute(_el$97, "true", true);
_$setAttribute(_el$97, "false", false);
return _el$97;
})();
_$delegateEvents(["click", "input"]);
Loading

0 comments on commit 849a980

Please sign in to comment.