wgsl-play 0.0.37 → 0.0.38

package/README.md

@@ -56,7 +56,7 @@ You can include shader code inline if you'd prefer. Use a `<script type="text/wg
 
 ```typescript
 const player = document.querySelector("wgsl-play");
-player.source = shaderCode;
+player.shader = shaderCode;
 player.pause();
 player.rewind();
 player.play();
@@ -68,7 +68,7 @@ player.play();
 import shader from './examples/noise.wesl?raw';
 
 const player = document.querySelector("wgsl-play");
-player.source = shader;
+player.shader = shader;
 ```
 
 The `?raw` suffix imports the file as a string. This keeps shaders alongside your source files with HMR support.
@@ -80,12 +80,14 @@ The `?raw` suffix imports the file as a string. This keeps shaders alongside you
 - `shader-root` - Root path for internal imports (default: `/shaders`)
 - `autoplay` - Start animating on load (default: `true`). Set `autoplay="false"` to start paused
 - `transparent` - Use premultiplied alpha for transparent backgrounds (default: opaque)
+- `from` - Element ID of a source provider (e.g., wgsl-edit) to connect to
 - `fetch-libs` - Auto-fetch missing libraries from npm (default: `true`). Set `fetch-libs="false"` to disable
+- `fetch-sources` - Auto-fetch local .wesl source files via HTTP (default: `true`). Set `fetch-sources="false"` to disable
 
 ### Properties
-- `source: string` - Get/set shader source
+- `shader: string` - Get/set shader source (single-file convenience)
 - `conditions: Record<string, boolean>` - Get/set conditions for conditional compilation (`@if`/`@elif`/`@else`)
-- `project: WeslProject` - Set full project config (weslSrc, libs, conditions, constants)
+- `project: WeslProject` - Get/set full project config (weslSrc, libs, conditions, constants)
 - `isPlaying: boolean` - Playback state (readonly)
 - `time: number` - Animation time in seconds (readonly)
 - `hasError: boolean` - Compilation error state (readonly)
@@ -147,7 +149,7 @@ import super::common::tint;
 
 ## Using with wesl-plugin
 
