vsn 0.1.127 → 0.1.128

package/dist/attributes/StyleVarAttribute.d.ts

@@ -0,0 +1,10 @@
+import { Attribute } from "../Attribute";
+import { Scope } from "../Scope";
+export declare class StyleVarAttribute extends Attribute {
+    static readonly canDefer: boolean;
+    protected key?: string;
+    protected styleVar?: string;
+    protected boundScope?: Scope;
+    connect(): Promise<void>;
+    update(e: any): void;
+}

package/dist/attributes/StyleVarAttribute.js

@@ -0,0 +1,110 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleVarAttribute = void 0;
+var Registry_1 = require("../Registry");
+var Attribute_1 = require("../Attribute");
+var StyleVarAttribute = /** @class */ (function (_super) {
+    __extends(StyleVarAttribute, _super);
+    function StyleVarAttribute() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StyleVarAttribute.prototype.connect = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var scopeKey, ref, _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        scopeKey = this.getAttributeValue();
+                        try {
+                            ref = this.tag.scope.getReference(scopeKey);
+                        }
+                        catch (e) {
+                            console.error('error', e);
+                            return [2 /*return*/];
+                        }
+                        _a = this;
+                        return [4 /*yield*/, ref.getKey()];
+                    case 1:
+                        _a.key = _c.sent();
+                        this.styleVar = this.getAttributeBinding();
+                        _b = this;
+                        return [4 /*yield*/, ref.getScope()];
+                    case 2:
+                        _b.boundScope = _c.sent();
+                        this.boundScope.on("change:" + this.key, this.update, this);
+                        return [4 /*yield*/, _super.prototype.connect.call(this)];
+                    case 3:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    StyleVarAttribute.prototype.update = function (e) {
+        this.tag.element.style.setProperty("--" + this.styleVar, e.value);
+    };
+    StyleVarAttribute.canDefer = false;
+    StyleVarAttribute = __decorate([
+        Registry_1.Registry.attribute('vsn-style-var')
+    ], StyleVarAttribute);
+    return StyleVarAttribute;
+}(Attribute_1.Attribute));
+exports.StyleVarAttribute = StyleVarAttribute;
+//# sourceMappingURL=StyleVarAttribute.js.map

package/dist/attributes/StyleVarAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyleVarAttribute.js","sourceRoot":"","sources":["../../src/attributes/StyleVarAttribute.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAqC;AACrC,0CAAuC;AAMvC;IAAuC,qCAAS;IAAhD;;IA2BA,CAAC;IArBgB,mCAAO,GAApB;;;;;;wBACQ,QAAQ,GAAW,IAAI,CAAC,iBAAiB,EAAE,CAAC;wBAEhD,IAAI;4BACA,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;yBAC/C;wBAAC,OAAO,CAAC,EAAE;4BACR,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;4BAC1B,sBAAO;yBACV;wBAED,KAAA,IAAI,CAAA;wBAAO,qBAAM,GAAG,CAAC,MAAM,EAAE,EAAA;;wBAA7B,GAAK,GAAG,GAAG,SAAkB,CAAC;wBAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;wBAC3C,KAAA,IAAI,CAAA;wBAAc,qBAAM,GAAG,CAAC,QAAQ,EAAE,EAAA;;wBAAtC,GAAK,UAAU,GAAG,SAAoB,CAAC;wBACvC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,YAAU,IAAI,CAAC,GAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;wBAE5D,qBAAM,iBAAM,OAAO,WAAE,EAAA;;wBAArB,SAAqB,CAAC;;;;;KACzB;IAED,kCAAM,GAAN,UAAO,CAAC;QACJ,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,OAAK,IAAI,CAAC,QAAU,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAzBsB,0BAAQ,GAAY,KAAK,CAAC;IADxC,iBAAiB;QAD7B,mBAAQ,CAAC,SAAS,CAAC,eAAe,CAAC;OACvB,iBAAiB,CA2B7B;IAAD,wBAAC;CAAA,AA3BD,CAAuC,qBAAS,GA2B/C;AA3BY,8CAAiB"}

package/dist/attributes/_imports.d.ts

@@ -25,6 +25,7 @@ export { ServiceAttribute } from "./ServiceAttribute";
 export { SetAttribute } from "./SetAttribute";
 export { StandardAttribute } from "./StandardAttribute";
 export { StyleAttribute } from "./StyleAttribute";
