Skip to content

Commit

Permalink
Merge pull request #398 from titoBouzout/emptyattr
Browse files Browse the repository at this point in the history 
makes ssr consistent with templates by avoiding adding `=""` to empty attributes
  • Loading branch information
@ryansolid
ryansolid authored Jan 27, 2025
2 parents cf4c628 + 108dcf2 commit 7b76244
Show file tree
Hide file tree
Showing 9 changed files with 54 additions and 29 deletions.
6 changes: 2 additions & 4 deletions packages/babel-plugin-jsx-dom-expressions/src/dom/element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -831,10 +831,8 @@ function transformAttributes(path, results) {
}

if (!text.length) {
needsSpacing = false;
results.template += `=""`;
// https://github.com/solidjs/solid/issues/2338
// results.templateWithClosingTags += `=""`;
needsSpacing = true;
results.template += ``;
return;
}

Expand Down
22 changes: 14 additions & 8 deletions packages/babel-plugin-jsx-dom-expressions/src/ssr/element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,10 +240,7 @@ function normalizeAttributes(path) {
const prev = quasis.pop();
quasis.push(
t.templateElement({
raw:
(prev ? prev.value.raw : "") +
`${attr.value.value}` +
(isLast ? "" : " ")
raw: (prev ? prev.value.raw : "") + `${attr.value.value}` + (isLast ? "" : " ")
})
);
} else {
Expand Down Expand Up @@ -296,7 +293,11 @@ function transformAttributes(path, results, info) {
t.isJSXExpressionContainer(value) &&
(reservedNameSpace ||
ChildProperties.has(key) ||
!(t.isStringLiteral(value.expression) || t.isNumericLiteral(value.expression) || t.isBooleanLiteral(value.expression)))
!(
t.isStringLiteral(value.expression) ||
t.isNumericLiteral(value.expression) ||
t.isBooleanLiteral(value.expression)
))
) {
if (
key === "ref" ||
Expand Down Expand Up @@ -395,7 +396,12 @@ function transformAttributes(path, results, info) {
text = text.replace(/; /g, ";").replace(/: /g, ":");
}
}
appendToTemplate(results.template, `="${escapeHTML(text, true)}"`);

appendToTemplate(
results.template,
// `String(text)` is needed, as text.length will mess up `attr=10>` becomes `attr>` without it
String(text) === "" ? `` : `="${escapeHTML(text, true)}"`
);
}
});
if (!hasChildren && children) {
Expand Down Expand Up @@ -592,8 +598,8 @@ function createElement(path, { topLevel, hydratable }) {
childNodes.length === 1 ? childNodes[0] : t.arrayExpression(childNodes)
)
: childNodes.length === 1
? childNodes[0]
: t.arrayExpression(childNodes)
? childNodes[0]
: t.arrayExpression(childNodes)
: t.identifier("undefined"),
t.booleanLiteral(Boolean(topLevel && config.hydratable))
])
Expand Down
18 changes: 9 additions & 9 deletions ...ges/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
_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$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>`),
Expand Down Expand Up @@ -54,14 +54,14 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
_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$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>">`);
import * as styles from "./styles.module.css";
import { binding } from "somewhere";
Expand Down
2 changes: 2 additions & 0 deletions ...-plugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,3 +202,5 @@ const template41 = (
<option value={Color.Blue}>Blue</option>
</select>
);

