vsn 0.1.19 → 0.1.22

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();
+        });
+    });
+});