Revert "[DX-5712] Upgrade to Devvit 0.10.15-next"

This reverts commit 1d7e631.

src/types/diagnostics.ts

@@ -1,9 +1,9 @@
-import type {DevvitUIError} from '@devvit/previews/dist/devvit-blocks-preview.js'
 import type {Diagnostic} from 'typescript'
+import type {PreviewError} from './preview-error.js'
 
 export type Diagnostics = {
   // to-do: unhandled promise rejections.
   /** Uncaught errors thrown when executing the pen program. */
-  previewErrs: DevvitUIError[]
+  previewErrs: PreviewError[]
   tsErrs: Diagnostic[]
 }

src/types/preview-error.ts

@@ -0,0 +1,3 @@
+import type {WorkerErrorType} from '@devvit/runtime-lite/client/BrowserLiteClient.js'
+
+export type PreviewError = {type: WorkerErrorType; err: unknown}

src/ui/bubble.ts

@@ -1,4 +1,7 @@
 export function Bubble<T>(type: string, detail: T): CustomEvent<T> {
-  // Composed bubbles through shadow DOM.
-  return new CustomEvent(type, {bubbles: true, composed: true, detail})
+  return new CustomEvent(type, {
+    bubbles: true,
+    composed: true, // Bubble through shadow DOM.
+    detail
+  })
 }

src/ui/components/play-console.ts

