@viewfly/core 1.0.0-alpha.9 → 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 -180
- package/bundles/index.js +141 -180
- 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,49 +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
|
-
newAtom.child = oldAtom.child;
|
|
1479
|
-
return;
|
|
1480
|
-
}
|
|
1481
|
-
const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
|
|
1482
|
-
if (newAtom.child) {
|
|
1483
|
-
diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
|
|
1484
|
-
host: newAtom.nativeNode,
|
|
1485
|
-
isParent: true,
|
|
1486
|
-
rootHost: context.rootHost
|
|
1487
|
-
});
|
|
1488
|
-
}
|
|
1489
|
-
else if (oldAtom.child) {
|
|
1490
|
-
let atom = oldAtom.child;
|
|
1491
|
-
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1492
|
-
while (atom) {
|
|
1493
|
-
cleanView(nativeRenderer, atom, false);
|
|
1494
|
-
atom = atom.sibling;
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
applyRefs();
|
|
1452
|
+
updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
|
|
1498
1453
|
};
|
|
1499
1454
|
}
|
|
1500
|
-
function updateComponent(newAtom, reusedAtom,
|
|
1501
|
-
return function (offset) {
|
|
1455
|
+
function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
|
|
1456
|
+
return function (offset, needMove) {
|
|
1502
1457
|
const component = reusedAtom.jsxNode;
|
|
1503
1458
|
const newProps = newAtom.jsxNode.props;
|
|
1504
1459
|
const oldTemplate = component.template;
|
|
@@ -1508,15 +1463,16 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1508
1463
|
componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
|
|
1509
1464
|
newAtom.jsxNode = component;
|
|
1510
1465
|
if (newTemplate === oldTemplate) {
|
|
1511
|
-
|
|
1512
|
-
|
|
1466
|
+
newAtom.child = reusedAtom.child;
|
|
1467
|
+
reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
|
|
1468
|
+
component.rendered();
|
|
1513
1469
|
return;
|
|
1514
1470
|
}
|
|
1515
1471
|
if (newTemplate) {
|
|
1516
1472
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1517
1473
|
}
|
|
1518
1474
|
if (newAtom.child) {
|
|
1519
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1475
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
|
|
1520
1476
|
}
|
|
1521
1477
|
else if (reusedAtom.child) {
|
|
1522
1478
|
let atom = reusedAtom.child;
|
|
@@ -1528,9 +1484,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1528
1484
|
component.rendered();
|
|
1529
1485
|
};
|
|
1530
1486
|
}
|
|
1531
|
-
function reuseComponentView(nativeRenderer,
|
|
1532
|
-
let child = reusedAtom.child;
|
|
1533
|
-
newAtom.child = child;
|
|
1487
|
+
function reuseComponentView(nativeRenderer, child, context, moveView) {
|
|
1534
1488
|
const updateContext = (atom) => {
|
|
1535
1489
|
if (atom.jsxNode instanceof Component) {
|
|
1536
1490
|
let child = atom.child;
|
|
@@ -1552,13 +1506,21 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1552
1506
|
child = child.sibling;
|
|
1553
1507
|
}
|
|
1554
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
|
+
}
|
|
1555
1517
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1556
1518
|
if (atom.nativeNode) {
|
|
1557
1519
|
if (needClean) {
|
|
1558
1520
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1559
1521
|
needClean = false;
|
|
1560
1522
|
}
|
|
1561
|
-
if (atom.type ===
|
|
1523
|
+
if (atom.type === ElementAtomType) {
|
|
1562
1524
|
const ref = atom.jsxNode.props[refKey];
|
|
1563
1525
|
applyRefs(ref, atom.nativeNode, false);
|
|
1564
1526
|
}
|
|
@@ -1587,52 +1549,26 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1587
1549
|
}
|
|
1588
1550
|
component.rendered();
|
|
1589
1551
|
}
|
|
1590
|
-
function
|
|
1591
|
-
const atom = {
|
|
1592
|
-
type: 'component',
|
|
1593
|
-
index: prevAtom.index + 1,
|
|
1594
|
-
jsxNode,
|
|
1595
|
-
sibling: null,
|
|
1596
|
-
child: null,
|
|
1597
|
-
nativeNode: null,
|
|
1598
|
-
isSvg
|
|
1599
|
-
};
|
|
1600
|
-
prevAtom.sibling = atom;
|
|
1601
|
-
return atom;
|
|
1602
|
-
}
|
|
1603
|
-
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1552
|
+
function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
|
|
1604
1553
|
const atom = {
|
|
1605
|
-
type
|
|
1554
|
+
type,
|
|
1606
1555
|
index: prevAtom.index + 1,
|
|
1607
1556
|
jsxNode,
|
|
1608
1557
|
sibling: null,
|
|
1609
1558
|
child: null,
|
|
1610
1559
|
nativeNode: null,
|
|
1611
|
-
isSvg
|
|
1560
|
+
isSvg,
|
|
1561
|
+
nodeType,
|
|
1562
|
+
key
|
|
1612
1563
|
};
|
|
1613
1564
|
prevAtom.sibling = atom;
|
|
1614
1565
|
return atom;
|
|
1615
1566
|
}
|
|
1616
|
-
function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
1617
|
-
isSvg = isSvg || element.type === 'svg';
|
|
1618
|
-
const atom = {
|
|
1619
|
-
type: 'element',
|
|
1620
|
-
index: prevAtom.index + 1,
|
|
1621
|
-
jsxNode: element,
|
|
1622
|
-
sibling: null,
|
|
1623
|
-
child: null,
|
|
1624
|
-
nativeNode: null,
|
|
1625
|
-
isSvg
|
|
1626
|
-
};
|
|
1627
|
-
prevAtom.sibling = atom;
|
|
1628
|
-
atom.child = createChildChain(element.props.children, isSvg);
|
|
1629
|
-
return atom;
|
|
1630
|
-
}
|
|
1631
1567
|
function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
1632
1568
|
const type = typeof jsxNode;
|
|
1633
1569
|
if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
|
|
1634
1570
|
if (typeof jsxNode === 'string') {
|
|
1635
|
-
return
|
|
1571
|
+
return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
|
|
1636
1572
|
}
|
|
1637
1573
|
if (Array.isArray(jsxNode)) {
|
|
1638
1574
|
return createChainByChildren(jsxNode, prevAtom, isSvg);
|
|
@@ -1640,13 +1576,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
|
|
|
1640
1576
|
if (type === 'object') {
|
|
1641
1577
|
const nodeType = typeof jsxNode.type;
|
|
1642
1578
|
if (nodeType === 'string') {
|
|
1643
|
-
return
|
|
1579
|
+
return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
|
|
1644
1580
|
}
|
|
1645
1581
|
else if (nodeType === 'function') {
|
|
1646
|
-
return
|
|
1582
|
+
return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
|
|
1647
1583
|
}
|
|
1648
1584
|
}
|
|
1649
|
-
|
|
1585
|
+
const text = String(jsxNode);
|
|
1586
|
+
return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
|
|
1650
1587
|
}
|
|
1651
1588
|
return prevAtom;
|
|
1652
1589
|
}
|
|
@@ -1674,12 +1611,14 @@ function insertNode(nativeRenderer, atom, context) {
|
|
|
1674
1611
|
nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
|
|
1675
1612
|
}
|
|
1676
1613
|
}
|
|
1677
|
-
function createElement(nativeRenderer,
|
|
1678
|
-
const
|
|
1679
|
-
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;
|
|
1680
1618
|
let bindingRefs;
|
|
1681
1619
|
for (const key in props) {
|
|
1682
1620
|
if (key === 'children') {
|
|
1621
|
+
atom.child = createChildChain(jsxNode.props.children, isSvg);
|
|
1683
1622
|
continue;
|
|
1684
1623
|
}
|
|
1685
1624
|
if (key === 'class') {
|
|
@@ -1699,7 +1638,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
|
|
|
1699
1638
|
if (listenerReg.test(key)) {
|
|
1700
1639
|
const listener = props[key];
|
|
1701
1640
|
if (typeof listener === 'function') {
|
|
1702
|
-
|
|
1641
|
+
nativeRenderer.listen(nativeNode, key, listener, isSvg);
|
|
1703
1642
|
}
|
|
1704
1643
|
continue;
|
|
1705
1644
|
}
|
|
@@ -1709,21 +1648,32 @@ function createElement(nativeRenderer, vNode, isSvg) {
|
|
|
1709
1648
|
}
|
|
1710
1649
|
nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
|
|
1711
1650
|
}
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
}
|
|
1719
|
-
function createTextNode(nativeRenderer,
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
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
|
+
}
|
|
1723
1674
|
const changes = getObjectChanges(newVNode.props, oldVNode.props);
|
|
1724
1675
|
let unBindRefs;
|
|
1725
1676
|
let bindRefs;
|
|
1726
|
-
newVNode.on = oldVNode.on;
|
|
1727
1677
|
for (const [key, value] of changes.remove) {
|
|
1728
1678
|
if (key === 'children') {
|
|
1729
1679
|
continue;
|
|
@@ -1740,10 +1690,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1740
1690
|
}
|
|
1741
1691
|
if (listenerReg.test(key)) {
|
|
1742
1692
|
if (typeof value === 'function') {
|
|
1743
|
-
|
|
1744
|
-
const oldOn = oldVNode.on;
|
|
1745
|
-
nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
|
|
1746
|
-
Reflect.deleteProperty(oldOn, type);
|
|
1693
|
+
nativeRenderer.unListen(nativeNode, key, value, isSvg);
|
|
1747
1694
|
}
|
|
1748
1695
|
continue;
|
|
1749
1696
|
}
|
|
@@ -1776,8 +1723,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1776
1723
|
continue;
|
|
1777
1724
|
}
|
|
1778
1725
|
if (listenerReg.test(key)) {
|
|
1779
|
-
|
|
1780
|
-
|
|
1726
|
+
nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
|
|
1727
|
+
nativeRenderer.listen(nativeNode, key, newValue, isSvg);
|
|
1781
1728
|
continue;
|
|
1782
1729
|
}
|
|
1783
1730
|
if (key === refKey) {
|
|
@@ -1804,7 +1751,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1804
1751
|
}
|
|
1805
1752
|
if (listenerReg.test(key)) {
|
|
1806
1753
|
if (typeof value === 'function') {
|
|
1807
|
-
|
|
1754
|
+
nativeRenderer.listen(nativeNode, key, value, isSvg);
|
|
1808
1755
|
}
|
|
1809
1756
|
continue;
|
|
1810
1757
|
}
|
|
@@ -1814,10 +1761,39 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
|
|
|
1814
1761
|
}
|
|
1815
1762
|
nativeRenderer.setProperty(nativeNode, key, value, isSvg);
|
|
1816
1763
|
}
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
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
|
+
}
|
|
1821
1797
|
}
|
|
1822
1798
|
function applyRefs(refs, nativeNode, binding) {
|
|
1823
1799
|
if (refs) {
|
|
@@ -1829,21 +1805,6 @@ function applyRefs(refs, nativeNode, binding) {
|
|
|
1829
1805
|
}
|
|
1830
1806
|
}
|
|
1831
1807
|
}
|
|
1832
|
-
function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
|
|
1833
|
-
let on = vNode.on;
|
|
1834
|
-
if (!on) {
|
|
1835
|
-
vNode.on = on = {};
|
|
1836
|
-
}
|
|
1837
|
-
const type = key.replace(listenerReg, '').toLowerCase();
|
|
1838
|
-
const delegateObj = {
|
|
1839
|
-
delegate(...args) {
|
|
1840
|
-
return delegateObj.listenFn.apply(this, args);
|
|
1841
|
-
},
|
|
1842
|
-
listenFn
|
|
1843
|
-
};
|
|
1844
|
-
on[type] = delegateObj;
|
|
1845
|
-
nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
|
|
1846
|
-
}
|
|
1847
1808
|
|
|
1848
1809
|
/**
|
|
1849
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';
|