npm - wgsl-edit - Versions diffs - 0.0.2 - Mend

wgsl-edit 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/.turbo/turbo-build.log +19 -0
package/.turbo/turbo-typecheck.log +5 -0
package/README.md +168 -0
package/bin/wgsl-edit +2 -0
package/demo/index.html +68 -0
package/demo/main.ts +22 -0
package/demo/style.css +114 -0
package/dist/Language.d.mts +30 -0
package/dist/Language.mjs +127 -0
package/dist/WgslEdit-D62UKrqG.mjs +649 -0
package/dist/WgslEdit.d.mts +118 -0
package/dist/WgslEdit.mjs +4 -0
package/dist/index.d.mts +3 -0
package/dist/index.mjs +8 -0
package/package.json +34 -0
package/site/assets/index-1yVlrenS.js +134 -0
package/site/assets/index-oyrhrEUu.css +1 -0
package/site/index.html +68 -0
package/src/Cli.ts +115 -0
package/src/Language.ts +204 -0
package/src/WgslEdit.css +168 -0
package/src/WgslEdit.ts +783 -0
package/src/index.ts +8 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.json +3 -0
package/tsdown.config.ts +28 -0
package/vite.config.ts +11 -0

package/site/assets/index-oyrhrEUu.css ADDED Viewed

@@ -0,0 +1 @@

+ body{margin:0;padding:20px;font-family:system-ui,sans-serif;transition:background .2s,color .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:.7;transition:opacity .2s}#theme-toggle:hover{opacity:1}#theme-toggle svg{display:block}#theme-toggle .sun,#theme-toggle .moon{display:none}body.light #theme-toggle .moon,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/site/index.html ADDED Viewed

@@ -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="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>
+  <script type="module" crossorigin src="/assets/index-1yVlrenS.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-oyrhrEUu.css">
+</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>
+</body>
+</html>

package/src/Cli.ts ADDED Viewed

