wgsl-edit 0.0.2

package/.turbo/turbo-build.log

@@ -0,0 +1,19 @@
+
+
+> wgsl-edit@0.0.1 build /Users/lee/wesl/wesl-js/tools/packages/wgsl-edit
+> tsdown
+
+ℹ tsdown v0.19.0-beta.3 powered by rolldown v1.0.0-beta.58
+ℹ config file: /Users/lee/wesl/wesl-js/tools/packages/wgsl-edit/tsdown.config.ts 
+ℹ entry: src/index.ts, src/Language.ts, src/WgslEdit.ts
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ dist/Language.mjs            4.39 kB │ gzip: 1.58 kB
+ℹ dist/index.mjs               0.27 kB │ gzip: 0.18 kB
+ℹ dist/WgslEdit.mjs            0.10 kB │ gzip: 0.09 kB
+ℹ dist/WgslEdit-D62UKrqG.mjs  22.76 kB │ gzip: 6.47 kB
+ℹ dist/WgslEdit.d.mts          4.05 kB │ gzip: 1.49 kB
+ℹ dist/Language.d.mts          1.48 kB │ gzip: 0.68 kB
+ℹ dist/index.d.mts             0.14 kB │ gzip: 0.09 kB
+ℹ 7 files, total: 33.20 kB
+✔ Build complete in 1881ms

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,5 @@
+
+
+> wgsl-edit@0.0.1 typecheck /Users/lee/wesl/wesl-js/tools/packages/wgsl-edit
+> tsgo
+

package/README.md

@@ -0,0 +1,168 @@
+# wgsl-edit
+
+Web component for editing WESL/WGSL with CodeMirror 6.
+
+## Usage
+
+```html
+<script type="module">import "wgsl-edit";</script>
+
+<wgsl-edit></wgsl-edit>
+```
+
+Features syntax highlighting, linting, multi-file tabs, and light/dark themes out of the box.
+
+### Inline source
+
+Include shader code directly via `<script>` tags:
+
+```html
+<wgsl-edit>
+  <script type="text/wesl" data-name="main.wesl">
+    import package::utils;
+    @fragment fn main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+      return vec4f(utils::gradient(pos.xy), 1.0);
+    }
+  </script>
+  <script type="text/wesl" data-name="utils.wesl">
+    fn gradient(uv: vec2f) -> vec3f { return vec3f(uv, 0.5); }
+  </script>
+</wgsl-edit>
+```
+
+Multiple `<script>` tags create a multi-file editor with tabs.
+
+### With wgsl-play
+
+```html
+<wgsl-edit id="editor" theme="auto">
+  <script type="text/wesl">/* shader code */</script>
+</wgsl-edit>
+<wgsl-play source="editor"></wgsl-play>
+```
+
+The play component reads sources from the editor and live-previews the shader.
+
+### Programmatic control
+
+```typescript
+const editor = document.querySelector("wgsl-edit");
+
+editor.source = shaderCode;           // set active file content
+editor.sources = {                    // set all files
+  "package::main": mainCode,
+  "package::utils": utilsCode,
+};
+editor.addFile("helpers.wesl", code); // add a file
+editor.activeFile = "helpers.wesl";   // switch tabs
+
+editor.project = {                    // load a full project
+  weslSrc: { "package::main": code },
+  rootModuleName: "package::main",
+  conditions: { RED: true },
+  packageName: "myshader",
+};
+```
+
+## API
+
+### Attributes
+
+| Attribute | Values | Default | Description |
+|-----------|--------|---------|-------------|
+| `src` | URL | - | Load source from URL |
+| `theme` | `light` `dark` `auto` | `auto` | Color theme |
+| `readonly` | boolean | `false` | Disable editing |
+| `tabs` | boolean | `true` | Show tab bar |
+| `lint` | `on` `off` | `on` | Real-time WESL validation |
+| `line-numbers` | `true` `false` | `false` | Show line numbers |
+| `shader-root` | string | - | Root path for shader imports |
+
+### Properties
+
+- `source: string` - Get/set active file content
+- `sources: Record<string, string>` - Get/set all files (keyed by module path)
+- `project: WeslProject` - Set full project (sources, conditions, packageName, etc.)
+- `activeFile: string` - Get/set active file name
+- `fileNames: string[]` - List all file names
+- `theme`, `tabs`, `lint`, `lineNumbers`, `readonly`, `shaderRoot` - Mirror attributes
+
+### Methods
+
+- `addFile(name, content?)` - Add a new file
+- `removeFile(name)` - Remove a file
+- `renameFile(oldName, newName)` - Rename a file
+
+### Events
+
+- `change` - `{ source, sources, activeFile }` on any edit
+- `file-change` - `{ action, file }` on add/remove/rename
+
+## 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/tools/packages/wesl-plugin)
+to assemble shaders at build time and pass them to the editor via `project`.
+
+```typescript
+// vite.config.ts
+import { linkBuildExtension } from "wesl-plugin";
+import viteWesl from "wesl-plugin/vite";
+
+export default {
+  plugins: [viteWesl({ extensions: [linkBuildExtension] })]
+};
+
+// app.ts
+import shaderConfig from "./shader.wesl?link";
+
+const editor = document.querySelector("wgsl-edit");
+editor.project = {
+  ...shaderConfig,
+  conditions: { MOBILE: isMobileGPU },
+  constants: { num_lights: 4 }
+};
+```
+
+The `?link` import provides `weslSrc`, `libs`, `rootModuleName`, and `packageName`.
+The editor's linter uses these to validate imports, conditions, and constants as you type.
+
+## Styling
+
+```css
+wgsl-edit {
+  height: 400px;
+  border: 1px solid #444;
+  border-radius: 4px;
+}
+```
+
+## Bundle Size
+
+~136 KB brotli for the full bundle with all dependencies.
+
+| Component | Brotli |
+|-----------|--------|
+| CodeMirror (view, state, language, autocomplete, search, commands) | ~104 KB |
+| lezer-wesl (grammar + lezer runtime) | ~26 KB |
+| wesl linker (powers live linting) | ~14 KB |
+| wgsl-edit (web component, theme, CSS) | ~1 KB |
+| future work (tbd) | ~5 KB |
+
+
+## CLI
+
+Edit a shader file in the browser with live reload:
+
+```bash
+wgsl-edit path/to/shader.wesl
+wgsl-edit shader.wgsl --port 3000 --no-open
+```
+
+## Exports
+
+```typescript
+import "wgsl-edit";                              // auto-registers element
+import { WgslEdit } from "wgsl-edit/element";    // class only
+import { wesl, weslLanguage } from "wgsl-edit/language"; // CodeMirror language
+```

