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

package/bundles/index.esm.js

@@ -601,110 +601,6 @@ class ReflectiveInjector {
 
 const Type = Function;
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    for (const key in newProps) {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            continue;
-        }
-        changes.add.push([key, leftValue]);
-    }
-    for (const key in oldProps) {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    }
-    return changes;
-}
-function classToString(config) {
-    if (typeof config === 'string') {
-        return config;
-    }
-    if (!config) {
-        return '';
-    }
-    if (Array.isArray(config)) {
-        const classes = [];
-        for (const i of config) {
-            const v = classToString(i);
-            if (v) {
-                classes.push(v);
-            }
-        }
-        return classes.join(' ');
-    }
-    if (typeof config === 'object') {
-        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-            return config.toString();
-        }
-        const classes = [];
-        for (const key in config) {
-            if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                classes.push(key);
-            }
-        }
-        return classes.join(' ');
-    }
-    return '';
-}
-function styleToObject(style) {
-    if (typeof style !== 'string') {
-        return style;
-    }
-    const obj = {};
-    style.split(';').map(s => s.split(':')).forEach(v => {
-        if (!v[0] || !v[1]) {
-            return;
-        }
-        obj[v[0].trim()] = v[1].trim();
-    });
-    return obj;
-}
-const TextAtomType = Symbol('Text');
-const ElementAtomType = Symbol('Element');
-const ComponentAtomType = Symbol('Component');
-
-class Listener {
-    constructor(effect) {
-        Object.defineProperty(this, "effect", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: effect
-        });
-        Object.defineProperty(this, "destroyCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-    }
-    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();
-}
-
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -752,38 +648,6 @@ function onUpdated(callback) {
         }
     };
 }
