wgsl-edit 0.0.25 → 0.0.26

package/src/autosave.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from "vite";
+import { pendingSaves, weslSaveMiddleware } from "./SaveMiddleware.ts";
+
+export interface WgslEditAutosaveOptions {
+  /** Disable the save endpoint without removing the plugin (default: enabled). */
+  disabled?: boolean;
+}
+
+/** Vite dev plugin: lets <wgsl-edit autosave> persist edits to disk via the save endpoint. */
+export default function wgslEditAutosave(
+  options?: WgslEditAutosaveOptions,
+): Plugin {
+  return {
+    name: "wgsl-edit-autosave",
+    apply: "serve",
+    configureServer(server) {
+      if (options?.disabled) return;
+      server.middlewares.use(weslSaveMiddleware(server.config.root));
+    },
+    hotUpdate({ file }) {
+      if (pendingSaves.delete(file)) return [];
+    },
+  };
+}

package/src/jsx-preact.ts

@@ -0,0 +1,15 @@
+/** Preact JSX augmentation for `<wgsl-edit>`.
+ *  Side-effect import: `import "wgsl-edit/jsx-preact"` once anywhere in your TS source. */
+
+import type { HTMLAttributes } from "preact";
+import type { WgslEdit, WgslEditAttrs } from "./WgslEdit.ts";
+
+type WgslEditTag = HTMLAttributes<WgslEdit> & WgslEditAttrs;
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "wgsl-edit": WgslEditTag;
+    }
+  }
+}

package/src/test/Autosave.e2e.ts

@@ -0,0 +1,100 @@
+import fs from "node:fs";
+import path from "node:path";
+import { expect, test } from "@playwright/test";
+import { saveEndpoint } from "../SaveEndpoint.ts";
+import { waitForWgslEdit } from "./E2eUtil.ts";
+
+// Tests share filesystem state, so run serially
+test.describe.configure({ mode: "serial" });
+
+const shadersDir = path.resolve(import.meta.dirname, "../../test-page/shaders");
+const shaderPath = path.join(shadersDir, "save-test.wesl");
+const autoPath = path.join(shadersDir, "auto-test.wesl");
+
+const originalContent = `fn original() -> f32 {
+  return 1.0;
+}
+`;
+
+const autoContent = `fn auto_original() -> f32 {
+  return 1.0;
+}
+`;
+
+test.beforeEach(() => {
+  fs.writeFileSync(shaderPath, originalContent);
+  fs.writeFileSync(autoPath, autoContent);
+});
+
+test.afterEach(() => {
+  fs.writeFileSync(shaderPath, originalContent);
+  fs.writeFileSync(autoPath, autoContent);
+});
+
+test("autosave writes edits to disk", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslEdit(page);
+
+  // type into the editor's CodeMirror instance inside shadow DOM
+  await page.evaluate(() => {
+    const el = document.querySelector("#editor4") as any;
+    el.source = `fn edited() -> f32 {\n  return 2.0;\n}\n`;
+  });
+
+  // wait for debounce (500ms) + network round-trip
+  await expect
+    .poll(() => fs.readFileSync(shaderPath, "utf-8"), { timeout: 5000 })
+    .toContain("fn edited()");
+});
+
+test("autosave does not write on tab switch", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslEdit(page);
+
+  // add a second file, which triggers a tab switch
+  await page.evaluate(() => {
+    const el = document.querySelector("#editor4") as any;
+    el.addFile("other.wesl", "fn other() {}");
+  });
+
+  // wait past the debounce window
+  await page.waitForTimeout(1000);
+
+  const content = fs.readFileSync(shaderPath, "utf-8");
+  expect(content).toBe(originalContent);
+});
+
+test("autosave POST returns 403 for path traversal", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslEdit(page);
+
+  const status = await page.evaluate(async (endpoint: string) => {
+    const body = JSON.stringify({
+      root: "../../../",
+      file: "etc/evil.wesl",
+      content: "pwned",
+    });
+    const headers = { "Content-Type": "application/json" };
+    const res = await fetch(endpoint, { method: "POST", headers, body });
+    return res.status;
+  }, saveEndpoint);
+
+  expect(status).toBe(403);
+});
+
+test("autosave saves when shaderRoot set via project property", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await waitForWgslEdit(page);
+
+  // editor5 has autosave attr; shaderRoot is set via project property in main.ts
+  await page.evaluate(() => {
+    const el = document.querySelector("#editor5") as any;
+    el.source = `fn auto_edited() -> f32 {\n  return 2.0;\n}\n`;
+  });
+
+  await expect
+    .poll(() => fs.readFileSync(autoPath, "utf-8"), { timeout: 5000 })
+    .toContain("fn auto_edited()");
+});

