vsn 0.1.50 → 0.1.51

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

@@ -296,7 +296,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.STRING_LITERAL,
-        pattern: /^'([^']*)'/ // Try to make this work: /^(?<!\\)(?:\\\\)*"([^(?<!\\)(?:\\\\)*"]*)(?<!\\)(?:\\\\)*"/
+        pattern: /^'([^']*)'/
     },
     {
         type: TokenType.AND,
@@ -354,7 +354,6 @@ export interface TreeNode<T = any> {
     prepare(scope: Scope, dom: DOM, tag?: Tag);
 }
 
-
 export interface IBlockInfo {
     type: BlockType,
     open: TokenType,

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/_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/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>