Adds passive/once to EventListenerOptions type

CHANGELOG.md

@@ -10,10 +10,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
    Unreleased section, uncommenting the header as necessary.
 -->
 
+## Unreleased
+
 <!-- ### Changed -->
 <!-- ### Added -->
 <!-- ### Removed -->
-<!-- ### Fixed -->
+### Fixed
+* Type for `eventOptions` decorator now properly includes `passive` and `once` options ([#325](https://github.com/Polymer/lit-element/issues/325))
 
 ## [0.6.5] - 2018-12-13
 ### Changed:

src/lib/decorators.ts

@@ -55,8 +55,8 @@ export const customElement = (tagName: string) =>
  * corresponding attribute value. A `PropertyDeclaration` may optionally be
  * supplied to configure property features.
  */
-export const property = (options?: PropertyDeclaration) => (proto: Object,
-                                                            name: PropertyKey) => {
+export const property = (options?: PropertyDeclaration) => (
+    proto: Object, name: PropertyKey) => {
   (proto.constructor as typeof UpdatingElement).createProperty(name, options);
 };
 
@@ -116,7 +116,7 @@ function _query<T>(queryFn: (target: NodeSelector, selector: string) => T) {
  *       }
  *     }
  */
-export const eventOptions = (options: EventListenerOptions) =>
+export const eventOptions = (options: AddEventListenerOptions) =>
     (proto: any, name: string) => {
       // This comment is here to fix a disagreement between formatter and linter
       Object.assign(proto[name], options);

src/test/lib/decorators_test.ts

@@ -22,6 +22,49 @@ import {
 } from '../../lit-element.js';
 import {generateElementName} from '../test-helpers.js';
 
+let hasOptions;
+const supportsOptions = (function() {
+  if (hasOptions !== undefined) {
+    return hasOptions;
+  }
+  const fn = () => {};
+  const event = 'foo';
+  hasOptions = false;
+  const options = {
+    get capture() {
+      hasOptions = true;
+      return true;
+    }
+  };
+  document.body.addEventListener(event, fn, options);
+  document.body.removeEventListener(event, fn, options);
+  return hasOptions;
+})();
+
+let hasPassive;
+const supportsPassive = (function() {
+  if (hasPassive !== undefined) {
+    return hasPassive;
+  }
+  // Use an iframe since ShadyDOM will pass this test but doesn't actually
+  // enforce passive behavior.
+  const f = document.createElement('iframe');
+  document.body.appendChild(f);
+  const fn = () => {};
+  const event = 'foo';
+  hasPassive = false;
+  const options = {
+    get passive() {
+      hasPassive = true;
+      return true;
+    }
+  };
+  f.contentDocument!.addEventListener(event, fn, options);
+  f.contentDocument!.removeEventListener(event, fn, options as AddEventListenerOptions);
+  document.body.removeChild(f);
+  return hasPassive;
+})();
+
 const assert = chai.assert;
 
 suite('decorators', () => {
@@ -123,7 +166,10 @@ suite('decorators', () => {
   });
 
   suite('@eventOptions', () => {
-    test('allows capturing listeners', async () => {
+    test('allows capturing listeners', async function() {
+      if (!supportsOptions) {
+        this.skip();
+      }
       @customElement(generateElementName() as keyof HTMLElementTagNameMap)
       class C extends LitElement {
         eventPhase?: number;
@@ -147,5 +193,69 @@ suite('decorators', () => {
       button.click();
       assert.equal(c.eventPhase, Event.CAPTURING_PHASE);
     });
+
+    test('allows once listeners', async function() {
+      if (!supportsOptions) {
+        this.skip();
+      }
+      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      class C extends LitElement {
+
+        clicked = 0;
+
+        render() {
+          return html`
+            <div @click=${this.onClick}><button></button></div>
+          `;
+        }
+
+        @eventOptions({once : true})
+        onClick() {
+          this.clicked++;
+        }
+      }
+
+      const c = new C();
+      container.appendChild(c);
+      await c.updateComplete;
+      const button = c.shadowRoot!.querySelector('button')!;
+      button.click();
+      button.click();
+      assert.equal(c.clicked, 1);
+    });
+
+    test('allows passive listeners', async function() {
+      if (!supportsPassive) {
+        this.skip();
+      }
+      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      class C extends LitElement {
+
+        defaultPrevented?: boolean;
+
+        render() {
+          return html`
+            <div @click=${this.onClick}><button></button></div>
+          `;
+        }
+
+        @eventOptions({passive : true})
+        onClick(e: Event) {
+          try {
+            e.preventDefault();
+          } catch (error) {
+            // no need to do anything
+          }
+          this.defaultPrevented = e.defaultPrevented;
+        }
+      }
+
+      const c = new C();
+      container.appendChild(c);
+      await c.updateComplete;
+      const button = c.shadowRoot!.querySelector('button')!;
+      button.click();
+      assert.isFalse(c.defaultPrevented);
+    });
   });
 });