vsn 0.1.49 → 0.1.52

package/dist/attributes/_imports.js

@@ -1,6 +1,6 @@
 "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.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.Bind = exports.AddClassIf = void 0;
+exports.TypeAttribute = exports.Template = exports.StyleAttribute = exports.StandardAttribute = exports.SetAttribute = exports.ScopeChange = exports.ScopeAttribute = exports.RootAttribute = exports.Referenced = exports.On = exports.Name = exports.ModelAttribute = exports.ListItemModel = exports.ListItem = exports.List = exports.LazyAttribute = exports.KeyUp = exports.KeyDown = exports.JSONAttribute = exports.If = exports.Format = exports.Exec = exports.DisableIf = exports.ControllerAttribute = 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");
@@ -21,6 +21,8 @@ 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 LazyAttribute_1 = require("./LazyAttribute");
+Object.defineProperty(exports, "LazyAttribute", { enumerable: true, get: function () { return LazyAttribute_1.LazyAttribute; } });
 var List_1 = require("./List");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
 var ListItem_1 = require("./ListItem");

package/dist/attributes/_imports.js.map

@@ -1 +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,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,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"}
+{"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,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,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,+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,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/VisionHelper.d.ts

@@ -6,6 +6,7 @@ export declare class VisionHelper {
     static get inDevelopment(): boolean;
     static get doBenchmark(): boolean;
     static get inLegacy(): boolean;
+    static getUriWithParams(url: string, params: Record<string, any>): string;
     static nice(callback: any, timeout?: number): void;
     static get wasmSupport(): boolean;
 }

package/dist/helpers/VisionHelper.js

@@ -56,6 +56,21 @@ var VisionHelper = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    VisionHelper.getUriWithParams = function (url, params) {
+        var base = window.location.origin;
+        if (url.startsWith('.') || !url.startsWith('/')) {
+            base += window.location.pathname;
+        }
+        var _url = new URL(url, base);
+        var urlParams = new URLSearchParams(_url.search);
+        for (var key in params) {
+            if (params[key] !== undefined) {
+                urlParams.set(key, params[key]);
+            }
+        }
+        _url.search = urlParams.toString();
+        return _url.toString();
+    };
     VisionHelper.nice = function (callback, timeout) {
         if (timeout === void 0) { timeout = 100; }
         if (VisionHelper.window && window['requestIdleCallback']) {

package/dist/helpers/VisionHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisionHelper.js","sourceRoot":"","sources":["../../src/helpers/VisionHelper.ts"],"names":[],"mappings":";;;AAGA;IAAA;IA2DA,CAAC;IA1DiB,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;IAED,sBAAkB,2BAAW;aAA7B;YACI,IAAI;gBACA,IAAI,OAAO,WAAW,KAAK,QAAQ;uBAC5B,OAAO,WAAW,CAAC,WAAW,KAAK,UAAU,EAAE;oBAClD,IAAM,QAAM,GAAG,IAAI,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;oBACpG,IAAI,QAAM,YAAY,WAAW,CAAC,MAAM;wBACpC,OAAO,IAAI,WAAW,CAAC,QAAQ,CAAC,QAAM,CAAC,YAAY,WAAW,CAAC,QAAQ,CAAC;iBAC/E;aACJ;YAAC,OAAO,CAAC,EAAE;aACX;YACD,OAAO,KAAK,CAAC;QACjB,CAAC;;;OAAA;IACL,mBAAC;AAAD,CAAC,AA3DD,IA2DC;AA3DY,oCAAY"}
+{"version":3,"file":"VisionHelper.js","sourceRoot":"","sources":["../../src/helpers/VisionHelper.ts"],"names":[],"mappings":"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"}

package/dist/vsn.js

@@ -107,7 +107,7 @@ var Vision = /** @class */ (function (_super) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this._dom.eval(code)];
+                    case 0: return [4 /*yield*/, this._dom.exec(code)];
                     case 1: return [2 /*return*/, _a.sent()];
                 }
             });

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "vsn",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
-    "typescript"
+    "typescript",
+    "html",
+    "ajax",
+    "hateoas",
+    "rest",
+    "seo"
   ],
   "main": "./dist/vsn.js",
   "scripts": {

package/src/AST/ElementQueryNode.ts

@@ -1,7 +1,7 @@
 import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
-import {TreeNode} from "../AST";
+import {Token, TreeNode} from "../AST";
 import {Node} from "./Node";
 
 export class ElementQueryNode extends Node implements TreeNode {
@@ -9,14 +9,15 @@ export class ElementQueryNode extends Node implements TreeNode {
 
     constructor(
         public readonly query: string,
-        public readonly first: boolean = false
+        public readonly first: boolean = false,
+        public readonly global: boolean = false,
     ) {
         super();
     }
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null, forceList: boolean = false): Promise<any> {
         tag = tag || await dom.getTagForScope(scope);
-        const elements = await dom.get(this.query, true, tag);
+        const elements = await dom.get(this.query, true, this.global ? null : tag);
         return this.first && !forceList ? elements[0] : elements;
     }
 
@@ -24,4 +25,9 @@ export class ElementQueryNode extends Node implements TreeNode {
         tag = tag || await dom.getTagForScope(scope);
         await dom.get(this.query, true, tag);
     }
+
+    public static parse(lastNode, token, tokens: Token[]): ElementQueryNode {
+        tokens.shift();
+        return new ElementQueryNode(token.value, false, !token.full.startsWith('?>'));
+    }
 }

package/src/AST/XHRNode.ts

@@ -4,6 +4,7 @@ import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
 import {ScopeDataAbstract} from "../Scope/ScopeDataAbstract";
+import {VisionHelper} from "../helpers/VisionHelper";
 
 export class XHRNode extends Node implements TreeNode {
     constructor(
@@ -22,7 +23,7 @@ export class XHRNode extends Node implements TreeNode {
     }
 
     async evaluate(scope: Scope, dom: DOM, tag?: Tag) {
-        const url = await this.url.evaluate(scope, dom, tag);
+        let url = await this.url.evaluate(scope, dom, tag);
         let method: string;
         let data = this.left ? await this.left.evaluate(scope, dom, tag) : {};
 
@@ -51,7 +52,7 @@ export class XHRNode extends Node implements TreeNode {
         };
 
         if (request.method === 'GET') {
-
+            url = VisionHelper.getUriWithParams(url, data);
         } else {
             request['body'] = (typeof data === "string") ? data : JSON.stringify(data);
         }

package/src/AST.ts

@@ -38,7 +38,9 @@ interface TokenPattern {
 
 export interface Token {
     type: TokenType,
-    value: string
+    value: string,
+    full: string,
+    groups: string[]
 }
 
 export enum BlockType {
@@ -206,7 +208,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.ELEMENT_QUERY,
-        pattern: /^\?\(([#.\[\]:,=\-_a-zA-Z0-9*\s]*[\]_a-zA-Z0-9*])\)/
+        pattern: /^\?>?\(([#.\[\]:,=\-_a-zA-Z0-9*\s]*[\]_a-zA-Z0-9*])\)/
     },
     {
         type: TokenType.NAME,
@@ -294,7 +296,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.STRING_LITERAL,
-        pattern: /^'([^']*)'/ // Try to make this work: /^(?<!\\)(?:\\\\)*"([^(?<!\\)(?:\\\\)*"]*)(?<!\\)(?:\\\\)*"/
+        pattern: /^'([^']*)'/
     },
     {
         type: TokenType.AND,
@@ -352,7 +354,6 @@ export interface TreeNode<T = any> {
     prepare(scope: Scope, dom: DOM, tag?: Tag);
 }
 
-
 export interface IBlockInfo {
     type: BlockType,
     open: TokenType,
@@ -426,7 +427,9 @@ export class Tree {
                 if (match) {
                     tokens.push({
                         type: tp.type,
-                        value: match[match.length - 1]
+                        value: match[match.length - 1],
+                        full: match[0],
+                        groups: match
                     });
 
                     code = code.substring(match[0].length);
@@ -491,8 +494,7 @@ export class Tree {
                 node = new ElementQueryNode(tokens[0].value, true);
                 tokens.shift()
             } else if (tokens[0].type === TokenType.ELEMENT_QUERY) {
-                node = new ElementQueryNode(tokens[0].value);
-                tokens.shift()
+                node = ElementQueryNode.parse(node, tokens[0], tokens);
             } else if (tokens[0].type === TokenType.L_BRACKET) {
                 if (node) {
                     node = IndexNode.parse(node, token, tokens);

package/src/DOM.ts

@@ -100,7 +100,7 @@ export class DOM extends EventDispatcher {
         return this.rootElement.querySelector(q);
     }
 
-    public async eval(code: string) {
+    public async exec(code: string) {
         const tree = new Tree(code);
         await tree.prepare(this.root.scope, this);
         return await tree.evaluate(this.root.scope, this);

package/src/Scope/QueryReference.ts

@@ -14,7 +14,7 @@ export class QueryReference extends ScopeReference {
     public async getScope() {
         let parts: string[] = this.path.split('.');
         parts = parts.splice(0, parts.length - 1);
-        const qResult = await DOM.instance.eval(parts.join('.'));
+        const qResult = await DOM.instance.exec(parts.join('.'));
         return qResult.length === 1 ? qResult[0].scope : qResult.map((dobj) => dobj.scope);
     }
 
@@ -24,6 +24,6 @@ export class QueryReference extends ScopeReference {
     }
 
     public async getValue() {
-        return await DOM.instance.eval(this.path);
+        return await DOM.instance.exec(this.path);
     }
 }

package/src/Tag.ts

@@ -108,7 +108,7 @@ export class Tag extends DOMObject {
         }
     }
 
-    public async eval(code: string) {
+    public async exec(code: string) {
         const tree = new Tree(code);
         await tree.prepare(this.scope, this.dom, this);
         return await tree.evaluate(this.scope, this.dom, this);
@@ -556,13 +556,20 @@ export class Tag extends DOMObject {
         this.onEventHandlers[eventType].push(handler);
     }
 
-    async watchAttribute(attributeName: string) {
-        for (const attribute of this.attributes) {
-            if (attribute instanceof StandardAttribute && attribute.attributeName == attributeName) {
-                return attribute;
+    public removeEventHandler(eventType: string, handler) {
+        if (!this.onEventHandlers[eventType])
+            return;
+
+        const index = this.onEventHandlers[eventType].indexOf(handler);
+        if (index > -1) {
+            this.onEventHandlers[eventType].splice(index, 1);
+            if (this.onEventHandlers[eventType].length === 0) {
+                this.element.removeEventListener(eventType, this.handleEvent.bind(this, eventType));
             }
         }
+    }
 
+    public createScope() {
         // 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) {
@@ -573,6 +580,16 @@ export class Tag extends DOMObject {
                 this.scope.parentScope = this.parentTag.scope;
             }
         }
+    }
+
+    async watchAttribute(attributeName: string) {
+        for (const attribute of this.attributes) {
+            if (attribute instanceof StandardAttribute && attribute.attributeName == attributeName) {
+                return attribute;
+            }
+        }
+
+        this.createScope();
 
         const standardAttribute = new StandardAttribute(this, attributeName);
         this.attributes.push(standardAttribute);
@@ -588,16 +605,7 @@ export class Tag extends DOMObject {
             }
         }
 
-        // 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;
-            }
-        }
+        this.createScope();
 
         const styleAttribute = new StyleAttribute(this, 'style');
         this.attributes.push(styleAttribute);

package/src/attributes/LazyAttribute.ts

@@ -0,0 +1,26 @@
+import {Registry} from "../Registry";
+import {On} from "./On";
+
+@Registry.attribute('vsn-lazy')
+export class LazyAttribute extends On {
+    private loaded: boolean = false;
+    private eleTop: number;
+
+    public async setup() {
+        await super.setup();
+        this.eleTop = this.tag.element.getBoundingClientRect().top;
+    }
+
+    public async connect() {
+        this.tag.addEventHandler('scroll', ['passive'], this.handleEvent.bind(this));
+        await this.handleEvent();
+    }
+
+    async handleEvent(e?: Event) {
+        if (!this.loaded && window.scrollY + window.outerHeight >= this.eleTop) {
+            this.loaded = true;
+            await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
+            this.tag.removeEventHandler('scroll', this.handleEvent.bind(this));
+        }
+    }
+}

package/src/attributes/List.ts

@@ -37,7 +37,7 @@ export class List extends Attribute {
             }
         } else {
             if (this.tag.hasRawAttribute('template')) {
-                let templateNode = await DOM.instance.eval(this.tag.getRawAttributeValue('template'));
+                let templateNode = await DOM.instance.exec(this.tag.getRawAttributeValue('template'));
                 if (templateNode instanceof Array && templateNode.length === 1)
                     templateNode = templateNode[0];
 

package/src/attributes/ScopeAttribute.ts

@@ -1,8 +1,27 @@
 import {Attribute} from "../Attribute";
 import {Registry} from "../Registry";
+import {Tree} from "../AST";
+import {Scope} from "../Scope";
 
 @Registry.attribute('vsn-scope')
 export class ScopeAttribute extends Attribute {
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
+    protected tree: Tree;
+
+    public async compile() {
+        this.tree = new Tree(this.getAttributeValue());
+        await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        await super.compile();
+    }
+
+    public async extract() {
+        const value = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
+        if (!(value instanceof Scope)) {
+            throw new Error(`Scope value must be an object, got ${typeof value}`);
+        }
+        for (const key of value.data.keys) {
+            this.tag.scope.set(key, value.data[key]);
+        }
+    }
 }

package/src/attributes/_imports.ts

@@ -8,6 +8,7 @@ export {If} from "./If";
 export {JSONAttribute} from "./JSONAttribute";
 export {KeyDown} from "./KeyDown";
 export {KeyUp} from "./KeyUp";
+export {LazyAttribute} from "./LazyAttribute";
 export {List} from "./List";
 export {ListItem} from "./ListItem";
 export {ListItemModel} from "./ListItemModel";

package/src/helpers/VisionHelper.ts

@@ -40,6 +40,25 @@ export class VisionHelper {
         return process.env.BUILD_TARGET === 'es5';
     }
 
+    public static getUriWithParams(
+        url: string,
+        params: Record<string, any>
+    ): string {
+        let base = window.location.origin;
+        if (url.startsWith('.') || !url.startsWith('/')) {
+            base += window.location.pathname;
+        }
+        const _url = new URL(url, base);
+        const urlParams: URLSearchParams = new URLSearchParams(_url.search);
+        for (const key in params) {
+            if (params[key] !== undefined) {
+                urlParams.set(key, params[key]);
+            }
+        }
+        _url.search = urlParams.toString();
+        return _url.toString();
+    }
+
     public static nice(callback, timeout: number = 100) {
         if (VisionHelper.window && window['requestIdleCallback']) {
             window['requestIdleCallback'](callback);

package/src/vsn.ts

@@ -44,7 +44,7 @@ export class Vision extends EventDispatcher {
     }
 
     public async eval(code: string) {
-        return await this._dom.eval(code);
+        return await this._dom.exec(code);
     }
 
     public async setup() {

package/test/Controller.spec.ts

@@ -33,10 +33,10 @@ describe('Controller', () => {
         const dom = new DOM(document);
         const deferred = SimplePromise.defer();
         dom.once('built', async () => {
-            expect(await dom.eval('test.test')).toBe('notTest');
-            expect(await dom.eval('test.isValid()')).toBe(false);
-            await dom.eval('test.test = "test"');
-            expect(await dom.eval('test.isValid()')).toBe(true);
+            expect(await dom.exec('test.test')).toBe('notTest');
+            expect(await dom.exec('test.isValid()')).toBe(false);
+            await dom.exec('test.test = "test"');
+            expect(await dom.exec('test.isValid()')).toBe(true);
             deferred.resolve();
         });
         await deferred.promise;

package/test/DOM.spec.ts

@@ -28,8 +28,8 @@ describe('DOM', () => {
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(await dom.eval('?(#parent).asd')).toBe(123);
-            expect(await dom.eval('?(#testing).asd')).toBe(345);
+            expect(await dom.exec('?(#parent).asd')).toBe(123);
+            expect(await dom.exec('?(#testing).asd')).toBe(345);
             done();
         });
     });

package/test/attributes/ScopeAttribute.spec.ts

@@ -0,0 +1,23 @@
+import {DOM} from "../../src/DOM";
+import "../../src/Types";
+import "../../src/attributes/_imports";
+
+
+describe('ScopeAttribute', () => {
+    it("vsn-styles to just work", (done) => {
+        document.body.innerHTML = `
+            <div vsn-scope="{'asd':123, 'sdf': 'asd'}">
+                <span vsn-bind="asd"></span>
+            </div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const element = (await dom.exec('?(div)'))[0];
+            expect(element.scope.get('asd')).toBe(123);
+            expect(element.scope.get('sdf')).toBe('asd');
+            const span = (await element.exec('?>(:first-child)'))[0];
+            expect(span.element.innerText).toBe('123');
+            done();
+        });
+    });
+});

package/test/attributes/Styles.spec.ts

@@ -35,7 +35,7 @@ describe('Styles', () => {
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            await dom.eval('?(#styling).$marginTop = "50px"');
+            await dom.exec('?(#styling).$marginTop = "50px"');
             expect((await dom.get('#styling'))[0].element.style.marginTop).toBe('50px');
             done();
         });

package/examples/attribute-binding.html

@@ -1,29 +0,0 @@
-<h2>The Link</h2>
-<p>v-bind:href binds the scope variable to the element's href attribute. v-name creates a variable scope to hold the url and text variables. Note: You could remove the v-name and the link. from all of the bindings to set the values to the root scope.</p>
-<div>
-    <a href="/index.html" v-name="link" v-bind:href="link.url" v-bind="link.text">Home</a>
-</div>
-
-<h2>Text Values</h2>
-<p>Bind an element's innerText with v-bind.</p>
-<div>URL: <span v-bind="link.url"></span>, Text: <span v-bind="link.text"></span></div>
-
-<h2>Change Values with Button Click</h2>
-<div>
-    <button id="button-help" v-click="link.url='/help.html';link.text='Help';">Change to Help</button>
-    <button id="button-info" v-click="link.url='/info.html';link.text='Info';">Change to Info</button>
-</div>
-
-<h2>Change Values with Inputs</h2>
-<p>v-bind on inputs binds the inputs values to the scope variable.</p>
-<div>
-    <label>
-        Link Text:
-        <input type="text" v-bind="link.text" />
-    </label>
-
-    <label>
-        Link URL:
-        <input type="text" v-bind="link.url" />
-    </label>
-</div>