pome-ui 2.0.0-preview3 → 2.0.0-preview5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pome-ui",
-  "version": "2.0.0-preview3",
+  "version": "2.0.0-preview5",
   "description": "Front-end MVC library",
   "main": "pome-ui.js",
   "bin": {

package/pome-cache-query.js

@@ -90,9 +90,8 @@
         return result;
     }
 
-    function SetOptions(options) {
+    function UseConfig(options) {
         _combineObject(options, _options);
-        console.log(_options);
     }
 
     function _toUrlString(params, questionMark = true, ignore = null) {
@@ -317,7 +316,7 @@
     exports.put = put;
     exports.patch = patch;
     exports.delete = _delete;
-    exports.setOptions = SetOptions;
+    exports.useConfig = UseConfig;
 
     return exports;
 

package/pome-cache-query.min.js

@@ -1 +1 @@
-(function(e){if(typeof e!="undefined"&&e.get){return e}function n(e,n){if(!e){return}var t=Object.getOwnPropertyNames(e);for(var r=0;r<t.length;++r){n[t[r]]=e[t[r]]}}var f={isPagedResult(e){if(e.totalRecords==undefined||e.totalPages===undefined||e.currentPage===undefined||e.pageSize===undefined)return false;else return true},beforeSend:function(e){},onError:function(e,n){return Promise.resolve(e)},onSucceeded:function(e,n){return Promise.resolve(e)},baseUrl:null,batch:null,batchInterval:null,batchTimeout:10};var t=[];var r=function(e){var n=[];for(var t=0;t<e.length;++t){n.push(e[t])}return n};if(f.batch){setInterval(function(){if(!t.length){return}f.batch(t,h,f);t=[]},f.batchInterval||50)}function o(e){var n=JSON.stringify(e);return JSON.parse(n)}function a(e){var n=[];if(!e||typeof e!=="object")return n;for(var t in e){if(e[t])n.push(t)}return n}var u={};var i={};var s={};function c(e,n=null){n=n||"1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";var t="";for(var r=e;r>0;--r){t+=n[Math.floor(Math.random()*n.length)]}return t}function l(e){n(e,f);console.log(f)}function d(e,n=true,t=null){var r=Object.keys(e).sort();if(!r.length)return"";var o=n?"?":"";for(var a=0;a<r.length;a++){if(t){if(t.some(e=>e==r[a])){continue}}o+=r[a]+"="+encodeURI(e[r[a]])+"&"}return o.substr(0,o.length-1)}function p(e){e=e.substr(e.indexOf("?")+1);var n=e.split("&");var t={};for(var r=0;r<n.length;r++){var o=n[r].split("=");t[o[0]]=decodeURI(o[1])}return t}function v(e,n,t){var r=o(n);if(t&&r.page)delete r.page;return e+d(r)}function g(e){return f.isPagedResult(e)}function h(n){var t=new XMLHttpRequest;t.open(n.type,n.url);t.setRequestHeader("Content-Type",n.contentType);if(n.beforeSend){n.beforeSend(t)}if(typeof n.data!=="string"){if(n.contentType.toLocaleLowerCase()=="application/json"){n.data=JSON.stringify(n.data)}else if(n.contentType.toLocaleLowerCase()=="application/octet-stream"){}else{n.data=d(n.data,false)}}t.send(n.data);t.onreadystatechange=function(){if(t.readyState==4){var e=n.dataType=="json"?JSON.parse(t.responseText):t.responseText;if(t.status>=200&&t.status<300){n.success(e,t)}else{n.error(e,t)}}};return t}function b(e){if(e.indexOf("//")>=0){return e}else if(f.baseUrl){return f.baseUrl+e}else{return e}}function y(o,a,u,e,i){e=e||"json";i=i||"application/json";u=a=="GET"?null:u;o=b(o);if(!f.batch||e!="json"||i!="application/json"){var n=this;return new Promise(function(n,t){var r=h({url:o,type:a,dataType:e,contentType:i||"application/json",data:a=="GET"?null:u,success:function(e){f.onSucceeded(e,r).then(function(e){n(e)})},error:function(e){return f.onError(e,r).then(function(e){t(e)})},beforeSend:function(e){f.beforeSend(e)}})})}else{return new Promise(function(e,n){t.push({resolve:e,reject:n,request:{requestId:c(32),url:o,method:a,body:u?JSON.stringify(u):null,contentType:"application/json",timeout:f.batchTimeout}})})}}function m(e,n,t,r){var o=Object.getOwnPropertyNames(n||{});if(o.length){if(e.indexOf("?")>=0){e+="&"}else{e+="?"}}for(var a=0;a<o.length;++a){var u=o[a];e+=encodeURIComponent(u)+"="+encodeURIComponent(n[u]||"")+"&"}if(o.length){e=e.substr(0,e.length-1)}return y(e,"GET",n,t,r)}function O(e,n,t,r){return y(e,"POST",n,t,r)}function T(e,n,t,r){return y(e,"PATCH",n,t,r)}function j(e,n,t,r){return y(e,"PUT",n,t,r)}function S(e,n,t){var r=Object.getOwnPropertyNames(n||{});if(r.length){if(e.indexOf("?")>=0){e+="&"}else{e+="?"}}for(var o=0;o<r.length;++o){var a=r[o];e+=encodeURIComponent(a)+"="+encodeURIComponent(n[a]||"")+"&"}if(r.length){e=e.substr(0,e.length-1)}return y(e,"DELETE",n,t)}function P(e,n){var t=a(n);var r=v(e,n,t.some(e=>e==="page"));if(u[r]){delete u[r]}}function w(e,n,t,r){var o;if(!i[e])i[e]=[];var a=g(t);if(!a){o=v(e,n);u[o]=t}else{o=v(e,n,true);if(!u[o])u[o]={isPaged:true};u[o][t.data.current]=t}if(!i[e].some(e=>e==o))i[e].push(o);if(r)s[o]=(new Date).getTime()+r}e.generateQueryStringFromObject=d;e.generateObjectFromQueryString=p;e.xhrRequest=h;e.request=y;e.get=m;e.post=O;e.put=j;e.patch=T;e.delete=S;e.setOptions=l;return e})(typeof exports==="object"&&typeof module!=="undefined"?exports:function(){window.cq={};return window.cq}());
+(function(e){if(typeof e!="undefined"&&e.get){return e}function n(e,n){if(!e){return}var t=Object.getOwnPropertyNames(e);for(var r=0;r<t.length;++r){n[t[r]]=e[t[r]]}}var f={isPagedResult(e){if(e.totalRecords==undefined||e.totalPages===undefined||e.currentPage===undefined||e.pageSize===undefined)return false;else return true},beforeSend:function(e){},onError:function(e,n){return Promise.resolve(e)},onSucceeded:function(e,n){return Promise.resolve(e)},baseUrl:null,batch:null,batchInterval:null,batchTimeout:10};var t=[];var r=function(e){var n=[];for(var t=0;t<e.length;++t){n.push(e[t])}return n};if(f.batch){setInterval(function(){if(!t.length){return}f.batch(t,h,f);t=[]},f.batchInterval||50)}function o(e){var n=JSON.stringify(e);return JSON.parse(n)}function a(e){var n=[];if(!e||typeof e!=="object")return n;for(var t in e){if(e[t])n.push(t)}return n}var u={};var i={};var s={};function c(e,n=null){n=n||"1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";var t="";for(var r=e;r>0;--r){t+=n[Math.floor(Math.random()*n.length)]}return t}function l(e){n(e,f)}function d(e,n=true,t=null){var r=Object.keys(e).sort();if(!r.length)return"";var o=n?"?":"";for(var a=0;a<r.length;a++){if(t){if(t.some(e=>e==r[a])){continue}}o+=r[a]+"="+encodeURI(e[r[a]])+"&"}return o.substr(0,o.length-1)}function p(e){e=e.substr(e.indexOf("?")+1);var n=e.split("&");var t={};for(var r=0;r<n.length;r++){var o=n[r].split("=");t[o[0]]=decodeURI(o[1])}return t}function v(e,n,t){var r=o(n);if(t&&r.page)delete r.page;return e+d(r)}function g(e){return f.isPagedResult(e)}function h(n){var t=new XMLHttpRequest;t.open(n.type,n.url);t.setRequestHeader("Content-Type",n.contentType);if(n.beforeSend){n.beforeSend(t)}if(typeof n.data!=="string"){if(n.contentType.toLocaleLowerCase()=="application/json"){n.data=JSON.stringify(n.data)}else if(n.contentType.toLocaleLowerCase()=="application/octet-stream"){}else{n.data=d(n.data,false)}}t.send(n.data);t.onreadystatechange=function(){if(t.readyState==4){var e=n.dataType=="json"?JSON.parse(t.responseText):t.responseText;if(t.status>=200&&t.status<300){n.success(e,t)}else{n.error(e,t)}}};return t}function b(e){if(e.indexOf("//")>=0){return e}else if(f.baseUrl){return f.baseUrl+e}else{return e}}function y(o,a,u,e,i){e=e||"json";i=i||"application/json";u=a=="GET"?null:u;o=b(o);if(!f.batch||e!="json"||i!="application/json"){var n=this;return new Promise(function(n,t){var r=h({url:o,type:a,dataType:e,contentType:i||"application/json",data:a=="GET"?null:u,success:function(e){f.onSucceeded(e,r).then(function(e){n(e)})},error:function(e){return f.onError(e,r).then(function(e){t(e)})},beforeSend:function(e){f.beforeSend(e)}})})}else{return new Promise(function(e,n){t.push({resolve:e,reject:n,request:{requestId:c(32),url:o,method:a,body:u?JSON.stringify(u):null,contentType:"application/json",timeout:f.batchTimeout}})})}}function m(e,n,t,r){var o=Object.getOwnPropertyNames(n||{});if(o.length){if(e.indexOf("?")>=0){e+="&"}else{e+="?"}}for(var a=0;a<o.length;++a){var u=o[a];e+=encodeURIComponent(u)+"="+encodeURIComponent(n[u]||"")+"&"}if(o.length){e=e.substr(0,e.length-1)}return y(e,"GET",n,t,r)}function T(e,n,t,r){return y(e,"POST",n,t,r)}function O(e,n,t,r){return y(e,"PATCH",n,t,r)}function j(e,n,t,r){return y(e,"PUT",n,t,r)}function S(e,n,t){var r=Object.getOwnPropertyNames(n||{});if(r.length){if(e.indexOf("?")>=0){e+="&"}else{e+="?"}}for(var o=0;o<r.length;++o){var a=r[o];e+=encodeURIComponent(a)+"="+encodeURIComponent(n[a]||"")+"&"}if(r.length){e=e.substr(0,e.length-1)}return y(e,"DELETE",n,t)}function P(e,n){var t=a(n);var r=v(e,n,t.some(e=>e==="page"));if(u[r]){delete u[r]}}function w(e,n,t,r){var o;if(!i[e])i[e]=[];var a=g(t);if(!a){o=v(e,n);u[o]=t}else{o=v(e,n,true);if(!u[o])u[o]={isPaged:true};u[o][t.data.current]=t}if(!i[e].some(e=>e==o))i[e].push(o);if(r)s[o]=(new Date).getTime()+r}e.generateQueryStringFromObject=d;e.generateObjectFromQueryString=p;e.xhrRequest=h;e.request=y;e.get=m;e.post=T;e.put=j;e.patch=O;e.delete=S;e.useConfig=l;return e})(typeof exports==="object"&&typeof module!=="undefined"?exports:function(){window.cq={};return window.cq}());

package/pome-ui.dev.js

@@ -4586,6 +4586,7 @@ var Vue = (function (exports) {
       $mounted: i => i.$mounted,
       $layout: i => i.$layout,
       $app: i => i.$app,
+      $baseMethods: i => i.$baseMethods,
       $view: i => i.$view
 
   });
@@ -15945,7 +15946,7 @@ var Vue = (function (exports) {
 
 window.Vue = Vue;
 
-function buildPomeloUI(options, exports) {
+function build(options, exports) {
     if (typeof exports == 'undefined') {
         exports = {};
     }
@@ -15960,6 +15961,17 @@ function buildPomeloUI(options, exports) {
         httpGet: function (url) {
             return fetch(url);
         },
+        httpGetSync: function (url) {
+            if (useRelativePath) {
+                if (url.length && url[0] == '/') {
+                    url = url.substr(1);
+                }
+            }
+            var xhr = new XMLHttpRequest();
+            xhr.open('get', url, false);
+            xhr.send();
+            return xhr.responseText;
+        },
         onNotFound: function (url, options) {
             if (url.indexOf('/404') == 0) {
                 throw 'No not-found template found';
@@ -15984,9 +15996,6 @@ function buildPomeloUI(options, exports) {
         },
         resetDataWhenReuseContainerActiveView(viewName) {
             return true;
-        },
-        getRoutePath() {
-            return '/shared/_routes.json';
         }
     };
 
@@ -16057,18 +16066,17 @@ function buildPomeloUI(options, exports) {
     function root() {
         return _root;
     };
-    window._rules = {};
-    // Fetch route rules
-    var _loadRoutePromise = _httpGet(_options.getRoutePath()).then(function (rules) {
-        var rules = JSON.parse(rules);
-        if (!window._rules) {
-            window._rules = {};
-        }
-        _combineObject(rules, window._rules);
-    }).catch(err => {
-        console.error('No route provided. Please prepare /shared/_routes.json file and try again.');
-    });
 
+    exports._rules = [];
+
+    function useRoutes(url) {
+        var rules = _options.httpGetSync(url);
+        rules = JSON.parse(rules);
+        if (!exports._rules) {
+            exports._rules = {};
+        }
+        _combineObject(rules, exports._rules);
+    }
 
     // Internal
     function _combineObject(src, dest) {
@@ -16162,6 +16170,7 @@ function buildPomeloUI(options, exports) {
                     if (!component.template) {
                         component.template = template;
                     }
+                    _patchComponent(url, component);
                     return Promise.resolve(component);
                 });
             })
@@ -16402,6 +16411,7 @@ function buildPomeloUI(options, exports) {
             }
             _attachContainer(instance);
         };
+
         return _resolveModules(options.modules, layout).then(function () {
             return _loadComponents(options.components || [], layout).then(function (components) {
                 var app = Vue.createApp(options || {});
@@ -16452,22 +16462,19 @@ function buildPomeloUI(options, exports) {
             UpdateLayout();
         };
 
-        _loadRoutePromise.then(function () {
-            return UpdateLayout();
-        });
-
+        return UpdateLayout();
     }
 
-    function SetOptions(options) {
+    function UseConfig(options) {
         _combineObject(options, _options);
     }
 
-    function Route(rule, view) {
-        if (!window._rules) {
-            window._rules = {};
+    function MapRoute(rule, view) {
+        if (!exports._rules) {
+            exports._rules = {};
         }
 
-        window._rules[rule] = view;
+        exports._rules[rule] = view;
     }
 
     function ForceUpdate(proxy = exports.root()) {
@@ -16538,11 +16545,11 @@ function buildPomeloUI(options, exports) {
             return cnt;
         }
 
-        var keys = Object.getOwnPropertyNames(window._rules);
+        var keys = Object.getOwnPropertyNames(exports._rules);
         for (var i = 0; i < keys.length; ++i) {
             var rule = keys[i];
             var isHash = rule[0] == '#';
-            var view = window._rules[keys[i]];
+            var view = exports._rules[keys[i]];
             var matches = matchAll(rule);
             var params = [];
             var patterns = [];
@@ -16885,14 +16892,9 @@ function buildPomeloUI(options, exports) {
 
             if (layout) {
                 var layoutName = layout + (mobile ? '.m' : '');
+                var _layoutHtml;
                 return _httpGet(layoutName + '.html').then(function (layoutHtml) {
-                    var htmlBeginTagIndex = layoutHtml.indexOf('<html');
-                    var htmlBeginTagIndex2 = layoutHtml.indexOf('>', htmlBeginTagIndex);
-                    layoutHtml = layoutHtml.substr(htmlBeginTagIndex2 + 1);
-                    var htmlEndTagIndex = layoutHtml.lastIndexOf('</html>');
-                    layoutHtml = layoutHtml.substr(0, htmlEndTagIndex);
-                    document.querySelector('html').innerHTML = layoutHtml;
-
+                    _layoutHtml = layoutHtml;
                     return _httpGet(layout + ".js");
                 }).then(function (js) {
                     var _opt = null;
@@ -16914,6 +16916,15 @@ function buildPomeloUI(options, exports) {
                             instance.$app = exports;
                         }
 
+                        _opt.template = _layoutHtml;
+                        _patchComponent(layout, _opt);
+                        _layoutHtml = _opt.template;
+                        var htmlBeginTagIndex = _layoutHtml.indexOf('<html');
+                        var htmlBeginTagIndex2 = _layoutHtml.indexOf('>', htmlBeginTagIndex);
+                        _layoutHtml = _layoutHtml.substr(htmlBeginTagIndex2 + 1);
+                        var htmlEndTagIndex = _layoutHtml.lastIndexOf('</html>');
+                        _layoutHtml = _layoutHtml.substr(0, htmlEndTagIndex);
+                        document.querySelector('html').innerHTML = _layoutHtml;
                         var dataFunc = options.data;
                         options.data = function () {
                             var data = dataFunc.call(this, exports);
@@ -16925,8 +16936,9 @@ function buildPomeloUI(options, exports) {
                         var ticks = new Date().getTime();
                         var appId = 'pomelo-' + ticks;
                         var containerId = 'container-' + ticks;
-                        document.querySelector('body').innerHTML = '<div id="' + appId + '">' + document.querySelector('body').innerHTML.replace('<render-body></render-body>', '<div id="' + containerId + '"></div>') + '</div>'
-
+                        var body = document.querySelector('body').innerHTML.replace('<render-body></render-body>', '<div id="' + containerId + '"></div>');
+                        document.querySelector('body').innerHTML = '<div id="' + appId + '">' + body + '</div>';
+                        options.template = null;
                         // Hook mounted
                         if (!options.mounted) {
                             options.mounted = function () { };
@@ -16996,6 +17008,7 @@ function buildPomeloUI(options, exports) {
                         return data;
                     }
                     hookMountedAndUnmounted(_opt, viewName);
+                    _patchComponent(viewName, _opt);
                     return _resolveModules(_opt.modules, viewName).then(function () {
                         PageNext(_opt);
                         return Promise.resolve();P
@@ -17141,6 +17154,9 @@ function buildPomeloUI(options, exports) {
                     var instance = Vue.getCurrentInstance();
                     instance.$app = exports;
                 }
+
+                _patchComponent(c, _opt);
+
                 var originData = _opt.data || function () {
                     return {};
                 };
@@ -17166,17 +17182,259 @@ function buildPomeloUI(options, exports) {
         });
     }
 
+    exports._addins = [];
+
+    function _patchComponent(view, opt) {
+        var prepared = false;
+        for (var i = 0; i < exports._addins.length; ++i) {
+            var v = exports._addins[i].view;
+            var addin = exports._addins[i].opt;
+            if (v != '*' && view != v) {
+                continue;
+            }
+
+            // Prepare
+            if (!prepared) {
+                prepared = true;
+                if (!opt.data) {
+                    opt.data = function () {
+                        return {};
+                    };
+                }
+
+                if (!opt.style) {
+                    opt.style = [];
+                }
+
+                if (!opt.style instanceof Array) {
+                    if (opt.style instanceof String) {
+                        opt.style = [opt.style];
+                    } else {
+                        opt.style = ['@(css)'];
+                    }
+                }
+
+                if (!opt.components) {
+                    opt.components = [];
+                }
+
+                if (!opt.created) {
+                    opt.created = function () { };
+                }
+
+                if (!opt.mounted) {
+                    opt.mounted = function () { };
+                }
+
+                if (!opt.unmounted) {
+                    opt.unmounted = function () { };
+                }
+
+                if (!opt.destroyed) {
+                    opt.destroyed = function () { };
+                }
+
+                if (!opt.watch) {
+                    opt.watch = {};
+                }
+
+                if (!opt.computed) {
+                    opt.computed = {};
+                }
+            }
+            
+            if (addin.style) {
+                if (addin.style instanceof Boolean) {
+                    addin.style = [ '@(css)' ];
+                }
+
+                if (addin.style instanceof String) {
+                    addin.style = [addin.style];
+                }
+
+                addin.style.forEach(function (s) {
+                    if (!opt.style.some(x => x == s)) {
+                        opt.push(s);
+                    }
+                });
+            }
+
+            if (addin.components) {
+                addin.components.forEach(function (c) {
+                    if (!opt.components.some(x => x == c)) {
+                        opt.components.push(c);
+                    }
+                });
+            }
+
+            if (addin.layout) {
+                opt.layout = addin.layout;
+            }
+
+            if (addin.props) {
+                if (!opt.props) {
+                    opt.props = [];
+                }
+
+                addin.props.forEach(function (p) {
+                    if (!opt.props.some(x => x == p)) {
+                        opt.props.push(p);
+                    }
+                });
+            }
+
+            if (addin.watch) {
+                var properties = Object.getOwnPropertyNames(addin.watch);
+                properties.forEach(function (key) {
+                    opt.watch[key] = addin.watch[key];
+                });
+            }
+
+            if (addin.computed) {
+                var properties = Object.getOwnPropertyNames(addin.computed);
+                properties.forEach(function (key) {
+                    opt.computed[key] = addin.computed[key];
+                });
+            }
+
+            if (addin.methods) {
+                var setup = opt.setup || function (props, context) {
+                };
+
+                opt.setup = function (props, context) {
+                    setup(props, context);
+                    var methods = {};
+                    var originMethods = Object.getOwnPropertyNames(opt.methods);
+                    originMethods.forEach(function (m) {
+                        methods[m] = opt.methods[m];
+                    });
+                    var instance = Vue.getCurrentInstance();
+                    instance.$baseMethods = methods;
+                };
+
+                var addinMethods = Object.getOwnPropertyNames(addin.methods);
+                addinMethods.forEach(function (m) {
+                    opt.methods[m] = addin.methods[m];
+                });
+            }
+
+            if (addin.created) {
+                var func = opt.created;
+                opt.created = async function () {
+                    var p1 = func.call(this);
+                    if (!p1 || !p1 instanceof Promise) {
+                        p1 = Promise.resolve();
+                    }
+
+                    return p1.then(function () {
+                        var p2 = addin.created.call(this);
+                        if (!p2 instanceof Promise) {
+                            p2 = Promise.resolve();
+                        }
+                        return p2;
+                    });
+                };
+            }
+
+            if (addin.mounted) {
+                var func = opt.mounted;
+                opt.mounted = async function () {
+                    var p1 = func.call(this);
+                    if (!p1 || !p1 instanceof Promise) {
+                        p1 = Promise.resolve();
+                    }
+
+                    return p1.then(function () {
+                        var p2 = addin.mounted.call(this);
+                        if (!p2 instanceof Promise) {
+                            p2 = Promise.resolve();
+                        }
+                        return p2;
+                    });
+                };
+            }
+
+            if (addin.unmounted) {
+                var func = opt.unmounted;
+                opt.unmounted = async function () {
+                    var p1 = func.call(this);
+                    if (!p1 || !p1 instanceof Promise) {
+                        p1 = Promise.resolve();
+                    }
+
+                    return p1.then(function () {
+                        var p2 = addin.unmounted.call(this);
+                        if (!p2 instanceof Promise) {
+                            p2 = Promise.resolve();
+                        }
+                        return p2;
+                    });
+                };
+            }
+
+            if (addin.destroyed) {
+                var func = opt.destroyed;
+                opt.destroyed = async function () {
+                    var p1 = func.call(this);
+                    if (!p1 || !p1 instanceof Promise) {
+                        p1 = Promise.resolve();
+                    }
+
+                    return p1.then(function () {
+                        var p2 = addin.destroyed.call(this);
+                        if (!p2 instanceof Promise) {
+                            p2 = Promise.resolve();
+                        }
+                        return p2;
+                    });
+                };
+            }
+
+            if (addin.template) {
+                if (addin.template instanceof Function) {
+                    if (opt.template) {
+                        if (opt.template.indexOf('<html') >= 0) {
+                            var template = new DOMParser().parseFromString(opt.template, 'text/html');
+                            addin.template(template);
+                            opt.template = new XMLSerializer().serializeToString(template);
+                        } else {
+                            opt.template = `<pome-ui-template>${opt.template}</pome-ui-template>`
+                            var template = new DOMParser().parseFromString(opt.template, 'text/html');
+                            addin.template(template);
+                            opt.template = new XMLSerializer().serializeToString(template);
+                            opt.template = opt.template.substr(opt.template.indexOf('<pome-ui-template>') + '<pome-ui-template>'.length);
+                            opt.template = opt.template.substr(0, opt.template.indexOf('</pome-ui-template>'));
+                        }
+                    }
+                } else {
+                    opt.template = addin.template;
+                }
+            }
+        }
+    }
+
+    function UseAddin(addinUrl) {
+        var Addin = function (view, opt) {
+            exports._addins.push({view, opt});
+        };
+
+        var js = _options.httpGetSync(addinUrl);
+        eval(js);
+    }
+
     exports.root = root;
-    exports.setOptions = SetOptions;
-    exports.route = Route;
+    exports.useConfig = UseConfig;
+    exports.mapRoute = MapRoute;
     exports.matchRoute = MatchRoute;
     exports.updateLayout = UpdateLayout;
     exports.redirect = Redirect;
     exports.loadScript = LoadScript;
     exports.forceUpdate = ForceUpdate;
     exports.mount = mount;
+    exports.useRoutes = useRoutes;
+    exports.useAddin = UseAddin;
 
     return exports;
 };
 
-exports.buildPomeloUI = buildPomeloUI;
+exports.build = build;