forked from boos/BoosAPI
feat(desktop): embed BoosAPI Desktop client as a subproject
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
This commit is contained in:
boos
@@ -0,0 +1,22 @@
|
||||
# Streaming Demo (Vue 3 + Vite)
|
||||
|
||||
A minimal example showing streaming append and language switching using `stream-monaco`.
|
||||
|
||||
- Single editor with streaming `appendCode`
|
||||
- Switch language mid-stream with `setLanguage`
|
||||
- Optional: Diff editor streaming via `appendOriginal` / `appendModified`
|
||||
|
||||
## Quick start
|
||||
|
||||
```bash
|
||||
pnpm i
|
||||
pnpm -C examples/streaming-demo dev
|
||||
```
|
||||
|
||||
Then open http://localhost:5173
|
||||
|
||||
Routes:
|
||||
|
||||
- `/` Streaming append demo
|
||||
- `/diff` Diff streaming stress demo
|
||||
- `/diff-ux` Diff UX demo (unchanged-region collapse/expand + hover hunk revert/stage)
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Streaming Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "streaming-demo",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --strictPort"
|
||||
},
|
||||
"dependencies": {
|
||||
"stream-monaco": "workspace:*",
|
||||
"vue": "^3.5.33",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"monaco-editor": "^0.55.1",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.2.6"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<nav style="padding:12px; border-bottom:1px solid #eee; display:flex; gap:12px;">
|
||||
<router-link to="/">Streaming Demo</router-link>
|
||||
<router-link to="/diff">Diff Editor Demo</router-link>
|
||||
<router-link to="/diff-ux">Diff UX Demo</router-link>
|
||||
</nav>
|
||||
<main style="padding:12px">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Layout only
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
nav a { color: #3b82f6; text-decoration: none }
|
||||
nav a.router-link-active { font-weight: 600 }
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useMonaco, preloadMonacoWorkers } from '../../../src/index'
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const {
|
||||
createDiffEditor,
|
||||
updateDiff,
|
||||
appendModified,
|
||||
appendOriginal,
|
||||
getDiffModels,
|
||||
cleanupEditor,
|
||||
} = useMonaco({
|
||||
// options forwarded to monaco
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'same',
|
||||
themes: ['vitesse-dark', 'vitesse-light'],
|
||||
languages: ['markdown', 'typescript'],
|
||||
readOnly: true,
|
||||
MAX_HEIGHT: 400,
|
||||
diffHideUnchangedRegions: true,
|
||||
diffHunkActionsOnHover: true,
|
||||
})
|
||||
preloadMonacoWorkers()
|
||||
|
||||
let timer: any
|
||||
const leftBase = `// original file\nfunction hello() {\n console.log(\"hello world\")\n}\n`
|
||||
const rightBase = `// modified file\nfunction hello(name) {\n console.log('hello ' + name)\n}\n`
|
||||
const repeat = 400
|
||||
let original = Array.from({ length: repeat }).map(() => leftBase).join('\n')
|
||||
let modified = Array.from({ length: repeat }).map(() => rightBase).join('\n')
|
||||
|
||||
onMounted(async () => {
|
||||
if (!el.value) return
|
||||
await createDiffEditor(el.value, original.slice(0, 1), modified.slice(0, 1), 'typescript')
|
||||
// gradually append to simulate streaming diffs
|
||||
let i = 0
|
||||
const combined = modified
|
||||
timer = setInterval(() => {
|
||||
i += 50
|
||||
if (i >= combined.length) {
|
||||
clearInterval(timer)
|
||||
return
|
||||
}
|
||||
const next = combined.slice(0, i)
|
||||
const prevOriginal = original.slice(0, i)
|
||||
updateDiff(prevOriginal, next, 'typescript')
|
||||
}, 400)
|
||||
})
|
||||
|
||||
// Stress test controls
|
||||
const running = ref(false)
|
||||
const result = ref<string | null>(null)
|
||||
async function runStressTest({ iterations = 2000, blockSize = 50, intervalMs = 1 } = {}) {
|
||||
if (!el.value) return
|
||||
if (running.value) return
|
||||
running.value = true
|
||||
result.value = null
|
||||
// prepare base block and expected
|
||||
const block = rightBase.repeat(Math.ceil(blockSize / rightBase.length)).slice(0, blockSize)
|
||||
let expected = ''
|
||||
// ensure editor is initialized to small values
|
||||
await createDiffEditor(el.value, original.slice(0, 1), modified.slice(0, 1), 'typescript')
|
||||
for (let j = 0; j < iterations; j++) {
|
||||
expected += block
|
||||
updateDiff(original.slice(0, Math.min(expected.length, original.length)), expected, 'typescript')
|
||||
// yield to event loop and respect interval
|
||||
await new Promise(r => setTimeout(r, intervalMs))
|
||||
}
|
||||
// wait for final flush
|
||||
await new Promise(r => setTimeout(r, 500))
|
||||
try {
|
||||
const models = getDiffModels()
|
||||
const actual = models.modified?.getValue() ?? ''
|
||||
if (actual === expected) {
|
||||
result.value = `PASS - length ${actual.length}`
|
||||
}
|
||||
else {
|
||||
// find first mismatch
|
||||
let idx = 0
|
||||
while (idx < Math.min(actual.length, expected.length) && actual[idx] === expected[idx]) idx++
|
||||
result.value = `FAIL at ${idx} (expected ${expected.length}, actual ${actual.length})`
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
result.value = `ERROR: ${String(err)}`
|
||||
}
|
||||
running.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div ref="el" class="editor" />
|
||||
<div class="actions">
|
||||
<button @click="cleanupEditor">Dispose</button>
|
||||
<button @click.prevent="runStressTest({ iterations: 2000, blockSize: 50, intervalMs: 1 })" :disabled="running">Run Stress (1ms,50ch x2000)</button>
|
||||
<button @click.prevent="runStressTest({ iterations: 2000, blockSize: 50, intervalMs: 4 })" :disabled="running">Run Stress (4ms)</button>
|
||||
<div style="margin-top:8px">Result: {{ result ?? 'n/a' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor { border: 1px solid #e0e0e0; border-radius: 4px; }
|
||||
.actions { margin-top: 12px }
|
||||
button { padding: 6px 10px }
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useMonaco, preloadMonacoWorkers } from '../../../src/index'
|
||||
|
||||
const perf: any = (globalThis as any).__streamMonacoPerf ??= {
|
||||
marks: [],
|
||||
mark(name: string, detail?: Record<string, any>) {
|
||||
if (typeof performance === 'undefined')
|
||||
return
|
||||
this.marks.push({ name, t: performance.now(), ...detail })
|
||||
},
|
||||
}
|
||||
|
||||
function mark(name: string, detail?: Record<string, any>) {
|
||||
try {
|
||||
perf.mark(name, detail)
|
||||
}
|
||||
catch {}
|
||||
}
|
||||
|
||||
mark('module_init')
|
||||
|
||||
if (typeof window !== 'undefined' && typeof document !== 'undefined' && !perf._observerInstalled) {
|
||||
perf._observerInstalled = true
|
||||
try {
|
||||
let firstTextLen = -1
|
||||
const markOnce = (name: string, detail?: Record<string, any>) => {
|
||||
if (perf.marks.some((m: any) => m.name === name))
|
||||
return
|
||||
mark(name, detail)
|
||||
}
|
||||
const obs = new MutationObserver(() => {
|
||||
const editor = document.querySelector('.monaco-editor')
|
||||
if (editor)
|
||||
markOnce('monaco_dom')
|
||||
const view = document.querySelector('.monaco-editor .view-lines')
|
||||
const text = view?.textContent ?? ''
|
||||
const len = text.trim().length
|
||||
if (len > 0)
|
||||
markOnce('view_lines_text', { len })
|
||||
if (len > 0) {
|
||||
if (firstTextLen === -1)
|
||||
firstTextLen = len
|
||||
else if (len > firstTextLen)
|
||||
markOnce('view_lines_text_growth', { len })
|
||||
}
|
||||
})
|
||||
obs.observe(document.documentElement, { childList: true, subtree: true, characterData: true })
|
||||
}
|
||||
catch {}
|
||||
|
||||
try {
|
||||
const obs = new PerformanceObserver((list) => {
|
||||
for (const entry of list.getEntries() as any) {
|
||||
if (entry && entry.duration && entry.duration > 50) {
|
||||
perf.longTasks = (perf.longTasks || 0) + 1
|
||||
}
|
||||
}
|
||||
})
|
||||
obs.observe({ type: 'longtask', buffered: true })
|
||||
}
|
||||
catch {}
|
||||
}
|
||||
|
||||
const el = ref<HTMLElement | null>(null)
|
||||
const {
|
||||
createEditor,
|
||||
appendCode,
|
||||
updateCode,
|
||||
setLanguage,
|
||||
cleanupEditor,
|
||||
} = useMonaco({
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'same',
|
||||
themes: ['vitesse-dark', 'vitesse-light'],
|
||||
languages: ['markdown', 'typescript'],
|
||||
readOnly: true,
|
||||
MAX_HEIGHT: 400,
|
||||
})
|
||||
preloadMonacoWorkers()
|
||||
mark('preload_workers_called')
|
||||
let i = 0
|
||||
let timer: any
|
||||
const base = `
|
||||
# Create Vue project
|
||||
npm create vue@latest electron-vue-chat
|
||||
|
||||
# Navigate to project
|
||||
cd electron-vue-chat
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
npm install electron electron-builder vue-router
|
||||
|
||||
# Install dev dependencies
|
||||
npm install -D electron-dev-server concurrently wait-on
|
||||
`
|
||||
// repeat the base chunk to create a large test document so the editor shows a scrollbar
|
||||
const repeatCount = 120
|
||||
const markdown = Array.from({ length: repeatCount }).map(() => base).join('\n')
|
||||
let contents = ''
|
||||
onMounted(async () => {
|
||||
if (!el.value)
|
||||
return
|
||||
|
||||
mark('onMounted_start')
|
||||
mark('createEditor_start')
|
||||
await createEditor(el.value, contents, 'shellscript')
|
||||
mark('createEditor_done')
|
||||
// append faster in small chunks so the editor fills quickly and scrollbar appears
|
||||
timer = setInterval(() => {
|
||||
if (i >= markdown.length) {
|
||||
clearInterval(timer)
|
||||
mark('stream_done', { len: contents.length })
|
||||
return
|
||||
}
|
||||
// increase by a few chars per tick for visible streaming without being too slow
|
||||
i += 50
|
||||
contents = markdown.slice(0, Math.min(i, markdown.length))
|
||||
if (i === 50)
|
||||
mark('stream_first_update', { len: contents.length })
|
||||
updateCode(contents, 'shellscript')
|
||||
}, 40)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div ref="el" class="editor" />
|
||||
<div class="actions">
|
||||
<button @click="cleanupEditor">
|
||||
Dispose
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.actions { margin-top: 12px; }
|
||||
button { padding: 6px 10px; }
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { router } from './router'
|
||||
import 'monaco-editor/min/vs/editor/editor.main.css'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
@@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import DiffDemo from './DiffDemo.vue'
|
||||
import DiffUXDemo from './DiffUXDemo.vue'
|
||||
import StreamingDemo from './StreamingDemo.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'stream', component: StreamingDemo },
|
||||
{ path: '/diff', name: 'diff', component: DiffDemo },
|
||||
{ path: '/diff-ux', name: 'diff-ux', component: DiffUXDemo },
|
||||
]
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"jsx": "preserve",
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"useDefineForClassFields": true,
|
||||
"baseUrl": ".",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"paths": {
|
||||
"stream-monaco": ["../../src"]
|
||||
},
|
||||
"types": ["vite/client"],
|
||||
"strict": true
|
||||
},
|
||||
|
||||
"include": ["src/**/*", "vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import path from 'node:path'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'stream-monaco': path.resolve(__dirname, '../../src'),
|
||||
},
|
||||
},
|
||||
// Prevent Vite from pre-bundling the local package. If Vite optimizes it into
|
||||
// node_modules/.vite/deps, relative worker URLs can be rewritten to that
|
||||
// location and may become unreachable. Excluding the package keeps it as
|
||||
// source so `new URL('./worker/..', import.meta.url)` resolves correctly.
|
||||
optimizeDeps: {
|
||||
exclude: ['stream-monaco'],
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user