@joist/element 3.1.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/attr.ts

@@ -4,49 +4,43 @@ export function attr<This extends HTMLElement>(
   { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
   ctx: ClassAccessorDecoratorContext<This>
 ): ClassAccessorDecoratorResult<This, any> {
+  const name = String(ctx.name);
   const meta = metadataStore.read(ctx.metadata);
-  meta.attrs.push(String(ctx.name));
+  meta.attrs.push(name);
 
   return {
     set(value: unknown) {
-      if (typeof ctx.name === 'string') {
-        if (typeof value === 'boolean') {
-          if (value) {
-            this.setAttribute(ctx.name, '');
-          } else {
-            this.removeAttribute(ctx.name);
-          }
-        } else {
-          this.setAttribute(ctx.name, String(value));
-        }
+      if (value === true) {
+        this.setAttribute(name, '');
+      } else if (value === false) {
+        this.removeAttribute(name);
+      } else {
+        this.setAttribute(name, String(value));
       }
 
-      return set.call(this, value);
+      set.call(this, value);
     },
     get() {
       const ogValue = get.call(this);
+      const attr = this.getAttribute(name);
 
-      if (typeof ctx.name === 'string') {
-        const attr = this.getAttribute(ctx.name);
-
-        if (attr !== null) {
-          // treat as boolean
-          if (attr === '') {
-            return true;
-          }
-
-          // treat as number
-          if (typeof ogValue === 'number') {
-            return Number(attr);
-          }
+      if (attr !== null) {
+        // treat as boolean
+        if (attr === '') {
+          return true;
+        }
 
-          // treat as string
-          return attr;
+        // treat as number
+        if (typeof ogValue === 'number') {
+          return Number(attr);
         }
+
+        // treat as string
+        return attr;
       }
 
       // no readable value return original
       return ogValue;
-    },
+    }
   };
 }

package/src/lib/element.ts

@@ -19,6 +19,15 @@ export function element<Target extends CustomElementConstructor>(
   return class JoistElement extends Base {
     // make all attrs observable
     static observedAttributes = [...meta.attrs];
+    constructor(...args: any[]) {
+      super(...args);
+
+      const root = this.shadowRoot || this;
+
+      for (let [event, listener] of meta.listeners) {
+        root.addEventListener(event, listener.bind(this));
+      }
+    }
 
     connectedCallback() {
       for (let attr of meta.attrs) {

package/src/lib/listen.ts

@@ -1,14 +1,9 @@
-export function listen<This extends HTMLElement>(
-  event: string,
-  root: (el: This) => ShadowRoot | This = (el) => el.shadowRoot || el
-) {
+import { metadataStore } from './metadata.js';
+
+export function listen<This extends HTMLElement>(event: string) {
   return (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => {
-    ctx.addInitializer(function () {
-      // method initializers are run before fields and accessors.
-      // we want to wait till after all have run so we can check if there is a shadowRoot or not.
-      Promise.resolve().then(() => {
-        root(this).addEventListener(event, value.bind(this));
-      });
-    });
+    const metadata = metadataStore.read(ctx.metadata);
+
+    metadata.listeners.set(event, value);
   };
 }

package/src/lib/metadata.ts

@@ -1,28 +1,19 @@
 (Symbol as any).metadata ??= Symbol('Symbol.metadata');
 
-export abstract class MetadataStore<T> {
-  #data = new WeakMap<object, T>();
-
-  read<T extends object>(value: T) {
-    if (!this.#data.has(value)) {
-      this.#data.set(value, this.init());
-    }
-
-    return this.#data.get(value)!;
-  }
-
-  abstract init(): T;
-}
-
 export class ElementMetadata {
   attrs: string[] = [];
   tagName?: (val: any) => string;
+  listeners = new Map<string, (e: Event) => void>();
 }
 
-export class ElementMetadataStore extends MetadataStore<ElementMetadata> {
-  init() {
-    return new ElementMetadata();
+export class MetadataStore extends WeakMap<object, ElementMetadata> {
+  read(value: object) {
+    if (!this.has(value)) {
+      this.set(value, new ElementMetadata());
+    }
+
+    return this.get(value)!;
   }
 }
 
-export const metadataStore = new ElementMetadataStore();
+export const metadataStore = new MetadataStore();

package/target/lib/attr.js

@@ -1,42 +1,35 @@
-Symbol.metadata ??= Symbol('Symbol.metadata');
-import { ElementMetadata } from './element';
+import { metadataStore } from './metadata.js';
 export function attr({ get, set }, ctx) {
-    ctx.metadata.el ??= new ElementMetadata();
-    const meta = ctx.metadata.el;
-    meta.attrs.push(String(ctx.name));
+    const name = String(ctx.name);
+    const meta = metadataStore.read(ctx.metadata);
+    meta.attrs.push(name);
     return {
         set(value) {
-            if (typeof ctx.name === 'string') {
-                if (typeof value === 'boolean') {
-                    if (value) {
-                        this.setAttribute(ctx.name, '');
-                    }
-                    else {
-                        this.removeAttribute(ctx.name);
-                    }
-                }
-                else {
-                    this.setAttribute(ctx.name, String(value));
-                }
+            if (value === true) {
+                this.setAttribute(name, '');
+            }
+            else if (value === false) {
+                this.removeAttribute(name);
             }
-            return set.call(this, value);
+            else {
+                this.setAttribute(name, String(value));
+            }
+            set.call(this, value);
         },
         get() {
             const ogValue = get.call(this);
-            if (typeof ctx.name === 'string') {
-                const attr = this.getAttribute(ctx.name);
-                if (attr !== null) {
-                    if (attr === '') {
-                        return true;
-                    }
-                    if (typeof ogValue === 'number') {
-                        return Number(attr);
-                    }
-                    return attr;
+            const attr = this.getAttribute(name);
+            if (attr !== null) {
+                if (attr === '') {
+                    return true;
+                }
+                if (typeof ogValue === 'number') {
+                    return Number(attr);
                 }
+                return attr;
             }
             return ogValue;
-        },
+        }
     };
 }
 //# sourceMappingURL=attr.js.map

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AACC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,eAAe,EAAE,CAAC;IAC1C,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,EAAqB,CAAC;IAChD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAElC,OAAO;QACL,GAAG,CAAC,KAAc;YAChB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACjC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,KAAK,EAAE,CAAC;wBACV,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBAClC,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACjC,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;YAED,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,GAAG;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAE/B,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACjC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;oBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;wBAChB,OAAO,IAAI,CAAC;oBACd,CAAC;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;wBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;oBACtB,CAAC;oBAGD,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC;YAGD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtB,OAAO;QACL,GAAG,CAAC,KAAc;YAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YACzC,CAAC;YAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;QACD,GAAG;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAErC,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBAElB,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;oBAChB,OAAO,IAAI,CAAC;gBACd,CAAC;gBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;oBAChC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;gBACtB,CAAC;gBAGD,OAAO,IAAI,CAAC;YACd,CAAC;YAGD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/target/lib/attr.test.js

@@ -1,19 +1,22 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { expect, fixture, html } from '@open-wc/testing';
 import { attr } from './attr.js';
-describe('observable: attr()', () => {
+describe('@attr()', () => {
     it('should read and parse the correct values', async () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
             let _value1_decorators;
             let _value1_initializers = [];
+            let _value1_extraInitializers = [];
             let _value2_decorators;
             let _value2_initializers = [];
+            let _value2_extraInitializers = [];
             let _value3_decorators;
             let _value3_initializers = [];
+            let _value3_extraInitializers = [];
             let _value4_decorators;
             let _value4_initializers = [];
+            let _value4_extraInitializers = [];
             return class MyElement extends _classSuper {
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -21,24 +24,28 @@ describe('observable: attr()', () => {
                     _value2_decorators = [attr];
                     _value3_decorators = [attr];
                     _value4_decorators = [attr];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _instanceExtraInitializers);
+                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
                     if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 }
-                #value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value1_initializers, 100));
+                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 100);
                 get value1() { return this.#value1_accessor_storage; }
                 set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
+                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
                 get value2() { return this.#value2_accessor_storage; }
                 set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = __runInitializers(this, _value3_initializers, false);
+                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, false));
                 get value3() { return this.#value3_accessor_storage; }
                 set value3(value) { this.#value3_accessor_storage = value; }
-                #value4_accessor_storage = __runInitializers(this, _value4_initializers, 'hello');
+                #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, 'hello'));
                 get value4() { return this.#value4_accessor_storage; }
                 set value4(value) { this.#value4_accessor_storage = value; }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _value4_extraInitializers);
+                }
             };
         })();
         customElements.define('attr-test-2', MyElement);
@@ -51,33 +58,39 @@ describe('observable: attr()', () => {
     it('should not write falsy props to attributes', async () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
             let _value1_decorators;
             let _value1_initializers = [];
+            let _value1_extraInitializers = [];
             let _value2_decorators;
             let _value2_initializers = [];
+            let _value2_extraInitializers = [];
             let _value3_decorators;
             let _value3_initializers = [];
+            let _value3_extraInitializers = [];
             return class MyElement extends _classSuper {
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
                     _value1_decorators = [attr];
                     _value2_decorators = [attr];
                     _value3_decorators = [attr];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _instanceExtraInitializers);
+                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
                     if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 }
-                #value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value1_initializers, undefined));
+                #value1_accessor_storage = __runInitializers(this, _value1_initializers, undefined);
                 get value1() { return this.#value1_accessor_storage; }
                 set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = __runInitializers(this, _value2_initializers, null);
+                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, null));
                 get value2() { return this.#value2_accessor_storage; }
                 set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = __runInitializers(this, _value3_initializers, '');
+                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, ''));
                 get value3() { return this.#value3_accessor_storage; }
                 set value3(value) { this.#value3_accessor_storage = value; }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _value3_extraInitializers);
+                }
             };
         })();
         customElements.define('attr-test-3', MyElement);
@@ -89,15 +102,18 @@ describe('observable: attr()', () => {
     it('should update attributes when props are changed', async () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
             let _value1_decorators;
             let _value1_initializers = [];
+            let _value1_extraInitializers = [];
             let _value2_decorators;
             let _value2_initializers = [];
+            let _value2_extraInitializers = [];
             let _value3_decorators;
             let _value3_initializers = [];
+            let _value3_extraInitializers = [];
             let _value4_decorators;
             let _value4_initializers = [];
+            let _value4_extraInitializers = [];
             return class MyElement extends _classSuper {
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -105,24 +121,28 @@ describe('observable: attr()', () => {
                     _value2_decorators = [attr];
                     _value3_decorators = [attr];
                     _value4_decorators = [attr];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _instanceExtraInitializers);
+                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
                     if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 }
-                #value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value1_initializers, 'hello'));
+                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
                 get value1() { return this.#value1_accessor_storage; }
                 set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
+                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
                 get value2() { return this.#value2_accessor_storage; }
                 set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = __runInitializers(this, _value3_initializers, true);
+                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
                 get value3() { return this.#value3_accessor_storage; }
                 set value3(value) { this.#value3_accessor_storage = value; }
-                #value4_accessor_storage = __runInitializers(this, _value4_initializers, false);
+                #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, false));
                 get value4() { return this.#value4_accessor_storage; }
                 set value4(value) { this.#value4_accessor_storage = value; }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _value4_extraInitializers);
+                }
             };
         })();
         customElements.define('attr-test-4', MyElement);

package/target/lib/attr.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":"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"}

package/target/lib/element.d.ts

@@ -1,12 +1,4 @@
-export declare class ElementMetadata {
-    attrs: string[];
-}
-export interface ElementCtx {
-    metadata: {
-        el: ElementMetadata;
-    };
-}
-export declare function element<T extends new (...args: any[]) => HTMLElement>(Base: T, ctx: ClassDecoratorContext<T>): {
+export declare function element<Target extends CustomElementConstructor>(Base: Target, ctx: ClassDecoratorContext<Target>): {
     new (...args: any[]): {
         connectedCallback(): void;
         accessKey: string;
@@ -32,7 +24,7 @@ export declare function element<T extends new (...args: any[]) => HTMLElement>(B
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -168,6 +160,7 @@ export declare function element<T extends new (...args: any[]) => HTMLElement>(B
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -238,6 +231,7 @@ export declare function element<T extends new (...args: any[]) => HTMLElement>(B
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -334,4 +328,4 @@ export declare function element<T extends new (...args: any[]) => HTMLElement>(B
         focus(options?: FocusOptions | undefined): void;
     };
     observedAttributes: string[];
-} & T;
+} & Target;

package/target/lib/element.js

@@ -1,15 +1,25 @@
-export class ElementMetadata {
-    attrs = [];
-}
+import { metadataStore } from './metadata.js';
 export function element(Base, ctx) {
-    const { metadata } = ctx;
+    const meta = metadataStore.read(ctx.metadata);
+    ctx.addInitializer(function () {
+        if (meta.tagName) {
+            const val = meta.tagName(this);
+            if (!customElements.get(val)) {
+                customElements.define(val, this);
+            }
+        }
+    });
     return class JoistElement extends Base {
-        static observedAttributes = [...metadata.el.attrs];
+        static observedAttributes = [...meta.attrs];
         constructor(...args) {
             super(...args);
+            const root = this.shadowRoot || this;
+            for (let [event, listener] of meta.listeners) {
+                root.addEventListener(event, listener.bind(this));
+            }
         }
         connectedCallback() {
-            for (let attr of metadata.el.attrs) {
+            for (let attr of meta.attrs) {
                 const value = Reflect.get(this, attr);
                 if (value !== null && value !== undefined && value !== '') {
                     if (typeof value === 'boolean') {

package/target/lib/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAa,EAAE,CAAC;CACtB;AAQD,MAAM,UAAU,OAAO,CACrB,IAAO,EACP,GAA6B;IAE7B,MAAM,EAAE,QAAQ,EAAE,GAAG,GAA4B,CAAC;IAElD,OAAO,MAAM,YAAa,SAAQ,IAAI;QAEpC,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAEnD,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACjB,CAAC;QAED,iBAAiB;YACf,KAAK,IAAI,IAAI,IAAI,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;gBACnC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAGtC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;oBAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;4BAEnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBAC9B,CAAC;oBACH,CAAC;yBAAM,CAAC;wBAEN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC;YACH,CAAC;YAED,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,OAAO,CACrB,IAAY,EACZ,GAAkC;IAElC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAE9C,GAAG,CAAC,cAAc,CAAC;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAE/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,YAAa,SAAQ,IAAI;QAEpC,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAEf,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC;YAErC,KAAK,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC7C,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;QAED,iBAAiB;YACf,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC5B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gBAGtC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;oBAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;4BAEnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBAC9B,CAAC;oBACH,CAAC;yBAAM,CAAC;wBAEN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;oBACzC,CAAC;gBACH,CAAC;YACH,CAAC;YAED,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/target/lib/element.test.js

@@ -3,7 +3,7 @@ import { expect, fixture, html } from '@open-wc/testing';
 import { attr } from './attr.js';
 import { element } from './element.js';
 import { tagName } from './tag-name.js';
-describe('element()', () => {
+describe('@element()', () => {
     it('should write default value to attribute', async () => {
         let MyElement = (() => {
             let _classDecorators = [element];
@@ -11,16 +11,18 @@ describe('element()', () => {
             let _classExtraInitializers = [];
             let _classThis;
             let _classSuper = HTMLElement;
-            let _staticExtraInitializers = [];
-            let _instanceExtraInitializers = [];
             let _static_tag_decorators;
             let _static_tag_initializers = [];
+            let _static_tag_extraInitializers = [];
             let _value1_decorators;
             let _value1_initializers = [];
+            let _value1_extraInitializers = [];
             let _value2_decorators;
             let _value2_initializers = [];
+            let _value2_extraInitializers = [];
             let _value3_decorators;
             let _value3_initializers = [];
+            let _value3_extraInitializers = [];
             var MyElement = class extends _classSuper {
                 static { _classThis = this; }
                 static {
@@ -29,26 +31,30 @@ describe('element()', () => {
                     _value1_decorators = [attr];
                     _value2_decorators = [attr];
                     _value3_decorators = [attr];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _instanceExtraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _instanceExtraInitializers);
-                    __esDecorate(null, null, _static_tag_decorators, { kind: "field", name: "tag", static: true, private: false, access: { has: obj => "tag" in obj, get: obj => obj.tag, set: (obj, value) => { obj.tag = value; } }, metadata: _metadata }, _static_tag_initializers, _staticExtraInitializers);
+                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                    __esDecorate(null, null, _static_tag_decorators, { kind: "field", name: "tag", static: true, private: false, access: { has: obj => "tag" in obj, get: obj => obj.tag, set: (obj, value) => { obj.tag = value; } }, metadata: _metadata }, _static_tag_initializers, _static_tag_extraInitializers);
                     __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
                     MyElement = _classThis = _classDescriptor.value;
                     if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(_classThis, _staticExtraInitializers);
                 }
                 static tag = __runInitializers(_classThis, _static_tag_initializers, 'element-1');
-                #value1_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value1_initializers, 'hello'));
+                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
                 get value1() { return this.#value1_accessor_storage; }
                 set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = __runInitializers(this, _value2_initializers, 0);
+                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
                 get value2() { return this.#value2_accessor_storage; }
                 set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = __runInitializers(this, _value3_initializers, true);
+                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
                 get value3() { return this.#value3_accessor_storage; }
                 set value3(value) { this.#value3_accessor_storage = value; }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _value3_extraInitializers);
+                }
                 static {
+                    __runInitializers(_classThis, _static_tag_extraInitializers);
                     __runInitializers(_classThis, _classExtraInitializers);
                 }
             };

package/target/lib/element.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YAEjD,SAAS;oCADd,OAAO;;;;8BACgB,WAAW;;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;8CAChC,OAAO;0CAEP,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,wFAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,wFAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,wFAAQ;oBAJpB,iKAAO,GAAG,6BAAH,GAAG,0FAAe;oBADpC,6KAMC;;;oBANK,wDAAS;;gBACJ,MAAM,CAAC,GAAG,2DAAG,WAAW,EAAC;gBAE5B,+HAAkB,OAAO,GAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAC1B,yEAAkB,CAAC,EAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,yEAAkB,IAAI,EAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;oBALzB,uDAAS;;;;;QAQf,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAEnE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"element.test.js","sourceRoot":"","sources":["../../src/lib/element.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YAEjD,SAAS;oCADd,OAAO;;;;8BACgB,WAAW;;;;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;8CAChC,OAAO;0CAEP,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBAJpB,iKAAO,GAAG,6BAAH,GAAG,+FAAe;oBADpC,6KAMC;;;;gBALU,MAAM,CAAC,GAAG,2DAAG,WAAW,EAAC;gBAE5B,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAC1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;;;;;oBALzB,uDAAS;;;;;QAQf,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAEnE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/listen.d.ts

@@ -1 +1 @@
-export declare function listen<This extends HTMLElement>(event: string, root?: (el: This) => ShadowRoot | This): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;
+export declare function listen<This extends HTMLElement>(event: string): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;

package/target/lib/listen.js

@@ -1,10 +1,8 @@
-export function listen(event, root = (el) => el.shadowRoot || el) {
+import { metadataStore } from './metadata.js';
+export function listen(event) {
     return (value, ctx) => {
-        ctx.addInitializer(function () {
-            Promise.resolve().then(() => {
-                root(this).addEventListener(event, value.bind(this));
-            });
-        });
+        const metadata = metadataStore.read(ctx.metadata);
+        metadata.listeners.set(event, value);
     };
 }
 //# sourceMappingURL=listen.js.map

package/target/lib/listen.js.map

@@ -1 +1 @@
-{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CACpB,KAAa,EACb,OAAwC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,UAAU,IAAI,EAAE;IAEnE,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,GAAG,CAAC,cAAc,CAAC;YAGjB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,MAAM,CAA2B,KAAa;IAC5D,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAElD,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/metadata.d.ts

@@ -0,0 +1,9 @@
+export declare class ElementMetadata {
+    attrs: string[];
+    tagName?: (val: any) => string;
+    listeners: Map<string, (e: Event) => void>;
+}
+export declare class MetadataStore extends WeakMap<object, ElementMetadata> {
+    read(value: object): ElementMetadata;
+}
+export declare const metadataStore: MetadataStore;

package/target/lib/metadata.js

@@ -0,0 +1,16 @@
+Symbol.metadata ??= Symbol('Symbol.metadata');
+export class ElementMetadata {
+    attrs = [];
+    tagName;
+    listeners = new Map();
+}
+export class MetadataStore extends WeakMap {
+    read(value) {
+        if (!this.has(value)) {
+            this.set(value, new ElementMetadata());
+        }
+        return this.get(value);
+    }
+}
+export const metadataStore = new MetadataStore();
+//# sourceMappingURL=metadata.js.map

package/target/lib/metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAEvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAa,EAAE,CAAC;IACrB,OAAO,CAAwB;IAC/B,SAAS,GAAG,IAAI,GAAG,EAA8B,CAAC;CACnD;AAED,MAAM,OAAO,aAAc,SAAQ,OAAgC;IACjE,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;QACzC,CAAC;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC"}

package/target/lib/shadow.d.ts

@@ -1,2 +1,2 @@
 import { ShadowResult } from './result.js';
-export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, ctx: ClassFieldDecoratorContext<This, T>): (this: This, result: T) => T;
+export declare function shadow<This extends HTMLElement, T extends ShadowResult>(_: undefined, _ctx: ClassFieldDecoratorContext<This, T>): (this: This, result: T) => T;

package/target/lib/shadow.js

@@ -1,10 +1,8 @@
-export function shadow(_, ctx) {
-    ctx.addInitializer(function () {
+export function shadow(_, _ctx) {
+    return function (result) {
         if (!this.shadowRoot) {
             this.attachShadow({ mode: 'open' });
         }
-    });
-    return function (result) {
         result.execute(this.shadowRoot);
         return result;
     };

package/target/lib/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,GAAwC;IAExC,GAAG,CAAC,cAAc,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,UAAsB,MAAS;QACpC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAEjC,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,IAAyC;IAEzC,OAAO,UAAsB,MAAS;QACpC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACtC,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,CAAC;QAEjC,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/shadow.test.js

@@ -6,21 +6,25 @@ describe('template', () => {
     it('should apply a stylesheet', () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
             let _styles_decorators;
             let _styles_initializers = [];
+            let _styles_extraInitializers = [];
             return class MyElement extends _classSuper {
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
                     _styles_decorators = [shadow];
-                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _instanceExtraInitializers);
+                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _styles_extraInitializers);
                     if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 }
-                styles = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _styles_initializers, css `
+                styles = __runInitializers(this, _styles_initializers, css `
         :host {
           display: flex;
         }
-      `));
+      `);
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _styles_extraInitializers);
+                }
             };
         })();
         customElements.define('template-1', MyElement);
@@ -30,26 +34,31 @@ describe('template', () => {
     it('should apply html', () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
             let _styles_decorators;
             let _styles_initializers = [];
+            let _styles_extraInitializers = [];
             let _template_decorators;
             let _template_initializers = [];
+            let _template_extraInitializers = [];
             return class MyElement extends _classSuper {
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
                     _styles_decorators = [shadow];
                     _template_decorators = [shadow];
-                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _instanceExtraInitializers);
-                    __esDecorate(null, null, _template_decorators, { kind: "field", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template, set: (obj, value) => { obj.template = value; } }, metadata: _metadata }, _template_initializers, _instanceExtraInitializers);
+                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } }, metadata: _metadata }, _styles_initializers, _styles_extraInitializers);
+                    __esDecorate(null, null, _template_decorators, { kind: "field", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template, set: (obj, value) => { obj.template = value; } }, metadata: _metadata }, _template_initializers, _template_extraInitializers);
                     if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                 }
-                styles = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _styles_initializers, css `
+                styles = __runInitializers(this, _styles_initializers, css `
         :host {
           display: flex;
         }
-      `));
-                template = __runInitializers(this, _template_initializers, html `<slot></slot>`);
+      `);
+                template = (__runInitializers(this, _styles_extraInitializers), __runInitializers(this, _template_initializers, html `<slot></slot>`));
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _template_extraInitializers);
+                }
             };
         })();
         customElements.define('template-2', MyElement);

package/target/lib/shadow.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.test.js","sourceRoot":"","sources":["../../src/lib/shadow.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;YAC7B,SAAS;8BAAS,WAAW;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;oBAAC,oKAAA,MAAM,6BAAN,MAAM,wFAIZ;;;gBAJM,MAAM,uGAAG,GAAG,CAAA;;;;OAInB,GAAC;;;QAGJ,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YACrB,SAAS;8BAAS,WAAW;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;4CAMN,MAAM;oBANC,oKAAA,MAAM,6BAAN,MAAM,wFAIZ;oBAEM,0KAAA,QAAQ,6BAAR,QAAQ,0FAAuB;;;gBAN/B,MAAM,uGAAG,GAAG,CAAA;;;;OAInB,GAAC;gBAEM,QAAQ,mDAAG,IAAI,CAAA,eAAe,EAAC;;;QAGzC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"shadow.test.js","sourceRoot":"","sources":["../../src/lib/shadow.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;YAC7B,SAAS;8BAAS,WAAW;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;oBAAC,oKAAA,MAAM,6BAAN,MAAM,uFAIZ;;;gBAJM,MAAM,iDAAG,GAAG,CAAA;;;;OAInB,EAAC;;;;;;;QAGJ,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YACrB,SAAS;8BAAS,WAAW;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,MAAM;4CAMN,MAAM;oBANC,oKAAA,MAAM,6BAAN,MAAM,uFAIZ;oBAEM,0KAAA,QAAQ,6BAAR,QAAQ,2FAAuB;;;gBAN/B,MAAM,iDAAG,GAAG,CAAA;;;;OAInB,EAAC;gBAEM,QAAQ,wGAAG,IAAI,CAAA,eAAe,GAAC;;;;;;;QAGzC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/tag-name.d.ts

@@ -1 +1 @@
-export declare function tagName(_val: unknown, _ctx: ClassFieldDecoratorContext): (this: CustomElementConstructor, val: string) => string;
+export declare function tagName<This extends typeof HTMLElement>(_val: unknown, ctx: ClassFieldDecoratorContext<This, string>): void;

package/target/lib/tag-name.js

@@ -1,11 +1,6 @@
-export function tagName(_val, _ctx) {
-    return function (val) {
-        Promise.resolve().then(() => {
-            if (!customElements.get(val)) {
-                customElements.define(val, this);
-            }
-        });
-        return val;
-    };
+import { metadataStore } from './metadata.js';
+export function tagName(_val, ctx) {
+    const metadata = metadataStore.read(ctx.metadata);
+    metadata.tagName = ctx.access.get;
 }
 //# sourceMappingURL=tag-name.js.map

package/target/lib/tag-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,IAAgC;IACrE,OAAO,UAA0C,GAAW;QAC1D,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC1B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,UAAU,OAAO,CACrB,IAAa,EACb,GAA6C;IAE7C,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAElD,QAAQ,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC;AACpC,CAAC"}

package/target/lib/tag-name.test.js

@@ -1,22 +1,34 @@
 import { __esDecorate, __runInitializers } from "tslib";
+import { element } from './element.js';
 import { tagName } from './tag-name.js';
 describe('tag-name', () => {
     it('should define a custom element', async () => {
         let MyElement = (() => {
+            let _classDecorators = [element];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
             let _classSuper = HTMLElement;
-            let _staticExtraInitializers = [];
             let _static_tagName_decorators;
             let _static_tagName_initializers = [];
-            return class MyElement extends _classSuper {
+            let _static_tagName_extraInitializers = [];
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
                     _static_tagName_decorators = [tagName];
-                    __esDecorate(null, null, _static_tagName_decorators, { kind: "field", name: "tagName", static: true, private: false, access: { has: obj => "tagName" in obj, get: obj => obj.tagName, set: (obj, value) => { obj.tagName = value; } }, metadata: _metadata }, _static_tagName_initializers, _staticExtraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(this, _staticExtraInitializers);
+                    __esDecorate(null, null, _static_tagName_decorators, { kind: "field", name: "tagName", static: true, private: false, access: { has: obj => "tagName" in obj, get: obj => obj.tagName, set: (obj, value) => { obj.tagName = value; } }, metadata: _metadata }, _static_tagName_initializers, _static_tagName_extraInitializers);
+                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                    MyElement = _classThis = _classDescriptor.value;
+                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                }
+                static tagName = __runInitializers(_classThis, _static_tagName_initializers, 'tn-test-1');
+                static {
+                    __runInitializers(_classThis, _static_tagName_extraInitializers);
+                    __runInitializers(_classThis, _classExtraInitializers);
                 }
-                static tagName = __runInitializers(this, _static_tagName_initializers, 'tn-test-1');
             };
+            return MyElement = _classThis;
         })();
         return customElements.whenDefined(MyElement.tagName);
     });

package/target/lib/tag-name.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag-name.test.js","sourceRoot":"","sources":["../../src/lib/tag-name.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;YACxC,SAAS;8BAAS,WAAW;;;;yBAA7B,SAAU,SAAQ,WAAW;;;kDAChC,OAAO;oBAAC,6KAAO,OAAO,6BAAP,OAAO,8FAAe;;oBADlC,kDAAS;;gBACJ,MAAM,CAAC,OAAO,yDAAG,WAAW,EAAC;;;QAGxC,OAAO,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"tag-name.test.js","sourceRoot":"","sources":["../../src/lib/tag-name.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;YAExC,SAAS;oCADd,OAAO;;;;8BACgB,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;kDAChC,OAAO;oBAAC,6KAAO,OAAO,6BAAP,OAAO,uGAAe;oBADxC,6KAEC;;;;gBADU,MAAM,CAAC,OAAO,+DAAG,WAAW,EAAC;;;oBADlC,uDAAS;;;;;QAIf,OAAO,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib.d.ts

@@ -4,3 +4,4 @@ export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { tagName } from './lib/tag-name.js';
+export { element } from './lib/element.js';

package/target/lib.js

@@ -4,4 +4,5 @@ export { shadow } from './lib/shadow.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
 export { tagName } from './lib/tag-name.js';
+export { element } from './lib/element.js';
 //# sourceMappingURL=lib.js.map

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}