@viewfly/core 0.0.1-alpha.9 → 0.0.2

package/bundles/index.esm.js

@@ -43,175 +43,19 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
-const jsxErrorFn = makeError('JSX');
-const Fragment = function Fragment() {
-    throw jsxErrorFn('Fragment does not support calling.');
-};
-function jsx(setup, config, key) {
-    if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
-    }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
-    });
-}
-function jsxs(setup, config, key) {
-    if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
-    }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
-    });
-}
-class JSXText {
-    constructor(text) {
-        this.text = text;
-        this.$$typeOf = '#text';
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-}
-class Props {
-    constructor(props) {
-        this.attrs = new Map();
-        this.styles = new Map();
-        this.classes = '';
-        this.listeners = {};
-        this.children = [];
-        if (!props) {
-            return;
-        }
-        Object.keys(props).forEach(key => {
-            if (key === 'children') {
-                if (props.children !== null && typeof props.children !== 'undefined') {
-                    if (Array.isArray(props.children)) {
-                        this.children = props.children;
-                    }
-                    else {
-                        this.children = [props.children];
-                    }
-                }
-                return;
-            }
-            if (key === 'class') {
-                this.classes = Props.classToString(props[key]);
-                return;
-            }
-            if (key === 'style') {
-                const style = props.style || '';
-                if (typeof style === 'string') {
-                    style.split(';').map(s => s.split(':')).forEach(v => {
-                        if (!v[0] || !v[1]) {
-                            return;
-                        }
-                        this.styles.set(v[0].trim(), v[1].trim());
-                    });
-                }
-                else if (typeof style === 'object') {
-                    Object.keys(style).forEach(key => {
-                        this.styles.set(key, style[key]);
-                    });
-                }
-                return;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                const listener = props[key];
-                if (typeof listener === 'function') {
-                    this.listeners[key.replace(/^on/, '').toLowerCase()] = listener;
-                }
-                else {
-                    this.attrs.set(key, listener);
-                }
-                return;
-            }
-            this.attrs.set(key, props[key]);
-        });
-    }
-    static classToString(config) {
-        if (!config) {
-            return '';
-        }
-        if (typeof config === 'string') {
-            return config;
-        }
-        else if (Array.isArray(config)) {
-            return config.map(i => {
-                return Props.classToString(i);
-            }).join(' ');
-        }
-        else 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(' ');
-        }
-    }
-    static classToArray(config) {
-        const classes = [];
-        if (!config) {
-            return classes;
-        }
-        if (typeof config === 'string') {
-            const items = config.match(/\S+/g);
-            return items || classes;
-        }
-        else if (Array.isArray(config)) {
-            for (const i of config) {
-                classes.push(...Props.classToArray(i));
-            }
-        }
-        else if (typeof config === 'object') {
-            if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-                classes.push(config.toString());
-                return classes;
-            }
-            for (const key in config) {
-                if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                    classes.push(key);
-                }
-            }
-        }
-        return classes;
-    }
-}
-class JSXElement {
-    constructor(name, config, key) {
-        this.name = name;
-        this.config = config;
-        this.key = key;
-        this.$$typeOf = this.name;
-        this.props = new Props(config);
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-}
-
 const componentSetupStack = [];
-const componentRendingStack = [];
-const derivedStack = [];
+const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
         // 防止因外部捕获异常引引起的缓存未清理的问题
-        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
-function getRendingContext() {
-    return componentRendingStack[componentRendingStack.length - 1];
-}
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
+function getSignalDepsContext() {
+    return signalDepsStack[signalDepsStack.length - 1];
 }
 class JSXComponent {
     constructor(createInstance) {
@@ -228,12 +72,12 @@ class Component extends ReflectiveInjector {
     get changed() {
         return this._changed;
     }
-    constructor(context, setup, config, key) {
+    constructor(context, type, props, key) {
         super(context, []);
-        this.setup = setup;
-        this.config = config;
+        this.type = type;
+        this.props = props;
         this.key = key;
-        this.$$typeOf = this.setup;
+        this.$$typeOf = this.type;
         this.destroyCallbacks = [];
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
@@ -243,7 +87,6 @@ class Component extends ReflectiveInjector {
         this.updatedDestroyCallbacks = [];
         this.propsChangedDestroyCallbacks = [];
         this.isFirstRending = true;
-        this.props = new Props(config);
         this.parentComponent = this.parentInjector;
     }
     is(target) {
@@ -251,16 +94,14 @@ class Component extends ReflectiveInjector {
     }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
-        providers.forEach(p => {
-            this.normalizedProviders.push(normalizeProvider(p));
-        });
+        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
     init() {
         const self = this;
-        const props = new Proxy(this.config || {}, {
+        const props = new Proxy(this.props, {
             get(_, key) {
-                if (self.config) {
-                    return self.config[key];
+                if (self.props) {
+                    return self.props[key];
                 }
             },
             set() {
@@ -268,30 +109,30 @@ class Component extends ReflectiveInjector {
                 if (isSetup) {
                     componentSetupStack.pop();
                 }
-                if (isRending) {
-                    componentRendingStack.pop();
-                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
         componentSetupStack.push(this);
         let isSetup = true;
-        const render = this.setup(props);
+        const render = this.type(props);
         isSetup = false;
         componentSetupStack.pop();
-        componentRendingStack.push(this);
-        let isRending = true;
+        signalDepsStack.push([]);
         const template = render();
-        isRending = false;
-        componentRendingStack.pop();
+        const deps = signalDepsStack.pop();
+        this.unWatch = useEffect(deps, () => {
+            this.markAsDirtied();
+        });
         return {
             template,
             render: () => {
-                componentRendingStack.push(this);
-                isRending = true;
+                this.unWatch();
+                signalDepsStack.push([]);
                 const template = render();
-                isRending = false;
-                componentRendingStack.pop();
+                const deps = signalDepsStack.pop();
+                this.unWatch = useEffect(deps, () => {
+                    this.markAsDirtied();
+                });
                 return template;
             }
         };
@@ -301,6 +142,9 @@ class Component extends ReflectiveInjector {
         this.markAsChanged();
     }
     markAsChanged() {
+        if (this._changed) {
+            return;
+        }
         this._changed = true;
         this.parentComponent.markAsChanged();
     }
@@ -317,8 +161,8 @@ class Component extends ReflectiveInjector {
         }
     }
     invokePropsChangedHooks(newProps) {
-        const oldProps = this.config;
-        this.config = newProps;
+        const oldProps = this.props;
+        this.props = newProps;
         this.propsChangedDestroyCallbacks.forEach(fn => {
             fn();
         });
@@ -331,6 +175,7 @@ class Component extends ReflectiveInjector {
         }
     }
     destroy() {
+        this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
             fn();
         });
@@ -379,7 +224,7 @@ class Component extends ReflectiveInjector {
  * }
  * ```
  */
-function onMount(callback) {
+function onMounted(callback) {
     const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
@@ -522,18 +367,10 @@ const depsKey = Symbol('deps');
  * }
  */
 function useSignal(state) {
-    const usedComponents = new Set();
     function signal() {
-        const component = getRendingContext();
-        const derivedContext = getDerivedContext();
-        if (derivedContext) {
-            derivedContext.push(signal);
-        }
-        if (component && !usedComponents.has(component)) {
-            usedComponents.add(component);
-            component.destroyCallbacks.push(() => {
-                usedComponents.delete(component);
-            });
+        const depsContext = getSignalDepsContext();
+        if (depsContext) {
+            depsContext.push(signal);
         }
         return state;
     }
@@ -542,9 +379,6 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const component of usedComponents) {
-            component.markAsDirtied();
-        }
         for (const fn of signal[depsKey]) {
             fn();
         }
@@ -561,9 +395,9 @@ function useSignal(state) {
  */
 function useDerived(callback, isContinue) {
     const deps = [];
-    derivedStack.push(deps);
+    signalDepsStack.push(deps);
     const data = callback();
-    derivedStack.pop();
+    signalDepsStack.pop();
     const signal = useSignal(data);
     if (deps.length) {
         const unListen = useEffect(deps, () => {
@@ -634,12 +468,54 @@ function inject(token, notFoundValue, flags) {
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
+const Fragment = function Fragment(props) {
+    return () => {
+        return props.children;
+    };
+};
+function jsx(setup, config, key) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config, key);
+    }
+    return new JSXComponent(function (context) {
+        return new Component(context, setup, config, key);
+    });
+}
+function jsxs(setup, config, key) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config, key);
+    }
+    return new JSXComponent(function (context) {
+        return new Component(context, setup, config, key);
+    });
+}
+class JSXText {
+    constructor(text) {
+        this.text = text;
+        this.$$typeOf = '#text';
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
+}
+class JSXElement {
+    constructor(type, props, key) {
+        this.type = type;
+        this.props = props;
+        this.key = key;
+        this.$$typeOf = this.type;
+    }
+    is(target) {
+        return target.$$typeOf === this.$$typeOf;
+    }
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
     constructor(factory, parentInjector = new NullInjector()) {
-        super(parentInjector, factory, null);
+        super(parentInjector, factory, {});
         this.changeEmitter = new Subject();
     }
     markAsChanged() {
@@ -649,77 +525,67 @@ class RootComponent extends Component {
 }
 
 const refKey = 'ref';
-function getObjectChanges(target, source) {
+function getObjectChanges(newProps, oldProps) {
     const changes = {
         remove: [],
-        add: []
+        add: [],
+        replace: []
     };
-    Object.keys(target).forEach(key => {
-        const leftValue = target[key];
-        if (!Reflect.has(source, key)) {
-            changes.add.push([key, leftValue]);
-            return;
-        }
-        const rightValue = source[key];
-        if (leftValue === rightValue) {
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
             return;
         }
         changes.add.push([key, leftValue]);
-        changes.remove.push([key, rightValue]);
     });
-    Object.keys(source).forEach(key => {
-        if (!Reflect.has(target, key)) {
-            changes.remove.push([key, source[key]]);
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
         }
     });
     return changes;
 }
-function getMapChanges(target, source) {
-    const changes = {
-        remove: [],
-        set: []
-    };
-    target.forEach((value, key) => {
-        const rightValue = source.get(key);
-        if (value === rightValue) {
-            return;
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
         }
-        changes.set.push([key, value]);
-    });
-    source.forEach((value, key) => {
-        if (key === refKey && value instanceof Ref) {
-            const newValue = target.get(key);
-            if (value !== newValue) {
-                changes.remove.push([key, value]);
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
             }
-            return;
         }
-        if (!target.has(key)) {
-            changes.remove.push([key, value]);
+        return classes.join(' ');
+    }
+}
+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 changes;
-}
-const compareText = '0'.repeat(6);
-function getNodeChanges(newVNode, oldVNode) {
-    const newProps = newVNode.props;
-    const oldProps = oldVNode.props;
-    const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
-    const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
-    const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
-    return {
-        styleChanges,
-        attrChanges,
-        listenerChanges,
-        isChanged: [
-            attrChanges.set.length,
-            attrChanges.remove.length,
-            styleChanges.set.length,
-            styleChanges.remove.length,
-            listenerChanges.add.length,
-            listenerChanges.remove.length
-        ].join('') !== compareText
-    };
+    return obj;
 }
 
 class RootComponentRef {
@@ -757,10 +623,12 @@ let Renderer = class Renderer {
     reconcile(component, context) {
         if (component.dirty) {
             this.applyChanges(component, context);
+            component.rendered();
         }
         else if (component.changed) {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
+            component.rendered();
         }
         else {
             const prevSibling = this.getPrevSibling(component);
@@ -823,7 +691,6 @@ let Renderer = class Renderer {
             atom.child = null;
         }
         this.diff(atom.child, diffAtom, context, 0, 0);
-        component.rendered();
     }
     diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
@@ -839,9 +706,9 @@ let Renderer = class Renderer {
         const changeCommits = {
             reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
                 commits.push(() => {
-                    const { isChanged } = getNodeChanges(start.jsxNode, reusedAtom.jsxNode);
-                    if (isChanged) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
+                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
+                    if (add.length || remove.length || replace.length) {
+                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
                     }
                     const newProps = start.jsxNode.props;
                     start.jsxNode = reusedAtom.jsxNode;
@@ -916,7 +783,7 @@ let Renderer = class Renderer {
                 });
             }
         };
-        while (newAtom && !newAtom.nativeNode) {
+        while (newAtom) {
             this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
             newAtom = newAtom.sibling;
             expectIndex++;
@@ -974,7 +841,7 @@ let Renderer = class Renderer {
                 isClean = true;
             }
             if (atom.jsxNode instanceof JSXElement) {
-                const ref = atom.jsxNode.props.attrs.get(refKey);
+                const ref = atom.jsxNode.props[refKey];
                 this.applyRefs(ref, atom.nativeNode, false);
             }
         }
@@ -1046,24 +913,23 @@ let Renderer = class Renderer {
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        if (component.setup === Fragment) {
-            return this.createChainByChildren(component, component.props.children, parent);
-        }
+        // if (component.setup === Fragment) {
+        //   const children = component.props.children
+        //   return this.createChainByChildren(
+        //     component,
+        //     Array.isArray(children) ? children : [children],
+        //     parent
+        //   )
+        // }
         return new Atom(component, parent);
     }
-    createChainByTemplate(context, template, parent) {
-        if (template instanceof JSXElement) {
-            return this.createChainByJSXElement(context, template, parent);
-        }
-        if (template instanceof JSXComponent) {
-            return this.createChainByComponentFactory(context, template, parent);
-        }
-        return parent;
-    }
     createChainByJSXElement(context, element, parent) {
         const atom = new Atom(element, parent);
-        const children = this.createChainByChildren(context, element.props.children, atom);
-        this.link(atom, children);
+        if (Reflect.has(element.props, 'children')) {
+            const jsxChildren = element.props.children;
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            this.link(atom, children);
+        }
         return atom;
     }
     createChainByJSXText(node, parent) {
@@ -1078,12 +944,7 @@ let Renderer = class Renderer {
             }
             if (item instanceof JSXComponent) {
                 const childAtom = this.createChainByComponentFactory(context, item, parent);
-                if (Array.isArray(childAtom)) {
-                    atoms.push(...childAtom);
-                }
-                else {
-                    atoms.push(childAtom);
-                }
+                atoms.push(childAtom);
                 continue;
             }
             if (typeof item === 'string' && item.length) {
@@ -1101,10 +962,8 @@ let Renderer = class Renderer {
         return atoms;
     }
     linkTemplate(template, component, parent) {
-        if (template) {
-            const child = this.createChainByTemplate(component, template, parent);
-            this.link(parent, Array.isArray(child) ? child : [child]);
-        }
+        const children = Array.isArray(template) ? template : [template];
+        this.link(parent, this.createChainByChildren(component, children, parent));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {
@@ -1114,25 +973,38 @@ let Renderer = class Renderer {
         parent.child = children[0] || null;
     }
     createElement(vNode) {
-        const nativeNode = this.nativeRenderer.createElement(vNode.name);
+        const nativeNode = this.nativeRenderer.createElement(vNode.type);
         const props = vNode.props;
         let bindingRefs;
-        props.attrs.forEach((value, key) => {
+        const keys = Object.keys(props);
+        for (const key of keys) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
+                continue;
+            }
+            if (key === 'style') {
+                const style = styleToObject(props.style);
+                Object.keys(style).forEach(key => {
+                    this.nativeRenderer.setStyle(nativeNode, key, style[key]);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                const listener = props[key];
+                if (typeof listener === 'function') {
+                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
+                }
+                continue;
+            }
             if (key === refKey) {
-                bindingRefs = value;
-                return;
+                bindingRefs = props[key];
+                continue;
             }
-            this.nativeRenderer.setProperty(nativeNode, key, value);
-        });
-        props.styles.forEach((value, key) => {
-            this.nativeRenderer.setStyle(nativeNode, key, value);
-        });
-        if (props.classes) {
-            this.nativeRenderer.setClass(nativeNode, props.classes);
+            this.nativeRenderer.setProperty(nativeNode, key, props[key]);
         }
-        Object.keys(props.listeners).forEach(type => {
-            this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
-        });
         return {
             nativeNode,
             applyRefs: () => {
@@ -1144,46 +1016,109 @@ let Renderer = class Renderer {
         return this.nativeRenderer.createTextNode(child.text);
     }
     updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const newProps = newVNode.props;
-        const oldProps = oldVNode.props;
-        const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
-        const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
-        const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
-        styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
-        styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
+        const changes = getObjectChanges(newVNode.props, oldVNode.props);
         let unBindRefs;
-        attrChanges.remove.forEach(([key, value]) => {
+        let bindRefs;
+        for (const [key, value] of changes.remove) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, '');
+                continue;
+            }
+            if (key === 'style') {
+                Object.keys(styleToObject(value)).forEach(styleName => {
+                    this.nativeRenderer.removeStyle(nativeNode, styleName);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                if (typeof value === 'function') {
+                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                }
+                continue;
+            }
             if (key === refKey) {
                 unBindRefs = value;
-                return;
+                continue;
             }
             this.nativeRenderer.removeProperty(nativeNode, key);
-        });
-        let bindRefs;
-        attrChanges.set.forEach(([key, value]) => {
+        }
+        for (const [key, newValue, oldValue] of changes.replace) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                const oldClassName = classToString(oldValue);
+                const newClassName = classToString(newValue);
+                if (oldClassName !== newClassName) {
+                    this.nativeRenderer.setClass(nativeNode, newClassName);
+                }
+                continue;
+            }
+            if (key === 'style') {
+                const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
+                for (const [styleName] of styleChanges.remove) {
+                    this.nativeRenderer.removeStyle(nativeNode, styleName);
+                }
+                for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleValue);
+                }
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                const listenType = key.replace(/^on/, '').toLowerCase();
+                if (typeof oldValue === 'function') {
+                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
+                }
+                if (typeof newValue === 'function') {
+                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
+                }
+                continue;
+            }
+            if (key === refKey) {
+                unBindRefs = oldValue;
+                bindRefs = newValue;
+                continue;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, newValue);
+        }
+        for (const [key, value] of changes.add) {
+            if (key === 'children') {
+                continue;
+            }
+            if (key === 'class') {
+                this.nativeRenderer.setClass(nativeNode, classToString(value));
+                continue;
+            }
+            if (key === 'style') {
+                const styleObj = styleToObject(value);
+                Object.keys(styleObj).forEach(styleName => {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
+                });
+                continue;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                if (typeof value === 'function') {
+                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
+                }
+                continue;
+            }
             if (key === refKey) {
                 bindRefs = value;
-                return;
+                continue;
             }
             this.nativeRenderer.setProperty(nativeNode, key, value);
-        });
-        if (newProps.classes !== oldProps.classes) {
-            this.nativeRenderer.setClass(nativeNode, newProps.classes);
         }
-        listenerChanges.remove.forEach(i => {
-            this.nativeRenderer.unListen(nativeNode, i[0], i[1]);
-        });
-        listenerChanges.add.forEach(i => {
-            this.nativeRenderer.listen(nativeNode, i[0], i[1]);
-        });
         return () => {
             this.applyRefs(unBindRefs, nativeNode, false);
             this.applyRefs(bindRefs, nativeNode, true);
         };
     }
     applyRefs(refs, nativeNode, binding) {
-        refs = Array.isArray(refs) ? refs : [refs];
-        for (const item of refs) {
+        const refList = Array.isArray(refs) ? refs : [refs];
+        for (const item of refList) {
             if (item instanceof Ref) {
                 binding ? item.bind(nativeNode) : item.unBind(nativeNode);
             }
@@ -1209,7 +1144,6 @@ class Viewfly extends ReflectiveInjector {
                 provide: RootComponentRef,
                 useFactory: () => {
                     return {
-                        host: config.host,
                         component: this.rootComponent
                     };
                 }
@@ -1228,8 +1162,11 @@ class Viewfly extends ReflectiveInjector {
     }
     /**
      * 启动 Viewfly
+     * @param host 应用根节点
      */
-    run() {
+    mount(host) {
+        const rootComponentRef = this.get(RootComponentRef);
+        rootComponentRef.host = host;
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1258,4 +1195,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMount, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };