From f14c6fce92f24065792e60bc0e5159bdbaa7fe6a Mon Sep 17 00:00:00 2001
From: Kingcean Tuan <kingcean@live.com>
Date: Tue, 6 Apr 2021 15:16:08 +0800
Subject: [PATCH] Add SVG supports.

---
 dist/index.js     |   2 +-
 package-lock.json | 208 +++++++++++++++++++++++++++++++++++-----------
 package.json      |   4 +-
 src/render.ts     |  29 ++++++-
 4 files changed, 191 insertions(+), 52 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 14aea9f..5772bc8 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,2 +1,2 @@
 // Hyper-JSON Engine
-var Hje;!function(e){function i(e,o){if(!e)return 0;var i=[];e.forEach(function(e,t,n){e===o&&i.push(t)});for(var t=i.length,n=t-1;n--;)e.splice(i[n],1);return t}var r={};e.InternalInjectionPool={hittask:function(e){return function(e,t,n){if(e){var o=!1;return"function"==typeof n?n(t)&&(o=!0):void 0!==t&&(o=!0),o&&(r[e]=t),r[e]}}("hittask",e,function(e){return"function"==typeof e})}};var t=(n.prototype.push=function(){for(var t=this,e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var o=0;return e.forEach(function(e){!e||0<=t._list.indexOf(e)||(e.dispose||"function"==typeof e.unsubscribe&&(e.dispose=e.unsubscribe),t._list.push(e),"function"==typeof e.pushDisposable&&e.pushDisposable({dispose:function(){i(this._list,e)}}),o++)}),o},n.prototype.pushDisposable=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return this.push.apply(this,e)},n.prototype.remove=function(){for(var t=this,e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var o=0;return e.forEach(function(e){e&&i(t._list,e)<1||o++}),o},n.prototype.removeDisposable=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return this.remove.apply(this,e)},n.prototype.count=function(){return this._list.length},n.prototype.dispose=function(){var e,n,t=this._list;this._list=[],(e=t)&&(e instanceof Array||(e=[e]),n=[],e.forEach(function(t){if(t&&"function"==typeof t.dispose)try{t.dispose()}catch(e){n.push(t)}}),n.forEach(function(e){e&&"function"==typeof e.dispose&&e.dispose()}))},n);function n(){this._list=[]}e.DisposableArray=t}(Hje=Hje||{}),function(g){var n,e,k={contextHandlers:{alive:function(){return!1},refresh:function(){}}};var t=(o.prototype.initView=function(e,t){var n=e.element(),o=typeof n;return n&&"symbol"!=o&&!0!==n?("string"==o?n=document.getElementById(n):"number"==o&&(n=document.body.children[n]),n&&(n.innerHTML=""),n):document.createElement(t||"div")},o.prototype.alive=function(e){if(!e||!e.parentElement)return!1;try{if(!e.parentElement.parentElement&&e!=document.body)return!1}catch(e){}return!0},o.prototype.unmount=function(e){e&&(e.innerHTML=null,e.remove())},o.prototype.append=function(e,t){e&&t&&e.appendChild(t)},o.prototype.setProp=function(e,t,n){var o=e.element();o&&(n&&"string"!=typeof n?o[t]=n:o.setAttribute(t,n))},o.prototype.getProp=function(e,t){var n=e.element();if(n)return n[t]||n.getAttribute(t)},o.prototype.setStyle=function(e,t,n){var o=e.element();o&&(t&&Object.keys(t).forEach(function(e){o.style[e]=t[e]}),n&&(o.className="string"!=typeof n?Array.prototype.join.call(n," "):n))},o.prototype.getStyle=function(e){var t=e.element(),n={inline:void 0,refs:[],computed:function(e){return t?getComputedStyle(t,e):void 0}};return t&&(n.inline=t.style,n.refs=t.classList||(t.className||"").split(" ")),n},o.prototype.setTextValue=function(e,t){var n=e.element();n&&("input"!==n.tagName?(n.innerHTML="",n.appendChild(new Text(t))):n.value=t)},o.prototype.bindProp=function(e,o){o.reg("value",function(t){var n=e.element();n&&o.on("change",function(e){t(n.value)})})},o.prototype.onInit=function(e){},o.prototype.on=function(e,t,n){var o=e.element();if(o)return o.addEventListener?(o.addEventListener(t,n,!1),{dispose:function(){o.removeEventListener(t,n,!1)}}):o.attachEvent?(o.attachEvent("on"+t,n),{dispose:function(){o.detachEvent&&o.detachEvent(t,n,!1)}}):void 0},o);function o(){this.defaultTagName="div"}g.HtmlGenerator=t;var i=(r.prototype.initView=function(e,t){var n=e.element();if(!n||"object"!=typeof n)return{tagName:t||"default",props:{},handlers:{},style:{},styleRefs:[],children:[]};if(n.props||(n.props={}),n.handlers||(n.handlers={}),n.style||(n.style={}),n.styleRefs&&n.styleRefs instanceof Array||(n.styleRefs=[]),n.children&&n.children instanceof Array)for(;n.children.length;)n.children.pop();else n.children=[];return n},r.prototype.alive=function(e){return!(!e||!e.parent)},r.prototype.unmount=function(e){var t;e&&(!e.parent||0<=(t=e.parent.children.indexOf(e))&&delete e.parent.children[t],e.parent=null,e.children=[])},r.prototype.append=function(e,t){var n;e&&t&&(!t.parent||0<=(n=t.parent.children.indexOf(t))&&delete t.parent.children[n],(t.parent=e).children.indexOf(t)<0&&e.children.push(t))},r.prototype.setProp=function(e,t,n){var o=e.element();o&&(o.props[t]=n)},r.prototype.getProp=function(e,t){var n=e.element();if(n)return n.props[t]},r.prototype.setStyle=function(e,t,n){var o=e.element();o&&(t&&(o.style=t),n||(o.styleRefs=[]),o.styleRefs="string"==typeof n?[n]:n)},r.prototype.getStyle=function(e){var t=e.element(),n={inline:void 0,refs:[],computed:function(e){return t.style||{}}};return t&&(n.inline=t.style||{},n.refs=t.styleRefs||[]),n},r.prototype.setTextValue=function(e,t){e.element()},r.prototype.bindProp=function(e,t){},r.prototype.onInit=function(e){},r.prototype.on=function(e,t,n){var o=e.element();if(o)return o.handlers[t]=n,{dispose:function(){delete o.handlers[t]}}},r);function r(){this.defaultTagName="default"}function R(){return e=e||new t}function j(e){var t;if(0<arguments.length&&(e?void((t=e)&&"function"==typeof t.initView&&("function"!=typeof t.alive&&(t.alive=function(e){return null!==e}),"function"!=typeof t.append&&(t.append=function(e,t){}),"function"!=typeof t.on&&(t.on=function(e,t,n){return{dispose:function(){}}}),"function"!=typeof t.onInit&&(t.onInit=function(e){}),"function"!=typeof t.setProp&&(t.setProp=function(e,t,n){}),"function"!=typeof t.setStyle&&(t.setStyle=function(e,t,n){}),"function"!=typeof t.setTextValue&&(t.setTextValue=function(e,t){}),"function"!=typeof t.unmount&&(t.unmount=function(e){e&&"function"==typeof e.dispose&&e.dispose()})))&&(n=e):n=void 0),!n)try{window.document&&(n=R())}catch(e){}return n}function p(e){return e&&"function"==typeof e.subscribe}function x(f,o,s,e){var u=o.model,t=(e=e||{}).appendMode;if(o.element=f.initView(s,u.tagName),o.element){var i=u.props||u.attr||{},r=[];"object"==typeof i&&Object.keys(i).forEach(function(t){if(t&&"string"==typeof t){var e=i[t];if(e&&"string"!=typeof e&&"number"!=typeof e&&"boolean"!=typeof e&&"symbol"!=typeof e)if(p(e)){r.push(t),"function"==typeof e.get&&f.setProp(s,t,e.get());var n=e.subscribe(function(e){s.alive()&&f.setProp(s,t,e)});s.pushDisposable(n)}else{if("function"==typeof e.then){var o=!1;return e.then(function(e){o||f.setProp(s,t,e)}),void s.pushDisposable({dispose:function(){o=!0}})}if(e.source)switch(e.source){case"data":return void f.setProp(s,t,(u.data||{})[e.value])}else f.setProp(s,t,e)}else f.setProp(s,t,e)}});var n=u.styleRefs;return n&&("function"==typeof n.subscribe&&(n.subscribe(function(e){if(e){if("string"==typeof e)e=[e];else if(!(e instanceof Array))return}else e=[];f.setStyle(s,void 0,e)}),"function"==typeof n.get&&(n=n.get())),"string"==typeof n?n=[n]:n instanceof Array||(n=[])),(u.style||u.styleRefs)&&f.setStyle(s,u.style,n),u.on&&"object"==typeof u.on&&Object.keys(u.on).forEach(function(e){var t=u.on[e];if(t)if("function"==typeof t.process){var n=t.process;if(t.options)try{var o,i,r=g.InternalInjectionPool.hittask();r&&((o=new r).setOptions(t.options),i=n,o.pushHandler(function(){return i.call}),n=o.process)}catch(e){}f.on(s,e,function(e){n.call(t.thisArg,e,s)})}else"function"==typeof t&&f.on(s,e,t)}),0<r.length&&f.bindProp&&f.bindProp(s,{keys:function(){return r},length:function(){return r.length},get:function(e){return i[e]},reg:function(n,e){"function"==typeof e&&e(function(e){var t=i[n];if(!p(t))return i[n]=t,!1;if("function"==typeof t.set)t.set(e);else if("function"==typeof t.next)t.next(e);else{if("function"!=typeof t)return!1;t(e)}return!0})},contain:function(e){return 0<=Object.keys(i).indexOf(e)},on:function(e,t){f.on(s,e,t)}}),t&&e.parent&&f.append(e.parent,o.element),f.onInit(s),"function"==typeof e.onInit&&e.onInit(s),"function"==typeof u.onInit&&u.onInit(s),u.children&&(u.children instanceof Array?u.children.forEach(function(n){n&&c(o.element,n,{onInit:function(e){var t=e.element();t&&(f.append(o.element,t),n.key&&"string"==typeof n.key&&(o.keyRefs[n.key]=e))},keyRefs:o.keyRefs,appendMode:!0})}):"string"==typeof u.children&&f.setTextValue(s,u.children)),"function"==typeof u.onLoad&&u.onLoad(s),"function"==typeof e.onLoad&&e.onLoad(s),s.element()}}function c(e,t,n){var o,i;if(3<arguments.length&&arguments[3]&&("function"==typeof(i=arguments[3]).initView&&"function"==typeof i.alive&&(o=i)),o=o||j(),t&&o){n?"string"==typeof n&&("html"===n.toLowerCase()&&(o=R()),n={}):n={};var r=n.appendMode,f=n.keyRefs&&"object"==typeof n.keyRefs,s=t.key;s&&"string"==typeof s||(s=void 0);var u,p,c,l,a,y,d,h,v=(u=r?void 0:e,p=t,c=function(e){var t=e.element;return!!t&&(!!o.alive(t)||(delete e.element,e.info={},f?s&&delete e.keyRefs[s]:e.keyRefs={},o.unmount(t),e.dispose(),!1))},l=function(e,t){x(o,b,t)},a=new g.DisposableArray,d={element:u,keyRefs:{},inheritRefs:!(y={}),model:p,info:{},dispose:function(){y=k.contextHandlers,a.dispose()}},h={element:function(){return d.element},model:function(){return d.model},pushDisposable:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return a.push.apply(a,e)},removeDisposable:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return a.remove.apply(a,e)},info:function(e,t){return 1<arguments.length&&(void 0===t?delete d.info[e]:d.info[e]=t),d.info[e]},childContext:function(e){return e?"string"==typeof e?d.keyRefs[e]:void 0:h},alive:function(){return y.alive()},refresh:function(){y.refresh()}},y.alive=function(){return c(d,h)},y.refresh=function(){l(d,h)},h.info.contain=function(e){return 0<=Object.keys(d.info).indexOf(e)},h.info.keys=function(){return Object.keys(d.info)},h.childContext.contain=function(e){return 0<=Object.keys(d.keyRefs).indexOf(e)},h.childContext.keys=function(){return Object.keys(d.keyRefs)},h.childContext.remove=function(e){if(e)if("string"!=typeof e&&"symbol"!=typeof e){if(e instanceof Array)for(var t in e){var n=e[t];n&&("string"!=typeof n&&"symbol"!=typeof n||delete d.keyRefs[n])}}else delete d.keyRefs[e]},{context:h,bag:d}),m=v.context,b=v.bag;return f&&(b.keyRefs=n.keyRefs,b.inheritRefs=!0),s&&(b.keyRefs[s]=m),x(o,b,m,n),m}}g.MemoryJsonGenerator=i,g.viewGenerator=j,g.render=c}(Hje=Hje||{}),"function"==typeof define?!define.amd&&"undefined"==typeof __webpack_require__||define(["exports"],function(e){return Hje}):"function"==typeof require&&"object"==typeof exports&&"object"==typeof module&&(module.exports=Hje),Hje=Hje||{};
\ No newline at end of file
+var Hje;!function(e){function i(e,o){if(!e)return 0;var i=[];e.forEach(function(e,t,n){e===o&&i.push(t)});for(var t=i.length,n=t-1;n--;)e.splice(i[n],1);return t}var r={};e.InternalInjectionPool={hittask:function(e){return function(e,t,n){if(e){var o=!1;return"function"==typeof n?n(t)&&(o=!0):void 0!==t&&(o=!0),o&&(r[e]=t),r[e]}}("hittask",e,function(e){return"function"==typeof e})}};var t=(n.prototype.push=function(){for(var t=this,e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var o=0;return e.forEach(function(e){!e||0<=t._list.indexOf(e)||(e.dispose||"function"==typeof e.unsubscribe&&(e.dispose=e.unsubscribe),t._list.push(e),"function"==typeof e.pushDisposable&&e.pushDisposable({dispose:function(){i(this._list,e)}}),o++)}),o},n.prototype.pushDisposable=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return this.push.apply(this,e)},n.prototype.remove=function(){for(var t=this,e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];var o=0;return e.forEach(function(e){e&&i(t._list,e)<1||o++}),o},n.prototype.removeDisposable=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return this.remove.apply(this,e)},n.prototype.count=function(){return this._list.length},n.prototype.dispose=function(){var e,n,t=this._list;this._list=[],(e=t)&&(e instanceof Array||(e=[e]),n=[],e.forEach(function(t){if(t&&"function"==typeof t.dispose)try{t.dispose()}catch(e){n.push(t)}}),n.forEach(function(e){e&&"function"==typeof e.dispose&&e.dispose()}))},n);function n(){this._list=[]}e.DisposableArray=t}(Hje=Hje||{}),function(b){var n,e,k={contextHandlers:{alive:function(){return!1},refresh:function(){}}};var t=(o.prototype.initView=function(e,t){var n=e.element(),o=typeof n;if(n&&"symbol"!=o&&!0!==n)return"string"==o?n=document.getElementById(n):"number"==o&&(n=document.body.children[n]),n&&(n.innerHTML=""),n;var i=(e.model()||{}).tagNamespace;return!i&&t&&0<=t.indexOf(":")&&(t.startsWith("svg:")?(i="http://www.w3.org/2000/svg",t=(t=t.substring(4))||"svg"):t.startsWith("mathml:")?(i="http://www.w3.org/1998/Math/MathML",t=(t=t.substring(7))||"math"):t.startsWith("math:")?(i="http://www.w3.org/1998/Math/MathML",t=(t=t.substring(5))||"math"):t.startsWith("html:")?(i="http://www.w3.org/1999/xhtml",t=t.substring(5)):t.startsWith(":")&&(t=t.substring(6))),i?document.createElementNS(i,t||this.defaultTagName||"div"):document.createElement(t||this.defaultTagName||"div")},o.prototype.alive=function(e){if(!e||!e.parentElement)return!1;try{if(!e.parentElement.parentElement&&e!=document.body)return!1}catch(e){}return!0},o.prototype.unmount=function(e){e&&(e.innerHTML=null,e.remove())},o.prototype.append=function(e,t){e&&t&&e.appendChild(t)},o.prototype.setProp=function(e,t,n){var o=e.element();o&&(n&&"string"!=typeof n?o[t]=n:o.setAttribute(t,n))},o.prototype.getProp=function(e,t){var n=e.element();if(n)return n[t]||n.getAttribute(t)},o.prototype.setStyle=function(e,t,n){var o=e.element();o&&(t&&Object.keys(t).forEach(function(e){o.style[e]=t[e]}),n&&(o.className="string"!=typeof n?Array.prototype.join.call(n," "):n))},o.prototype.getStyle=function(e){var t=e.element(),n={inline:void 0,refs:[],computed:function(e){return t?getComputedStyle(t,e):void 0}};return t&&(n.inline=t.style,n.refs=t.classList||(t.className||"").split(" ")),n},o.prototype.setTextValue=function(e,t){var n=e.element();n&&("input"!==n.tagName?(n.innerHTML="",n.appendChild(new Text(t))):n.value=t)},o.prototype.bindProp=function(e,o){o.reg("value",function(t){var n=e.element();n&&o.on("change",function(e){t(n.value)})})},o.prototype.onInit=function(e){},o.prototype.on=function(e,t,n){var o=e.element();if(o)return o.addEventListener?(o.addEventListener(t,n,!1),{dispose:function(){o.removeEventListener(t,n,!1)}}):o.attachEvent?(o.attachEvent("on"+t,n),{dispose:function(){o.detachEvent&&o.detachEvent(t,n,!1)}}):void 0},o);function o(){this.defaultTagName="div"}b.HtmlGenerator=t;var i=(r.prototype.initView=function(e,t){var n=e.element();if(!n||"object"!=typeof n)return{tagName:t||"default",props:{},handlers:{},style:{},styleRefs:[],children:[]};if(n.props||(n.props={}),n.handlers||(n.handlers={}),n.style||(n.style={}),n.styleRefs&&n.styleRefs instanceof Array||(n.styleRefs=[]),n.children&&n.children instanceof Array)for(;n.children.length;)n.children.pop();else n.children=[];return n},r.prototype.alive=function(e){return!(!e||!e.parent)},r.prototype.unmount=function(e){var t;e&&(!e.parent||0<=(t=e.parent.children.indexOf(e))&&delete e.parent.children[t],e.parent=null,e.children=[])},r.prototype.append=function(e,t){var n;e&&t&&(!t.parent||0<=(n=t.parent.children.indexOf(t))&&delete t.parent.children[n],(t.parent=e).children.indexOf(t)<0&&e.children.push(t))},r.prototype.setProp=function(e,t,n){var o=e.element();o&&(o.props[t]=n)},r.prototype.getProp=function(e,t){var n=e.element();if(n)return n.props[t]},r.prototype.setStyle=function(e,t,n){var o=e.element();o&&(t&&(o.style=t),n||(o.styleRefs=[]),o.styleRefs="string"==typeof n?[n]:n)},r.prototype.getStyle=function(e){var t=e.element(),n={inline:void 0,refs:[],computed:function(e){return t.style||{}}};return t&&(n.inline=t.style||{},n.refs=t.styleRefs||[]),n},r.prototype.setTextValue=function(e,t){e.element()},r.prototype.bindProp=function(e,t){},r.prototype.onInit=function(e){},r.prototype.on=function(e,t,n){var o=e.element();if(o)return o.handlers[t]=n,{dispose:function(){delete o.handlers[t]}}},r);function r(){this.defaultTagName="default"}function w(){return e=e||new t}function x(e){var t;if(0<arguments.length&&(e?void((t=e)&&"function"==typeof t.initView&&("function"!=typeof t.alive&&(t.alive=function(e){return null!==e}),"function"!=typeof t.append&&(t.append=function(e,t){}),"function"!=typeof t.on&&(t.on=function(e,t,n){return{dispose:function(){}}}),"function"!=typeof t.onInit&&(t.onInit=function(e){}),"function"!=typeof t.setProp&&(t.setProp=function(e,t,n){}),"function"!=typeof t.setStyle&&(t.setStyle=function(e,t,n){}),"function"!=typeof t.setTextValue&&(t.setTextValue=function(e,t){}),"function"!=typeof t.unmount&&(t.unmount=function(e){e&&"function"==typeof e.dispose&&e.dispose()})))&&(n=e):n=void 0),!n)try{window.document&&(n=w())}catch(e){}return n}function p(e){return e&&"function"==typeof e.subscribe}function R(f,o,s,e){var u=o.model,t=(e=e||{}).appendMode;if(o.element=f.initView(s,u.tagName),o.element){var i=u.props||u.attr||{},r=[];"object"==typeof i&&Object.keys(i).forEach(function(t){if(t&&"string"==typeof t){var e=i[t];if(e&&"string"!=typeof e&&"number"!=typeof e&&"boolean"!=typeof e&&"symbol"!=typeof e)if(p(e)){r.push(t),"function"==typeof e.get&&f.setProp(s,t,e.get());var n=e.subscribe(function(e){s.alive()&&f.setProp(s,t,e)});s.pushDisposable(n)}else{if("function"==typeof e.then){var o=!1;return e.then(function(e){o||f.setProp(s,t,e)}),void s.pushDisposable({dispose:function(){o=!0}})}if(e.source)switch(e.source){case"data":return void f.setProp(s,t,(u.data||{})[e.value])}else f.setProp(s,t,e)}else f.setProp(s,t,e)}});var n=u.styleRefs;return n&&("function"==typeof n.subscribe&&(n.subscribe(function(e){if(e){if("string"==typeof e)e=[e];else if(!(e instanceof Array))return}else e=[];f.setStyle(s,void 0,e)}),"function"==typeof n.get&&(n=n.get())),"string"==typeof n?n=[n]:n instanceof Array||(n=[])),(u.style||u.styleRefs)&&f.setStyle(s,u.style,n),u.on&&"object"==typeof u.on&&Object.keys(u.on).forEach(function(e){var t=u.on[e];if(t)if("function"==typeof t.process){var n=t.process;if(t.options)try{var o,i,r=b.InternalInjectionPool.hittask();r&&((o=new r).setOptions(t.options),i=n,o.pushHandler(function(){return i.call}),n=o.process)}catch(e){}f.on(s,e,function(e){n.call(t.thisArg,e,s)})}else"function"==typeof t&&f.on(s,e,t)}),0<r.length&&f.bindProp&&f.bindProp(s,{keys:function(){return r},length:function(){return r.length},get:function(e){return i[e]},reg:function(n,e){"function"==typeof e&&e(function(e){var t=i[n];if(!p(t))return i[n]=t,!1;if("function"==typeof t.set)t.set(e);else if("function"==typeof t.next)t.next(e);else{if("function"!=typeof t)return!1;t(e)}return!0})},contain:function(e){return 0<=Object.keys(i).indexOf(e)},on:function(e,t){f.on(s,e,t)}}),t&&e.parent&&f.append(e.parent,o.element),f.onInit(s),"function"==typeof e.onInit&&e.onInit(s),"function"==typeof u.onInit&&u.onInit(s),u.children&&(u.children instanceof Array?u.children.forEach(function(n){n&&c(o.element,n,{onInit:function(e){var t=e.element();t&&(f.append(o.element,t),n.key&&"string"==typeof n.key&&(o.keyRefs[n.key]=e))},keyRefs:o.keyRefs,appendMode:!0})}):"string"==typeof u.children&&f.setTextValue(s,u.children)),"function"==typeof u.onLoad&&u.onLoad(s),"function"==typeof e.onLoad&&e.onLoad(s),s.element()}}function c(e,t,n){var o,i;if(3<arguments.length&&arguments[3]&&("function"==typeof(i=arguments[3]).initView&&"function"==typeof i.alive&&(o=i)),o=o||x(),t&&o){n?"string"==typeof n&&("html"===n.toLowerCase()&&(o=w()),n={}):n={};var r=n.appendMode,f=n.keyRefs&&"object"==typeof n.keyRefs,s=t.key;s&&"string"==typeof s||(s=void 0);var u,p,c,a,l,y,d,h,v=(u=r?void 0:e,p=t,c=function(e){var t=e.element;return!!t&&(!!o.alive(t)||(delete e.element,e.info={},f?s&&delete e.keyRefs[s]:e.keyRefs={},o.unmount(t),e.dispose(),!1))},a=function(e,t){R(o,g,t)},l=new b.DisposableArray,d={element:u,keyRefs:{},inheritRefs:!(y={}),model:p,info:{},dispose:function(){y=k.contextHandlers,l.dispose()}},h={element:function(){return d.element},model:function(){return d.model},pushDisposable:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return l.push.apply(l,e)},removeDisposable:function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return l.remove.apply(l,e)},info:function(e,t){return 1<arguments.length&&(void 0===t?delete d.info[e]:d.info[e]=t),d.info[e]},childContext:function(e){return e?"string"==typeof e?d.keyRefs[e]:void 0:h},alive:function(){return y.alive()},refresh:function(){y.refresh()}},y.alive=function(){return c(d,h)},y.refresh=function(){a(d,h)},h.info.contain=function(e){return 0<=Object.keys(d.info).indexOf(e)},h.info.keys=function(){return Object.keys(d.info)},h.childContext.contain=function(e){return 0<=Object.keys(d.keyRefs).indexOf(e)},h.childContext.keys=function(){return Object.keys(d.keyRefs)},h.childContext.remove=function(e){if(e)if("string"!=typeof e&&"symbol"!=typeof e){if(e instanceof Array)for(var t in e){var n=e[t];n&&("string"!=typeof n&&"symbol"!=typeof n||delete d.keyRefs[n])}}else delete d.keyRefs[e]},{context:h,bag:d}),m=v.context,g=v.bag;return f&&(g.keyRefs=n.keyRefs,g.inheritRefs=!0),s&&(g.keyRefs[s]=m),R(o,g,m,n),m}}b.MemoryJsonGenerator=i,b.viewGenerator=x,b.render=c}(Hje=Hje||{}),"function"==typeof define?!define.amd&&"undefined"==typeof __webpack_require__||define(["exports"],function(e){return Hje}):"function"==typeof require&&"object"==typeof exports&&"object"==typeof module&&(module.exports=Hje),Hje=Hje||{};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2e35600..aac9724 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,23 +5,39 @@
   "requires": true,
   "dependencies": {
     "@gulp-sourcemaps/identity-map": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz",
-      "integrity": "sha512-ciiioYMLdo16ShmfHBXJBOFm3xPC4AuwO4xeRpFeHz7WK9PYsWCmigagG2XyzZpubK4a3qNKoUBDhbzHfa50LQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-2.0.1.tgz",
+      "integrity": "sha512-Tb+nSISZku+eQ4X1lAkevcQa+jknn/OVUgZ3XCxEKIsLsqYuPoJwJOPQeaOk75X3WPftb29GWY1eqE7GLsXb1Q==",
       "dev": true,
       "requires": {
-        "acorn": "^5.0.3",
-        "css": "^2.2.1",
-        "normalize-path": "^2.1.1",
+        "acorn": "^6.4.1",
+        "normalize-path": "^3.0.0",
+        "postcss": "^7.0.16",
         "source-map": "^0.6.0",
-        "through2": "^2.0.3"
+        "through2": "^3.0.1"
       },
       "dependencies": {
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "through2": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.4",
+            "readable-stream": "2 || 3"
+          }
         }
       }
     },
