Skip to content

Commit 030e8be

Browse files
ryansolidryansolid
authored
Merge branch 'main' into avoiding-onclick-test-changes
2 parents 1167c88 + 7b3a26e commit 030e8be

File tree

34 files changed

+1711
-580
lines changed

34 files changed

+1711
-580
lines changed

‎packages/babel-plugin-jsx-dom-expressions/README.md‎

Lines changed: 296 additions & 273 deletions
Large diffs are not rendered by default.

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

Lines changed: 87 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,68 @@ function transformAttributes(path, results) {
329329
hasHydratableEvent = true;
330330
}
331331

332+
/**
333+
* inline styles
334+
*
335+
* 1. when string
336+
* 2. when is an object, the key is a string, and value is string/numeric
337+
* 3. remove properties from object when value is undefined/null
338+
**/
339+
340+
attributes = path.get("openingElement").get("attributes");
341+
342+
const styleAttributes = attributes.filter(a => a.node.name && a.node.name.name === "style");
343+
if (styleAttributes.length > 0) {
344+
let inlinedStyle = "";
345+
346+
for (let i = 0; i < styleAttributes.length; i++) {
347+
const attr = styleAttributes[i];
348+
349+
let value = attr.node.value;
350+
if (t.isJSXExpressionContainer(value)) {
351+
value = value.expression;
352+
}
353+
354+
if (t.isStringLiteral(value)) {
355+
inlinedStyle += `${value.value.replace(/;$/, "")};`;
356+
attr.remove();
357+
} else if (t.isObjectExpression(value)) {
358+
const properties = value.properties;
359+
const toRemoveProperty = [];
360+
for (const property of properties) {
361+
if (t.isObjectProperty(property)) {
362+
if (
363+
t.isStringLiteral(property.key) &&
364+
(t.isStringLiteral(property.value) || t.isNumericLiteral(property.value))
365+
) {
366+
inlinedStyle += `${property.key.value}:${property.value.value};`;
367+
toRemoveProperty.push(property);
368+
} else if (
369+
(t.isIdentifier(property.value) && property.value.name === "undefined") ||
370+
t.isNullLiteral(property.value)
371+
) {
372+
toRemoveProperty.push(property);
373+
}
374+
}
375+
}
376+
for (const remove of toRemoveProperty) {
377+
value.properties.splice(value.properties.indexOf(remove), 1);
378+
}
379+
if (value.properties.length === 0) {
380+
attr.remove();
381+
}
382+
}
383+
}
384+
385+
if (inlinedStyle !== "") {
386+
const styleAttribute = t.jsxAttribute(
387+
t.jsxIdentifier("style"),
388+
t.stringLiteral(inlinedStyle.replace(/;$/, ""))
389+
);
390+
path.get("openingElement").node.attributes.push(styleAttribute);
391+
}
392+
}
393+
332394
// preprocess styles
333395
const styleAttribute = path
334396
.get("openingElement")
@@ -761,12 +823,22 @@ function transformAttributes(path, results) {
761823
}
762824
} else if (
763825
config.effectWrapper &&
764-
(isDynamic(attribute.get("value").get("expression"), {
826+
isDynamic(attribute.get("value").get("expression"), {
765827
checkMember: true
766-
}) ||
767-
((key === "classList" || key === "style") &&
768-
!attribute.get("value").get("expression").evaluate().confident))
828+
})
769829
) {
830+
/*
831+
Following code doesn't repect static marker `@once`.
832+
https://github.com/ryansolid/dom-expressions/pull/438
833+
834+
||
835+
(
836+
(
837+
key === "classList" || key === "style") &&
838+
!attribute.get("value").get("expression").evaluate().confident
839+
)
840+
)
841+
*/
770842
let nextElem = elem;
771843
if (key === "value" || key === "checked") {
772844
const effectWrapperId = registerImportMethod(path, config.effectWrapper);
@@ -1148,6 +1220,7 @@ function contextToCustomElement(path, results) {
11481220
}
11491221

11501222
function processSpreads(path, attributes, { elem, isSVG, hasChildren, wrapConditionals }) {
1223+
const config = getConfig(path);
11511224
// TODO: skip but collect the names of any properties after the last spread to not overwrite them
11521225
const filteredAttributes = [];
11531226
const spreadArgs = [];
@@ -1162,12 +1235,18 @@ function processSpreads(path, attributes, { elem, isSVG, hasChildren, wrapCondit
11621235
? `${node.name.namespace.name}:${node.name.name.name}`
11631236
: node.name.name);
11641237
if (t.isJSXSpreadAttribute(node)) {
1238+
const isStatic =
1239+
node.innerComments &&
1240+
node.innerComments[0] &&
1241+
node.innerComments[0].value.trim() === config.staticMarker;
1242+
11651243
firstSpread = true;
11661244
if (runningObject.length) {
11671245
spreadArgs.push(t.objectExpression(runningObject));
11681246
runningObject = [];
11691247
}
1170-
spreadArgs.push(
1248+
1249+
const s =
11711250
isDynamic(attribute.get("argument"), {
11721251
checkMember: true
11731252
}) && (dynamicSpread = true)
@@ -1177,8 +1256,9 @@ function processSpreads(path, attributes, { elem, isSVG, hasChildren, wrapCondit
11771256
!t.isMemberExpression(node.argument.callee)
11781257
? node.argument.callee
11791258
: t.arrowFunctionExpression([], node.argument)
1180-
: node.argument
1181-
);
1259+
: node.argument;
1260+
1261+
spreadArgs.push(isStatic ? t.objectExpression([t.spreadElement(s)]) : s);
11821262
} else if (
11831263
(firstSpread ||
11841264
(t.isJSXExpressionContainer(node.value) &&

‎packages/babel-plugin-jsx-dom-expressions/src/shared/postprocess.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { appendTemplates as appendTemplatesSSR } from "../ssr/template";
55
import { isInvalidMarkup } from "./validate.js";
66

77
// add to the top/bottom of the module.
8-
export default path => {
8+
export default (path, state) => {
9+
if (state.skip) return;
10+
911
if (path.scope.data.events) {
1012
path.node.body.push(
1113
t.expressionStatement(

‎packages/babel-plugin-jsx-dom-expressions/src/shared/preprocess.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import config from "../config";
22

3-
export default (path, { opts }) => {
4-
const merged = (path.hub.file.metadata.config = Object.assign({}, config, opts));
3+
export default (path, state) => {
4+
const merged = (path.hub.file.metadata.config = Object.assign({}, config, state.opts));
55
const lib = merged.requireImportSource;
66
if (lib) {
77
const comments = path.hub.file.ast.comments;
88
let process = false;
99
for (let i = 0; i < comments.length; i++) {
1010
const comment = comments[i];
11-
const index = comment.value.indexOf("@jsxImportSource");
12-
if (index > -1 && comment.value.slice(index).includes(lib)) {
11+
const pieces = comment.value.split("@jsxImportSource");
12+
if (pieces.length === 2 && pieces[1].trim() === lib) {
1313
process = true;
1414
break;
1515
}
1616
}
1717
if (!process) {
18-
path.skip();
18+
state.skip = true;
1919
return;
2020
}
2121
}

‎packages/babel-plugin-jsx-dom-expressions/src/shared/transform.js‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ import {
1818
import transformComponent from "./component";
1919
import transformFragmentChildren from "./fragment";
2020

21-
export function transformJSX(path) {
21+
export function transformJSX(path, state) {
22+
if (state.skip) return;
23+
2224
const config = getConfig(path);
25+
2326
const replace = transformThis(path);
2427
const result = transformNode(
2528
path,
@@ -34,6 +37,18 @@ export function transformJSX(path) {
3437
const template = getCreateTemplate(config, path, result);
3538

3639
path.replaceWith(replace(template(path, result, false)));
40+
41+
path.traverse({
42+
enter(path) {
43+
if (
44+
path.node.leadingComments &&
45+
path.node.leadingComments[0] &&
46+
path.node.leadingComments[0].value.trim() === config.staticMarker
47+
) {
48+
path.node.leadingComments.shift();
49+
}
50+
}
51+
});
3752
}
3853

3954
function getTargetFunctionParent(path, parent) {
@@ -147,13 +162,13 @@ export function transformNode(path, info = {}) {
147162
(t.isLogicalExpression(node.expression) || t.isConditionalExpression(node.expression))
148163
? transformCondition(path.get("expression"), info.componentChild || info.fragmentChild)
149164
: !info.componentChild &&
150-
(config.generate !== "ssr" || info.fragmentChild) &&
151-
t.isCallExpression(node.expression) &&
152-
!t.isCallExpression(node.expression.callee) &&
153-
!t.isMemberExpression(node.expression.callee) &&
154-
node.expression.arguments.length === 0
155-
? node.expression.callee
156-
: t.arrowFunctionExpression([], node.expression);
165+
(config.generate !== "ssr" || info.fragmentChild) &&
166+
t.isCallExpression(node.expression) &&
167+
!t.isCallExpression(node.expression.callee) &&
168+
!t.isMemberExpression(node.expression.callee) &&
169+
node.expression.arguments.length === 0
170+
? node.expression.callee
171+
: t.arrowFunctionExpression([], node.expression);
157172
return {
158173
exprs:
159174
expr.length > 1

‎packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export function isDynamic(path, { checkMember, checkTags, checkCallExpressions =
9090
expr.leadingComments[0] &&
9191
expr.leadingComments[0].value.trim() === config.staticMarker
9292
) {
93-
expr.leadingComments.shift();
9493
return false;
9594
}
9695

@@ -260,9 +259,10 @@ export function transformCondition(path, inline, deep) {
260259
if (
261260
t.isConditionalExpression(expr) &&
262261
(isDynamic(path.get("consequent"), {
263-
checkTags: true
262+
checkTags: true,
263+
checkMember: true
264264
}) ||
265-
isDynamic(path.get("alternate"), { checkTags: true }))
265+
isDynamic(path.get("alternate"), { checkTags: true, checkMember: true }))
266266
) {
267267
dTest = isDynamic(path.get("test"), { checkMember: true });
268268
if (dTest) {
@@ -287,7 +287,7 @@ export function transformCondition(path, inline, deep) {
287287
nextPath = nextPath.get("left");
288288
}
289289
nextPath.node.operator === "&&" &&
290-
isDynamic(nextPath.get("right"), { checkTags: true }) &&
290+
isDynamic(nextPath.get("right"), { checkTags: true, checkMember: true }) &&
291291
(dTest = isDynamic(nextPath.get("left"), {
292292
checkMember: true
293293
}));

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ var _tmpl$ = /*#__PURE__*/ _$template(
1919
_tmpl$3 = /*#__PURE__*/ _$template(`<div foo></div>`),
2020
_tmpl$4 = /*#__PURE__*/ _$template(`<div></div>`),
2121
_tmpl$5 = /*#__PURE__*/ _$template(`<div class="a b"></div>`),
22-
_tmpl$6 = /*#__PURE__*/ _$template(`<div onclick="console.log('hi')"></div>`),
22+
_tmpl$6 = /*#__PURE__*/ _$template(`<div style="margin-right:40px" onclick="console.log('hi')"></div>`),
2323
_tmpl$7 = /*#__PURE__*/ _$template(`<input type="checkbox">`),
2424
_tmpl$8 = /*#__PURE__*/ _$template(`<div class="\`a">\`$\`</div>`),
2525
_tmpl$9 = /*#__PURE__*/ _$template(`<button class="static hi"type="button">Write</button>`),
@@ -187,14 +187,13 @@ const template6 = (() => {
187187
})();
188188
let undefVar;
189189
const template7 = (() => {
190-
var _el$13 = _tmpl$4();
190+
var _el$13 = _tmpl$6();
191191
_el$13.classList.toggle("other-class", !!undefVar);
192192
_el$13.classList.toggle("other-class2", !!undefVar);
193193
_$effect(
194194
_p$ => {
195195
var _v$ = {
196196
"background-color": color(),
197-
"margin-right": "40px",
198197
...props.style
199198
},
200199
_v$2 = props.top,
@@ -406,11 +405,7 @@ const template31 = (() => {
406405
);
407406
return _el$44;
408407
})();
409-
const template32 = (() => {
410-
var _el$45 = _tmpl$4();
411-
_el$45.style.removeProperty("background-color");
412-
return _el$45;
413-
})();
408+
const template32 = _tmpl$4();
414409
const template33 = [
415410
(() => {
416411
var _el$46 = _tmpl$19();

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,3 +264,10 @@ const template80 = <div attr:true={true} attr:false={false}/>
264264
const template81 = <math display="block"><mrow></mrow></math>
265265
const template82 = <mrow><mi>x</mi><mo>=</mo></mrow>
266266

267+
const template83 = <div style={{"background":"red"}}/>
268+
const template84 = <div style={{"background":"red", "color":"green", "margin":3, "padding":0.4}}/>
269+
const template85 = <div style={{"background":"red", "color":"green", "border":undefined}}/>
270+
const template86 = <div style={{"background":"red", "color":"green", "border":signal()}}/>
271+
const template87 = <div style={{"background":"red", "color":"green", "border":somevalue}}/>
272+
const template88 = <div style={{"background":"red", "color":"green", "border":some.access}}/>
273+
const template89 = <div style={{"background":"red", "color":"green", "border":null}}/>

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

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
1717
_tmpl$3 = /*#__PURE__*/ _$template(`<div foo>`),
1818
_tmpl$4 = /*#__PURE__*/ _$template(`<div>`),
1919
_tmpl$5 = /*#__PURE__*/ _$template(`<div class="a b">`),
20-
_tmpl$6 = /*#__PURE__*/ _$template(`<div onclick="console.log('hi')">`),
20+
_tmpl$6 = /*#__PURE__*/ _$template(`<div style=margin-right:40px onclick="console.log('hi')">`),
2121
_tmpl$7 = /*#__PURE__*/ _$template(`<input type=checkbox>`),
2222
_tmpl$8 = /*#__PURE__*/ _$template(`<div class="\`a">\`$\``),
2323
_tmpl$9 = /*#__PURE__*/ _$template(`<button class="static hi"type=button>Write`),
@@ -67,7 +67,13 @@ var _tmpl$ = /*#__PURE__*/ _$template(`<div id=main><h1 class=base id=my-h1><a h
6767
_tmpl$51 = /*#__PURE__*/ _$template(`<div truestr=true truestrjs=true>`),
6868
_tmpl$52 = /*#__PURE__*/ _$template(`<div falsestr=false falsestrjs=false>`),
6969
_tmpl$53 = /*#__PURE__*/ _$template(`<math display=block><mrow>`, false, false, true),
70-
_tmpl$54 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=`, false, false, true);
70+
_tmpl$54 = /*#__PURE__*/ _$template(`<mrow><mi>x</mi><mo>=`, false, false, true),
71+
_tmpl$55 = /*#__PURE__*/ _$template(`<div style=background:red>`),
72+
_tmpl$56 = /*#__PURE__*/ _$template(
73+
`<div style=background:red;color:green;margin:3;padding:0.4>`
74+
),
75+
_tmpl$57 = /*#__PURE__*/ _$template(`<div style=background:red;color:green>`);
76+
7177
import * as styles from "./styles.module.css";
7278
import { binding } from "somewhere";
7379
function refFn() {}
@@ -167,14 +173,13 @@ const template6 = (() => {
167173
})();
168174
let undefVar;
169175
const template7 = (() => {
170-
var _el$13 = _tmpl$4();
176+
var _el$13 = _tmpl$6();
171177
_el$13.classList.toggle("other-class", !!undefVar);
172178
_el$13.classList.toggle("other-class2", !!undefVar);
173179
_$effect(
174180
_p$ => {
175181
var _v$ = {
176182
"background-color": color(),
177-
"margin-right": "40px",
178183
...props.style
179184
},
180185
_v$2 = props.top,
@@ -386,11 +391,7 @@ const template31 = (() => {
386391
);
387392
return _el$44;
388393
})();
389-
const template32 = (() => {
390-
var _el$45 = _tmpl$4();
391-
_el$45.style.removeProperty("background-color");
392-
return _el$45;
393-
})();
394+
const template32 = _tmpl$4();
394395
const template33 = [
395396
(() => {
396397
var _el$46 = _tmpl$19();
@@ -575,4 +576,33 @@ const template80 = (() => {
575576
})();
576577
const template81 = _tmpl$53();
577578
const template82 = _tmpl$54();
579+
const template83 = _tmpl$55();
580+
const template84 = _tmpl$56();
581+
const template85 = _tmpl$57();
582+
const template86 = (() => {
583+
var _el$103 = _tmpl$57();
584+
_$effect(_$p =>
585+
(_$p = signal()) != null
586+
? _el$103.style.setProperty("border", _$p)
587+
: _el$103.style.removeProperty("border")
588+
);
589+
return _el$103;
590+
})();
591+
const template87 = (() => {
592+
var _el$104 = _tmpl$57();
593+
somevalue != null
594+
? _el$104.style.setProperty("border", somevalue)
595+
: _el$104.style.removeProperty("border");
596+
return _el$104;
597+
})();
598+
const template88 = (() => {
599+
var _el$105 = _tmpl$57();
600+
_$effect(_$p =>
601+
(_$p = some.access) != null
602+
? _el$105.style.setProperty("border", _$p)
603+
: _el$105.style.removeProperty("border")
604+
);
605+
return _el$105;
606+
})();
607+
const template89 = _tmpl$57();
578608
_$delegateEvents(["click", "input"]);

0 commit comments

Comments
 (0)