Skip to content

Commit

Permalink
Merge pull request #374 from titoBouzout/lazyloadingdynamic
Browse files Browse the repository at this point in the history 
loading lazy with dynamic value
  • Loading branch information
@ryansolid
ryansolid authored Oct 28, 2024
2 parents b7a9d97 + ed4b724 commit 4b11871
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 84 deletions.
149 changes: 84 additions & 65 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 @@ -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}`,
Expand Down Expand Up @@ -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]
Expand All @@ -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(
"=",
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
"&&",
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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(
Expand All @@ -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) {
Expand Down Expand Up @@ -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;
}, []);
Expand All @@ -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) {
Expand Down Expand Up @@ -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(
Expand Down
33 changes: 15 additions & 18 deletions packages/babel-plugin-jsx-dom-expressions/src/shared/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -112,7 +109,7 @@ export function isDynamic(path, { checkMember, checkTags, checkCallExpressions =
checkMember,
checkTags,
checkCallExpressions,
native,
native
}))
) {
const binding = path.scope.getBinding(object.name);
Expand Down Expand Up @@ -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"]
]);
2 changes: 1 addition & 1 deletion packages/babel-plugin-jsx-dom-expressions/test/__dom_fixtures__/attributeExpressions/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,4 +254,4 @@ 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} />

0 comments on commit 4b11871

Please sign in to comment.