vsn 0.1.11 → 0.1.15

package/dist/attributes/_imports.js

@@ -1,30 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("./AddClassIf");
-require("./Bind");
-require("./ClickRemoveClass");
-require("./ClickToggleClass");
-require("./ControllerAttribute");
-require("./DisableIf");
-require("./Exec");
-require("./Format");
-require("./If");
-require("./JSONAttribute");
-require("./KeyDown");
-require("./KeyUp");
-require("./List");
-require("./ListItem");
-require("./ListItemModel");
-require("./ModelAttribute");
-require("./Name");
-require("./On");
-require("./Radio");
-require("./Referenced");
-require("./RootAttribute");
-require("./ScopeAttribute");
-require("./ScopeChange");
-require("./SetAttribute");
-require("./StandardAttribute");
-require("./Template");
-require("./TypeAttribute");
+exports.TypeAttribute = exports.Template = 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 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

@@ -1 +1 @@
-{"version":3,"file":"_imports.js","sourceRoot":"","sources":["../../src/attributes/_imports.ts"],"names":[],"mappings":";;AAAA,wBAAsB;AACtB,kBAAgB;AAChB,8BAA4B;AAC5B,8BAA4B;AAC5B,iCAA+B;AAC/B,uBAAqB;AACrB,kBAAgB;AAChB,oBAAkB;AAClB,gBAAc;AACd,2BAAyB;AACzB,qBAAmB;AACnB,mBAAiB;AACjB,kBAAgB;AAChB,sBAAoB;AACpB,2BAAyB;AACzB,4BAA0B;AAC1B,kBAAgB;AAChB,gBAAc;AACd,mBAAiB;AACjB,wBAAsB;AACtB,2BAAyB;AACzB,4BAA0B;AAC1B,yBAAuB;AACvB,0BAAwB;AACxB,+BAA6B;AAC7B,sBAAoB;AACpB,2BAAyB"}
+{"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,uCAAoC;AAA5B,oGAAA,QAAQ,OAAA;AAChB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA"}

package/package.json

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

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/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,7 @@ export class Vision extends EventDispatcher {
     }
 }
 
+export * from "./attributes/_imports";
 export * from './Registry';
 export * from './Attribute';
 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/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>