@joist/element 3.0.6 → 3.0.8-next.0

package/README.md

@@ -2,19 +2,18 @@
 
 Create a shadow root and apply styles and html as defined
 
-## NOTE: This lastest version uses the stage-3 decorator proposal. This requires typescript >= 5.0 and many other tools do not yet support this latest syntax.
-
 #### Installation:
 
 ```BASH
-npm i @joist/element@rc
+npm i @joist/element
 ```
 
 #### Example:
 
 ```TS
-import { tagName, shadow, css, html, attr, listen } from '@joist/element';
+import { tagName, shadow, css, html, attr, listen, element } from '@joist/element';
 
+@element
 export class MyElement extends HTMLElement {
   // define a custom element
   @tagName static tagName = 'my-element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "3.0.6",
+  "version": "3.0.8-next.0",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -13,6 +13,7 @@
     }
   },
   "files": [
+    "src",
     "target"
   ],
   "sideEffects": false,
@@ -62,6 +63,5 @@
         "build"
       ]
     }
-  },
-  "gitHead": "e6e36105708633b45a0585b066a89f07a7ac78cb"
+  }
 }

package/src/lib/attr.test.ts

@@ -0,0 +1,64 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { attr } from './attr.js';
+
+describe('@attr()', () => {
+  it('should read and parse the correct values', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = 100; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = false; // boolean
+      @attr accessor value4 = 'hello'; // string
+    }
+
+    customElements.define('attr-test-2', MyElement);
+
+    const el = await fixture<MyElement>(
+      html`<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`
+    );
+
+    expect(el.value1).to.equal(100);
+    expect(el.value2).to.equal(2);
+    expect(el.value3).to.equal(true);
+    expect(el.value4).to.equal('world');
+  });
+
+  it('should not write falsy props to attributes', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = undefined;
+      @attr accessor value2 = null;
+      @attr accessor value3 = '';
+    }
+
+    customElements.define('attr-test-3', MyElement);
+
+    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+
+    expect(el.hasAttribute('value1')).to.be.false;
+    expect(el.hasAttribute('value2')).to.be.false;
+    expect(el.hasAttribute('value3')).to.be.false;
+  });
+
+  it('should update attributes when props are changed', async () => {
+    class MyElement extends HTMLElement {
+      @attr accessor value1 = 'hello'; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = true; // boolean
+      @attr accessor value4 = false; // boolean
+    }
+
+    customElements.define('attr-test-4', MyElement);
+
+    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
+
+    el.value1 = 'world';
+    el.value2 = 100;
+    el.value3 = false;
+    el.value4 = true;
+
+    expect(el.getAttribute('value1')).to.equal('world');
+    expect(el.getAttribute('value2')).to.equal('100');
+    expect(el.hasAttribute('value3')).to.be.false;
+    expect(el.hasAttribute('value4')).to.be.true;
+  });
+});

package/src/lib/attr.ts

@@ -0,0 +1,56 @@
+// ensure that the metadata symbol exists
+(Symbol as any).metadata ??= Symbol('Symbol.metadata');
+
+import { ElementMetadata } from './element.js';
+
+export function attr<This extends HTMLElement>(
+  { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
+  ctx: ClassAccessorDecoratorContext<This>
+): ClassAccessorDecoratorResult<This, any> {
+  ctx.metadata.el ??= new ElementMetadata();
+  const meta = ctx.metadata.el as ElementMetadata;
+  meta.attrs.push(String(ctx.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));
+        }
+      }
+
+      return set.call(this, value);
+    },
+    get() {
+      const ogValue = get.call(this);
+
+      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);
+          }
+
+          // treat as string
+          return attr;
+        }
+      }
+
+      // no readable value return original
+      return ogValue;
+    },
+  };
+}

package/src/lib/element.test.ts

@@ -0,0 +1,24 @@
+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()', () => {
+  it('should write default value to attribute', async () => {
+    @element
+    class MyElement extends HTMLElement {
+      @tagName static tag = 'element-1';
+
+      @attr accessor value1 = 'hello'; // no attribute
+      @attr accessor value2 = 0; // number
+      @attr accessor value3 = true; // boolean
+    }
+
+    const el = await fixture<MyElement>(html`<element-1></element-1>`);
+
+    expect(el.getAttribute('value1')).to.equal('hello');
+    expect(el.getAttribute('value2')).to.equal('0');
+    expect(el.getAttribute('value3')).to.equal('');
+  });
+});

package/src/lib/element.ts

@@ -0,0 +1,54 @@
+(Symbol as any).metadata ??= Symbol('Symbol.metadata');
+
+export class ElementMetadata {
+  attrs: string[] = [];
+  tagName?: (val: unknown) => unknown;
+}
+
+export interface ElementCtx {
+  el?: ElementMetadata;
+}
+
+export function element<T extends new (...args: any[]) => HTMLElement>(
+  Base: T,
+  ctx: ClassDecoratorContext<T>
+) {
+  ctx.metadata.el ??= new ElementMetadata();
+  const meta = ctx.metadata.el as ElementMetadata;
+
+  ctx.addInitializer(function (this: T) {
+    const val = meta.tagName!(this) as string;
+
+    if (!customElements.get(val)) {
+      customElements.define(val, this);
+    }
+  });
+
+  return class JoistElement extends Base {
+    // make all attrs observable
+    static observedAttributes = [...meta.attrs];
+
+    connectedCallback() {
+      for (let attr of meta.attrs) {
+        const value = Reflect.get(this, attr);
+
+        // reflect values back to attributes
+        if (value !== null && value !== undefined && value !== '') {
+          if (typeof value === 'boolean') {
+            if (value === true) {
+              // set boolean attribute
+              this.setAttribute(attr, '');
+            }
+          } else {
+            // set key/value attribute
+            this.setAttribute(attr, String(value));
+          }
+        }
+      }
+
+      if (super.connectedCallback) {
+        super.connectedCallback();
+      }
+    }
+  };
+}

package/src/lib/listen.ts

@@ -0,0 +1,14 @@
+export function listen<This extends HTMLElement>(
+  event: string,
+  root: (el: This) => ShadowRoot | This = (el) => el.shadowRoot || el
+) {
+  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));
+      });
+    });
+  };
+}

package/src/lib/result.ts

@@ -0,0 +1,27 @@
+export abstract class ShadowResult {
+  strings: TemplateStringsArray;
+  values: any[];
+
+  #shadow: ShadowRoot | undefined = undefined;
+
+  get shadow() {
+    if (!this.#shadow) {
+      throw new Error('ShadowResult has not been applied');
+    }
+
+    return this.#shadow;
+  }
+
+  constructor(raw: TemplateStringsArray, ...values: any[]) {
+    this.strings = raw;
+    this.values = values;
+  }
+
+  execute(root: ShadowRoot) {
+    this.#shadow = root;
+
+    this.apply(root);
+  }
+
+  abstract apply(root: ShadowRoot): void;
+}

package/src/lib/shadow.test.ts

@@ -0,0 +1,40 @@
+import { expect } from '@open-wc/testing';
+
+import { css, html } from './tags.js';
+import { shadow } from './shadow.js';
+
+describe('template', () => {
+  it('should apply a stylesheet', () => {
+    class MyElement extends HTMLElement {
+      @shadow styles = css`
+        :host {
+          display: flex;
+        }
+      `;
+    }
+
+    customElements.define('template-1', MyElement);
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot!.adoptedStyleSheets.length).to.eq(1);
+  });
+
+  it('should apply html', () => {
+    class MyElement extends HTMLElement {
+      @shadow styles = css`
+        :host {
+          display: flex;
+        }
+      `;
+
+      @shadow template = html`<slot></slot>`;
+    }
+
+    customElements.define('template-2', MyElement);
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot?.innerHTML).to.eq('<slot></slot>');
+  });
+});

package/src/lib/shadow.ts

@@ -0,0 +1,18 @@
+import { ShadowResult } from './result.js';
+
+export function shadow<This extends HTMLElement, T extends ShadowResult>(
+  _: undefined,
+  ctx: ClassFieldDecoratorContext<This, T>
+) {
+  ctx.addInitializer(function () {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+  });
+
+  return function (this: This, result: T) {
+    result.execute(this.shadowRoot!);
+
+    return result;
+  };
+}

package/src/lib/tag-name.test.ts

@@ -0,0 +1,13 @@
+import { element } from './element.js';
+import { tagName } from './tag-name.js';
+
+describe('tag-name', () => {
+  it('should define a custom element', async () => {
+    @element
+    class MyElement extends HTMLElement {
+      @tagName static tagName = 'tn-test-1';
+    }
+
+    return customElements.whenDefined(MyElement.tagName);
+  });
+});

package/src/lib/tag-name.ts

@@ -0,0 +1,10 @@
+(Symbol as any).metadata ??= Symbol('Symbol.metadata');
+
+import { ElementCtx, ElementMetadata } from './element.js';
+
+export function tagName(_val: unknown, ctx: ClassFieldDecoratorContext & { metadata: ElementCtx }) {
+  ctx.metadata.el ??= new ElementMetadata();
+  const meta = ctx.metadata.el as ElementMetadata;
+
+  meta.tagName = ctx.access.get;
+}

package/src/lib/tags.test.ts

@@ -0,0 +1,28 @@
+import { expect } from '@open-wc/testing';
+import { css, html, htmlTemplateCache, styleSheetCache } from './tags.js';
+
+describe('tags', () => {
+  it('should ensure return the same CSSResult', () => {
+    class Test {
+      styles = css`Hello World`;
+    }
+
+    const a = new Test();
+    const b = new Test();
+
+    expect(a.styles.strings).to.equal(b.styles.strings);
+    expect(styleSheetCache.get(a.styles.strings)).to.equal(styleSheetCache.get(b.styles.strings));
+  });
+
+  it('should cache the HTMLTemplateElement', () => {
+    class Test {
+      dom = html`Hello World`;
+    }
+
+    const a = new Test();
+    const b = new Test();
+
+    expect(a.dom.strings).to.equal(b.dom.strings);
+    expect(htmlTemplateCache.get(a.dom.strings)).to.equal(htmlTemplateCache.get(b.dom.strings));
+  });
+});

package/src/lib/tags.ts

@@ -0,0 +1,94 @@
+/**
+ * NOTE: TemplateStringsArray can be used to cache via a WeakMap.
+ *
+ * function html(strs: TemplateStringsArray) {
+ *   return strs
+ * }
+ *
+ * class Foo {
+ *   hello = html`world`;
+ * }
+ *
+ * // these will be the same instance of TemplateStringsArray
+ * new Foo().hello === new Foo().hello
+ */
+
+import { ShadowResult } from './result.js';
+
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+
+export const htmlTemplateCache = new WeakMap<TemplateStringsArray, HTMLTemplateElement>();
+
+export class HTMLResult extends ShadowResult {
+  query<K extends Tags>(selectors: K): HTMLElementTagNameMap[K] | null;
+  query<K extends SVGTags>(selectors: K): SVGElementTagNameMap[K] | null;
+  query<K extends MathTags>(selectors: K): MathMLElementTagNameMap[K] | null;
+  query<E extends Element = Element>(selectors: string): E | null;
+  query<K extends Tags>(query: K) {
+    return this.shadow.querySelector<K>(query);
+  }
+
+  queryAll<K extends Tags>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+  queryAll<K extends SVGTags>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+  queryAll<K extends MathTags>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+  queryAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+  queryAll<K extends Tags>(query: K) {
+    return this.shadow.querySelectorAll<K>(query);
+  }
+
+  /**
+   * THe HTMLTemplateElement itself will be cached but a new instance of the result returned
+   */
+  apply(root: ShadowRoot): void {
+    let template: HTMLTemplateElement;
+
+    if (htmlTemplateCache.has(this.strings)) {
+      template = htmlTemplateCache.get(this.strings) as HTMLTemplateElement;
+    } else {
+      template = document.createElement('template');
+
+      template.innerHTML = concat(this.strings);
+      htmlTemplateCache.set(this.strings, template);
+    }
+
+    root.append(template.content.cloneNode(true));
+  }
+}
+
+export function html(strings: TemplateStringsArray, ...values: any[]): HTMLResult {
+  return new HTMLResult(strings, ...values);
+}
+
+export const styleSheetCache = new WeakMap<TemplateStringsArray, CSSStyleSheet>();
+
+export class CSSResult extends ShadowResult {
+  apply(root: ShadowRoot): void {
+    let sheet: CSSStyleSheet;
+
+    if (styleSheetCache.has(this.strings)) {
+      sheet = styleSheetCache.get(this.strings) as CSSStyleSheet;
+    } else {
+      sheet = new CSSStyleSheet();
+
+      sheet.replaceSync(concat(this.strings));
+    }
+
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  }
+}
+
+export function css(strings: TemplateStringsArray): CSSResult {
+  return new CSSResult(strings);
+}
+
+function concat(strings: TemplateStringsArray) {
+  let res = '';
+
+  for (let i = 0; i < strings.length; i++) {
+    res += strings[i];
+  }
+
+  return res;
+}

package/src/lib.ts

@@ -0,0 +1,7 @@
+export { ShadowResult as TemplateResult } from './lib/result.js';
+export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
+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/attr.js

@@ -1,33 +1,10 @@
+Symbol.metadata ??= Symbol('Symbol.metadata');
+import { ElementMetadata } from './element.js';
 export function attr({ get, set }, ctx) {
+    ctx.metadata.el ??= new ElementMetadata();
+    const meta = ctx.metadata.el;
+    meta.attrs.push(String(ctx.name));
     return {
-        init(value) {
-            if (typeof ctx.name === 'string') {
-                if (this.hasAttribute(ctx.name)) {
-                    const attr = this.getAttribute(ctx.name);
-                    if (attr === '') {
-                        return true;
-                    }
-                    if (typeof value === 'number') {
-                        return Number(attr);
-                    }
-                    return attr;
-                }
-                Promise.resolve().then(() => {
-                    const cached = get.call(this);
-                    if (cached !== null && cached !== undefined && cached !== '') {
-                        if (typeof cached === 'boolean') {
-                            if (cached === true) {
-                                this.setAttribute(ctx.name.toString(), '');
-                            }
-                        }
-                        else {
-                            this.setAttribute(ctx.name.toString(), String(cached));
-                        }
-                    }
-                });
-            }
-            return value;
-        },
         set(value) {
             if (typeof ctx.name === 'string') {
                 if (typeof value === 'boolean') {

package/target/lib/attr.js.map

@@ -1 +1 @@
-{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,OAAO;QACL,IAAI,CAAC,KAAc;YACjB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAGzC,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAGD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;wBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAGD,OAAO,IAAI,CAAC;iBACb;gBAQD,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAE9B,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,EAAE,EAAE;wBAC5D,IAAI,OAAO,MAAM,KAAK,SAAS,EAAE;4BAC/B,IAAI,MAAM,KAAK,IAAI,EAAE;gCAEnB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;6BAC5C;yBACF;6BAAM;4BAEL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;yBACxD;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;YAED,OAAO,KAAK,CAAC;QACf,CAAC;QACD,GAAG,CAAC,KAAc;YAChB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;oBAC9B,IAAI,KAAK,EAAE;wBACT,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;qBAChC;iBACF;qBAAM;oBACL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC5C;aACF;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;gBAChC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEzC,IAAI,IAAI,KAAK,IAAI,EAAE;oBAEjB,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAGD,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;wBAC/B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAGD,OAAO,IAAI,CAAC;iBACb;aACF;YAGD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"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,cAAc,CAAC;AAE/C,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"}

package/target/lib/attr.test.js

@@ -1,45 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { expect, fixture, html } from '@open-wc/testing';
 import { attr } from './attr.js';
-describe('observable: attr()', () => {
-    it('should write default value to attribute', async () => {
-        let MyElement = (() => {
-            let _classSuper = HTMLElement;
-            let _instanceExtraInitializers = [];
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value3_decorators;
-            let _value3_initializers = [];
-            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);
-                    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'));
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = __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);
-                get value3() { return this.#value3_accessor_storage; }
-                set value3(value) { this.#value3_accessor_storage = value; }
-            };
-        })();
-        customElements.define('attr-test-1', MyElement);
-        const el = await fixture(html `<attr-test-1></attr-test-1>`);
-        expect(el.getAttribute('value1')).to.equal('hello');
-        expect(el.getAttribute('value2')).to.equal('0');
-        expect(el.getAttribute('value3')).to.equal('');
-    });
+describe('@attr()', () => {
     it('should read and parse the correct values', async () => {
         let MyElement = (() => {
             let _classSuper = HTMLElement;

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

@@ -1 +1 @@
-{"version":3,"file":"attr.test.js","sourceRoot":"","sources":["../../src/lib/attr.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YACjD,SAAS;8BAAS,WAAW;;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,wFAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,wFAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,wFAAQ;;;gBAFvB,+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;;;QAG/B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAE5D,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;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YAClD,SAAS;8BAAS,WAAW;;;;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAHC,uKAAS,MAAM,6BAAN,MAAM,wFAAO;oBACtB,uKAAS,MAAM,6BAAN,MAAM,wFAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,wFAAS;oBACxB,uKAAS,MAAM,6BAAN,MAAM,wFAAW;;;gBAH1B,+HAAkB,GAAG,GAAC;gBAAtB,IAAS,MAAM,4CAAO;gBAAtB,IAAS,MAAM,kDAAO;gBACtB,yEAAkB,CAAC,EAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBACpB,yEAAkB,KAAK,EAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;gBACxB,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;;;QAGlC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,8DAA8D,CACnE,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9B,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACjC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;YACpD,SAAS;8BAAS,WAAW;;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAFC,uKAAS,MAAM,6BAAN,MAAM,wFAAa;oBAC5B,uKAAS,MAAM,6BAAN,MAAM,wFAAQ;oBACvB,uKAAS,MAAM,6BAAN,MAAM,wFAAM;;;gBAFrB,+HAAkB,SAAS,GAAC;gBAA5B,IAAS,MAAM,4CAAa;gBAA5B,IAAS,MAAM,kDAAa;gBAC5B,yEAAkB,IAAI,EAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;gBACvB,yEAAkB,EAAE,EAAC;gBAArB,IAAS,MAAM,4CAAM;gBAArB,IAAS,MAAM,kDAAM;;;QAG7B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAEvE,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;YACzD,SAAS;8BAAS,WAAW;;;;;;;;;;yBAA7B,SAAU,SAAQ,WAAW;;;0CAChC,IAAI;0CACJ,IAAI;0CACJ,IAAI;0CACJ,IAAI;oBAHC,uKAAS,MAAM,6BAAN,MAAM,wFAAW;oBAC1B,uKAAS,MAAM,6BAAN,MAAM,wFAAK;oBACpB,uKAAS,MAAM,6BAAN,MAAM,wFAAQ;oBACvB,uKAAS,MAAM,6BAAN,MAAM,wFAAS;;;gBAHxB,+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;gBACvB,yEAAkB,KAAK,EAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;;;QAGhC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAEhD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAEvE,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC;QACpB,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC;QAChB,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC;QAClB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;QAEjB,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,KAAK,CAAC,CAAC;QAClD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"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

@@ -0,0 +1,336 @@
+export declare class ElementMetadata {
+    attrs: string[];
+    tagName?: (val: unknown) => unknown;
+}
+export interface ElementCtx {
+    el?: ElementMetadata;
+}
+export declare function element<T extends new (...args: any[]) => HTMLElement>(Base: T, ctx: ClassDecoratorContext<T>): {
+    new (...args: any[]): {
+        connectedCallback(): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        inert: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        popover: string | null;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        attachInternals(): ElementInternals;
+        click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
+        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;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        disconnectedCallback?(): void;
+        readonly attributes: NamedNodeMap;
+        readonly classList: DOMTokenList;
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        id: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        readonly part: DOMTokenList;
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        checkVisibility(options?: CheckVisibilityOptions | undefined): boolean;
+        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
+        getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
+        getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
+        getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, text: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestPointerLock(): void;
+        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        textContent: string | null;
+        appendChild<T extends Node>(node: T): T;
+        cloneNode(deep?: boolean | undefined): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T_2 extends Node>(child: T_2): T_2;
+        replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+        readonly ELEMENT_NODE: 1;
+        readonly ATTRIBUTE_NODE: 2;
+        readonly TEXT_NODE: 3;
+        readonly CDATA_SECTION_NODE: 4;
+        readonly ENTITY_REFERENCE_NODE: 5;
+        readonly ENTITY_NODE: 6;
+        readonly PROCESSING_INSTRUCTION_NODE: 7;
+        readonly COMMENT_NODE: 8;
+        readonly DOCUMENT_NODE: 9;
+        readonly DOCUMENT_TYPE_NODE: 10;
+        readonly DOCUMENT_FRAGMENT_NODE: 11;
+        readonly NOTATION_NODE: 12;
+        readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+        readonly DOCUMENT_POSITION_PRECEDING: 2;
+        readonly DOCUMENT_POSITION_FOLLOWING: 4;
+        readonly DOCUMENT_POSITION_CONTAINS: 8;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
+        dispatchEvent(event: Event): boolean;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaInvalid: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
+        role: string | null;
+        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+        after(...nodes: (string | Node)[]): void;
+        before(...nodes: (string | Node)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (string | Node)[]): void;
+        innerHTML: string;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (string | Node)[]): void;
+        prepend(...nodes: (string | Node)[]): void;
+        querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
+        querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
+        querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
+        querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
+        querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
+        querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
+        querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+        replaceChildren(...nodes: (string | Node)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
+        readonly style: CSSStyleDeclaration;
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string | undefined;
+        tabIndex: number;
+        blur(): void;
+        focus(options?: FocusOptions | undefined): void;
+    };
+    observedAttributes: string[];
+} & T;

package/target/lib/element.js

@@ -0,0 +1,37 @@
+Symbol.metadata ??= Symbol('Symbol.metadata');
+export class ElementMetadata {
+    attrs = [];
+    tagName;
+}
+export function element(Base, ctx) {
+    ctx.metadata.el ??= new ElementMetadata();
+    const meta = ctx.metadata.el;
+    ctx.addInitializer(function () {
+        const val = meta.tagName(this);
+        if (!customElements.get(val)) {
+            customElements.define(val, this);
+        }
+    });
+    return class JoistElement extends Base {
+        static observedAttributes = [...meta.attrs];
+        connectedCallback() {
+            for (let attr of meta.attrs) {
+                const value = Reflect.get(this, attr);
+                if (value !== null && value !== undefined && value !== '') {
+                    if (typeof value === 'boolean') {
+                        if (value === true) {
+                            this.setAttribute(attr, '');
+                        }
+                    }
+                    else {
+                        this.setAttribute(attr, String(value));
+                    }
+                }
+            }
+            if (super.connectedCallback) {
+                super.connectedCallback();
+            }
+        }
+    };
+}
+//# sourceMappingURL=element.js.map

package/target/lib/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAEvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAa,EAAE,CAAC;IACrB,OAAO,CAA6B;CACrC;AAMD,MAAM,UAAU,OAAO,CACrB,IAAO,EACP,GAA6B;IAE7B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,eAAe,EAAE,CAAC;IAC1C,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,EAAqB,CAAC;IAEhD,GAAG,CAAC,cAAc,CAAC;QACjB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAQ,CAAC,IAAI,CAAW,CAAC;QAE1C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,YAAa,SAAQ,IAAI;QAEpC,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAE5C,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.d.ts

@@ -0,0 +1 @@
+export {};

package/target/lib/element.test.js

@@ -0,0 +1,63 @@
+import { __esDecorate, __runInitializers } from "tslib";
+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()', () => {
+    it('should write default value to attribute', async () => {
+        let MyElement = (() => {
+            let _classDecorators = [element];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _staticExtraInitializers = [];
+            let _instanceExtraInitializers = [];
+            let _static_tag_decorators;
+            let _static_tag_initializers = [];
+            let _value1_decorators;
+            let _value1_initializers = [];
+            let _value2_decorators;
+            let _value2_initializers = [];
+            let _value3_decorators;
+            let _value3_initializers = [];
+            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_tag_decorators = [tagName];
+                    _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(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'));
+                get value1() { return this.#value1_accessor_storage; }
+                set value1(value) { this.#value1_accessor_storage = value; }
+                #value2_accessor_storage = __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);
+                get value3() { return this.#value3_accessor_storage; }
+                set value3(value) { this.#value3_accessor_storage = value; }
+                static {
+                    __runInitializers(_classThis, _classExtraInitializers);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = await fixture(html `<element-1></element-1>`);
+        expect(el.getAttribute('value1')).to.equal('hello');
+        expect(el.getAttribute('value2')).to.equal('0');
+        expect(el.getAttribute('value3')).to.equal('');
+    });
+});
+//# sourceMappingURL=element.test.js.map

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

@@ -0,0 +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,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,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"}

package/target/lib/listen.js

@@ -1,7 +1,9 @@
 export function listen(event, root = (el) => el.shadowRoot || el) {
     return (value, ctx) => {
         ctx.addInitializer(function () {
-            root(this).addEventListener(event, value.bind(this));
+            Promise.resolve().then(() => {
+                root(this).addEventListener(event, value.bind(this));
+            });
         });
     };
 }

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;YACjB,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}
+{"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"}

package/target/lib/result.js.map

@@ -1 +1 @@
-{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,YAAY;IAChC,OAAO,CAAuB;IAC9B,MAAM,CAAQ;IAEd,OAAO,GAA2B,SAAS,CAAC;IAE5C,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;SACtD;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO,CAAC,IAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;CAGF"}
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,YAAY;IAChC,OAAO,CAAuB;IAC9B,MAAM,CAAQ;IAEd,OAAO,GAA2B,SAAS,CAAC;IAE5C,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;QACvD,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,OAAO,CAAC,IAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QAEpB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;CAGF"}

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;YACpB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;SACrC;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,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"}

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

@@ -1 +1,4 @@
-export declare function tagName(_val: unknown, ctx: ClassFieldDecoratorContext): (this: CustomElementConstructor, val: string) => string;
+import { ElementCtx } from './element.js';
+export declare function tagName(_val: unknown, ctx: ClassFieldDecoratorContext & {
+    metadata: ElementCtx;
+}): void;

package/target/lib/tag-name.js

@@ -1,12 +1,8 @@
+Symbol.metadata ??= Symbol('Symbol.metadata');
+import { ElementMetadata } from './element.js';
 export function tagName(_val, ctx) {
-    return function (val) {
-        if (!ctx.static) {
-            throw new Error('tagName can only be used on static fields');
-        }
-        if (!customElements.get(val)) {
-            customElements.define(val, this);
-        }
-        return val;
-    };
+    ctx.metadata.el ??= new ElementMetadata();
+    const meta = ctx.metadata.el;
+    meta.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,GAA+B;IACpE,OAAO,UAA0C,GAAW;QAC1D,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;YACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;SAC9D;QAED,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAC5B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SAClC;QAED,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAEvD,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAE3D,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,GAA0D;IAC/F,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,eAAe,EAAE,CAAC;IAC1C,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,EAAqB,CAAC;IAEhD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC;AAChC,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 {
+            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, _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 tagName = __runInitializers(_classThis, _static_tagName_initializers, 'tn-test-1');
+                static {
+                    __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,8FAAe;oBADxC,6KAEC;;;oBAFK,wDAAS;;gBACJ,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/tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,YAAY;IAK1C,KAAK,CAAiB,KAAQ;QAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;IAC7C,CAAC;IAMD,QAAQ,CAAiB,KAAQ;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAKD,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACvC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;SACvE;aAAM;YACL,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;SAC5D;aAAM;YACL,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACzC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;KACnB;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,OAAO,EAA6C,CAAC;AAE1F,MAAM,OAAO,UAAW,SAAQ,YAAY;IAK1C,KAAK,CAAiB,KAAQ;QAC5B,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,KAAK,CAAC,CAAC;IAC7C,CAAC;IAMD,QAAQ,CAAiB,KAAQ;QAC/B,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAKD,KAAK,CAAC,IAAgB;QACpB,IAAI,QAA6B,CAAC;QAElC,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACxC,QAAQ,GAAG,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAwB,CAAC;QACxE,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAE9C,QAAQ,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1C,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAa;IAClE,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,OAAO,EAAuC,CAAC;AAElF,MAAM,OAAO,SAAU,SAAQ,YAAY;IACzC,KAAK,CAAC,IAAgB;QACpB,IAAI,KAAoB,CAAC;QAEzB,IAAI,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAkB,CAAC;QAC7D,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAE5B,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,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"}