@viewfly/core 1.1.2 → 1.1.7

package/bundles/index.d.ts

@@ -195,10 +195,6 @@ interface Props {
     children?: JSXNode | JSXNode[];
 }
 declare function Fragment(props: Props): () => JSXNode | JSXNode[];
-interface ContextProps extends Props {
-    providers: Provider[];
-}
-declare function Context(props: ContextProps): () => ViewFlyNode<string | ComponentSetup<any>>;
 type Key = number | string;
 declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
 declare const jsxs: typeof jsx;
@@ -275,6 +271,49 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
     abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
 }
 
+interface RefListener<T> {
+    (current: T): void | (() => void);
+}
+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;
+interface AbstractInstanceType<T extends Record<string, any>> {
+    (): T & ComponentInstance<any>;
+}
+declare class DynamicRef<T> {
+    private callback;
+    private unBindMap;
+    private targetCaches;
+    constructor(callback: RefListener<T>);
+    bind(value: T): void;
+    unBind(value: T): void;
+}
+/**
+ * 用于节点渲染完成时获取 DOM 节点
+ * @param callback 获取 DOM 节点的回调函数
+ * @example
+ * ```tsx
+ * function App() {
+ *   const ref = createDynamicRef(node => {
+ *     function fn() {
+ *       // do something...
+ *     }
+ *     node.addEventListener('click', fn)
+ *     return () => {
+ *       node.removeEventListener('click', fn)
+ *     }
+ *   })
+ *   return () => {
+ *     return <div ref={ref}>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
+declare class StaticRef<T> extends DynamicRef<T> {
+    readonly current: T | null;
+    constructor();
+}
+declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
+
 declare namespace JSX {
     type ElementType = keyof IntrinsicElements | ComponentSetup;
     interface Element extends ViewFlyNode {
@@ -305,63 +344,9 @@ declare namespace JSX {
     }
 }
 
-declare function getSetupContext(need?: boolean): Component;
-type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
-interface ComponentInstance<P> {
-    $portalHost?: NativeNode;
-    $render(): JSXNode;
-    $useMemo?(currentProps: P, prevProps: P): boolean;
-}
-type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
-interface ComponentAnnotation {
-    scope?: Scope;
-    providers?: Provider[];
-}
-interface ComponentSetup<P = any> {
-    (props: P): (() => JSXNode) | ComponentInstance<P>;
-    annotation?: ComponentAnnotation;
-}
-/**
- * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
- */
-declare class Component extends ReflectiveInjector {
-    private readonly parentComponent;
-    readonly type: ComponentSetup;
-    props: Props;
-    readonly key?: Key | undefined;
-    instance: ComponentInstance<Props>;
-    changedSubComponents: Set<Component>;
-    get dirty(): boolean;
-    get changed(): boolean;
-    unmountedCallbacks?: LifeCycleCallback[] | null;
-    mountCallbacks?: LifeCycleCallback[] | null;
-    propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
-    updatedCallbacks?: LifeCycleCallback[] | null;
-    private updatedDestroyCallbacks?;
-    private propsChangedDestroyCallbacks?;
-    protected _dirty: boolean;
-    protected _changed: boolean;
-    private isFirstRendering;
-    private refs;
-    private listener;
-    constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
-    markAsDirtied(): void;
-    markAsChanged(changedComponent?: Component): void;
-    render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
-    update(newProps: Record<string, any>, updateChildren: (jsxNode: JSXNode) => void, reuseChildren: (skipSubComponentDiff: boolean) => void): void;
-    provide<T>(providers: Provider<T> | Provider<T>[]): void;
-    destroy(): void;
-    rendered(): void;
-    private invokePropsChangedHooks;
-    private invokeMountHooks;
-    private invokeUpdatedHooks;
-}
 interface LifeCycleCallback {
     (): void | (() => void);
 }
