@sola-air-ui/compiler 1.6.0 → 1.6.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/package.json +1 -1
- package/src/index.js +48 -48
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1310,7 +1310,7 @@ export function compile(source, options = {}) {
|
|
|
1310
1310
|
if (node.type === 'text') {
|
|
1311
1311
|
const text = escapeTemplateLiteral(node.data);
|
|
1312
1312
|
if (text.trim().length > 0) {
|
|
1313
|
-
const id = `
|
|
1313
|
+
const id = `__t${uid++}`;
|
|
1314
1314
|
domCode += ` const ${id} = document.createTextNode(\`${text}\`);\n`;
|
|
1315
1315
|
domCode += ` ${parentVar}.appendChild(${id});\n`;
|
|
1316
1316
|
}
|
|
@@ -1321,7 +1321,7 @@ export function compile(source, options = {}) {
|
|
|
1321
1321
|
const raw = (node.attribs.expr || '').replace(/"/g, '"');
|
|
1322
1322
|
checkExpression(raw, 'template expression');
|
|
1323
1323
|
const expr = rewrite(raw);
|
|
1324
|
-
const id = `
|
|
1324
|
+
const id = `__e${uid++}`;
|
|
1325
1325
|
domCode += ` const ${id} = document.createTextNode('');\n`;
|
|
1326
1326
|
domCode += ` ${parentVar}.appendChild(${id});\n`;
|
|
1327
1327
|
// Parenthesize expr before `?? ''`: JS forbids mixing ?? with || or && at the
|
|
@@ -1338,7 +1338,7 @@ export function compile(source, options = {}) {
|
|
|
1338
1338
|
// whatever markup they pass — same contract as innerHTML anywhere else.
|
|
1339
1339
|
if (node.name === 'sola-html') {
|
|
1340
1340
|
const expr = rewrite((node.attribs.expr || '').replace(/"/g, '"'));
|
|
1341
|
-
const id = `
|
|
1341
|
+
const id = `__h${uid++}`;
|
|
1342
1342
|
domCode += ` const ${id} = document.createElement('div');\n`;
|
|
1343
1343
|
domCode += ` ${id}.style.display = 'contents';\n`;
|
|
1344
1344
|
domCode += ` ${parentVar}.appendChild(${id});\n`;
|
|
@@ -1348,7 +1348,7 @@ export function compile(source, options = {}) {
|
|
|
1348
1348
|
|
|
1349
1349
|
// Nested custom component
|
|
1350
1350
|
if (importedComponentSet.has(node.name)) {
|
|
1351
|
-
const cid = `
|
|
1351
|
+
const cid = `__comp${uid++}`;
|
|
1352
1352
|
domCode += ` const ${cid}_target = document.createElement('div');\n`;
|
|
1353
1353
|
domCode += ` ${cid}_target.className = 'sola-component-root';\n`;
|
|
1354
1354
|
domCode += ` ${parentVar}.appendChild(${cid}_target);\n`;
|
|
@@ -1435,7 +1435,7 @@ export function compile(source, options = {}) {
|
|
|
1435
1435
|
// scope, and switching or removing the branch destroys it, so nothing built
|
|
1436
1436
|
// for a branch that is no longer on the page keeps running.
|
|
1437
1437
|
if (node.name === 'sola-if') {
|
|
1438
|
-
const cid = `
|
|
1438
|
+
const cid = `__c${uid++}`;
|
|
1439
1439
|
domCode += ` const ${cid}_a = document.createComment('if');\n`;
|
|
1440
1440
|
domCode += ` ${parentVar}.appendChild(${cid}_a);\n`;
|
|
1441
1441
|
domCode += ` let ${cid}_els = [];\n`;
|
|
@@ -1449,10 +1449,10 @@ export function compile(source, options = {}) {
|
|
|
1449
1449
|
if (!branch) return;
|
|
1450
1450
|
domCode += ` ${cid}_ctx = pushContext();\n`;
|
|
1451
1451
|
domCode += ` try {\n`;
|
|
1452
|
-
domCode += ` const
|
|
1453
|
-
branch.children.forEach(child => emitNode(child, '
|
|
1454
|
-
domCode += ` Array.from(
|
|
1455
|
-
domCode += ` ${cid}_a.parentNode.insertBefore(
|
|
1452
|
+
domCode += ` const __f = document.createDocumentFragment();\n`;
|
|
1453
|
+
branch.children.forEach(child => emitNode(child, '__f', locals, inSvg));
|
|
1454
|
+
domCode += ` Array.from(__f.childNodes).forEach(n => ${cid}_els.push(n));\n`;
|
|
1455
|
+
domCode += ` ${cid}_a.parentNode.insertBefore(__f, ${cid}_a.nextSibling);\n`;
|
|
1456
1456
|
domCode += ` } finally { popContext(${cid}_ctx); }\n`;
|
|
1457
1457
|
};
|
|
1458
1458
|
|
|
@@ -1474,7 +1474,7 @@ export function compile(source, options = {}) {
|
|
|
1474
1474
|
// destroyed: the whole list for an unkeyed each, one scope per key for a
|
|
1475
1475
|
// keyed one (so removing an item stops that item's effects and children).
|
|
1476
1476
|
if (node.name === 'sola-each') {
|
|
1477
|
-
const eid = `
|
|
1477
|
+
const eid = `__e${uid++}`;
|
|
1478
1478
|
// Item/index names shadow signals inside the loop body and key expression
|
|
1479
1479
|
const eachLocals = new Set(locals);
|
|
1480
1480
|
eachLocals.add(node.attribs.item);
|
|
@@ -1492,46 +1492,46 @@ export function compile(source, options = {}) {
|
|
|
1492
1492
|
// against an anchor it never advanced — so reordering a keyed list (a
|
|
1493
1493
|
// sort, a drag, a reverse) left the DOM in its original order, silently.
|
|
1494
1494
|
domCode += ` let ${eid}_keyMap = new Map();\n`;
|
|
1495
|
-
domCode += ` onDestroy(() => { for (const
|
|
1495
|
+
domCode += ` onDestroy(() => { for (const __e of ${eid}_keyMap.values()) __flush_destroys(__e.ctx); ${eid}_keyMap.clear(); });\n`;
|
|
1496
1496
|
domCode += ` createEffect(() => {\n`;
|
|
1497
|
-
domCode += ` const
|
|
1498
|
-
domCode += ` const
|
|
1499
|
-
domCode += ` const
|
|
1500
|
-
domCode += ` let
|
|
1501
|
-
domCode += ` for (let
|
|
1502
|
-
domCode += ` const ${node.attribs.item} =
|
|
1503
|
-
if (node.attribs.index) domCode += ` const ${node.attribs.index} =
|
|
1504
|
-
domCode += ` const
|
|
1505
|
-
domCode += `
|
|
1506
|
-
domCode += ` let
|
|
1497
|
+
domCode += ` const __items = ${arrayExpr} || [];\n`;
|
|
1498
|
+
domCode += ` const __parent = ${eid}_a.parentNode;\n`;
|
|
1499
|
+
domCode += ` const __seen = new Set();\n`;
|
|
1500
|
+
domCode += ` let __cursor = ${eid}_a.nextSibling;\n`;
|
|
1501
|
+
domCode += ` for (let __i = 0; __i < __items.length; __i++) {\n`;
|
|
1502
|
+
domCode += ` const ${node.attribs.item} = __items[__i];\n`;
|
|
1503
|
+
if (node.attribs.index) domCode += ` const ${node.attribs.index} = __i;\n`;
|
|
1504
|
+
domCode += ` const __key = String(${keyExpr});\n`;
|
|
1505
|
+
domCode += ` __seen.add(__key);\n`;
|
|
1506
|
+
domCode += ` let __entry = ${eid}_keyMap.get(__key);\n`;
|
|
1507
1507
|
// A row's bindings read the item it was built with. When the list hands
|
|
1508
1508
|
// back a different object for the same key (an immutable update such as
|
|
1509
1509
|
// items.map(i => i.id === id ? { ...i, done: true } : i)), or the index the
|
|
1510
1510
|
// row shows has changed, rebuild that row; rows whose item is the same
|
|
1511
1511
|
// object are kept as they are.
|
|
1512
|
-
domCode += ` if (
|
|
1513
|
-
domCode += ` __flush_destroys(
|
|
1514
|
-
domCode += ` const
|
|
1515
|
-
domCode += ` if (
|
|
1516
|
-
domCode += `
|
|
1517
|
-
domCode += `
|
|
1512
|
+
domCode += ` if (__entry && (__entry.item !== ${node.attribs.item}${node.attribs.index ? ` || __entry.index !== __i` : ''})) {\n`;
|
|
1513
|
+
domCode += ` __flush_destroys(__entry.ctx);\n`;
|
|
1514
|
+
domCode += ` const __old = __entry.nodes;\n`;
|
|
1515
|
+
domCode += ` if (__old.includes(__cursor)) __cursor = __old[__old.length - 1].nextSibling;\n`;
|
|
1516
|
+
domCode += ` __old.forEach(n => n.remove());\n`;
|
|
1517
|
+
domCode += ` __entry = null;\n`;
|
|
1518
1518
|
domCode += ` }\n`;
|
|
1519
|
-
domCode += ` if (!
|
|
1520
|
-
domCode += ` const
|
|
1519
|
+
domCode += ` if (!__entry) {\n`;
|
|
1520
|
+
domCode += ` const __kctx = pushContext();\n`;
|
|
1521
1521
|
domCode += ` try {\n`;
|
|
1522
|
-
domCode += ` const
|
|
1523
|
-
node.children.forEach(child => emitNode(child, '
|
|
1524
|
-
domCode += `
|
|
1525
|
-
domCode += ` } finally { popContext(
|
|
1526
|
-
domCode += ` ${eid}_keyMap.set(
|
|
1522
|
+
domCode += ` const __f = document.createDocumentFragment();\n`;
|
|
1523
|
+
node.children.forEach(child => emitNode(child, '__f', eachLocals, inSvg));
|
|
1524
|
+
domCode += ` __entry = { nodes: Array.from(__f.childNodes), ctx: __kctx, item: ${node.attribs.item}${node.attribs.index ? ', index: __i' : ''} };\n`;
|
|
1525
|
+
domCode += ` } finally { popContext(__kctx); }\n`;
|
|
1526
|
+
domCode += ` ${eid}_keyMap.set(__key, __entry);\n`;
|
|
1527
1527
|
domCode += ` }\n`;
|
|
1528
|
-
domCode += ` for (const
|
|
1529
|
-
domCode += ` if (
|
|
1530
|
-
domCode += ` else {
|
|
1528
|
+
domCode += ` for (const __n of __entry.nodes) {\n`;
|
|
1529
|
+
domCode += ` if (__n === __cursor) { __cursor = __cursor.nextSibling; }\n`;
|
|
1530
|
+
domCode += ` else { __parent.insertBefore(__n, __cursor); }\n`;
|
|
1531
1531
|
domCode += ` }\n`;
|
|
1532
1532
|
domCode += ` }\n`;
|
|
1533
|
-
domCode += ` for (const [
|
|
1534
|
-
domCode += ` if (!
|
|
1533
|
+
domCode += ` for (const [__k, __stale] of ${eid}_keyMap) {\n`;
|
|
1534
|
+
domCode += ` if (!__seen.has(__k)) { __flush_destroys(__stale.ctx); __stale.nodes.forEach(n => n.remove()); ${eid}_keyMap.delete(__k); }\n`;
|
|
1535
1535
|
domCode += ` }\n`;
|
|
1536
1536
|
domCode += ` });\n`;
|
|
1537
1537
|
} else {
|
|
@@ -1542,17 +1542,17 @@ export function compile(source, options = {}) {
|
|
|
1542
1542
|
domCode += ` createEffect(() => {\n`;
|
|
1543
1543
|
domCode += ` if (${eid}_ctx) { __flush_destroys(${eid}_ctx); ${eid}_ctx = null; }\n`;
|
|
1544
1544
|
domCode += ` ${eid}_els.forEach(e => e.remove()); ${eid}_els = [];\n`;
|
|
1545
|
-
domCode += ` const
|
|
1545
|
+
domCode += ` const __items = ${arrayExpr} || [];\n`;
|
|
1546
1546
|
domCode += ` ${eid}_ctx = pushContext();\n`;
|
|
1547
1547
|
domCode += ` try {\n`;
|
|
1548
|
-
domCode += ` const
|
|
1549
|
-
domCode += ` for (let
|
|
1550
|
-
domCode += ` const ${node.attribs.item} =
|
|
1551
|
-
if (node.attribs.index) domCode += ` const ${node.attribs.index} =
|
|
1552
|
-
node.children.forEach(child => emitNode(child, '
|
|
1548
|
+
domCode += ` const __f = document.createDocumentFragment();\n`;
|
|
1549
|
+
domCode += ` for (let __i = 0; __i < __items.length; __i++) {\n`;
|
|
1550
|
+
domCode += ` const ${node.attribs.item} = __items[__i];\n`;
|
|
1551
|
+
if (node.attribs.index) domCode += ` const ${node.attribs.index} = __i;\n`;
|
|
1552
|
+
node.children.forEach(child => emitNode(child, '__f', eachLocals, inSvg));
|
|
1553
1553
|
domCode += ` }\n`;
|
|
1554
|
-
domCode += ` Array.from(
|
|
1555
|
-
domCode += ` ${eid}_a.parentNode.insertBefore(
|
|
1554
|
+
domCode += ` Array.from(__f.childNodes).forEach(n => ${eid}_els.push(n));\n`;
|
|
1555
|
+
domCode += ` ${eid}_a.parentNode.insertBefore(__f, ${eid}_a.nextSibling);\n`;
|
|
1556
1556
|
domCode += ` } finally { popContext(${eid}_ctx); }\n`;
|
|
1557
1557
|
domCode += ` });\n`;
|
|
1558
1558
|
}
|
|
@@ -1562,7 +1562,7 @@ export function compile(source, options = {}) {
|
|
|
1562
1562
|
// Normal element
|
|
1563
1563
|
const isSvg = inSvg || node.name === 'svg';
|
|
1564
1564
|
const childSvg = isSvg && node.name !== 'foreignObject';
|
|
1565
|
-
const id = `
|
|
1565
|
+
const id = `__n${uid++}`;
|
|
1566
1566
|
if (isSvg) {
|
|
1567
1567
|
domCode += ` const ${id} = document.createElementNS('http://www.w3.org/2000/svg', '${node.name}');\n`;
|
|
1568
1568
|
} else {
|