pome-ui 2.0.0-preview4 → 2.0.0-preview5

package/package.json

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

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
 
   });
@@ -16169,6 +16170,7 @@ function build(options, exports) {
                     if (!component.template) {
                         component.template = template;
                     }
+                    _patchComponent(url, component);
                     return Promise.resolve(component);
                 });
             })
@@ -16409,6 +16411,7 @@ function build(options, exports) {
             }
             _attachContainer(instance);
         };
+
         return _resolveModules(options.modules, layout).then(function () {
             return _loadComponents(options.components || [], layout).then(function (components) {
                 var app = Vue.createApp(options || {});
@@ -16889,14 +16892,9 @@ function build(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;
@@ -16918,6 +16916,15 @@ function build(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);
@@ -16929,8 +16936,9 @@ function build(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 () { };
@@ -17000,6 +17008,7 @@ function build(options, exports) {
                         return data;
                     }
                     hookMountedAndUnmounted(_opt, viewName);
+                    _patchComponent(viewName, _opt);
                     return _resolveModules(_opt.modules, viewName).then(function () {
                         PageNext(_opt);
                         return Promise.resolve();P
@@ -17145,6 +17154,9 @@ function build(options, exports) {
                     var instance = Vue.getCurrentInstance();
                     instance.$app = exports;
                 }
+
+                _patchComponent(c, _opt);
+
                 var originData = _opt.data || function () {
                     return {};
                 };
@@ -17170,6 +17182,246 @@ function build(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.useConfig = UseConfig;
     exports.mapRoute = MapRoute;
@@ -17180,6 +17432,7 @@ function build(options, exports) {
     exports.forceUpdate = ForceUpdate;
     exports.mount = mount;
     exports.useRoutes = useRoutes;
+    exports.useAddin = UseAddin;
 
     return exports;
 };