package/bin/wgsl-edit

@@ -0,0 +1,2 @@
+#!/usr/bin/env node --experimental-strip-types
+import "../src/Cli.ts";

package/demo/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>wgsl-edit test</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" id="prism-light">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.min.css" id="prism-dark" disabled>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js" defer></script>
+</head>
+<body>
+  <button id="theme-toggle" aria-label="Toggle theme">
+    <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="5"/>
+      <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+      <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+    </svg>
+    <svg class="moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+    </svg>
+  </button>
+  <div class="titles">
+    <h1>wgsl-edit</h1>
+    <h1>wgsl-play</h1>
+  </div>
+  <div class="editor-player">
+    <wgsl-edit id="editor" lint-from="player">
+      <script type="text/wesl" data-name="main.wesl">
+import package::utils;
+
+@group(0) @binding(0) var<uniform> u: test::Uniforms;
+
+@fragment
+fn main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let uv = pos.xy / u.resolution;
+  return vec4f(utils::gradient(uv, u.time), 1.0);
+}
+      </script>
+      <script type="text/wesl" data-name="utils.wesl">
+fn gradient(uv: vec2f, time: f32) -> vec3f {
+  return vec3f(uv, 0.5 + 0.5 * sin(time));
+}
+      </script>
+    </wgsl-edit>
+    <wgsl-play id="player" source="editor"></wgsl-play>
+  </div>
+  <section class="usage">
+    <h2>Usage</h2>
+    <pre><code class="language-html">&lt;script type="module" src="https://esm.sh/wgsl-edit"&gt;&lt;/script&gt;
+&lt;script type="module" src="https://esm.sh/wgsl-play"&gt;&lt;/script&gt;
+
+&lt;wgsl-edit id="editor" lint-from="player"&gt;&lt;/wgsl-edit&gt;
+&lt;wgsl-play id="player" source="editor"&gt;&lt;/wgsl-play&gt;</code></pre>
+
+    <div class="docs-links">
+      <h2>Docs</h2>
+      <nav>
+        <a href="https://github.com/wgsl-tooling-wg/wesl-js/tree/main/tools/packages/wgsl-edit">wgsl-edit</a>
+        <a href="https://github.com/wgsl-tooling-wg/wesl-js/tree/main/tools/packages/wgsl-play">wgsl-play</a>
+      </nav>
+    </div>
+  </section>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/demo/main.ts

