feat: barebones MVP — editor, live LSP, and preview

Backend (typst-leaf-backend)
- REST API for multi-project file management under PROJECTS_ROOT
  (list/create projects, get file tree, read/write files; zod-validated
  sandbox prevents path traversal).
- LSP thin proxy: spawns a single tinymist lsp process, pipes one active
  WebSocket straight to its stdio via vscode-ws-jsonrpc. New connections
  trigger a takeover (old session disposed, fresh tinymist spawned).
- Live preview pipeline: the frontend sends tinymist.startDefaultPreview
  over the LSP wire, reads the returned data-plane port, and relays it to
  the backend. The backend proxies /preview (WS, with retry and an Origin
  header for typst-preview) and /preview-app (HTTP, injecting a script that
  rewrites the webview's WS path to /preview and forces light mode).
- Graceful SIGTERM/SIGINT shutdown.
- Auto-seeds a hello project on first boot.
- Removed execa dependency (no longer needed).

Frontend (typst-leaf-frontend)
- Monaco editor with typst syntax highlighting (Monarch tokenizer) and
  live LSP diagnostics (markers), completion, hover, definitions, and
  formatting — all driven by a raw JSON-RPC WebSocket client (no
  monaco-languageclient or vscode-api dependency).
- Project picker and file tree sidebar.
- Live preview pane: iframes the typst-preview webview through the
  backend's /preview-app proxy, so the pipedepeline works remotely.
- Monaco bundled locally (no CDN) with a Vite worker setup.
- Vite dev proxy so relative /api, /lsp, /preview, and /preVIEW-app URLs
  reach the backend on port 4000.
- Light-mode UI (editor 'vs' theme, white chrome).
- Prevent esbuild from tree-shaking monaco.editor services
  (optimizeDeps.esbuildOptions.treeShaking: false).

Infrastructure
- Added vscode-ws-jsonrpc to backend dependencies.
- Removed monaco-languageclient and vscode-ws-jsonrpc from frontend
  dependencies (replaced by the raw JSON-RPC client).
- Added monaco-editor as a direct frontend dependency.
- Updated README (correct frontend port 1420, tinymist install command,
  environment variables, architecture).
- Added projects/ to .gitignore.
- Renamed Tauri productName and page title to typst-leaf.
This commit is contained in:
2026-07-01 20:53:42 +05:30
parent b00fe3ec9e
commit 061f95ddee
29 changed files with 1904 additions and 667 deletions
+107
View File
@@ -0,0 +1,107 @@
import { Router, type Router as ExpressRouter } from "express";
import fs from "node:fs/promises";
import path from "node:path";
import { pathToFileURL } from "node:url";
import { PROJECTS_ROOT } from "../config.js";
import { projectDir, projectNameSchema } from "../paths.js";
export const projectsRouter: ExpressRouter = Router();
const MAX_TREE_DEPTH = 6;
const MAX_TREE_ENTRIES = 2000;
projectsRouter.get("/", async (_req, res) => {
try {
await fs.mkdir(PROJECTS_ROOT, { recursive: true });
const entries = await fs.readdir(PROJECTS_ROOT, { withFileTypes: true });
const projects = entries
.filter((e) => e.isDirectory() && !e.name.startsWith("."))
.map((e) => e.name)
.sort();
res.json({ projects });
} catch (err) {
res.status(500).json({ error: (err as Error).message });
}
});
projectsRouter.post("/:project", async (req, res) => {
const parsed = projectNameSchema.safeParse(req.params.project);
if (!parsed.success) {
res.status(400).json({ error: parsed.error.issues });
return;
}
const name = parsed.data;
const dir = path.join(PROJECTS_ROOT, name);
try {
await fs.mkdir(dir, { recursive: true });
const main = path.join(dir, "main.typ");
try {
await fs.access(main);
} catch {
await fs.writeFile(
main,
// The Typst heading `=` must be followed by a space, then the title.
`= ${name}\n\nHello from a fresh project.\n`,
"utf8",
);
}
res.status(201).json({ project: name });
} catch (err) {
res.status(500).json({ error: (err as Error).message });
}
});
projectsRouter.get("/:project", async (req, res) => {
const parsed = projectNameSchema.safeParse(req.params.project);
if (!parsed.success) {
res.status(400).json({ error: parsed.error.issues });
return;
}
const dir = projectDir(parsed.data);
try {
await fs.access(dir);
} catch {
res.status(404).json({ error: "project not found" });
return;
}
res.json({ project: parsed.data, uri: pathToFileURL(dir).href });
});
projectsRouter.get("/:project/tree", async (req, res) => {
const parsed = projectNameSchema.safeParse(req.params.project);
if (!parsed.success) {
res.status(400).json({ error: parsed.error.issues });
return;
}
const dir = projectDir(parsed.data);
try {
await fs.access(dir);
} catch {
res.status(404).json({ error: "project not found" });
return;
}
const out: { path: string; mtime: number }[] = [];
const budget = { left: MAX_TREE_ENTRIES };
async function walk(rel: string, depth: number): Promise<void> {
if (depth > MAX_TREE_DEPTH || budget.left <= 0) return;
const abs = path.join(dir, rel);
const entries = await fs.readdir(abs, { withFileTypes: true });
for (const entry of entries) {
if (budget.left <= 0) return;
if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
const childRel = rel ? `${rel}/${entry.name}` : entry.name;
const childAbs = path.join(abs, entry.name);
const stat = await fs.stat(childAbs);
if (entry.isDirectory()) {
await walk(childRel, depth + 1);
} else if (entry.isFile() && entry.name.endsWith(".typ")) {
out.push({ path: childRel, mtime: stat.mtimeMs });
budget.left -= 1;
}
}
}
await walk("", 0);
res.json({ project: parsed.data, files: out });
});