vsn 0.1.13 → 0.1.17

package/main.py

@@ -0,0 +1,16 @@
+# This is a sample Python script.
+
+# Press Shift+F10 to execute it or replace it with your code.
+# Press Double Shift to search everywhere for classes, files, tool windows, actions, and settings.
+
+
+def print_hi(name):
+    # Use a breakpoint in the code line below to debug your script.
+    print(f'Hi, {name}')  # Press Ctrl+F8 to toggle the breakpoint.
+
+
+# Press the green button in the gutter to run the script.
+if __name__ == '__main__':
+    print_hi('PyCharm')
+
+# See PyCharm help at https://www.jetbrains.com/help/pycharm/

package/package.json

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

package/src/AST.ts

@@ -1,4 +1,4 @@
-import {Scope} from "./Scope";
+import {Scope, WrappedArray} from "./Scope";
 import {DOM} from "./DOM";
 import {DOMObject} from "./DOM/DOMObject";
 import {TagList} from "./Tag/List";
@@ -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,
@@ -287,13 +287,11 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     }
 ];
 
-
 export interface TreeNode<T = any> {
     evaluate(scope: Scope, dom: DOM, tag?: Tag);
     prepare(scope: Scope, dom: DOM, tag?: Tag);
 }
 
-
 export abstract class Node implements TreeNode {
     protected requiresPrep: boolean = false;
     protected _isPreparationRequired: boolean;
@@ -450,10 +448,15 @@ class ConditionalNode extends Node implements TreeNode {
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
         const condition = await this.condition.evaluate(scope, dom, tag);
-        if (condition) {
-            return await this.block.evaluate(scope, dom, tag);
+        let evaluation = false;
+
+        if (condition instanceof WrappedArray) {
+            evaluation = condition.length > 0;
+        } else {
+            evaluation = !!condition;
         }
-        return null;
+
+        return evaluation;
     }
 }
 
@@ -472,7 +475,7 @@ class IfStatementNode extends Node implements TreeNode {
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
         for (const condition of this.nodes) {
-            const uno: boolean = await condition.condition.evaluate(scope, dom, tag);
+            const uno: boolean = await condition.evaluate(scope, dom, tag);
             if (uno) {
                 return await condition.block.evaluate(scope, dom, tag);
             }
@@ -789,7 +792,8 @@ class RootScopeMemberNode<T = any> extends Node implements TreeNode {
     }
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
-        const value = scope.get(await this.name.evaluate(scope, dom, tag));
+        const name = await this.name.evaluate(scope, dom, tag);
+        const value = scope.get(name);
         return value instanceof Scope && value.wrapped || value;
     }
 }
@@ -868,7 +872,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);
@@ -1092,7 +1096,7 @@ class ArrayNode extends Node implements TreeNode {
     }
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
-        const arr: any[] = [];
+        const arr: WrappedArray<any> = new WrappedArray();
         for (const val of this.values) {
             arr.push(await val.evaluate(scope, dom, tag));
         }
@@ -1187,7 +1191,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 +1202,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 +1215,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 +1291,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 +1385,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

@@ -101,6 +101,13 @@ export class WrappedArray<T> extends Array<T> {
         return removed;
     }
 