+export { StyleVarAttribute } from "./StyleVarAttribute";
 export { TemplateAttribute } from "./TemplateAttribute";
 export { TypeAttribute } from "./TypeAttribute";
 export { XHRAttribute } from "./XHRAttribute";

package/dist/attributes/_imports.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XHRAttribute = exports.TypeAttribute = exports.TemplateAttribute = exports.StyleAttribute = exports.StandardAttribute = exports.SetAttribute = exports.ServiceAttribute = exports.ScriptAttribute = exports.ScopeChange = exports.ScopeAttribute = exports.RootAttribute = exports.Referenced = exports.On = exports.Name = exports.ModelAttribute = exports.ListItemModel = exports.ListItem = exports.List = exports.LazyAttribute = exports.KeyUp = exports.KeyDown = exports.JSONAttribute = exports.If = exports.Format = exports.Exec = exports.DisableIf = exports.ControllerAttribute = exports.ComponentAttribute = exports.Bind = exports.AddClassIf = void 0;
+exports.XHRAttribute = exports.TypeAttribute = exports.TemplateAttribute = exports.StyleVarAttribute = exports.StyleAttribute = exports.StandardAttribute = exports.SetAttribute = exports.ServiceAttribute = exports.ScriptAttribute = exports.ScopeChange = exports.ScopeAttribute = exports.RootAttribute = exports.Referenced = exports.On = exports.Name = exports.ModelAttribute = exports.ListItemModel = exports.ListItem = exports.List = exports.LazyAttribute = exports.KeyUp = exports.KeyDown = exports.JSONAttribute = exports.If = exports.Format = exports.Exec = exports.DisableIf = exports.ControllerAttribute = exports.ComponentAttribute = 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");
@@ -55,6 +55,8 @@ var StandardAttribute_1 = require("./StandardAttribute");
 Object.defineProperty(exports, "StandardAttribute", { enumerable: true, get: function () { return StandardAttribute_1.StandardAttribute; } });
 var StyleAttribute_1 = require("./StyleAttribute");
 Object.defineProperty(exports, "StyleAttribute", { enumerable: true, get: function () { return StyleAttribute_1.StyleAttribute; } });
+var StyleVarAttribute_1 = require("./StyleVarAttribute");
+Object.defineProperty(exports, "StyleVarAttribute", { enumerable: true, get: function () { return StyleVarAttribute_1.StyleVarAttribute; } });
 var TemplateAttribute_1 = require("./TemplateAttribute");
 Object.defineProperty(exports, "TemplateAttribute", { enumerable: true, get: function () { return TemplateAttribute_1.TemplateAttribute; } });
 var TypeAttribute_1 = require("./TypeAttribute");

package/dist/attributes/_imports.js.map

@@ -1 +1 @@
-{"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,2DAAwD;AAAhD,wHAAA,kBAAkB,OAAA;AAC1B,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,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,+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,2CAAwC;AAAhC,wGAAA,UAAU,OAAA;AAClB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,6CAA0C;AAAlC,0GAAA,WAAW,OAAA;AACnB,qDAAkD;AAA1C,kHAAA,eAAe,OAAA;AACvB,uDAAoD;AAA5C,oHAAA,gBAAgB,OAAA;AACxB,+CAA4C;AAApC,4GAAA,YAAY,OAAA;AACpB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,+CAA4C;AAApC,4GAAA,YAAY,OAAA"}
+{"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,2DAAwD;AAAhD,wHAAA,kBAAkB,OAAA;AAC1B,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,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,+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,2CAAwC;AAAhC,wGAAA,UAAU,OAAA;AAClB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,6CAA0C;AAAlC,0GAAA,WAAW,OAAA;AACnB,qDAAkD;AAA1C,kHAAA,eAAe,OAAA;AACvB,uDAAoD;AAA5C,oHAAA,gBAAgB,OAAA;AACxB,+CAA4C;AAApC,4GAAA,YAAY,OAAA;AACpB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,mDAAgD;AAAxC,gHAAA,cAAc,OAAA;AACtB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,yDAAsD;AAA9C,sHAAA,iBAAiB,OAAA;AACzB,iDAA8C;AAAtC,8GAAA,aAAa,OAAA;AACrB,+CAA4C;AAApC,4GAAA,YAAY,OAAA"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.1.127";
+export declare const VERSION = "0.1.128";

package/dist/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.1.127';
+exports.VERSION = '0.1.128';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.127",
+  "version": "0.1.128",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
@@ -32,14 +32,14 @@
     "@types/jasmine": "^3.6.10",
     "codecov": "^3.8.1",
     "jasmine": "^3.7.0",
-    "karma": "^6.3.2",
+    "karma": "6.3.16",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "^4.0.1",
     "karma-typescript": "^5.5.1",
     "ts-loader": "^9.1.1",
     "typescript": "^4.2.4",
-    "webpack": "^5.36.1",
+    "webpack": "5.76.0",
     "webpack-cli": "^4.6.0"
   },
   "homepage": "https://www.vsnjs.com",

