@polymer/lit-element - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

CHANGELOG.md

@@ -15,2 +15,18 @@ # Change Log
 
+<!-- ### Changed -->
+<!-- ### Added -->
+<!-- ### Removed -->
+<!-- ### Fixed -->
+
+## [0.6.2] - 2018-10-05
+
+### Changed
+* LitElement changed to a non-abstract class to be more compatible with the JavaScript mixin pattern
+([#227](https://github.com/Polymer/lit-element/issues/227)).
+* Update lit-html dependency to ^0.12.0 ([#244](https://github.com/Polymer/lit-element/pull/244)).
+* Passes the component's `this` reference to lit-html as the `eventContext`, allowing unbound event listener methods ([#244](https://github.com/Polymer/lit-element/pull/244)).
+### Added
+* A `disconnectedCallback()` method was added to UpdatingElement ([#213](https://github.com/Polymer/lit-element/pull/213)).
+* Added `@eventOptions()` decorator for setting event listener options on methods ([#244](https://github.com/Polymer/lit-element/pull/244)).
+
 ## [0.6.1] - 2018-09-17
@@ -17,0 +33,0 @@

lib/decorators.d.ts

@@ -16,3 +16,3 @@ /**
 export declare type Constructor<T> = {
-    new (...args: unknown[]): T;
+    new (...args: any[]): T;
 };
@@ -55,1 +55,28 @@ /**
 export declare const queryAll: (selector: string) => (proto: any, propName: string) => void;
+/**
+ * Adds event listener options to a method used as an event listener in a
+ * lit-html template.
+ *
+ * @param options An object that specifis event listener options as accepted by
+ * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
+ *
+ * Current browsers support the `capture`, `passive`, and `once` options. See:
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
+ *
+ * @example
+ *
+ *     class MyElement {
+ *
+ *       clicked = false;
+ *
+ *       render() {
+ *         return html`<div @click=${this._onClick}`><button></button></div>`;
+ *       }
+ *
+ *       @eventOptions({capture: true})
+ *       _onClick(e) {
+ *         this.clicked = true;
+ *       }
+ *     }
+ */
+export declare const eventOptions: (options: EventListenerOptions) => (proto: any, name: string) => void;

lib/decorators.js

@@ -74,2 +74,32 @@ /**
 }
+/**
+ * Adds event listener options to a method used as an event listener in a
+ * lit-html template.
+ *
+ * @param options An object that specifis event listener options as accepted by
+ * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
+ *
+ * Current browsers support the `capture`, `passive`, and `once` options. See:
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
+ *
+ * @example
+ *
+ *     class MyElement {
+ *
+ *       clicked = false;
+ *
+ *       render() {
+ *         return html`<div @click=${this._onClick}`><button></button></div>`;
+ *       }
+ *
+ *       @eventOptions({capture: true})
+ *       _onClick(e) {
+ *         this.clicked = true;
+ *       }
+ *     }
+ */
+export const eventOptions = (options) => (proto, name) => {
+    // This comment is here to fix a disagreement between formatter and linter
+    Object.assign(proto[name], options);
+};
 //# sourceMappingURL=decorators.js.map

lib/updating-element.d.ts

@@ -17,3 +17,3 @@ /**
  */
-interface AttributeSerializer<T = any> {
+export interface AttributeSerializer<T = any> {
     /**
@@ -200,2 +200,8 @@ * Deserializing function called to convert an attribute value to a property
     /**
+     * Allows for `super.disconnectedCallback()` in extensions while
+     * reserving the possibility of making non-breaking feature additions
+     * when disconnecting at some point in the future.
+     */
+    disconnectedCallback(): void;
+    /**
      * Synchronizes property values when attributes change.
@@ -202,0 +208,0 @@ */

lib/updating-element.js

@@ -260,2 +260,8 @@ /**
     /**
+     * Allows for `super.disconnectedCallback()` in extensions while
+     * reserving the possibility of making non-breaking feature additions
+     * when disconnecting at some point in the future.
+     */
+    disconnectedCallback() { }
+    /**
      * Synchronizes property values when attributes change.
@@ -262,0 +268,0 @@ */

lit-element.d.ts

@@ -15,3 +15,2 @@ /**
 import { TemplateResult } from 'lit-html';
-import { render } from 'lit-html/lib/shady-render';
 import { PropertyValues, UpdatingElement } from './lib/updating-element.js';
@@ -21,3 +20,3 @@ export * from './lib/updating-element.js';
 export { html, svg } from 'lit-html/lit-html';
-export declare abstract class LitElement extends UpdatingElement {
+export declare class LitElement extends UpdatingElement {
     /**
@@ -30,3 +29,3 @@ * Render method used to render the lit-html TemplateResult to the element's
      */
-    static render: typeof render;
+    static render: (result: TemplateResult, container: Element | DocumentFragment, options: import("lit-html/lib/shady-render").ShadyRenderOptions) => void;
     /**
@@ -40,8 +39,8 @@ * Updates the element. This method reflects property values to attributes
     /**
-     Invoked on each update to perform rendering tasks. This method must return a
-     lit-html TemplateResult. Setting properties inside this method will *not*
-     trigger the element to update.
+     * Invoked on each update to perform rendering tasks. This method must return
+     * a lit-html TemplateResult. Setting properties inside this method will *not*
+     * trigger the element to update.
      * @returns {TemplateResult} Must return a lit-html TemplateResult.
      */
-    protected abstract render(): TemplateResult;
+    protected render(): void;
 }

lit-element.js

@@ -0,1 +1,15 @@
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at
+ * http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at
+ * http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+import { TemplateResult } from 'lit-html';
 import { render } from 'lit-html/lib/shady-render';
@@ -15,10 +29,15 @@ import { UpdatingElement } from './lib/updating-element.js';
         super.update(changedProperties);
-        if (typeof this.render === 'function') {
+        const templateResult = this.render();
+        if (templateResult instanceof TemplateResult) {
             this.constructor
-                .render(this.render(), this.renderRoot, this.localName);
+                .render(templateResult, this.renderRoot, { scopeName: this.localName, eventContext: this });
         }
-        else {
-            throw new Error('render() not implemented');
-        }
     }
+    /**
+     * Invoked on each update to perform rendering tasks. This method must return
+     * a lit-html TemplateResult. Setting properties inside this method will *not*
+     * trigger the element to update.
+     * @returns {TemplateResult} Must return a lit-html TemplateResult.
+     */
+    render() { }
 }
@@ -25,0 +44,0 @@ /**

package.json

 {
   "name": "@polymer/lit-element",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Polymer based lit-html custom element",
@@ -43,3 +43,3 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "lit-html": "^0.11.4"
+    "lit-html": "^0.12.0"
   },
@@ -46,0 +46,0 @@ "publishConfig": {

README.md

@@ -8,2 +8,3 @@ > ## 🛠 Status: In Development
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@polymer/lit-element)
+[![Mentioned in Awesome lit-html](https://awesome.re/mentioned-badge.svg)](https://github.com/web-padawan/awesome-lit-html)
 
@@ -65,6 +66,6 @@ ## A simple base class for creating custom elements rendered with lit-html.
     * static elements: ``` html`<div>Hi</div>` ```
-    * expression: ``` html`<div>${disabled ? 'Off' : 'On'}</div>` ```
-    * property: ``` html`<x-foo .bar="${bar}"></x-foo>` ```
-    * attribute: ``` html`<div class="${color} special"></div>` ```
-    * event handler: ``` html`<button @click="${(e) => this._clickHandler(e)}"></button>` ```
+    * expression: ``` html`<div>${this.disabled ? 'Off' : 'On'}</div>` ```
+    * property: ``` html`<x-foo .bar="${this.bar}"></x-foo>` ```
+    * attribute: ``` html`<div class="${this.color} special"></div>` ```
+    * event handler: ``` html`<button @click="${this._clickHandler}"></button>` ```
 
@@ -118,3 +119,3 @@ ## Getting started
 current properties to return a `lit-html` template result to render
-into the element. This is the only method that must be implemented by subclasses.
+into the element.
 
@@ -124,3 +125,3 @@ ```html
   <script type="module">
-    import {LitElement, html, property} from '@polymer/lit-element';
+    import {LitElement, html} from '@polymer/lit-element';
 
@@ -156,6 +157,5 @@ class MyElement extends LitElement {
   * `render()` (protected): Implement to describe the element's DOM using `lit-html`. Ideally,
-  the `render` implementation is a [pure function](https://en.wikipedia.org/wiki/Pure_function) using only the element's current properties
-  to describe the element template. This is the only method that must be implemented by subclasses.
-  Note, since `render()` is called by `update()`, setting properties does not trigger
-  an update, allowing property values to be computed and validated.
+  the `render` implementation is a [pure function](https://en.wikipedia.org/wiki/Pure_function) using only the element's current properties to describe the element template. Note, since
+  `render()` is called by `update()`, setting properties does not trigger an
+  update, allowing property values to be computed and validated.
 
@@ -287,2 +287,2 @@ * `shouldUpdate(changedProperties)` (protected): Implement to control if updating and rendering
 will overwrite any element default (e.g. if the element sets this.id = 'id' in the constructor,
-the 'id' will become '' since this is the native platform default).
+the 'id' will become '' since this is the native platform default).

src/lib/decorators.ts

@@ -21,3 +21,3 @@
 export type Constructor<T> = {
-  new (...args: unknown[]): T
+  new (...args: any[]): T
 };
@@ -93,1 +93,33 @@
 }
+
+/**
+ * Adds event listener options to a method used as an event listener in a
+ * lit-html template.
+ *
+ * @param options An object that specifis event listener options as accepted by
+ * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
+ *
+ * Current browsers support the `capture`, `passive`, and `once` options. See:
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
+ *
+ * @example
+ *
+ *     class MyElement {
+ *
+ *       clicked = false;
+ *
+ *       render() {
+ *         return html`<div @click=${this._onClick}`><button></button></div>`;
+ *       }
+ *
+ *       @eventOptions({capture: true})
+ *       _onClick(e) {
+ *         this.clicked = true;
+ *       }
+ *     }
+ */
+export const eventOptions = (options: EventListenerOptions) =>
+    (proto: any, name: string) => {
+      // This comment is here to fix a disagreement between formatter and linter
+      Object.assign(proto[name], options);
+    };

src/lib/updating-element.ts

@@ -18,3 +18,3 @@ /**
  */
-interface AttributeSerializer<T = any> {
+export interface AttributeSerializer<T = any> {
 
@@ -401,2 +401,9 @@ /**
   /**
+   * Allows for `super.disconnectedCallback()` in extensions while
+   * reserving the possibility of making non-breaking feature additions
+   * when disconnecting at some point in the future.
+   */
+  disconnectedCallback() {}
+
+  /**
    * Synchronizes property values when attributes change.
@@ -615,2 +622,2 @@ */
   protected firstUpdated(_changedProperties: PropertyValues) {}
-}
+}

src/lit-element.ts

@@ -23,3 +23,3 @@ /**
 
-export abstract class LitElement extends UpdatingElement {
+export class LitElement extends UpdatingElement {
 
@@ -43,7 +43,7 @@ /**
     super.update(changedProperties);
-    if (typeof this.render === 'function') {
+    const templateResult = this.render() as any;
+    if (templateResult instanceof TemplateResult) {
       (this.constructor as typeof LitElement)
-          .render(this.render(), this.renderRoot!, this.localName!);
-    } else {
-      throw new Error('render() not implemented');
+          .render(templateResult, this.renderRoot!,
+                  {scopeName : this.localName!, eventContext : this});
     }
@@ -53,8 +53,8 @@ }
   /**
-   Invoked on each update to perform rendering tasks. This method must return a
-   lit-html TemplateResult. Setting properties inside this method will *not*
-   trigger the element to update.
+   * Invoked on each update to perform rendering tasks. This method must return
+   * a lit-html TemplateResult. Setting properties inside this method will *not*
+   * trigger the element to update.
    * @returns {TemplateResult} Must return a lit-html TemplateResult.
    */
-  protected abstract render(): TemplateResult;
+  protected render() {}
 }

src/test/lib/decorators_test.ts

@@ -15,2 +15,3 @@ /**
 
+import {eventOptions} from '../../lib/decorators.js';
 import {
@@ -124,2 +125,29 @@ customElement,
   });
+
+  suite('@eventOptions', () => {
+    test('allows capturing listeners', async () => {
+      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      class C extends LitElement {
+        eventPhase?: number;
+
+        render() {
+          return html`
+            <div @click=${this.onClick}><button></button></div>
+          `;
+        }
+
+        @eventOptions({capture : true})
+        onClick(e: Event) {
+          this.eventPhase = e.eventPhase;
+        }
+      }
+
+      const c = new C();
+      container.appendChild(c);
+      await c.updateComplete;
+      const button = c.shadowRoot!.querySelector('button')!;
+      button.click();
+      assert.equal(c.eventPhase, Event.CAPTURING_PHASE);
+    });
+  });
 });

src/test/lit-element_test.ts

@@ -981,3 +981,3 @@ /**
             const prop = 'prop';
-            const event = (e: Event) => { this._event = e; };
+            const event = function(this: E, e: Event) { this._event = e; };
             return html
@@ -999,2 +999,20 @@ `<div attr="${attr}" .prop="${prop}" @zug="${event}"></div>`;
 
+  test('event listeners are invoked with the right `this` value', async () => {
+    class E extends LitElement {
+      event?: Event;
+
+      render() { return html`<div @test=${this.onTest}></div>`; }
+
+      onTest(e: Event) { this.event = e; }
+    }
+    customElements.define(generateElementName(), E);
+    const el = new E();
+    container.appendChild(el);
+    await el.updateComplete;
+    const div = el.shadowRoot!.querySelector('div')!;
+    const event = new Event('test');
+    div.dispatchEvent(event);
+    assert.equal(el.event, event);
+  });
+
   test('`firstUpdated` called when element first updates', async () => {
@@ -1001,0 +1019,0 @@ class E extends LitElement {

test/lib/decorators_test.js

@@ -20,2 +20,3 @@ /**
 };
+import { eventOptions } from '../../lib/decorators.js';
 import { customElement, html, LitElement, query, queryAll } from '../../lit-element.js';
@@ -120,3 +121,29 @@ import { generateElementName } from '../test-helpers.js';
     });
+    suite('@eventOptions', () => {
+        test('allows capturing listeners', async () => {
+            let C = class C extends LitElement {
+                render() {
+                    return html `
+            <div @click=${this.onClick}><button></button></div>
+          `;
+                }
+                onClick(e) {
+                    this.eventPhase = e.eventPhase;
+                }
+            };
+            __decorate([
+                eventOptions({ capture: true })
+            ], C.prototype, "onClick", null);
+            C = __decorate([
+                customElement(generateElementName())
+            ], C);
+            const c = new C();
+            container.appendChild(c);
+            await c.updateComplete;
+            const button = c.shadowRoot.querySelector('button');
+            button.click();
+            assert.equal(c.eventPhase, Event.CAPTURING_PHASE);
+        });
+    });
 });
 //# sourceMappingURL=decorators_test.js.map

test/lit-element_test.js

@@ -942,3 +942,3 @@ /**
                 const prop = 'prop';
-                const event = (e) => { this._event = e; };
+                const event = function (e) { this._event = e; };
                 return html `<div attr="${attr}" .prop="${prop}" @zug="${event}"></div>`;
@@ -958,2 +958,16 @@ }
     });
+    test('event listeners are invoked with the right `this` value', async () => {
+        class E extends LitElement {
+            render() { return html `<div @test=${this.onTest}></div>`; }
+            onTest(e) { this.event = e; }
+        }
+        customElements.define(generateElementName(), E);
+        const el = new E();
+        container.appendChild(el);
+        await el.updateComplete;
+        const div = el.shadowRoot.querySelector('div');
+        const event = new Event('test');
+        div.dispatchEvent(event);
+        assert.equal(el.event, event);
+    });
     test('`firstUpdated` called when element first updates', async () => {
@@ -960,0 +974,0 @@ class E extends LitElement {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

283

increased by0.35%

Worsened metrics

Total package byte prevSize

451261

decreased by-17.89%

Number of package files

54

decreased by-5.26%

Lines of code

6059

decreased by-12.44%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlit-html@0.12.0(transitive)

• - Removedlit-html@0.11.4(transitive)

• Updatedlit-html@^0.12.0