Support Consoles outside of Runner Runner

packages/react-components/package.json

@@ -19,7 +19,8 @@
     "dist"
   ],
   "devDependencies": {
-    "@runmedev/react-console": "workspace:*"
+    "@runmedev/react-console": "workspace:*",
+    "@runmedev/renderers": "workspace:*"
   },
   "scripts": {
     "clean": "rimraf dist",

packages/react-components/src/App.tsx

@@ -17,6 +17,7 @@ import './index.css'
 import Layout from './layout'
 import { getAccessToken } from './token'
 import { NotFound } from './components'
+import DemoConsole from './components/Actions/DemoConsole'
 
 export interface AppBranding {
   name: string
@@ -50,6 +51,19 @@ function AppRoutes({ branding }: { branding: AppBranding }) {
           />
         }
       />
+      <Route
+        path="/demo"
+        element={
+          <Layout
+            branding={branding}
+            middle={
+              <DemoConsole
+                consoleID={Math.random().toString(36).substring(2, 9)}
+              />
+            }
+          />
+        }
+      />
       <Route
         path="/settings"
         element={

packages/react-components/src/components/Actions/DemoConsole.tsx

@@ -0,0 +1,117 @@
+import { useRef } from 'react'
+import {
+  ClientMessages,
+  removeContext,
+  setContext,
+  type RendererContext,
+} from '@runmedev/renderers'
+import '@runmedev/renderers'
+
+function DemoConsole({ consoleID }: { consoleID: string }) {
+  const elemRef = useRef<any>(null)
+
+  const eventHandler = (eventName: string) => (e: Event) => {
+    console.log(eventName, e)
+  }
+
+  let inputBuffer = ''
+  let messageListener: ((message: unknown) => void) | undefined
+
+  return (
+    <div
+      ref={(el) => {
+        if (!el || el.hasChildNodes()) {
+          return
+        }
+
+        const ctxBridge = {
+          postMessage: (message: any) => {
+            if (message?.type === ClientMessages.terminalStdin) {
+              const input = (message.output?.input as string) ?? ''
+              for (const ch of input) {
+                if (ch === '\r' || ch === '\n') {
+                  const trimmed = inputBuffer.trim()
+                  messageListener?.({
+                    type: ClientMessages.terminalStdout,
+                    output: {
+                      'runme.dev/id': consoleID,
+                      data: `\r\nGot input: ${trimmed}\r\n> `,
+                    },
+                  })
+                  inputBuffer = ''
+                  continue
+                }
+
+                // handle backspace/delete
+                if (ch === '\u0008' || ch === '\u007f') {
+                  inputBuffer = inputBuffer.slice(0, -1)
+                  messageListener?.({
+                    type: ClientMessages.terminalStdout,
+                    output: {
+                      'runme.dev/id': consoleID,
+                      data: '\b \b',
+                    },
+                  })
+                  continue
+                }
+
+                inputBuffer += ch
+                messageListener?.({
+                  type: ClientMessages.terminalStdout,
+                  output: {
+                    'runme.dev/id': consoleID,
+                    data: ch,
+                  },
+                })
+              }
+            }
+          },
+          onDidReceiveMessage: (listener: (message: unknown) => void) => {
+            messageListener = listener
+            listener({
+              type: ClientMessages.terminalStdout,
+              output: {
+                'runme.dev/id': consoleID,
+                data: 'Welcome to the app console\n> ',
+              },
+            } as any)
+            return {
+              dispose: () => {},
+            }
+          },
+        } as RendererContext<void>
+        setContext(ctxBridge, consoleID)
+
+        const elem = document.createElement('console-view')
+        elemRef.current = elem
+
+        elem.addEventListener('stdout', eventHandler('stdout'))
+        elem.addEventListener('stderr', eventHandler('stderr'))
+        elem.addEventListener('exitcode', eventHandler('exitcode'))
+        elem.addEventListener('pid', eventHandler('pid'))
+        elem.addEventListener('mimetype', eventHandler('mimetype'))
+
+        elem.setAttribute('id', consoleID)
+        elem.setAttribute('takeFocus', 'false')
+        elem.setAttribute('buttons', 'false')
+        elem.setAttribute('initialContent', 'Hello, world!\n')
+        elem.setAttribute('theme', 'dark')
+        elem.setAttribute('fontFamily', 'monospace')
+        elem.setAttribute('fontSize', '12')
+        elem.setAttribute('cursorStyle', 'block')
+        elem.setAttribute('cursorBlink', 'true')
+        elem.setAttribute('cursorWidth', '1')
+        elem.setAttribute('smoothScrollDuration', '0')
+        elem.setAttribute('scrollback', '4000')
+
+        el.appendChild(elem)
+
+        return () => {
+          removeContext(consoleID)
+        }
+      }}
+    ></div>
+  )
+}
+
+export default DemoConsole

packages/renderers/src/components/closeCellButton.ts

@@ -1,7 +1,8 @@
 import { LitElement, css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
 
-@customElement('close-cell-button')
+import { safeCustomElement } from '../decorators'
+
+@safeCustomElement('close-cell-button')
 export class CloseCellButton extends LitElement {
   /* eslint-disable */
   static styles = css`

packages/renderers/src/components/console/actionButton.ts

@@ -1,11 +1,12 @@
 import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 
+import { safeCustomElement } from '../../decorators'
 import { SaveIcon } from '../icons/save'
 import { ShareIcon } from '../icons/share'
 
-@customElement('action-button')
+@safeCustomElement('action-button')
 export class ActionButton extends LitElement {
   @property({ type: String })
   text: string = 'Copy'

packages/renderers/src/components/console/gistCell.ts

@@ -1,10 +1,11 @@
 import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 
+import { safeCustomElement } from '../../decorators'
 import { GistIcon } from '../icons/gistIcon'
 
-@customElement('gist-cell')
+@safeCustomElement('gist-cell')
 export class GistCell extends LitElement {
   @property({ type: String })
   text: string = 'Preview & Gist'

packages/renderers/src/components/console/open.ts

@@ -1,10 +1,11 @@
 import { LitElement, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 
+import { safeCustomElement } from '../../decorators'
 import { EyeIcon } from '../icons/eye'
 
-@customElement('open-cell')
+@safeCustomElement('open-cell')
 export class OpenCell extends LitElement {
   @property({ type: String })
   openText: string = 'Open'

packages/renderers/src/components/console/runme.ts

@@ -10,11 +10,12 @@ import {
 import { create } from '@bufbuild/protobuf'
 import { Interceptor } from '@connectrpc/connect'
 import { LitElement, PropertyValues, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 import { Disposable } from 'vscode'
 import { type RendererContext } from 'vscode-notebook-renderer'
 import { type VSCodeEvent } from 'vscode-notebook-renderer/events'
 
+import { safeCustomElement } from '../../decorators'
 import { setContext } from '../../messaging'
 import Streams from '../../streams'
 import { ClientMessages } from '../../types'
@@ -31,7 +32,7 @@ export interface RunmeConsoleStream {
 
 export const RUNME_CONSOLE = 'runme-console'
 
-@customElement(RUNME_CONSOLE)
+@safeCustomElement(RUNME_CONSOLE)
 export class RunmeConsole extends LitElement {
   protected disposables: Disposable[] = []
 

packages/renderers/src/components/console/saveButton.ts

@@ -1,9 +1,10 @@
 import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
+import { safeCustomElement } from '../../decorators'
 import './actionButton'
 
-@customElement('save-button')
+@safeCustomElement('save-button')
 export class SaveButton extends LitElement {
   @property({ type: Boolean, reflect: true })
   loading: boolean = false

packages/renderers/src/components/console/shareButton.ts

@@ -1,9 +1,10 @@
 import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { property } from 'lit/decorators.js'
 
+import { safeCustomElement } from '../../decorators'
 import './actionButton'
 
-@customElement('share-button')
+@safeCustomElement('share-button')
 export class ShareButton extends LitElement {
   @property({ type: Boolean, reflect: true })
   loading: boolean = false