chore: use latest Lit syntax and labs tools

adobe · May 22, 2023 · c139923 · c139923
1 parent 76a7c57
commit c139923
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 43 deletions.
diff --git a/packages/menu/src/MenuGroup.ts b/packages/menu/src/MenuGroup.ts
@@ -45,7 +45,10 @@ export class MenuGroup extends Menu {
         this.headerId = `sp-menu-group-label-${MenuGroup.instances}`;
     }
 
-    @queryAssignedNodes('header', true)
+    @queryAssignedNodes({
+        slot: 'header',
+        flatten: true,
+    })
     private headerElements!: NodeListOf<HTMLElement>;
 
     @state()

diff --git a/packages/radio/src/RadioGroup.ts b/packages/radio/src/RadioGroup.ts
@@ -34,7 +34,7 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
     @property({ type: String })
     public name = '';
 
-    @queryAssignedNodes('')
+    @queryAssignedNodes()
     public defaultNodes!: Node[];
 
     public get buttons(): Radio[] {

diff --git a/packages/table/package.json b/packages/table/package.json
@@ -115,7 +115,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@lit-labs/virtualizer": "^1.0.1",
+        "@lit-labs/virtualizer": "^2.0.2",
         "@spectrum-web-components/base": "^0.31.0",
         "@spectrum-web-components/checkbox": "^0.31.0",
         "@spectrum-web-components/icon": "^0.31.0",

diff --git a/packages/table/src/Table.ts b/packages/table/src/Table.ts
@@ -35,11 +35,10 @@ import {
     virtualizerRef,
 } from '@lit-labs/virtualizer/virtualize.js';
 import { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';
-
-interface Range {
-    first: number;
-    last: number;
-}
+import {
+    RangeChangedEvent,
+    VisibilityChangedEvent,
+} from '@lit-labs/virtualizer/events.js';
 
 export enum RowType {
     ITEM = 0,
@@ -50,19 +49,6 @@ export interface TableItem extends Record<string, unknown> {
     _$rowType$?: RowType;
 }
 
-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;
-    }
-}
-
 /**
  * @element sp-table
  *
@@ -475,6 +461,17 @@ export class Table extends SizedMixin(SpectrumElement, {
                     );
                 }
             );
+            this.tableBody.addEventListener(
+                'visibilityChanged',
+                (event: VisibilityChangedEvent) => {
+                    this.dispatchEvent(
+                        new VisibilityChangedEvent({
+                            first: event.first,
+                            last: event.last,
+                        })
+                    );
+                }
+            );
         }
         const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {
             items: this.items,

diff --git a/packages/table/stories/table-virtualized.stories.ts b/packages/table/stories/table-virtualized.stories.ts
@@ -24,11 +24,8 @@ import '@spectrum-web-components/table/sp-table-body.js';
 import '@spectrum-web-components/table/sp-table-row.js';
 import '@spectrum-web-components/table/sp-table-cell.js';
 import { Item, makeItems, Properties, renderItem } from './index.js';
-import type {
-    RangeChangedEvent,
-    SortedEventDetails,
-    Table,
-} from '@spectrum-web-components/table';
+import type { SortedEventDetails, Table } from '@spectrum-web-components/table';
+import { RangeChangedEvent } from '@lit-labs/virtualizer/events.js';
 
 export default {
     title: 'Table/Virtualized',

diff --git a/packages/tags/src/Tags.ts b/packages/tags/src/Tags.ts
@@ -34,7 +34,7 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
         return [styles];
     }
 
-    @queryAssignedNodes('')
+    @queryAssignedNodes()
     public defaultNodes!: Node[];
 
     public get tags(): Tag[] {

diff --git a/projects/vrt-compare/src/OnionSkinner.ts b/projects/vrt-compare/src/OnionSkinner.ts
@@ -23,7 +23,10 @@ import '@spectrum-web-components/tooltip/sp-tooltip.js';
 export class OnionSkinner extends SpectrumElement {
     @property({ type: Number }) public onionLevel = 0.5;
 
-    @queryAssignedNodes('', true)
+    @queryAssignedNodes({
+        slot: '',
+        flatten: true,
+    })
     private assignments!: NodeListOf<HTMLImageElement>;
 
     private leftThumbnail?: HTMLImageElement;

diff --git a/tools/base/test/base-devmode.test.ts b/tools/base/test/base-devmode.test.ts
@@ -22,9 +22,9 @@ describe('Base', () => {
         expect(consoleWarnStub.called).to.be.true;
         const spyCall = consoleWarnStub.getCall(0);
         expect(
-            spyCall.args.at(0).includes('dev mode'),
+            spyCall.args.at(0) as string,
             'confirm "dev mode"-centric message'
-        ).to.be.true;
+        ).to.include('dev mode');
         expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({
             data: {
                 localName: 'base',

diff --git a/tools/grid/package.json b/tools/grid/package.json
@@ -63,7 +63,7 @@
     ],
     "dependencies": {
         "@lit-labs/observers": "^2.0.0",
-        "@lit-labs/virtualizer": "^1.0.1",
+        "@lit-labs/virtualizer": "^2.0.2",
         "@spectrum-web-components/base": "^0.31.0",
         "@spectrum-web-components/reactive-controllers": "^0.31.0"
     },

diff --git a/tools/shared/src/observe-slot-text.ts b/tools/shared/src/observe-slot-text.ts
@@ -65,7 +65,10 @@ export function ObserveSlotText<T extends Constructor<ReactiveElement>>(
         @property({ type: Boolean, attribute: false })
         public slotHasContent = false;
 
-        @queryAssignedNodes(slotName, true)
+        @queryAssignedNodes({
+            slot: slotName,
+            flatten: true,
+        })
         private [assignedNodesList]!: NodeListOf<HTMLElement>;
 
         public manageTextObservedSlot(): void {

diff --git a/yarn.lock b/yarn.lock
@@ -3052,13 +3052,12 @@
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz#3361d6b8c4cb2ac426d5794ac7cd9776cd2f0814"
   integrity sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong==
 
-"@lit-labs/virtualizer@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@lit-labs/virtualizer/-/virtualizer-1.0.1.tgz#10c5c849b062ca808dc4dadae8f58632445ee79d"
-  integrity sha512-olFX5cVVj0HeVpiEMjylX+sOXFsDpE/SCDrgw63/lBMrrnyP9PIFH0zcZrG0DvuAmCCPaanPybK59Iu7cOe/VA==
+"@lit-labs/virtualizer@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@lit-labs/virtualizer/-/virtualizer-2.0.2.tgz#7ba1435b3c88d95b7e922eda47508e2a255770b9"
+  integrity sha512-+E+UKTbEfQC5j7FNqN1xWBdGtzfREPbqPAGsNRiz7g2orXb2y+rBy6FmfTQ+Qcly2fjkei06xRg7f/yN/hS3zQ==
   dependencies:
-    event-target-shim "^6.0.2"
-    lit "^2.5.0"
+    lit "^2.7.0"
     tslib "^2.0.3"
 
 "@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.1.0", "@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0":
@@ -10562,11 +10561,6 @@ event-target-shim@^5.0.0:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
-event-target-shim@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-6.0.2.tgz#ea5348c3618ee8b62ff1d344f01908ee2b8a2b71"
-  integrity sha512-8q3LsZjRezbFZ2PN+uP+Q7pnHUMmAOziU2vA2OwoFaKIXxlxl38IylhSSgUorWu/rf4er67w0ikBqjBFk/pomA==
-
 eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -14774,6 +14768,15 @@ lit@^2.0.0, lit@^2.0.2, lit@^2.5.0:
     lit-element "^3.3.0"
     lit-html "^2.7.0"
 
+lit@^2.7.0:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.7.4.tgz#ca63d27fda178dbffae0faf2c882b9910e40842c"
+  integrity sha512-cgD7xrZoYr21mbrkZIuIrj98YTMw/snJPg52deWVV4A8icLyNHI3bF70xsJeAgwTuiq5Kkd+ZR8gybSJDCPB7g==
+  dependencies:
+    "@lit/reactive-element" "^1.6.0"
+    lit-element "^3.3.0"
+    lit-html "^2.7.0"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"