Merge pull request #184 from Polymer/export-decorators

Export decorators

Author: Steve Orvell

src/demo/ts-element.ts

@@ -1,11 +1,10 @@
-import { LitElement, html, property } from '../lit-element.js';
+import {html, LitElement, property} from '../lit-element.js';
 
 class TSElement extends LitElement {
 
-  @property()
-  message = 'Hi';
+  @property() message = 'Hi';
 
-  @property({attribute: 'more-info', type: (value: string) => `[${value}]`})
+  @property({attribute : 'more-info', type: (value: string) => `[${value}]`})
   extra = '';
 
   render() {
@@ -18,6 +17,5 @@ class TSElement extends LitElement {
       </style>TSElement says: ${message} ${extra}
     `;
   }
-
 }
 customElements.define('ts-element', TSElement);

src/lib/decorators.ts

@@ -15,6 +15,8 @@
 
 import {LitElement} from '../lit-element.js';
 
+import {PropertyDeclaration, UpdatingElement} from './updating-element.js';
+
 export type Constructor<T> = {
   new (...args: unknown[]): T
 };
@@ -48,6 +50,16 @@ export const customElement = (tagName: keyof HTMLElementTagNameMap) =>
       return clazz as any;
     };
 
+/**
+ * A property decorator which creates a LitElement property which reflects a
+ * corresponding attribute value. A `PropertyDeclaration` may optionally be
+ * supplied to configure property features.
+ */
+export const property = (options?: PropertyDeclaration) => (proto: Object,
+                                                            name: string) => {
+  (proto.constructor as typeof UpdatingElement).createProperty(name, options);
+};
+
 /**
  * A property decorator that converts a class property into a getter that
  * executes a querySelector on the element's renderRoot.

src/lib/updating-element.ts

@@ -11,18 +11,20 @@
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-import {render} from 'lit-html/lib/shady-render';
 import {TemplateResult} from 'lit-html';
-import {UpdatingElement, PropertyValues} from './lib/updating-element.js';
+import {render} from 'lit-html/lib/shady-render';
+
+import {PropertyValues, UpdatingElement} from './lib/updating-element.js';
 
 export * from './lib/updating-element.js';
+export * from './lib/decorators.js';
 export {html, svg} from 'lit-html/lit-html';
 
-
 export abstract class LitElement extends UpdatingElement {
 
   /**
-   * Render method used to render the lit-html TemplateResult to the element's DOM.
+   * Render method used to render the lit-html TemplateResult to the element's
+   * DOM.
    * @param {TemplateResult} Template to render.
    * @param {Element|DocumentFragment} Node into which to render.
    * @param {String} Element name.
@@ -38,7 +40,8 @@ export abstract class LitElement extends UpdatingElement {
   protected update(changedProperties: PropertyValues) {
     super.update(changedProperties);
     if (typeof this.render === 'function') {
-      (this.constructor as typeof LitElement).render(this.render(), this.renderRoot!, this.localName!);
+      (this.constructor as typeof LitElement)
+          .render(this.render(), this.renderRoot!, this.localName!);
     } else {
       throw new Error('render() not implemented');
     }

src/lit-element.ts

@@ -12,9 +12,14 @@
  * http://polymer.github.io/PATENTS.txt
  */
 
-import {customElement, query, queryAll} from '../../lib/decorators.js';
-import {html, LitElement} from '../../lit-element.js';
-import { generateElementName } from '../test-helpers.js';
+import {
+  customElement,
+  html,
+  LitElement,
+  query,
+  queryAll
+} from '../../lit-element.js';
+import {generateElementName} from '../test-helpers.js';
 
 const assert = chai.assert;
 
@@ -73,7 +78,7 @@ suite('decorators', () => {
     test('returns null when no match', async () => {
       const c = new C();
       container.appendChild(c);
-      await Promise.resolve();
+      await c.updateComplete;
       const span = c.nope;
       assert.isNull(span);
     });

src/test/lib/decorators_test.ts

@@ -13,12 +13,17 @@
  */
 
 import '@webcomponents/shadycss/apply-shim.min.js';
+
 import {
   html,
   LitElement,
 } from '../lit-element.js';
 
-import {generateElementName, nextFrame, getComputedStyleValue} from './test-helpers.js';
+import {
+  generateElementName,
+  getComputedStyleValue,
+  nextFrame
+} from './test-helpers.js';
 
 declare global {
   interface Window {
@@ -45,7 +50,8 @@ suite('Styling', () => {
   test('content shadowRoot is styled', async () => {
     const name = generateElementName();
     customElements.define(name, class extends LitElement {
-      render() { return html`
+      render() {
+        return html`
         <style>
           div {
             border: 2px solid blue;
@@ -69,7 +75,8 @@ suite('Styling', () => {
     </style>`;
     const name = generateElementName();
     customElements.define(name, class extends LitElement {
-      render() { return html`
+      render() {
+        return html`
         <style>
           div {
             border: 2px solid blue;
@@ -89,7 +96,8 @@ suite('Styling', () => {
   test('custom properties render', async () => {
     const name = generateElementName();
     customElements.define(name, class extends LitElement {
-      render() { return html`
+      render() {
+        return html`
         <style>
           :host {
             --border: 8px solid red;
@@ -110,7 +118,8 @@ suite('Styling', () => {
 
   test('custom properties flow to nested elements', async () => {
     customElements.define('x-inner', class extends LitElement {
-      render() { return html`
+      render() {
+        return html`
         <style>
           div {
             border: var(--border);
@@ -123,7 +132,8 @@ suite('Styling', () => {
     class E extends LitElement {
       inner: LitElement|null = null;
 
-      render() { return html`
+      render() {
+        return html`
         <style>
           x-inner {
             --border: 8px solid red;
@@ -148,72 +158,76 @@ suite('Styling', () => {
     assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '8px');
   });
 
-  test('elements with custom properties can move between elements', async () => {
-    customElements.define('x-inner1', class extends LitElement {
-      render() { return html`
+  test('elements with custom properties can move between elements',
+       async () => {
+         customElements.define('x-inner1', class extends LitElement {
+           render() {
+             return html`
         <style>
           div {
             border: var(--border);
           }
         </style>
         <div>Testing...</div>`;
-      }
-    });
-    const name1 = generateElementName();
-    customElements.define(name1, class extends LitElement {
-
-      inner: Element|null = null;
-
-      render() { return html`
+           }
+         });
+         const name1 = generateElementName();
+         customElements.define(name1, class extends LitElement {
+           inner: Element|null = null;
+
+           render() {
+             return html`
         <style>
           x-inner1 {
             --border: 2px solid red;
           }
         </style>
         <x-inner1></x-inner1>`;
-      }
-
-      firstUpdated() {
-        this.inner = this.shadowRoot!.querySelector('x-inner1');
-      }
-    });
-    const name2 = generateElementName();
-    customElements.define(name2, class extends LitElement {
-
-      render() { return html`
+           }
+
+           firstUpdated() {
+             this.inner = this.shadowRoot!.querySelector('x-inner1');
+           }
+         });
+         const name2 = generateElementName();
+         customElements.define(name2, class extends LitElement {
+           render() {
+             return html`
         <style>
           x-inner1 {
             --border: 8px solid red;
           }
         </style>`;
-      }
-
-    });
-    const el = document.createElement(name1) as LitElement;
-    const el2 = document.createElement(name2);
-    container.appendChild(el);
-    container.appendChild(el2);
-    let div: Element|null;
-
-    // Workaround for Safari 9 Promise timing bugs.
-    await el.updateComplete;
-
-    await nextFrame();
-    const inner = el.shadowRoot!.querySelector('x-inner1');
-    div = inner!.shadowRoot!.querySelector('div');
-    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '2px');
-    el2!.shadowRoot!.appendChild(inner!);
-
-    // Workaround for Safari 9 Promise timing bugs.
-    await el.updateComplete;
-
-    await nextFrame();
-    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '8px');
-  });
+           }
+         });
+         const el = document.createElement(name1) as LitElement;
+         const el2 = document.createElement(name2);
+         container.appendChild(el);
+         container.appendChild(el2);
+         let div: Element|null;
+
+         // Workaround for Safari 9 Promise timing bugs.
+         await el.updateComplete;
+
+         await nextFrame();
+         const inner = el.shadowRoot!.querySelector('x-inner1');
+         div = inner!.shadowRoot!.querySelector('div');
+         assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
+                      '2px');
+         el2!.shadowRoot!.appendChild(inner!);
+
+         // Workaround for Safari 9 Promise timing bugs.
+         await el.updateComplete;
+
+         await nextFrame();
+         assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
+                      '8px');
+       });
 
   test('@apply renders in nested elements', async () => {
     customElements.define('x-inner2', class extends LitElement {
-      render() { return html`
+      render() {
+        return html`
         <style>
           div {
             @apply --bag;
@@ -225,7 +239,8 @@ suite('Styling', () => {
     const name = generateElementName();
     class E extends LitElement {
       inner: LitElement|null = null;
-      render() { return html`
+      render() {
+        return html`
         <style>
           x-inner2 {
             --bag: {
@@ -248,14 +263,14 @@ suite('Styling', () => {
     await el.updateComplete && await el.inner!.updateComplete;
 
     await nextFrame();
-    const div = el.shadowRoot!.querySelector('x-inner2')!.shadowRoot!.querySelector('div');
-    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '10px');
+    const div = el.shadowRoot!.querySelector(
+                                  'x-inner2')!.shadowRoot!.querySelector('div');
+    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
+                 '10px');
   });
-
 });
 
 suite('ShadyDOM', () => {
-
   let container: HTMLElement;
 
   setup(function() {
@@ -273,28 +288,31 @@ suite('ShadyDOM', () => {
     }
   });
 
-  test('properties in styles render with initial value and cannot be changed', async () => {
-    let border = `6px solid blue`;
-    const name = generateElementName();
-    customElements.define(name, class extends LitElement {
-      render() { return html`
+  test('properties in styles render with initial value and cannot be changed',
+       async () => {
+         let border = `6px solid blue`;
+         const name = generateElementName();
+         customElements.define(name, class extends LitElement {
+           render() {
+             return html`
         <style>
           div {
             border: ${border};
           }
         </style>
         <div>Testing...</div>`;
-      }
-    });
-    const el = document.createElement(name) as LitElement;
-    container.appendChild(el);
-    await el.updateComplete;
-    const div = el.shadowRoot!.querySelector('div');
-    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '6px');
-    border = `4px solid orange`;
-    el.requestUpdate();
-    await el.updateComplete;
-    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '6px');
-  });
-
+           }
+         });
+         const el = document.createElement(name) as LitElement;
+         container.appendChild(el);
+         await el.updateComplete;
+         const div = el.shadowRoot!.querySelector('div');
+         assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
+                      '6px');
+         border = `4px solid orange`;
+         el.requestUpdate();
+         await el.updateComplete;
+         assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
+                      '6px');
+       });
 });