Refactor again

reddit · May 22, 2024 · a3c08dc · a3c08dc
1 parent 58b1cf5
commit a3c08dc
Show file tree

Hide file tree

Showing 12 changed files with 490 additions and 407 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@devvit/shared-types": "0.10.21-next-2024-05-13-b48ce196f.0",
     "@devvit/ui-renderer": "0.10.21-next-2024-05-13-b48ce196f.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
-    "@lit/context": "1.1.1",
     "@types/jsdom": "21.1.6",
     "@types/mocha": "10.0.6",
     "@typescript/vfs": "1.5.0",

diff --git a/src/elements/play-assets-dialog.ts b/src/elements/play-assets-dialog.ts
@@ -9,20 +9,19 @@ import {
 import {PlayDialog} from './play-dialog/play-dialog.js'
 import {choose} from 'lit-html/directives/choose.js'
 import {when} from 'lit-html/directives/when.js'
+import {cssReset} from '../utils/css-reset.js'
+import {Bubble} from '../utils/bubble.js'
 import {
-  type AssetFilesystemType,
-  assetsContext,
-  PlayAssets
+  type AssetsFilesystemChange,
+  type AssetsFilesystemType,
+  type AssetsState,
+  emptyAssetsState
 } 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 HTMLElementTagNameMap {
@@ -50,12 +49,12 @@ export class PlayAssetsDialog extends LitElement {
     }
   `
 
+  @property({attribute: false})
+  assetsState: AssetsState = emptyAssetsState()
+
   @property({attribute: 'enable-local-assets', type: Boolean})
   enableLocalAssets: boolean = false
 
-  @consume({context: assetsContext})
-  private _assets!: PlayAssets
-
   @query('play-dialog', true)
   private _dialog!: PlayDialog
 
@@ -67,18 +66,6 @@ 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-dialog
@@ -89,10 +76,13 @@ export class PlayAssetsDialog extends LitElement {
 
         <fieldset>
           <legend>${this.#filesystemTitle}:</legend>
-          ${choose(this._assets.filesystemType, [
+          ${choose(this.assetsState.filesystemType, [
             [
               'virtual',
-              () => html`<play-assets-virtual-fs></play-assets-virtual-fs>`
+              () =>
+                html`<play-assets-virtual-fs
+                  .assetsState=${this.assetsState}
+                ></play-assets-virtual-fs>`
             ],
             ['local', this.#renderLocalFs]
           ])}
@@ -108,7 +98,7 @@ export class PlayAssetsDialog extends LitElement {
         <input
           name="filesystemType"
           type="radio"
-          ?checked="${this._assets.filesystemType === 'virtual'}"
+          ?checked="${this.assetsState.filesystemType === 'virtual'}"
           @change=${this.#setFilesystem}
           value="virtual"
         />
@@ -118,7 +108,7 @@ export class PlayAssetsDialog extends LitElement {
         <input
           name="filesystemType"
           type="radio"
-          ?checked="${this._assets.filesystemType === 'local'}"
+          ?checked="${this.assetsState.filesystemType === 'local'}"
           @change=${this.#setFilesystem}
           value="local"
         />
@@ -130,32 +120,35 @@ export class PlayAssetsDialog extends LitElement {
   #setFilesystem = (
     ev: InputEvent & {currentTarget: HTMLInputElement}
   ): void => {
-    const filesystemType = ev.currentTarget.value as AssetFilesystemType
+    const filesystemType = ev.currentTarget.value as AssetsFilesystemType
     this.dispatchEvent(
-      Bubble<AssetFilesystemType>('assets-set-filesystem', filesystemType)
+      Bubble<AssetsFilesystemChange>('assets-filesystem-change', {
+        kind: 'filesystem-type',
+        filesystemType
+      })
     )
   }
 
   #renderLocalFs = (): TemplateResult => {
     return html`
       <div id="localFs">
         ${when(
-          PlayAssets.hasFileAccessAPI,
+          this.assetsState.hasFileAccessAPI,
           () =>
-            html`<play-assets-local-directory></play-assets-local-directory>`
+            html`<play-assets-local-directory
+              .assetsState=${this.assetsState}
+            ></play-assets-local-directory>`
         )}
-        <play-assets-local-archive></play-assets-local-archive>
+        <play-assets-local-archive
+          .assetsState=${this.assetsState}
+        ></play-assets-local-archive>
       </div>
     `
   }
 
   get #filesystemTitle(): string {
-    return this._assets.filesystemType === 'virtual'
+    return this.assetsState.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
@@ -17,7 +17,6 @@ import {
 } from '../../utils/file-access-api.js'
 import {cssReset} from '../../utils/css-reset.js'
 import {Bubble} from '../../utils/bubble.js'
-import {PlayAssets} from './play-assets.js'
 
 declare global {
   interface HTMLElementEventMap {
@@ -107,11 +106,11 @@ export class FileUploadDropper extends LitElement {
         ?multiple="${this.multiple}"
         @change=${this.#processFileInput}
       />
-      <label for="${PlayAssets.hasFileAccessAPI ? '' : 'fileInput'}">
+      <label for="${hasFileAccessAPI ? '' : 'fileInput'}">
         <div
           id="fileDrop"
           class="${classMap({dragenter: this._dragging})}"
-          @click=${PlayAssets.hasFileAccessAPI ? this.#pickFile : undefined}
+          @click=${hasFileAccessAPI ? this.#pickFile : undefined}
           @dragenter=${this.#dragStart}
           @dragover=${this.#dragStart}
           @dragleave=${this.#dragEnd}

diff --git a/src/elements/play-assets/play-assets-local-archive.ts b/src/elements/play-assets/play-assets-local-archive.ts
@@ -1,16 +1,26 @@
-import {customElement, state} from 'lit/decorators.js'
-import {css, html, LitElement, type TemplateResult} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
+import {
+  css,
+  html,
+  LitElement,
+  type PropertyValues,
+  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 {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'
+import {
+  type AssetsFilesystemChange,
+  type AssetsState,
+  emptyAssetsState
+} from './play-assets.js'
+import {Bubble} from '../../utils/bubble.js'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,25 +65,24 @@ export class PlayAssetsLocalArchive extends LitElement {
     }
   `
 
-  @consume({context: assetsContext})
-  private _assets!: PlayAssets
+  @property({attribute: false})
+  assetsState: AssetsState = emptyAssetsState()
 
   @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 willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('assetsState')) {
+      this._selectStyle = this.assetsState.archiveFilename
+        ? STYLE_COLLAPSED
+        : STYLE_VISIBLE
+      this._detailsStyle = this.assetsState.archiveFilename
+        ? STYLE_VISIBLE
+        : STYLE_COLLAPSED
+    }
   }
 
   protected override render(): TemplateResult {
@@ -112,18 +121,18 @@ export class PlayAssetsLocalArchive extends LitElement {
       <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.assetsState.archiveFilename}</pre>
+          <span>File count: ${this.assetsState.count}</span>
         </div>
         ${when(
-          PlayAssets.hasFileAccessAPI,
+          this.assetsState.hasFileAccessAPI,
           () =>
             html`<play-button
               appearance="bordered"
               size="small"
               icon="restart-outline"
               title="Refresh"
-              @click=${() => this._assets.remountLocalArchive()}
+              @click=${() => this.#emitChange({kind: 'remount-archive'})}
             ></play-button>`
         )}
         <play-button
@@ -132,7 +141,7 @@ export class PlayAssetsLocalArchive extends LitElement {
           icon="share-ios-outline"
           icon-color="red"
           title="Unmount"
-          @click=${() => this._assets.unmount()}
+          @click=${() => this.#emitChange({kind: 'unmount'})}
         ></play-button>
       </div>
     `
@@ -141,17 +150,13 @@ export class PlayAssetsLocalArchive extends LitElement {
   #onFiles = async (ev: CustomEvent<FileSelection>): Promise<void> => {
     const file = ev.detail.fileHandles?.[0] ?? ev.detail.files?.[0]
     if (file) {
-      await this._assets?.mountLocalArchive(file)
+      this.#emitChange({kind: 'mount-archive', archiveHandle: file})
     }
   }
 
-  #assetsUpdated = (): void => {
-    this._selectStyle = this._assets.isArchiveMounted
-      ? STYLE_COLLAPSED
-      : STYLE_VISIBLE
-    this._detailsStyle = this._assets.isArchiveMounted
-      ? STYLE_VISIBLE
-      : STYLE_COLLAPSED
-    this.requestUpdate()
+  #emitChange(change: AssetsFilesystemChange): void {
+    this.dispatchEvent(
+      Bubble<AssetsFilesystemChange>('assets-filesystem-change', change)
+    )
   }
 }
diff --git a/src/elements/play-assets/play-assets-local-directory.ts b/src/elements/play-assets/play-assets-local-directory.ts
@@ -1,12 +1,16 @@
-import {customElement} from 'lit/decorators.js'
+import {customElement, property} from 'lit/decorators.js'
 import {css, html, LitElement, type TemplateResult} from 'lit'
 import {cssReset} from '../../utils/css-reset.js'
 import {when} from 'lit-html/directives/when.js'
 import {fileAccessContext} from '../../utils/file-access-api.js'
-import {assetsContext, type PlayAssets} from './play-assets.js'
-import {consume} from '@lit/context'
 
 import '../play-button.js'
+import {
+  type AssetsFilesystemChange,
+  type AssetsState,
+  emptyAssetsState
+} from './play-assets.js'
+import {Bubble} from '../../utils/bubble.js'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,36 +53,24 @@ export class PlayAssetsLocalDirectory extends LitElement {
     }
   `
 
-  @consume({context: assetsContext})
-  private _assets!: PlayAssets
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-
-    this._assets.addEventListener('assets-updated', this.#assetsUpdated)
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this._assets.removeEventListener('assets-updated', this.#assetsUpdated)
-  }
+  @property({attribute: false})
+  assetsState: AssetsState = emptyAssetsState()
 
   protected override render(): TemplateResult {
     return html`
       <span>Local directory:</span>
       <div class="row vcenter">
         ${when(
-          this._assets.isDirectoryMounted,
+          this.assetsState.directoryName,
           () =>
-            html`<pre class="grow">.../${this._assets.directoryName}</pre>
+            html`<pre class="grow">.../${this.assetsState.directoryName}</pre>
               <play-button
                 appearance="bordered"
                 size="small"
                 icon="share-ios-outline"
                 icon-color="red"
                 title="Unmount"
-                @click=${() => this._assets.unmount()}
+                @click=${() => this.#emitChange({kind: 'unmount'})}
               ></play-button>`,
           () =>
             html`<span class="no-selection grow">No directory selected</span
@@ -99,11 +91,13 @@ export class PlayAssetsLocalDirectory extends LitElement {
       mode: 'read'
     })
     if (directoryHandle) {
-      await this._assets.mountLocalDirectory(directoryHandle)
+      this.#emitChange({kind: 'mount-directory', directoryHandle})
     }
   }
 
-  #assetsUpdated = (): void => {
-    this.requestUpdate()
+  #emitChange(change: AssetsFilesystemChange): void {
+    this.dispatchEvent(
+      Bubble<AssetsFilesystemChange>('assets-filesystem-change', change)
+    )
   }
 }