[labs/virtualizer] Export event classes through a new events.js (#3430)

* Added an events.js to export the RangeChangedEvent and VisibilityChangedEvent classes.

* Point to events.js to get the event classes now and moved the custom Range interface into there.

* Added events.js files to package.json's files property and the wireit outputs for build:ts.

.changeset/mighty-suits-protect.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/virtualizer': patch
+---
+
+Added an events.js to enable exporting of RangeChangedEvent and VisibilityChangedEvent classes.

packages/labs/virtualizer/package.json

@@ -11,6 +11,9 @@
     ".": {
       "default": "./lit-virtualizer.js"
     },
+    "./events.js": {
+      "default": "./events.js"
+    },
     "./layouts/flexWrap.js": {
       "default": "./layouts/flexWrap.js"
     },
@@ -68,6 +71,7 @@
         "polyfillLoaders/**/*.{js,d.ts,d.ts.map}",
         "test/**/*.{js,d.ts,d.ts.map}",
         "!test/screenshot/**",
+        "events.{js,d.ts,d.ts.map}",
         "lit-virtualizer.{js,d.ts,d.ts.map}",
         "LitVirtualizer.{js,d.ts,d.ts.map}",
         "virtualize.{js,d.ts,d.ts.map}",
@@ -95,6 +99,7 @@
     "/layouts/shared/*.{d.ts,d.ts.map,js,js.map}",
     "/polyfillLoaders/*.{d.ts,d.ts.map,js,js.map}",
     "/polyfills/resize-observer-polyfill/ResizeObserver.{d.ts,js}",
+    "/events.{js,d.ts,d.ts.map}",
     "/lit-virtualizer.{d.ts,d.ts.map,js,js.map}",
     "/virtualize.{d.ts,d.ts.map,js,js.map}",
     "/Virtualizer.{d.ts,d.ts.map,js,js.map}",

packages/labs/virtualizer/src/Virtualizer.ts

@@ -15,51 +15,21 @@ import {
   LayoutConstructor,
   LayoutSpecifier,
   Size,
-  Range,
   InternalRange,
   MeasureChildFunction,
   ScrollToCoordinates,
   BaseLayoutConfig,
 } from './layouts/shared/Layout.js';
 import {ScrollerController} from './ScrollerController.js';
+import {
+  RangeChangedEvent,
+  UnpinnedEvent,
+  VisibilityChangedEvent,
+} from './events.js';
 
 export const virtualizerRef = Symbol('virtualizerRef');
 const SIZER_ATTRIBUTE = 'virtualizer-sizer';
 
-export class RangeChangedEvent extends Event implements Range {
-  static eventName = 'rangeChanged';
-
-  first: number;
-  last: number;
-
-  constructor(range: Range) {
-    super(RangeChangedEvent.eventName, {bubbles: true});
-    this.first = range.first;
-    this.last = range.last;
-  }
-}
-
-export class VisibilityChangedEvent extends Event implements Range {
-  static eventName = 'visibilityChanged';
-
-  first: number;
-  last: number;
-
-  constructor(range: Range) {
-    super(VisibilityChangedEvent.eventName, {bubbles: true});
-    this.first = range.first;
-    this.last = range.last;
-  }
-}
-
-export class UnpinnedEvent extends Event {
-  static eventName = 'unpinned';
-
-  constructor() {
-    super(UnpinnedEvent.eventName, {bubbles: false});
-  }
-}
-
 declare global {
   interface HTMLElementEventMap {
     rangeChanged: RangeChangedEvent;

packages/labs/virtualizer/src/events.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export class RangeChangedEvent extends Event {
+  static eventName = 'rangeChanged';
+
+  first: number;
+  last: number;
+
+  constructor(range: Range) {
+    super(RangeChangedEvent.eventName, {bubbles: true});
+    this.first = range.first;
+    this.last = range.last;
+  }
+}
+
+export class VisibilityChangedEvent extends Event {
+  static eventName = 'visibilityChanged';
+
+  first: number;
+  last: number;
+
+  constructor(range: Range) {
+    super(VisibilityChangedEvent.eventName, {bubbles: true});
+    this.first = range.first;
+    this.last = range.last;
+  }
+}
+
+export class UnpinnedEvent extends Event {
+  static eventName = 'unpinned';
+
+  constructor() {
+    super(UnpinnedEvent.eventName, {bubbles: false});
+  }
+}
+
+interface Range {
+  first: number;
+  last: number;
+}

packages/labs/virtualizer/src/lit-virtualizer.ts

@@ -6,7 +6,7 @@
 
 import {LitVirtualizer} from './LitVirtualizer.js';
 export {LitVirtualizer};
-export {RangeChangedEvent, VisibilityChangedEvent} from './Virtualizer.js';
+export {RangeChangedEvent, VisibilityChangedEvent} from './events.js';
 
 /**
  * Import this module to declare the lit-virtualizer custom element.

packages/labs/virtualizer/src/test/layouts/flow.test.ts

@@ -18,7 +18,7 @@ import {
   LayoutConstructor,
   LayoutSpecifier,
 } from '../../layouts/shared/Layout.js';
-import {VisibilityChangedEvent} from '../../Virtualizer.js';
+import {VisibilityChangedEvent} from '../../events.js';
 import {flow} from '../../layouts/flow.js';
 import {expect, html, fixture} from '@open-wc/testing';
 

packages/labs/virtualizer/src/test/scenarios/range-changed-events.test.ts

@@ -12,7 +12,7 @@ import {
   until,
 } from '../helpers.js';
 import {LitVirtualizer} from '../../lit-virtualizer.js';
-import {RangeChangedEvent} from '../../Virtualizer.js';
+import {RangeChangedEvent} from '../../events.js';
 import {expect, html, fixture} from '@open-wc/testing';
 
 describe('RangeChanged event', () => {

packages/labs/virtualizer/src/test/scenarios/visibility-changed-events.test.ts

@@ -13,7 +13,7 @@ import {
   until,
 } from '../helpers.js';
 import {LitVirtualizer} from '../../lit-virtualizer.js';
-import {VisibilityChangedEvent} from '../../Virtualizer.js';
+import {VisibilityChangedEvent} from '../../events.js';
 import {expect, html, fixture} from '@open-wc/testing';
 
 describe('VisibilityChanged event', () => {

packages/labs/virtualizer/src/virtualize.ts

@@ -8,8 +8,9 @@ import {TemplateResult, ChildPart, html} from 'lit';
 import {directive, DirectiveResult, PartInfo, PartType} from 'lit/directive.js';
 import {AsyncDirective} from 'lit/async-directive.js';
 import {repeat, KeyFn} from 'lit/directives/repeat.js';
+import {RangeChangedEvent} from './events.js';
 import {LayoutConfigValue} from './layouts/shared/Layout.js';
-import {Virtualizer, RangeChangedEvent} from './Virtualizer.js';
+import {Virtualizer} from './Virtualizer.js';
 
 export {virtualizerRef, VirtualizerHostElement} from './Virtualizer.js';