@viewfly/core 0.2.2 → 0.2.4

package/bundles/foundation/_utils.d.ts

@@ -25,6 +25,7 @@ export interface Atom {
     nativeNode: NativeNode | null;
     child: Atom | null;
     sibling: Atom | null;
+    isSvg: boolean;
 }
 export interface ComponentView {
     atom: Atom;

package/bundles/foundation/injection-tokens.d.ts

@@ -1,17 +1,17 @@
 export type NativeNode = Record<string, any>;
 export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = NativeNode> {
-    abstract createElement(name: string): ElementNode;
-    abstract createTextNode(textContent: string): TextNode;
-    abstract setProperty(node: ElementNode, key: string, value: any): void;
-    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode): void;
-    abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode): void;
-    abstract removeProperty(node: ElementNode, key: string): void;
-    abstract setStyle(target: ElementNode, key: string, value: any): void;
-    abstract removeStyle(target: ElementNode, key: string): void;
-    abstract setClass(target: ElementNode, value: string): void;
-    abstract listen<T = any>(node: ElementNode, type: string, callback: (ev: T) => any): void;
-    abstract unListen(node: ElementNode, type: string, callback: (ev: any) => any): void;
-    abstract remove(node: ElementNode | TextNode): void;
-    abstract syncTextContent(target: TextNode, content: string): void;
-    abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode): void;
+    abstract createElement(name: string, isSvg: boolean): ElementNode;
+    abstract createTextNode(textContent: string, isSvg: boolean): TextNode;
+    abstract setProperty(node: ElementNode, key: string, value: any, isSvg: boolean): void;
+    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
+    abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, isSvg: boolean): void;
+    abstract removeProperty(node: ElementNode, key: string, isSvg: boolean): void;
+    abstract setStyle(target: ElementNode, key: string, value: any, isSvg: boolean): void;
+    abstract removeStyle(target: ElementNode, key: string, isSvg: boolean): void;
+    abstract setClass(target: ElementNode, value: string, isSvg: boolean): void;
+    abstract listen<T = any>(node: ElementNode, type: string, callback: (ev: T) => any, isSvg: boolean): void;
+    abstract unListen(node: ElementNode, type: string, callback: (ev: any) => any, isSvg: boolean): void;
+    abstract remove(node: ElementNode | TextNode, isSvg: boolean): void;
+    abstract syncTextContent(target: TextNode, content: string, isSvg: boolean): void;
+    abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, isSvg: boolean): void;
 }

package/bundles/index.esm.js

@@ -1212,14 +1212,15 @@ function createRenderer(component, nativeRenderer, version) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
-            nativeRenderer.setProperty(host, 'viewfly-version', version);
+            nativeRenderer.setProperty(host, 'viewfly-version', version, false);
             isInit = false;
             const atom = {
                 jsxNode: component,
                 parent: null,
                 sibling: null,
                 child: null,
-                nativeNode: null
+                nativeNode: null,
+                isSvg: false
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1241,19 +1242,19 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         let nativeNode;
         let applyRefs = null;
         if (atom.jsxNode instanceof JSXElement) {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode);
+            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode, atom.isSvg);
             nativeNode = n;
             applyRefs = a;
         }
         else {
-            nativeNode = createTextNode(nativeRenderer, atom.jsxNode);
+            nativeNode = createTextNode(nativeRenderer, atom.jsxNode, atom.isSvg);
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode);
+            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
         }
         else {
-            nativeRenderer.insertAfter(nativeNode, context.host);
+            nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
         }
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
@@ -1367,15 +1368,15 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                 const host = context.host;
                 if (expectIndex - offset !== oldIndex) {
                     if (context.isParent) {
-                        nativeRenderer.prependChild(host, newAtom.nativeNode);
+                        nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
                     }
                     else {
-                        nativeRenderer.insertAfter(newAtom.nativeNode, host);
+                        nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
                     }
                 }
                 context.host = newAtom.nativeNode;
                 context.isParent = false;
-                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
+                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
                 if (newAtom.child) {
                     diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                         host: newAtom.nativeNode,
@@ -1396,7 +1397,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
             commits.push(() => {
                 const nativeNode = oldAtom.nativeNode;
                 if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
+                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
                 }
                 newAtom.nativeNode = nativeNode;
                 context.host = nativeNode;
@@ -1496,10 +1497,10 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
                 }
                 else {
-                    nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
                 }
             }
             context.isParent = false;
