feat: add interactivity shell

gaojy62 · Dec 1, 2023 · c217511 · c217511
1 parent b2f2662
commit c217511
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/components/PanelTerminalClient.client.vue b/components/PanelTerminalClient.client.vue
@@ -28,6 +28,7 @@ const terminal = new Terminal({
   theme: theme.value,
   fontFamily: 'DM Mono, monospace',
 })
+play.terminal = terminal
 
 watch(
   () => theme.value,

diff --git a/composables/web-container.ts b/composables/web-container.ts
@@ -92,8 +92,22 @@ export async function mountPlayground(
     play.status = 'start'
     processDev = await wc.spawn('pnpm', ['run', 'dev', '--no-qr'])
     play.stream = processDev.output
+    addInteractivity()
   }
 
+  async function addInteractivity() {
+    const shellProcess = await wc.spawn('jsh')
+    play.stream = shellProcess.output
+    const input = shellProcess.input.getWriter()
+    play.terminal?.onData((data) => {
+      // Ctrl+C to kill the process
+      if (data.charCodeAt(0) === 3)
+        processDev?.kill()
+
+      input.write(data)
+    })
+  };
+
   async function downloadZip() {
     const { default: JSZip } = await import('jszip')
     const zip = new JSZip()

diff --git a/stores/playground.ts b/stores/playground.ts
@@ -1,5 +1,6 @@
 import type { Raw } from 'vue'
 import type { WebContainer } from '@webcontainer/api'
+import type { Terminal } from 'xterm'
 import type { VirtualFile } from '../structures/VirtualFile'
 
 export const PlaygroundStatusOrder = [
@@ -23,6 +24,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
   const stream = shallowRef<ReadableStream>()
   const files = shallowRef<Raw<VirtualFile>[]>([])
   const webcontainer = shallowRef<Raw<WebContainer>>()
+  const terminal = shallowRef<Raw<Terminal>>()
 
   const previewLocation = ref({
     origin: '',
@@ -45,6 +47,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
     previewUrl,
     previewLocation,
     actions,
+    terminal,
   }
 })