@viewfly/core 0.2.1 → 0.2.3

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 = {
@@ -1332,7 +1333,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
     }
     const commits = [];
     const changeCommits = {
-        updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+        updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
             commits.push((offset) => {
                 const instance = reusedAtom.jsxNode;
                 const newProps = newAtom.jsxNode.props;
@@ -1341,7 +1342,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                 instance.$$view = Object.assign({ atom: newAtom }, context);
                 newAtom.jsxNode = instance;
                 if (newTemplate === oldTemplate) {
-                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
                     updateView(nativeRenderer, instance);
                     return;
                 }
@@ -1349,7 +1350,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                     linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
                 }
                 if (newAtom.child) {
-                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
                 }
                 else if (reusedAtom.child) {
                     let atom = reusedAtom.child;
@@ -1365,17 +1366,17 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
             commits.push((offset) => {
                 newAtom.nativeNode = oldAtom.nativeNode;
                 const host = context.host;
-                if (expectIndex !== oldIndex - offset) {
+                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;
@@ -1406,6 +1407,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         create: (start) => {
             commits.push(() => {
                 buildView(nativeRenderer, parentComponent, start, context);
+                offset++;
             });
         }
     };
@@ -1424,7 +1426,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         const commit = commits[i];
         while (firstDiffAtomIndexed) {
             if (firstDiffAtomIndexed.index <= i) {
-                offset++;
+                offset--;
                 firstDiffAtomIndexed = firstDiffAtomIndexed.next;
                 continue;
             }
@@ -1433,40 +1435,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
-    let child = reusedAtom.child;
-    newAtom.child = child;
-    const children = [];
-    while (child) {
-        children.push(child);
-        child.parent = newAtom;
-        child = child.sibling;
-    }
-    const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
-            let child = atom.child;
-            while (child) {
-                updateContext(child);
-                child = child.sibling;
-            }
-        }
-        else {
-            if (moveView) {
-                if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode);
-                }
-                else {
-                    nativeRenderer.insertAfter(atom.nativeNode, context.host);
-                }
-            }
-            context.isParent = false;
-            context.host = atom.nativeNode;
-        }
-    };
-    for (const atom of children) {
-        updateContext(atom);
-    }
-}
 function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
     const startDiffAtom = diffAtomIndexed;
     while (diffAtomIndexed) {
@@ -1509,10 +1477,44 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
     changeCommits.create(newAtom);
     return startDiffAtom;
 }
+function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
+    let child = reusedAtom.child;
+    newAtom.child = child;
+    const children = [];
+    while (child) {
+        children.push(child);
+        child.parent = newAtom;
+        child = child.sibling;
+    }
+    const updateContext = (atom) => {
+        if (atom.jsxNode instanceof Component) {
+            let child = atom.child;
+            while (child) {
+                updateContext(child);
+                child = child.sibling;
+            }
+        }
+        else {
+            if (moveView) {
+                if (context.isParent) {
+                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                }
+                else {
+                    nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
+                }
+            }
+            context.isParent = false;
+            context.host = atom.nativeNode;
+        }
+    };
+    for (const atom of children) {
+        updateContext(atom);
+    }
+}
 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) {
@@ -1542,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 = element.type === 'svg' || isSvg;
     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) {
@@ -1612,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);
@@ -1624,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;
         }
@@ -1646,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,
@@ -1655,10 +1661,10 @@ 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;
@@ -1667,12 +1673,12 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             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;
         }
@@ -1680,7 +1686,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;
@@ -1689,7 +1695,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') {
@@ -1699,17 +1705,17 @@ 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;
         }
@@ -1724,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;
         }