@@ -1513,7 +1514,7 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 function cleanView(nativeRenderer, atom, isClean) {
     if (atom.nativeNode) {
         if (!isClean) {
-            nativeRenderer.remove(atom.nativeNode);
+            nativeRenderer.remove(atom.nativeNode, atom.isSvg);
             isClean = true;
         }
         if (atom.jsxNode instanceof JSXElement) {
@@ -1543,67 +1544,71 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByComponentFactory(jsxComponent, parent) {
+function createChainByComponentFactory(jsxComponent, parent, isSvg) {
     return {
         jsxNode: jsxComponent,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
 }
-function createChainByJSXElement(component, element, parent) {
+function createChainByJSXElement(component, element, parent, isSvg) {
+    isSvg = isSvg || element.type === 'svg';
     const atom = {
         jsxNode: element,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
     if (Reflect.has(element.props, 'children')) {
         const jsxChildren = element.props.children;
-        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, [], isSvg);
         link(atom, children);
     }
     return atom;
 }
-function createChainByJSXText(node, parent) {
+function createChainByJSXText(node, parent, isSvg) {
     return {
         jsxNode: node,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
 }
-function createChainByChildren(component, children, parent, atoms) {
+function createChainByChildren(component, children, parent, atoms, isSvg) {
     for (const item of children) {
-        if (item !== null && typeof item !== 'undefined') {
+        if (item !== null && typeof item !== 'undefined' && typeof item !== 'boolean') {
             if (item instanceof JSXElement) {
-                atoms.push(createChainByJSXElement(component, item, parent));
+                atoms.push(createChainByJSXElement(component, item, parent, isSvg));
                 continue;
             }
             if (item instanceof JSXComponent) {
-                const childAtom = createChainByComponentFactory(item, parent);
+                const childAtom = createChainByComponentFactory(item, parent, isSvg);
                 atoms.push(childAtom);
                 continue;
             }
             if (typeof item === 'string' && item.length) {
-                atoms.push(createChainByJSXText(new JSXText(item), parent));
+                atoms.push(createChainByJSXText(new JSXText(item), parent, isSvg));
                 continue;
             }
             if (Array.isArray(item)) {
-                createChainByChildren(component, item, parent, atoms);
+                createChainByChildren(component, item, parent, atoms, isSvg);
                 continue;
             }
-            atoms.push(createChainByJSXText(new JSXText(String(item)), parent));
+            atoms.push(createChainByJSXText(new JSXText(String(item)), parent, isSvg));
         }
     }
     return atoms;
 }
 function linkTemplate(template, component, parent) {
     const children = Array.isArray(template) ? template : [template];
-    const newChildren = createChainByChildren(component, children, parent, []);
+    const newChildren = createChainByChildren(component, children, parent, [], parent.isSvg);
     link(parent, newChildren);
 }
 function link(parent, children) {
@@ -1613,8 +1618,8 @@ function link(parent, children) {
     }
     parent.child = children[0] || null;
 }
-function createElement(nativeRenderer, vNode) {
-    const nativeNode = nativeRenderer.createElement(vNode.type);
+function createElement(nativeRenderer, vNode, isSvg) {
+    const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
     const props = vNode.props;
     let bindingRefs;
     const keys = Object.keys(props);
@@ -1625,21 +1630,21 @@ function createElement(nativeRenderer, vNode) {
         if (key === 'class') {
             const className = classToString(props[key]);
             if (className) {
-                nativeRenderer.setClass(nativeNode, className);
+                nativeRenderer.setClass(nativeNode, className, isSvg);
             }
             continue;
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
             Object.keys(style).forEach(key => {
-                nativeRenderer.setStyle(nativeNode, key, style[key]);
+                nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
             });
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, vNode, key, nativeNode, listener);
+                bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
             }
             continue;
         }
@@ -1647,7 +1652,7 @@ function createElement(nativeRenderer, vNode) {
             bindingRefs = props[key];
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, props[key]);
+        nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
     }
     return {
         nativeNode,
@@ -1656,24 +1661,25 @@ function createElement(nativeRenderer, vNode) {
         }
     };
 }
-function createTextNode(nativeRenderer, child) {
-    return nativeRenderer.createTextNode(child.text);
+function createTextNode(nativeRenderer, child, isSvg) {
+    return nativeRenderer.createTextNode(child.text, isSvg);
 }
-function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode) {
+function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
+    newVNode.on = oldVNode.on;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
             continue;
         }
         if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, '');
+            nativeRenderer.setClass(nativeNode, '', isSvg);
             continue;
         }
         if (key === 'style') {
             Object.keys(styleToObject(value)).forEach(styleName => {
-                nativeRenderer.removeStyle(nativeNode, styleName);
+                nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             });
             continue;
         }
@@ -1681,7 +1687,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             if (typeof value === 'function') {
                 const type = key.replace(/^on/, '').toLowerCase();
                 const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
                 Reflect.deleteProperty(oldOn, type);
             }
             continue;
@@ -1690,7 +1696,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             unBindRefs = value;
             continue;
         }
-        nativeRenderer.removeProperty(nativeNode, key);
+        nativeRenderer.removeProperty(nativeNode, key, isSvg);
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
@@ -1700,23 +1706,22 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             const oldClassName = classToString(oldValue);
             const newClassName = classToString(newValue);
             if (oldClassName !== newClassName) {
-                nativeRenderer.setClass(nativeNode, newClassName);
+                nativeRenderer.setClass(nativeNode, newClassName, isSvg);
             }
             continue;
         }
         if (key === 'style') {
             const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
             for (const [styleName] of styleChanges.remove) {
-                nativeRenderer.removeStyle(nativeNode, styleName);
+                nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             }
             for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
-                nativeRenderer.setStyle(nativeNode, styleName, styleValue);
+                nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
             }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             const listenType = key.replace(/^on/, '').toLowerCase();
-            newVNode.on = oldVNode.on;
             newVNode.on[listenType].listenFn = newValue;
             continue;
         }
@@ -1725,26 +1730,26 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             bindRefs = newValue;
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, newValue);
+        nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
             continue;
         }
         if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, classToString(value));
+            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
             continue;
         }
         if (key === 'style') {
             const styleObj = styleToObject(value);
             Object.keys(styleObj).forEach(styleName => {
-                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
+                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
             });
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             if (typeof value === 'function') {
-                bindEvent(nativeRenderer, newVNode, key, nativeNode, value);
+                bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
             }
             continue;
         }
