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..4528e8b4 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"),
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"]
+]);
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..0a46668f 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
@@ -254,4 +254,4 @@ const template73 = ;
const template74 =
const template75 =
-const template76 =
+const template76 =
\ No newline at end of file