@viewfly/core 1.0.0-alpha.0 → 1.0.0-alpha.10
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/di/injector.d.ts +1 -1
- package/bundles/di/metadata.d.ts +1 -1
- package/bundles/di/null-injector.d.ts +1 -1
- package/bundles/di/reflective-injector.d.ts +2 -2
- package/bundles/foundation/_utils.d.ts +3 -0
- package/bundles/foundation/component.d.ts +2 -4
- package/bundles/foundation/jsx-element.d.ts +3 -5
- package/bundles/index.esm.js +139 -142
- package/bundles/index.js +139 -142
- package/jsx-runtime/index.d.ts +11 -0
- package/package.json +3 -3
package/bundles/di/injector.d.ts
CHANGED
|
@@ -22,5 +22,5 @@ export type ExtractValueType<T> = T extends Type<any> ? InstanceType<T> : T exte
|
|
|
22
22
|
*/
|
|
23
23
|
export declare abstract class Injector {
|
|
24
24
|
abstract parentInjector: Injector | null;
|
|
25
|
-
abstract get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T,
|
|
25
|
+
abstract get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
|
|
26
26
|
}
|
package/bundles/di/metadata.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ export declare const Optional: OptionalDecorator;
|
|
|
37
37
|
export interface Prop {
|
|
38
38
|
}
|
|
39
39
|
export interface PropDecorator {
|
|
40
|
-
<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token?: T | ForwardRef<ExtractValueType<T>>,
|
|
40
|
+
<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token?: T | ForwardRef<ExtractValueType<T>>, notFoundValue?: U, flags?: InjectFlags): PropertyDecorator;
|
|
41
41
|
new (token: any): Prop;
|
|
42
42
|
}
|
|
43
43
|
export declare const Prop: PropDecorator;
|
|
@@ -2,5 +2,5 @@ import { InjectFlags, Injector } from './injector';
|
|
|
2
2
|
export declare const THROW_IF_NOT_FOUND: any;
|
|
3
3
|
export declare class NullInjector extends Injector {
|
|
4
4
|
parentInjector: null;
|
|
5
|
-
get(token: any,
|
|
5
|
+
get(token: any, notFoundValue?: any, _?: InjectFlags): any;
|
|
6
6
|
}
|
|
@@ -17,10 +17,10 @@ export declare class ReflectiveInjector extends Injector {
|
|
|
17
17
|
/**
|
|
18
18
|
* 用于获取当前注入器上下文内的实例、对象或数据
|
|
19
19
|
* @param token 访问 token
|
|
20
|
-
* @param flags 查询规则
|
|
21
20
|
* @param notFoundValue 如未查找到的返回值
|
|
21
|
+
* @param flags 查询规则
|
|
22
22
|
*/
|
|
23
|
-
get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T,
|
|
23
|
+
get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
|
|
24
24
|
private getValue;
|
|
25
25
|
/**
|
|
26
26
|
* 解决并获取依赖参数
|
|
@@ -21,6 +21,7 @@ export declare function classToString(config: unknown): string;
|
|
|
21
21
|
export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
|
|
22
22
|
export interface TextAtom {
|
|
23
23
|
type: 'text';
|
|
24
|
+
index: number;
|
|
24
25
|
jsxNode: string;
|
|
25
26
|
nativeNode: NativeNode | null;
|
|
26
27
|
child: Atom | null;
|
|
@@ -29,6 +30,7 @@ export interface TextAtom {
|
|
|
29
30
|
}
|
|
30
31
|
export interface ElementAtom {
|
|
31
32
|
type: 'element';
|
|
33
|
+
index: number;
|
|
32
34
|
jsxNode: JSXNode<string>;
|
|
33
35
|
nativeNode: NativeNode | null;
|
|
34
36
|
child: Atom | null;
|
|
@@ -37,6 +39,7 @@ export interface ElementAtom {
|
|
|
37
39
|
}
|
|
38
40
|
export interface ComponentAtom {
|
|
39
41
|
type: 'component';
|
|
42
|
+
index: number;
|
|
40
43
|
jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
|
|
41
44
|
nativeNode: NativeNode | null;
|
|
42
45
|
child: Atom | null;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { AbstractType, ExtractValueType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '../di/_api';
|
|
2
2
|
import { Key, Props } from './jsx-element';
|
|
3
|
-
import { ComponentView } from './_utils';
|
|
4
3
|
/**
|
|
5
4
|
* Viewfly 组件管理类,用于管理组件的生命周期,上下文等
|
|
6
5
|
*/
|
|
@@ -14,7 +13,6 @@ export declare class Component extends ReflectiveInjector {
|
|
|
14
13
|
changedSubComponents: Set<Component>;
|
|
15
14
|
get dirty(): boolean;
|
|
16
15
|
get changed(): boolean;
|
|
17
|
-
$$view: ComponentView;
|
|
18
16
|
unmountedCallbacks?: LifeCycleCallback[] | null;
|
|
19
17
|
mountCallbacks?: LifeCycleCallback[] | null;
|
|
20
18
|
propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
|
|
@@ -33,7 +31,7 @@ export declare class Component extends ReflectiveInjector {
|
|
|
33
31
|
template: any;
|
|
34
32
|
portalHost: import("./injection-tokens").NativeNode | undefined;
|
|
35
33
|
};
|
|
36
|
-
update(newProps:
|
|
34
|
+
update(newProps: Record<string, any>, forceUpdate?: boolean): any;
|
|
37
35
|
provide<T>(providers: Provider<T> | Provider<T>[]): void;
|
|
38
36
|
rendered(): void;
|
|
39
37
|
destroy(): void;
|
|
@@ -237,7 +235,7 @@ export declare function withAnnotation<T extends JSXInternal.ComponentSetup>(ann
|
|
|
237
235
|
/**
|
|
238
236
|
* 通过组件上下文获取 IoC 容器内数据的勾子方法
|
|
239
237
|
*/
|
|
240
|
-
export declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T,
|
|
238
|
+
export declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
|
|
241
239
|
/**
|
|
242
240
|
* 获取当前组件实例
|
|
243
241
|
*/
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import { ListenDelegate } from './_utils';
|
|
2
2
|
export interface Props {
|
|
3
3
|
children?: JSXInternal.ViewNode | JSXInternal.ViewNode[];
|
|
4
|
-
[key: string]: any;
|
|
5
|
-
[key: symbol]: any;
|
|
6
4
|
}
|
|
7
5
|
export declare function Fragment(props: Props): () => any;
|
|
8
6
|
export type Key = number | string;
|
|
9
|
-
export declare function jsx(type: string | JSXInternal.ComponentSetup, props: Props, key?: Key): JSXNode;
|
|
7
|
+
export declare function jsx(type: string | JSXInternal.ComponentSetup, props: Props & Record<string, any>, key?: Key): JSXNode;
|
|
10
8
|
export declare const jsxs: typeof jsx;
|
|
11
9
|
export interface JSXNode<T = string | JSXInternal.ComponentSetup> {
|
|
12
10
|
type: T;
|
|
13
|
-
props: Props
|
|
11
|
+
props: Props & Record<string, any>;
|
|
14
12
|
key?: Key;
|
|
15
13
|
on?: Record<string, ListenDelegate>;
|
|
16
14
|
}
|
|
17
15
|
export declare const JSXNodeFactory: {
|
|
18
|
-
createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props, key?: Key): JSXNode<T>;
|
|
16
|
+
createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): JSXNode<T>;
|
|
19
17
|
};
|
package/bundles/index.esm.js
CHANGED
|
@@ -161,6 +161,40 @@ var InjectFlags;
|
|
|
161
161
|
class Injector {
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
+
/**
|
|
165
|
+
* 构造函数参数装饰器,用于改变注入 token
|
|
166
|
+
*/
|
|
167
|
+
const Inject = function InjectDecorator(token) {
|
|
168
|
+
if (this instanceof Inject) {
|
|
169
|
+
this.token = token;
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
return makeParamDecorator(Inject, new Inject(token));
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
const Self = function SelfDecorator() {
|
|
176
|
+
if (!(this instanceof Self)) {
|
|
177
|
+
return makeParamDecorator(Self, new Self());
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
const SkipSelf = function SkipSelfDecorator() {
|
|
181
|
+
if (!(this instanceof SkipSelf)) {
|
|
182
|
+
return makeParamDecorator(SkipSelf, new SkipSelf());
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
const Optional = function OptionalDecorator() {
|
|
186
|
+
if (!(this instanceof Optional)) {
|
|
187
|
+
return makeParamDecorator(Optional, new Optional());
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
const Prop = function PropDecorator(token, notFoundValue, flags) {
|
|
191
|
+
if (!(this instanceof Prop)) {
|
|
192
|
+
return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
|
|
193
|
+
instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, notFoundValue, flags);
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
|
|
164
198
|
function stringify(token) {
|
|
165
199
|
if (typeof token === 'string') {
|
|
166
200
|
return token;
|
|
@@ -205,7 +239,8 @@ class NullInjector extends Injector {
|
|
|
205
239
|
super(...arguments);
|
|
206
240
|
this.parentInjector = null;
|
|
207
241
|
}
|
|
208
|
-
|
|
242
|
+
/* eslint-disable-next-line */
|
|
243
|
+
get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
|
|
209
244
|
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
210
245
|
throw nullInjectorErrorFn(token);
|
|
211
246
|
}
|
|
@@ -213,40 +248,6 @@ class NullInjector extends Injector {
|
|
|
213
248
|
}
|
|
214
249
|
}
|
|
215
250
|
|
|
216
|
-
/**
|
|
217
|
-
* 构造函数参数装饰器,用于改变注入 token
|
|
218
|
-
*/
|
|
219
|
-
const Inject = function InjectDecorator(token) {
|
|
220
|
-
if (this instanceof Inject) {
|
|
221
|
-
this.token = token;
|
|
222
|
-
}
|
|
223
|
-
else {
|
|
224
|
-
return makeParamDecorator(Inject, new Inject(token));
|
|
225
|
-
}
|
|
226
|
-
};
|
|
227
|
-
const Self = function SelfDecorator() {
|
|
228
|
-
if (!(this instanceof Self)) {
|
|
229
|
-
return makeParamDecorator(Self, new Self());
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
const SkipSelf = function SkipSelfDecorator() {
|
|
233
|
-
if (!(this instanceof SkipSelf)) {
|
|
234
|
-
return makeParamDecorator(SkipSelf, new SkipSelf());
|
|
235
|
-
}
|
|
236
|
-
};
|
|
237
|
-
const Optional = function OptionalDecorator() {
|
|
238
|
-
if (!(this instanceof Optional)) {
|
|
239
|
-
return makeParamDecorator(Optional, new Optional());
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
const Prop = function PropDecorator(token, flags, notFoundValue = THROW_IF_NOT_FOUND) {
|
|
243
|
-
if (!(this instanceof Prop)) {
|
|
244
|
-
return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
|
|
245
|
-
instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, flags, notFoundValue);
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
};
|
|
249
|
-
|
|
250
251
|
/**
|
|
251
252
|
* 标准化 provide,并返回统一数据结构
|
|
252
253
|
* @param provider
|
|
@@ -424,15 +425,15 @@ class ReflectiveInjector extends Injector {
|
|
|
424
425
|
/**
|
|
425
426
|
* 用于获取当前注入器上下文内的实例、对象或数据
|
|
426
427
|
* @param token 访问 token
|
|
427
|
-
* @param flags 查询规则
|
|
428
428
|
* @param notFoundValue 如未查找到的返回值
|
|
429
|
+
* @param flags 查询规则
|
|
429
430
|
*/
|
|
430
|
-
get(token,
|
|
431
|
+
get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
431
432
|
var _a;
|
|
432
433
|
flags = flags || InjectFlags.Default;
|
|
433
434
|
if (flags === InjectFlags.SkipSelf) {
|
|
434
435
|
if (this.parentInjector) {
|
|
435
|
-
return this.parentInjector.get(token,
|
|
436
|
+
return this.parentInjector.get(token, notFoundValue);
|
|
436
437
|
}
|
|
437
438
|
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
438
439
|
return notFoundValue;
|
|
@@ -476,9 +477,12 @@ class ReflectiveInjector extends Injector {
|
|
|
476
477
|
return notFoundValue;
|
|
477
478
|
}
|
|
478
479
|
if (this.parentInjector) {
|
|
479
|
-
return this.parentInjector.get(token, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default
|
|
480
|
+
return this.parentInjector.get(token, notFoundValue, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default);
|
|
480
481
|
}
|
|
481
482
|
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
483
|
+
// if (flags === InjectFlags.Optional) {
|
|
484
|
+
// return null as U
|
|
485
|
+
// }
|
|
482
486
|
throw reflectiveInjectorErrorFn(token);
|
|
483
487
|
}
|
|
484
488
|
return notFoundValue;
|
|
@@ -508,11 +512,11 @@ class ReflectiveInjector extends Injector {
|
|
|
508
512
|
const tryValue = {};
|
|
509
513
|
const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
|
|
510
514
|
if (dep.visibility instanceof Self) {
|
|
511
|
-
reflectiveValue = this.get(injectToken, InjectFlags.Self
|
|
515
|
+
reflectiveValue = this.get(injectToken, tryValue, InjectFlags.Self);
|
|
512
516
|
}
|
|
513
517
|
else if (dep.visibility instanceof SkipSelf) {
|
|
514
518
|
if (this.parentInjector) {
|
|
515
|
-
reflectiveValue = this.parentInjector.get(injectToken,
|
|
519
|
+
reflectiveValue = this.parentInjector.get(injectToken, tryValue);
|
|
516
520
|
}
|
|
517
521
|
else {
|
|
518
522
|
if (dep.optional) {
|
|
@@ -525,7 +529,7 @@ class ReflectiveInjector extends Injector {
|
|
|
525
529
|
}
|
|
526
530
|
}
|
|
527
531
|
else {
|
|
528
|
-
reflectiveValue = this.get(injectToken,
|
|
532
|
+
reflectiveValue = this.get(injectToken, tryValue);
|
|
529
533
|
}
|
|
530
534
|
if (reflectiveValue === tryValue) {
|
|
531
535
|
if (dep.optional) {
|
|
@@ -587,13 +591,13 @@ function getArrayChanges(left, right) {
|
|
|
587
591
|
return changes;
|
|
588
592
|
}
|
|
589
593
|
function classToString(config) {
|
|
590
|
-
if (!config) {
|
|
591
|
-
return '';
|
|
592
|
-
}
|
|
593
594
|
if (typeof config === 'string') {
|
|
594
595
|
return config;
|
|
595
596
|
}
|
|
596
|
-
|
|
597
|
+
if (!config) {
|
|
598
|
+
return '';
|
|
599
|
+
}
|
|
600
|
+
if (Array.isArray(config)) {
|
|
597
601
|
const classes = [];
|
|
598
602
|
for (const i of config) {
|
|
599
603
|
const v = classToString(i);
|
|
@@ -603,7 +607,7 @@ function classToString(config) {
|
|
|
603
607
|
}
|
|
604
608
|
return classes.join(' ');
|
|
605
609
|
}
|
|
606
|
-
|
|
610
|
+
if (typeof config === 'object') {
|
|
607
611
|
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
608
612
|
return config.toString();
|
|
609
613
|
}
|
|
@@ -657,7 +661,11 @@ class Component extends ReflectiveInjector {
|
|
|
657
661
|
}
|
|
658
662
|
constructor(parentComponent, type, props, key) {
|
|
659
663
|
const annotation = type.annotation || {};
|
|
660
|
-
|
|
664
|
+
const providers = annotation.providers || [];
|
|
665
|
+
super(parentComponent, [...providers, {
|
|
666
|
+
provide: Injector,
|
|
667
|
+
useFactory: () => this
|
|
668
|
+
}], annotation.scope);
|
|
661
669
|
this.parentComponent = parentComponent;
|
|
662
670
|
this.type = type;
|
|
663
671
|
this.props = props;
|
|
@@ -733,30 +741,32 @@ class Component extends ReflectiveInjector {
|
|
|
733
741
|
};
|
|
734
742
|
}
|
|
735
743
|
update(newProps, forceUpdate = false) {
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
744
|
+
if (!forceUpdate) {
|
|
745
|
+
const { add, remove, replace } = getObjectChanges(newProps, this.props);
|
|
746
|
+
if (add.length || remove.length || replace.length) {
|
|
747
|
+
this.invokePropsChangedHooks(newProps);
|
|
748
|
+
}
|
|
749
|
+
else if (!this.dirty) {
|
|
750
|
+
this.props = newProps;
|
|
751
|
+
return this.template;
|
|
752
|
+
}
|
|
753
|
+
const newRefs = toRefs(newProps.ref);
|
|
754
|
+
if (this.refs) {
|
|
755
|
+
for (const oldRef of this.refs) {
|
|
756
|
+
if (!newRefs.includes(oldRef)) {
|
|
757
|
+
oldRef.unBind(this.instance);
|
|
758
|
+
}
|
|
749
759
|
}
|
|
750
760
|
}
|
|
761
|
+
for (const newRef of newRefs) {
|
|
762
|
+
newRef.bind(this.instance);
|
|
763
|
+
}
|
|
764
|
+
if (newRefs.length) {
|
|
765
|
+
this.refs = newRefs;
|
|
766
|
+
}
|
|
751
767
|
}
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
}
|
|
755
|
-
if (newRefs.length) {
|
|
756
|
-
this.refs = newRefs;
|
|
757
|
-
}
|
|
758
|
-
if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
|
|
759
|
-
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
768
|
+
if (typeof this.instance.$useMemo === 'function') {
|
|
769
|
+
if (this.instance.$useMemo(newProps, this.props)) {
|
|
760
770
|
return this.template;
|
|
761
771
|
}
|
|
762
772
|
}
|
|
@@ -839,7 +849,12 @@ class Component extends ReflectiveInjector {
|
|
|
839
849
|
}
|
|
840
850
|
}
|
|
841
851
|
if (unmountedCallbacks.length) {
|
|
842
|
-
this.unmountedCallbacks
|
|
852
|
+
if (this.unmountedCallbacks) {
|
|
853
|
+
this.unmountedCallbacks.push(...unmountedCallbacks);
|
|
854
|
+
}
|
|
855
|
+
else {
|
|
856
|
+
this.unmountedCallbacks = unmountedCallbacks;
|
|
857
|
+
}
|
|
843
858
|
}
|
|
844
859
|
this.mountCallbacks = null;
|
|
845
860
|
}
|
|
@@ -1228,9 +1243,9 @@ function withAnnotation(annotation, componentSetup) {
|
|
|
1228
1243
|
/**
|
|
1229
1244
|
* 通过组件上下文获取 IoC 容器内数据的勾子方法
|
|
1230
1245
|
*/
|
|
1231
|
-
function inject(token,
|
|
1246
|
+
function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
1232
1247
|
const component = getSetupContext();
|
|
1233
|
-
return component.get(token,
|
|
1248
|
+
return component.get(token, notFoundValue, flags);
|
|
1234
1249
|
}
|
|
1235
1250
|
/**
|
|
1236
1251
|
* 获取当前组件实例
|
|
@@ -1268,6 +1283,7 @@ function withMemo(canUseMemo, render) {
|
|
|
1268
1283
|
};
|
|
1269
1284
|
}
|
|
1270
1285
|
|
|
1286
|
+
const componentViewCache = new WeakMap();
|
|
1271
1287
|
const listenerReg = /^on(?=[A-Z])/;
|
|
1272
1288
|
function createRenderer(component, nativeRenderer) {
|
|
1273
1289
|
let isInit = true;
|
|
@@ -1276,6 +1292,7 @@ function createRenderer(component, nativeRenderer) {
|
|
|
1276
1292
|
isInit = false;
|
|
1277
1293
|
const atom = {
|
|
1278
1294
|
type: 'component',
|
|
1295
|
+
index: 0,
|
|
1279
1296
|
jsxNode: component,
|
|
1280
1297
|
sibling: null,
|
|
1281
1298
|
child: null,
|
|
@@ -1345,7 +1362,7 @@ function updateView(nativeRenderer, component) {
|
|
|
1345
1362
|
}
|
|
1346
1363
|
}
|
|
1347
1364
|
function applyChanges(nativeRenderer, component) {
|
|
1348
|
-
const { atom, host, isParent, rootHost } = component
|
|
1365
|
+
const { atom, host, isParent, rootHost } = componentViewCache.get(component);
|
|
1349
1366
|
const diffAtom = atom.child;
|
|
1350
1367
|
const template = component.update(component.props, true);
|
|
1351
1368
|
atom.child = createChildChain(template, atom.isSvg);
|
|
@@ -1354,58 +1371,35 @@ function applyChanges(nativeRenderer, component) {
|
|
|
1354
1371
|
isParent,
|
|
1355
1372
|
rootHost
|
|
1356
1373
|
};
|
|
1357
|
-
diff(nativeRenderer, component, atom.child, diffAtom, context
|
|
1374
|
+
diff(nativeRenderer, component, atom.child, diffAtom, context);
|
|
1358
1375
|
const next = atom.sibling;
|
|
1359
1376
|
if (next && next.jsxNode instanceof Component) {
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
}
|
|
1364
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
|
|
1365
|
-
let prevDiffAtom = null;
|
|
1366
|
-
let firstDiffAtomIndexed = null;
|
|
1367
|
-
if (oldAtom) {
|
|
1368
|
-
prevDiffAtom = {
|
|
1369
|
-
index,
|
|
1370
|
-
atom: oldAtom,
|
|
1371
|
-
prev: null
|
|
1372
|
-
};
|
|
1373
|
-
index++;
|
|
1374
|
-
firstDiffAtomIndexed = prevDiffAtom;
|
|
1375
|
-
oldAtom = oldAtom.sibling;
|
|
1376
|
-
while (oldAtom) {
|
|
1377
|
-
const diffAtom = {
|
|
1378
|
-
index,
|
|
1379
|
-
atom: oldAtom,
|
|
1380
|
-
prev: prevDiffAtom
|
|
1381
|
-
};
|
|
1382
|
-
prevDiffAtom.next = diffAtom;
|
|
1383
|
-
prevDiffAtom = diffAtom;
|
|
1384
|
-
oldAtom = oldAtom.sibling;
|
|
1385
|
-
index++;
|
|
1386
|
-
}
|
|
1377
|
+
const view = componentViewCache.get(next.jsxNode);
|
|
1378
|
+
view.host = context.host;
|
|
1379
|
+
view.isParent = context.isParent;
|
|
1387
1380
|
}
|
|
1381
|
+
}
|
|
1382
|
+
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
1388
1383
|
const commits = [];
|
|
1389
1384
|
function changeOffset() {
|
|
1390
1385
|
offset++;
|
|
1391
1386
|
}
|
|
1392
1387
|
while (newAtom) {
|
|
1393
|
-
|
|
1388
|
+
oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
|
|
1394
1389
|
newAtom = newAtom.sibling;
|
|
1395
|
-
expectIndex++;
|
|
1396
1390
|
}
|
|
1397
|
-
let dirtyDiffAtom =
|
|
1391
|
+
let dirtyDiffAtom = oldAtom;
|
|
1398
1392
|
while (dirtyDiffAtom) {
|
|
1399
|
-
cleanView(nativeRenderer, dirtyDiffAtom
|
|
1400
|
-
dirtyDiffAtom = dirtyDiffAtom.
|
|
1393
|
+
cleanView(nativeRenderer, dirtyDiffAtom, true);
|
|
1394
|
+
dirtyDiffAtom = dirtyDiffAtom.sibling;
|
|
1401
1395
|
}
|
|
1402
1396
|
let offset = 0;
|
|
1403
1397
|
for (let i = 0; i < commits.length; i++) {
|
|
1404
1398
|
const commit = commits[i];
|
|
1405
|
-
while (
|
|
1406
|
-
if (
|
|
1399
|
+
while (oldAtom) {
|
|
1400
|
+
if (oldAtom.index <= i) {
|
|
1407
1401
|
offset--;
|
|
1408
|
-
|
|
1402
|
+
oldAtom = oldAtom.sibling;
|
|
1409
1403
|
continue;
|
|
1410
1404
|
}
|
|
1411
1405
|
break;
|
|
@@ -1413,47 +1407,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1413
1407
|
commit(offset);
|
|
1414
1408
|
}
|
|
1415
1409
|
}
|
|
1416
|
-
function createChanges(newAtom,
|
|
1417
|
-
const startDiffAtom =
|
|
1410
|
+
function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
|
|
1411
|
+
const startDiffAtom = oldAtom;
|
|
1418
1412
|
const { jsxNode: newJsxNode, type } = newAtom;
|
|
1419
1413
|
const key = newJsxNode.key;
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1414
|
+
let prev = null;
|
|
1415
|
+
while (oldAtom) {
|
|
1416
|
+
const diffIndex = oldAtom.index;
|
|
1417
|
+
if (type === oldAtom.type) {
|
|
1423
1418
|
let commit;
|
|
1424
1419
|
if (type === 'text') {
|
|
1425
|
-
commit = updateText(newAtom,
|
|
1420
|
+
commit = updateText(newAtom, oldAtom, nativeRenderer, context);
|
|
1426
1421
|
}
|
|
1427
1422
|
else {
|
|
1428
|
-
const { key: diffKey, type: diffType } =
|
|
1423
|
+
const { key: diffKey, type: diffType } = oldAtom.jsxNode;
|
|
1429
1424
|
if (diffKey !== key || newJsxNode.type !== diffType) {
|
|
1430
|
-
|
|
1425
|
+
prev = oldAtom;
|
|
1426
|
+
oldAtom = oldAtom.sibling;
|
|
1431
1427
|
continue;
|
|
1432
1428
|
}
|
|
1433
1429
|
if (type === 'component') {
|
|
1434
|
-
commit = updateComponent(newAtom,
|
|
1430
|
+
commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
|
|
1435
1431
|
}
|
|
1436
1432
|
else {
|
|
1437
|
-
commit = updateElement(newAtom,
|
|
1433
|
+
commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
|
|
1438
1434
|
}
|
|
1439
1435
|
}
|
|
1440
1436
|
commits.push(commit);
|
|
1441
|
-
const next =
|
|
1442
|
-
const prev = diffAtomIndexed.prev;
|
|
1437
|
+
const next = oldAtom.sibling;
|
|
1443
1438
|
if (!prev) {
|
|
1444
|
-
|
|
1445
|
-
if (diffAtomIndexed) {
|
|
1446
|
-
diffAtomIndexed.prev = null;
|
|
1447
|
-
}
|
|
1448
|
-
return diffAtomIndexed;
|
|
1449
|
-
}
|
|
1450
|
-
prev.next = next;
|
|
1451
|
-
if (next) {
|
|
1452
|
-
next.prev = prev;
|
|
1439
|
+
return next;
|
|
1453
1440
|
}
|
|
1441
|
+
prev.sibling = next;
|
|
1454
1442
|
return startDiffAtom;
|
|
1455
1443
|
}
|
|
1456
|
-
|
|
1444
|
+
prev = oldAtom;
|
|
1445
|
+
oldAtom = oldAtom.sibling;
|
|
1457
1446
|
}
|
|
1458
1447
|
commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
|
|
1459
1448
|
return startDiffAtom;
|
|
@@ -1489,13 +1478,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
|
|
|
1489
1478
|
host: newAtom.nativeNode,
|
|
1490
1479
|
isParent: true,
|
|
1491
1480
|
rootHost: context.rootHost
|
|
1492
|
-
}
|
|
1481
|
+
});
|
|
1493
1482
|
}
|
|
1494
1483
|
else if (oldAtom.child) {
|
|
1495
1484
|
let atom = oldAtom.child;
|
|
1496
1485
|
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1497
1486
|
while (atom) {
|
|
1498
|
-
cleanView(nativeRenderer, atom,
|
|
1487
|
+
cleanView(nativeRenderer, atom, false);
|
|
1499
1488
|
atom = atom.sibling;
|
|
1500
1489
|
}
|
|
1501
1490
|
}
|
|
@@ -1510,7 +1499,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1510
1499
|
const newTemplate = component.update(newProps);
|
|
1511
1500
|
const portalHost = component.instance.$portalHost;
|
|
1512
1501
|
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
1513
|
-
component
|
|
1502
|
+
componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
|
|
1514
1503
|
newAtom.jsxNode = component;
|
|
1515
1504
|
if (newTemplate === oldTemplate) {
|
|
1516
1505
|
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
|
|
@@ -1521,12 +1510,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1521
1510
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1522
1511
|
}
|
|
1523
1512
|
if (newAtom.child) {
|
|
1524
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context
|
|
1513
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1525
1514
|
}
|
|
1526
1515
|
else if (reusedAtom.child) {
|
|
1527
1516
|
let atom = reusedAtom.child;
|
|
1528
1517
|
while (atom) {
|
|
1529
|
-
cleanView(nativeRenderer, atom,
|
|
1518
|
+
cleanView(nativeRenderer, atom, true);
|
|
1530
1519
|
atom = atom.sibling;
|
|
1531
1520
|
}
|
|
1532
1521
|
}
|
|
@@ -1559,9 +1548,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1559
1548
|
}
|
|
1560
1549
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1561
1550
|
if (atom.nativeNode) {
|
|
1562
|
-
if (
|
|
1551
|
+
if (needClean) {
|
|
1563
1552
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1564
|
-
needClean =
|
|
1553
|
+
needClean = false;
|
|
1565
1554
|
}
|
|
1566
1555
|
if (atom.type === 'element') {
|
|
1567
1556
|
const ref = atom.jsxNode.props[refKey];
|
|
@@ -1571,7 +1560,7 @@ function cleanView(nativeRenderer, atom, needClean) {
|
|
|
1571
1560
|
let child = atom.child;
|
|
1572
1561
|
while (child) {
|
|
1573
1562
|
if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
|
|
1574
|
-
needClean =
|
|
1563
|
+
needClean = true;
|
|
1575
1564
|
}
|
|
1576
1565
|
cleanView(nativeRenderer, child, needClean);
|
|
1577
1566
|
child = child.sibling;
|
|
@@ -1584,7 +1573,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1584
1573
|
const { template, portalHost } = component.render();
|
|
1585
1574
|
from.child = createChildChain(template, from.isSvg);
|
|
1586
1575
|
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
1587
|
-
component
|
|
1576
|
+
componentViewCache.set(component, Object.assign({ atom: from }, context));
|
|
1588
1577
|
let child = from.child;
|
|
1589
1578
|
while (child) {
|
|
1590
1579
|
buildView(nativeRenderer, component, child, context);
|
|
@@ -1595,6 +1584,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1595
1584
|
function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
1596
1585
|
const atom = {
|
|
1597
1586
|
type: 'component',
|
|
1587
|
+
index: prevAtom.index + 1,
|
|
1598
1588
|
jsxNode,
|
|
1599
1589
|
sibling: null,
|
|
1600
1590
|
child: null,
|
|
@@ -1607,6 +1597,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
|
1607
1597
|
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1608
1598
|
const atom = {
|
|
1609
1599
|
type: 'text',
|
|
1600
|
+
index: prevAtom.index + 1,
|
|
1610
1601
|
jsxNode,
|
|
1611
1602
|
sibling: null,
|
|
1612
1603
|
child: null,
|
|
@@ -1620,6 +1611,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1620
1611
|
isSvg = isSvg || element.type === 'svg';
|
|
1621
1612
|
const atom = {
|
|
1622
1613
|
type: 'element',
|
|
1614
|
+
index: prevAtom.index + 1,
|
|
1623
1615
|
jsxNode: element,
|
|
1624
1616
|
sibling: null,
|
|
1625
1617
|
child: null,
|
|
@@ -1659,7 +1651,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
|
|
|
1659
1651
|
return prevAtom;
|
|
1660
1652
|
}
|
|
1661
1653
|
function createChildChain(template, isSvg) {
|
|
1662
|
-
const beforeAtom = { sibling: null };
|
|
1654
|
+
const beforeAtom = { sibling: null, index: -1 };
|
|
1663
1655
|
createChainByNode(template, beforeAtom, isSvg);
|
|
1664
1656
|
return beforeAtom.sibling;
|
|
1665
1657
|
}
|
|
@@ -1722,6 +1714,11 @@ function createTextNode(nativeRenderer, text, isSvg) {
|
|
|
1722
1714
|
return nativeRenderer.createTextNode(text, isSvg);
|
|
1723
1715
|
}
|
|
1724
1716
|
function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
|
|
1717
|
+
if (newVNode === oldVNode) {
|
|
1718
|
+
return () => {
|
|
1719
|
+
//
|
|
1720
|
+
};
|
|
1721
|
+
}
|
|
1725
1722
|
const changes = getObjectChanges(newVNode.props, oldVNode.props);
|
|
1726
1723
|
let unBindRefs;
|
|
1727
1724
|
let bindRefs;
|
|
@@ -1880,7 +1877,7 @@ function viewfly(config) {
|
|
|
1880
1877
|
return destroyed ? null : root;
|
|
1881
1878
|
};
|
|
1882
1879
|
}), function () {
|
|
1883
|
-
if (destroyed) {
|
|
1880
|
+
if (destroyed || !autoUpdate) {
|
|
1884
1881
|
return;
|
|
1885
1882
|
}
|
|
1886
1883
|
nextTick(() => {
|
package/bundles/index.js
CHANGED
|
@@ -163,6 +163,40 @@ exports.InjectFlags = void 0;
|
|
|
163
163
|
class Injector {
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
+
/**
|
|
167
|
+
* 构造函数参数装饰器,用于改变注入 token
|
|
168
|
+
*/
|
|
169
|
+
const Inject = function InjectDecorator(token) {
|
|
170
|
+
if (this instanceof Inject) {
|
|
171
|
+
this.token = token;
|
|
172
|
+
}
|
|
173
|
+
else {
|
|
174
|
+
return makeParamDecorator(Inject, new Inject(token));
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
const Self = function SelfDecorator() {
|
|
178
|
+
if (!(this instanceof Self)) {
|
|
179
|
+
return makeParamDecorator(Self, new Self());
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
const SkipSelf = function SkipSelfDecorator() {
|
|
183
|
+
if (!(this instanceof SkipSelf)) {
|
|
184
|
+
return makeParamDecorator(SkipSelf, new SkipSelf());
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
const Optional = function OptionalDecorator() {
|
|
188
|
+
if (!(this instanceof Optional)) {
|
|
189
|
+
return makeParamDecorator(Optional, new Optional());
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
const Prop = function PropDecorator(token, notFoundValue, flags) {
|
|
193
|
+
if (!(this instanceof Prop)) {
|
|
194
|
+
return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
|
|
195
|
+
instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, notFoundValue, flags);
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
|
|
166
200
|
function stringify(token) {
|
|
167
201
|
if (typeof token === 'string') {
|
|
168
202
|
return token;
|
|
@@ -207,7 +241,8 @@ class NullInjector extends Injector {
|
|
|
207
241
|
super(...arguments);
|
|
208
242
|
this.parentInjector = null;
|
|
209
243
|
}
|
|
210
|
-
|
|
244
|
+
/* eslint-disable-next-line */
|
|
245
|
+
get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
|
|
211
246
|
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
212
247
|
throw nullInjectorErrorFn(token);
|
|
213
248
|
}
|
|
@@ -215,40 +250,6 @@ class NullInjector extends Injector {
|
|
|
215
250
|
}
|
|
216
251
|
}
|
|
217
252
|
|
|
218
|
-
/**
|
|
219
|
-
* 构造函数参数装饰器,用于改变注入 token
|
|
220
|
-
*/
|
|
221
|
-
const Inject = function InjectDecorator(token) {
|
|
222
|
-
if (this instanceof Inject) {
|
|
223
|
-
this.token = token;
|
|
224
|
-
}
|
|
225
|
-
else {
|
|
226
|
-
return makeParamDecorator(Inject, new Inject(token));
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
const Self = function SelfDecorator() {
|
|
230
|
-
if (!(this instanceof Self)) {
|
|
231
|
-
return makeParamDecorator(Self, new Self());
|
|
232
|
-
}
|
|
233
|
-
};
|
|
234
|
-
const SkipSelf = function SkipSelfDecorator() {
|
|
235
|
-
if (!(this instanceof SkipSelf)) {
|
|
236
|
-
return makeParamDecorator(SkipSelf, new SkipSelf());
|
|
237
|
-
}
|
|
238
|
-
};
|
|
239
|
-
const Optional = function OptionalDecorator() {
|
|
240
|
-
if (!(this instanceof Optional)) {
|
|
241
|
-
return makeParamDecorator(Optional, new Optional());
|
|
242
|
-
}
|
|
243
|
-
};
|
|
244
|
-
const Prop = function PropDecorator(token, flags, notFoundValue = THROW_IF_NOT_FOUND) {
|
|
245
|
-
if (!(this instanceof Prop)) {
|
|
246
|
-
return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
|
|
247
|
-
instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, flags, notFoundValue);
|
|
248
|
-
});
|
|
249
|
-
}
|
|
250
|
-
};
|
|
251
|
-
|
|
252
253
|
/**
|
|
253
254
|
* 标准化 provide,并返回统一数据结构
|
|
254
255
|
* @param provider
|
|
@@ -426,15 +427,15 @@ class ReflectiveInjector extends Injector {
|
|
|
426
427
|
/**
|
|
427
428
|
* 用于获取当前注入器上下文内的实例、对象或数据
|
|
428
429
|
* @param token 访问 token
|
|
429
|
-
* @param flags 查询规则
|
|
430
430
|
* @param notFoundValue 如未查找到的返回值
|
|
431
|
+
* @param flags 查询规则
|
|
431
432
|
*/
|
|
432
|
-
get(token,
|
|
433
|
+
get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
433
434
|
var _a;
|
|
434
435
|
flags = flags || exports.InjectFlags.Default;
|
|
435
436
|
if (flags === exports.InjectFlags.SkipSelf) {
|
|
436
437
|
if (this.parentInjector) {
|
|
437
|
-
return this.parentInjector.get(token,
|
|
438
|
+
return this.parentInjector.get(token, notFoundValue);
|
|
438
439
|
}
|
|
439
440
|
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
440
441
|
return notFoundValue;
|
|
@@ -478,9 +479,12 @@ class ReflectiveInjector extends Injector {
|
|
|
478
479
|
return notFoundValue;
|
|
479
480
|
}
|
|
480
481
|
if (this.parentInjector) {
|
|
481
|
-
return this.parentInjector.get(token, flags === exports.InjectFlags.Optional ? exports.InjectFlags.Optional : exports.InjectFlags.Default
|
|
482
|
+
return this.parentInjector.get(token, notFoundValue, flags === exports.InjectFlags.Optional ? exports.InjectFlags.Optional : exports.InjectFlags.Default);
|
|
482
483
|
}
|
|
483
484
|
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
485
|
+
// if (flags === InjectFlags.Optional) {
|
|
486
|
+
// return null as U
|
|
487
|
+
// }
|
|
484
488
|
throw reflectiveInjectorErrorFn(token);
|
|
485
489
|
}
|
|
486
490
|
return notFoundValue;
|
|
@@ -510,11 +514,11 @@ class ReflectiveInjector extends Injector {
|
|
|
510
514
|
const tryValue = {};
|
|
511
515
|
const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
|
|
512
516
|
if (dep.visibility instanceof Self) {
|
|
513
|
-
reflectiveValue = this.get(injectToken, exports.InjectFlags.Self
|
|
517
|
+
reflectiveValue = this.get(injectToken, tryValue, exports.InjectFlags.Self);
|
|
514
518
|
}
|
|
515
519
|
else if (dep.visibility instanceof SkipSelf) {
|
|
516
520
|
if (this.parentInjector) {
|
|
517
|
-
reflectiveValue = this.parentInjector.get(injectToken,
|
|
521
|
+
reflectiveValue = this.parentInjector.get(injectToken, tryValue);
|
|
518
522
|
}
|
|
519
523
|
else {
|
|
520
524
|
if (dep.optional) {
|
|
@@ -527,7 +531,7 @@ class ReflectiveInjector extends Injector {
|
|
|
527
531
|
}
|
|
528
532
|
}
|
|
529
533
|
else {
|
|
530
|
-
reflectiveValue = this.get(injectToken,
|
|
534
|
+
reflectiveValue = this.get(injectToken, tryValue);
|
|
531
535
|
}
|
|
532
536
|
if (reflectiveValue === tryValue) {
|
|
533
537
|
if (dep.optional) {
|
|
@@ -589,13 +593,13 @@ function getArrayChanges(left, right) {
|
|
|
589
593
|
return changes;
|
|
590
594
|
}
|
|
591
595
|
function classToString(config) {
|
|
592
|
-
if (!config) {
|
|
593
|
-
return '';
|
|
594
|
-
}
|
|
595
596
|
if (typeof config === 'string') {
|
|
596
597
|
return config;
|
|
597
598
|
}
|
|
598
|
-
|
|
599
|
+
if (!config) {
|
|
600
|
+
return '';
|
|
601
|
+
}
|
|
602
|
+
if (Array.isArray(config)) {
|
|
599
603
|
const classes = [];
|
|
600
604
|
for (const i of config) {
|
|
601
605
|
const v = classToString(i);
|
|
@@ -605,7 +609,7 @@ function classToString(config) {
|
|
|
605
609
|
}
|
|
606
610
|
return classes.join(' ');
|
|
607
611
|
}
|
|
608
|
-
|
|
612
|
+
if (typeof config === 'object') {
|
|
609
613
|
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
610
614
|
return config.toString();
|
|
611
615
|
}
|
|
@@ -659,7 +663,11 @@ class Component extends ReflectiveInjector {
|
|
|
659
663
|
}
|
|
660
664
|
constructor(parentComponent, type, props, key) {
|
|
661
665
|
const annotation = type.annotation || {};
|
|
662
|
-
|
|
666
|
+
const providers = annotation.providers || [];
|
|
667
|
+
super(parentComponent, [...providers, {
|
|
668
|
+
provide: Injector,
|
|
669
|
+
useFactory: () => this
|
|
670
|
+
}], annotation.scope);
|
|
663
671
|
this.parentComponent = parentComponent;
|
|
664
672
|
this.type = type;
|
|
665
673
|
this.props = props;
|
|
@@ -735,30 +743,32 @@ class Component extends ReflectiveInjector {
|
|
|
735
743
|
};
|
|
736
744
|
}
|
|
737
745
|
update(newProps, forceUpdate = false) {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
746
|
+
if (!forceUpdate) {
|
|
747
|
+
const { add, remove, replace } = getObjectChanges(newProps, this.props);
|
|
748
|
+
if (add.length || remove.length || replace.length) {
|
|
749
|
+
this.invokePropsChangedHooks(newProps);
|
|
750
|
+
}
|
|
751
|
+
else if (!this.dirty) {
|
|
752
|
+
this.props = newProps;
|
|
753
|
+
return this.template;
|
|
754
|
+
}
|
|
755
|
+
const newRefs = toRefs(newProps.ref);
|
|
756
|
+
if (this.refs) {
|
|
757
|
+
for (const oldRef of this.refs) {
|
|
758
|
+
if (!newRefs.includes(oldRef)) {
|
|
759
|
+
oldRef.unBind(this.instance);
|
|
760
|
+
}
|
|
751
761
|
}
|
|
752
762
|
}
|
|
763
|
+
for (const newRef of newRefs) {
|
|
764
|
+
newRef.bind(this.instance);
|
|
765
|
+
}
|
|
766
|
+
if (newRefs.length) {
|
|
767
|
+
this.refs = newRefs;
|
|
768
|
+
}
|
|
753
769
|
}
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
}
|
|
757
|
-
if (newRefs.length) {
|
|
758
|
-
this.refs = newRefs;
|
|
759
|
-
}
|
|
760
|
-
if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
|
|
761
|
-
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
770
|
+
if (typeof this.instance.$useMemo === 'function') {
|
|
771
|
+
if (this.instance.$useMemo(newProps, this.props)) {
|
|
762
772
|
return this.template;
|
|
763
773
|
}
|
|
764
774
|
}
|
|
@@ -841,7 +851,12 @@ class Component extends ReflectiveInjector {
|
|
|
841
851
|
}
|
|
842
852
|
}
|
|
843
853
|
if (unmountedCallbacks.length) {
|
|
844
|
-
this.unmountedCallbacks
|
|
854
|
+
if (this.unmountedCallbacks) {
|
|
855
|
+
this.unmountedCallbacks.push(...unmountedCallbacks);
|
|
856
|
+
}
|
|
857
|
+
else {
|
|
858
|
+
this.unmountedCallbacks = unmountedCallbacks;
|
|
859
|
+
}
|
|
845
860
|
}
|
|
846
861
|
this.mountCallbacks = null;
|
|
847
862
|
}
|
|
@@ -1230,9 +1245,9 @@ function withAnnotation(annotation, componentSetup) {
|
|
|
1230
1245
|
/**
|
|
1231
1246
|
* 通过组件上下文获取 IoC 容器内数据的勾子方法
|
|
1232
1247
|
*/
|
|
1233
|
-
function inject(token,
|
|
1248
|
+
function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
1234
1249
|
const component = getSetupContext();
|
|
1235
|
-
return component.get(token,
|
|
1250
|
+
return component.get(token, notFoundValue, flags);
|
|
1236
1251
|
}
|
|
1237
1252
|
/**
|
|
1238
1253
|
* 获取当前组件实例
|
|
@@ -1270,6 +1285,7 @@ function withMemo(canUseMemo, render) {
|
|
|
1270
1285
|
};
|
|
1271
1286
|
}
|
|
1272
1287
|
|
|
1288
|
+
const componentViewCache = new WeakMap();
|
|
1273
1289
|
const listenerReg = /^on(?=[A-Z])/;
|
|
1274
1290
|
function createRenderer(component, nativeRenderer) {
|
|
1275
1291
|
let isInit = true;
|
|
@@ -1278,6 +1294,7 @@ function createRenderer(component, nativeRenderer) {
|
|
|
1278
1294
|
isInit = false;
|
|
1279
1295
|
const atom = {
|
|
1280
1296
|
type: 'component',
|
|
1297
|
+
index: 0,
|
|
1281
1298
|
jsxNode: component,
|
|
1282
1299
|
sibling: null,
|
|
1283
1300
|
child: null,
|
|
@@ -1347,7 +1364,7 @@ function updateView(nativeRenderer, component) {
|
|
|
1347
1364
|
}
|
|
1348
1365
|
}
|
|
1349
1366
|
function applyChanges(nativeRenderer, component) {
|
|
1350
|
-
const { atom, host, isParent, rootHost } = component
|
|
1367
|
+
const { atom, host, isParent, rootHost } = componentViewCache.get(component);
|
|
1351
1368
|
const diffAtom = atom.child;
|
|
1352
1369
|
const template = component.update(component.props, true);
|
|
1353
1370
|
atom.child = createChildChain(template, atom.isSvg);
|
|
@@ -1356,58 +1373,35 @@ function applyChanges(nativeRenderer, component) {
|
|
|
1356
1373
|
isParent,
|
|
1357
1374
|
rootHost
|
|
1358
1375
|
};
|
|
1359
|
-
diff(nativeRenderer, component, atom.child, diffAtom, context
|
|
1376
|
+
diff(nativeRenderer, component, atom.child, diffAtom, context);
|
|
1360
1377
|
const next = atom.sibling;
|
|
1361
1378
|
if (next && next.jsxNode instanceof Component) {
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
}
|
|
1366
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
|
|
1367
|
-
let prevDiffAtom = null;
|
|
1368
|
-
let firstDiffAtomIndexed = null;
|
|
1369
|
-
if (oldAtom) {
|
|
1370
|
-
prevDiffAtom = {
|
|
1371
|
-
index,
|
|
1372
|
-
atom: oldAtom,
|
|
1373
|
-
prev: null
|
|
1374
|
-
};
|
|
1375
|
-
index++;
|
|
1376
|
-
firstDiffAtomIndexed = prevDiffAtom;
|
|
1377
|
-
oldAtom = oldAtom.sibling;
|
|
1378
|
-
while (oldAtom) {
|
|
1379
|
-
const diffAtom = {
|
|
1380
|
-
index,
|
|
1381
|
-
atom: oldAtom,
|
|
1382
|
-
prev: prevDiffAtom
|
|
1383
|
-
};
|
|
1384
|
-
prevDiffAtom.next = diffAtom;
|
|
1385
|
-
prevDiffAtom = diffAtom;
|
|
1386
|
-
oldAtom = oldAtom.sibling;
|
|
1387
|
-
index++;
|
|
1388
|
-
}
|
|
1379
|
+
const view = componentViewCache.get(next.jsxNode);
|
|
1380
|
+
view.host = context.host;
|
|
1381
|
+
view.isParent = context.isParent;
|
|
1389
1382
|
}
|
|
1383
|
+
}
|
|
1384
|
+
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
|
|
1390
1385
|
const commits = [];
|
|
1391
1386
|
function changeOffset() {
|
|
1392
1387
|
offset++;
|
|
1393
1388
|
}
|
|
1394
1389
|
while (newAtom) {
|
|
1395
|
-
|
|
1390
|
+
oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
|
|
1396
1391
|
newAtom = newAtom.sibling;
|
|
1397
|
-
expectIndex++;
|
|
1398
1392
|
}
|
|
1399
|
-
let dirtyDiffAtom =
|
|
1393
|
+
let dirtyDiffAtom = oldAtom;
|
|
1400
1394
|
while (dirtyDiffAtom) {
|
|
1401
|
-
cleanView(nativeRenderer, dirtyDiffAtom
|
|
1402
|
-
dirtyDiffAtom = dirtyDiffAtom.
|
|
1395
|
+
cleanView(nativeRenderer, dirtyDiffAtom, true);
|
|
1396
|
+
dirtyDiffAtom = dirtyDiffAtom.sibling;
|
|
1403
1397
|
}
|
|
1404
1398
|
let offset = 0;
|
|
1405
1399
|
for (let i = 0; i < commits.length; i++) {
|
|
1406
1400
|
const commit = commits[i];
|
|
1407
|
-
while (
|
|
1408
|
-
if (
|
|
1401
|
+
while (oldAtom) {
|
|
1402
|
+
if (oldAtom.index <= i) {
|
|
1409
1403
|
offset--;
|
|
1410
|
-
|
|
1404
|
+
oldAtom = oldAtom.sibling;
|
|
1411
1405
|
continue;
|
|
1412
1406
|
}
|
|
1413
1407
|
break;
|
|
@@ -1415,47 +1409,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
|
|
|
1415
1409
|
commit(offset);
|
|
1416
1410
|
}
|
|
1417
1411
|
}
|
|
1418
|
-
function createChanges(newAtom,
|
|
1419
|
-
const startDiffAtom =
|
|
1412
|
+
function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
|
|
1413
|
+
const startDiffAtom = oldAtom;
|
|
1420
1414
|
const { jsxNode: newJsxNode, type } = newAtom;
|
|
1421
1415
|
const key = newJsxNode.key;
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1416
|
+
let prev = null;
|
|
1417
|
+
while (oldAtom) {
|
|
1418
|
+
const diffIndex = oldAtom.index;
|
|
1419
|
+
if (type === oldAtom.type) {
|
|
1425
1420
|
let commit;
|
|
1426
1421
|
if (type === 'text') {
|
|
1427
|
-
commit = updateText(newAtom,
|
|
1422
|
+
commit = updateText(newAtom, oldAtom, nativeRenderer, context);
|
|
1428
1423
|
}
|
|
1429
1424
|
else {
|
|
1430
|
-
const { key: diffKey, type: diffType } =
|
|
1425
|
+
const { key: diffKey, type: diffType } = oldAtom.jsxNode;
|
|
1431
1426
|
if (diffKey !== key || newJsxNode.type !== diffType) {
|
|
1432
|
-
|
|
1427
|
+
prev = oldAtom;
|
|
1428
|
+
oldAtom = oldAtom.sibling;
|
|
1433
1429
|
continue;
|
|
1434
1430
|
}
|
|
1435
1431
|
if (type === 'component') {
|
|
1436
|
-
commit = updateComponent(newAtom,
|
|
1432
|
+
commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
|
|
1437
1433
|
}
|
|
1438
1434
|
else {
|
|
1439
|
-
commit = updateElement(newAtom,
|
|
1435
|
+
commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
|
|
1440
1436
|
}
|
|
1441
1437
|
}
|
|
1442
1438
|
commits.push(commit);
|
|
1443
|
-
const next =
|
|
1444
|
-
const prev = diffAtomIndexed.prev;
|
|
1439
|
+
const next = oldAtom.sibling;
|
|
1445
1440
|
if (!prev) {
|
|
1446
|
-
|
|
1447
|
-
if (diffAtomIndexed) {
|
|
1448
|
-
diffAtomIndexed.prev = null;
|
|
1449
|
-
}
|
|
1450
|
-
return diffAtomIndexed;
|
|
1451
|
-
}
|
|
1452
|
-
prev.next = next;
|
|
1453
|
-
if (next) {
|
|
1454
|
-
next.prev = prev;
|
|
1441
|
+
return next;
|
|
1455
1442
|
}
|
|
1443
|
+
prev.sibling = next;
|
|
1456
1444
|
return startDiffAtom;
|
|
1457
1445
|
}
|
|
1458
|
-
|
|
1446
|
+
prev = oldAtom;
|
|
1447
|
+
oldAtom = oldAtom.sibling;
|
|
1459
1448
|
}
|
|
1460
1449
|
commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
|
|
1461
1450
|
return startDiffAtom;
|
|
@@ -1491,13 +1480,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
|
|
|
1491
1480
|
host: newAtom.nativeNode,
|
|
1492
1481
|
isParent: true,
|
|
1493
1482
|
rootHost: context.rootHost
|
|
1494
|
-
}
|
|
1483
|
+
});
|
|
1495
1484
|
}
|
|
1496
1485
|
else if (oldAtom.child) {
|
|
1497
1486
|
let atom = oldAtom.child;
|
|
1498
1487
|
nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
|
|
1499
1488
|
while (atom) {
|
|
1500
|
-
cleanView(nativeRenderer, atom,
|
|
1489
|
+
cleanView(nativeRenderer, atom, false);
|
|
1501
1490
|
atom = atom.sibling;
|
|
1502
1491
|
}
|
|
1503
1492
|
}
|
|
@@ -1512,7 +1501,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1512
1501
|
const newTemplate = component.update(newProps);
|
|
1513
1502
|
const portalHost = component.instance.$portalHost;
|
|
1514
1503
|
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
1515
|
-
component
|
|
1504
|
+
componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
|
|
1516
1505
|
newAtom.jsxNode = component;
|
|
1517
1506
|
if (newTemplate === oldTemplate) {
|
|
1518
1507
|
reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
|
|
@@ -1523,12 +1512,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
|
|
|
1523
1512
|
newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
|
|
1524
1513
|
}
|
|
1525
1514
|
if (newAtom.child) {
|
|
1526
|
-
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context
|
|
1515
|
+
diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
|
|
1527
1516
|
}
|
|
1528
1517
|
else if (reusedAtom.child) {
|
|
1529
1518
|
let atom = reusedAtom.child;
|
|
1530
1519
|
while (atom) {
|
|
1531
|
-
cleanView(nativeRenderer, atom,
|
|
1520
|
+
cleanView(nativeRenderer, atom, true);
|
|
1532
1521
|
atom = atom.sibling;
|
|
1533
1522
|
}
|
|
1534
1523
|
}
|
|
@@ -1561,9 +1550,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
|
|
|
1561
1550
|
}
|
|
1562
1551
|
function cleanView(nativeRenderer, atom, needClean) {
|
|
1563
1552
|
if (atom.nativeNode) {
|
|
1564
|
-
if (
|
|
1553
|
+
if (needClean) {
|
|
1565
1554
|
nativeRenderer.remove(atom.nativeNode, atom.isSvg);
|
|
1566
|
-
needClean =
|
|
1555
|
+
needClean = false;
|
|
1567
1556
|
}
|
|
1568
1557
|
if (atom.type === 'element') {
|
|
1569
1558
|
const ref = atom.jsxNode.props[refKey];
|
|
@@ -1573,7 +1562,7 @@ function cleanView(nativeRenderer, atom, needClean) {
|
|
|
1573
1562
|
let child = atom.child;
|
|
1574
1563
|
while (child) {
|
|
1575
1564
|
if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
|
|
1576
|
-
needClean =
|
|
1565
|
+
needClean = true;
|
|
1577
1566
|
}
|
|
1578
1567
|
cleanView(nativeRenderer, child, needClean);
|
|
1579
1568
|
child = child.sibling;
|
|
@@ -1586,7 +1575,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1586
1575
|
const { template, portalHost } = component.render();
|
|
1587
1576
|
from.child = createChildChain(template, from.isSvg);
|
|
1588
1577
|
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
1589
|
-
component
|
|
1578
|
+
componentViewCache.set(component, Object.assign({ atom: from }, context));
|
|
1590
1579
|
let child = from.child;
|
|
1591
1580
|
while (child) {
|
|
1592
1581
|
buildView(nativeRenderer, component, child, context);
|
|
@@ -1597,6 +1586,7 @@ function componentRender(nativeRenderer, component, from, context) {
|
|
|
1597
1586
|
function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
1598
1587
|
const atom = {
|
|
1599
1588
|
type: 'component',
|
|
1589
|
+
index: prevAtom.index + 1,
|
|
1600
1590
|
jsxNode,
|
|
1601
1591
|
sibling: null,
|
|
1602
1592
|
child: null,
|
|
@@ -1609,6 +1599,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
|
|
|
1609
1599
|
function createChainByJSXText(jsxNode, prevAtom, isSvg) {
|
|
1610
1600
|
const atom = {
|
|
1611
1601
|
type: 'text',
|
|
1602
|
+
index: prevAtom.index + 1,
|
|
1612
1603
|
jsxNode,
|
|
1613
1604
|
sibling: null,
|
|
1614
1605
|
child: null,
|
|
@@ -1622,6 +1613,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
|
|
|
1622
1613
|
isSvg = isSvg || element.type === 'svg';
|
|
1623
1614
|
const atom = {
|
|
1624
1615
|
type: 'element',
|
|
1616
|
+
index: prevAtom.index + 1,
|
|
1625
1617
|
jsxNode: element,
|
|
1626
1618
|
sibling: null,
|
|
1627
1619
|
child: null,
|
|
@@ -1661,7 +1653,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
|
|
|
1661
1653
|
return prevAtom;
|
|
1662
1654
|
}
|
|
1663
1655
|
function createChildChain(template, isSvg) {
|
|
1664
|
-
const beforeAtom = { sibling: null };
|
|
1656
|
+
const beforeAtom = { sibling: null, index: -1 };
|
|
1665
1657
|
createChainByNode(template, beforeAtom, isSvg);
|
|
1666
1658
|
return beforeAtom.sibling;
|
|
1667
1659
|
}
|
|
@@ -1724,6 +1716,11 @@ function createTextNode(nativeRenderer, text, isSvg) {
|
|
|
1724
1716
|
return nativeRenderer.createTextNode(text, isSvg);
|
|
1725
1717
|
}
|
|
1726
1718
|
function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
|
|
1719
|
+
if (newVNode === oldVNode) {
|
|
1720
|
+
return () => {
|
|
1721
|
+
//
|
|
1722
|
+
};
|
|
1723
|
+
}
|
|
1727
1724
|
const changes = getObjectChanges(newVNode.props, oldVNode.props);
|
|
1728
1725
|
let unBindRefs;
|
|
1729
1726
|
let bindRefs;
|
|
@@ -1882,7 +1879,7 @@ function viewfly(config) {
|
|
|
1882
1879
|
return destroyed ? null : root;
|
|
1883
1880
|
};
|
|
1884
1881
|
}), function () {
|
|
1885
|
-
if (destroyed) {
|
|
1882
|
+
if (destroyed || !autoUpdate) {
|
|
1886
1883
|
return;
|
|
1887
1884
|
}
|
|
1888
1885
|
nextTick(() => {
|
package/jsx-runtime/index.d.ts
CHANGED
|
@@ -7,4 +7,15 @@ 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 {
|
|
12
|
+
}
|
|
13
|
+
interface IntrinsicElements extends JSXInternal.IntrinsicElements {
|
|
14
|
+
}
|
|
15
|
+
interface IntrinsicAttributes extends JSXInternal.IntrinsicAttributes {
|
|
16
|
+
}
|
|
17
|
+
interface ElementChildrenAttribute extends JSXInternal.ElementChildrenAttribute {
|
|
18
|
+
}
|
|
19
|
+
interface IntrinsicClassAttributes<T> extends JSXInternal.IntrinsicClassAttributes<T> {
|
|
20
|
+
}
|
|
10
21
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.10",
|
|
4
4
|
"description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"bugs": {
|
|
48
48
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "2ffc5cb30c6509aa4a5c6b0c3fe228dacd7e08de",
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"reflect-metadata": "^0.
|
|
52
|
+
"reflect-metadata": "^0.2.2"
|
|
53
53
|
}
|
|
54
54
|
}
|