From e1b2287b495aa98b9ed7d466a5bad946c0d988f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Sun, 28 Oct 2018 16:35:15 -0400 Subject: [PATCH 1/3] Added navigation ability to router instance --- index.ts | 8 +++-- test/script.js | 97 ++++++++++++++++++-------------------------------- tools.ts | 28 ++++++++------- 3 files changed, 57 insertions(+), 76 deletions(-) diff --git a/index.ts b/index.ts index 4b226f0..0c7577b 100644 --- a/index.ts +++ b/index.ts @@ -4,7 +4,7 @@ import RouteLink from './route-link.es'; import RouterView from './router-view.es'; import { buildRoute, manageHooks, toPlainRoutes, pathToRegExp, generateUrl, - getHashRegExp, clearSlashes, toInternalRoute, navigate, callLeave + getHashRegExp, clearSlashes, toInternalRoute, navigate, callLeave, goToPath } from './tools'; import { Component, InternalRoute, RouteTransition, RouterOptions, ObjectLike, NavigateParam } from './types'; @@ -207,7 +207,11 @@ export default class Router { }; } } - } + } + + go(path: string | number | NavigateParam) { + goToPath(this, path); + } onUrlChange(listener: () => void) { this._onChange.push(listener); diff --git a/test/script.js b/test/script.js index 72776f3..d099fb8 100644 --- a/test/script.js +++ b/test/script.js @@ -280,6 +280,13 @@ function _$isType(value, type) { return _$type(type) === 'string' ? type.split('|').some(function (t) { return t.trim() === _$type(value); }) : value instanceof type; } + function _$dc(component) { + component.$unmount(); + component.$parent = null; + component.$parentEl = null; + component.$siblingEl = null; + component.$children.splice(0, component.$children.length); + } function _$isObject(obj) { return _$isType(obj, 'object'); } @@ -550,11 +557,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); routerView_1 && routerView_1.$destroy(); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = routerViewAnchor_1 = routerView_1 = void 0; @@ -627,11 +630,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); routerView_1 && routerView_1.$destroy(); delete _$state.$root; _$frag = h1_1 = txt_1 = setTxt_1 = p_1 = txt_2 = strong_1 = txt_3 = setTxt_3 = routerViewAnchor_1 = routerView_1 = span_1 = txt_4 = void 0; @@ -683,11 +682,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } @@ -736,11 +731,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } @@ -789,11 +780,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } @@ -842,11 +829,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } @@ -894,11 +877,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); _$rl(button_1, 'click', handlerClickEvent_1); delete _$state.$root; _$frag = h1_1 = p_1 = button_1 = txt_1 = clickEvent_1 = handlerClickEvent_1 = void 0; @@ -932,11 +911,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); delete _$state.$root; _$frag = void 0; } @@ -1096,6 +1071,20 @@ } handler(); } + function goToPath(router, path) { + switch (typeof path) { + case 'number': + history && history.go(path); + break; + case 'object': + var _a = path, name_1 = _a.name, params = _a.params, query = _a.query; + navigate(router, generateUrl(router, { name: name_1, params: params, query: query })); + break; + default: + navigate(router, path); + break; + } + } function buildRoute(router, path) { path = path || '/'; return { @@ -1106,18 +1095,7 @@ name: null, params: {}, go: function (path) { - switch (typeof path) { - case 'number': - history && history.go(path); - break; - case 'object': - var _a = path, name_1 = _a.name, params = _a.params, query = _a.query; - navigate(router, generateUrl(router, { name: name_1, params: params, query: query })); - break; - default: - navigate(router, path); - break; - } + goToPath(router, path); }, back: function () { history && history.go(-1); @@ -1219,11 +1197,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); _$rr(_refs, 'link', _$node_1); _$rl(_$node_1, 'click', handlerClickEvent_1); delete _$state.$root; @@ -1510,6 +1484,9 @@ } } }; + Router.prototype.go = function (path) { + goToPath(this, path); + }; Router.prototype.onUrlChange = function (listener) { this._onChange.push(listener); }; @@ -1793,11 +1770,7 @@ }, $destroy: function() { - this.$unmount(); - this.$parent = null; - this.$parentEl = null; - this.$siblingEl = null; - this.$children.splice(0, this.$children.length); + _$dc(this); routeLink_1 && routeLink_1.$destroy(); routeLink_2 && routeLink_2.$destroy(); routeLink_3 && routeLink_3.$destroy(); diff --git a/tools.ts b/tools.ts index a99fd5a..58ecf93 100644 --- a/tools.ts +++ b/tools.ts @@ -147,6 +147,21 @@ export function manageHooks(handler: () => void, route: RouteTransition, hooks?: handler(); } +export function goToPath(router: Router, path: string | number | NavigateParam) { + switch (typeof path) { + case 'number': + history && history.go(path); + break; + case 'object': + let { name, params, query } = path; + navigate(router, generateUrl(router, { name, params, query })); + break; + default: + navigate(router, path); + break; + } +} + export function buildRoute(router: Router, path: string | null): RouteInstance { path = path || '/'; return { @@ -157,18 +172,7 @@ export function buildRoute(router: Router, path: string | null): RouteInstance { name: null, params: {}, go(path: string | number | NavigateParam) { - switch (typeof path) { - case 'number': - history && history.go(path); - break; - case 'object': - let { name, params, query } = path; - navigate(router, generateUrl(router, { name, params, query })); - break; - default: - navigate(router, path); - break; - } + goToPath(router, path); }, back() { history && history.go(-1); From ae3a7edf2a2dc22ae4158bd4101340dcb4369c79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Wed, 31 Oct 2018 11:28:41 -0400 Subject: [PATCH 2/3] Migrated to use trebor-tools module --- .eslintrc.json | 8 +- index.ts | 20 +- route-link.html | 8 +- router-view.html | 4 +- test/script.js | 1541 ++++++++++++++++++++++------------------------ 5 files changed, 764 insertions(+), 817 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index f117cb0..8dbd3d6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -13,10 +13,10 @@ "sourceType": "module" }, "globals": { - "_$": true, - "_$d": true, - "_$sa": true, - "_$isType": true + "_$select": true, + "_$isType": true, + "_$setAttr": true, + "_$docFragment": true }, "plugins": [ "html" diff --git a/index.ts b/index.ts index 0c7577b..0702475 100644 --- a/index.ts +++ b/index.ts @@ -184,25 +184,25 @@ export default class Router { Object.defineProperty(Ctor.prototype, '$router', { get: () => router, enumerable: true, configurable: true }); - if ($options.afterMount) { - let { afterMount } = $options; - $options.afterMount = function (this: Component) { - afterMount.call(this); + if ($options.didMount) { + let { didMount } = $options; + $options.didMount = function (this: Component) { + didMount.call(this); navigate(this.$router); }; } else { - $options.afterMount = function (this: Component) { + $options.didMount = function (this: Component) { navigate(this.$router); }; } - if ($options.afterDestroy) { - let { afterDestroy } = $options; - $options.afterDestroy = function (this: Component) { - afterDestroy.call(this); + if ($options.didDestroy) { + let { didDestroy } = $options; + $options.didDestroy = function (this: Component) { + didDestroy.call(this); this.$router.destroy(); }; } else { - $options.afterDestroy = function (this: Component) { + $options.didDestroy = function (this: Component) { this.$router.destroy(); }; } diff --git a/route-link.html b/route-link.html index 4c7d70c..a148e8c 100644 --- a/route-link.html +++ b/route-link.html @@ -28,20 +28,20 @@ default: 'null' } }, - afterMount() { + didMount() { this._updateURL(); this._classes = this.class; this._path = _$isType(this.to, 'string') ? this.to : generateUrl(this.$router, this.to); - if (this.tag === 'a') _$sa(this.$refs.link, ['href', this._path]); + if (this.tag === 'a') _$setAttr(this.$refs.link, ['href', this._path]); this.$router.onUrlChange(() => { this._updateURL(); this.$update(); }); this.$update(); }, - afterUpdate() { + didUpdate() { if (this.parentActive !== 'null') { - let parent = !this.parentActive ? this.$refs.link.parentElement : _$(this.parentActive); + let parent = !this.parentActive ? this.$refs.link.parentElement : _$select(this.parentActive); if (parent) { if (this._active) { parent.classList.add(this.activeClass); diff --git a/router-view.html b/router-view.html index da886de..2d605fd 100644 --- a/router-view.html +++ b/router-view.html @@ -8,9 +8,9 @@ default: 'default' } }, - beforeUnmount() { + willUnmount() { if (this.$slots.default.hasChildNodes() && this.$parent.$hasNext) { - this.$slots.default = _$d(); + this.$slots.default = _$docFragment(); } } }; diff --git a/test/script.js b/test/script.js index d099fb8..8e44559 100644 --- a/test/script.js +++ b/test/script.js @@ -4,9 +4,69 @@ (factory()); }(this, (function () { 'use strict'; - var PROP_MAP = { p: '__TP__', v: 'value', _: '_value', s: '_subscribers', e: '_events', w: '_watchers', h: 'prototype' }; var PROPS = ['$slots', '$refs', '$filters', '$directives', '_events', '_watchers']; - var TPS = window[PROP_MAP.p] || (window[PROP_MAP.p] = []); + var PROP_MAP = { p: '__TP__', v: 'value', _: '_value', s: '_subscribers', e: '_events', w: '_watchers', h: 'prototype' }; + var TPS = window[PROP_MAP.p] || (window[PROP_MAP.p] = []); + + function _$select(selector, parent) { + return _$isString(selector) ? (parent || document).querySelector(selector) : selector; + } + function _$docFragment() { + return document.createDocumentFragment(); + } + function _$append(parent, child, sibling) { + if (_$isType(sibling, 'boolean') && sibling) + parent.parentElement.replaceChild(child, parent); + else if (!sibling) + parent.appendChild(child); + else + parent.insertBefore(child, sibling); + } + function _$assignEl(source, dest) { + var childNodes = source.childNodes, attributes = source.attributes; + for (var i = 0; i < childNodes.length; i++) { + _$append(dest, childNodes[i]); + } + for (var i = 0; i < attributes.length; i++) { + var attr = attributes[i]; + dest.setAttributeNS(source.namespaceURI, attr.name, attr.value); + } + source.parentElement.replaceChild(dest, source); + return dest; + } + function _$el(tagName) { + return document.createElement(tagName || 'div'); + } + function _$text(content) { + return document.createTextNode(content || ''); + } + function _$setAttr(el, attrAndValue) { + var attr = attrAndValue[0], value = attrAndValue[1]; + el.setAttribute(attr, _$toString(value)); + if (_$isValueAttr(attr) && !_$isString(value)) + el[PROP_MAP._] = value; + } + function _$getAttr(el, attr) { + return _$isValueAttr(attr) ? _$getValue(el) : el.getAttribute(attr); + } + function _$getValue(el) { + return _$hasProp(el, PROP_MAP._) ? el[PROP_MAP._] : el[PROP_MAP.v]; + } + function _$addListener(el, event, handler) { + el.addEventListener(event, handler, false); + } + function _$updateListener(el, event, oldHandler, newHandler) { + _$removeListener(el, event, oldHandler); + _$addListener(el, event, oldHandler = newHandler); + return oldHandler; + } + function _$removeListener(el, event, handler) { + el.removeEventListener(event, handler, false); + } + + function _$toLowerCase(str) { + return str.toLowerCase(); + } var _$assign = Object['assign'] || function (t) { for (var s = void 0, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; @@ -16,196 +76,221 @@ } return t; }; - function _$CompCtr(attrs, template, options, parent) { - var self = this; - var _$set = function (prop, value) { _$def(self, prop, { value: value, writable: true }); }; - if (!attrs) - attrs = {}; - _$e(PROPS, function (prop) { _$def(self, prop, { value: {} }); }); - _$set('$parent', parent || null); - _$set('$children', []); - _$set(PROP_MAP.s, {}); - _$set('$options', options); - var opts = self.$options; - if (!opts.attrs) - opts.attrs = {}; - if (!opts.children) - opts.children = {}; - _$e(TPS, function (plugin) { plugin.fn.call(self, _$CompCtr, plugin.options); }); - if (opts.filters) - _$assign(self.$filters, opts.filters); - if (opts.directives) - _$e(opts.directives, function (drt, k) { self.$directives[k] = _$drt(drt); }); - _$e(opts.attrs, function (attrOps, key) { - _$def(self, (_$isType(key, 'number') ? attrOps : key), { - get: function () { - if (_$isStr(attrOps)) { - var value = attrs[attrOps]; - return _$isFunction(value) ? value() : value; - } - else { - if (!_$hasProp(attrs, key) && attrOps.required) { - return console.error("Attribute '" + key + "' is required."); - } - else { - var value = _$isFunction(attrs[key]) ? attrs[key]() : attrs[key]; - if (value === void 0 && _$hasProp(attrOps, 'default')) { - var def = attrOps.default; - value = _$isFunction(def) ? def() : def; - } - var typ = attrOps.type; - if (typ && !_$isType(value, typ) && attrOps.required) { - return console.error("Attribute '" + key + "' must be type '" + typ + "'."); - } - value = _$toType(value, value === void 0 ? 'undefined' : typ, self, key); - if (value !== void 0 && _$hasProp(attrOps, 'validator')) { - var validator = attrOps.validator; - if (_$isFunction(validator) && !validator(value)) { - return console.error("Assigment '" + key + "'='" + JSON.stringify(value) + "' invalid."); - } - } - return value; - } - } - }, - set: function () { - console.error("'" + key + "' is read only."); - }, - enumerable: true, configurable: true - }); - }); - var data = opts.model || {}; - var _loop_1 = function (key) { - if (_$hasProp(data, key)) { - var desc = Object.getOwnPropertyDescriptor(data, key); - if (desc.value && _$isArray(desc.value)) { - desc.value = new _$List(desc.value, self, key); - } - else { - if (desc.get) { - var getter_1 = desc.get; - desc.get = function () { - var value = getter_1.call(self); - if (_$isArray(value)) - value = new _$List(value, self, key); - return value; - }; - } - if (desc.set) { - var setter_1 = desc.set; - desc.set = function (v) { - if (_$isArray(v)) - v = new _$List(v, self, key); - setter_1.call(self, v); - }; - } - } - _$def(self, key, desc); - } - }; - for (var key in data) { - _loop_1(key); - } - var tpl = template(self); - _$e(tpl, function (value, key) { - _$def(self, key, { - value: (function (key) { - var hook = key[1].toUpperCase() + key.slice(2); - var bhook = opts["before" + hook]; - var ahook = opts["after" + hook]; - return function () { - bhook && bhook.call(this); - key.slice(1) === 'update' ? value.call(this, this) : value.apply(this, arguments); - ahook && ahook.call(this); - }; - })(key) - }); - }); - _$def(self, '$data', { - get: function () { - return _$toPlainObj(this); - } - }); - } function _$isValueAttr(attr) { return attr === 'value'; } - function _$subs(dep, listener) { + function _$subscribers(dep, listener) { if (!this[PROP_MAP.s][dep]) { this[PROP_MAP.s][dep] = []; } return this[PROP_MAP.s][dep].push(listener.bind(this)) - 1; } - function _$def(obj, key, desc) { + function _$define(obj, key, desc) { Object.defineProperty(obj, key, desc); } - _$assign(_$CompCtr[PROP_MAP.h], { - $get: function (path) { - return _$accesor(this, path); - }, - $set: function (path, value) { - _$accesor(this, path, value); - }, - $on: function (event, handler) { - var _this = this; - if (!this[PROP_MAP.e][event]) { - this[PROP_MAP.e][event] = []; - } - var i = this[PROP_MAP.e][event].push(handler); - return { - $off: function () { - _this[PROP_MAP.e][event].splice(i - 1, 1); + function _$dispatch(root, key, oldVal, value) { + root.$notify(key); + if (root[PROP_MAP.w][key]) { + _$each(root[PROP_MAP.w][key], function (watcher) { watcher(oldVal, value); }); + } + root.$update(); + } + function _$extends(ctor, exts) { + ctor[PROP_MAP.h] = Object.create(exts[PROP_MAP.h]); + ctor[PROP_MAP.h].constructor = ctor; + } + function _$isType(value, type) { + return _$type(type) === 'string' ? type.split('\|').some(function (t) { return t.trim() === _$type(value); }) : value instanceof type; + } + function _$isObject(obj) { + return _$isType(obj, 'object'); + } + function _$isArray(obj) { + return Array.isArray ? Array.isArray(obj) : _$isType(obj, 'array'); + } + function _$isFunction(obj) { + return _$isType(obj, 'function'); + } + function _$isString(obj) { + return _$isType(obj, 'string'); + } + function _$toType(value, type, root, key) { + switch (type) { + case 'date': + return new Date(value); + case 'string': + return _$toString(value); + case 'number': + return +value; + case 'boolean': + return _$isString(value) && !value ? true : !!value; + case 'array': + return _$isType(value, _$List) ? value : new _$List(value, root, key); + default: + return value; + } + } + function _$type(obj) { + return _$toLowerCase(/ (\w+)/.exec({}.toString.call(obj))[1]); + } + function _$hasProp(obj, prop) { + return obj.hasOwnProperty(prop); + } + function _$directive(dd) { + var hasProp = function (prop, instance, options, element) { return _$isObject(dd) && dd[prop] && dd[prop](instance, options, element); }; + return { + $init: function (instance, options, element) { + hasProp('$init', instance, options, element); + }, + $inserted: function (instance, options, element) { + hasProp('$inserted', instance, options, element); + }, + $update: function (instance, options, element) { + if (_$isFunction(dd)) { + dd(instance, options, element); } - }; - }, - $once: function (event, handler) { - var e = this.$on(event, function (args) { - handler(args); - e.$off(); - }); - }, - $fire: function (event, data) { - if (this[PROP_MAP.e][event]) { - _$e(this[PROP_MAP.e][event], function (handler) { handler(data); }); + else { + hasProp('$update', instance, options, element); + } + }, + $destroy: function (instance, options, element) { + hasProp('$destroy', instance, options, element); } - }, - $notify: function (key) { - if (this[PROP_MAP.s][key]) { - _$e(this[PROP_MAP.s][key], function (suscriber) { suscriber(); }); + }; + } + function _$noop() { } + function _$addChild(inst, Child, attrs) { + var child = null; + if (Child) { + child = new Child(attrs, inst); + inst.$children.push(child); + } + return child; + } + function _$toString(obj) { + var str = _$type(obj); + return !/null|undefined/.test(str) ? obj.toString() : str; + } + function _$toPlainObject(obj) { + var data = {}; + _$each(_$isObject(obj) ? obj : {}, function (_v, k) { + if (k[0] !== '$' && !_$isFunction(obj[k])) { + if (_$isType(obj[k], _$List)) { + data[k] = obj[k].map(_$toPlainObject); + } + else if (_$isObject(obj[k])) { + data[k] = _$toPlainObject(obj[k]); + } + else { + data[k] = obj[k]; + } } - }, - $observe: function (deps, listener) { - var _this = this; - var subs = []; - if (_$isArray(deps)) { - _$e(deps, function (dep) { - subs.push({ sub: dep, i: _$subs.call(_this, dep, listener) }); - }); + }); + return _$isObject(obj) ? data : obj; + } + function _$setReference(refs, prop, node) { + if (!_$hasProp(refs, prop)) { + var value_1 = []; + _$define(refs, prop, { + get: function () { return value_1.length <= 1 ? value_1[0] : value_1; }, + set: function (val) { val && !~value_1.indexOf(val) && value_1.push(val); }, + enumerable: true, configurable: true + }); + } + refs[prop] = node; + } + function _$accesor(object, path, value) { + return path.split('.').reduce(function (obj, key, i, arr) { + if (_$isType(value, 'undefined')) { + if (obj == null) { + arr.splice(0, arr.length); + return i > 0 && obj === null ? obj : undefined; + } } else { - subs.push({ sub: deps, i: _$subs.call(this, deps, listener) }); - } - return { - $unobserve: function () { - _$e(subs, function (sub) { - _this[PROP_MAP.s][sub.sub].splice(sub.i, 1); - }); + if (i === arr.length - 1) { + if (_$isType(obj, _$List) && _$toString(+key) === key) { + obj.pull(+key, value); + } + else { + var oldVal = obj[key]; + obj[key] = !_$isType(value, _$List) && _$isArray(value) ? new _$List(value, object, key) : value; + _$dispatch(object, path, oldVal, obj[key]); + } } - }; - }, - $watch: function (key, watcher) { - var _this = this; - if (!this[PROP_MAP.w][key]) { - this[PROP_MAP.w][key] = []; - } - var i = this[PROP_MAP.w][key].push(watcher.bind(this)); - return { - $unwatch: function () { - _this[PROP_MAP.w][key].splice(i - 1, 1); + else if (!_$isObject(obj[key])) { + obj[key] = {}; } - }; + } + return obj ? obj[key] : null; + }, object); + } + function _$emptySlot(inst, slot) { + var slots = inst.$slots; + return slots[slot] && !slots[slot].hasChildNodes() ? (slots[slot] = _$docFragment()) : null; + } + function _$declareSlots($slots, slots) { + _$each(slots, function (slot) { $slots[slot] = _$docFragment(); }); + } + function _$bindClasses(value) { + var classes = ''; + if (_$isString(value)) { + classes += " " + value; } - }); + else if (_$isArray(value)) { + classes = value.map(_$bindClasses).join(' '); + } + else if (_$isObject(value)) { + for (var key in value) + if (_$hasProp(value, key) && value[key]) + classes += " " + key; + } + return classes.trim(); + } + function _$bindUpdate(el, binding) { + var attr = binding[0], value = binding[1]; + var _value = _$toString(value); + if (_$isValueAttr(attr)) { + if (el[attr] !== _value) + el[attr] = _value; + el[PROP_MAP._] = value; + } + else if (_$getAttr(el, attr) !== _value) { + _$setAttr(el, [attr, _value]); + } + } + function _$textUpdate(text, value) { + if (text.data !== (value = _$toString(value))) + text.data = value; + } + function _$tagUpdate(node, tag) { + return _$toLowerCase(tag) !== _$toLowerCase(node.tagName) ? _$assignEl(node, _$el(tag)) : node; + } + function _$removeReference(refs, prop, node) { + var nodes = refs[prop]; + _$isArray(nodes) ? refs[prop].splice(nodes.indexOf(node), 1) : (delete refs[prop]); + } + function _$destroyComponent(component) { + component.$unmount(); + component.$parent = null; + component.$parentEl = null; + component.$siblingEl = null; + component.$children.splice(0, component.$children.length); + } + function _$setElements(component, parent, sibling) { + var brother = _$select(sibling); + component.$siblingEl = brother; + component.$parentEl = sibling && brother.parentElement || _$select(parent); + } + function _$each(obj, cb) { + var i = 0; + for (var key in obj) { + if (_$hasProp(obj, key)) { + cb(obj[key], (isNaN(+key) ? key : +key), i++); + } + } + } + var array = Array[PROP_MAP.h]; function _$toArgs(args, start) { if (start === void 0) { start = 0; } @@ -222,11 +307,11 @@ var self = this; Array.apply(self, [value.length]); var desc = { writable: false, configurable: false, enumerable: false }; - _$def(self, '_key', _$assign({ value: key }, desc)); - _$def(self, '_root', _$assign({ value: root }, desc)); + _$define(self, '_key', _$assign({ value: key }, desc)); + _$define(self, '_root', _$assign({ value: root }, desc)); _$arrayValues(self, value, root, key); desc.writable = true; - _$def(self, 'length', _$assign({ value: self.length }, desc)); + _$define(self, 'length', _$assign({ value: self.length }, desc)); } _$extends(_$List, Array); ['pop', 'push', 'reverse', 'shift', 'sort', 'fill', 'unshift', 'splice'].forEach(function (method) { @@ -262,679 +347,578 @@ else { self.splice.apply(self, [index, 1].concat(items)); } - }; - function _$dispatch(root, key, oldVal, value) { - root.$notify(key); - if (root[PROP_MAP.w][key]) { - _$e(root[PROP_MAP.w][key], function (watcher) { watcher(oldVal, value); }); - } - root.$update(); - } - function _$extends(ctor, exts) { - ctor['plugin'] = function (fn, options) { - TPS.push({ options: options, fn: fn }); - }; - ctor[PROP_MAP.h] = Object.create(exts[PROP_MAP.h]); - ctor[PROP_MAP.h].constructor = ctor; - } - function _$isType(value, type) { - return _$type(type) === 'string' ? type.split('|').some(function (t) { return t.trim() === _$type(value); }) : value instanceof type; - } - function _$dc(component) { - component.$unmount(); - component.$parent = null; - component.$parentEl = null; - component.$siblingEl = null; - component.$children.splice(0, component.$children.length); - } - function _$isObject(obj) { - return _$isType(obj, 'object'); - } - function _$isArray(obj) { - return Array.isArray ? Array.isArray(obj) : _$isType(obj, 'array'); - } - function _$isFunction(obj) { - return _$isType(obj, 'function'); - } - function _$isStr(obj) { - return _$isType(obj, 'string'); - } - function _$toType(value, type, root, key) { - switch (type) { - case 'date': - return new Date(value); - case 'string': - return _$toStr(value); - case 'number': - return +value; - case 'boolean': - return _$isStr(value) && !value ? true : !!value; - case 'array': - return _$isType(value, _$List) ? value : new _$List(value, root, key); - default: - return value; - } - } - function _$type(obj) { - return / (\w+)/.exec(({}).toString.call(obj))[1].toLowerCase(); - } - function _$hasProp(obj, prop) { - return obj.hasOwnProperty(prop); - } - function _$drt(dd) { - var hasProp = function (prop, instance, options, element) { return _$isObject(dd) && dd[prop] && dd[prop](instance, options, element); }; - return { - $init: function (instance, options, element) { - hasProp('$init', instance, options, element); - }, - $inserted: function (instance, options, element) { - hasProp('$inserted', instance, options, element); - }, - $update: function (instance, options, element) { - if (_$isFunction(dd)) { - dd(instance, options, element); + }; + + function _$BaseComponent(attrs, template, options, parent) { + var self = this; + var _$set = function (prop, value) { _$define(self, prop, { value: value, writable: true }); }; + if (!attrs) + attrs = {}; + _$each(PROPS, function (prop) { _$define(self, prop, { value: {} }); }); + _$set('$parent', parent || null); + _$set('$children', []); + _$set(PROP_MAP.s, {}); + _$set('$options', options); + var opts = self.$options; + if (!opts.attrs) + opts.attrs = {}; + if (!opts.children) + opts.children = {}; + _$each(TPS, function (plugin) { plugin.fn.call(self, _$BaseComponent, plugin.options); }); + if (opts.filters) + _$assign(self.$filters, opts.filters); + if (opts.directives) + _$each(opts.directives, function (drt, k) { self.$directives[k] = _$directive(drt); }); + _$each(opts.attrs, function (attrOps, key) { + _$define(self, (_$isType(key, 'number') ? attrOps : key), { + get: function () { + if (_$isString(attrOps)) { + var value = attrs[attrOps]; + return _$isFunction(value) ? value() : value; + } + else { + if (!_$hasProp(attrs, key) && attrOps.required) { + return console.error("Attribute '" + key + "' is required."); + } + else { + var value = _$isFunction(attrs[key]) ? attrs[key]() : attrs[key]; + if (value === void 0 && _$hasProp(attrOps, 'default')) { + var def = attrOps.default; + value = _$isFunction(def) ? def() : def; + } + var typ = attrOps.type; + if (typ && !_$isType(value, typ) && attrOps.required) { + return console.error("Attribute '" + key + "' must be type '" + typ + "'."); + } + value = _$toType(value, value === void 0 ? 'undefined' : typ, self, key); + if (value !== void 0 && _$hasProp(attrOps, 'validator')) { + var validator = attrOps.validator; + if (_$isFunction(validator) && !validator(value)) { + return console.error("Assigment '" + key + "'='" + JSON.stringify(value) + "' invalid."); + } + } + return value; + } + } + }, + set: function () { + console.error("'" + key + "' is read only."); + }, + enumerable: true, configurable: true + }); + }); + var data = opts.model || {}; + var _loop_1 = function (key) { + if (_$hasProp(data, key)) { + var desc = Object.getOwnPropertyDescriptor(data, key); + if (desc.value && _$isArray(desc.value)) { + desc.value = new _$List(desc.value, self, key); } else { - hasProp('$update', instance, options, element); + if (desc.get) { + var getter_1 = desc.get; + desc.get = function () { + var value = getter_1.call(self); + if (_$isArray(value)) + value = new _$List(value, self, key); + return value; + }; + } + if (desc.set) { + var setter_1 = desc.set; + desc.set = function (v) { + if (_$isArray(v)) + v = new _$List(v, self, key); + setter_1.call(self, v); + }; + } } - }, - $destroy: function (instance, options, element) { - hasProp('$destroy', instance, options, element); + _$define(self, key, desc); } }; - } - function _$noop() { } - function _$add(inst, Child, attrs) { - var child = null; - if (Child) { - child = new Child(attrs, inst); - inst.$children.push(child); + for (var key in data) { + _loop_1(key); } - return child; - } - function _$toStr(obj) { - var str = _$type(obj); - return !/null|undefined/.test(str) ? obj.toString() : str; - } - function _$toPlainObj(obj) { - var data = {}; - _$e(_$isObject(obj) ? obj : {}, function (_v, k) { - if (k[0] !== '$' && !_$isFunction(obj[k])) { - if (_$isType(obj[k], _$List)) { - data[k] = obj[k].map(_$toPlainObj); - } - else if (_$isObject(obj[k])) { - data[k] = _$toPlainObj(obj[k]); - } - else { - data[k] = obj[k]; - } + var tpl = template(self); + _$each(tpl, function (value, key) { + _$define(self, key, { + value: (function (key) { + var hook = key[1].toUpperCase() + key.slice(2); + var bhook = opts["will" + hook]; + var ahook = opts["did" + hook]; + return function () { + bhook && bhook.call(this); + key === '$update' ? value.call(this, this) : value.apply(this, arguments); + ahook && ahook.call(this); + }; + })(key) + }); + }); + _$define(self, '$data', { + get: function () { + return _$toPlainObject(this); } }); - return _$isObject(obj) ? data : obj; - } - function _$setRef(refs, prop, node) { - if (!_$hasProp(refs, prop)) { - var value_1 = []; - _$def(refs, prop, { - get: function () { return value_1.length <= 1 ? value_1[0] : value_1; }, - set: function (val) { val && !~value_1.indexOf(val) && value_1.push(val); }, - enumerable: true, configurable: true - }); - } - refs[prop] = node; } - function _$accesor(object, path, value) { - return path.split('.').reduce(function (obj, key, i, arr) { - if (_$isType(value, 'undefined')) { - if (obj == null) { - arr.splice(0, arr.length); - return i > 0 && obj === null ? obj : undefined; + _$assign(_$BaseComponent[PROP_MAP.h], { + $get: function (path) { + return _$accesor(this, path); + }, + $set: function (path, value) { + _$accesor(this, path, value); + }, + $on: function (event, handler) { + var _this = this; + if (!this[PROP_MAP.e][event]) { + this[PROP_MAP.e][event] = []; + } + var i = this[PROP_MAP.e][event].push(handler); + return { + $off: function () { + _this[PROP_MAP.e][event].splice(i - 1, 1); } + }; + }, + $once: function (event, handler) { + var e = this.$on(event, function (args) { + handler(args); + e.$off(); + }); + }, + $fire: function (event, data) { + if (this[PROP_MAP.e][event]) { + _$each(this[PROP_MAP.e][event], function (handler) { handler(data); }); + } + }, + $notify: function (key) { + if (this[PROP_MAP.s][key]) { + _$each(this[PROP_MAP.s][key], function (suscriber) { suscriber(); }); + } + }, + $observe: function (deps, listener) { + var _this = this; + var subs = []; + if (_$isArray(deps)) { + _$each(deps, function (dep) { + subs.push({ sub: dep, i: _$subscribers.call(_this, dep, listener) }); + }); } else { - if (i === arr.length - 1) { - if (_$isType(obj, _$List) && _$toStr(+key) === key) { - obj.pull(+key, value); - } - else { - var oldVal = obj[key]; - obj[key] = !_$isType(value, _$List) && _$isArray(value) ? new _$List(value, object, key) : value; - _$dispatch(object, path, oldVal, obj[key]); - } - } - else if (!_$isObject(obj[key])) { - obj[key] = {}; - } + subs.push({ sub: deps, i: _$subscribers.call(this, deps, listener) }); } - return obj ? obj[key] : null; - }, object); - } - function _$(selector, parent) { - return _$isStr(selector) ? (parent || document).querySelector(selector) : selector; - } - function _$d() { - return document.createDocumentFragment(); - } - function _$a(parent, child, sibling) { - if (_$isType(sibling, 'boolean') && sibling) - parent.parentElement.replaceChild(child, parent); - else if (!sibling) - parent.appendChild(child); - else - parent.insertBefore(child, sibling); - } - function _$as(source, dest) { - var childNodes = source.childNodes, attributes = source.attributes; - for (var i = 0; i < childNodes.length; i++) { - _$a(dest, childNodes[i]); - } - for (var i = 0; i < attributes.length; i++) { - var attr = attributes[i]; - dest.setAttributeNS(source.namespaceURI, attr.name, attr.value); - } - source.parentElement.replaceChild(dest, source); - return dest; - } - function _$ce(tagName) { - return document.createElement(tagName || 'div'); - } - function _$ct(content) { - return document.createTextNode(content || ''); - } - function _$sa(el, attrAndValue) { - var attr = attrAndValue[0], value = attrAndValue[1]; - el.setAttribute(attr, _$toStr(value)); - if (_$isValueAttr(attr) && !_$isStr(value)) - el[PROP_MAP._] = value; - } - function _$ga(el, attr) { - return _$isValueAttr(attr) ? _$gv(el) : el.getAttribute(attr); - } - function _$gv(el) { - return _$hasProp(el, PROP_MAP._) ? el[PROP_MAP._] : el[PROP_MAP.v]; - } - function _$al(el, event, handler) { - el.addEventListener(event, handler, false); - } - function _$ul(el, event, oldHandler, newHandler) { - _$rl(el, event, oldHandler); - _$al(el, event, oldHandler = newHandler); - return oldHandler; - } - function _$rl(el, event, handler) { - el.removeEventListener(event, handler, false); - } - function _$bc(value) { - var classes = ''; - if (_$isStr(value)) { - classes += " " + value; - } - else if (_$isArray(value)) { - classes = value.map(_$bc).join(' '); - } - else if (_$isObject(value)) { - for (var key in value) - if (_$hasProp(value, key) && value[key]) - classes += " " + key; - } - return classes.trim(); - } - function _$bu(el, binding) { - var attr = binding[0], value = binding[1]; - var _value = _$toStr(value); - if (_$isValueAttr(attr)) { - if (el[attr] !== _value) - el[attr] = _value; - el[PROP_MAP._] = value; - } - else if (_$ga(el, attr) !== _value) { - _$sa(el, [attr, _value]); - } - } - function _$tu(text, value) { - if (text.data !== (value = _$toStr(value))) - text.data = value; - } - function _$nu(node, tag) { - return tag.toUpperCase() !== node.tagName ? _$as(node, _$ce(tag)) : node; - } - function _$rr(refs, prop, node) { - var nodes = refs[prop]; - _$isArray(nodes) ? refs[prop].splice(nodes.indexOf(node), 1) : (delete refs[prop]); - } - function _$e(obj, cb) { - var i = 0; - for (var key in obj) { - if (_$hasProp(obj, key)) { - cb(obj[key], (isNaN(+key) ? key : +key), i++); + return { + $unobserve: function () { + _$each(subs, function (sub) { + _this[PROP_MAP.s][sub.sub].splice(sub.i, 1); + }); + } + }; + }, + $watch: function (key, watcher) { + var _this = this; + if (!this[PROP_MAP.w][key]) { + this[PROP_MAP.w][key] = []; } + var i = this[PROP_MAP.w][key].push(watcher.bind(this)); + return { + $unwatch: function () { + _this[PROP_MAP.w][key].splice(i - 1, 1); + } + }; } + }); + function _$Ctor(tpl, options) { + var ctor = function (_$attrs, _$parent) { + _$BaseComponent.call(this, _$attrs, tpl, options, _$parent); + !_$parent && this.$create(); + }; + ctor.plugin = function (fn, options) { + TPS.push({ options: options, fn: fn }); + }; + _$extends(ctor, _$BaseComponent); + return ctor; } function _$tplList(_$state) { var children = _$state.$options.children; var _$frag, h1_1, p_1, txt_1, strong_1, txt_2, setTxt_2, routerViewAnchor_1, routerView_1; - _$frag = _$d(); + _$frag = _$docFragment(); setTxt_2 = function(_$state) { return _$state.$route.path; }; - var RouterView = children['router-view'] || window['RouterView']; - routerViewAnchor_1 = _$ct(); - routerView_1 = _$add(_$state, RouterView, {}); + var RouterView = children['router-view'] || window.RouterView; + routerViewAnchor_1 = _$text(); + routerView_1 = _$addChild(_$state, RouterView, {}); return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'List Page'; - p_1 = _$ce('p'); - txt_1 = _$ct('You are in page '); - strong_1 = _$ce('strong'); - txt_2 = _$ct(); + p_1 = _$el('p'); + txt_1 = _$text('You are in page '); + strong_1 = _$el('strong'); + txt_2 = _$text(); txt_2.data = setTxt_2(_$state); routerView_1.$create(); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_2, setTxt_2(_$state)); + _$textUpdate(txt_2, setTxt_2(_$state)); routerView_1 && routerView_1.$update(); }, $unmount: function() { - _$a(_$frag, h1_1); - _$a(p_1, txt_1); - _$a(strong_1, txt_2); - _$a(p_1, strong_1); - _$a(_$frag, p_1); - _$a(_$frag, routerViewAnchor_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_1); + _$append(strong_1, txt_2); + _$append(p_1, strong_1); + _$append(_$frag, p_1); + _$append(_$frag, routerViewAnchor_1); routerView_1.$mount(_$frag, routerViewAnchor_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); routerView_1 && routerView_1.$destroy(); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = routerViewAnchor_1 = routerView_1 = void 0; } }; } - function List(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplList, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(List, _$CompCtr); + var List = _$Ctor(_$tplList, {}); function _$tplPage(_$state) { var children = _$state.$options.children; var _$frag, h1_1, txt_1, setTxt_1, p_1, txt_2, strong_1, txt_3, setTxt_3, routerViewAnchor_1, routerView_1, span_1, txt_4; - _$frag = _$d(); - setTxt_1 = function() { - return (name ? name + ' ' : '') + 'Page'; + _$frag = _$docFragment(); + setTxt_1 = function(_$state) { + return (_$state.name ? _$state.name + ' ' : '') + 'Page'; }; setTxt_3 = function(_$state) { return _$state.$route.path; }; - var RouterView = children['router-view'] || window['RouterView']; - routerViewAnchor_1 = _$ct(); - routerView_1 = _$add(_$state, RouterView, {}); - if (routerView_1.$slots['default'] && routerView_1.$slots['default'].childNodes.length !== 0) { - routerView_1.$slots['default'] = _$d(); - } + var RouterView = children['router-view'] || window.RouterView; + routerViewAnchor_1 = _$text(); + routerView_1 = _$addChild(_$state, RouterView, {}); + var default_routerView_1 = _$emptySlot(routerView_1, 'default'); return { $create: function() { - h1_1 = _$ce('h1'); - txt_1 = _$ct(); + h1_1 = _$el('h1'); + txt_1 = _$text(); txt_1.data = setTxt_1(_$state); - p_1 = _$ce('p'); - txt_2 = _$ct('PATH: '); - strong_1 = _$ce('strong'); - txt_3 = _$ct(); + p_1 = _$el('p'); + txt_2 = _$text('PATH: '); + strong_1 = _$el('strong'); + txt_3 = _$text(); txt_3.data = setTxt_3(_$state); routerView_1.$create(); - span_1 = _$ce('span'); - txt_4 = _$ct('Default Child'); + span_1 = _$el('span'); + txt_4 = _$text('Default Child'); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_1, setTxt_1(_$state)); - _$tu(txt_3, setTxt_3(_$state)); + _$textUpdate(txt_1, setTxt_1(_$state)); + _$textUpdate(txt_3, setTxt_3(_$state)); routerView_1 && routerView_1.$update(); }, $unmount: function() { - _$a(h1_1, txt_1); - _$a(_$frag, h1_1); - _$a(p_1, txt_2); - _$a(strong_1, txt_3); - _$a(p_1, strong_1); - _$a(_$frag, p_1); - _$a(_$frag, routerViewAnchor_1); - _$a(span_1, txt_4); - if (routerView_1.$slots['default']) { - _$a(routerView_1.$slots['default'], span_1); - } + _$append(h1_1, txt_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_2); + _$append(strong_1, txt_3); + _$append(p_1, strong_1); + _$append(_$frag, p_1); + _$append(_$frag, routerViewAnchor_1); + _$append(span_1, txt_4); + default_routerView_1 && _$append(default_routerView_1, span_1); routerView_1.$mount(_$frag, routerViewAnchor_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); routerView_1 && routerView_1.$destroy(); delete _$state.$root; _$frag = h1_1 = txt_1 = setTxt_1 = p_1 = txt_2 = strong_1 = txt_3 = setTxt_3 = routerViewAnchor_1 = routerView_1 = span_1 = txt_4 = void 0; } }; } - function Page(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplPage, { - attrs: ['name'] - }, _$parent); - !_$parent && this.$create(); - } - _$extends(Page, _$CompCtr); + var Page = _$Ctor(_$tplPage, { + attrs: ['name'] + }); function _$tplHome(_$state) { var _$frag, h1_1, p_1, txt_1, strong_1, txt_2, setTxt_2; - _$frag = _$d(); + _$frag = _$docFragment(); setTxt_2 = function(_$state) { return _$state.$route.path; }; return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'Home Page'; - p_1 = _$ce('p'); - txt_1 = _$ct('You are in page '); - strong_1 = _$ce('strong'); - txt_2 = _$ct(); + p_1 = _$el('p'); + txt_1 = _$text('You are in page '); + strong_1 = _$el('strong'); + txt_2 = _$text(); txt_2.data = setTxt_2(_$state); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_2, setTxt_2(_$state)); + _$textUpdate(txt_2, setTxt_2(_$state)); }, $unmount: function() { - _$a(_$frag, h1_1); - _$a(p_1, txt_1); - _$a(strong_1, txt_2); - _$a(p_1, strong_1); - _$a(_$frag, p_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_1); + _$append(strong_1, txt_2); + _$append(p_1, strong_1); + _$append(_$frag, p_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } }; } - function Home(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplHome, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(Home, _$CompCtr); + var Home = _$Ctor(_$tplHome, {}); function _$tplAbout(_$state) { var _$frag, h1_1, p_1, txt_1, strong_1, txt_2, setTxt_2; - _$frag = _$d(); + _$frag = _$docFragment(); setTxt_2 = function(_$state) { return _$state.$route.path; }; return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'About Page'; - p_1 = _$ce('p'); - txt_1 = _$ct('You are in page '); - strong_1 = _$ce('strong'); - txt_2 = _$ct(); + p_1 = _$el('p'); + txt_1 = _$text('You are in page '); + strong_1 = _$el('strong'); + txt_2 = _$text(); txt_2.data = setTxt_2(_$state); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_2, setTxt_2(_$state)); + _$textUpdate(txt_2, setTxt_2(_$state)); }, $unmount: function() { - _$a(_$frag, h1_1); - _$a(p_1, txt_1); - _$a(strong_1, txt_2); - _$a(p_1, strong_1); - _$a(_$frag, p_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_1); + _$append(strong_1, txt_2); + _$append(p_1, strong_1); + _$append(_$frag, p_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } }; } - function About(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplAbout, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(About, _$CompCtr); + var About = _$Ctor(_$tplAbout, {}); function _$tplDetails(_$state) { var _$frag, h1_1, p_1, txt_1, strong_1, txt_2, setTxt_2; - _$frag = _$d(); + _$frag = _$docFragment(); setTxt_2 = function(_$state) { return _$state.$route.path; }; return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'Details Page'; - p_1 = _$ce('p'); - txt_1 = _$ct('You are in page '); - strong_1 = _$ce('strong'); - txt_2 = _$ct(); + p_1 = _$el('p'); + txt_1 = _$text('You are in page '); + strong_1 = _$el('strong'); + txt_2 = _$text(); txt_2.data = setTxt_2(_$state); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_2, setTxt_2(_$state)); + _$textUpdate(txt_2, setTxt_2(_$state)); }, $unmount: function() { - _$a(_$frag, h1_1); - _$a(p_1, txt_1); - _$a(strong_1, txt_2); - _$a(p_1, strong_1); - _$a(_$frag, p_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_1); + _$append(strong_1, txt_2); + _$append(p_1, strong_1); + _$append(_$frag, p_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } }; } - function Details(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplDetails, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(Details, _$CompCtr); + var Details = _$Ctor(_$tplDetails, {}); function _$tplContact(_$state) { var _$frag, h1_1, p_1, txt_1, strong_1, txt_2, setTxt_2; - _$frag = _$d(); + _$frag = _$docFragment(); setTxt_2 = function(_$state) { return _$state.$route.path; }; return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'Contact Page'; - p_1 = _$ce('p'); - txt_1 = _$ct('You are in page '); - strong_1 = _$ce('strong'); - txt_2 = _$ct(); + p_1 = _$el('p'); + txt_1 = _$text('You are in page '); + strong_1 = _$el('strong'); + txt_2 = _$text(); txt_2.data = setTxt_2(_$state); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$tu(txt_2, setTxt_2(_$state)); + _$textUpdate(txt_2, setTxt_2(_$state)); }, $unmount: function() { - _$a(_$frag, h1_1); - _$a(p_1, txt_1); - _$a(strong_1, txt_2); - _$a(p_1, strong_1); - _$a(_$frag, p_1); + _$append(_$frag, h1_1); + _$append(p_1, txt_1); + _$append(strong_1, txt_2); + _$append(p_1, strong_1); + _$append(_$frag, p_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); delete _$state.$root; _$frag = h1_1 = p_1 = txt_1 = strong_1 = txt_2 = setTxt_2 = void 0; } }; } - function Contact(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplContact, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(Contact, _$CompCtr); + var Contact = _$Ctor(_$tplContact, {}); function _$tplNotFound(_$state) { var _$frag, h1_1, p_1, button_1, txt_1, clickEvent_1, handlerClickEvent_1; - _$frag = _$d(); + _$frag = _$docFragment(); clickEvent_1 = function(_$state) { _$state.$route.back(); }; return { $create: function() { - h1_1 = _$ce('h1'); + h1_1 = _$el('h1'); h1_1.innerHTML = 'Not Found Page'; - p_1 = _$ce('p'); + p_1 = _$el('p'); p_1.innerHTML = '\n Somthing was wrong.\n'; - button_1 = _$ce('button'); - txt_1 = _$ct('Go Back'); - _$al(button_1, 'click', handlerClickEvent_1 = function(event) { + button_1 = _$el('button'); + txt_1 = _$text('Go Back'); + _$addListener(button_1, 'click', handlerClickEvent_1 = function(event) { clickEvent_1(_$state, event, button_1); }); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: _$noop, $unmount: function() { - _$a(_$frag, h1_1); - _$a(_$frag, p_1); - _$a(button_1, txt_1); - _$a(_$frag, button_1); + _$append(_$frag, h1_1); + _$append(_$frag, p_1); + _$append(button_1, txt_1); + _$append(_$frag, button_1); }, $destroy: function() { - _$dc(this); - _$rl(button_1, 'click', handlerClickEvent_1); + _$destroyComponent(this); + _$removeListener(button_1, 'click', handlerClickEvent_1); delete _$state.$root; _$frag = h1_1 = p_1 = button_1 = txt_1 = clickEvent_1 = handlerClickEvent_1 = void 0; } }; } - function NotFound(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplNotFound, {}, _$parent); - !_$parent && this.$create(); - } - _$extends(NotFound, _$CompCtr); + var NotFound = _$Ctor(_$tplNotFound, {}); function _$tplRouterView(_$state) { var _$frag; - _$frag = _$d(); - _$state.$slots['default'] = _$d(); + _$frag = _$docFragment(); + var _$slots = _$state.$slots; + _$declareSlots(_$slots, ['default']); return { $create: _$noop, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: _$noop, $unmount: function() { - _$a(_$frag, _$state.$slots['default']); + _$append(_$frag, _$slots['default']); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); delete _$state.$root; _$frag = void 0; } }; } - function RouterView(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplRouterView, { - attrs: { - name: { - type: 'string', - default: 'default' - } - }, + var RouterView = _$Ctor(_$tplRouterView, { + attrs: { + name: { + type: 'string', + default: 'default' + } + }, - beforeUnmount: function() { - if (this.$slots.default.hasChildNodes() && this.$parent.$hasNext) { - this.$slots.default = _$d(); - } + willUnmount: function() { + if (this.$slots.default.hasChildNodes() && this.$parent.$hasNext) { + this.$slots.default = _$docFragment(); } - }, _$parent); - !_$parent && this.$create(); - } - _$extends(RouterView, _$CompCtr); + } + }); var ROOT_MATCHER = /^\/$/, PATH_REPLACER = '([^\/\\?]+)', PATH_NAME_MATCHER = /:([\w\d]+)/g, PATH_EVERY_MATCHER = /\/\*(?!\*)/, PATH_EVERY_REPLACER = '\/([^\/\\?]+)', PATH_EVERY_GLOBAL_MATCHER = /\*{2}/, PATH_EVERY_GLOBAL_REPLACER = '(.*?)\\??', LEADING_BACKSLASHES_MATCH = /\/*$/; function clearSlashes(path) { @@ -1148,141 +1132,137 @@ function _$tplRouteLink(_$state) { var _$frag, _$node_1, setTag_$node_1, _refs, clickEvent_1, handlerClickEvent_1, bindClass_$node_1; - _$frag = _$d(); + _$frag = _$docFragment(); setTag_$node_1 = function(_$state) { return _$state.tag; }; - _$state.$slots['default'] = _$d(); + var _$slots = _$state.$slots; + _$declareSlots(_$slots, ['default']); _refs = _$state.$refs; clickEvent_1 = function(_$state, $event) { _$state._navigate($event); }; bindClass_$node_1 = function(_$state) { var _a; - return ['class', _$bc([ + return ['class', _$bindClasses([ _$state._classes, (_a = {}, _a[_$state.activeClass] = _$state._active && _$state.parentActive == 'null', _a) ]).trim()]; }; return { $create: function() { - _$node_1 = _$ce(setTag_$node_1(_$state)); - _$setRef(_refs, 'link', _$node_1); - _$al(_$node_1, 'click', handlerClickEvent_1 = function(event) { + _$node_1 = _$el(setTag_$node_1(_$state)); + _$setReference(_refs, 'link', _$node_1); + _$addListener(_$node_1, 'click', handlerClickEvent_1 = function(event) { event.preventDefault(); clickEvent_1(_$state, event, _$node_1); }); - _$sa(_$node_1, bindClass_$node_1(_$state)); + _$setAttr(_$node_1, bindClass_$node_1(_$state)); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function(_$state) { - _$node_1 = _$nu(_$node_1, setTag_$node_1(_$state)); - handlerClickEvent_1 = _$ul(_$node_1, 'click', handlerClickEvent_1, function(event) { + _$node_1 = _$tagUpdate(_$node_1, setTag_$node_1(_$state)); + handlerClickEvent_1 = _$updateListener(_$node_1, 'click', handlerClickEvent_1, function(event) { event.preventDefault(); clickEvent_1(_$state, event, _$node_1); }); - _$bu(_$node_1, bindClass_$node_1(_$state)); + _$bindUpdate(_$node_1, bindClass_$node_1(_$state)); }, $unmount: function() { - _$a(_$node_1, _$state.$slots['default']); - _$a(_$frag, _$node_1); + _$append(_$node_1, _$slots['default']); + _$append(_$frag, _$node_1); }, $destroy: function() { - _$dc(this); - _$rr(_refs, 'link', _$node_1); - _$rl(_$node_1, 'click', handlerClickEvent_1); + _$destroyComponent(this); + _$removeReference(_refs, 'link', _$node_1); + _$removeListener(_$node_1, 'click', handlerClickEvent_1); delete _$state.$root; _$frag = _$node_1 = setTag_$node_1 = _refs = clickEvent_1 = handlerClickEvent_1 = bindClass_$node_1 = void 0; } }; } - function RouteLink(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplRouteLink, { - attrs: { - to: { - required: true, - type: 'string | object' - }, - - tag: { - default: 'a', - type: 'string' - }, - - class: { - default: '', - type: 'string' - }, + var RouteLink = _$Ctor(_$tplRouteLink, { + attrs: { + to: { + required: true, + type: 'string | object' + }, - activeClass: { - type: 'string', - default: 'link-active' - }, + tag: { + default: 'a', + type: 'string' + }, - parentActive: { - type: 'string', - default: 'null' - } + class: { + default: '', + type: 'string' }, - afterMount: function() { - var _this = this; - this._updateURL(); - this._classes = this.class; - this._path = _$isType(this.to, 'string') ? this.to : generateUrl(this.$router, this.to); - if (this.tag === 'a') - _$sa(this.$refs.link, ['href', this._path]); - this.$router.onUrlChange(function() { - _this._updateURL(); - _this.$update(); - }); - this.$update(); + activeClass: { + type: 'string', + default: 'link-active' }, - afterUpdate: function() { - if (this.parentActive !== 'null') { - var parent = !this.parentActive ? this.$refs.link.parentElement : _$(this.parentActive); - if (parent) { - if (this._active) { - parent.classList.add(this.activeClass); - } else { - parent.classList.remove(this.activeClass); - } + parentActive: { + type: 'string', + default: 'null' + } + }, + + didMount: function() { + var _this = this; + this._updateURL(); + this._classes = this.class; + this._path = _$isType(this.to, 'string') ? this.to : generateUrl(this.$router, this.to); + if (this.tag === 'a') + _$setAttr(this.$refs.link, ['href', this._path]); + this.$router.onUrlChange(function() { + _this._updateURL(); + _this.$update(); + }); + this.$update(); + }, + + didUpdate: function() { + if (this.parentActive !== 'null') { + var parent = !this.parentActive ? this.$refs.link.parentElement : _$select(this.parentActive); + if (parent) { + if (this._active) { + parent.classList.add(this.activeClass); + } else { + parent.classList.remove(this.activeClass); } } - }, + } + }, - model: { - _url: '', - _path: '', - _classes: '', + model: { + _url: '', + _path: '', + _classes: '', - get _active() { - return this._url === this._path; - }, + get _active() { + return this._url === this._path; + }, - _navigate: function(e) { - this.$fire('click', e); - navigate(this.$router, this._path); - }, + _navigate: function(e) { + this.$fire('click', e); + navigate(this.$router, this._path); + }, - _updateURL: function() { - this._url = this.$router.url; - } + _updateURL: function() { + this._url = this.$router.url; } - }, _$parent); - !_$parent && this.$create(); - } - _$extends(RouteLink, _$CompCtr); + } + }); var Router = (function () { function Router(options) { @@ -1458,27 +1438,27 @@ Object.defineProperty(Ctor.prototype, '$router', { get: function () { return router_1; }, enumerable: true, configurable: true }); - if ($options.afterMount) { - var afterMount_1 = $options.afterMount; - $options.afterMount = function () { - afterMount_1.call(this); + if ($options.didMount) { + var didMount_1 = $options.didMount; + $options.didMount = function () { + didMount_1.call(this); navigate(this.$router); }; } else { - $options.afterMount = function () { + $options.didMount = function () { navigate(this.$router); }; } - if ($options.afterDestroy) { - var afterDestroy_1 = $options.afterDestroy; - $options.afterDestroy = function () { - afterDestroy_1.call(this); + if ($options.didDestroy) { + var didDestroy_1 = $options.didDestroy; + $options.didDestroy = function () { + didDestroy_1.call(this); this.$router.destroy(); }; } else { - $options.afterDestroy = function () { + $options.didDestroy = function () { this.$router.destroy(); }; } @@ -1575,10 +1555,10 @@ function _$tplApp(_$state) { var children = _$state.$options.children; var _$frag, routeLinkAnchor_1, routeLink_1, txt_1, txt_2, routeLinkAnchor_2, routeLink_2, txt_3, txt_4, routeLinkAnchor_3, routeLink_3, txt_5, txt_6, routeLinkAnchor_4, routeLink_4, txt_7, txt_8, routeLinkAnchor_5, routeLink_5, txt_9, txt_10, routeLinkAnchor_6, routeLink_6, txt_11, txt_12, routeLinkAnchor_7, routeLink_7, txt_13, hr_1, routerViewAnchor_1, routerView_1; - _$frag = _$d(); - var RouteLink = children['route-link'] || window['RouteLink']; - routeLinkAnchor_1 = _$ct(); - routeLink_1 = _$add(_$state, RouteLink, { + _$frag = _$docFragment(); + var RouteLink = children['route-link'] || window.RouteLink; + routeLinkAnchor_1 = _$text(); + routeLink_1 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'home' @@ -1588,11 +1568,9 @@ class: 'some-class', parentActive: '' }); - if (routeLink_1.$slots['default'] && routeLink_1.$slots['default'].childNodes.length !== 0) { - routeLink_1.$slots['default'] = _$d(); - } - routeLinkAnchor_2 = _$ct(); - routeLink_2 = _$add(_$state, RouteLink, { + var default_routeLink_1 = _$emptySlot(routeLink_1, 'default'); + routeLinkAnchor_2 = _$text(); + routeLink_2 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'list', @@ -1603,11 +1581,9 @@ }; } }); - if (routeLink_2.$slots['default'] && routeLink_2.$slots['default'].childNodes.length !== 0) { - routeLink_2.$slots['default'] = _$d(); - } - routeLinkAnchor_3 = _$ct(); - routeLink_3 = _$add(_$state, RouteLink, { + var default_routeLink_2 = _$emptySlot(routeLink_2, 'default'); + routeLinkAnchor_3 = _$text(); + routeLink_3 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'list.edit', @@ -1618,11 +1594,9 @@ }; } }); - if (routeLink_3.$slots['default'] && routeLink_3.$slots['default'].childNodes.length !== 0) { - routeLink_3.$slots['default'] = _$d(); - } - routeLinkAnchor_4 = _$ct(); - routeLink_4 = _$add(_$state, RouteLink, { + var default_routeLink_3 = _$emptySlot(routeLink_3, 'default'); + routeLinkAnchor_4 = _$text(); + routeLink_4 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'list.view', @@ -1633,11 +1607,9 @@ }; } }); - if (routeLink_4.$slots['default'] && routeLink_4.$slots['default'].childNodes.length !== 0) { - routeLink_4.$slots['default'] = _$d(); - } - routeLinkAnchor_5 = _$ct(); - routeLink_5 = _$add(_$state, RouteLink, { + var default_routeLink_4 = _$emptySlot(routeLink_4, 'default'); + routeLinkAnchor_5 = _$text(); + routeLink_5 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'list.view.details', @@ -1649,66 +1621,59 @@ }; } }); - if (routeLink_5.$slots['default'] && routeLink_5.$slots['default'].childNodes.length !== 0) { - routeLink_5.$slots['default'] = _$d(); - } - routeLinkAnchor_6 = _$ct(); - routeLink_6 = _$add(_$state, RouteLink, { + var default_routeLink_5 = _$emptySlot(routeLink_5, 'default'); + routeLinkAnchor_6 = _$text(); + routeLink_6 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'contact' }; } }); - if (routeLink_6.$slots['default'] && routeLink_6.$slots['default'].childNodes.length !== 0) { - routeLink_6.$slots['default'] = _$d(); - } - routeLinkAnchor_7 = _$ct(); - routeLink_7 = _$add(_$state, RouteLink, { + var default_routeLink_6 = _$emptySlot(routeLink_6, 'default'); + routeLinkAnchor_7 = _$text(); + routeLink_7 = _$addChild(_$state, RouteLink, { to: function() { return { name: 'about' }; } }); - if (routeLink_7.$slots['default'] && routeLink_7.$slots['default'].childNodes.length !== 0) { - routeLink_7.$slots['default'] = _$d(); - } - var RouterView = children['router-view'] || window['RouterView']; - routerViewAnchor_1 = _$ct(); - routerView_1 = _$add(_$state, RouterView, {}); + var default_routeLink_7 = _$emptySlot(routeLink_7, 'default'); + var RouterView = children['router-view'] || window.RouterView; + routerViewAnchor_1 = _$text(); + routerView_1 = _$addChild(_$state, RouterView, {}); return { $create: function() { routeLink_1.$create(); - txt_1 = _$ct('Home '); - txt_2 = _$ct('| '); + txt_1 = _$text('Home '); + txt_2 = _$text('| '); routeLink_2.$create(); - txt_3 = _$ct('List '); - txt_4 = _$ct('| '); + txt_3 = _$text('List '); + txt_4 = _$text('| '); routeLink_3.$create(); - txt_5 = _$ct('List Edit '); - txt_6 = _$ct('| '); + txt_5 = _$text('List Edit '); + txt_6 = _$text('| '); routeLink_4.$create(); - txt_7 = _$ct('List View '); - txt_8 = _$ct('| '); + txt_7 = _$text('List View '); + txt_8 = _$text('| '); routeLink_5.$create(); - txt_9 = _$ct('List Details '); - txt_10 = _$ct('| '); + txt_9 = _$text('List Details '); + txt_10 = _$text('| '); routeLink_6.$create(); - txt_11 = _$ct('Contact '); - txt_12 = _$ct('| '); + txt_11 = _$text('Contact '); + txt_12 = _$text('| '); routeLink_7.$create(); - txt_13 = _$ct('About'); - hr_1 = _$ce('hr'); + txt_13 = _$text('About'); + hr_1 = _$el('hr'); hr_1.innerHTML = ''; routerView_1.$create(); }, $mount: function(parent, sibling) { this.$unmount(); - _$a(_$(parent), _$frag, _$(sibling)); - this.$siblingEl = _$(sibling); - this.$parentEl = sibling && _$(sibling).parentElement || _$(parent); + _$append(_$select(parent), _$frag, _$select(sibling)); + _$setElements(this, parent, sibling); }, $update: function() { @@ -1723,54 +1688,40 @@ }, $unmount: function() { - _$a(_$frag, routeLinkAnchor_1); - if (routeLink_1.$slots['default']) { - _$a(routeLink_1.$slots['default'], txt_1); - } + _$append(_$frag, routeLinkAnchor_1); + default_routeLink_1 && _$append(default_routeLink_1, txt_1); routeLink_1.$mount(_$frag, routeLinkAnchor_1); - _$a(_$frag, txt_2); - _$a(_$frag, routeLinkAnchor_2); - if (routeLink_2.$slots['default']) { - _$a(routeLink_2.$slots['default'], txt_3); - } + _$append(_$frag, txt_2); + _$append(_$frag, routeLinkAnchor_2); + default_routeLink_2 && _$append(default_routeLink_2, txt_3); routeLink_2.$mount(_$frag, routeLinkAnchor_2); - _$a(_$frag, txt_4); - _$a(_$frag, routeLinkAnchor_3); - if (routeLink_3.$slots['default']) { - _$a(routeLink_3.$slots['default'], txt_5); - } + _$append(_$frag, txt_4); + _$append(_$frag, routeLinkAnchor_3); + default_routeLink_3 && _$append(default_routeLink_3, txt_5); routeLink_3.$mount(_$frag, routeLinkAnchor_3); - _$a(_$frag, txt_6); - _$a(_$frag, routeLinkAnchor_4); - if (routeLink_4.$slots['default']) { - _$a(routeLink_4.$slots['default'], txt_7); - } + _$append(_$frag, txt_6); + _$append(_$frag, routeLinkAnchor_4); + default_routeLink_4 && _$append(default_routeLink_4, txt_7); routeLink_4.$mount(_$frag, routeLinkAnchor_4); - _$a(_$frag, txt_8); - _$a(_$frag, routeLinkAnchor_5); - if (routeLink_5.$slots['default']) { - _$a(routeLink_5.$slots['default'], txt_9); - } + _$append(_$frag, txt_8); + _$append(_$frag, routeLinkAnchor_5); + default_routeLink_5 && _$append(default_routeLink_5, txt_9); routeLink_5.$mount(_$frag, routeLinkAnchor_5); - _$a(_$frag, txt_10); - _$a(_$frag, routeLinkAnchor_6); - if (routeLink_6.$slots['default']) { - _$a(routeLink_6.$slots['default'], txt_11); - } + _$append(_$frag, txt_10); + _$append(_$frag, routeLinkAnchor_6); + default_routeLink_6 && _$append(default_routeLink_6, txt_11); routeLink_6.$mount(_$frag, routeLinkAnchor_6); - _$a(_$frag, txt_12); - _$a(_$frag, routeLinkAnchor_7); - if (routeLink_7.$slots['default']) { - _$a(routeLink_7.$slots['default'], txt_13); - } + _$append(_$frag, txt_12); + _$append(_$frag, routeLinkAnchor_7); + default_routeLink_7 && _$append(default_routeLink_7, txt_13); routeLink_7.$mount(_$frag, routeLinkAnchor_7); - _$a(_$frag, hr_1); - _$a(_$frag, routerViewAnchor_1); + _$append(_$frag, hr_1); + _$append(_$frag, routerViewAnchor_1); routerView_1.$mount(_$frag, routerViewAnchor_1); }, $destroy: function() { - _$dc(this); + _$destroyComponent(this); routeLink_1 && routeLink_1.$destroy(); routeLink_2 && routeLink_2.$destroy(); routeLink_3 && routeLink_3.$destroy(); @@ -1784,13 +1735,9 @@ } }; } - function App(_$attrs, _$parent) { - _$CompCtr.call(this, _$attrs, _$tplApp, { - router: router - }, _$parent); - !_$parent && this.$create(); - } - _$extends(App, _$CompCtr); + var App = _$Ctor(_$tplApp, { + router: router + }); App.plugin(Router.plugin); From 74a575beb7214643f7e4f114b03086f2d87d3610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roberto=20Asiel=20Guevara=20Casta=C3=B1eda?= Date: Wed, 31 Oct 2018 11:29:20 -0400 Subject: [PATCH 3/3] Bump to version 0.1.5 --- CHANGELOG.md | 4 ++++ package-lock.json | 55 ++++++++++++++++++++++++++--------------------- package.json | 10 ++++----- 3 files changed, 39 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d6a1c9..227e232 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +0.1.5 +- Added navigation ability to router instance. +- Migrated to use trebor-tools module. + 0.1.4 - Fixed missing global helper. - Updated dependencies to latest version. diff --git a/package-lock.json b/package-lock.json index 85769be..81272da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "trebor-router", - "version": "0.1.4", + "version": "0.1.5", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -11,9 +11,9 @@ "dev": true }, "@types/node": { - "version": "10.12.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.0.tgz", - "integrity": "sha512-3TUHC3jsBAB7qVRGxT6lWyYo2v96BMmD2PTcl47H25Lu7UXtFH/2qqmKiVrnel6Ne//0TFYf6uvNX+HW2FRkLQ==", + "version": "10.12.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.1.tgz", + "integrity": "sha512-i1sl+WCX2OCHeUi9oi7PiCNUtYFrpWhpcx878vpeq/tlZTKzcFdHePlyFHVbWqeuKN0SRPl/9ZFDSTsfv9h7VQ==", "dev": true }, "acorn": { @@ -56,9 +56,9 @@ "dev": true }, "ast-types": { - "version": "0.11.5", - "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz", - "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==", + "version": "0.11.6", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.6.tgz", + "integrity": "sha512-nHiuV14upVGl7MWwFUYbzJ6YlfwWS084CU9EA8HajfYQjMSli5TQi3UTRygGF58LFWVkXxS1rbgRhROEqlQkXg==", "dev": true }, "balanced-match": { @@ -784,12 +784,12 @@ } }, "recast": { - "version": "0.15.5", - "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.5.tgz", - "integrity": "sha512-nkAYNqarh73cMWRKFiPQ8I9dOLFvFk6SnG8u/LUlOYfArDOD/EjsVRAs860TlBLrpxqAXHGET/AUAVjdEymL5w==", + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.16.0.tgz", + "integrity": "sha512-cm2jw4gCBatvs404ZJrxmGirSgWswW+S1U3SQTPHKNqdlUMg+V3J2XAOUvdAAgD7Hg2th2nxZ4wmYUekHI2Qmg==", "dev": true, "requires": { - "ast-types": "0.11.5", + "ast-types": "0.11.6", "esprima": "~4.0.0", "private": "~0.1.5", "source-map": "~0.6.1" @@ -934,7 +934,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -945,27 +945,27 @@ "dev": true }, "trebor": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/trebor/-/trebor-0.2.4.tgz", - "integrity": "sha512-QwF4yOZGyjiKqTh3bmzgR5XyyVfC2KUzTgmWmb8IeJlpGj+nfFju/5NLFfPJnxECmlqhqsirhbhQuWs6uXxk+Q==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/trebor/-/trebor-0.3.2.tgz", + "integrity": "sha512-c3u+h09cGNppA9IvQKbQdSQWWkcKEiWbP03luwZYs05FmkGE/Y70NJZ/x3bfOHTPUEsnxF4KQpb9tXmher3qlQ==", "dev": true, "requires": { "eslint-scope": "^4.0.0", - "espree": "^4.0.0", - "glob": "^7.1.2", - "globals": "^11.7.0", + "espree": "^4.1.0", + "glob": "^7.1.3", + "globals": "^11.8.0", "html-entities": "^1.2.1", "html-tag-names": "^1.1.3", "loader-utils": "^1.1.0", "parse5": "^5.1.0", - "recast": "^0.15.3", - "rollup-pluginutils": "^2.3.1", + "recast": "^0.16.0", + "rollup-pluginutils": "^2.3.3", "svg-tag-names": "^1.1.1", "tslib": "^1.9.3", "typescript": "^3.1.3", "uglify-es": "^3.3.9", - "uglify-js": "^3.4.7", - "yargs": "^12.0.1" + "uglify-js": "^3.4.9", + "yargs": "^12.0.2" }, "dependencies": { "uglify-es": { @@ -980,6 +980,11 @@ } } }, + "trebor-tools": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/trebor-tools/-/trebor-tools-0.0.4.tgz", + "integrity": "sha512-vwbWDnmbpwbauea9IkXLrNdNTJC1ACR4uxNA4p2aUJHsrkl/u2Fg2yo7wZtliD/HhXH8hdbggWzlFngAX16UrA==" + }, "tslib": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", @@ -987,9 +992,9 @@ "dev": true }, "typescript": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.3.tgz", - "integrity": "sha512-+81MUSyX+BaSo+u2RbozuQk/UWx6hfG0a5gHu4ANEM4sU96XbuIyAB+rWBW1u70c6a5QuZfuYICn3s2UjuHUpA==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.4.tgz", + "integrity": "sha512-JZHJtA6ZL15+Q3Dqkbh8iCUmvxD3iJ7ujXS+fVkKnwIVAdHc5BJTDNM0aTrnr2luKulFjU7W+SRhDZvi66Ru7Q==", "dev": true }, "uglify-js": { diff --git a/package.json b/package.json index c40e59b..9a04748 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "trebor-router", - "version": "0.1.4", + "version": "0.1.5", "description": "The Official router library for TreborJS", "main": "lib/router.esm.js", "scripts": { @@ -10,16 +10,16 @@ "build:test": "npm run build:comp && npm run build:prod && rollup -c rollup.config.js --environment BUILD:test" }, "engines": { - "node": ">=4" + "node": ">=8" }, - "peerDependencies": { - "trebor": "^0.2.4" + "dependencies": { + "trebor-tools": "^0.0.4" }, "devDependencies": { "rollup": "^0.66.6", "rollup-plugin-node-resolve": "^3.4.0", "typescript": "^3.1.3", - "trebor": "^0.2.4" + "trebor": "^0.3.2" }, "keywords": [], "author": "InDIOS",