@viewfly/core 0.4.1 → 0.5.1

package/bundles/foundation/_api.d.ts

@@ -5,3 +5,4 @@ export * from './memo';
 export * from './renderer';
 export * from './root.component';
 export * from './types';
+export { Atom, ComponentView } from './_utils';

package/bundles/foundation/_utils.d.ts

@@ -31,4 +31,5 @@ export interface ComponentView {
     atom: Atom;
     host: NativeNode;
     isParent: boolean;
+    rootHost: NativeNode;
 }

package/bundles/foundation/component.d.ts

@@ -107,7 +107,7 @@ export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnT
 export interface AbstractInstanceType<T extends Record<string, any>> {
     (): T & JSXInternal.ComponentInstance<any>;
 }
-export declare class Ref<T> {
+export declare class DynamicRef<T> {
     private callback;
     private unBindMap;
     private targetCaches;
@@ -121,7 +121,7 @@ export declare class Ref<T> {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -136,7 +136,12 @@ export declare class Ref<T> {
  * }
  * ```
  */
-export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<U>;
+export declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
+export declare class StaticRef<T> extends DynamicRef<T> {
+    readonly current: T | null;
+    constructor();
+}
+export declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
@@ -162,7 +167,7 @@ export interface Signal<T> {
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -178,7 +183,7 @@ export interface Signal<T> {
  *   }
  * }
  */
-export declare function useSignal<T>(state: T): Signal<T>;
+export declare function createSignal<T>(state: T): Signal<T>;
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
  * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
@@ -186,28 +191,28 @@ export declare function useSignal<T>(state: T): Signal<T>;
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-export declare function useDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
-export interface EffectCallback<T, U> {
+export declare function createDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+export interface WatchCallback<T, U> {
     (newValue: T, oldValue: U): void | (() => void);
 }
 /**
  * 监听状态变化，当任意一个状态发生变更时，触发回调。
- * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
+ * watch 会返回一个取消监听的函数，调用此函数，可以取消监听。
  * 当在组件中调用时，组件销毁时会自动取消监听。
  * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
- * @param effect 状态变更后的回调函数
+ * @param callback 状态变更后的回调函数
  */
-export declare function useEffect<T>(deps: Signal<T>, effect: EffectCallback<T, T>): () => void;
-export declare function useEffect<T>(deps: [Signal<T>], effect: EffectCallback<[T], [T]>): () => void;
-export declare function useEffect<T, T1>(deps: [Signal<T>, Signal<T1>], effect: EffectCallback<[T, T1], [T, T1]>): () => void;
-export declare function useEffect<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], effect: EffectCallback<[T, T1, T2], [T, T1, T2]>): () => void;
-export declare function useEffect<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], effect: EffectCallback<[T, T1, T2, T3], [T, T1, T2, T3]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], effect: EffectCallback<[T, T1, T2, T3, T4], [T, T1, T2, T3, T4]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], effect: EffectCallback<[T, T1, T2, T3, T4, T5], [T, T1, T2, T3, T4, T5]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6], [T, T1, T2, T3, T4, T5, T6]>): () => void;
-export declare function useEffect<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>, Signal<T7>], effect: EffectCallback<[T, T1, T2, T3, T4, T5, T6, T7], [T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
-export declare function useEffect<T>(deps: () => T, effect: EffectCallback<T, T>): () => void;
-export declare function useEffect<T = any>(deps: Signal<any>[], effect: EffectCallback<T[], T[]>): () => void;
+export declare function watch<T>(deps: Signal<T>, callback: WatchCallback<T, T>): () => void;
+export declare function watch<T>(deps: [Signal<T>], callback: WatchCallback<[T], [T]>): () => void;
+export declare function watch<T, T1>(deps: [Signal<T>, Signal<T1>], callback: WatchCallback<[T, T1], [T, T1]>): () => void;
+export declare function watch<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], callback: WatchCallback<[T, T1, T2], [T, T1, T2]>): () => void;
+export declare function watch<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], callback: WatchCallback<[T, T1, T2, T3], [T, T1, T2, T3]>): () => void;
+export declare function watch<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], callback: WatchCallback<[T, T1, T2, T3, T4], [T, T1, T2, T3, T4]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], callback: WatchCallback<[T, T1, T2, T3, T4, T5], [T, T1, T2, T3, T4, T5]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], callback: WatchCallback<[T, T1, T2, T3, T4, T5, T6], [T, T1, T2, T3, T4, T5, T6]>): () => void;
+export declare function watch<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>, Signal<T7>], callback: WatchCallback<[T, T1, T2, T3, T4, T5, T6, T7], [T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
+export declare function watch<T>(deps: () => T, callback: WatchCallback<T, T>): () => void;
+export declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[], T[]>): () => void;
 /**
  * 通过 IoC 容器当前组件提供上下文共享数据的方法
  * @param provider

package/bundles/foundation/injection-tokens.d.ts

@@ -3,6 +3,7 @@ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode
     abstract createElement(name: string, isSvg: boolean): ElementNode;
     abstract createTextNode(textContent: string, isSvg: boolean): TextNode;
     abstract setProperty(node: ElementNode, key: string, value: any, isSvg: boolean): void;
+    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
     abstract removeProperty(node: ElementNode, key: string, isSvg: boolean): void;
     abstract setStyle(target: ElementNode, key: string, value: any, isSvg: boolean): void;

package/bundles/foundation/types.d.ts

@@ -1,5 +1,5 @@
 import { Key } from './jsx-element';
-import { ExtractInstanceType, Ref } from './component';
+import { ExtractInstanceType, DynamicRef } from './component';
 import { Scope } from '../di/injectable';
 export type JSXNode = JSXInternal.JSXNode;
 export declare namespace JSXInternal {
@@ -19,7 +19,7 @@ export declare namespace JSXInternal {
         ref?: any;
     }
     interface RefAttributes<T> extends IntrinsicAttributes {
-        ref?: Ref<ExtractInstanceType<T>> | Ref<ExtractInstanceType<T>>[];
+        ref?: DynamicRef<ExtractInstanceType<T>> | DynamicRef<ExtractInstanceType<T>>[];
     }
     interface ElementClass<P = any> extends ComponentInstance<P> {
     }
@@ -29,6 +29,6 @@ export declare namespace JSXInternal {
         [name: string]: any;
     }
     interface IntrinsicClassAttributes<T> {
-        ref?: Ref<T>;
+        ref?: DynamicRef<T>;
     }
 }

package/bundles/index.esm.js

@@ -728,7 +728,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         const template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         this.template = template;
@@ -764,7 +764,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         this.template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         return this.template;
@@ -845,7 +845,7 @@ class Component extends ReflectiveInjector {
 }
 function toRefs(ref) {
     return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof Ref;
+        return i instanceof DynamicRef;
     });
 }
 /**
@@ -926,7 +926,7 @@ function onUnmounted(callback) {
     const component = getSetupContext();
     component.unmountedCallbacks.push(callback);
 }
-class Ref {
+class DynamicRef {
     constructor(callback) {
         this.callback = callback;
         this.unBindMap = new Map();
@@ -960,7 +960,7 @@ class Ref {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -975,8 +975,32 @@ class Ref {
  * }
  * ```
  */
-function useRef(callback) {
-    return new Ref(callback);
+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 depsKey = Symbol('deps');
 /**
@@ -986,7 +1010,7 @@ const depsKey = Symbol('deps');
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -1002,7 +1026,7 @@ const depsKey = Symbol('deps');
  *   }
  * }
  */
-function useSignal(state) {
+function createSignal(state) {
     function signal() {
         const depsContext = getSignalDepsContext();
         if (depsContext) {
@@ -1088,9 +1112,9 @@ function listen(model, deps, callback, isContinue) {
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-function useDerived(callback, isContinue) {
+function createDerived(callback, isContinue) {
     const { data, deps } = invokeDepFn(callback);
-    const signal = useSignal(data);
+    const signal = createSignal(data);
     const component = getSetupContext(false);
     const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
@@ -1101,9 +1125,9 @@ function useDerived(callback, isContinue) {
     return signal;
 }
 /* eslint-enable max-len*/
-function useEffect(deps, effect) {
+function watch(deps, callback) {
     if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = useDerived(deps);
+        deps = createDerived(deps);
     }
     const signals = Array.isArray(deps) ? deps : [deps];
     let oldValues = signals.map(s => s());
@@ -1113,7 +1137,7 @@ function useEffect(deps, effect) {
             prevCleanup();
         }
         const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
         oldValues = newValues;
     }
     for (const dep of signals) {
@@ -1234,7 +1258,8 @@ function createRenderer(component, nativeRenderer) {
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
-                host
+                host,
+                rootHost: host
             });
         }
         else {
@@ -1261,7 +1286,12 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            if (context.host === context.rootHost) {
+                nativeRenderer.appendChild(context.host, nativeNode, atom.isSvg);
+            }
+            else {
+                nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            }
         }
         else {
             nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
@@ -1269,7 +1299,8 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
                 isParent: true,
-                host: nativeNode
+                host: nativeNode,
+                rootHost: context.rootHost
             };
             let child = atom.child;
             while (child) {
@@ -1297,7 +1328,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent } = component.$$view;
+    const { atom, host, isParent, rootHost } = component.$$view;
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     if (template) {
@@ -1308,7 +1339,8 @@ function applyChanges(nativeRenderer, component) {
     }
     const context = {
         host,
-        isParent
+        isParent,
+        rootHost
     };
     diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
@@ -1440,7 +1472,12 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         const host = context.host;
         if (expectIndex - offset !== oldIndex) {
             if (context.isParent) {
-                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                if (host === context.rootHost) {
+                    nativeRenderer.appendChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
+                else {
+                    nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
             }
             else {
                 nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
@@ -1452,7 +1489,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         if (newAtom.child) {
             diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                 host: newAtom.nativeNode,
-                isParent: true
+                isParent: true,
+                rootHost: context.rootHost
             }, 0, 0);
         }
         else if (oldAtom.child) {
@@ -1514,7 +1552,12 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    if (context.host === context.rootHost) {
+                        nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
+                    else {
+                        nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
                 }
                 else {
                     nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
@@ -1773,7 +1816,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
 function applyRefs(refs, nativeNode, binding) {
     const refList = Array.isArray(refs) ? refs : [refs];
     for (const item of refList) {
-        if (item instanceof Ref) {
+        if (item instanceof DynamicRef) {
             binding ? item.bind(nativeNode) : item.unBind(nativeNode);
         }
     }
@@ -1814,7 +1857,10 @@ class RootComponent extends Component {
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
-    const appProviders = [];
+    const appProviders = [{
+            provide: NativeRenderer,
+            useValue: nativeRenderer
+        }];
     const modules = [];
     let destroyed = false;
     let appHost = null;
@@ -1900,4 +1946,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, createRenderer, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, useDerived, useEffect, useRef, useSignal, viewfly, withMemo };
+export { Component, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, provide, viewfly, watch, withMemo };

package/bundles/index.js

@@ -730,7 +730,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         const template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         this.template = template;
@@ -766,7 +766,7 @@ class Component extends ReflectiveInjector {
         signalDepsStack.push([]);
         this.template = this.instance.$render();
         const deps = signalDepsStack.pop();
-        this.unWatch = useEffect(Array.from(new Set(deps)), () => {
+        this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
         return this.template;
@@ -847,7 +847,7 @@ class Component extends ReflectiveInjector {
 }
 function toRefs(ref) {
     return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof Ref;
+        return i instanceof DynamicRef;
     });
 }
 /**
@@ -928,7 +928,7 @@ function onUnmounted(callback) {
     const component = getSetupContext();
     component.unmountedCallbacks.push(callback);
 }
-class Ref {
+class DynamicRef {
     constructor(callback) {
         this.callback = callback;
         this.unBindMap = new Map();
@@ -962,7 +962,7 @@ class Ref {
  * @example
  * ```tsx
  * function App() {
- *   const ref = useRef(node => {
+ *   const ref = createDynamicRef(node => {
  *     function fn() {
  *       // do something...
  *     }
@@ -977,8 +977,32 @@ class Ref {
  * }
  * ```
  */
-function useRef(callback) {
-    return new Ref(callback);
+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 depsKey = Symbol('deps');
 /**
@@ -988,7 +1012,7 @@ const depsKey = Symbol('deps');
  * ```tsx
  * function App() {
  *   // 初始化状态
- *   const state = useSignal(1)
+ *   const state = createSignal(1)
  *
  *   return () => {
  *     <div>
@@ -1004,7 +1028,7 @@ const depsKey = Symbol('deps');
  *   }
  * }
  */
-function useSignal(state) {
+function createSignal(state) {
     function signal() {
         const depsContext = getSignalDepsContext();
         if (depsContext) {
@@ -1090,9 +1114,9 @@ function listen(model, deps, callback, isContinue) {
  * @param callback
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-function useDerived(callback, isContinue) {
+function createDerived(callback, isContinue) {
     const { data, deps } = invokeDepFn(callback);
-    const signal = useSignal(data);
+    const signal = createSignal(data);
     const component = getSetupContext(false);
     const unListen = listen(signal, deps, callback, isContinue);
     if (component) {
@@ -1103,9 +1127,9 @@ function useDerived(callback, isContinue) {
     return signal;
 }
 /* eslint-enable max-len*/
-function useEffect(deps, effect) {
+function watch(deps, callback) {
     if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = useDerived(deps);
+        deps = createDerived(deps);
     }
     const signals = Array.isArray(deps) ? deps : [deps];
     let oldValues = signals.map(s => s());
@@ -1115,7 +1139,7 @@ function useEffect(deps, effect) {
             prevCleanup();
         }
         const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
+        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
         oldValues = newValues;
     }
     for (const dep of signals) {
@@ -1236,7 +1260,8 @@ function createRenderer(component, nativeRenderer) {
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
-                host
+                host,
+                rootHost: host
             });
         }
         else {
@@ -1263,7 +1288,12 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            if (context.host === context.rootHost) {
+                nativeRenderer.appendChild(context.host, nativeNode, atom.isSvg);
+            }
+            else {
+                nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
+            }
         }
         else {
             nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
@@ -1271,7 +1301,8 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
                 isParent: true,
-                host: nativeNode
+                host: nativeNode,
+                rootHost: context.rootHost
             };
             let child = atom.child;
             while (child) {
@@ -1299,7 +1330,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent } = component.$$view;
+    const { atom, host, isParent, rootHost } = component.$$view;
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     if (template) {
@@ -1310,7 +1341,8 @@ function applyChanges(nativeRenderer, component) {
     }
     const context = {
         host,
-        isParent
+        isParent,
+        rootHost
     };
     diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
     const next = atom.sibling;
@@ -1442,7 +1474,12 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         const host = context.host;
         if (expectIndex - offset !== oldIndex) {
             if (context.isParent) {
-                nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                if (host === context.rootHost) {
+                    nativeRenderer.appendChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
+                else {
+                    nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
+                }
             }
             else {
                 nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
@@ -1454,7 +1491,8 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         if (newAtom.child) {
             diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                 host: newAtom.nativeNode,
-                isParent: true
+                isParent: true,
+                rootHost: context.rootHost
             }, 0, 0);
         }
         else if (oldAtom.child) {
@@ -1516,7 +1554,12 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    if (context.host === context.rootHost) {
+                        nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
+                    else {
+                        nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                    }
                 }
                 else {
                     nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
@@ -1775,7 +1818,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
 function applyRefs(refs, nativeNode, binding) {
     const refList = Array.isArray(refs) ? refs : [refs];
     for (const item of refList) {
-        if (item instanceof Ref) {
+        if (item instanceof DynamicRef) {
             binding ? item.bind(nativeNode) : item.unBind(nativeNode);
         }
     }
@@ -1816,7 +1859,10 @@ class RootComponent extends Component {
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
-    const appProviders = [];
+    const appProviders = [{
+            provide: NativeRenderer,
+            useValue: nativeRenderer
+        }];
     const modules = [];
     let destroyed = false;
     let appHost = null;
@@ -1903,6 +1949,7 @@ function viewfly(config) {
 }
 
 exports.Component = Component;
+exports.DynamicRef = DynamicRef;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Inject = Inject;
@@ -1916,15 +1963,19 @@ exports.NativeRenderer = NativeRenderer;
 exports.NullInjector = NullInjector;
 exports.Optional = Optional;
 exports.Prop = Prop;
-exports.Ref = Ref;
 exports.ReflectiveInjector = ReflectiveInjector;
 exports.RootComponent = RootComponent;
 exports.Scope = Scope;
 exports.Self = Self;
 exports.SkipSelf = SkipSelf;
+exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
+exports.createDerived = createDerived;
+exports.createDynamicRef = createDynamicRef;
+exports.createRef = createRef;
 exports.createRenderer = createRenderer;
+exports.createSignal = createSignal;
 exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
 exports.inject = inject;
@@ -1937,9 +1988,6 @@ exports.onPropsChanged = onPropsChanged;
 exports.onUnmounted = onUnmounted;
 exports.onUpdated = onUpdated;
 exports.provide = provide;
-exports.useDerived = useDerived;
-exports.useEffect = useEffect;
-exports.useRef = useRef;
-exports.useSignal = useSignal;
 exports.viewfly = viewfly;
+exports.watch = watch;
 exports.withMemo = withMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "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",
@@ -47,7 +47,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "7ca289c06cf646dab99157efea91ae9220b2abfd",
+  "gitHead": "343b1bff988837e5e0a2acee63c18c3f4a3e8721",
   "dependencies": {
     "reflect-metadata": "^0.1.13"
   }