@viewfly/core 2.0.0-alpha.4 → 2.0.0-alpha.6

package/bundles/index.d.ts

@@ -211,7 +211,7 @@ declare function comparePropsWithCallbacks(oldProps: Record<string, any>, newPro
 declare const TextAtomType: unique symbol;
 declare const ElementAtomType: unique symbol;
 declare const ComponentAtomType: unique symbol;
-type ElementNamespace = string | undefined;
+type ElementNamespace = string | void;
 interface TextAtom {
     type: typeof TextAtomType;
     index: number;
@@ -264,6 +264,7 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
     abstract cleanChildren(node: ElementNode, namespace: ElementNamespace): void;
     abstract syncTextContent(target: TextNode, content: string, namespace: ElementNamespace): void;
     abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
+    abstract getNameSpace(type: string, namespace: ElementNamespace): string | void;
 }
 
 interface RefListener<T> {
@@ -436,8 +437,19 @@ 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[];
+interface ContextProviderParams<T> {
+    provide: Type<T> | AbstractType<T> | InjectionToken<T>;
+}
+interface ContextProvider<T> extends Props {
+    useClass?: ClassProvider<T>['useClass'];
+    useFactory?: FactoryProvider<T>['useFactory'];
+    useValue?: ValueProvider<T>['useValue'];
+    useExisting?: ExistingProvider<T>['useExisting'];
+}
+declare function createContextProvider<T>(params: ContextProviderParams<T>): (props: ContextProvider<T>) => () => ViewFlyNode<string | ComponentSetup<any>>;
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
@@ -467,12 +479,18 @@ 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: {
-    readonly svg: "svg";
-    readonly math: "mathml";
-};
 declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, namespace: ElementNamespace): (host: NativeNode) => void;
 
 /**
@@ -518,15 +536,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 +549,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 +648,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, type ContextProvider, type ContextProviderParams, Dep, DynamicRef, type EffectCallback, type ElementNamespace, 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, createContextProvider, 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,62 @@ class Component {
 function getCurrentInstance() {
     return getSetupContext();
 }
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
+function Fragment(props) {
+    return () => {
+        return props.children;
+    };
+}
+function jsx(type, props, key) {
+    return JSXNodeFactory.createNode(type, props, key);
+}
+const jsxs = jsx;
+const JSXNodeFactory = {
+    createNode(type, props, key) {
+        return {
+            type,
+            props,
+            key
+        };
+    }
+};
+
+function watch(trigger, callback) {
+    let prevFn;
+    const dep = new Dep(() => {
+        pushDepContext(dep);
+        const newValue = trigger();
+        popDepContext();
+        if (newValue === oldValue) {
+            return;
+        }
+        if (prevFn) {
+            prevFn();
+        }
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushDepContext(dep);
+    let oldValue = trigger();
+    popDepContext();
+    dep.destroyCallbacks.push(() => {
+        prevFn === null || prevFn === void 0 ? void 0 : prevFn();
+    });
+    function unWatch() {
+        dep.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
 
 const injectMap = new WeakMap();
 function getInjector(start) {
@@ -1654,6 +1702,19 @@ function createContext(providers, scope, parentInjector) {
         };
     };
 }
+function createContextProvider(params) {
+    return function contextProvider(props) {
+        let Context = createContext([Object.assign({ provide: params.provide }, props)]);
+        watch(() => {
+            return props.useClass || props.useFactory || props.useValue || props.useExisting;
+        }, () => {
+            Context = createContext([Object.assign({ provide: params.provide }, props)]);
+        });
+        return () => {
+            return jsx(Context, { children: props.children });
+        };
+    };
+}
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
@@ -1699,25 +1760,6 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
-function Fragment(props) {
-    return () => {
-        return props.children;
-    };
-}
-function jsx(type, props, key) {
-    return JSXNodeFactory.createNode(type, props, key);
-}
-const jsxs = jsx;
-const JSXNodeFactory = {
-    createNode(type, props, key) {
-        return {
-            type,
-            props,
-            key
-        };
-    }
-};
-
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -1725,10 +1767,6 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-const ElementNamespaceMap = {
-    svg: 'svg',
-    math: 'mathml',
-};
 const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
@@ -1779,7 +1817,7 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
     const newTemplate = component.rerender();
-    newAtom.child = createChildChain(newTemplate, newAtom.namespace);
+    newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
     diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
@@ -1812,11 +1850,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 +1862,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 +1870,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 +1910,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 +1924,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,7 +1962,7 @@ function updateComponent(params, offset, needMove) {
     }
     else {
         newAtom.child = oldAtom.child;
-        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate);
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
     }
     component.rendered();
 }
@@ -1953,7 +1979,9 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
-            reuseElementChildrenView(nativeRenderer, atom);
+            if (!skipSubComponentDiff) {
+                reuseElementChildrenView(nativeRenderer, atom);
+            }
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1963,7 +1991,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) {
@@ -2012,7 +2040,7 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
-        from.child = createChildChain(template, from.namespace);
+        from.child = createChildChain(template, nativeRenderer, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         component.viewMetadata = Object.assign({ atom: from }, context);
         let child = from.child;
@@ -2037,7 +2065,7 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key)
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByNode(jsxNode, prevAtom, elementNamespace) {
+function createChainByNode(jsxNode, prevAtom, nativeRenderer, elementNamespace) {
     const type = typeof jsxNode;
     if (jsxNode != null && type !== 'boolean') {
         if (type === 'string') {
@@ -2045,11 +2073,11 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
         }
         if (type === 'object') {
             if (Array.isArray(jsxNode)) {
-                return createChainByChildren(jsxNode, prevAtom, elementNamespace);
+                return createChainByChildren(jsxNode, prevAtom, nativeRenderer, elementNamespace);
             }
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, nativeRenderer.getNameSpace(jsxNode.type, elementNamespace), jsxNode.key);
             }
             else if (nodeType === 'function') {
                 return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
@@ -2060,17 +2088,17 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     }
     return prevAtom;
 }
-function createChainByChildren(children, prevAtom, elementNamespace) {
+function createChainByChildren(children, prevAtom, nativeRenderer, elementNamespace) {
     const len = children.length;
     for (let i = 0; i < len; i++) {
         const item = children[i];
-        prevAtom = createChainByNode(item, prevAtom, elementNamespace);
+        prevAtom = createChainByNode(item, prevAtom, nativeRenderer, elementNamespace);
     }
     return prevAtom;
 }
-function createChildChain(template, namespace) {
+function createChildChain(template, nativeRenderer, namespace) {
     const beforeAtom = { sibling: null, index: -1 };
-    createChainByNode(template, beforeAtom, namespace);
+    createChainByNode(template, beforeAtom, nativeRenderer, namespace);
     return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
@@ -2086,11 +2114,9 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
-function createElementChildren(type, children, namespace) {
-    if (type === 'foreignObject' && namespace === ElementNamespaceMap.svg) {
-        return createChildChain(children, void 0);
-    }
-    return createChildChain(children, namespace);
+function createElementChildren(type, children, nativeRenderer, namespace) {
+    const ns = nativeRenderer.getNameSpace(type, namespace);
+    return createChildChain(children, nativeRenderer, ns);
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
     const { namespace, jsxNode } = atom;
@@ -2099,7 +2125,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createElementChildren(jsxNode.type, props.children, namespace);
+            atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
             continue;
         }
         if (key === 'class') {
@@ -2190,7 +2216,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }, (key, value) => {
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, value, nativeRenderer, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             return;
         }
@@ -2219,7 +2245,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }, (key, newValue, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, newValue, nativeRenderer, isSvg);
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
@@ -2263,7 +2289,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);
@@ -2480,32 +2506,123 @@ function shallowReactive(raw) {
     return proxy;
 }
 
-function watch(trigger, callback) {
-    let prevFn;
-    const dep = new Dep(() => {
-        pushDepContext(dep);
-        const newValue = trigger();
-        popDepContext();
-        if (newValue === oldValue) {
+/**
+ * 组件状态管理器
+ * @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(dep);
-    let oldValue = trigger();
+    pushDepContext(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
     popDepContext();
-    dep.destroyCallbacks.push(() => {
-        prevFn === null || prevFn === void 0 ? void 0 : prevFn();
-    });
+    let isUnWatch = false;
     function unWatch() {
-        dep.destroy();
+        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, 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 };
+export { ArrayReactiveHandler, Component, Dep, DynamicRef, 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, createContextProvider, 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,62 @@ class Component {
 function getCurrentInstance() {
     return getSetupContext();
 }
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
+function Fragment(props) {
+    return () => {
+        return props.children;
+    };
+}
+function jsx(type, props, key) {
+    return JSXNodeFactory.createNode(type, props, key);
+}
+const jsxs = jsx;
+const JSXNodeFactory = {
+    createNode(type, props, key) {
+        return {
+            type,
+            props,
+            key
+        };
+    }
+};
+
+function watch(trigger, callback) {
+    let prevFn;
+    const dep = new Dep(() => {
+        pushDepContext(dep);
+        const newValue = trigger();
+        popDepContext();
+        if (newValue === oldValue) {
+            return;
+        }
+        if (prevFn) {
+            prevFn();
+        }
+        prevFn = callback(newValue, oldValue);
+        oldValue = newValue;
+    });
+    pushDepContext(dep);
+    let oldValue = trigger();
+    popDepContext();
+    dep.destroyCallbacks.push(() => {
+        prevFn === null || prevFn === void 0 ? void 0 : prevFn();
+    });
+    function unWatch() {
+        dep.destroy();
+    }
+    registryComponentDestroyCallback(unWatch);
+    return unWatch;
+}
 
 const injectMap = new WeakMap();
 function getInjector(start) {
@@ -1656,6 +1704,19 @@ function createContext(providers, scope, parentInjector) {
         };
     };
 }
+function createContextProvider(params) {
+    return function contextProvider(props) {
+        let Context = createContext([Object.assign({ provide: params.provide }, props)]);
+        watch(() => {
+            return props.useClass || props.useFactory || props.useValue || props.useExisting;
+        }, () => {
+            Context = createContext([Object.assign({ provide: params.provide }, props)]);
+        });
+        return () => {
+            return jsx(Context, { children: props.children });
+        };
+    };
+}
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
@@ -1701,25 +1762,6 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
-function Fragment(props) {
-    return () => {
-        return props.children;
-    };
-}
-function jsx(type, props, key) {
-    return JSXNodeFactory.createNode(type, props, key);
-}
-const jsxs = jsx;
-const JSXNodeFactory = {
-    createNode(type, props, key) {
-        return {
-            type,
-            props,
-            key
-        };
-    }
-};
-
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -1727,10 +1769,6 @@ function withMemo(canUseMemo, render) {
     };
 }
 
-const ElementNamespaceMap = {
-    svg: 'svg',
-    math: 'mathml',
-};
 const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
@@ -1781,7 +1819,7 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
 }
 function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
     const newTemplate = component.rerender();
-    newAtom.child = createChildChain(newTemplate, newAtom.namespace);
+    newAtom.child = createChildChain(newTemplate, nativeRenderer, newAtom.namespace);
     diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
 }
 function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
@@ -1814,11 +1852,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 +1864,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 +1872,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 +1912,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 +1926,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,7 +1964,7 @@ function updateComponent(params, offset, needMove) {
     }
     else {
         newAtom.child = oldAtom.child;
-        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate);
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, !canUpdate || !component.changedSubComponents.size);
     }
     component.rendered();
 }
@@ -1955,7 +1981,9 @@ function reuseComponentView(nativeRenderer, child, context, moveView, skipSubCom
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
-            reuseElementChildrenView(nativeRenderer, atom);
+            if (!skipSubComponentDiff) {
+                reuseElementChildrenView(nativeRenderer, atom);
+            }
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1965,7 +1993,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) {
@@ -2014,7 +2042,7 @@ function cleanChildren(atom, nativeRenderer, needClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
-        from.child = createChildChain(template, from.namespace);
+        from.child = createChildChain(template, nativeRenderer, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         component.viewMetadata = Object.assign({ atom: from }, context);
         let child = from.child;
@@ -2039,7 +2067,7 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key)
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByNode(jsxNode, prevAtom, elementNamespace) {
+function createChainByNode(jsxNode, prevAtom, nativeRenderer, elementNamespace) {
     const type = typeof jsxNode;
     if (jsxNode != null && type !== 'boolean') {
         if (type === 'string') {
@@ -2047,11 +2075,11 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
         }
         if (type === 'object') {
             if (Array.isArray(jsxNode)) {
-                return createChainByChildren(jsxNode, prevAtom, elementNamespace);
+                return createChainByChildren(jsxNode, prevAtom, nativeRenderer, elementNamespace);
             }
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, nativeRenderer.getNameSpace(jsxNode.type, elementNamespace), jsxNode.key);
             }
             else if (nodeType === 'function') {
                 return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace, jsxNode.key);
@@ -2062,17 +2090,17 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     }
     return prevAtom;
 }
-function createChainByChildren(children, prevAtom, elementNamespace) {
+function createChainByChildren(children, prevAtom, nativeRenderer, elementNamespace) {
     const len = children.length;
     for (let i = 0; i < len; i++) {
         const item = children[i];
-        prevAtom = createChainByNode(item, prevAtom, elementNamespace);
+        prevAtom = createChainByNode(item, prevAtom, nativeRenderer, elementNamespace);
     }
     return prevAtom;
 }
-function createChildChain(template, namespace) {
+function createChildChain(template, nativeRenderer, namespace) {
     const beforeAtom = { sibling: null, index: -1 };
-    createChainByNode(template, beforeAtom, namespace);
+    createChainByNode(template, beforeAtom, nativeRenderer, namespace);
     return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
@@ -2088,11 +2116,9 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
-function createElementChildren(type, children, namespace) {
-    if (type === 'foreignObject' && namespace === ElementNamespaceMap.svg) {
-        return createChildChain(children, void 0);
-    }
-    return createChildChain(children, namespace);
+function createElementChildren(type, children, nativeRenderer, namespace) {
+    const ns = nativeRenderer.getNameSpace(type, namespace);
+    return createChildChain(children, nativeRenderer, ns);
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
     const { namespace, jsxNode } = atom;
@@ -2101,7 +2127,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createElementChildren(jsxNode.type, props.children, namespace);
+            atom.child = createElementChildren(jsxNode.type, props.children, nativeRenderer, namespace);
             continue;
         }
         if (key === 'class') {
@@ -2192,7 +2218,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }, (key, value) => {
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, value, nativeRenderer, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             return;
         }
@@ -2221,7 +2247,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }, (key, newValue, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, newValue, nativeRenderer, isSvg);
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
@@ -2265,7 +2291,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);
@@ -2482,29 +2508,120 @@ function shallowReactive(raw) {
     return proxy;
 }
 
-function watch(trigger, callback) {
-    let prevFn;
-    const dep = new Dep(() => {
-        pushDepContext(dep);
-        const newValue = trigger();
-        popDepContext();
-        if (newValue === oldValue) {
+/**
+ * 组件状态管理器
+ * @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(dep);
-    let oldValue = trigger();
+    pushDepContext(effect);
+    let oldValue = isArray ? deps.map(fn => fn()) : deps();
     popDepContext();
-    dep.destroyCallbacks.push(() => {
-        prevFn === null || prevFn === void 0 ? void 0 : prevFn();
-    });
+    let isUnWatch = false;
     function unWatch() {
-        dep.destroy();
+        if (isUnWatch) {
+            return;
+        }
+        isUnWatch = true;
+        if (prevFn) {
+            prevFn();
+        }
+        effect.destroy();
     }
     registryComponentDestroyCallback(unWatch);
     return unWatch;
@@ -2514,7 +2631,6 @@ exports.ArrayReactiveHandler = ArrayReactiveHandler;
 exports.Component = Component;
 exports.Dep = Dep;
 exports.DynamicRef = DynamicRef;
-exports.ElementNamespaceMap = ElementNamespaceMap;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Inject = Inject;
@@ -2540,9 +2656,13 @@ exports.Type = Type;
 exports.comparePropsWithCallbacks = comparePropsWithCallbacks;
 exports.computed = computed;
 exports.createContext = createContext;
+exports.createContextProvider = createContextProvider;
+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.4",
+  "version": "2.0.0-alpha.6",
   "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": "3cb6bb4b345ccda0679c35a39c8f17211b0c6826",
+  "gitHead": "287516a11d9fddbe9f38c341e06d1b7256cfe7ac",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }