@viewfly/core 2.0.0-alpha.3 → 2.0.0-alpha.5

package/bundles/index.d.ts

@@ -436,6 +436,7 @@ declare class Component {
  * 获取当前组件实例
  */
 declare function getCurrentInstance(): Component;
+declare function registryComponentDestroyCallback(fn: () => void): void;
 
 declare function createContext(providers: Provider[], scope?: Scope | null, parentInjector?: Injector): (props: Props) => () => JSXNode | JSXNode[];
 /**
@@ -467,6 +468,16 @@ interface ComponentAnnotation {
  */
 declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
 
+declare class Dep {
+    effect: () => void;
+    destroyCallbacks: Array<() => void>;
+    constructor(effect: () => void);
+    destroy(): void;
+}
+declare function getDepContext(): Dep | undefined;
+declare function pushDepContext(dep: Dep): void;
+declare function popDepContext(): void;
+
 declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
 declare const ElementNamespaceMap: {
@@ -518,15 +529,6 @@ interface Computed<T> {
 }
 declare function computed<T>(callback: () => T, isContinue?: (data: T) => unknown): Computed<T>;
 
-declare class Dep {
-    effect: () => void;
-    destroyCallbacks: Array<() => void>;
-    constructor(effect: () => void);
-    destroy(): void;
-}
-declare function getDepContext(): Dep | undefined;
-declare function pushDepContext(dep: Dep): void;
-declare function popDepContext(): void;
 declare enum TrackOpTypes {
     Get = "Get",
     Has = "Has",
@@ -540,7 +542,6 @@ declare enum TriggerOpTypes {
 }
 declare function track(target: object, type: TrackOpTypes, key?: unknown): void;
 declare function trigger(target: object, type: TriggerOpTypes, key?: unknown): void;
-declare function registryComponentDestroyCallback(fn: () => void): void;
 
 declare const rawToProxyCache: WeakMap<object, any>;
 declare const proxyToRawCache: WeakMap<object, any>;
@@ -640,4 +641,74 @@ declare function shallowReactive<T>(raw: T): T;
 
 declare function watch<T>(trigger: () => T, callback: (newValue: T, oldValue: T) => (() => any) | void): () => void;
 
-export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, ArrayReactiveHandler, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentViewMetadata, type Computed, type Config, type ConstructorProvider, Dep, DynamicRef, type ElementNamespace, ElementNamespaceMap, 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, MapReactiveHandler, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, ObjectReactiveHandler, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type ProvideScope, type Provider, type ReactiveConfig, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, SetReactiveHandler, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, comparePropsWithCallbacks, computed, createContext, createDynamicRef, createRef, createRenderer, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };
+/**
+ * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
+ */
+interface Signal<T> {
+    /**
+     *  直接调用一个 Signal 实例，可以获取最新状态
+     */
+    (): T;
+    /**
+     * 更新组件状态的方法，可以传入最新的值
+     * @param newState
+     */
+    set(newState: T): void;
+}
+/**
+ * 组件状态管理器
+ * @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>
+ *   }
+ * }
+ */
+declare function createSignal<T>(state: T): Signal<T>;
+
+/**
+ * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
+ * 并在你获取 createDerived 函数返回的 Signal 的值时，自动计算最新的值。
+ *
+ * @param fn
+ * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
+ */
+declare function createDerived<T>(fn: () => T, isContinue?: (data: T) => unknown): Signal<T>;
+
+interface EffectCallback<T> {
+    (newValue: T, oldValue: T): void | (() => void);
+}
+/**
+ * 监听状态变化，当任意一个状态发生变更时，触发回调。
+ * createEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
+ * 当在组件中调用时，组件销毁时会自动取消监听。
+ * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组，或者是一个求值函数
+ * @param callback 状态变更后的回调函数
+ */
+declare function createEffect<T>(deps: Signal<T>, callback: EffectCallback<T>): () => void;
+declare function createEffect<T>(deps: [Signal<T>], callback: EffectCallback<[T]>): () => void;
+declare function createEffect<T, T1>(deps: [Signal<T>, Signal<T1>], callback: EffectCallback<[T, T1]>): () => void;
+declare function createEffect<T, T1, T2>(deps: [Signal<T>, Signal<T1>, Signal<T2>], callback: EffectCallback<[T, T1, T2]>): () => void;
+declare function createEffect<T, T1, T2, T3>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>], callback: EffectCallback<[T, T1, T2, T3]>): () => void;
+declare function createEffect<T, T1, T2, T3, T4>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>], callback: EffectCallback<[T, T1, T2, T3, T4]>): () => void;
+declare function createEffect<T, T1, T2, T3, T4, T5>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>], callback: EffectCallback<[T, T1, T2, T3, T4, T5]>): () => void;
+declare function createEffect<T, T1, T2, T3, T4, T5, T6>(deps: [Signal<T>, Signal<T1>, Signal<T2>, Signal<T3>, Signal<T4>, Signal<T5>, Signal<T6>], callback: EffectCallback<[T, T1, T2, T3, T4, T5, T6]>): () => void;
+declare function createEffect<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: EffectCallback<[T, T1, T2, T3, T4, T5, T6, T7]>): () => void;
+declare function createEffect<T>(deps: () => T, callback: EffectCallback<T>): () => void;
+declare function createEffect<T = any>(deps: Signal<any>[], callback: EffectCallback<T[]>): () => void;
+
+export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, ArrayReactiveHandler, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentViewMetadata, type Computed, type Config, type ConstructorProvider, Dep, DynamicRef, type EffectCallback, type ElementNamespace, ElementNamespaceMap, 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, MapReactiveHandler, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, ObjectReactiveHandler, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type ProvideScope, type Provider, type ReactiveConfig, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, SetReactiveHandler, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, comparePropsWithCallbacks, computed, createContext, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.esm.js