@@ -36,9 +52,9 @@
       }
     },
     "acorn": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
       "dev": true
     },
     "ansi-colors": {
@@ -65,6 +81,15 @@
       "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
       "dev": true
     },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
     "ansi-wrap": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
@@ -411,6 +436,28 @@
       "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
       "dev": true
     },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -529,6 +576,21 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -597,15 +659,14 @@
       "dev": true
     },
     "css": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
-      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
       "dev": true,
       "requires": {
-        "inherits": "^2.0.3",
+        "inherits": "^2.0.4",
         "source-map": "^0.6.1",
-        "source-map-resolve": "^0.5.2",
-        "urix": "^0.1.0"
+        "source-map-resolve": "^0.6.0"
       },
       "dependencies": {
         "source-map": {
@@ -613,6 +674,16 @@
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "source-map-resolve": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+          "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+          "dev": true,
+          "requires": {
+            "atob": "^2.1.2",
+            "decode-uri-component": "^0.2.0"
+          }
         }
       }
     },
@@ -647,9 +718,9 @@
       },
       "dependencies": {
         "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -844,6 +915,12 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
     "event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -1316,22 +1393,22 @@
       }
     },
     "gulp-sourcemaps": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-2.6.5.tgz",
-      "integrity": "sha512-SYLBRzPTew8T5Suh2U8jCSDKY+4NARua4aqjj8HOysBh2tSgT9u4jc1FYirAdPx1akUxxDeK++fqw6Jg0LkQRg==",
-      "dev": true,
-      "requires": {
-        "@gulp-sourcemaps/identity-map": "1.X",
-        "@gulp-sourcemaps/map-sources": "1.X",
-        "acorn": "5.X",
-        "convert-source-map": "1.X",
-        "css": "2.X",
-        "debug-fabulous": "1.X",
-        "detect-newline": "2.X",
-        "graceful-fs": "4.X",
-        "source-map": "~0.6.0",
-        "strip-bom-string": "1.X",
-        "through2": "2.X"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-sourcemaps/-/gulp-sourcemaps-3.0.0.tgz",
+      "integrity": "sha512-RqvUckJkuYqy4VaIH60RMal4ZtG0IbQ6PXMNkNsshEGJ9cldUPRb/YCgboYae+CLAs1HQNb4ADTKCx65HInquQ==",
+      "dev": true,
+      "requires": {
+        "@gulp-sourcemaps/identity-map": "^2.0.1",
+        "@gulp-sourcemaps/map-sources": "^1.0.0",
+        "acorn": "^6.4.1",
+        "convert-source-map": "^1.0.0",
+        "css": "^3.0.0",
+        "debug-fabulous": "^1.0.0",
+        "detect-newline": "^2.0.0",
+        "graceful-fs": "^4.0.0",
+        "source-map": "^0.6.0",
+        "strip-bom-string": "^1.0.0",
+        "through2": "^2.0.0"
       },
       "dependencies": {
         "source-map": {
@@ -1406,6 +1483,12 @@
         "glogg": "^1.0.0"
       }
     },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
     "has-gulplog": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
@@ -1485,9 +1568,9 @@
       "dev": true
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
     "interpret": {
@@ -2293,6 +2376,25 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
+    "postcss": {
+      "version": "7.0.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -2821,6 +2923,15 @@
       "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=",
       "dev": true
     },
+    "supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
     "sver-compat": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/sver-compat/-/sver-compat-1.5.0.tgz",
@@ -2941,9 +3052,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.9.6",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.6.tgz",
-      "integrity": "sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.2.tgz",
+      "integrity": "sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==",
       "dev": true
     },
     "uglify-js": {
@@ -3196,9 +3307,9 @@
       "dev": true
     },
     "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==",
       "dev": true
     },
     "yargs": {
@@ -3223,12 +3334,13 @@
       }
     },
     "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.1.tgz",