const template42 = <div a a="" a='' a={true} a={false} a={0} a={''} a={""} a={undefined} a={null} a={void 0} a/>
14 changes: 12 additions & 2 deletions ...lugin-jsx-dom-expressions/test/__dom_hydratable_fixtures__/attributeExpressions/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
_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$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>`),
Expand All @@ -36,7 +36,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$20 = /*#__PURE__*/ _$template(`<select><option>Red</option><option>Blue`),
_tmpl$21 = /*#__PURE__*/ _$template(`<div a a a a=0 a a a>`);
import * as styles from "./styles.module.css";
const selected = true;
let id = "my-h1";
Expand Down Expand Up @@ -445,4 +446,13 @@ const template41 = (() => {
_$effect(() => _$setProperty(_el$61, "value", state.color));
return _el$61;
})();
const template42 = (() => {
var _el$64 = _$getNextElement(_tmpl$21);
_$setAttribute(_el$64, "a", true);
_$setAttribute(_el$64, "a", false);
_$setAttribute(_el$64, "a", undefined);
_$setAttribute(_el$64, "a", null);
_$setAttribute(_el$64, "a", void 0);
return _el$64;
})();
_$delegateEvents(["click", "input"]);
2 changes: 1 addition & 1 deletion ...babel-plugin-jsx-dom-expressions/test/__dynamic_fixtures__/attributeExpressions/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
_tmpl$2 = /*#__PURE__*/ _$template(`<div><div></div><div> </div><div>`),
_tmpl$3 = /*#__PURE__*/ _$template(`<div>`),
_tmpl$4 = /*#__PURE__*/ _$template(`<div class="a b">`),
_tmpl$5 = /*#__PURE__*/ _$template(`<input type=checkbox readonly="">`),
_tmpl$5 = /*#__PURE__*/ _$template(`<input type=checkbox readonly>`),
_tmpl$6 = /*#__PURE__*/ _$template(`<input type=checkbox>`);
const selected = true;
let id = "my-h1";
Expand Down
2 changes: 2 additions & 0 deletions packages/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,3 +202,5 @@ const template41 = (
<option value={Color.Blue}>Blue</option>
</select>
);

const template42 = <div a a="" a='' checked={true} checked={false} a={true} a={false} a={0} a={''} a={""} a={undefined} a={null} a={void 0} a/>
13 changes: 10 additions & 3 deletions ...ges/babel-plugin-jsx-dom-expressions/test/__ssr_fixtures__/attributeExpressions/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
_tmpl$7 = ['<div style="', '"', "></div>"],
_tmpl$8 = "<div></div>",
_tmpl$9 = ['<div onclick="', '"></div>'],
_tmpl$10 = '<input type="checkbox" checked="">',
_tmpl$10 = '<input type="checkbox" checked>',
_tmpl$11 = ['<input type="checkbox"', ">"],
_tmpl$12 = '<div class="`a">`$`</div>',
_tmpl$13 = ['<button class="', '" type="button">Write</button>'],
_tmpl$14 = ['<button class="', '">Hi</button>'],
_tmpl$15 = ["<div><input", ' readonly=""><input', "", "></div>"],
_tmpl$15 = ["<div><input", " readonly><input", "", "></div>"],
_tmpl$16 = ['<div style="', '"></div>'],
_tmpl$17 = '<div data="&quot;hi&quot;" data2="&quot;"></div>',
_tmpl$18 = ["<div", ">", "</div>"],
Expand All @@ -27,7 +27,8 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
'<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">',
_tmpl$23 = ["<select", "><option", ">Red</option><option", ">Blue</option></select>"];
_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>"];
import * as styles from "./styles.module.css";
const selected = true;
let id = "my-h1";
Expand Down Expand Up @@ -232,3 +233,9 @@ const template41 = _$ssr(
_$ssrAttribute("value", _$escape(Color.Red, true), false),
_$ssrAttribute("value", _$escape(Color.Blue, true), false)
);
const template42 = _$ssr(
_tmpl$24,
_$ssrAttribute("a", _$escape(undefined, true), false) +
_$ssrAttribute("a", _$escape(null, true), false) +
_$ssrAttribute("a", void 0, false)
);
4 changes: 2 additions & 2 deletions ...lugin-jsx-dom-expressions/test/__ssr_hydratable_fixtures__/attributeExpressions/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ var _tmpl$ = ['<a href="/" class="', '">Welcome</a>'],
_tmpl$7 = ["<div", ' style="', '"', "></div>"],
_tmpl$8 = ["<div", "></div>"],
_tmpl$9 = ["<div", ' onclick="', '"></div>'],
_tmpl$10 = ["<input", ' type="checkbox" checked="">'],
_tmpl$10 = ["<input", ' type="checkbox" checked>'],
_tmpl$11 = ["<input", ' type="checkbox"', ">"],
_tmpl$12 = ["<div", ' class="`a">`$`</div>'],
_tmpl$13 = ["<button", ' class="', '" type="button">Write</button>'],
_tmpl$14 = ["<button", ' class="', '">Hi</button>'],
_tmpl$15 = ["<div", "><input", ' readonly=""><input', "", "></div>"],
_tmpl$15 = ["<div", "><input", " readonly><input", "", "></div>"],
_tmpl$16 = ["<div", ' style="', '"></div>'],
_tmpl$17 = ["<div", ' data="&quot;hi&quot;" data2="&quot;"></div>'],
_tmpl$18 = ["<div", "", ">", "</div>"],
Expand Down

0 comments on commit 7b76244

Please sign in to comment.