package/src/test/E2eUtil.ts

@@ -0,0 +1,6 @@
+import type { Page } from "@playwright/test";
+
+/** Wait for the wgsl-edit custom element to be defined. */
+export async function waitForWgslEdit(page: Page) {
+  await page.waitForFunction(() => customElements.get("wgsl-edit"));
+}

package/src/test/Undo.e2e.ts

@@ -0,0 +1,91 @@
+import { expect, type Page, test } from "@playwright/test";
+import { waitForWgslEdit } from "./E2eUtil.ts";
+
+async function appendToActiveFile(
+  page: Page,
+  id: string,
+  text: string,
+): Promise<void> {
+  await page.evaluate(
+    ([sel, s]) => {
+      const view = (document.querySelector(sel) as any).editorView;
+      const end = view.state.doc.length;
+      view.dispatch({
+        changes: { from: end, insert: s },
+        selection: { anchor: end + s.length },
+        userEvent: "input.type",
+      });
+    },
+    [id, text] as const,
+  );
+}
+
+async function getFileSource(
+  page: Page,
+  id: string,
+  file: string,
+): Promise<string> {
+  return page.evaluate(
+    ([sel, f]) => {
+      const el = document.querySelector(sel) as any;
+      const saved = el.activeFile;
+      el.activeFile = f;
+      const src = el.source as string;
+      el.activeFile = saved;
+      return src;
+    },
+    [id, file] as const,
+  );
+}
+
+async function setActiveFile(
+  page: Page,
+  id: string,
+  file: string,
+): Promise<void> {
+  await page.evaluate(
+    ([sel, f]) => {
+      (document.querySelector(sel) as any).activeFile = f;
+    },
+    [id, file] as const,
+  );
+}
+
+async function focusEditor(page: Page, id: string): Promise<void> {
+  await page.evaluate(sel => {
+    const host = document.querySelector(sel) as HTMLElement | null;
+    const content = host?.shadowRoot?.querySelector(
+      ".cm-content",
+    ) as HTMLElement | null;
+    content?.focus();
+  }, id);
+}
+
+test("undo is scoped to the active file", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslEdit(page);
+
+  const mainOrig = await getFileSource(page, "#editor6", "main.wesl");
+  const shapeOrig = await getFileSource(page, "#editor6", "shape.wesl");
+
+  await setActiveFile(page, "#editor6", "main.wesl");
+  await appendToActiveFile(page, "#editor6", " // main-edit");
+
+  await setActiveFile(page, "#editor6", "shape.wesl");
+  await appendToActiveFile(page, "#editor6", " // shape-edit");
+
+  await setActiveFile(page, "#editor6", "main.wesl");
+  await focusEditor(page, "#editor6");
+  await page.keyboard.press("ControlOrMeta+z");
+
+  const active = await page.evaluate(
+    () => (document.querySelector("#editor6") as any).activeFile,
+  );
+  expect(active).toBe("main.wesl");
+
+  const mainNow = await getFileSource(page, "#editor6", "main.wesl");
+  const shapeNow = await getFileSource(page, "#editor6", "shape.wesl");
+  expect(mainNow).toBe(mainOrig);
+  expect(shapeNow).toContain("// shape-edit");
+  expect(shapeNow).not.toBe(shapeOrig);
+});

package/src/test/WgslEdit.e2e.ts

@@ -1,8 +1,5 @@
 import { expect, type Page, test } from "@playwright/test";
-
-async function waitForWgslEdit(page: Page) {
-  await page.waitForFunction(() => customElements.get("wgsl-edit"));
-}
+import { waitForWgslEdit } from "./E2eUtil.ts";
 
 const lintErrorSelector = ".cm-lintRange-error";