wgsl-edit 0.0.24 → 0.0.26

package/README.md

@@ -10,7 +10,8 @@ Web component for editing WESL/WGSL with CodeMirror 6.
 <wgsl-edit></wgsl-edit>
 ```
 
-Features syntax highlighting, linting, multi-file tabs, and light/dark themes out of the box.
+Features syntax highlighting, linting, multi-file tabs, and light/dark themes
+out of the box.
 
 ### Inline source
 
@@ -74,19 +75,24 @@ editor.project = {                    // load a full project
 | `line-numbers` | `true` `false` | `false` | Show line numbers |
 | `fetch-libs` | `true` `false` | `true` | Auto-fetch missing libraries from npm |
 | `shader-root` | string | - | Root path for shader imports |
+| `autosave` | `true` `false` | `false` | Persist edits to disk via dev server (use `wgsl-edit/autosave` plugin) |
 
 ### Properties
 
 - `source: string` - Get/set active file content
-- `conditions: Record<string, boolean>` - Get/set conditions for conditional compilation (`@if`/`@elif`/`@else`)
-- `project: WeslProject` - Get/set full project (weslSrc, conditions, constants, packageName, libs)
+- `conditions: Record<string, boolean>` - Get/set conditions for conditional
+  compilation (`@if`/`@elif`/`@else`)
+- `project: WeslProject` - Get/set full project (weslSrc, conditions, constants,
+  packageName, libs)
 - `activeFile: string` - Get/set active file name
 - `fileNames: string[]` - List all file names
-- `theme`, `tabs`, `lint`, `lineNumbers`, `readonly`, `shaderRoot`, `fetchLibs` - Mirror attributes
+- `theme`, `tabs`, `lint`, `lineNumbers`, `readonly`, `shaderRoot`, `fetchLibs`
+  - Mirror attributes
 
 ### Methods
 
-- `link(options?): Promise<string>` - Compile WESL sources into WGSL, returns the linked output
+- `link(options?): Promise<string>` - Compile WESL sources into WGSL, returns
+  the linked output
 - `addFile(name, content?)` - Add a new file
 - `removeFile(name)` - Remove a file
 - `renameFile(oldName, newName)` - Rename a file
@@ -98,8 +104,8 @@ editor.project = {                    // load a full project
 
 ## Using with wesl-plugin
 
-For full project support (libraries, conditional compilation, constants),
-use [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/packages/wesl-plugin)
+For full project support (libraries, conditional compilation, constants), use
+[wesl-plugin](https://github.com/webgpu-tools/wesl-js/tree/main/packages/wesl-plugin)
 to assemble shaders at build time and pass them to the editor via `project`.
 
 ```typescript
@@ -122,8 +128,42 @@ editor.project = {
 };
 ```
 
-The `?link` import provides `weslSrc`, `libs`, `rootModuleName`, and `packageName`.
-The editor's linter uses these to validate imports, conditions, and constants as you type.
+The `?link` import provides `weslSrc`, `libs`, `rootModuleName`, and
+`packageName`. The editor's linter uses these to validate imports, conditions,
+and constants as you type.
+
+## Autosave (dev mode)
+
+When using wesl-plugin, edits can be persisted back to the source file on disk
+during Vite development. Add the `wgslEditAutosave()` plugin alongside
+wesl-plugin and set `autosave` on the editor:
+
+```typescript
+// vite.config.ts
+import wgslEditAutosave from "wgsl-edit/autosave";
+import { linkBuildExtension } from "wesl-plugin";
+import viteWesl from "wesl-plugin/vite";
+
+export default {
+  plugins: [
+    viteWesl({ extensions: [linkBuildExtension] }),
+    wgslEditAutosave(),
+  ],
+};
+```
+
+```typescript
+// app.ts
+import shaderConfig from "./shader.wesl?link";
+
+const editor = document.querySelector("wgsl-edit");
+editor.project = shaderConfig;
+editor.autosave = true;
+```
+
+`shader-root` is picked up automatically from the `?link` import, so edits land
+in the right file on disk. Production builds never include the middleware, so
+the same code is safe to ship.
 
 ## Styling
 

package/dist/SaveEndpoint.d.mts

@@ -0,0 +1,5 @@
+//#region src/SaveEndpoint.d.ts
+/** Shared between client (WgslEdit) and server (SaveMiddleware) so they can't drift. */
+declare const saveEndpoint = "/__wgsl-edit/save";
+//#endregion
+export { saveEndpoint };

package/dist/SaveEndpoint.mjs

@@ -0,0 +1,5 @@
+//#region src/SaveEndpoint.ts
+/** Shared between client (WgslEdit) and server (SaveMiddleware) so they can't drift. */
+const saveEndpoint = "/__wgsl-edit/save";
+//#endregion
+export { saveEndpoint };

package/dist/SaveMiddleware.d.mts

@@ -0,0 +1,9 @@
+import { IncomingMessage, ServerResponse } from "node:http";
+
+//#region src/SaveMiddleware.d.ts
+/** Paths recently written by autosave; consumed by hotUpdate to suppress reloads. */
+declare const pendingSaves: Set<string>;
+/** Connect-style middleware that handles POST <saveEndpoint> to write files to disk. */
+declare function weslSaveMiddleware(projectRoot: string): (req: IncomingMessage, res: ServerResponse, next: () => void) => void;
+//#endregion
+export { pendingSaves, weslSaveMiddleware };

package/dist/SaveMiddleware.mjs

@@ -0,0 +1,49 @@
+import "./SaveEndpoint.mjs";
+import fs from "node:fs/promises";
+import path from "node:path";
+//#region src/SaveMiddleware.ts
+/** Paths recently written by autosave; consumed by hotUpdate to suppress reloads. */
+const pendingSaves = /* @__PURE__ */ new Set();
+/** Connect-style middleware that handles POST <saveEndpoint> to write files to disk. */
+function weslSaveMiddleware(projectRoot) {
+	return (req, res, next) => {
+		if (req.url !== "/__wgsl-edit/save") return next();
+		if (req.method !== "POST") return next();
+		readBody(req).then((body) => handleSave(body, projectRoot, res), next);
+	};
+}
+async function handleSave(raw, projectRoot, res) {
+	let body;
+	try {
+		body = JSON.parse(raw);
+	} catch {
+		return respond(res, 400, "invalid JSON");
+	}
+	const { root, file, content } = body;
+	if (!file || typeof content !== "string") return respond(res, 400, "missing file or content");
+	const resolved = path.resolve(projectRoot, root ?? ".", file);
+	if (!resolved.startsWith(projectRoot + path.sep)) return respond(res, 403, "path outside project root");
+	try {
+		await fs.mkdir(path.dirname(resolved), { recursive: true });
+		await fs.writeFile(resolved, content);
+		pendingSaves.add(resolved);
+		respond(res, 200, "ok");
+	} catch (e) {
+		console.error("[wgsl-edit] save failed:", e.message);
+		respond(res, 500, e.message);
+	}
+}
+function readBody(req) {
+	return new Promise((resolve, reject) => {
+		const chunks = [];
+		req.on("data", (c) => chunks.push(c));
+		req.on("end", () => resolve(Buffer.concat(chunks).toString()));
+		req.on("error", reject);
+	});
+}
+function respond(res, status, msg) {
+	res.writeHead(status, { "Content-Type": "text/plain" });
+	res.end(msg);
+}
+//#endregion
+export { pendingSaves, weslSaveMiddleware };