vsn 0.1.59 → 0.1.62

package/package.json

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

package/src/AST/ArithmeticAssignmentNode.ts

@@ -59,7 +59,7 @@ export class ArithmeticAssignmentNode extends Node implements TreeNode {
         const values = [];
         for (let localScope of scopes) {
             if (localScope instanceof DOMObject) {
-                await this.handleDOMObject(name, dom, localScope, tag);
+                await this.handleDOMObject(name, dom, scope, localScope, tag);
             } else {
                 if (localScope['$wrapped'] && localScope['$scope']) {
                     localScope = localScope['$scope'];
@@ -68,16 +68,7 @@ export class ArithmeticAssignmentNode extends Node implements TreeNode {
                 // We get the values from the passed scope, but set the value on the local scope
                 let left: number | Array<any> | string = await this.left.evaluate(scope, dom, tag);
                 let right: number | Array<any> | string = await this.right.evaluate(scope, dom, tag);
-
-                if (left instanceof Array) {
-                    left = this.handleArray(name, left, right, localScope);
-                } else if ((left as any) instanceof UnitLiteral || right instanceof UnitLiteral) {
-                    left = this.handleUnit(name, left, right, localScope);
-                } else if (Number.isFinite(left)) {
-                    left = this.handleNumber(name, left, right, localScope);
-                } else {
-                    left = this.handleString(name, left, right, localScope);
-                }
+                left = this.handle(name, left, right, localScope);
 
                 values.push(left);
             }
@@ -85,6 +76,20 @@ export class ArithmeticAssignmentNode extends Node implements TreeNode {
         return values.length > 1 ? values : values[0];
     }
 
+    public handle(name, left, right, localScope) {
+        if (left instanceof Array) {
+            left = this.handleArray(name, left, right, localScope);
+        } else if ((left as any) instanceof UnitLiteral || right instanceof UnitLiteral) {
+            left = this.handleUnit(name, left, right, localScope);
+        } else if (Number.isFinite(left)) {
+            left = this.handleNumber(name, left, right, localScope);
+        } else {
+            left = this.handleString(name, left, right, localScope);
+        }
+
+        return left;
+    }
+
     public handleNumber(key, left, right, scope) {
         if (right !== null && !Number.isFinite(right))
             right = parseFloat(`${right}`);
@@ -167,13 +172,10 @@ export class ArithmeticAssignmentNode extends Node implements TreeNode {
         return left;
     }
 
-    public async handleDOMObject(key: string, dom: DOM, domObject: DOMObject, tag: Tag) {
+    public async handleDOMObject(key: string, dom: DOM, scope: Scope, domObject: DOMObject, tag: Tag) {
         let left = domObject.scope.get(key);
-        let right: number | Array<any> | string = await this.right.evaluate(domObject.scope, dom, tag);
-        if (left instanceof Array)
-            return this.handleArray(key, left, right, domObject.scope);
-
-        return this.handleString(key, left, right, domObject.scope);
+        let right: number | Array<any> | string = await this.right.evaluate(scope, dom, tag);
+        return this.handle(key, left, right, domObject.scope);
     }
 
     public handleArray(key, left, right, scope) {

package/src/AST/ClassNode.ts

@@ -0,0 +1,91 @@
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+import {Token, TokenType, Tree, TreeNode} from "../AST";
+import {Node} from "./Node";
+import {BlockNode} from "./BlockNode";
+import {Registry} from "../Registry";
+import {OnNode} from "./OnNode";
+
+export class ClassNode extends Node implements TreeNode {
+    public static readonly classes: {[name: string]: ClassNode} = {};
+    protected requiresPrep: boolean = true;
+    public readonly classScope: Scope = new Scope();
+
+    constructor(
+        public readonly name: string,
+        public readonly block: BlockNode
+    ) {
+        super();
+    }
+
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
+        if (ClassNode.classes[this.name]) return; // Don't re-prepare same classes
+        ClassNode.classes[this.name] = this;
+        await this.block.prepare(this.classScope, dom, tag);
+        Registry.class(this);
+        const hasConstructor = this.classScope.has('construct');
+
+        for (const element of Array.from(dom.querySelectorAll(`.${this.name}`))) {
+            const tag: Tag = await dom.getTagForElement(element as HTMLElement, true);
+            if (tag) {
+                await this.prepareTag(tag, dom, hasConstructor);
+            }
+        }
+    }
+
+    public async prepareTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
+        if (hasConstructor === null)
+            hasConstructor = this.classScope.has('construct');
+
+        tag.createScope(true);
+        await this.block.prepare(tag.scope, dom, tag);
+        if (hasConstructor) {
+            const fnc = this.classScope.get('construct');
+            (await fnc.evaluate(tag.scope, dom, tag))();
+        }
+        /*
+        for (const key of this.classScope.keys) {
+            if (this.classScope.get(key) instanceof OnNode) {
+                const on = this.classScope.get(key) as OnNode;
+                tag.addEventHandler(on.name, [], await on.getFunction(tag.scope, dom, tag), on);
+            }
+        }
+         */
+        tag.preppedClasses.push(this.name);
+    }
+
+    public async tearDownTag(tag: Tag, dom: DOM, hasDeconstructor: boolean | null = null) {
+        if (hasDeconstructor === null)
+            hasDeconstructor = this.classScope.has('deconstruct');
+
+        if (hasDeconstructor) {
+            const fnc = this.classScope.get('deconstruct');
+            (await fnc.evaluate(tag.scope, dom, tag))();
+        }
+        for (const key of this.classScope.keys) {
+            if (this.classScope.get(key) instanceof OnNode) {
+                const on = this.classScope.get(key) as OnNode;
+                tag.removeContextEventHandlers(on);
+            }
+        }
+        tag.preppedClasses.splice(tag.preppedClasses.indexOf(this.name), 1);
+    }
+
+    public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        return null;
+    }
+
+    public static parse(lastNode, token, tokens: Token[]): ClassNode {
+        tokens.shift(); // skip 'class'
+        const nameParts: string[] = [];
+        for (const t of tokens) {
+            if (t.type === TokenType.L_BRACE) break;
+            nameParts.push(t.value);
+        }
+        const name = nameParts.join('');
+        tokens.splice(0, nameParts.length);
+        const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
+        return new ClassNode(name, block);
+    }
+}

package/src/AST/FunctionCallNode.ts

@@ -5,6 +5,8 @@ import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {FunctionArgumentNode} from "./FunctionArgumentNode";
 import {ScopeMemberNode} from "./ScopeMemberNode";
+import {FunctionNode} from "./FunctionNode";
+import {Registry} from "../Registry";
 
 export class FunctionCallNode<T = any> extends Node implements TreeNode {
     constructor(
@@ -26,7 +28,34 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
         if (this.fnc instanceof ScopeMemberNode) {
             functionScope = await this.fnc.scope.evaluate(scope, dom, tag);
         }
+
         const values = await this.args.evaluate(scope, dom, tag);
-        return (await this.fnc.evaluate(scope, dom, tag)).call(functionScope.wrapped || functionScope, ...values);
+        const func = await this.fnc.evaluate(scope, dom, tag);
+        if (!func) {
+            const functionName = await (this.fnc as any).name.evaluate(scope, dom, tag);
+            const returnValues = [];
+            let calls = 0;
+            for (const className of tag.preppedClasses) {
+                const cls = Registry.instance.classes.getSynchronous(className);
+                if (cls) {
+                    if (cls.classScope.has(functionName)) {
+                        const fnc = cls.classScope.get(functionName);
+                        returnValues.push((await fnc.evaluate(functionScope, dom, tag))(...values));
+                        calls++;
+                    }
+                }
+            }
+            if (calls === 1) {
+                return returnValues[0];
+            } else if (calls === 0) {
+                throw new Error(`Function ${functionName} not found`);
+            } else {
+                return returnValues;
+            }
+        } else if (func instanceof FunctionNode) {
+            return (await func.evaluate(functionScope, dom, tag) as any)(...values);
+        } else {
+            return func.call(functionScope.wrapped || functionScope, ...values);
+        }
     }
 }

package/src/AST/FunctionNode.ts

@@ -1,4 +1,4 @@
-import {Scope} from "../Scope";
+import {FunctionScope, Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
 import {Token, Tree, TreeNode} from "../AST";
@@ -22,21 +22,26 @@ export class FunctionNode extends Node implements TreeNode {
         ];
     }
 
-    public async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
-        scope.set(this.name, async (...args) => {
-            const functionScope = new Scope(scope);
-            for (const arg of this.args) {
-                functionScope.set(arg, args.shift());
-            }
-            return await this.evaluate(functionScope, dom, tag);
-        });
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
+        scope.set(this.name, this);
+        await super.prepare(scope, dom, tag);
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
-        return await this.block.evaluate(scope, dom, tag);
+        return await this.getFunction(scope, dom, tag);
+    }
+
+    public async getFunction(scope: Scope, dom: DOM, tag: Tag = null) {
+        return async (...args) => {
+            const functionScope = new FunctionScope(scope);
+            for (const arg of this.args) {
+                functionScope.set(arg, args.shift());
+            }
+            return await this.block.evaluate(functionScope, dom, tag);
+        }
     }
 
-    public static parse(lastNode, token, tokens: Token[]): FunctionNode {
+    public static parse<T = FunctionNode>(lastNode, token, tokens: Token[], cls: any = FunctionNode): FunctionNode {
         tokens.shift(); // skip 'func'
         const name = tokens.shift();
         const argTokens = Tree.getBlockTokens(tokens);
@@ -44,7 +49,7 @@ export class FunctionNode extends Node implements TreeNode {
         for (const t of argTokens) {
             funcArgs.push(t[0].value);
         }
-        const block = Tree.processTokens(Tree.getBlockTokens(tokens, null)[0]);
-        return new FunctionNode(name.value, funcArgs, block);
+        const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
+        return new cls(name.value, funcArgs, block);
     }
 }

package/src/AST/OnNode.ts

@@ -0,0 +1,18 @@
+import {Token, TreeNode} from "../AST";
+import {FunctionNode} from "./FunctionNode";
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+
+export class OnNode extends FunctionNode implements TreeNode {
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
+        if (tag) {
+            tag.addEventHandler(this.name, [], await this.getFunction(scope, dom, tag), this);
+        }
+        await super.prepare(scope, dom, tag);
+    }
+
+    public static parse(lastNode, token, tokens: Token[]): OnNode {
+        return super.parse<OnNode>(lastNode, token, tokens, OnNode);
+    }
+}

package/src/AST.ts

@@ -27,6 +27,8 @@ import {NotNode} from "./AST/NotNode";
 import {XHRNode} from "./AST/XHRNode";
 import {StringFormatNode} from "./AST/StringFormatNode";
 import {FunctionNode} from "./AST/FunctionNode";
+import {ClassNode} from "./AST/ClassNode";
+import {OnNode} from "./AST/OnNode";
 
 function lower(str: string): string {
     return str ? str.toLowerCase() : null;
@@ -67,6 +69,8 @@ export enum TokenType {
     ELSE_IF,
     ELSE,
     FUNC,
+    ON,
+    CLASS,
     NAME,
     L_BRACE,
     R_BRACE,
@@ -200,6 +204,14 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.FUNC,
         pattern: /^func\s/
     },
+    {
+        type: TokenType.ON,
+        pattern: /^on\s/
+    },
+    {
+        type: TokenType.CLASS,
+        pattern: /^class\s/
+    },
     {
         type: TokenType.ELEMENT_ATTRIBUTE,
         pattern: /^\.?@[-_a-zA-Z0-9]*/
@@ -492,6 +504,14 @@ export class Tree {
                 node = FunctionNode.parse(node, token, tokens);
                 blockNodes.push(node);
                 node = null;
+            } else if (token.type === TokenType.ON) {
+                node = OnNode.parse(node, token, tokens);
+                blockNodes.push(node);
+                node = null;
+            } else if (token.type === TokenType.CLASS) {
+                node = ClassNode.parse(node, token, tokens);
+                blockNodes.push(node);
+                node = null;
             } else if (StringFormatNode.match(tokens)) {
                 node = StringFormatNode.parse(node, tokens[0], tokens);
             } else if (token.type === TokenType.STRING_LITERAL) {

package/src/DOM.ts

@@ -7,6 +7,8 @@ import {WrappedWindow} from "./DOM/WrappedWindow";
 import {WrappedDocument} from "./DOM/WrappedDocument";
 import {Scope} from "./Scope";
 import {EventDispatcher} from "./EventDispatcher";
+import {Registry} from "./Registry";
+import {ClassNode} from "./AST/ClassNode";
 
 export class DOM extends EventDispatcher {
     protected static _instance: DOM;
@@ -115,11 +117,38 @@ export class DOM extends EventDispatcher {
 
     public async mutation(mutations: MutationRecord[]) {
         for (const mutation of mutations) {
-            const tag: Tag = await this.getTagForElement(mutation.target as HTMLElement);
+            let tag: Tag = await this.getTagForElement(mutation.target as HTMLElement);
             if (tag) {
                 tag.mutate(mutation);
             }
 
+            // Check for class changes
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                const classes: string[] = Array.from((mutation.target as HTMLElement).classList);
+                let addedClasses: string[] = classes.filter(c => Registry.instance.classes.has(c));
+                let removedClasses: string[] = [];
+                if (tag) {
+                    addedClasses = addedClasses.filter(c => !tag.preppedClasses.includes(c));
+                    removedClasses = tag.preppedClasses.filter(c => !classes.includes(c));
+                } else {
+                    tag = await this.getTagForElement(mutation.target as HTMLElement, true);
+                }
+
+                for (const addedClass of addedClasses) {
+                    const classNode: ClassNode = Registry.instance.classes.getSynchronous(addedClass);
+                    if (classNode) {
+                        await classNode.prepareTag(tag, this);
+                    }
+                }
+
+                for (const removedClass of removedClasses) {
+                    const classNode: ClassNode = Registry.instance.classes.getSynchronous(removedClass);
+                    if (classNode) {
+                        await classNode.tearDownTag(tag, this);
+                    }
+                }
+            }
+
             for (const ele of Array.from(mutation.removedNodes)) {
                 const toRemove: Tag = await this.getTagForElement(ele as HTMLElement);
                 if (toRemove) {

package/src/Registry.ts

@@ -1,5 +1,6 @@
 import {EventDispatcher} from "./EventDispatcher";
 import {IDeferred, IPromise, SimplePromise} from "./SimplePromise";
+import {ClassNode} from "./AST/ClassNode";
 
 export function register(store: string, key: string = null, setup: () => void = null) {
     return function(target: any, _key: string = null) {
@@ -23,6 +24,7 @@ export class RegistryStore extends EventDispatcher {
 
     register(key: string, item: any) {
         this.store[key] = item;
+        this.dispatch('register', key, item);
         this.dispatch(`registered:${key}`, item);
     }
 
@@ -48,11 +50,15 @@ export class RegistryStore extends EventDispatcher {
     getSynchronous(key: string) {
         return this.store[key];
     }
+
+    has(key: string) {
+        return !!this.store[key];
+    }
 }
 
 export class Registry extends EventDispatcher {
     protected static _instance: Registry;
-    public readonly components: RegistryStore;
+    public readonly controllers: RegistryStore;
     public readonly classes: RegistryStore;
     public readonly models: RegistryStore;
     public readonly templates: RegistryStore;
@@ -63,7 +69,7 @@ export class Registry extends EventDispatcher {
 
     constructor() {
         super();
-        this.components = new RegistryStore();
+        this.controllers = new RegistryStore();
         this.classes = new RegistryStore();
         this.models = new RegistryStore();
         this.templates = new RegistryStore();
@@ -73,16 +79,12 @@ export class Registry extends EventDispatcher {
         this.attributes = new RegistryStore();
     }
 
-    public static component(key: string = null, setup = null) {
-        return register('components', key, setup);
-    }
-
-    public static class(key: string = null, setup = null) {
-        return register('classes', key, setup);
+    public static class(cls: ClassNode) {
+        Registry.instance.classes.register(cls.name, cls);
     }
 
     public static controller(key: string = null, setup = null) {
-        return register('classes', key, setup);
+        return register('controllers', key, setup);
     }
 
     public static model(key: string = null, setup = null) {

package/src/Scope.ts

@@ -220,4 +220,19 @@ export class Scope extends EventDispatcher {
             delete toUnwrap[field];
         }
     }
+
+    public static fromObject(obj, parentScope?: Scope): Scope {
+        const scope = new Scope(parentScope);
+        scope.wrap(obj);
+        return scope;
+    }
+}
+
+export class FunctionScope extends Scope {
+    set(key: string, value: any) {
+        if (this.parentScope.has(key) || ['$', '@'].indexOf(key[0]) > -1)
+            this.parentScope.set(key, value);
+        else
+            super.set(key, value);
+    }
 }

package/src/Tag.ts

@@ -27,6 +27,7 @@ export class Tag extends DOMObject {
     public readonly rawAttributes: { [key: string]: string; };
     public readonly parsedAttributes: { [key: string]: string[]; };
     public readonly deferredAttributes: Attribute[] = [];
+    public readonly preppedClasses: string[] = [];
     protected _state: TagState;
     protected attributes: Attribute[];
     protected _nonDeferredAttributes: Attribute[] = [];
@@ -598,6 +599,16 @@ export class Tag extends DOMObject {
         }
     }
 
+    public removeContextEventHandlers(context: any) {
+        for (const eventType of Object.keys(this.onEventHandlers)) {
+            for (const handler of this.onEventHandlers[eventType]) {
+                if (handler.context === context) {
+                    this.removeEventHandler(eventType, handler.handler, context);
+                }
+            }
+        }
+    }
+
     public createScope(force: boolean = false): Scope {
         // 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...

package/src/attributes/ControllerAttribute.ts

@@ -1,4 +1,32 @@
-import {ClassConstructor} from "./ClassConstructor";
+import {Scope} from "../Scope";
+import {Attribute} from "../Attribute";
+import {Registry} from "../Registry";
 
-export class ControllerAttribute extends ClassConstructor {
+@Registry.attribute('vsn-controller')
+export class ControllerAttribute extends Attribute {
+    public static readonly canDefer: boolean = false;
+    public static readonly scoped: boolean = true;
+    protected attributeKey: string;
+    protected className: string;
+    protected defaultClassName: string;
+
+    public async setup() {
+        const parentScope: Scope = this.tag.parentTag.scope;
+        if (!parentScope)
+            return;
+
+        this.attributeKey = this.getAttributeBinding();
+        this.className = this.getAttributeValue(this.defaultClassName);
+
+        const cls = await Registry.instance.controllers.get(this.className);
+        this.instantiateClass(cls);
+
+        if (this.attributeKey && parentScope)
+            parentScope.set(this.attributeKey, this.tag.scope);
+        await super.setup();
+    }
+
+    protected instantiateClass(cls) {
+        this.tag.wrap(cls);
+    }
 }

package/src/attributes/ListItem.ts

@@ -21,7 +21,7 @@ export class ListItem extends Attribute {
 
         this.tag.scope.set(this.listItemName, this.tag.scope);
         const modelName: string = (await this.getList()).listItemModel;
-        const cls = await Registry.instance.classes.get(modelName);
+        const cls = await Registry.instance.controllers.get(modelName);
         this.instantiateModel(cls);
         await super.setup();
     }

package/src/attributes/ModelAttribute.ts

@@ -1,5 +1,5 @@
-import {ClassConstructor} from "./ClassConstructor";
+import {ControllerAttribute} from "./ControllerAttribute";
 
-export class ModelAttribute extends ClassConstructor {
+export class ModelAttribute extends ControllerAttribute {
     public static readonly canDefer: boolean = false;
 }

package/src/attributes/RootAttribute.ts

@@ -1,6 +1,7 @@
 import {Attribute} from "../Attribute";
 import {VisionHelper} from "../helpers/VisionHelper";
 import {Registry} from "../Registry";
+import {Scope} from "../Scope";
 
 @Registry.attribute('vsn-root')
 export class RootAttribute extends Attribute {
@@ -9,6 +10,8 @@ export class RootAttribute extends Attribute {
 
     public async setup() {
         this.tag.scope.set('$mobile', VisionHelper.isMobile());
+        if (console && !this.tag.scope.get('console'))
+            this.tag.scope.set('console', Scope.fromObject(console));
         await super.setup();
     }
 }

package/src/attributes/ScopeAttribute.ts

@@ -28,6 +28,9 @@ export class ScopeAttribute extends Attribute {
                 this.tag.scope.set(key, value.data[key]);
             }
         }
+        const binding = this.getAttributeBinding();
+        if (binding)
+            this.tag.scope.parentScope.set(binding, this.tag.scope);
         await super.extract();
     }
 }

package/src/attributes/SetAttribute.ts

@@ -36,10 +36,12 @@ export class SetAttribute extends Attribute {
 
     public async extract() {
         let value = this.getAttributeValue(null);
-        const typeIndex: number = value && value.indexOf('|') || -1;
-        if (typeIndex > -1) {
-            this.boundScope.setType(this.key, value.substr(typeIndex + 1));
-            value = value.substr(0, typeIndex);
+        for (const m of this.getAttributeModifiers()) {
+            const t = Registry.instance.types.getSynchronous(m);
+            if (t) {
+                this.boundScope.setType(this.key, m);
+                break;
+            }
         }
         this.boundScope.set(this.key, value);
     }

package/src/vsn.ts

@@ -25,9 +25,9 @@ export class Vision extends EventDispatcher {
         } else {
             console.warn('No dom, running in CLI mode.');
         }
-        this.registry.classes.register('Object', Object);
-        this.registry.classes.register('WrappedArray', WrappedArray);
-        this.registry.classes.register('Data', DynamicScopeData);
+        this.registry.controllers.register('Object', Object);
+        this.registry.controllers.register('WrappedArray', WrappedArray);
+        this.registry.controllers.register('Data', DynamicScopeData);
 
         if (VisionHelper.window) {
             window['Vision'] = Vision;
@@ -55,7 +55,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. https://www.vsnjs.com/`, window ? `v${window['VSN_VERSION']}` : null);
+        console.info(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`, window ? `v${window['VSN_VERSION']}` : null);
     }
 
     public static get instance() {

package/test/DOM.spec.ts

@@ -2,7 +2,7 @@ import "../src/vsn";
 import {DOM} from "../src/DOM";
 import {Registry} from "../src/Registry";
 
-@Registry.class('TestController')
+@Registry.controller('TestController')
 class TestController {}
 
 describe('DOM', () => {
@@ -20,9 +20,9 @@ describe('DOM', () => {
 
     it("should use scopes correctly", (done) => {
         document.body.innerHTML = `
-            <div id="parent" vsn-set:asd="123|integer">
+            <div id="parent" vsn-set:asd|integer="123">
                 <div id="testing" vsn-controller:test="TestController" vsn-set:asd="234|integer">
-                    <div vsn-set:asd="345|integer"></div>
+                    <div vsn-set:asd|integer="345"></div>
                 </div>
             </div>
         `;

package/test/attributes/ListItem.spec.ts

@@ -5,14 +5,14 @@ import {ListItem} from "../../src/attributes/ListItem";
 import {Registry} from "../../src/Registry";
 import {List} from "../../src/attributes/List";
 
-@Registry.class('ListItemController')
+@Registry.controller('ListItemController')
 class ListItemController{
     items: ListItemSpecTestItem[] = [];
 
     do() {}
 }
 
-@Registry.class('ListItemSpecTestItem')
+@Registry.controller('ListItemSpecTestItem')
 class ListItemSpecTestItem {
     test: number = null;
 
@@ -96,7 +96,7 @@ describe('ListItem', () => {
 
     it("vsn-list-item should work with vsn-set", (done) => {
         document.body.innerHTML = `
-            <ul vsn-list:list id="test"><li vsn-list-item:item="ListItemSpecTestItem" id="test-item" vsn-set:item.testing="1|integer"></li></ul>
+            <ul vsn-list:list id="test"><li vsn-list-item:item="ListItemSpecTestItem" id="test-item" vsn-set:item.testing|integer="1"></li></ul>
         `;
 
         const dom = new DOM(document);