From 3840879045cc9daf91b7d9cdab2d611f5effa8f0 Mon Sep 17 00:00:00 2001 From: Tito Bouzout Date: Wed, 23 Oct 2024 09:39:07 -0300 Subject: [PATCH 1/5] prettier stuff --- .../src/dom/element.js | 149 ++++++++++-------- .../src/shared/utils.js | 33 ++-- 2 files changed, 99 insertions(+), 83 deletions(-) diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js index b248a141..5d53c596 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js @@ -61,9 +61,18 @@ export function transformElement(path, info) { config = getConfig(path), wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName), voidTag = VoidElements.indexOf(tagName) > -1, - isCustomElement = tagName.indexOf("-") > -1 || path.get("openingElement").get("attributes").some(a => a.node?.name?.name === "is" || a.name?.name === "is"), - isImportNode = (tagName === 'img'||tagName === 'iframe') && path.get("openingElement").get("attributes").some(a => a.node.name?.name === "loading" && a.node.value?.value === "lazy" - ), + isCustomElement = + tagName.indexOf("-") > -1 || + path + .get("openingElement") + .get("attributes") + .some(a => a.node?.name?.name === "is" || a.name?.name === "is"), + isImportNode = + (tagName === "img" || tagName === "iframe") && + path + .get("openingElement") + .get("attributes") + .some(a => a.node.name?.name === "loading" && a.node.value?.value === "lazy"), results = { template: `<${tagName}`, templateWithClosingTags: `<${tagName}`, @@ -223,12 +232,16 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE, if (dynamic && name === "textContent") { if (config.hydratable) { - return t.callExpression(registerImportMethod(path, "setProperty"), [elem, t.stringLiteral("data"), value]); + return t.callExpression(registerImportMethod(path, "setProperty"), [ + elem, + t.stringLiteral("data"), + value + ]); } return t.assignmentExpression("=", t.memberExpression(elem, t.identifier("data")), value); } - if(namespace === 'bool') { + if (namespace === "bool") { return t.callExpression( registerImportMethod(path, "setBoolAttribute", getRendererConfig(path, "dom").moduleName), [elem, t.stringLiteral(name), value] @@ -241,7 +254,11 @@ export function setAttr(path, elem, name, value, { isSVG, dynamic, prevId, isCE, if (namespace !== "attr" && (isChildProp || (!isSVG && isProp) || isCE || namespace === "prop")) { if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name); if (config.hydratable && namespace !== "prop") { - return t.callExpression(registerImportMethod(path, "setProperty"), [elem, t.stringLiteral(name), value]); + return t.callExpression(registerImportMethod(path, "setProperty"), [ + elem, + t.stringLiteral(name), + value + ]); } return t.assignmentExpression( "=", @@ -289,7 +306,7 @@ function transformAttributes(path, results) { attributes = path.get("openingElement").get("attributes"); const tagName = getTagName(path.node), isSVG = SVGElements.has(tagName), - isCE = tagName.includes("-") || attributes.some(a => a.node.name?.name === 'is'), + isCE = tagName.includes("-") || attributes.some(a => a.node.name?.name === "is"), hasChildren = path.node.children.length > 0, config = getConfig(path); @@ -488,9 +505,7 @@ function transformAttributes(path, results) { if (!isConstant && t.isLVal(value.expression)) { const refIdentifier = path.scope.generateUidIdentifier("_ref$"); results.exprs.unshift( - t.variableDeclaration("var", [ - t.variableDeclarator(refIdentifier, value.expression) - ]), + t.variableDeclaration("var", [t.variableDeclarator(refIdentifier, value.expression)]), t.expressionStatement( t.conditionalExpression( t.binaryExpression( @@ -518,9 +533,7 @@ function transformAttributes(path, results) { } else { const refIdentifier = path.scope.generateUidIdentifier("_ref$"); results.exprs.unshift( - t.variableDeclaration("var", [ - t.variableDeclarator(refIdentifier, value.expression) - ]), + t.variableDeclaration("var", [t.variableDeclarator(refIdentifier, value.expression)]), t.expressionStatement( t.logicalExpression( "&&", @@ -570,21 +583,22 @@ function transformAttributes(path, results) { registerImportMethod( path, "addEventListener", - getRendererConfig(path, "dom").moduleName, + getRendererConfig(path, "dom").moduleName ), - args, - ), - ), + args + ) + ) ); } else if (key.startsWith("oncapture:")) { // deprecated see above condition - const args = [t.stringLiteral(key.split(":")[1]), value.expression, t.booleanLiteral(true)]; + const args = [ + t.stringLiteral(key.split(":")[1]), + value.expression, + t.booleanLiteral(true) + ]; results.exprs.push( t.expressionStatement( - t.callExpression( - t.memberExpression(elem, t.identifier("addEventListener")), - args - ) + t.callExpression(t.memberExpression(elem, t.identifier("addEventListener")), args) ) ); } else if ( @@ -730,54 +744,53 @@ function transformAttributes(path, results) { isCE, tagName }); - } else if(key.slice(0, 5) === 'bool:'){ + } else if (key.slice(0, 5) === "bool:") { + // inline it on the template when possible + let content = value; - // inline it on the template when possible - let content = value; + if (t.isJSXExpressionContainer(content)) content = content.expression; - if (t.isJSXExpressionContainer(content)) content = content.expression; - - function addBoolAttribute() { - results.template += `${needsSpacing ? " " : ""}${key.slice(5)}`; - needsSpacing = true; - } + function addBoolAttribute() { + results.template += `${needsSpacing ? " " : ""}${key.slice(5)}`; + needsSpacing = true; + } - switch (content.type) { - case "StringLiteral": { - if (content.value.length && content.value !== "0") { - addBoolAttribute(); - } - return; + switch (content.type) { + case "StringLiteral": { + if (content.value.length && content.value !== "0") { + addBoolAttribute(); } - case "NullLiteral": { - return; + return; + } + case "NullLiteral": { + return; + } + case "BooleanLiteral": { + if (content.value) { + addBoolAttribute(); } - case "BooleanLiteral": { - if (content.value) { - addBoolAttribute(); - } + return; + } + case "Identifier": { + if (content.name === "undefined") { return; } - case "Identifier": { - if (content.name === "undefined") { - return; - } - break; - } + break; } + } - // when not possible to inline it in the template - results.exprs.push( - t.expressionStatement( - setAttr( - attribute, - elem, - key, - t.isJSXExpressionContainer(value) ? value.expression : value, - { isSVG, isCE, tagName }, - ), - ), - ); + // when not possible to inline it in the template + results.exprs.push( + t.expressionStatement( + setAttr( + attribute, + elem, + key, + t.isJSXExpressionContainer(value) ? value.expression : value, + { isSVG, isCE, tagName } + ) + ) + ); } else { results.exprs.push( t.expressionStatement( @@ -798,7 +811,7 @@ function transformAttributes(path, results) { ); } else { !isSVG && (key = key.toLowerCase()); - results.template += `${needsSpacing ? ' ' : ''}${key}`; + results.template += `${needsSpacing ? " " : ""}${key}`; // https://github.com/solidjs/solid/issues/2338 // results.templateWithClosingTags += `${needsSpacing ? ' ' : ''}${key}`; if (!value) { @@ -907,7 +920,8 @@ function transformChildren(path, results, config) { const i = memo.length; if (transformed.text && i && memo[i - 1].text) { memo[i - 1].template += transformed.template; - memo[i - 1].templateWithClosingTags += transformed.templateWithClosingTags || transformed.template; + memo[i - 1].templateWithClosingTags += + transformed.templateWithClosingTags || transformed.template; } else memo.push(transformed); return memo; }, []); @@ -920,7 +934,7 @@ function transformChildren(path, results, config) { } results.template += child.template; - results.templateWithClosingTags += child.templateWithClosingTags || child.template ; + results.templateWithClosingTags += child.templateWithClosingTags || child.template; results.isImportNode = results.isImportNode || child.isImportNode; if (child.id) { @@ -1075,7 +1089,12 @@ function detectExpressions(children, index, config) { } else if (t.isJSXElement(child)) { const tagName = getTagName(child); if (isComponent(tagName)) return true; - if (config.contextToCustomElements && (tagName === "slot" || tagName.indexOf("-") > -1 || child.openingElement.attributes.some(a => a.name?.name === 'is'))) + if ( + config.contextToCustomElements && + (tagName === "slot" || + tagName.indexOf("-") > -1 || + child.openingElement.attributes.some(a => a.name?.name === "is")) + ) return true; if ( child.openingElement.attributes.some( diff --git a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js index e9a5d1ca..61bd4b81 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js @@ -94,10 +94,7 @@ export function isDynamic(path, { checkMember, checkTags, checkCallExpressions = return false; } - if ( - checkCallExpressions && - (t.isCallExpression(expr) || t.isOptionalCallExpression(expr)) - ) { + if (checkCallExpressions && (t.isCallExpression(expr) || t.isOptionalCallExpression(expr))) { return true; } @@ -112,7 +109,7 @@ export function isDynamic(path, { checkMember, checkTags, checkCallExpressions = checkMember, checkTags, checkCallExpressions, - native, + native })) ) { const binding = path.scope.getBinding(object.name); @@ -418,19 +415,19 @@ export function getNumberedId(num) { } export function escapeStringForTemplate(str) { - return str.replace(/[{\\`\n\t\b\f\v\r\u2028\u2029]/g, ch => templateEscapes.get(ch)) + return str.replace(/[{\\`\n\t\b\f\v\r\u2028\u2029]/g, ch => templateEscapes.get(ch)); } const templateEscapes = new Map([ - ['{', '\\{'], - ['`', '\\`'], - ['\\', '\\\\'], - ['\n', '\\n'], - ['\t', '\\t'], - ['\b', '\\b'], - ['\f', '\\f'], - ['\v', '\\v'], - ['\r', '\\r'], - ['\u2028', '\\u2028'], - ['\u2029', '\\u2029'] -]) + ["{", "\\{"], + ["`", "\\`"], + ["\\", "\\\\"], + ["\n", "\\n"], + ["\t", "\\t"], + ["\b", "\\b"], + ["\f", "\\f"], + ["\v", "\\v"], + ["\r", "\\r"], + ["\u2028", "\\u2028"], + ["\u2029", "\\u2029"] +]); From b57c3922051326bda862feaec168ea64dee65640 Mon Sep 17 00:00:00 2001 From: Tito Bouzout Date: Wed, 23 Oct 2024 09:58:52 -0300 Subject: [PATCH 2/5] default to loading=lazy when loading is provided but dynamic --- .../src/dom/element.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js index 5d53c596..18fc21aa 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js @@ -67,14 +67,22 @@ export function transformElement(path, info) { .get("openingElement") .get("attributes") .some(a => a.node?.name?.name === "is" || a.name?.name === "is"), + inlineLoadingLazy = false, isImportNode = (tagName === "img" || tagName === "iframe") && path .get("openingElement") .get("attributes") - .some(a => a.node.name?.name === "loading" && a.node.value?.value === "lazy"), + .some(a => { + if (a.node.name?.name === "loading") { + if (typeof a.node.value?.value !== "string") { + inlineLoadingLazy = true; + } + return true; + } + }), results = { - template: `<${tagName}`, + template: `<${tagName}${inlineLoadingLazy ? ' loading="lazy"' : ""}`, templateWithClosingTags: `<${tagName}`, declarations: [], exprs: [], From e87bb6ac9966cbab88473800c4f30ef650069206 Mon Sep 17 00:00:00 2001 From: Tito Bouzout Date: Wed, 23 Oct 2024 10:14:29 -0300 Subject: [PATCH 3/5] add tests --- .../src/dom/element.js | 2 +- .../attributeExpressions/code.js | 6 ++++ .../attributeExpressions/output.js | 28 ++++++++++++++++++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js index 18fc21aa..8065f8c8 100644 --- a/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js +++ b/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js @@ -82,7 +82,7 @@ export function transformElement(path, info) { } }), results = { - template: `<${tagName}${inlineLoadingLazy ? ' loading="lazy"' : ""}`, + template: `<${tagName}${inlineLoadingLazy ? " loading=lazy" : ""}`, templateWithClosingTags: `<${tagName}`, declarations: [], exprs: [], diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js index e69e7535..b99ab446 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js @@ -255,3 +255,9 @@ const template74 =
const template75 =
const template76 =
+ +const template77 = ; +const template78 =
; + +const template79 = ; +const template80 =
; diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js index ea25c8cb..2fd083ed 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js @@ -62,7 +62,11 @@ var _tmpl$ = /*#__PURE__*/ _$template(`

; -const template80 =
; +const template76 =
\ No newline at end of file diff --git a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js index dec00125..ea25c8cb 100644 --- a/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js +++ b/packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/output.js @@ -547,26 +547,4 @@ const template76 = (() => { typeof _ref$10 === "function" ? _$use(_ref$10, _el$93) : (refUnknown = _el$93); return _el$93; })(); -const template77 = (() => { - var _el$94 = _tmpl$41(); - _$setAttribute(_el$94, "loading", signal); - return _el$94; -})(); -const template78 = (() => { - var _el$95 = _tmpl$42(), - _el$96 = _el$95.firstChild; - _$setAttribute(_el$96, "loading", signal); - return _el$95; -})(); -const template79 = (() => { - var _el$97 = _tmpl$45(); - _$setAttribute(_el$97, "loading", signal); - return _el$97; -})(); -const template80 = (() => { - var _el$98 = _tmpl$46(), - _el$99 = _el$98.firstChild; - _$setAttribute(_el$99, "loading", signal); - return _el$98; -})(); _$delegateEvents(["click", "input"]);