babel-plugin-jsx-dom-expressions 0.34.13 → 0.35.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +316 -139
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -219,6 +219,14 @@ const reservedNameSpaces = new Set([
|
|
|
219
219
|
"attr"
|
|
220
220
|
]);
|
|
221
221
|
|
|
222
|
+
const nonSpreadNameSpaces = new Set([
|
|
223
|
+
"class",
|
|
224
|
+
"style",
|
|
225
|
+
"use",
|
|
226
|
+
"prop",
|
|
227
|
+
"attr"
|
|
228
|
+
]);
|
|
229
|
+
|
|
222
230
|
function getConfig(path) {
|
|
223
231
|
return path.hub.file.metadata.config;
|
|
224
232
|
}
|
|
@@ -411,7 +419,7 @@ function wrappedByText(list, startIndex) {
|
|
|
411
419
|
return false;
|
|
412
420
|
}
|
|
413
421
|
|
|
414
|
-
function transformCondition(path, inline, deep) {
|
|
422
|
+
function transformCondition$1(path, inline, deep) {
|
|
415
423
|
const config = getConfig(path);
|
|
416
424
|
const expr = path.node;
|
|
417
425
|
const memo = registerImportMethod(path, config.memoWrapper);
|
|
@@ -429,14 +437,14 @@ function transformCondition(path, inline, deep) {
|
|
|
429
437
|
if (!t__namespace.isBinaryExpression(cond))
|
|
430
438
|
cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
|
|
431
439
|
id = inline
|
|
432
|
-
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)
|
|
440
|
+
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
|
|
433
441
|
: path.scope.generateUidIdentifier("_c$");
|
|
434
442
|
expr.test = t__namespace.callExpression(id, []);
|
|
435
443
|
if (t__namespace.isConditionalExpression(expr.consequent) || t__namespace.isLogicalExpression(expr.consequent)) {
|
|
436
|
-
expr.consequent = transformCondition(path.get("consequent"), inline, true);
|
|
444
|
+
expr.consequent = transformCondition$1(path.get("consequent"), inline, true);
|
|
437
445
|
}
|
|
438
446
|
if (t__namespace.isConditionalExpression(expr.alternate) || t__namespace.isLogicalExpression(expr.alternate)) {
|
|
439
|
-
expr.alternate = transformCondition(path.get("alternate"), inline, true);
|
|
447
|
+
expr.alternate = transformCondition$1(path.get("alternate"), inline, true);
|
|
440
448
|
}
|
|
441
449
|
}
|
|
442
450
|
} else if (t__namespace.isLogicalExpression(expr)) {
|
|
@@ -455,7 +463,7 @@ function transformCondition(path, inline, deep) {
|
|
|
455
463
|
if (!t__namespace.isBinaryExpression(cond))
|
|
456
464
|
cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
|
|
457
465
|
id = inline
|
|
458
|
-
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)
|
|
466
|
+
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
|
|
459
467
|
: path.scope.generateUidIdentifier("_c$");
|
|
460
468
|
nextPath.node.left = t__namespace.callExpression(id, []);
|
|
461
469
|
}
|
|
@@ -466,7 +474,7 @@ function transformCondition(path, inline, deep) {
|
|
|
466
474
|
t__namespace.variableDeclarator(
|
|
467
475
|
id,
|
|
468
476
|
config.memoWrapper
|
|
469
|
-
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)
|
|
477
|
+
? t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)])
|
|
470
478
|
: t__namespace.arrowFunctionExpression([], cond)
|
|
471
479
|
)
|
|
472
480
|
]),
|
|
@@ -534,6 +542,32 @@ function escapeHTML(s, attr) {
|
|
|
534
542
|
return left < s.length ? out + s.substring(left) : out;
|
|
535
543
|
}
|
|
536
544
|
|
|
545
|
+
function convertJSXIdentifier(node) {
|
|
546
|
+
if (t__namespace.isJSXIdentifier(node)) {
|
|
547
|
+
if (t__namespace.isValidIdentifier(node.name)) {
|
|
548
|
+
node.type = "Identifier";
|
|
549
|
+
} else {
|
|
550
|
+
return t__namespace.stringLiteral(node.name);
|
|
551
|
+
}
|
|
552
|
+
} else if (t__namespace.isJSXMemberExpression(node)) {
|
|
553
|
+
return t__namespace.memberExpression(
|
|
554
|
+
convertJSXIdentifier(node.object),
|
|
555
|
+
convertJSXIdentifier(node.property)
|
|
556
|
+
);
|
|
557
|
+
} else if (t__namespace.isJSXNamespacedName(node)) {
|
|
558
|
+
return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
return node;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
function canNativeSpread(key, { checkNameSpaces } = {}) {
|
|
565
|
+
if (checkNameSpaces && key.includes(":") && nonSpreadNameSpaces.has(key.split(":")[0])) return false;
|
|
566
|
+
// TODO: figure out how to detect definitely function ref
|
|
567
|
+
if (key === "ref") return false;
|
|
568
|
+
return true;
|
|
569
|
+
}
|
|
570
|
+
|
|
537
571
|
function transformElement$3(path, info) {
|
|
538
572
|
let tagName = getTagName(path.node),
|
|
539
573
|
config = getConfig(path),
|
|
@@ -681,6 +715,7 @@ function transformAttributes$2(path, results) {
|
|
|
681
715
|
let elem = results.id,
|
|
682
716
|
hasHydratableEvent = false,
|
|
683
717
|
children,
|
|
718
|
+
spreadExpr,
|
|
684
719
|
attributes = path.get("openingElement").get("attributes");
|
|
685
720
|
const tagName = getTagName(path.node),
|
|
686
721
|
isSVG = SVGElements.has(tagName),
|
|
@@ -688,15 +723,34 @@ function transformAttributes$2(path, results) {
|
|
|
688
723
|
hasChildren = path.node.children.length > 0,
|
|
689
724
|
config = getConfig(path);
|
|
690
725
|
|
|
726
|
+
// preprocess spreads
|
|
727
|
+
if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
|
|
728
|
+
[attributes, spreadExpr] = processSpreads$1(path, attributes, {
|
|
729
|
+
elem,
|
|
730
|
+
isSVG,
|
|
731
|
+
hasChildren,
|
|
732
|
+
wrapConditionals: config.wrapConditionals
|
|
733
|
+
});
|
|
734
|
+
path.get("openingElement").set(
|
|
735
|
+
"attributes",
|
|
736
|
+
attributes.map(a => a.node)
|
|
737
|
+
);
|
|
738
|
+
//NOTE: can't be checked at compile time so add to compiled output
|
|
739
|
+
hasHydratableEvent = true;
|
|
740
|
+
}
|
|
741
|
+
|
|
691
742
|
// preprocess styles
|
|
692
|
-
const styleAttribute =
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
743
|
+
const styleAttribute = path
|
|
744
|
+
.get("openingElement")
|
|
745
|
+
.get("attributes")
|
|
746
|
+
.find(
|
|
747
|
+
a =>
|
|
748
|
+
a.node.name &&
|
|
749
|
+
a.node.name.name === "style" &&
|
|
750
|
+
t__namespace.isJSXExpressionContainer(a.node.value) &&
|
|
751
|
+
t__namespace.isObjectExpression(a.node.value.expression) &&
|
|
752
|
+
!a.node.value.expression.properties.some(p => t__namespace.isSpreadElement(p))
|
|
753
|
+
);
|
|
700
754
|
if (styleAttribute) {
|
|
701
755
|
let i = 0,
|
|
702
756
|
leading = styleAttribute.node.value.expression.leadingComments;
|
|
@@ -816,31 +870,6 @@ function transformAttributes$2(path, results) {
|
|
|
816
870
|
.get("attributes")
|
|
817
871
|
.forEach(attribute => {
|
|
818
872
|
const node = attribute.node;
|
|
819
|
-
if (t__namespace.isJSXSpreadAttribute(node)) {
|
|
820
|
-
results.exprs.push(
|
|
821
|
-
t__namespace.expressionStatement(
|
|
822
|
-
t__namespace.callExpression(
|
|
823
|
-
registerImportMethod(attribute, "spread", getRendererConfig(path, "dom").moduleName),
|
|
824
|
-
[
|
|
825
|
-
elem,
|
|
826
|
-
isDynamic(attribute.get("argument"), {
|
|
827
|
-
checkMember: true
|
|
828
|
-
})
|
|
829
|
-
? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
|
|
830
|
-
? node.argument.callee
|
|
831
|
-
: t__namespace.arrowFunctionExpression([], node.argument)
|
|
832
|
-
: node.argument,
|
|
833
|
-
t__namespace.booleanLiteral(isSVG),
|
|
834
|
-
t__namespace.booleanLiteral(hasChildren)
|
|
835
|
-
]
|
|
836
|
-
)
|
|
837
|
-
)
|
|
838
|
-
);
|
|
839
|
-
//NOTE: can't be checked at compile time so add to compiled output
|
|
840
|
-
hasHydratableEvent = true;
|
|
841
|
-
return;
|
|
842
|
-
}
|
|
843
|
-
|
|
844
873
|
let value = node.value,
|
|
845
874
|
key = t__namespace.isJSXNamespacedName(node.name)
|
|
846
875
|
? `${node.name.namespace.name}:${node.name.name.name}`
|
|
@@ -1131,6 +1160,7 @@ function transformAttributes$2(path, results) {
|
|
|
1131
1160
|
if (!hasChildren && children) {
|
|
1132
1161
|
path.node.children.push(children);
|
|
1133
1162
|
}
|
|
1163
|
+
if (spreadExpr) results.exprs.push(spreadExpr);
|
|
1134
1164
|
|
|
1135
1165
|
results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
|
|
1136
1166
|
}
|
|
@@ -1333,6 +1363,94 @@ function contextToCustomElement(path, results) {
|
|
|
1333
1363
|
);
|
|
1334
1364
|
}
|
|
1335
1365
|
|
|
1366
|
+
function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapConditionals }) {
|
|
1367
|
+
// TODO: skip but collect the names of any properties after the last spread to not overwrite them
|
|
1368
|
+
const filteredAttributes = [];
|
|
1369
|
+
const spreadArgs = [];
|
|
1370
|
+
let runningObject = [];
|
|
1371
|
+
let dynamicSpread = false;
|
|
1372
|
+
let firstSpread = false;
|
|
1373
|
+
attributes.forEach(attribute => {
|
|
1374
|
+
const node = attribute.node;
|
|
1375
|
+
const key =
|
|
1376
|
+
!t__namespace.isJSXSpreadAttribute(node) &&
|
|
1377
|
+
(t__namespace.isJSXNamespacedName(node.name)
|
|
1378
|
+
? `${node.name.namespace.name}:${node.name.name.name}`
|
|
1379
|
+
: node.name.name);
|
|
1380
|
+
if (t__namespace.isJSXSpreadAttribute(node)) {
|
|
1381
|
+
firstSpread = true;
|
|
1382
|
+
if (runningObject.length) {
|
|
1383
|
+
spreadArgs.push(t__namespace.objectExpression(runningObject));
|
|
1384
|
+
runningObject = [];
|
|
1385
|
+
}
|
|
1386
|
+
spreadArgs.push(
|
|
1387
|
+
isDynamic(attribute.get("argument"), {
|
|
1388
|
+
checkMember: true
|
|
1389
|
+
}) && (dynamicSpread = true)
|
|
1390
|
+
? t__namespace.isCallExpression(node.argument) &&
|
|
1391
|
+
!node.argument.arguments.length &&
|
|
1392
|
+
!t__namespace.isCallExpression(node.argument.callee) &&
|
|
1393
|
+
!t__namespace.isMemberExpression(node.argument.callee)
|
|
1394
|
+
? node.argument.callee
|
|
1395
|
+
: t__namespace.arrowFunctionExpression([], node.argument)
|
|
1396
|
+
: node.argument
|
|
1397
|
+
);
|
|
1398
|
+
} else if (
|
|
1399
|
+
(firstSpread ||
|
|
1400
|
+
(t__namespace.isJSXExpressionContainer(node.value) &&
|
|
1401
|
+
isDynamic(attribute.get("value").get("expression"), { checkMember: true }))) &&
|
|
1402
|
+
canNativeSpread(key, { checkNameSpaces: true })
|
|
1403
|
+
) {
|
|
1404
|
+
const isContainer = t__namespace.isJSXExpressionContainer(node.value);
|
|
1405
|
+
const dynamic =
|
|
1406
|
+
isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
|
|
1407
|
+
if (dynamic) {
|
|
1408
|
+
const id = convertJSXIdentifier(node.name);
|
|
1409
|
+
let expr =
|
|
1410
|
+
wrapConditionals &&
|
|
1411
|
+
(t__namespace.isLogicalExpression(node.value.expression) || t__namespace.isConditionalExpression(node.value.expression))
|
|
1412
|
+
? transformCondition(attribute.get("value").get("expression"), true)
|
|
1413
|
+
: t__namespace.arrowFunctionExpression([], node.value.expression);
|
|
1414
|
+
runningObject.push(
|
|
1415
|
+
t__namespace.objectMethod(
|
|
1416
|
+
"get",
|
|
1417
|
+
id,
|
|
1418
|
+
[],
|
|
1419
|
+
t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
|
|
1420
|
+
!t__namespace.isValidIdentifier(key)
|
|
1421
|
+
)
|
|
1422
|
+
);
|
|
1423
|
+
} else {
|
|
1424
|
+
runningObject.push(
|
|
1425
|
+
t__namespace.objectProperty(
|
|
1426
|
+
t__namespace.stringLiteral(key),
|
|
1427
|
+
isContainer ? node.value.expression : node.value || t__namespace.stringLiteral("")
|
|
1428
|
+
)
|
|
1429
|
+
);
|
|
1430
|
+
}
|
|
1431
|
+
} else filteredAttributes.push(attribute);
|
|
1432
|
+
});
|
|
1433
|
+
|
|
1434
|
+
if (runningObject.length) {
|
|
1435
|
+
spreadArgs.push(t__namespace.objectExpression(runningObject));
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
const props =
|
|
1439
|
+
spreadArgs.length === 1 && !dynamicSpread
|
|
1440
|
+
? spreadArgs[0]
|
|
1441
|
+
: t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);
|
|
1442
|
+
|
|
1443
|
+
return [
|
|
1444
|
+
filteredAttributes,
|
|
1445
|
+
t__namespace.expressionStatement(
|
|
1446
|
+
t__namespace.callExpression(
|
|
1447
|
+
registerImportMethod(path, "spread", getRendererConfig(path, "dom").moduleName),
|
|
1448
|
+
[elem, props, t__namespace.booleanLiteral(isSVG), t__namespace.booleanLiteral(hasChildren)]
|
|
1449
|
+
)
|
|
1450
|
+
)
|
|
1451
|
+
];
|
|
1452
|
+
}
|
|
1453
|
+
|
|
1336
1454
|
function createTemplate$2(path, result, wrap) {
|
|
1337
1455
|
const config = getConfig(path);
|
|
1338
1456
|
if (result.id) {
|
|
@@ -1952,18 +2070,12 @@ function transformChildren$1(path, results, { hydratable }) {
|
|
|
1952
2070
|
filteredChildren.forEach(node => {
|
|
1953
2071
|
if (t__namespace.isJSXElement(node.node) && getTagName(node.node) === "head") {
|
|
1954
2072
|
const child = transformNode(node, { doNotEscape, hydratable: false });
|
|
1955
|
-
registerImportMethod(path, "
|
|
2073
|
+
registerImportMethod(path, "setHydratable");
|
|
1956
2074
|
results.template.push("");
|
|
1957
2075
|
results.templateValues.push(
|
|
1958
|
-
t__namespace.callExpression(t__namespace.identifier("_$
|
|
1959
|
-
t__namespace.
|
|
1960
|
-
|
|
1961
|
-
"get",
|
|
1962
|
-
t__namespace.identifier("children"),
|
|
1963
|
-
[],
|
|
1964
|
-
t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))])
|
|
1965
|
-
)
|
|
1966
|
-
])
|
|
2076
|
+
t__namespace.callExpression(t__namespace.identifier("_$setHydratable"), [
|
|
2077
|
+
t__namespace.arrowFunctionExpression([], createTemplate$1(path, child)),
|
|
2078
|
+
t__namespace.booleanLiteral(false)
|
|
1967
2079
|
])
|
|
1968
2080
|
);
|
|
1969
2081
|
return;
|
|
@@ -1973,7 +2085,8 @@ function transformChildren$1(path, results, { hydratable }) {
|
|
|
1973
2085
|
appendToTemplate(results.template, child.template);
|
|
1974
2086
|
results.templateValues.push.apply(results.templateValues, child.templateValues || []);
|
|
1975
2087
|
if (child.exprs.length) {
|
|
1976
|
-
if (!doNotEscape && !child.spreadElement)
|
|
2088
|
+
if (!doNotEscape && !child.spreadElement)
|
|
2089
|
+
child.exprs[0] = escapeExpression(path, child.exprs[0]);
|
|
1977
2090
|
|
|
1978
2091
|
// boxed by textNodes
|
|
1979
2092
|
if (markers && !child.spreadElement) {
|
|
@@ -2015,51 +2128,56 @@ function createElement(path, { topLevel, hydratable }) {
|
|
|
2015
2128
|
if (attributes.length === 1) {
|
|
2016
2129
|
transformed = attributes[0].node.argument;
|
|
2017
2130
|
} else {
|
|
2018
|
-
transformed = t__namespace.arrowFunctionExpression(
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2131
|
+
transformed = t__namespace.arrowFunctionExpression(
|
|
2132
|
+
[],
|
|
2133
|
+
t__namespace.objectExpression(
|
|
2134
|
+
attributes.reduce((memo, attribute) => {
|
|
2135
|
+
const node = attribute.node;
|
|
2136
|
+
|
|
2137
|
+
if (t__namespace.isJSXSpreadAttribute(node)) {
|
|
2138
|
+
const expr = node.argument;
|
|
2139
|
+
memo.push(t__namespace.spreadElement(expr));
|
|
2140
|
+
return memo;
|
|
2141
|
+
}
|
|
2142
|
+
let value = node.value,
|
|
2143
|
+
key = t__namespace.isJSXNamespacedName(node.name)
|
|
2144
|
+
? `${node.name.namespace.name}:${node.name.name.name}`
|
|
2145
|
+
: node.name.name,
|
|
2146
|
+
reservedNameSpace =
|
|
2147
|
+
t__namespace.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
|
|
2148
|
+
if (
|
|
2149
|
+
((t__namespace.isJSXNamespacedName(node.name) && reservedNameSpace) || ChildProperties.has(key)) &&
|
|
2150
|
+
!t__namespace.isJSXExpressionContainer(value)
|
|
2151
|
+
) {
|
|
2152
|
+
node.value = value = t__namespace.JSXExpressionContainer(value || t__namespace.JSXEmptyExpression());
|
|
2153
|
+
}
|
|
2039
2154
|
|
|
2040
|
-
if (
|
|
2041
|
-
t__namespace.isJSXExpressionContainer(value) &&
|
|
2042
|
-
(reservedNameSpace ||
|
|
2043
|
-
ChildProperties.has(key) ||
|
|
2044
|
-
!(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
|
|
2045
|
-
) {
|
|
2046
2155
|
if (
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
)
|
|
2052
|
-
|
|
2156
|
+
t__namespace.isJSXExpressionContainer(value) &&
|
|
2157
|
+
(reservedNameSpace ||
|
|
2158
|
+
ChildProperties.has(key) ||
|
|
2159
|
+
!(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression)))
|
|
2160
|
+
) {
|
|
2161
|
+
if (
|
|
2162
|
+
key === "ref" ||
|
|
2163
|
+
key.startsWith("use:") ||
|
|
2164
|
+
key.startsWith("prop:") ||
|
|
2165
|
+
key.startsWith("on")
|
|
2166
|
+
)
|
|
2167
|
+
return memo;
|
|
2053
2168
|
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
|
|
2169
|
+
memo.push(t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression));
|
|
2170
|
+
} else {
|
|
2171
|
+
if (key === "$ServerOnly") return memo;
|
|
2172
|
+
if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
|
|
2173
|
+
memo.push(
|
|
2174
|
+
t__namespace.objectProperty(t__namespace.stringLiteral(key), value ? value : t__namespace.booleanLiteral(true))
|
|
2175
|
+
);
|
|
2176
|
+
}
|
|
2177
|
+
return memo;
|
|
2178
|
+
}, [])
|
|
2179
|
+
)
|
|
2180
|
+
);
|
|
2063
2181
|
}
|
|
2064
2182
|
|
|
2065
2183
|
const exprs = [
|
|
@@ -2115,41 +2233,30 @@ function transformElement$1(path, info) {
|
|
|
2115
2233
|
}
|
|
2116
2234
|
|
|
2117
2235
|
function transformAttributes(path, results) {
|
|
2118
|
-
let children;
|
|
2236
|
+
let children, spreadExpr;
|
|
2237
|
+
let attributes = path.get("openingElement").get("attributes");
|
|
2119
2238
|
const elem = results.id,
|
|
2120
2239
|
hasChildren = path.node.children.length > 0,
|
|
2121
2240
|
config = getConfig(path);
|
|
2122
2241
|
|
|
2242
|
+
// preprocess spreads
|
|
2243
|
+
if (attributes.some(attribute => t__namespace.isJSXSpreadAttribute(attribute.node))) {
|
|
2244
|
+
[attributes, spreadExpr] = processSpreads(path, attributes, {
|
|
2245
|
+
elem,
|
|
2246
|
+
hasChildren,
|
|
2247
|
+
wrapConditionals: config.wrapConditionals
|
|
2248
|
+
});
|
|
2249
|
+
path.get("openingElement").set(
|
|
2250
|
+
"attributes",
|
|
2251
|
+
attributes.map(a => a.node)
|
|
2252
|
+
);
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2123
2255
|
path
|
|
2124
2256
|
.get("openingElement")
|
|
2125
2257
|
.get("attributes")
|
|
2126
2258
|
.forEach(attribute => {
|
|
2127
2259
|
const node = attribute.node;
|
|
2128
|
-
if (t__namespace.isJSXSpreadAttribute(node)) {
|
|
2129
|
-
results.exprs.push(
|
|
2130
|
-
t__namespace.expressionStatement(
|
|
2131
|
-
t__namespace.callExpression(
|
|
2132
|
-
registerImportMethod(
|
|
2133
|
-
attribute,
|
|
2134
|
-
"spread",
|
|
2135
|
-
getRendererConfig(path, "universal").moduleName
|
|
2136
|
-
),
|
|
2137
|
-
[
|
|
2138
|
-
elem,
|
|
2139
|
-
isDynamic(attribute.get("argument"), {
|
|
2140
|
-
checkMember: true
|
|
2141
|
-
})
|
|
2142
|
-
? t__namespace.isCallExpression(node.argument) && !node.argument.arguments.length
|
|
2143
|
-
? node.argument.callee
|
|
2144
|
-
: t__namespace.arrowFunctionExpression([], node.argument)
|
|
2145
|
-
: node.argument,
|
|
2146
|
-
t__namespace.booleanLiteral(hasChildren)
|
|
2147
|
-
]
|
|
2148
|
-
)
|
|
2149
|
-
)
|
|
2150
|
-
);
|
|
2151
|
-
return;
|
|
2152
|
-
}
|
|
2153
2260
|
|
|
2154
2261
|
let value = node.value,
|
|
2155
2262
|
key = t__namespace.isJSXNamespacedName(node.name)
|
|
@@ -2274,6 +2381,7 @@ function transformAttributes(path, results) {
|
|
|
2274
2381
|
results.exprs.push(t__namespace.expressionStatement(setAttr(attribute, elem, key, value)));
|
|
2275
2382
|
}
|
|
2276
2383
|
});
|
|
2384
|
+
if (spreadExpr) results.exprs.push(spreadExpr);
|
|
2277
2385
|
if (!hasChildren && children) {
|
|
2278
2386
|
path.node.children.push(children);
|
|
2279
2387
|
}
|
|
@@ -2367,6 +2475,94 @@ function nextChild(children, index) {
|
|
|
2367
2475
|
return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
|
|
2368
2476
|
}
|
|
2369
2477
|
|
|
2478
|
+
function processSpreads(path, attributes, { elem, hasChildren, wrapConditionals }) {
|
|
2479
|
+
// TODO: skip but collect the names of any properties after the last spread to not overwrite them
|
|
2480
|
+
const filteredAttributes = [];
|
|
2481
|
+
const spreadArgs = [];
|
|
2482
|
+
let runningObject = [];
|
|
2483
|
+
let dynamicSpread = false;
|
|
2484
|
+
let firstSpread = false;
|
|
2485
|
+
attributes.forEach(attribute => {
|
|
2486
|
+
const node = attribute.node;
|
|
2487
|
+
const key =
|
|
2488
|
+
!t__namespace.isJSXSpreadAttribute(node) &&
|
|
2489
|
+
(t__namespace.isJSXNamespacedName(node.name)
|
|
2490
|
+
? `${node.name.namespace.name}:${node.name.name.name}`
|
|
2491
|
+
: node.name.name);
|
|
2492
|
+
if (t__namespace.isJSXSpreadAttribute(node)) {
|
|
2493
|
+
firstSpread = true;
|
|
2494
|
+
if (runningObject.length) {
|
|
2495
|
+
spreadArgs.push(t__namespace.objectExpression(runningObject));
|
|
2496
|
+
runningObject = [];
|
|
2497
|
+
}
|
|
2498
|
+
spreadArgs.push(
|
|
2499
|
+
isDynamic(attribute.get("argument"), {
|
|
2500
|
+
checkMember: true
|
|
2501
|
+
}) && (dynamicSpread = true)
|
|
2502
|
+
? t__namespace.isCallExpression(node.argument) &&
|
|
2503
|
+
!node.argument.arguments.length &&
|
|
2504
|
+
!t__namespace.isCallExpression(node.argument.callee) &&
|
|
2505
|
+
!t__namespace.isMemberExpression(node.argument.callee)
|
|
2506
|
+
? node.argument.callee
|
|
2507
|
+
: t__namespace.arrowFunctionExpression([], node.argument)
|
|
2508
|
+
: node.argument
|
|
2509
|
+
);
|
|
2510
|
+
} else if (
|
|
2511
|
+
(firstSpread ||
|
|
2512
|
+
(t__namespace.isJSXExpressionContainer(node.value) &&
|
|
2513
|
+
isDynamic(attribute.get("value").get("expression"), { checkMember: true }))) &&
|
|
2514
|
+
canNativeSpread(key)
|
|
2515
|
+
) {
|
|
2516
|
+
const isContainer = t__namespace.isJSXExpressionContainer(node.value);
|
|
2517
|
+
const dynamic =
|
|
2518
|
+
isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
|
|
2519
|
+
if (dynamic) {
|
|
2520
|
+
const id = convertJSXIdentifier(node.name);
|
|
2521
|
+
let expr =
|
|
2522
|
+
wrapConditionals &&
|
|
2523
|
+
(t__namespace.isLogicalExpression(node.value.expression) || t__namespace.isConditionalExpression(node.value.expression))
|
|
2524
|
+
? transformCondition(attribute.get("value").get("expression"), true)
|
|
2525
|
+
: t__namespace.arrowFunctionExpression([], node.value.expression);
|
|
2526
|
+
runningObject.push(
|
|
2527
|
+
t__namespace.objectMethod(
|
|
2528
|
+
"get",
|
|
2529
|
+
id,
|
|
2530
|
+
[],
|
|
2531
|
+
t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
|
|
2532
|
+
!t__namespace.isValidIdentifier(key)
|
|
2533
|
+
)
|
|
2534
|
+
);
|
|
2535
|
+
} else {
|
|
2536
|
+
runningObject.push(
|
|
2537
|
+
t__namespace.objectProperty(
|
|
2538
|
+
t__namespace.stringLiteral(key),
|
|
2539
|
+
isContainer ? node.value.expression : node.value || t__namespace.stringLiteral("")
|
|
2540
|
+
)
|
|
2541
|
+
);
|
|
2542
|
+
}
|
|
2543
|
+
} else filteredAttributes.push(attribute);
|
|
2544
|
+
});
|
|
2545
|
+
|
|
2546
|
+
if (runningObject.length) {
|
|
2547
|
+
spreadArgs.push(t__namespace.objectExpression(runningObject));
|
|
2548
|
+
}
|
|
2549
|
+
|
|
2550
|
+
const props =
|
|
2551
|
+
spreadArgs.length === 1 && !dynamicSpread
|
|
2552
|
+
? spreadArgs[0]
|
|
2553
|
+
: t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);
|
|
2554
|
+
|
|
2555
|
+
return [
|
|
2556
|
+
filteredAttributes,
|
|
2557
|
+
t__namespace.expressionStatement(
|
|
2558
|
+
t__namespace.callExpression(
|
|
2559
|
+
registerImportMethod(path, "spread", getRendererConfig(path, "universal").moduleName),
|
|
2560
|
+
[elem, props, t__namespace.booleanLiteral(hasChildren)]
|
|
2561
|
+
)
|
|
2562
|
+
)
|
|
2563
|
+
];
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2370
2566
|
function createTemplate(path, result, wrap) {
|
|
2371
2567
|
const config = getConfig(path);
|
|
2372
2568
|
if (result.id) {
|
|
@@ -2474,25 +2670,6 @@ function convertComponentIdentifier(node) {
|
|
|
2474
2670
|
return node;
|
|
2475
2671
|
}
|
|
2476
2672
|
|
|
2477
|
-
function convertJSXIdentifier(node) {
|
|
2478
|
-
if (t__namespace.isJSXIdentifier(node)) {
|
|
2479
|
-
if (t__namespace.isValidIdentifier(node.name)) {
|
|
2480
|
-
node.type = "Identifier";
|
|
2481
|
-
} else {
|
|
2482
|
-
return t__namespace.stringLiteral(node.name);
|
|
2483
|
-
}
|
|
2484
|
-
} else if (t__namespace.isJSXMemberExpression(node)) {
|
|
2485
|
-
return t__namespace.memberExpression(
|
|
2486
|
-
convertJSXIdentifier(node.object),
|
|
2487
|
-
convertJSXIdentifier(node.property)
|
|
2488
|
-
);
|
|
2489
|
-
} else if (t__namespace.isJSXNamespacedName(node)) {
|
|
2490
|
-
return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
|
|
2491
|
-
}
|
|
2492
|
-
|
|
2493
|
-
return node;
|
|
2494
|
-
}
|
|
2495
|
-
|
|
2496
2673
|
function transformComponent(path) {
|
|
2497
2674
|
let exprs = [],
|
|
2498
2675
|
config = getConfig(path),
|
|
@@ -2613,7 +2790,7 @@ function transformComponent(path) {
|
|
|
2613
2790
|
config.generate !== "ssr" &&
|
|
2614
2791
|
(t__namespace.isLogicalExpression(value.expression) ||
|
|
2615
2792
|
t__namespace.isConditionalExpression(value.expression))
|
|
2616
|
-
? transformCondition(attribute.get("value").get("expression"), true)
|
|
2793
|
+
? transformCondition$1(attribute.get("value").get("expression"), true)
|
|
2617
2794
|
: t__namespace.arrowFunctionExpression([], value.expression);
|
|
2618
2795
|
runningObject.push(
|
|
2619
2796
|
t__namespace.objectMethod(
|
|
@@ -2814,7 +2991,7 @@ function transformNode(path, info = {}) {
|
|
|
2814
2991
|
config.wrapConditionals &&
|
|
2815
2992
|
config.generate !== "ssr" &&
|
|
2816
2993
|
(t__namespace.isLogicalExpression(node.expression) || t__namespace.isConditionalExpression(node.expression))
|
|
2817
|
-
? transformCondition(path.get("expression"), info.componentChild)
|
|
2994
|
+
? transformCondition$1(path.get("expression"), info.componentChild)
|
|
2818
2995
|
: !info.componentChild &&
|
|
2819
2996
|
(config.generate !== "ssr" || info.fragmentChild) &&
|
|
2820
2997
|
t__namespace.isCallExpression(node.expression) &&
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "babel-plugin-jsx-dom-expressions",
|
|
3
3
|
"description": "A JSX to DOM plugin that wraps expressions for fine grained change detection",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.35.0-beta.1",
|
|
5
5
|
"author": "Ryan Carniato",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@babel/core": "^7.0.0"
|
|
29
29
|
},
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "2d62fd655ecdf2462f7c9e10232f4f8aaa4b7fd5"
|
|
31
31
|
}
|