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:
@@ -0,0 +1,55 @@
|
||||
import { Router, type Router as ExpressRouter } from "express";
|
||||
import fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { z } from "zod";
|
||||
import { projectNameSchema, relPathSchema, resolveFile } from "../paths.js";
|
||||
|
||||
export const filesRouter: ExpressRouter = Router();
|
||||
|
||||
const projectParam = z.object({ project: projectNameSchema });
|
||||
const fileQuery = z.object({ path: relPathSchema });
|
||||
const writeBody = z.object({ content: z.string() });
|
||||
|
||||
filesRouter.get("/:project/file", async (req, res) => {
|
||||
const p = projectParam.safeParse(req.params);
|
||||
const q = fileQuery.safeParse(req.query);
|
||||
if (!p.success || !q.success) {
|
||||
res.status(400).json({
|
||||
error: [...(p.error?.issues ?? []), ...(q.error?.issues ?? [])],
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { abs } = resolveFile(p.data.project, q.data.path);
|
||||
const content = await fs.readFile(abs, "utf8");
|
||||
const stat = await fs.stat(abs);
|
||||
res.json({ path: q.data.path, content, mtime: stat.mtimeMs });
|
||||
} catch (err) {
|
||||
res.status(404).json({ error: (err as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
filesRouter.put("/:project/file", async (req, res) => {
|
||||
const p = projectParam.safeParse(req.params);
|
||||
const q = fileQuery.safeParse(req.query);
|
||||
const b = writeBody.safeParse(req.body);
|
||||
if (!p.success || !q.success || !b.success) {
|
||||
res.status(400).json({
|
||||
error: [
|
||||
...(p.error?.issues ?? []),
|
||||
...(q.error?.issues ?? []),
|
||||
...(b.error?.issues ?? []),
|
||||
],
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { abs } = resolveFile(p.data.project, q.data.path);
|
||||
await fs.mkdir(path.dirname(abs), { recursive: true });
|
||||
await fs.writeFile(abs, b.data.content, "utf8");
|
||||
const stat = await fs.stat(abs);
|
||||
res.json({ path: q.data.path, mtime: stat.mtimeMs });
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: (err as Error).message });
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Router, type Router as ExpressRouter } from "express";
|
||||
import { z } from "zod";
|
||||
import { setPreviewPort } from "../preview-sink.js";
|
||||
|
||||
export const previewRouter: ExpressRouter = Router();
|
||||
|
||||
const portSchema = z.object({
|
||||
port: z.number().int().min(1).max(65535),
|
||||
});
|
||||
|
||||
// Called by the frontend after the LSP `tinymist.startDefaultPreview` command
|
||||
// returns its (random) data-plane port. The backend stores it so that the
|
||||
// `/preview` WS and `/preview-app` HTTP proxies know where to dial.
|
||||
previewRouter.post("/sink", (req, res) => {
|
||||
const parsed = portSchema.safeParse(req.body);
|
||||
if (!parsed.success) {
|
||||
res.status(400).json({ error: parsed.error.issues });
|
||||
return;
|
||||
}
|
||||
setPreviewPort(parsed.data.port);
|
||||
res.json({ ok: true, port: parsed.data.port });
|
||||
});
|
||||
@@ -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 });
|
||||
});
|
||||
Reference in New Issue
Block a user