@joist/element 4.0.0-next.1 → 4.0.0-next.3

package/src/lib/tags.ts

@@ -1,57 +1,9 @@
-/**
- * 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 { JoistShadowResult } from './result.js';
 
-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);
-    }
+export class HTMLResult extends JoistShadowResult {
+  setup(root: ShadowRoot): void {
+    let template = document.createElement('template');
+    template.innerHTML = concat(this.strings);
 
     root.append(template.content.cloneNode(true));
   }
@@ -61,19 +13,10 @@ export function html(strings: TemplateStringsArray, ...values: any[]): HTMLResul
   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));
-    }
+export class CSSResult extends JoistShadowResult {
+  setup(root: ShadowRoot): void {
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync(concat(this.strings));
 
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
   }

package/src/lib.ts

@@ -1,7 +1,5 @@
-export { ShadowResult as TemplateResult } from './lib/result.js';
+export { JoistShadowResult 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.d.ts

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

package/target/lib/attr.js

@@ -1,35 +1,56 @@
 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(opts) {
+    return function attrDecorator({ get, set }, ctx) {
+        const attrName = parseAttrName(ctx.name);
+        const meta = metadataStore.read(ctx.metadata);
+        meta.attrs.push({
+            propName: ctx.name,
+            attrName,
+            observe: opts?.observe ?? true
+        });
+        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;AAM9C,MAAM,UAAU,IAAI,CAAC,IAAe;IAClC,OAAO,SAAS,aAAa,CAC3B,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;QAExC,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;YACd,QAAQ,EAAE,GAAG,CAAC,IAAI;YAClB,QAAQ;YACR,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,IAAI;SAC/B,CAAC,CAAC;QAEH,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,98 @@ 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'
+        ]);
+    });
+    it('should throw an error for symbols with no description', async () => {
+        expect(() => {
+            const value = Symbol();
+            let MyElement = (() => {
+                var _a;
+                let _classDecorators = [element({
+                        tagName: 'attr-test-4'
+                    })];
+                let _classDescriptor;
+                let _classExtraInitializers = [];
+                let _classThis;
+                let _classSuper = HTMLElement;
+                let _member_decorators;
+                let _member_initializers = [];
+                let _member_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;
+                        __esDecorate(this, null, _member_decorators, { 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, _member_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);
+                    }
+                    #_a_accessor_storage = __runInitializers(this, _member_initializers, true);
+                    get [(_member_decorators = [attr()], _a = __propKey(value))]() { return this.#_a_accessor_storage; }
+                    set [_a](value) { this.#_a_accessor_storage = value; }
+                    constructor() {
+                        super(...arguments);
+                        __runInitializers(this, _member_extraInitializers);
+                    }
+                };
+                return MyElement = _classThis;
+            })();
+            new MyElement();
+        }).to.throw('Cannot handle Symbol property without description');
+    });
 });
 //# 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":"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"}

package/target/lib/element.d.ts

@@ -1,4 +1,9 @@
-export declare function element<Target extends CustomElementConstructor>(Base: Target, ctx: ClassDecoratorContext<Target>): {
+import { ShadowResult } from './result.js';
+export interface ElementOpts<T> {
+    tagName?: string;
+    shadow?: Array<ShadowResult | ((el: T) => void)>;
+}
+export declare function element<Target extends CustomElementConstructor, Instance extends InstanceType<Target>>(opts?: ElementOpts<Instance>): (Base: Target, ctx: ClassDecoratorContext<Target>) => {
     new (...args: any[]): {
         connectedCallback(): void;
         accessKey: string;

package/target/lib/element.js

@@ -1,41 +1,57 @@
 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);
-            }
-        }
-    });
-    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));
+export function element(opts) {
+    return function elementDecorator(Base, ctx) {
+        const meta = metadataStore.read(ctx.metadata);
+        ctx.addInitializer(function () {
+            if (opts?.tagName) {
+                if (!customElements.get(opts.tagName)) {
+                    customElements.define(opts.tagName, 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, '');
+        });
+        return class JoistElement extends Base {
+            static observedAttributes = meta.attrs
+                .filter(({ observe }) => observe)
+                .map(({ attrName }) => attrName);
+            constructor(...args) {
+                super(...args);
+                if (opts?.shadow) {
+                    this.attachShadow({ mode: 'open' });
+                    for (let res of opts.shadow) {
+                        if (typeof res === 'function') {
+                            res(this);
+                        }
+                        else {
+                            res.run(this);
                         }
                     }
-                    else {
-                        this.setAttribute(attr, String(value));
-                    }
+                }
+                for (let [event, { cb, root }] of meta.listeners) {
+                    root(this).addEventListener(event, cb.bind(this));
                 }
             }
-            if (super.connectedCallback) {
-                super.connectedCallback();
+            connectedCallback() {
+                reflectAttributeValues(this, meta.attrs);
+                if (super.connectedCallback) {
+                    super.connectedCallback();
+                }
             }
-        }
+        };
     };
 }
+function reflectAttributeValues(el, attrs) {
+    for (let { propName, attrName } of attrs) {
+        const value = Reflect.get(el, propName);
+        if (value !== null && value !== undefined && value !== '') {
+            if (typeof value === 'boolean') {
+                if (value === true) {
+                    el.setAttribute(attrName, '');
+                }
+            }
+            else {
+                el.setAttribute(attrName, String(value));
+            }
+        }
+    }
+}
 //# 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,EAAW,aAAa,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,UAAU,OAAO,CAGrB,IAA4B;IAC5B,OAAO,SAAS,gBAAgB,CAAC,IAAY,EAAE,GAAkC;QAC/E,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;YACpC,MAAM,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK;iBACnC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC;iBAChC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;YAEnC,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBAEf,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;oBACjB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;oBAEpC,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;wBAC5B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;4BAC9B,GAAG,CAAC,IAA2B,CAAC,CAAC;wBACnC,CAAC;6BAAM,CAAC;4BACN,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBAChB,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAED,iBAAiB;gBACf,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEzC,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;oBAC5B,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,sBAAsB,CAAC,EAAe,EAAE,KAAgB;IAC/D,KAAK,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,KAAK,EAAE,CAAC;QACzC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAGxC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAC1D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;oBAEnB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;iBAAM,CAAC;gBAEN,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC"}