a80e6d1ca4
Replaces the four <textarea> usages with a CodeMirror 6 editor that
brings, just by being a real editor: syntax highlighting, line
numbers, bracket matching, multi-cursor, proper undo/redo, and
search/replace (Ctrl+F / Ctrl+H). Plus a Rhai-aware autocomplete and
a "Format JSON" button on the test-invoke panels.
Per discussion, deliberately did NOT add: LSP, go-to-definition,
Rhai formatter (none exists), or anything else IDE-shaped. The
existing CodeEditor component is wired so swapping the language
extension later is a one-line change.
Lay of the land (from the research pass):
* No CodeMirror Rhai package exists on npm.
* No Rhai formatter exists anywhere.
* The Rhai authors publish a TextMate grammar at
rhaiscript/vscode-rhai (MPL-2.0). We don't load the full
grammar (would cost ~250KB of vscode-textmate + oniguruma);
we cite it as the source-of-truth for our keyword/operator
lists in a small custom StreamLanguage.
* rhaiscript/lsp exists but is experimental + unmaintained
since 2023; skipped.
Files:
* dashboard/src/lib/editor-theme.ts — CodeMirror theme +
HighlightStyle wired to the existing slate/sky palette so the
editor blends into the cards instead of looking transplanted.
* dashboard/src/lib/rhai-mode.ts — StreamLanguage tokenizer for
Rhai with the upstream grammar's keyword/operator lists, plus
a completion source pulling ctx.* / log::* from our SDK
contract suite (the authoritative list).
* dashboard/src/lib/CodeEditor.svelte — wraps EditorView with
two-way $bindable() value, language picker ('rhai' | 'json'),
placeholder, minHeight props. Guards against the update
listener echoing parent-driven changes back as edits.
* Replaces textareas in:
routes/+page.svelte — create form source
routes/scripts/[id]/+page.svelte — Edit tab source +
Test invoke body +
headers
* Format buttons next to the body/headers editors run
JSON.stringify(JSON.parse(value), null, 2); errors surface
inline next to the button without trashing the field.
Bundle:
* +~430KB to the CodeMirror chunk in dashboard build (~150KB
gzipped on the wire). Lazy-loaded — only fetched when a route
that uses CodeEditor renders.
* `npm install` clean, 0 vulnerabilities, `npm run check`
clean, `npm run build` clean.
No backend / API / SDK / schema / wire changes. No version bumps.
48 lines
1.4 KiB
JSON
48 lines
1.4 KiB
JSON
{
|
|
"name": "picloud-dashboard",
|
|
"version": "0.5.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite dev",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
"format": "prettier --write .",
|
|
"lint": "prettier --check . && eslint ."
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.18.0",
|
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
"@sveltejs/kit": "^2.17.0",
|
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
"@types/node": "^22.10.5",
|
|
"eslint": "^9.18.0",
|
|
"eslint-config-prettier": "^10.0.1",
|
|
"eslint-plugin-svelte": "^3.0.0",
|
|
"globals": "^15.14.0",
|
|
"prettier": "^3.4.2",
|
|
"prettier-plugin-svelte": "^3.3.3",
|
|
"svelte": "^5.19.0",
|
|
"svelte-check": "^4.1.4",
|
|
"typescript": "^5.7.3",
|
|
"typescript-eslint": "^8.20.0",
|
|
"vite": "^6.0.7"
|
|
},
|
|
"overrides": {
|
|
"cookie": "^0.7.2"
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/autocomplete": "^6.20.2",
|
|
"@codemirror/commands": "^6.10.3",
|
|
"@codemirror/lang-json": "^6.0.2",
|
|
"@codemirror/language": "^6.12.3",
|
|
"@codemirror/search": "^6.7.0",
|
|
"@codemirror/state": "^6.6.0",
|
|
"@codemirror/view": "^6.43.0",
|
|
"@lezer/highlight": "^1.2.3",
|
|
"codemirror": "^6.0.2"
|
|
}
|
|
}
|