@viewfly/core 1.1.2 → 1.1.6

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.
@@ -195,10 +195,6 @@ interface Props {
195
195
  children?: JSXNode | JSXNode[];
196
196
  }
197
197
  declare function Fragment(props: Props): () => JSXNode | JSXNode[];
198
- interface ContextProps extends Props {
199
- providers: Provider[];
200
- }
201
- declare function Context(props: ContextProps): () => ViewFlyNode<string | ComponentSetup<any>>;
202
198
  type Key = number | string;
203
199
  declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
204
200
  declare const jsxs: typeof jsx;
@@ -275,6 +271,49 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
275
271
  abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
276
272
  }
277
273
 
274
+ interface RefListener<T> {
275
+ (current: T): void | (() => void);
276
+ }
277
+ type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends ComponentInstance<any> ? Omit<U, keyof ComponentInstance<any>> : U extends Function ? never : T;
278
+ interface AbstractInstanceType<T extends Record<string, any>> {
279
+ (): T & ComponentInstance<any>;
280
+ }
281
+ declare class DynamicRef<T> {
282
+ private callback;
283
+ private unBindMap;
284
+ private targetCaches;
285
+ constructor(callback: RefListener<T>);
286
+ bind(value: T): void;
287
+ unBind(value: T): void;
288
+ }
289
+ /**
290
+ * 用于节点渲染完成时获取 DOM 节点
291
+ * @param callback 获取 DOM 节点的回调函数
292
+ * @example
293
+ * ```tsx
294
+ * function App() {
295
+ * const ref = createDynamicRef(node => {
296
+ * function fn() {
297
+ * // do something...
298
+ * }
299
+ * node.addEventListener('click', fn)
300
+ * return () => {
301
+ * node.removeEventListener('click', fn)
302
+ * }
303
+ * })
304
+ * return () => {
305
+ * return <div ref={ref}>xxx</div>
306
+ * }
307
+ * }
308
+ * ```
309
+ */
310
+ declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
311
+ declare class StaticRef<T> extends DynamicRef<T> {
312
+ readonly current: T | null;
313
+ constructor();
314
+ }
315
+ declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
316
+
278
317
  declare namespace JSX {
279
318
  type ElementType = keyof IntrinsicElements | ComponentSetup;
280
319
  interface Element extends ViewFlyNode {
@@ -305,63 +344,9 @@ declare namespace JSX {
305
344
  }
306
345
  }
307
346
 
308
- declare function getSetupContext(need?: boolean): Component;
309
- type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
310
- interface ComponentInstance<P> {
311
- $portalHost?: NativeNode;
312
- $render(): JSXNode;
313
- $useMemo?(currentProps: P, prevProps: P): boolean;
314
- }
315
- type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
316
- interface ComponentAnnotation {
317
- scope?: Scope;
318
- providers?: Provider[];
319
- }
320
- interface ComponentSetup<P = any> {
321
- (props: P): (() => JSXNode) | ComponentInstance<P>;
322
- annotation?: ComponentAnnotation;
323
- }
324
- /**
325
- * Viewfly 组件管理类,用于管理组件的生命周期,上下文等
326
- */
327
- declare class Component extends ReflectiveInjector {
328
- private readonly parentComponent;
329
- readonly type: ComponentSetup;
330
- props: Props;
331
- readonly key?: Key | undefined;
332
- instance: ComponentInstance<Props>;
333
- changedSubComponents: Set<Component>;
334
- get dirty(): boolean;
335
- get changed(): boolean;
336
- unmountedCallbacks?: LifeCycleCallback[] | null;
337
- mountCallbacks?: LifeCycleCallback[] | null;
338
- propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
339
- updatedCallbacks?: LifeCycleCallback[] | null;
340
- private updatedDestroyCallbacks?;
341
- private propsChangedDestroyCallbacks?;
342
- protected _dirty: boolean;
343
- protected _changed: boolean;
344
- private isFirstRendering;
345
- private refs;
346
- private listener;
347
- constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
348
- markAsDirtied(): void;
349
- markAsChanged(changedComponent?: Component): void;
350
- render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
351
- update(newProps: Record<string, any>, updateChildren: (jsxNode: JSXNode) => void, reuseChildren: (skipSubComponentDiff: boolean) => void): void;
352
- provide<T>(providers: Provider<T> | Provider<T>[]): void;
353
- destroy(): void;
354
- rendered(): void;
355
- private invokePropsChangedHooks;
356
- private invokeMountHooks;
357
- private invokeUpdatedHooks;
358
- }
359
347
  interface LifeCycleCallback {
360
348
  (): void | (() => void);
361
349
  }
362
- interface PropsChangedCallback<T extends Props> {
363
- (currentProps: T, oldProps: T): void | (() => void);
364
- }
365
350
  /**
366
351
  * 当组件第一次渲染完成时触发
367
352
  * @param callback
@@ -391,6 +376,9 @@ declare function onMounted(callback: LifeCycleCallback): void;
391
376
  * ```
392
377
  */
393
378
  declare function onUpdated(callback: LifeCycleCallback): () => void;
379
+ interface PropsChangedCallback<T extends Props> {
380
+ (currentProps: T, oldProps: T): void | (() => void);
381
+ }
394
382
  /**
395
383
  * 当组件 props 更新地调用
396
384
  * @param callback
@@ -416,48 +404,58 @@ declare function onPropsChanged<T extends Props>(callback: PropsChangedCallback<
416
404
  * @param callback
417
405
  */
418
406
  declare function onUnmounted(callback: () => void): void;
419
- interface RefListener<T> {
420
- (current: T): void | (() => void);
407
+
408
+ declare function getSetupContext(need?: boolean): Component;
409
+ type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
410
+ interface ComponentInstance<P> {
411
+ $portalHost?: NativeNode;
412
+ $render(): JSXNode;
413
+ $useMemo?(currentProps: P, prevProps: P): boolean;
421
414
  }
422
- type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends ComponentInstance<any> ? Omit<U, keyof ComponentInstance<any>> : U extends Function ? never : T;
423
- interface AbstractInstanceType<T extends Record<string, any>> {
424
- (): T & ComponentInstance<any>;
415
+ type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
416
+ interface ComponentAnnotation {
417
+ scope?: Scope;
418
+ providers?: Provider[];
425
419
  }
426
- declare class DynamicRef<T> {
427
- private callback;
428
- private unBindMap;
429
- private targetCaches;
430
- constructor(callback: RefListener<T>);
431
- bind(value: T): void;
432
- unBind(value: T): void;
420
+ interface ComponentSetup<P = any> {
421
+ (props: P): (() => JSXNode) | ComponentInstance<P>;
422
+ annotation?: ComponentAnnotation;
433
423
  }
434
424
  /**
435
- * 用于节点渲染完成时获取 DOM 节点
436
- * @param callback 获取 DOM 节点的回调函数
437
- * @example
438
- * ```tsx
439
- * function App() {
440
- * const ref = createDynamicRef(node => {
441
- * function fn() {
442
- * // do something...
443
- * }
444
- * node.addEventListener('click', fn)
445
- * return () => {
446
- * node.removeEventListener('click', fn)
447
- * }
448
- * })
449
- * return () => {
450
- * return <div ref={ref}>xxx</div>
451
- * }
452
- * }
453
- * ```
425
+ * Viewfly 组件管理类,用于管理组件的生命周期,上下文等
454
426
  */
455
- declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
456
- declare class StaticRef<T> extends DynamicRef<T> {
457
- readonly current: T | null;
458
- constructor();
427
+ declare class Component extends ReflectiveInjector {
428
+ private readonly parentComponent;
429
+ readonly type: ComponentSetup;
430
+ props: Props;
431
+ readonly key?: Key | undefined;
432
+ instance: ComponentInstance<Props>;
433
+ changedSubComponents: Set<Component>;
434
+ get dirty(): boolean;
435
+ get changed(): boolean;
436
+ unmountedCallbacks?: LifeCycleCallback[] | null;
437
+ mountCallbacks?: LifeCycleCallback[] | null;
438
+ propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
439
+ updatedCallbacks?: LifeCycleCallback[] | null;
440
+ private updatedDestroyCallbacks?;
441
+ private propsChangedDestroyCallbacks?;
442
+ protected _dirty: boolean;
443
+ protected _changed: boolean;
444
+ private isFirstRendering;
445
+ private refs;
446
+ private listener;
447
+ constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
448
+ markAsDirtied(): void;
449
+ markAsChanged(changedComponent?: Component): void;
450
+ render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
451
+ update(newProps: Record<string, any>, updateChildren: (jsxNode: JSXNode) => void, reuseChildren: (skipSubComponentDiff: boolean) => void): void;
452
+ provide<T>(providers: Provider<T> | Provider<T>[]): void;
453
+ destroy(): void;
454
+ rendered(): void;
455
+ private invokePropsChangedHooks;
456
+ private invokeMountHooks;
457
+ private invokeUpdatedHooks;
459
458
  }
460
- declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
461
459
  /**
462
460
  * 给组件添加注解
463
461
  * @param annotation
@@ -487,6 +485,11 @@ declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken
487
485
  */
488
486
  declare function getCurrentInstance(): Component;
489
487
 
488
+ interface ContextProps extends Props {
489
+ providers: Provider[];
490
+ }
491
+ declare function Context(props: ContextProps): () => ViewFlyNode<string | ComponentSetup<any>>;
492
+
490
493
  declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
491
494
 
492
495
  declare const ElementNamespaceMap: Record<string, string>;
@@ -639,6 +639,174 @@ function popListener() {
639
639
  listeners.pop();
640
640
  }
641
641
 
642
+ /**
643
+ * 当组件第一次渲染完成时触发
644
+ * @param callback
645
+ * ```tsx
646
+ * function App() {
647
+ * onMount(() => {
648
+ * console.log('App mounted!')
649
+ * })
650
+ * return () => <div>...</div>
651
+ * }
652
+ * ```
653
+ */
654
+ function onMounted(callback) {
655
+ const component = getSetupContext();
656
+ if (!component.mountCallbacks) {
657
+ component.mountCallbacks = [];
658
+ }
659
+ component.mountCallbacks.push(callback);
660
+ }
661
+ /**
662
+ * 当组件视图更新后调用
663
+ * @param callback
664
+ * ```tsx
665
+ * function App() {
666
+ * onUpdated(() => {
667
+ * console.log('App updated!')
668
+ * return () => {
669
+ * console.log('destroy prev update!')
670
+ * }
671
+ * })
672
+ * return () => <div>...</div>
673
+ * }
674
+ * ```
675
+ */
676
+ function onUpdated(callback) {
677
+ const component = getSetupContext();
678
+ if (!component.updatedCallbacks) {
679
+ component.updatedCallbacks = [];
680
+ }
681
+ component.updatedCallbacks.push(callback);
682
+ return () => {
683
+ const index = component.updatedCallbacks.indexOf(callback);
684
+ if (index > -1) {
685
+ component.updatedCallbacks.splice(index, 1);
686
+ }
687
+ };
688
+ }
689
+ /**
690
+ * 当组件 props 更新地调用
691
+ * @param callback
692
+ * @example
693
+ * ```tsx
694
+ * function YourComponent(props) {
695
+ * onPropsChanged((currentProps, prevProps) => {
696
+ * console.log(currentProps, prevProps)
697
+ *
698
+ * return () => {
699
+ * console.log('destroy prev changed!')
700
+ * }
701
+ * })
702
+ * return () => {
703
+ * return <div>xxx</div>
704
+ * }
705
+ * }
706
+ * ```
707
+ */
708
+ function onPropsChanged(callback) {
709
+ const component = getSetupContext();
710
+ if (!component.propsChangedCallbacks) {
711
+ component.propsChangedCallbacks = [];
712
+ }
713
+ component.propsChangedCallbacks.push(callback);
714
+ return () => {
715
+ const index = component.propsChangedCallbacks.indexOf(callback);
716
+ if (index > -1) {
717
+ component.propsChangedCallbacks.splice(index, 1);
718
+ }
719
+ };
720
+ }
721
+ /**
722
+ * 当组件销毁时调用回调函数
723
+ * @param callback
724
+ */
725
+ function onUnmounted(callback) {
726
+ const component = getSetupContext();
727
+ if (!component.unmountedCallbacks) {
728
+ component.unmountedCallbacks = [];
729
+ }
730
+ component.unmountedCallbacks.push(callback);
731
+ }
732
+
733
+ class DynamicRef {
734
+ constructor(callback) {
735
+ this.callback = callback;
736
+ this.unBindMap = new Map();
737
+ this.targetCaches = new Set();
738
+ }
739
+ bind(value) {
740
+ if (typeof value !== 'object' || value === null) {
741
+ return;
742
+ }
743
+ if (this.targetCaches.has(value)) {
744
+ return;
745
+ }
746
+ const unBindFn = this.callback(value);
747
+ if (typeof unBindFn === 'function') {
748
+ this.unBindMap.set(value, unBindFn);
749
+ }
750
+ this.targetCaches.add(value);
751
+ }
752
+ unBind(value) {
753
+ this.targetCaches.delete(value);
754
+ const unBindFn = this.unBindMap.get(value);
755
+ this.unBindMap.delete(value);
756
+ if (typeof unBindFn === 'function') {
757
+ unBindFn();
758
+ }
759
+ }
760
+ }
761
+ /**
762
+ * 用于节点渲染完成时获取 DOM 节点
763
+ * @param callback 获取 DOM 节点的回调函数
764
+ * @example
765
+ * ```tsx
766
+ * function App() {
767
+ * const ref = createDynamicRef(node => {
768
+ * function fn() {
769
+ * // do something...
770
+ * }
771
+ * node.addEventListener('click', fn)
772
+ * return () => {
773
+ * node.removeEventListener('click', fn)
774
+ * }
775
+ * })
776
+ * return () => {
777
+ * return <div ref={ref}>xxx</div>
778
+ * }
779
+ * }
780
+ * ```
781
+ */
782
+ function createDynamicRef(callback) {
783
+ return new DynamicRef(callback);
784
+ }
785
+ const initValue = {};
786
+ class StaticRef extends DynamicRef {
787
+ constructor() {
788
+ let value = initValue;
789
+ let isInit = false;
790
+ super(v => {
791
+ if (v !== initValue && !isInit) {
792
+ value = v;
793
+ isInit = true;
794
+ }
795
+ });
796
+ Object.defineProperty(this, 'current', {
797
+ get() {
798
+ if (value === initValue) {
799
+ return null;
800
+ }
801
+ return value;
802
+ }
803
+ });
804
+ }
805
+ }
806
+ function createRef() {
807
+ return new StaticRef();
808
+ }
809
+
642
810
  const componentSetupStack = [];
643
811
  const componentErrorFn = makeError('component');
644
812
  function getSetupContext(need = true) {
@@ -649,6 +817,11 @@ function getSetupContext(need = true) {
649
817
  }
650
818
  return current;
651
819
  }
820
+ function toRefs(ref) {
821
+ return (Array.isArray(ref) ? ref : [ref]).filter(i => {
822
+ return i instanceof DynamicRef;
823
+ });
824
+ }
652
825
  /**
653
826
  * Viewfly 组件管理类,用于管理组件的生命周期,上下文等
654
827
  */
@@ -876,177 +1049,6 @@ class Component extends ReflectiveInjector {
876
1049
  }
877
1050
  }
878
1051
  }
879
- function toRefs(ref) {
880
- return (Array.isArray(ref) ? ref : [ref]).filter(i => {
881
- return i instanceof DynamicRef;
882
- });
883
- }
884
- /**
885
- * 当组件第一次渲染完成时触发
886
- * @param callback
887
- * ```tsx
888
- * function App() {
889
- * onMount(() => {
890
- * console.log('App mounted!')
891
- * })
892
- * return () => <div>...</div>
893
- * }
894
- * ```
895
- */
896
- function onMounted(callback) {
897
- const component = getSetupContext();
898
- if (!component.mountCallbacks) {
899
- component.mountCallbacks = [];
900
- }
901
- component.mountCallbacks.push(callback);
902
- }
903
- /**
904
- * 当组件视图更新后调用
905
- * @param callback
906
- * ```tsx
907
- * function App() {
908
- * onUpdated(() => {
909
- * console.log('App updated!')
910
- * return () => {
911
- * console.log('destroy prev update!')
912
- * }
913
- * })
914
- * return () => <div>...</div>
915
- * }
916
- * ```
917
- */
918
- function onUpdated(callback) {
919
- const component = getSetupContext();
920
- if (!component.updatedCallbacks) {
921
- component.updatedCallbacks = [];
922
- }
923
- component.updatedCallbacks.push(callback);
924
- return () => {
925
- const index = component.updatedCallbacks.indexOf(callback);
926
- if (index > -1) {
927
- component.updatedCallbacks.splice(index, 1);
928
- }
929
- };
930
- }
931
- /**
932
- * 当组件 props 更新地调用
933
- * @param callback
934
- * @example
935
- * ```tsx
936
- * function YourComponent(props) {
937
- * onPropsChanged((currentProps, prevProps) => {
938
- * console.log(currentProps, prevProps)
939
- *
940
- * return () => {
941
- * console.log('destroy prev changed!')
942
- * }
943
- * })
944
- * return () => {
945
- * return <div>xxx</div>
946
- * }
947
- * }
948
- * ```
949
- */
950
- function onPropsChanged(callback) {
951
- const component = getSetupContext();
952
- if (!component.propsChangedCallbacks) {
953
- component.propsChangedCallbacks = [];
954
- }
955
- component.propsChangedCallbacks.push(callback);
956
- return () => {
957
- const index = component.propsChangedCallbacks.indexOf(callback);
958
- if (index > -1) {
959
- component.propsChangedCallbacks.splice(index, 1);
960
- }
961
- };
962
- }
963
- /**
964
- * 当组件销毁时调用回调函数
965
- * @param callback
966
- */
967
- function onUnmounted(callback) {
968
- const component = getSetupContext();
969
- if (!component.unmountedCallbacks) {
970
- component.unmountedCallbacks = [];
971
- }
972
- component.unmountedCallbacks.push(callback);
973
- }
974
- class DynamicRef {
975
- constructor(callback) {
976
- this.callback = callback;
977
- this.unBindMap = new Map();
978
- this.targetCaches = new Set();
979
- }
980
- bind(value) {
981
- if (typeof value !== 'object' || value === null) {
982
- return;
983
- }
984
- if (this.targetCaches.has(value)) {
985
- return;
986
- }
987
- const unBindFn = this.callback(value);
988
- if (typeof unBindFn === 'function') {
989
- this.unBindMap.set(value, unBindFn);
990
- }
991
- this.targetCaches.add(value);
992
- }
993
- unBind(value) {
994
- this.targetCaches.delete(value);
995
- const unBindFn = this.unBindMap.get(value);
996
- this.unBindMap.delete(value);
997
- if (typeof unBindFn === 'function') {
998
- unBindFn();
999
- }
1000
- }
1001
- }
1002
- /**
1003
- * 用于节点渲染完成时获取 DOM 节点
1004
- * @param callback 获取 DOM 节点的回调函数
1005
- * @example
1006
- * ```tsx
1007
- * function App() {
1008
- * const ref = createDynamicRef(node => {
1009
- * function fn() {
1010
- * // do something...
1011
- * }
1012
- * node.addEventListener('click', fn)
1013
- * return () => {
1014
- * node.removeEventListener('click', fn)
1015
- * }
1016
- * })
1017
- * return () => {
1018
- * return <div ref={ref}>xxx</div>
1019
- * }
1020
- * }
1021
- * ```
1022
- */
1023
- function createDynamicRef(callback) {
1024
- return new DynamicRef(callback);
1025
- }
1026
- const initValue = {};
1027
- class StaticRef extends DynamicRef {
1028
- constructor() {
1029
- let value = initValue;
1030
- let isInit = false;
1031
- super(v => {
1032
- if (v !== initValue && !isInit) {
1033
- value = v;
1034
- isInit = true;
1035
- }
1036
- });
1037
- Object.defineProperty(this, 'current', {
1038
- get() {
1039
- if (value === initValue) {
1040
- return null;
1041
- }
1042
- return value;
1043
- }
1044
- });
1045
- }
1046
- }
1047
- function createRef() {
1048
- return new StaticRef();
1049
- }
1050
1052
  /**
1051
1053
  * 给组件添加注解
1052
1054
  * @param annotation
@@ -1087,14 +1089,25 @@ function getCurrentInstance() {
1087
1089
  return getSetupContext();
1088
1090
  }
1089
1091
 
1090
- class NativeRenderer {
1091
- }
1092
-
1093
1092
  function Fragment(props) {
1094
1093
  return () => {
1095
1094
  return props.children;
1096
1095
  };
1097
1096
  }
1097
+ function jsx(type, props, key) {
1098
+ return JSXNodeFactory.createNode(type, props, key);
1099
+ }
1100
+ const jsxs = jsx;
1101
+ const JSXNodeFactory = {
1102
+ createNode(type, props, key) {
1103
+ return {
1104
+ type,
1105
+ props,
1106
+ key
1107
+ };
1108
+ }
1109
+ };
1110
+
1098
1111
  function Context(props) {
1099
1112
  function createContextComponent(providers) {
1100
1113
  return withAnnotation({
@@ -1118,19 +1131,9 @@ function Context(props) {
1118
1131
  });
1119
1132
  };
1120
1133
  }
1121
- function jsx(type, props, key) {
1122
- return JSXNodeFactory.createNode(type, props, key);
1134
+
1135
+ class NativeRenderer {
1123
1136
  }
1124
- const jsxs = jsx;
1125
- const JSXNodeFactory = {
1126
- createNode(type, props, key) {
1127
- return {
1128
- type,
1129
- props,
1130
- key
1131
- };
1132
- }
1133
- };
1134
1137
 
1135
1138
  function withMemo(canUseMemo, render) {
1136
1139
  return {
package/bundles/index.js CHANGED
@@ -641,6 +641,174 @@ function popListener() {
641
641
  listeners.pop();
642
642
  }
643
643
 
644
+ /**
645
+ * 当组件第一次渲染完成时触发
646
+ * @param callback
647
+ * ```tsx
648
+ * function App() {
649
+ * onMount(() => {
650
+ * console.log('App mounted!')
651
+ * })
652
+ * return () => <div>...</div>
653
+ * }
654
+ * ```
655
+ */
656
+ function onMounted(callback) {
657
+ const component = getSetupContext();
658
+ if (!component.mountCallbacks) {
659
+ component.mountCallbacks = [];
660
+ }
661
+ component.mountCallbacks.push(callback);
662
+ }
663
+ /**
664
+ * 当组件视图更新后调用
665
+ * @param callback
666
+ * ```tsx
667
+ * function App() {
668
+ * onUpdated(() => {
669
+ * console.log('App updated!')
670
+ * return () => {
671
+ * console.log('destroy prev update!')
672
+ * }
673
+ * })
674
+ * return () => <div>...</div>
675
+ * }
676
+ * ```
677
+ */
678
+ function onUpdated(callback) {
679
+ const component = getSetupContext();
680
+ if (!component.updatedCallbacks) {
681
+ component.updatedCallbacks = [];
682
+ }
683
+ component.updatedCallbacks.push(callback);
684
+ return () => {
685
+ const index = component.updatedCallbacks.indexOf(callback);
686
+ if (index > -1) {
687
+ component.updatedCallbacks.splice(index, 1);
688
+ }
689
+ };
690
+ }
691
+ /**
692
+ * 当组件 props 更新地调用
693
+ * @param callback
694
+ * @example
695
+ * ```tsx
696
+ * function YourComponent(props) {
697
+ * onPropsChanged((currentProps, prevProps) => {
698
+ * console.log(currentProps, prevProps)
699
+ *
700
+ * return () => {
701
+ * console.log('destroy prev changed!')
702
+ * }
703
+ * })
704
+ * return () => {
705
+ * return <div>xxx</div>
706
+ * }
707
+ * }
708
+ * ```
709
+ */
710
+ function onPropsChanged(callback) {
711
+ const component = getSetupContext();
712
+ if (!component.propsChangedCallbacks) {
713
+ component.propsChangedCallbacks = [];
714
+ }
715
+ component.propsChangedCallbacks.push(callback);
716
+ return () => {
717
+ const index = component.propsChangedCallbacks.indexOf(callback);
718
+ if (index > -1) {
719
+ component.propsChangedCallbacks.splice(index, 1);
720
+ }
721
+ };
722
+ }
723
+ /**
724
+ * 当组件销毁时调用回调函数
725
+ * @param callback
726
+ */
727
+ function onUnmounted(callback) {
728
+ const component = getSetupContext();
729
+ if (!component.unmountedCallbacks) {
730
+ component.unmountedCallbacks = [];
731
+ }
732
+ component.unmountedCallbacks.push(callback);
733
+ }
734
+
735
+ class DynamicRef {
736
+ constructor(callback) {
737
+ this.callback = callback;
738
+ this.unBindMap = new Map();
739
+ this.targetCaches = new Set();
740
+ }
741
+ bind(value) {
742
+ if (typeof value !== 'object' || value === null) {
743
+ return;
744
+ }
745
+ if (this.targetCaches.has(value)) {
746
+ return;
747
+ }
748
+ const unBindFn = this.callback(value);
749
+ if (typeof unBindFn === 'function') {
750
+ this.unBindMap.set(value, unBindFn);
751
+ }
752
+ this.targetCaches.add(value);
753
+ }
754
+ unBind(value) {
755
+ this.targetCaches.delete(value);
756
+ const unBindFn = this.unBindMap.get(value);
757
+ this.unBindMap.delete(value);
758
+ if (typeof unBindFn === 'function') {
759
+ unBindFn();
760
+ }
761
+ }
762
+ }
763
+ /**
764
+ * 用于节点渲染完成时获取 DOM 节点
765
+ * @param callback 获取 DOM 节点的回调函数
766
+ * @example
767
+ * ```tsx
768
+ * function App() {
769
+ * const ref = createDynamicRef(node => {
770
+ * function fn() {
771
+ * // do something...
772
+ * }
773
+ * node.addEventListener('click', fn)
774
+ * return () => {
775
+ * node.removeEventListener('click', fn)
776
+ * }
777
+ * })
778
+ * return () => {
779
+ * return <div ref={ref}>xxx</div>
780
+ * }
781
+ * }
782
+ * ```
783
+ */
784
+ function createDynamicRef(callback) {
785
+ return new DynamicRef(callback);
786
+ }
787
+ const initValue = {};
788
+ class StaticRef extends DynamicRef {
789
+ constructor() {
790
+ let value = initValue;
791
+ let isInit = false;
792
+ super(v => {
793
+ if (v !== initValue && !isInit) {
794
+ value = v;
795
+ isInit = true;
796
+ }
797
+ });
798
+ Object.defineProperty(this, 'current', {
799
+ get() {
800
+ if (value === initValue) {
801
+ return null;
802
+ }
803
+ return value;
804
+ }
805
+ });
806
+ }
807
+ }
808
+ function createRef() {
809
+ return new StaticRef();
810
+ }
811
+
644
812
  const componentSetupStack = [];
645
813
  const componentErrorFn = makeError('component');
646
814
  function getSetupContext(need = true) {
@@ -651,6 +819,11 @@ function getSetupContext(need = true) {
651
819
  }
652
820
  return current;
653
821
  }
822
+ function toRefs(ref) {
823
+ return (Array.isArray(ref) ? ref : [ref]).filter(i => {
824
+ return i instanceof DynamicRef;
825
+ });
826
+ }
654
827
  /**
655
828
  * Viewfly 组件管理类,用于管理组件的生命周期,上下文等
656
829
  */
@@ -878,177 +1051,6 @@ class Component extends ReflectiveInjector {
878
1051
  }
879
1052
  }
880
1053
  }
881
- function toRefs(ref) {
882
- return (Array.isArray(ref) ? ref : [ref]).filter(i => {
883
- return i instanceof DynamicRef;
884
- });
885
- }
886
- /**
887
- * 当组件第一次渲染完成时触发
888
- * @param callback
889
- * ```tsx
890
- * function App() {
891
- * onMount(() => {
892
- * console.log('App mounted!')
893
- * })
894
- * return () => <div>...</div>
895
- * }
896
- * ```
897
- */
898
- function onMounted(callback) {
899
- const component = getSetupContext();
900
- if (!component.mountCallbacks) {
901
- component.mountCallbacks = [];
902
- }
903
- component.mountCallbacks.push(callback);
904
- }
905
- /**
906
- * 当组件视图更新后调用
907
- * @param callback
908
- * ```tsx
909
- * function App() {
910
- * onUpdated(() => {
911
- * console.log('App updated!')
912
- * return () => {
913
- * console.log('destroy prev update!')
914
- * }
915
- * })
916
- * return () => <div>...</div>
917
- * }
918
- * ```
919
- */
920
- function onUpdated(callback) {
921
- const component = getSetupContext();
922
- if (!component.updatedCallbacks) {
923
- component.updatedCallbacks = [];
924
- }
925
- component.updatedCallbacks.push(callback);
926
- return () => {
927
- const index = component.updatedCallbacks.indexOf(callback);
928
- if (index > -1) {
929
- component.updatedCallbacks.splice(index, 1);
930
- }
931
- };
932
- }
933
- /**
934
- * 当组件 props 更新地调用
935
- * @param callback
936
- * @example
937
- * ```tsx
938
- * function YourComponent(props) {
939
- * onPropsChanged((currentProps, prevProps) => {
940
- * console.log(currentProps, prevProps)
941
- *
942
- * return () => {
943
- * console.log('destroy prev changed!')
944
- * }
945
- * })
946
- * return () => {
947
- * return <div>xxx</div>
948
- * }
949
- * }
950
- * ```
951
- */
952
- function onPropsChanged(callback) {
953
- const component = getSetupContext();
954
- if (!component.propsChangedCallbacks) {
955
- component.propsChangedCallbacks = [];
956
- }
957
- component.propsChangedCallbacks.push(callback);
958
- return () => {
959
- const index = component.propsChangedCallbacks.indexOf(callback);
960
- if (index > -1) {
961
- component.propsChangedCallbacks.splice(index, 1);
962
- }
963
- };
964
- }
965
- /**
966
- * 当组件销毁时调用回调函数
967
- * @param callback
968
- */
969
- function onUnmounted(callback) {
970
- const component = getSetupContext();
971
- if (!component.unmountedCallbacks) {
972
- component.unmountedCallbacks = [];
973
- }
974
- component.unmountedCallbacks.push(callback);
975
- }
976
- class DynamicRef {
977
- constructor(callback) {
978
- this.callback = callback;
979
- this.unBindMap = new Map();
980
- this.targetCaches = new Set();
981
- }
982
- bind(value) {
983
- if (typeof value !== 'object' || value === null) {
984
- return;
985
- }
986
- if (this.targetCaches.has(value)) {
987
- return;
988
- }
989
- const unBindFn = this.callback(value);
990
- if (typeof unBindFn === 'function') {
991
- this.unBindMap.set(value, unBindFn);
992
- }
993
- this.targetCaches.add(value);
994
- }
995
- unBind(value) {
996
- this.targetCaches.delete(value);
997
- const unBindFn = this.unBindMap.get(value);
998
- this.unBindMap.delete(value);
999
- if (typeof unBindFn === 'function') {
1000
- unBindFn();
1001
- }
1002
- }
1003
- }
1004
- /**
1005
- * 用于节点渲染完成时获取 DOM 节点
1006
- * @param callback 获取 DOM 节点的回调函数
1007
- * @example
1008
- * ```tsx
1009
- * function App() {
1010
- * const ref = createDynamicRef(node => {
1011
- * function fn() {
1012
- * // do something...
1013
- * }
1014
- * node.addEventListener('click', fn)
1015
- * return () => {
1016
- * node.removeEventListener('click', fn)
1017
- * }
1018
- * })
1019
- * return () => {
1020
- * return <div ref={ref}>xxx</div>
1021
- * }
1022
- * }
1023
- * ```
1024
- */
1025
- function createDynamicRef(callback) {
1026
- return new DynamicRef(callback);
1027
- }
1028
- const initValue = {};
1029
- class StaticRef extends DynamicRef {
1030
- constructor() {
1031
- let value = initValue;
1032
- let isInit = false;
1033
- super(v => {
1034
- if (v !== initValue && !isInit) {
1035
- value = v;
1036
- isInit = true;
1037
- }
1038
- });
1039
- Object.defineProperty(this, 'current', {
1040
- get() {
1041
- if (value === initValue) {
1042
- return null;
1043
- }
1044
- return value;
1045
- }
1046
- });
1047
- }
1048
- }
1049
- function createRef() {
1050
- return new StaticRef();
1051
- }
1052
1054
  /**
1053
1055
  * 给组件添加注解
1054
1056
  * @param annotation
@@ -1089,14 +1091,25 @@ function getCurrentInstance() {
1089
1091
  return getSetupContext();
1090
1092
  }
1091
1093
 
1092
- class NativeRenderer {
1093
- }
1094
-
1095
1094
  function Fragment(props) {
1096
1095
  return () => {
1097
1096
  return props.children;
1098
1097
  };
1099
1098
  }
1099
+ function jsx(type, props, key) {
1100
+ return JSXNodeFactory.createNode(type, props, key);
1101
+ }
1102
+ const jsxs = jsx;
1103
+ const JSXNodeFactory = {
1104
+ createNode(type, props, key) {
1105
+ return {
1106
+ type,
1107
+ props,
1108
+ key
1109
+ };
1110
+ }
1111
+ };
1112
+
1100
1113
  function Context(props) {
1101
1114
  function createContextComponent(providers) {
1102
1115
  return withAnnotation({
@@ -1120,19 +1133,9 @@ function Context(props) {
1120
1133
  });
1121
1134
  };
1122
1135
  }
1123
- function jsx(type, props, key) {
1124
- return JSXNodeFactory.createNode(type, props, key);
1136
+
1137
+ class NativeRenderer {
1125
1138
  }
1126
- const jsxs = jsx;
1127
- const JSXNodeFactory = {
1128
- createNode(type, props, key) {
1129
- return {
1130
- type,
1131
- props,
1132
- key
1133
- };
1134
- }
1135
- };
1136
1139
 
1137
1140
  function withMemo(canUseMemo, render) {
1138
1141
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viewfly/core",
3
- "version": "1.1.2",
3
+ "version": "1.1.6",
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",
@@ -50,7 +50,7 @@
50
50
  "bugs": {
51
51
  "url": "https://github.com/viewfly/viewfly.git/issues"
52
52
  },
53
- "gitHead": "3331fa1b3578475e3e6760bfd5f9f814cc7a171d",
53
+ "gitHead": "381f112dffa12664d95ddc2c27603990c8f5c3ab",
54
54
  "dependencies": {
55
55
  "reflect-metadata": "^0.2.2"
56
56
  }