@@ -1751,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);
@@ -1766,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 = {};
@@ -1780,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);
 }
 
 /**
@@ -1802,7 +1808,7 @@ class RootComponent extends Component {
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.2.1";
+const VERSION = "0.2.2";
 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 = {
@@ -1334,7 +1335,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
     }
     const commits = [];
     const changeCommits = {
-        updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+        updateComponent: (newAtom, reusedAtom, expectIndex, oldIndex) => {
             commits.push((offset) => {
                 const instance = reusedAtom.jsxNode;
                 const newProps = newAtom.jsxNode.props;
@@ -1343,7 +1344,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                 instance.$$view = Object.assign({ atom: newAtom }, context);
                 newAtom.jsxNode = instance;
                 if (newTemplate === oldTemplate) {
-                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                    reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
                     updateView(nativeRenderer, instance);
                     return;
                 }
@@ -1351,7 +1352,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
                     linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
                 }
                 if (newAtom.child) {
-                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    diff(nativeRenderer, instance, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex);
                 }
                 else if (reusedAtom.child) {
                     let atom = reusedAtom.child;
@@ -1367,17 +1368,17 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
             commits.push((offset) => {
                 newAtom.nativeNode = oldAtom.nativeNode;
                 const host = context.host;
-                if (expectIndex !== oldIndex - offset) {
+                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;
@@ -1408,6 +1409,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         create: (start) => {
             commits.push(() => {
                 buildView(nativeRenderer, parentComponent, start, context);
+                offset++;
             });
         }
     };
@@ -1426,7 +1428,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         const commit = commits[i];
         while (firstDiffAtomIndexed) {
             if (firstDiffAtomIndexed.index <= i) {
-                offset++;
+                offset--;
                 firstDiffAtomIndexed = firstDiffAtomIndexed.next;
                 continue;
             }
@@ -1435,40 +1437,6 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
-    let child = reusedAtom.child;
-    newAtom.child = child;
-    const children = [];
-    while (child) {
-        children.push(child);
-        child.parent = newAtom;
-        child = child.sibling;
-    }
-    const updateContext = (atom) => {
-        if (atom.jsxNode instanceof Component) {
-            let child = atom.child;
-            while (child) {
-                updateContext(child);
-                child = child.sibling;
-            }
-        }
-        else {
-            if (moveView) {
-                if (context.isParent) {
-                    nativeRenderer.prependChild(context.host, atom.nativeNode);
-                }
-                else {
-                    nativeRenderer.insertAfter(atom.nativeNode, context.host);
-                }
-            }
-            context.isParent = false;
-            context.host = atom.nativeNode;
-        }
-    };
-    for (const atom of children) {
-        updateContext(atom);
-    }
-}
 function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
     const startDiffAtom = diffAtomIndexed;
     while (diffAtomIndexed) {
@@ -1511,10 +1479,44 @@ function createChanges(newAtom, expectIndex, diffAtomIndexed, changeCommits) {
     changeCommits.create(newAtom);
     return startDiffAtom;
 }
+function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveView) {
+    let child = reusedAtom.child;
+    newAtom.child = child;
+    const children = [];
+    while (child) {
+        children.push(child);
+        child.parent = newAtom;
+        child = child.sibling;
+    }
+    const updateContext = (atom) => {
+        if (atom.jsxNode instanceof Component) {
+            let child = atom.child;
+            while (child) {
+                updateContext(child);
+                child = child.sibling;
+            }
+        }
+        else {
+            if (moveView) {
+                if (context.isParent) {
+                    nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+                }
+                else {
+                    nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
+                }
+            }
+            context.isParent = false;
+            context.host = atom.nativeNode;
+        }
+    };
+    for (const atom of children) {
+        updateContext(atom);
+    }
+}
 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) {
@@ -1544,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 = element.type === 'svg' || isSvg;
     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) {
@@ -1614,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);
@@ -1626,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;
         }
@@ -1648,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,
@@ -1657,10 +1663,10 @@ 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;
@@ -1669,12 +1675,12 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             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;
         }
@@ -1682,7 +1688,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;
@@ -1691,7 +1697,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') {
@@ -1701,17 +1707,17 @@ 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;
         }
@@ -1726,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;
         }
@@ -1753,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);
@@ -1768,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 = {};
@@ -1782,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);
 }
 
 /**
@@ -1804,7 +1810,7 @@ class RootComponent extends Component {
 }
 
 const viewflyErrorFn = makeError('Viewfly');
-const VERSION = "0.2.1";
+const VERSION = "0.2.2";
 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.1",
+  "version": "0.2.3",
   "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",
@@ -47,5 +47,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94"
+  "gitHead": "1640dcd27dc51ead16d55964f95c56a94271ea8d"
 }