-For more control, use the [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/tools/packages/wesl-plugin) to
+For more control, use the [wesl-plugin](https://github.com/wgsl-tooling-wg/wesl-js/tree/main/packages/wesl-plugin) to
 assemble shaders and libraries at build time and provide
 them wgsl-play in JavaScript or TypeScript.
 - provides full support for Hot Module Reloading during development

package/dist/{WgslPlay-DZgeJ1h6.js → WgslPlay-BuIuE3cB.js}

@@ -204,12 +204,13 @@ var WgslPlay = class extends HTMLElement {
 	static observedAttributes = [
 		"src",
 		"shader-root",
-		"source",
+		"from",
 		"no-controls",
 		"theme",
 		"autoplay",
 		"transparent",
-		"fetch-libs"
+		"fetch-libs",
+		"fetch-sources"
 	];
 	canvas;
 	errorOverlay;
@@ -226,7 +227,7 @@ var WgslPlay = class extends HTMLElement {
 	_rootModuleName = "package::main";
 	_libs;
 	_linkOptions = {};
-	_fromFullProject = false;
+	_fetchSources = true;
 	_initPromise;
 	_sourceEl = null;
 	_sourceListener = null;
@@ -274,7 +275,7 @@ var WgslPlay = class extends HTMLElement {
 		}
 		this.initialize();
 		upgradeProperty(this, "conditions");
-		upgradeProperty(this, "source");
+		upgradeProperty(this, "shader");
 		upgradeProperty(this, "project");
 	}
 	disconnectedCallback() {
@@ -302,17 +303,20 @@ var WgslPlay = class extends HTMLElement {
 			this._fetchLibs = newValue !== "false";
 			return;
 		}
+		if (name === "fetch-sources") {
+			this._fetchSources = newValue !== "false";
+			return;
+		}
 		if (name === "src" && newValue && this._initPromise) this.loadFromUrl(newValue);
 	}
 	/** Current shader source code (main module). */
-	get source() {
+	get shader() {
 		return this._weslSrc[this._rootModuleName] ?? "";
 	}
-	/** Set shader source directly. */
-	set source(value) {
+	/** Set shader source directly (single-file convenience). */
+	set shader(value) {
 		this._weslSrc = { [this._rootModuleName]: value };
 		this._libs = void 0;
-		this._fromFullProject = false;
 		this.requestBuild();
 	}
 	/** Conditions for conditional compilation (@if/@elif/@else). */
@@ -330,28 +334,21 @@ var WgslPlay = class extends HTMLElement {
 	/** Set project configuration (mirrors wesl link() API). */
 	set project(value) {
 		const { weslSrc, rootModuleName, libs, packageName, conditions, constants } = value;
-		if (packageName || conditions || constants) this._linkOptions = {
-			packageName,
-			conditions,
-			constants
-		};
+		if (packageName !== void 0) this._linkOptions.packageName = packageName;
+		if (conditions !== void 0) this._linkOptions.conditions = conditions;
+		if (constants !== void 0) this._linkOptions.constants = constants;
 		if (libs) this._libs = libs;
 		if (weslSrc) {
-			this.setProjectSources(weslSrc, rootModuleName);
+			const pkg = this._linkOptions.packageName || "package";
+			const root = rootModuleName ?? "main";
+			this._weslSrc = toModulePaths(weslSrc, pkg);
+			this._rootModuleName = fileToModulePath(root, pkg, false);
+			this.requestBuild();
 			return;
 		}
 		if (Object.keys(this._weslSrc).length === 0) return;
 		this.requestBuild();
 	}
-	/** Set sources from a full project with weslSrc. */
-	setProjectSources(weslSrc, rootModuleName) {
-		const pkg = this._linkOptions.packageName || "package";
-		const root = rootModuleName ?? "main";
-		this._weslSrc = toModulePaths(weslSrc, pkg);
-		this._rootModuleName = fileToModulePath(root, pkg, false);
-		this._fromFullProject = true;
-		this.requestBuild();
-	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
 		return this._fetchLibs;
@@ -361,6 +358,15 @@ var WgslPlay = class extends HTMLElement {
 		if (value) this.removeAttribute("fetch-libs");
 		else this.setAttribute("fetch-libs", "false");
 	}
+	/** Whether to fetch local .wesl source files via HTTP (default: true). */
+	get fetchSources() {
+		return this._fetchSources;
+	}
+	set fetchSources(value) {
+		this._fetchSources = value;
+		if (value) this.removeAttribute("fetch-sources");
+		else this.setAttribute("fetch-sources", "false");
+	}
 	/** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
 	get autoplay() {
 		return this.getAttribute("autoplay") !== "false";
@@ -456,9 +462,9 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Load from source element, src URL, script child, or inline textContent. */
 	loadInitialContent() {
-		const sourceId = this.getAttribute("source");
-		if (sourceId) {
-			this.connectToSource(sourceId);
+		const fromId = this.getAttribute("from");
+		if (fromId) {
+			this.connectFrom(fromId);
 			return;
 		}
 		const src = this.getAttribute("src");
@@ -469,43 +475,21 @@ var WgslPlay = class extends HTMLElement {
 		const inlineSource = this.querySelector("script[type=\"text/wgsl\"], script[type=\"text/wesl\"]")?.textContent?.trim() ?? this.textContent?.trim();
 		if (!inlineSource) return;
 		this._weslSrc = { [this._rootModuleName]: inlineSource };
-		this._fromFullProject = false;
 		this.requestBuild();
 	}
 	/** Connect to a source provider element (e.g., wgsl-edit). */
-	connectToSource(id) {
+	connectFrom(id) {
 		const el = document.getElementById(id);
 		if (!el) {
 			console.error(`wgsl-play: source element "${id}" not found`);
 			return;
 		}
 		this._sourceEl = el;
-		const getSources = () => {
-			const sources = el.sources;
-			if (sources && Object.keys(sources).length > 0) return sources;
-			const source = el.source ?? el.textContent ?? "";
-			return { [this._rootModuleName]: source };
-		};
-		const { conditions, rootModuleName, libs } = el;
-		const root = rootModuleName ?? "main";
-		this._weslSrc = getSources();
-		this._rootModuleName = fileToModulePath(root, "package", false);
-		if (conditions) this._linkOptions = {
-			...this._linkOptions,
-			conditions
-		};
-		if (libs) this._libs = libs;
-		this._fromFullProject = false;
-		this.requestBuild();
+		const p = el.project;
+		if (p) this.project = p;
 		this._sourceListener = (e) => {
 			const detail = e.detail;
-			const fallback = { [this._rootModuleName]: detail?.source ?? "" };
-			this.project = {
-				weslSrc: detail?.sources ?? fallback,
-				rootModuleName: detail?.rootModuleName,
-				conditions: detail?.conditions,
-				libs: detail?.libs
-			};
+			if (detail) this.project = detail;
 		};
 		el.addEventListener("change", this._sourceListener);
 	}
@@ -515,7 +499,6 @@ var WgslPlay = class extends HTMLElement {
 			const { weslSrc, libs, rootModuleName } = await loadShaderFromUrl(url, this.getConfigOverrides()?.shaderRoot);
 			this._weslSrc = weslSrc;
 			this._libs = libs;
-			this._fromFullProject = false;
 			if (rootModuleName) this._rootModuleName = rootModuleName;
 			this.requestBuild();
 		} catch (error) {
@@ -540,11 +523,12 @@ var WgslPlay = class extends HTMLElement {
 			}
 			try {
 				this.errorOverlay.hide();
-				if (!this._fromFullProject) {
+				if (this._fetchSources || this._fetchLibs) {
 					const { weslSrc, libs } = await fetchDependencies(mainSource, {
 						shaderRoot: this.getConfigOverrides()?.shaderRoot,
 						existingSources: this._weslSrc,
-						skipExternal: !this._fetchLibs
+						fetchLibs: this._fetchLibs,
+						fetchSources: this._fetchSources
 					});
 					this._weslSrc = {
 						...this._weslSrc,

package/dist/{WgslPlay-B86UkrM7.d.ts → WgslPlay-uTIOrTQq.d.ts}

@@ -1,4 +1,4 @@
-import { Conditions, LinkParams } from "wesl";
+import { Conditions, WeslProject } from "wesl";
 
 //#region src/Config.d.ts
 /** Configuration for wgsl-play. */
@@ -14,8 +14,6 @@ declare function getConfig(overrides?: Partial<WgslPlayConfig>): WgslPlayConfig;
 declare function resetConfig(): void;
 //#endregion
 //#region src/WgslPlay.d.ts
-/** Project configuration for multi-file shaders (subset of wesl link() API). */
-type WeslProject = Pick<LinkParams, "weslSrc" | "rootModuleName" | "conditions" | "constants" | "libs" | "packageName">;
 /** One source location within a compile error. */
 interface CompileErrorLocation {
   file?: string;
@@ -45,7 +43,7 @@ declare class WgslPlay extends HTMLElement {
   private _rootModuleName;
   private _libs?;
   private _linkOptions;
-  private _fromFullProject;
+  private _fetchSources;
   private _initPromise?;
   private _sourceEl;
   private _sourceListener;
@@ -62,19 +60,20 @@ declare class WgslPlay extends HTMLElement {
   disconnectedCallback(): void;
   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
   /** Current shader source code (main module). */
-  get source(): string;
-  /** Set shader source directly. */
-  set source(value: string);
+  get shader(): string;
+  /** Set shader source directly (single-file convenience). */
+  set shader(value: string);
   /** Conditions for conditional compilation (@if/@elif/@else). */
   get conditions(): Conditions;
   set conditions(value: Conditions);
   /** Set project configuration (mirrors wesl link() API). */
   set project(value: WeslProject);
-  /** Set sources from a full project with weslSrc. */
-  private setProjectSources;
   /** Whether to auto-fetch missing library packages from npm (default: true). */
   get fetchLibs(): boolean;
   set fetchLibs(value: boolean);
+  /** Whether to fetch local .wesl source files via HTTP (default: true). */
+  get fetchSources(): boolean;
+  set fetchSources(value: boolean);
   /** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
   get autoplay(): boolean;
   set autoplay(value: boolean | string);
@@ -106,7 +105,7 @@ declare class WgslPlay extends HTMLElement {
   /** Load from source element, src URL, script child, or inline textContent. */
   private loadInitialContent;
   /** Connect to a source provider element (e.g., wgsl-edit). */
-  private connectToSource;
+  private connectFrom;
   /** Fetch shader from URL, then trigger a build. */
   private loadFromUrl;
   /** Mark build as needed. Coalesces rapid requests into a single build. */
@@ -118,4 +117,4 @@ declare class WgslPlay extends HTMLElement {
   private extractLocations;
 }
 //#endregion
-export { WgslPlayConfig as a, resetConfig as c, WgslPlay as i, CompileErrorLocation as n, defaults as o, WeslProject as r, getConfig as s, CompileErrorDetail as t };
+export { defaults as a, WgslPlayConfig as i, CompileErrorLocation as n, getConfig as o, WgslPlay as r, resetConfig as s, CompileErrorDetail as t };

package/dist/WgslPlay.d.ts

@@ -1,2 +1,2 @@
-import { c as resetConfig, i as WgslPlay, n as CompileErrorLocation, o as defaults, r as WeslProject, s as getConfig, t as CompileErrorDetail } from "./WgslPlay-B86UkrM7.js";
-export { CompileErrorDetail, CompileErrorLocation, WeslProject, WgslPlay, defaults, getConfig, resetConfig };
+import { a as defaults, n as CompileErrorLocation, o as getConfig, r as WgslPlay, s as resetConfig, t as CompileErrorDetail } from "./WgslPlay-uTIOrTQq.js";
+export { CompileErrorDetail, CompileErrorLocation, WgslPlay, defaults, getConfig, resetConfig };

package/dist/WgslPlay.js

@@ -1,2 +1,2 @@
-import { i as resetConfig, n as defaults, r as getConfig, t as WgslPlay } from "./WgslPlay-DZgeJ1h6.js";
+import { i as resetConfig, n as defaults, r as getConfig, t as WgslPlay } from "./WgslPlay-BuIuE3cB.js";
 export { WgslPlay, defaults, getConfig, resetConfig };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import { a as WgslPlayConfig, c as resetConfig, i as WgslPlay, n as CompileErrorLocation, o as defaults, r as WeslProject, s as getConfig, t as CompileErrorDetail } from "./WgslPlay-B86UkrM7.js";
+import { a as defaults, i as WgslPlayConfig, n as CompileErrorLocation, o as getConfig, r as WgslPlay, s as resetConfig, t as CompileErrorDetail } from "./WgslPlay-uTIOrTQq.js";
 export * from "wesl-fetch";
-export { CompileErrorDetail, CompileErrorLocation, WeslProject, WgslPlay, WgslPlayConfig, defaults, getConfig, resetConfig };
+export { CompileErrorDetail, CompileErrorLocation, WgslPlay, WgslPlayConfig, defaults, getConfig, resetConfig };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { i as resetConfig, n as defaults, r as getConfig, t as WgslPlay } from "./WgslPlay-DZgeJ1h6.js";
+import { i as resetConfig, n as defaults, r as getConfig, t as WgslPlay } from "./WgslPlay-BuIuE3cB.js";
 export * from "wesl-fetch";
 //#region src/index.ts
 if (typeof customElements !== "undefined" && !customElements.get("wgsl-play")) customElements.define("wgsl-play", WgslPlay);

package/dist/wgsl-play.js

@@ -5035,7 +5035,8 @@ async function fetchDependencies(rootModuleSource, options) {
 	const shaderRoot = options?.shaderRoot ?? "/shaders";
 	const currentPath = options?.currentPath;
 	const existingSources = options?.existingSources;
-	const skipExternal = options?.skipExternal ?? false;
+	const fetchLibs = options?.fetchLibs ?? true;
+	const fetchSources = options?.fetchSources ?? true;
 	const rootModuleName = currentPath ? urlToModulePath(currentPath, shaderRoot) : "package::main";
 	const resolver = new FetchingResolver({
 		...existingSources,
@@ -5051,12 +5052,12 @@ async function fetchDependencies(rootModuleSource, options) {
 		const unresolved = getNonVirtualUnresolved(resolver, fetched);
 		if (unresolved.length === 0) break;
 		const [internal, external] = partition(unresolved, isInternal);
-		await Promise.all(internal.map((p) => resolver.resolveModuleAsync(p)));
-		if (skipExternal) for (const p of external) fetched.add(p.split("::")[0]);
-		else {
+		if (fetchSources) await Promise.all(internal.map((p) => resolver.resolveModuleAsync(p)));
+		else for (const p of internal) fetched.add(p);
+		if (fetchLibs) {
 			const newLibs = await fetchExternalBundles(external, fetched);
 			libs.push(...newLibs);
-		}
+		} else for (const p of external) fetched.add(p.split("::")[0]);
 	}
 	return {
 		libs,
@@ -5606,12 +5607,13 @@ var WgslPlay = class extends HTMLElement {
 	static observedAttributes = [
 		"src",
 		"shader-root",
-		"source",
+		"from",
 		"no-controls",
 		"theme",
 		"autoplay",
 		"transparent",
-		"fetch-libs"
+		"fetch-libs",
+		"fetch-sources"
 	];
 	canvas;
 	errorOverlay;
@@ -5628,7 +5630,7 @@ var WgslPlay = class extends HTMLElement {
 	_rootModuleName = "package::main";
 	_libs;
 	_linkOptions = {};
-	_fromFullProject = false;
+	_fetchSources = true;
 	_initPromise;
 	_sourceEl = null;
 	_sourceListener = null;
@@ -5676,7 +5678,7 @@ var WgslPlay = class extends HTMLElement {
 		}
 		this.initialize();
 		upgradeProperty(this, "conditions");
-		upgradeProperty(this, "source");
+		upgradeProperty(this, "shader");
 		upgradeProperty(this, "project");
 	}
 	disconnectedCallback() {
@@ -5704,17 +5706,20 @@ var WgslPlay = class extends HTMLElement {
 			this._fetchLibs = newValue !== "false";
 			return;
 		}
+		if (name === "fetch-sources") {
+			this._fetchSources = newValue !== "false";
+			return;
+		}
 		if (name === "src" && newValue && this._initPromise) this.loadFromUrl(newValue);
 	}
 	/** Current shader source code (main module). */
-	get source() {
+	get shader() {
 		return this._weslSrc[this._rootModuleName] ?? "";
 	}
-	/** Set shader source directly. */
-	set source(value) {
+	/** Set shader source directly (single-file convenience). */
+	set shader(value) {
 		this._weslSrc = { [this._rootModuleName]: value };
 		this._libs = void 0;
-		this._fromFullProject = false;
 		this.requestBuild();
 	}
 	/** Conditions for conditional compilation (@if/@elif/@else). */
@@ -5732,28 +5737,21 @@ var WgslPlay = class extends HTMLElement {
 	/** Set project configuration (mirrors wesl link() API). */
 	set project(value) {
 		const { weslSrc, rootModuleName, libs, packageName, conditions, constants } = value;
-		if (packageName || conditions || constants) this._linkOptions = {
-			packageName,
-			conditions,
-			constants
-		};
+		if (packageName !== void 0) this._linkOptions.packageName = packageName;
+		if (conditions !== void 0) this._linkOptions.conditions = conditions;
+		if (constants !== void 0) this._linkOptions.constants = constants;
 		if (libs) this._libs = libs;
 		if (weslSrc) {
-			this.setProjectSources(weslSrc, rootModuleName);
+			const pkg = this._linkOptions.packageName || "package";
+			const root = rootModuleName ?? "main";
+			this._weslSrc = toModulePaths(weslSrc, pkg);
+			this._rootModuleName = fileToModulePath(root, pkg, false);
+			this.requestBuild();
 			return;
 		}
 		if (Object.keys(this._weslSrc).length === 0) return;
 		this.requestBuild();
 	}
-	/** Set sources from a full project with weslSrc. */
-	setProjectSources(weslSrc, rootModuleName) {
-		const pkg = this._linkOptions.packageName || "package";
-		const root = rootModuleName ?? "main";
-		this._weslSrc = toModulePaths(weslSrc, pkg);
-		this._rootModuleName = fileToModulePath(root, pkg, false);
-		this._fromFullProject = true;
-		this.requestBuild();
-	}
 	/** Whether to auto-fetch missing library packages from npm (default: true). */
 	get fetchLibs() {
 		return this._fetchLibs;
@@ -5763,6 +5761,15 @@ var WgslPlay = class extends HTMLElement {
 		if (value) this.removeAttribute("fetch-libs");
 		else this.setAttribute("fetch-libs", "false");
 	}
+	/** Whether to fetch local .wesl source files via HTTP (default: true). */
+	get fetchSources() {
+		return this._fetchSources;
+	}
+	set fetchSources(value) {
+		this._fetchSources = value;
+		if (value) this.removeAttribute("fetch-sources");
+		else this.setAttribute("fetch-sources", "false");
+	}
 	/** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
 	get autoplay() {
 		return this.getAttribute("autoplay") !== "false";
@@ -5858,9 +5865,9 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Load from source element, src URL, script child, or inline textContent. */
 	loadInitialContent() {
-		const sourceId = this.getAttribute("source");
-		if (sourceId) {
-			this.connectToSource(sourceId);
+		const fromId = this.getAttribute("from");
+		if (fromId) {
+			this.connectFrom(fromId);
 			return;
 		}
 		const src = this.getAttribute("src");
@@ -5871,43 +5878,21 @@ var WgslPlay = class extends HTMLElement {
 		const inlineSource = this.querySelector("script[type=\"text/wgsl\"], script[type=\"text/wesl\"]")?.textContent?.trim() ?? this.textContent?.trim();
 		if (!inlineSource) return;
 		this._weslSrc = { [this._rootModuleName]: inlineSource };
-		this._fromFullProject = false;
 		this.requestBuild();
 	}
 	/** Connect to a source provider element (e.g., wgsl-edit). */
-	connectToSource(id) {
+	connectFrom(id) {
 		const el = document.getElementById(id);
 		if (!el) {
 			console.error(`wgsl-play: source element "${id}" not found`);
 			return;
 		}
 		this._sourceEl = el;
-		const getSources = () => {
-			const sources = el.sources;
-			if (sources && Object.keys(sources).length > 0) return sources;
-			const source = el.source ?? el.textContent ?? "";
-			return { [this._rootModuleName]: source };
-		};
-		const { conditions, rootModuleName, libs } = el;
-		const root = rootModuleName ?? "main";
-		this._weslSrc = getSources();
-		this._rootModuleName = fileToModulePath(root, "package", false);
-		if (conditions) this._linkOptions = {
-			...this._linkOptions,
-			conditions
-		};
-		if (libs) this._libs = libs;
-		this._fromFullProject = false;
-		this.requestBuild();
+		const p = el.project;
+		if (p) this.project = p;
 		this._sourceListener = (e) => {
 			const detail = e.detail;
-			const fallback = { [this._rootModuleName]: detail?.source ?? "" };
-			this.project = {
-				weslSrc: detail?.sources ?? fallback,
-				rootModuleName: detail?.rootModuleName,
-				conditions: detail?.conditions,
-				libs: detail?.libs
-			};
+			if (detail) this.project = detail;
 		};
 		el.addEventListener("change", this._sourceListener);
 	}
@@ -5917,7 +5902,6 @@ var WgslPlay = class extends HTMLElement {
 			const { weslSrc, libs, rootModuleName } = await loadShaderFromUrl(url, this.getConfigOverrides()?.shaderRoot);
 			this._weslSrc = weslSrc;
 			this._libs = libs;
-			this._fromFullProject = false;
 			if (rootModuleName) this._rootModuleName = rootModuleName;
 			this.requestBuild();
 		} catch (error) {
@@ -5942,11 +5926,12 @@ var WgslPlay = class extends HTMLElement {
 			}
 			try {
 				this.errorOverlay.hide();
-				if (!this._fromFullProject) {
+				if (this._fetchSources || this._fetchLibs) {
 					const { weslSrc, libs } = await fetchDependencies(mainSource, {
 						shaderRoot: this.getConfigOverrides()?.shaderRoot,
 						existingSources: this._weslSrc,
-						skipExternal: !this._fetchLibs
+						fetchLibs: this._fetchLibs,
+						fetchSources: this._fetchSources
 					});
 					this._weslSrc = {
 						...this._weslSrc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-play",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "files": [
     "dist",
@@ -22,9 +22,9 @@
     }
   },
   "dependencies": {
-    "wesl": "0.7.24",
-    "wesl-gpu": "0.1.26",
-    "wesl-fetch": "0.0.12"
+    "wesl-fetch": "0.0.13",
+    "wesl-gpu": "0.1.27",
+    "wesl": "0.7.25"
   },
   "devDependencies": {
     "@playwright/test": "^1.53.2",

package/src/WgslPlay.ts

@@ -1,4 +1,4 @@
-import type { Conditions, LinkParams, WeslBundle } from "wesl";
+import type { Conditions, WeslBundle, WeslProject } from "wesl";
 import { fileToModulePath, WeslParseError } from "wesl";
 import { fetchDependencies, loadShaderFromUrl } from "wesl-fetch";
 import type { WgslPlayConfig } from "./Config.ts";
@@ -16,17 +16,6 @@ import cssText from "./WgslPlay.css?inline";
 
 export { defaults, getConfig, resetConfig } from "./Config.ts";
 
-/** Project configuration for multi-file shaders (subset of wesl link() API). */
-export type WeslProject = Pick<
-  LinkParams,
-  | "weslSrc"
-  | "rootModuleName"
-  | "conditions"
-  | "constants"
-  | "libs"
-  | "packageName"
->;
-
 /** One source location within a compile error. */
 export interface CompileErrorLocation {
   file?: string;
@@ -53,12 +42,13 @@ export class WgslPlay extends HTMLElement {
   static observedAttributes = [
     "src",
     "shader-root",
-    "source",
+    "from",
     "no-controls",
     "theme",
     "autoplay",
     "transparent",
     "fetch-libs",
+    "fetch-sources",
   ];
 
   private canvas: HTMLCanvasElement;
@@ -78,7 +68,7 @@ export class WgslPlay extends HTMLElement {
   private _rootModuleName = "package::main";
   private _libs?: WeslBundle[];
   private _linkOptions: LinkOptions = {};
-  private _fromFullProject = false;
+  private _fetchSources = true;
   private _initPromise?: Promise<boolean>;
   private _sourceEl: HTMLElement | null = null;
   private _sourceListener: ((e: Event) => void) | null = null;
@@ -138,7 +128,7 @@ export class WgslPlay extends HTMLElement {
     }
     this.initialize();
     upgradeProperty(this, "conditions");
-    upgradeProperty(this, "source");
+    upgradeProperty(this, "shader");
     upgradeProperty(this, "project");
   }
 
@@ -179,6 +169,11 @@ export class WgslPlay extends HTMLElement {
       return;
     }
 
+    if (name === "fetch-sources") {
+      this._fetchSources = newValue !== "false";
+      return;
+    }
+
     // Initial src is handled by initialize(); this handles later changes
     if (name === "src" && newValue && this._initPromise) {
       this.loadFromUrl(newValue);
@@ -186,15 +181,14 @@ export class WgslPlay extends HTMLElement {
   }
 
   /** Current shader source code (main module). */
-  get source(): string {
+  get shader(): string {
     return this._weslSrc[this._rootModuleName] ?? "";
   }
 
-  /** Set shader source directly. */
-  set source(value: string) {
+  /** Set shader source directly (single-file convenience). */
+  set shader(value: string) {
     this._weslSrc = { [this._rootModuleName]: value };
     this._libs = undefined;
-    this._fromFullProject = false;
     this.requestBuild();
   }
 
@@ -219,15 +213,17 @@ export class WgslPlay extends HTMLElement {
       conditions,
       constants,
     } = value;
-
-    // Update link options if provided
-    if (packageName || conditions || constants) {
-      this._linkOptions = { packageName, conditions, constants };
-    }
+    if (packageName !== undefined) this._linkOptions.packageName = packageName;
+    if (conditions !== undefined) this._linkOptions.conditions = conditions;
+    if (constants !== undefined) this._linkOptions.constants = constants;
     if (libs) this._libs = libs;
 
     if (weslSrc) {
-      this.setProjectSources(weslSrc, rootModuleName);
+      const pkg = this._linkOptions.packageName || "package";
+      const root = rootModuleName ?? "main";
+      this._weslSrc = toModulePaths(weslSrc, pkg);
+      this._rootModuleName = fileToModulePath(root, pkg, false);
+      this.requestBuild();
       return;
     }
 
@@ -235,19 +231,6 @@ export class WgslPlay extends HTMLElement {
     this.requestBuild();
   }
 
-  /** Set sources from a full project with weslSrc. */
-  private setProjectSources(
-    weslSrc: Record<string, string>,
-    rootModuleName?: string,
-  ): void {
-    const pkg = this._linkOptions.packageName || "package";
-    const root = rootModuleName ?? "main";
-    this._weslSrc = toModulePaths(weslSrc, pkg);
-    this._rootModuleName = fileToModulePath(root, pkg, false);
-    this._fromFullProject = true;
-    this.requestBuild();
-  }
-
   /** Whether to auto-fetch missing library packages from npm (default: true). */
   get fetchLibs(): boolean {
     return this._fetchLibs;
@@ -259,6 +242,17 @@ export class WgslPlay extends HTMLElement {
     else this.setAttribute("fetch-libs", "false");
   }
 
+  /** Whether to fetch local .wesl source files via HTTP (default: true). */
+  get fetchSources(): boolean {
+    return this._fetchSources;
+  }
+
+  set fetchSources(value: boolean) {
+    this._fetchSources = value;
+    if (value) this.removeAttribute("fetch-sources");
+    else this.setAttribute("fetch-sources", "false");
+  }
+
   /** Whether autoplay is enabled (default: true). Set autoplay="false" to start paused. */
   get autoplay(): boolean {
     return this.getAttribute("autoplay") !== "false";
@@ -383,9 +377,9 @@ export class WgslPlay extends HTMLElement {
 
   /** Load from source element, src URL, script child, or inline textContent. */
   private loadInitialContent(): void {
-    const sourceId = this.getAttribute("source");
-    if (sourceId) {
-      this.connectToSource(sourceId);
+    const fromId = this.getAttribute("from");
+    if (fromId) {
+      this.connectFrom(fromId);
       return;
     }
 
@@ -404,12 +398,11 @@ export class WgslPlay extends HTMLElement {
     if (!inlineSource) return;
 
     this._weslSrc = { [this._rootModuleName]: inlineSource };
-    this._fromFullProject = false;
     this.requestBuild();
   }
 
   /** Connect to a source provider element (e.g., wgsl-edit). */
-  private connectToSource(id: string): void {
+  private connectFrom(id: string): void {
     const el = document.getElementById(id);
     if (!el) {
       console.error(`wgsl-play: source element "${id}" not found`);
@@ -417,34 +410,12 @@ export class WgslPlay extends HTMLElement {
     }
     this._sourceEl = el;
 
-    // Get sources from element - support both single-file and multi-file APIs
-    const getSources = (): Record<string, string> => {
-      const sources = (el as any).sources;
-      if (sources && Object.keys(sources).length > 0) return sources;
-      const source = (el as any).source ?? el.textContent ?? "";
-      return { [this._rootModuleName]: source };
-    };
-
-    // Load initial sources, conditions, and libs from source element.
-    const { conditions, rootModuleName, libs } = el as any;
-    const root = rootModuleName ?? "main";
-    this._weslSrc = getSources();
-    this._rootModuleName = fileToModulePath(root, "package", false);
-    if (conditions) this._linkOptions = { ...this._linkOptions, conditions };
-    if (libs) this._libs = libs;
-    this._fromFullProject = false;
-    this.requestBuild();
+    const p = (el as any).project as WeslProject | undefined;
+    if (p) this.project = p;
 
-    // Listen for changes - rebuild with libs from source element
     this._sourceListener = (e: Event) => {
-      const detail = (e as CustomEvent).detail;
-      const fallback = { [this._rootModuleName]: detail?.source ?? "" };
-      this.project = {
-        weslSrc: detail?.sources ?? fallback,
-        rootModuleName: detail?.rootModuleName,
-        conditions: detail?.conditions,
-        libs: detail?.libs,
-      };
+      const detail = (e as CustomEvent).detail as WeslProject | undefined;
+      if (detail) this.project = detail;
     };
     el.addEventListener("change", this._sourceListener);
   }
@@ -458,7 +429,6 @@ export class WgslPlay extends HTMLElement {
       );
       this._weslSrc = weslSrc;
       this._libs = libs;
-      this._fromFullProject = false;
       if (rootModuleName) this._rootModuleName = rootModuleName;
       this.requestBuild();
     } catch (error) {
@@ -490,11 +460,12 @@ export class WgslPlay extends HTMLElement {
 
       try {
         this.errorOverlay.hide();
-        if (!this._fromFullProject) {
+        if (this._fetchSources || this._fetchLibs) {
           const { weslSrc, libs } = await fetchDependencies(mainSource, {
             shaderRoot: this.getConfigOverrides()?.shaderRoot,
             existingSources: this._weslSrc,
-            skipExternal: !this._fetchLibs,
+            fetchLibs: this._fetchLibs,
+            fetchSources: this._fetchSources,
           });
           this._weslSrc = { ...this._weslSrc, ...weslSrc };
           this._libs = dedupLibs(this._libs, libs);