+      "integrity": "sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^3.0.0",
+        "object.assign": "^4.1.0"
       }
     }
   }
diff --git a/package.json b/package.json
index 09f1dae..16b0f9b 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,9 @@
   "homepage": "https://github.com/compositejs/hje/wiki",
   "devDependencies": {
     "gulp": "^4.0.2",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
-    "typescript": "^3.9.6"
+    "typescript": "^4.2.3"
   }
 }
diff --git a/src/render.ts b/src/render.ts
index f31de76..9126a2a 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -146,7 +146,34 @@ export class HtmlGenerator implements ViewGeneratorContract<HTMLElement> {
     initView(context: ViewGeneratingContextContract<HTMLElement>, tagName: string) {
         let ele = context.element();
         let eleType = typeof ele;
-        if (!ele || eleType === "symbol" || ele as any === true) return document.createElement(tagName || "div");
+        if (!ele || eleType === "symbol" || ele as any === true) {
+            let tagNs = (context.model() || {} as any).tagNamespace;
+            if (!tagNs && tagName && tagName.indexOf(":") >= 0) {
+                if (tagName.startsWith("svg:")) {
+                    tagNs = "http://www.w3.org/2000/svg";
+                    tagName = tagName.substring(4);
+                    if (!tagName) tagName = "svg";
+                } else if (tagName.startsWith("mathml:")) {
+                    tagNs = "http://www.w3.org/1998/Math/MathML";
+                    tagName = tagName.substring(7);
+                    if (!tagName) tagName = "math";
+                } else if (tagName.startsWith("math:")) {
+                    tagNs = "http://www.w3.org/1998/Math/MathML";
+                    tagName = tagName.substring(5);
+                    if (!tagName) tagName = "math";
+                } else if (tagName.startsWith("html:")) {
+                    tagNs = "http://www.w3.org/1999/xhtml";
+                    tagName = tagName.substring(5);
+                } else if (tagName.startsWith(":")) {
+                    tagName = tagName.substring(6);
+                }
+            }
+
+            return tagNs
+                ? document.createElementNS(tagNs, tagName || this.defaultTagName || "div")
+                : document.createElement(tagName || this.defaultTagName || "div");
+        }
+        
         if (eleType === "string") ele = document.getElementById(ele as any);
         else if (eleType === "number") ele = document.body.children[ele as any] as HTMLElement;
         if (ele) ele.innerHTML = "";