@viewfly/core 1.0.2 → 1.0.5

package/bundles/index.d.ts

@@ -246,7 +246,11 @@ declare namespace JSX {
     }
     interface ElementClass<P = any> extends ComponentInstance<P> {
     }
+    interface ElementAttributesProperty {
+        props: {};
+    }
     interface ElementChildrenAttribute {
+        children: {};
     }
     interface IntrinsicElements {
         [name: string]: any;
@@ -256,6 +260,7 @@ declare namespace JSX {
     }
 }
 
+declare function getSetupContext(need?: boolean): Component;
 type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
 interface ComponentInstance<P> {
     $portalHost?: NativeNode;
@@ -291,9 +296,9 @@ declare class Component extends ReflectiveInjector {
     private propsChangedDestroyCallbacks?;
     protected _dirty: boolean;
     protected _changed: boolean;
-    private unWatch?;
     private isFirstRendering;
     private refs;
+    private listener;
     constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
@@ -408,13 +413,52 @@ declare class StaticRef<T> extends DynamicRef<T> {
     constructor();
 }
 declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
-declare const depsKey: unique symbol;
 /**
- * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
+ * 给组件添加注解
+ * @param annotation
+ * @param componentSetup
+ * @example
+ * ```ts
+ * export customScope = new Scope('scopeName')
+ * export const App = withAnnotation({
+ *   scope: customScope,
+ *   providers: [
+ *     ExampleService
+ *   ]
+ * }, function(props: Props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
  * ```
  */
+declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
+/**
+ * 获取当前组件实例
+ */
+declare function getCurrentInstance(): Component;
+
+declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
+
+declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;
+
+/**
+ * Viewfly 根组件，用于实现组件状态更新事件通知
+ */
+declare class RootComponent extends Component {
+    private refresh;
+    constructor(parentInjector: Injector | null, factory: ComponentSetup, refresh: () => void);
+    markAsChanged(changedComponent?: Component): void;
+}
+
+/**
+ * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
+ */
 interface Signal<T> {
-    $isSignal: true;
     /**
      *  直接调用一个 Signal 实例，可以获取最新状态
      */
@@ -424,7 +468,6 @@ interface Signal<T> {
      * @param newState
      */
     set(newState: T): void;
-    [depsKey]: Set<LifeCycleCallback>;
 }
 /**
  * 组件状态管理器
@@ -452,14 +495,15 @@ interface Signal<T> {
 declare function createSignal<T>(state: T): Signal<T>;
 /**
  * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
- * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ * 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
  *
- * @param callback
+ * @param fn
  * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
  */
-declare function createDerived<T>(callback: () => T, isContinue?: (data: T) => unknown): Signal<T>;
-interface WatchCallback<T, U> {
-    (newValue: T, oldValue: U): void | (() => void);
+declare function computed<T>(fn: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+declare const createDerived: typeof computed;
+interface WatchCallback<T> {
+    (newValue: T, oldValue: T): void | (() => void);
 }
 /**
  * 监听状态变化，当任意一个状态发生变更时，触发回调。
@@ -468,58 +512,17 @@ interface WatchCallback<T, U> {
  * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
  * @param callback 状态变更后的回调函数
  */
-declare function watch<T>(deps: Signal<T>, callback: WatchCallback<T, T>): () => void;
-declare function watch<T>(deps: [Signal<T>], callback: WatchCallback<[T], [T]>): () => void;
-declare function watch<T, T1>(deps: [Signal<T>, Signal<T1>], callback: WatchCallback<[T, T1], [T, T1]>): () => void;
-declare function watch<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], callback: WatchCallback<[T, T1, T2], [T, T1, T2]>): () => void;
-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;
-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;
-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;
-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;
-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;
-declare function watch<T>(deps: () => T, callback: WatchCallback<T, T>): () => void;
-declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[], T[]>): () => void;
-/**
- * 给组件添加注解
- * @param annotation
- * @param componentSetup
- * @example
- * ```ts
- * export customScope = new Scope('scopeName')
- * export const App = withAnnotation({
- *   scope: customScope,
- *   providers: [
- *     ExampleService
- *   ]
- * }, function(props: Props) {
- *   return () => {
- *     return <div>...</div>
- *   }
- * })
- * ```
- */
-declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
-/**
- * 通过组件上下文获取 IoC 容器内数据的勾子方法
- */
-declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
-/**
- * 获取当前组件实例
- */
-declare function getCurrentInstance(): Component;
-
-declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
-
-declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;
-
-/**
- * Viewfly 根组件，用于实现组件状态更新事件通知
- */
-declare class RootComponent extends Component {
-    private refresh;
-    constructor(parentInjector: Injector | null, factory: ComponentSetup, refresh: () => void);
-    markAsChanged(changedComponent?: Component): void;
-}
+declare function watch<T>(deps: Signal<T>, callback: WatchCallback<T>): () => void;
+declare function watch<T>(deps: [Signal<T>], callback: WatchCallback<[T]>): () => void;
+declare function watch<T, T1>(deps: [Signal<T>, Signal<T1>], callback: WatchCallback<[T, T1]>): () => void;
+declare function watch<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], callback: WatchCallback<[T, T1, T2]>): () => void;
+declare function watch<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], callback: WatchCallback<[T, T1, T2, T3]>): () => void;
+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]>): () => void;
+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]>): () => void;
+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]>): () => void;
+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]>): () => void;
+declare function watch<T>(deps: () => T, callback: WatchCallback<T>): () => void;
+declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[]>): () => void;
 
 declare const TextAtomType: unique symbol;
 declare const ElementAtomType: unique symbol;
