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