@viewfly/core 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/foundation/_utils.d.ts +15 -0
- package/bundles/foundation/component.d.ts +14 -11
- package/bundles/foundation/jsx-element.d.ts +3 -3
- package/bundles/foundation/memo.d.ts +1 -1
- package/bundles/foundation/renderer.d.ts +1 -4
- package/bundles/foundation/root.component.d.ts +2 -2
- package/bundles/foundation/types.d.ts +7 -6
- package/bundles/index.esm.js +57 -90
- package/bundles/index.js +57 -90
- package/jsx-runtime/index.d.ts +1 -2
- package/package.json +2 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Component, JSXElement, JSXInternal, JSXText, NativeNode, Props } from '@viewfly/core';
|
|
1
2
|
export interface ListenDelegate {
|
|
2
3
|
delegate: () => any;
|
|
3
4
|
listenFn: ((...args: any[]) => any) | void;
|
|
@@ -11,3 +12,17 @@ export declare const refKey = "ref";
|
|
|
11
12
|
export declare function getObjectChanges(newProps: Record<string, any>, oldProps: Record<string, any>): ObjectChanges;
|
|
12
13
|
export declare function classToString(config: unknown): string;
|
|
13
14
|
export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
|
|
15
|
+
export interface Atom {
|
|
16
|
+
jsxNode: JSXElement | JSXText | Component;
|
|
17
|
+
parent: Atom | null;
|
|
18
|
+
nativeNode: NativeNode | null;
|
|
19
|
+
child: Atom | null;
|
|
20
|
+
sibling: Atom | null;
|
|
21
|
+
}
|
|
22
|
+
export interface ComponentView {
|
|
23
|
+
atom: Atom;
|
|
24
|
+
template: JSXInternal.JSXNode;
|
|
25
|
+
host: NativeNode;
|
|
26
|
+
isParent: boolean;
|
|
27
|
+
render(newProps: Props, oldProps: Props): JSXInternal.JSXNode;
|
|
28
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { AbstractType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '../di/_api';
|
|
2
2
|
import { JSXTypeof, Key, Props } from './jsx-element';
|
|
3
|
+
import { ComponentView } from './_utils';
|
|
3
4
|
import { JSXInternal } from './types';
|
|
4
5
|
export declare class JSXComponent {
|
|
5
6
|
props: Props;
|
|
@@ -11,14 +12,16 @@ export declare class JSXComponent {
|
|
|
11
12
|
* Viewfly 组件管理类,用于管理组件的生命周期,上下文等
|
|
12
13
|
*/
|
|
13
14
|
export declare class Component extends ReflectiveInjector implements JSXTypeof {
|
|
14
|
-
type: JSXInternal.
|
|
15
|
+
type: JSXInternal.ComponentConstructor;
|
|
15
16
|
props: Props;
|
|
16
17
|
key?: Key | undefined;
|
|
17
|
-
$$typeOf: JSXInternal.
|
|
18
|
+
$$typeOf: JSXInternal.ComponentConstructor<any>;
|
|
19
|
+
$$view: ComponentView;
|
|
18
20
|
destroyCallbacks: LifeCycleCallback[];
|
|
19
21
|
mountCallbacks: LifeCycleCallback[];
|
|
20
22
|
propsChangedCallbacks: PropsChangedCallback<any>[];
|
|
21
23
|
updatedCallbacks: LifeCycleCallback[];
|
|
24
|
+
changedSubComponents: Set<Component>;
|
|
22
25
|
get dirty(): boolean;
|
|
23
26
|
get changed(): boolean;
|
|
24
27
|
protected _dirty: boolean;
|
|
@@ -28,15 +31,15 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
|
|
|
28
31
|
private propsChangedDestroyCallbacks;
|
|
29
32
|
private unWatch?;
|
|
30
33
|
private isFirstRending;
|
|
31
|
-
constructor(context: Injector, type: JSXInternal.
|
|
34
|
+
constructor(context: Injector, type: JSXInternal.ComponentConstructor, props: Props, key?: Key | undefined);
|
|
32
35
|
is(target: JSXTypeof): boolean;
|
|
33
36
|
provide<T>(providers: Provider<T> | Provider<T>[]): void;
|
|
34
37
|
setup(): {
|
|
35
|
-
template:
|
|
36
|
-
render: (newProps: Props, oldProps: Props) =>
|
|
38
|
+
template: any;
|
|
39
|
+
render: (newProps: Props, oldProps: Props) => any;
|
|
37
40
|
};
|
|
38
41
|
markAsDirtied(): void;
|
|
39
|
-
markAsChanged(): void;
|
|
42
|
+
markAsChanged(changedComponent?: Component): void;
|
|
40
43
|
rendered(): void;
|
|
41
44
|
destroy(): void;
|
|
42
45
|
private invokePropsChangedHooks;
|
|
@@ -110,13 +113,13 @@ export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnT
|
|
|
110
113
|
export interface AbstractInstanceType<T extends Record<string, any>> {
|
|
111
114
|
(): T & JSXInternal.ComponentInstance<any>;
|
|
112
115
|
}
|
|
113
|
-
export declare class Ref<T
|
|
116
|
+
export declare class Ref<T> {
|
|
114
117
|
private callback;
|
|
115
118
|
private unBindMap;
|
|
116
119
|
private targetCaches;
|
|
117
|
-
constructor(callback: RefListener<
|
|
118
|
-
bind(value:
|
|
119
|
-
unBind(value:
|
|
120
|
+
constructor(callback: RefListener<T>);
|
|
121
|
+
bind(value: T): void;
|
|
122
|
+
unBind(value: T): void;
|
|
120
123
|
}
|
|
121
124
|
/**
|
|
122
125
|
* 用于节点渲染完成时获取 DOM 节点
|
|
@@ -139,7 +142,7 @@ export declare class Ref<T, U> {
|
|
|
139
142
|
* }
|
|
140
143
|
* ```
|
|
141
144
|
*/
|
|
142
|
-
export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<
|
|
145
|
+
export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<U>;
|
|
143
146
|
declare const depsKey: unique symbol;
|
|
144
147
|
/**
|
|
145
148
|
* 组件状态实例,直接调用可以获取最新的状态,通过 set 方法可以更新状态
|
|
@@ -6,13 +6,13 @@ export interface Props {
|
|
|
6
6
|
[key: string]: any;
|
|
7
7
|
[key: symbol]: any;
|
|
8
8
|
}
|
|
9
|
-
export declare function Fragment(props: Props): () =>
|
|
9
|
+
export declare function Fragment(props: Props): () => any;
|
|
10
10
|
export type Key = number | string;
|
|
11
11
|
export declare function jsx(name: string, props: Props, key?: Key): JSXElement;
|
|
12
|
-
export declare function jsx(setup: JSXInternal.
|
|
12
|
+
export declare function jsx(setup: JSXInternal.ComponentConstructor, props: Props, key?: Key): JSXComponent;
|
|
13
13
|
export declare const jsxs: typeof jsx;
|
|
14
14
|
export interface JSXTypeof {
|
|
15
|
-
$$typeOf: string | JSXInternal.
|
|
15
|
+
$$typeOf: string | JSXInternal.ComponentConstructor;
|
|
16
16
|
is(target: JSXTypeof): boolean;
|
|
17
17
|
}
|
|
18
18
|
export declare class JSXText implements JSXTypeof {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Props } from './jsx-element';
|
|
2
2
|
import { JSXInternal } from './types';
|
|
3
|
-
export declare function withMemo<T extends Props = Props>(shouldUpdate: JSXInternal.ComponentInstance<T>['$shouldUpdate'], render: () => JSXInternal.
|
|
3
|
+
export declare function withMemo<T extends Props = Props>(shouldUpdate: JSXInternal.ComponentInstance<T>['$shouldUpdate'], render: () => JSXInternal.JSXNode): JSXInternal.ComponentInstance<T>;
|
|
@@ -10,13 +10,10 @@ export declare class Renderer {
|
|
|
10
10
|
private nativeRenderer;
|
|
11
11
|
private rootComponentRef;
|
|
12
12
|
private hostRef;
|
|
13
|
-
private componentAtomCaches;
|
|
14
13
|
private isInit;
|
|
15
14
|
constructor(nativeRenderer: NativeRenderer, rootComponentRef: RootComponentRef, hostRef: HostRef);
|
|
16
15
|
render(): void;
|
|
17
|
-
private
|
|
18
|
-
private getPrevSibling;
|
|
19
|
-
private reconcileElement;
|
|
16
|
+
private updateView;
|
|
20
17
|
private applyChanges;
|
|
21
18
|
private diff;
|
|
22
19
|
private reuseComponentView;
|
|
@@ -6,6 +6,6 @@ import { Injector } from '../di/_api';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare class RootComponent extends Component {
|
|
8
8
|
onChange: (() => void) | null;
|
|
9
|
-
constructor(factory: JSXInternal.
|
|
10
|
-
markAsChanged(): void;
|
|
9
|
+
constructor(factory: JSXInternal.ComponentConstructor, parentInjector: Injector);
|
|
10
|
+
markAsChanged(changedComponent?: Component): void;
|
|
11
11
|
}
|
|
@@ -8,22 +8,23 @@ export declare namespace JSXInternal {
|
|
|
8
8
|
$shouldUpdate?(currentProps: P, prevProps: P): boolean;
|
|
9
9
|
}
|
|
10
10
|
type JSXNode = Element | JSXInternal.ElementClass | string | number | boolean | null | undefined | JSXNode[];
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
type ComponentConstructor<P = any> = (props: P) => (() => Element) | ComponentInstance<P>;
|
|
12
|
+
type Element<P = any, C extends string | ComponentConstructor<P> = string | ComponentConstructor<P>> = C extends string ? IntrinsicElements[C] : (() => Element) | ComponentInstance<P>;
|
|
13
13
|
interface IntrinsicAttributes {
|
|
14
14
|
key?: Key;
|
|
15
15
|
ref?: any;
|
|
16
16
|
}
|
|
17
17
|
interface RefAttributes<T> extends IntrinsicAttributes {
|
|
18
|
-
ref?: Ref<
|
|
18
|
+
ref?: Ref<ExtractInstanceType<T>> | Ref<ExtractInstanceType<T>>[];
|
|
19
19
|
}
|
|
20
|
-
interface ElementClass<P = any> {
|
|
21
|
-
(props?: P): () => (JSXNode | ComponentInstance<P>);
|
|
20
|
+
interface ElementClass<P = any> extends ComponentInstance<P> {
|
|
22
21
|
}
|
|
23
22
|
interface ElementChildrenAttribute {
|
|
24
23
|
}
|
|
25
24
|
interface IntrinsicElements {
|
|
25
|
+
[name: string]: any;
|
|
26
26
|
}
|
|
27
|
-
interface IntrinsicClassAttributes<T>
|
|
27
|
+
interface IntrinsicClassAttributes<T> {
|
|
28
|
+
ref?: Ref<T>;
|
|
28
29
|
}
|
|
29
30
|
}
|
package/bundles/index.esm.js
CHANGED
|
@@ -660,6 +660,7 @@ class Component extends ReflectiveInjector {
|
|
|
660
660
|
this.mountCallbacks = [];
|
|
661
661
|
this.propsChangedCallbacks = [];
|
|
662
662
|
this.updatedCallbacks = [];
|
|
663
|
+
this.changedSubComponents = new Set();
|
|
663
664
|
this._dirty = true;
|
|
664
665
|
this._changed = true;
|
|
665
666
|
this.updatedDestroyCallbacks = [];
|
|
@@ -755,14 +756,18 @@ class Component extends ReflectiveInjector {
|
|
|
755
756
|
this._dirty = true;
|
|
756
757
|
this.markAsChanged();
|
|
757
758
|
}
|
|
758
|
-
markAsChanged() {
|
|
759
|
+
markAsChanged(changedComponent) {
|
|
760
|
+
if (changedComponent) {
|
|
761
|
+
this.changedSubComponents.add(changedComponent);
|
|
762
|
+
}
|
|
759
763
|
if (this._changed) {
|
|
760
764
|
return;
|
|
761
765
|
}
|
|
762
766
|
this._changed = true;
|
|
763
|
-
this.parentComponent.markAsChanged();
|
|
767
|
+
this.parentComponent.markAsChanged(this);
|
|
764
768
|
}
|
|
765
769
|
rendered() {
|
|
770
|
+
this.changedSubComponents.clear();
|
|
766
771
|
const is = this.isFirstRending;
|
|
767
772
|
this.isFirstRending = false;
|
|
768
773
|
this._dirty = this._changed = false;
|
|
@@ -1163,9 +1168,12 @@ class RootComponent extends Component {
|
|
|
1163
1168
|
super(parentInjector, factory, {});
|
|
1164
1169
|
this.onChange = null;
|
|
1165
1170
|
}
|
|
1166
|
-
markAsChanged() {
|
|
1171
|
+
markAsChanged(changedComponent) {
|
|
1167
1172
|
var _a;
|
|
1168
1173
|
this._changed = true;
|
|
1174
|
+
if (changedComponent) {
|
|
1175
|
+
this.changedSubComponents.add(changedComponent);
|
|
1176
|
+
}
|
|
1169
1177
|
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
1170
1178
|
}
|
|
1171
1179
|
}
|
|
@@ -1210,103 +1218,48 @@ class RootComponentRef {
|
|
|
1210
1218
|
}
|
|
1211
1219
|
class HostRef {
|
|
1212
1220
|
}
|
|
1213
|
-
class Atom {
|
|
1214
|
-
constructor(jsxNode, parent) {
|
|
1215
|
-
this.jsxNode = jsxNode;
|
|
1216
|
-
this.parent = parent;
|
|
1217
|
-
this.nativeNode = null;
|
|
1218
|
-
this.child = null;
|
|
1219
|
-
this.sibling = null;
|
|
1220
|
-
}
|
|
1221
|
-
}
|
|
1222
1221
|
let Renderer = class Renderer {
|
|
1223
1222
|
constructor(nativeRenderer, rootComponentRef, hostRef) {
|
|
1224
1223
|
this.nativeRenderer = nativeRenderer;
|
|
1225
1224
|
this.rootComponentRef = rootComponentRef;
|
|
1226
1225
|
this.hostRef = hostRef;
|
|
1227
|
-
this.componentAtomCaches = new WeakMap();
|
|
1228
1226
|
this.isInit = true;
|
|
1229
1227
|
}
|
|
1230
1228
|
render() {
|
|
1231
1229
|
const component = this.rootComponentRef.component;
|
|
1232
1230
|
const host = this.hostRef.host;
|
|
1233
1231
|
if (this.isInit) {
|
|
1234
|
-
const atom =
|
|
1232
|
+
const atom = {
|
|
1233
|
+
jsxNode: component,
|
|
1234
|
+
parent: null,
|
|
1235
|
+
sibling: null,
|
|
1236
|
+
child: null,
|
|
1237
|
+
nativeNode: null
|
|
1238
|
+
};
|
|
1235
1239
|
this.buildView(atom, {
|
|
1236
1240
|
isParent: true,
|
|
1237
1241
|
host
|
|
1238
1242
|
});
|
|
1239
1243
|
}
|
|
1240
1244
|
else {
|
|
1241
|
-
this.
|
|
1242
|
-
host,
|
|
1243
|
-
isParent: true
|
|
1244
|
-
});
|
|
1245
|
+
this.updateView(component);
|
|
1245
1246
|
}
|
|
1246
1247
|
this.isInit = false;
|
|
1247
1248
|
}
|
|
1248
|
-
|
|
1249
|
+
updateView(component) {
|
|
1249
1250
|
if (component.dirty) {
|
|
1250
|
-
this.applyChanges(component
|
|
1251
|
+
this.applyChanges(component);
|
|
1251
1252
|
component.rendered();
|
|
1252
1253
|
}
|
|
1253
1254
|
else if (component.changed) {
|
|
1254
|
-
|
|
1255
|
-
|
|
1255
|
+
component.changedSubComponents.forEach(child => {
|
|
1256
|
+
this.updateView(child);
|
|
1257
|
+
});
|
|
1256
1258
|
component.rendered();
|
|
1257
1259
|
}
|
|
1258
|
-
else {
|
|
1259
|
-
const prevSibling = this.getPrevSibling(component);
|
|
1260
|
-
if (prevSibling) {
|
|
1261
|
-
context.isParent = false;
|
|
1262
|
-
context.host = prevSibling;
|
|
1263
|
-
}
|
|
1264
|
-
}
|
|
1265
|
-
}
|
|
1266
|
-
getPrevSibling(component) {
|
|
1267
|
-
let atom = this.componentAtomCaches.get(component).atom.child;
|
|
1268
|
-
const childAtoms = [];
|
|
1269
|
-
while (atom) {
|
|
1270
|
-
childAtoms.push(atom);
|
|
1271
|
-
atom = atom.sibling;
|
|
1272
|
-
}
|
|
1273
|
-
const components = [];
|
|
1274
|
-
while (childAtoms.length) {
|
|
1275
|
-
const last = childAtoms.pop();
|
|
1276
|
-
if (last.jsxNode instanceof Component) {
|
|
1277
|
-
components.push(last.jsxNode);
|
|
1278
|
-
continue;
|
|
1279
|
-
}
|
|
1280
|
-
return last.nativeNode;
|
|
1281
|
-
}
|
|
1282
|
-
for (const component of components) {
|
|
1283
|
-
const nativeNode = this.getPrevSibling(component);
|
|
1284
|
-
if (nativeNode) {
|
|
1285
|
-
return nativeNode;
|
|
1286
|
-
}
|
|
1287
|
-
}
|
|
1288
|
-
return null;
|
|
1289
1260
|
}
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
if (atom.jsxNode instanceof Component) {
|
|
1293
|
-
this.reconcile(atom.jsxNode, context);
|
|
1294
|
-
atom = atom.sibling;
|
|
1295
|
-
continue;
|
|
1296
|
-
}
|
|
1297
|
-
if (atom.jsxNode instanceof JSXElement) {
|
|
1298
|
-
this.reconcileElement(atom.child, {
|
|
1299
|
-
host: atom.nativeNode,
|
|
1300
|
-
isParent: true
|
|
1301
|
-
});
|
|
1302
|
-
context.host = atom.nativeNode;
|
|
1303
|
-
context.isParent = false;
|
|
1304
|
-
}
|
|
1305
|
-
atom = atom.sibling;
|
|
1306
|
-
}
|
|
1307
|
-
}
|
|
1308
|
-
applyChanges(component, context) {
|
|
1309
|
-
const { atom, render } = this.componentAtomCaches.get(component);
|
|
1261
|
+
applyChanges(component) {
|
|
1262
|
+
const { atom, render, host, isParent } = component.$$view;
|
|
1310
1263
|
const diffAtom = atom.child;
|
|
1311
1264
|
const template = render(component.props, component.props);
|
|
1312
1265
|
if (template) {
|
|
@@ -1315,7 +1268,10 @@ let Renderer = class Renderer {
|
|
|
1315
1268
|
else {
|
|
1316
1269
|
atom.child = null;
|
|
1317
1270
|
}
|
|
1318
|
-
this.diff(atom.child, diffAtom,
|
|
1271
|
+
this.diff(atom.child, diffAtom, {
|
|
1272
|
+
host,
|
|
1273
|
+
isParent
|
|
1274
|
+
}, 0, 0);
|
|
1319
1275
|
}
|
|
1320
1276
|
diff(newAtom, oldAtom, context, expectIndex, index) {
|
|
1321
1277
|
const oldChildren = [];
|
|
@@ -1331,16 +1287,12 @@ let Renderer = class Renderer {
|
|
|
1331
1287
|
const changeCommits = {
|
|
1332
1288
|
updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
|
|
1333
1289
|
commits.push((offset) => {
|
|
1334
|
-
const { render, template } =
|
|
1290
|
+
const { render, template } = reusedAtom.jsxNode.$$view;
|
|
1335
1291
|
const newProps = newAtom.jsxNode.props;
|
|
1336
1292
|
const oldProps = reusedAtom.jsxNode.props;
|
|
1337
1293
|
newAtom.jsxNode = reusedAtom.jsxNode;
|
|
1338
1294
|
const newTemplate = render(newProps, oldProps);
|
|
1339
|
-
|
|
1340
|
-
render,
|
|
1341
|
-
template: newTemplate,
|
|
1342
|
-
atom: newAtom
|
|
1343
|
-
});
|
|
1295
|
+
newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
|
|
1344
1296
|
if (newTemplate === template) {
|
|
1345
1297
|
this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
|
|
1346
1298
|
return;
|
|
@@ -1516,7 +1468,7 @@ let Renderer = class Renderer {
|
|
|
1516
1468
|
}
|
|
1517
1469
|
buildView(atom, context) {
|
|
1518
1470
|
if (atom.jsxNode instanceof Component) {
|
|
1519
|
-
this.componentRender(atom.jsxNode, atom);
|
|
1471
|
+
this.componentRender(atom.jsxNode, atom, context);
|
|
1520
1472
|
let child = atom.child;
|
|
1521
1473
|
while (child) {
|
|
1522
1474
|
this.buildView(child, context);
|
|
@@ -1560,24 +1512,33 @@ let Renderer = class Renderer {
|
|
|
1560
1512
|
}
|
|
1561
1513
|
}
|
|
1562
1514
|
}
|
|
1563
|
-
componentRender(component, from) {
|
|
1515
|
+
componentRender(component, from, context) {
|
|
1564
1516
|
const { template, render } = component.setup();
|
|
1565
1517
|
if (template) {
|
|
1566
1518
|
this.linkTemplate(template, component, from);
|
|
1567
1519
|
}
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
template,
|
|
1571
|
-
atom: from
|
|
1572
|
-
});
|
|
1520
|
+
component.$$view = Object.assign({ render,
|
|
1521
|
+
template, atom: from }, context);
|
|
1573
1522
|
return from;
|
|
1574
1523
|
}
|
|
1575
1524
|
createChainByComponentFactory(context, factory, parent) {
|
|
1576
1525
|
const component = factory.createInstance(context);
|
|
1577
|
-
return
|
|
1526
|
+
return {
|
|
1527
|
+
jsxNode: component,
|
|
1528
|
+
parent,
|
|
1529
|
+
sibling: null,
|
|
1530
|
+
child: null,
|
|
1531
|
+
nativeNode: null
|
|
1532
|
+
};
|
|
1578
1533
|
}
|
|
1579
1534
|
createChainByJSXElement(context, element, parent) {
|
|
1580
|
-
const atom =
|
|
1535
|
+
const atom = {
|
|
1536
|
+
jsxNode: element,
|
|
1537
|
+
parent,
|
|
1538
|
+
sibling: null,
|
|
1539
|
+
child: null,
|
|
1540
|
+
nativeNode: null
|
|
1541
|
+
};
|
|
1581
1542
|
if (Reflect.has(element.props, 'children')) {
|
|
1582
1543
|
const jsxChildren = element.props.children;
|
|
1583
1544
|
const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
|
|
@@ -1586,7 +1547,13 @@ let Renderer = class Renderer {
|
|
|
1586
1547
|
return atom;
|
|
1587
1548
|
}
|
|
1588
1549
|
createChainByJSXText(node, parent) {
|
|
1589
|
-
return
|
|
1550
|
+
return {
|
|
1551
|
+
jsxNode: node,
|
|
1552
|
+
parent,
|
|
1553
|
+
sibling: null,
|
|
1554
|
+
child: null,
|
|
1555
|
+
nativeNode: null
|
|
1556
|
+
};
|
|
1590
1557
|
}
|
|
1591
1558
|
createChainByChildren(context, children, parent, atoms) {
|
|
1592
1559
|
for (const item of children) {
|
package/bundles/index.js
CHANGED
|
@@ -662,6 +662,7 @@ class Component extends ReflectiveInjector {
|
|
|
662
662
|
this.mountCallbacks = [];
|
|
663
663
|
this.propsChangedCallbacks = [];
|
|
664
664
|
this.updatedCallbacks = [];
|
|
665
|
+
this.changedSubComponents = new Set();
|
|
665
666
|
this._dirty = true;
|
|
666
667
|
this._changed = true;
|
|
667
668
|
this.updatedDestroyCallbacks = [];
|
|
@@ -757,14 +758,18 @@ class Component extends ReflectiveInjector {
|
|
|
757
758
|
this._dirty = true;
|
|
758
759
|
this.markAsChanged();
|
|
759
760
|
}
|
|
760
|
-
markAsChanged() {
|
|
761
|
+
markAsChanged(changedComponent) {
|
|
762
|
+
if (changedComponent) {
|
|
763
|
+
this.changedSubComponents.add(changedComponent);
|
|
764
|
+
}
|
|
761
765
|
if (this._changed) {
|
|
762
766
|
return;
|
|
763
767
|
}
|
|
764
768
|
this._changed = true;
|
|
765
|
-
this.parentComponent.markAsChanged();
|
|
769
|
+
this.parentComponent.markAsChanged(this);
|
|
766
770
|
}
|
|
767
771
|
rendered() {
|
|
772
|
+
this.changedSubComponents.clear();
|
|
768
773
|
const is = this.isFirstRending;
|
|
769
774
|
this.isFirstRending = false;
|
|
770
775
|
this._dirty = this._changed = false;
|
|
@@ -1165,9 +1170,12 @@ class RootComponent extends Component {
|
|
|
1165
1170
|
super(parentInjector, factory, {});
|
|
1166
1171
|
this.onChange = null;
|
|
1167
1172
|
}
|
|
1168
|
-
markAsChanged() {
|
|
1173
|
+
markAsChanged(changedComponent) {
|
|
1169
1174
|
var _a;
|
|
1170
1175
|
this._changed = true;
|
|
1176
|
+
if (changedComponent) {
|
|
1177
|
+
this.changedSubComponents.add(changedComponent);
|
|
1178
|
+
}
|
|
1171
1179
|
(_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
1172
1180
|
}
|
|
1173
1181
|
}
|
|
@@ -1212,103 +1220,48 @@ class RootComponentRef {
|
|
|
1212
1220
|
}
|
|
1213
1221
|
class HostRef {
|
|
1214
1222
|
}
|
|
1215
|
-
class Atom {
|
|
1216
|
-
constructor(jsxNode, parent) {
|
|
1217
|
-
this.jsxNode = jsxNode;
|
|
1218
|
-
this.parent = parent;
|
|
1219
|
-
this.nativeNode = null;
|
|
1220
|
-
this.child = null;
|
|
1221
|
-
this.sibling = null;
|
|
1222
|
-
}
|
|
1223
|
-
}
|
|
1224
1223
|
exports.Renderer = class Renderer {
|
|
1225
1224
|
constructor(nativeRenderer, rootComponentRef, hostRef) {
|
|
1226
1225
|
this.nativeRenderer = nativeRenderer;
|
|
1227
1226
|
this.rootComponentRef = rootComponentRef;
|
|
1228
1227
|
this.hostRef = hostRef;
|
|
1229
|
-
this.componentAtomCaches = new WeakMap();
|
|
1230
1228
|
this.isInit = true;
|
|
1231
1229
|
}
|
|
1232
1230
|
render() {
|
|
1233
1231
|
const component = this.rootComponentRef.component;
|
|
1234
1232
|
const host = this.hostRef.host;
|
|
1235
1233
|
if (this.isInit) {
|
|
1236
|
-
const atom =
|
|
1234
|
+
const atom = {
|
|
1235
|
+
jsxNode: component,
|
|
1236
|
+
parent: null,
|
|
1237
|
+
sibling: null,
|
|
1238
|
+
child: null,
|
|
1239
|
+
nativeNode: null
|
|
1240
|
+
};
|
|
1237
1241
|
this.buildView(atom, {
|
|
1238
1242
|
isParent: true,
|
|
1239
1243
|
host
|
|
1240
1244
|
});
|
|
1241
1245
|
}
|
|
1242
1246
|
else {
|
|
1243
|
-
this.
|
|
1244
|
-
host,
|
|
1245
|
-
isParent: true
|
|
1246
|
-
});
|
|
1247
|
+
this.updateView(component);
|
|
1247
1248
|
}
|
|
1248
1249
|
this.isInit = false;
|
|
1249
1250
|
}
|
|
1250
|
-
|
|
1251
|
+
updateView(component) {
|
|
1251
1252
|
if (component.dirty) {
|
|
1252
|
-
this.applyChanges(component
|
|
1253
|
+
this.applyChanges(component);
|
|
1253
1254
|
component.rendered();
|
|
1254
1255
|
}
|
|
1255
1256
|
else if (component.changed) {
|
|
1256
|
-
|
|
1257
|
-
|
|
1257
|
+
component.changedSubComponents.forEach(child => {
|
|
1258
|
+
this.updateView(child);
|
|
1259
|
+
});
|
|
1258
1260
|
component.rendered();
|
|
1259
1261
|
}
|
|
1260
|
-
else {
|
|
1261
|
-
const prevSibling = this.getPrevSibling(component);
|
|
1262
|
-
if (prevSibling) {
|
|
1263
|
-
context.isParent = false;
|
|
1264
|
-
context.host = prevSibling;
|
|
1265
|
-
}
|
|
1266
|
-
}
|
|
1267
|
-
}
|
|
1268
|
-
getPrevSibling(component) {
|
|
1269
|
-
let atom = this.componentAtomCaches.get(component).atom.child;
|
|
1270
|
-
const childAtoms = [];
|
|
1271
|
-
while (atom) {
|
|
1272
|
-
childAtoms.push(atom);
|
|
1273
|
-
atom = atom.sibling;
|
|
1274
|
-
}
|
|
1275
|
-
const components = [];
|
|
1276
|
-
while (childAtoms.length) {
|
|
1277
|
-
const last = childAtoms.pop();
|
|
1278
|
-
if (last.jsxNode instanceof Component) {
|
|
1279
|
-
components.push(last.jsxNode);
|
|
1280
|
-
continue;
|
|
1281
|
-
}
|
|
1282
|
-
return last.nativeNode;
|
|
1283
|
-
}
|
|
1284
|
-
for (const component of components) {
|
|
1285
|
-
const nativeNode = this.getPrevSibling(component);
|
|
1286
|
-
if (nativeNode) {
|
|
1287
|
-
return nativeNode;
|
|
1288
|
-
}
|
|
1289
|
-
}
|
|
1290
|
-
return null;
|
|
1291
1262
|
}
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
if (atom.jsxNode instanceof Component) {
|
|
1295
|
-
this.reconcile(atom.jsxNode, context);
|
|
1296
|
-
atom = atom.sibling;
|
|
1297
|
-
continue;
|
|
1298
|
-
}
|
|
1299
|
-
if (atom.jsxNode instanceof JSXElement) {
|
|
1300
|
-
this.reconcileElement(atom.child, {
|
|
1301
|
-
host: atom.nativeNode,
|
|
1302
|
-
isParent: true
|
|
1303
|
-
});
|
|
1304
|
-
context.host = atom.nativeNode;
|
|
1305
|
-
context.isParent = false;
|
|
1306
|
-
}
|
|
1307
|
-
atom = atom.sibling;
|
|
1308
|
-
}
|
|
1309
|
-
}
|
|
1310
|
-
applyChanges(component, context) {
|
|
1311
|
-
const { atom, render } = this.componentAtomCaches.get(component);
|
|
1263
|
+
applyChanges(component) {
|
|
1264
|
+
const { atom, render, host, isParent } = component.$$view;
|
|
1312
1265
|
const diffAtom = atom.child;
|
|
1313
1266
|
const template = render(component.props, component.props);
|
|
1314
1267
|
if (template) {
|
|
@@ -1317,7 +1270,10 @@ exports.Renderer = class Renderer {
|
|
|
1317
1270
|
else {
|
|
1318
1271
|
atom.child = null;
|
|
1319
1272
|
}
|
|
1320
|
-
this.diff(atom.child, diffAtom,
|
|
1273
|
+
this.diff(atom.child, diffAtom, {
|
|
1274
|
+
host,
|
|
1275
|
+
isParent
|
|
1276
|
+
}, 0, 0);
|
|
1321
1277
|
}
|
|
1322
1278
|
diff(newAtom, oldAtom, context, expectIndex, index) {
|
|
1323
1279
|
const oldChildren = [];
|
|
@@ -1333,16 +1289,12 @@ exports.Renderer = class Renderer {
|
|
|
1333
1289
|
const changeCommits = {
|
|
1334
1290
|
updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
|
|
1335
1291
|
commits.push((offset) => {
|
|
1336
|
-
const { render, template } =
|
|
1292
|
+
const { render, template } = reusedAtom.jsxNode.$$view;
|
|
1337
1293
|
const newProps = newAtom.jsxNode.props;
|
|
1338
1294
|
const oldProps = reusedAtom.jsxNode.props;
|
|
1339
1295
|
newAtom.jsxNode = reusedAtom.jsxNode;
|
|
1340
1296
|
const newTemplate = render(newProps, oldProps);
|
|
1341
|
-
|
|
1342
|
-
render,
|
|
1343
|
-
template: newTemplate,
|
|
1344
|
-
atom: newAtom
|
|
1345
|
-
});
|
|
1297
|
+
newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
|
|
1346
1298
|
if (newTemplate === template) {
|
|
1347
1299
|
this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
|
|
1348
1300
|
return;
|
|
@@ -1518,7 +1470,7 @@ exports.Renderer = class Renderer {
|
|
|
1518
1470
|
}
|
|
1519
1471
|
buildView(atom, context) {
|
|
1520
1472
|
if (atom.jsxNode instanceof Component) {
|
|
1521
|
-
this.componentRender(atom.jsxNode, atom);
|
|
1473
|
+
this.componentRender(atom.jsxNode, atom, context);
|
|
1522
1474
|
let child = atom.child;
|
|
1523
1475
|
while (child) {
|
|
1524
1476
|
this.buildView(child, context);
|
|
@@ -1562,24 +1514,33 @@ exports.Renderer = class Renderer {
|
|
|
1562
1514
|
}
|
|
1563
1515
|
}
|
|
1564
1516
|
}
|
|
1565
|
-
componentRender(component, from) {
|
|
1517
|
+
componentRender(component, from, context) {
|
|
1566
1518
|
const { template, render } = component.setup();
|
|
1567
1519
|
if (template) {
|
|
1568
1520
|
this.linkTemplate(template, component, from);
|
|
1569
1521
|
}
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
template,
|
|
1573
|
-
atom: from
|
|
1574
|
-
});
|
|
1522
|
+
component.$$view = Object.assign({ render,
|
|
1523
|
+
template, atom: from }, context);
|
|
1575
1524
|
return from;
|
|
1576
1525
|
}
|
|
1577
1526
|
createChainByComponentFactory(context, factory, parent) {
|
|
1578
1527
|
const component = factory.createInstance(context);
|
|
1579
|
-
return
|
|
1528
|
+
return {
|
|
1529
|
+
jsxNode: component,
|
|
1530
|
+
parent,
|
|
1531
|
+
sibling: null,
|
|
1532
|
+
child: null,
|
|
1533
|
+
nativeNode: null
|
|
1534
|
+
};
|
|
1580
1535
|
}
|
|
1581
1536
|
createChainByJSXElement(context, element, parent) {
|
|
1582
|
-
const atom =
|
|
1537
|
+
const atom = {
|
|
1538
|
+
jsxNode: element,
|
|
1539
|
+
parent,
|
|
1540
|
+
sibling: null,
|
|
1541
|
+
child: null,
|
|
1542
|
+
nativeNode: null
|
|
1543
|
+
};
|
|
1583
1544
|
if (Reflect.has(element.props, 'children')) {
|
|
1584
1545
|
const jsxChildren = element.props.children;
|
|
1585
1546
|
const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
|
|
@@ -1588,7 +1549,13 @@ exports.Renderer = class Renderer {
|
|
|
1588
1549
|
return atom;
|
|
1589
1550
|
}
|
|
1590
1551
|
createChainByJSXText(node, parent) {
|
|
1591
|
-
return
|
|
1552
|
+
return {
|
|
1553
|
+
jsxNode: node,
|
|
1554
|
+
parent,
|
|
1555
|
+
sibling: null,
|
|
1556
|
+
child: null,
|
|
1557
|
+
nativeNode: null
|
|
1558
|
+
};
|
|
1592
1559
|
}
|
|
1593
1560
|
createChainByChildren(context, children, parent, atoms) {
|
|
1594
1561
|
for (const item of children) {
|
package/jsx-runtime/index.d.ts
CHANGED
|
@@ -8,8 +8,7 @@ import { NativeElements } from '@viewfly/platform-browser';
|
|
|
8
8
|
declare const jsxDEV: typeof jsx;
|
|
9
9
|
export { jsx, jsxs, Fragment, jsxDEV };
|
|
10
10
|
export declare namespace JSX {
|
|
11
|
-
|
|
12
|
-
}
|
|
11
|
+
type Element = JSXInternal.Element;
|
|
13
12
|
interface ElementClass extends JSXInternal.ElementClass {
|
|
14
13
|
}
|
|
15
14
|
interface IntrinsicElements extends NativeElements, JSXInternal.IntrinsicElements {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viewfly/core",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
|
|
5
5
|
"main": "./bundles/index.js",
|
|
6
6
|
"module": "./bundles/index.esm.js",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"bugs": {
|
|
50
50
|
"url": "https://github.com/viewfly/viewfly.git/issues"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "2c80fa3f23c647a918d542c0b626384d22766cb8"
|
|
53
53
|
}
|