@viewfly/core 1.0.5 → 1.1.0

package/bundles/index.d.ts

@@ -198,7 +198,7 @@ declare function Fragment(props: Props): () => JSXNode | JSXNode[];
 interface ContextProps extends Props {
     providers: Provider[];
 }
-declare function Context(props: ContextProps): () => JSXNode | JSXNode[];
+declare function Context(props: ContextProps): () => ViewFlyNode<string | ComponentSetup<any>>;
 type Key = number | string;
 declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
 declare const jsxs: typeof jsx;
@@ -211,23 +211,68 @@ declare const JSXNodeFactory: {
     createNode<T = string | ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): ViewFlyNode<T>;
 };
 
+declare const TextAtomType: unique symbol;
+declare const ElementAtomType: unique symbol;
+declare const ComponentAtomType: unique symbol;
+type ElementNamespace = string | undefined;
+interface TextAtom {
+    type: typeof TextAtomType;
+    index: number;
+    jsxNode: string;
+    nodeType: string;
+    key?: null;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    namespace: ElementNamespace;
+}
+interface ElementAtom {
+    type: typeof ElementAtomType;
+    index: number;
+    nodeType: string;
+    key?: Key;
+    jsxNode: ViewFlyNode<string>;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    namespace: ElementNamespace;
+}
+interface ComponentAtom {
+    type: typeof ComponentAtomType;
+    index: number;
+    nodeType: ComponentSetup;
+    key?: Key;
+    jsxNode: ViewFlyNode<ComponentSetup> | Component;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+    namespace: ElementNamespace;
+}
+type Atom = TextAtom | ElementAtom | ComponentAtom;
+interface ComponentView {
+    atom: ComponentAtom;
+    host: NativeNode;
+    isParent: boolean;
+    rootHost: NativeNode;
+}
+
 type NativeNode = Record<string, any>;
 declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = NativeNode> {
-    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 cleanChildren(node: ElementNode, isSvg: boolean): void;
-    abstract syncTextContent(target: TextNode, content: string, isSvg: boolean): void;
-    abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, isSvg: boolean): void;
+    abstract createElement(name: string, namespace: ElementNamespace): ElementNode;
+    abstract createTextNode(textContent: string, namespace: ElementNamespace): TextNode;
+    abstract setProperty(node: ElementNode, key: string, value: any, namespace: ElementNamespace): void;
+    abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, namespace: ElementNamespace): void;
+    abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, namespace: ElementNamespace): void;
+    abstract removeProperty(node: ElementNode, key: string, namespace: ElementNamespace): void;
+    abstract setStyle(target: ElementNode, key: string, value: any, namespace: ElementNamespace): void;
+    abstract removeStyle(target: ElementNode, key: string, namespace: ElementNamespace): void;
+    abstract setClass(target: ElementNode, value: string, namespace: ElementNamespace): void;
+    abstract listen<T = any>(node: ElementNode, type: string, callback: (ev: T) => any, namespace: ElementNamespace): void;
+    abstract unListen(node: ElementNode, type: string, callback: (ev: any) => any, namespace: ElementNamespace): void;
+    abstract remove(node: ElementNode | TextNode, namespace: ElementNamespace): void;
+    abstract cleanChildren(node: ElementNode, namespace: ElementNamespace): void;
+    abstract syncTextContent(target: TextNode, content: string, namespace: ElementNamespace): void;
+    abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
 }
 
 declare namespace JSX {
@@ -315,7 +360,7 @@ interface LifeCycleCallback {
     (): void | (() => void);
 }
 interface PropsChangedCallback<T extends Props> {
-    (currentProps: T | null, oldProps: T | null): void | (() => void);
+    (currentProps: T, oldProps: T): void | (() => void);
 }
 /**
  * 当组件第一次渲染完成时触发
@@ -444,7 +489,8 @@ declare function getCurrentInstance(): Component;
 
 declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
-declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;
+declare const ElementNamespaceMap: Record<string, string>;
+declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, namespace: ElementNamespace): (host: NativeNode) => void;
 
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
@@ -524,50 +570,6 @@ declare function watch<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, Signal<T
 declare function watch<T>(deps: () => T, callback: WatchCallback<T>): () => void;
 declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[]>): () => void;
 
-declare const TextAtomType: unique symbol;
-declare const ElementAtomType: unique symbol;
-declare const ComponentAtomType: unique symbol;
-interface TextAtom {
-    type: typeof TextAtomType;
-    index: number;
-    jsxNode: string;
-    nodeType: string;
-    key?: null;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-interface ElementAtom {
-    type: typeof ElementAtomType;
-    index: number;
-    nodeType: string;
-    key?: Key;
-    jsxNode: ViewFlyNode<string>;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-interface ComponentAtom {
-    type: typeof ComponentAtomType;
-    index: number;
-    nodeType: ComponentSetup;
-    key?: Key;
-    jsxNode: ViewFlyNode<ComponentSetup> | Component;
-    nativeNode: NativeNode | null;
-    child: Atom | null;
-    sibling: Atom | null;
-    isSvg: boolean;
-}
-type Atom = TextAtom | ElementAtom | ComponentAtom;
-interface ComponentView {
-    atom: ComponentAtom;
-    host: NativeNode;
-    isParent: boolean;
-    rootHost: NativeNode;
-}
-
 /**
  * Viewfly 配置项
  */
@@ -580,6 +582,8 @@ interface Config {
     context?: Injector;
     /** 是否自动更新视图 */
     autoUpdate?: boolean;
+    /** 根节点命名空间 */
+    elementNamespace?: ElementNamespace;
 }
 interface Application<T extends NativeNode = NativeNode> {
     provide(providers: Provider | Provider[]): Application<T>;
@@ -595,4 +599,4 @@ interface Module {
 }
 declare function viewfly<T extends NativeNode>(config: Config): Application<T>;
 
-export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ElementNamespace, ElementNamespaceMap, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.esm.js

@@ -1096,10 +1096,21 @@ function Fragment(props) {
     };
 }
 function Context(props) {
-    const instance = getCurrentInstance();
-    instance.provide(props.providers);
+    function createContextComponent(providers) {
+        return withAnnotation({
+            providers,
+        }, () => {
+            return () => {
+                return props.children;
+            };
+        });
+    }
+    let contextComponent = createContextComponent(props.providers);
+    onPropsChanged((newProps) => {
+        contextComponent = createContextComponent(newProps.providers);
+    });
     return () => {
-        return props.children;
+        return jsx(contextComponent, {});
     };
 }
 function jsx(type, props, key) {
@@ -1123,9 +1134,13 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const ElementNamespaceMap = {
+    svg: 'svg',
+    math: 'mathml',
+};
 const componentViewCache = new WeakMap();
 const listenerReg = /^on[A-Z]/;
-function createRenderer(component, nativeRenderer) {
+function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
@@ -1138,7 +1153,7 @@ function createRenderer(component, nativeRenderer) {
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false
+                namespace
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1191,7 +1206,7 @@ function updateView(nativeRenderer, component, needMove) {
 function applyChanges(nativeRenderer, component, atom, context, needMove) {
     const diffAtom = atom.child;
     component.update(component.props, newTemplate => {
-        atom.child = createChildChain(newTemplate, atom.isSvg);
+        atom.child = createChildChain(newTemplate, atom.namespace);
         diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
         const next = atom.sibling;
         if (next && next.jsxNode instanceof Component) {
@@ -1304,7 +1319,7 @@ function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
         newAtom.jsxNode = component;
         component.update(newProps, newTemplate => {
             if (newTemplate) {
-                newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
+                newAtom.child = createChildChain(newTemplate, newAtom.namespace);
             }
             if (newAtom.child) {
                 diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
@@ -1364,7 +1379,7 @@ function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponen
 }
 function cleanElementChildren(atom, nativeRenderer) {
     let child = atom.child;
-    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.namespace);
     while (child) {
         cleanView(nativeRenderer, child, false);
         child = child.sibling;
@@ -1373,7 +1388,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
         if (needClean) {
-            nativeRenderer.remove(atom.nativeNode, atom.isSvg);
+            nativeRenderer.remove(atom.nativeNode, atom.namespace);
             needClean = false;
         }
         if (atom.type === ElementAtomType) {
@@ -1395,7 +1410,7 @@ function cleanView(nativeRenderer, atom, needClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
-        from.child = createChildChain(template, from.isSvg);
+        from.child = createChildChain(template, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         componentViewCache.set(component, Object.assign({ atom: from }, context));
         let child = from.child;
@@ -1405,7 +1420,7 @@ function componentRender(nativeRenderer, component, from, context) {
         }
     });
 }
-function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1413,88 +1428,88 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg,
+        namespace,
         nodeType,
         key
     };
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByNode(jsxNode, prevAtom, isSvg) {
+function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
         }
         if (Array.isArray(jsxNode)) {
-            return createChainByChildren(jsxNode, prevAtom, isSvg);
+            return createChainByChildren(jsxNode, prevAtom, elementNamespace);
         }
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
         }
         const text = String(jsxNode);
-        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, ElementNamespaceMap[jsxNode.type]);
     }
     return prevAtom;
 }
-function createChainByChildren(children, prevAtom, isSvg) {
+function createChainByChildren(children, prevAtom, elementNamespace) {
     for (const item of children) {
-        prevAtom = createChainByNode(item, prevAtom, isSvg);
+        prevAtom = createChainByNode(item, prevAtom, elementNamespace);
     }
     return prevAtom;
 }
-function createChildChain(template, isSvg) {
+function createChildChain(template, namespace) {
     const beforeAtom = { sibling: null, index: -1 };
-    createChainByNode(template, beforeAtom, isSvg);
+    createChainByNode(template, beforeAtom, namespace);
     return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
     if (context.isParent) {
         if (context.host === context.rootHost) {
-            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
         }
         else {
-            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
         }
     }
     else {
-        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
+        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
-    const { isSvg, jsxNode } = atom;
-    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const { namespace, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
     const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, isSvg);
+            atom.child = createChildChain(jsxNode.props.children, namespace);
             continue;
         }
         if (key === 'class') {
             const className = classToString(props[key]);
             if (className) {
-                nativeRenderer.setClass(nativeNode, className, isSvg);
+                nativeRenderer.setClass(nativeNode, className, namespace);
             }
             continue;
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
             for (const key in style) {
-                nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
+                nativeRenderer.setStyle(nativeNode, key, style[key], namespace);
             }
             continue;
         }
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                nativeRenderer.listen(nativeNode, key, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, namespace);
             }
             continue;
         }
@@ -1502,7 +1517,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
             bindingRefs = props[key];
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
+        nativeRenderer.setProperty(nativeNode, key, props[key], namespace);
     }
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
@@ -1516,7 +1531,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     applyRefs(bindingRefs, nativeNode, true);
 }
 function createTextNode(nativeRenderer, atom, context) {
-    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
     context.host = nativeNode;
@@ -1524,7 +1539,7 @@ function createTextNode(nativeRenderer, atom, context) {
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
     const newVNode = newAtom.jsxNode;
-    const isSvg = newAtom.isSvg;
+    const isSvg = newAtom.namespace;
     const nativeNode = newAtom.nativeNode;
     const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
@@ -1824,7 +1839,7 @@ function viewfly(config) {
             render(appHost);
         });
     });
-    const render = createRenderer(rootComponent, nativeRenderer);
+    const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
     let isStarted = false;
     let task = null;
     function nextTick(callback) {
@@ -1888,4 +1903,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, Context, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { Component, Context, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.js

@@ -1098,10 +1098,21 @@ function Fragment(props) {
     };
 }
 function Context(props) {
-    const instance = getCurrentInstance();
-    instance.provide(props.providers);
+    function createContextComponent(providers) {
+        return withAnnotation({
+            providers,
+        }, () => {
+            return () => {
+                return props.children;
+            };
+        });
+    }
+    let contextComponent = createContextComponent(props.providers);
+    onPropsChanged((newProps) => {
+        contextComponent = createContextComponent(newProps.providers);
+    });
     return () => {
-        return props.children;
+        return jsx(contextComponent, {});
     };
 }
 function jsx(type, props, key) {
@@ -1125,9 +1136,13 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const ElementNamespaceMap = {
+    svg: 'svg',
+    math: 'mathml',
+};
 const componentViewCache = new WeakMap();
 const listenerReg = /^on[A-Z]/;
-function createRenderer(component, nativeRenderer) {
+function createRenderer(component, nativeRenderer, namespace) {
     let isInit = true;
     return function render(host) {
         if (isInit) {
@@ -1140,7 +1155,7 @@ function createRenderer(component, nativeRenderer) {
                 sibling: null,
                 child: null,
                 nativeNode: null,
-                isSvg: false
+                namespace
             };
             componentRender(nativeRenderer, component, atom, {
                 isParent: true,
@@ -1193,7 +1208,7 @@ function updateView(nativeRenderer, component, needMove) {
 function applyChanges(nativeRenderer, component, atom, context, needMove) {
     const diffAtom = atom.child;
     component.update(component.props, newTemplate => {
-        atom.child = createChildChain(newTemplate, atom.isSvg);
+        atom.child = createChildChain(newTemplate, atom.namespace);
         diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
         const next = atom.sibling;
         if (next && next.jsxNode instanceof Component) {
@@ -1306,7 +1321,7 @@ function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
         newAtom.jsxNode = component;
         component.update(newProps, newTemplate => {
             if (newTemplate) {
-                newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
+                newAtom.child = createChildChain(newTemplate, newAtom.namespace);
             }
             if (newAtom.child) {
                 diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
@@ -1366,7 +1381,7 @@ function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponen
 }
 function cleanElementChildren(atom, nativeRenderer) {
     let child = atom.child;
-    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.namespace);
     while (child) {
         cleanView(nativeRenderer, child, false);
         child = child.sibling;
@@ -1375,7 +1390,7 @@ function cleanElementChildren(atom, nativeRenderer) {
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
         if (needClean) {
-            nativeRenderer.remove(atom.nativeNode, atom.isSvg);
+            nativeRenderer.remove(atom.nativeNode, atom.namespace);
             needClean = false;
         }
         if (atom.type === ElementAtomType) {
@@ -1397,7 +1412,7 @@ function cleanView(nativeRenderer, atom, needClean) {
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
-        from.child = createChildChain(template, from.isSvg);
+        from.child = createChildChain(template, from.namespace);
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         componentViewCache.set(component, Object.assign({ atom: from }, context));
         let child = from.child;
@@ -1407,7 +1422,7 @@ function componentRender(nativeRenderer, component, from, context) {
         }
     });
 }
-function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, namespace, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1415,88 +1430,88 @@ function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg,
+        namespace,
         nodeType,
         key
     };
     prevAtom.sibling = atom;
     return atom;
 }
-function createChainByNode(jsxNode, prevAtom, isSvg) {
+function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, elementNamespace);
         }
         if (Array.isArray(jsxNode)) {
-            return createChainByChildren(jsxNode, prevAtom, isSvg);
+            return createChainByChildren(jsxNode, prevAtom, elementNamespace);
         }
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, elementNamespace || ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, ElementNamespaceMap[jsxNode.type], jsxNode.key);
             }
         }
         const text = String(jsxNode);
-        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, ElementNamespaceMap[jsxNode.type]);
     }
     return prevAtom;
 }
-function createChainByChildren(children, prevAtom, isSvg) {
+function createChainByChildren(children, prevAtom, elementNamespace) {
     for (const item of children) {
-        prevAtom = createChainByNode(item, prevAtom, isSvg);
+        prevAtom = createChainByNode(item, prevAtom, elementNamespace);
     }
     return prevAtom;
 }
-function createChildChain(template, isSvg) {
+function createChildChain(template, namespace) {
     const beforeAtom = { sibling: null, index: -1 };
-    createChainByNode(template, beforeAtom, isSvg);
+    createChainByNode(template, beforeAtom, namespace);
     return beforeAtom.sibling;
 }
 function insertNode(nativeRenderer, atom, context) {
     if (context.isParent) {
         if (context.host === context.rootHost) {
-            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.appendChild(context.host, atom.nativeNode, atom.namespace);
         }
         else {
-            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.isSvg);
+            nativeRenderer.prependChild(context.host, atom.nativeNode, atom.namespace);
         }
     }
     else {
-        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
+        nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
 function createElement(nativeRenderer, atom, parentComponent, context) {
-    const { isSvg, jsxNode } = atom;
-    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const { namespace, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
     const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, isSvg);
+            atom.child = createChildChain(jsxNode.props.children, namespace);
             continue;
         }
         if (key === 'class') {
             const className = classToString(props[key]);
             if (className) {
-                nativeRenderer.setClass(nativeNode, className, isSvg);
+                nativeRenderer.setClass(nativeNode, className, namespace);
             }
             continue;
         }
         if (key === 'style') {
             const style = styleToObject(props.style);
             for (const key in style) {
-                nativeRenderer.setStyle(nativeNode, key, style[key], isSvg);
+                nativeRenderer.setStyle(nativeNode, key, style[key], namespace);
             }
             continue;
         }
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                nativeRenderer.listen(nativeNode, key, listener, isSvg);
+                nativeRenderer.listen(nativeNode, key, listener, namespace);
             }
             continue;
         }
@@ -1504,7 +1519,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
             bindingRefs = props[key];
             continue;
         }
-        nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
+        nativeRenderer.setProperty(nativeNode, key, props[key], namespace);
     }
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
@@ -1518,7 +1533,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     applyRefs(bindingRefs, nativeNode, true);
 }
 function createTextNode(nativeRenderer, atom, context) {
-    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.namespace);
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
     context.host = nativeNode;
@@ -1526,7 +1541,7 @@ function createTextNode(nativeRenderer, atom, context) {
 }
 function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
     const newVNode = newAtom.jsxNode;
-    const isSvg = newAtom.isSvg;
+    const isSvg = newAtom.namespace;
     const nativeNode = newAtom.nativeNode;
     const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
@@ -1826,7 +1841,7 @@ function viewfly(config) {
             render(appHost);
         });
     });
-    const render = createRenderer(rootComponent, nativeRenderer);
+    const render = createRenderer(rootComponent, nativeRenderer, config.elementNamespace);
     let isStarted = false;
     let task = null;
     function nextTick(callback) {
@@ -1893,6 +1908,7 @@ function viewfly(config) {
 exports.Component = Component;
 exports.Context = Context;
 exports.DynamicRef = DynamicRef;
+exports.ElementNamespaceMap = ElementNamespaceMap;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;
 exports.Inject = Inject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "b66ca589f7662cd518fc2e5955b3e3ff9de83f94",
+  "gitHead": "56c28e6d0f87586ea6dda6597b00b4c5326edc07",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }