wgsl-play 0.0.2 → 0.0.4

package/src/test/WgslPlay.e2e.ts

@@ -1,23 +1,191 @@
 /** E2E tests for wgsl-play component using Playwright. */
-import { expect, test } from "@playwright/test";
+import { expect, type Page, test } from "@playwright/test";
 
-test("canvas renders correctly (visual regression)", async ({ page }) => {
-  await page.goto("/");
+/** Wait for wgsl-play custom element to be defined and upgraded. */
+async function waitForWgslPlay(page: Page) {
+  await page.waitForFunction(() => customElements.get("wgsl-play"));
+}
 
-  // Wait for WebGPU to initialize and render
-  await page.waitForTimeout(1000);
+/** Wait for a wgsl-play element to render at least one frame. */
+async function waitForFrame(page: Page, selector: string) {
+  await page.waitForFunction(
+    sel =>
+      (document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount > 0,
+    selector,
+  );
+}
 
-  // Rewind to t=0 for consistent snapshot
-  await page.getByRole("button", { name: "Rewind" }).click();
-  await page.waitForTimeout(100);
+/** Get current frameCount for a wgsl-play element. */
+async function getFrameCount(page: Page, selector: string): Promise<number> {
+  return page.evaluate(
+    sel =>
+      (document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount ?? 0,
+    selector,
+  );
+}
 
-  const player = page.locator("wgsl-play");
-  await expect(player).toHaveScreenshot("gradient-t0.png", {
-    maxDiffPixelRatio: 0.01,
+/** Wait for frameCount to increase from current value (for re-renders after changes). */
+async function waitForNewFrame(page: Page, selector: string) {
+  const before = await getFrameCount(page, selector);
+  await page.waitForFunction(
+    ([sel, prev]) =>
+      ((document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount ?? 0) > prev,
+    [selector, before] as const,
+  );
+}
+
+/** Get canvas bounding box from inside shadow DOM. */
+async function getCanvasBox(page: Page, playerId: string) {
+  return page.evaluate(id => {
+    const el = document.querySelector(id) as HTMLElement | null;
+    const canvas = el?.shadowRoot?.querySelector("canvas");
+    if (!canvas) return null;
+    const rect = canvas.getBoundingClientRect();
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+  }, playerId);
+}
+
+/** Scroll player into view and snapshot its shadow DOM canvas. */
+async function expectCanvasSnapshot(
+  page: Page,
+  playerId: string,
+  name: string,
+) {
+  await page.locator(playerId).scrollIntoViewIfNeeded();
+  const box = await getCanvasBox(page, playerId);
+  if (!box) {
+    const debug = await page.evaluate(id => {
+      const el = document.querySelector(id);
+      return { found: !!el, hasShadow: !!el?.shadowRoot };
+    }, playerId);
+    throw new Error(
+      `Canvas not found for ${playerId}: ${JSON.stringify(debug)}`,
+    );
+  }
+  await expect(page).toHaveScreenshot(name, {
+    clip: { x: box.x, y: box.y, width: box.width, height: box.height },
   });
+}
+
+test("wgsl-play component loads", async ({ page }, testInfo) => {
+  testInfo.setTimeout(10000); // Fast fail - 10s instead of 30s
+
+  const errors: string[] = [];
+  page.on("pageerror", err => errors.push(err.message));
+
+  await page.goto("/");
+
+  // Fails fast if module has syntax errors or component fails to register
+  const defined = await page
+    .waitForFunction(() => customElements.get("wgsl-play"), { timeout: 5000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (!defined) {
+    const msg = errors.length
+      ? `JS errors: ${errors.join("; ")}`
+      : "No JS errors captured - check if module loaded";
+    throw new Error(`wgsl-play custom element not defined. ${msg}`);
+  }
+
+  // Verify shadow DOM is created
+  const hasShadow = await page.evaluate(
+    () => !!document.querySelector("#player1")?.shadowRoot,
+  );
+  expect(hasShadow).toBe(true);
+});
+
+test("basic shader renders", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  const player1 = page.locator("#player1");
+  await expect(player1).toBeVisible();
+
+  // Check no error overlay
+  const errorOverlay = player1.locator("text=Error");
+  await expect(errorOverlay).not.toBeVisible();
+
+  await expectCanvasSnapshot(page, "#player1", "basic-shader.png");
+});
+
+test("npm CDN - external imports work", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-npm");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#player2");
+
+  // Rewind to time=0 for deterministic snapshot
+  await page.click("#rewind2");
+  await waitForNewFrame(page, "#player2");
+  await expectCanvasSnapshot(page, "#player2", "npm-cdn.png");
+});
+
+test("shaderRoot - package:: imports resolve", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-internal");
+  await waitForFrame(page, "#player3");
+
+  await expectCanvasSnapshot(page, "#player3", "shader-root-internal.png");
+});
+
+test("shaderRoot - src attribute with super:: and package:: imports", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-src");
+  await waitForFrame(page, "#player4");
+
+  await expectCanvasSnapshot(page, "#player4", "shader-root-src.png");
+});
+
+test("?static import - wesl-plugin build-time linking", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-static");
+  await waitForFrame(page, "#player5");
+
+  await expectCanvasSnapshot(page, "#player5", "static-import.png");
+});
+
+test("?link import - wesl-plugin runtime linking", async ({ page }) => {
+  await page.goto("/");
+  await waitForWgslPlay(page);
+
+  await page.click("#load-link");
+  await waitForFrame(page, "#player6");
+
+  await expectCanvasSnapshot(page, "#player6", "link-import.png");
+});
+
+test("project.conditions - shows green initially, red after setting RED", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await waitForFrame(page, "#player7");
+
+  // Initial state: no conditions, should show green (@else branch)
+  await expectCanvasSnapshot(page, "#player7", "conditions-initial-green.png");
+
+  // Click to set RED condition
+  await page.click("#load-conditions");
+  await waitForNewFrame(page, "#player7");
+
+  // After setting RED: should show red (@if branch)
+  await expectCanvasSnapshot(page, "#player7", "conditions-after-red.png");
 });
 
-test("no critical console errors", async ({ page }) => {
+test("no critical console errors on basic load", async ({ page }) => {
   const errors: string[] = [];
   page.on("console", msg => {
     if (msg.type() === "error") {
@@ -29,7 +197,7 @@ test("no critical console errors", async ({ page }) => {
   });
 
   await page.goto("/");
-  await page.waitForTimeout(2000);
+  await waitForFrame(page, "#player1");
 
   const criticalErrors = errors.filter(
     e => !e.includes("favicon") && !e.includes("404"),

package/test-page/index.html

@@ -6,23 +6,106 @@
     <title>wgsl-play test</title>
     <style>
       body { margin: 20px; background: #1a1a1a; color: #e0e0e0; font-family: sans-serif; }
-      wgsl-play { width: 512px; height: 512px; display: block; }
+      wgsl-play { width: 128px; height: 128px; display: block; margin-bottom: 20px; }
       .controls { margin-bottom: 10px; }
       button { padding: 6px 12px; margin-right: 8px; }
+      .section { margin-bottom: 30px; padding: 15px; background: #2a2a2a; border-radius: 8px; }
+      h3 { margin-top: 0; }
+      pre { background: #333; padding: 10px; overflow-x: auto; font-size: 12px; }
     </style>
   </head>
   <body>
-    <div class="controls">
-      <button id="play">Play</button>
-      <button id="pause">Pause</button>
-      <button id="rewind">Rewind</button>
+    <h2>wgsl-play Test Page</h2>
+
+    <!-- Basic test (with uniforms import) -->
+    <div class="section">
+      <h3>1. Basic (test::Uniforms)</h3>
+      <wgsl-play id="player1">
+        <script type="text/wesl">
+          import test::Uniforms;
+          @group(0) @binding(0) var<uniform> u: Uniforms;
+
+          @fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+            let uv = pos.xy / u.resolution;
+            return vec4f(uv, 0.5, 1.0);
+          }
+        </script>
+      </wgsl-play>
     </div>
-    <wgsl-play id="player">
-      @fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
-        let uv = pos.xy / 512.0;
-        return vec4f(uv, 0.5, 1.0);
-      }
-    </wgsl-play>
+
+    <!-- npm CDN test (external imports) -->
+    <div class="section">
+      <h3>2. npm CDN (animated)</h3>
+      <div class="controls">
+        <button id="load-npm">Load from npm</button>
+        <button id="play2">Play</button>
+        <button id="pause2">Pause</button>
+        <button id="rewind2">Rewind</button>
+      </div>
+      <wgsl-play id="player2"></wgsl-play>
+      <pre id="npm-status">Status: Ready</pre>
+    </div>
+
+    <!-- shaderRoot test (internal imports) -->
+    <div class="section">
+      <h3>3. shaderRoot (internal imports)</h3>
+      <p>Tests <code>package::</code> and <code>super::</code> imports from /shaders</p>
+      <div class="controls">
+        <button id="load-internal">Load from shaderRoot</button>
+      </div>
+      <wgsl-play id="player3" shader-root="/shaders"></wgsl-play>
+      <pre id="internal-status">Status: Ready</pre>
+    </div>
+
+    <!-- src attribute with shaderRoot -->
+    <div class="section">
+      <h3>4. src attribute with shaderRoot</h3>
+      <p>Loads shader file with <code>super::</code> and <code>package::</code> imports</p>
+      <div class="controls">
+        <button id="load-src">Load from src</button>
+      </div>
+      <wgsl-play id="player4" shader-root="/shaders"></wgsl-play>
+      <pre id="src-status">Status: Ready</pre>
+    </div>
+
+    <!-- ?static import test (wesl-plugin) -->
+    <div class="section">
+      <h3>5. ?static import (wesl-plugin)</h3>
+      <p>Tests build-time linking via <code>import wgsl from "./shader.wesl?static"</code></p>
+      <div class="controls">
+        <button id="load-static">Load ?static shader</button>
+      </div>
+      <wgsl-play id="player5"></wgsl-play>
+      <pre id="static-status">Status: Ready</pre>
+    </div>
+
+    <!-- ?link import test (wesl-plugin) -->
+    <div class="section">
+      <h3>6. ?link import (wesl-plugin)</h3>
+      <p>Tests runtime linking via <code>import config from "./shader.wesl?link"</code></p>
+      <div class="controls">
+        <button id="load-link">Load ?link shader</button>
+      </div>
+      <wgsl-play id="player6"></wgsl-play>
+      <pre id="link-status">Status: Ready</pre>
+    </div>
+
+    <!-- conditions test (project.conditions with inline shader) -->
+    <div class="section">
+      <h3>7. Conditions (project.conditions)</h3>
+      <p>Tests <code>project = { conditions: { RED: true } }</code> with inline shader</p>
+      <div class="controls">
+        <button id="load-conditions">Load with RED condition</button>
+      </div>
+      <wgsl-play id="player7">
+        @fragment fn fs_main() -> @location(0) vec4f {
+          @if(RED) { return vec4f(1.0, 0.0, 0.0, 1.0); }
+          @else { return vec4f(0.0, 1.0, 0.0, 1.0); }
+        }
+      </wgsl-play>
+      <pre id="conditions-status">Status: Ready</pre>
+    </div>
+
     <script type="module" src="./main.ts"></script>
   </body>
 </html>

package/test-page/main.ts

@@ -1,12 +1,91 @@
-import "../src/index.ts";
-import type { WgslPlay } from "../src/WgslPlay.ts";
+/// <reference types="wesl-plugin/suffixes" />
+import "../src/index.ts"; // Register the custom element
 
-const player = document.querySelector<WgslPlay>("#player")!;
+import type { WgslPlay } from "../src/index.ts";
+import linkConfig from "./shaders/effects/main.wesl?link";
+import staticWgsl from "./shaders/effects/main.wesl?static";
 
-document.querySelector("#play")!.addEventListener("click", () => player.play());
+const player1 = document.querySelector<WgslPlay>("#player1")!;
+
+// npm CDN test (external imports) with animation
+const player2 = document.querySelector<WgslPlay>("#player2")!;
+const npmShader = `
+import random_wgsl::pcg_2u_3f;
+import test::Uniforms;
+
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+@fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let uv = pos.xy;
+  let seed = vec2u(u32(uv.x) + u32(u.time * 10.0), u32(uv.y));
+  let color = pcg_2u_3f(seed);
+  return vec4f(color, 1.0);
+}
+`;
+document.querySelector("#load-npm")!.addEventListener("click", () => {
+  player2.source = npmShader;
+});
 document
-  .querySelector("#pause")!
-  .addEventListener("click", () => player.pause());
+  .querySelector("#play2")!
+  .addEventListener("click", () => player2.play());
 document
-  .querySelector("#rewind")!
-  .addEventListener("click", () => player.rewind());
+  .querySelector("#pause2")!
+  .addEventListener("click", () => player2.pause());
+document
+  .querySelector("#rewind2")!
+  .addEventListener("click", () => player2.rewind());
+
+// shaderRoot test (internal imports)
+const player3 = document.querySelector<WgslPlay>("#player3")!;
+const internalShader = `
+import package::utils::gradient;
+import test::Uniforms;
+
+@group(0) @binding(0) var<uniform> u: Uniforms;
+
+@fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let uv = pos.xy / u.resolution;
+  let color = gradient(uv);
+  return vec4f(color, 1.0);
+}
+`;
+document.querySelector("#load-internal")!.addEventListener("click", () => {
+  player3.source = internalShader;
+});
+
+// src attribute with shaderRoot test
+const player4 = document.querySelector<WgslPlay>("#player4")!;
+document.querySelector("#load-src")!.addEventListener("click", () => {
+  player4.setAttribute("src", "/shaders/effects/main.wesl");
+});
+
+// ?static import test (wesl-plugin build-time linking)
+const player5 = document.querySelector<WgslPlay>("#player5")!;
+document.querySelector("#load-static")!.addEventListener("click", () => {
+  player5.source = staticWgsl;
+});
+
+// ?link import test (wesl-plugin runtime linking)
+const player6 = document.querySelector<WgslPlay>("#player6")!;
+document.querySelector("#load-link")!.addEventListener("click", () => {
+  player6.project = linkConfig;
+});
+
+// conditions test (project.conditions with inline shader)
+const player7 = document.querySelector<WgslPlay>("#player7")!;
+document.querySelector("#load-conditions")!.addEventListener("click", () => {
+  player7.project = { conditions: { RED: true } };
+});
+
+// Expose for console debugging
+Object.assign(window, {
+  player1,
+  player2,
+  player3,
+  player4,
+  player5,
+  player6,
+  player7,
+  staticWgsl,
+  linkConfig,
+});

package/test-page/shaders/effects/common.wesl

@@ -0,0 +1,5 @@
+// Shared functions for effects - tests super:: imports
+
+fn tint(color: vec3f, factor: f32) -> vec3f {
+  return color * factor;
+}

package/test-page/shaders/effects/main.wesl

@@ -0,0 +1,10 @@
+// Main shader testing super:: imports
+import super::common::tint;
+import package::utils::gradient;
+
+@fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let uv = pos.xy / 128.0;
+  let color = gradient(uv);
+  let tinted = tint(color, 0.8);
+  return vec4f(tinted, 1.0);
+}

package/test-page/shaders/utils.wesl

@@ -0,0 +1,5 @@
+// Helper function for package:: import testing
+
+fn gradient(uv: vec2f) -> vec3f {
+  return vec3f(uv, 0.5);
+}

package/test-page/wesl.toml

@@ -0,0 +1,3 @@
+edition = "unstable_2025"
+include = ["./shaders/**/*.wesl"]
+root = "./shaders"

package/tsconfig.json

@@ -1,4 +1,4 @@
 {
-  "extends": "../../../tsconfig.browser.json",
+  "extends": "../../tsconfig.browser.json",
   "include": ["src"]
 }

package/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+import { linkBuildExtension, staticBuildExtension } from "wesl-plugin";
+import viteWesl from "wesl-plugin/vite";
+
+export default defineConfig({
+  plugins: [
+    viteWesl({
+      extensions: [staticBuildExtension, linkBuildExtension],
+      // debug: true,
+      weslToml: "./test-page/wesl.toml",
+    }),
+  ],
+  server: {
+    fs: {
+      // Allow serving files from sibling packages for dev mode testing
+      allow: [".."],
+    },
+  },
+});