@joist/element 3.9.1 → 4.0.0-next.2

package/README.md

@@ -13,11 +13,10 @@ npm i @joist/element
 ```TS
 import { tagName, shadow, css, html, attr, listen, element } from '@joist/element';
 
-@element
+@element({
+  tagName: 'my-element'
+})
 export class MyElement extends HTMLElement {
-  // define a custom element
-  @tagName static tagName = 'my-element';
-
   // apply styles to shadow dom
   @shadow styles = css`
     :host {
@@ -32,7 +31,7 @@ export class MyElement extends HTMLElement {
   `;
 
   // define attributes
-  @attr accessor value = 0;
+  @attr() accessor value = 0;
 
   // listen for events
   @listen('click') onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "3.9.1",
+  "version": "4.0.0-next.2",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/attr.test.ts

@@ -1,20 +1,29 @@
 import { expect, fixture, html } from '@open-wc/testing';
 
 import { attr } from './attr.js';
+import { element } from './element.js';
 
 describe('@attr()', () => {
   it('should read and parse the correct values', async () => {
+    @element({
+      tagName: 'attr-test-1'
+    })
     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
-    }
+      @attr()
+      accessor value1 = 100; // no attribute
+
+      @attr()
+      accessor value2 = 0; // number
+
+      @attr()
+      accessor value3 = false; // boolean
 
-    customElements.define('attr-test-2', MyElement);
+      @attr()
+      accessor value4 = 'hello'; // string
+    }
 
     const el = await fixture<MyElement>(
-      html`<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`
+      html`<attr-test-1 value2="2" value3 value4="world"></attr-test-1>`
     );
 
     expect(el.value1).to.equal(100);
@@ -24,15 +33,21 @@ describe('@attr()', () => {
   });
 
   it('should not write falsy props to attributes', async () => {
+    @element({
+      tagName: 'attr-test-2'
+    })
     class MyElement extends HTMLElement {
-      @attr accessor value1 = undefined;
-      @attr accessor value2 = null;
-      @attr accessor value3 = '';
-    }
+      @attr()
+      accessor value1 = undefined;
 
-    customElements.define('attr-test-3', MyElement);
+      @attr()
+      accessor value2 = null;
 
-    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
+      @attr()
+      accessor value3 = '';
+    }
+
+    const el = await fixture<MyElement>(html`<attr-test-2></attr-test-2>`);
 
     expect(el.hasAttribute('value1')).to.be.false;
     expect(el.hasAttribute('value2')).to.be.false;
@@ -40,16 +55,24 @@ describe('@attr()', () => {
   });
 
   it('should update attributes when props are changed', async () => {
+    @element({
+      tagName: 'attr-test-3'
+    })
     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
-    }
+      @attr()
+      accessor value1 = 'hello'; // no attribute
 
-    customElements.define('attr-test-4', MyElement);
+      @attr()
+      accessor value2 = 0; // number
 
-    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
+      @attr()
+      accessor value3 = true; // boolean
+
+      @attr()
+      accessor value4 = false; // boolean
+    }
+
+    const el = await fixture<MyElement>(html`<attr-test-3></attr-test-3>`);
 
     el.value1 = 'world';
     el.value2 = 100;
@@ -61,4 +84,30 @@ describe('@attr()', () => {
     expect(el.hasAttribute('value3')).to.be.false;
     expect(el.hasAttribute('value4')).to.be.true;
   });
+
+  it('should normalize attribute names', async () => {
+    const value3 = Symbol('Value from SYMBOL');
+
+    @element({
+      tagName: 'attr-test-4'
+    })
+    class MyElement extends HTMLElement {
+      @attr()
+      accessor Value1 = 'hello';
+
+      @attr()
+      accessor ['Value 2'] = 0;
+
+      @attr()
+      accessor [value3] = true;
+    }
+
+    const el = await fixture<MyElement>(html`<attr-test-4></attr-test-4>`);
+
+    expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
+      'value1',
+      'value-2',
+      'value-from-symbol'
+    ]);
+  });
 });

package/src/lib/attr.ts

@@ -1,46 +1,65 @@
 import { metadataStore } from './metadata.js';
 
-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(name);
-
-  return {
-    set(value: unknown) {
-      if (value === true) {
-        this.setAttribute(name, '');
-      } else if (value === false) {
-        this.removeAttribute(name);
-      } else {
-        this.setAttribute(name, String(value));
-      }
+export function attr() {
+  return <This extends HTMLElement>(
+    { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
+    ctx: ClassAccessorDecoratorContext<This>
+  ): ClassAccessorDecoratorResult<This, any> => {
+    const attrName = parseAttrName(ctx.name);
+    const meta = metadataStore.read(ctx.metadata);
 
-      set.call(this, value);
-    },
-    get() {
-      const ogValue = get.call(this);
-      const attr = this.getAttribute(name);
+    meta.attrs.push({ propName: ctx.name, attrName });
 
-      if (attr !== null) {
-        // treat as boolean
-        if (attr === '') {
-          return true;
+    return {
+      set(value: unknown) {
+        if (value === true) {
+          this.setAttribute(attrName, '');
+        } else if (value === false) {
+          this.removeAttribute(attrName);
+        } else {
+          this.setAttribute(attrName, String(value));
         }
 
-        // treat as number
-        if (typeof ogValue === 'number') {
-          return Number(attr);
+        set.call(this, value);
+      },
+      get() {
+        const ogValue = get.call(this);
+        const attr = this.getAttribute(attrName);
+
+        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;
         }
 
-        // treat as string
-        return attr;
+        // no readable value return original
+        return ogValue;
       }
+    };
+  };
+}
+
+function parseAttrName(val: string | symbol): string {
+  let value: string;
 
-      // no readable value return original
-      return ogValue;
+  if (typeof val === 'symbol') {
+    if (val.description) {
+      value = val.description;
+    } else {
+      throw new Error('Cannot handle Symbol property without description');
     }
-  };
+  } else {
+    value = val;
+  }
+
+  return value.toLowerCase().replaceAll(' ', '-');
 }

package/src/lib/element.test.ts

@@ -2,17 +2,21 @@ 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
+    @element({
+      tagName: 'element-1'
+    })
     class MyElement extends HTMLElement {
-      @tagName static tag = 'element-1';
+      @attr()
+      accessor value1 = 'hello'; // no attribute
 
-      @attr accessor value1 = 'hello'; // no attribute
-      @attr accessor value2 = 0; // number
-      @attr accessor value3 = true; // boolean
+      @attr()
+      accessor value2 = 0; // number
+
+      @attr()
+      accessor value3 = true; // boolean
     }
 
     const el = await fixture<MyElement>(html`<element-1></element-1>`);
@@ -21,4 +25,26 @@ describe('@element()', () => {
     expect(el.getAttribute('value2')).to.equal('0');
     expect(el.getAttribute('value3')).to.equal('');
   });
+
+  it('should register attributes', async () => {
+    @element({
+      tagName: 'element-2'
+    })
+    class MyElement extends HTMLElement {
+      @attr()
+      accessor value1 = 'hello'; // no attribute
+
+      @attr()
+      accessor value2 = 0; // number
+
+      @attr()
+      accessor value3 = true; // boolean
+    }
+
+    expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
+      'value1',
+      'value2',
+      'value3'
+    ]);
+  });
 });

package/src/lib/element.ts

@@ -1,55 +1,60 @@
 import { metadataStore } from './metadata.js';
 
-export function element<Target extends CustomElementConstructor>(
-  Base: Target,
-  ctx: ClassDecoratorContext<Target>
-) {
-  const meta = metadataStore.read(ctx.metadata);
-
-  ctx.addInitializer(function (this: Target) {
-    if (meta.tagName) {
-      const val = meta.tagName(this);
-
-      if (!customElements.get(val)) {
-        customElements.define(val, this);
+export interface ElementOpts {
+  tagName?: string;
+}
+
+export function element(opts?: ElementOpts) {
+  return <Target extends CustomElementConstructor>(
+    Base: Target,
+    ctx: ClassDecoratorContext<Target>
+  ) => {
+    const meta = metadataStore.read(ctx.metadata);
+
+    ctx.addInitializer(function (this: Target) {
+      if (opts?.tagName) {
+        if (!customElements.get(opts.tagName)) {
+          customElements.define(opts.tagName, this);
+        }
       }
-    }
-  });
+    });
+
+    return class JoistElement extends Base {
+      // make all attrs observable
+      static observedAttributes = meta.attrs.map(({ attrName }) => attrName);
 
-  return class JoistElement extends Base {
-    // make all attrs observable
-    static observedAttributes = [...meta.attrs];
-    constructor(...args: any[]) {
-      super(...args);
+      constructor(...args: any[]) {
+        super(...args);
 
-      const root = this.shadowRoot || this;
+        const root = this.shadowRoot || this;
 
-      for (let [event, listener] of meta.listeners) {
-        root.addEventListener(event, listener.bind(this));
+        for (let [event, listener] of meta.listeners) {
+          root.addEventListener(event, listener.bind(this));
+        }
       }
-    }
-
-    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, '');
+
+      connectedCallback() {
+        for (let { propName, attrName } of meta.attrs) {
+          const value = Reflect.get(this, propName);
+
+          // reflect values back to attributes
+          if (value !== null && value !== undefined && value !== '') {
+            if (typeof value === 'boolean') {
+              if (value === true) {
+                // set boolean attribute
+                this.setAttribute(attrName, '');
+              }
+            } else {
+              // set key/value attribute
+              this.setAttribute(attrName, String(value));
             }
-          } else {
-            // set key/value attribute
-            this.setAttribute(attr, String(value));
           }
         }
-      }
 
-      if (super.connectedCallback) {
-        super.connectedCallback();
+        if (super.connectedCallback) {
+          super.connectedCallback();
+        }
       }
-    }
+    };
   };
 }

package/src/lib/metadata.ts

@@ -1,8 +1,12 @@
 (Symbol as any).metadata ??= Symbol('Symbol.metadata');
 
+export interface AttrDef {
+  propName: string | symbol;
+  attrName: string;
+}
+
 export class ElementMetadata {
-  attrs: string[] = [];
-  tagName?: (val: any) => string;
+  attrs: AttrDef[] = [];
   listeners = new Map<string, (e: Event) => void>();
 }
 

package/src/lib.ts

@@ -3,5 +3,4 @@ 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.d.ts

@@ -1 +1 @@
-export declare function attr<This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>): ClassAccessorDecoratorResult<This, any>;
+export declare function attr(): <This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>) => ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -1,35 +1,52 @@
 import { metadataStore } from './metadata.js';
-export function attr({ get, set }, ctx) {
-    const name = String(ctx.name);
-    const meta = metadataStore.read(ctx.metadata);
-    meta.attrs.push(name);
-    return {
-        set(value) {
-            if (value === true) {
-                this.setAttribute(name, '');
-            }
-            else if (value === false) {
-                this.removeAttribute(name);
-            }
-            else {
-                this.setAttribute(name, String(value));
-            }
-            set.call(this, value);
-        },
-        get() {
-            const ogValue = get.call(this);
-            const attr = this.getAttribute(name);
-            if (attr !== null) {
-                if (attr === '') {
-                    return true;
+export function attr() {
+    return ({ get, set }, ctx) => {
+        const attrName = parseAttrName(ctx.name);
+        const meta = metadataStore.read(ctx.metadata);
+        meta.attrs.push({ propName: ctx.name, attrName });
+        return {
+            set(value) {
+                if (value === true) {
+                    this.setAttribute(attrName, '');
+                }
+                else if (value === false) {
+                    this.removeAttribute(attrName);
+                }
+                else {
+                    this.setAttribute(attrName, String(value));
                 }
-                if (typeof ogValue === 'number') {
-                    return Number(attr);
+                set.call(this, value);
+            },
+            get() {
+                const ogValue = get.call(this);
+                const attr = this.getAttribute(attrName);
+                if (attr !== null) {
+                    if (attr === '') {
+                        return true;
+                    }
+                    if (typeof ogValue === 'number') {
+                        return Number(attr);
+                    }
+                    return attr;
                 }
-                return attr;
+                return ogValue;
             }
-            return ogValue;
-        }
+        };
     };
 }
+function parseAttrName(val) {
+    let value;
+    if (typeof val === 'symbol') {
+        if (val.description) {
+            value = val.description;
+        }
+        else {
+            throw new Error('Cannot handle Symbol property without description');
+        }
+    }
+    else {
+        value = val;
+    }
+    return value.toLowerCase().replaceAll(' ', '-');
+}
 //# 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":"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"}
+{"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;IAClB,OAAO,CACL,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC,EACC,EAAE;QAC3C,MAAM,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QAElD,OAAO;YACL,GAAG,CAAC,KAAc;gBAChB,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAClC,CAAC;qBAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;oBAC3B,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YACxB,CAAC;YACD,GAAG;gBACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,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;gBAGD,OAAO,OAAO,CAAC;YACjB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,GAAoB;IACzC,IAAI,KAAa,CAAC;IAElB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QAC5B,IAAI,GAAG,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,GAAG,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClD,CAAC"}

package/target/lib/attr.test.js

@@ -1,9 +1,16 @@
-import { __esDecorate, __runInitializers } from "tslib";
+import { __esDecorate, __propKey, __runInitializers } from "tslib";
 import { expect, fixture, html } from '@open-wc/testing';
 import { attr } from './attr.js';
+import { element } from './element.js';
 describe('@attr()', () => {
     it('should read and parse the correct values', async () => {
         let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'attr-test-1'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
             let _classSuper = HTMLElement;
             let _value1_decorators;
             let _value1_initializers = [];
@@ -17,18 +24,22 @@ describe('@attr()', () => {
             let _value4_decorators;
             let _value4_initializers = [];
             let _value4_extraInitializers = [];
-            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;
-                    _value1_decorators = [attr];
-                    _value2_decorators = [attr];
-                    _value3_decorators = [attr];
-                    _value4_decorators = [attr];
+                    _value1_decorators = [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, _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 });
+                    __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, _classExtraInitializers);
                 }
                 #value1_accessor_storage = __runInitializers(this, _value1_initializers, 100);
                 get value1() { return this.#value1_accessor_storage; }
@@ -47,9 +58,9 @@ describe('@attr()', () => {
                     __runInitializers(this, _value4_extraInitializers);
                 }
             };
+            return MyElement = _classThis;
         })();
-        customElements.define('attr-test-2', MyElement);
-        const el = await fixture(html `<attr-test-2 value2="2" value3 value4="world"></attr-test-2>`);
+        const el = await fixture(html `<attr-test-1 value2="2" value3 value4="world"></attr-test-1>`);
         expect(el.value1).to.equal(100);
         expect(el.value2).to.equal(2);
         expect(el.value3).to.equal(true);
@@ -57,6 +68,12 @@ describe('@attr()', () => {
     });
     it('should not write falsy props to attributes', async () => {
         let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'attr-test-2'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
             let _classSuper = HTMLElement;
             let _value1_decorators;
             let _value1_initializers = [];
@@ -67,16 +84,20 @@ describe('@attr()', () => {
             let _value3_decorators;
             let _value3_initializers = [];
             let _value3_extraInitializers = [];
-            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;
-                    _value1_decorators = [attr];
-                    _value2_decorators = [attr];
-                    _value3_decorators = [attr];
+                    _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, _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 });
+                    __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, _classExtraInitializers);
                 }
                 #value1_accessor_storage = __runInitializers(this, _value1_initializers, undefined);
                 get value1() { return this.#value1_accessor_storage; }
@@ -92,15 +113,21 @@ describe('@attr()', () => {
                     __runInitializers(this, _value3_extraInitializers);
                 }
             };
+            return MyElement = _classThis;
         })();
-        customElements.define('attr-test-3', MyElement);
-        const el = await fixture(html `<attr-test-3></attr-test-3>`);
+        const el = await fixture(html `<attr-test-2></attr-test-2>`);
         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 () => {
         let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'attr-test-3'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
             let _classSuper = HTMLElement;
             let _value1_decorators;
             let _value1_initializers = [];
@@ -114,18 +141,22 @@ describe('@attr()', () => {
             let _value4_decorators;
             let _value4_initializers = [];
             let _value4_extraInitializers = [];
-            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;
-                    _value1_decorators = [attr];
-                    _value2_decorators = [attr];
-                    _value3_decorators = [attr];
-                    _value4_decorators = [attr];
+                    _value1_decorators = [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, _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 });
+                    __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, _classExtraInitializers);
                 }
                 #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
                 get value1() { return this.#value1_accessor_storage; }
@@ -144,9 +175,9 @@ describe('@attr()', () => {
                     __runInitializers(this, _value4_extraInitializers);
                 }
             };
+            return MyElement = _classThis;
         })();
-        customElements.define('attr-test-4', MyElement);
-        const el = await fixture(html `<attr-test-4></attr-test-4>`);
+        const el = await fixture(html `<attr-test-3></attr-test-3>`);
         el.value1 = 'world';
         el.value2 = 100;
         el.value3 = false;
@@ -156,5 +187,60 @@ describe('@attr()', () => {
         expect(el.hasAttribute('value3')).to.be.false;
         expect(el.hasAttribute('value4')).to.be.true;
     });
+    it('should normalize attribute names', async () => {
+        const value3 = Symbol('Value from SYMBOL');
+        let MyElement = (() => {
+            var _a;
+            let _classDecorators = [element({
+                    tagName: 'attr-test-4'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            let _Value1_decorators;
+            let _Value1_initializers = [];
+            let _Value1_extraInitializers = [];
+            let _member_decorators;
+            let _member_initializers = [];
+            let _member_extraInitializers = [];
+            let _member_decorators_1;
+            let _member_initializers_1 = [];
+            let _member_extraInitializers_1 = [];
+            var MyElement = class extends _classSuper {
+                static { _classThis = this; }
+                static {
+                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                    __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, _member_decorators, { kind: "accessor", name: 'Value 2', static: false, private: false, access: { has: obj => 'Value 2' in obj, get: obj => obj['Value 2'], set: (obj, value) => { obj['Value 2'] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
+                    __esDecorate(this, null, _member_decorators_1, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers_1, _member_extraInitializers_1);
+                    __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, _classExtraInitializers);
+                }
+                #Value1_accessor_storage = __runInitializers(this, _Value1_initializers, 'hello');
+                get Value1() { return this.#Value1_accessor_storage; }
+                set Value1(value) { this.#Value1_accessor_storage = value; }
+                #_a_accessor_storage = (__runInitializers(this, _Value1_extraInitializers), __runInitializers(this, _member_initializers, 0));
+                get ['Value 2']() { return this.#_a_accessor_storage; }
+                set ['Value 2'](value) { this.#_a_accessor_storage = value; }
+                #_b_accessor_storage = (__runInitializers(this, _member_extraInitializers), __runInitializers(this, _member_initializers_1, true));
+                get [(_Value1_decorators = [attr()], _member_decorators = [attr()], _member_decorators_1 = [attr()], _a = __propKey(value3))]() { return this.#_b_accessor_storage; }
+                set [_a](value) { this.#_b_accessor_storage = value; }
+                constructor() {
+                    super(...arguments);
+                    __runInitializers(this, _member_extraInitializers_1);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        const el = await fixture(html `<attr-test-4></attr-test-4>`);
+        expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
+            'value1',
+            'value-2',
+            'value-from-symbol'
+        ]);
+    });
 });
 //# sourceMappingURL=attr.test.js.map

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":";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;AAEvC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;YAIlD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,aAAa;iBACvB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBARP,uKAAS,MAAM,6BAAN,MAAM,uFAAO;oBAGtB,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;oBAGxB,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAX5B,6KAYC;;;oBAZK,uDAAS;;gBAEb,yEAAkB,GAAG,EAAC;gBAAtB,IAAS,MAAM,4CAAO;gBAAtB,IAAS,MAAM,kDAAO;gBAGtB,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,KAAK,GAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;gBAGxB,8HAAkB,OAAO,GAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;;;;;;;;QAG5B,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;YAIpD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,aAAa;iBACvB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAa;oBAG5B,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBAGvB,uKAAS,MAAM,6BAAN,MAAM,uFAAM;oBARvB,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,SAAS,EAAC;gBAA5B,IAAS,MAAM,4CAAa;gBAA5B,IAAS,MAAM,kDAAa;gBAG5B,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;gBAGvB,8HAAkB,EAAE,GAAC;gBAArB,IAAS,MAAM,4CAAM;gBAArB,IAAS,MAAM,kDAAM;;;;;;;;QAGvB,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;YAIzD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,aAAa;iBACvB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBARP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBAGvB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;oBAX1B,6KAYC;;;oBAZK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;gBAGvB,8HAAkB,KAAK,GAAC;gBAAxB,IAAS,MAAM,4CAAS;gBAAxB,IAAS,MAAM,kDAAS;;;;;;;;QAG1B,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;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,MAAM,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAKrC,SAAS;;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,aAAa;iBACvB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;oBAEjC,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,iTAAyB;oBAGzB,2RAAyB;oBAR3B,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,0HAAuB,CAAC,GAAC;gBAAzB,IAAS,CAAC,SAAS,CAAC,wCAAK;gBAAzB,IAAS,CAAC,SAAS,CAAC,8CAAK;gBAGzB,4HAAoB,IAAI,GAAC;gBAAzB,IAAS,wBAPR,IAAI,EAAE,yBAGN,IAAI,EAAE,2BAGN,IAAI,EAAE,kBACG,MAAM,GAAC,wCAAQ;gBAAzB,IAAS,IAAQ,8CAAQ;;;;;;;;QAG3B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAEvE,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YAChE,QAAQ;YACR,SAAS;YACT,mBAAmB;SACpB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/element.d.ts

@@ -1,4 +1,7 @@
-export declare function element<Target extends CustomElementConstructor>(Base: Target, ctx: ClassDecoratorContext<Target>): {
+export interface ElementOpts {
+    tagName?: string;
+}
+export declare function element(opts?: ElementOpts): <Target extends CustomElementConstructor>(Base: Target, ctx: ClassDecoratorContext<Target>) => {
     new (...args: any[]): {
         connectedCallback(): void;
         accessKey: string;

package/target/lib/element.js

@@ -1,41 +1,42 @@
 import { metadataStore } from './metadata.js';
-export function element(Base, 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);
+export function element(opts) {
+    return (Base, ctx) => {
+        const meta = metadataStore.read(ctx.metadata);
+        ctx.addInitializer(function () {
+            if (opts?.tagName) {
+                if (!customElements.get(opts.tagName)) {
+                    customElements.define(opts.tagName, this);
+                }
             }
-        }
-    });
-    return class JoistElement extends Base {
-        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));
+        });
+        return class JoistElement extends Base {
+            static observedAttributes = meta.attrs.map(({ attrName }) => attrName);
+            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 meta.attrs) {
-                const value = Reflect.get(this, attr);
-                if (value !== null && value !== undefined && value !== '') {
-                    if (typeof value === 'boolean') {
-                        if (value === true) {
-                            this.setAttribute(attr, '');
+            connectedCallback() {
+                for (let { propName, attrName } of meta.attrs) {
+                    const value = Reflect.get(this, propName);
+                    if (value !== null && value !== undefined && value !== '') {
+                        if (typeof value === 'boolean') {
+                            if (value === true) {
+                                this.setAttribute(attrName, '');
+                            }
+                        }
+                        else {
+                            this.setAttribute(attrName, String(value));
                         }
-                    }
-                    else {
-                        this.setAttribute(attr, String(value));
                     }
                 }
+                if (super.connectedCallback) {
+                    super.connectedCallback();
+                }
             }
-            if (super.connectedCallback) {
-                super.connectedCallback();
-            }
-        }
+        };
     };
 }
 //# sourceMappingURL=element.js.map

package/target/lib/element.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/lib/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAM9C,MAAM,UAAU,OAAO,CAAC,IAAkB;IACxC,OAAO,CACL,IAAY,EACZ,GAAkC,EAClC,EAAE;QACF,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAE9C,GAAG,CAAC,cAAc,CAAC;YACjB,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;oBACtC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,YAAa,SAAQ,IAAI;YAEpC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;YAEvE,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC;gBAErC,KAAK,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC7C,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAED,iBAAiB;gBACf,KAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;oBAG1C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;wBAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;4BAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gCAEnB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;4BAClC,CAAC;wBACH,CAAC;6BAAM,CAAC;4BAEN,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;wBAC7C,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;oBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/element.test.js

@@ -2,18 +2,16 @@ 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 _classDecorators = [element({
+                    tagName: 'element-1'
+                })];
             let _classDescriptor;
             let _classExtraInitializers = [];
             let _classThis;
             let _classSuper = HTMLElement;
-            let _static_tag_decorators;
-            let _static_tag_initializers = [];
-            let _static_tag_extraInitializers = [];
             let _value1_decorators;
             let _value1_initializers = [];
             let _value1_extraInitializers = [];
@@ -27,19 +25,17 @@ describe('@element()', () => {
                 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];
+                    _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, _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, _classExtraInitializers);
                 }
-                static tag = __runInitializers(_classThis, _static_tag_initializers, 'element-1');
                 #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
                 get value1() { return this.#value1_accessor_storage; }
                 set value1(value) { this.#value1_accessor_storage = value; }
@@ -53,10 +49,6 @@ describe('@element()', () => {
                     super(...arguments);
                     __runInitializers(this, _value3_extraInitializers);
                 }
-                static {
-                    __runInitializers(_classThis, _static_tag_extraInitializers);
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
             };
             return MyElement = _classThis;
         })();
@@ -65,5 +57,60 @@ describe('@element()', () => {
         expect(el.getAttribute('value2')).to.equal('0');
         expect(el.getAttribute('value3')).to.equal('');
     });
+    it('should register attributes', async () => {
+        let MyElement = (() => {
+            let _classDecorators = [element({
+                    tagName: 'element-2'
+                })];
+            let _classDescriptor;
+            let _classExtraInitializers = [];
+            let _classThis;
+            let _classSuper = HTMLElement;
+            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 {
+                    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, _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, _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, _classExtraInitializers);
+                }
+                #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, _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, _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);
+                }
+            };
+            return MyElement = _classThis;
+        })();
+        expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
+            'value1',
+            'value2',
+            'value3'
+        ]);
+    });
 });
 //# sourceMappingURL=element.test.js.map

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,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"}
+{"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;AAEvC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;YAIjD,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,WAAW;iBACrB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBARzB,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;;;;;;QAGzB,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;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;YAIpC,SAAS;oCAHd,OAAO,CAAC;oBACP,OAAO,EAAE,WAAW;iBACrB,CAAC;;;;8BACsB,WAAW;;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;0CAChC,IAAI,EAAE;0CAGN,IAAI,EAAE;0CAGN,IAAI,EAAE;oBALP,uKAAS,MAAM,6BAAN,MAAM,uFAAW;oBAG1B,uKAAS,MAAM,6BAAN,MAAM,uFAAK;oBAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;oBARzB,6KASC;;;oBATK,uDAAS;;gBAEb,yEAAkB,OAAO,EAAC;gBAA1B,IAAS,MAAM,4CAAW;gBAA1B,IAAS,MAAM,kDAAW;gBAG1B,8HAAkB,CAAC,GAAC;gBAApB,IAAS,MAAM,4CAAK;gBAApB,IAAS,MAAM,kDAAK;gBAGpB,8HAAkB,IAAI,GAAC;gBAAvB,IAAS,MAAM,4CAAQ;gBAAvB,IAAS,MAAM,kDAAQ;;;;;;;;QAGzB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YACjE,QAAQ;YACR,QAAQ;YACR,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/metadata.d.ts

@@ -1,6 +1,9 @@
+export interface AttrDef {
+    propName: string | symbol;
+    attrName: string;
+}
 export declare class ElementMetadata {
-    attrs: string[];
-    tagName?: (val: any) => string;
+    attrs: AttrDef[];
     listeners: Map<string, (e: Event) => void>;
 }
 export declare class MetadataStore extends WeakMap<object, ElementMetadata> {

package/target/lib/metadata.js

@@ -1,7 +1,6 @@
 Symbol.metadata ??= Symbol('Symbol.metadata');
 export class ElementMetadata {
     attrs = [];
-    tagName;
     listeners = new Map();
 }
 export class MetadataStore extends WeakMap {

package/target/lib/metadata.js.map

@@ -1 +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"}
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../src/lib/metadata.ts"],"names":[],"mappings":"AAAC,MAAc,CAAC,QAAQ,KAAK,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAOvD,MAAM,OAAO,eAAe;IAC1B,KAAK,GAAc,EAAE,CAAC;IACtB,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.d.ts

@@ -3,5 +3,4 @@ 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.js

@@ -3,6 +3,5 @@ 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';
 //# 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;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,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,kBAAkB,CAAC"}

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

@@ -1,13 +0,0 @@
-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

@@ -1,10 +0,0 @@
-import { metadataStore } from './metadata.js';
-
-export function tagName<This extends typeof HTMLElement>(
-  _val: unknown,
-  ctx: ClassFieldDecoratorContext<This, string>
-) {
-  const metadata = metadataStore.read(ctx.metadata);
-
-  metadata.tagName = ctx.access.get;
-}

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

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

package/target/lib/tag-name.js

@@ -1,6 +0,0 @@
-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 +0,0 @@
-{"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.d.ts

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

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

@@ -1,36 +0,0 @@
-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 _static_tagName_decorators;
-            let _static_tagName_initializers = [];
-            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, _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);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        return customElements.whenDefined(MyElement.tagName);
-    });
-});
-//# sourceMappingURL=tag-name.test.js.map

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

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