vsn 0.1.17 → 0.1.20

package/dist/attributes/_imports.d.ts

@@ -23,5 +23,6 @@ export { ScopeAttribute } from "./ScopeAttribute";
 export { ScopeChange } from "./ScopeChange";
 export { SetAttribute } from "./SetAttribute";
 export { StandardAttribute } from "./StandardAttribute";
+export { StyleAttribute } from "./StyleAttribute";
 export { Template } from "./Template";
 export { TypeAttribute } from "./TypeAttribute";

package/dist/attributes/_imports.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypeAttribute = exports.Template = exports.StyleAttribute = exports.StandardAttribute = exports.SetAttribute = exports.ScopeChange = exports.ScopeAttribute = exports.RootAttribute = exports.Referenced = exports.Radio = exports.On = exports.Name = exports.ModelAttribute = exports.ListItemModel = exports.ListItem = exports.List = exports.KeyUp = exports.KeyDown = exports.JSONAttribute = exports.If = exports.Format = exports.Exec = exports.DisableIf = exports.ControllerAttribute = exports.ClickToggleClass = exports.ClickRemoveClass = exports.Bind = exports.AddClassIf = void 0;
+var AddClassIf_1 = require("./AddClassIf");
+Object.defineProperty(exports, "AddClassIf", { enumerable: true, get: function () { return AddClassIf_1.AddClassIf; } });
+var Bind_1 = require("./Bind");
+Object.defineProperty(exports, "Bind", { enumerable: true, get: function () { return Bind_1.Bind; } });
+var ClickRemoveClass_1 = require("./ClickRemoveClass");
+Object.defineProperty(exports, "ClickRemoveClass", { enumerable: true, get: function () { return ClickRemoveClass_1.ClickRemoveClass; } });
+var ClickToggleClass_1 = require("./ClickToggleClass");
+Object.defineProperty(exports, "ClickToggleClass", { enumerable: true, get: function () { return ClickToggleClass_1.ClickToggleClass; } });
+var ControllerAttribute_1 = require("./ControllerAttribute");
+Object.defineProperty(exports, "ControllerAttribute", { enumerable: true, get: function () { return ControllerAttribute_1.ControllerAttribute; } });
+var DisableIf_1 = require("./DisableIf");
+Object.defineProperty(exports, "DisableIf", { enumerable: true, get: function () { return DisableIf_1.DisableIf; } });
+var Exec_1 = require("./Exec");
+Object.defineProperty(exports, "Exec", { enumerable: true, get: function () { return Exec_1.Exec; } });
+var Format_1 = require("./Format");
+Object.defineProperty(exports, "Format", { enumerable: true, get: function () { return Format_1.Format; } });
+var If_1 = require("./If");
+Object.defineProperty(exports, "If", { enumerable: true, get: function () { return If_1.If; } });
+var JSONAttribute_1 = require("./JSONAttribute");
+Object.defineProperty(exports, "JSONAttribute", { enumerable: true, get: function () { return JSONAttribute_1.JSONAttribute; } });
+var KeyDown_1 = require("./KeyDown");
+Object.defineProperty(exports, "KeyDown", { enumerable: true, get: function () { return KeyDown_1.KeyDown; } });
+var KeyUp_1 = require("./KeyUp");
+Object.defineProperty(exports, "KeyUp", { enumerable: true, get: function () { return KeyUp_1.KeyUp; } });
+var List_1 = require("./List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+var ListItem_1 = require("./ListItem");
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return ListItem_1.ListItem; } });
+var ListItemModel_1 = require("./ListItemModel");
+Object.defineProperty(exports, "ListItemModel", { enumerable: true, get: function () { return ListItemModel_1.ListItemModel; } });
+var ModelAttribute_1 = require("./ModelAttribute");
+Object.defineProperty(exports, "ModelAttribute", { enumerable: true, get: function () { return ModelAttribute_1.ModelAttribute; } });
+var Name_1 = require("./Name");
+Object.defineProperty(exports, "Name", { enumerable: true, get: function () { return Name_1.Name; } });
+var On_1 = require("./On");
+Object.defineProperty(exports, "On", { enumerable: true, get: function () { return On_1.On; } });
+var Radio_1 = require("./Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var Referenced_1 = require("./Referenced");
+Object.defineProperty(exports, "Referenced", { enumerable: true, get: function () { return Referenced_1.Referenced; } });
+var RootAttribute_1 = require("./RootAttribute");
+Object.defineProperty(exports, "RootAttribute", { enumerable: true, get: function () { return RootAttribute_1.RootAttribute; } });
+var ScopeAttribute_1 = require("./ScopeAttribute");
+Object.defineProperty(exports, "ScopeAttribute", { enumerable: true, get: function () { return ScopeAttribute_1.ScopeAttribute; } });
+var ScopeChange_1 = require("./ScopeChange");
+Object.defineProperty(exports, "ScopeChange", { enumerable: true, get: function () { return ScopeChange_1.ScopeChange; } });
+var SetAttribute_1 = require("./SetAttribute");
+Object.defineProperty(exports, "SetAttribute", { enumerable: true, get: function () { return SetAttribute_1.SetAttribute; } });
+var StandardAttribute_1 = require("./StandardAttribute");
+Object.defineProperty(exports, "StandardAttribute", { enumerable: true, get: function () { return StandardAttribute_1.StandardAttribute; } });
+var StyleAttribute_1 = require("./StyleAttribute");
+Object.defineProperty(exports, "StyleAttribute", { enumerable: true, get: function () { return StyleAttribute_1.StyleAttribute; } });
+var Template_1 = require("./Template");
+Object.defineProperty(exports, "Template", { enumerable: true, get: function () { return Template_1.Template; } });
+var TypeAttribute_1 = require("./TypeAttribute");
+Object.defineProperty(exports, "TypeAttribute", { enumerable: true, get: function () { return TypeAttribute_1.TypeAttribute; } });
+//# sourceMappingURL=_imports.js.map

package/dist/attributes/_imports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_imports.js","sourceRoot":"","sources":["../../src/attributes/_imports.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAAhC,wGAAA,UAAU,OAAA;AAClB,+BAA4B;AAApB,4FAAA,IAAI,OAAA;AACZ,uDAAoD;AAA5C,oHAAA,gBAAgB,OAAA;AACxB,uDAAoD;AAA5C,oHAAA,gBAAgB,OAAA;AACxB,6DAA0D;AAAlD,0HAAA,mBAAmB,OAAA;AAC3B,yCAAsC;AAA9B,sGAAA,SAAS,OAAA;AACjB,+BAA4B;AAApB,4FAAA,IAAI,OAAA;AACZ,mCAAgC;AAAxB,gGAAA,MAAM,OAAA;AACd,2BAAwB;AAAhB,wFAAA,EAAE,OAAA;AACV,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,qCAAkC;AAA1B,kGAAA,OAAO,OAAA;AACf,iCAA8B;AAAtB,8FAAA,KAAK,OAAA;AACb,+BAA4B;AAApB,4FAAA,IAAI,OAAA;AACZ,uCAAoC;AAA5B,oGAAA,QAAQ,OAAA;AAChB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,+BAA4B;AAApB,4FAAA,IAAI,OAAA;AACZ,2BAAwB;AAAhB,wFAAA,EAAE,OAAA;AACV,iCAA8B;AAAtB,8FAAA,KAAK,OAAA;AACb,2CAAwC;AAAhC,wGAAA,UAAU,OAAA;AAClB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,6CAA0C;AAAlC,0GAAA,WAAW,OAAA;AACnB,+CAA4C;AAApC,4GAAA,YAAY,OAAA;AACpB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,uCAAoC;AAA5B,oGAAA,QAAQ,OAAA;AAChB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA"}

package/dist/helpers/DOMHelper.js

@@ -0,0 +1,81 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOMHelper = void 0;
+var DOMHelper = /** @class */ (function () {
+    function DOMHelper() {
+    }
+    DOMHelper.walk = function (e, fnc, callOnBaseElement) {
+        if (callOnBaseElement === void 0) { callOnBaseElement = true; }
+        return __awaiter(this, void 0, void 0, function () {
+            var len, i;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!callOnBaseElement) return [3 /*break*/, 2];
+                        return [4 /*yield*/, fnc(e)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        len = e.childNodes.length;
+                        if (len <= 0)
+                            return [2 /*return*/];
+                        i = 0;
+                        _a.label = 3;
+                    case 3:
+                        if (!(i < len)) return [3 /*break*/, 6];
+                        if (!e.childNodes[i]) {
+                            return [3 /*break*/, 5];
+                        }
+                        return [4 /*yield*/, DOMHelper.walk(e.childNodes[i], fnc, true)];
+                    case 4:
+                        _a.sent();
+                        _a.label = 5;
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 3];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return DOMHelper;
+}());
+exports.DOMHelper = DOMHelper;
+//# sourceMappingURL=DOMHelper.js.map

package/dist/helpers/DOMHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DOMHelper.js","sourceRoot":"","sources":["../../src/helpers/DOMHelper.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;IAAA;IAeA,CAAC;IAduB,cAAI,GAAxB,UAAyB,CAAc,EAAE,GAA6B,EAAE,iBAAiC;QAAjC,kCAAA,EAAA,wBAAiC;;;;;;6BACjG,iBAAiB,EAAjB,wBAAiB;wBACjB,qBAAM,GAAG,CAAC,CAAC,CAAC,EAAA;;wBAAZ,SAAY,CAAC;;;wBAEX,GAAG,GAAW,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC;wBACxC,IAAI,GAAG,IAAI,CAAC;4BAAE,sBAAO;wBACZ,CAAC,GAAG,CAAC;;;6BAAE,CAAA,CAAC,GAAG,GAAG,CAAA;wBACnB,IAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAC;4BAChB,wBAAS;yBACZ;wBAED,qBAAM,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,EAAA;;wBAA/D,SAA+D,CAAC;;;wBAL3C,CAAC,EAAE,CAAA;;;;;;KAO/B;IACL,gBAAC;AAAD,CAAC,AAfD,IAeC;AAfY,8BAAS"}

package/dist/helpers/ElementHelper.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ElementHelper = void 0;
+var ElementHelper = /** @class */ (function () {
+    function ElementHelper() {
+    }
+    ElementHelper.hasVisionAttribute = function (element, testAttr) {
+        if (testAttr === void 0) { testAttr = 'vsn-'; }
+        if (!element.attributes || element.attributes.length <= 0)
+            return false;
+        for (var i = 0; i < element.attributes.length; i++) {
+            var attr = element.attributes[i];
+            if (attr.name.startsWith(testAttr)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    ElementHelper.normalizeElementID = function (id) {
+        return id ? id.replace(/-([a-zA-Z0-9])/g, function (g) { return g[1].toUpperCase(); }) : null;
+    };
+    return ElementHelper;
+}());
+exports.ElementHelper = ElementHelper;
+//# sourceMappingURL=ElementHelper.js.map

package/dist/helpers/ElementHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementHelper.js","sourceRoot":"","sources":["../../src/helpers/ElementHelper.ts"],"names":[],"mappings":";;;AACA;IAAA;IAiBA,CAAC;IAhBiB,gCAAkB,GAAhC,UAAiC,OAA8B,EAAE,QAAyB;QAAzB,yBAAA,EAAA,iBAAyB;QACtF,IAAI,CAAC,OAAO,CAAC,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO,KAAK,CAAC;QACxE,KAAK,IAAI,CAAC,GAAW,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxD,IAAM,IAAI,GAAS,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAClC;gBACI,OAAO,IAAI,CAAC;aACf;SACJ;QAED,OAAO,KAAK,CAAC;IACjB,CAAC;IAEa,gCAAkB,GAAhC,UAAiC,EAAU;QACvC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE,UAAU,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAClG,CAAC;IACL,oBAAC;AAAD,CAAC,AAjBD,IAiBC;AAjBY,sCAAa"}

package/dist/helpers/VisionHelper.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisionHelper = void 0;
+var VisionHelper = /** @class */ (function () {
+    function VisionHelper() {
+    }
+    VisionHelper.isConstructor = function (obj) {
+        return obj &&
+            obj.hasOwnProperty("prototype") &&
+            !!obj.prototype &&
+            !!obj.prototype.constructor &&
+            !!obj.prototype.constructor.name;
+    };
+    Object.defineProperty(VisionHelper, "document", {
+        get: function () {
+            return typeof document === 'object' ? document : null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(VisionHelper, "window", {
+        get: function () {
+            return typeof window === 'object' ? window : null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    VisionHelper.isMobile = function () {
+        var check = false;
+        if (navigator && VisionHelper.window) {
+            (function (a) {
+                if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
+                    check = true;
+            })(navigator.userAgent || navigator.vendor || window['opera']);
+        }
+        return check;
+    };
+    Object.defineProperty(VisionHelper, "inDevelopment", {
+        get: function () {
+            return IN_DEVELOPMENT;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(VisionHelper, "doBenchmark", {
+        get: function () {
+            return DO_BENCHMARK;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(VisionHelper, "inLegacy", {
+        get: function () {
+            return process.env.BUILD_TARGET === 'es5';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    VisionHelper.nice = function (callback, timeout) {
+        if (timeout === void 0) { timeout = 100; }
+        if (VisionHelper.window && window['requestIdleCallback']) {
+            window['requestIdleCallback'](callback);
+        }
+        else {
+            setTimeout(callback, timeout);
+        }
+    };
+    return VisionHelper;
+}());
+exports.VisionHelper = VisionHelper;
+//# sourceMappingURL=VisionHelper.js.map

package/dist/helpers/VisionHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisionHelper.js","sourceRoot":"","sources":["../../src/helpers/VisionHelper.ts"],"names":[],"mappings":";;;AAGA;IAAA;IA8CA,CAAC;IA7CiB,0BAAa,GAA3B,UAA4B,GAAQ;QAChC,OAAO,GAAG;YACN,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC;YAC/B,CAAC,CAAC,GAAG,CAAC,SAAS;YACf,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW;YAC3B,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;IACzC,CAAC;IAED,sBAAkB,wBAAQ;aAA1B;YACI,OAAO,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1D,CAAC;;;OAAA;IAED,sBAAkB,sBAAM;aAAxB;YACI,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QACtD,CAAC;;;OAAA;IAEa,qBAAQ,GAAtB;QACI,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,IAAI,SAAS,IAAI,YAAY,CAAC,MAAM,EAAE;YAClC,CAAC,UAAU,CAAC;gBACR,IAAI,0TAA0T,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,ykDAAykD,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBAAE,KAAK,GAAG,IAAI,CAAC;YAC37D,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;SAClE;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,sBAAkB,6BAAa;aAA/B;YACI,OAAO,cAAc,CAAC;QAC1B,CAAC;;;OAAA;IAED,sBAAkB,2BAAW;aAA7B;YACI,OAAO,YAAY,CAAC;QACxB,CAAC;;;OAAA;IAED,sBAAkB,wBAAQ;aAA1B;YACI,OAAO,OAAO,CAAC,GAAG,CAAC,YAAY,KAAK,KAAK,CAAC;QAC9C,CAAC;;;OAAA;IAEa,iBAAI,GAAlB,UAAmB,QAAQ,EAAE,OAAqB;QAArB,wBAAA,EAAA,aAAqB;QAC9C,IAAI,YAAY,CAAC,MAAM,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAAE;YACtD,MAAM,CAAC,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;SAC3C;aAAM;YACH,UAAU,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;SACjC;IACL,CAAC;IACL,mBAAC;AAAD,CAAC,AA9CD,IA8CC;AA9CY,oCAAY"}

package/dist/helpers/decorators.js

@@ -0,0 +1,38 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extendsarray = void 0;
+function extendsarray(target) {
+    return /** @class */ (function (_super) {
+        __extends(class_1, _super);
+        function class_1() {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var _this = _super.apply(this, args) || this;
+            for (var c in target.prototype) {
+                _this[c] = target.prototype[c];
+            }
+            return _this;
+        }
+        return class_1;
+    }(target));
+    ;
+}
+exports.extendsarray = extendsarray;
+//# sourceMappingURL=decorators.js.map

package/dist/helpers/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../src/helpers/decorators.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,SAAgB,YAAY,CAAyC,MAAS;IAC1E;QAAqB,2BAAM;QACvB;YAAY,cAAO;iBAAP,UAAO,EAAP,qBAAO,EAAP,IAAO;gBAAP,yBAAO;;YAAnB,+BACa,IAAI,UAIhB;YAHG,KAAK,IAAM,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE;gBAC9B,KAAI,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACjC;;QACL,CAAC;QACL,cAAC;IAAD,CAAC,AAPM,CAAc,MAAM,GAOzB;IAAA,CAAC;AACP,CAAC;AATD,oCASC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",

package/src/AST.ts

@@ -77,6 +77,7 @@ export enum TokenType {
     EXCLAMATION_POINT,
     ELEMENT_REFERENCE,
     ELEMENT_ATTRIBUTE,
+    ELEMENT_STYLE,
     ELEMENT_QUERY
 }
 
@@ -127,24 +128,28 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.FOR,
-        pattern: /^for\s/
+        pattern: /^for\s?(?=\()/
     },
     {
         type: TokenType.IF,
-        pattern: /^if\s/
+        pattern: /^if\s?(?=\()/
     },
     {
         type: TokenType.ELSE_IF,
-        pattern: /^else if\s/
+        pattern: /^else if\s?(?=\()/
     },
     {
         type: TokenType.ELSE,
-        pattern: /^else\s/
+        pattern: /^else\s?(?=\{)/
     },
     {
         type: TokenType.ELEMENT_ATTRIBUTE,
         pattern: /^\.?@[_a-zA-Z0-9]*/
     },
+    {
+        type: TokenType.ELEMENT_STYLE,
+        pattern: /^\.?\$[a-zA-Z0-9]*/
+    },
     {
         type: TokenType.ELEMENT_REFERENCE,
         pattern: /^#[-_a-zA-Z0-9]*/
@@ -155,7 +160,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.NAME,
-        pattern: /^[$_a-zA-Z][_a-zA-Z0-9]*/
+        pattern: /^[_a-zA-Z][_a-zA-Z0-9]*/
     },
     {
         type: TokenType.NUMBER_LITERAL,
@@ -872,7 +877,7 @@ class ArithmeticAssignmentNode extends Node implements TreeNode {
             } else {
                 scopes.push(inner);
             }
-        } else if (this.left instanceof ElementAttributeNode && this.left.elementRef) {
+        } else if ((this.left instanceof ElementAttributeNode || this.left instanceof ElementStyleNode) && this.left.elementRef) {
             scopes = await this.left.elementRef.evaluate(scope, dom, tag);
         } else
             scopes.push(scope);
@@ -1014,7 +1019,7 @@ class ArithmeticAssignmentNode extends Node implements TreeNode {
     }
 
     public static parse(lastNode: any, token, tokens: Token[]): ArithmeticAssignmentNode {
-        if (!(lastNode instanceof RootScopeMemberNode) && !(lastNode instanceof ScopeMemberNode) && !(lastNode instanceof ElementAttributeNode)) {
+        if (!(lastNode instanceof RootScopeMemberNode) && !(lastNode instanceof ScopeMemberNode) && !(lastNode instanceof ElementAttributeNode) && !(lastNode instanceof ElementStyleNode)) {
             throw SyntaxError(`Invalid assignment syntax near ${Tree.toCode(tokens.splice(0, 10))}`);
         }
         tokens.splice(0, 1); // consume =
@@ -1242,6 +1247,61 @@ class ElementAttributeNode extends Node implements TreeNode {
     }
 }
 
+class ElementStyleNode extends Node implements TreeNode {
+    protected requiresPrep: boolean = true;
+
+    constructor(
+        public readonly elementRef: ElementQueryNode | null,
+        public readonly attr: string
+    ) {
+        super();
+    }
+
+    public get name(): LiteralNode<string> {
+        return new LiteralNode<string>(`$${this.attributeName}`);
+    }
+
+    protected _getChildNodes(): Node[] {
+        let nodes = [];
+        if (this.elementRef)
+            nodes.push(this.elementRef)
+        return nodes;
+    }
+
+    get attributeName(): string {
+        if (this.attr.startsWith('.'))
+            return this.attr.substring(2);
+        return this.attr.substring(1);
+    }
+
+    async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        let tags: TagList;
+        if (this.elementRef) {
+            tags = await this.elementRef.evaluate(scope, dom, tag);
+        } else if (tag) {
+            tags = new TagList(tag)
+        } else {
+            return;
+        }
+
+        if (tags.length === 1)
+            return tags[0].scope.get(`$${this.attributeName}`);
+
+        return tags.map((tag) => tag.scope.get(`$${this.attributeName}`));
+    }
+
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+        if (this.elementRef) {
+            await this.elementRef.prepare(scope, dom, tag);
+            const tags: TagList = await this.elementRef.evaluate(scope, dom, tag);
+            for (const t of tags)
+                await t.watchStyle(this.attributeName);
+        } else if(tag) {
+            await tag.watchStyle(this.attributeName);
+        }
+    }
+}
+
 export interface IBlockInfo {
     type: BlockType,
     open: TokenType,
@@ -1387,6 +1447,9 @@ export class Tree {
             } else if (tokens[0].type === TokenType.ELEMENT_ATTRIBUTE) {
                 node = new ElementAttributeNode(node as any, tokens[0].value);
                 tokens.splice(0, 1);
+            } else if (tokens[0].type === TokenType.ELEMENT_STYLE) {
+                node = new ElementStyleNode(node as any, tokens[0].value);
+                tokens.splice(0, 1);
             } else if (node !== null && token.type === TokenType.PERIOD && tokens[1].type === TokenType.NAME) {
                 node = new ScopeMemberNode(
                     node,

package/src/DOM/DOMObject.ts

@@ -27,4 +27,8 @@ export abstract class DOMObject extends EventDispatcher {
     public watchAttribute(attr: string) {
 
     }
+
+    public watchStyle(style: string) {
+
+    }
 }

package/src/Scope.ts

@@ -207,13 +207,12 @@ export class WrappedArray<T> extends Array<T> {
     }
 }
 
-
 export class Scope extends EventDispatcher {
     public wrapped: any;
     protected data: DataModel;
     protected types: {[key: string]: string;} = {};
     protected children: Scope[];
-    protected keys: string[];
+    protected _keys: string[];
     protected _parentScope: Scope;
 
     constructor(
@@ -224,7 +223,7 @@ export class Scope extends EventDispatcher {
             this.parentScope = parent;
         this.children = [];
         this.data = new DataModel({});
-        this.keys = [];
+        this._keys = [];
     }
 
     public get parentScope(): Scope {
@@ -277,7 +276,7 @@ export class Scope extends EventDispatcher {
             if (searchParents && this.parentScope)
                 return this.parentScope.get(key, searchParents);
 
-            return '';
+            return this._keys.indexOf(key) > -1 ? '' : undefined;
         }
 
         return value;
@@ -312,12 +311,16 @@ export class Scope extends EventDispatcher {
             this.trigger('change', key, event);
         }
 
-        if (this.keys.indexOf(key) === -1)
-            this.keys.push(key);
+        if (this._keys.indexOf(key) === -1)
+            this._keys.push(key);
+    }
+
+    get keys(): string[] {
+        return [...this._keys];
     }
 
     has(key: string): boolean {
-        return this.keys.indexOf(key) > -1;
+        return this._keys.indexOf(key) > -1;
     }
 
     setType(key: string, type: string) {
@@ -337,7 +340,7 @@ export class Scope extends EventDispatcher {
     }
 
     clear() {
-        for (const key of this.keys) {
+        for (const key of this._keys) {
             if (['function', 'object'].indexOf(typeof this.get(key)) > -1) continue;
             this.set(key, null);
         }

package/src/Tag.ts

@@ -8,6 +8,8 @@ import {On} from "./attributes/On";
 import {Registry} from "./Registry";
 import {benchmarkEnd, benchmarkStart} from "./Bencmark";
 import {DOMObject} from "./DOM/DOMObject";
+import { Tree } from "./AST";
+import {StyleAttribute} from "./attributes/StyleAttribute";
 
 export enum TagState {
     Instantiated,
@@ -104,6 +106,12 @@ export class Tag extends DOMObject {
         }
     }
 
+    public async eval(code: string) {
+        const tree = new Tree(code);
+        await tree.prepare(this.scope, this.dom, this);
+        return await tree.evaluate(this.scope, this.dom, this);
+    }
+
     public async evaluate() {
         for (const attr of this.nonDeferredAttributes) {
             await attr.evaluate();
@@ -480,6 +488,31 @@ export class Tag extends DOMObject {
         return standardAttribute;
     }
 
+    async watchStyle(styleName: string) {
+        for (const attribute of this.attributes) {
+            if (attribute instanceof StyleAttribute) {
+                return attribute;
+            }
+        }
+
+        // Standard attribute requires a unique scope
+        // @todo: Does this cause any issues with attribute bindings on the parent scope prior to having its own scope? hmm...
+        if (!this.uniqueScope) {
+            this._uniqueScope = true;
+            this._scope = new Scope();
+
+            if (this.parentTag) {
+                this.scope.parentScope = this.parentTag.scope;
+            }
+        }
+
+        const styleAttribute = new StyleAttribute(this, 'style');
+        this.attributes.push(styleAttribute);
+        await this.setupAttribute(styleAttribute);
+
+        return styleAttribute;
+    }
+
     private async setupAttribute(attribute: Attribute) {
         await attribute.compile();
         await attribute.setup();

package/src/Vision.ts

@@ -72,5 +72,5 @@ export * from './Registry';
 export * from './Attribute';
 export * from './AST';
 export {DOM} from './DOM';
-export {WrappedArray, Scope} from './Scope';
+export {WrappedArray, Scope, ScopeReference} from './Scope';
 export const vision: Vision = Vision.instance;

package/src/attributes/StyleAttribute.ts

@@ -0,0 +1,68 @@
+import {Registry} from "../Registry";
+import {Attribute} from "../Attribute";
+import {Scope, ScopeReference} from "../Scope";
+
+
+@Registry.attribute('vsn-styles')
+export class StyleAttribute extends Attribute {
+    private scopeRef: ScopeReference;
+    private styleScope: Scope;
+
+    public async setup() {
+        const key = this.getAttributeValue() || null;
+        if (key) {
+            this.scopeRef = this.tag.scope.getReference(key, true);
+            const parentScope = await this.scopeRef.getScope();
+            const styleKey = await this.scopeRef.getKey();
+            this.styleScope = parentScope.get(styleKey);
+            if (!this.styleScope) {
+                this.styleScope = new Scope(parentScope);
+                parentScope.set(styleKey, this.styleScope);
+            }
+        } else {
+            this.styleScope = this.tag.scope;
+        }
+
+        await super.setup();
+    }
+
+    public async connect() {
+        this.styleScope.bind(`change`, this.handleEvent.bind(this));
+        await super.connect();
+    }
+
+    public async extract() {
+        this.updateFrom();
+        await super.extract();
+    }
+
+    updateFrom() {
+        const toSkip = [
+            'cssText',
+            'length'
+        ]
+        for (const k in this.tag.style) {
+            if (toSkip.indexOf(k) > -1 || isFinite(k as any))
+                continue;
+            const value = this.tag.style[k];
+            const key = `$${k}`;
+            if (value && value !== this.styleScope.get(key))
+                this.styleScope.set(key, value);
+        }
+    }
+
+    public mutate(mutation: MutationRecord) {
+        super.mutate(mutation);
+        this.updateFrom();
+    }
+
+    public async handleEvent(k, v) {
+        if (k.startsWith('$')) {
+            const key = k.substr(1);
+
+            if (v.value !== v.previousValue) {
+                this.tag.element.style[key] = v.value;
+            }
+        }
+    }
+}