@@ -592,4 +595,4 @@ interface Module {
 }
 declare function viewfly<T extends NativeNode>(config: Config): Application<T>;
 
-export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.esm.js

@@ -570,23 +570,6 @@ function getObjectChanges(newProps, oldProps) {
     }
     return changes;
 }
-function getArrayChanges(left, right) {
-    const changes = {
-        add: [],
-        remove: []
-    };
-    for (const i of left) {
-        if (!right.includes(i)) {
-            changes.remove.push(i);
-        }
-    }
-    for (const i of right) {
-        if (!left.includes(i)) {
-            changes.add.push(i);
-        }
-    }
-    return changes;
-}
 function classToString(config) {
     if (typeof config === 'string') {
         return config;
@@ -635,8 +618,28 @@ const TextAtomType = Symbol('Text');
 const ElementAtomType = Symbol('Element');
 const ComponentAtomType = Symbol('Component');
 
+class Listener {
+    constructor(effect) {
+        this.effect = effect;
+        this.destroyCallbacks = [];
+    }
+    destroy() {
+        this.destroyCallbacks.forEach(fn => fn());
+        this.destroyCallbacks = [];
+    }
+}
+const listeners = [];
+function getCurrentListener() {
+    return listeners.at(-1);
+}
+function pushListener(listener) {
+    listeners.push(listener);
+}
+function popListener() {
+    listeners.pop();
+}
+
 const componentSetupStack = [];
-const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
@@ -646,9 +649,6 @@ function getSetupContext(need = true) {
     }
     return current;
 }
-function getSignalDepsContext() {
-    return signalDepsStack[signalDepsStack.length - 1];
-}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -675,6 +675,9 @@ class Component extends ReflectiveInjector {
         this._changed = true;
         this.isFirstRendering = true;
         this.refs = null;
+        this.listener = new Listener(() => {
+            this.markAsDirtied();
+        });
     }
     markAsDirtied() {
         this._dirty = true;
@@ -728,12 +731,9 @@ class Component extends ReflectiveInjector {
         }
         isSetup = false;
         componentSetupStack.pop();
-        signalDepsStack.push([]);
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         update(template, this.instance.$portalHost);
         this.rendered();
     }
@@ -772,13 +772,10 @@ class Component extends ReflectiveInjector {
                 return;
             }
         }
-        this.unWatch();
-        signalDepsStack.push([]);
+        this.listener.destroy();
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         updateChildren(template);
         this.rendered();
     }
@@ -788,7 +785,7 @@ class Component extends ReflectiveInjector {
     }
     destroy() {
         var _a, _b, _c;
-        this.unWatch();
+        this.listener.destroy();
         (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
             fn();
         });
