Refactor around @lit/context to simplify

reddit · May 22, 2024 · 96dabb6 · 96dabb6
1 parent bdc830d
commit 96dabb6
Show file tree

Hide file tree

Showing 13 changed files with 288 additions and 336 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,5 +114,8 @@
   },
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "0.0.36"
+  "version": "0.0.36",
+  "dependencies": {
+    "@lit/context": "^1.1.1"
+  }
 }
diff --git a/src/elements/play-assets-dialog.ts b/src/elements/play-assets-dialog.ts
@@ -1,4 +1,4 @@
-import {customElement, property, query, state} from 'lit/decorators.js'
+import {customElement, property, query} from 'lit/decorators.js'
 import {
   css,
   type CSSResultGroup,
@@ -11,17 +11,20 @@ import {choose} from 'lit-html/directives/choose.js'
 import {when} from 'lit-html/directives/when.js'
 import {
   type AssetFilesystemType,
+  assetsContext,
   PlayAssets
 } from './play-assets/play-assets.js'
+import {cssReset} from '../utils/css-reset.js'
+import {consume} from '@lit/context'
 
 import './play-assets/play-assets.js'
 import './play-assets/play-assets-virtual-fs.js'
 import './play-assets/play-assets-local-directory.js'
 import './play-assets/play-assets-local-archive.js'
 import './play-dialog/play-dialog.js'
+import {Bubble} from '../utils/bubble.js'
 
 declare global {
-  interface HTMLElementEventMap {}
   interface HTMLElementTagNameMap {
     'play-assets-dialog': PlayAssetsDialog
   }
@@ -30,7 +33,11 @@ declare global {
 @customElement('play-assets-dialog')
 export class PlayAssetsDialog extends LitElement {
   static override readonly styles: CSSResultGroup = css`
-    ${PlayDialog.styles}
+    ${cssReset}
+
+    legend {
+      font-weight: bold;
+    }
 
     fieldset {
       margin-bottom: var(--space);
@@ -46,11 +53,8 @@ export class PlayAssetsDialog extends LitElement {
   @property({attribute: 'enable-local-assets', type: Boolean})
   enableLocalAssets: boolean = false
 
-  @state()
-  private _filesystemType: AssetFilesystemType = 'virtual'
-
-  @query('play-assets')
-  private _assets: PlayAssets | undefined
+  @consume({context: assetsContext})
+  private _assets!: PlayAssets
 
   @query('play-dialog', true)
   private _dialog!: PlayDialog
@@ -63,18 +67,29 @@ export class PlayAssetsDialog extends LitElement {
     this._dialog.close()
   }
 
+  override connectedCallback() {
+    super.connectedCallback()
+
+    this._assets.addEventListener('assets-updated', this.#assetsUpdated)
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._assets.removeEventListener('assets-updated', this.#assetsUpdated)
+  }
+
   protected override render(): TemplateResult {
     return html`
-      <play-assets @assets-updated=${this.#assetsUpdated}></play-assets>
       <play-dialog
-        title="Assets"
+        dialog-title="Assets"
         description="Manage static assets available to blocks in :play"
       >
         ${when(this.enableLocalAssets, this.#renderFilesystemPicker)}
 
         <fieldset>
           <legend>${this.#filesystemTitle}:</legend>
-          ${choose(this._filesystemType, [
+          ${choose(this._assets.filesystemType, [
             [
               'virtual',
               () => html`<play-assets-virtual-fs></play-assets-virtual-fs>`
@@ -93,7 +108,7 @@ export class PlayAssetsDialog extends LitElement {
         <input
           name="filesystemType"
           type="radio"
-          ?checked="${this._filesystemType === 'virtual'}"
+          ?checked="${this._assets.filesystemType === 'virtual'}"
           @change=${this.#setFilesystem}
           value="virtual"
         />
@@ -103,7 +118,7 @@ export class PlayAssetsDialog extends LitElement {
         <input
           name="filesystemType"
           type="radio"
-          ?checked="${this._filesystemType === 'local'}"
+          ?checked="${this._assets.filesystemType === 'local'}"
           @change=${this.#setFilesystem}
           value="local"
         />
@@ -112,15 +127,16 @@ export class PlayAssetsDialog extends LitElement {
     </fieldset>`
   }
 
-  #setFilesystem = (ev: InputEvent & {currentTarget: HTMLInputElement}) => {
-    if (this._assets) {
-      this._assets.filesystemType = ev.currentTarget
-        .value as AssetFilesystemType
-      this.requestUpdate()
-    }
+  #setFilesystem = (
+    ev: InputEvent & {currentTarget: HTMLInputElement}
+  ): void => {
+    const filesystemType = ev.currentTarget.value as AssetFilesystemType
+    this.dispatchEvent(
+      Bubble<AssetFilesystemType>('assets-set-filesystem', filesystemType)
+    )
   }
 
-  #renderLocalFs = () => {
+  #renderLocalFs = (): TemplateResult => {
     return html`
       <div id="localFs">
         ${when(
@@ -133,13 +149,13 @@ export class PlayAssetsDialog extends LitElement {
     `
   }
 
-  #assetsUpdated = () => {
-    this._filesystemType = this._assets?.filesystemType ?? 'virtual'
-  }
-
   get #filesystemTitle(): string {
-    return this._filesystemType === 'virtual'
+    return this._assets.filesystemType === 'virtual'
       ? 'Manage files'
       : 'Filesystem source'
   }
+
+  #assetsUpdated = (): void => {
+    this.requestUpdate()
+  }
 }
diff --git a/src/elements/play-assets/file-upload-dropper.ts b/src/elements/play-assets/file-upload-dropper.ts
@@ -21,15 +21,15 @@ import {PlayAssets} from './play-assets.js'
 
 declare global {
   interface HTMLElementEventMap {
-    'files-selected': CustomEvent<FilesSelectedEvent>
+    'files-selected': CustomEvent<FileSelection>
     cancelled: CustomEvent<never>
   }
   interface HTMLElementTagNameMap {
     'file-upload-dropper': FileUploadDropper
   }
 }
 
-export type FilesSelectedEvent = {
+export type FileSelection = {
   // Provided in fallback environments where File Access API is not available
   files?: File[]
   // Provided in environments where File Access API is available
@@ -128,16 +128,14 @@ export class FileUploadDropper extends LitElement {
   /**
    * Uses File Access API to get FileSystemFileHandles
    */
-  #pickFile = async () => {
+  #pickFile = async (): Promise<void> => {
     const fileHandles = await fileAccessContext.showOpenFilePicker({
       ...(this.id ? {id: this.id} : {}),
       types: this.acceptTypes,
       multiple: this.multiple
     })
     if (fileHandles.length > 0) {
-      this.dispatchEvent(
-        Bubble<FilesSelectedEvent>('files-selected', {fileHandles})
-      )
+      this.dispatchEvent(Bubble<FileSelection>('files-selected', {fileHandles}))
     } else {
       this.dispatchEvent(Bubble<void>('cancelled', undefined))
     }
@@ -157,7 +155,9 @@ export class FileUploadDropper extends LitElement {
   /**
    * Handles the drag'n'drop result
    */
-  #processDrop = async (ev: InputEvent & {currentTarget: HTMLInputElement}) => {
+  #processDrop = async (
+    ev: InputEvent & {currentTarget: HTMLInputElement}
+  ): Promise<void> => {
     ev.preventDefault()
     this.#dragEnd()
 
@@ -181,9 +181,7 @@ export class FileUploadDropper extends LitElement {
           }
         }
       }
-      this.dispatchEvent(
-        Bubble<FilesSelectedEvent>('files-selected', {fileHandles})
-      )
+      this.dispatchEvent(Bubble<FileSelection>('files-selected', {fileHandles}))
     } else {
       await this.#processFileList(ev.dataTransfer.files)
     }
@@ -204,22 +202,22 @@ export class FileUploadDropper extends LitElement {
       }
     }
 
-    this.dispatchEvent(Bubble<FilesSelectedEvent>('files-selected', {files}))
+    this.dispatchEvent(Bubble<FileSelection>('files-selected', {files}))
   }
 
-  #clearError = () => {
+  #clearError = (): void => {
     this._errorMessage = undefined
   }
 
-  #dragStart = (ev: Event) => {
+  #dragStart = (ev: Event): void => {
     if (ev.type === 'dragover') {
       ev.preventDefault()
     }
     this.#clearError()
     this._dragging = true
   }
 
-  #dragEnd = () => {
+  #dragEnd = (): void => {
     this._dragging = false
   }
 

diff --git a/src/elements/play-assets/play-assets-local-archive.ts b/src/elements/play-assets/play-assets-local-archive.ts
@@ -1,18 +1,18 @@
-import {customElement, query, state} from 'lit/decorators.js'
+import {customElement, state} from 'lit/decorators.js'
 import {css, html, LitElement, type TemplateResult} from 'lit'
 import {when} from 'lit-html/directives/when.js'
 import {cssReset} from '../../utils/css-reset.js'
 import {type FilePickerType} from '../../utils/file-access-api.js'
-import type {FilesSelectedEvent} from './file-upload-dropper.js'
-import {PlayAssets} from './play-assets.js'
+import type {FileSelection} from './file-upload-dropper.js'
+import {assetsContext, PlayAssets} from './play-assets.js'
 import {styleMap} from 'lit/directives/style-map.js'
+import {consume} from '@lit/context'
 
 import '../play-button.js'
 import '../play-icon/play-icon.js'
 import './file-upload-dropper.js'
 
 declare global {
-  interface HTMLElementEventMap {}
   interface HTMLElementTagNameMap {
     'play-assets-local-archive': PlayAssetsLocalArchive
   }
@@ -55,23 +55,32 @@ export class PlayAssetsLocalArchive extends LitElement {
     }
   `
 
-  @query('play-assets')
-  private _assets?: PlayAssets
+  @consume({context: assetsContext})
+  private _assets!: PlayAssets
 
   @state()
   private _detailsStyle = STYLE_COLLAPSED
 
   @state()
   private _selectStyle = STYLE_VISIBLE
 
+  override connectedCallback() {
+    super.connectedCallback()
+
+    this._assets.addEventListener('assets-updated', this.#assetsUpdated)
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this._assets.removeEventListener('assets-updated', this.#assetsUpdated)
+  }
+
   protected override render(): TemplateResult {
-    return html`
-      <play-assets @assets-updated=${this.#assetsUpdated}></play-assets>
-      ${this.#renderArchiveDetails()} ${this.#renderMountArchive()}
-    `
+    return html` ${this.#renderArchiveDetails()} ${this.#renderMountArchive()} `
   }
 
-  #renderMountArchive = () => {
+  #renderMountArchive = (): TemplateResult => {
     const types: FilePickerType[] = [
       {
         description: 'ZIP Archive',
@@ -98,13 +107,13 @@ export class PlayAssetsLocalArchive extends LitElement {
     `
   }
 
-  #renderArchiveDetails = () => {
+  #renderArchiveDetails = (): TemplateResult => {
     return html`
       <div class="row gap" style="${styleMap(this._detailsStyle)}">
         <div class="column grow">
           <span>Mounted archive:</span>
-          <pre>${this._assets?.archiveFilename}</pre>
-          <span>File count: ${this._assets?.assetCount}</span>
+          <pre>${this._assets.archiveFilename}</pre>
+          <span>File count: ${this._assets.assetCount}</span>
         </div>
         ${when(
           PlayAssets.hasFileAccessAPI,
@@ -114,7 +123,7 @@ export class PlayAssetsLocalArchive extends LitElement {
               size="small"
               icon="restart-outline"
               title="Refresh"
-              @click=${() => this._assets?.remountLocalArchive()}
+              @click=${() => this._assets.remountLocalArchive()}
             ></play-button>`
         )}
         <play-button
@@ -123,25 +132,26 @@ export class PlayAssetsLocalArchive extends LitElement {
           icon="share-ios-outline"
           icon-color="red"
           title="Unmount"
-          @click=${() => this._assets?.unmount()}
+          @click=${() => this._assets.unmount()}
         ></play-button>
       </div>
     `
   }
 
-  #onFiles = async (ev: CustomEvent<FilesSelectedEvent>) => {
+  #onFiles = async (ev: CustomEvent<FileSelection>): Promise<void> => {
     const file = ev.detail.fileHandles?.[0] ?? ev.detail.files?.[0]
     if (file) {
       await this._assets?.mountLocalArchive(file)
     }
   }
 
-  #assetsUpdated = () => {
-    this._selectStyle = this._assets?.archiveHandle
+  #assetsUpdated = (): void => {
+    this._selectStyle = this._assets.isArchiveMounted
       ? STYLE_COLLAPSED
       : STYLE_VISIBLE
-    this._detailsStyle = this._assets?.archiveHandle
+    this._detailsStyle = this._assets.isArchiveMounted
       ? STYLE_VISIBLE
       : STYLE_COLLAPSED
+    this.requestUpdate()
   }
 }