@@ -1752,7 +1757,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             bindRefs = value;
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, value);
+        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
     return () => {
         applyRefs(unBindRefs, nativeNode, false);
@@ -1767,7 +1772,7 @@ function applyRefs(refs, nativeNode, binding) {
         }
     }
 }
-function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
+function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
     let on = vNode.on;
     if (!on) {
         vNode.on = on = {};
@@ -1781,7 +1786,7 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
         listenFn
     };
     on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegate);
+    nativeRenderer.listen(nativeNode, type, delegate, isSvg);
 }
 
 /**
@@ -1803,7 +1808,7 @@ class RootComponent extends Component {
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.2.2";
+const VERSION = "0.2.4";
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
     const appProviders = [];

package/bundles/index.js

@@ -1214,14 +1214,15 @@ function createRenderer(component, nativeRenderer, version) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
-            nativeRenderer.setProperty(host, 'viewfly-version', version);
+            nativeRenderer.setProperty(host, 'viewfly-version', version, false);
             isInit = false;
             const atom = {
                 jsxNode: component,
                 parent: null,
                 sibling: null,
                 child: null,
-                nativeNode: null
+                nativeNode: null,
+                isSvg: false
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1243,19 +1244,19 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         let nativeNode;
         let applyRefs = null;
         if (atom.jsxNode instanceof JSXElement) {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode);
+            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, atom.jsxNode, atom.isSvg);
             nativeNode = n;
             applyRefs = a;
         }
         else {
-            nativeNode = createTextNode(nativeRenderer, atom.jsxNode);
+            nativeNode = createTextNode(nativeRenderer, atom.jsxNode, atom.isSvg);
         }
         atom.nativeNode = nativeNode;
         if (context.isParent) {
-            nativeRenderer.prependChild(context.host, nativeNode);
+            nativeRenderer.prependChild(context.host, nativeNode, atom.isSvg);
         }
         else {
-            nativeRenderer.insertAfter(nativeNode, context.host);
+            nativeRenderer.insertAfter(nativeNode, context.host, atom.isSvg);
         }
         if (atom.jsxNode instanceof JSXElement) {
             const childContext = {
@@ -1369,15 +1370,15 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                 const host = context.host;
                 if (expectIndex - offset !== oldIndex) {
                     if (context.isParent) {
-                        nativeRenderer.prependChild(host, newAtom.nativeNode);
+                        nativeRenderer.prependChild(host, newAtom.nativeNode, newAtom.isSvg);
                     }
                     else {
-                        nativeRenderer.insertAfter(newAtom.nativeNode, host);
+                        nativeRenderer.insertAfter(newAtom.nativeNode, host, newAtom.isSvg);
                     }
                 }
                 context.host = newAtom.nativeNode;
                 context.isParent = false;
-                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
+                const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
                 if (newAtom.child) {
                     diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
                         host: newAtom.nativeNode,
@@ -1398,7 +1399,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
             commits.push(() => {
                 const nativeNode = oldAtom.nativeNode;
                 if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
+                    nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text, newAtom.isSvg);
                 }
                 newAtom.nativeNode = nativeNode;
                 context.host = nativeNode;
@@ -1498,10 +1499,10 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         else {
             if (moveView) {
                 if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
                 }
                 else {
-                    nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
                 }
             }
             context.isParent = false;
@@ -1515,7 +1516,7 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 function cleanView(nativeRenderer, atom, isClean) {
     if (atom.nativeNode) {
         if (!isClean) {
-            nativeRenderer.remove(atom.nativeNode);
+            nativeRenderer.remove(atom.nativeNode, atom.isSvg);
             isClean = true;
         }
         if (atom.jsxNode instanceof JSXElement) {
@@ -1545,67 +1546,71 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByComponentFactory(jsxComponent, parent) {
+function createChainByComponentFactory(jsxComponent, parent, isSvg) {
     return {
         jsxNode: jsxComponent,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
 }
-function createChainByJSXElement(component, element, parent) {
+function createChainByJSXElement(component, element, parent, isSvg) {
+    isSvg = isSvg || element.type === 'svg';
     const atom = {
         jsxNode: element,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
     if (Reflect.has(element.props, 'children')) {
         const jsxChildren = element.props.children;
-        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
+        const children = createChainByChildren(component, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, [], isSvg);
         link(atom, children);
     }
     return atom;
 }
-function createChainByJSXText(node, parent) {
+function createChainByJSXText(node, parent, isSvg) {
     return {
         jsxNode: node,
         parent,
         sibling: null,
         child: null,
-        nativeNode: null
+        nativeNode: null,
+        isSvg
     };
 }
-function createChainByChildren(component, children, parent, atoms) {
+function createChainByChildren(component, children, parent, atoms, isSvg) {
     for (const item of children) {
-        if (item !== null && typeof item !== 'undefined') {
+        if (item !== null && typeof item !== 'undefined' && typeof item !== 'boolean') {
             if (item instanceof JSXElement) {
-                atoms.push(createChainByJSXElement(component, item, parent));
+                atoms.push(createChainByJSXElement(component, item, parent, isSvg));
                 continue;
             }
             if (item instanceof JSXComponent) {
-                const childAtom = createChainByComponentFactory(item, parent);
+                const childAtom = createChainByComponentFactory(item, parent, isSvg);
                 atoms.push(childAtom);
                 continue;
             }
             if (typeof item === 'string' && item.length) {
-                atoms.push(createChainByJSXText(new JSXText(item), parent));
+                atoms.push(createChainByJSXText(new JSXText(item), parent, isSvg));
                 continue;
             }
             if (Array.isArray(item)) {
-                createChainByChildren(component, item, parent, atoms);
+                createChainByChildren(component, item, parent, atoms, isSvg);
                 continue;
             }
-            atoms.push(createChainByJSXText(new JSXText(String(item)), parent));
+            atoms.push(createChainByJSXText(new JSXText(String(item)), parent, isSvg));
         }
     }
     return atoms;
 }
 function linkTemplate(template, component, parent) {
     const children = Array.isArray(template) ? template : [template];
-    const newChildren = createChainByChildren(component, children, parent, []);
+    const newChildren = createChainByChildren(component, children, parent, [], parent.isSvg);
     link(parent, newChildren);
 }
 function link(parent, children) {
@@ -1615,8 +1620,8 @@ function link(parent, children) {
     }
     parent.child = children[0] || null;
 }
-function createElement(nativeRenderer, vNode) {
-    const nativeNode = nativeRenderer.createElement(vNode.type);
+function createElement(nativeRenderer, vNode, isSvg) {
+    const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
     const props = vNode.props;
     let bindingRefs;
     const keys = Object.keys(props);
@@ -1627,21 +1632,21 @@ function createElement(nativeRenderer, vNode) {
         if (key === 'class') {
             const className = classToString(props[key]);
             if (className) {
-                nativeRenderer.setClass(nativeNode, className);
+                nativeRenderer.setClass(nativeNode, className, isSvg);
             }
             continue;
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
             Object.keys(style).forEach(key => {
-                nativeRenderer.setStyle(nativeNode, key, style[key]);
+                nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
             });
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, vNode, key, nativeNode, listener);
+                bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
             }
             continue;
         }
@@ -1649,7 +1654,7 @@ function createElement(nativeRenderer, vNode) {
             bindingRefs = props[key];
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, props[key]);
+        nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
     }
     return {
         nativeNode,
@@ -1658,24 +1663,25 @@ function createElement(nativeRenderer, vNode) {
         }
     };
 }
-function createTextNode(nativeRenderer, child) {
-    return nativeRenderer.createTextNode(child.text);
+function createTextNode(nativeRenderer, child, isSvg) {
+    return nativeRenderer.createTextNode(child.text, isSvg);
 }
-function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode) {
+function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
+    newVNode.on = oldVNode.on;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
             continue;
         }
         if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, '');
+            nativeRenderer.setClass(nativeNode, '', isSvg);
             continue;
         }
         if (key === 'style') {
             Object.keys(styleToObject(value)).forEach(styleName => {
-                nativeRenderer.removeStyle(nativeNode, styleName);
+                nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             });
             continue;
         }
@@ -1683,7 +1689,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             if (typeof value === 'function') {
                 const type = key.replace(/^on/, '').toLowerCase();
                 const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate);
+                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
                 Reflect.deleteProperty(oldOn, type);
             }
             continue;
@@ -1692,7 +1698,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             unBindRefs = value;
             continue;
         }
-        nativeRenderer.removeProperty(nativeNode, key);
+        nativeRenderer.removeProperty(nativeNode, key, isSvg);
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
@@ -1702,23 +1708,22 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             const oldClassName = classToString(oldValue);
             const newClassName = classToString(newValue);
             if (oldClassName !== newClassName) {
-                nativeRenderer.setClass(nativeNode, newClassName);
+                nativeRenderer.setClass(nativeNode, newClassName, isSvg);
             }
             continue;
         }
         if (key === 'style') {
             const styleChanges = getObjectChanges(styleToObject(newValue) || {}, styleToObject(oldValue) || {});
             for (const [styleName] of styleChanges.remove) {
-                nativeRenderer.removeStyle(nativeNode, styleName);
+                nativeRenderer.removeStyle(nativeNode, styleName, isSvg);
             }
             for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
-                nativeRenderer.setStyle(nativeNode, styleName, styleValue);
+                nativeRenderer.setStyle(nativeNode, styleName, styleValue, isSvg);
             }
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             const listenType = key.replace(/^on/, '').toLowerCase();
-            newVNode.on = oldVNode.on;
             newVNode.on[listenType].listenFn = newValue;
             continue;
         }
@@ -1727,26 +1732,26 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             bindRefs = newValue;
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, newValue);
+        nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
             continue;
         }
         if (key === 'class') {
-            nativeRenderer.setClass(nativeNode, classToString(value));
+            nativeRenderer.setClass(nativeNode, classToString(value), isSvg);
             continue;
         }
         if (key === 'style') {
             const styleObj = styleToObject(value);
             Object.keys(styleObj).forEach(styleName => {
-                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
+                nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName], isSvg);
             });
             continue;
         }
         if (/^on[A-Z]/.test(key)) {
             if (typeof value === 'function') {
-                bindEvent(nativeRenderer, newVNode, key, nativeNode, value);
+                bindEvent(nativeRenderer, newVNode, key, nativeNode, value, isSvg);
             }
             continue;
         }
@@ -1754,7 +1759,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             bindRefs = value;
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, value);
+        nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
     return () => {
         applyRefs(unBindRefs, nativeNode, false);
@@ -1769,7 +1774,7 @@ function applyRefs(refs, nativeNode, binding) {
         }
     }
 }
-function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
+function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
     let on = vNode.on;
     if (!on) {
         vNode.on = on = {};
@@ -1783,7 +1788,7 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn) {
         listenFn
     };
     on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegate);
+    nativeRenderer.listen(nativeNode, type, delegate, isSvg);
 }
 
 /**
@@ -1805,7 +1810,7 @@ class RootComponent extends Component {
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.2.2";
+const VERSION = "0.2.4";
 function viewfly(config) {
     const { context, nativeRenderer, autoUpdate, root } = Object.assign({ autoUpdate: true }, config);
     const appProviders = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",