vsn 0.1.10 → 0.1.14

package/src/AST.ts

@@ -143,7 +143,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.ELEMENT_ATTRIBUTE,
-        pattern: /^\.@[_a-zA-Z0-9]*/
+        pattern: /^\.?@[_a-zA-Z0-9]*/
     },
     {
         type: TokenType.ELEMENT_REFERENCE,
@@ -151,7 +151,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,
@@ -868,7 +868,7 @@ class ArithmeticAssignmentNode extends Node implements TreeNode {
             } else {
                 scopes.push(inner);
             }
-        } else if (this.left instanceof ElementAttributeNode) {
+        } else if (this.left instanceof ElementAttributeNode && this.left.elementRef) {
             scopes = await this.left.elementRef.evaluate(scope, dom, tag);
         } else
             scopes.push(scope);
@@ -1187,7 +1187,7 @@ class ElementAttributeNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
 
     constructor(
-        public readonly elementRef: ElementQueryNode,
+        public readonly elementRef: ElementQueryNode | null,
         public readonly attr: string
     ) {
         super();
@@ -1198,9 +1198,10 @@ class ElementAttributeNode extends Node implements TreeNode {
     }
 
     protected _getChildNodes(): Node[] {
-        return [
-            this.elementRef
-        ]
+        let nodes = [];
+        if (this.elementRef)
+            nodes.push(this.elementRef)
+        return nodes;
     }
 
     get attributeName(): string {
@@ -1210,17 +1211,30 @@ class ElementAttributeNode extends Node implements TreeNode {
     }
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
-        const tags: TagList = await this.elementRef.evaluate(scope, dom, tag);
+        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) {
-        await this.elementRef.prepare(scope, dom, tag);
-        const tags: TagList = await this.elementRef.evaluate(scope, dom, tag);
-        for (const tag of tags)
+        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.watchAttribute(this.attributeName);
+        } else if(tag) {
             await tag.watchAttribute(this.attributeName);
+        }
     }
 }
 
@@ -1273,7 +1287,7 @@ export class Tree {
             let _scope: Scope = scope;
             if (node instanceof ScopeMemberNode)
                 _scope = await node.scope.evaluate(scope, dom);
-            else if (node instanceof ElementAttributeNode) {
+            else if (node instanceof ElementAttributeNode && node.elementRef) {
                 _scope = (await node.elementRef.evaluate(scope, dom, tag))[0].scope;
             }
 
@@ -1367,11 +1381,7 @@ export class Tree {
             } else if (tokens[0].type === TokenType.L_BRACE) {
                 node = ObjectNode.parse(node, token, tokens);
             } else if (tokens[0].type === TokenType.ELEMENT_ATTRIBUTE) {
-                if (node instanceof ElementQueryNode) {
-                    node = new ElementAttributeNode(node, tokens[0].value);
-                } else {
-                    node = new ScopeMemberNode(node, new LiteralNode<string>(tokens[0].value.substr(1)));
-                }
+                node = new ElementAttributeNode(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(

package/src/Scope.ts

@@ -79,6 +79,9 @@ export class WrappedArray<T> extends Array<T> {
         const num: number = super.push(...items);
 
         this.trigger('push', ...items);
+        this.trigger('change', {
+            'added': items
+        });
         for (const item of items) {
             this.trigger('add', item);
         }
@@ -88,6 +91,9 @@ export class WrappedArray<T> extends Array<T> {
     splice(start: number, deleteCount?: number): T[] {
         const removed: T[] = super.splice(start, deleteCount);
 
+        this.trigger('change', {
+            'removed': removed
+        });
         for (const item of removed) {
             this.trigger('remove', item);
         }
@@ -104,6 +110,10 @@ export class WrappedArray<T> extends Array<T> {
     }
 
     set length(num: number) {
+        this.setLength(num);
+    }
+
+    setLength(num: number) {
         let c: number = 0;
         const toRemove: T[] = [];
         for (const item of this) {
@@ -115,7 +125,6 @@ export class WrappedArray<T> extends Array<T> {
 
         for (const item of toRemove) {
             this.splice(this.indexOf(item), 1);
-            this.trigger('remove', item);
         }
     }
 
@@ -358,8 +367,13 @@ export class Scope extends EventDispatcher {
                 continue;
             }
 
-            if (this.wrapped[field] instanceof Array && !(this.wrapped[field] instanceof WrappedArray)) {
-                this.wrapped[field] = new WrappedArray(...toWrap[field]);
+            if (this.wrapped[field] instanceof Array) {
+                if (!(this.wrapped[field] instanceof WrappedArray)) {
+                    this.wrapped[field] = new WrappedArray(...toWrap[field]);
+                }
+                this.wrapped[field].bind('change', (...args) => {
+                    this.trigger(`change:${field}`, ...args);
+                })
             }
 
             if (typeof this.wrapped[field] == 'object' && this.wrapped[field] && this.wrapped[field].constructor === Object) {

package/src/Tag.ts

@@ -181,15 +181,17 @@ export class Tag extends DOMObject {
         if (this.isInput) {
             if (value) {
                 this.element.setAttribute('checked', '');
+                (this.element as HTMLInputElement).checked = true;
             } else {
                 this.element.removeAttribute('checked');
+                (this.element as HTMLInputElement).checked = false;
             }
         }
     }
 
     get checked(): boolean {
         if (this.isInput) {
-            return this.element.getAttribute('checked') === 'checked';
+            return (this.element as HTMLInputElement).checked;
         } else {
             return false;
         }

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.eval('?(#parent).asd')).toBe(123);
+            expect(await dom.eval('?(#testing).asd')).toBe(345);
             done();
         });
     });

package/test/Scope.spec.ts

@@ -40,4 +40,18 @@ describe('WrappedArray', () => {
         expect(removes).toBe(2);
         expect(a.length).toBe(1);
     });
+
+    it("should trigger change events", async () => {
+        const a = new WrappedArray();
+        let changes: number = 0;
+        a.bind('change', (e) => {
+             changes += 1;
+        });
+        a.push(1);
+        a.push(2);
+        a.push(3);
+        a.setLength(0);
+        expect(changes).toBe(6);
+        expect(a.length).toBe(0);
+    });
 });

package/test/attributes/Bind.spec.ts

@@ -18,6 +18,19 @@ describe('Bind', () => {
         });
     });
 
+    it("vsn-bind to work with inner text with @text", (done) => {
+        document.body.innerHTML = `
+            <span id="test" test="testing" vsn-bind="@test"></span>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const tag = await dom.getTagForElement(document.getElementById('test'));
+            expect(tag).toBeTruthy();
+            expect(tag.scope.get('@test')).toBe('testing');
+            done();
+        });
+    });
+
     it("vsn-bind order of execution to be left to right and top to bottom", (done) => {
         document.body.innerHTML = `
             <span id="test" vsn-name="test" vsn-bind:id="test.id" vsn-bind="test.id">testing</span>