Demonstrate adding a new component

src/ui/components/play-demo.ts

@@ -0,0 +1,40 @@
+import {
+  LitElement,
+  css,
+  html,
+  type CSSResultGroup,
+  type TemplateResult
+} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {Bubble} from '../bubble.js'
+
+declare global {
+  interface HTMLElementEventMap {
+    'fancy-click': CustomEvent<FancyClick>
+  }
+  interface HTMLElementTagNameMap {
+    'play-demo': PlayDemo
+  }
+}
+
+export type FancyClick = {num: number}
+
+@customElement('play-demo')
+export class PlayDemo extends LitElement {
+  @property({attribute: false}) example?: string
+
+  static override styles: CSSResultGroup = css``
+
+  protected override render(): TemplateResult {
+    return html`<button
+      @click=${() => {
+        console.log('hello! button clicked!')
+        this.dispatchEvent(
+          Bubble<FancyClick>('fancy-click', {num: Math.random()})
+        )
+      }}
+    >
+      hello!
+    </button>`
+  }
+}

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

@@ -34,6 +34,8 @@ import type {PlayPreview} from '../play-preview.js'
 import type {PlayToast} from '../play-toast.js'
 import penVars from './pen-vars.css'
 
+import '../play-demo.js'
+import type {FancyClick} from '../play-demo.js'
 import '../play-editor/play-editor.js'
 import '../play-pen-footer.js'
 import '../play-pen-header.js'
@@ -162,7 +164,7 @@ export class PlayPen extends LitElement {
 
   protected override render(): TemplateResult {
     return html`
-      <play-toast>Copied the URL!</play-toast
+      <play-toast>Copied the URL2!</play-toast
       ><play-pen-header
         name=${this._name}
         .srcByLabel=${this.srcByLabel}
@@ -191,6 +193,10 @@ export class PlayPen extends LitElement {
           ><slot></slot
         ></play-editor>
         <div class="preview">
+          <play-demo
+            @fancy-click=${(ev: CustomEvent<FancyClick>) =>
+              this._editor.setSrc(ev.detail.num.toString())}
+          ></play-demo>
           <play-preview
             .bundle=${this._bundle}
             previewWidth=${this._previewWidth}

src/ui/components/play-preview.ts

@@ -120,6 +120,8 @@ export class PlayPreview extends LitElement {
               this.dispatchEvent(
                 Bubble<PreviewError>('error', {type: 'Error', err: ev.detail})
               )}
+            @devvit-ui-logs=${(ev: CustomEvent<unknown>) =>
+              console.log('got some logs', ev.detail)}
             .meta="${this.#meta}"
             .client=${this._client}
             .scheme=${this.scheme}