@@ -800,6 +800,7 @@ function pushDepContext(dep) {
 function popDepContext() {
     deps.pop();
 }
+
 const subscribers = new WeakMap();
 function getSubscriber(target) {
     let subscriber = subscribers.get(target);
@@ -883,15 +884,6 @@ function trigger(target, type, key = unKnownKey) {
         }
     }
 }
-function registryComponentDestroyCallback(fn) {
-    const component = getSetupContext(false);
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(fn);
-    }
-}
 
 function createIterableIterator(wrapper) {
     return {
@@ -1632,6 +1624,15 @@ class Component {
 function getCurrentInstance() {
     return getSetupContext();
 }
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
 
 const injectMap = new WeakMap();
 function getInjector(start) {
@@ -1812,11 +1813,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
-    function changeOffset() {
-        offset++;
-    }
     while (newAtom) {
-        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
+        oldAtom = createChanges(newAtom, oldAtom, commits);
         newAtom = newAtom.sibling;
     }
     let dirtyDiffAtom = oldAtom;
@@ -1827,7 +1825,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
     let offset = 0;
     const len = commits.length;
     for (let i = 0; i < len; i++) {
-        const commit = commits[i];
         while (oldAtom) {
             if (oldAtom.index <= i) {
                 offset--;
@@ -1836,27 +1833,34 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
             }
             break;
         }
-        commit.callback(commit.params, offset, needMove);
+        const { dirtyAtom, newAtom } = commits[i];
+        if (dirtyAtom) {
+            switch (dirtyAtom.type) {
+                case ElementAtomType:
+                    updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, dirtyAtom);
+                    break;
+                case TextAtomType:
+                    updateText(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
+                    break;
+                case ComponentAtomType:
+                    updateComponent(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
+                    break;
+            }
+        }
+        else {
+            buildView(nativeRenderer, parentComponent, newAtom, context);
+            offset++;
+        }
     }
 }
-function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+function createChanges(newAtom, oldAtom, commits) {
     const startDiffAtom = oldAtom;
     let prev = null;
     while (oldAtom) {
-        const newAtomType = newAtom.type;
-        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
+        if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             commits.push({
-                callback: newAtomType === TextAtomType ? updateText :
-                    newAtomType === ComponentAtomType ? updateComponent :
-                        updateElement,
-                params: {
-                    oldAtom,
-                    newAtom,
-                    nativeRenderer,
-                    context,
-                    effect,
-                    parentComponent
-                }
+                dirtyAtom: oldAtom,
+                newAtom
             });
             const next = oldAtom.sibling;
             if (!prev) {
@@ -1869,25 +1873,12 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
         oldAtom = oldAtom.sibling;
     }
     commits.push({
-        callback: patchUpdate,
-        params: {
-            oldAtom: oldAtom,
-            newAtom,
-            nativeRenderer,
-            context,
-            effect,
-            parentComponent
-        }
+        dirtyAtom: null,
+        newAtom
     });
     return startDiffAtom;
 }
-function patchUpdate(params) {
-    const { nativeRenderer, parentComponent, newAtom, context, effect } = params;
-    buildView(nativeRenderer, parentComponent, newAtom, context);
-    effect();
-}
-function updateText(params, offset, needMove) {
-    const { oldAtom, newAtom, nativeRenderer, context } = params;
+function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
     const nativeNode = oldAtom.nativeNode;
     newAtom.nativeNode = nativeNode;
     if (needMove || newAtom.index - offset !== oldAtom.index) {
@@ -1896,23 +1887,21 @@ function updateText(params, offset, needMove) {
     context.host = nativeNode;
     context.isParent = false;
 }
-function updateElement(params, offset, needMove) {
-    const { nativeRenderer, newAtom, oldAtom, context, parentComponent } = params;
-    newAtom.nativeNode = oldAtom.nativeNode;
+function updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, oldAtom) {
+    const nativeNode = oldAtom.nativeNode;
+    newAtom.nativeNode = nativeNode;
     if (needMove || newAtom.index - offset !== oldAtom.index) {
         insertNode(nativeRenderer, newAtom, context);
     }
-    context.host = newAtom.nativeNode;
+    context.host = nativeNode;
     context.isParent = false;
     updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-        host: newAtom.nativeNode,
+        host: nativeNode,
         isParent: true,
         rootHost: context.rootHost
     });
 }
-function updateComponent(params, offset, needMove) {
-    const { oldAtom, newAtom, nativeRenderer } = params;
-    let context = params.context;
+function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
     const component = oldAtom.jsxNode;
     const portalHost = component.instance.$portalHost;
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
@@ -1936,23 +1925,26 @@ function updateComponent(params, offset, needMove) {
     }
     else {
         newAtom.child = oldAtom.child;
-        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, true);
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
     }
     component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
+        const jsxNode = atom.jsxNode;
+        if (jsxNode instanceof Component) {
             reuseComponentView(nativeRenderer, atom.child, context, moveView, skipSubComponentDiff);
             if (!skipSubComponentDiff) {
-                deepUpdateByComponentDirtyTree(nativeRenderer, atom.jsxNode, moveView);
+                deepUpdateByComponentDirtyTree(nativeRenderer, jsxNode, moveView);
             }
         }
         else {
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
-            reuseElementChildrenView(nativeRenderer, atom);
+            if (!skipSubComponentDiff) {
+                reuseElementChildrenView(nativeRenderer, atom);
+            }
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1962,7 +1954,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
         child = child.sibling;
     }
 }
-function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponentDiff) {
+function reuseElementChildrenView(nativeRenderer, atom, context) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component) {
@@ -2262,7 +2254,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     });
     if (!updatedChildren) {
         newAtom.child = oldAtom.child;
-        reuseElementChildrenView(nativeRenderer, newAtom);
+        // reuseElementChildrenView(nativeRenderer, newAtom, context)
     }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
@@ -2507,4 +2499,123 @@ function watch(trigger, callback) {
     return unWatch;
 }
 
-export { ArrayReactiveHandler, Component, Dep, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, comparePropsWithCallbacks, computed, createContext, createDynamicRef, createRef, createRenderer, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };
+/**
+ * 组件状态管理器
+ * @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 = getDepContext();
+        if (listener && !subscribers.has(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 createDerived(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 Dep(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        listener.destroy();
+        pushDepContext(listener);
+        const value = fn();
+        popDepContext();
+        signal.set(value);
+        canListen(value);
+        isStop = false;
+    });
+    pushDepContext(listener);
+    const value = fn();
+    const signal = createSignal(value);
+    popDepContext();
+    isStop = false;
+    if (canListen(value)) {
+        registryComponentDestroyCallback(() => listener.destroy());
+    }
+    return signal;
+}
+
+/* eslint-enable max-len*/
+function createEffect(deps, callback) {
+    let prevFn;
+    const isArray = Array.isArray(deps);
+    const effect = new Dep(function () {
+        if (prevFn) {
+            prevFn();
+        }
+        const newValue = isArray ? deps.map(fn => fn()) : deps();
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushDepContext(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
+    popDepContext();
+    let isUnWatch = false;
+    function unWatch() {
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
+
+export { ArrayReactiveHandler, Component, Dep, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, comparePropsWithCallbacks, computed, createContext, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.js

@@ -802,6 +802,7 @@ function pushDepContext(dep) {
 function popDepContext() {
     deps.pop();
 }
+
 const subscribers = new WeakMap();
 function getSubscriber(target) {
     let subscriber = subscribers.get(target);
@@ -885,15 +886,6 @@ function trigger(target, type, key = unKnownKey) {
         }
     }
 }
-function registryComponentDestroyCallback(fn) {
-    const component = getSetupContext(false);
-    if (component) {
-        if (!component.unmountedCallbacks) {
-            component.unmountedCallbacks = [];
-        }
-        component.unmountedCallbacks.push(fn);
-    }
-}
 
 function createIterableIterator(wrapper) {
     return {
@@ -1634,6 +1626,15 @@ class Component {
 function getCurrentInstance() {
     return getSetupContext();
 }
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
 
 const injectMap = new WeakMap();
 function getInjector(start) {
@@ -1814,11 +1815,8 @@ function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
-    function changeOffset() {
-        offset++;
-    }
     while (newAtom) {
-        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
+        oldAtom = createChanges(newAtom, oldAtom, commits);
         newAtom = newAtom.sibling;
     }
     let dirtyDiffAtom = oldAtom;
@@ -1829,7 +1827,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
     let offset = 0;
     const len = commits.length;
     for (let i = 0; i < len; i++) {
-        const commit = commits[i];
         while (oldAtom) {
             if (oldAtom.index <= i) {
                 offset--;
@@ -1838,27 +1835,34 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
             }
             break;
         }
-        commit.callback(commit.params, offset, needMove);
+        const { dirtyAtom, newAtom } = commits[i];
+        if (dirtyAtom) {
+            switch (dirtyAtom.type) {
+                case ElementAtomType:
+                    updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, dirtyAtom);
+                    break;
+                case TextAtomType:
+                    updateText(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
+                    break;
+                case ComponentAtomType:
+                    updateComponent(nativeRenderer, context, offset, needMove, newAtom, dirtyAtom);
+                    break;
+            }
+        }
+        else {
+            buildView(nativeRenderer, parentComponent, newAtom, context);
+            offset++;
+        }
     }
 }
-function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+function createChanges(newAtom, oldAtom, commits) {
     const startDiffAtom = oldAtom;
     let prev = null;
     while (oldAtom) {
-        const newAtomType = newAtom.type;
-        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
+        if (oldAtom.type === newAtom.type && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             commits.push({
-                callback: newAtomType === TextAtomType ? updateText :
-                    newAtomType === ComponentAtomType ? updateComponent :
-                        updateElement,
-                params: {
-                    oldAtom,
-                    newAtom,
-                    nativeRenderer,
-                    context,
-                    effect,
-                    parentComponent
-                }
+                dirtyAtom: oldAtom,
+                newAtom
             });
             const next = oldAtom.sibling;
             if (!prev) {
@@ -1871,25 +1875,12 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
         oldAtom = oldAtom.sibling;
     }
     commits.push({
-        callback: patchUpdate,
-        params: {
-            oldAtom: oldAtom,
-            newAtom,
-            nativeRenderer,
-            context,
-            effect,
-            parentComponent
-        }
+        dirtyAtom: null,
+        newAtom
     });
     return startDiffAtom;
 }
-function patchUpdate(params) {
-    const { nativeRenderer, parentComponent, newAtom, context, effect } = params;
-    buildView(nativeRenderer, parentComponent, newAtom, context);
-    effect();
-}
-function updateText(params, offset, needMove) {
-    const { oldAtom, newAtom, nativeRenderer, context } = params;
+function updateText(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
     const nativeNode = oldAtom.nativeNode;
     newAtom.nativeNode = nativeNode;
     if (needMove || newAtom.index - offset !== oldAtom.index) {
@@ -1898,23 +1889,21 @@ function updateText(params, offset, needMove) {
     context.host = nativeNode;
     context.isParent = false;
 }
-function updateElement(params, offset, needMove) {
-    const { nativeRenderer, newAtom, oldAtom, context, parentComponent } = params;
-    newAtom.nativeNode = oldAtom.nativeNode;
+function updateElement(nativeRenderer, context, parentComponent, offset, needMove, newAtom, oldAtom) {
+    const nativeNode = oldAtom.nativeNode;
+    newAtom.nativeNode = nativeNode;
     if (needMove || newAtom.index - offset !== oldAtom.index) {
         insertNode(nativeRenderer, newAtom, context);
     }
-    context.host = newAtom.nativeNode;
+    context.host = nativeNode;
     context.isParent = false;
     updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-        host: newAtom.nativeNode,
+        host: nativeNode,
         isParent: true,
         rootHost: context.rootHost
     });
 }
-function updateComponent(params, offset, needMove) {
-    const { oldAtom, newAtom, nativeRenderer } = params;
-    let context = params.context;
+function updateComponent(nativeRenderer, context, offset, needMove, newAtom, oldAtom) {
     const component = oldAtom.jsxNode;
     const portalHost = component.instance.$portalHost;
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
@@ -1938,23 +1927,26 @@ function updateComponent(params, offset, needMove) {
     }
     else {
         newAtom.child = oldAtom.child;
-        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, true);
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
     }
     component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
+        const jsxNode = atom.jsxNode;
+        if (jsxNode instanceof Component) {
             reuseComponentView(nativeRenderer, atom.child, context, moveView, skipSubComponentDiff);
             if (!skipSubComponentDiff) {
-                deepUpdateByComponentDirtyTree(nativeRenderer, atom.jsxNode, moveView);
+                deepUpdateByComponentDirtyTree(nativeRenderer, jsxNode, moveView);
             }
         }
         else {
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
-            reuseElementChildrenView(nativeRenderer, atom);
+            if (!skipSubComponentDiff) {
+                reuseElementChildrenView(nativeRenderer, atom);
+            }
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1964,7 +1956,7 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
         child = child.sibling;
     }
 }
-function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponentDiff) {
+function reuseElementChildrenView(nativeRenderer, atom, context) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component) {
@@ -2264,7 +2256,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     });
     if (!updatedChildren) {
         newAtom.child = oldAtom.child;
-        reuseElementChildrenView(nativeRenderer, newAtom);
+        // reuseElementChildrenView(nativeRenderer, newAtom, context)
     }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
@@ -2509,6 +2501,125 @@ function watch(trigger, callback) {
     return unWatch;
 }
 
+/**
+ * 组件状态管理器
+ * @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 = getDepContext();
+        if (listener && !subscribers.has(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 createDerived(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 Dep(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        listener.destroy();
+        pushDepContext(listener);
+        const value = fn();
+        popDepContext();
+        signal.set(value);
+        canListen(value);
+        isStop = false;
+    });
+    pushDepContext(listener);
+    const value = fn();
+    const signal = createSignal(value);
+    popDepContext();
+    isStop = false;
+    if (canListen(value)) {
+        registryComponentDestroyCallback(() => listener.destroy());
+    }
+    return signal;
+}
+
+/* eslint-enable max-len*/
+function createEffect(deps, callback) {
+    let prevFn;
+    const isArray = Array.isArray(deps);
+    const effect = new Dep(function () {
+        if (prevFn) {
+            prevFn();
+        }
+        const newValue = isArray ? deps.map(fn => fn()) : deps();
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushDepContext(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
+    popDepContext();
+    let isUnWatch = false;
+    function unWatch() {
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
+
 exports.ArrayReactiveHandler = ArrayReactiveHandler;
 exports.Component = Component;
 exports.Dep = Dep;
@@ -2539,9 +2650,12 @@ exports.Type = Type;
 exports.comparePropsWithCallbacks = comparePropsWithCallbacks;
 exports.computed = computed;
 exports.createContext = createContext;
+exports.createDerived = createDerived;
 exports.createDynamicRef = createDynamicRef;
+exports.createEffect = createEffect;
 exports.createRef = createRef;
 exports.createRenderer = createRenderer;
+exports.createSignal = createSignal;
 exports.defaultArrayReactiveHandler = defaultArrayReactiveHandler;
 exports.defaultMapReactiveHandler = defaultMapReactiveHandler;
 exports.defaultObjectReactiveHandler = defaultObjectReactiveHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.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",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "1abff2eeba5cf840be260638c73651bf93bb706c",
+  "gitHead": "4033e6f38e517c754bea8786459eba0e0f2197d9",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }