@viewfly/core 1.0.0-alpha.5 → 1.0.0-alpha.7
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/bundles/foundation/_utils.d.ts +3 -0
- package/bundles/index.esm.js +67 -89
- package/bundles/index.js +67 -89
- package/package.json +3 -3
|
@@ -21,6 +21,7 @@ export declare function classToString(config: unknown): string;
|
|
|
21
21
|
export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
|
|
22
22
|
export interface TextAtom {
|
|
23
23
|
type: 'text';
|
|
24
|
+
index: number;
|
|
24
25
|
jsxNode: string;
|
|
25
26
|
nativeNode: NativeNode | null;
|
|
26
27
|
child: Atom | null;
|
|
@@ -29,6 +30,7 @@ export interface TextAtom {
|
|
|
29
30
|
}
|
|
30
31
|
export interface ElementAtom {
|
|
31
32
|
type: 'element';
|
|
33
|
+
index: number;
|
|
32
34
|
jsxNode: JSXNode<string>;
|
|
33
35
|
nativeNode: NativeNode | null;
|
|
34
36
|
child: Atom | null;
|
|
@@ -37,6 +39,7 @@ export interface ElementAtom {
|
|
|
37
39
|
}
|
|
38
40
|
export interface ComponentAtom {
|
|
39
41
|
type: 'component';
|
|
42
|
+
index: number;
|
|
40
43
|
jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
|
|
41
44
|
nativeNode: NativeNode | null;
|
|
42
45
|
child: Atom | null;
|
package/bundles/index.esm.js
CHANGED
|
@@ -591,13 +591,13 @@ function getArrayChanges(left, right) {
|
|
|
591
591
|
return changes;
|
|
592
592
|
}
|
|
593
593
|
function classToString(config) {
|
|
594
|
-
if (!config) {
|
|
595
|
-
return '';
|
|
596
|
-
}
|
|
597
594
|
if (typeof config === 'string') {
|
|
598
595
|
return config;
|
|
599
596
|
}
|
|
600
|
-
|
|
597
|
+
if (!config) {
|
|
598
|
+
return '';
|
|
599
|
+
}
|
|
600
|
+
if (Array.isArray(config)) {
|
|
601
601
|
const classes = [];
|
|
602
602
|
for (const i of config) {
|
|
603
603
|
const v = classToString(i);
|
|
@@ -607,7 +607,7 @@ function classToString(config) {
|
|
|
607
607
|
}
|
|
608
608
|
return classes.join(' ');
|
|
609
609
|
}
|
|
610
|
-
|
|
610
|
+
if (typeof config === 'object') {
|
|
611
611
|
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
612
612
|
return config.toString();
|
|
613
613
|
}
|
|
@@ -741,30 +741,32 @@ class Component extends ReflectiveInjector {
|
|
|
741
741
|
};
|
|
742
742
|
}
|
|
743
743
|
update(newProps, forceUpdate = false) {
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
744
|
+
if (!forceUpdate) {
|
|
745
|
+
const { add, remove, replace } = getObjectChanges(newProps, this.props);
|
|
746
|
+
if (add.length || remove.length || replace.length) {
|
|
747
|
+
this.invokePropsChangedHooks(newProps);
|
|
748
|
+
}
|
|
749
|
+
else if (!this.dirty) {
|
|
750
|
+
this.props = newProps;
|
|
751
|
+
return this.template;
|
|
752
|
+
}
|
|
753
|
+
const newRefs = toRefs(newProps.ref);
|
|
754
|
+
if (this.refs) {
|
|
755
|
+
for (const oldRef of this.refs) {
|
|
756
|
+
if (!newRefs.includes(oldRef)) {
|
|
757
|
+
oldRef.unBind(this.instance);
|
|
758
|
+
}
|
|
757
759
|
}
|
|
758
760
|
}
|
|
761
|
+
for (const newRef of newRefs) {
|
|
762
|
+
newRef.bind(this.instance);
|
|
763
|
+
}
|
|
764
|
+
if (newRefs.length) {
|
|
765
|
+
this.refs = newRefs;
|
|
766
|
+
}
|
|
759
767
|
}
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
}
|
|
763
|
-
if (newRefs.length) {
|
|
764
|
-
this.refs = newRefs;
|
|
765
|
-
}
|
|
766
|
-
if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
|
|
767
|
-
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
768
|
+
if (typeof this.instance.$useMemo === 'function') {
|
|
769
|
+
if (this.instance.$useMemo(newProps, this.props)) {
|
|
768
770
|
return this.template;
|
|
769
771
|
}
|
|
770
772
|
}
|
|
@@ -1289,6 +1291,7 @@ function createRenderer(component, nativeRenderer) {
|
|
|
1289
1291
|
isInit = false;
|
|
1290
1292
|
const atom = {
|
|
1291
1293
|
type: 'component',
|
|
1294
|
+
index: 0,
|
|
1292
1295
|
jsxNode: component,
|
|
1293
1296
|
sibling: null,
|
|
1294
1297
|
child: null,
|
|
@@ -1367,58 +1370,34 @@ function applyChanges(nativeRenderer, component) {
|
|
|
1367
1370
|
isParent,
|
|
1368
1371
|
rootHost
|
|
1369
1372
|
};
|
|
1370
|
-
diff(nativeRenderer, component, atom.child, diffAtom, context
|
|
1373
|
+
diff(nativeRenderer, component, atom.child, diffAtom, context);
|
|
1371
1374
|
const next = atom.sibling;
|
|
1372
1375
|
if (next && next.jsxNode instanceof Component) {
|
|
1373
1376
|
next.jsxNode.$$view.host = context.host;
|
|
1374
1377
|
next.jsxNode.$$view.isParent = context.isParent;
|
|
1375
1378
|
}
|
|
1376
1379
|
}
|
|
1377
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context
|
|
1378
|
-
let prevDiffAtom = null;
|
|
1379
|
-
let firstDiffAtomIndexed = null;
|
|
1380
|
-
if (oldAtom) {
|
|
1381
|
-
prevDiffAtom = {
|
|
1382
|
-
index,
|
|
1383
|
-
atom: oldAtom,
|
|
1384
|
-
prev: null
|
|
1385
|
-
};
|
|
1386
|
-
index++;
|
|
1387
|
-
firstDiffAtomIndexed = prevDiffAtom;
|
|
1388
|
-
oldAtom = oldAtom.sibling;
|
|
1389
|
-
while (oldAtom) {
|
|
1390
|
-
const diffAtom = {
|
|
1391
|
-
index,
|
|
1392
|
-
atom: oldAtom,
|
|
1393
|
-
prev: prevDiffAtom
|
|
1394
|
-
};
|
|
1395
|
-
prevDiffAtom.next = diffAtom;
|
|
1396
|
-
prevDiffAtom = diffAtom;
|
|
1397
|
-
oldAtom = oldAtom.sibling;
|
|
1398
|
-
index++;
|
|
1399
|
-
}
|
|
1400
|
-
}
|
|
1380
|
+
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
1401
1381
|
const commits = [];
|
|
1402
1382
|
function changeOffset() {
|
|
1403
1383
|
offset++;
|
|
1404
1384
|
}
|
|
1405
1385
|
while (newAtom) {
|
|
1406
|
-
|
|
1386
|
+
oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
|
|
1407
1387
|
newAtom = newAtom.sibling;
|
|
1408
|
-
expectIndex++;
|
|
1409
1388
|
}
|
|
1410
|
-
let dirtyDiffAtom =
|
|
1389
|
+
let dirtyDiffAtom = oldAtom;
|
|
1411
1390
|
while (dirtyDiffAtom) {
|
|
1412
|
-
cleanView(nativeRenderer, dirtyDiffAtom
|
|
1413
|
-
dirtyDiffAtom = dirtyDiffAtom.
|
|
1391
|
+
cleanView(nativeRenderer, dirtyDiffAtom, true);
|
|
1392
|
+
dirtyDiffAtom = dirtyDiffAtom.sibling;
|
|
1414
1393
|
}
|
|
1415
1394
|
let offset = 0;
|
|
1416
1395
|
for (let i = 0; i < commits.length; i++) {
|
|
1417
1396
|
const commit = commits[i];
|
|
1418
|
-
while (
|
|
1419
|
-
if (
|
|
1397
|
+
while (oldAtom) {
|
|
1398
|
+
if (oldAtom.index <= i) {
|
|
1420
1399
|
offset--;
|
|
1421
|
-
|
|
1400
|
+
oldAtom = oldAtom.sibling;
|
|
1422
1401
|
continue;
|
|
1423
1402
|
}
|
|
1424
1403
|
break;
|
|
@@ -1426,47 +1405,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1426
1405
|
commit(offset);
|
|
1427
1406
|
}
|
|
1428
1407
|
}
|
|
1429
|
-
function createChanges(newAtom,
|
|
1430
|
-
const startDiffAtom =
|
|
1408
|
+
function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
|
|
1409
|
+
const startDiffAtom = oldAtom;
|
|
1431
1410
|
const { jsxNode: newJsxNode, type } = newAtom;
|
|
1432
1411
|
const key = newJsxNode.key;
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1412
|
+
let prev = null;
|
|
1413
|
+
while (oldAtom) {
|
|
1414
|
+
const diffIndex = oldAtom.index;
|
|
1415
|
+
if (type === oldAtom.type) {
|
|
1436
1416
|
let commit;
|
|
1437
1417
|
if (type === 'text') {
|
|
1438
|
-
commit = updateText(newAtom,
|
|
1418
|
+
commit = updateText(newAtom, oldAtom, nativeRenderer, context);
|
|
1439
1419
|
}
|
|
1440
1420
|
else {
|
|
1441
|
-
const { key: diffKey, type: diffType } =
|
|
1421
|
+
const { key: diffKey, type: diffType } = oldAtom.jsxNode;
|
|
1442
1422
|
if (diffKey !== key || newJsxNode.type !== diffType) {
|
|
1443
|
-
|
|
1423
|
+
prev = oldAtom;
|
|
1424
|
+
oldAtom = oldAtom.sibling;
|
|
1444
1425
|
continue;
|
|
1445
1426
|
}
|
|
1446
1427
|
if (type === 'component') {
|
|
1447
|
-
commit = updateComponent(newAtom,
|
|
1428
|
+
commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
|
|
1448
1429
|
}
|
|
1449
1430
|
else {
|
|
1450
|
-
commit = updateElement(newAtom,
|
|
1431
|
+
commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
|
|
1451
1432
|
}
|
|
1452
1433
|
}
|
|
1453
1434
|
commits.push(commit);
|
|
1454
|
-
const next =
|
|
1455
|
-
const prev = diffAtomIndexed.prev;
|
|
1435
|
+
const next = oldAtom.sibling;
|
|
1456
1436
|
if (!prev) {
|
|
1457
|
-
|
|
1458
|
-
if (diffAtomIndexed) {
|
|
1459
|
-
diffAtomIndexed.prev = null;
|
|
1460
|
-
}
|
|
1461
|
-
return diffAtomIndexed;
|
|
1462
|
-
}
|
|
1463
|
-
prev.next = next;
|
|
1464
|
-
if (next) {
|
|
1465
|
-
next.prev = prev;
|
|
1437
|
+
return next;
|
|
1466
1438
|
}
|
|
1439
|
+
prev.sibling = next;
|
|
1467
1440
|
return startDiffAtom;
|
|
1468
1441
|
}
|
|
1469
|
-
|
|
1442
|
+
prev = oldAtom;
|
|
1443
|
+
oldAtom = oldAtom.sibling;
|
|
1470
1444
|
}
|
|
1471
1445
|
commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
|
|
1472
1446
|
return startDiffAtom;
|
|
@@ -1502,13 +1476,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
|
|
|
1502
1476
|
host: newAtom.nativeNode,
|
|
1503
1477
|
isParent: true,
|
|
1504
1478
|
rootHost: context.rootHost
|
|
1505
|
-
}
|
|
1479
|
+
});
|
|
1506
1480
|
}
|
|
1507
1481
|
else if (oldAtom.child) {
|
|
1508
1482
|
let atom = oldAtom.child;
|
|
1509
1483
|
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1510
1484
|
while (atom) {
|
|
1511
|
-
cleanView(nativeRenderer, atom,
|
|
1485
|
+
cleanView(nativeRenderer, atom, false);
|
|
1512
1486
|
atom = atom.sibling;
|
|
1513
1487
|
}
|
|
1514
1488
|
}
|
|
@@ -1534,12 +1508,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1534
1508
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1535
1509
|
}
|
|
1536
1510
|
if (newAtom.child) {
|
|
1537
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context
|
|
1511
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1538
1512
|
}
|
|
1539
1513
|
else if (reusedAtom.child) {
|
|
1540
1514
|
let atom = reusedAtom.child;
|
|
1541
1515
|
while (atom) {
|
|
1542
|
-
cleanView(nativeRenderer, atom,
|
|
1516
|
+
cleanView(nativeRenderer, atom, true);
|
|
1543
1517
|
atom = atom.sibling;
|
|
1544
1518
|
}
|
|
1545
1519
|
}
|
|
@@ -1572,9 +1546,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1572
1546
|
}
|
|
1573
1547
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1574
1548
|
if (atom.nativeNode) {
|
|
1575
|
-
if (
|
|
1549
|
+
if (needClean) {
|
|
1576
1550
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1577
|
-
needClean =
|
|
1551
|
+
needClean = false;
|
|
1578
1552
|
}
|
|
1579
1553
|
if (atom.type === 'element') {
|
|
1580
1554
|
const ref = atom.jsxNode.props[refKey];
|
|
@@ -1584,7 +1558,7 @@ function cleanView(nativeRenderer, atom, needClean) {
|
|
|
1584
1558
|
let child = atom.child;
|
|
1585
1559
|
while (child) {
|
|
1586
1560
|
if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
|
|
1587
|
-
needClean =
|
|
1561
|
+
needClean = true;
|
|
1588
1562
|
}
|
|
1589
1563
|
cleanView(nativeRenderer, child, needClean);
|
|
1590
1564
|
child = child.sibling;
|
|
@@ -1608,6 +1582,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1608
1582
|
function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
1609
1583
|
const atom = {
|
|
1610
1584
|
type: 'component',
|
|
1585
|
+
index: prevAtom.index + 1,
|
|
1611
1586
|
jsxNode,
|
|
1612
1587
|
sibling: null,
|
|
1613
1588
|
child: null,
|
|
@@ -1620,6 +1595,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
|
1620
1595
|
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1621
1596
|
const atom = {
|
|
1622
1597
|
type: 'text',
|
|
1598
|
+
index: prevAtom.index + 1,
|
|
1623
1599
|
jsxNode,
|
|
1624
1600
|
sibling: null,
|
|
1625
1601
|
child: null,
|
|
@@ -1633,6 +1609,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1633
1609
|
isSvg = isSvg || element.type === 'svg';
|
|
1634
1610
|
const atom = {
|
|
1635
1611
|
type: 'element',
|
|
1612
|
+
index: prevAtom.index + 1,
|
|
1636
1613
|
jsxNode: element,
|
|
1637
1614
|
sibling: null,
|
|
1638
1615
|
child: null,
|
|
@@ -1641,6 +1618,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1641
1618
|
};
|
|
1642
1619
|
prevAtom.sibling = atom;
|
|
1643
1620
|
atom.child = createChildChain(element.props.children, isSvg);
|
|
1621
|
+
element.props.children = null;
|
|
1644
1622
|
return atom;
|
|
1645
1623
|
}
|
|
1646
1624
|
function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
@@ -1672,7 +1650,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
|
|
|
1672
1650
|
return prevAtom;
|
|
1673
1651
|
}
|
|
1674
1652
|
function createChildChain(template, isSvg) {
|
|
1675
|
-
const beforeAtom = { sibling: null };
|
|
1653
|
+
const beforeAtom = { sibling: null, index: -1 };
|
|
1676
1654
|
createChainByNode(template, beforeAtom, isSvg);
|
|
1677
1655
|
return beforeAtom.sibling;
|
|
1678
1656
|
}
|
package/bundles/index.js
CHANGED
|
@@ -593,13 +593,13 @@ function getArrayChanges(left, right) {
|
|
|
593
593
|
return changes;
|
|
594
594
|
}
|
|
595
595
|
function classToString(config) {
|
|
596
|
-
if (!config) {
|
|
597
|
-
return '';
|
|
598
|
-
}
|
|
599
596
|
if (typeof config === 'string') {
|
|
600
597
|
return config;
|
|
601
598
|
}
|
|
602
|
-
|
|
599
|
+
if (!config) {
|
|
600
|
+
return '';
|
|
601
|
+
}
|
|
602
|
+
if (Array.isArray(config)) {
|
|
603
603
|
const classes = [];
|
|
604
604
|
for (const i of config) {
|
|
605
605
|
const v = classToString(i);
|
|
@@ -609,7 +609,7 @@ function classToString(config) {
|
|
|
609
609
|
}
|
|
610
610
|
return classes.join(' ');
|
|
611
611
|
}
|
|
612
|
-
|
|
612
|
+
if (typeof config === 'object') {
|
|
613
613
|
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
614
614
|
return config.toString();
|
|
615
615
|
}
|
|
@@ -743,30 +743,32 @@ class Component extends ReflectiveInjector {
|
|
|
743
743
|
};
|
|
744
744
|
}
|
|
745
745
|
update(newProps, forceUpdate = false) {
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
746
|
+
if (!forceUpdate) {
|
|
747
|
+
const { add, remove, replace } = getObjectChanges(newProps, this.props);
|
|
748
|
+
if (add.length || remove.length || replace.length) {
|
|
749
|
+
this.invokePropsChangedHooks(newProps);
|
|
750
|
+
}
|
|
751
|
+
else if (!this.dirty) {
|
|
752
|
+
this.props = newProps;
|
|
753
|
+
return this.template;
|
|
754
|
+
}
|
|
755
|
+
const newRefs = toRefs(newProps.ref);
|
|
756
|
+
if (this.refs) {
|
|
757
|
+
for (const oldRef of this.refs) {
|
|
758
|
+
if (!newRefs.includes(oldRef)) {
|
|
759
|
+
oldRef.unBind(this.instance);
|
|
760
|
+
}
|
|
759
761
|
}
|
|
760
762
|
}
|
|
763
|
+
for (const newRef of newRefs) {
|
|
764
|
+
newRef.bind(this.instance);
|
|
765
|
+
}
|
|
766
|
+
if (newRefs.length) {
|
|
767
|
+
this.refs = newRefs;
|
|
768
|
+
}
|
|
761
769
|
}
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
}
|
|
765
|
-
if (newRefs.length) {
|
|
766
|
-
this.refs = newRefs;
|
|
767
|
-
}
|
|
768
|
-
if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
|
|
769
|
-
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
770
|
+
if (typeof this.instance.$useMemo === 'function') {
|
|
771
|
+
if (this.instance.$useMemo(newProps, this.props)) {
|
|
770
772
|
return this.template;
|
|
771
773
|
}
|
|
772
774
|
}
|
|
@@ -1291,6 +1293,7 @@ function createRenderer(component, nativeRenderer) {
|
|
|
1291
1293
|
isInit = false;
|
|
1292
1294
|
const atom = {
|
|
1293
1295
|
type: 'component',
|
|
1296
|
+
index: 0,
|
|
1294
1297
|
jsxNode: component,
|
|
1295
1298
|
sibling: null,
|
|
1296
1299
|
child: null,
|
|
@@ -1369,58 +1372,34 @@ function applyChanges(nativeRenderer, component) {
|
|
|
1369
1372
|
isParent,
|
|
1370
1373
|
rootHost
|
|
1371
1374
|
};
|
|
1372
|
-
diff(nativeRenderer, component, atom.child, diffAtom, context
|
|
1375
|
+
diff(nativeRenderer, component, atom.child, diffAtom, context);
|
|
1373
1376
|
const next = atom.sibling;
|
|
1374
1377
|
if (next && next.jsxNode instanceof Component) {
|
|
1375
1378
|
next.jsxNode.$$view.host = context.host;
|
|
1376
1379
|
next.jsxNode.$$view.isParent = context.isParent;
|
|
1377
1380
|
}
|
|
1378
1381
|
}
|
|
1379
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context
|
|
1380
|
-
let prevDiffAtom = null;
|
|
1381
|
-
let firstDiffAtomIndexed = null;
|
|
1382
|
-
if (oldAtom) {
|
|
1383
|
-
prevDiffAtom = {
|
|
1384
|
-
index,
|
|
1385
|
-
atom: oldAtom,
|
|
1386
|
-
prev: null
|
|
1387
|
-
};
|
|
1388
|
-
index++;
|
|
1389
|
-
firstDiffAtomIndexed = prevDiffAtom;
|
|
1390
|
-
oldAtom = oldAtom.sibling;
|
|
1391
|
-
while (oldAtom) {
|
|
1392
|
-
const diffAtom = {
|
|
1393
|
-
index,
|
|
1394
|
-
atom: oldAtom,
|
|
1395
|
-
prev: prevDiffAtom
|
|
1396
|
-
};
|
|
1397
|
-
prevDiffAtom.next = diffAtom;
|
|
1398
|
-
prevDiffAtom = diffAtom;
|
|
1399
|
-
oldAtom = oldAtom.sibling;
|
|
1400
|
-
index++;
|
|
1401
|
-
}
|
|
1402
|
-
}
|
|
1382
|
+
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
1403
1383
|
const commits = [];
|
|
1404
1384
|
function changeOffset() {
|
|
1405
1385
|
offset++;
|
|
1406
1386
|
}
|
|
1407
1387
|
while (newAtom) {
|
|
1408
|
-
|
|
1388
|
+
oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
|
|
1409
1389
|
newAtom = newAtom.sibling;
|
|
1410
|
-
expectIndex++;
|
|
1411
1390
|
}
|
|
1412
|
-
let dirtyDiffAtom =
|
|
1391
|
+
let dirtyDiffAtom = oldAtom;
|
|
1413
1392
|
while (dirtyDiffAtom) {
|
|
1414
|
-
cleanView(nativeRenderer, dirtyDiffAtom
|
|
1415
|
-
dirtyDiffAtom = dirtyDiffAtom.
|
|
1393
|
+
cleanView(nativeRenderer, dirtyDiffAtom, true);
|
|
1394
|
+
dirtyDiffAtom = dirtyDiffAtom.sibling;
|
|
1416
1395
|
}
|
|
1417
1396
|
let offset = 0;
|
|
1418
1397
|
for (let i = 0; i < commits.length; i++) {
|
|
1419
1398
|
const commit = commits[i];
|
|
1420
|
-
while (
|
|
1421
|
-
if (
|
|
1399
|
+
while (oldAtom) {
|
|
1400
|
+
if (oldAtom.index <= i) {
|
|
1422
1401
|
offset--;
|
|
1423
|
-
|
|
1402
|
+
oldAtom = oldAtom.sibling;
|
|
1424
1403
|
continue;
|
|
1425
1404
|
}
|
|
1426
1405
|
break;
|
|
@@ -1428,47 +1407,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1428
1407
|
commit(offset);
|
|
1429
1408
|
}
|
|
1430
1409
|
}
|
|
1431
|
-
function createChanges(newAtom,
|
|
1432
|
-
const startDiffAtom =
|
|
1410
|
+
function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
|
|
1411
|
+
const startDiffAtom = oldAtom;
|
|
1433
1412
|
const { jsxNode: newJsxNode, type } = newAtom;
|
|
1434
1413
|
const key = newJsxNode.key;
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1414
|
+
let prev = null;
|
|
1415
|
+
while (oldAtom) {
|
|
1416
|
+
const diffIndex = oldAtom.index;
|
|
1417
|
+
if (type === oldAtom.type) {
|
|
1438
1418
|
let commit;
|
|
1439
1419
|
if (type === 'text') {
|
|
1440
|
-
commit = updateText(newAtom,
|
|
1420
|
+
commit = updateText(newAtom, oldAtom, nativeRenderer, context);
|
|
1441
1421
|
}
|
|
1442
1422
|
else {
|
|
1443
|
-
const { key: diffKey, type: diffType } =
|
|
1423
|
+
const { key: diffKey, type: diffType } = oldAtom.jsxNode;
|
|
1444
1424
|
if (diffKey !== key || newJsxNode.type !== diffType) {
|
|
1445
|
-
|
|
1425
|
+
prev = oldAtom;
|
|
1426
|
+
oldAtom = oldAtom.sibling;
|
|
1446
1427
|
continue;
|
|
1447
1428
|
}
|
|
1448
1429
|
if (type === 'component') {
|
|
1449
|
-
commit = updateComponent(newAtom,
|
|
1430
|
+
commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
|
|
1450
1431
|
}
|
|
1451
1432
|
else {
|
|
1452
|
-
commit = updateElement(newAtom,
|
|
1433
|
+
commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
|
|
1453
1434
|
}
|
|
1454
1435
|
}
|
|
1455
1436
|
commits.push(commit);
|
|
1456
|
-
const next =
|
|
1457
|
-
const prev = diffAtomIndexed.prev;
|
|
1437
|
+
const next = oldAtom.sibling;
|
|
1458
1438
|
if (!prev) {
|
|
1459
|
-
|
|
1460
|
-
if (diffAtomIndexed) {
|
|
1461
|
-
diffAtomIndexed.prev = null;
|
|
1462
|
-
}
|
|
1463
|
-
return diffAtomIndexed;
|
|
1464
|
-
}
|
|
1465
|
-
prev.next = next;
|
|
1466
|
-
if (next) {
|
|
1467
|
-
next.prev = prev;
|
|
1439
|
+
return next;
|
|
1468
1440
|
}
|
|
1441
|
+
prev.sibling = next;
|
|
1469
1442
|
return startDiffAtom;
|
|
1470
1443
|
}
|
|
1471
|
-
|
|
1444
|
+
prev = oldAtom;
|
|
1445
|
+
oldAtom = oldAtom.sibling;
|
|
1472
1446
|
}
|
|
1473
1447
|
commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
|
|
1474
1448
|
return startDiffAtom;
|
|
@@ -1504,13 +1478,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
|
|
|
1504
1478
|
host: newAtom.nativeNode,
|
|
1505
1479
|
isParent: true,
|
|
1506
1480
|
rootHost: context.rootHost
|
|
1507
|
-
}
|
|
1481
|
+
});
|
|
1508
1482
|
}
|
|
1509
1483
|
else if (oldAtom.child) {
|
|
1510
1484
|
let atom = oldAtom.child;
|
|
1511
1485
|
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1512
1486
|
while (atom) {
|
|
1513
|
-
cleanView(nativeRenderer, atom,
|
|
1487
|
+
cleanView(nativeRenderer, atom, false);
|
|
1514
1488
|
atom = atom.sibling;
|
|
1515
1489
|
}
|
|
1516
1490
|
}
|
|
@@ -1536,12 +1510,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1536
1510
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1537
1511
|
}
|
|
1538
1512
|
if (newAtom.child) {
|
|
1539
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context
|
|
1513
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1540
1514
|
}
|
|
1541
1515
|
else if (reusedAtom.child) {
|
|
1542
1516
|
let atom = reusedAtom.child;
|
|
1543
1517
|
while (atom) {
|
|
1544
|
-
cleanView(nativeRenderer, atom,
|
|
1518
|
+
cleanView(nativeRenderer, atom, true);
|
|
1545
1519
|
atom = atom.sibling;
|
|
1546
1520
|
}
|
|
1547
1521
|
}
|
|
@@ -1574,9 +1548,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1574
1548
|
}
|
|
1575
1549
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1576
1550
|
if (atom.nativeNode) {
|
|
1577
|
-
if (
|
|
1551
|
+
if (needClean) {
|
|
1578
1552
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1579
|
-
needClean =
|
|
1553
|
+
needClean = false;
|
|
1580
1554
|
}
|
|
1581
1555
|
if (atom.type === 'element') {
|
|
1582
1556
|
const ref = atom.jsxNode.props[refKey];
|
|
@@ -1586,7 +1560,7 @@ function cleanView(nativeRenderer, atom, needClean) {
|
|
|
1586
1560
|
let child = atom.child;
|
|
1587
1561
|
while (child) {
|
|
1588
1562
|
if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
|
|
1589
|
-
needClean =
|
|
1563
|
+
needClean = true;
|
|
1590
1564
|
}
|
|
1591
1565
|
cleanView(nativeRenderer, child, needClean);
|
|
1592
1566
|
child = child.sibling;
|
|
@@ -1610,6 +1584,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1610
1584
|
function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
1611
1585
|
const atom = {
|
|
1612
1586
|
type: 'component',
|
|
1587
|
+
index: prevAtom.index + 1,
|
|
1613
1588
|
jsxNode,
|
|
1614
1589
|
sibling: null,
|
|
1615
1590
|
child: null,
|
|
@@ -1622,6 +1597,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
|
1622
1597
|
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1623
1598
|
const atom = {
|
|
1624
1599
|
type: 'text',
|
|
1600
|
+
index: prevAtom.index + 1,
|
|
1625
1601
|
jsxNode,
|
|
1626
1602
|
sibling: null,
|
|
1627
1603
|
child: null,
|
|
@@ -1635,6 +1611,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1635
1611
|
isSvg = isSvg || element.type === 'svg';
|
|
1636
1612
|
const atom = {
|
|
1637
1613
|
type: 'element',
|
|
1614
|
+
index: prevAtom.index + 1,
|
|
1638
1615
|
jsxNode: element,
|
|
1639
1616
|
sibling: null,
|
|
1640
1617
|
child: null,
|
|
@@ -1643,6 +1620,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1643
1620
|
};
|
|
1644
1621
|
prevAtom.sibling = atom;
|
|
1645
1622
|
atom.child = createChildChain(element.props.children, isSvg);
|
|
1623
|
+
element.props.children = null;
|
|
1646
1624
|
return atom;
|
|
1647
1625
|
}
|
|
1648
1626
|
function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
@@ -1674,7 +1652,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
|
|
|
1674
1652
|
return prevAtom;
|
|
1675
1653
|
}
|
|
1676
1654
|
function createChildChain(template, isSvg) {
|
|
1677
|
-
const beforeAtom = { sibling: null };
|
|
1655
|
+
const beforeAtom = { sibling: null, index: -1 };
|
|
1678
1656
|
createChainByNode(template, beforeAtom, isSvg);
|
|
1679
1657
|
return beforeAtom.sibling;
|
|
1680
1658
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.7",
|
|
4
4
|
"description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"bugs": {
|
|
48
48
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "092e986d74477afb6246001ca58962172f926e73",
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"reflect-metadata": "^0.
|
|
52
|
+
"reflect-metadata": "^0.2.2"
|
|
53
53
|
}
|
|
54
54
|
}
|