@@ -1050,173 +1047,6 @@ class StaticRef extends DynamicRef {
 function createRef() {
     return new StaticRef();
 }
-const depsKey = Symbol('deps');
-/**
- * 组件状态管理器
- * @param state 初始状态
- * @example
- * ```tsx
- * function App() {
- *   // 初始化状态
- *   const state = createSignal(1)
- *
- *   return () => {
- *     <div>
- *       <div>当前值为：{state()}</div>
- *       <div>
- *         <button type="button" onClick={() => {
- *           // 当点击时更新状态
- *           state.set(state() + 1)
- *         }
- *         }>updateState</button>
- *       </div>
- *     </div>
- *   }
- * }
- */
-function createSignal(state) {
-    function signal() {
-        const depsContext = getSignalDepsContext();
-        if (depsContext) {
-            depsContext.push(signal);
-        }
-        return state;
-    }
-    signal.$isSignal = true;
-    signal.set = function (newState) {
-        if (newState === state) {
-            return;
-        }
-        state = newState;
-        const depCallbacks = Array.from(signal[depsKey]);
-        for (const fn of depCallbacks) {
-            // 回调中可能会对依赖做出修改，故需先缓存起来
-            fn();
-        }
-    };
-    //
-    // signal.toString = function () {
-    //   return String(state)
-    // }
-    //
-    // signal.valueOf = function () {
-    //   return state
-    // }
-    signal[depsKey] = new Set();
-    return signal;
-}
-function invokeDepFn(fn) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = fn();
-    signalDepsStack.pop();
-    return {
-        deps: Array.from(new Set(deps)),
-        data
-    };
-}
-function listen(model, deps, callback, isContinue) {
-    let isStop = false;
-    const nextListen = () => {
-        if (isStop) {
-            return;
-        }
-        isStop = true;
-        const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
-        model.set(nextData);
-        if (typeof isContinue === 'function' && isContinue(nextData) === false) {
-            unListen();
-            return;
-        }
-        const changes = getArrayChanges(deps, nextDeps);
-        deps = deps.filter(i => {
-            const has = changes.remove.includes(i);
-            if (has) {
-                i[depsKey].delete(nextListen);
-                return false;
-            }
-            return true;
-        });
-        for (const s of changes.add) {
-            s[depsKey].add(nextListen);
-        }
-        deps.push(...changes.add);
-        isStop = false;
-    };
-    const unListen = () => {
-        for (const s of deps) {
-            s[depsKey].delete(nextListen);
-        }
-    };
-    for (const s of deps) {
-        s[depsKey].add(nextListen);
-    }
-    return unListen;
-}
-/**
- * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
- * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
- *
- * @param callback
- * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
- */
-function createDerived(callback, isContinue) {
-    const { data, deps } = invokeDepFn(callback);
-    const signal = createSignal(data);
-    const component = getSetupContext(false);
-    const unListen = listen(signal, deps, callback, isContinue);
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(() => {
-            unListen();
-        });
-    }
-    return signal;
-}
-/* eslint-enable max-len*/
-function watch(deps, callback) {
-    if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = createDerived(deps);
-    }
-    const signals = Array.isArray(deps) ? deps : [deps];
-    let oldValues = signals.map(s => s());
-    let prevCleanup;
-    function effectCallback() {
-        if (typeof prevCleanup === 'function') {
-            prevCleanup();
-        }
-        const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
-        oldValues = newValues;
-    }
-    for (const dep of signals) {
-        dep[depsKey].add(effectCallback);
-    }
-    const component = getSetupContext(false);
-    let isClean = false;
-    const destroyFn = () => {
-        if (isClean) {
-            return;
-        }
-        isClean = true;
-        if (component === null || component === void 0 ? void 0 : component.unmountedCallbacks) {
-            const index = component.unmountedCallbacks.indexOf(destroyFn);
-            component.unmountedCallbacks.splice(index, 1);
-        }
-        for (const dep of signals) {
-            dep[depsKey].delete(effectCallback);
-        }
-    };
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(destroyFn);
-    }
-    return destroyFn;
-}
 /**
  * 给组件添加注解
  * @param annotation
@@ -1741,6 +1571,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
+            else if (!oldAtom.child) {
+                buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            }
             else {
                 diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
             }
@@ -1841,6 +1674,133 @@ class RootComponent extends Component {
     }
 }
 
+/**
+ * 组件状态管理器
+ * @param state 初始状态
+ * @example
+ * ```tsx
+ * function App() {
+ *   // 初始化状态
+ *   const state = createSignal(1)
+ *
+ *   return () => {
+ *     <div>
+ *       <div>当前值为：{state()}</div>
+ *       <div>
+ *         <button type="button" onClick={() => {
+ *           // 当点击时更新状态
+ *           state.set(state() + 1)
+ *         }
+ *         }>updateState</button>
+ *       </div>
+ *     </div>
+ *   }
+ * }
+ */
+function createSignal(state) {
+    const subscribers = new Set();
+    function signal() {
+        const listener = getCurrentListener();
+        if (listener) {
+            listener.destroyCallbacks.push(() => {
+                subscribers.delete(listener);
+            });
+            subscribers.add(listener);
+        }
+        return state;
+    }
+    signal.set = function (newValue) {
+        if (newValue === state) {
+            return;
+        }
+        state = newValue;
+        const listeners = Array.from(subscribers);
+        listeners.forEach(listener => listener.effect());
+    };
+    return signal;
+}
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param fn
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+function computed(fn, isContinue) {
+    let isStop = false;
+    function canListen(value) {
+        if (isContinue) {
+            const b = isContinue(value);
+            if (b === false) {
+                listener.destroy();
+                return false;
+            }
+        }
+        return true;
+    }
+    const listener = new Listener(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        listener.destroy();
+        pushListener(listener);
+        const value = fn();
+        popListener();
+        signal.set(value);
+        canListen(value);
+        isStop = false;
+    });
+    pushListener(listener);
+    const value = fn();
+    const signal = createSignal(value);
+    popListener();
+    isStop = false;
+    if (canListen(value)) {
+        registryComponentDestroyCallback(() => listener.destroy());
+    }
+    return signal;
+}
+const createDerived = computed;
+/* eslint-enable max-len*/
+function watch(deps, callback) {
+    let prevFn;
+    const isArray = Array.isArray(deps);
+    const effect = new Listener(function () {
+        if (prevFn) {
+            prevFn();
+        }
+        const newValue = isArray ? deps.map(fn => fn()) : deps();
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushListener(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
+    popListener();
+    let isUnWatch = false;
+    function unWatch() {
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
@@ -1928,4 +1888,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, Context, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, 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, viewfly, watch, withAnnotation, withMemo };
+export { Component, Context, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.js

@@ -572,23 +572,6 @@ function getObjectChanges(newProps, oldProps) {
     }
     return changes;
 }
-function getArrayChanges(left, right) {
-    const changes = {
-        add: [],
-        remove: []
-    };
-    for (const i of left) {
-        if (!right.includes(i)) {
-            changes.remove.push(i);
-        }
-    }
-    for (const i of right) {
-        if (!left.includes(i)) {
-            changes.add.push(i);
-        }
-    }
-    return changes;
-}
 function classToString(config) {
     if (typeof config === 'string') {
         return config;
@@ -637,8 +620,28 @@ const TextAtomType = Symbol('Text');
 const ElementAtomType = Symbol('Element');
 const ComponentAtomType = Symbol('Component');
 
+class Listener {
+    constructor(effect) {
+        this.effect = effect;
+        this.destroyCallbacks = [];
+    }
+    destroy() {
+        this.destroyCallbacks.forEach(fn => fn());
+        this.destroyCallbacks = [];
+    }
+}
+const listeners = [];
+function getCurrentListener() {
+    return listeners.at(-1);
+}
+function pushListener(listener) {
+    listeners.push(listener);
+}
+function popListener() {
+    listeners.pop();
+}
+
 const componentSetupStack = [];
-const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
@@ -648,9 +651,6 @@ function getSetupContext(need = true) {
     }
     return current;
 }
-function getSignalDepsContext() {
-    return signalDepsStack[signalDepsStack.length - 1];
-}
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -677,6 +677,9 @@ class Component extends ReflectiveInjector {
         this._changed = true;
         this.isFirstRendering = true;
         this.refs = null;
+        this.listener = new Listener(() => {
+            this.markAsDirtied();
+        });
     }
     markAsDirtied() {
         this._dirty = true;
@@ -730,12 +733,9 @@ class Component extends ReflectiveInjector {
         }
         isSetup = false;
         componentSetupStack.pop();
-        signalDepsStack.push([]);
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         update(template, this.instance.$portalHost);
         this.rendered();
     }
@@ -774,13 +774,10 @@ class Component extends ReflectiveInjector {
                 return;
             }
         }
-        this.unWatch();
-        signalDepsStack.push([]);
+        this.listener.destroy();
+        pushListener(this.listener);
         const template = this.instance.$render();
-        const deps = signalDepsStack.pop();
-        this.unWatch = watch(Array.from(new Set(deps)), () => {
-            this.markAsDirtied();
-        });
+        popListener();
         updateChildren(template);
         this.rendered();
     }
@@ -790,7 +787,7 @@ class Component extends ReflectiveInjector {
     }
     destroy() {
         var _a, _b, _c;
-        this.unWatch();
+        this.listener.destroy();
         (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
             fn();
         });
@@ -1052,173 +1049,6 @@ class StaticRef extends DynamicRef {
 function createRef() {
     return new StaticRef();
 }
-const depsKey = Symbol('deps');
-/**
- * 组件状态管理器
- * @param state 初始状态
- * @example
- * ```tsx
- * function App() {
- *   // 初始化状态
- *   const state = createSignal(1)
- *
- *   return () => {
- *     <div>
- *       <div>当前值为：{state()}</div>
- *       <div>
- *         <button type="button" onClick={() => {
- *           // 当点击时更新状态
- *           state.set(state() + 1)
- *         }
- *         }>updateState</button>
- *       </div>
- *     </div>
- *   }
- * }
- */
-function createSignal(state) {
-    function signal() {
-        const depsContext = getSignalDepsContext();
-        if (depsContext) {
-            depsContext.push(signal);
-        }
-        return state;
-    }
-    signal.$isSignal = true;
-    signal.set = function (newState) {
-        if (newState === state) {
-            return;
-        }
-        state = newState;
-        const depCallbacks = Array.from(signal[depsKey]);
-        for (const fn of depCallbacks) {
-            // 回调中可能会对依赖做出修改，故需先缓存起来
-            fn();
-        }
-    };
-    //
-    // signal.toString = function () {
-    //   return String(state)
-    // }
-    //
-    // signal.valueOf = function () {
-    //   return state
-    // }
-    signal[depsKey] = new Set();
-    return signal;
-}
-function invokeDepFn(fn) {
-    const deps = [];
-    signalDepsStack.push(deps);
-    const data = fn();
-    signalDepsStack.pop();
-    return {
-        deps: Array.from(new Set(deps)),
-        data
-    };
-}
-function listen(model, deps, callback, isContinue) {
-    let isStop = false;
-    const nextListen = () => {
-        if (isStop) {
-            return;
-        }
-        isStop = true;
-        const { data: nextData, deps: nextDeps } = invokeDepFn(callback);
-        model.set(nextData);
-        if (typeof isContinue === 'function' && isContinue(nextData) === false) {
-            unListen();
-            return;
-        }
-        const changes = getArrayChanges(deps, nextDeps);
-        deps = deps.filter(i => {
-            const has = changes.remove.includes(i);
-            if (has) {
-                i[depsKey].delete(nextListen);
-                return false;
-            }
-            return true;
-        });
-        for (const s of changes.add) {
-            s[depsKey].add(nextListen);
-        }
-        deps.push(...changes.add);
-        isStop = false;
-    };
-    const unListen = () => {
-        for (const s of deps) {
-            s[depsKey].delete(nextListen);
-        }
-    };
-    for (const s of deps) {
-        s[depsKey].add(nextListen);
-    }
-    return unListen;
-}
-/**
- * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
- * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
- *
- * @param callback
- * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
- */
-function createDerived(callback, isContinue) {
-    const { data, deps } = invokeDepFn(callback);
-    const signal = createSignal(data);
-    const component = getSetupContext(false);
-    const unListen = listen(signal, deps, callback, isContinue);
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(() => {
-            unListen();
-        });
-    }
-    return signal;
-}
-/* eslint-enable max-len*/
-function watch(deps, callback) {
-    if (typeof deps === 'function' && !deps.$isSignal) {
-        deps = createDerived(deps);
-    }
-    const signals = Array.isArray(deps) ? deps : [deps];
-    let oldValues = signals.map(s => s());
-    let prevCleanup;
-    function effectCallback() {
-        if (typeof prevCleanup === 'function') {
-            prevCleanup();
-        }
-        const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? callback(newValues, oldValues) : callback(newValues[0], oldValues[0]);
-        oldValues = newValues;
-    }
-    for (const dep of signals) {
-        dep[depsKey].add(effectCallback);
-    }
-    const component = getSetupContext(false);
-    let isClean = false;
-    const destroyFn = () => {
-        if (isClean) {
-            return;
-        }
-        isClean = true;
-        if (component === null || component === void 0 ? void 0 : component.unmountedCallbacks) {
-            const index = component.unmountedCallbacks.indexOf(destroyFn);
-            component.unmountedCallbacks.splice(index, 1);
-        }
-        for (const dep of signals) {
-            dep[depsKey].delete(effectCallback);
-        }
-    };
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(destroyFn);
-    }
-    return destroyFn;
-}
 /**
  * 给组件添加注解
  * @param annotation
@@ -1743,6 +1573,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
+            else if (!oldAtom.child) {
+                buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            }
             else {
                 diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
             }
@@ -1843,6 +1676,133 @@ class RootComponent extends Component {
     }
 }
 
+/**
+ * 组件状态管理器
+ * @param state 初始状态
+ * @example
+ * ```tsx
+ * function App() {
+ *   // 初始化状态
+ *   const state = createSignal(1)
+ *
+ *   return () => {
+ *     <div>
+ *       <div>当前值为：{state()}</div>
+ *       <div>
+ *         <button type="button" onClick={() => {
+ *           // 当点击时更新状态
+ *           state.set(state() + 1)
+ *         }
+ *         }>updateState</button>
+ *       </div>
+ *     </div>
+ *   }
+ * }
+ */
+function createSignal(state) {
+    const subscribers = new Set();
+    function signal() {
+        const listener = getCurrentListener();
+        if (listener) {
+            listener.destroyCallbacks.push(() => {
+                subscribers.delete(listener);
+            });
+            subscribers.add(listener);
+        }
+        return state;
+    }
+    signal.set = function (newValue) {
+        if (newValue === state) {
+            return;
+        }
+        state = newValue;
+        const listeners = Array.from(subscribers);
+        listeners.forEach(listener => listener.effect());
+    };
+    return signal;
+}
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param fn
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+function computed(fn, isContinue) {
+    let isStop = false;
+    function canListen(value) {
+        if (isContinue) {
+            const b = isContinue(value);
+            if (b === false) {
+                listener.destroy();
+                return false;
+            }
+        }
+        return true;
+    }
+    const listener = new Listener(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        listener.destroy();
+        pushListener(listener);
+        const value = fn();
+        popListener();
+        signal.set(value);
+        canListen(value);
+        isStop = false;
+    });
+    pushListener(listener);
+    const value = fn();
+    const signal = createSignal(value);
+    popListener();
+    isStop = false;
+    if (canListen(value)) {
+        registryComponentDestroyCallback(() => listener.destroy());
+    }
+    return signal;
+}
+const createDerived = computed;
+/* eslint-enable max-len*/
+function watch(deps, callback) {
+    let prevFn;
+    const isArray = Array.isArray(deps);
+    const effect = new Listener(function () {
+        if (prevFn) {
+            prevFn();
+        }
+        const newValue = isArray ? deps.map(fn => fn()) : deps();
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushListener(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
+    popListener();
+    let isUnWatch = false;
+    function unWatch() {
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
 const viewflyErrorFn = makeError('Viewfly');
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
@@ -1952,6 +1912,7 @@ exports.SkipSelf = SkipSelf;
 exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
+exports.computed = computed;
 exports.createDerived = createDerived;
 exports.createDynamicRef = createDynamicRef;
 exports.createRef = createRef;
@@ -1959,6 +1920,7 @@ exports.createRenderer = createRenderer;
 exports.createSignal = createSignal;
 exports.forwardRef = forwardRef;
 exports.getCurrentInstance = getCurrentInstance;
+exports.getSetupContext = getSetupContext;
 exports.inject = inject;
 exports.jsx = jsx;
 exports.jsxs = jsxs;

package/jsx-runtime/index.d.ts

@@ -18,6 +18,8 @@ export declare namespace JSX {
     }
     interface ElementChildrenAttribute extends ViewflyJSX.ElementChildrenAttribute {
     }
+    interface ElementAttributesProperty extends ViewflyJSX.ElementAttributesProperty {
+    }
     interface IntrinsicClassAttributes<T> extends ViewflyJSX.IntrinsicClassAttributes<T> {
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "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",