Merge branch 'main' into update-address

reddit · Apr 22, 2024 · c3d92e8 · c3d92e8
2 parents 3a8e2ca + b0b1318
commit c3d92e8
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,18 +4,18 @@
   "description": "A little playground for building apps on Reddit.",
   "devDependencies": {
     "@ampproject/filesize": "4.3.0",
-    "@codemirror/autocomplete": "6.15.0",
+    "@codemirror/autocomplete": "6.16.0",
     "@codemirror/lang-javascript": "6.2.2",
     "@codemirror/language": "6.10.1",
     "@codemirror/lint": "6.5.0",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.26.0",
-    "@devvit/previews": "0.10.18-next-2024-03-25-21e299d48.0",
-    "@devvit/protos": "0.10.18-next-2024-03-25-21e299d48.0",
-    "@devvit/public-api": "0.10.18-next-2024-03-25-21e299d48.0",
-    "@devvit/runtime-lite": "0.10.18-next-2024-03-25-21e299d48.0",
-    "@devvit/shared-types": "0.10.18-next-2024-03-25-21e299d48.0",
-    "@devvit/ui-renderer": "0.10.18-next-2024-03-25-21e299d48.0",
+    "@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",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@types/jsdom": "21.1.6",
     "@types/mocha": "10.0.6",
@@ -25,13 +25,13 @@
     "codemirror": "6.0.1",
     "esbuild": "0.20.2",
     "jsdom": "24.0.0",
-    "lit": "3.1.2",
+    "lit": "3.1.3",
     "lit-analyzer": "2.0.3",
     "lz-string": "1.5.0",
     "nice-grpc-web": "3.3.3",
     "prettier": "3.2.5",
-    "typescript": "5.4.3",
-    "vitest": "1.4.0"
+    "typescript": "5.4.5",
+    "vitest": "1.5.0"
   },
   "engines": {
     "node": ">=18"
@@ -56,8 +56,8 @@
       "gzip": "3.5 KB"
     },
     "dist/play-pen.js": {
-      "none": "26308.2 KB",
-      "gzip": "4.0 MB"
+      "none": "35000 KB",
+      "gzip": "5.1 MB"
     }
   },
   "typesVersions": {

diff --git a/src/bundler/linker.ts b/src/bundler/linker.ts
@@ -19,12 +19,27 @@ export function link(es: string, hostname: string): LinkedBundle {
 
 function provides(): SerializableServiceDefinition[] {
   // Assume the app provides CustomPost and UIEventHandler services to avoid an
-  // evaluation phase. These are generated like:
+  // evaluation phase. Also, Hello for internal tests. These are generated like:
   //   devvit new foo --template=custom-post
   //   cd foo
   //   devvit actor bundle main
   //   node -pe 'JSON.stringify(JSON.parse(require("fs").readFileSync(0, "utf8")).dependencies.provides, null, 2)' < dist/main.bundle.json
   return [
+    {
+      fullName: 'devvit.actor.hello.Hello',
+      methods: [
+        {
+          fullName: '/devvit.actor.hello.Hello/Ping',
+          name: 'Ping',
+          requestStream: false,
+          responseStream: false,
+          requestType: 'devvit.actor.hello.PingMessage',
+          responseType: 'devvit.actor.hello.PingMessage'
+        }
+      ],
+      name: 'Hello',
+      version: ''
+    },
     {
       fullName: 'devvit.reddit.custom_post.v1alpha.CustomPost',
       methods: [

diff --git a/src/elements/play-console.ts b/src/elements/play-console.ts
@@ -178,9 +178,7 @@ function previewErrRow(err: DevvitUIError): TemplateResult<1> {
         'catch errors.'
       : isCircuitBreaker(err.err)
         ? 'Unsupported plugin: ' +
-          `${
-            err.err.cause?.method ? `${err.err.cause.method} ` : ''
-          }API call ` +
+          `${err.err.cause?.method ? `${err.err.cause.method} ` : ''}API call ` +
           'unavailable. This program may run correctly on reddit.com but most ' +
           'Context and other Devvit APIs are not yet supported in the playground.'
         : ''

diff --git a/src/elements/play-pen-header.ts b/src/elements/play-pen-header.ts
@@ -76,6 +76,10 @@ export class PlayPenHeader extends LitElement {
   @property({attribute: false}) srcByLabel?: {readonly [key: string]: string}
   @property({attribute: 'remote-runtime-origin'}) remoteRuntimeOrigin: string =
     defaultSettings.remoteRuntimeOrigin
+  @property({attribute: 'runtime-debug-logging', type: Boolean})
+  runtimeDebugLogging: boolean = false
+  @property({attribute: 'sandbox-app', type: Boolean})
+  sandboxApp: boolean = false
   @property() url: string = ''
   @property({attribute: 'use-experimental-blocks', type: Boolean})
   useExperimentalBlocks: boolean = false
@@ -141,6 +145,8 @@ export class PlayPenHeader extends LitElement {
       <play-settings-dialog
         ?allow-storage=${this.allowStorage}
         remote-runtime-origin=${this.remoteRuntimeOrigin}
+        ?runtime-debug-logging=${this.runtimeDebugLogging}
+        ?sandbox-app=${this.sandboxApp}
         ?use-experimental-blocks=${this.useExperimentalBlocks}
         ?use-local-runtime=${this.useLocalRuntime}
         ?use-remote-runtime=${this.useRemoteRuntime}

diff --git a/src/elements/play-pen/play-pen.ts b/src/elements/play-pen/play-pen.ts
@@ -145,6 +145,8 @@ export class PlayPen extends LitElement {
   @state() private _previewWidth: number = 288
   @state() private _remoteRuntimeOrigin: string =
     defaultSettings.remoteRuntimeOrigin
+  @state() private _runtimeDebugLogging: boolean = false
+  @state() private _sandboxApp: boolean = false
   @state() private _useExperimentalBlocks: boolean = false
   @state() private _useLocalRuntime: boolean = false
   @state() private _useRemoteRuntime: boolean = false
@@ -173,6 +175,8 @@ export class PlayPen extends LitElement {
     if (settings) {
       this._openConsole = settings.openConsole
       this._remoteRuntimeOrigin = settings.remoteRuntimeOrigin
+      this._runtimeDebugLogging = settings.runtimeDebugLogging
+      this._sandboxApp = settings.sandboxApp
       this._useExperimentalBlocks = settings.useExperimentalBlocks
       this._useLocalRuntime = settings.useLocalRuntime
       this._useRemoteRuntime = settings.useRemoteRuntime
@@ -198,8 +202,10 @@ export class PlayPen extends LitElement {
       ><play-pen-header
         ?allow-storage=${this.allowStorage}
         name=${this._name}
-        .srcByLabel=${this.srcByLabel}
         remote-runtime-origin=${this._remoteRuntimeOrigin}
+        ?runtime-debug-logging=${this._runtimeDebugLogging}
+        ?sandbox-app=${this._sandboxApp}
+        .srcByLabel=${this.srcByLabel}
         url=${this.#shareURL().toString()}
         ?use-experimental-blocks=${this._useExperimentalBlocks}
         ?use-local-runtime=${this._useLocalRuntime}
@@ -211,6 +217,10 @@ export class PlayPen extends LitElement {
           this.#setName('', false)
           this._editor.setSrc(ev.detail)
         }}
+        @runtime-debug-logging=${(ev: CustomEvent<boolean>) =>
+          (this._runtimeDebugLogging = ev.detail)}
+        @sandbox-app=${(ev: CustomEvent<boolean>) =>
+          (this._sandboxApp = ev.detail)}
         @use-experimental-blocks=${(ev: CustomEvent<boolean>) =>
           (this._useExperimentalBlocks = ev.detail)}
         @use-local-runtime=${(ev: CustomEvent<boolean>) =>
@@ -240,6 +250,8 @@ export class PlayPen extends LitElement {
             .bundle=${this._bundle}
             previewWidth=${this._previewWidth}
             remote-runtime-origin=${this._remoteRuntimeOrigin}
+            ?runtime-debug-logging=${this._runtimeDebugLogging}
+            ?sandbox-app=${this._sandboxApp}
             scheme=${ifDefined(this._scheme)}
             .uploaded=${this._uploaded}
             ?use-experimental-blocks=${this._useExperimentalBlocks}
@@ -281,6 +293,8 @@ export class PlayPen extends LitElement {
     props: PropertyValues<this> &
       PropertyValues<{
         _openConsole: boolean
+        _runtimeDebugLogging: boolean
+        _sandboxApp: boolean
         _useExperimentalBlocks: boolean
         _useLocalRuntime: boolean
         _useRemoteRuntime: boolean
@@ -292,13 +306,17 @@ export class PlayPen extends LitElement {
     if (
       this.allowStorage &&
       (props.has('_openConsole') ||
+        props.has('_runtimeDebugLogging') ||
+        props.has('_sandboxApp') ||
         props.has('_useExperimentalBlocks') ||
         props.has('_remoteRuntimeOrigin') ||
         props.has('_useLocalRuntime') ||
         props.has('_useRemoteRuntime'))
     )
       saveSettings(localStorage, {
         openConsole: this._openConsole,
+        runtimeDebugLogging: this._runtimeDebugLogging,
+        sandboxApp: this._sandboxApp,
         useExperimentalBlocks: this._useExperimentalBlocks,
         useLocalRuntime: this._useLocalRuntime,
         useRemoteRuntime: this._useRemoteRuntime,

diff --git a/src/elements/play-preview.ts b/src/elements/play-preview.ts
@@ -1,5 +1,7 @@
 // @ts-expect-error
-import * as penWorker from '@devvit/previews/dist/pen.worker.min.js'
+import * as sandboxedRuntimeScript from '@devvit/previews/dist/sandboxed-pen.worker.min.js'
+// @ts-expect-error
+import * as unsandboxedRuntimeScript from '@devvit/previews/dist/unsandboxed-pen.worker.min.js'
 
 import type {Empty, LinkedBundle, Metadata} from '@devvit/protos'
 import {
@@ -20,9 +22,13 @@ import {cssReset} from '../utils/css-reset.js'
 
 import '@devvit/previews/dist/devvit-preview.js'
 
-const localRuntimeCode: Blob = new Blob([penWorker.default], {
+const sandboxedRuntimeBlob: Blob = new Blob([sandboxedRuntimeScript.default], {
   type: 'text/javascript'
 })
+const unsandboxedRuntimeBlob: Blob = new Blob(
+  [unsandboxedRuntimeScript.default],
+  {type: 'text/javascript'}
+)
 
 declare global {
   interface HTMLElementEventMap {
@@ -48,6 +54,8 @@ export class PlayPreview extends LitElement {
       border-radius: 16px;
       min-height: 320px;
       box-shadow: var(--shadow-xs);
+      /* Prevents the border from throwing off the context.dimensions calculation */
+      box-sizing: content-box;
 
       /* When the background is visible, the preview is loading. */
       background-color: var(--color-interactive-background);
@@ -87,6 +95,10 @@ export class PlayPreview extends LitElement {
   @property({type: Number}) previewWidth?: number
   @property({attribute: 'remote-runtime-origin'}) remoteRuntimeOrigin: string =
     defaultSettings.remoteRuntimeOrigin
+  @property({attribute: 'runtime-debug-logging', type: Boolean})
+  runtimeDebugLogging: boolean = false
+  @property({attribute: 'sandbox-app', type: Boolean})
+  sandboxApp: boolean = false
   @property() scheme?: ColorScheme
   @property({attribute: false}) uploaded: Promise<Empty> | undefined
   @property({attribute: 'use-experimental-blocks', type: Boolean})
@@ -121,15 +133,17 @@ export class PlayPreview extends LitElement {
               <devvit-preview
                 .bundle=${this.bundle}
                 .localRuntimeCode=${this.useLocalRuntime
-                  ? localRuntimeCode
+                  ? this.sandboxApp
+                    ? sandboxedRuntimeBlob
+                    : unsandboxedRuntimeBlob
                   : undefined}
                 .metadata=${this.#meta}
                 .remote=${this.useRemoteRuntime ? this.#remote : undefined}
                 .scheme=${this.scheme}
                 post-id="t3_123"
+                ?runtime-debug-logging=${this.runtimeDebugLogging}
                 style="--rem16: 50px;"
                 ?use-experimental-blocks=${this.useExperimentalBlocks}
-                ?use-sandbox=${false}
                 @devvit-ui-error=${() => (this._err = true)}
               ></devvit-preview>
             `
@@ -138,9 +152,7 @@ export class PlayPreview extends LitElement {
     `
   }
 
-  protected override async willUpdate(
-    props: PropertyValues<this>
-  ): Promise<void> {
+  protected override willUpdate(props: PropertyValues<this>): void {
     super.willUpdate(props)
     if (props.has('bundle')) {
       this._err = false

diff --git a/src/elements/play-settings-dialog.ts b/src/elements/play-settings-dialog.ts
@@ -14,10 +14,12 @@ import './play-button.js'
 
 declare global {
   interface HTMLElementEventMap {
+    'edit-remote-runtime-origin': CustomEvent<string>
+    'runtime-debug-logging': CustomEvent<boolean>
+    'sandbox-app': CustomEvent<boolean>
     'use-experimental-blocks': CustomEvent<boolean>
     'use-local-runtime': CustomEvent<boolean>
     'use-remote-runtime': CustomEvent<boolean>
-    'edit-remote-runtime-origin': CustomEvent<string>
   }
   interface HTMLElementTagNameMap {
     'play-settings-dialog': PlaySettingsDialog
@@ -109,6 +111,10 @@ export class PlaySettingsDialog extends LitElement {
     false
   @property({attribute: 'remote-runtime-origin'}) remoteRuntimeOrigin: string =
     defaultSettings.remoteRuntimeOrigin
+  @property({attribute: 'runtime-debug-logging', type: Boolean})
+  runtimeDebugLogging: boolean = false
+  @property({attribute: 'sandbox-app', type: Boolean})
+  sandboxApp: boolean = false
   @property({attribute: 'use-experimental-blocks', type: Boolean})
   useExperimentalBlocks: boolean = false
   @property({attribute: 'use-local-runtime', type: Boolean})
@@ -158,6 +164,34 @@ export class PlaySettingsDialog extends LitElement {
             Use local runtime. Execute apps locally whenever possible. Default:
             ${onOff(defaultSettings.useLocalRuntime)}.
           </label>
+          <label>
+            <input
+              ?checked="${this.sandboxApp}"
+              type="checkbox"
+              @change=${(ev: Event & {currentTarget: HTMLInputElement}) =>
+                this.dispatchEvent(
+                  Bubble<boolean>('sandbox-app', ev.currentTarget.checked)
+                )}
+            />
+            Sandbox app execution. Sandboxing is slower but may be more
+            production-like. Default: ${onOff(defaultSettings.sandboxApp)}.
+          </label>
+          <label>
+            <input
+              ?checked="${this.runtimeDebugLogging}"
+              type="checkbox"
+              @change=${(ev: Event & {currentTarget: HTMLInputElement}) =>
+                this.dispatchEvent(
+                  Bubble<boolean>(
+                    'runtime-debug-logging',
+                    ev.currentTarget.checked
+                  )
+                )}
+            />
+            Enable runtime debug logging. May also require enabling verbose
+            DevTools console logs. Default:
+            ${onOff(defaultSettings.runtimeDebugLogging)}.
+          </label>
           <label>
             <input
               ?checked="${this.useRemoteRuntime}"

diff --git a/src/runtime/remote-app.ts b/src/runtime/remote-app.ts
@@ -10,7 +10,7 @@ import {
   type UIRequest,
   type UIResponse
 } from '@devvit/protos'
-import type {UIApp} from '@devvit/ui-renderer/client/ui-app.js'
+import type {UIApp} from '@devvit/ui-renderer/client/remote-app.js'
 import {
   Metadata as NiceMeta,
   createChannel,

diff --git a/src/storage/pen-save.ts b/src/storage/pen-save.ts
@@ -44,9 +44,7 @@ export function savePen(
 }
 
 export function penToHash(pen: Readonly<PenSave>): string {
-  return `${fragmentPrefix}${lzstring.compressToEncodedURIComponent(
-    JSON.stringify(pen)
-  )}`
+  return `${fragmentPrefix}${lzstring.compressToEncodedURIComponent(JSON.stringify(pen))}`
 }
 
 /**

diff --git a/src/storage/settings-save.ts b/src/storage/settings-save.ts
@@ -2,13 +2,16 @@
 export type SettingsSave = {
   /** Most recent console open state. */
   openConsole: boolean
+  /** Probably the devenv compute address. Eg, http://localhost:7788. */
+  remoteRuntimeOrigin: string
+  runtimeDebugLogging: boolean
+  /** When local runtime is enabled, use SandboxedRuntimeLite. */
+  sandboxApp: boolean
   useExperimentalBlocks: boolean
   /** Enable local runtime. Execute apps locally whenever possible. */
   useLocalRuntime: boolean
   /** Enable remote runtime. Upload often and execute apps remotely as needed. */
   useRemoteRuntime: boolean
-  /** Probably the devenv compute address. Eg, http://localhost:7788. */
-  remoteRuntimeOrigin: string
   /**
    * Settings version recorded at save time. Used for unpacking old data if
    * structural changes have been made. Independent of package.json version.
@@ -20,10 +23,12 @@ const storageKey = 'playSettings'
 
 export const defaultSettings: Readonly<SettingsSave> = {
   openConsole: false,
+  remoteRuntimeOrigin: 'http://localhost:7788',
+  runtimeDebugLogging: false,
+  sandboxApp: false,
   useExperimentalBlocks: false,
   useLocalRuntime: true,
   useRemoteRuntime: false,
-  remoteRuntimeOrigin: 'http://localhost:7788',
   version: 1
 }
 

diff --git a/src/utils/compute-util.ts b/src/utils/compute-util.ts
@@ -1,5 +1,5 @@
 // to-do: compute-go doesn't seem to replace old bundles. Generate a unique
 //        hostname for each new build.
 export function newHostname(name: string, version: number): string {
-  return `${name.toLocaleLowerCase().replace(/[^a-z0-9]/, '') || 'untitled'}-${version}.local`
+  return `${name.toLocaleLowerCase().replace(/[^a-z0-9]/, '') || 'untitled'}-${version}`
 }
diff --git a/tools/build.js b/tools/build.js
@@ -43,9 +43,7 @@ async function pluginOnEnd(result) {
     }
     if (watch) manifest.start_url = 'http://localhost:1234' // Suppress warning.
     manifest.version = pkg.version
-    manifestEl.href = `data:application/json,${encodeURIComponent(
-      JSON.stringify(manifest)
-    )}`
+    manifestEl.href = `data:application/json,${encodeURIComponent(JSON.stringify(manifest))}`
   }
   const iconEl = /** @type {HTMLLinkElement|null} */ (
     copy.querySelector('link[href][rel="icon"][type]')