@viewfly/core 0.2.0 → 0.2.2
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.
|
@@ -11,20 +11,20 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof<J
|
|
|
11
11
|
props: Props;
|
|
12
12
|
key?: Key | undefined;
|
|
13
13
|
$$typeOf: JSXInternal.ComponentSetup<any>;
|
|
14
|
-
unmountedCallbacks: LifeCycleCallback[];
|
|
15
|
-
mountCallbacks: LifeCycleCallback[];
|
|
16
|
-
propsChangedCallbacks: PropsChangedCallback<any>[];
|
|
17
|
-
updatedCallbacks: LifeCycleCallback[];
|
|
18
14
|
instance: JSXInternal.ComponentInstance<Props>;
|
|
19
15
|
template: JSXInternal.JSXNode;
|
|
20
16
|
changedSubComponents: Set<Component>;
|
|
21
17
|
get dirty(): boolean;
|
|
22
18
|
get changed(): boolean;
|
|
23
19
|
$$view: ComponentView;
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
unmountedCallbacks: LifeCycleCallback[];
|
|
21
|
+
mountCallbacks: LifeCycleCallback[];
|
|
22
|
+
propsChangedCallbacks: PropsChangedCallback<any>[];
|
|
23
|
+
updatedCallbacks: LifeCycleCallback[];
|
|
26
24
|
private updatedDestroyCallbacks;
|
|
27
25
|
private propsChangedDestroyCallbacks;
|
|
26
|
+
protected _dirty: boolean;
|
|
27
|
+
protected _changed: boolean;
|
|
28
28
|
private unWatch?;
|
|
29
29
|
private isFirstRending;
|
|
30
30
|
private refs;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { NativeNode, NativeRenderer } from './injection-tokens';
|
|
2
2
|
import { Component } from './component';
|
|
3
|
-
export declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;
|
|
3
|
+
export declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, version: string): (host: NativeNode) => void;
|
package/bundles/index.esm.js
CHANGED
|
@@ -129,6 +129,7 @@ const Injectable = function InjectableDecorator(options) {
|
|
|
129
129
|
/**
|
|
130
130
|
* 生成自定义依赖注入 token 的类
|
|
131
131
|
*/
|
|
132
|
+
/* eslint-disable-next-line */
|
|
132
133
|
class InjectionToken {
|
|
133
134
|
constructor(description) {
|
|
134
135
|
this.description = description;
|
|
@@ -391,8 +392,8 @@ function normalizeDeps(provide, deps) {
|
|
|
391
392
|
}
|
|
392
393
|
}
|
|
393
394
|
if (typeof r.injectKey === 'undefined') {
|
|
394
|
-
|
|
395
|
-
if the dependency is declared later, you can refer to it using \`constructor(@Inject(forwardRef(() => [Type|InjectionToken])) paramName: [Type]) {}\``);
|
|
395
|
+
/* eslint-disable max-len */
|
|
396
|
+
throw new Error(`The ${index} th dependent parameter type of \`${stringify(provide)}\` was not obtained, if the dependency is declared later, you can refer to it using \`constructor(@Inject(forwardRef(() => [Type|InjectionToken])) paramName: [Type]) {}\``);
|
|
396
397
|
}
|
|
397
398
|
return r;
|
|
398
399
|
});
|
|
@@ -442,7 +443,7 @@ class ReflectiveInjector extends Injector {
|
|
|
442
443
|
for (let i = 0; i < this.normalizedProviders.length; i++) {
|
|
443
444
|
const normalizedProvider = this.normalizedProviders[i];
|
|
444
445
|
if (normalizedProvider.provide === token) {
|
|
445
|
-
return this.getValue(token,
|
|
446
|
+
return this.getValue(token, normalizedProvider);
|
|
446
447
|
}
|
|
447
448
|
}
|
|
448
449
|
if (!(token instanceof InjectionToken)) {
|
|
@@ -451,13 +452,13 @@ class ReflectiveInjector extends Injector {
|
|
|
451
452
|
const normalizedProvider = normalizeProvider(token);
|
|
452
453
|
if (this.scope === scope) {
|
|
453
454
|
this.normalizedProviders.push(normalizedProvider);
|
|
454
|
-
return this.getValue(token,
|
|
455
|
+
return this.getValue(token, normalizedProvider);
|
|
455
456
|
}
|
|
456
457
|
const parentInjector = this.parentInjector;
|
|
457
458
|
if (!parentInjector || parentInjector instanceof NullInjector) {
|
|
458
459
|
if (normalizedProvider.scope === 'root') {
|
|
459
460
|
this.normalizedProviders.push(normalizedProvider);
|
|
460
|
-
return this.getValue(token,
|
|
461
|
+
return this.getValue(token, normalizedProvider);
|
|
461
462
|
}
|
|
462
463
|
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
463
464
|
return notFoundValue;
|
|
@@ -480,9 +481,9 @@ class ReflectiveInjector extends Injector {
|
|
|
480
481
|
}
|
|
481
482
|
return notFoundValue;
|
|
482
483
|
}
|
|
483
|
-
getValue(token,
|
|
484
|
+
getValue(token, normalizedProvider) {
|
|
484
485
|
const { generateFactory, deps } = normalizedProvider;
|
|
485
|
-
const params = this.resolveDeps(deps
|
|
486
|
+
const params = this.resolveDeps(deps);
|
|
486
487
|
let value = this.recordValues.get(token);
|
|
487
488
|
if (value) {
|
|
488
489
|
return value;
|
|
@@ -497,10 +498,9 @@ class ReflectiveInjector extends Injector {
|
|
|
497
498
|
/**
|
|
498
499
|
* 解决并获取依赖参数
|
|
499
500
|
* @param deps 依赖规则
|
|
500
|
-
* @param notFoundValue 未查找到时的返回值
|
|
501
501
|
* @private
|
|
502
502
|
*/
|
|
503
|
-
resolveDeps(deps
|
|
503
|
+
resolveDeps(deps) {
|
|
504
504
|
return deps.map(dep => {
|
|
505
505
|
let reflectiveValue;
|
|
506
506
|
const tryValue = {};
|
|
@@ -663,15 +663,15 @@ class Component extends ReflectiveInjector {
|
|
|
663
663
|
this.props = props;
|
|
664
664
|
this.key = key;
|
|
665
665
|
this.$$typeOf = this.type;
|
|
666
|
+
this.changedSubComponents = new Set();
|
|
666
667
|
this.unmountedCallbacks = [];
|
|
667
668
|
this.mountCallbacks = [];
|
|
668
669
|
this.propsChangedCallbacks = [];
|
|
669
670
|
this.updatedCallbacks = [];
|
|
670
|
-
this.changedSubComponents = new Set();
|
|
671
|
-
this._dirty = true;
|
|
672
|
-
this._changed = true;
|
|
673
671
|
this.updatedDestroyCallbacks = [];
|
|
674
672
|
this.propsChangedDestroyCallbacks = [];
|
|
673
|
+
this._dirty = true;
|
|
674
|
+
this._changed = true;
|
|
675
675
|
this.isFirstRending = true;
|
|
676
676
|
}
|
|
677
677
|
markAsDirtied() {
|
|
@@ -724,7 +724,7 @@ class Component extends ReflectiveInjector {
|
|
|
724
724
|
isSetup = false;
|
|
725
725
|
componentSetupStack.pop();
|
|
726
726
|
signalDepsStack.push([]);
|
|
727
|
-
|
|
727
|
+
const template = this.instance.$render();
|
|
728
728
|
const deps = signalDepsStack.pop();
|
|
729
729
|
this.unWatch = useEffect(Array.from(new Set(deps)), () => {
|
|
730
730
|
this.markAsDirtied();
|
|
@@ -797,9 +797,10 @@ class Component extends ReflectiveInjector {
|
|
|
797
797
|
for (const fn of this.unmountedCallbacks) {
|
|
798
798
|
fn();
|
|
799
799
|
}
|
|
800
|
-
this.updatedCallbacks = [];
|
|
801
800
|
this.mountCallbacks = [];
|
|
802
801
|
this.updatedCallbacks = [];
|
|
802
|
+
this.propsChangedCallbacks = [];
|
|
803
|
+
this.unmountedCallbacks = [];
|
|
803
804
|
}
|
|
804
805
|
invokePropsChangedHooks(newProps) {
|
|
805
806
|
const oldProps = this.props;
|
|
@@ -1082,7 +1083,7 @@ function listen(model, deps, callback, isContinue) {
|
|
|
1082
1083
|
* @param isContinue 可选的停止函数,在每次值更新后调用,当返回值为 false 时,将不再监听依赖的变化
|
|
1083
1084
|
*/
|
|
1084
1085
|
function useDerived(callback, isContinue) {
|
|
1085
|
-
|
|
1086
|
+
const { data, deps } = invokeDepFn(callback);
|
|
1086
1087
|
const signal = useSignal(data);
|
|
1087
1088
|
const component = getSetupContext(false);
|
|
1088
1089
|
const unListen = listen(signal, deps, callback, isContinue);
|
|
@@ -1207,10 +1208,11 @@ function withMemo(canUseMemo, render) {
|
|
|
1207
1208
|
};
|
|
1208
1209
|
}
|
|
1209
1210
|
|
|
1210
|
-
function createRenderer(component, nativeRenderer) {
|
|
1211
|
+
function createRenderer(component, nativeRenderer, version) {
|
|
1211
1212
|
let isInit = true;
|
|
1212
1213
|
return function render(host) {
|
|
1213
1214
|
if (isInit) {
|
|
1215
|
+
nativeRenderer.setProperty(host, 'viewfly-version', version);
|
|
1214
1216
|
isInit = false;
|
|
1215
1217
|
const atom = {
|
|
1216
1218
|
jsxNode: component,
|
|
@@ -1330,7 +1332,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1330
1332
|
}
|
|
1331
1333
|
const commits = [];
|
|
1332
1334
|
const changeCommits = {
|
|
1333
|
-
updateComponent: (newAtom, reusedAtom, expectIndex,
|
|
1335
|
+
updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
|
|
1334
1336
|
commits.push((offset) => {
|
|
1335
1337
|
const instance = reusedAtom.jsxNode;
|
|
1336
1338
|
const newProps = newAtom.jsxNode.props;
|
|
@@ -1339,7 +1341,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1339
1341
|
instance.$$view = Object.assign({ atom: newAtom }, context);
|
|
1340
1342
|
newAtom.jsxNode = instance;
|
|
1341
1343
|
if (newTemplate === oldTemplate) {
|
|
1342
|
-
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex
|
|
1344
|
+
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
|
|
1343
1345
|
updateView(nativeRenderer, instance);
|
|
1344
1346
|
return;
|
|
1345
1347
|
}
|
|
@@ -1347,7 +1349,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1347
1349
|
linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
|
|
1348
1350
|
}
|
|
1349
1351
|
if (newAtom.child) {
|
|
1350
|
-
diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex,
|
|
1352
|
+
diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
|
|
1351
1353
|
}
|
|
1352
1354
|
else if (reusedAtom.child) {
|
|
1353
1355
|
let atom = reusedAtom.child;
|
|
@@ -1363,7 +1365,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1363
1365
|
commits.push((offset) => {
|
|
1364
1366
|
newAtom.nativeNode = oldAtom.nativeNode;
|
|
1365
1367
|
const host = context.host;
|
|
1366
|
-
if (expectIndex !== oldIndex
|
|
1368
|
+
if (expectIndex - offset !== oldIndex) {
|
|
1367
1369
|
if (context.isParent) {
|
|
1368
1370
|
nativeRenderer.prependChild(host, newAtom.nativeNode);
|
|
1369
1371
|
}
|
|
@@ -1404,6 +1406,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1404
1406
|
create: (start) => {
|
|
1405
1407
|
commits.push(() => {
|
|
1406
1408
|
buildView(nativeRenderer, parentComponent, start, context);
|
|
1409
|
+
offset++;
|
|
1407
1410
|
});
|
|
1408
1411
|
}
|
|
1409
1412
|
};
|
|
@@ -1422,7 +1425,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1422
1425
|
const commit = commits[i];
|
|
1423
1426
|
while (firstDiffAtomIndexed) {
|
|
1424
1427
|
if (firstDiffAtomIndexed.index <= i) {
|
|
1425
|
-
offset
|
|
1428
|
+
offset--;
|
|
1426
1429
|
firstDiffAtomIndexed = firstDiffAtomIndexed.next;
|
|
1427
1430
|
continue;
|
|
1428
1431
|
}
|
|
@@ -1431,40 +1434,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1431
1434
|
commit(offset);
|
|
1432
1435
|
}
|
|
1433
1436
|
}
|
|
1434
|
-
function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
|
|
1435
|
-
let child = reusedAtom.child;
|
|
1436
|
-
newAtom.child = child;
|
|
1437
|
-
const children = [];
|
|
1438
|
-
while (child) {
|
|
1439
|
-
children.push(child);
|
|
1440
|
-
child.parent = newAtom;
|
|
1441
|
-
child = child.sibling;
|
|
1442
|
-
}
|
|
1443
|
-
const updateContext = (atom) => {
|
|
1444
|
-
if (atom.jsxNode instanceof Component) {
|
|
1445
|
-
let child = atom.child;
|
|
1446
|
-
while (child) {
|
|
1447
|
-
updateContext(child);
|
|
1448
|
-
child = child.sibling;
|
|
1449
|
-
}
|
|
1450
|
-
}
|
|
1451
|
-
else {
|
|
1452
|
-
if (moveView) {
|
|
1453
|
-
if (context.isParent) {
|
|
1454
|
-
nativeRenderer.prependChild(context.host, atom.nativeNode);
|
|
1455
|
-
}
|
|
1456
|
-
else {
|
|
1457
|
-
nativeRenderer.insertAfter(atom.nativeNode, context.host);
|
|
1458
|
-
}
|
|
1459
|
-
}
|
|
1460
|
-
context.isParent = false;
|
|
1461
|
-
context.host = atom.nativeNode;
|
|
1462
|
-
}
|
|
1463
|
-
};
|
|
1464
|
-
for (const atom of children) {
|
|
1465
|
-
updateContext(atom);
|
|
1466
|
-
}
|
|
1467
|
-
}
|
|
1468
1437
|
function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
|
|
1469
1438
|
const startDiffAtom = diffAtomIndexed;
|
|
1470
1439
|
while (diffAtomIndexed) {
|
|
@@ -1507,6 +1476,40 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
|
|
|
1507
1476
|
changeCommits.create(newAtom);
|
|
1508
1477
|
return startDiffAtom;
|
|
1509
1478
|
}
|
|
1479
|
+
function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
|
|
1480
|
+
let child = reusedAtom.child;
|
|
1481
|
+
newAtom.child = child;
|
|
1482
|
+
const children = [];
|
|
1483
|
+
while (child) {
|
|
1484
|
+
children.push(child);
|
|
1485
|
+
child.parent = newAtom;
|
|
1486
|
+
child = child.sibling;
|
|
1487
|
+
}
|
|
1488
|
+
const updateContext = (atom) => {
|
|
1489
|
+
if (atom.jsxNode instanceof Component) {
|
|
1490
|
+
let child = atom.child;
|
|
1491
|
+
while (child) {
|
|
1492
|
+
updateContext(child);
|
|
1493
|
+
child = child.sibling;
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
else {
|
|
1497
|
+
if (moveView) {
|
|
1498
|
+
if (context.isParent) {
|
|
1499
|
+
nativeRenderer.prependChild(context.host, atom.nativeNode);
|
|
1500
|
+
}
|
|
1501
|
+
else {
|
|
1502
|
+
nativeRenderer.insertAfter(atom.nativeNode, context.host);
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1505
|
+
context.isParent = false;
|
|
1506
|
+
context.host = atom.nativeNode;
|
|
1507
|
+
}
|
|
1508
|
+
};
|
|
1509
|
+
for (const atom of children) {
|
|
1510
|
+
updateContext(atom);
|
|
1511
|
+
}
|
|
1512
|
+
}
|
|
1510
1513
|
function cleanView(nativeRenderer, atom, isClean) {
|
|
1511
1514
|
if (atom.nativeNode) {
|
|
1512
1515
|
if (!isClean) {
|
|
@@ -1800,6 +1803,7 @@ class RootComponent extends Component {
|
|
|
1800
1803
|
}
|
|
1801
1804
|
|
|
1802
1805
|
const viewflyErrorFn = makeError('Viewfly');
|
|
1806
|
+
const VERSION = "0.2.2";
|
|
1803
1807
|
function viewfly(config) {
|
|
1804
1808
|
const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
|
|
1805
1809
|
const appProviders = [];
|
|
@@ -1811,7 +1815,7 @@ function viewfly(config) {
|
|
|
1811
1815
|
return destroyed ? null : root;
|
|
1812
1816
|
};
|
|
1813
1817
|
});
|
|
1814
|
-
const render = createRenderer(rootComponent, nativeRenderer);
|
|
1818
|
+
const render = createRenderer(rootComponent, nativeRenderer, VERSION);
|
|
1815
1819
|
let isStarted = false;
|
|
1816
1820
|
let task = null;
|
|
1817
1821
|
function microTask(callback) {
|
|
@@ -1889,4 +1893,4 @@ function viewfly(config) {
|
|
|
1889
1893
|
return app;
|
|
1890
1894
|
}
|
|
1891
1895
|
|
|
1892
|
-
export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, createRenderer, forwardRef, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };
|
|
1896
|
+
export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, VERSION, createRenderer, forwardRef, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };
|
package/bundles/index.js
CHANGED
|
@@ -131,6 +131,7 @@ const Injectable = function InjectableDecorator(options) {
|
|
|
131
131
|
/**
|
|
132
132
|
* 生成自定义依赖注入 token 的类
|
|
133
133
|
*/
|
|
134
|
+
/* eslint-disable-next-line */
|
|
134
135
|
class InjectionToken {
|
|
135
136
|
constructor(description) {
|
|
136
137
|
this.description = description;
|
|
@@ -393,8 +394,8 @@ function normalizeDeps(provide, deps) {
|
|
|
393
394
|
}
|
|
394
395
|
}
|
|
395
396
|
if (typeof r.injectKey === 'undefined') {
|
|
396
|
-
|
|
397
|
-
if the dependency is declared later, you can refer to it using \`constructor(@Inject(forwardRef(() => [Type|InjectionToken])) paramName: [Type]) {}\``);
|
|
397
|
+
/* eslint-disable max-len */
|
|
398
|
+
throw new Error(`The ${index} th dependent parameter type of \`${stringify(provide)}\` was not obtained, if the dependency is declared later, you can refer to it using \`constructor(@Inject(forwardRef(() => [Type|InjectionToken])) paramName: [Type]) {}\``);
|
|
398
399
|
}
|
|
399
400
|
return r;
|
|
400
401
|
});
|
|
@@ -444,7 +445,7 @@ class ReflectiveInjector extends Injector {
|
|
|
444
445
|
for (let i = 0; i < this.normalizedProviders.length; i++) {
|
|
445
446
|
const normalizedProvider = this.normalizedProviders[i];
|
|
446
447
|
if (normalizedProvider.provide === token) {
|
|
447
|
-
return this.getValue(token,
|
|
448
|
+
return this.getValue(token, normalizedProvider);
|
|
448
449
|
}
|
|
449
450
|
}
|
|
450
451
|
if (!(token instanceof InjectionToken)) {
|
|
@@ -453,13 +454,13 @@ class ReflectiveInjector extends Injector {
|
|
|
453
454
|
const normalizedProvider = normalizeProvider(token);
|
|
454
455
|
if (this.scope === scope) {
|
|
455
456
|
this.normalizedProviders.push(normalizedProvider);
|
|
456
|
-
return this.getValue(token,
|
|
457
|
+
return this.getValue(token, normalizedProvider);
|
|
457
458
|
}
|
|
458
459
|
const parentInjector = this.parentInjector;
|
|
459
460
|
if (!parentInjector || parentInjector instanceof NullInjector) {
|
|
460
461
|
if (normalizedProvider.scope === 'root') {
|
|
461
462
|
this.normalizedProviders.push(normalizedProvider);
|
|
462
|
-
return this.getValue(token,
|
|
463
|
+
return this.getValue(token, normalizedProvider);
|
|
463
464
|
}
|
|
464
465
|
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
465
466
|
return notFoundValue;
|
|
@@ -482,9 +483,9 @@ class ReflectiveInjector extends Injector {
|
|
|
482
483
|
}
|
|
483
484
|
return notFoundValue;
|
|
484
485
|
}
|
|
485
|
-
getValue(token,
|
|
486
|
+
getValue(token, normalizedProvider) {
|
|
486
487
|
const { generateFactory, deps } = normalizedProvider;
|
|
487
|
-
const params = this.resolveDeps(deps
|
|
488
|
+
const params = this.resolveDeps(deps);
|
|
488
489
|
let value = this.recordValues.get(token);
|
|
489
490
|
if (value) {
|
|
490
491
|
return value;
|
|
@@ -499,10 +500,9 @@ class ReflectiveInjector extends Injector {
|
|
|
499
500
|
/**
|
|
500
501
|
* 解决并获取依赖参数
|
|
501
502
|
* @param deps 依赖规则
|
|
502
|
-
* @param notFoundValue 未查找到时的返回值
|
|
503
503
|
* @private
|
|
504
504
|
*/
|
|
505
|
-
resolveDeps(deps
|
|
505
|
+
resolveDeps(deps) {
|
|
506
506
|
return deps.map(dep => {
|
|
507
507
|
let reflectiveValue;
|
|
508
508
|
const tryValue = {};
|
|
@@ -665,15 +665,15 @@ class Component extends ReflectiveInjector {
|
|
|
665
665
|
this.props = props;
|
|
666
666
|
this.key = key;
|
|
667
667
|
this.$$typeOf = this.type;
|
|
668
|
+
this.changedSubComponents = new Set();
|
|
668
669
|
this.unmountedCallbacks = [];
|
|
669
670
|
this.mountCallbacks = [];
|
|
670
671
|
this.propsChangedCallbacks = [];
|
|
671
672
|
this.updatedCallbacks = [];
|
|
672
|
-
this.changedSubComponents = new Set();
|
|
673
|
-
this._dirty = true;
|
|
674
|
-
this._changed = true;
|
|
675
673
|
this.updatedDestroyCallbacks = [];
|
|
676
674
|
this.propsChangedDestroyCallbacks = [];
|
|
675
|
+
this._dirty = true;
|
|
676
|
+
this._changed = true;
|
|
677
677
|
this.isFirstRending = true;
|
|
678
678
|
}
|
|
679
679
|
markAsDirtied() {
|
|
@@ -726,7 +726,7 @@ class Component extends ReflectiveInjector {
|
|
|
726
726
|
isSetup = false;
|
|
727
727
|
componentSetupStack.pop();
|
|
728
728
|
signalDepsStack.push([]);
|
|
729
|
-
|
|
729
|
+
const template = this.instance.$render();
|
|
730
730
|
const deps = signalDepsStack.pop();
|
|
731
731
|
this.unWatch = useEffect(Array.from(new Set(deps)), () => {
|
|
732
732
|
this.markAsDirtied();
|
|
@@ -799,9 +799,10 @@ class Component extends ReflectiveInjector {
|
|
|
799
799
|
for (const fn of this.unmountedCallbacks) {
|
|
800
800
|
fn();
|
|
801
801
|
}
|
|
802
|
-
this.updatedCallbacks = [];
|
|
803
802
|
this.mountCallbacks = [];
|
|
804
803
|
this.updatedCallbacks = [];
|
|
804
|
+
this.propsChangedCallbacks = [];
|
|
805
|
+
this.unmountedCallbacks = [];
|
|
805
806
|
}
|
|
806
807
|
invokePropsChangedHooks(newProps) {
|
|
807
808
|
const oldProps = this.props;
|
|
@@ -1084,7 +1085,7 @@ function listen(model, deps, callback, isContinue) {
|
|
|
1084
1085
|
* @param isContinue 可选的停止函数,在每次值更新后调用,当返回值为 false 时,将不再监听依赖的变化
|
|
1085
1086
|
*/
|
|
1086
1087
|
function useDerived(callback, isContinue) {
|
|
1087
|
-
|
|
1088
|
+
const { data, deps } = invokeDepFn(callback);
|
|
1088
1089
|
const signal = useSignal(data);
|
|
1089
1090
|
const component = getSetupContext(false);
|
|
1090
1091
|
const unListen = listen(signal, deps, callback, isContinue);
|
|
@@ -1209,10 +1210,11 @@ function withMemo(canUseMemo, render) {
|
|
|
1209
1210
|
};
|
|
1210
1211
|
}
|
|
1211
1212
|
|
|
1212
|
-
function createRenderer(component, nativeRenderer) {
|
|
1213
|
+
function createRenderer(component, nativeRenderer, version) {
|
|
1213
1214
|
let isInit = true;
|
|
1214
1215
|
return function render(host) {
|
|
1215
1216
|
if (isInit) {
|
|
1217
|
+
nativeRenderer.setProperty(host, 'viewfly-version', version);
|
|
1216
1218
|
isInit = false;
|
|
1217
1219
|
const atom = {
|
|
1218
1220
|
jsxNode: component,
|
|
@@ -1332,7 +1334,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1332
1334
|
}
|
|
1333
1335
|
const commits = [];
|
|
1334
1336
|
const changeCommits = {
|
|
1335
|
-
updateComponent: (newAtom, reusedAtom, expectIndex,
|
|
1337
|
+
updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
|
|
1336
1338
|
commits.push((offset) => {
|
|
1337
1339
|
const instance = reusedAtom.jsxNode;
|
|
1338
1340
|
const newProps = newAtom.jsxNode.props;
|
|
@@ -1341,7 +1343,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1341
1343
|
instance.$$view = Object.assign({ atom: newAtom }, context);
|
|
1342
1344
|
newAtom.jsxNode = instance;
|
|
1343
1345
|
if (newTemplate === oldTemplate) {
|
|
1344
|
-
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex
|
|
1346
|
+
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
|
|
1345
1347
|
updateView(nativeRenderer, instance);
|
|
1346
1348
|
return;
|
|
1347
1349
|
}
|
|
@@ -1349,7 +1351,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1349
1351
|
linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
|
|
1350
1352
|
}
|
|
1351
1353
|
if (newAtom.child) {
|
|
1352
|
-
diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex,
|
|
1354
|
+
diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
|
|
1353
1355
|
}
|
|
1354
1356
|
else if (reusedAtom.child) {
|
|
1355
1357
|
let atom = reusedAtom.child;
|
|
@@ -1365,7 +1367,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1365
1367
|
commits.push((offset) => {
|
|
1366
1368
|
newAtom.nativeNode = oldAtom.nativeNode;
|
|
1367
1369
|
const host = context.host;
|
|
1368
|
-
if (expectIndex !== oldIndex
|
|
1370
|
+
if (expectIndex - offset !== oldIndex) {
|
|
1369
1371
|
if (context.isParent) {
|
|
1370
1372
|
nativeRenderer.prependChild(host, newAtom.nativeNode);
|
|
1371
1373
|
}
|
|
@@ -1406,6 +1408,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1406
1408
|
create: (start) => {
|
|
1407
1409
|
commits.push(() => {
|
|
1408
1410
|
buildView(nativeRenderer, parentComponent, start, context);
|
|
1411
|
+
offset++;
|
|
1409
1412
|
});
|
|
1410
1413
|
}
|
|
1411
1414
|
};
|
|
@@ -1424,7 +1427,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1424
1427
|
const commit = commits[i];
|
|
1425
1428
|
while (firstDiffAtomIndexed) {
|
|
1426
1429
|
if (firstDiffAtomIndexed.index <= i) {
|
|
1427
|
-
offset
|
|
1430
|
+
offset--;
|
|
1428
1431
|
firstDiffAtomIndexed = firstDiffAtomIndexed.next;
|
|
1429
1432
|
continue;
|
|
1430
1433
|
}
|
|
@@ -1433,40 +1436,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1433
1436
|
commit(offset);
|
|
1434
1437
|
}
|
|
1435
1438
|
}
|
|
1436
|
-
function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
|
|
1437
|
-
let child = reusedAtom.child;
|
|
1438
|
-
newAtom.child = child;
|
|
1439
|
-
const children = [];
|
|
1440
|
-
while (child) {
|
|
1441
|
-
children.push(child);
|
|
1442
|
-
child.parent = newAtom;
|
|
1443
|
-
child = child.sibling;
|
|
1444
|
-
}
|
|
1445
|
-
const updateContext = (atom) => {
|
|
1446
|
-
if (atom.jsxNode instanceof Component) {
|
|
1447
|
-
let child = atom.child;
|
|
1448
|
-
while (child) {
|
|
1449
|
-
updateContext(child);
|
|
1450
|
-
child = child.sibling;
|
|
1451
|
-
}
|
|
1452
|
-
}
|
|
1453
|
-
else {
|
|
1454
|
-
if (moveView) {
|
|
1455
|
-
if (context.isParent) {
|
|
1456
|
-
nativeRenderer.prependChild(context.host, atom.nativeNode);
|
|
1457
|
-
}
|
|
1458
|
-
else {
|
|
1459
|
-
nativeRenderer.insertAfter(atom.nativeNode, context.host);
|
|
1460
|
-
}
|
|
1461
|
-
}
|
|
1462
|
-
context.isParent = false;
|
|
1463
|
-
context.host = atom.nativeNode;
|
|
1464
|
-
}
|
|
1465
|
-
};
|
|
1466
|
-
for (const atom of children) {
|
|
1467
|
-
updateContext(atom);
|
|
1468
|
-
}
|
|
1469
|
-
}
|
|
1470
1439
|
function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
|
|
1471
1440
|
const startDiffAtom = diffAtomIndexed;
|
|
1472
1441
|
while (diffAtomIndexed) {
|
|
@@ -1509,6 +1478,40 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
|
|
|
1509
1478
|
changeCommits.create(newAtom);
|
|
1510
1479
|
return startDiffAtom;
|
|
1511
1480
|
}
|
|
1481
|
+
function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
|
|
1482
|
+
let child = reusedAtom.child;
|
|
1483
|
+
newAtom.child = child;
|
|
1484
|
+
const children = [];
|
|
1485
|
+
while (child) {
|
|
1486
|
+
children.push(child);
|
|
1487
|
+
child.parent = newAtom;
|
|
1488
|
+
child = child.sibling;
|
|
1489
|
+
}
|
|
1490
|
+
const updateContext = (atom) => {
|
|
1491
|
+
if (atom.jsxNode instanceof Component) {
|
|
1492
|
+
let child = atom.child;
|
|
1493
|
+
while (child) {
|
|
1494
|
+
updateContext(child);
|
|
1495
|
+
child = child.sibling;
|
|
1496
|
+
}
|
|
1497
|
+
}
|
|
1498
|
+
else {
|
|
1499
|
+
if (moveView) {
|
|
1500
|
+
if (context.isParent) {
|
|
1501
|
+
nativeRenderer.prependChild(context.host, atom.nativeNode);
|
|
1502
|
+
}
|
|
1503
|
+
else {
|
|
1504
|
+
nativeRenderer.insertAfter(atom.nativeNode, context.host);
|
|
1505
|
+
}
|
|
1506
|
+
}
|
|
1507
|
+
context.isParent = false;
|
|
1508
|
+
context.host = atom.nativeNode;
|
|
1509
|
+
}
|
|
1510
|
+
};
|
|
1511
|
+
for (const atom of children) {
|
|
1512
|
+
updateContext(atom);
|
|
1513
|
+
}
|
|
1514
|
+
}
|
|
1512
1515
|
function cleanView(nativeRenderer, atom, isClean) {
|
|
1513
1516
|
if (atom.nativeNode) {
|
|
1514
1517
|
if (!isClean) {
|
|
@@ -1802,6 +1805,7 @@ class RootComponent extends Component {
|
|
|
1802
1805
|
}
|
|
1803
1806
|
|
|
1804
1807
|
const viewflyErrorFn = makeError('Viewfly');
|
|
1808
|
+
const VERSION = "0.2.2";
|
|
1805
1809
|
function viewfly(config) {
|
|
1806
1810
|
const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
|
|
1807
1811
|
const appProviders = [];
|
|
@@ -1813,7 +1817,7 @@ function viewfly(config) {
|
|
|
1813
1817
|
return destroyed ? null : root;
|
|
1814
1818
|
};
|
|
1815
1819
|
});
|
|
1816
|
-
const render = createRenderer(rootComponent, nativeRenderer);
|
|
1820
|
+
const render = createRenderer(rootComponent, nativeRenderer, VERSION);
|
|
1817
1821
|
let isStarted = false;
|
|
1818
1822
|
let task = null;
|
|
1819
1823
|
function microTask(callback) {
|
|
@@ -1913,6 +1917,7 @@ exports.Self = Self;
|
|
|
1913
1917
|
exports.SkipSelf = SkipSelf;
|
|
1914
1918
|
exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
|
|
1915
1919
|
exports.Type = Type;
|
|
1920
|
+
exports.VERSION = VERSION;
|
|
1916
1921
|
exports.createRenderer = createRenderer;
|
|
1917
1922
|
exports.forwardRef = forwardRef;
|
|
1918
1923
|
exports.inject = inject;
|
package/bundles/viewfly.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
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",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"keywords": [],
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@rollup/plugin-commonjs": "^25.0.3",
|
|
33
|
+
"@rollup/plugin-replace": "^5.0.2",
|
|
33
34
|
"@rollup/plugin-typescript": "^11.1.2",
|
|
34
35
|
"rimraf": "^3.0.2",
|
|
35
36
|
"rollup": "^3.26.3",
|
|
@@ -46,5 +47,5 @@
|
|
|
46
47
|
"bugs": {
|
|
47
48
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
48
49
|
},
|
|
49
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94"
|
|
50
51
|
}
|