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:
@@ -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'],
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user