@joist/element 4.0.0-next.2 → 4.0.0-next.4

package/README.md

@@ -11,30 +11,28 @@ npm i @joist/element
 #### Example:
 
 ```TS
-import { tagName, shadow, css, html, attr, listen, element } from '@joist/element';
+import { tagName, css, html, attr, listen, element } from '@joist/element';
 
 @element({
-  tagName: 'my-element'
+  tagName: 'my-element',
+  shadow: [
+    css`
+      :host {
+        display: block;
+        color: red;
+      }
+    `,
+    html`
+      <slot></slot>
+    `
+  ]
 })
 export class MyElement extends HTMLElement {
-  // apply styles to shadow dom
-  @shadow styles = css`
-    :host {
-      display: block;
-      color: red;
-    }
-  `;
+  @attr()
+  accessor value = 0;
 
-  // apply html to shadow dom
-  @shadow template = html`
-    <slot></slot>
-  `;
-
-  // define attributes
-  @attr() accessor value = 0;
-
-  // listen for events
-  @listen('click') onClick() {
+  @listen('click')
+  onClick() {
     console.log('clicked!')
   }
 }

package/package.json

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

package/src/lib/attr.test.ts

@@ -110,4 +110,20 @@ describe('@attr()', () => {
       'value-from-symbol'
     ]);
   });
+
+  it('should throw an error for symbols with no description', async () => {
+    expect(() => {
+      const value = Symbol();
+
+      @element({
+        tagName: 'attr-test-4'
+      })
+      class MyElement extends HTMLElement {
+        @attr()
+        accessor [value] = true;
+      }
+
+      new MyElement();
+    }).to.throw('Cannot handle Symbol property without description');
+  });
 });

package/src/lib/attr.ts

@@ -1,14 +1,22 @@
 import { metadataStore } from './metadata.js';
 
-export function attr() {
-  return <This extends HTMLElement>(
+export interface AttrOpts {
+  observe?: boolean;
+}
+
+export function attr(opts?: AttrOpts) {
+  return function attrDecorator<This extends HTMLElement>(
     { get, set }: ClassAccessorDecoratorTarget<This, unknown>,
     ctx: ClassAccessorDecoratorContext<This>
-  ): ClassAccessorDecoratorResult<This, any> => {
+  ): ClassAccessorDecoratorResult<This, any> {
     const attrName = parseAttrName(ctx.name);
     const meta = metadataStore.read(ctx.metadata);
 
-    meta.attrs.push({ propName: ctx.name, attrName });
+    meta.attrs.push({
+      propName: ctx.name,
+      attrName,
+      observe: opts?.observe ?? true
+    });
 
     return {
       set(value: unknown) {

package/src/lib/element.test.ts

@@ -1,7 +1,8 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html as litHtml } from '@open-wc/testing';
 
 import { attr } from './attr.js';
 import { element } from './element.js';
+import { css, html } from './tags.js';
 
 describe('@element()', () => {
   it('should write default value to attribute', async () => {
@@ -19,7 +20,7 @@ describe('@element()', () => {
       accessor value3 = true; // boolean
     }
 
-    const el = await fixture<MyElement>(html`<element-1></element-1>`);
+    const el = await fixture<MyElement>(litHtml`<element-1></element-1>`);
 
     expect(el.getAttribute('value1')).to.equal('hello');
     expect(el.getAttribute('value2')).to.equal('0');
@@ -39,6 +40,9 @@ describe('@element()', () => {
 
       @attr()
       accessor value3 = true; // boolean
+
+      @attr({ observe: false }) // should be filtered out
+      accessor value4 = 'hello world';
     }
 
     expect(Reflect.get(MyElement, 'observedAttributes')).to.deep.equal([
@@ -47,4 +51,43 @@ describe('@element()', () => {
       'value3'
     ]);
   });
+
+  it('should attach shadow root when the shadow property exists', async () => {
+    @element({
+      tagName: 'element-3',
+      shadow: []
+    })
+    class MyElement extends HTMLElement {}
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot).to.be.instanceOf(ShadowRoot);
+  });
+
+  it('should apply html and css', async () => {
+    @element({
+      tagName: 'element-4',
+      shadow: [
+        css`
+          :host {
+            display: contents;
+          }
+        `,
+        html`<slot></slot>`,
+        (el) => {
+          const div = document.createElement('div');
+          div.innerHTML = 'hello world';
+
+          el.append(div);
+        }
+      ]
+    })
+    class MyElement extends HTMLElement {}
+
+    const el = new MyElement();
+
+    expect(el.shadowRoot!.adoptedStyleSheets.length).to.equal(1);
+    expect(el.shadowRoot!.innerHTML).to.equal(`<slot></slot>`);
+    expect(el.innerHTML).to.equal(`<div>hello world</div>`);
+  });
 });

package/src/lib/element.ts

@@ -1,14 +1,20 @@
-import { metadataStore } from './metadata.js';
+import { AttrDef, metadataStore } from './metadata.js';
+import { ShadowResult } from './result.js';
 
-export interface ElementOpts {
+export interface ElementOpts<T> {
   tagName?: string;
+  shadow?: Array<ShadowResult | ((el: T) => void)>;
 }
 
-export function element(opts?: ElementOpts) {
-  return <Target extends CustomElementConstructor>(
-    Base: Target,
-    ctx: ClassDecoratorContext<Target>
-  ) => {
+export const LifeCycle = {
+  onInit: Symbol('onInit')
+};
+
+export function element<
+  Target extends CustomElementConstructor,
+  Instance extends InstanceType<Target>
+>(opts?: ElementOpts<Instance>) {
+  return function elementDecorator(Base: Target, ctx: ClassDecoratorContext<Target>) {
     const meta = metadataStore.read(ctx.metadata);
 
     ctx.addInitializer(function (this: Target) {
@@ -20,41 +26,68 @@ export function element(opts?: ElementOpts) {
     });
 
     return class JoistElement extends Base {
-      // make all attrs observable
-      static observedAttributes = meta.attrs.map(({ attrName }) => attrName);
+      static observedAttributes = meta.attrs
+        .filter(({ observe }) => observe) // filter out attributes that are not to be observed
+        .map(({ attrName }) => attrName);
 
       constructor(...args: any[]) {
         super(...args);
 
-        const root = this.shadowRoot || this;
-
-        for (let [event, listener] of meta.listeners) {
-          root.addEventListener(event, listener.bind(this));
-        }
-      }
+        if (opts?.shadow) {
+          if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+          }
 
-      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, '');
-              }
+          for (let res of opts.shadow) {
+            if (typeof res === 'function') {
+              res(this as unknown as Instance);
             } else {
-              // set key/value attribute
-              this.setAttribute(attrName, String(value));
+              res.run(this);
             }
           }
         }
 
-        if (super.connectedCallback) {
-          super.connectedCallback();
+        for (let [event, { cb, root }] of meta.listeners) {
+          root(this).addEventListener(event, cb.bind(this));
+        }
+
+        if (LifeCycle.onInit in this) {
+          const onInit = Reflect.get(this, LifeCycle.onInit);
+
+          if (typeof onInit === 'function') {
+            onInit();
+          }
+        }
+      }
+
+      connectedCallback() {
+        if (this.isConnected) {
+          reflectAttributeValues(this, meta.attrs);
+
+          if (super.connectedCallback) {
+            super.connectedCallback();
+          }
         }
       }
     };
   };
 }
+
+function reflectAttributeValues(el: HTMLElement, attrs: AttrDef[]) {
+  for (let { propName, attrName } of attrs) {
+    const value = Reflect.get(el, propName);
+
+    // reflect values back to attributes
+    if (value !== null && value !== undefined && value !== '') {
+      if (typeof value === 'boolean') {
+        if (value === true) {
+          // set boolean attribute
+          el.setAttribute(attrName, '');
+        }
+      } else {
+        // set key/value attribute
+        el.setAttribute(attrName, String(value));
+      }
+    }
+  }
+}

package/src/lib/listen.ts

@@ -1,9 +1,15 @@
-import { metadataStore } from './metadata.js';
+import { ListenerRootSelector, metadataStore } from './metadata.js';
 
-export function listen<This extends HTMLElement>(event: string) {
-  return (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => {
+export function listen<This extends HTMLElement>(event: string, root?: ListenerRootSelector) {
+  return function listenDecorator(
+    value: (e: Event) => void,
+    ctx: ClassMethodDecoratorContext<This>
+  ) {
     const metadata = metadataStore.read(ctx.metadata);
 
-    metadata.listeners.set(event, value);
+    metadata.listeners.set(event, {
+      cb: value,
+      root: root ?? ((el: HTMLElement) => el.shadowRoot ?? el)
+    });
   };
 }

package/src/lib/metadata.ts

@@ -3,11 +3,14 @@
 export interface AttrDef {
   propName: string | symbol;
   attrName: string;
+  observe: boolean;
 }
 
+export type ListenerRootSelector = (el: HTMLElement) => HTMLElement | ShadowRoot;
+
 export class ElementMetadata {
   attrs: AttrDef[] = [];
-  listeners = new Map<string, (e: Event) => void>();
+  listeners = new Map<string, { cb: (e: Event) => void; root: ListenerRootSelector }>();
 }
 
 export class MetadataStore extends WeakMap<object, ElementMetadata> {

package/src/lib/query.test.ts

@@ -0,0 +1,54 @@
+import { expect } from '@open-wc/testing';
+import { element } from './element.js';
+import { query } from './query.js';
+import { html } from './tags.js';
+
+describe('query', () => {
+  it('should work', () => {
+    @element({
+      tagName: 'query-test-1',
+      shadow: [
+        html`
+          <form>
+            <input id="fname" name="fname" />
+            <input id="lname" name="lname" />
+          </form>
+        `
+      ]
+    })
+    class MyElement extends HTMLElement {
+      fname = query<HTMLInputElement>('#fname');
+      lname = query<HTMLInputElement>('#lname');
+    }
+
+    const el = new MyElement();
+
+    expect(el.fname()).to.equal(el.shadowRoot?.querySelector('#fname'));
+    expect(el.lname()).to.equal(el.shadowRoot?.querySelector('#lname'));
+  });
+
+  it('should patch the selected item', () => {
+    @element({
+      tagName: 'query-test-2',
+      shadow: [
+        html`
+          <form>
+            <input id="fname" name="fname" />
+            <input id="lname" name="lname" />
+          </form>
+        `
+      ]
+    })
+    class MyElement extends HTMLElement {
+      fname = query<HTMLInputElement>('#fname');
+      lname = query<HTMLInputElement>('#lname');
+    }
+
+    const el = new MyElement();
+    el.fname({ value: 'Foo' });
+    el.lname({ value: 'Bar' });
+
+    expect(el.shadowRoot?.querySelector<HTMLInputElement>('#fname')?.value).to.equal('Foo');
+    expect(el.shadowRoot?.querySelector<HTMLInputElement>('#lname')?.value).to.equal('Bar');
+  });
+});

package/src/lib/query.ts

@@ -0,0 +1,37 @@
+type Tags = keyof HTMLElementTagNameMap;
+type SVGTags = keyof SVGElementTagNameMap;
+type MathTags = keyof MathMLElementTagNameMap;
+
+type QueryResult<T> = (updates?: Partial<T>) => T;
+
+export function query<K extends Tags>(selectors: K): QueryResult<HTMLElementTagNameMap[K]>;
+export function query<K extends SVGTags>(selectors: K): QueryResult<SVGElementTagNameMap[K]>;
+export function query<K extends MathTags>(selectors: K): QueryResult<MathMLElementTagNameMap[K]>;
+export function query<E extends Element = Element>(selectors: string): QueryResult<E>;
+export function query<K extends Tags>(query: K): QueryResult<HTMLElementTagNameMap[K]> {
+  let res: HTMLElementTagNameMap[K] | null = null;
+
+  return function (this: HTMLElement, updates?: Partial<HTMLElementTagNameMap[K]>) {
+    if (res) {
+      return res;
+    }
+
+    if (this.shadowRoot) {
+      res = this.shadowRoot.querySelector<K>(query);
+    } else {
+      res = this.querySelector<K>(query);
+    }
+
+    if (!res) {
+      throw new Error('could not find element');
+    }
+
+    if (updates) {
+      for (let update in updates) {
+        Reflect.set(res, update, updates[update]);
+      }
+    }
+
+    return res;
+  };
+}

package/src/lib/result.ts

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

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,6 +1,6 @@
-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 { element } from './lib/element.js';
+export { element, LifeCycle } from './lib/element.js';
+export { query } from './lib/query.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,9 +1,13 @@
 import { metadataStore } from './metadata.js';
-export function attr() {
-    return ({ get, set }, ctx) => {
+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 });
+        meta.attrs.push({
+            propName: ctx.name,
+            attrName,
+            observe: opts?.observe ?? true
+        });
         return {
             set(value) {
                 if (value === true) {

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;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"}
+{"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

@@ -242,5 +242,43 @@ describe('@attr()', () => {
             '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