@viewfly/core 1.0.0-alpha.8 → 1.0.0
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/index.d.ts +593 -0
- package/bundles/index.esm.js +141 -176
- package/bundles/index.js +141 -176
- package/jsx-runtime/index.d.ts +9 -7
- package/package.json +8 -5
- package/rollup-d.config.ts +14 -0
- package/bundles/_utils/make-error.d.ts +0 -1
- package/bundles/di/_api.d.ts +0 -10
- package/bundles/di/forward-ref.d.ts +0 -10
- package/bundles/di/injectable.d.ts +0 -20
- package/bundles/di/injection-token.d.ts +0 -8
- package/bundles/di/injector.d.ts +0 -26
- package/bundles/di/metadata.d.ts +0 -43
- package/bundles/di/null-injector.d.ts +0 -6
- package/bundles/di/provider.d.ts +0 -30
- package/bundles/di/reflective-injector.d.ts +0 -31
- package/bundles/di/reflective-provider.d.ts +0 -20
- package/bundles/di/type.d.ts +0 -7
- package/bundles/di/utils/_api.d.ts +0 -3
- package/bundles/di/utils/annotations.d.ts +0 -33
- package/bundles/di/utils/decorators.d.ts +0 -17
- package/bundles/di/utils/stringify.d.ts +0 -1
- package/bundles/foundation/_api.d.ts +0 -8
- package/bundles/foundation/_utils.d.ts +0 -55
- package/bundles/foundation/component.d.ts +0 -243
- package/bundles/foundation/injection-tokens.d.ts +0 -18
- package/bundles/foundation/jsx-element.d.ts +0 -17
- package/bundles/foundation/memo.d.ts +0 -2
- package/bundles/foundation/renderer.d.ts +0 -3
- package/bundles/foundation/root.component.d.ts +0 -10
- package/bundles/foundation/types.d.ts +0 -43
- package/bundles/public-api.d.ts +0 -5
- package/bundles/viewfly.d.ts +0 -29
package/bundles/index.js
CHANGED
|
@@ -236,9 +236,8 @@ const THROW_IF_NOT_FOUND = {
|
|
|
236
236
|
const nullInjectorErrorFn = (token) => {
|
|
237
237
|
return makeError('NullInjector')(`No provide for \`${stringify(token)}\`!`);
|
|
238
238
|
};
|
|
239
|
-
class NullInjector
|
|
239
|
+
class NullInjector {
|
|
240
240
|
constructor() {
|
|
241
|
-
super(...arguments);
|
|
242
241
|
this.parentInjector = null;
|
|
243
242
|
}
|
|
244
243
|
/* eslint-disable-next-line */
|
|
@@ -413,11 +412,9 @@ const provideScopeError = (token) => {
|
|
|
413
412
|
/**
|
|
414
413
|
* 反射注入器
|
|
415
414
|
*/
|
|
416
|
-
class ReflectiveInjector
|
|
415
|
+
class ReflectiveInjector {
|
|
417
416
|
constructor(parentInjector, staticProviders, scope) {
|
|
418
|
-
super();
|
|
419
417
|
this.parentInjector = parentInjector;
|
|
420
|
-
this.staticProviders = staticProviders;
|
|
421
418
|
this.scope = scope;
|
|
422
419
|
this.recordValues = new Map();
|
|
423
420
|
this.normalizedProviders = staticProviders.map(provide => {
|
|
@@ -636,6 +633,9 @@ function styleToObject(style) {
|
|
|
636
633
|
});
|
|
637
634
|
return obj;
|
|
638
635
|
}
|
|
636
|
+
const TextAtomType = Symbol('Text');
|
|
637
|
+
const ElementAtomType = Symbol('Element');
|
|
638
|
+
const ComponentAtomType = Symbol('Component');
|
|
639
639
|
|
|
640
640
|
const componentSetupStack = [];
|
|
641
641
|
const signalDepsStack = [];
|
|
@@ -742,16 +742,13 @@ class Component extends ReflectiveInjector {
|
|
|
742
742
|
portalHost: this.instance.$portalHost
|
|
743
743
|
};
|
|
744
744
|
}
|
|
745
|
-
update(newProps
|
|
746
|
-
|
|
747
|
-
|
|
745
|
+
update(newProps) {
|
|
746
|
+
const oldProps = this.props;
|
|
747
|
+
if (newProps !== oldProps) {
|
|
748
|
+
const { add, remove, replace } = getObjectChanges(newProps, oldProps);
|
|
748
749
|
if (add.length || remove.length || replace.length) {
|
|
749
750
|
this.invokePropsChangedHooks(newProps);
|
|
750
751
|
}
|
|
751
|
-
else if (!this.dirty) {
|
|
752
|
-
this.props = newProps;
|
|
753
|
-
return this.template;
|
|
754
|
-
}
|
|
755
752
|
const newRefs = toRefs(newProps.ref);
|
|
756
753
|
if (this.refs) {
|
|
757
754
|
for (const oldRef of this.refs) {
|
|
@@ -768,7 +765,7 @@ class Component extends ReflectiveInjector {
|
|
|
768
765
|
}
|
|
769
766
|
}
|
|
770
767
|
if (typeof this.instance.$useMemo === 'function') {
|
|
771
|
-
if (this.instance.$useMemo(newProps,
|
|
768
|
+
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
772
769
|
return this.template;
|
|
773
770
|
}
|
|
774
771
|
}
|
|
@@ -1286,15 +1283,16 @@ function withMemo(canUseMemo, render) {
|
|
|
1286
1283
|
}
|
|
1287
1284
|
|
|
1288
1285
|
const componentViewCache = new WeakMap();
|
|
1289
|
-
const listenerReg = /^on
|
|
1286
|
+
const listenerReg = /^on[A-Z]/;
|
|
1290
1287
|
function createRenderer(component, nativeRenderer) {
|
|
1291
1288
|
let isInit = true;
|
|
1292
1289
|
return function render(host) {
|
|
1293
1290
|
if (isInit) {
|
|
1294
1291
|
isInit = false;
|
|
1295
1292
|
const atom = {
|
|
1296
|
-
type:
|
|
1293
|
+
type: ComponentAtomType,
|
|
1297
1294
|
index: 0,
|
|
1295
|
+
nodeType: component.type,
|
|
1298
1296
|
jsxNode: component,
|
|
1299
1297
|
sibling: null,
|
|
1300
1298
|
child: null,
|
|
@@ -1314,41 +1312,28 @@ function createRenderer(component, nativeRenderer) {
|
|
|
1314
1312
|
}
|
|
1315
1313
|
function buildView(nativeRenderer, parentComponent, atom, context) {
|
|
1316
1314
|
const { jsxNode, type } = atom;
|
|
1317
|
-
if (type ===
|
|
1315
|
+
if (type === ComponentAtomType) {
|
|
1318
1316
|
const component = new Component(parentComponent, jsxNode.type, jsxNode.props, jsxNode.key);
|
|
1319
1317
|
atom.jsxNode = component;
|
|
1320
1318
|
componentRender(nativeRenderer, component, atom, context);
|
|
1321
1319
|
}
|
|
1320
|
+
else if (type === ElementAtomType) {
|
|
1321
|
+
createElement(nativeRenderer, atom, parentComponent, context);
|
|
1322
|
+
}
|
|
1322
1323
|
else {
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
const childContext = {
|
|
1337
|
-
isParent: true,
|
|
1338
|
-
host: nativeNode,
|
|
1339
|
-
rootHost: context.rootHost
|
|
1340
|
-
};
|
|
1341
|
-
let child = atom.child;
|
|
1342
|
-
while (child) {
|
|
1343
|
-
buildView(nativeRenderer, parentComponent, child, childContext);
|
|
1344
|
-
child = child.sibling;
|
|
1345
|
-
}
|
|
1346
|
-
}
|
|
1347
|
-
context.host = nativeNode;
|
|
1348
|
-
context.isParent = false;
|
|
1349
|
-
if (applyRefs) {
|
|
1350
|
-
applyRefs();
|
|
1351
|
-
}
|
|
1324
|
+
createTextNode(nativeRenderer, atom, context);
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
|
|
1328
|
+
const childContext = {
|
|
1329
|
+
isParent: true,
|
|
1330
|
+
host: atom.nativeNode,
|
|
1331
|
+
rootHost: context.rootHost
|
|
1332
|
+
};
|
|
1333
|
+
let child = atom.child;
|
|
1334
|
+
while (child) {
|
|
1335
|
+
buildView(nativeRenderer, parentComponent, child, childContext);
|
|
1336
|
+
child = child.sibling;
|
|
1352
1337
|
}
|
|
1353
1338
|
}
|
|
1354
1339
|
function updateView(nativeRenderer, component) {
|
|
@@ -1366,14 +1351,14 @@ function updateView(nativeRenderer, component) {
|
|
|
1366
1351
|
function applyChanges(nativeRenderer, component) {
|
|
1367
1352
|
const { atom, host, isParent, rootHost } = componentViewCache.get(component);
|
|
1368
1353
|
const diffAtom = atom.child;
|
|
1369
|
-
const template = component.update(component.props
|
|
1354
|
+
const template = component.update(component.props);
|
|
1370
1355
|
atom.child = createChildChain(template, atom.isSvg);
|
|
1371
1356
|
const context = {
|
|
1372
1357
|
host,
|
|
1373
1358
|
isParent,
|
|
1374
1359
|
rootHost
|
|
1375
1360
|
};
|
|
1376
|
-
diff(nativeRenderer, component, atom.child, diffAtom, context);
|
|
1361
|
+
diff(nativeRenderer, component, atom.child, diffAtom, context, false);
|
|
1377
1362
|
const next = atom.sibling;
|
|
1378
1363
|
if (next && next.jsxNode instanceof Component) {
|
|
1379
1364
|
const view = componentViewCache.get(next.jsxNode);
|
|
@@ -1381,7 +1366,7 @@ function applyChanges(nativeRenderer, component) {
|
|
|
1381
1366
|
view.isParent = context.isParent;
|
|
1382
1367
|
}
|
|
1383
1368
|
}
|
|
1384
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
1369
|
+
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
|
|
1385
1370
|
const commits = [];
|
|
1386
1371
|
function changeOffset() {
|
|
1387
1372
|
offset++;
|
|
@@ -1406,34 +1391,24 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
|
1406
1391
|
}
|
|
1407
1392
|
break;
|
|
1408
1393
|
}
|
|
1409
|
-
commit(offset);
|
|
1394
|
+
commit(offset, needMove);
|
|
1410
1395
|
}
|
|
1411
1396
|
}
|
|
1412
1397
|
function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
|
|
1413
1398
|
const startDiffAtom = oldAtom;
|
|
1414
|
-
const { jsxNode: newJsxNode, type } = newAtom;
|
|
1415
|
-
const key = newJsxNode.key;
|
|
1416
1399
|
let prev = null;
|
|
1417
1400
|
while (oldAtom) {
|
|
1418
|
-
const
|
|
1419
|
-
if (type === oldAtom.
|
|
1401
|
+
const newAtomType = newAtom.type;
|
|
1402
|
+
if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
|
|
1420
1403
|
let commit;
|
|
1421
|
-
if (
|
|
1404
|
+
if (newAtomType === TextAtomType) {
|
|
1422
1405
|
commit = updateText(newAtom, oldAtom, nativeRenderer, context);
|
|
1423
1406
|
}
|
|
1407
|
+
else if (newAtomType === ComponentAtomType) {
|
|
1408
|
+
commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
|
|
1409
|
+
}
|
|
1424
1410
|
else {
|
|
1425
|
-
|
|
1426
|
-
if (diffKey !== key || newJsxNode.type !== diffType) {
|
|
1427
|
-
prev = oldAtom;
|
|
1428
|
-
oldAtom = oldAtom.sibling;
|
|
1429
|
-
continue;
|
|
1430
|
-
}
|
|
1431
|
-
if (type === 'component') {
|
|
1432
|
-
commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
|
|
1433
|
-
}
|
|
1434
|
-
else {
|
|
1435
|
-
commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
|
|
1436
|
-
}
|
|
1411
|
+
commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
|
|
1437
1412
|
}
|
|
1438
1413
|
commits.push(commit);
|
|
1439
1414
|
const next = oldAtom.sibling;
|
|
@@ -1456,45 +1431,29 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
|
|
|
1456
1431
|
};
|
|
1457
1432
|
}
|
|
1458
1433
|
function updateText(newAtom, oldAtom, nativeRenderer, context) {
|
|
1459
|
-
return function () {
|
|
1434
|
+
return function (offset, needMove) {
|
|
1460
1435
|
const nativeNode = oldAtom.nativeNode;
|
|
1461
|
-
if (newAtom.jsxNode !== oldAtom.jsxNode) {
|
|
1462
|
-
nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
|
|
1463
|
-
}
|
|
1464
1436
|
newAtom.nativeNode = nativeNode;
|
|
1437
|
+
if (needMove || newAtom.index - offset !== oldAtom.index) {
|
|
1438
|
+
insertNode(nativeRenderer, newAtom, context);
|
|
1439
|
+
}
|
|
1465
1440
|
context.host = nativeNode;
|
|
1466
1441
|
context.isParent = false;
|
|
1467
1442
|
};
|
|
1468
1443
|
}
|
|
1469
|
-
function updateElement(newAtom, oldAtom,
|
|
1470
|
-
return function (offset) {
|
|
1444
|
+
function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
|
|
1445
|
+
return function (offset, needMove) {
|
|
1471
1446
|
newAtom.nativeNode = oldAtom.nativeNode;
|
|
1472
|
-
if (
|
|
1447
|
+
if (needMove || newAtom.index - offset !== oldAtom.index) {
|
|
1473
1448
|
insertNode(nativeRenderer, newAtom, context);
|
|
1474
1449
|
}
|
|
1475
1450
|
context.host = newAtom.nativeNode;
|
|
1476
1451
|
context.isParent = false;
|
|
1477
|
-
|
|
1478
|
-
if (newAtom.child) {
|
|
1479
|
-
diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
|
|
1480
|
-
host: newAtom.nativeNode,
|
|
1481
|
-
isParent: true,
|
|
1482
|
-
rootHost: context.rootHost
|
|
1483
|
-
});
|
|
1484
|
-
}
|
|
1485
|
-
else if (oldAtom.child) {
|
|
1486
|
-
let atom = oldAtom.child;
|
|
1487
|
-
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1488
|
-
while (atom) {
|
|
1489
|
-
cleanView(nativeRenderer, atom, false);
|
|
1490
|
-
atom = atom.sibling;
|
|
1491
|
-
}
|
|
1492
|
-
}
|
|
1493
|
-
applyRefs();
|
|
1452
|
+
updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
|
|
1494
1453
|
};
|
|
1495
1454
|
}
|
|
1496
|
-
function updateComponent(newAtom, reusedAtom,
|
|
1497
|
-
return function (offset) {
|
|
1455
|
+
function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
|
|
1456
|
+
return function (offset, needMove) {
|
|
1498
1457
|
const component = reusedAtom.jsxNode;
|
|
1499
1458
|
const newProps = newAtom.jsxNode.props;
|
|
1500
1459
|
const oldTemplate = component.template;
|
|
@@ -1504,15 +1463,16 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1504
1463
|
componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
|
|
1505
1464
|
newAtom.jsxNode = component;
|
|
1506
1465
|
if (newTemplate === oldTemplate) {
|
|
1507
|
-
|
|
1508
|
-
|
|
1466
|
+
newAtom.child = reusedAtom.child;
|
|
1467
|
+
reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
|
|
1468
|
+
component.rendered();
|
|
1509
1469
|
return;
|
|
1510
1470
|
}
|
|
1511
1471
|
if (newTemplate) {
|
|
1512
1472
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1513
1473
|
}
|
|
1514
1474
|
if (newAtom.child) {
|
|
1515
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1475
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
|
|
1516
1476
|
}
|
|
1517
1477
|
else if (reusedAtom.child) {
|
|
1518
1478
|
let atom = reusedAtom.child;
|
|
@@ -1524,9 +1484,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1524
1484
|
component.rendered();
|
|
1525
1485
|
};
|
|
1526
1486
|
}
|
|
1527
|
-
function reuseComponentView(nativeRenderer,
|
|
1528
|
-
let child = reusedAtom.child;
|
|
1529
|
-
newAtom.child = child;
|
|
1487
|
+
function reuseComponentView(nativeRenderer, child, context, moveView) {
|
|
1530
1488
|
const updateContext = (atom) => {
|
|
1531
1489
|
if (atom.jsxNode instanceof Component) {
|
|
1532
1490
|
let child = atom.child;
|
|
@@ -1548,13 +1506,21 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1548
1506
|
child = child.sibling;
|
|
1549
1507
|
}
|
|
1550
1508
|
}
|
|
1509
|
+
function cleanElementChildren(atom, nativeRenderer) {
|
|
1510
|
+
let child = atom.child;
|
|
1511
|
+
nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
|
|
1512
|
+
while (child) {
|
|
1513
|
+
cleanView(nativeRenderer, child, false);
|
|
1514
|
+
child = child.sibling;
|
|
1515
|
+
}
|
|
1516
|
+
}
|
|
1551
1517
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1552
1518
|
if (atom.nativeNode) {
|
|
1553
1519
|
if (needClean) {
|
|
1554
1520
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1555
1521
|
needClean = false;
|
|
1556
1522
|
}
|
|
1557
|
-
if (atom.type ===
|
|
1523
|
+
if (atom.type === ElementAtomType) {
|
|
1558
1524
|
const ref = atom.jsxNode.props[refKey];
|
|
1559
1525
|
applyRefs(ref, atom.nativeNode, false);
|
|
1560
1526
|
}
|
|
@@ -1583,52 +1549,26 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1583
1549
|
}
|
|
1584
1550
|
component.rendered();
|
|
1585
1551
|
}
|
|
1586
|
-
function
|
|
1552
|
+
function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
|
|
1587
1553
|
const atom = {
|
|
1588
|
-
type
|
|
1554
|
+
type,
|
|
1589
1555
|
index: prevAtom.index + 1,
|
|
1590
1556
|
jsxNode,
|
|
1591
1557
|
sibling: null,
|
|
1592
1558
|
child: null,
|
|
1593
1559
|
nativeNode: null,
|
|
1594
|
-
isSvg
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
return atom;
|
|
1598
|
-
}
|
|
1599
|
-
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1600
|
-
const atom = {
|
|
1601
|
-
type: 'text',
|
|
1602
|
-
index: prevAtom.index + 1,
|
|
1603
|
-
jsxNode,
|
|
1604
|
-
sibling: null,
|
|
1605
|
-
child: null,
|
|
1606
|
-
nativeNode: null,
|
|
1607
|
-
isSvg
|
|
1608
|
-
};
|
|
1609
|
-
prevAtom.sibling = atom;
|
|
1610
|
-
return atom;
|
|
1611
|
-
}
|
|
1612
|
-
function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
1613
|
-
isSvg = isSvg || element.type === 'svg';
|
|
1614
|
-
const atom = {
|
|
1615
|
-
type: 'element',
|
|
1616
|
-
index: prevAtom.index + 1,
|
|
1617
|
-
jsxNode: element,
|
|
1618
|
-
sibling: null,
|
|
1619
|
-
child: null,
|
|
1620
|
-
nativeNode: null,
|
|
1621
|
-
isSvg
|
|
1560
|
+
isSvg,
|
|
1561
|
+
nodeType,
|
|
1562
|
+
key
|
|
1622
1563
|
};
|
|
1623
1564
|
prevAtom.sibling = atom;
|
|
1624
|
-
atom.child = createChildChain(element.props.children, isSvg);
|
|
1625
1565
|
return atom;
|
|
1626
1566
|
}
|
|
1627
1567
|
function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
1628
1568
|
const type = typeof jsxNode;
|
|
1629
1569
|
if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
|
|
1630
1570
|
if (typeof jsxNode === 'string') {
|
|
1631
|
-
return
|
|
1571
|
+
return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
|
|
1632
1572
|
}
|
|
1633
1573
|
if (Array.isArray(jsxNode)) {
|
|
1634
1574
|
return createChainByChildren(jsxNode, prevAtom, isSvg);
|
|
@@ -1636,13 +1576,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
|
1636
1576
|
if (type === 'object') {
|
|
1637
1577
|
const nodeType = typeof jsxNode.type;
|
|
1638
1578
|
if (nodeType === 'string') {
|
|
1639
|
-
return
|
|
1579
|
+
return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
|
|
1640
1580
|
}
|
|
1641
1581
|
else if (nodeType === 'function') {
|
|
1642
|
-
return
|
|
1582
|
+
return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
|
|
1643
1583
|
}
|
|
1644
1584
|
}
|
|
1645
|
-
|
|
1585
|
+
const text = String(jsxNode);
|
|
1586
|
+
return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
|
|
1646
1587
|
}
|
|
1647
1588
|
return prevAtom;
|
|
1648
1589
|
}
|
|
@@ -1670,12 +1611,14 @@ function insertNode(nativeRenderer, atom, context) {
|
|
|
1670
1611
|
nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
|
|
1671
1612
|
}
|
|
1672
1613
|
}
|
|
1673
|
-
function createElement(nativeRenderer,
|
|
1674
|
-
const
|
|
1675
|
-
const
|
|
1614
|
+
function createElement(nativeRenderer, atom, parentComponent, context) {
|
|
1615
|
+
const { isSvg, jsxNode } = atom;
|
|
1616
|
+
const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
|
|
1617
|
+
const props = jsxNode.props;
|
|
1676
1618
|
let bindingRefs;
|
|
1677
1619
|
for (const key in props) {
|
|
1678
1620
|
if (key === 'children') {
|
|
1621
|
+
atom.child = createChildChain(jsxNode.props.children, isSvg);
|
|
1679
1622
|
continue;
|
|
1680
1623
|
}
|
|
1681
1624
|
if (key === 'class') {
|
|
@@ -1695,7 +1638,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
|
|
|
1695
1638
|
if (listenerReg.test(key)) {
|
|
1696
1639
|
const listener = props[key];
|
|
1697
1640
|
if (typeof listener === 'function') {
|
|
1698
|
-
|
|
1641
|
+
nativeRenderer.listen(nativeNode, key, listener, isSvg);
|
|
1699
1642
|
}
|
|
1700
1643
|
continue;
|
|
1701
1644
|
}
|
|
@@ -1705,21 +1648,32 @@ function createElement(nativeRenderer, vNode, isSvg) {
|
|
|
1705
1648
|
}
|
|
1706
1649
|
nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
|
|
1707
1650
|
}
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
}
|
|
1715
|
-
function createTextNode(nativeRenderer,
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1651
|
+
atom.nativeNode = nativeNode;
|
|
1652
|
+
insertNode(nativeRenderer, atom, context);
|
|
1653
|
+
buildElementChildren(atom, nativeRenderer, parentComponent, context);
|
|
1654
|
+
context.host = nativeNode;
|
|
1655
|
+
context.isParent = false;
|
|
1656
|
+
applyRefs(bindingRefs, nativeNode, true);
|
|
1657
|
+
}
|
|
1658
|
+
function createTextNode(nativeRenderer, atom, context) {
|
|
1659
|
+
const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
|
|
1660
|
+
atom.nativeNode = nativeNode;
|
|
1661
|
+
insertNode(nativeRenderer, atom, context);
|
|
1662
|
+
context.host = nativeNode;
|
|
1663
|
+
context.isParent = false;
|
|
1664
|
+
}
|
|
1665
|
+
function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
|
|
1666
|
+
const newVNode = newAtom.jsxNode;
|
|
1667
|
+
const isSvg = newAtom.isSvg;
|
|
1668
|
+
const nativeNode = newAtom.nativeNode;
|
|
1669
|
+
const oldVNode = oldAtom.jsxNode;
|
|
1670
|
+
if (newVNode === oldVNode) {
|
|
1671
|
+
updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
|
|
1672
|
+
return;
|
|
1673
|
+
}
|
|
1719
1674
|
const changes = getObjectChanges(newVNode.props, oldVNode.props);
|
|
1720
1675
|
let unBindRefs;
|
|
1721
1676
|
let bindRefs;
|
|
1722
|
-
newVNode.on = oldVNode.on;
|
|
1723
1677
|
for (const [key, value] of changes.remove) {
|
|
1724
1678
|
if (key === 'children') {
|
|
1725
1679
|
continue;
|
|
@@ -1736,10 +1690,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1736
1690
|
}
|
|
1737
1691
|
if (listenerReg.test(key)) {
|
|
1738
1692
|
if (typeof value === 'function') {
|
|
1739
|
-
|
|
1740
|
-
const oldOn = oldVNode.on;
|
|
1741
|
-
nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
|
|
1742
|
-
Reflect.deleteProperty(oldOn, type);
|
|
1693
|
+
nativeRenderer.unListen(nativeNode, key, value, isSvg);
|
|
1743
1694
|
}
|
|
1744
1695
|
continue;
|
|
1745
1696
|
}
|
|
@@ -1772,8 +1723,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1772
1723
|
continue;
|
|
1773
1724
|
}
|
|
1774
1725
|
if (listenerReg.test(key)) {
|
|
1775
|
-
|
|
1776
|
-
|
|
1726
|
+
nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
|
|
1727
|
+
nativeRenderer.listen(nativeNode, key, newValue, isSvg);
|
|
1777
1728
|
continue;
|
|
1778
1729
|
}
|
|
1779
1730
|
if (key === refKey) {
|
|
@@ -1800,7 +1751,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1800
1751
|
}
|
|
1801
1752
|
if (listenerReg.test(key)) {
|
|
1802
1753
|
if (typeof value === 'function') {
|
|
1803
|
-
|
|
1754
|
+
nativeRenderer.listen(nativeNode, key, value, isSvg);
|
|
1804
1755
|
}
|
|
1805
1756
|
continue;
|
|
1806
1757
|
}
|
|
@@ -1810,10 +1761,39 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1810
1761
|
}
|
|
1811
1762
|
nativeRenderer.setProperty(nativeNode, key, value, isSvg);
|
|
1812
1763
|
}
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1764
|
+
updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
|
|
1765
|
+
applyRefs(unBindRefs, nativeNode, false);
|
|
1766
|
+
applyRefs(bindRefs, nativeNode, true);
|
|
1767
|
+
}
|
|
1768
|
+
function updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg) {
|
|
1769
|
+
/**
|
|
1770
|
+
* 不能仅依赖 children 是否相等的判断来确定是否要继续向下 diff
|
|
1771
|
+
* 如:
|
|
1772
|
+
* ```tsx
|
|
1773
|
+
* <Comp>
|
|
1774
|
+
* <div>
|
|
1775
|
+
* {props.children}
|
|
1776
|
+
* </div>
|
|
1777
|
+
* </Comp>
|
|
1778
|
+
* ```
|
|
1779
|
+
* 其中当 Comp 产生变化时,children 来自父组件,这时 children 是相等的,
|
|
1780
|
+
* 但,children 内可能有子组件也发生了变化,如果不继续 diff,那么,子组件
|
|
1781
|
+
* 的视图更新将不会发生
|
|
1782
|
+
*/
|
|
1783
|
+
newAtom.child = createChildChain(newAtom.jsxNode.props.children, isSvg);
|
|
1784
|
+
if (!newAtom.child) {
|
|
1785
|
+
// 防止删除用户手动添加的元素
|
|
1786
|
+
if (oldAtom.child) {
|
|
1787
|
+
cleanElementChildren(oldAtom, nativeRenderer);
|
|
1788
|
+
}
|
|
1789
|
+
}
|
|
1790
|
+
else {
|
|
1791
|
+
diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
|
|
1792
|
+
host: newAtom.nativeNode,
|
|
1793
|
+
isParent: true,
|
|
1794
|
+
rootHost: context.rootHost
|
|
1795
|
+
}, false);
|
|
1796
|
+
}
|
|
1817
1797
|
}
|
|
1818
1798
|
function applyRefs(refs, nativeNode, binding) {
|
|
1819
1799
|
if (refs) {
|
|
@@ -1825,21 +1805,6 @@ function applyRefs(refs, nativeNode, binding) {
|
|
|
1825
1805
|
}
|
|
1826
1806
|
}
|
|
1827
1807
|
}
|
|
1828
|
-
function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
|
|
1829
|
-
let on = vNode.on;
|
|
1830
|
-
if (!on) {
|
|
1831
|
-
vNode.on = on = {};
|
|
1832
|
-
}
|
|
1833
|
-
const type = key.replace(listenerReg, '').toLowerCase();
|
|
1834
|
-
const delegateObj = {
|
|
1835
|
-
delegate(...args) {
|
|
1836
|
-
return delegateObj.listenFn.apply(this, args);
|
|
1837
|
-
},
|
|
1838
|
-
listenFn
|
|
1839
|
-
};
|
|
1840
|
-
on[type] = delegateObj;
|
|
1841
|
-
nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
|
|
1842
|
-
}
|
|
1843
1808
|
|
|
1844
1809
|
/**
|
|
1845
1810
|
* Viewfly 根组件,用于实现组件状态更新事件通知
|
package/jsx-runtime/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from '@viewfly/core';
|
|
1
|
+
import { jsx, jsxs, Fragment, JSX as ViewflyJSX } from '@viewfly/core';
|
|
2
2
|
/**
|
|
3
3
|
* JSX namespace for usage with @jsxImportsSource directive
|
|
4
4
|
* when ts compilerOptions.jsx is 'react-jsx'
|
|
@@ -7,15 +7,17 @@ import { jsx, jsxs, Fragment } from '@viewfly/core';
|
|
|
7
7
|
declare const jsxDEV: typeof jsx;
|
|
8
8
|
export { jsx, jsxs, Fragment, jsxDEV };
|
|
9
9
|
export declare namespace JSX {
|
|
10
|
-
type
|
|
11
|
-
interface
|
|
10
|
+
type ElementType = ViewflyJSX.ElementType;
|
|
11
|
+
interface Element extends ViewflyJSX.Element {
|
|
12
12
|
}
|
|
13
|
-
interface
|
|
13
|
+
interface ElementClass extends ViewflyJSX.ElementClass {
|
|
14
14
|
}
|
|
15
|
-
interface
|
|
15
|
+
interface IntrinsicElements extends ViewflyJSX.IntrinsicElements {
|
|
16
16
|
}
|
|
17
|
-
interface
|
|
17
|
+
interface IntrinsicAttributes extends ViewflyJSX.IntrinsicAttributes {
|
|
18
18
|
}
|
|
19
|
-
interface
|
|
19
|
+
interface ElementChildrenAttribute extends ViewflyJSX.ElementChildrenAttribute {
|
|
20
|
+
}
|
|
21
|
+
interface IntrinsicClassAttributes<T> extends ViewflyJSX.IntrinsicClassAttributes<T> {
|
|
20
22
|
}
|
|
21
23
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
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",
|
|
7
|
-
"typings": "./bundles/
|
|
7
|
+
"typings": "./bundles/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"types": "./bundles/
|
|
10
|
+
"types": "./bundles/index.d.ts",
|
|
11
11
|
"import": "./bundles/index.esm.js",
|
|
12
12
|
"require": "./bundles/index.js"
|
|
13
13
|
},
|
|
@@ -23,7 +23,9 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"scripts": {
|
|
26
|
-
"build:lib": "rimraf bundles &&
|
|
26
|
+
"build:lib": "rimraf bundles && npm run build && npm run build-d",
|
|
27
|
+
"build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
|
|
28
|
+
"build-d": "rollup --config rollup-d.config.ts --configPlugin @rollup/plugin-typescript",
|
|
27
29
|
"publish:lib": "npm run build:lib && npm publish --access=public"
|
|
28
30
|
},
|
|
29
31
|
"license": "MIT",
|
|
@@ -34,6 +36,7 @@
|
|
|
34
36
|
"@rollup/plugin-typescript": "^11.1.2",
|
|
35
37
|
"rimraf": "^3.0.2",
|
|
36
38
|
"rollup": "^3.26.3",
|
|
39
|
+
"rollup-plugin-dts": "^6.1.1",
|
|
37
40
|
"tslib": "^2.6.0"
|
|
38
41
|
},
|
|
39
42
|
"author": {
|
|
@@ -47,7 +50,7 @@
|
|
|
47
50
|
"bugs": {
|
|
48
51
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
49
52
|
},
|
|
50
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "06e8514f95609d0269246f4852ff6f93b76932c2",
|
|
51
54
|
"dependencies": {
|
|
52
55
|
"reflect-metadata": "^0.2.2"
|
|
53
56
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function makeError(name: string): (message: string) => Error;
|
package/bundles/di/_api.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from './forward-ref';
|
|
2
|
-
export * from './injectable';
|
|
3
|
-
export * from './injection-token';
|
|
4
|
-
export * from './injector';
|
|
5
|
-
export * from './metadata';
|
|
6
|
-
export * from './null-injector';
|
|
7
|
-
export * from './provider';
|
|
8
|
-
export * from './reflective-injector';
|
|
9
|
-
export * from './reflective-provider';
|
|
10
|
-
export * from './type';
|