@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.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 extends Injector {
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 extends Injector {
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, forceUpdate = false) {
746
- if (!forceUpdate) {
747
- const { add, remove, replace } = getObjectChanges(newProps, this.props);
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, this.props)) {
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(?=[A-Z])/;
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: 'component',
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 === 'component') {
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
- let nativeNode;
1324
- let applyRefs = null;
1325
- if (type === 'element') {
1326
- const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, jsxNode, atom.isSvg);
1327
- nativeNode = n;
1328
- applyRefs = a;
1329
- }
1330
- else {
1331
- nativeNode = createTextNode(nativeRenderer, jsxNode, atom.isSvg);
1332
- }
1333
- atom.nativeNode = nativeNode;
1334
- insertNode(nativeRenderer, atom, context);
1335
- if (type === 'element') {
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, true);
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 diffIndex = oldAtom.index;
1419
- if (type === oldAtom.type) {
1401
+ const newAtomType = newAtom.type;
1402
+ if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
1420
1403
  let commit;
1421
- if (type === 'text') {
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
- const { key: diffKey, type: diffType } = oldAtom.jsxNode;
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, expectIndex, oldIndex, nativeRenderer, context, parentComponent) {
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 (expectIndex - offset !== oldIndex) {
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
- const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
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, expectIndex, oldIndex, nativeRenderer, context) {
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
- reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
1508
- updateView(nativeRenderer, component);
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, newAtom, reusedAtom, context, moveView) {
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 === 'element') {
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 createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
1552
+ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
1587
1553
  const atom = {
1588
- type: 'component',
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
- prevAtom.sibling = atom;
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 createChainByJSXText(jsxNode, prevAtom, isSvg);
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 createChainByJSXElement(jsxNode, prevAtom, isSvg);
1579
+ return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
1640
1580
  }
1641
1581
  else if (nodeType === 'function') {
1642
- return createChainByJSXComponent(jsxNode, prevAtom, isSvg);
1582
+ return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
1643
1583
  }
1644
1584
  }
1645
- return createChainByJSXText(String(jsxNode), prevAtom, isSvg);
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, vNode, isSvg) {
1674
- const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
1675
- const props = vNode.props;
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
- bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
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
- return {
1709
- nativeNode,
1710
- applyRefs: () => {
1711
- applyRefs(bindingRefs, nativeNode, true);
1712
- }
1713
- };
1714
- }
1715
- function createTextNode(nativeRenderer, text, isSvg) {
1716
- return nativeRenderer.createTextNode(text, isSvg);
1717
- }
1718
- function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
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
- const type = key.replace(listenerReg, '').toLowerCase();
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
- const listenType = key.replace(listenerReg, '').toLowerCase();
1776
- newVNode.on[listenType].listenFn = newValue;
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
- bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
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
- return () => {
1814
- applyRefs(unBindRefs, nativeNode, false);
1815
- applyRefs(bindRefs, nativeNode, true);
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 根组件,用于实现组件状态更新事件通知
@@ -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 Element = JSXInternal.Element;
11
- interface ElementClass extends JSXInternal.ElementClass {
10
+ type ElementType = ViewflyJSX.ElementType;
11
+ interface Element extends ViewflyJSX.Element {
12
12
  }
13
- interface IntrinsicElements extends JSXInternal.IntrinsicElements {
13
+ interface ElementClass extends ViewflyJSX.ElementClass {
14
14
  }
15
- interface IntrinsicAttributes extends JSXInternal.IntrinsicAttributes {
15
+ interface IntrinsicElements extends ViewflyJSX.IntrinsicElements {
16
16
  }
17
- interface ElementChildrenAttribute extends JSXInternal.ElementChildrenAttribute {
17
+ interface IntrinsicAttributes extends ViewflyJSX.IntrinsicAttributes {
18
18
  }
19
- interface IntrinsicClassAttributes<T> extends JSXInternal.IntrinsicClassAttributes<T> {
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-alpha.8",
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/public-api.d.ts",
7
+ "typings": "./bundles/index.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
- "types": "./bundles/public-api.d.ts",
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 && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
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": "95538a571b0d2e8a96dbfdc940959605ea06c252",
53
+ "gitHead": "06e8514f95609d0269246f4852ff6f93b76932c2",
51
54
  "dependencies": {
52
55
  "reflect-metadata": "^0.2.2"
53
56
  }
@@ -0,0 +1,14 @@
1
+ import dts from 'rollup-plugin-dts'
2
+
3
+ export default {
4
+ input: 'src/public-api.ts',
5
+ output: [
6
+ {
7
+ file: './bundles/index.d.ts',
8
+ format: 'es'
9
+ }
10
+ ],
11
+ plugins: [
12
+ dts(),
13
+ ]
14
+ }
@@ -1 +0,0 @@
1
- export declare function makeError(name: string): (message: string) => Error;
@@ -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';
@@ -1,10 +0,0 @@
1
- export declare class ForwardRef<T = any> {
2
- private forwardRefFn;
3
- constructor(forwardRefFn: () => T);
4
- getRef(): T;
5
- }
6
- /**
7
- * 引用后声明的类的工具函数
8
- * @param fn
9
- */
10
- export declare function forwardRef<T>(fn: () => T): ForwardRef<T>;