package/src/AST/ElementAttributeNode.ts

@@ -8,6 +8,8 @@ import {ElementQueryNode} from "./ElementQueryNode";
 import {LiteralNode} from "./LiteralNode";
 import {DOMObject} from "../DOM/DOMObject";
 import {IndexNode} from "./IndexNode";
+import {ScopeMemberNode} from "./ScopeMemberNode";
+import {RootScopeMemberNode} from "./RootScopeMemberNode";
 
 export class ElementAttributeNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
@@ -38,6 +40,7 @@ export class ElementAttributeNode extends Node implements TreeNode {
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
         let tags: TagList;
+
         if (this.elementRef instanceof ElementQueryNode) {
             tags = await this.elementRef.evaluate(scope, dom, tag, true);
         } else if (this.elementRef as any instanceof IndexNode) {
@@ -47,16 +50,34 @@ export class ElementAttributeNode extends Node implements TreeNode {
             } else {
                 tags = new TagList(indexResult);
             }
+        } else if (this.elementRef as any instanceof ScopeMemberNode || this.elementRef as any instanceof RootScopeMemberNode) {
+            const scopeEval = await (this.elementRef as any).evaluate(scope, dom, tag, true);
+            if (Array.isArray(scopeEval)) {
+                tags = scopeEval as any;
+            } else {
+                tags = new TagList(scopeEval);
+            }
         } else if (tag) {
             tags = new TagList(tag)
         } else {
             return;
         }
 
-        if (tags.length === 1)
-            return tags[0].scope.get(`@${this.attributeName}`);
+        if (tags.length === 1) {
+            return this.getAttributeScopeValue(tags[0]);
+        }
+
+        return tags.map((tag) => this.getAttributeScopeValue(tag));
+    }
+
+    async getAttributeScopeValue(tag: Tag | DOMObject): Promise<string> {
+        if (!(tag instanceof DOMObject)) {
+            return '';
+        }
 
-        return tags.map((tag) => tag.scope.get(`@${this.attributeName}`));
+        // Make sure the attribute is being watched
+        await tag.watchAttribute(this.attributeName);
+        return tag.scope.get(`@${this.attributeName}`) as string;
     }
 
     async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null) {

package/src/AST/ElementStyleNode.ts

@@ -6,6 +6,7 @@ import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {ElementQueryNode} from "./ElementQueryNode";
 import {LiteralNode} from "./LiteralNode";
+import {DOMObject} from "../DOM/DOMObject";
 
 export class ElementStyleNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
@@ -44,10 +45,20 @@ export class ElementStyleNode extends Node implements TreeNode {
             return;
         }
 
-        if (tags.length === 1)
-            return tags[0].scope.get(`$${this.attributeName}`);
+        if (tags instanceof DOMObject)
+            tags = new TagList(tags);
 
-        return tags.map((tag) => tag.scope.get(`$${this.attributeName}`));
+        if (tags.length === 1) {
+            return this.getAttributeStyleValue(tags[0]);
+        }
+
+        return tags.map((tag) => this.getAttributeStyleValue(tag));
+    }
+
+    async getAttributeStyleValue(tag: Tag | DOMObject): Promise<string> {
+        // Make sure we're watching the style
+        await tag.watchStyle(this.attributeName);
+        return tag.scope.get(`$${this.attributeName}`);
     }
 
     async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null) {

package/src/DOM/DOMObject.ts

@@ -49,11 +49,11 @@ export abstract class DOMObject extends EventDispatcher {
         this._scope = scope;
     }
 
-    public watchAttribute(attr: string) {
+    public async watchAttribute(attr: string): Promise<any> {
 
     }
 
-    public watchStyle(style: string) {
+    public async watchStyle(style: string): Promise<any> {
 
     }
 

package/src/EventDispatcher.ts

@@ -30,6 +30,7 @@ export type EventDispatcherCallback = (...args: any[]) => any;
 
 export class EventDispatcher  {
     private static sources: EventDispatcher[] = [];
+    public static readonly stream: EventDispatcher = new EventDispatcher();
     private readonly _listeners: EventCallbackList;
     private readonly _allListeners: EventCallback[] = [];
     private readonly _relays: EventDispatcher[] = [];
@@ -137,19 +138,35 @@ export class EventDispatcher  {
     }
 
     noneWithContext(context: any): number {
-        let toRemove: EventCallback[] = [],
-            cnt = 0;
+        const toRemoveAll: EventCallback[] = [];
+        let cnt = 0;
 
-        for(const cb of this._allListeners) {
+        for (const cb of this._allListeners) {
             if(context == cb.context) {
-                toRemove.push(cb);
+                toRemoveAll.push(cb);
             }
         }
 
-        for(const cb of toRemove) {
+        for (const k in this._listeners) {
+            const toRemove: EventCallback[] = [];
+
+            for (const cb of this._listeners[k]) {
+                if(context == cb.context) {
+                    toRemove.push(cb);
+                }
+            }
+
+            for (const cb of toRemove) {
+                this._listeners[k].splice(this._listeners[k].indexOf(cb), 1);
+                cnt++;
+            }
+        }
+
+        for (const cb of toRemoveAll) {
             this._allListeners.splice(this._allListeners.indexOf(cb), 1);
             cnt++;
         }
+
         return cnt;
     }
 
@@ -180,5 +197,13 @@ export class EventDispatcher  {
         for (const relay of this._relays) {
             relay.dispatch(event, ...args);
         }
+
+        if (this === EventDispatcher.stream)
+            return;
+
+        let streamArgs = args;
+        if (args.length > 0 && args[0] !== this)
+            streamArgs = [this, ...args];
+        EventDispatcher.stream.dispatch(event, ...streamArgs);
     }
 }

package/src/Tag.ts

@@ -753,7 +753,7 @@ export class Tag extends DOMObject {
         return this._scope;
     }
 
-    async watchAttribute(attributeName: string) {
+    async watchAttribute(attributeName: string): Promise<Attribute | StandardAttribute> {
         if (this.attributes.has(attributeName) && this.attributes.get(attributeName) instanceof StandardAttribute) {
             return this.attributes.get(attributeName);
         }
@@ -798,6 +798,10 @@ export class Tag extends DOMObject {
         this.attributes.clear();
         this._children.forEach(child => child.deconstruct());
         this._children.length = 0;
+        if (this._controller) {
+            this._controller.deconstruct();
+            this._controller = null;
+        }
         super.deconstruct();
     }
 }

package/src/attributes/StyleVarAttribute.ts

@@ -0,0 +1,35 @@
+import {Registry} from "../Registry";
+import {Attribute} from "../Attribute";
+import {Scope} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
+
+
+@Registry.attribute('vsn-style-var')
+export class StyleVarAttribute extends Attribute {
+    public static readonly canDefer: boolean = false;
+    protected key?: string;
+    protected styleVar?: string;
+    protected boundScope?: Scope;
+
+    public async connect() {
+        let scopeKey: string = this.getAttributeValue();
+        let ref: ScopeReference;
+        try {
+            ref = this.tag.scope.getReference(scopeKey);
+        } catch (e) {
+            console.error('error', e);
+            return;
+        }
+
+        this.key = await ref.getKey();
+        this.styleVar = this.getAttributeBinding();
+        this.boundScope = await ref.getScope();
+        this.boundScope.on(`change:${this.key}`, this.update, this);
+
+        await super.connect();
+    }
+
+    update(e) {
+        this.tag.element.style.setProperty(`--${this.styleVar}`, e.value);
+    }
+}

package/src/attributes/_imports.ts

@@ -25,6 +25,7 @@ export {ServiceAttribute} from "./ServiceAttribute";
 export {SetAttribute} from "./SetAttribute";
 export {StandardAttribute} from "./StandardAttribute";
 export {StyleAttribute} from "./StyleAttribute";
+export {StyleVarAttribute} from "./StyleVarAttribute";
 export {TemplateAttribute} from "./TemplateAttribute";
 export {TypeAttribute} from "./TypeAttribute";
 export {XHRAttribute} from "./XHRAttribute";

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.127';
+export const VERSION = '0.1.128';