@viewfly/core 2.0.0 → 2.2.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/README.md +67 -4
- package/dist/_utils/make-error.d.ts +1 -0
- package/dist/base/_api.d.ts +13 -0
- package/dist/base/_utils.d.ts +46 -0
- package/dist/base/component.d.ts +65 -0
- package/dist/base/context.d.ts +42 -0
- package/dist/base/dep.d.ts +9 -0
- package/dist/base/injection-tokens.d.ts +20 -0
- package/dist/base/jsx-element.d.ts +64 -0
- package/dist/base/lifecycle.d.ts +37 -0
- package/dist/base/memo.d.ts +8 -0
- package/dist/base/ref.d.ts +44 -0
- package/dist/base/renderer.d.ts +4 -0
- package/dist/base/root.component.d.ts +9 -0
- package/dist/base/types.d.ts +32 -0
- package/dist/di/_api.d.ts +10 -0
- package/dist/di/forward-ref.d.ts +10 -0
- package/dist/di/injectable.d.ts +20 -0
- package/dist/di/injection-token.d.ts +8 -0
- package/dist/di/injector.d.ts +26 -0
- package/dist/di/metadata.d.ts +43 -0
- package/dist/di/null-injector.d.ts +6 -0
- package/dist/di/provider.d.ts +30 -0
- package/dist/di/reflective-injector.d.ts +30 -0
- package/dist/di/reflective-provider.d.ts +20 -0
- package/dist/di/type.d.ts +7 -0
- package/dist/di/utils/_api.d.ts +3 -0
- package/dist/di/utils/annotations.d.ts +33 -0
- package/dist/di/utils/decorators.d.ts +17 -0
- package/dist/di/utils/stringify.d.ts +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.esm.js +2243 -0
- package/dist/index.js +2322 -0
- package/dist/jsx-runtime/index.d.ts +7 -0
- package/dist/jsx-runtime/index.esm.js +2 -0
- package/dist/jsx-runtime/index.js +26 -0
- package/dist/jsx-runtime.d.ts +7 -0
- package/dist/reactive/_api.d.ts +5 -0
- package/dist/reactive/_help.d.ts +15 -0
- package/dist/reactive/array-handlers.d.ts +30 -0
- package/dist/reactive/computed.d.ts +4 -0
- package/dist/reactive/effect.d.ts +13 -0
- package/dist/reactive/iterable-iterator.d.ts +5 -0
- package/dist/reactive/map-handlers.d.ts +12 -0
- package/dist/reactive/reactive.d.ts +89 -0
- package/dist/reactive/set-handlers.d.ts +11 -0
- package/dist/reactive/shallow-reactive.d.ts +6 -0
- package/dist/reactive/watch.d.ts +1 -0
- package/dist/signals/_api.d.ts +3 -0
- package/dist/signals/derived.d.ts +9 -0
- package/dist/signals/effect.d.ts +22 -0
- package/dist/signals/signal.d.ts +38 -0
- package/dist/viewfly.d.ts +30 -0
- package/package.json +25 -25
- package/bundles/index.d.ts +0 -722
- package/bundles/index.esm.js +0 -2621
- package/bundles/index.js +0 -2695
- package/jsx-runtime/index.d.ts +0 -25
- package/jsx-runtime/index.esm.js +0 -11
- package/jsx-runtime/index.js +0 -14
- package/jsx-runtime/package.json +0 -29
- package/rollup-d.config.ts +0 -14
package/bundles/index.js
DELETED
|
@@ -1,2695 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
require('reflect-metadata');
|
|
4
|
-
|
|
5
|
-
class ForwardRef {
|
|
6
|
-
constructor(forwardRefFn) {
|
|
7
|
-
Object.defineProperty(this, "forwardRefFn", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
configurable: true,
|
|
10
|
-
writable: true,
|
|
11
|
-
value: forwardRefFn
|
|
12
|
-
});
|
|
13
|
-
}
|
|
14
|
-
getRef() {
|
|
15
|
-
return this.forwardRefFn();
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* 引用后声明的类的工具函数
|
|
20
|
-
* @param fn
|
|
21
|
-
*/
|
|
22
|
-
function forwardRef(fn) {
|
|
23
|
-
return new ForwardRef(fn);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* 用于保存 class 的元数据
|
|
28
|
-
*/
|
|
29
|
-
class Annotations {
|
|
30
|
-
constructor() {
|
|
31
|
-
Object.defineProperty(this, "classes", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
configurable: true,
|
|
34
|
-
writable: true,
|
|
35
|
-
value: new Map()
|
|
36
|
-
});
|
|
37
|
-
Object.defineProperty(this, "props", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
configurable: true,
|
|
40
|
-
writable: true,
|
|
41
|
-
value: new Map()
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(this, "params", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true,
|
|
46
|
-
writable: true,
|
|
47
|
-
value: new Map()
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
setClassMetadata(token, params) {
|
|
51
|
-
this.classes.set(token, params);
|
|
52
|
-
}
|
|
53
|
-
getClassMetadata(token) {
|
|
54
|
-
return this.classes.get(token);
|
|
55
|
-
}
|
|
56
|
-
pushParamMetadata(token, params) {
|
|
57
|
-
if (this.params.has(token)) {
|
|
58
|
-
this.params.get(token).push(params);
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
this.params.set(token, [params]);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
getParamMetadata(token) {
|
|
65
|
-
return this.params.get(token);
|
|
66
|
-
}
|
|
67
|
-
getPropMetadataKeys() {
|
|
68
|
-
return Array.from(this.props.keys());
|
|
69
|
-
}
|
|
70
|
-
pushPropMetadata(token, params) {
|
|
71
|
-
if (this.props.has(token)) {
|
|
72
|
-
this.props.get(token).push(params);
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
this.props.set(token, [params]);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
getPropMetadata(token) {
|
|
79
|
-
return this.props.get(token);
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
/**
|
|
84
|
-
* 创建参数装饰器的工厂函数
|
|
85
|
-
*/
|
|
86
|
-
function makeParamDecorator(token, metadata) {
|
|
87
|
-
return function (target, propertyKey, parameterIndex) {
|
|
88
|
-
const annotations = getAnnotations(target);
|
|
89
|
-
annotations.pushParamMetadata(token, {
|
|
90
|
-
propertyKey: propertyKey,
|
|
91
|
-
parameterIndex,
|
|
92
|
-
metadata
|
|
93
|
-
});
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
/**
|
|
97
|
-
* 创建属性装饰器的工厂函数
|
|
98
|
-
*/
|
|
99
|
-
function makePropertyDecorator(token, injectToken, contextCallback) {
|
|
100
|
-
return function (target, propertyKey) {
|
|
101
|
-
const annotations = getAnnotations(target.constructor);
|
|
102
|
-
annotations.pushPropMetadata(token, {
|
|
103
|
-
injectToken: injectToken || Reflect.getMetadata('design:type', target, propertyKey),
|
|
104
|
-
propertyKey,
|
|
105
|
-
contextCallback
|
|
106
|
-
});
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* 创建类装饰器的工厂函数
|
|
111
|
-
*/
|
|
112
|
-
function makeClassDecorator(token, metadata) {
|
|
113
|
-
return function (target) {
|
|
114
|
-
const annotations = getAnnotations(target);
|
|
115
|
-
annotations.setClassMetadata(token, {
|
|
116
|
-
paramTypes: Reflect.getMetadata('design:paramtypes', target),
|
|
117
|
-
metadata
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
/**
|
|
122
|
-
* 获取类注解的工具函数
|
|
123
|
-
*/
|
|
124
|
-
function getAnnotations(target) {
|
|
125
|
-
const key = '__annotations__';
|
|
126
|
-
// eslint-disable-next-line no-prototype-builtins
|
|
127
|
-
if (!target.hasOwnProperty(key)) {
|
|
128
|
-
target[key] = new Annotations();
|
|
129
|
-
}
|
|
130
|
-
return target[key];
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
class Scope {
|
|
134
|
-
constructor(name) {
|
|
135
|
-
Object.defineProperty(this, "name", {
|
|
136
|
-
enumerable: true,
|
|
137
|
-
configurable: true,
|
|
138
|
-
writable: true,
|
|
139
|
-
value: name
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
toString() {
|
|
143
|
-
return this.name || '[anonymous provide scope]';
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
/**
|
|
147
|
-
* 可注入类的装饰器
|
|
148
|
-
*/
|
|
149
|
-
const Injectable = function InjectableDecorator(options) {
|
|
150
|
-
if (this instanceof InjectableDecorator) {
|
|
151
|
-
this.provideIn = (options === null || options === void 0 ? void 0 : options.provideIn) || null;
|
|
152
|
-
}
|
|
153
|
-
else {
|
|
154
|
-
return makeClassDecorator(Injectable, new Injectable(options));
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* 生成自定义依赖注入 token 的类
|
|
160
|
-
*/
|
|
161
|
-
/* eslint-disable-next-line */
|
|
162
|
-
class InjectionToken {
|
|
163
|
-
constructor(description) {
|
|
164
|
-
Object.defineProperty(this, "description", {
|
|
165
|
-
enumerable: true,
|
|
166
|
-
configurable: true,
|
|
167
|
-
writable: true,
|
|
168
|
-
value: description
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
toString() {
|
|
172
|
-
return this.description || '[anonymous injection token]';
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
/**
|
|
177
|
-
* 查找规则
|
|
178
|
-
*/
|
|
179
|
-
exports.InjectFlags = void 0;
|
|
180
|
-
(function (InjectFlags) {
|
|
181
|
-
/** 默认查找规则 */
|
|
182
|
-
InjectFlags["Default"] = "Default";
|
|
183
|
-
/** 锁定当前容器 */
|
|
184
|
-
InjectFlags["Self"] = "Self";
|
|
185
|
-
/** 跳过当前容器 */
|
|
186
|
-
InjectFlags["SkipSelf"] = "SkipSelf";
|
|
187
|
-
/** 可选查找 */
|
|
188
|
-
InjectFlags["Optional"] = "Optional";
|
|
189
|
-
})(exports.InjectFlags || (exports.InjectFlags = {}));
|
|
190
|
-
/**
|
|
191
|
-
* DI 容器抽象基类
|
|
192
|
-
*/
|
|
193
|
-
class Injector {
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* 构造函数参数装饰器,用于改变注入 token
|
|
198
|
-
*/
|
|
199
|
-
const Inject = function InjectDecorator(token) {
|
|
200
|
-
if (this instanceof Inject) {
|
|
201
|
-
this.token = token;
|
|
202
|
-
}
|
|
203
|
-
else {
|
|
204
|
-
return makeParamDecorator(Inject, new Inject(token));
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
const Self = function SelfDecorator() {
|
|
208
|
-
if (!(this instanceof Self)) {
|
|
209
|
-
return makeParamDecorator(Self, new Self());
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
const SkipSelf = function SkipSelfDecorator() {
|
|
213
|
-
if (!(this instanceof SkipSelf)) {
|
|
214
|
-
return makeParamDecorator(SkipSelf, new SkipSelf());
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
const Optional = function OptionalDecorator() {
|
|
218
|
-
if (!(this instanceof Optional)) {
|
|
219
|
-
return makeParamDecorator(Optional, new Optional());
|
|
220
|
-
}
|
|
221
|
-
};
|
|
222
|
-
const Prop = function PropDecorator(token, notFoundValue, flags) {
|
|
223
|
-
if (!(this instanceof Prop)) {
|
|
224
|
-
return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
|
|
225
|
-
instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, notFoundValue, flags);
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
|
-
};
|
|
229
|
-
|
|
230
|
-
function stringify(token) {
|
|
231
|
-
if (typeof token === 'string') {
|
|
232
|
-
return token;
|
|
233
|
-
}
|
|
234
|
-
if (Array.isArray(token)) {
|
|
235
|
-
return '[' + token.map(stringify).join(', ') + ']';
|
|
236
|
-
}
|
|
237
|
-
if (token == null) {
|
|
238
|
-
return '' + token;
|
|
239
|
-
}
|
|
240
|
-
if (token.name) {
|
|
241
|
-
return `${token.name}`;
|
|
242
|
-
}
|
|
243
|
-
if (token.token) {
|
|
244
|
-
return `${token.token}`;
|
|
245
|
-
}
|
|
246
|
-
const res = token.toString();
|
|
247
|
-
if (res == null) {
|
|
248
|
-
return '' + res;
|
|
249
|
-
}
|
|
250
|
-
const newLineIndex = res.indexOf('\n');
|
|
251
|
-
return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
function makeError(name) {
|
|
255
|
-
return function viewflyError(message) {
|
|
256
|
-
const error = new Error(message);
|
|
257
|
-
error.name = `[ViewflyError: ${name}]`;
|
|
258
|
-
error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
|
|
259
|
-
return error;
|
|
260
|
-
};
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
const THROW_IF_NOT_FOUND = {
|
|
264
|
-
__debug_value__: 'THROW_IF_NOT_FOUND'
|
|
265
|
-
};
|
|
266
|
-
const nullInjectorErrorFn = (token) => {
|
|
267
|
-
return makeError('NullInjector')(`No provide for \`${stringify(token)}\`!`);
|
|
268
|
-
};
|
|
269
|
-
class NullInjector {
|
|
270
|
-
constructor() {
|
|
271
|
-
Object.defineProperty(this, "parentInjector", {
|
|
272
|
-
enumerable: true,
|
|
273
|
-
configurable: true,
|
|
274
|
-
writable: true,
|
|
275
|
-
value: null
|
|
276
|
-
});
|
|
277
|
-
}
|
|
278
|
-
/* eslint-disable-next-line */
|
|
279
|
-
get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
|
|
280
|
-
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
281
|
-
throw nullInjectorErrorFn(token);
|
|
282
|
-
}
|
|
283
|
-
return notFoundValue;
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
/**
|
|
288
|
-
* 标准化 provide,并返回统一数据结构
|
|
289
|
-
* @param provider
|
|
290
|
-
*/
|
|
291
|
-
function normalizeProvider(provider) {
|
|
292
|
-
if (provider.useValue) {
|
|
293
|
-
return normalizeValueProviderFactory(provider);
|
|
294
|
-
}
|
|
295
|
-
if (provider.useClass) {
|
|
296
|
-
return normalizeClassProviderFactory(provider);
|
|
297
|
-
}
|
|
298
|
-
if (provider.useExisting) {
|
|
299
|
-
return normalizeExistingProviderFactory(provider);
|
|
300
|
-
}
|
|
301
|
-
if (provider.useFactory) {
|
|
302
|
-
return normalizeFactoryProviderFactory(provider);
|
|
303
|
-
}
|
|
304
|
-
if (provider.provide) {
|
|
305
|
-
if (provider.provide instanceof InjectionToken) {
|
|
306
|
-
return normalizeValueProviderFactory(provider);
|
|
307
|
-
}
|
|
308
|
-
return normalizeConstructorProviderFactory(provider);
|
|
309
|
-
}
|
|
310
|
-
return normalizeTypeProviderFactory(provider);
|
|
311
|
-
}
|
|
312
|
-
function normalizeValueProviderFactory(provider) {
|
|
313
|
-
return {
|
|
314
|
-
provide: provider.provide,
|
|
315
|
-
scope: null,
|
|
316
|
-
generateFactory() {
|
|
317
|
-
return function () {
|
|
318
|
-
return provider.useValue;
|
|
319
|
-
};
|
|
320
|
-
},
|
|
321
|
-
deps: []
|
|
322
|
-
};
|
|
323
|
-
}
|
|
324
|
-
function normalizeClassProviderFactory(provider) {
|
|
325
|
-
let deps;
|
|
326
|
-
let provideIn = null;
|
|
327
|
-
if (provider.deps) {
|
|
328
|
-
deps = normalizeDeps(provider.provide, provider.deps);
|
|
329
|
-
}
|
|
330
|
-
else {
|
|
331
|
-
const resolvedClass = resolveClassParams(provider.useClass);
|
|
332
|
-
provideIn = resolvedClass.scope;
|
|
333
|
-
deps = normalizeDeps(provider.provide, resolvedClass.deps);
|
|
334
|
-
}
|
|
335
|
-
return {
|
|
336
|
-
provide: provider.provide,
|
|
337
|
-
scope: provideIn,
|
|
338
|
-
deps,
|
|
339
|
-
generateFactory(injector, cacheFn) {
|
|
340
|
-
return function (...args) {
|
|
341
|
-
const instance = new provider.useClass(...args);
|
|
342
|
-
cacheFn(provider.provide, instance);
|
|
343
|
-
const propMetadataKeys = getAnnotations(provider.useClass).getPropMetadataKeys();
|
|
344
|
-
propMetadataKeys.forEach(key => {
|
|
345
|
-
const propsMetadata = getAnnotations(provider.useClass).getPropMetadata(key);
|
|
346
|
-
propsMetadata.forEach(item => {
|
|
347
|
-
item.contextCallback(instance, item.propertyKey, item.injectToken, injector);
|
|
348
|
-
});
|
|
349
|
-
});
|
|
350
|
-
return instance;
|
|
351
|
-
};
|
|
352
|
-
}
|
|
353
|
-
};
|
|
354
|
-
}
|
|
355
|
-
function normalizeExistingProviderFactory(provider) {
|
|
356
|
-
return {
|
|
357
|
-
provide: provider.provide,
|
|
358
|
-
scope: null,
|
|
359
|
-
generateFactory(injector) {
|
|
360
|
-
return function () {
|
|
361
|
-
return injector.get(provider.useExisting);
|
|
362
|
-
};
|
|
363
|
-
},
|
|
364
|
-
deps: []
|
|
365
|
-
};
|
|
366
|
-
}
|
|
367
|
-
function normalizeFactoryProviderFactory(provider) {
|
|
368
|
-
return {
|
|
369
|
-
provide: provider.provide,
|
|
370
|
-
scope: null,
|
|
371
|
-
generateFactory() {
|
|
372
|
-
return function (...args) {
|
|
373
|
-
return provider.useFactory(...args);
|
|
374
|
-
};
|
|
375
|
-
},
|
|
376
|
-
deps: normalizeDeps(provider.provide, provider.deps || [])
|
|
377
|
-
};
|
|
378
|
-
}
|
|
379
|
-
function normalizeConstructorProviderFactory(provider) {
|
|
380
|
-
return normalizeClassProviderFactory(Object.assign(Object.assign({}, provider), { useClass: provider.provide }));
|
|
381
|
-
}
|
|
382
|
-
function normalizeTypeProviderFactory(provider) {
|
|
383
|
-
return normalizeClassProviderFactory({
|
|
384
|
-
provide: provider,
|
|
385
|
-
useClass: provider
|
|
386
|
-
});
|
|
387
|
-
}
|
|
388
|
-
function resolveClassParams(construct) {
|
|
389
|
-
const annotations = getAnnotations(construct);
|
|
390
|
-
const metadata = annotations.getClassMetadata(Injectable);
|
|
391
|
-
if (typeof metadata === 'undefined') {
|
|
392
|
-
throw new Error(`Class \`${stringify(construct)}\` is not injectable!`);
|
|
393
|
-
}
|
|
394
|
-
const deps = (metadata.paramTypes || []).map(i => [i]);
|
|
395
|
-
const metadataKeys = [Inject, Self, SkipSelf, Optional];
|
|
396
|
-
metadataKeys.forEach(key => {
|
|
397
|
-
(annotations.getParamMetadata(key) || []).forEach(item => {
|
|
398
|
-
deps[item.parameterIndex].push(item.metadata);
|
|
399
|
-
});
|
|
400
|
-
});
|
|
401
|
-
return {
|
|
402
|
-
scope: metadata.metadata.provideIn,
|
|
403
|
-
deps
|
|
404
|
-
};
|
|
405
|
-
}
|
|
406
|
-
function normalizeDeps(provide, deps) {
|
|
407
|
-
return deps.map((dep, index) => {
|
|
408
|
-
const r = {
|
|
409
|
-
injectKey: null,
|
|
410
|
-
optional: false,
|
|
411
|
-
visibility: null
|
|
412
|
-
};
|
|
413
|
-
if (!Array.isArray(dep)) {
|
|
414
|
-
r.injectKey = dep;
|
|
415
|
-
}
|
|
416
|
-
else {
|
|
417
|
-
for (let i = 0; i < dep.length; i++) {
|
|
418
|
-
const item = dep[i];
|
|
419
|
-
if (item instanceof Inject) {
|
|
420
|
-
r.injectKey = item.token;
|
|
421
|
-
}
|
|
422
|
-
else if (item instanceof Self || item instanceof SkipSelf) {
|
|
423
|
-
r.visibility = item;
|
|
424
|
-
}
|
|
425
|
-
else if (item instanceof Optional) {
|
|
426
|
-
r.optional = true;
|
|
427
|
-
}
|
|
428
|
-
else {
|
|
429
|
-
r.injectKey = item;
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
if (typeof r.injectKey === 'undefined') {
|
|
434
|
-
/* eslint-disable max-len */
|
|
435
|
-
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]) {}\``);
|
|
436
|
-
}
|
|
437
|
-
return r;
|
|
438
|
-
});
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
const reflectiveInjectorErrorFn = (token) => {
|
|
442
|
-
return makeError('ReflectiveInjector')(`No provide for \`${stringify(token)}\`!`);
|
|
443
|
-
};
|
|
444
|
-
const provideScopeError = (token) => {
|
|
445
|
-
return makeError('ProvideScope')(`Can not found provide scope \`${stringify(token)}\`!`);
|
|
446
|
-
};
|
|
447
|
-
/**
|
|
448
|
-
* 反射注入器
|
|
449
|
-
*/
|
|
450
|
-
class ReflectiveInjector {
|
|
451
|
-
constructor(parentInjector, staticProviders, scope) {
|
|
452
|
-
Object.defineProperty(this, "parentInjector", {
|
|
453
|
-
enumerable: true,
|
|
454
|
-
configurable: true,
|
|
455
|
-
writable: true,
|
|
456
|
-
value: parentInjector
|
|
457
|
-
});
|
|
458
|
-
Object.defineProperty(this, "scope", {
|
|
459
|
-
enumerable: true,
|
|
460
|
-
configurable: true,
|
|
461
|
-
writable: true,
|
|
462
|
-
value: scope
|
|
463
|
-
});
|
|
464
|
-
Object.defineProperty(this, "normalizedProviders", {
|
|
465
|
-
enumerable: true,
|
|
466
|
-
configurable: true,
|
|
467
|
-
writable: true,
|
|
468
|
-
value: void 0
|
|
469
|
-
});
|
|
470
|
-
Object.defineProperty(this, "recordValues", {
|
|
471
|
-
enumerable: true,
|
|
472
|
-
configurable: true,
|
|
473
|
-
writable: true,
|
|
474
|
-
value: new Map()
|
|
475
|
-
});
|
|
476
|
-
this.normalizedProviders = staticProviders.map(provide => {
|
|
477
|
-
return normalizeProvider(provide);
|
|
478
|
-
});
|
|
479
|
-
}
|
|
480
|
-
/**
|
|
481
|
-
* 用于获取当前注入器上下文内的实例、对象或数据
|
|
482
|
-
* @param token 访问 token
|
|
483
|
-
* @param notFoundValue 如未查找到的返回值
|
|
484
|
-
* @param flags 查询规则
|
|
485
|
-
*/
|
|
486
|
-
get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
487
|
-
var _a;
|
|
488
|
-
flags = flags || exports.InjectFlags.Default;
|
|
489
|
-
if (flags === exports.InjectFlags.SkipSelf) {
|
|
490
|
-
if (this.parentInjector) {
|
|
491
|
-
return this.parentInjector.get(token, notFoundValue);
|
|
492
|
-
}
|
|
493
|
-
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
494
|
-
return notFoundValue;
|
|
495
|
-
}
|
|
496
|
-
throw reflectiveInjectorErrorFn(token);
|
|
497
|
-
}
|
|
498
|
-
if (this.recordValues.has(token)) {
|
|
499
|
-
return this.recordValues.get(token);
|
|
500
|
-
}
|
|
501
|
-
for (let i = 0; i < this.normalizedProviders.length; i++) {
|
|
502
|
-
const normalizedProvider = this.normalizedProviders[i];
|
|
503
|
-
if (normalizedProvider.provide === token) {
|
|
504
|
-
return this.getValue(token, normalizedProvider);
|
|
505
|
-
}
|
|
506
|
-
}
|
|
507
|
-
if (!(token instanceof InjectionToken)) {
|
|
508
|
-
const scope = (_a = getAnnotations(token).getClassMetadata(Injectable)) === null || _a === void 0 ? void 0 : _a.metadata.provideIn;
|
|
509
|
-
if (scope) {
|
|
510
|
-
const normalizedProvider = normalizeProvider(token);
|
|
511
|
-
if (this.scope === scope) {
|
|
512
|
-
this.normalizedProviders.push(normalizedProvider);
|
|
513
|
-
return this.getValue(token, normalizedProvider);
|
|
514
|
-
}
|
|
515
|
-
const parentInjector = this.parentInjector;
|
|
516
|
-
if (!parentInjector || parentInjector instanceof NullInjector) {
|
|
517
|
-
if (normalizedProvider.scope === 'root') {
|
|
518
|
-
this.normalizedProviders.push(normalizedProvider);
|
|
519
|
-
return this.getValue(token, normalizedProvider);
|
|
520
|
-
}
|
|
521
|
-
if (notFoundValue !== THROW_IF_NOT_FOUND) {
|
|
522
|
-
return notFoundValue;
|
|
523
|
-
}
|
|
524
|
-
throw provideScopeError(normalizedProvider.scope);
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
|
-
}
|
|
528
|
-
if (flags === exports.InjectFlags.Self) {
|
|
529
|
-
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
530
|
-
throw reflectiveInjectorErrorFn(token);
|
|
531
|
-
}
|
|
532
|
-
return notFoundValue;
|
|
533
|
-
}
|
|
534
|
-
if (this.parentInjector) {
|
|
535
|
-
return this.parentInjector.get(token, notFoundValue, flags === exports.InjectFlags.Optional ? exports.InjectFlags.Optional : exports.InjectFlags.Default);
|
|
536
|
-
}
|
|
537
|
-
if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
538
|
-
// if (flags === InjectFlags.Optional) {
|
|
539
|
-
// return null as U
|
|
540
|
-
// }
|
|
541
|
-
throw reflectiveInjectorErrorFn(token);
|
|
542
|
-
}
|
|
543
|
-
return notFoundValue;
|
|
544
|
-
}
|
|
545
|
-
getValue(token, normalizedProvider) {
|
|
546
|
-
const { generateFactory, deps } = normalizedProvider;
|
|
547
|
-
const params = this.resolveDeps(deps);
|
|
548
|
-
let value = this.recordValues.get(token);
|
|
549
|
-
if (value) {
|
|
550
|
-
return value;
|
|
551
|
-
}
|
|
552
|
-
const factory = generateFactory(this, (token, value) => {
|
|
553
|
-
this.recordValues.set(token, value);
|
|
554
|
-
});
|
|
555
|
-
value = factory(...params);
|
|
556
|
-
this.recordValues.set(token, value);
|
|
557
|
-
return value;
|
|
558
|
-
}
|
|
559
|
-
/**
|
|
560
|
-
* 解决并获取依赖参数
|
|
561
|
-
* @param deps 依赖规则
|
|
562
|
-
* @private
|
|
563
|
-
*/
|
|
564
|
-
resolveDeps(deps) {
|
|
565
|
-
return deps.map(dep => {
|
|
566
|
-
let reflectiveValue;
|
|
567
|
-
const tryValue = {};
|
|
568
|
-
const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
|
|
569
|
-
if (dep.visibility instanceof Self) {
|
|
570
|
-
reflectiveValue = this.get(injectToken, tryValue, exports.InjectFlags.Self);
|
|
571
|
-
}
|
|
572
|
-
else if (dep.visibility instanceof SkipSelf) {
|
|
573
|
-
if (this.parentInjector) {
|
|
574
|
-
reflectiveValue = this.parentInjector.get(injectToken, tryValue);
|
|
575
|
-
}
|
|
576
|
-
else {
|
|
577
|
-
if (dep.optional) {
|
|
578
|
-
// if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
579
|
-
// return null
|
|
580
|
-
// }
|
|
581
|
-
return null;
|
|
582
|
-
}
|
|
583
|
-
throw reflectiveInjectorErrorFn(injectToken);
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
else {
|
|
587
|
-
reflectiveValue = this.get(injectToken, tryValue);
|
|
588
|
-
}
|
|
589
|
-
if (reflectiveValue === tryValue) {
|
|
590
|
-
if (dep.optional) {
|
|
591
|
-
// if (notFoundValue === THROW_IF_NOT_FOUND) {
|
|
592
|
-
// return null
|
|
593
|
-
// }
|
|
594
|
-
// return notFoundValue
|
|
595
|
-
return null;
|
|
596
|
-
}
|
|
597
|
-
throw reflectiveInjectorErrorFn(injectToken);
|
|
598
|
-
}
|
|
599
|
-
return reflectiveValue;
|
|
600
|
-
});
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
const Type = Function;
|
|
605
|
-
|
|
606
|
-
/**
|
|
607
|
-
* 当组件第一次渲染完成时触发
|
|
608
|
-
* @param callback
|
|
609
|
-
* ```tsx
|
|
610
|
-
* function App() {
|
|
611
|
-
* onMount(() => {
|
|
612
|
-
* console.log('App mounted!')
|
|
613
|
-
* })
|
|
614
|
-
* return () => <div>...</div>
|
|
615
|
-
* }
|
|
616
|
-
* ```
|
|
617
|
-
*/
|
|
618
|
-
function onMounted(callback) {
|
|
619
|
-
const component = getSetupContext();
|
|
620
|
-
if (!component.mountCallbacks) {
|
|
621
|
-
component.mountCallbacks = [];
|
|
622
|
-
}
|
|
623
|
-
component.mountCallbacks.push(callback);
|
|
624
|
-
}
|
|
625
|
-
/**
|
|
626
|
-
* 当组件视图更新后调用
|
|
627
|
-
* @param callback
|
|
628
|
-
* ```tsx
|
|
629
|
-
* function App() {
|
|
630
|
-
* onUpdated(() => {
|
|
631
|
-
* console.log('App updated!')
|
|
632
|
-
* return () => {
|
|
633
|
-
* console.log('destroy prev update!')
|
|
634
|
-
* }
|
|
635
|
-
* })
|
|
636
|
-
* return () => <div>...</div>
|
|
637
|
-
* }
|
|
638
|
-
* ```
|
|
639
|
-
*/
|
|
640
|
-
function onUpdated(callback) {
|
|
641
|
-
const component = getSetupContext();
|
|
642
|
-
if (!component.updatedCallbacks) {
|
|
643
|
-
component.updatedCallbacks = [];
|
|
644
|
-
}
|
|
645
|
-
component.updatedCallbacks.push(callback);
|
|
646
|
-
return () => {
|
|
647
|
-
const index = component.updatedCallbacks.indexOf(callback);
|
|
648
|
-
if (index > -1) {
|
|
649
|
-
component.updatedCallbacks.splice(index, 1);
|
|
650
|
-
}
|
|
651
|
-
};
|
|
652
|
-
}
|
|
653
|
-
/**
|
|
654
|
-
* 当组件销毁时调用回调函数
|
|
655
|
-
* @param callback
|
|
656
|
-
*/
|
|
657
|
-
function onUnmounted(callback) {
|
|
658
|
-
const component = getSetupContext();
|
|
659
|
-
if (!component.unmountedCallbacks) {
|
|
660
|
-
component.unmountedCallbacks = [];
|
|
661
|
-
}
|
|
662
|
-
component.unmountedCallbacks.push(callback);
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
class DynamicRef {
|
|
666
|
-
constructor(callback) {
|
|
667
|
-
Object.defineProperty(this, "callback", {
|
|
668
|
-
enumerable: true,
|
|
669
|
-
configurable: true,
|
|
670
|
-
writable: true,
|
|
671
|
-
value: callback
|
|
672
|
-
});
|
|
673
|
-
Object.defineProperty(this, "unBindMap", {
|
|
674
|
-
enumerable: true,
|
|
675
|
-
configurable: true,
|
|
676
|
-
writable: true,
|
|
677
|
-
value: new Map()
|
|
678
|
-
});
|
|
679
|
-
Object.defineProperty(this, "targetCaches", {
|
|
680
|
-
enumerable: true,
|
|
681
|
-
configurable: true,
|
|
682
|
-
writable: true,
|
|
683
|
-
value: new Set()
|
|
684
|
-
});
|
|
685
|
-
}
|
|
686
|
-
bind(value) {
|
|
687
|
-
if (typeof value !== 'object' || value === null) {
|
|
688
|
-
return;
|
|
689
|
-
}
|
|
690
|
-
if (this.targetCaches.has(value)) {
|
|
691
|
-
return;
|
|
692
|
-
}
|
|
693
|
-
const unBindFn = this.callback(value);
|
|
694
|
-
if (typeof unBindFn === 'function') {
|
|
695
|
-
this.unBindMap.set(value, unBindFn);
|
|
696
|
-
}
|
|
697
|
-
this.targetCaches.add(value);
|
|
698
|
-
}
|
|
699
|
-
unBind(value) {
|
|
700
|
-
this.targetCaches.delete(value);
|
|
701
|
-
const unBindFn = this.unBindMap.get(value);
|
|
702
|
-
this.unBindMap.delete(value);
|
|
703
|
-
if (typeof unBindFn === 'function') {
|
|
704
|
-
unBindFn();
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
/**
|
|
709
|
-
* 用于节点渲染完成时获取 DOM 节点
|
|
710
|
-
* @param callback 获取 DOM 节点的回调函数
|
|
711
|
-
* @example
|
|
712
|
-
* ```tsx
|
|
713
|
-
* function App() {
|
|
714
|
-
* const ref = createDynamicRef(node => {
|
|
715
|
-
* function fn() {
|
|
716
|
-
* // do something...
|
|
717
|
-
* }
|
|
718
|
-
* node.addEventListener('click', fn)
|
|
719
|
-
* return () => {
|
|
720
|
-
* node.removeEventListener('click', fn)
|
|
721
|
-
* }
|
|
722
|
-
* })
|
|
723
|
-
* return () => {
|
|
724
|
-
* return <div ref={ref}>xxx</div>
|
|
725
|
-
* }
|
|
726
|
-
* }
|
|
727
|
-
* ```
|
|
728
|
-
*/
|
|
729
|
-
function createDynamicRef(callback) {
|
|
730
|
-
return new DynamicRef(callback);
|
|
731
|
-
}
|
|
732
|
-
class StaticRef extends DynamicRef {
|
|
733
|
-
get current() {
|
|
734
|
-
return this._current;
|
|
735
|
-
}
|
|
736
|
-
constructor() {
|
|
737
|
-
super(v => {
|
|
738
|
-
this._current = v;
|
|
739
|
-
return () => {
|
|
740
|
-
this._current = null;
|
|
741
|
-
};
|
|
742
|
-
});
|
|
743
|
-
Object.defineProperty(this, "_current", {
|
|
744
|
-
enumerable: true,
|
|
745
|
-
configurable: true,
|
|
746
|
-
writable: true,
|
|
747
|
-
value: null
|
|
748
|
-
});
|
|
749
|
-
}
|
|
750
|
-
}
|
|
751
|
-
function createRef() {
|
|
752
|
-
return new StaticRef();
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
const toStr = Object.prototype.toString;
|
|
756
|
-
function getStringType(v) {
|
|
757
|
-
return toStr.call(v);
|
|
758
|
-
}
|
|
759
|
-
function isArray(v) {
|
|
760
|
-
return Array.isArray(v);
|
|
761
|
-
}
|
|
762
|
-
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
763
|
-
function hasOwn(target, key) {
|
|
764
|
-
return hasOwnProperty.call(target, key);
|
|
765
|
-
}
|
|
766
|
-
|
|
767
|
-
class Dep {
|
|
768
|
-
constructor(effect) {
|
|
769
|
-
Object.defineProperty(this, "effect", {
|
|
770
|
-
enumerable: true,
|
|
771
|
-
configurable: true,
|
|
772
|
-
writable: true,
|
|
773
|
-
value: effect
|
|
774
|
-
});
|
|
775
|
-
Object.defineProperty(this, "destroyCallbacks", {
|
|
776
|
-
enumerable: true,
|
|
777
|
-
configurable: true,
|
|
778
|
-
writable: true,
|
|
779
|
-
value: []
|
|
780
|
-
});
|
|
781
|
-
}
|
|
782
|
-
destroy() {
|
|
783
|
-
this.destroyCallbacks.forEach(callback => callback());
|
|
784
|
-
this.destroyCallbacks = [];
|
|
785
|
-
}
|
|
786
|
-
}
|
|
787
|
-
const deps = [];
|
|
788
|
-
function getDepContext() {
|
|
789
|
-
return deps.at(-1);
|
|
790
|
-
}
|
|
791
|
-
function pushDepContext(dep) {
|
|
792
|
-
deps.push(dep);
|
|
793
|
-
}
|
|
794
|
-
function popDepContext() {
|
|
795
|
-
deps.pop();
|
|
796
|
-
}
|
|
797
|
-
|
|
798
|
-
const subscribers = new WeakMap();
|
|
799
|
-
function getSubscriber(target) {
|
|
800
|
-
let subscriber = subscribers.get(target);
|
|
801
|
-
if (!subscriber) {
|
|
802
|
-
subscriber = new Map();
|
|
803
|
-
subscribers.set(target, subscriber);
|
|
804
|
-
}
|
|
805
|
-
return subscriber;
|
|
806
|
-
}
|
|
807
|
-
exports.TrackOpTypes = void 0;
|
|
808
|
-
(function (TrackOpTypes) {
|
|
809
|
-
TrackOpTypes["Get"] = "Get";
|
|
810
|
-
TrackOpTypes["Has"] = "Has";
|
|
811
|
-
TrackOpTypes["Iterate"] = "Iterate";
|
|
812
|
-
})(exports.TrackOpTypes || (exports.TrackOpTypes = {}));
|
|
813
|
-
exports.TriggerOpTypes = void 0;
|
|
814
|
-
(function (TriggerOpTypes) {
|
|
815
|
-
TriggerOpTypes["Set"] = "Set";
|
|
816
|
-
TriggerOpTypes["Add"] = "Add";
|
|
817
|
-
TriggerOpTypes["Delete"] = "Delete";
|
|
818
|
-
TriggerOpTypes["Clear"] = "Clear";
|
|
819
|
-
})(exports.TriggerOpTypes || (exports.TriggerOpTypes = {}));
|
|
820
|
-
const unKnownKey = Symbol('unKnownKey');
|
|
821
|
-
function track(target, type, key = unKnownKey) {
|
|
822
|
-
const dep = getDepContext();
|
|
823
|
-
if (dep) {
|
|
824
|
-
const subscriber = getSubscriber(target);
|
|
825
|
-
let record = subscriber.get(type);
|
|
826
|
-
if (!record) {
|
|
827
|
-
record = new Map();
|
|
828
|
-
subscriber.set(type, record);
|
|
829
|
-
}
|
|
830
|
-
let effects = record.get(key);
|
|
831
|
-
if (!effects) {
|
|
832
|
-
effects = new Set([dep]);
|
|
833
|
-
record.set(key, effects);
|
|
834
|
-
dep.destroyCallbacks.push(() => {
|
|
835
|
-
effects.delete(dep);
|
|
836
|
-
});
|
|
837
|
-
}
|
|
838
|
-
else if (!effects.has(dep)) {
|
|
839
|
-
dep.destroyCallbacks.push(() => {
|
|
840
|
-
effects.delete(dep);
|
|
841
|
-
});
|
|
842
|
-
effects.add(dep);
|
|
843
|
-
}
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
function runEffect(key, record) {
|
|
847
|
-
if (!record) {
|
|
848
|
-
return;
|
|
849
|
-
}
|
|
850
|
-
const effects = record.get(key);
|
|
851
|
-
if (effects) {
|
|
852
|
-
const fns = [...effects];
|
|
853
|
-
fns.forEach(i => i.effect());
|
|
854
|
-
}
|
|
855
|
-
}
|
|
856
|
-
function trigger(target, type, key = unKnownKey) {
|
|
857
|
-
const subscriber = getSubscriber(target);
|
|
858
|
-
if (subscriber) {
|
|
859
|
-
switch (type) {
|
|
860
|
-
case exports.TriggerOpTypes.Set:
|
|
861
|
-
if (isArray(target)) {
|
|
862
|
-
const iterateRecord = subscriber.get(exports.TrackOpTypes.Iterate);
|
|
863
|
-
runEffect(unKnownKey, iterateRecord);
|
|
864
|
-
}
|
|
865
|
-
runEffect(key, subscriber.get(exports.TrackOpTypes.Get));
|
|
866
|
-
runEffect(key, subscriber.get(exports.TrackOpTypes.Has));
|
|
867
|
-
break;
|
|
868
|
-
case exports.TriggerOpTypes.Add:
|
|
869
|
-
case exports.TriggerOpTypes.Clear:
|
|
870
|
-
case exports.TriggerOpTypes.Delete:
|
|
871
|
-
{
|
|
872
|
-
const iterateRecord = subscriber.get(exports.TrackOpTypes.Iterate);
|
|
873
|
-
runEffect(unKnownKey, iterateRecord);
|
|
874
|
-
runEffect(key, subscriber.get(exports.TrackOpTypes.Has));
|
|
875
|
-
runEffect(key, subscriber.get(exports.TrackOpTypes.Get));
|
|
876
|
-
}
|
|
877
|
-
break;
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
}
|
|
881
|
-
|
|
882
|
-
function createIterableIterator(wrapper) {
|
|
883
|
-
return {
|
|
884
|
-
*entries() {
|
|
885
|
-
const target = toRaw(this);
|
|
886
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
887
|
-
for (const [key, value] of target.entries()) {
|
|
888
|
-
yield [wrapper(key), wrapper(value)];
|
|
889
|
-
}
|
|
890
|
-
},
|
|
891
|
-
*keys() {
|
|
892
|
-
const target = toRaw(this);
|
|
893
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
894
|
-
for (const item of target.keys()) {
|
|
895
|
-
yield wrapper(item);
|
|
896
|
-
}
|
|
897
|
-
},
|
|
898
|
-
*values() {
|
|
899
|
-
const target = toRaw(this);
|
|
900
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
901
|
-
for (const item of target.values()) {
|
|
902
|
-
yield wrapper(item);
|
|
903
|
-
}
|
|
904
|
-
}
|
|
905
|
-
};
|
|
906
|
-
}
|
|
907
|
-
|
|
908
|
-
function applyPredicateMethod(self, methodName, predicate, wrapper, thisArg) {
|
|
909
|
-
const target = toRaw(self);
|
|
910
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
911
|
-
return target[methodName]((value, index, array) => {
|
|
912
|
-
return predicate.call(target, wrapper(value), index, array);
|
|
913
|
-
}, thisArg);
|
|
914
|
-
}
|
|
915
|
-
function applySearchMethod(self, methodName, args) {
|
|
916
|
-
const target = toRaw(self);
|
|
917
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
918
|
-
return target[methodName](...args.map(toRaw));
|
|
919
|
-
}
|
|
920
|
-
function createArrayHandlers(wrapper) {
|
|
921
|
-
return Object.assign({ concat(...items) {
|
|
922
|
-
const target = toRaw(this);
|
|
923
|
-
trigger(target, exports.TriggerOpTypes.Add);
|
|
924
|
-
return target.concat(...items);
|
|
925
|
-
},
|
|
926
|
-
every(predicate, thisArg) {
|
|
927
|
-
return applyPredicateMethod(this, 'every', predicate, wrapper, thisArg);
|
|
928
|
-
},
|
|
929
|
-
filter(predicate, thisArg) {
|
|
930
|
-
return applyPredicateMethod(this, 'filter', predicate, wrapper, thisArg);
|
|
931
|
-
},
|
|
932
|
-
find(predicate, thisArg) {
|
|
933
|
-
return applyPredicateMethod(this, 'find', predicate, wrapper, thisArg);
|
|
934
|
-
},
|
|
935
|
-
findIndex(predicate, thisArg) {
|
|
936
|
-
return applyPredicateMethod(this, 'findIndex', predicate, wrapper, thisArg);
|
|
937
|
-
},
|
|
938
|
-
findLast(predicate, thisArg) {
|
|
939
|
-
return applyPredicateMethod(this, 'findLast', predicate, wrapper, thisArg);
|
|
940
|
-
},
|
|
941
|
-
findLastIndex(predicate, thisArg) {
|
|
942
|
-
return applyPredicateMethod(this, 'findLastIndex', predicate, wrapper, thisArg);
|
|
943
|
-
},
|
|
944
|
-
forEach(callbackfn, thisArg) {
|
|
945
|
-
return applyPredicateMethod(this, 'forEach', callbackfn, wrapper, thisArg);
|
|
946
|
-
},
|
|
947
|
-
includes(...args) {
|
|
948
|
-
return applySearchMethod(this, 'includes', args);
|
|
949
|
-
},
|
|
950
|
-
indexOf(...args) {
|
|
951
|
-
return applySearchMethod(this, 'indexOf', args);
|
|
952
|
-
},
|
|
953
|
-
join(separator) {
|
|
954
|
-
const target = toRaw(this);
|
|
955
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
956
|
-
return target.join(separator);
|
|
957
|
-
},
|
|
958
|
-
lastIndexOf(...args) {
|
|
959
|
-
return applySearchMethod(this, 'lastIndexOf', args);
|
|
960
|
-
},
|
|
961
|
-
map(callbackFn, thisArg) {
|
|
962
|
-
return applyPredicateMethod(this, 'map', callbackFn, wrapper, thisArg);
|
|
963
|
-
},
|
|
964
|
-
pop() {
|
|
965
|
-
const target = toRaw(this);
|
|
966
|
-
trigger(target, exports.TriggerOpTypes.Delete);
|
|
967
|
-
return target.pop();
|
|
968
|
-
},
|
|
969
|
-
push(...items) {
|
|
970
|
-
const target = toRaw(this);
|
|
971
|
-
trigger(target, exports.TriggerOpTypes.Add);
|
|
972
|
-
return target.push(...items);
|
|
973
|
-
},
|
|
974
|
-
reduce(callbackFn, ...args) {
|
|
975
|
-
const target = toRaw(this);
|
|
976
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
977
|
-
return target.reduce((p, c, i, a) => {
|
|
978
|
-
if (args.length > 0) {
|
|
979
|
-
return callbackFn(p, wrapper(c), i, a);
|
|
980
|
-
}
|
|
981
|
-
return callbackFn(wrapper(p), wrapper(c), i, a);
|
|
982
|
-
}, ...args);
|
|
983
|
-
},
|
|
984
|
-
reduceRight(callbackFn, ...args) {
|
|
985
|
-
const target = toRaw(this);
|
|
986
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
987
|
-
return target.reduceRight((p, c, i, a) => {
|
|
988
|
-
if (args.length > 0) {
|
|
989
|
-
return callbackFn(p, wrapper(c), i, a);
|
|
990
|
-
}
|
|
991
|
-
return callbackFn(wrapper(p), wrapper(c), i, a);
|
|
992
|
-
}, ...args);
|
|
993
|
-
},
|
|
994
|
-
shift() {
|
|
995
|
-
const target = toRaw(this);
|
|
996
|
-
trigger(target, exports.TriggerOpTypes.Delete);
|
|
997
|
-
return target.shift();
|
|
998
|
-
},
|
|
999
|
-
some(predicate, thisArg) {
|
|
1000
|
-
return applyPredicateMethod(this, 'some', predicate, thisArg);
|
|
1001
|
-
},
|
|
1002
|
-
splice(start, deleteCount) {
|
|
1003
|
-
const target = toRaw(this);
|
|
1004
|
-
trigger(target, exports.TriggerOpTypes.Set);
|
|
1005
|
-
trigger(target, exports.TriggerOpTypes.Add);
|
|
1006
|
-
trigger(target, exports.TriggerOpTypes.Delete);
|
|
1007
|
-
return target.splice(start, deleteCount).map(i => wrapper(i));
|
|
1008
|
-
},
|
|
1009
|
-
toReversed() {
|
|
1010
|
-
const target = toRaw(this);
|
|
1011
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
1012
|
-
return target.toReversed();
|
|
1013
|
-
},
|
|
1014
|
-
toSorted(compareFn) {
|
|
1015
|
-
const target = toRaw(this);
|
|
1016
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
1017
|
-
return target.toSorted(compareFn);
|
|
1018
|
-
},
|
|
1019
|
-
toSpliced(start, deleteCount, ...items) {
|
|
1020
|
-
const target = toRaw(this);
|
|
1021
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
1022
|
-
return target.toSpliced(start, deleteCount, ...items);
|
|
1023
|
-
},
|
|
1024
|
-
unshift(...items) {
|
|
1025
|
-
const target = toRaw(this);
|
|
1026
|
-
trigger(target, exports.TriggerOpTypes.Add);
|
|
1027
|
-
return target.unshift(...items);
|
|
1028
|
-
},
|
|
1029
|
-
[Symbol.iterator]() {
|
|
1030
|
-
return this.values();
|
|
1031
|
-
} }, createIterableIterator(wrapper));
|
|
1032
|
-
}
|
|
1033
|
-
|
|
1034
|
-
function createMapHandlers(wrapper) {
|
|
1035
|
-
return Object.assign({ get(key) {
|
|
1036
|
-
const target = toRaw(this);
|
|
1037
|
-
track(target, exports.TrackOpTypes.Get, key);
|
|
1038
|
-
return wrapper(target.get(key));
|
|
1039
|
-
},
|
|
1040
|
-
set(key, value) {
|
|
1041
|
-
const target = toRaw(this);
|
|
1042
|
-
key = toRaw(key);
|
|
1043
|
-
value = toRaw(value);
|
|
1044
|
-
const has = target.has(key);
|
|
1045
|
-
const r = target.set(key, value);
|
|
1046
|
-
trigger(target, has ? exports.TriggerOpTypes.Set : exports.TriggerOpTypes.Add, key);
|
|
1047
|
-
return r;
|
|
1048
|
-
},
|
|
1049
|
-
has(key) {
|
|
1050
|
-
const target = toRaw(this);
|
|
1051
|
-
key = toRaw(key);
|
|
1052
|
-
track(target, exports.TrackOpTypes.Has, key);
|
|
1053
|
-
return target.has(key);
|
|
1054
|
-
},
|
|
1055
|
-
delete(key) {
|
|
1056
|
-
const target = toRaw(this);
|
|
1057
|
-
key = toRaw(key);
|
|
1058
|
-
const r = target.delete(key);
|
|
1059
|
-
trigger(target, exports.TriggerOpTypes.Delete, key);
|
|
1060
|
-
return r;
|
|
1061
|
-
},
|
|
1062
|
-
forEach(callbackFn, thisArg) {
|
|
1063
|
-
const target = toRaw(this);
|
|
1064
|
-
track(target, exports.TrackOpTypes.Iterate, undefined);
|
|
1065
|
-
target.forEach((v, k, m) => {
|
|
1066
|
-
callbackFn.call(this, wrapper(v), wrapper(k), m);
|
|
1067
|
-
}, thisArg);
|
|
1068
|
-
},
|
|
1069
|
-
clear() {
|
|
1070
|
-
const target = toRaw(this);
|
|
1071
|
-
target.clear();
|
|
1072
|
-
trigger(target, exports.TriggerOpTypes.Clear, undefined);
|
|
1073
|
-
},
|
|
1074
|
-
[Symbol.iterator]() {
|
|
1075
|
-
return this.entries();
|
|
1076
|
-
} }, createIterableIterator(wrapper));
|
|
1077
|
-
}
|
|
1078
|
-
|
|
1079
|
-
function createSetHandlers(wrapper) {
|
|
1080
|
-
return Object.assign({ add(value) {
|
|
1081
|
-
const target = toRaw(this);
|
|
1082
|
-
value = toRaw(value);
|
|
1083
|
-
if (!target.has(value)) {
|
|
1084
|
-
target.add(value);
|
|
1085
|
-
trigger(target, exports.TriggerOpTypes.Add, undefined);
|
|
1086
|
-
}
|
|
1087
|
-
return this;
|
|
1088
|
-
},
|
|
1089
|
-
delete(value) {
|
|
1090
|
-
const target = toRaw(this);
|
|
1091
|
-
value = toRaw(value);
|
|
1092
|
-
const has = target.has(value);
|
|
1093
|
-
const b = target.delete(value);
|
|
1094
|
-
if (!has) {
|
|
1095
|
-
trigger(target, exports.TriggerOpTypes.Delete, undefined);
|
|
1096
|
-
}
|
|
1097
|
-
return b;
|
|
1098
|
-
},
|
|
1099
|
-
has(key) {
|
|
1100
|
-
const target = toRaw(this);
|
|
1101
|
-
key = toRaw(key);
|
|
1102
|
-
track(target, exports.TrackOpTypes.Has, key);
|
|
1103
|
-
return target.has(key);
|
|
1104
|
-
},
|
|
1105
|
-
forEach(callbackFn, thisArg) {
|
|
1106
|
-
const target = toRaw(this);
|
|
1107
|
-
track(target, exports.TrackOpTypes.Iterate, undefined);
|
|
1108
|
-
target.forEach((v, k, m) => {
|
|
1109
|
-
callbackFn.call(this, wrapper(v), wrapper(k), m);
|
|
1110
|
-
}, thisArg);
|
|
1111
|
-
},
|
|
1112
|
-
clear() {
|
|
1113
|
-
const target = toRaw(this);
|
|
1114
|
-
const size = target.size;
|
|
1115
|
-
if (size !== 0) {
|
|
1116
|
-
target.clear();
|
|
1117
|
-
trigger(target, exports.TriggerOpTypes.Clear, undefined);
|
|
1118
|
-
}
|
|
1119
|
-
},
|
|
1120
|
-
[Symbol.iterator]() {
|
|
1121
|
-
return this.values();
|
|
1122
|
-
} }, createIterableIterator(wrapper));
|
|
1123
|
-
}
|
|
1124
|
-
|
|
1125
|
-
const reactiveErrorFn = makeError('reactive');
|
|
1126
|
-
const rawToProxyCache = new WeakMap();
|
|
1127
|
-
const proxyToRawCache = new WeakMap();
|
|
1128
|
-
function toRaw(value) {
|
|
1129
|
-
if (proxyToRawCache.has(value)) {
|
|
1130
|
-
return proxyToRawCache.get(value);
|
|
1131
|
-
}
|
|
1132
|
-
return value;
|
|
1133
|
-
}
|
|
1134
|
-
function isReactive(value) {
|
|
1135
|
-
return proxyToRawCache.has(value);
|
|
1136
|
-
}
|
|
1137
|
-
let fromInternalWrite = false;
|
|
1138
|
-
function internalWrite(fn) {
|
|
1139
|
-
fromInternalWrite = true;
|
|
1140
|
-
fn();
|
|
1141
|
-
fromInternalWrite = false;
|
|
1142
|
-
}
|
|
1143
|
-
class ObjectReactiveHandler {
|
|
1144
|
-
constructor(config) {
|
|
1145
|
-
Object.defineProperty(this, "isShallow", {
|
|
1146
|
-
enumerable: true,
|
|
1147
|
-
configurable: true,
|
|
1148
|
-
writable: true,
|
|
1149
|
-
value: void 0
|
|
1150
|
-
});
|
|
1151
|
-
Object.defineProperty(this, "isReadonly", {
|
|
1152
|
-
enumerable: true,
|
|
1153
|
-
configurable: true,
|
|
1154
|
-
writable: true,
|
|
1155
|
-
value: void 0
|
|
1156
|
-
});
|
|
1157
|
-
this.isReadonly = config.readonly;
|
|
1158
|
-
this.isShallow = config.shallow;
|
|
1159
|
-
}
|
|
1160
|
-
set(target, p, newValue, receiver) {
|
|
1161
|
-
if (this.isReadonly && !fromInternalWrite) {
|
|
1162
|
-
throw reactiveErrorFn('Object is readonly!');
|
|
1163
|
-
}
|
|
1164
|
-
const rawValue = toRaw(newValue);
|
|
1165
|
-
const oldValue = target[p];
|
|
1166
|
-
const v = this.isShallow ? newValue : rawValue;
|
|
1167
|
-
if (oldValue === rawValue) {
|
|
1168
|
-
return Reflect.set(target, p, v, receiver);
|
|
1169
|
-
}
|
|
1170
|
-
const b = Reflect.set(target, p, v, receiver);
|
|
1171
|
-
fromInternalWrite = false;
|
|
1172
|
-
if (hasOwn(target, p)) {
|
|
1173
|
-
trigger(target, exports.TriggerOpTypes.Set, p);
|
|
1174
|
-
}
|
|
1175
|
-
else {
|
|
1176
|
-
trigger(target, exports.TriggerOpTypes.Add, p);
|
|
1177
|
-
}
|
|
1178
|
-
return b;
|
|
1179
|
-
}
|
|
1180
|
-
get(target, p, receiver) {
|
|
1181
|
-
track(target, exports.TrackOpTypes.Get, p);
|
|
1182
|
-
const value = Reflect.get(target, p, receiver);
|
|
1183
|
-
if (this.isShallow) {
|
|
1184
|
-
return value;
|
|
1185
|
-
}
|
|
1186
|
-
return reactive(value);
|
|
1187
|
-
}
|
|
1188
|
-
deleteProperty(target, p) {
|
|
1189
|
-
const b = Reflect.deleteProperty(target, p);
|
|
1190
|
-
trigger(target, exports.TriggerOpTypes.Delete, p);
|
|
1191
|
-
return b;
|
|
1192
|
-
}
|
|
1193
|
-
ownKeys(target) {
|
|
1194
|
-
track(target, exports.TrackOpTypes.Iterate);
|
|
1195
|
-
return Reflect.ownKeys(target);
|
|
1196
|
-
}
|
|
1197
|
-
}
|
|
1198
|
-
function noReactive(v) {
|
|
1199
|
-
return v;
|
|
1200
|
-
}
|
|
1201
|
-
class ArrayReactiveHandler extends ObjectReactiveHandler {
|
|
1202
|
-
constructor(config) {
|
|
1203
|
-
super(config);
|
|
1204
|
-
Object.defineProperty(this, "interceptors", {
|
|
1205
|
-
enumerable: true,
|
|
1206
|
-
configurable: true,
|
|
1207
|
-
writable: true,
|
|
1208
|
-
value: createArrayHandlers(this.isShallow ? noReactive : reactive)
|
|
1209
|
-
});
|
|
1210
|
-
}
|
|
1211
|
-
get(target, p, receiver) {
|
|
1212
|
-
if (Reflect.has(this.interceptors, p) && p in target) {
|
|
1213
|
-
return this.interceptors[p];
|
|
1214
|
-
}
|
|
1215
|
-
return super.get(target, p, receiver);
|
|
1216
|
-
}
|
|
1217
|
-
}
|
|
1218
|
-
class MapReactiveHandler extends ObjectReactiveHandler {
|
|
1219
|
-
constructor(config) {
|
|
1220
|
-
super(config);
|
|
1221
|
-
Object.defineProperty(this, "interceptors", {
|
|
1222
|
-
enumerable: true,
|
|
1223
|
-
configurable: true,
|
|
1224
|
-
writable: true,
|
|
1225
|
-
value: createMapHandlers(this.isShallow ? noReactive : reactive)
|
|
1226
|
-
});
|
|
1227
|
-
}
|
|
1228
|
-
get(target, p, receiver) {
|
|
1229
|
-
if (Reflect.has(this.interceptors, p) && p in target) {
|
|
1230
|
-
return this.interceptors[p];
|
|
1231
|
-
}
|
|
1232
|
-
if (p === 'size') {
|
|
1233
|
-
track(target, exports.TrackOpTypes.Iterate, p);
|
|
1234
|
-
return Reflect.get(target, p);
|
|
1235
|
-
}
|
|
1236
|
-
return super.get(target, p, receiver);
|
|
1237
|
-
}
|
|
1238
|
-
}
|
|
1239
|
-
class SetReactiveHandler extends ObjectReactiveHandler {
|
|
1240
|
-
constructor(config) {
|
|
1241
|
-
super(config);
|
|
1242
|
-
Object.defineProperty(this, "interceptors", {
|
|
1243
|
-
enumerable: true,
|
|
1244
|
-
configurable: true,
|
|
1245
|
-
writable: true,
|
|
1246
|
-
value: createSetHandlers(this.isShallow ? noReactive : reactive)
|
|
1247
|
-
});
|
|
1248
|
-
}
|
|
1249
|
-
get(target, p, receiver) {
|
|
1250
|
-
if (Reflect.has(this.interceptors, p) && p in target) {
|
|
1251
|
-
return this.interceptors[p];
|
|
1252
|
-
}
|
|
1253
|
-
if (p === 'size') {
|
|
1254
|
-
track(target, exports.TrackOpTypes.Iterate, p);
|
|
1255
|
-
return Reflect.get(target, p);
|
|
1256
|
-
}
|
|
1257
|
-
return super.get(target, p, receiver);
|
|
1258
|
-
}
|
|
1259
|
-
}
|
|
1260
|
-
const defaultObjectReactiveHandler = new ObjectReactiveHandler({
|
|
1261
|
-
readonly: false,
|
|
1262
|
-
shallow: false
|
|
1263
|
-
});
|
|
1264
|
-
const defaultArrayReactiveHandler = new ArrayReactiveHandler({
|
|
1265
|
-
readonly: false,
|
|
1266
|
-
shallow: false
|
|
1267
|
-
});
|
|
1268
|
-
const defaultMapReactiveHandler = new MapReactiveHandler({
|
|
1269
|
-
readonly: false,
|
|
1270
|
-
shallow: false
|
|
1271
|
-
});
|
|
1272
|
-
const defaultSetReactiveHandler = new SetReactiveHandler({
|
|
1273
|
-
readonly: false,
|
|
1274
|
-
shallow: false
|
|
1275
|
-
});
|
|
1276
|
-
const readonlyProxyHandler = new ObjectReactiveHandler({
|
|
1277
|
-
shallow: true,
|
|
1278
|
-
readonly: true
|
|
1279
|
-
});
|
|
1280
|
-
function reactive(raw) {
|
|
1281
|
-
if (isReactive(raw)) {
|
|
1282
|
-
return raw;
|
|
1283
|
-
}
|
|
1284
|
-
let proxy = rawToProxyCache.get(raw);
|
|
1285
|
-
if (proxy) {
|
|
1286
|
-
return proxy;
|
|
1287
|
-
}
|
|
1288
|
-
const type = getStringType(raw);
|
|
1289
|
-
switch (type) {
|
|
1290
|
-
case '[object Object]':
|
|
1291
|
-
proxy = new Proxy(raw, defaultObjectReactiveHandler);
|
|
1292
|
-
break;
|
|
1293
|
-
case '[object Array]':
|
|
1294
|
-
proxy = new Proxy(raw, defaultArrayReactiveHandler);
|
|
1295
|
-
break;
|
|
1296
|
-
case '[object Set]':
|
|
1297
|
-
case '[object WeakSet]':
|
|
1298
|
-
proxy = new Proxy(raw, defaultSetReactiveHandler);
|
|
1299
|
-
break;
|
|
1300
|
-
case '[object Map]':
|
|
1301
|
-
case '[object WeakMap]':
|
|
1302
|
-
proxy = new Proxy(raw, defaultMapReactiveHandler);
|
|
1303
|
-
break;
|
|
1304
|
-
default:
|
|
1305
|
-
return raw;
|
|
1306
|
-
}
|
|
1307
|
-
rawToProxyCache.set(raw, proxy);
|
|
1308
|
-
proxyToRawCache.set(proxy, raw);
|
|
1309
|
-
return proxy;
|
|
1310
|
-
}
|
|
1311
|
-
|
|
1312
|
-
function hasChange(newProps, oldProps) {
|
|
1313
|
-
const newKeys = Object.keys(oldProps);
|
|
1314
|
-
const oldKeys = Object.keys(newProps);
|
|
1315
|
-
if (oldKeys.length !== newKeys.length) {
|
|
1316
|
-
return true;
|
|
1317
|
-
}
|
|
1318
|
-
const len = oldKeys.length;
|
|
1319
|
-
for (let i = 0; i < len; i++) {
|
|
1320
|
-
const key = newKeys[i];
|
|
1321
|
-
if (newProps[key] !== oldProps[key]) {
|
|
1322
|
-
return true;
|
|
1323
|
-
}
|
|
1324
|
-
}
|
|
1325
|
-
return false;
|
|
1326
|
-
}
|
|
1327
|
-
const refKey = 'ref';
|
|
1328
|
-
function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
|
|
1329
|
-
for (const key in oldProps) {
|
|
1330
|
-
if (!(key in newProps)) {
|
|
1331
|
-
onDeleted(key, oldProps[key]);
|
|
1332
|
-
}
|
|
1333
|
-
}
|
|
1334
|
-
for (const key in newProps) {
|
|
1335
|
-
if (!(key in oldProps)) {
|
|
1336
|
-
onAdded(key, newProps[key]);
|
|
1337
|
-
}
|
|
1338
|
-
else if (oldProps[key] !== newProps[key]) {
|
|
1339
|
-
onUpdated(key, newProps[key], oldProps[key]);
|
|
1340
|
-
}
|
|
1341
|
-
}
|
|
1342
|
-
}
|
|
1343
|
-
function classToString(config) {
|
|
1344
|
-
if (typeof config === 'string') {
|
|
1345
|
-
return config;
|
|
1346
|
-
}
|
|
1347
|
-
if (!config) {
|
|
1348
|
-
return '';
|
|
1349
|
-
}
|
|
1350
|
-
if (Array.isArray(config)) {
|
|
1351
|
-
const classes = [];
|
|
1352
|
-
for (const i of config) {
|
|
1353
|
-
const v = classToString(i);
|
|
1354
|
-
if (v) {
|
|
1355
|
-
classes.push(v);
|
|
1356
|
-
}
|
|
1357
|
-
}
|
|
1358
|
-
return classes.join(' ');
|
|
1359
|
-
}
|
|
1360
|
-
if (typeof config === 'object') {
|
|
1361
|
-
if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
|
|
1362
|
-
return config.toString();
|
|
1363
|
-
}
|
|
1364
|
-
const classes = [];
|
|
1365
|
-
for (const key in config) {
|
|
1366
|
-
if ({}.hasOwnProperty.call(config, key) && config[key]) {
|
|
1367
|
-
classes.push(key);
|
|
1368
|
-
}
|
|
1369
|
-
}
|
|
1370
|
-
return classes.join(' ');
|
|
1371
|
-
}
|
|
1372
|
-
return '';
|
|
1373
|
-
}
|
|
1374
|
-
function styleToObject(style) {
|
|
1375
|
-
if (typeof style !== 'string') {
|
|
1376
|
-
return style || {};
|
|
1377
|
-
}
|
|
1378
|
-
const obj = {};
|
|
1379
|
-
style.split(';').map(s => s.split(':')).forEach(v => {
|
|
1380
|
-
if (!v[0] || !v[1]) {
|
|
1381
|
-
return;
|
|
1382
|
-
}
|
|
1383
|
-
obj[v[0].trim()] = v[1].trim();
|
|
1384
|
-
});
|
|
1385
|
-
return obj;
|
|
1386
|
-
}
|
|
1387
|
-
const TextAtomType = Symbol('Text');
|
|
1388
|
-
const ElementAtomType = Symbol('Element');
|
|
1389
|
-
const ComponentAtomType = Symbol('Component');
|
|
1390
|
-
|
|
1391
|
-
const componentSetupStack = [];
|
|
1392
|
-
const componentErrorFn = makeError('component');
|
|
1393
|
-
function getSetupContext(need = true) {
|
|
1394
|
-
const current = componentSetupStack[componentSetupStack.length - 1];
|
|
1395
|
-
if (!current && need) {
|
|
1396
|
-
// 防止因外部捕获异常引引起的缓存未清理的问题
|
|
1397
|
-
throw componentErrorFn('cannot be called outside the component!');
|
|
1398
|
-
}
|
|
1399
|
-
return current;
|
|
1400
|
-
}
|
|
1401
|
-
function toRefs(ref) {
|
|
1402
|
-
return (Array.isArray(ref) ? ref : [ref]).filter(i => {
|
|
1403
|
-
return i instanceof DynamicRef;
|
|
1404
|
-
});
|
|
1405
|
-
}
|
|
1406
|
-
function createReadonlyProxy(value) {
|
|
1407
|
-
return new Proxy(value, readonlyProxyHandler);
|
|
1408
|
-
}
|
|
1409
|
-
/**
|
|
1410
|
-
* Viewfly 组件管理类,用于管理组件的生命周期,上下文等
|
|
1411
|
-
*/
|
|
1412
|
-
class Component {
|
|
1413
|
-
get dirty() {
|
|
1414
|
-
return this._dirty;
|
|
1415
|
-
}
|
|
1416
|
-
get changed() {
|
|
1417
|
-
return this._changed;
|
|
1418
|
-
}
|
|
1419
|
-
constructor(parentComponent, type, props, key) {
|
|
1420
|
-
this.parentComponent = parentComponent;
|
|
1421
|
-
this.type = type;
|
|
1422
|
-
this.props = props;
|
|
1423
|
-
this.key = key;
|
|
1424
|
-
this.instance = null;
|
|
1425
|
-
this.changedSubComponents = new Set();
|
|
1426
|
-
this.viewMetadata = null;
|
|
1427
|
-
this.unmountedCallbacks = null;
|
|
1428
|
-
this.mountCallbacks = null;
|
|
1429
|
-
this.updatedCallbacks = null;
|
|
1430
|
-
this.updatedDestroyCallbacks = null;
|
|
1431
|
-
this._dirty = true;
|
|
1432
|
-
this._changed = false;
|
|
1433
|
-
this.isFirstRendering = true;
|
|
1434
|
-
this.refs = null;
|
|
1435
|
-
this.rawProps = props;
|
|
1436
|
-
this.props = createReadonlyProxy(Object.assign({}, props));
|
|
1437
|
-
this.listener = new Dep(() => {
|
|
1438
|
-
this.markAsDirtied();
|
|
1439
|
-
});
|
|
1440
|
-
}
|
|
1441
|
-
markAsDirtied() {
|
|
1442
|
-
this._dirty = true;
|
|
1443
|
-
this.markAsChanged();
|
|
1444
|
-
}
|
|
1445
|
-
markAsChanged(changedComponent) {
|
|
1446
|
-
if (changedComponent) {
|
|
1447
|
-
this.changedSubComponents.add(changedComponent);
|
|
1448
|
-
}
|
|
1449
|
-
if (this._changed) {
|
|
1450
|
-
return;
|
|
1451
|
-
}
|
|
1452
|
-
this._changed = true;
|
|
1453
|
-
if (this.parentComponent) {
|
|
1454
|
-
this.parentComponent.markAsChanged(this);
|
|
1455
|
-
}
|
|
1456
|
-
}
|
|
1457
|
-
render(update) {
|
|
1458
|
-
componentSetupStack.push(this);
|
|
1459
|
-
const render = this.type(this.props);
|
|
1460
|
-
const isRenderFn = typeof render === 'function';
|
|
1461
|
-
this.instance = isRenderFn ? { $render: render } : render;
|
|
1462
|
-
const refs = toRefs(this.props.ref);
|
|
1463
|
-
if (refs.length) {
|
|
1464
|
-
this.refs = refs;
|
|
1465
|
-
onMounted(() => {
|
|
1466
|
-
const refs = this.refs;
|
|
1467
|
-
const length = refs.length;
|
|
1468
|
-
for (let i = 0; i < length; i++) {
|
|
1469
|
-
const ref = refs[i];
|
|
1470
|
-
ref.bind(this.instance);
|
|
1471
|
-
}
|
|
1472
|
-
return () => {
|
|
1473
|
-
const refs = this.refs;
|
|
1474
|
-
const length = refs.length;
|
|
1475
|
-
for (let i = 0; i < length; i++) {
|
|
1476
|
-
const ref = refs[i];
|
|
1477
|
-
ref.unBind(this.instance);
|
|
1478
|
-
}
|
|
1479
|
-
};
|
|
1480
|
-
});
|
|
1481
|
-
}
|
|
1482
|
-
componentSetupStack.pop();
|
|
1483
|
-
pushDepContext(this.listener);
|
|
1484
|
-
const template = this.instance.$render();
|
|
1485
|
-
popDepContext();
|
|
1486
|
-
update(template, this.instance.$portalHost);
|
|
1487
|
-
this.rendered();
|
|
1488
|
-
}
|
|
1489
|
-
updateProps(newProps) {
|
|
1490
|
-
const oldProps = this.rawProps;
|
|
1491
|
-
this.rawProps = newProps;
|
|
1492
|
-
const newRefs = toRefs(newProps.ref);
|
|
1493
|
-
comparePropsWithCallbacks(oldProps, newProps, key => {
|
|
1494
|
-
internalWrite(() => {
|
|
1495
|
-
Reflect.deleteProperty(oldProps, key);
|
|
1496
|
-
});
|
|
1497
|
-
}, (key, value) => {
|
|
1498
|
-
internalWrite(() => {
|
|
1499
|
-
this.props[key] = value;
|
|
1500
|
-
});
|
|
1501
|
-
}, (key, value) => {
|
|
1502
|
-
internalWrite(() => {
|
|
1503
|
-
this.props[key] = value;
|
|
1504
|
-
});
|
|
1505
|
-
});
|
|
1506
|
-
if (this.refs) {
|
|
1507
|
-
const len = this.refs.length;
|
|
1508
|
-
for (let i = 0; i < len; i++) {
|
|
1509
|
-
const oldRef = this.refs[i];
|
|
1510
|
-
if (!newRefs.includes(oldRef)) {
|
|
1511
|
-
oldRef.unBind(this.instance);
|
|
1512
|
-
}
|
|
1513
|
-
}
|
|
1514
|
-
}
|
|
1515
|
-
const len = newRefs.length;
|
|
1516
|
-
for (let i = 0; i < len; i++) {
|
|
1517
|
-
const newRef = newRefs[i];
|
|
1518
|
-
newRef.bind(this.instance);
|
|
1519
|
-
}
|
|
1520
|
-
if (len) {
|
|
1521
|
-
this.refs = newRefs;
|
|
1522
|
-
}
|
|
1523
|
-
}
|
|
1524
|
-
canUpdate(oldProps, newProps) {
|
|
1525
|
-
if (typeof this.instance.$useMemo === 'function') {
|
|
1526
|
-
if (this.instance.$useMemo(newProps, oldProps)) {
|
|
1527
|
-
return false;
|
|
1528
|
-
}
|
|
1529
|
-
}
|
|
1530
|
-
return true;
|
|
1531
|
-
}
|
|
1532
|
-
rerender() {
|
|
1533
|
-
this.listener.destroy();
|
|
1534
|
-
pushDepContext(this.listener);
|
|
1535
|
-
const template = this.instance.$render();
|
|
1536
|
-
popDepContext();
|
|
1537
|
-
return template;
|
|
1538
|
-
}
|
|
1539
|
-
destroy() {
|
|
1540
|
-
this.listener.destroy();
|
|
1541
|
-
if (this.updatedDestroyCallbacks) {
|
|
1542
|
-
this.updatedDestroyCallbacks.forEach(fn => {
|
|
1543
|
-
fn();
|
|
1544
|
-
});
|
|
1545
|
-
}
|
|
1546
|
-
if (this.unmountedCallbacks) {
|
|
1547
|
-
this.unmountedCallbacks.forEach(fn => {
|
|
1548
|
-
fn();
|
|
1549
|
-
});
|
|
1550
|
-
}
|
|
1551
|
-
this.parentComponent =
|
|
1552
|
-
this.updatedDestroyCallbacks =
|
|
1553
|
-
this.mountCallbacks =
|
|
1554
|
-
this.updatedCallbacks =
|
|
1555
|
-
this.unmountedCallbacks = null;
|
|
1556
|
-
}
|
|
1557
|
-
rendered() {
|
|
1558
|
-
this.changedSubComponents.clear();
|
|
1559
|
-
const is = this.isFirstRendering;
|
|
1560
|
-
this.isFirstRendering = false;
|
|
1561
|
-
this._dirty = this._changed = false;
|
|
1562
|
-
this.invokeUpdatedHooks();
|
|
1563
|
-
if (is) {
|
|
1564
|
-
this.invokeMountHooks();
|
|
1565
|
-
}
|
|
1566
|
-
if (this.changed) {
|
|
1567
|
-
Promise.resolve().then(() => {
|
|
1568
|
-
if (this.parentComponent) {
|
|
1569
|
-
this.parentComponent.markAsChanged(this);
|
|
1570
|
-
}
|
|
1571
|
-
});
|
|
1572
|
-
}
|
|
1573
|
-
}
|
|
1574
|
-
invokeMountHooks() {
|
|
1575
|
-
const unmountedCallbacks = [];
|
|
1576
|
-
if (this.mountCallbacks) {
|
|
1577
|
-
const len = this.mountCallbacks.length;
|
|
1578
|
-
for (let i = 0; i < len; ++i) {
|
|
1579
|
-
const fn = this.mountCallbacks[i];
|
|
1580
|
-
const destroyFn = fn();
|
|
1581
|
-
if (typeof destroyFn === 'function') {
|
|
1582
|
-
unmountedCallbacks.push(destroyFn);
|
|
1583
|
-
}
|
|
1584
|
-
}
|
|
1585
|
-
}
|
|
1586
|
-
if (unmountedCallbacks.length) {
|
|
1587
|
-
if (this.unmountedCallbacks) {
|
|
1588
|
-
this.unmountedCallbacks.push(...unmountedCallbacks);
|
|
1589
|
-
}
|
|
1590
|
-
else {
|
|
1591
|
-
this.unmountedCallbacks = unmountedCallbacks;
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
this.mountCallbacks = null;
|
|
1595
|
-
}
|
|
1596
|
-
invokeUpdatedHooks() {
|
|
1597
|
-
if (this.updatedCallbacks) {
|
|
1598
|
-
if (this.updatedDestroyCallbacks) {
|
|
1599
|
-
this.updatedDestroyCallbacks.forEach(fn => {
|
|
1600
|
-
fn();
|
|
1601
|
-
});
|
|
1602
|
-
}
|
|
1603
|
-
const updatedDestroyCallbacks = [];
|
|
1604
|
-
const len = this.updatedCallbacks.length;
|
|
1605
|
-
for (let i = 0; i < len; ++i) {
|
|
1606
|
-
const fn = this.updatedCallbacks[i];
|
|
1607
|
-
const destroyFn = fn();
|
|
1608
|
-
if (typeof destroyFn === 'function') {
|
|
1609
|
-
updatedDestroyCallbacks.push(destroyFn);
|
|
1610
|
-
}
|
|
1611
|
-
}
|
|
1612
|
-
this.updatedDestroyCallbacks = updatedDestroyCallbacks.length ? updatedDestroyCallbacks : null;
|
|
1613
|
-
}
|
|
1614
|
-
}
|
|
1615
|
-
}
|
|
1616
|
-
/**
|
|
1617
|
-
* 获取当前组件实例
|
|
1618
|
-
*/
|
|
1619
|
-
function getCurrentInstance() {
|
|
1620
|
-
return getSetupContext();
|
|
1621
|
-
}
|
|
1622
|
-
function registryComponentDestroyCallback(fn) {
|
|
1623
|
-
const component = getSetupContext(false);
|
|
1624
|
-
if (component) {
|
|
1625
|
-
if (!component.unmountedCallbacks) {
|
|
1626
|
-
component.unmountedCallbacks = [];
|
|
1627
|
-
}
|
|
1628
|
-
component.unmountedCallbacks.push(fn);
|
|
1629
|
-
}
|
|
1630
|
-
}
|
|
1631
|
-
|
|
1632
|
-
function Fragment(props) {
|
|
1633
|
-
return () => {
|
|
1634
|
-
return props.children;
|
|
1635
|
-
};
|
|
1636
|
-
}
|
|
1637
|
-
function jsx(type, props, key) {
|
|
1638
|
-
return JSXNodeFactory.createNode(type, props, key);
|
|
1639
|
-
}
|
|
1640
|
-
const jsxs = jsx;
|
|
1641
|
-
const JSXNodeFactory = {
|
|
1642
|
-
createNode(type, props, key) {
|
|
1643
|
-
return {
|
|
1644
|
-
type,
|
|
1645
|
-
props,
|
|
1646
|
-
key
|
|
1647
|
-
};
|
|
1648
|
-
}
|
|
1649
|
-
};
|
|
1650
|
-
|
|
1651
|
-
function watch(trigger, callback) {
|
|
1652
|
-
let prevFn;
|
|
1653
|
-
const dep = new Dep(() => {
|
|
1654
|
-
pushDepContext(dep);
|
|
1655
|
-
const newValue = trigger();
|
|
1656
|
-
popDepContext();
|
|
1657
|
-
if (newValue === oldValue) {
|
|
1658
|
-
return;
|
|
1659
|
-
}
|
|
1660
|
-
if (prevFn) {
|
|
1661
|
-
prevFn();
|
|
1662
|
-
}
|
|
1663
|
-
prevFn = callback(newValue, oldValue);
|
|
1664
|
-
oldValue = newValue;
|
|
1665
|
-
});
|
|
1666
|
-
pushDepContext(dep);
|
|
1667
|
-
let oldValue = trigger();
|
|
1668
|
-
popDepContext();
|
|
1669
|
-
dep.destroyCallbacks.push(() => {
|
|
1670
|
-
prevFn === null || prevFn === void 0 ? void 0 : prevFn();
|
|
1671
|
-
});
|
|
1672
|
-
function unWatch() {
|
|
1673
|
-
dep.destroy();
|
|
1674
|
-
}
|
|
1675
|
-
registryComponentDestroyCallback(unWatch);
|
|
1676
|
-
return unWatch;
|
|
1677
|
-
}
|
|
1678
|
-
|
|
1679
|
-
const injectMap = new WeakMap();
|
|
1680
|
-
function getInjector(start) {
|
|
1681
|
-
while (start) {
|
|
1682
|
-
const injector = injectMap.get(start);
|
|
1683
|
-
if (injector) {
|
|
1684
|
-
return injector;
|
|
1685
|
-
}
|
|
1686
|
-
start = start.parentComponent;
|
|
1687
|
-
}
|
|
1688
|
-
return new NullInjector();
|
|
1689
|
-
}
|
|
1690
|
-
function createContext(providers, scope, parentInjector) {
|
|
1691
|
-
return function context(props) {
|
|
1692
|
-
const instance = getCurrentInstance();
|
|
1693
|
-
const injector = new ReflectiveInjector(parentInjector || getInjector(instance), providers, scope);
|
|
1694
|
-
injectMap.set(instance, injector);
|
|
1695
|
-
return () => {
|
|
1696
|
-
return props.children;
|
|
1697
|
-
};
|
|
1698
|
-
};
|
|
1699
|
-
}
|
|
1700
|
-
function createContextProvider(params) {
|
|
1701
|
-
return function contextProvider(props) {
|
|
1702
|
-
let Context = createContext([Object.assign({ provide: params.provide }, props)]);
|
|
1703
|
-
watch(() => {
|
|
1704
|
-
return props.useClass || props.useFactory || props.useValue || props.useExisting;
|
|
1705
|
-
}, () => {
|
|
1706
|
-
Context = createContext([Object.assign({ provide: params.provide }, props)]);
|
|
1707
|
-
});
|
|
1708
|
-
return () => {
|
|
1709
|
-
return jsx(Context, { children: props.children });
|
|
1710
|
-
};
|
|
1711
|
-
};
|
|
1712
|
-
}
|
|
1713
|
-
/**
|
|
1714
|
-
* 通过组件上下文获取 IoC 容器内数据的勾子方法
|
|
1715
|
-
*/
|
|
1716
|
-
function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
|
|
1717
|
-
const component = getCurrentInstance();
|
|
1718
|
-
const injector = getInjector(component);
|
|
1719
|
-
return injector.get(token, notFoundValue, flags);
|
|
1720
|
-
}
|
|
1721
|
-
/**
|
|
1722
|
-
* 给组件添加注解
|
|
1723
|
-
* @param annotation
|
|
1724
|
-
* @param componentSetup
|
|
1725
|
-
* @example
|
|
1726
|
-
* ```ts
|
|
1727
|
-
* export customScope = new Scope('scopeName')
|
|
1728
|
-
* export const App = withAnnotation({
|
|
1729
|
-
* scope: customScope,
|
|
1730
|
-
* providers: [
|
|
1731
|
-
* ExampleService
|
|
1732
|
-
* ]
|
|
1733
|
-
* }, function(props: Props) {
|
|
1734
|
-
* return () => {
|
|
1735
|
-
* return <div>...</div>
|
|
1736
|
-
* }
|
|
1737
|
-
* })
|
|
1738
|
-
* ```
|
|
1739
|
-
*/
|
|
1740
|
-
function withAnnotation(annotation, componentSetup) {
|
|
1741
|
-
return function (props) {
|
|
1742
|
-
const instance = getCurrentInstance();
|
|
1743
|
-
const parentInjector = injectMap.get(instance) || getInjector(instance.parentComponent);
|
|
1744
|
-
const injector = new ReflectiveInjector(parentInjector, [{
|
|
1745
|
-
provide: Injector,
|
|
1746
|
-
useFactory() {
|
|
1747
|
-
return injector;
|
|
1748
|
-
}
|
|
1749
|
-
}, ...(annotation.providers || [])], annotation.scope);
|
|
1750
|
-
injectMap.set(instance, injector);
|
|
1751
|
-
return componentSetup(props);
|
|
1752
|
-
};
|
|
1753
|
-
}
|
|
1754
|
-
|
|
1755
|
-
class NativeRenderer {
|
|
1756
|
-
}
|
|
1757
|
-
|
|
1758
|
-
function withMemo(canUseMemo, render) {
|
|
1759
|
-
return {
|
|
1760
|
-
$useMemo: canUseMemo,
|
|
1761
|
-
$render: render
|
|
1762
|
-
};
|
|
1763
|
-
}
|
|
1764
|
-
|
|
1765
|
-
const listenerReg = /^on[A-Z]/;
|
|
1766
|
-
function createRenderer(component, nativeRenderer, namespace) {
|
|
1767
|
-
let isInit = true;
|
|
1768
|
-
return function render(host) {
|
|
1769
|
-
if (isInit) {
|
|
1770
|
-
isInit = false;
|
|
1771
|
-
const atom = {
|
|
1772
|
-
type: ComponentAtomType,
|
|
1773
|
-
index: 0,
|
|
1774
|
-
nodeType: component.type,
|
|
1775
|
-
jsxNode: component,
|
|
1776
|
-
sibling: null,
|
|
1777
|
-
child: null,
|
|
1778
|
-
nativeNode: null,
|
|
1779
|
-
namespace
|
|
1780
|
-
};
|
|
1781
|
-
componentRender(nativeRenderer, component, atom, {
|
|
1782
|
-
isParent: true,
|
|
1783
|
-
host,
|
|
1784
|
-
rootHost: host
|
|
1785
|
-
});
|
|
1786
|
-
}
|
|
1787
|
-
else {
|
|
1788
|
-
deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
|
|
1789
|
-
}
|
|
1790
|
-
};
|
|
1791
|
-
}
|
|
1792
|
-
function buildView(nativeRenderer, parentComponent, atom, context) {
|
|
1793
|
-
const { jsxNode, type } = atom;
|
|
1794
|
-
if (type === ComponentAtomType) {
|
|
1795
|
-
const component = new Component(parentComponent, jsxNode.type, jsxNode.props, jsxNode.key);
|
|
1796
|
-
atom.jsxNode = component;
|
|
1797
|
-
componentRender(nativeRenderer, component, atom, context);
|
|
1798
|
-
}
|
|
1799
|
-
else if (type === ElementAtomType) {
|
|
1800
|
-
createElement(nativeRenderer, atom, parentComponent, context);
|
|
1801
|
-
}
|
|
1802
|
-
else {
|
|
1803
|
-
createTextNode(nativeRenderer, atom, context);
|
|
1804
|
-
}
|
|
1805
|
-
}
|
|
1806
|
-
function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
|
|
1807
|
-
let child = atom.child;
|
|
1808
|
-
while (child) {
|
|
1809
|
-
buildView(nativeRenderer, parentComponent, child, context);
|
|
1810
|
-
child = child.sibling;
|
|
1811
|
-
}
|
|
1812
|
-
}
|
|
1813
|
-
function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
|
|
1814
|
-
const newTemplate = component.rerender();
|
|
1815
|
-
newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
|
|
1816
|
-
diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
|
|
1817
|
-
}
|
|
1818
|
-
function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
|
|
1819
|
-
if (component.dirty) {
|
|
1820
|
-
const canUpdate = component.canUpdate(component.props, component.props);
|
|
1821
|
-
if (canUpdate) {
|
|
1822
|
-
const { atom, host, isParent, rootHost } = component.viewMetadata;
|
|
1823
|
-
const context = {
|
|
1824
|
-
host,
|
|
1825
|
-
isParent,
|
|
1826
|
-
rootHost
|
|
1827
|
-
};
|
|
1828
|
-
const diffAtom = atom.child;
|
|
1829
|
-
patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
|
|
1830
|
-
const next = atom.sibling;
|
|
1831
|
-
if (next && next.jsxNode instanceof Component) {
|
|
1832
|
-
const view = next.jsxNode.viewMetadata;
|
|
1833
|
-
view.host = context.host;
|
|
1834
|
-
view.isParent = context.isParent;
|
|
1835
|
-
}
|
|
1836
|
-
}
|
|
1837
|
-
component.rendered();
|
|
1838
|
-
}
|
|
1839
|
-
else if (component.changed) {
|
|
1840
|
-
component.changedSubComponents.forEach(child => {
|
|
1841
|
-
deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
|
|
1842
|
-
});
|
|
1843
|
-
component.rendered();
|
|
1844
|
-
}
|
|
1845
|
-
}
|
|
1846
|
-
function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
|
|
1847
|
-
const commits = [];
|
|
1848
|
-
while (newAtom) {
|
|
1849
|
-
oldAtom = createChanges(newAtom, oldAtom, commits);
|
|
1850
|
-
newAtom = newAtom.sibling;
|
|
1851
|
-
}
|
|
1852
|
-
let dirtyDiffAtom = oldAtom;
|
|
1853
|
-
while (dirtyDiffAtom) {
|
|
1854
|
-
cleanView(nativeRenderer, dirtyDiffAtom, true);
|
|
1855
|
-
dirtyDiffAtom = dirtyDiffAtom.sibling;
|
|
1856
|
-
}
|
|
1857
|
-
let offset = 0;
|
|
1858
|
-
const len = commits.length;
|
|
1859
|
-
for (let i = 0; i < len; i++) {
|
|
1860
|
-
while (oldAtom) {
|
|
1861
|
-
if (oldAtom.index <= i) {
|
|
1862
|
-
offset--;
|
|
1863
|
-
oldAtom = oldAtom.sibling;
|
|
1864
|
-
continue;
|
|
1865
|
-
}
|
|
1866
|
-
break;
|
|
1867
|
-
}
|
|
1868
|
-
const { dirtyAtom, newAtom } = commits[i];
|
|
1869
|
-
if (dirtyAtom) {
|
|
1870
|
-
switch (dirtyAtom.type) {
|
|
1871
|
-
case ElementAtomType:
|
|
1872
|
-
updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, dirtyAtom);
|
|
1873
|
-
break;
|
|
1874
|
-
case TextAtomType:
|
|
1875
|
-
updateText(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
|
|
1876
|
-
break;
|
|
1877
|
-
case ComponentAtomType:
|
|
1878
|
-
updateComponent(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
|
|
1879
|
-
break;
|
|
1880
|
-
}
|
|
1881
|
-
}
|
|
1882
|
-
else {
|
|
1883
|
-
buildView(nativeRenderer, parentComponent, newAtom, context);
|
|
1884
|
-
offset++;
|
|
1885
|
-
}
|
|
1886
|
-
}
|
|
1887
|
-
}
|
|
1888
|
-
function createChanges(newAtom, oldAtom, commits) {
|
|
1889
|
-
const startDiffAtom = oldAtom;
|
|
1890
|
-
let prev = null;
|
|
1891
|
-
while (oldAtom) {
|
|
1892
|
-
if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
|
|
1893
|
-
commits.push({
|
|
1894
|
-
dirtyAtom: oldAtom,
|
|
1895
|
-
newAtom
|
|
1896
|
-
});
|
|
1897
|
-
const next = oldAtom.sibling;
|
|
1898
|
-
if (!prev) {
|
|
1899
|
-
return next;
|
|
1900
|
-
}
|
|
1901
|
-
prev.sibling = next;
|
|
1902
|
-
return startDiffAtom;
|
|
1903
|
-
}
|
|
1904
|
-
prev = oldAtom;
|
|
1905
|
-
oldAtom = oldAtom.sibling;
|
|
1906
|
-
}
|
|
1907
|
-
commits.push({
|
|
1908
|
-
dirtyAtom: null,
|
|
1909
|
-
newAtom
|
|
1910
|
-
});
|
|
1911
|
-
return startDiffAtom;
|
|
1912
|
-
}
|
|
1913
|
-
function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
|
|
1914
|
-
const nativeNode = oldAtom.nativeNode;
|
|
1915
|
-
newAtom.nativeNode = nativeNode;
|
|
1916
|
-
if (needMove || newAtom.index - offset !== oldAtom.index) {
|
|
1917
|
-
insertNode(nativeRenderer, newAtom, context);
|
|
1918
|
-
}
|
|
1919
|
-
context.host = nativeNode;
|
|
1920
|
-
context.isParent = false;
|
|
1921
|
-
}
|
|
1922
|
-
function updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, oldAtom) {
|
|
1923
|
-
const nativeNode = oldAtom.nativeNode;
|
|
1924
|
-
newAtom.nativeNode = nativeNode;
|
|
1925
|
-
if (needMove || newAtom.index - offset !== oldAtom.index) {
|
|
1926
|
-
insertNode(nativeRenderer, newAtom, context);
|
|
1927
|
-
}
|
|
1928
|
-
context.host = nativeNode;
|
|
1929
|
-
context.isParent = false;
|
|
1930
|
-
updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
|
|
1931
|
-
host: nativeNode,
|
|
1932
|
-
isParent: true,
|
|
1933
|
-
rootHost: context.rootHost
|
|
1934
|
-
});
|
|
1935
|
-
}
|
|
1936
|
-
function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
|
|
1937
|
-
const component = oldAtom.jsxNode;
|
|
1938
|
-
const portalHost = component.instance.$portalHost;
|
|
1939
|
-
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
1940
|
-
component.viewMetadata = Object.assign({ atom: newAtom }, context);
|
|
1941
|
-
const newProps = newAtom.jsxNode.props;
|
|
1942
|
-
newAtom.jsxNode = component;
|
|
1943
|
-
needMove = needMove || newAtom.index - offset !== oldAtom.index;
|
|
1944
|
-
const canUpdate = component.canUpdate(component.props, newProps);
|
|
1945
|
-
const propsIsChanged = hasChange(newProps, component.props);
|
|
1946
|
-
if (propsIsChanged) {
|
|
1947
|
-
component.updateProps(newProps);
|
|
1948
|
-
}
|
|
1949
|
-
if (canUpdate && (propsIsChanged || component.dirty)) {
|
|
1950
|
-
patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
|
|
1951
|
-
const next = oldAtom.sibling;
|
|
1952
|
-
if (next && next.jsxNode instanceof Component) {
|
|
1953
|
-
const view = next.jsxNode.viewMetadata;
|
|
1954
|
-
view.host = context.host;
|
|
1955
|
-
view.isParent = context.isParent;
|
|
1956
|
-
}
|
|
1957
|
-
}
|
|
1958
|
-
else {
|
|
1959
|
-
newAtom.child = oldAtom.child;
|
|
1960
|
-
reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
|
|
1961
|
-
}
|
|
1962
|
-
component.rendered();
|
|
1963
|
-
}
|
|
1964
|
-
function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
|
|
1965
|
-
const updateContext = (atom) => {
|
|
1966
|
-
const jsxNode = atom.jsxNode;
|
|
1967
|
-
if (jsxNode instanceof Component) {
|
|
1968
|
-
reuseComponentView(nativeRenderer, atom.child, context, moveView, skipSubComponentDiff);
|
|
1969
|
-
if (!skipSubComponentDiff) {
|
|
1970
|
-
deepUpdateByComponentDirtyTree(nativeRenderer, jsxNode, moveView);
|
|
1971
|
-
}
|
|
1972
|
-
}
|
|
1973
|
-
else {
|
|
1974
|
-
if (moveView) {
|
|
1975
|
-
insertNode(nativeRenderer, atom, context);
|
|
1976
|
-
}
|
|
1977
|
-
if (!skipSubComponentDiff) {
|
|
1978
|
-
reuseElementChildrenView(nativeRenderer, atom);
|
|
1979
|
-
}
|
|
1980
|
-
context.isParent = false;
|
|
1981
|
-
context.host = atom.nativeNode;
|
|
1982
|
-
}
|
|
1983
|
-
};
|
|
1984
|
-
while (child) {
|
|
1985
|
-
updateContext(child);
|
|
1986
|
-
child = child.sibling;
|
|
1987
|
-
}
|
|
1988
|
-
}
|
|
1989
|
-
function reuseElementChildrenView(nativeRenderer, atom, context) {
|
|
1990
|
-
let child = atom.child;
|
|
1991
|
-
while (child) {
|
|
1992
|
-
if (child.jsxNode instanceof Component) {
|
|
1993
|
-
deepUpdateByComponentDirtyTree(nativeRenderer, child.jsxNode, false);
|
|
1994
|
-
}
|
|
1995
|
-
else {
|
|
1996
|
-
reuseElementChildrenView(nativeRenderer, child);
|
|
1997
|
-
}
|
|
1998
|
-
child = child.sibling;
|
|
1999
|
-
}
|
|
2000
|
-
}
|
|
2001
|
-
function cleanElementChildren(atom, nativeRenderer) {
|
|
2002
|
-
let child = atom.child;
|
|
2003
|
-
nativeRenderer.cleanChildren(atom.nativeNode, atom.namespace);
|
|
2004
|
-
while (child) {
|
|
2005
|
-
cleanView(nativeRenderer, child, false);
|
|
2006
|
-
child = child.sibling;
|
|
2007
|
-
}
|
|
2008
|
-
}
|
|
2009
|
-
function cleanView(nativeRenderer, atom, needClean) {
|
|
2010
|
-
if (atom.type === ComponentAtomType) {
|
|
2011
|
-
const jsxNode = atom.jsxNode;
|
|
2012
|
-
if (jsxNode.instance.$portalHost) {
|
|
2013
|
-
needClean = true;
|
|
2014
|
-
}
|
|
2015
|
-
cleanChildren(atom, nativeRenderer, needClean);
|
|
2016
|
-
jsxNode.destroy();
|
|
2017
|
-
return;
|
|
2018
|
-
}
|
|
2019
|
-
if (needClean) {
|
|
2020
|
-
nativeRenderer.remove(atom.nativeNode, atom.namespace);
|
|
2021
|
-
needClean = false;
|
|
2022
|
-
}
|
|
2023
|
-
if (atom.type === ElementAtomType) {
|
|
2024
|
-
const ref = atom.jsxNode.props[refKey];
|
|
2025
|
-
applyRefs(ref, atom.nativeNode, false);
|
|
2026
|
-
}
|
|
2027
|
-
cleanChildren(atom, nativeRenderer, needClean);
|
|
2028
|
-
}
|
|
2029
|
-
function cleanChildren(atom, nativeRenderer, needClean) {
|
|
2030
|
-
let child = atom.child;
|
|
2031
|
-
while (child) {
|
|
2032
|
-
cleanView(nativeRenderer, child, needClean);
|
|
2033
|
-
child = child.sibling;
|
|
2034
|
-
}
|
|
2035
|
-
}
|
|
2036
|
-
function componentRender(nativeRenderer, component, from, context) {
|
|
2037
|
-
component.render((template, portalHost) => {
|
|
2038
|
-
from.child = createChildChain(template, nativeRenderer, from.namespace);
|
|
2039
|
-
context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
|
|
2040
|
-
component.viewMetadata = Object.assign({ atom: from }, context);
|
|
2041
|
-
let child = from.child;
|
|
2042
|
-
while (child) {
|
|
2043
|
-
buildView(nativeRenderer, component, child, context);
|
|
2044
|
-
child = child.sibling;
|
|
2045
|
-
}
|
|
2046
|
-
});
|
|
2047
|
-
}
|
|
2048
|
-
function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
|
|
2049
|
-
const atom = {
|
|
2050
|
-
type,
|
|
2051
|
-
index: prevAtom.index + 1,
|
|
2052
|
-
jsxNode,
|
|
2053
|
-
sibling: null,
|
|
2054
|
-
child: null,
|
|
2055
|
-
nativeNode: null,
|
|
2056
|
-
namespace,
|
|
2057
|
-
nodeType,
|
|
2058
|
-
key
|
|
2059
|
-
};
|
|
2060
|
-
prevAtom.sibling = atom;
|
|
2061
|
-
return atom;
|
|
2062
|
-
}
|
|
2063
|
-
function createChainByNode(jsxNode, prevAtom, nativeRenderer, elementNamespace) {
|
|
2064
|
-
const type = typeof jsxNode;
|
|
2065
|
-
if (jsxNode != null && type !== 'boolean') {
|
|
2066
|
-
if (type === 'string') {
|
|
2067
|
-
return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
|
|
2068
|
-
}
|
|
2069
|
-
if (type === 'object') {
|
|
2070
|
-
if (Array.isArray(jsxNode)) {
|
|
2071
|
-
return createChainByChildren(jsxNode, prevAtom, nativeRenderer, elementNamespace);
|
|
2072
|
-
}
|
|
2073
|
-
const nodeType = typeof jsxNode.type;
|
|
2074
|
-
if (nodeType === 'string') {
|
|
2075
|
-
return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, nativeRenderer.getNameSpace(jsxNode.type, elementNamespace), jsxNode.key);
|
|
2076
|
-
}
|
|
2077
|
-
else if (nodeType === 'function') {
|
|
2078
|
-
return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
|
|
2079
|
-
}
|
|
2080
|
-
}
|
|
2081
|
-
const text = String(jsxNode);
|
|
2082
|
-
return createChainByJSXNode(TextAtomType, text, text, prevAtom, elementNamespace);
|
|
2083
|
-
}
|
|
2084
|
-
return prevAtom;
|
|
2085
|
-
}
|
|
2086
|
-
function createChainByChildren(children, prevAtom, nativeRenderer, elementNamespace) {
|
|
2087
|
-
const len = children.length;
|
|
2088
|
-
for (let i = 0; i < len; i++) {
|
|
2089
|
-
const item = children[i];
|
|
2090
|
-
prevAtom = createChainByNode(item, prevAtom, nativeRenderer, elementNamespace);
|
|
2091
|
-
}
|
|
2092
|
-
return prevAtom;
|
|
2093
|
-
}
|
|
2094
|
-
function createChildChain(template, nativeRenderer, namespace) {
|
|
2095
|
-
const beforeAtom = { sibling: null, index: -1 };
|
|
2096
|
-
createChainByNode(template, beforeAtom, nativeRenderer, namespace);
|
|
2097
|
-
return beforeAtom.sibling;
|
|
2098
|
-
}
|
|
2099
|
-
function insertNode(nativeRenderer, atom, context) {
|
|
2100
|
-
if (context.isParent) {
|
|
2101
|
-
if (context.host === context.rootHost) {
|
|
2102
|
-
nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
|
|
2103
|
-
}
|
|
2104
|
-
else {
|
|
2105
|
-
nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
|
|
2106
|
-
}
|
|
2107
|
-
}
|
|
2108
|
-
else {
|
|
2109
|
-
nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
|
|
2110
|
-
}
|
|
2111
|
-
}
|
|
2112
|
-
function createElementChildren(type, children, nativeRenderer, namespace) {
|
|
2113
|
-
const ns = nativeRenderer.getNameSpace(type, namespace);
|
|
2114
|
-
return createChildChain(children, nativeRenderer, ns);
|
|
2115
|
-
}
|
|
2116
|
-
function createElement(nativeRenderer, atom, parentComponent, context) {
|
|
2117
|
-
const { namespace, jsxNode } = atom;
|
|
2118
|
-
const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
|
|
2119
|
-
const props = jsxNode.props;
|
|
2120
|
-
let bindingRefs;
|
|
2121
|
-
for (const key in props) {
|
|
2122
|
-
if (key === 'children') {
|
|
2123
|
-
atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
|
|
2124
|
-
continue;
|
|
2125
|
-
}
|
|
2126
|
-
if (key === 'class') {
|
|
2127
|
-
const className = classToString(props[key]);
|
|
2128
|
-
if (className) {
|
|
2129
|
-
nativeRenderer.setClass(nativeNode, className, namespace);
|
|
2130
|
-
}
|
|
2131
|
-
continue;
|
|
2132
|
-
}
|
|
2133
|
-
if (key === 'style') {
|
|
2134
|
-
const style = styleToObject(props.style);
|
|
2135
|
-
for (const key in style) {
|
|
2136
|
-
nativeRenderer.setStyle(nativeNode, key, style[key], namespace);
|
|
2137
|
-
}
|
|
2138
|
-
continue;
|
|
2139
|
-
}
|
|
2140
|
-
if (listenerReg.test(key)) {
|
|
2141
|
-
const listener = props[key];
|
|
2142
|
-
if (typeof listener === 'function') {
|
|
2143
|
-
nativeRenderer.listen(nativeNode, key, listener, namespace);
|
|
2144
|
-
}
|
|
2145
|
-
continue;
|
|
2146
|
-
}
|
|
2147
|
-
if (key === refKey) {
|
|
2148
|
-
bindingRefs = props[key];
|
|
2149
|
-
continue;
|
|
2150
|
-
}
|
|
2151
|
-
nativeRenderer.setProperty(nativeNode, key, props[key], namespace);
|
|
2152
|
-
}
|
|
2153
|
-
atom.nativeNode = nativeNode;
|
|
2154
|
-
insertNode(nativeRenderer, atom, context);
|
|
2155
|
-
buildElementChildren(atom, nativeRenderer, parentComponent, {
|
|
2156
|
-
isParent: true,
|
|
2157
|
-
host: nativeNode,
|
|
2158
|
-
rootHost: context.rootHost
|
|
2159
|
-
});
|
|
2160
|
-
context.host = nativeNode;
|
|
2161
|
-
context.isParent = false;
|
|
2162
|
-
applyRefs(bindingRefs, nativeNode, true);
|
|
2163
|
-
}
|
|
2164
|
-
function createTextNode(nativeRenderer, atom, context) {
|
|
2165
|
-
const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
|
|
2166
|
-
atom.nativeNode = nativeNode;
|
|
2167
|
-
insertNode(nativeRenderer, atom, context);
|
|
2168
|
-
context.host = nativeNode;
|
|
2169
|
-
context.isParent = false;
|
|
2170
|
-
}
|
|
2171
|
-
function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
|
|
2172
|
-
const newVNode = newAtom.jsxNode;
|
|
2173
|
-
const isSvg = newAtom.namespace;
|
|
2174
|
-
const nativeNode = newAtom.nativeNode;
|
|
2175
|
-
const oldVNode = oldAtom.jsxNode;
|
|
2176
|
-
if (newVNode === oldVNode) {
|
|
2177
|
-
newAtom.child = oldAtom.child;
|
|
2178
|
-
reuseElementChildrenView(nativeRenderer, newAtom);
|
|
2179
|
-
return;
|
|
2180
|
-
}
|
|
2181
|
-
let unBindRefs;
|
|
2182
|
-
let bindRefs;
|
|
2183
|
-
let updatedChildren = false;
|
|
2184
|
-
comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
|
|
2185
|
-
if (key === 'children') {
|
|
2186
|
-
updatedChildren = true;
|
|
2187
|
-
cleanElementChildren(oldAtom, nativeRenderer);
|
|
2188
|
-
return;
|
|
2189
|
-
}
|
|
2190
|
-
if (key === 'class') {
|
|
2191
|
-
nativeRenderer.setClass(nativeNode, '', isSvg);
|
|
2192
|
-
return;
|
|
2193
|
-
}
|
|
2194
|
-
if (key === 'style') {
|
|
2195
|
-
for (const styleName in styleToObject(oldValue)) {
|
|
2196
|
-
nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
|
|
2197
|
-
}
|
|
2198
|
-
return;
|
|
2199
|
-
}
|
|
2200
|
-
if (listenerReg.test(key)) {
|
|
2201
|
-
if (typeof oldValue === 'function') {
|
|
2202
|
-
nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
|
|
2203
|
-
}
|
|
2204
|
-
return;
|
|
2205
|
-
}
|
|
2206
|
-
if (key === refKey) {
|
|
2207
|
-
unBindRefs = oldValue;
|
|
2208
|
-
return;
|
|
2209
|
-
}
|
|
2210
|
-
nativeRenderer.removeProperty(nativeNode, key, isSvg);
|
|
2211
|
-
}, (key, value) => {
|
|
2212
|
-
if (key === 'children') {
|
|
2213
|
-
updatedChildren = true;
|
|
2214
|
-
newAtom.child = createElementChildren(newVNode.type, value, nativeRenderer, isSvg);
|
|
2215
|
-
buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
|
|
2216
|
-
return;
|
|
2217
|
-
}
|
|
2218
|
-
if (key === 'class') {
|
|
2219
|
-
nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
|
|
2220
|
-
return;
|
|
2221
|
-
}
|
|
2222
|
-
if (key === 'style') {
|
|
2223
|
-
const styleObj = styleToObject(value);
|
|
2224
|
-
for (const styleName in styleObj) {
|
|
2225
|
-
nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
|
|
2226
|
-
}
|
|
2227
|
-
return;
|
|
2228
|
-
}
|
|
2229
|
-
if (listenerReg.test(key)) {
|
|
2230
|
-
if (typeof value === 'function') {
|
|
2231
|
-
nativeRenderer.listen(nativeNode, key, value, isSvg);
|
|
2232
|
-
}
|
|
2233
|
-
return;
|
|
2234
|
-
}
|
|
2235
|
-
if (key === refKey) {
|
|
2236
|
-
bindRefs = value;
|
|
2237
|
-
return;
|
|
2238
|
-
}
|
|
2239
|
-
nativeRenderer.setProperty(nativeNode, key, value, isSvg);
|
|
2240
|
-
}, (key, newValue, oldValue) => {
|
|
2241
|
-
if (key === 'children') {
|
|
2242
|
-
updatedChildren = true;
|
|
2243
|
-
newAtom.child = createElementChildren(newVNode.type, newValue, nativeRenderer, isSvg);
|
|
2244
|
-
if (!newAtom.child) {
|
|
2245
|
-
cleanElementChildren(oldAtom, nativeRenderer);
|
|
2246
|
-
}
|
|
2247
|
-
else if (!oldAtom.child) {
|
|
2248
|
-
buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
|
|
2249
|
-
}
|
|
2250
|
-
else {
|
|
2251
|
-
diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
|
|
2252
|
-
}
|
|
2253
|
-
return;
|
|
2254
|
-
}
|
|
2255
|
-
if (key === 'class') {
|
|
2256
|
-
const oldClassName = classToString(oldValue);
|
|
2257
|
-
const newClassName = classToString(newValue);
|
|
2258
|
-
if (oldClassName !== newClassName) {
|
|
2259
|
-
nativeRenderer.setClass(nativeNode, newClassName, isSvg);
|
|
2260
|
-
}
|
|
2261
|
-
return;
|
|
2262
|
-
}
|
|
2263
|
-
if (key === 'style') {
|
|
2264
|
-
comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), styleName => {
|
|
2265
|
-
nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
|
|
2266
|
-
}, (styleName, styleValue) => {
|
|
2267
|
-
nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
|
|
2268
|
-
}, (styleName, styleValue) => {
|
|
2269
|
-
nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
|
|
2270
|
-
});
|
|
2271
|
-
return;
|
|
2272
|
-
}
|
|
2273
|
-
if (listenerReg.test(key)) {
|
|
2274
|
-
nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
|
|
2275
|
-
nativeRenderer.listen(nativeNode, key, newValue, isSvg);
|
|
2276
|
-
return;
|
|
2277
|
-
}
|
|
2278
|
-
if (key === refKey) {
|
|
2279
|
-
unBindRefs = oldValue;
|
|
2280
|
-
bindRefs = newValue;
|
|
2281
|
-
return;
|
|
2282
|
-
}
|
|
2283
|
-
nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
|
|
2284
|
-
});
|
|
2285
|
-
if (!updatedChildren) {
|
|
2286
|
-
newAtom.child = oldAtom.child;
|
|
2287
|
-
// reuseElementChildrenView(nativeRenderer, newAtom, context)
|
|
2288
|
-
}
|
|
2289
|
-
applyRefs(unBindRefs, nativeNode, false);
|
|
2290
|
-
applyRefs(bindRefs, nativeNode, true);
|
|
2291
|
-
}
|
|
2292
|
-
function applyRefs(refs, nativeNode, binding) {
|
|
2293
|
-
if (refs) {
|
|
2294
|
-
const refList = Array.isArray(refs) ? refs : [refs];
|
|
2295
|
-
const len = refList.length;
|
|
2296
|
-
for (let i = 0; i < len; i++) {
|
|
2297
|
-
const item = refList[i];
|
|
2298
|
-
if (item instanceof DynamicRef) {
|
|
2299
|
-
binding ? item.bind(nativeNode) : item.unBind(nativeNode);
|
|
2300
|
-
}
|
|
2301
|
-
}
|
|
2302
|
-
}
|
|
2303
|
-
}
|
|
2304
|
-
|
|
2305
|
-
/**
|
|
2306
|
-
* Viewfly 根组件,用于实现组件状态更新事件通知
|
|
2307
|
-
*/
|
|
2308
|
-
class RootComponent extends Component {
|
|
2309
|
-
constructor(factory, refresh) {
|
|
2310
|
-
super(null, factory, {});
|
|
2311
|
-
Object.defineProperty(this, "refresh", {
|
|
2312
|
-
enumerable: true,
|
|
2313
|
-
configurable: true,
|
|
2314
|
-
writable: true,
|
|
2315
|
-
value: refresh
|
|
2316
|
-
});
|
|
2317
|
-
}
|
|
2318
|
-
markAsChanged(changedComponent) {
|
|
2319
|
-
this._changed = true;
|
|
2320
|
-
if (changedComponent) {
|
|
2321
|
-
this.changedSubComponents.add(changedComponent);
|
|
2322
|
-
}
|
|
2323
|
-
this.refresh();
|
|
2324
|
-
}
|
|
2325
|
-
}
|
|
2326
|
-
|
|
2327
|
-
const viewflyErrorFn = makeError('Viewfly');
|
|
2328
|
-
function viewfly(config) {
|
|
2329
|
-
const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
|
|
2330
|
-
const modules = [];
|
|
2331
|
-
let destroyed = false;
|
|
2332
|
-
let appHost = null;
|
|
2333
|
-
const rootProviders = [];
|
|
2334
|
-
const rootComponent = new RootComponent(() => {
|
|
2335
|
-
const rootContext = createContext(rootProviders, null, context);
|
|
2336
|
-
return () => {
|
|
2337
|
-
return jsx(rootContext, {
|
|
2338
|
-
children: destroyed ? null : root
|
|
2339
|
-
});
|
|
2340
|
-
};
|
|
2341
|
-
}, function () {
|
|
2342
|
-
if (destroyed || !autoUpdate) {
|
|
2343
|
-
return;
|
|
2344
|
-
}
|
|
2345
|
-
nextTick(() => {
|
|
2346
|
-
render(appHost);
|
|
2347
|
-
});
|
|
2348
|
-
});
|
|
2349
|
-
const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
|
|
2350
|
-
let isStarted = false;
|
|
2351
|
-
let task = null;
|
|
2352
|
-
function nextTick(callback) {
|
|
2353
|
-
if (task !== null) {
|
|
2354
|
-
return;
|
|
2355
|
-
}
|
|
2356
|
-
task = Promise.resolve().then(() => {
|
|
2357
|
-
task = null;
|
|
2358
|
-
callback();
|
|
2359
|
-
});
|
|
2360
|
-
}
|
|
2361
|
-
const app = {
|
|
2362
|
-
provide(providers) {
|
|
2363
|
-
providers = Array.isArray(providers) ? providers : [providers];
|
|
2364
|
-
rootProviders.push(...providers);
|
|
2365
|
-
return app;
|
|
2366
|
-
},
|
|
2367
|
-
use(module) {
|
|
2368
|
-
if (Array.isArray(module)) {
|
|
2369
|
-
modules.push(...module);
|
|
2370
|
-
}
|
|
2371
|
-
else {
|
|
2372
|
-
modules.push(module);
|
|
2373
|
-
}
|
|
2374
|
-
return app;
|
|
2375
|
-
},
|
|
2376
|
-
mount(host) {
|
|
2377
|
-
var _a, _b;
|
|
2378
|
-
if (isStarted) {
|
|
2379
|
-
throw viewflyErrorFn('application has already started.');
|
|
2380
|
-
}
|
|
2381
|
-
for (const module of modules) {
|
|
2382
|
-
(_a = module.setup) === null || _a === void 0 ? void 0 : _a.call(module, app);
|
|
2383
|
-
}
|
|
2384
|
-
isStarted = true;
|
|
2385
|
-
appHost = host;
|
|
2386
|
-
render(host);
|
|
2387
|
-
for (const module of modules) {
|
|
2388
|
-
(_b = module.onAfterStartup) === null || _b === void 0 ? void 0 : _b.call(module, app);
|
|
2389
|
-
}
|
|
2390
|
-
if (!autoUpdate) {
|
|
2391
|
-
return app;
|
|
2392
|
-
}
|
|
2393
|
-
return app;
|
|
2394
|
-
},
|
|
2395
|
-
render() {
|
|
2396
|
-
if (appHost) {
|
|
2397
|
-
render(appHost);
|
|
2398
|
-
}
|
|
2399
|
-
return app;
|
|
2400
|
-
},
|
|
2401
|
-
destroy() {
|
|
2402
|
-
var _a;
|
|
2403
|
-
destroyed = true;
|
|
2404
|
-
rootComponent.markAsDirtied();
|
|
2405
|
-
app.render();
|
|
2406
|
-
for (const module of modules) {
|
|
2407
|
-
(_a = module.onDestroy) === null || _a === void 0 ? void 0 : _a.call(module);
|
|
2408
|
-
}
|
|
2409
|
-
}
|
|
2410
|
-
};
|
|
2411
|
-
return app;
|
|
2412
|
-
}
|
|
2413
|
-
|
|
2414
|
-
function computed(callback, isContinue) {
|
|
2415
|
-
let isStop = false;
|
|
2416
|
-
const dep = new Dep(() => {
|
|
2417
|
-
if (isStop) {
|
|
2418
|
-
return;
|
|
2419
|
-
}
|
|
2420
|
-
isStop = true;
|
|
2421
|
-
dep.destroy();
|
|
2422
|
-
pushDepContext(dep);
|
|
2423
|
-
const value = callback();
|
|
2424
|
-
popDepContext();
|
|
2425
|
-
internalWrite(() => {
|
|
2426
|
-
proxy.value = value;
|
|
2427
|
-
});
|
|
2428
|
-
canListen(value);
|
|
2429
|
-
isStop = false;
|
|
2430
|
-
});
|
|
2431
|
-
pushDepContext(dep);
|
|
2432
|
-
const value = callback();
|
|
2433
|
-
popDepContext();
|
|
2434
|
-
const proxy = new Proxy({
|
|
2435
|
-
value
|
|
2436
|
-
}, readonlyProxyHandler);
|
|
2437
|
-
function canListen(value) {
|
|
2438
|
-
if (isContinue) {
|
|
2439
|
-
const b = isContinue(value);
|
|
2440
|
-
if (b === false) {
|
|
2441
|
-
dep.destroy();
|
|
2442
|
-
return false;
|
|
2443
|
-
}
|
|
2444
|
-
}
|
|
2445
|
-
return true;
|
|
2446
|
-
}
|
|
2447
|
-
if (!canListen(value)) {
|
|
2448
|
-
return proxy;
|
|
2449
|
-
}
|
|
2450
|
-
registryComponentDestroyCallback(() => {
|
|
2451
|
-
dep.destroy();
|
|
2452
|
-
});
|
|
2453
|
-
return proxy;
|
|
2454
|
-
}
|
|
2455
|
-
|
|
2456
|
-
const defaultShallowObjectReactiveHandler = new ObjectReactiveHandler({
|
|
2457
|
-
readonly: false,
|
|
2458
|
-
shallow: true
|
|
2459
|
-
});
|
|
2460
|
-
const defaultShallowArrayReactiveHandler = new ArrayReactiveHandler({
|
|
2461
|
-
readonly: false,
|
|
2462
|
-
shallow: true
|
|
2463
|
-
});
|
|
2464
|
-
const defaultShallowMapReactiveHandler = new MapReactiveHandler({
|
|
2465
|
-
readonly: false,
|
|
2466
|
-
shallow: true
|
|
2467
|
-
});
|
|
2468
|
-
const defaultShallowSetReactiveHandler = new SetReactiveHandler({
|
|
2469
|
-
readonly: false,
|
|
2470
|
-
shallow: true
|
|
2471
|
-
});
|
|
2472
|
-
function shallowReactive(raw) {
|
|
2473
|
-
if (isReactive(raw)) {
|
|
2474
|
-
return raw;
|
|
2475
|
-
}
|
|
2476
|
-
let proxy = rawToProxyCache.get(raw);
|
|
2477
|
-
if (proxy) {
|
|
2478
|
-
return proxy;
|
|
2479
|
-
}
|
|
2480
|
-
const type = getStringType(raw);
|
|
2481
|
-
switch (type) {
|
|
2482
|
-
case '[object Object]':
|
|
2483
|
-
proxy = new Proxy(raw, defaultShallowObjectReactiveHandler);
|
|
2484
|
-
break;
|
|
2485
|
-
case '[object Array]':
|
|
2486
|
-
proxy = new Proxy(raw, defaultShallowArrayReactiveHandler);
|
|
2487
|
-
break;
|
|
2488
|
-
case '[object Set]':
|
|
2489
|
-
case '[object WeakSet]':
|
|
2490
|
-
proxy = new Proxy(raw, defaultShallowSetReactiveHandler);
|
|
2491
|
-
break;
|
|
2492
|
-
case '[object Map]':
|
|
2493
|
-
case '[object WeakMap]':
|
|
2494
|
-
proxy = new Proxy(raw, defaultShallowMapReactiveHandler);
|
|
2495
|
-
break;
|
|
2496
|
-
default:
|
|
2497
|
-
return raw;
|
|
2498
|
-
}
|
|
2499
|
-
rawToProxyCache.set(raw, proxy);
|
|
2500
|
-
proxyToRawCache.set(proxy, raw);
|
|
2501
|
-
return proxy;
|
|
2502
|
-
}
|
|
2503
|
-
|
|
2504
|
-
/**
|
|
2505
|
-
* 组件状态管理器
|
|
2506
|
-
* @param state 初始状态
|
|
2507
|
-
* @example
|
|
2508
|
-
* ```tsx
|
|
2509
|
-
* function App() {
|
|
2510
|
-
* // 初始化状态
|
|
2511
|
-
* const state = createSignal(1)
|
|
2512
|
-
*
|
|
2513
|
-
* return () => {
|
|
2514
|
-
* <div>
|
|
2515
|
-
* <div>当前值为:{state()}</div>
|
|
2516
|
-
* <div>
|
|
2517
|
-
* <button type="button" onClick={() => {
|
|
2518
|
-
* // 当点击时更新状态
|
|
2519
|
-
* state.set(state() + 1)
|
|
2520
|
-
* }
|
|
2521
|
-
* }>updateState</button>
|
|
2522
|
-
* </div>
|
|
2523
|
-
* </div>
|
|
2524
|
-
* }
|
|
2525
|
-
* }
|
|
2526
|
-
*/
|
|
2527
|
-
function createSignal(state) {
|
|
2528
|
-
const subscribers = new Set();
|
|
2529
|
-
function signal() {
|
|
2530
|
-
const listener = getDepContext();
|
|
2531
|
-
if (listener && !subscribers.has(listener)) {
|
|
2532
|
-
listener.destroyCallbacks.push(() => {
|
|
2533
|
-
subscribers.delete(listener);
|
|
2534
|
-
});
|
|
2535
|
-
subscribers.add(listener);
|
|
2536
|
-
}
|
|
2537
|
-
return state;
|
|
2538
|
-
}
|
|
2539
|
-
signal.set = function (newValue) {
|
|
2540
|
-
if (newValue === state) {
|
|
2541
|
-
return;
|
|
2542
|
-
}
|
|
2543
|
-
state = newValue;
|
|
2544
|
-
const listeners = Array.from(subscribers);
|
|
2545
|
-
listeners.forEach(listener => listener.effect());
|
|
2546
|
-
};
|
|
2547
|
-
return signal;
|
|
2548
|
-
}
|
|
2549
|
-
|
|
2550
|
-
/**
|
|
2551
|
-
* 使用派生值,Viewfly 会收集回调函数内同步执行时访问的 Signal,
|
|
2552
|
-
* 并在你获取 createDerived 函数返回的 Signal 的值时,自动计算最新的值。
|
|
2553
|
-
*
|
|
2554
|
-
* @param fn
|
|
2555
|
-
* @param isContinue 可选的停止函数,在每次值更新后调用,当返回值为 false 时,将不再监听依赖的变化
|
|
2556
|
-
*/
|
|
2557
|
-
function createDerived(fn, isContinue) {
|
|
2558
|
-
let isStop = false;
|
|
2559
|
-
function canListen(value) {
|
|
2560
|
-
if (isContinue) {
|
|
2561
|
-
const b = isContinue(value);
|
|
2562
|
-
if (b === false) {
|
|
2563
|
-
listener.destroy();
|
|
2564
|
-
return false;
|
|
2565
|
-
}
|
|
2566
|
-
}
|
|
2567
|
-
return true;
|
|
2568
|
-
}
|
|
2569
|
-
const listener = new Dep(() => {
|
|
2570
|
-
if (isStop) {
|
|
2571
|
-
return;
|
|
2572
|
-
}
|
|
2573
|
-
isStop = true;
|
|
2574
|
-
listener.destroy();
|
|
2575
|
-
pushDepContext(listener);
|
|
2576
|
-
const value = fn();
|
|
2577
|
-
popDepContext();
|
|
2578
|
-
signal.set(value);
|
|
2579
|
-
canListen(value);
|
|
2580
|
-
isStop = false;
|
|
2581
|
-
});
|
|
2582
|
-
pushDepContext(listener);
|
|
2583
|
-
const value = fn();
|
|
2584
|
-
const signal = createSignal(value);
|
|
2585
|
-
popDepContext();
|
|
2586
|
-
isStop = false;
|
|
2587
|
-
if (canListen(value)) {
|
|
2588
|
-
registryComponentDestroyCallback(() => listener.destroy());
|
|
2589
|
-
}
|
|
2590
|
-
return signal;
|
|
2591
|
-
}
|
|
2592
|
-
|
|
2593
|
-
/* eslint-enable max-len*/
|
|
2594
|
-
function createEffect(deps, callback) {
|
|
2595
|
-
let prevFn;
|
|
2596
|
-
const isArray = Array.isArray(deps);
|
|
2597
|
-
const effect = new Dep(function () {
|
|
2598
|
-
if (prevFn) {
|
|
2599
|
-
prevFn();
|
|
2600
|
-
}
|
|
2601
|
-
const newValue = isArray ? deps.map(fn => fn()) : deps();
|
|
2602
|
-
prevFn = callback(newValue, oldValue);
|
|
2603
|
-
oldValue = newValue;
|
|
2604
|
-
});
|
|
2605
|
-
pushDepContext(effect);
|
|
2606
|
-
let oldValue = isArray ? deps.map(fn => fn()) : deps();
|
|
2607
|
-
popDepContext();
|
|
2608
|
-
let isUnWatch = false;
|
|
2609
|
-
function unWatch() {
|
|
2610
|
-
if (isUnWatch) {
|
|
2611
|
-
return;
|
|
2612
|
-
}
|
|
2613
|
-
isUnWatch = true;
|
|
2614
|
-
if (prevFn) {
|
|
2615
|
-
prevFn();
|
|
2616
|
-
}
|
|
2617
|
-
effect.destroy();
|
|
2618
|
-
}
|
|
2619
|
-
registryComponentDestroyCallback(unWatch);
|
|
2620
|
-
return unWatch;
|
|
2621
|
-
}
|
|
2622
|
-
|
|
2623
|
-
exports.ArrayReactiveHandler = ArrayReactiveHandler;
|
|
2624
|
-
exports.Component = Component;
|
|
2625
|
-
exports.Dep = Dep;
|
|
2626
|
-
exports.DynamicRef = DynamicRef;
|
|
2627
|
-
exports.ForwardRef = ForwardRef;
|
|
2628
|
-
exports.Fragment = Fragment;
|
|
2629
|
-
exports.Inject = Inject;
|
|
2630
|
-
exports.Injectable = Injectable;
|
|
2631
|
-
exports.InjectionToken = InjectionToken;
|
|
2632
|
-
exports.Injector = Injector;
|
|
2633
|
-
exports.JSXNodeFactory = JSXNodeFactory;
|
|
2634
|
-
exports.MapReactiveHandler = MapReactiveHandler;
|
|
2635
|
-
exports.NativeRenderer = NativeRenderer;
|
|
2636
|
-
exports.NullInjector = NullInjector;
|
|
2637
|
-
exports.ObjectReactiveHandler = ObjectReactiveHandler;
|
|
2638
|
-
exports.Optional = Optional;
|
|
2639
|
-
exports.Prop = Prop;
|
|
2640
|
-
exports.ReflectiveInjector = ReflectiveInjector;
|
|
2641
|
-
exports.RootComponent = RootComponent;
|
|
2642
|
-
exports.Scope = Scope;
|
|
2643
|
-
exports.Self = Self;
|
|
2644
|
-
exports.SetReactiveHandler = SetReactiveHandler;
|
|
2645
|
-
exports.SkipSelf = SkipSelf;
|
|
2646
|
-
exports.StaticRef = StaticRef;
|
|
2647
|
-
exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
|
|
2648
|
-
exports.Type = Type;
|
|
2649
|
-
exports.comparePropsWithCallbacks = comparePropsWithCallbacks;
|
|
2650
|
-
exports.computed = computed;
|
|
2651
|
-
exports.createContext = createContext;
|
|
2652
|
-
exports.createContextProvider = createContextProvider;
|
|
2653
|
-
exports.createDerived = createDerived;
|
|
2654
|
-
exports.createDynamicRef = createDynamicRef;
|
|
2655
|
-
exports.createEffect = createEffect;
|
|
2656
|
-
exports.createRef = createRef;
|
|
2657
|
-
exports.createRenderer = createRenderer;
|
|
2658
|
-
exports.createSignal = createSignal;
|
|
2659
|
-
exports.defaultArrayReactiveHandler = defaultArrayReactiveHandler;
|
|
2660
|
-
exports.defaultMapReactiveHandler = defaultMapReactiveHandler;
|
|
2661
|
-
exports.defaultObjectReactiveHandler = defaultObjectReactiveHandler;
|
|
2662
|
-
exports.defaultSetReactiveHandler = defaultSetReactiveHandler;
|
|
2663
|
-
exports.defaultShallowArrayReactiveHandler = defaultShallowArrayReactiveHandler;
|
|
2664
|
-
exports.defaultShallowMapReactiveHandler = defaultShallowMapReactiveHandler;
|
|
2665
|
-
exports.defaultShallowObjectReactiveHandler = defaultShallowObjectReactiveHandler;
|
|
2666
|
-
exports.defaultShallowSetReactiveHandler = defaultShallowSetReactiveHandler;
|
|
2667
|
-
exports.forwardRef = forwardRef;
|
|
2668
|
-
exports.getCurrentInstance = getCurrentInstance;
|
|
2669
|
-
exports.getDepContext = getDepContext;
|
|
2670
|
-
exports.getSetupContext = getSetupContext;
|
|
2671
|
-
exports.inject = inject;
|
|
2672
|
-
exports.internalWrite = internalWrite;
|
|
2673
|
-
exports.isReactive = isReactive;
|
|
2674
|
-
exports.jsx = jsx;
|
|
2675
|
-
exports.jsxs = jsxs;
|
|
2676
|
-
exports.makeError = makeError;
|
|
2677
|
-
exports.normalizeProvider = normalizeProvider;
|
|
2678
|
-
exports.onMounted = onMounted;
|
|
2679
|
-
exports.onUnmounted = onUnmounted;
|
|
2680
|
-
exports.onUpdated = onUpdated;
|
|
2681
|
-
exports.popDepContext = popDepContext;
|
|
2682
|
-
exports.proxyToRawCache = proxyToRawCache;
|
|
2683
|
-
exports.pushDepContext = pushDepContext;
|
|
2684
|
-
exports.rawToProxyCache = rawToProxyCache;
|
|
2685
|
-
exports.reactive = reactive;
|
|
2686
|
-
exports.readonlyProxyHandler = readonlyProxyHandler;
|
|
2687
|
-
exports.registryComponentDestroyCallback = registryComponentDestroyCallback;
|
|
2688
|
-
exports.shallowReactive = shallowReactive;
|
|
2689
|
-
exports.toRaw = toRaw;
|
|
2690
|
-
exports.track = track;
|
|
2691
|
-
exports.trigger = trigger;
|
|
2692
|
-
exports.viewfly = viewfly;
|
|
2693
|
-
exports.watch = watch;
|
|
2694
|
-
exports.withAnnotation = withAnnotation;
|
|
2695
|
-
exports.withMemo = withMemo;
|