Use UI Request Flag (#15)

<!-- If this pull request closes an issue, please mention the issue
number below -->
Closes # <!-- Issue # here -->

## 💸 TL;DR
<!-- What's the three sentence summary of purpose of the PR -->

This bumps devvit and adds a flag to enabling ui reuqest to the settings
modal.



## 📜 Details
[Design Doc](<!-- insert Google Doc link here if applicable -->)

[Jira](<!-- insert Jira link if applicable -->)

<!-- Add additional details required for the PR: breaking changes,
screenshots, external dependency changes -->

## 🧪 Testing Steps / Validation
<!-- add details on how this PR has been tested, include reproductions
and screenshots where applicable -->



https://github.com/reddit/play/assets/13633613/4293cfbc-3f16-44c6-8ebe-773b9a921363



## ✅ Checks
<!-- Make sure your pr passes the CI checks and do check the following
fields as needed - -->
- [x] CI tests (if present) are passing
- [x] Adheres to code style for repo
- [x] Contributor License Agreement (CLA) completed if not a Reddit
employee

package.json

@@ -31,12 +31,12 @@
     "@codemirror/lint": "6.5.0",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.26.3",
-    "@devvit/previews": "0.10.19-next-2024-04-18-468957c25.0",
-    "@devvit/protos": "0.10.19-next-2024-04-18-468957c25.0",
-    "@devvit/public-api": "0.10.19-next-2024-04-18-468957c25.0",
-    "@devvit/runtime-lite": "0.10.19-next-2024-04-18-468957c25.0",
-    "@devvit/shared-types": "0.10.19-next-2024-04-18-468957c25.0",
-    "@devvit/ui-renderer": "0.10.19-next-2024-04-18-468957c25.0",
+    "@devvit/previews": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/protos": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/public-api": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/runtime-lite": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/shared-types": "0.10.20-next-2024-05-01-553651f2f.0",
+    "@devvit/ui-renderer": "0.10.20-next-2024-05-01-553651f2f.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@types/jsdom": "21.1.6",
     "@types/mocha": "10.0.6",

src/elements/play-pen-header.ts

@@ -83,6 +83,8 @@ export class PlayPenHeader extends LitElement {
   @property() url: string = ''
   @property({attribute: 'use-experimental-blocks', type: Boolean})
   useExperimentalBlocks: boolean = false
+  @property({attribute: 'use-ui-request', type: Boolean})
+  useUIRequest: boolean = false
   @property({attribute: 'use-local-runtime', type: Boolean})
   useLocalRuntime: boolean = false
   @property({attribute: 'use-remote-runtime', type: Boolean})
@@ -148,6 +150,7 @@ export class PlayPenHeader extends LitElement {
         ?runtime-debug-logging=${this.runtimeDebugLogging}
         ?sandbox-app=${this.sandboxApp}
         ?use-experimental-blocks=${this.useExperimentalBlocks}
+        ?use-ui-request=${this.useUIRequest}
         ?use-local-runtime=${this.useLocalRuntime}
         ?use-remote-runtime=${this.useRemoteRuntime}
       ></play-settings-dialog>

src/elements/play-pen/play-pen.ts

@@ -150,6 +150,7 @@ export class PlayPen extends LitElement {
   @state() private _useExperimentalBlocks: boolean = false
   @state() private _useLocalRuntime: boolean = false
   @state() private _useRemoteRuntime: boolean = false
+  @state() private _useUIRequest: boolean = false
   @query('play-editor') private _editor!: PlayEditor
   @query('play-toast') private _toast!: PlayToast
   #bundleStore?: BundleStore | undefined
@@ -180,6 +181,7 @@ export class PlayPen extends LitElement {
       this._useExperimentalBlocks = settings.useExperimentalBlocks
       this._useLocalRuntime = settings.useLocalRuntime
       this._useRemoteRuntime = settings.useRemoteRuntime
+      this._useUIRequest = settings.useUIRequest
       // If remote is enabled, #bundleStore is initialized in willUpdate() and
       // bundle is loaded.
     }
@@ -210,6 +212,7 @@ export class PlayPen extends LitElement {
         ?use-experimental-blocks=${this._useExperimentalBlocks}
         ?use-local-runtime=${this._useLocalRuntime}
         ?use-remote-runtime=${this._useRemoteRuntime}
+        ?use-ui-request=${this._useUIRequest}
         @edit-name=${(ev: CustomEvent<string>) =>
           this.#setName(ev.detail, true)}
         @edit-src=${(ev: CustomEvent<string>) => {
@@ -229,6 +232,8 @@ export class PlayPen extends LitElement {
           (this._useRemoteRuntime = ev.detail)}
         @edit-remote-runtime-origin=${(ev: CustomEvent<string>) =>
           (this._remoteRuntimeOrigin = ev.detail)}
+        @use-ui-request=${(ev: CustomEvent<boolean>) =>
+          (this._useUIRequest = ev.detail)}
         @share=${this.#onShare}
       ></play-pen-header>
       <main>
@@ -257,6 +262,7 @@ export class PlayPen extends LitElement {
             ?use-experimental-blocks=${this._useExperimentalBlocks}
             ?use-local-runtime=${this._useLocalRuntime}
             ?use-remote-runtime=${this._useRemoteRuntime}
+            ?use-ui-request=${this._useUIRequest}
             @clear-errors=${() => this.#clearPreviewErrors()}
             @devvit-ui-error=${(ev: CustomEvent<DevvitUIError>) =>
               this.#appendPreviewError(ev.detail)}
@@ -299,6 +305,7 @@ export class PlayPen extends LitElement {
         _useLocalRuntime: boolean
         _useRemoteRuntime: boolean
         _remoteRuntimeOrigin: string
+        _useUIRequest: boolean
       }>
   ): Promise<void> {
     super.willUpdate(props)
@@ -311,7 +318,8 @@ export class PlayPen extends LitElement {
         props.has('_useExperimentalBlocks') ||
         props.has('_remoteRuntimeOrigin') ||
         props.has('_useLocalRuntime') ||
-        props.has('_useRemoteRuntime'))
+        props.has('_useRemoteRuntime') ||
+        props.has('_useUIRequest'))
     )
       saveSettings(localStorage, {
         openConsole: this._openConsole,
@@ -321,6 +329,7 @@ export class PlayPen extends LitElement {
         useLocalRuntime: this._useLocalRuntime,
         useRemoteRuntime: this._useRemoteRuntime,
         remoteRuntimeOrigin: this._remoteRuntimeOrigin,
+        useUIRequest: this._useUIRequest,
         version: 1
       })
 

src/elements/play-preview.ts

@@ -107,6 +107,8 @@ export class PlayPreview extends LitElement {
   useLocalRuntime: boolean = false
   @property({attribute: 'use-remote-runtime', type: Boolean})
   useRemoteRuntime: boolean = false
+  @property({attribute: 'use-ui-request', type: Boolean})
+  useUIRequest: boolean = false
 
   @state() private _err = false
 
@@ -144,6 +146,7 @@ export class PlayPreview extends LitElement {
                 ?runtime-debug-logging=${this.runtimeDebugLogging}
                 style="--rem16: 50px;"
                 ?use-experimental-blocks=${this.useExperimentalBlocks}
+                ?use-ui-request=${this.useUIRequest}
                 @devvit-ui-error=${() => (this._err = true)}
               ></devvit-preview>
             `

src/elements/play-settings-dialog.ts

@@ -20,6 +20,7 @@ declare global {
     'use-experimental-blocks': CustomEvent<boolean>
     'use-local-runtime': CustomEvent<boolean>
     'use-remote-runtime': CustomEvent<boolean>
+    'use-ui-request': CustomEvent<boolean>
   }
   interface HTMLElementTagNameMap {
     'play-settings-dialog': PlaySettingsDialog
@@ -121,6 +122,8 @@ export class PlaySettingsDialog extends LitElement {
   useLocalRuntime: boolean = false
   @property({attribute: 'use-remote-runtime', type: Boolean})
   useRemoteRuntime: boolean = false
+  @property({attribute: 'use-ui-request', type: Boolean})
+  useUIRequest: boolean = false
   @query('dialog') private _dialog!: HTMLDialogElement
 
   open(): void {
@@ -237,6 +240,18 @@ export class PlaySettingsDialog extends LitElement {
             Use experimental blocks. Default:
             ${onOff(defaultSettings.useExperimentalBlocks)}.
           </label>
+          <label>
+            <input
+              ?checked="${this.useUIRequest}"
+              type="checkbox"
+              @change=${(ev: Event & {currentTarget: HTMLInputElement}) =>
+                this.dispatchEvent(
+                  Bubble<boolean>('use-ui-request', ev.currentTarget.checked)
+                )}
+            />
+            Use UI Request (multithreading). Default:
+            ${onOff(defaultSettings.useUIRequest)}.
+          </label>
         </fieldset>
       </dialog>
     `

src/storage/settings-save.ts

@@ -12,6 +12,8 @@ export type SettingsSave = {
   useLocalRuntime: boolean
   /** Enable remote runtime. Upload often and execute apps remotely as needed. */
   useRemoteRuntime: boolean
+  /** Enable UI request, the multithreaded renderer for blocks. */
+  useUIRequest: boolean
   /**
    * Settings version recorded at save time. Used for unpacking old data if
    * structural changes have been made. Independent of package.json version.
@@ -29,6 +31,7 @@ export const defaultSettings: Readonly<SettingsSave> = {
   useExperimentalBlocks: false,
   useLocalRuntime: true,
   useRemoteRuntime: false,
+  useUIRequest: false,
   version: 1
 }