vsn 0.1.18 → 0.1.21

package/src/Scope.ts

@@ -207,13 +207,12 @@ export class WrappedArray<T> extends Array<T> {
     }
 }
 
-
 export class Scope extends EventDispatcher {
     public wrapped: any;
     protected data: DataModel;
     protected types: {[key: string]: string;} = {};
     protected children: Scope[];
-    protected keys: string[];
+    protected _keys: string[];
     protected _parentScope: Scope;
 
     constructor(
@@ -224,7 +223,7 @@ export class Scope extends EventDispatcher {
             this.parentScope = parent;
         this.children = [];
         this.data = new DataModel({});
-        this.keys = [];
+        this._keys = [];
     }
 
     public get parentScope(): Scope {
@@ -277,7 +276,7 @@ export class Scope extends EventDispatcher {
             if (searchParents && this.parentScope)
                 return this.parentScope.get(key, searchParents);
 
-            return '';
+            return this._keys.indexOf(key) > -1 ? '' : undefined;
         }
 
         return value;
@@ -312,12 +311,16 @@ export class Scope extends EventDispatcher {
             this.trigger('change', key, event);
         }
 
-        if (this.keys.indexOf(key) === -1)
-            this.keys.push(key);
+        if (this._keys.indexOf(key) === -1)
+            this._keys.push(key);
+    }
+
+    get keys(): string[] {
+        return [...this._keys];
     }
 
     has(key: string): boolean {
-        return this.keys.indexOf(key) > -1;
+        return this._keys.indexOf(key) > -1;
     }
 
     setType(key: string, type: string) {
@@ -337,7 +340,7 @@ export class Scope extends EventDispatcher {
     }
 
     clear() {
-        for (const key of this.keys) {
+        for (const key of this._keys) {
             if (['function', 'object'].indexOf(typeof this.get(key)) > -1) continue;
             this.set(key, null);
         }

package/src/Tag.ts

@@ -8,6 +8,8 @@ import {On} from "./attributes/On";
 import {Registry} from "./Registry";
 import {benchmarkEnd, benchmarkStart} from "./Bencmark";
 import {DOMObject} from "./DOM/DOMObject";
+import { Tree } from "./AST";
+import {StyleAttribute} from "./attributes/StyleAttribute";
 
 export enum TagState {
     Instantiated,
@@ -104,6 +106,12 @@ export class Tag extends DOMObject {
         }
     }
 
+    public async eval(code: string) {
+        const tree = new Tree(code);
+        await tree.prepare(this.scope, this.dom, this);
+        return await tree.evaluate(this.scope, this.dom, this);
+    }
+
     public async evaluate() {
         for (const attr of this.nonDeferredAttributes) {
             await attr.evaluate();
@@ -480,6 +488,31 @@ export class Tag extends DOMObject {
         return standardAttribute;
     }
 
+    async watchStyle(styleName: string) {
+        for (const attribute of this.attributes) {
+            if (attribute instanceof StyleAttribute) {
+                return attribute;
+            }
+        }
+
+        // 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;
+            }
+        }
+
+        const styleAttribute = new StyleAttribute(this, 'style');
+        this.attributes.push(styleAttribute);
+        await this.setupAttribute(styleAttribute);
+
+        return styleAttribute;
+    }
+
     private async setupAttribute(attribute: Attribute) {
         await attribute.compile();
         await attribute.setup();

package/src/Vision.ts

@@ -72,5 +72,5 @@ export * from './Registry';
 export * from './Attribute';
 export * from './AST';
 export {DOM} from './DOM';
-export {WrappedArray, Scope} from './Scope';
+export {WrappedArray, Scope, ScopeReference} from './Scope';
 export const vision: Vision = Vision.instance;

package/src/attributes/StyleAttribute.ts

@@ -0,0 +1,83 @@
+import {Registry} from "../Registry";
+import {Attribute} from "../Attribute";
+import {Scope, ScopeReference} from "../Scope";
+
+
+@Registry.attribute('vsn-styles')
+export class StyleAttribute extends Attribute {
+    private scopeRef: ScopeReference;
+    private styleScope: Scope;
+
+    public async setup() {
+        const key = this.getAttributeValue() || null;
+        if (key) {
+            this.scopeRef = this.tag.scope.getReference(key, true);
+            const parentScope = await this.scopeRef.getScope();
+            const styleKey = await this.scopeRef.getKey();
+            this.styleScope = parentScope.get(styleKey);
+            if (!this.styleScope) {
+                this.styleScope = new Scope(parentScope);
+                parentScope.set(styleKey, this.styleScope);
+            }
+        } else {
+            this.styleScope = this.tag.scope;
+        }
+
+        await super.setup();
+    }
+
+    public async connect() {
+        this.styleScope.bind(`change`, this.handleEvent.bind(this));
+        await super.connect();
+    }
+
+    public async extract() {
+        this.updateFrom();
+        this.updateTo();
+        await super.extract();
+    }
+
+    updateFrom() {
+        const toSkip = [
+            'cssText',
+            'getPropertyPriority',
+            'getPropertyValue',
+            'removeProperty',
+            'setProperty',
+            'length'
+        ];
+        for (const k in this.tag.style) {
+            if (toSkip.indexOf(k) > -1 || isFinite(k as any))
+                continue;
+            const value = this.tag.style[k];
+            const key = `$${k}`;
+            if (value && value !== this.styleScope.get(key))
+                this.styleScope.set(key, value);
+        }
+    }
+
+    public updateTo() {
+        for (const k of this.styleScope.keys) {
+            const v = this.styleScope.get(k);
+            if (k.startsWith('$')) {
+                const key = k.substr(1);
+                this.tag.element.style[key] = v.value;
+            }
+        }
+    }
+
+    public mutate(mutation: MutationRecord) {
+        super.mutate(mutation);
+        this.updateFrom();
+    }
+
+    public async handleEvent(k, v) {
+        if (k.startsWith('$')) {
+            const key = k.substr(1);
+
+            if (v.value !== v.previousValue) {
+                this.tag.element.style[key] = v.value;
+            }
+        }
+    }
+}

package/src/attributes/_imports.ts

@@ -23,5 +23,6 @@ export {ScopeAttribute} from "./ScopeAttribute";
 export {ScopeChange} from "./ScopeChange";
 export {SetAttribute} from "./SetAttribute";
 export {StandardAttribute} from "./StandardAttribute";
+export {StyleAttribute} from "./StyleAttribute";
 export {Template} from "./Template";
 export {TypeAttribute} from "./TypeAttribute";

package/test/attributes/Styles.spec.ts

@@ -0,0 +1,43 @@
+import {DOM} from "../../src/DOM";
+import "../../src/Types";
+import "../../src/attributes/_imports";
+
+
+describe('Styles', () => {
+    it("vsn-styles to just work", (done) => {
+        document.body.innerHTML = `
+            <div vsn-name="testing">
+                <span id="styling" vsn-styles="testing.styles" style="margin-top: 50px;">testing</span>
+                <span id="styling-dupe" vsn-styles="testing.styles" style="margin-top: 50px;">testing 2</span>
+            </div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const ele1 = (await dom.get('#styling'))[0];
+            const ele2 = (await dom.get('#styling-dupe'))[0];
+            const scope = ele1.scope;
+            const container = scope.get('testing');
+            const styles = container.get('styles');
+            expect(container).toBeTruthy();
+            expect(styles).toBeTruthy();
+            expect(ele1.element.style.marginTop).toBe('50px');
+            expect(ele2.element.style.marginTop).toBe('50px');
+            styles.set('$marginTop', '-50px');
+            expect(ele1.element.style.marginTop).toBe('-50px');
+            expect(ele2.element.style.marginTop).toBe('-50px');
+            done();
+        });
+    });
+
+    it("$ operator should work", (done) => {
+        document.body.innerHTML = `
+            <span id="styling">testing</span>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            await dom.eval('?(#styling).$marginTop = "50px"');
+            expect((await dom.get('#styling'))[0].element.style.marginTop).toBe('50px');
+            done();
+        });
+    });
+});