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:
@@ -12,9 +12,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"execa": "^9.6.1",
|
||||
"express": "^4.22.2",
|
||||
"simple-git": "^3.27.0",
|
||||
"vscode-ws-jsonrpc": "^3.5.0",
|
||||
"ws": "^8.18.2",
|
||||
"zod": "^3.24.5"
|
||||
},
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import path from "node:path";
|
||||
|
||||
const DEFAULT_ROOT = path.resolve(process.cwd(), "..", "projects");
|
||||
|
||||
export const PROJECTS_ROOT = path.resolve(
|
||||
process.env.PROJECTS_ROOT ?? DEFAULT_ROOT,
|
||||
);
|
||||
@@ -1,27 +1,83 @@
|
||||
import { createServer } from "http";
|
||||
import cors from "cors";
|
||||
import express from "express";
|
||||
import { createServer } from "node:http";
|
||||
import { WebSocketServer } from "ws";
|
||||
import { attachLsp } from "./lsp-proxy.js";
|
||||
import { attachPreview } from "./preview-proxy.js";
|
||||
import { previewWebviewRouter } from "./preview-webview.js";
|
||||
import { seedIfMissing } from "./seed.js";
|
||||
import { filesRouter } from "./routes/files.js";
|
||||
import { previewRouter } from "./routes/preview.js";
|
||||
import { projectsRouter } from "./routes/projects.js";
|
||||
|
||||
const PORT = Number(process.env.PORT) || 4000;
|
||||
// Allow a single origin or a comma-separated list (self-hosted behind a
|
||||
// reverse proxy / multiple frontends).
|
||||
const FRONTEND_ORIGINS = (process.env.FRONTEND_ORIGIN ?? "http://localhost:1420")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
const server = createServer((_req, res) => {
|
||||
res.writeHead(200, { "Content-Type": "application/json" });
|
||||
res.end(JSON.stringify({ status: "ok", service: "typst-leaf-backend" }));
|
||||
const app = express();
|
||||
app.use(cors({ origin: FRONTEND_ORIGINS }));
|
||||
app.use(express.json({ limit: "4mb" }));
|
||||
|
||||
app.get("/api/health", (_req, res) => {
|
||||
res.json({ status: "ok", service: "typst-leaf-backend" });
|
||||
});
|
||||
|
||||
const wss = new WebSocketServer({ server });
|
||||
app.use("/api/projects", projectsRouter);
|
||||
app.use("/api/projects", filesRouter);
|
||||
app.use("/api/preview", previewRouter);
|
||||
app.use("/preview-app", previewWebviewRouter);
|
||||
|
||||
wss.on("connection", (ws) => {
|
||||
console.log("WebSocket client connected");
|
||||
const server = createServer(app);
|
||||
|
||||
ws.on("message", (data) => {
|
||||
console.log("Received:", data.toString());
|
||||
const wss = new WebSocketServer({ noServer: true });
|
||||
|
||||
server.on("upgrade", (req, socket, head) => {
|
||||
const { url } = req;
|
||||
if (url === "/lsp" || url === "/preview") {
|
||||
wss.handleUpgrade(req, socket, head, (ws) => {
|
||||
wss.emit("connection", ws, req);
|
||||
});
|
||||
} else {
|
||||
socket.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
wss.on("connection", (ws, req) => {
|
||||
const path = new URL(req.url ?? "/", "http://x").pathname;
|
||||
console.log(`[ws] connected: ${path}`);
|
||||
ws.on("close", () => console.log(`[ws] disconnected: ${path}`));
|
||||
ws.on("error", (err) => console.error(`[ws] error (${path}):`, err.message));
|
||||
if (path === "/lsp") {
|
||||
attachLsp(ws);
|
||||
} else if (path === "/preview") {
|
||||
attachPreview(ws);
|
||||
}
|
||||
});
|
||||
|
||||
async function main(): Promise<void> {
|
||||
await seedIfMissing();
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Backend running on http://localhost:${PORT}`);
|
||||
});
|
||||
|
||||
ws.on("close", () => {
|
||||
console.log("WebSocket client disconnected");
|
||||
});
|
||||
});
|
||||
// Graceful shutdown: close the HTTP/WS server so tinymist (spawned by the
|
||||
// LSP proxy) is reaped and ports release. Without this, `tsx watch` restarts
|
||||
// can orphan child processes.
|
||||
const shutdown = (sig: string) => () => {
|
||||
console.log(`[shutdown] received ${sig}`);
|
||||
server.close(() => process.exit(0));
|
||||
// Force-exit after a short grace if something hangs.
|
||||
setTimeout(() => process.exit(0), 1500).unref();
|
||||
};
|
||||
process.on("SIGTERM", shutdown("SIGTERM"));
|
||||
process.on("SIGINT", shutdown("SIGINT"));
|
||||
}
|
||||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Backend running on http://localhost:${PORT}`);
|
||||
main().catch((err) => {
|
||||
console.error("Fatal startup error:", err);
|
||||
process.exit(1);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { WebSocket } from "ws";
|
||||
import {
|
||||
createConnection,
|
||||
forward,
|
||||
type IConnection,
|
||||
} from "vscode-ws-jsonrpc/server";
|
||||
import {
|
||||
WebSocketMessageReader,
|
||||
WebSocketMessageWriter,
|
||||
type IWebSocket,
|
||||
} from "vscode-ws-jsonrpc/socket";
|
||||
import { createServerProcess } from "vscode-ws-jsonrpc/server";
|
||||
|
||||
interface ActiveSession {
|
||||
clientConn: IConnection;
|
||||
}
|
||||
|
||||
let active: ActiveSession | null = null;
|
||||
|
||||
function adaptWs(ws: WebSocket): IWebSocket {
|
||||
const messageListeners: Array<(data: unknown) => void> = [];
|
||||
const errorListeners: Array<(reason: unknown) => void> = [];
|
||||
const closeListeners: Array<(code: number, reason: string) => void> = [];
|
||||
ws.on("message", (data) => {
|
||||
const text = typeof data === "string" ? data : data.toString("utf8");
|
||||
for (const cb of messageListeners) cb(text);
|
||||
});
|
||||
ws.on("error", (err) => {
|
||||
for (const cb of errorListeners) cb(err);
|
||||
});
|
||||
ws.on("close", (code, reason) => {
|
||||
for (const cb of closeListeners) cb(code, reason.toString());
|
||||
});
|
||||
return {
|
||||
send(content) {
|
||||
ws.send(content);
|
||||
},
|
||||
onMessage(cb) {
|
||||
messageListeners.push(cb);
|
||||
},
|
||||
onError(cb) {
|
||||
errorListeners.push(cb);
|
||||
},
|
||||
onClose(cb) {
|
||||
closeListeners.push(cb);
|
||||
},
|
||||
dispose() {
|
||||
try {
|
||||
ws.close();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function attachLsp(ws: WebSocket): void {
|
||||
if (active) {
|
||||
console.log("[lsp] takeover: closing previous session");
|
||||
active.clientConn.dispose();
|
||||
active = null;
|
||||
}
|
||||
|
||||
const serverConn = createServerProcess("tinymist", "tinymist", ["lsp"]);
|
||||
if (!serverConn) {
|
||||
console.error("[lsp] failed to spawn tinymist");
|
||||
ws.close(1011, "tinymist spawn failed");
|
||||
return;
|
||||
}
|
||||
|
||||
const iws = adaptWs(ws);
|
||||
const wsReader = new WebSocketMessageReader(iws);
|
||||
const wsWriter = new WebSocketMessageWriter(iws);
|
||||
const clientConn = createConnection(wsReader, wsWriter, () => iws.dispose());
|
||||
|
||||
forward(clientConn, serverConn);
|
||||
active = { clientConn };
|
||||
|
||||
const cleanup = () => {
|
||||
if (active?.clientConn === clientConn) active = null;
|
||||
};
|
||||
clientConn.onClose(cleanup);
|
||||
serverConn.onClose(cleanup);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import path from "node:path";
|
||||
import { z } from "zod";
|
||||
import { PROJECTS_ROOT } from "./config.js";
|
||||
|
||||
export const projectNameSchema = z
|
||||
.string()
|
||||
.min(1)
|
||||
.max(64)
|
||||
.regex(/^[A-Za-z0-9._-]+$/, "invalid project name")
|
||||
.refine((n) => n !== "." && n !== "..", "project name not allowed");
|
||||
|
||||
export const relPathSchema = z
|
||||
.string()
|
||||
.min(1)
|
||||
.max(512)
|
||||
.refine((p) => !path.isAbsolute(p), "absolute paths not allowed")
|
||||
.refine((p) => !p.includes("\0"), "NUL bytes not allowed")
|
||||
.refine((p) => {
|
||||
const parts = p.split(/[\\/]+/);
|
||||
return !parts.includes("..");
|
||||
}, "parent traversal not allowed");
|
||||
|
||||
export function projectDir(name: string): string {
|
||||
const dir = path.resolve(PROJECTS_ROOT, name);
|
||||
const rootReal = path.resolve(PROJECTS_ROOT) + path.sep;
|
||||
if (!(dir + path.sep).startsWith(rootReal) && dir !== path.resolve(PROJECTS_ROOT)) {
|
||||
throw new Error("project name escapes projects root");
|
||||
}
|
||||
return dir;
|
||||
}
|
||||
|
||||
export function resolveFile(
|
||||
project: string,
|
||||
relPath: string,
|
||||
): { abs: string; virtual: string } {
|
||||
const projectAbs = projectDir(project);
|
||||
const abs = path.resolve(projectAbs, relPath);
|
||||
const projectReal = projectAbs + path.sep;
|
||||
if (!(abs + path.sep).startsWith(projectReal) && abs !== projectAbs) {
|
||||
throw new Error("path escapes project root");
|
||||
}
|
||||
return { abs, virtual: `${project}/${relPath.split(/[\\/]+/).join("/")}` };
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import type { WebSocket, WebSocket as WSClient } from "ws";
|
||||
import WebSocketImpl from "ws";
|
||||
import { getPreviewHost, getPreviewPort } from "./preview-sink.js";
|
||||
|
||||
const RETRY_DELAY_MS = 250;
|
||||
const RETRY_TIMEOUT_MS = 10000;
|
||||
|
||||
function dialPreview(port: number): Promise<WSClient> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = `ws://${getPreviewHost()}:${port}`;
|
||||
// typst-preview warns/rejects connections without an Origin header; the
|
||||
// browser always sends one, so our backend dial must add it too.
|
||||
const upstream = new WebSocketImpl(url, {
|
||||
headers: { Origin: `http://${getPreviewHost()}:${port}` },
|
||||
});
|
||||
upstream.once("open", () => {
|
||||
upstream.off("error", onError);
|
||||
resolve(upstream);
|
||||
});
|
||||
const onError = (err: Error) => {
|
||||
upstream.off("open", onOpen);
|
||||
reject(err);
|
||||
};
|
||||
const onOpen = () => {};
|
||||
upstream.once("open", onOpen);
|
||||
upstream.once("error", onError);
|
||||
});
|
||||
}
|
||||
|
||||
async function connectWithRetry(port: number): Promise<WSClient> {
|
||||
const start = Date.now();
|
||||
for (;;) {
|
||||
try {
|
||||
return await dialPreview(port);
|
||||
} catch {
|
||||
if (Date.now() - start > RETRY_TIMEOUT_MS) {
|
||||
throw new Error("preview server not reachable");
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, RETRY_DELAY_MS));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function bridge(client: WebSocket, upstream: WSClient): void {
|
||||
client.on("message", (data, isBinary) => {
|
||||
if (upstream.readyState === upstream.OPEN) {
|
||||
upstream.send(data, { binary: isBinary });
|
||||
}
|
||||
});
|
||||
upstream.on("message", (data, isBinary) => {
|
||||
if (client.readyState === client.OPEN) {
|
||||
client.send(data, { binary: isBinary });
|
||||
}
|
||||
});
|
||||
const close = () => {
|
||||
try { client.close(); } catch { /* ignore */ }
|
||||
try { upstream.close(); } catch { /* ignore */ }
|
||||
};
|
||||
client.on("close", close);
|
||||
upstream.on("close", close);
|
||||
client.on("error", close);
|
||||
upstream.on("error", close);
|
||||
}
|
||||
|
||||
export function attachPreview(ws: WebSocket): void {
|
||||
const port = getPreviewPort();
|
||||
if (port === null) {
|
||||
console.error("[preview] no preview port registered yet");
|
||||
try { ws.close(1011, "no preview server"); } catch { /* ignore */ }
|
||||
return;
|
||||
}
|
||||
console.log(`[preview] client connected, dialing ws://${getPreviewHost()}:${port}`);
|
||||
connectWithRetry(port)
|
||||
.then((upstream) => {
|
||||
console.log("[preview] upstream connected");
|
||||
bridge(ws, upstream);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`[preview] upstream unavailable: ${(err as Error).message}`);
|
||||
try { ws.close(1011, "preview server unavailable"); } catch { /* ignore */ }
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// Holds the preview-server port discovered by the client (returned by the
|
||||
// `tinymist.startDefaultPreview` LSP command). The client learns the port
|
||||
// over the LSP wire and relays it here via REST; the backend then proxies
|
||||
// `/preview` (WS) and `/preview-app` (HTTP) to that port. This keeps the LSP
|
||||
// proxy a pure byte-pipe while still letting the browser reach the preview
|
||||
// through our origin (works for remote self-hosting).
|
||||
|
||||
const DEFAULT_HOST = process.env.TINYMIST_PREVIEW_HOST ?? "127.0.0.1";
|
||||
|
||||
let currentPort: number | null = null;
|
||||
|
||||
export function getPreviewHost(): string {
|
||||
return DEFAULT_HOST;
|
||||
}
|
||||
|
||||
export function getPreviewPort(): number | null {
|
||||
return currentPort;
|
||||
}
|
||||
|
||||
export function setPreviewPort(port: number): void {
|
||||
currentPort = port;
|
||||
}
|
||||
|
||||
export function previewBaseUrl(): string | null {
|
||||
if (currentPort === null) return null;
|
||||
return `http://${DEFAULT_HOST}:${currentPort}`;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Router, type Router as ExpressRouter } from "express";
|
||||
import { previewBaseUrl } from "./preview-sink.js";
|
||||
|
||||
export const previewWebviewRouter: ExpressRouter = Router();
|
||||
|
||||
// Small script injected into the typst-preview webview HTML. The webview opens
|
||||
// its data-plane WebSocket against its own origin (`ws://host/`); when we
|
||||
// serve it from our origin we must repoint that socket at `/preview`, which
|
||||
// our backend proxies to the (random) port tinymist assigned. Patching the
|
||||
// global WebSocket constructor is reliable regardless of how the webview's
|
||||
// minified RxJS builds the URL.
|
||||
//
|
||||
// We also override `matchMedia` so `(prefers-color-scheme: dark)` is always
|
||||
// `false`, forcing the preview to render in light mode. tinymist's CLI
|
||||
// `--invert-colors` flag sometimes doesn't propagate to the webview client;
|
||||
// this is a belt-and-suspenders fix at the HTML level.
|
||||
const REWRITE_SCRIPT = `<script>(function(){
|
||||
// ---- WS path rewrite ----
|
||||
var Orig = window.WebSocket;
|
||||
function Patched(url, protocols){
|
||||
try {
|
||||
var u = new URL(url, location.origin);
|
||||
if (u.pathname === "/" || u.pathname === "") u.pathname = "/preview";
|
||||
url = u.toString();
|
||||
} catch (e) {}
|
||||
return protocols === undefined ? new Orig(url) : new Orig(url, protocols);
|
||||
}
|
||||
Patched.prototype = Orig.prototype;
|
||||
Patched.CONNECTING = Orig.CONNECTING;
|
||||
Patched.OPEN = Orig.OPEN;
|
||||
Patched.CLOSING = Orig.CLOSING;
|
||||
Patched.CLOSED = Orig.CLOSED;
|
||||
window.WebSocket = Patched;
|
||||
|
||||
// ---- Force light mode ----
|
||||
var _mm = window.matchMedia.bind(window);
|
||||
window.matchMedia = function(q) {
|
||||
var m = _mm(q);
|
||||
if (/(prefers-color-scheme|color-scheme)/i.test(q)) {
|
||||
return Object.defineProperties({}, {
|
||||
matches: { get: function(){ return false; } },
|
||||
media: { get: function(){ return q; } },
|
||||
onchange: { get: function(){ return null; }, set: function(){} },
|
||||
addEventListener: { value: function(){} },
|
||||
removeEventListener: { value: function(){} },
|
||||
});
|
||||
}
|
||||
return m;
|
||||
};
|
||||
})();</script>`;
|
||||
|
||||
previewWebviewRouter.get("/", async (_req, res) => {
|
||||
const base = previewBaseUrl();
|
||||
if (!base) {
|
||||
res.status(503).send("preview server not started");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const upstream = await fetch(base + "/");
|
||||
if (!upstream.ok) {
|
||||
res.status(502).send(`preview server returned ${upstream.status}`);
|
||||
return;
|
||||
}
|
||||
let html = await upstream.text();
|
||||
if (html.includes("</head>")) {
|
||||
html = html.replace("</head>", `${REWRITE_SCRIPT}</head>`);
|
||||
} else {
|
||||
// no <head>; prepend so the patch is installed before any app script runs
|
||||
html = REWRITE_SCRIPT + html;
|
||||
}
|
||||
res.type("html").send(html);
|
||||
} catch (err) {
|
||||
res.status(502).send(`preview server unreachable: ${(err as Error).message}`);
|
||||
}
|
||||
});
|
||||
@@ -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 });
|
||||
});
|
||||
@@ -0,0 +1,44 @@
|
||||
import fs from "node:fs/promises";
|
||||
import path from "node:path";
|
||||
import { PROJECTS_ROOT } from "./config.js";
|
||||
|
||||
const SEED_PROJECT = "hello";
|
||||
const SEED_FILE = "main.typ";
|
||||
|
||||
const SEED_CONTENT = `= Hello, typst-leaf!
|
||||
|
||||
Welcome to your first project. Edit this file on the left;
|
||||
the preview on the right updates as you type.
|
||||
|
||||
== Features
|
||||
|
||||
- Instant preview powered by *tinymist*
|
||||
- Live diagnostics and autocomplete
|
||||
- A real editor in your browser
|
||||
|
||||
== Math
|
||||
|
||||
The quadratic formula:
|
||||
$ x = (-b +- sqrt(b^2 - 4 a c)) / (2 a) $
|
||||
|
||||
== Code listing
|
||||
|
||||
\`\`\`typ
|
||||
#let greet(name) = [Hello, *#name*!]
|
||||
|
||||
#greet("world")
|
||||
\`\`\`
|
||||
`;
|
||||
|
||||
export async function seedIfMissing(): Promise<void> {
|
||||
await fs.mkdir(PROJECTS_ROOT, { recursive: true });
|
||||
const projectDir = path.join(PROJECTS_ROOT, SEED_PROJECT);
|
||||
const file = path.join(projectDir, SEED_FILE);
|
||||
try {
|
||||
await fs.access(file);
|
||||
} catch {
|
||||
await fs.mkdir(projectDir, { recursive: true });
|
||||
await fs.writeFile(file, SEED_CONTENT, "utf8");
|
||||
console.log(`[seed] created ${SEED_PROJECT}/${SEED_FILE}`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user