Use local version 0.7 of lit-virtualizer (home-assistant#9321)

.eslintrc.json

@@ -104,5 +104,6 @@
     "lit/attribute-value-entities": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
-  "processor": "disable/disable"
+  "processor": "disable/disable",
+  "ignorePatterns": ["src/resources/lit-virtualizer/*"]
 }

.gitignore

@@ -1,10 +1,17 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
+hass_frontend/*
+dist
+
+# yarn
+.yarn
+yarn-error.log
 node_modules/*
 npm-debug.log
-.DS_Store
-hass_frontend/*
-.reify-cache
 
 # Python stuff
 *.py[cod]
@@ -14,11 +21,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +35,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

build-scripts/webpack.js

@@ -116,8 +116,9 @@ const createWebpackConfig = ({
       // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
-          require.resolve(
-            "@lit-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")

src/components/data-table/ha-data-table.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -340,11 +340,10 @@ export class HaDataTable extends LitElement {
                   ${scroll({
                     items: this._items,
                     layout: Layout1d,
-                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
                       // not sure how this happens...
                       if (!row) {
-                        return "";
+                        return html``;
                       }
                       if (row.append) {
                         return html`

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
@@ -188,7 +188,6 @@ export class QuickBar extends LitElement {
               ${scroll({
                 items,
                 layout: Layout1d,
-                // @ts-expect-error
                 renderItem: (item: QuickBarItem, index) =>
                   this._renderItem(item, index),
               })}
@@ -224,7 +223,7 @@ export class QuickBar extends LitElement {
 
   private _renderItem(item: QuickBarItem, index?: number) {
     if (!item) {
-      return undefined;
+      return html``;
     }
     return isCommandItem(item)
       ? this._renderCommandItem(item, index)

src/panels/logbook/ha-logbook.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -100,7 +100,6 @@ class HaLogbook extends LitElement {
           ? scroll({
               items: this.entries,
               layout: Layout1d,
-              // @ts-expect-error
               renderItem: (item: LogbookEntry, index) =>
                 this._renderLogbookItem(item, index),
             })

src/resources/lit-virtualizer/lib/lit-virtualizer.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, TemplateResult } from "lit";
+import {
+  LayoutSpecifier,
+  Layout,
+  LayoutConstructor,
+} from "./uni-virtualizer/lib/layouts/Layout.js";
+/**
+ * A LitElement wrapper of the scroll directive.
+ *
+ * Import this module to declare the lit-virtualizer custom element.
+ * Pass an items array, renderItem method, and scroll target as properties
+ * to the <lit-virtualizer> element.
+ */
+export declare class LitVirtualizer extends LitElement {
+  renderItem?: (item: any, index?: number) => TemplateResult;
+  items: Array<unknown>;
+  scrollTarget: Element | Window;
+  keyFunction: ((item: unknown) => unknown) | undefined;
+  private _layout;
+  private _scrollToIndex;
+  createRenderRoot(): this;
+  /**
+   * The method used for rendering each item.
+   */
+  set layout(layout: Layout | LayoutConstructor | LayoutSpecifier | null);
+  get layout(): Layout | LayoutConstructor | LayoutSpecifier | null;
+  /**
+   * Scroll to the specified index, placing that item at the given position
+   * in the scroll view.
+   */
+  scrollToIndex(index: number, position?: string): Promise<void>;
+  render(): TemplateResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "lit-virtualizer": LitVirtualizer;
+  }
+}
+//# sourceMappingURL=lit-virtualizer.d.ts.map

src/resources/lit-virtualizer/lib/scroll.d.ts

@@ -0,0 +1,61 @@
+import { TemplateResult, ChildPart } from "lit";
+import { PartInfo } from "lit/directive.js";
+import { AsyncDirective } from "lit/async-directive.js";
+import {
+  Layout,
+  LayoutConstructor,
+  LayoutSpecifier,
+} from "./uni-virtualizer/lib/layouts/Layout.js";
+import {
+  VirtualScroller,
+  ScrollToIndexValue,
+} from "./uni-virtualizer/lib/VirtualScroller.js";
+/**
+ * Configuration options for the scroll directive.
+ */
+interface ScrollConfig {
+  /**
+   * A function that returns a lit-html TemplateResult. It will be used
+   * to generate the DOM for each item in the virtual list.
+   */
+  renderItem?: (item: any, index?: number) => TemplateResult;
+  keyFunction?: (item: any) => unknown;
+  layout?: Layout | LayoutConstructor | LayoutSpecifier | null;
+  /**
+   * An element that receives scroll events for the virtual scroller.
+   */
+  scrollTarget?: Element | Window;
+  /**
+   * The list of items to display via the renderItem function.
+   */
+  items?: Array<any>;
+  /**
+   * Limit for the number of items to display. Defaults to the length of the
+   * items array.
+   */
+  totalItems?: number;
+  /**
+   * Index and position of the item to scroll to.
+   */
+  scrollToIndex?: ScrollToIndexValue;
+}
+export declare const defaultKeyFunction: (item: any) => any;
+export declare const defaultRenderItem: (item: any) => TemplateResult<1>;
+declare class ScrollDirective extends AsyncDirective {
+  container: HTMLElement | null;
+  scroller: VirtualScroller | null;
+  first: number;
+  last: number;
+  renderItem: (item: any, index?: number) => TemplateResult;
+  keyFunction: (item: any) => unknown;
+  items: Array<unknown>;
+  constructor(part: PartInfo);
+  render(config?: ScrollConfig): unknown;
+  update(part: ChildPart, [config]: [ScrollConfig]): unknown;
+  private _initialize;
+}
+export declare const scroll: (
+  config?: ScrollConfig | undefined
+) => import("lit-html/directive").DirectiveResult<typeof ScrollDirective>;
+export {};
+//# sourceMappingURL=scroll.d.ts.map