Make using renderers and react-console work; support multiple RunmeConsoles

packages/react-components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @runmedev/react-components
 
+## 3.16.5-jlewi.0
+
+### Patch Changes
+
+- Test the changes to support renderers and react-console being imported
+
 ## 3.16.4
 
 ### Patch Changes

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runmedev/react-components",
-  "version": "3.16.4",
+  "version": "3.16.5-jlewi.0",
   "license": "Apache-2.0",
   "type": "module",
   "private": false,

packages/react-console/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @runmedev/react-console
 
+## 3.16.5-jlewi.0
+
+### Patch Changes
+
+- Test the changes to support renderers and react-console being imported
+- Updated dependencies
+  - @runmedev/[email protected]
+
 ## 3.16.4
 
 ### Patch Changes

packages/react-console/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runmedev/react-console",
-  "version": "3.16.4",
+  "version": "3.16.5-jlewi.0",
   "license": "Apache-2.0",
   "type": "module",
   "private": false,
@@ -22,6 +22,7 @@
     "@runmedev/renderers": "workspace:*"
   },
   "peerDependencies": {
+    "@runmedev/renderers": "workspace:*",
     "@bufbuild/protobuf": "^2.9.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -41,4 +42,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/renderers/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @runmedev/renderers
 
+## 3.16.5-jlewi.0
+
+### Patch Changes
+
+- Test the changes to support renderers and react-console being imported
+
 ## 3.16.4
 
 ### Patch Changes

packages/renderers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runmedev/renderers",
-  "version": "3.16.4",
+  "version": "3.16.5-jlewi.0",
   "license": "Apache-2.0",
   "type": "module",
   "private": false,
@@ -17,6 +17,11 @@
       "types": "./dist/components.d.ts",
       "import": "./dist/components.mjs",
       "require": "./dist/components.cjs"
+    },
+    "./streams/fakeStreams": {
+      "types": "./dist/streams/fakeStreams.d.ts",
+      "import": "./dist/streams/fakeStreams.mjs",
+      "require": "./dist/streams/fakeStreams.cjs"
     }
   },
   "files": [

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

@@ -16,7 +16,11 @@ import {
 import { Disposable, TerminalDimensions } from 'vscode'
 
 import { FitAddon, type ITerminalDimensions } from '../../fitAddon'
-import { getContext, onClientMessage, postClientMessage } from '../../messaging'
+import {
+  getContext,
+  onClientMessage,
+  postClientMessage,
+} from '../../messaging'
 import { ClientMessages, OutputType, WebViews } from '../../types'
 import { ClientMessage } from '../../types'
 import { closeOutput } from '../../utils'
@@ -28,6 +32,7 @@ import './open'
 import './saveButton'
 import './shareButton'
 import { darkStyles, lightStyles } from './vscode.css'
+import type { RendererContext } from 'vscode-notebook-renderer'
 
 export interface ConsoleViewConfig {
   theme: 'dark' | 'light' | 'vscode'
@@ -427,6 +432,14 @@ export class ConsoleView extends LitElement {
   @property({ type: Boolean })
   isDaggerOutput: boolean = false
 
+  // Optional per-instance messaging context; falls back to module-level context.
+  @property({ attribute: false })
+  context?: RendererContext<void>
+
+  #ctx(): RendererContext<void> {
+    return this.context ?? getContext()
+  }
+
   protected applyThemeStyles(): void {
     if (!this.shadowRoot) {
       return
@@ -525,7 +538,7 @@ export class ConsoleView extends LitElement {
     this.terminal.unicode.activeVersion = '11'
     this.terminal.options.drawBoldTextInBrightColors
 
-    const ctx = getContext()
+    const ctx = this.#ctx()
 
     this.disposables.push(
       // todo(sebastian): what's the type of e?
@@ -726,7 +739,7 @@ export class ConsoleView extends LitElement {
     this.#subscribeSetTerminalRows(dims)
     terminalContainer.appendChild(resizeDragHandle)
 
-    const ctx = getContext()
+    const ctx = this.#ctx()
     ctx.postMessage &&
       postClientMessage(ctx, ClientMessages.terminalOpen, {
         'runme.dev/id': this.id!,
@@ -905,7 +918,7 @@ export class ConsoleView extends LitElement {
     )
 
     const sub = debounced$.subscribe(async (terminalDimensions) => {
-      const ctx = getContext()
+      const ctx = this.#ctx()
       if (!ctx.postMessage) {
         return
       }
@@ -930,7 +943,7 @@ export class ConsoleView extends LitElement {
     )
 
     const sub = debounced$.subscribe(async (terminalRows) => {
-      const ctx = getContext()
+      const ctx = this.#ctx()
       if (!ctx.postMessage) {
         return
       }
@@ -963,7 +976,7 @@ export class ConsoleView extends LitElement {
       this.terminal?.focus()
     }
 
-    const ctx = getContext()
+    const ctx = this.#ctx()
     if (!ctx.postMessage) {
       return
     }
@@ -974,7 +987,7 @@ export class ConsoleView extends LitElement {
   }
 
   async #displayShareDialog(): Promise<boolean | void> {
-    const ctx = getContext()
+    const ctx = this.#ctx()
     if (!ctx.postMessage || !this.shareUrl) {
       return
     }
@@ -993,7 +1006,7 @@ export class ConsoleView extends LitElement {
   }
 
   async #triggerEscalation(): Promise<boolean | void | undefined> {
-    // const ctx = getContext()
+    // const ctx = this.#ctx()
     this.isCreatingEscalation = true
 
     // try {
@@ -1016,7 +1029,7 @@ export class ConsoleView extends LitElement {
   }
 
   async #triggerOpenEscalation(): Promise<boolean | void | undefined> {
-    const ctx = getContext()
+    const ctx = this.#ctx()
 
     if (!this.escalationUrl) {
       return
@@ -1026,7 +1039,7 @@ export class ConsoleView extends LitElement {
   }
 
   #openSessionOutput(): Promise<void | boolean> | undefined {
-    const ctx = getContext()
+    const ctx = this.#ctx()
     if (!ctx.postMessage) {
       return
     }
@@ -1042,7 +1055,7 @@ export class ConsoleView extends LitElement {
   async #shareCellOutput(
     _isUserAction: boolean
   ): Promise<boolean | void | undefined> {
-    const ctx = getContext()
+    const ctx = this.#ctx()
     if (!ctx.postMessage) {
       return
     }
@@ -1084,17 +1097,17 @@ export class ConsoleView extends LitElement {
   }
 
   #onWebLinkClick(_event: MouseEvent, uri: string): void {
-    postClientMessage(getContext(), ClientMessages.openLink, uri)
+    postClientMessage(this.#ctx(), ClientMessages.openLink, uri)
   }
 
   #triggerOpenCellOutput(): void {
-    postClientMessage(getContext(), ClientMessages.openLink, this.shareUrl!)
+    postClientMessage(this.#ctx(), ClientMessages.openLink, this.shareUrl!)
   }
 
   #onEscalateDisabled(): void {
     const message =
       'There is no Slack integration configured yet. \nOpen Dashboard to configure it'
-    postClientMessage(getContext(), ClientMessages.errorMessage, message)
+    postClientMessage(this.#ctx(), ClientMessages.errorMessage, message)
   }
 
   // Render the UI as a function of component state
@@ -1205,7 +1218,7 @@ export class ConsoleView extends LitElement {
   }
 
   #copy() {
-    const ctx = getContext()
+    const ctx = this.#ctx()
     if (!ctx.postMessage) {
       return
     }

packages/vite.common.ts

@@ -26,6 +26,8 @@ export function createSharedConfig({ entry, name, fileName }) {
       rollupOptions: {
         external: [
           '@buf/googleapis_googleapis.bufbuild_es',
+          '@runmedev/renderers',
+          '@runmedev/react-console',
           'react',
           'react-dom',
           'react/jsx-runtime',