-/**
- * 当组件 props 更新地调用
- * @param callback
- * @example
- * ```tsx
- * function YourComponent(props) {
- *   onPropsChanged((currentProps, prevProps) => {
- *     console.log(currentProps, prevProps)
- *
- *     return () => {
- *       console.log('destroy prev changed!')
- *     }
- *   })
- *   return () => {
- *     return <div>xxx</div>
- *   }
- * }
- * ```
- */
-function onPropsChanged(callback) {
-    const component = getSetupContext();
-    if (!component.propsChangedCallbacks) {
-        component.propsChangedCallbacks = [];
-    }
-    component.propsChangedCallbacks.push(callback);
-    return () => {
-        const index = component.propsChangedCallbacks.indexOf(callback);
-        if (index > -1) {
-            component.propsChangedCallbacks.splice(index, 1);
-        }
-    };
-}
 /**
  * 当组件销毁时调用回调函数
  * @param callback
@@ -894,135 +758,697 @@ function createRef() {
     return new StaticRef();
 }
 
-const componentSetupStack = [];
-const componentErrorFn = makeError('component');
-function getSetupContext(need = true) {
-    const current = componentSetupStack[componentSetupStack.length - 1];
-    if (!current && need) {
-        // 防止因外部捕获异常引引起的缓存未清理的问题
-        throw componentErrorFn('cannot be called outside the component!');
-    }
-    return current;
+const toStr = Object.prototype.toString;
+function getStringType(v) {
+    return toStr.call(v);
 }
-function toRefs(ref) {
-    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
-        return i instanceof DynamicRef;
-    });
+function isArray(v) {
+    return Array.isArray(v);
 }
-/**
- * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
- */
-class Component {
-    get dirty() {
-        return this._dirty;
-    }
-    get changed() {
-        return this._changed;
-    }
-    constructor(parentComponent, type, props, key) {
-        Object.defineProperty(this, "parentComponent", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: parentComponent
-        });
-        Object.defineProperty(this, "type", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: type
-        });
-        Object.defineProperty(this, "props", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: props
-        });
-        Object.defineProperty(this, "key", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: key
-        });
-        Object.defineProperty(this, "instance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "changedSubComponents", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Set()
-        });
-        Object.defineProperty(this, "unmountedCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "mountCallbacks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "propsChangedCallbacks", {
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+function hasOwn(target, key) {
+    return hasOwnProperty.call(target, key);
+}
+
+class Dep {
+    constructor(effect) {
+        Object.defineProperty(this, "effect", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: effect
         });
-        Object.defineProperty(this, "updatedCallbacks", {
+        Object.defineProperty(this, "destroyCallbacks", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: []
         });
-        Object.defineProperty(this, "updatedDestroyCallbacks", {
+    }
+    destroy() {
+        this.destroyCallbacks.forEach(callback => callback());
+        this.destroyCallbacks = [];
+    }
+}
+const deps = [];
+function getDepContext() {
+    return deps.at(-1);
+}
+function pushDepContext(dep) {
+    deps.push(dep);
+}
+function popDepContext() {
+    deps.pop();
+}
+const subscribers = new WeakMap();
+function getSubscriber(target) {
+    let subscriber = subscribers.get(target);
+    if (!subscriber) {
+        subscriber = new Map();
+        subscribers.set(target, subscriber);
+    }
+    return subscriber;
+}
+var TrackOpTypes;
+(function (TrackOpTypes) {
+    TrackOpTypes["Get"] = "Get";
+    TrackOpTypes["Has"] = "Has";
+    TrackOpTypes["Iterate"] = "Iterate";
+})(TrackOpTypes || (TrackOpTypes = {}));
+var TriggerOpTypes;
+(function (TriggerOpTypes) {
+    TriggerOpTypes["Set"] = "Set";
+    TriggerOpTypes["Add"] = "Add";
+    TriggerOpTypes["Delete"] = "Delete";
+    TriggerOpTypes["Clear"] = "Clear";
+})(TriggerOpTypes || (TriggerOpTypes = {}));
+const unKnownKey = Symbol('unKnownKey');
+function track(target, type, key = unKnownKey) {
+    const dep = getDepContext();
+    if (dep) {
+        const subscriber = getSubscriber(target);
+        let record = subscriber.get(type);
+        if (!record) {
+            record = new Map();
+            subscriber.set(type, record);
+        }
+        let effects = record.get(key);
+        if (!effects) {
+            effects = new Set([dep]);
+            record.set(key, effects);
+            dep.destroyCallbacks.push(() => {
+                effects.delete(dep);
+            });
+        }
+        else if (!effects.has(dep)) {
+            dep.destroyCallbacks.push(() => {
+                effects.delete(dep);
+            });
+            effects.add(dep);
+        }
+    }
+}
+function runEffect(key, record) {
+    if (!record) {
+        return;
+    }
+    const effects = record.get(key);
+    if (effects) {
+        const fns = [...effects];
+        fns.forEach(i => i.effect());
+    }
+}
+function trigger(target, type, key = unKnownKey) {
+    const subscriber = getSubscriber(target);
+    if (subscriber) {
+        switch (type) {
+            case TriggerOpTypes.Set:
+                if (isArray(target)) {
+                    const iterateRecord = subscriber.get(TrackOpTypes.Iterate);
+                    runEffect(unKnownKey, iterateRecord);
+                }
+                runEffect(key, subscriber.get(TrackOpTypes.Get));
+                runEffect(key, subscriber.get(TrackOpTypes.Has));
+                break;
+            case TriggerOpTypes.Add:
+            case TriggerOpTypes.Clear:
+            case TriggerOpTypes.Delete:
+                {
+                    const iterateRecord = subscriber.get(TrackOpTypes.Iterate);
+                    runEffect(unKnownKey, iterateRecord);
+                    runEffect(key, subscriber.get(TrackOpTypes.Has));
+                    runEffect(key, subscriber.get(TrackOpTypes.Get));
+                }
+                break;
+        }
+    }
+}
+function registryComponentDestroyCallback(fn) {
+    const component = getSetupContext(false);
+    if (component) {
+        if (!component.unmountedCallbacks) {
+            component.unmountedCallbacks = [];
+        }
+        component.unmountedCallbacks.push(fn);
+    }
+}
+
+function createIterableIterator(wrapper) {
+    return {
+        *entries() {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            for (const [key, value] of target.entries()) {
+                yield [wrapper(key), wrapper(value)];
+            }
+        },
+        *keys() {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            for (const item of target.keys()) {
+                yield wrapper(item);
+            }
+        },
+        *values() {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            for (const item of target.values()) {
+                yield wrapper(item);
+            }
+        }
+    };
+}
+
+function applyPredicateMethod(self, methodName, predicate, wrapper, thisArg) {
+    const target = toRaw(self);
+    track(target, TrackOpTypes.Iterate);
+    return target[methodName]((value, index, array) => {
+        return predicate.call(target, wrapper(value), index, array);
+    }, thisArg);
+}
+function applySearchMethod(self, methodName, args) {
+    const target = toRaw(self);
+    track(target, TrackOpTypes.Iterate);
+    return target[methodName](...args.map(toRaw));
+}
+function createArrayHandlers(wrapper) {
+    return Object.assign({ concat(...items) {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Add);
+            return target.concat(...items);
+        },
+        every(predicate, thisArg) {
+            return applyPredicateMethod(this, 'every', predicate, wrapper, thisArg);
+        },
+        filter(predicate, thisArg) {
+            return applyPredicateMethod(this, 'filter', predicate, wrapper, thisArg);
+        },
+        find(predicate, thisArg) {
+            return applyPredicateMethod(this, 'find', predicate, wrapper, thisArg);
+        },
+        findIndex(predicate, thisArg) {
+            return applyPredicateMethod(this, 'findIndex', predicate, wrapper, thisArg);
+        },
+        findLast(predicate, thisArg) {
+            return applyPredicateMethod(this, 'findLast', predicate, wrapper, thisArg);
+        },
+        findLastIndex(predicate, thisArg) {
+            return applyPredicateMethod(this, 'findLastIndex', predicate, wrapper, thisArg);
+        },
+        forEach(callbackfn, thisArg) {
+            return applyPredicateMethod(this, 'forEach', callbackfn, wrapper, thisArg);
+        },
+        includes(...args) {
+            return applySearchMethod(this, 'includes', args);
+        },
+        indexOf(...args) {
+            return applySearchMethod(this, 'indexOf', args);
+        },
+        join(separator) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.join(separator);
+        },
+        lastIndexOf(...args) {
+            return applySearchMethod(this, 'lastIndexOf', args);
+        },
+        map(callbackFn, thisArg) {
+            return applyPredicateMethod(this, 'map', callbackFn, wrapper, thisArg);
+        },
+        pop() {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Delete);
+            return target.pop();
+        },
+        push(...items) {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Add);
+            return target.push(...items);
+        },
+        reduce(callbackFn, ...args) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.reduce((p, c, i, a) => {
+                if (args.length > 0) {
+                    return callbackFn(p, wrapper(c), i, a);
+                }
+                return callbackFn(wrapper(p), wrapper(c), i, a);
+            }, ...args);
+        },
+        reduceRight(callbackFn, ...args) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.reduceRight((p, c, i, a) => {
+                if (args.length > 0) {
+                    return callbackFn(p, wrapper(c), i, a);
+                }
+                return callbackFn(wrapper(p), wrapper(c), i, a);
+            }, ...args);
+        },
+        shift() {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Delete);
+            return target.shift();
+        },
+        some(predicate, thisArg) {
+            return applyPredicateMethod(this, 'some', predicate, thisArg);
+        },
+        splice(start, deleteCount) {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Set);
+            trigger(target, TriggerOpTypes.Add);
+            trigger(target, TriggerOpTypes.Delete);
+            return target.splice(start, deleteCount).map(i => wrapper(i));
+        },
+        toReversed() {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.toReversed();
+        },
+        toSorted(compareFn) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.toSorted(compareFn);
+        },
+        toSpliced(start, deleteCount, ...items) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate);
+            return target.toSpliced(start, deleteCount, ...items);
+        },
+        unshift(...items) {
+            const target = toRaw(this);
+            trigger(target, TriggerOpTypes.Add);
+            return target.unshift(...items);
+        },
+        [Symbol.iterator]() {
+            return this.values();
+        } }, createIterableIterator(wrapper));
+}
+
+function createMapHandlers(wrapper) {
+    return Object.assign({ get(key) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Get, key);
+            return wrapper(target.get(key));
+        },
+        set(key, value) {
+            const target = toRaw(this);
+            key = toRaw(key);
+            value = toRaw(value);
+            const has = target.has(key);
+            const r = target.set(key, value);
+            trigger(target, has ? TriggerOpTypes.Set : TriggerOpTypes.Add, key);
+            return r;
+        },
+        has(key) {
+            const target = toRaw(this);
+            key = toRaw(key);
+            track(target, TrackOpTypes.Has, key);
+            return target.has(key);
+        },
+        delete(key) {
+            const target = toRaw(this);
+            key = toRaw(key);
+            const r = target.delete(key);
+            trigger(target, TriggerOpTypes.Delete, key);
+            return r;
+        },
+        forEach(callbackFn, thisArg) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate, undefined);
+            target.forEach((v, k, m) => {
+                callbackFn.call(this, wrapper(v), wrapper(k), m);
+            }, thisArg);
+        },
+        clear() {
+            const target = toRaw(this);
+            target.clear();
+            trigger(target, TriggerOpTypes.Clear, undefined);
+        },
+        [Symbol.iterator]() {
+            return this.entries();
+        } }, createIterableIterator(wrapper));
+}
+
+function createSetHandlers(wrapper) {
+    return Object.assign({ add(value) {
+            const target = toRaw(this);
+            value = toRaw(value);
+            if (!target.has(value)) {
+                target.add(value);
+                trigger(target, TriggerOpTypes.Add, undefined);
+            }
+            return this;
+        },
+        delete(value) {
+            const target = toRaw(this);
+            value = toRaw(value);
+            const has = target.has(value);
+            const b = target.delete(value);
+            if (!has) {
+                trigger(target, TriggerOpTypes.Delete, undefined);
+            }
+            return b;
+        },
+        has(key) {
+            const target = toRaw(this);
+            key = toRaw(key);
+            track(target, TrackOpTypes.Has, key);
+            return target.has(key);
+        },
+        forEach(callbackFn, thisArg) {
+            const target = toRaw(this);
+            track(target, TrackOpTypes.Iterate, undefined);
+            target.forEach((v, k, m) => {
+                callbackFn.call(this, wrapper(v), wrapper(k), m);
+            }, thisArg);
+        },
+        clear() {
+            const target = toRaw(this);
+            const size = target.size;
+            if (size !== 0) {
+                target.clear();
+                trigger(target, TriggerOpTypes.Clear, undefined);
+            }
+        },
+        [Symbol.iterator]() {
+            return this.values();
+        } }, createIterableIterator(wrapper));
+}
+
+const reactiveErrorFn = makeError('reactive');
+const rawToProxyCache = new WeakMap();
+const proxyToRawCache = new WeakMap();
+function toRaw(value) {
+    if (proxyToRawCache.has(value)) {
+        return proxyToRawCache.get(value);
+    }
+    return value;
+}
+function isReactive(value) {
+    return proxyToRawCache.has(value);
+}
+let fromInternalWrite = false;
+function internalWrite(fn) {
+    fromInternalWrite = true;
+    fn();
+    fromInternalWrite = false;
+}
+class ObjectReactiveHandler {
+    constructor(config) {
+        Object.defineProperty(this, "isShallow", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "propsChangedDestroyCallbacks", {
+        Object.defineProperty(this, "isReadonly", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "_dirty", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: true
-        });
-        Object.defineProperty(this, "_changed", {
+        this.isReadonly = config.readonly;
+        this.isShallow = config.shallow;
+    }
+    set(target, p, newValue, receiver) {
+        if (this.isReadonly && !fromInternalWrite) {
+            throw reactiveErrorFn('Object is readonly!');
+        }
+        newValue = toRaw(newValue);
+        const oldValue = target[p];
+        if (oldValue === newValue) {
+            return Reflect.set(target, p, newValue, receiver);
+        }
+        const b = Reflect.set(target, p, newValue, receiver);
+        fromInternalWrite = false;
+        if (hasOwn(target, p)) {
+            trigger(target, TriggerOpTypes.Set, p);
+        }
+        else {
+            trigger(target, TriggerOpTypes.Add, p);
+        }
+        return b;
+    }
+    get(target, p, receiver) {
+        track(target, TrackOpTypes.Get, p);
+        const value = Reflect.get(target, p, receiver);
+        if (this.isShallow) {
+            return value;
+        }
+        return reactive(value);
+    }
+    deleteProperty(target, p) {
+        const b = Reflect.deleteProperty(target, p);
+        trigger(target, TriggerOpTypes.Delete, p);
+        return b;
+    }
+    ownKeys(target) {
+        track(target, TrackOpTypes.Iterate);
+        return Reflect.ownKeys(target);
+    }
+}
+function noReactive(v) {
+    return v;
+}
+class ArrayReactiveHandler extends ObjectReactiveHandler {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "interceptors", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: true
+            value: createArrayHandlers(this.isShallow ? noReactive : reactive)
         });
-        Object.defineProperty(this, "isFirstRendering", {
+    }
+    get(target, p, receiver) {
+        if (Reflect.has(this.interceptors, p) && p in target) {
+            return this.interceptors[p];
+        }
+        return super.get(target, p, receiver);
+    }
+}
+class MapReactiveHandler extends ObjectReactiveHandler {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "interceptors", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: true
+            value: createMapHandlers(this.isShallow ? noReactive : reactive)
         });
-        Object.defineProperty(this, "refs", {
+    }
+    get(target, p, receiver) {
+        if (Reflect.has(this.interceptors, p) && p in target) {
+            return this.interceptors[p];
+        }
+        if (p === 'size') {
+            track(target, TrackOpTypes.Iterate, p);
+            return Reflect.get(target, p);
+        }
+        return super.get(target, p, receiver);
+    }
+}
+class SetReactiveHandler extends ObjectReactiveHandler {
+    constructor(config) {
+        super(config);
+        Object.defineProperty(this, "interceptors", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
+            value: createSetHandlers(this.isShallow ? noReactive : reactive)
         });
-        Object.defineProperty(this, "listener", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Listener(() => {
-                this.markAsDirtied();
-            })
+    }
+    get(target, p, receiver) {
+        if (Reflect.has(this.interceptors, p) && p in target) {
+            return this.interceptors[p];
+        }
+        if (p === 'size') {
+            track(target, TrackOpTypes.Iterate, p);
+            return Reflect.get(target, p);
+        }
+        return super.get(target, p, receiver);
+    }
+}
+const defaultObjectReactiveHandler = new ObjectReactiveHandler({
+    readonly: false,
+    shallow: false
+});
+const defaultArrayReactiveHandler = new ArrayReactiveHandler({
+    readonly: false,
+    shallow: false
+});
+const defaultMapReactiveHandler = new MapReactiveHandler({
+    readonly: false,
+    shallow: false
+});
+const defaultSetReactiveHandler = new SetReactiveHandler({
+    readonly: false,
+    shallow: false
+});
+const readonlyProxyHandler = new ObjectReactiveHandler({
+    shallow: true,
+    readonly: true
+});
+function reactive(raw) {
+    if (isReactive(raw)) {
+        return raw;
+    }
+    let proxy = rawToProxyCache.get(raw);
+    if (proxy) {
+        return proxy;
+    }
+    const type = getStringType(raw);
+    switch (type) {
+        case '[object Object]':
+            proxy = new Proxy(raw, defaultObjectReactiveHandler);
+            break;
+        case '[object Array]':
+            proxy = new Proxy(raw, defaultArrayReactiveHandler);
+            break;
+        case '[object Set]':
+        case '[object WeakSet]':
+            proxy = new Proxy(raw, defaultSetReactiveHandler);
+            break;
+        case '[object Map]':
+        case '[object WeakMap]':
+            proxy = new Proxy(raw, defaultMapReactiveHandler);
+            break;
+        default:
+            return raw;
+    }
+    rawToProxyCache.set(raw, proxy);
+    proxyToRawCache.set(proxy, raw);
+    return proxy;
+}
+
+function hasChange(newProps, oldProps) {
+    const newKeys = Object.keys(oldProps);
+    const oldKeys = Object.keys(newProps);
+    if (oldKeys.length !== newKeys.length) {
+        return true;
+    }
+    const len = oldKeys.length;
+    for (let i = 0; i < len; i++) {
+        const key = newKeys[i];
+        if (newProps[key] !== oldProps[key]) {
+            return true;
+        }
+    }
+    return false;
+}
+const refKey = 'ref';
+function comparePropsWithCallbacks(oldProps, newProps, onDeleted, onAdded, onUpdated) {
+    for (const key in oldProps) {
+        if (!(key in newProps)) {
+            onDeleted(key, oldProps[key]);
+        }
+    }
+    for (const key in newProps) {
+        if (!(key in oldProps)) {
+            onAdded(key, newProps[key]);
+        }
+        else if (oldProps[key] !== newProps[key]) {
+            onUpdated(key, newProps[key], oldProps[key]);
+        }
+    }
+}
+function classToString(config) {
+    if (typeof config === 'string') {
+        return config;
+    }
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
+        const classes = [];
+        for (const i of config) {
+            const v = classToString(i);
+            if (v) {
+                classes.push(v);
+            }
+        }
+        return classes.join(' ');
+    }
+    if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
+        }
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+        return classes.join(' ');
+    }
+    return '';
+}
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style || {};
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
+const TextAtomType = Symbol('Text');
+const ElementAtomType = Symbol('Element');
+const ComponentAtomType = Symbol('Component');
+
+const componentSetupStack = [];
+const componentErrorFn = makeError('component');
+function getSetupContext(need = true) {
+    const current = componentSetupStack[componentSetupStack.length - 1];
+    if (!current && need) {
+        // 防止因外部捕获异常引引起的缓存未清理的问题
+        throw componentErrorFn('cannot be called outside the component!');
+    }
+    return current;
+}
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof DynamicRef;
+    });
+}
+function createReadonlyProxy(value) {
+    return new Proxy(value, readonlyProxyHandler);
+}
+/**
+ * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
+ */
+class Component {
+    get dirty() {
+        return this._dirty;
+    }
+    get changed() {
+        return this._changed;
+    }
+    constructor(parentComponent, type, props, key) {
+        this.parentComponent = parentComponent;
+        this.type = type;
+        this.props = props;
+        this.key = key;
+        this.instance = null;
+        this.changedSubComponents = new Set();
+        this.viewMetadata = null;
+        this.unmountedCallbacks = null;
+        this.mountCallbacks = null;
+        this.updatedCallbacks = null;
+        this.updatedDestroyCallbacks = null;
+        this._dirty = true;
+        this._changed = false;
+        this.isFirstRendering = true;
+        this.refs = null;
+        this.rawProps = props;
+        this.props = createReadonlyProxy(Object.assign({}, props));
+        this.listener = new Dep(() => {
+            this.markAsDirtied();
         });
     }
     markAsDirtied() {
@@ -1037,117 +1463,109 @@ class Component {
             return;
         }
         this._changed = true;
-        if (this.parentComponent instanceof Component) {
+        if (this.parentComponent) {
             this.parentComponent.markAsChanged(this);
         }
     }
     render(update) {
-        const self = this;
-        const proxiesProps = new Proxy(this.props, {
-            get(_, key) {
-                // 必须用 self，因为 props 会随着页面更新变更，使用 self 才能更新引用
-                return self.props[key];
-            },
-            set() {
-                // 防止因外部捕获异常引引起的缓存未清理的问题
-                if (isSetup) {
-                    componentSetupStack.pop();
-                }
-                throw componentErrorFn('component props is readonly!');
-            }
-        });
         componentSetupStack.push(this);
-        let isSetup = true;
-        const render = this.type(proxiesProps);
+        const render = this.type(this.props);
         const isRenderFn = typeof render === 'function';
         this.instance = isRenderFn ? { $render: render } : render;
         const refs = toRefs(this.props.ref);
         if (refs.length) {
             this.refs = refs;
             onMounted(() => {
-                for (const ref of refs) {
+                const refs = this.refs;
+                const length = refs.length;
+                for (let i = 0; i < length; i++) {
+                    const ref = refs[i];
                     ref.bind(this.instance);
                 }
                 return () => {
-                    for (const ref of refs) {
+                    const refs = this.refs;
+                    const length = refs.length;
+                    for (let i = 0; i < length; i++) {
+                        const ref = refs[i];
                         ref.unBind(this.instance);
                     }
                 };
             });
         }
-        isSetup = false;
         componentSetupStack.pop();
-        pushListener(this.listener);
+        pushDepContext(this.listener);
         const template = this.instance.$render();
-        popListener();
+        popDepContext();
         update(template, this.instance.$portalHost);
         this.rendered();
     }
-    update(newProps, updateChildren, reuseChildren) {
-        const oldProps = this.props;
-        if (newProps !== oldProps) {
-            const { add, remove, replace } = getObjectChanges(newProps, oldProps);
-            if (add.length || remove.length || replace.length) {
-                this.invokePropsChangedHooks(newProps);
-            }
-            else if (!this.dirty) {
-                this.props = newProps;
-                reuseChildren(false);
-                this.rendered();
-                return;
-            }
-            const newRefs = toRefs(newProps.ref);
-            if (this.refs) {
-                for (const oldRef of this.refs) {
-                    if (!newRefs.includes(oldRef)) {
-                        oldRef.unBind(this.instance);
-                    }
+    updateProps(newProps) {
+        const oldProps = this.rawProps;
+        this.rawProps = newProps;
+        const newRefs = toRefs(newProps.ref);
+        comparePropsWithCallbacks(oldProps, newProps, key => {
+            internalWrite(() => {
+                Reflect.deleteProperty(oldProps, key);
+            });
+        }, (key, value) => {
+            internalWrite(() => {
+                this.props[key] = value;
+            });
+        }, (key, value) => {
+            internalWrite(() => {
+                this.props[key] = value;
+            });
+        });
+        if (this.refs) {
+            const len = this.refs.length;
+            for (let i = 0; i < len; i++) {
+                const oldRef = this.refs[i];
+                if (!newRefs.includes(oldRef)) {
+                    oldRef.unBind(this.instance);
                 }
             }
-            for (const newRef of newRefs) {
-                newRef.bind(this.instance);
-            }
-            if (newRefs.length) {
-                this.refs = newRefs;
-            }
         }
+        const len = newRefs.length;
+        for (let i = 0; i < len; i++) {
+            const newRef = newRefs[i];
+            newRef.bind(this.instance);
+        }
+        if (len) {
+            this.refs = newRefs;
+        }
+    }
+    canUpdate(oldProps, newProps) {
         if (typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
-                reuseChildren(true);
-                this.rendered();
-                return;
+                return false;
             }
         }
+        return true;
+    }
+    rerender() {
         this.listener.destroy();
-        pushListener(this.listener);
+        pushDepContext(this.listener);
         const template = this.instance.$render();
-        popListener();
-        updateChildren(template);
-        this.rendered();
+        popDepContext();
+        return template;
     }
     destroy() {
-        var _a, _b, _c;
         this.listener.destroy();
-        (_a = this.updatedDestroyCallbacks) === null || _a === void 0 ? void 0 : _a.forEach(fn => {
-            fn();
-        });
-        (_b = this.propsChangedDestroyCallbacks) === null || _b === void 0 ? void 0 : _b.forEach(fn => {
-            fn();
-        });
-        (_c = this.unmountedCallbacks) === null || _c === void 0 ? void 0 : _c.forEach(fn => {
-            fn();
-        });
-        if (this.parentComponent instanceof Component) {
-            this.parentComponent.changedSubComponents.delete(this);
+        if (this.updatedDestroyCallbacks) {
+            this.updatedDestroyCallbacks.forEach(fn => {
+                fn();
+            });
+        }
+        if (this.unmountedCallbacks) {
+            this.unmountedCallbacks.forEach(fn => {
+                fn();
+            });
         }
         this.parentComponent =
-            this.propsChangedDestroyCallbacks =
-                this.updatedDestroyCallbacks =
-                    this.mountCallbacks =
-                        this.updatedCallbacks =
-                            this.propsChangedCallbacks =
-                                this.unmountedCallbacks = null;
-        this.changedSubComponents.clear();
+            this.updatedDestroyCallbacks =
+                this.mountCallbacks =
+                    this.updatedCallbacks =
+                        this.unmountedCallbacks = null;
     }
     rendered() {
         this.changedSubComponents.clear();
@@ -1160,35 +1578,18 @@ class Component {
         }
         if (this.changed) {
             Promise.resolve().then(() => {
-                if (this.parentComponent instanceof Component) {
+                if (this.parentComponent) {
                     this.parentComponent.markAsChanged(this);
                 }
             });
         }
     }
-    invokePropsChangedHooks(newProps) {
-        const oldProps = this.props;
-        this.props = newProps;
-        if (this.propsChangedCallbacks) {
-            if (this.propsChangedDestroyCallbacks) {
-                this.propsChangedDestroyCallbacks.forEach(fn => {
-                    fn();
-                });
-            }
-            const propsChangedDestroyCallbacks = [];
-            for (const fn of this.propsChangedCallbacks) {
-                const destroyFn = fn(newProps, oldProps);
-                if (typeof destroyFn === 'function') {
-                    propsChangedDestroyCallbacks.push(destroyFn);
-                }
-            }
-            this.propsChangedDestroyCallbacks = propsChangedDestroyCallbacks.length ? propsChangedDestroyCallbacks : null;
-        }
-    }
     invokeMountHooks() {
         const unmountedCallbacks = [];
         if (this.mountCallbacks) {
-            for (const fn of this.mountCallbacks) {
+            const len = this.mountCallbacks.length;
+            for (let i = 0; i < len; ++i) {
+                const fn = this.mountCallbacks[i];
                 const destroyFn = fn();
                 if (typeof destroyFn === 'function') {
                     unmountedCallbacks.push(destroyFn);
@@ -1213,7 +1614,9 @@ class Component {
                 });
             }
             const updatedDestroyCallbacks = [];
-            for (const fn of this.updatedCallbacks) {
+            const len = this.updatedCallbacks.length;
+            for (let i = 0; i < len; ++i) {
+                const fn = this.updatedCallbacks[i];
                 const destroyFn = fn();
                 if (typeof destroyFn === 'function') {
                     updatedDestroyCallbacks.push(destroyFn);
@@ -1254,18 +1657,42 @@ function createContext(providers, scope, parentInjector) {
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
-    const component = getCurrentInstance();
-    const injector = getInjector(component);
-    return injector.get(token, notFoundValue, flags);
-}
-function withAnnotation(annotation, component) {
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+    const component = getCurrentInstance();
+    const injector = getInjector(component);
+    return injector.get(token, notFoundValue, flags);
+}
+/**
+ * 给组件添加注解
+ * @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>
+ *   }
+ * })
+ * ```
+ */
+function withAnnotation(annotation, componentSetup) {
     return function (props) {
         const instance = getCurrentInstance();
         const parentInjector = injectMap.get(instance) || getInjector(instance.parentComponent);
-        const injector = new ReflectiveInjector(parentInjector, annotation.providers || [], annotation.scope);
+        const injector = new ReflectiveInjector(parentInjector, [{
+                provide: Injector,
+                useFactory() {
+                    return injector;
+                }
+            }, ...(annotation.providers || [])], annotation.scope);
         injectMap.set(instance, injector);
-        return component(props);
+        return componentSetup(props);
     };
 }
 
@@ -1302,7 +1729,6 @@ const ElementNamespaceMap = {
     svg: 'svg',
     math: 'mathml',
 };
-const componentViewCache = new WeakMap();
 const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
@@ -1326,7 +1752,7 @@ function createRenderer(component, nativeRenderer, namespace) {
             });
         }
         else {
-            updateView(nativeRenderer, component, false);
+            deepUpdateByComponentDirtyTree(nativeRenderer, component, false);
         }
     };
 }
@@ -1351,37 +1777,39 @@ function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
         child = child.sibling;
     }
 }
-function updateView(nativeRenderer, component, needMove) {
+function patchComponent(nativeRenderer, component, oldChildAtom, newAtom, context, needMove) {
+    const newTemplate = component.rerender();
+    newAtom.child = createChildChain(newTemplate, newAtom.namespace);
+    diff(nativeRenderer, component, newAtom.child, oldChildAtom, context, needMove);
+}
+function deepUpdateByComponentDirtyTree(nativeRenderer, component, needMove) {
     if (component.dirty) {
-        const { atom, host, isParent, rootHost } = componentViewCache.get(component);
-        applyChanges(nativeRenderer, component, atom, {
-            host,
-            isParent,
-            rootHost
-        }, needMove);
+        const canUpdate = component.canUpdate(component.props, component.props);
+        if (canUpdate) {
+            const { atom, host, isParent, rootHost } = component.viewMetadata;
+            const context = {
+                host,
+                isParent,
+                rootHost
+            };
+            const diffAtom = atom.child;
+            patchComponent(nativeRenderer, component, diffAtom, atom, context, needMove);
+            const next = atom.sibling;
+            if (next && next.jsxNode instanceof Component) {
+                const view = next.jsxNode.viewMetadata;
+                view.host = context.host;
+                view.isParent = context.isParent;
+            }
+        }
+        component.rendered();
     }
     else if (component.changed) {
         component.changedSubComponents.forEach(child => {
-            updateView(nativeRenderer, child, needMove);
+            deepUpdateByComponentDirtyTree(nativeRenderer, child, needMove);
         });
         component.rendered();
     }
 }
-function applyChanges(nativeRenderer, component, atom, context, needMove) {
-    const diffAtom = atom.child;
-    component.update(component.props, newTemplate => {
-        atom.child = createChildChain(newTemplate, atom.namespace);
-        diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
-        const next = atom.sibling;
-        if (next && next.jsxNode instanceof Component) {
-            const view = componentViewCache.get(next.jsxNode);
-            view.host = context.host;
-            view.isParent = context.isParent;
-        }
-    }, (skipSubComponentDiff) => {
-        reuseComponentView(nativeRenderer, atom, context, needMove, skipSubComponentDiff);
-    });
-}
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
     function changeOffset() {
@@ -1397,7 +1825,8 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
         dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
-    for (let i = 0; i < commits.length; i++) {
+    const len = commits.length;
+    for (let i = 0; i < len; i++) {
         const commit = commits[i];
         while (oldAtom) {
             if (oldAtom.index <= i) {
@@ -1407,7 +1836,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMo
             }
             break;
         }
-        commit(offset, needMove);
+        commit.callback(commit.params, offset, needMove);
     }
 }
 function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
@@ -1416,17 +1845,19 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
     while (oldAtom) {
         const newAtomType = newAtom.type;
         if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
-            let commit;
-            if (newAtomType === TextAtomType) {
-                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else if (newAtomType === ComponentAtomType) {
-                commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
-            }
-            else {
-                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-            }
-            commits.push(commit);
+            commits.push({
+                callback: newAtomType === TextAtomType ? updateText :
+                    newAtomType === ComponentAtomType ? updateComponent :
+                        updateElement,
+                params: {
+                    oldAtom,
+                    newAtom,
+                    nativeRenderer,
+                    context,
+                    effect,
+                    parentComponent
+                }
+            });
             const next = oldAtom.sibling;
             if (!prev) {
                 return next;
@@ -1437,81 +1868,84 @@ function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, paren
         prev = oldAtom;
         oldAtom = oldAtom.sibling;
     }
-    commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
+    commits.push({
+        callback: patchUpdate,
+        params: {
+            oldAtom: oldAtom,
+            newAtom,
+            nativeRenderer,
+            context,
+            effect,
+            parentComponent
+        }
+    });
     return startDiffAtom;
 }
-function createNewView(start, nativeRenderer, context, parentComponent, effect) {
-    return function () {
-        buildView(nativeRenderer, parentComponent, start, context);
-        effect();
-    };
+function patchUpdate(params) {
+    const { nativeRenderer, parentComponent, newAtom, context, effect } = params;
+    buildView(nativeRenderer, parentComponent, newAtom, context);
+    effect();
 }
-function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function (offset, needMove) {
-        const nativeNode = oldAtom.nativeNode;
-        newAtom.nativeNode = nativeNode;
-        if (needMove || newAtom.index - offset !== oldAtom.index) {
-            insertNode(nativeRenderer, newAtom, context);
-        }
-        context.host = nativeNode;
-        context.isParent = false;
-    };
+function updateText(params, offset, needMove) {
+    const { oldAtom, newAtom, nativeRenderer, context } = params;
+    const nativeNode = oldAtom.nativeNode;
+    newAtom.nativeNode = nativeNode;
+    if (needMove || newAtom.index - offset !== oldAtom.index) {
+        insertNode(nativeRenderer, newAtom, context);
+    }
+    context.host = nativeNode;
+    context.isParent = false;
 }
-function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent) {
-    return function (offset, needMove) {
-        newAtom.nativeNode = oldAtom.nativeNode;
-        if (needMove || newAtom.index - offset !== oldAtom.index) {
-            insertNode(nativeRenderer, newAtom, context);
-        }
-        context.host = newAtom.nativeNode;
-        context.isParent = false;
-        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
-            host: newAtom.nativeNode,
-            isParent: true,
-            rootHost: context.rootHost
-        });
-    };
+function updateElement(params, offset, needMove) {
+    const { nativeRenderer, newAtom, oldAtom, context, parentComponent } = params;
+    newAtom.nativeNode = oldAtom.nativeNode;
+    if (needMove || newAtom.index - offset !== oldAtom.index) {
+        insertNode(nativeRenderer, newAtom, context);
+    }
+    context.host = newAtom.nativeNode;
+    context.isParent = false;
+    updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
+        host: newAtom.nativeNode,
+        isParent: true,
+        rootHost: context.rootHost
+    });
 }
-function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
-    return function (offset, needMove) {
-        const component = reusedAtom.jsxNode;
-        const newProps = newAtom.jsxNode.props;
-        const portalHost = component.instance.$portalHost;
-        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
-        newAtom.jsxNode = component;
-        component.update(newProps, newTemplate => {
-            if (newTemplate) {
-                newAtom.child = createChildChain(newTemplate, newAtom.namespace);
-            }
-            if (newAtom.child) {
-                diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
-            }
-            else if (reusedAtom.child) {
-                let atom = reusedAtom.child;
-                while (atom) {
-                    cleanView(nativeRenderer, atom, true);
-                    atom = atom.sibling;
-                }
-            }
-        }, (skipSubComponentDiff) => {
-            newAtom.child = reusedAtom.child;
-            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index, skipSubComponentDiff);
-        });
-    };
+function updateComponent(params, offset, needMove) {
+    const { oldAtom, newAtom, nativeRenderer } = params;
+    let context = params.context;
+    const component = oldAtom.jsxNode;
+    const portalHost = component.instance.$portalHost;
+    context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+    component.viewMetadata = Object.assign({ atom: newAtom }, context);
+    const newProps = newAtom.jsxNode.props;
+    newAtom.jsxNode = component;
+    needMove = needMove || newAtom.index - offset !== oldAtom.index;
+    const canUpdate = component.canUpdate(component.props, newProps);
+    const propsIsChanged = hasChange(newProps, component.props);
+    if (propsIsChanged) {
+        component.updateProps(newProps);
+    }
+    if (canUpdate && (propsIsChanged || component.dirty)) {
+        patchComponent(nativeRenderer, component, oldAtom.child, newAtom, context, needMove);
+        const next = oldAtom.sibling;
+        if (next && next.jsxNode instanceof Component) {
+            const view = next.jsxNode.viewMetadata;
+            view.host = context.host;
+            view.isParent = context.isParent;
+        }
+    }
+    else {
+        newAtom.child = oldAtom.child;
+        reuseComponentView(nativeRenderer, newAtom.child, context, needMove, true);
+    }
+    component.rendered();
 }
 function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
         if (atom.jsxNode instanceof Component) {
-            if (skipSubComponentDiff || !moveView) {
-                let child = atom.child;
-                while (child) {
-                    updateContext(child);
-                    child = child.sibling;
-                }
-            }
-            else {
-                applyChanges(nativeRenderer, atom.jsxNode, atom, context, true);
+            reuseComponentView(nativeRenderer, atom.child, context, moveView, skipSubComponentDiff);
+            if (!skipSubComponentDiff) {
+                deepUpdateByComponentDirtyTree(nativeRenderer, atom.jsxNode, moveView);
             }
         }
         else {
@@ -1532,7 +1966,7 @@ function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponen
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component) {
-            updateView(nativeRenderer, child.jsxNode, false);
+            deepUpdateByComponentDirtyTree(nativeRenderer, child.jsxNode, false);
         }
         else {
             reuseElementChildrenView(nativeRenderer, child);
@@ -1579,7 +2013,7 @@ function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
         from.child = createChildChain(template, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        componentViewCache.set(component, Object.assign({ atom: from }, context));
+        component.viewMetadata = Object.assign({ atom: from }, context);
         let child = from.child;
         while (child) {
             buildView(nativeRenderer, component, child, context);
@@ -1604,14 +2038,14 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key)
 }
 function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     const type = typeof jsxNode;
-    if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
-        if (typeof jsxNode === 'string') {
+    if (jsxNode != null && type !== 'boolean') {
+        if (type === 'string') {
             return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
         }
-        if (Array.isArray(jsxNode)) {
-            return createChainByChildren(jsxNode, prevAtom, elementNamespace);
-        }
         if (type === 'object') {
+            if (Array.isArray(jsxNode)) {
+                return createChainByChildren(jsxNode, prevAtom, elementNamespace);
+            }
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
                 return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
@@ -1651,6 +2085,12 @@ 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 createElement(nativeRenderer, atom, parentComponent, context) {
     const { namespace, jsxNode } = atom;
     const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
@@ -1658,7 +2098,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, namespace);
+            atom.child = createElementChildren(jsxNode.type, props.children, namespace);
             continue;
         }
         if (key === 'class') {
@@ -1716,46 +2156,69 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         reuseElementChildrenView(nativeRenderer, newAtom);
         return;
     }
-    const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
     let updatedChildren = false;
-    let len = changes.remove.length;
-    for (let i = 0; i < len; i++) {
-        const [key, value] = changes.remove[i];
+    comparePropsWithCallbacks(oldVNode.props, newVNode.props, (key, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
             cleanElementChildren(oldAtom, nativeRenderer);
-            continue;
+            return;
         }
         if (key === 'class') {
             nativeRenderer.setClass(nativeNode, '', isSvg);
-            continue;
+            return;
         }
         if (key === 'style') {
-            for (const styleName in styleToObject(value)) {
+            for (const styleName in styleToObject(oldValue)) {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             }
-            continue;
+            return;
         }
         if (listenerReg.test(key)) {
-            if (typeof value === 'function') {
-                nativeRenderer.unListen(nativeNode, key, value, isSvg);
+            if (typeof oldValue === 'function') {
+                nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
             }
-            continue;
+            return;
         }
         if (key === refKey) {
-            unBindRefs = value;
-            continue;
+            unBindRefs = oldValue;
+            return;
         }
         nativeRenderer.removeProperty(nativeNode, key, isSvg);
-    }
-    len = changes.replace.length;
-    for (let i = 0; i < len; i++) {
-        const [key, newValue, oldValue] = changes.replace[i];
+    }, (key, value) => {
+        if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            return;
+        }
+        if (key === 'class') {
+            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
+            return;
+        }
+        if (key === 'style') {
+            const styleObj = styleToObject(value);
+            for (const styleName in styleObj) {
+                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
+            }
+            return;
+        }
+        if (listenerReg.test(key)) {
+            if (typeof value === 'function') {
+                nativeRenderer.listen(nativeNode, key, value, isSvg);
+            }
+            return;
+        }
+        if (key === refKey) {
+            bindRefs = value;
+            return;
+        }
+        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
+    }, (key, newValue, oldValue) => {
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createChildChain(newValue, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
@@ -1765,7 +2228,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             else {
                 diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
             }
-            continue;
+            return;
         }
         if (key === 'class') {
             const oldClassName = classToString(oldValue);
@@ -1773,62 +2236,30 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
             if (oldClassName !== newClassName) {
                 nativeRenderer.setClass(nativeNode, newClassName, isSvg);
             }
-            continue;
+            return;
         }
         if (key === 'style') {
-            const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
-            for (const [styleName] of styleChanges.remove) {
+            comparePropsWithCallbacks(styleToObject(oldValue), styleToObject(newValue), styleName => {
                 nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
-            }
-            for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
+            }, (styleName, styleValue) => {
                 nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
-            }
-            continue;
+            }, (styleName, styleValue) => {
+                nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
+            });
+            return;
         }
         if (listenerReg.test(key)) {
             nativeRenderer.unListen(nativeNode, key, oldValue, isSvg);
             nativeRenderer.listen(nativeNode, key, newValue, isSvg);
-            continue;
+            return;
         }
         if (key === refKey) {
             unBindRefs = oldValue;
             bindRefs = newValue;
-            continue;
+            return;
         }
         nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
-    }
-    len = changes.add.length;
-    for (let i = 0; i < len; i++) {
-        const [key, value] = changes.add[i];
-        if (key === 'children') {
-            updatedChildren = true;
-            newAtom.child = createChildChain(value, isSvg);
-            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
-            continue;
-        }
-        if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
-            continue;
-        }
-        if (key === 'style') {
-            const styleObj = styleToObject(value);
-            for (const styleName in styleObj) {
-                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
-            }
-            continue;
-        }
-        if (listenerReg.test(key)) {
-            if (typeof value === 'function') {
-                nativeRenderer.listen(nativeNode, key, value, isSvg);
-            }
-            continue;
-        }
-        if (key === refKey) {
-            bindRefs = value;
-            continue;
-        }
-        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
-    }
+    });
     if (!updatedChildren) {
         newAtom.child = oldAtom.child;
         reuseElementChildrenView(nativeRenderer, newAtom);
@@ -1871,133 +2302,6 @@ 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 && !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 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);
@@ -2006,7 +2310,7 @@ function viewfly(config) {
     let appHost = null;
     const rootProviders = [];
     const rootComponent = new RootComponent(() => {
-        const rootContext = createContext(rootProviders, void 0, context);
+        const rootContext = createContext(rootProviders, null, context);
         return () => {
             return jsx(rootContext, {
                 children: destroyed ? null : root
@@ -2085,4 +2389,122 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createContext, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+function computed(callback, isContinue) {
+    let isStop = false;
+    const dep = new Dep(() => {
+        if (isStop) {
+            return;
+        }
+        isStop = true;
+        dep.destroy();
+        pushDepContext(dep);
+        const value = callback();
+        popDepContext();
+        internalWrite(() => {
+            proxy.value = value;
+        });
+        canListen(value);
+        isStop = false;
+    });
+    pushDepContext(dep);
+    const value = callback();
+    popDepContext();
+    const proxy = new Proxy({
+        value
+    }, readonlyProxyHandler);
+    function canListen(value) {
+        if (isContinue) {
+            const b = isContinue(value);
+            if (b === false) {
+                dep.destroy();
+                return false;
+            }
+        }
+        return true;
+    }
+    if (!canListen(value)) {
+        return proxy;
+    }
+    registryComponentDestroyCallback(() => {
+        dep.destroy();
+    });
+    return proxy;
+}
+
+const defaultShallowObjectReactiveHandler = new ObjectReactiveHandler({
+    readonly: false,
+    shallow: true
+});
+const defaultShallowArrayReactiveHandler = new ArrayReactiveHandler({
+    readonly: false,
+    shallow: true
+});
+const defaultShallowMapReactiveHandler = new MapReactiveHandler({
+    readonly: false,
+    shallow: true
+});
+const defaultShallowSetReactiveHandler = new SetReactiveHandler({
+    readonly: false,
+    shallow: true
+});
+function shallowReactive(raw) {
+    if (isReactive(raw)) {
+        return raw;
+    }
+    let proxy = rawToProxyCache.get(raw);
+    if (proxy) {
+        return proxy;
+    }
+    const type = getStringType(raw);
+    switch (type) {
+        case '[object Object]':
+            proxy = new Proxy(raw, defaultShallowObjectReactiveHandler);
+            break;
+        case '[object Array]':
+            proxy = new Proxy(raw, defaultShallowArrayReactiveHandler);
+            break;
+        case '[object Set]':
+        case '[object WeakSet]':
+            proxy = new Proxy(raw, defaultShallowSetReactiveHandler);
+            break;
+        case '[object Map]':
+        case '[object WeakMap]':
+            proxy = new Proxy(raw, defaultShallowMapReactiveHandler);
+            break;
+        default:
+            return raw;
+    }
+    rawToProxyCache.set(raw, proxy);
+    proxyToRawCache.set(proxy, raw);
+    return proxy;
+}
+
+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;
+}
+
+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 };