-interface PropsChangedCallback<T extends Props> {
-    (currentProps: T, oldProps: T): void | (() => void);
-}
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -391,6 +376,9 @@ declare function onMounted(callback: LifeCycleCallback): void;
  * ```
  */
 declare function onUpdated(callback: LifeCycleCallback): () => void;
+interface PropsChangedCallback<T extends Props> {
+    (currentProps: T, oldProps: T): void | (() => void);
+}
 /**
  * 当组件 props 更新地调用
  * @param callback
@@ -416,48 +404,58 @@ declare function onPropsChanged<T extends Props>(callback: PropsChangedCallback<
  * @param callback
  */
 declare function onUnmounted(callback: () => void): void;
-interface RefListener<T> {
-    (current: T): void | (() => void);
+
+declare function getSetupContext(need?: boolean): Component;
+type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
+interface ComponentInstance<P> {
+    $portalHost?: NativeNode;
+    $render(): JSXNode;
+    $useMemo?(currentProps: P, prevProps: P): boolean;
 }
-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;
-interface AbstractInstanceType<T extends Record<string, any>> {
-    (): T & ComponentInstance<any>;
+type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
+interface ComponentAnnotation {
+    scope?: Scope;
+    providers?: Provider[];
 }
-declare class DynamicRef<T> {
-    private callback;
-    private unBindMap;
-    private targetCaches;
-    constructor(callback: RefListener<T>);
-    bind(value: T): void;
-    unBind(value: T): void;
+interface ComponentSetup<P = any> {
+    (props: P): (() => JSXNode) | ComponentInstance<P>;
+    annotation?: ComponentAnnotation;
 }
 /**
- * 用于节点渲染完成时获取 DOM 节点
- * @param callback 获取 DOM 节点的回调函数
- * @example
- * ```tsx
- * function App() {
- *   const ref = createDynamicRef(node => {
- *     function fn() {
- *       // do something...
- *     }
- *     node.addEventListener('click', fn)
- *     return () => {
- *       node.removeEventListener('click', fn)
- *     }
- *   })
- *   return () => {
- *     return <div ref={ref}>xxx</div>
- *   }
- * }
- * ```
+ * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
-declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
-declare class StaticRef<T> extends DynamicRef<T> {
-    readonly current: T | null;
-    constructor();
+declare class Component extends ReflectiveInjector {
+    private readonly parentComponent;
+    readonly type: ComponentSetup;
+    props: Props;
+    readonly key?: Key | undefined;
+    instance: ComponentInstance<Props>;
+    changedSubComponents: Set<Component>;
+    get dirty(): boolean;
+    get changed(): boolean;
+    unmountedCallbacks?: LifeCycleCallback[] | null;
+    mountCallbacks?: LifeCycleCallback[] | null;
+    propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
+    updatedCallbacks?: LifeCycleCallback[] | null;
+    private updatedDestroyCallbacks?;
+    private propsChangedDestroyCallbacks?;
+    protected _dirty: boolean;
+    protected _changed: boolean;
+    private isFirstRendering;
+    private refs;
+    private listener;
+    constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
+    markAsDirtied(): void;
+    markAsChanged(changedComponent?: Component): void;
+    render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
+    update(newProps: Record<string, any>, updateChildren: (jsxNode: JSXNode) => void, reuseChildren: (skipSubComponentDiff: boolean) => void): void;
+    provide<T>(providers: Provider<T> | Provider<T>[]): void;
+    destroy(): void;
+    rendered(): void;
+    private invokePropsChangedHooks;
+    private invokeMountHooks;
+    private invokeUpdatedHooks;
 }
-declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
 /**
  * 给组件添加注解
  * @param annotation
@@ -487,6 +485,11 @@ declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken
  */
 declare function getCurrentInstance(): Component;
 
+interface ContextProps extends Props {
+    providers: Provider[];
+}
+declare function Context(props: ContextProps): () => ViewFlyNode<string | ComponentSetup<any>>;
+
 declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
 declare const ElementNamespaceMap: Record<string, string>;

package/bundles/index.esm.js

@@ -639,6 +639,174 @@ function popListener() {
     listeners.pop();
 }
 
+/**
+ * 当组件第一次渲染完成时触发
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onMount(() => {
+ *     console.log('App mounted!')
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onMounted(callback) {
+    const component = getSetupContext();
+    if (!component.mountCallbacks) {
+        component.mountCallbacks = [];
+    }
+    component.mountCallbacks.push(callback);
+}
+/**
+ * 当组件视图更新后调用
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onUpdated(() => {
+ *     console.log('App updated!')
+ *     return () => {
+ *       console.log('destroy prev update!')
+ *     }
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onUpdated(callback) {
+    const component = getSetupContext();
+    if (!component.updatedCallbacks) {
+        component.updatedCallbacks = [];
+    }
+    component.updatedCallbacks.push(callback);
+    return () => {
+        const index = component.updatedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.updatedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件 props 更新地调用
+ * @param callback
+ * @example
+ * ```tsx
+ * function YourComponent(props) {
+ *   onPropsChanged((currentProps, prevProps) => {
+ *     console.log(currentProps, prevProps)
+ *
+ *     return () => {
+ *       console.log('destroy prev changed!')
+ *     }
+ *   })
+ *   return () => {
+ *     return <div>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function onPropsChanged(callback) {
+    const component = getSetupContext();
+    if (!component.propsChangedCallbacks) {
+        component.propsChangedCallbacks = [];
+    }
+    component.propsChangedCallbacks.push(callback);
+    return () => {
+        const index = component.propsChangedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.propsChangedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件销毁时调用回调函数
+ * @param callback
+ */
+function onUnmounted(callback) {
+    const component = getSetupContext();
+    if (!component.unmountedCallbacks) {
+        component.unmountedCallbacks = [];
+    }
+    component.unmountedCallbacks.push(callback);
+}
+
+class DynamicRef {
+    constructor(callback) {
+        this.callback = callback;
+        this.unBindMap = new Map();
+        this.targetCaches = new Set();
+    }
+    bind(value) {
+        if (typeof value !== 'object' || value === null) {
+            return;
+        }
+        if (this.targetCaches.has(value)) {
+            return;
+        }
+        const unBindFn = this.callback(value);
+        if (typeof unBindFn === 'function') {
+            this.unBindMap.set(value, unBindFn);
+        }
+        this.targetCaches.add(value);
+    }
+    unBind(value) {
+        this.targetCaches.delete(value);
+        const unBindFn = this.unBindMap.get(value);
+        this.unBindMap.delete(value);
+        if (typeof unBindFn === 'function') {
+            unBindFn();
+        }
+    }
+}
+/**
+ * 用于节点渲染完成时获取 DOM 节点
+ * @param callback 获取 DOM 节点的回调函数
+ * @example
+ * ```tsx
+ * function App() {
+ *   const ref = createDynamicRef(node => {
+ *     function fn() {
+ *       // do something...
+ *     }
+ *     node.addEventListener('click', fn)
+ *     return () => {
+ *       node.removeEventListener('click', fn)
+ *     }
+ *   })
+ *   return () => {
+ *     return <div ref={ref}>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function createDynamicRef(callback) {
+    return new DynamicRef(callback);
+}
+const initValue = {};
+class StaticRef extends DynamicRef {
+    constructor() {
+        let value = initValue;
+        let isInit = false;
+        super(v => {
+            if (v !== initValue && !isInit) {
+                value = v;
+                isInit = true;
+            }
+        });
+        Object.defineProperty(this, 'current', {
+            get() {
+                if (value === initValue) {
+                    return null;
+                }
+                return value;
+            }
+        });
+    }
+}
+function createRef() {
+    return new StaticRef();
+}
+
 const componentSetupStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
@@ -649,6 +817,11 @@ function getSetupContext(need = true) {
     }
     return current;
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof DynamicRef;
+    });
+}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -795,12 +968,15 @@ class Component extends ReflectiveInjector {
         (_c = this.unmountedCallbacks) === null || _c === void 0 ? void 0 : _c.forEach(fn => {
             fn();
         });
-        this.propsChangedDestroyCallbacks =
-            this.updatedDestroyCallbacks =
-                this.mountCallbacks =
-                    this.updatedCallbacks =
-                        this.propsChangedCallbacks =
-                            this.unmountedCallbacks = null;
+        this.parentComponent =
+            this.parentInjector =
+                this.propsChangedDestroyCallbacks =
+                    this.updatedDestroyCallbacks =
+                        this.mountCallbacks =
+                            this.updatedCallbacks =
+                                this.propsChangedCallbacks =
+                                    this.unmountedCallbacks = null;
+        this.changedSubComponents.clear();
     }
     rendered() {
         this.changedSubComponents.clear();
@@ -876,177 +1052,6 @@ class Component extends ReflectiveInjector {
         }
     }
 }
-function toRefs(ref) {
-    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof DynamicRef;
-    });
-}
-/**
- * 当组件第一次渲染完成时触发
- * @param callback
- * ```tsx
- * function App() {
- *   onMount(() => {
- *     console.log('App mounted!')
- *   })
- *   return () => <div>...</div>
- * }
- * ```
- */
-function onMounted(callback) {
-    const component = getSetupContext();
-    if (!component.mountCallbacks) {
-        component.mountCallbacks = [];
-    }
-    component.mountCallbacks.push(callback);
-}
-/**
- * 当组件视图更新后调用
- * @param callback
- * ```tsx
- * function App() {
- *   onUpdated(() => {
- *     console.log('App updated!')
- *     return () => {
- *       console.log('destroy prev update!')
- *     }
- *   })
- *   return () => <div>...</div>
- * }
- * ```
- */
-function onUpdated(callback) {
-    const component = getSetupContext();
-    if (!component.updatedCallbacks) {
-        component.updatedCallbacks = [];
-    }
-    component.updatedCallbacks.push(callback);
-    return () => {
-        const index = component.updatedCallbacks.indexOf(callback);
-        if (index > -1) {
-            component.updatedCallbacks.splice(index, 1);
-        }
-    };
-}
-/**
- * 当组件 props 更新地调用
- * @param callback
- * @example
- * ```tsx
- * function YourComponent(props) {
- *   onPropsChanged((currentProps, prevProps) => {
- *     console.log(currentProps, prevProps)
- *
- *     return () => {
- *       console.log('destroy prev changed!')
- *     }
- *   })
- *   return () => {
- *     return <div>xxx</div>
- *   }
- * }
- * ```
- */
-function onPropsChanged(callback) {
-    const component = getSetupContext();
-    if (!component.propsChangedCallbacks) {
-        component.propsChangedCallbacks = [];
-    }
-    component.propsChangedCallbacks.push(callback);
-    return () => {
-        const index = component.propsChangedCallbacks.indexOf(callback);
-        if (index > -1) {
-            component.propsChangedCallbacks.splice(index, 1);
-        }
-    };
-}
-/**
- * 当组件销毁时调用回调函数
- * @param callback
- */
-function onUnmounted(callback) {
-    const component = getSetupContext();
-    if (!component.unmountedCallbacks) {
-        component.unmountedCallbacks = [];
-    }
-    component.unmountedCallbacks.push(callback);
-}
-class DynamicRef {
-    constructor(callback) {
-        this.callback = callback;
-        this.unBindMap = new Map();
-        this.targetCaches = new Set();
-    }
-    bind(value) {
-        if (typeof value !== 'object' || value === null) {
-            return;
-        }
-        if (this.targetCaches.has(value)) {
-            return;
-        }
-        const unBindFn = this.callback(value);
-        if (typeof unBindFn === 'function') {
-            this.unBindMap.set(value, unBindFn);
-        }
-        this.targetCaches.add(value);
-    }
-    unBind(value) {
-        this.targetCaches.delete(value);
-        const unBindFn = this.unBindMap.get(value);
-        this.unBindMap.delete(value);
-        if (typeof unBindFn === 'function') {
-            unBindFn();
-        }
-    }
-}
-/**
- * 用于节点渲染完成时获取 DOM 节点
- * @param callback 获取 DOM 节点的回调函数
- * @example
- * ```tsx
- * function App() {
- *   const ref = createDynamicRef(node => {
- *     function fn() {
- *       // do something...
- *     }
- *     node.addEventListener('click', fn)
- *     return () => {
- *       node.removeEventListener('click', fn)
- *     }
- *   })
- *   return () => {
- *     return <div ref={ref}>xxx</div>
- *   }
- * }
- * ```
- */
-function createDynamicRef(callback) {
-    return new DynamicRef(callback);
-}
-const initValue = {};
-class StaticRef extends DynamicRef {
-    constructor() {
-        let value = initValue;
-        let isInit = false;
-        super(v => {
-            if (v !== initValue && !isInit) {
-                value = v;
-                isInit = true;
-            }
-        });
-        Object.defineProperty(this, 'current', {
-            get() {
-                if (value === initValue) {
-                    return null;
-                }
-                return value;
-            }
-        });
-    }
-}
-function createRef() {
-    return new StaticRef();
-}
 /**
  * 给组件添加注解
  * @param annotation
@@ -1087,14 +1092,25 @@ function getCurrentInstance() {
     return getSetupContext();
 }
 
-class NativeRenderer {
-}
-
 function Fragment(props) {
     return () => {
         return props.children;
     };
 }
+function jsx(type, props, key) {
+    return JSXNodeFactory.createNode(type, props, key);
+}
+const jsxs = jsx;
+const JSXNodeFactory = {
+    createNode(type, props, key) {
+        return {
+            type,
+            props,
+            key
+        };
+    }
+};
+
 function Context(props) {
     function createContextComponent(providers) {
         return withAnnotation({
@@ -1118,19 +1134,9 @@ function Context(props) {
         });
     };
 }
-function jsx(type, props, key) {
-    return JSXNodeFactory.createNode(type, props, key);
+
+class NativeRenderer {
 }
-const jsxs = jsx;
-const JSXNodeFactory = {
-    createNode(type, props, key) {
-        return {
-            type,
-            props,
-            key
-        };
-    }
-};
 
 function withMemo(canUseMemo, render) {
     return {

package/bundles/index.js

@@ -641,6 +641,174 @@ function popListener() {
     listeners.pop();
 }
 
+/**
+ * 当组件第一次渲染完成时触发
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onMount(() => {
+ *     console.log('App mounted!')
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onMounted(callback) {
+    const component = getSetupContext();
+    if (!component.mountCallbacks) {
+        component.mountCallbacks = [];
+    }
+    component.mountCallbacks.push(callback);
+}
+/**
+ * 当组件视图更新后调用
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onUpdated(() => {
+ *     console.log('App updated!')
+ *     return () => {
+ *       console.log('destroy prev update!')
+ *     }
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onUpdated(callback) {
+    const component = getSetupContext();
+    if (!component.updatedCallbacks) {
+        component.updatedCallbacks = [];
+    }
+    component.updatedCallbacks.push(callback);
+    return () => {
+        const index = component.updatedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.updatedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件 props 更新地调用
+ * @param callback
+ * @example
+ * ```tsx
+ * function YourComponent(props) {
+ *   onPropsChanged((currentProps, prevProps) => {
+ *     console.log(currentProps, prevProps)
+ *
+ *     return () => {
+ *       console.log('destroy prev changed!')
+ *     }
+ *   })
+ *   return () => {
+ *     return <div>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function onPropsChanged(callback) {
+    const component = getSetupContext();
+    if (!component.propsChangedCallbacks) {
+        component.propsChangedCallbacks = [];
+    }
+    component.propsChangedCallbacks.push(callback);
+    return () => {
+        const index = component.propsChangedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.propsChangedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件销毁时调用回调函数
+ * @param callback
+ */
+function onUnmounted(callback) {
+    const component = getSetupContext();
+    if (!component.unmountedCallbacks) {
+        component.unmountedCallbacks = [];
+    }
+    component.unmountedCallbacks.push(callback);
+}
+
+class DynamicRef {
+    constructor(callback) {
+        this.callback = callback;
+        this.unBindMap = new Map();
+        this.targetCaches = new Set();
+    }
+    bind(value) {
+        if (typeof value !== 'object' || value === null) {
+            return;
+        }
+        if (this.targetCaches.has(value)) {
+            return;
+        }
+        const unBindFn = this.callback(value);
+        if (typeof unBindFn === 'function') {
+            this.unBindMap.set(value, unBindFn);
+        }
+        this.targetCaches.add(value);
+    }
+    unBind(value) {
+        this.targetCaches.delete(value);
+        const unBindFn = this.unBindMap.get(value);
+        this.unBindMap.delete(value);
+        if (typeof unBindFn === 'function') {
+            unBindFn();
+        }
+    }
+}
+/**
+ * 用于节点渲染完成时获取 DOM 节点
+ * @param callback 获取 DOM 节点的回调函数
+ * @example
+ * ```tsx
+ * function App() {
+ *   const ref = createDynamicRef(node => {
+ *     function fn() {
+ *       // do something...
+ *     }
+ *     node.addEventListener('click', fn)
+ *     return () => {
+ *       node.removeEventListener('click', fn)
+ *     }
+ *   })
+ *   return () => {
+ *     return <div ref={ref}>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function createDynamicRef(callback) {
+    return new DynamicRef(callback);
+}
+const initValue = {};
+class StaticRef extends DynamicRef {
+    constructor() {
+        let value = initValue;
+        let isInit = false;
+        super(v => {
+            if (v !== initValue && !isInit) {
+                value = v;
+                isInit = true;
+            }
+        });
+        Object.defineProperty(this, 'current', {
+            get() {
+                if (value === initValue) {
+                    return null;
+                }
+                return value;
+            }
+        });
+    }
+}
+function createRef() {
+    return new StaticRef();
+}
+
 const componentSetupStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
@@ -651,6 +819,11 @@ function getSetupContext(need = true) {
     }
     return current;
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof DynamicRef;
+    });
+}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -797,12 +970,15 @@ class Component extends ReflectiveInjector {
         (_c = this.unmountedCallbacks) === null || _c === void 0 ? void 0 : _c.forEach(fn => {
             fn();
         });
-        this.propsChangedDestroyCallbacks =
-            this.updatedDestroyCallbacks =
-                this.mountCallbacks =
-                    this.updatedCallbacks =
-                        this.propsChangedCallbacks =
-                            this.unmountedCallbacks = null;
+        this.parentComponent =
+            this.parentInjector =
+                this.propsChangedDestroyCallbacks =
+                    this.updatedDestroyCallbacks =
+                        this.mountCallbacks =
+                            this.updatedCallbacks =
+                                this.propsChangedCallbacks =
+                                    this.unmountedCallbacks = null;
+        this.changedSubComponents.clear();
     }
     rendered() {
         this.changedSubComponents.clear();
@@ -878,177 +1054,6 @@ class Component extends ReflectiveInjector {
         }
     }
 }
-function toRefs(ref) {
-    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof DynamicRef;
-    });
-}
-/**
- * 当组件第一次渲染完成时触发
- * @param callback
- * ```tsx
- * function App() {
- *   onMount(() => {
- *     console.log('App mounted!')
- *   })
- *   return () => <div>...</div>
- * }
- * ```
- */
-function onMounted(callback) {
-    const component = getSetupContext();
-    if (!component.mountCallbacks) {
-        component.mountCallbacks = [];
-    }
-    component.mountCallbacks.push(callback);
-}
-/**
- * 当组件视图更新后调用
- * @param callback
- * ```tsx
- * function App() {
- *   onUpdated(() => {
- *     console.log('App updated!')
- *     return () => {
- *       console.log('destroy prev update!')
- *     }
- *   })
- *   return () => <div>...</div>
- * }
- * ```
- */
-function onUpdated(callback) {
-    const component = getSetupContext();
-    if (!component.updatedCallbacks) {
-        component.updatedCallbacks = [];
-    }
-    component.updatedCallbacks.push(callback);
-    return () => {
-        const index = component.updatedCallbacks.indexOf(callback);
-        if (index > -1) {
-            component.updatedCallbacks.splice(index, 1);
-        }
-    };
-}
-/**
- * 当组件 props 更新地调用
- * @param callback
- * @example
- * ```tsx
- * function YourComponent(props) {
- *   onPropsChanged((currentProps, prevProps) => {
- *     console.log(currentProps, prevProps)
- *
- *     return () => {
- *       console.log('destroy prev changed!')
- *     }
- *   })
- *   return () => {
- *     return <div>xxx</div>
- *   }
- * }
- * ```
- */
-function onPropsChanged(callback) {
-    const component = getSetupContext();
-    if (!component.propsChangedCallbacks) {
-        component.propsChangedCallbacks = [];
-    }
-    component.propsChangedCallbacks.push(callback);
-    return () => {
-        const index = component.propsChangedCallbacks.indexOf(callback);
-        if (index > -1) {
-            component.propsChangedCallbacks.splice(index, 1);
-        }
-    };
-}
-/**
- * 当组件销毁时调用回调函数
- * @param callback
- */
-function onUnmounted(callback) {
-    const component = getSetupContext();
-    if (!component.unmountedCallbacks) {
-        component.unmountedCallbacks = [];
-    }
-    component.unmountedCallbacks.push(callback);
-}
-class DynamicRef {
-    constructor(callback) {
-        this.callback = callback;
-        this.unBindMap = new Map();
-        this.targetCaches = new Set();
-    }
-    bind(value) {
-        if (typeof value !== 'object' || value === null) {
-            return;
-        }
-        if (this.targetCaches.has(value)) {
-            return;
-        }
-        const unBindFn = this.callback(value);
-        if (typeof unBindFn === 'function') {
-            this.unBindMap.set(value, unBindFn);
-        }
-        this.targetCaches.add(value);
-    }
-    unBind(value) {
-        this.targetCaches.delete(value);
-        const unBindFn = this.unBindMap.get(value);
-        this.unBindMap.delete(value);
-        if (typeof unBindFn === 'function') {
-            unBindFn();
-        }
-    }
-}
-/**
- * 用于节点渲染完成时获取 DOM 节点
- * @param callback 获取 DOM 节点的回调函数
- * @example
- * ```tsx
- * function App() {
- *   const ref = createDynamicRef(node => {
- *     function fn() {
- *       // do something...
- *     }
- *     node.addEventListener('click', fn)
- *     return () => {
- *       node.removeEventListener('click', fn)
- *     }
- *   })
- *   return () => {
- *     return <div ref={ref}>xxx</div>
- *   }
- * }
- * ```
- */
-function createDynamicRef(callback) {
-    return new DynamicRef(callback);
-}
-const initValue = {};
-class StaticRef extends DynamicRef {
-    constructor() {
-        let value = initValue;
-        let isInit = false;
-        super(v => {
-            if (v !== initValue && !isInit) {
-                value = v;
-                isInit = true;
-            }
-        });
-        Object.defineProperty(this, 'current', {
-            get() {
-                if (value === initValue) {
-                    return null;
-                }
-                return value;
-            }
-        });
-    }
-}
-function createRef() {
-    return new StaticRef();
-}
 /**
  * 给组件添加注解
  * @param annotation
@@ -1089,14 +1094,25 @@ function getCurrentInstance() {
     return getSetupContext();
 }
 
-class NativeRenderer {
-}
-
 function Fragment(props) {
     return () => {
         return props.children;
     };
 }
+function jsx(type, props, key) {
+    return JSXNodeFactory.createNode(type, props, key);
+}
+const jsxs = jsx;
+const JSXNodeFactory = {
+    createNode(type, props, key) {
+        return {
+            type,
+            props,
+            key
+        };
+    }
+};
+
 function Context(props) {
     function createContextComponent(providers) {
         return withAnnotation({
@@ -1120,19 +1136,9 @@ function Context(props) {
         });
     };
 }
-function jsx(type, props, key) {
-    return JSXNodeFactory.createNode(type, props, key);
+
+class NativeRenderer {
 }
-const jsxs = jsx;
-const JSXNodeFactory = {
-    createNode(type, props, key) {
-        return {
-            type,
-            props,
-            key
-        };
-    }
-};
 
 function withMemo(canUseMemo, render) {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.1.2",
+  "version": "1.1.7",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "3331fa1b3578475e3e6760bfd5f9f814cc7a171d",
+  "gitHead": "d4a5c0ac00b6fb203d8d6c9970e3ef1093cd9782",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }