Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inline in template boolean literals #385

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

inline in template boolean literals #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
View file
Open in desktop
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
7 changes: 6 additions & 1 deletion packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js
View file
Open in desktop
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}/>
207 changes: 110 additions & 97 deletions ...ges/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js
View file
Open in desktop
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
Loading