@@ -0,0 +1,115 @@
+/** CLI to quickly open a local WESL/WGSL file in a browser-based CodeMirror editor. */
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import open from "open";
+import { createServer, type ViteDevServer } from "vite";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+interface CliArgs {
+  file: string;
+  port: number;
+  open: boolean;
+}
+export async function cli(rawArgs: string[]): Promise<void> {
+  const argv = await parseArgs(rawArgs);
+  await startDevServer(argv);
+}
+async function parseArgs(args: string[]): Promise<CliArgs> {
+  const argv = await yargs(args)
+    .command("$0 <file>", "Edit a WESL/WGSL file in the browser", yargs => {
+      yargs.positional("file", {
+        type: "string",
+        describe: "Path to WESL/WGSL file to edit",
+        demandOption: true,
+      });
+    })
+    .option("port", {
+      alias: "p",
+      type: "number",
+      default: 5173,
+      describe: "Dev server port",
+    })
+    .option("open", {
+      type: "boolean",
+      default: true,
+      describe: "Open browser automatically",
+    })
+    .help()
+    .parse();
+  return argv as unknown as CliArgs;
+}
+async function startDevServer(argv: CliArgs): Promise<void> {
+  const filePath = path.resolve(argv.file);
+  if (!fs.existsSync(filePath)) {
+    console.error(`File not found: ${filePath}`);
+    process.exit(1);
+  }
+  const packageDir = path.dirname(fileURLToPath(import.meta.url));
+  const html = generateHtml(filePath);
+  const server = await createServer({
+    root: packageDir,
+    server: { port: argv.port },
+    plugins: [
+      {
+        name: "wgsl-edit-serve",
+        configureServer(server: ViteDevServer) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url === "/" || req.url === "/index.html") {
+              res.setHeader("Content-Type", "text/html");
+              res.end(html);
+              return;
+            }
+            if (req.url === "/__file__") {
+              res.setHeader("Content-Type", "text/plain");
+              res.end(fs.readFileSync(filePath, "utf-8"));
+              return;
+            }
+            next();
+          });
+        },
+      },
+    ],
+  });
+  await server.listen();
+  const url = `http://localhost:${argv.port}`;
+  console.log(`Editing: ${filePath}`);
+  console.log(`Server:  ${url}`);
+  if (argv.open) await open(url);
+}
+function generateHtml(filePath: string): string {
+  const fileName = path.basename(filePath);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${fileName} - wgsl-edit</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #1e1e1e; }
+    header { padding: 8px 16px; background: #252526; color: #ccc; font-family: system-ui; border-bottom: 1px solid #444; }
+    wgsl-edit { flex: 1; }
+  </style>
+</head>
+<body>
+  <header>${fileName}</header>
+  <wgsl-edit src="/__file__"></wgsl-edit>
+  <script type="module">
+    import "wgsl-edit";
+  </script>
+</body>
+</html>`;
+}
+cli(hideBin(process.argv));

package/src/Language.ts ADDED Viewed

@@ -0,0 +1,204 @@
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { type Diagnostic, linter } from "@codemirror/lint";
+import { parser, weslHighlighting } from "lezer-wesl";
+import {
+  type BindResults,
+  BundleResolver,
+  bindIdents,
+  CompositeResolver,
+  type Conditions,
+  type ModuleResolver,
+  RecordResolver,
+  type UnboundRef,
+  type WeslAST,
+  type WeslBundle,
+  WeslParseError,
+} from "wesl";
+export 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[];
+}
+export const weslLanguage = LRLanguage.define({
+  name: "wesl",
+  parser: parser.configure({ props: [weslHighlighting] }),
+  languageData: {
+    commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
+  },
+});
+export function wesl(): LanguageSupport {
+  return new LanguageSupport(weslLanguage);
+}
+/** Create a linter that validates WESL using the canonical parser. */
+export function createWeslLinter(config: WeslLintConfig) {
+  return linter(async () => lintAndFetch(config), { delay: 300 });
+}
+/** Lint once, fetch missing externals if needed, re-lint with new libs. */
+async function lintAndFetch(config: WeslLintConfig): Promise<Diagnostic[]> {
+  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: WeslLintConfig,
+  libs: WeslBundle[],
+  ignored: Set<string>,
+): { diagnostics: Diagnostic[]; externals: string[] } {
+  const sources = config.getSources();
+  const rootModule = config.rootModule();
+  const diagnostics: Diagnostic[] = [];
+  let externals: string[] = [];
+  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));
+      // LATER integrate external fetching into the bind (when we go async), then this becomes unnecessary
+      externals = findMissingPackages(rootAst, result, resolver, ignored, libs);
+    }
+  } catch (e: unknown) {
+    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: Record<string, string>,
+  libs: WeslBundle[],
+  packageName?: string,
+): ModuleResolver {
+  const record = new RecordResolver(sources, { packageName });
+  if (libs.length === 0) return record;
+  const resolvers = [record, ...libs.map(b => new BundleResolver(b))];
+  return new CompositeResolver(resolvers);
+}
+/** Parse and bind identifiers starting from a root module. */
+function runBind(
+  config: WeslLintConfig,
+  resolver: ModuleResolver,
+  rootAst: WeslAST,
+): BindResults {
+  return bindIdents({
+    resolver,
+    rootAst,
+    conditions: config.conditions?.(),
+    accumulateUnbound: true,
+  });
+}
+/** Convert unbound refs to diagnostics, skipping ignored packages. */
+function unboundDiagnostics(
+  result: BindResults,
+  rootModule: string,
+  ignored: Set<string>,
+): Diagnostic[] {
+  const diagnostics: Diagnostic[] = [];
+  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: unknown): Diagnostic | undefined {
+  if (e instanceof WeslParseError) {
+    const [from, to] = e.span;
+    return {
+      from,
+      to,
+      severity: "error",
+      message: (e.cause as Error)?.message ?? e.message,
+    };
+  }
+  return undefined;
+}
+/** Find external package names not yet loaded, from unresolved imports and unbound refs. */
+function findMissingPackages(
+  rootAst: WeslAST,
+  result: BindResults,
+  resolver: ModuleResolver,
+  ignored: Set<string>,
+  libs: WeslBundle[],
+): string[] {
+  const loaded = new Set(libs.map(b => b.name));
+  const pkgs: string[] = [];
+  // imports that don't resolve to a known module
+  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);
+  }
+  // inline path references (e.g. foo::bar) that didn't bind
+  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: string): boolean {
+  return root !== "package" && root !== "super";
+}
+/** Convert an unbound reference to a CodeMirror diagnostic. */
+function unboundToDiagnostic(ref: UnboundRef): Diagnostic {
+  return {
+    from: ref.start,
+    to: ref.end,
+    severity: "error",
+    message: `unresolved identifier '${ref.path.join("::")}'`,
+  };
+}

package/src/WgslEdit.css ADDED Viewed

@@ -0,0 +1,168 @@
+:host {
+  --tab-bar-bg: transparent;
+  --tab-border: #ccc;
+  --tab-color: #999;
+  --tab-active-bg: #fff;
+  --tab-active-color: #222;
+  --tab-accent: #5f61d8;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 100px;
+}
+:host(.dark) {
+  --tab-bar-bg: transparent;
+  --tab-border: #555;
+  --tab-color: #999;
+  --tab-active-bg: #1e1e1e;
+  --tab-active-color: #fff;
+}
+.tab-bar {
+  --bar-v: 6px;
+  --bar-h: 8px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: var(--bar-v) var(--bar-h);
+  background: var(--tab-bar-bg);
+  flex-shrink: 0;
+  position: relative;
+}
+.tab-bar::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--tab-border);
+}
+.tab {
+  --tab-v: 5px;
+  --tab-h: 12px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: var(--tab-v) var(--tab-h);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--tab-color);
+  cursor: pointer;
+  position: relative;
+  font-size: 15px;
+  font-family: system-ui, sans-serif;
+}
+.tab.active {
+  color: var(--tab-accent);
+  font-weight: 600;
+  padding-bottom: calc(var(--tab-v) + var(--bar-v) + 0.5px);
+  margin-bottom: calc(-1 * (var(--bar-v) + 0.5px));
+  position: relative;
+  z-index: 1;
+  border-bottom: 2px solid var(--tab-accent);
+}
+.tab.active:first-child {
+  margin-left: calc(-1 * var(--bar-h));
+  padding-left: calc(var(--tab-h) + var(--bar-h));
+}
+.tab-close {
+  position: absolute;
+  right: -8px;
+  /* top: 2px; */
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0;
+  font-size: 18px;
+  line-height: 1;
+}
+.tab:hover .tab-close {
+  opacity: 0.6;
+}
+.tab-close:hover {
+  opacity: 1;
+}
+.tab-rename {
+  background: var(--tab-active-bg);
+  border: 1px solid var(--tab-border);
+  border-radius: 4px;
+  color: var(--tab-active-color);
+  font-size: 15px;
+  font-family: system-ui, sans-serif;
+  padding: 0 4px;
+  outline: none;
+}
+.tab-add {
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  color: var(--tab-color);
+  cursor: pointer;
+  font-size: 25px;
+  line-height: 1;
+}
+.tab-add:hover {
+  color: var(--tab-active-color);
+}
+.editor-container {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  padding: var(--editor-padding, 16px 0 0);
+}
+.cm-editor {
+  height: 100%;
+  font-size: var(--editor-font-size, 14px);
+}
+.cm-scroller {
+  overflow: auto;
+}
+.snackbar {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  background: #e8e8e8;
+  color: #333;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: system-ui, sans-serif;
+  line-height: 1.4;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  z-index: 10;
+}
+:host(.dark) .snackbar {
+  background: #3a3a3a;
+  color: #e0e0e0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+.snackbar.visible {
+  opacity: 1;
+}