Add asset support to :play

package.json

@@ -10,20 +10,24 @@
     "@codemirror/lint": "6.5.0",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.26.3",
-    "@devvit/previews": "0.10.20",
-    "@devvit/protos": "0.10.20",
-    "@devvit/public-api": "0.10.20",
-    "@devvit/runtime-lite": "0.10.20",
-    "@devvit/shared-types": "0.10.20",
-    "@devvit/ui-renderer": "0.10.20",
+    "@devvit/previews": "0.10.21-next-2024-05-13-b48ce196f.0",
+    "@devvit/protos": "0.10.21-next-2024-05-13-b48ce196f.0",
+    "@devvit/public-api": "0.10.21-next-2024-05-13-b48ce196f.0",
+    "@devvit/runtime-lite": "0.10.21-next-2024-05-13-b48ce196f.0",
+    "@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",
     "@types/jsdom": "21.1.6",
     "@types/mocha": "10.0.6",
     "@typescript/vfs": "1.5.0",
     "@web/dev-server-esbuild": "1.0.2",
     "@web/test-runner": "0.18.1",
+    "@zenfs/core": "0.9.7",
+    "@zenfs/dom": "0.2.6",
+    "@zenfs/zip": "0.3.1",
     "codemirror": "6.0.1",
     "esbuild": "0.20.2",
+    "idb-keyval": "6.2.1",
     "jsdom": "24.0.0",
     "lit": "3.1.3",
     "lit-analyzer": "2.0.3",
@@ -56,8 +60,8 @@
       "gzip": "3.5 KB"
     },
     "dist/play-pen.js": {
-      "none": "35000 KB",
-      "gzip": "5200 KB"
+      "none": "37000 KB",
+      "gzip": "5400 KB"
     }
   },
   "typesVersions": {

src/bundler/linker.ts

@@ -1,15 +1,21 @@
 import type {LinkedBundle, SerializableServiceDefinition} from '@devvit/protos'
+import type {AssetMap} from '@devvit/shared-types/Assets.js'
 
 /**
  * @arg es JavaScript
  * @arg hostname Arbitrary but something unique to the window like
  *               hello-world.local may allow concurrent sessions with the
  *               remote.
+ * @arg assets AssetMap describing how to map project assets to URLs
  */
-export function link(es: string, hostname: string): LinkedBundle {
+export function link(
+  es: string,
+  hostname: string,
+  assets?: AssetMap
+): LinkedBundle {
   return {
     actor: {name: 'pen', owner: 'play', version: '0.0.0.0'},
-    assets: {},
+    assets: assets ?? {},
     code: es,
     hostname,
     provides: provides(),

src/elements/play-assets-dialog.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {PlayAssetsDialog} from './play-assets-dialog'
+
+test('tag is defined', () => {
+  const el = document.createElement('play-assets-dialog')
+  assert.instanceOf(el, PlayAssetsDialog)
+})

src/elements/play-assets-dialog.ts

@@ -0,0 +1,154 @@
+import {customElement, property, query} from 'lit/decorators.js'
+import {
+  css,
+  type CSSResultGroup,
+  html,
+  LitElement,
+  type TemplateResult
+} from 'lit'
+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 AssetsFilesystemChange,
+  type AssetsFilesystemType,
+  type AssetsState,
+  emptyAssetsState
+} from './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'
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'play-assets-dialog': PlayAssetsDialog
+  }
+}
+
+@customElement('play-assets-dialog')
+export class PlayAssetsDialog extends LitElement {
+  static override readonly styles: CSSResultGroup = css`
+    ${cssReset}
+
+    legend {
+      font-weight: bold;
+    }
+
+    fieldset {
+      margin-bottom: var(--space);
+    }
+
+    #localFs {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  `
+
+  @property({attribute: false})
+  assetsState: AssetsState = emptyAssetsState()
+
+  @property({attribute: 'enable-local-assets', type: Boolean})
+  enableLocalAssets: boolean = false
+
+  @query('play-dialog', true)
+  private _dialog!: PlayDialog
+
+  open(): void {
+    this._dialog.open()
+  }
+
+  close(): void {
+    this._dialog.close()
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <play-dialog
+        dialog-title="Assets"
+        description="Manage static assets available to blocks in :play"
+      >
+        ${when(this.enableLocalAssets, this.#renderFilesystemPicker)}
+
+        <fieldset>
+          <legend>${this.#filesystemTitle}:</legend>
+          ${choose(this.assetsState.filesystemType, [
+            [
+              'virtual',
+              () =>
+                html`<play-assets-virtual-fs
+                  .assetsState=${this.assetsState}
+                ></play-assets-virtual-fs>`
+            ],
+            ['local', this.#renderLocalFs]
+          ])}
+        </fieldset>
+      </play-dialog>
+    `
+  }
+
+  #renderFilesystemPicker = (): TemplateResult => {
+    return html`<fieldset>
+      <legend>Filesystem type:</legend>
+      <label>
+        <input
+          name="filesystemType"
+          type="radio"
+          ?checked="${this.assetsState.filesystemType === 'virtual'}"
+          @change=${this.#setFilesystem}
+          value="virtual"
+        />
+        Virtual
+      </label>
+      <label>
+        <input
+          name="filesystemType"
+          type="radio"
+          ?checked="${this.assetsState.filesystemType === 'local'}"
+          @change=${this.#setFilesystem}
+          value="local"
+        />
+        Local
+      </label>
+    </fieldset>`
+  }
+
+  #setFilesystem = (
+    ev: InputEvent & {currentTarget: HTMLInputElement}
+  ): void => {
+    const filesystemType = ev.currentTarget.value as AssetsFilesystemType
+    this.dispatchEvent(
+      Bubble<AssetsFilesystemChange>('assets-filesystem-change', {
+        kind: 'filesystem-type',
+        filesystemType
+      })
+    )
+  }
+
+  #renderLocalFs = (): TemplateResult => {
+    return html`
+      <div id="localFs">
+        ${when(
+          this.assetsState.hasFileAccessAPI,
+          () =>
+            html`<play-assets-local-directory
+              .assetsState=${this.assetsState}
+            ></play-assets-local-directory>`
+        )}
+        <play-assets-local-archive
+          .assetsState=${this.assetsState}
+        ></play-assets-local-archive>
+      </div>
+    `
+  }
+
+  get #filesystemTitle(): string {
+    return this.assetsState.filesystemType === 'virtual'
+      ? 'Manage files'
+      : 'Filesystem source'
+  }
+}

src/elements/play-assets/file-upload-dropper.test.ts

@@ -0,0 +1,7 @@
+import {assert} from '@esm-bundle/chai'
+import {FileUploadDropper} from './file-upload-dropper'
+
+test('tag is defined', () => {
+  const el = document.createElement('file-upload-dropper')
+  assert.instanceOf(el, FileUploadDropper)
+})