+    get(key: string) {
+        const keys: string[] = [
+            'length'
+        ];
+        return keys.indexOf(key) > -1 ? this[key] : undefined;
+    }
+
     get length(): number {
         let c: number = 0;
         for (const item of this) {
@@ -110,6 +117,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) {

package/src/Vision.ts

@@ -1,11 +1,10 @@
 import {DOM} from "./DOM";
 import {EventDispatcher} from "simple-ts-event-dispatcher";
-import {Scope, WrappedArray} from "./Scope";
+import {WrappedArray} from "./Scope";
 import {DataModel} from "simple-ts-models";
 import {Registry} from "./Registry";
 import "./Types";
 import "./Formats";
-import "./attributes/_imports";
 import {Configuration} from "./Configuration";
 import {VisionHelper} from "./helpers/VisionHelper";
 import {Tree} from "./AST";
@@ -57,7 +56,7 @@ export class Vision extends EventDispatcher {
         await this._dom.buildFrom(document, true);
         const now = (new Date()).getTime();
         const setupTime = now - startTime;
-        console.warn(`Took ${setupTime}ms to start up VisionJS`);
+        console.warn(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`);
     }
 
     public static get instance() {
@@ -68,6 +67,10 @@ export class Vision extends EventDispatcher {
     }
 }
 
+export * from "./attributes/_imports";
 export * from './Registry';
 export * from './Attribute';
+export * from './AST';
+export {DOM} from './DOM';
+export {WrappedArray, Scope} from './Scope';
 export const vision: Vision = Vision.instance;

package/src/attributes/_imports.ts

@@ -1,27 +1,27 @@
-import "./AddClassIf";
-import "./Bind";
-import "./ClickRemoveClass";
-import "./ClickToggleClass";
-import "./ControllerAttribute";
-import "./DisableIf";
-import "./Exec";
-import "./Format";
-import "./If";
-import "./JSONAttribute";
-import "./KeyDown";
-import "./KeyUp";
-import "./List";
-import "./ListItem";
-import "./ListItemModel";
-import "./ModelAttribute";
-import "./Name";
-import "./On";
-import "./Radio";
-import "./Referenced";
-import "./RootAttribute";
-import "./ScopeAttribute";
-import "./ScopeChange";
-import "./SetAttribute";
-import "./StandardAttribute";
-import "./Template";
-import "./TypeAttribute";
+export {AddClassIf} from "./AddClassIf";
+export {Bind} from "./Bind";
+export {ClickRemoveClass} from "./ClickRemoveClass";
+export {ClickToggleClass} from "./ClickToggleClass";
+export {ControllerAttribute} from "./ControllerAttribute";
+export {DisableIf} from "./DisableIf";
+export {Exec} from "./Exec";
+export {Format} from "./Format";
+export {If} from "./If";
+export {JSONAttribute} from "./JSONAttribute";
+export {KeyDown} from "./KeyDown";
+export {KeyUp} from "./KeyUp";
+export {List} from "./List";
+export {ListItem} from "./ListItem";
+export {ListItemModel} from "./ListItemModel";
+export {ModelAttribute} from "./ModelAttribute";
+export {Name} from "./Name";
+export {On} from "./On";
+export {Radio} from "./Radio";
+export {Referenced} from "./Referenced";
+export {RootAttribute} from "./RootAttribute";
+export {ScopeAttribute} from "./ScopeAttribute";
+export {ScopeChange} from "./ScopeChange";
+export {SetAttribute} from "./SetAttribute";
+export {StandardAttribute} from "./StandardAttribute";
+export {Template} from "./Template";
+export {TypeAttribute} from "./TypeAttribute";

package/test/AST.spec.ts

@@ -1,5 +1,5 @@
 import {Promise as SimplePromise, IDeferred} from 'simple-ts-promise';
-import {Scope} from "../src/Scope";
+import {Scope, WrappedArray} from "../src/Scope";
 import {Tree} from "../src/AST";
 import {DOM} from "../src/DOM";
 
@@ -144,20 +144,44 @@ describe('Tree', () => {
         expect(await tree.evaluate(scope, dom)).toBe(true);
         // Multiple if statements
         tree = new Tree(`
-            poop = 15;
-            if (poop > 5) {
-                poop = 3;
+            foo = 15;
+            if (foo > 5) {
+                foo = 3;
             } else if (true) {
-                poop = 5;
+                foo = 5;
             } else {
-                poop = false;
+                foo = false;
             }
-            if (poop == 3) {
-                poop = 5;
+            if (foo == 3) {
+                foo = 5;
             }`);
         await tree.evaluate(scope, dom);
-        expect(scope.get('poop')).toBe(5);
-        console.log('=========================');
+        expect(scope.get('foo')).toBe(5);
+
+        // Array literals should be instantiaed as WrappedArray
+        tree = new Tree(`[123,456];`);
+        expect((await tree.evaluate(scope, dom)) instanceof WrappedArray).toBe(true);
+
+        // Array if statement and length test
+        tree = new Tree(`
+            foo1 = [1234,5678,9101112];
+            bar1 = [];
+            fooLength = foo1.length;
+            fooTest = false;
+            barTest = false;
+            
+            if (foo1) {
+                fooTest = true;
+            }
+            
+            if (bar1) {
+                barTest = true;
+            }
+        `);
+        await tree.evaluate(scope, dom);
+        expect(scope.get('fooTest')).toBe(true);
+        expect(scope.get('barTest')).toBe(false);
+        expect(scope.get('fooLength')).toBe(3);
     });
 
     it("should be able to assign variables properly", async () => {
@@ -203,11 +227,16 @@ describe('Tree', () => {
         const dom: DOM = new DOM(document, false);
         await tree.evaluate(scope, dom);
         const something = scope.get('something');
-        expect(something).toEqual([5,6,10]);
+        expect(something.length).toEqual(3);
+        expect(something[0]).toEqual(5);
+        expect(something[1]).toEqual(6);
+        expect(something[2]).toEqual(10);
 
         tree = new Tree(`something -= 5;`);
         await tree.evaluate(scope, dom);
-        expect(something).toEqual([6,10]);
+        expect(something.length).toEqual(2);
+        expect(something[0]).toEqual(6);
+        expect(something[1]).toEqual(10);
     });
 
     it("should be able to block properly with promises", async () => {

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>