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
2026-06-22 11:32:57 +08:00
parent d9c78ecc73
commit e0a5f57793
2305 changed files with 449355 additions and 0 deletions
@@ -0,0 +1,16 @@
# React Demo (React + Vite)
A minimal React example for `stream-monaco`.
- Creates a Monaco editor from React
- Switches language and theme without remounting
- Streams content with `appendCode`
## Quick start
```bash
pnpm i
pnpm -C examples/react-demo dev
```
Then open http://localhost:5173
@@ -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>stream-monaco React Demo</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
@@ -0,0 +1,23 @@
{
"name": "react-demo",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --strictPort"
},
"dependencies": {
"monaco-editor": "^0.55.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"stream-monaco": "workspace:*"
},
"devDependencies": {
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react": "^4.7.0",
"typescript": "^5.9.3",
"vite": "^7.2.6"
}
}
@@ -0,0 +1,247 @@
import { useEffect, useRef, useState } from 'react'
import { preloadMonacoWorkers, useMonaco } from 'stream-monaco'
type DemoLanguage = 'typescript' | 'markdown'
type DemoTheme = 'vitesse-dark' | 'vitesse-light'
const initialCodeByLanguage: Record<DemoLanguage, string> = {
typescript: [
'type User = {',
' id: string',
' role: "admin" | "member"',
'}',
'',
'export function formatUser(user: User) {',
String.raw` return \`\${user.id}:\${user.role}\``,
'}',
].join('\n'),
markdown: [
'# stream-monaco',
'',
'- React host example',
'- Monaco editor created from a component',
'- Streaming updates via `appendCode()`',
].join('\n'),
}
const streamTargetByLanguage: Record<DemoLanguage, string> = {
typescript: [
'',
'export async function loadUsers(): Promise<User[]> {',
' return [',
' { id: "u_1", role: "admin" },',
' { id: "u_2", role: "member" },',
' ]',
'}',
'',
'for (const user of await loadUsers()) {',
' console.log(formatUser(user))',
'}',
].join('\n'),
markdown: [
'',
'## Streaming Notes',
'',
'1. The editor is mounted once.',
'2. Theme and language swap in place.',
'3. Chunks append over time to mimic token streaming.',
'',
'```ts',
'appendCode(chunk, language)',
'```',
].join('\n'),
}
preloadMonacoWorkers()
export default function App() {
const containerRef = useRef<HTMLDivElement | null>(null)
const timerRef = useRef<number | null>(null)
const codeRef = useRef(initialCodeByLanguage.typescript)
const apiRef = useRef<ReturnType<typeof useMonaco> | null>(null)
if (!apiRef.current) {
apiRef.current = useMonaco({
themes: ['vitesse-dark', 'vitesse-light'],
languages: ['typescript', 'markdown', 'json'],
readOnly: false,
MAX_HEIGHT: 460,
wordWrap: 'on',
minimap: { enabled: false },
scrollBeyondLastLine: false,
})
}
const [language, setLanguage] = useState<DemoLanguage>('typescript')
const [theme, setTheme] = useState<DemoTheme>('vitesse-dark')
const [streaming, setStreaming] = useState(false)
const [progress, setProgress] = useState(0)
const [status, setStatus] = useState('Ready')
useEffect(() => {
const api = apiRef.current
if (!api)
return
async function mount() {
if (!containerRef.current)
return
await api.createEditor(
containerRef.current,
codeRef.current,
language,
)
}
void mount()
return () => {
if (timerRef.current != null)
window.clearInterval(timerRef.current)
api.cleanupEditor()
}
}, [])
function stopStreaming() {
if (timerRef.current != null) {
window.clearInterval(timerRef.current)
timerRef.current = null
}
setStreaming(false)
}
function applyExample(nextLanguage: DemoLanguage) {
stopStreaming()
const nextCode = initialCodeByLanguage[nextLanguage]
codeRef.current = nextCode
setLanguage(nextLanguage)
apiRef.current?.updateCode(nextCode, nextLanguage)
apiRef.current?.setLanguage(nextLanguage)
setProgress(0)
setStatus(`Loaded ${nextLanguage} example`)
}
function applyTheme(nextTheme: DemoTheme) {
setTheme(nextTheme)
void apiRef.current?.setTheme(nextTheme)
}
function resetEditor() {
stopStreaming()
const nextCode = initialCodeByLanguage[language]
codeRef.current = nextCode
apiRef.current?.updateCode(nextCode, language)
setProgress(0)
setStatus('Reset to initial example')
}
function startStreaming() {
stopStreaming()
const remaining = streamTargetByLanguage[language]
const chunks = remaining.match(/[\s\S]{1,42}/g) ?? [remaining]
setStreaming(true)
setStatus('Streaming...')
let index = 0
timerRef.current = window.setInterval(() => {
const chunk = chunks[index]
if (!chunk) {
stopStreaming()
setProgress(100)
setStatus('Streaming complete')
return
}
apiRef.current?.appendCode(chunk, language)
codeRef.current += chunk
index += 1
setProgress(Math.round((index / chunks.length) * 100))
}, 80)
}
return (
<div className="page-shell">
<section className="hero-card">
<div>
<p className="eyebrow">React Example</p>
<h1>stream-monaco in a real React app</h1>
<p className="lede">
This example mounts Monaco once, swaps theme and language in place,
and streams content with
{' '}
<code>appendCode()</code>
.
</p>
</div>
<div className="control-grid">
<div className="control-group">
<span>Language</span>
<div className="button-row">
<button
className={language === 'typescript' ? 'active' : ''}
onClick={() => applyExample('typescript')}
type="button"
>
TypeScript
</button>
<button
className={language === 'markdown' ? 'active' : ''}
onClick={() => applyExample('markdown')}
type="button"
>
Markdown
</button>
</div>
</div>
<div className="control-group">
<span>Theme</span>
<div className="button-row">
<button
className={theme === 'vitesse-dark' ? 'active' : ''}
onClick={() => applyTheme('vitesse-dark')}
type="button"
>
Dark
</button>
<button
className={theme === 'vitesse-light' ? 'active' : ''}
onClick={() => applyTheme('vitesse-light')}
type="button"
>
Light
</button>
</div>
</div>
<div className="control-group">
<span>Actions</span>
<div className="button-row">
<button onClick={startStreaming} type="button">
Start stream
</button>
<button onClick={resetEditor} type="button">
Reset
</button>
</div>
</div>
</div>
<div className="status-row">
<span>{status}</span>
<span>
{progress}
%
</span>
<span>{streaming ? 'Streaming' : 'Idle'}</span>
</div>
</section>
<section className="editor-card">
<div ref={containerRef} className="editor-frame" />
</section>
</div>
)
}
@@ -0,0 +1,11 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import 'monaco-editor/min/vs/editor/editor.main.css'
import './styles.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
@@ -0,0 +1,169 @@
:root {
color: #14213d;
background:
radial-gradient(circle at top, rgba(249, 233, 199, 0.7), transparent 40%),
linear-gradient(180deg, #f7f2e8 0%, #ece4d5 100%);
font-family:
"Iowan Old Style",
"Palatino Linotype",
"Book Antiqua",
Georgia,
serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
}
button,
code {
font-family:
"SFMono-Regular",
Consolas,
"Liberation Mono",
monospace;
}
#root {
min-height: 100vh;
}
.page-shell {
width: min(1100px, calc(100vw - 32px));
margin: 0 auto;
padding: 24px 0 40px;
}
.hero-card,
.editor-card {
border: 1px solid rgba(20, 33, 61, 0.14);
border-radius: 20px;
background: rgba(255, 252, 245, 0.9);
box-shadow: 0 18px 40px rgba(67, 54, 28, 0.12);
backdrop-filter: blur(10px);
}
.hero-card {
padding: 24px;
}
.editor-card {
margin-top: 18px;
padding: 18px;
}
.eyebrow {
margin: 0 0 10px;
color: #8c5e34;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.8rem;
}
h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 0.95;
}
.lede {
max-width: 52rem;
margin: 16px 0 0;
font-size: 1.02rem;
line-height: 1.65;
}
.control-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 22px;
}
.control-group {
padding: 14px;
border-radius: 16px;
background: rgba(255, 248, 236, 0.92);
border: 1px solid rgba(140, 94, 52, 0.12);
}
.control-group span {
display: block;
margin-bottom: 10px;
font-size: 0.86rem;
color: #6f4c28;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
button {
border: 1px solid rgba(20, 33, 61, 0.15);
border-radius: 999px;
padding: 10px 14px;
background: #fffdf7;
color: #14213d;
cursor: pointer;
transition:
transform 120ms ease,
background-color 120ms ease,
border-color 120ms ease;
}
button:hover {
transform: translateY(-1px);
border-color: rgba(20, 33, 61, 0.32);
}
button.active {
background: #14213d;
color: #fff9ec;
}
.status-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(20, 33, 61, 0.1);
font-size: 0.94rem;
}
.editor-frame {
min-height: 460px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(20, 33, 61, 0.1);
}
@media (max-width: 760px) {
.page-shell {
width: min(100vw - 20px, 1100px);
padding-top: 14px;
}
.hero-card,
.editor-card {
padding: 16px;
border-radius: 16px;
}
.control-grid {
grid-template-columns: 1fr;
}
.editor-frame {
min-height: 380px;
}
}
@@ -0,0 +1,16 @@
{
"compilerOptions": {
"target": "ESNext",
"jsx": "react-jsx",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"baseUrl": ".",
"module": "ESNext",
"moduleResolution": "bundler",
"paths": {
"stream-monaco": ["../../src"]
},
"types": ["vite/client"],
"strict": true
},
"include": ["src/**/*", "vite.config.ts"]
}
@@ -0,0 +1,15 @@
import path from 'node:path'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'stream-monaco': path.resolve(__dirname, '../../src'),
},
},
optimizeDeps: {
exclude: ['stream-monaco'],
},
})
@@ -0,0 +1,134 @@
# Example: Monaco + Shiki theme sync
This minimal example shows how to keep Monaco editor themes and standalone Shiki-rendered code snippets in sync.
Goal
- Register (or pre-register) themes and languages for both Monaco and Shiki.
- Optionally reuse the returned Shiki highlighter from `registerMonacoThemes` for rendering HTML snippets.
Files
- A simple Vue component (see snippet below) that:
- calls `registerMonacoThemes` to preload themes & languages,
- creates an editor and uses a preloaded Shiki highlighter for manual preview rendering,
- switches theme via `setTheme` and also renders a Shiki HTML snippet using the returned highlighter.
Quick steps
1. Create a new Vite + Vue project (or use the existing `examples/streaming-demo` as base).
2. Install package dependencies (you need `vue`, `monaco-editor`, `shiki`, and this library locally or from npm).
3. Add the component below and run the dev server.
Running the example
- From the repository root (recommended with pnpm workspaces):
```bash
pnpm install
pnpm --filter ./examples/shiki-sync dev
```
- Or inside the example directory:
```bash
cd examples/shiki-sync
pnpm install
pnpm dev
```
Retry behavior
- The example UI shows a small "Retry" button if loading themes fails (e.g. network or build issue). Click it to re-attempt preloading themes & languages.
Vue component (single-file component)
```vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { registerMonacoThemes, useMonaco } from 'stream-monaco'
const container = ref<HTMLElement | null>(null)
const preview = ref<HTMLDivElement | null>(null)
const allThemes = ['vitesse-dark', 'vitesse-light']
const allLanguages = ['javascript']
// preload themes & languages and get a shiki highlighter
let shikiHighlighter: any = null
onMounted(async () => {
shikiHighlighter = await registerMonacoThemes(allThemes, allLanguages)
})
const { createEditor, setTheme } = useMonaco({
themes: allThemes,
languages: allLanguages,
})
onMounted(async () => {
if (container.value) {
await createEditor(container.value, 'console.log("hello world")', 'javascript')
}
})
function applyShikiRender(themeName: string) {
if (!shikiHighlighter || !preview.value)
return
try {
const html = shikiHighlighter.codeToHtml('console.log("hello world")', { lang: 'javascript', theme: themeName })
preview.value.innerHTML = html
}
catch (e) {
// fallback: highlighter may not support codeToHtml in some builds; try setTheme instead
try {
shikiHighlighter.setTheme(themeName)
// user should re-render their snippets accordingly
}
catch { }
}
}
function switchToDark() {
setTheme('vitesse-dark')
applyShikiRender('vitesse-dark')
}
function switchToLight() {
setTheme('vitesse-light')
applyShikiRender('vitesse-light')
}
</script>
<template>
<div>
<div class="controls">
<button @click="switchToDark">
Dark
</button>
<button @click="switchToLight">
Light
</button>
</div>
<div ref="container" style="height:300px;border:1px solid #ddd;margin-top:12px" />
<h3>Shiki preview</h3>
<div ref="preview" />
</div>
</template>
<style scoped>
.controls { display:flex; gap:8px }
</style>
```
Notes
- `registerMonacoThemes` now returns the Shiki highlighter Promise — you can reuse it to render static snippets or to call `setTheme` on the highlighter directly.
If you need to keep standalone Shiki-rendered snippets in sync when changing the editor theme, call `registerMonacoThemes(...)` to obtain the Shiki highlighter and then call its `setTheme(...)` / `codeToHtml(...)` methods yourself. The example demonstrates preloading and manual usage.
- If you preload a *full* set of themes & languages at app start, the library will reuse the same highlighter instance and avoid re-creating it on theme changes.
Troubleshooting
- If Shiki's `codeToHtml` isn't exposed on the highlighter build you use (some builds differ), you can still call `setTheme` on the highlighter and re-run your own rendering pipeline.
- For large numbers of themes/languages, consider on-demand loading to reduce startup cost: preload the common ones and lazily call `registerMonacoThemes` for others.
@@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>shiki-sync demo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
@@ -0,0 +1,19 @@
{
"name": "shiki-sync-demo",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --strictPort"
},
"dependencies": {
"stream-monaco": "workspace:*",
"vue": "^3.5.33"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.4",
"typescript": "^5.9.3",
"vite": "^7.2.6"
}
}
@@ -0,0 +1,175 @@
<script setup lang="ts">
import type { ShikiHighlighter } from '../../../src'
import { onMounted, ref } from 'vue'
import { registerMonacoThemes, useMonaco } from '../../../src'
const container = ref<HTMLElement | null>(null)
const preview = ref<HTMLDivElement | null>(null)
const allThemes = [
'andromeeda',
'aurora-x',
'ayu-dark',
'catppuccin-frappe',
'catppuccin-latte',
'catppuccin-macchiato',
'catppuccin-mocha',
'dark-plus',
'dracula',
'dracula-soft',
'everforest-dark',
'everforest-light',
'github-dark',
'github-dark-default',
'github-dark-dimmed',
'github-dark-high-contrast',
'github-light',
'github-light-default',
'github-light-high-contrast',
'gruvbox-dark-hard',
'gruvbox-dark-medium',
'gruvbox-dark-soft',
'gruvbox-light-hard',
'gruvbox-light-medium',
'gruvbox-light-soft',
'houston',
'kanagawa-dragon',
'kanagawa-lotus',
'kanagawa-wave',
'laserwave',
'light-plus',
'material-theme',
'material-theme-darker',
'material-theme-lighter',
'material-theme-ocean',
'material-theme-palenight',
'min-dark',
'min-light',
'monokai',
'night-owl',
'nord',
'one-dark-pro',
'one-light',
'plastic',
'poimandres',
'red',
'rose-pine',
'rose-pine-dawn',
'rose-pine-moon',
'slack-dark',
'slack-ochin',
'snazzy-light',
'solarized-dark',
'solarized-light',
'synthwave-84',
'tokyo-night',
'vesper',
'vitesse-black',
'vitesse-dark',
'vitesse-light',
]
const allLanguages = ['javascript']
let shikiHighlighter: ShikiHighlighter | null = null
const loading = ref(false)
const error = ref<string | null>(null)
const selectedTheme = ref<string>(allThemes[0])
onMounted(async () => {
loading.value = true
error.value = null
try {
shikiHighlighter = await registerMonacoThemes(allThemes, allLanguages)
}
catch (e: any) {
error.value = e?.message || String(e)
}
finally {
loading.value = false
}
})
async function retryLoad() {
loading.value = true
error.value = null
try {
shikiHighlighter = await registerMonacoThemes(allThemes, allLanguages)
}
catch (e: any) {
error.value = e?.message || String(e)
}
finally {
loading.value = false
}
}
const { createEditor, setTheme } = useMonaco({
themes: allThemes,
languages: allLanguages,
theme: selectedTheme.value,
})
onMounted(async () => {
if (container.value) {
await createEditor(container.value, 'console.log("hello world")', 'javascript')
// apply initial theme to preview once editor created
applyShikiRender(selectedTheme.value)
}
})
function applyShikiRender(themeName: string) {
if (!shikiHighlighter || !preview.value)
return
try {
const html = shikiHighlighter.codeToHtml('console.log("hello world")', { lang: 'javascript', theme: themeName })
preview.value.innerHTML = html
}
catch {
try {
shikiHighlighter.setTheme(themeName)
}
catch { }
}
}
function onThemeChange(theme: string) {
selectedTheme.value = theme
setTheme(theme)
applyShikiRender(theme)
}
function onThemeSelectChange(e: Event) {
const el = e.target as HTMLSelectElement | null
if (!el)
return
onThemeChange(el.value)
}
</script>
<template>
<div style="padding:16px">
<div class="controls">
<label for="theme-select">Theme:</label>
<select id="theme-select" v-model="selectedTheme" :disabled="loading || !!error" @change="onThemeSelectChange">
<option v-for="t in allThemes" :key="t" :value="t">
{{ t }}
</option>
</select>
<span v-if="loading" style="margin-left:8px">Loading themes...</span>
<span v-if="error" style="margin-left:8px;color:crimson">Error: {{ error }}</span>
<button v-if="error" style="margin-left:8px" @click="retryLoad">
Retry
</button>
</div>
<div ref="container" style="height:300px;border:1px solid #ddd;margin-top:12px" />
<h3>Shiki preview</h3>
<div ref="preview" />
</div>
</template>
<style scoped>
.controls { display:flex; gap:8px }
</style>
@@ -0,0 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import 'monaco-editor/min/vs/editor/editor.main.css'
createApp(App).mount('#app')
@@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "ES2020",
"jsx": "preserve",
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"types": ["vite/client"],
"strict": true,
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"]
}
@@ -0,0 +1,6 @@
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [vue()],
})
@@ -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'],
},
})