@@ -1,4 +1,3 @@
-import type {DevvitUIError} from '@devvit/previews/dist/devvit-blocks-preview.js'
 import {isCircuitBreaker} from '@devvit/runtime-lite/types/CircuitBreaker.js'
 import {
   LitElement,
@@ -11,6 +10,7 @@ import {customElement, property} from 'lit/decorators.js'
 import type {Diagnostic} from 'typescript'
 import ts from 'typescript'
 import type {Diagnostics} from '../../types/diagnostics.js'
+import type {PreviewError} from '../../types/preview-error.js'
 import {Bubble} from '../bubble.js'
 
 declare global {
@@ -169,7 +169,7 @@ export class PlayConsole extends LitElement {
   }
 }
 
-function previewErrRow(err: DevvitUIError): TemplateResult<1> {
+function previewErrRow(err: PreviewError): TemplateResult<1> {
   const detail =
     err.type === 'UnhandledRejection'
       ? 'Unhandled promise rejection; `await` asynchronous execution and ' +

src/ui/components/play-pen/play-pen.ts

@@ -26,13 +26,13 @@ import svg from '../../../examples/svg.example.js'
 import type {ColorScheme} from '../../../types/color-scheme.js'
 import type {Diagnostics} from '../../../types/diagnostics.js'
 import {PenSave, loadPen, penToHash, savePen} from '../../../types/pen-save.js'
+import type {PreviewError} from '../../../types/preview-error.js'
 import {throttle} from '../../../utils/throttle.js'
 import type {OpenLine} from '../play-console.js'
 import type {PlayEditor} from '../play-editor/play-editor.js'
 import type {PlayPreview} from '../play-preview.js'
 import type {PlayToast} from '../play-toast.js'
 import penVars from './pen-vars.css'
-import type {DevvitUIError} from '@devvit/previews/dist/devvit-blocks-preview.js'
 
 import '../play-editor/play-editor.js'
 import '../play-pen-footer.js'
@@ -196,7 +196,7 @@ export class PlayPen extends LitElement {
             previewWidth=${this._previewWidth}
             scheme=${ifDefined(this._scheme)}
             @clear-errors=${() => this.#clearPreviewErrors()}
-            @devvit-ui-error=${(ev: CustomEvent<DevvitUIError>) =>
+            @error=${(ev: CustomEvent<PreviewError>) =>
               this.#appendPreviewError(ev.detail)}
           ></play-preview>
           <play-preview-controls
@@ -222,7 +222,7 @@ export class PlayPen extends LitElement {
     `
   }
 
-  #appendPreviewError(err: DevvitUIError): void {
+  #appendPreviewError(err: PreviewError): void {
     this._diagnostics = {
       ...this._diagnostics,
       previewErrs: [...this._diagnostics.previewErrs, err]

src/ui/components/play-preview.ts

@@ -1,24 +1,24 @@
 import penWorker from '@devvit/previews/dist/pen.worker.min.js'
 import type {LinkedBundle, Metadata} from '@devvit/protos'
+import {BrowserLiteClient} from '@devvit/runtime-lite/client/BrowserLiteClient.js'
 import {
   LitElement,
   css,
   html,
-  nothing,
   type CSSResultGroup,
   type PropertyValues,
   type TemplateResult
 } from 'lit'
-import {customElement, property} from 'lit/decorators.js'
+import {customElement, property, state} from 'lit/decorators.js'
 import type {ColorScheme} from '../../types/color-scheme.js'
 import {Bubble} from '../bubble.js'
 
 import '@devvit/previews/dist/devvit-preview.js'
-
-const localRuntimeCode: Blob = new Blob([penWorker], {type: 'text/javascript'})
+import type {PreviewError} from '../../types/preview-error.js'
 
 declare global {
   interface HTMLElementEventMap {
+    error: CustomEvent<PreviewError>
     'clear-errors': CustomEvent<undefined>
   }
   interface HTMLElementTagNameMap {
@@ -78,45 +78,62 @@ export class PlayPreview extends LitElement {
   @property({type: Number}) previewWidth?: number
   @property() scheme?: ColorScheme
 
+  @state() private readonly _client: BrowserLiteClient = new BrowserLiteClient(
+    new Blob([penWorker], {type: 'text/javascript'}),
+    (type, err) =>
+      this.dispatchEvent(Bubble<PreviewError>('error', {type, err}))
+  )
   #meta: Metadata = {
     'devvit-app-user': {values: ['t2_appuser']},
-    'devvit-subreddit': {values: ['t5_sub']},
+    'devvit-subreddit': {values: ['t5_devvit']},
     'devvit-user': {values: ['t2_user']}
   }
 
   async reset(): Promise<void> {
     if (!this.bundle) return
+    this._client.quit()
     this.dispatchEvent(Bubble<undefined>('clear-errors', undefined))
-    this.bundle = {...this.bundle}
+    try {
+      await this._client.loadBundle(this.bundle)
+    } catch (err) {
+      this.dispatchEvent(Bubble<PreviewError>('error', {type: 'Error', err}))
+    }
+    // Re-render the preview.
     this.#meta = {...this.#meta}
+    this.requestUpdate()
+  }
+
+  override disconnectedCallback(): void {
+    this._client.quit()
+    super.disconnectedCallback()
   }
 
   protected override render(): TemplateResult {
     // to-do: don't override toaster's --rem16 to offset the toast. Upstream a
     // variable.
     return html`
       <div class="preview">
-        ${this.bundle
-          ? html`
-              <devvit-preview
-                .bundle=${this.bundle}
-                .localRuntimeCode=${localRuntimeCode}
-                .metadata=${this.#meta}
-                .scheme=${this.scheme}
-                style="--rem16: 50px;"
-                ?useExperimentalBlocks=${true}
-              ></devvit-preview>
-            `
-          : nothing}
+        ${this.bundle &&
+        html`
+          <devvit-preview
+            @devvit-ui-error=${(ev: CustomEvent<unknown>) =>
+              this.dispatchEvent(
+                Bubble<PreviewError>('error', {type: 'Error', err: ev.detail})
+              )}
+            .meta="${this.#meta}"
+            .client=${this._client}
+            .scheme=${this.scheme}
+            style="--rem16: 50px;"
+          ></devvit-preview>
+        `}
       </div>
     `
   }
 
   protected override async willUpdate(
     props: PropertyValues<this>
   ): Promise<void> {
-    super.willUpdate(props)
-    if (props.has('bundle'))
-      this.dispatchEvent(Bubble<undefined>('clear-errors', undefined))
+    if (props.has('bundle')) await this.reset()
+    else this.requestUpdate()
   }
 }