@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.
@@ -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.ElementClass;
15
+ type: JSXInternal.ComponentConstructor;
15
16
  props: Props;
16
17
  key?: Key | undefined;
17
- $$typeOf: JSXInternal.ElementClass<any>;
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.ElementClass, props: Props, key?: Key | undefined);
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: JSXInternal.JSXNode;
36
- render: (newProps: Props, oldProps: Props) => JSXInternal.JSXNode;
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, U> {
116
+ export declare class Ref<T> {
114
117
  private callback;
115
118
  private unBindMap;
116
119
  private targetCaches;
117
- constructor(callback: RefListener<U>);
118
- bind(value: U): void;
119
- unBind(value: U): void;
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<T, U>;
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): () => JSXInternal.JSXNode | JSXInternal.JSXNode[];
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.ElementClass, props: Props, key?: Key): JSXComponent;
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.ElementClass;
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.Element): JSXInternal.ComponentInstance<T>;
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 reconcile;
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.ElementClass, parentInjector: Injector);
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
- interface Element<P = any, C extends string | ElementClass<P> = string | ElementClass<P>> {
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<T, ExtractInstanceType<T>> | Ref<T, ExtractInstanceType<T>>[];
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> extends RefAttributes<T> {
27
+ interface IntrinsicClassAttributes<T> {
28
+ ref?: Ref<T>;
28
29
  }
29
30
  }
@@ -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 = new Atom(component, null);
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.reconcile(component, {
1242
- host,
1243
- isParent: true
1244
- });
1245
+ this.updateView(component);
1245
1246
  }
1246
1247
  this.isInit = false;
1247
1248
  }
1248
- reconcile(component, context) {
1249
+ updateView(component) {
1249
1250
  if (component.dirty) {
1250
- this.applyChanges(component, context);
1251
+ this.applyChanges(component);
1251
1252
  component.rendered();
1252
1253
  }
1253
1254
  else if (component.changed) {
1254
- const atom = this.componentAtomCaches.get(component).atom.child;
1255
- this.reconcileElement(atom, context);
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
- reconcileElement(atom, context) {
1291
- while (atom) {
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, context, 0, 0);
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 } = this.componentAtomCaches.get(reusedAtom.jsxNode);
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
- this.componentAtomCaches.set(newAtom.jsxNode, {
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
- this.componentAtomCaches.set(component, {
1569
- render,
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 new Atom(component, parent);
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 = new Atom(element, parent);
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 new Atom(node, parent);
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 = new Atom(component, null);
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.reconcile(component, {
1244
- host,
1245
- isParent: true
1246
- });
1247
+ this.updateView(component);
1247
1248
  }
1248
1249
  this.isInit = false;
1249
1250
  }
1250
- reconcile(component, context) {
1251
+ updateView(component) {
1251
1252
  if (component.dirty) {
1252
- this.applyChanges(component, context);
1253
+ this.applyChanges(component);
1253
1254
  component.rendered();
1254
1255
  }
1255
1256
  else if (component.changed) {
1256
- const atom = this.componentAtomCaches.get(component).atom.child;
1257
- this.reconcileElement(atom, context);
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
- reconcileElement(atom, context) {
1293
- while (atom) {
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, context, 0, 0);
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 } = this.componentAtomCaches.get(reusedAtom.jsxNode);
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
- this.componentAtomCaches.set(newAtom.jsxNode, {
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
- this.componentAtomCaches.set(component, {
1571
- render,
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 new Atom(component, parent);
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 = new Atom(element, parent);
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 new Atom(node, parent);
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) {
@@ -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
- interface Element extends JSXInternal.Element {
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.24",
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": "74ff7f03fca43463908a7cab8352ae1bf35a7f6c"
52
+ "gitHead": "2c80fa3f23c647a918d542c0b626384d22766cb8"
53
53
  }