@@ -0,0 +1,22 @@
+import "wgsl-edit";
+import "wgsl-play";
+import type { WgslEdit } from "wgsl-edit";
+
+const editor = document.querySelector("wgsl-edit") as WgslEdit | null;
+
+const isDark = () => matchMedia("(prefers-color-scheme: dark)").matches;
+
+function applyTheme(dark: boolean) {
+  const theme = dark ? "dark" : "light";
+  if (editor) editor.theme = theme;
+  document.body.className = theme;
+  document.getElementById("prism-light")!.toggleAttribute("disabled", dark);
+  document.getElementById("prism-dark")!.toggleAttribute("disabled", !dark);
+}
+
+// Start with system preference
+applyTheme(isDark());
+
+document.getElementById("theme-toggle")!.addEventListener("click", () => {
+  applyTheme(document.body.className !== "dark");
+});

package/demo/style.css

@@ -0,0 +1,114 @@
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: system-ui, sans-serif;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+body.dark {
+  background: #1e1e1e;
+  color: #ccc;
+}
+body.light {
+  background: #fff;
+  color: #333;
+}
+.titles {
+  display: flex;
+  gap: 32px;
+}
+.titles h1:first-child {
+  flex: 1;
+  text-align: center;
+}
+.titles h1:last-child {
+  width: min(60vh, 50%);
+  text-align: center;
+}
+h1,
+h2 {
+  margin-top: 0;
+  font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
+  font-weight: 600;
+}
+#theme-toggle {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+#theme-toggle:hover {
+  opacity: 1;
+}
+#theme-toggle svg {
+  display: block;
+}
+#theme-toggle .sun {
+  display: none;
+}
+#theme-toggle .moon {
+  display: none;
+}
+body.light #theme-toggle .moon {
+  display: block;
+}
+body.dark #theme-toggle .sun {
+  display: block;
+}
+.editor-player {
+  display: flex;
+  gap: 32px;
+  height: 60vh;
+}
+wgsl-edit {
+  flex: 1;
+}
+wgsl-play {
+  aspect-ratio: 1;
+  width: min(60vh, 50%);
+  align-self: start;
+}
+.usage {
+  margin-top: 48px;
+}
+.usage pre {
+  padding: 16px 20px;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: ui-monospace, "Cascadia Code", "Fira Code", Menlo, monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+body.light .usage pre {
+  background: #f5f5f5;
+  color: #333;
+}
+body.dark .usage pre {
+  background: #2a2a2a;
+  color: #ccc;
+}
+.docs-links {
+  margin-top: 24px;
+  display: flex;
+  align-items: baseline;
+  font-size: 18px;
+}
+.docs-links h2 {
+  margin: 0;
+}
+.docs-links nav {
+  display: flex;
+  gap: 40px;
+  margin-left: 100px;
+}
+body.dark .docs-links a {
+  color: #6cb6ff;
+}

package/dist/Language.d.mts

@@ -0,0 +1,30 @@
+import { LRLanguage, LanguageSupport } from "@codemirror/language";
+import { Diagnostic } from "@codemirror/lint";
+import { Conditions, WeslBundle } from "wesl";
+import * as _codemirror_state0 from "@codemirror/state";
+
+//#region src/Language.d.ts
+interface WeslLintConfig {
+  /** Get all sources keyed by module path (e.g., "package::main"). */
+  getSources: () => Record<string, string>;
+  /** Root module to validate (e.g., "package::main"). */
+  rootModule: () => string;
+  /** Runtime conditions for @if conditional compilation. */
+  conditions?: () => Conditions;
+  /** Package name alias (enables `import mypkg::foo` alongside `import package::foo`). */
+  packageName?: () => string | undefined;
+  /** External diagnostics (e.g., GPU compilation errors from wgsl-play). */
+  getExternalDiagnostics?: () => Diagnostic[];
+  /** Get pre-loaded library bundles. */
+  getLibs?: () => WeslBundle[];
+  /** Fetch libraries on-demand for unresolved external packages. */
+  fetchLibs?: (packageNames: string[]) => Promise<WeslBundle[]>;
+  /** Package names to ignore when checking unbound externals (e.g. virtual modules). */
+  ignorePackages?: () => string[];
+}
+declare const weslLanguage: LRLanguage;
+declare function wesl(): LanguageSupport;
+/** Create a linter that validates WESL using the canonical parser. */
+declare function createWeslLinter(config: WeslLintConfig): _codemirror_state0.Extension;
+//#endregion
+export { WeslLintConfig, createWeslLinter, wesl, weslLanguage };

package/dist/Language.mjs

@@ -0,0 +1,127 @@
+import { LRLanguage, LanguageSupport } from "@codemirror/language";
+import { linter } from "@codemirror/lint";
+import { parser, weslHighlighting } from "lezer-wesl";
+import { BundleResolver, CompositeResolver, RecordResolver, WeslParseError, bindIdents } from "wesl";
+
+//#region src/Language.ts
+const weslLanguage = LRLanguage.define({
+	name: "wesl",
+	parser: parser.configure({ props: [weslHighlighting] }),
+	languageData: { commentTokens: {
+		line: "//",
+		block: {
+			open: "/*",
+			close: "*/"
+		}
+	} }
+});
+function wesl() {
+	return new LanguageSupport(weslLanguage);
+}
+/** Create a linter that validates WESL using the canonical parser. */
+function createWeslLinter(config) {
+	return linter(async () => lintAndFetch(config), { delay: 300 });
+}
+/** Lint once, fetch missing externals if needed, re-lint with new libs. */
+async function lintAndFetch(config) {
+	const libs = config.getLibs?.() ?? [];
+	const ignored = new Set(config.ignorePackages?.() ?? []);
+	const { diagnostics, externals } = lintPass(config, libs, ignored);
+	if (!config.fetchLibs || !externals.length) return diagnostics;
+	const newLibs = await config.fetchLibs(externals);
+	if (!newLibs.length) return diagnostics;
+	return lintPass(config, [...libs, ...newLibs], ignored).diagnostics;
+}
+/** Parse, bind, collect diagnostics and discover missing externals. */
+function lintPass(config, libs, ignored) {
+	const sources = config.getSources();
+	const rootModule = config.rootModule();
+	const diagnostics = [];
+	let externals = [];
+	try {
+		const resolver = buildResolver(sources, libs, config.packageName?.());
+		const rootAst = resolver.resolveModule(rootModule);
+		if (rootAst) {
+			const result = runBind(config, resolver, rootAst);
+			diagnostics.push(...unboundDiagnostics(result, rootModule, ignored));
+			externals = findMissingPackages(rootAst, result, resolver, ignored, libs);
+		}
+	} catch (e) {
+		const diag = errorToDiagnostic(e);
+		if (diag) diagnostics.push(diag);
+	}
+	diagnostics.push(...config.getExternalDiagnostics?.() ?? []);
+	return {
+		diagnostics,
+		externals
+	};
+}
+/** Build a resolver from sources and optional libs. */
+function buildResolver(sources, libs, packageName) {
+	const record = new RecordResolver(sources, { packageName });
+	if (libs.length === 0) return record;
+	return new CompositeResolver([record, ...libs.map((b) => new BundleResolver(b))]);
+}
+/** Parse and bind identifiers starting from a root module. */
+function runBind(config, resolver, rootAst) {
+	return bindIdents({
+		resolver,
+		rootAst,
+		conditions: config.conditions?.(),
+		accumulateUnbound: true
+	});
+}
+/** Convert unbound refs to diagnostics, skipping ignored packages. */
+function unboundDiagnostics(result, rootModule, ignored) {
+	const diagnostics = [];
+	for (const ref of result.unbound ?? []) {
+		if (ref.srcModule.modulePath !== rootModule) continue;
+		if (ref.path.length > 1 && ignored.has(ref.path[0])) continue;
+		diagnostics.push(unboundToDiagnostic(ref));
+	}
+	return diagnostics;
+}
+/** Convert a WESL error to a CodeMirror diagnostic. */
+function errorToDiagnostic(e) {
+	if (e instanceof WeslParseError) {
+		const [from, to] = e.span;
+		return {
+			from,
+			to,
+			severity: "error",
+			message: e.cause?.message ?? e.message
+		};
+	}
+}
+/** Find external package names not yet loaded, from unresolved imports and unbound refs. */
+function findMissingPackages(rootAst, result, resolver, ignored, libs) {
+	const loaded = new Set(libs.map((b) => b.name));
+	const pkgs = [];
+	for (const imp of rootAst.imports) {
+		const root = imp.segments[0]?.name;
+		if (!root || !isExternalRoot(root) || ignored.has(root)) continue;
+		const modPath = imp.segments.map((s) => s.name).join("::");
+		if (!resolver.resolveModule(modPath)) pkgs.push(root);
+	}
+	for (const ref of result.unbound ?? []) {
+		const root = ref.path[0];
+		if (ref.path.length > 1 && isExternalRoot(root) && !ignored.has(root) && !loaded.has(root)) pkgs.push(root);
+	}
+	return [...new Set(pkgs)];
+}
+/** @return true if root is an external package name (not package/super). */
+function isExternalRoot(root) {
+	return root !== "package" && root !== "super";
+}
+/** Convert an unbound reference to a CodeMirror diagnostic. */
+function unboundToDiagnostic(ref) {
+	return {
+		from: ref.start,
+		to: ref.end,
+		severity: "error",
+		message: `unresolved identifier '${ref.path.join("::")}'`
+	};
+}
+
+//#endregion
+export { createWeslLinter, wesl, weslLanguage };