[DX-5712] Upgrade to Devvit 0.10.15-next-2024-02-01-b904edfe7.0

Bunch of API changes to improve alignment with production. See polyrepo
PR for details.

package.json

@@ -6,21 +6,21 @@
     "@ampproject/filesize": "4.3.0",
     "@codemirror/autocomplete": "6.12.0",
     "@codemirror/lang-javascript": "6.2.1",
-    "@codemirror/language": "6.10.0",
+    "@codemirror/language": "6.10.1",
     "@codemirror/lint": "6.5.0",
     "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.23.1",
-    "@devvit/previews": "0.10.15-next-2024-02-01-b904edfe7.0",
-    "@devvit/protos": "0.10.15-next-2024-02-01-b904edfe7.0",
-    "@devvit/public-api": "0.10.15-next-2024-02-01-b904edfe7.0",
-    "@devvit/runtime-lite": "0.10.15-next-2024-02-01-b904edfe7.0",
+    "@codemirror/view": "6.24.0",
+    "@devvit/previews": "0.10.15-next-2024-02-12-96a7f2dbb.0",
+    "@devvit/protos": "0.10.15-next-2024-02-12-96a7f2dbb.0",
+    "@devvit/public-api": "0.10.15-next-2024-02-12-96a7f2dbb.0",
+    "@devvit/runtime-lite": "0.10.15-next-2024-02-12-96a7f2dbb.0",
     "@typescript/vfs": "1.5.0",
     "codemirror": "6.0.1",
     "esbuild": "0.19.5",
     "lit": "3.1.2",
     "lit-analyzer": "2.0.3",
     "lz-string": "1.5.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "typescript": "5.3.3",
     "vitest": "1.2.2"
   },

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: PreviewError[]
+  previewErrs: DevvitUIError[]
   tsErrs: Diagnostic[]
 }

src/ui/bubble.ts

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

src/ui/components/play-console.ts

@@ -1,3 +1,4 @@
+import type {DevvitUIError} from '@devvit/previews/dist/devvit-blocks-preview.js'
 import {isCircuitBreaker} from '@devvit/runtime-lite/types/CircuitBreaker.js'
 import {
   LitElement,
@@ -10,7 +11,6 @@ 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: PreviewError): TemplateResult<1> {
+function previewErrRow(err: DevvitUIError): 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()}
-            @error=${(ev: CustomEvent<PreviewError>) =>
+            @devvit-ui-error=${(ev: CustomEvent<DevvitUIError>) =>
               this.#appendPreviewError(ev.detail)}
           ></play-preview>
           <play-preview-controls
@@ -222,7 +222,7 @@ export class PlayPen extends LitElement {
     `
   }
 
-  #appendPreviewError(err: PreviewError): void {
+  #appendPreviewError(err: DevvitUIError): 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, state} from 'lit/decorators.js'
+import {customElement, property} from 'lit/decorators.js'
 import type {ColorScheme} from '../../types/color-scheme.js'
 import {Bubble} from '../bubble.js'
 
 import '@devvit/previews/dist/devvit-preview.js'
-import type {PreviewError} from '../../types/preview-error.js'
+
+const localRuntimeCode: Blob = new Blob([penWorker], {type: 'text/javascript'})
 
 declare global {
   interface HTMLElementEventMap {
-    error: CustomEvent<PreviewError>
     'clear-errors': CustomEvent<undefined>
   }
   interface HTMLElementTagNameMap {
@@ -78,62 +78,45 @@ 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_devvit']},
+    'devvit-subreddit': {values: ['t5_sub']},
     'devvit-user': {values: ['t2_user']}
   }
 
   async reset(): Promise<void> {
     if (!this.bundle) return
-    this._client.quit()
     this.dispatchEvent(Bubble<undefined>('clear-errors', undefined))
-    try {
-      await this._client.loadBundle(this.bundle)
-    } catch (err) {
-      this.dispatchEvent(Bubble<PreviewError>('error', {type: 'Error', err}))
-    }
-    // Re-render the preview.
+    this.bundle = {...this.bundle}
     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
-            @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>
-        `}
+        ${this.bundle
+          ? html`
+              <devvit-preview
+                .bundle=${this.bundle}
+                .localRuntimeCode=${localRuntimeCode}
+                .metadata=${this.#meta}
+                .scheme=${this.scheme}
+                style="--rem16: 50px;"
+                ?useExperimentalBlocks=${true}
+              ></devvit-preview>
+            `
+          : nothing}
       </div>
     `
   }
 
   protected override async willUpdate(
     props: PropertyValues<this>
   ): Promise<void> {
-    if (props.has('bundle')) await this.reset()
-    else this.requestUpdate()
+    super.willUpdate(props)
+    if (props.has('bundle'))
+      this.dispatchEvent(Bubble<undefined>('clear-errors', undefined))
   }
 }