wgsl-play 0.0.33 → 0.0.35

package/dist/WgslPlay.js

@@ -151,9 +151,10 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Set sources from a full project with weslSrc. */
 	setProjectSources(weslSrc, rootModuleName) {
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		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.rebuildPipeline();
 	}
@@ -285,13 +286,10 @@ var WgslPlay = class extends HTMLElement {
 			const source = el.source ?? el.textContent ?? "";
 			return { [this._rootModuleName]: source };
 		};
-		const conditions = el.conditions;
-		const rootModuleName = el.rootModuleName;
-		const libs = el.libs;
-		const weslSrc = getSources();
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		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
@@ -306,7 +304,8 @@ var WgslPlay = class extends HTMLElement {
 			this.project = {
 				weslSrc: detail?.sources ?? fallback,
 				rootModuleName: detail?.rootModuleName,
-				conditions: detail?.conditions
+				conditions: detail?.conditions,
+				libs: detail?.libs
 			};
 		};
 		el.addEventListener("change", this._sourceListener);
@@ -444,9 +443,11 @@ function upgradeProperty(el, prop) {
 		el[prop] = value;
 	}
 }
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath) {
-	return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const result = {};
+	for (const [key, value] of Object.entries(weslSrc)) result[fileToModulePath(key, pkg, false)] = value;
+	return result;
 }
 
 //#endregion

package/dist/wgsl-play.js

@@ -5836,9 +5836,10 @@ var WgslPlay = class extends HTMLElement {
 	}
 	/** Set sources from a full project with weslSrc. */
 	setProjectSources(weslSrc, rootModuleName) {
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		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.rebuildPipeline();
 	}
@@ -5970,13 +5971,10 @@ var WgslPlay = class extends HTMLElement {
 			const source = el.source ?? el.textContent ?? "";
 			return { [this._rootModuleName]: source };
 		};
-		const conditions = el.conditions;
-		const rootModuleName = el.rootModuleName;
-		const libs = el.libs;
-		const weslSrc = getSources();
-		const entries = Object.entries(weslSrc).map(([k, v]) => [toModulePath(k), v]);
-		this._weslSrc = Object.fromEntries(entries);
-		this._rootModuleName = rootModuleName ? toModulePath(rootModuleName) : "package::main";
+		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
@@ -5991,7 +5989,8 @@ var WgslPlay = class extends HTMLElement {
 			this.project = {
 				weslSrc: detail?.sources ?? fallback,
 				rootModuleName: detail?.rootModuleName,
-				conditions: detail?.conditions
+				conditions: detail?.conditions,
+				libs: detail?.libs
 			};
 		};
 		el.addEventListener("change", this._sourceListener);
@@ -6129,9 +6128,11 @@ function upgradeProperty(el, prop) {
 		el[prop] = value;
 	}
 }
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath) {
-	return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(weslSrc, pkg) {
+	const result = {};
+	for (const [key, value] of Object.entries(weslSrc)) result[fileToModulePath(key, pkg, false)] = value;
+	return result;
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-play",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "files": [
     "dist",

package/src/WgslPlay.ts

@@ -241,15 +241,10 @@ export class WgslPlay extends HTMLElement {
     weslSrc: Record<string, string>,
     rootModuleName?: string,
   ): void {
-    // Convert file paths to module paths if needed (for ?link imports)
-    const entries = Object.entries(weslSrc).map(([k, v]) => [
-      toModulePath(k),
-      v,
-    ]);
-    this._weslSrc = Object.fromEntries(entries);
-    this._rootModuleName = rootModuleName
-      ? toModulePath(rootModuleName)
-      : "package::main";
+    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.rebuildPipeline();
   }
@@ -427,25 +422,17 @@ export class WgslPlay extends HTMLElement {
 
     // Load initial sources, conditions, and libs from source element.
     // Use discoverAndRebuild (not project setter) so external deps are fetched.
-    const conditions = (el as any).conditions;
-    const rootModuleName = (el as any).rootModuleName;
-    const libs = (el as any).libs;
-    const weslSrc = getSources();
-    const entries = Object.entries(weslSrc).map(([k, v]) => [
-      toModulePath(k),
-      v,
-    ]);
-    this._weslSrc = Object.fromEntries(entries);
-    this._rootModuleName = rootModuleName
-      ? toModulePath(rootModuleName)
-      : "package::main";
+    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;
     await this.discoverAndRebuild();
     this._fromFullProject = true; // fast rebuilds on subsequent edits
 
-    // Listen for changes - rebuild with cached libs
+    // 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 ?? "" };
@@ -453,6 +440,7 @@ export class WgslPlay extends HTMLElement {
         weslSrc: detail?.sources ?? fallback,
         rootModuleName: detail?.rootModuleName,
         conditions: detail?.conditions,
+        libs: detail?.libs,
       };
     };
     el.addEventListener("change", this._sourceListener);
@@ -629,7 +617,13 @@ function upgradeProperty(el: HTMLElement, prop: string): void {
   }
 }
 
-/** Convert file path to module path (e.g., "effects/main.wesl" -> "package::effects::main"). */
-function toModulePath(filePath: string): string {
-  return fileToModulePath(filePath, "package", false);
+/** Normalize all keys in a weslSrc record to module paths. */
+function toModulePaths(
+  weslSrc: Record<string, string>,
+  pkg: string,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(weslSrc))
+    result[fileToModulePath(key, pkg, false)] = value;
+  return result;
 }

package/src/test/WgslPlay.e2e.ts

@@ -221,20 +221,36 @@ test("connectToSource - external deps are fetched", async ({ page }) => {
   await expectCanvasSnapshot(page, "#player11", "connect-source-external.png");
 });
 
+test("connectToSource - dynamic npm package loading", async ({ page }) => {
+  await page.goto("/");
+  await waitForFrame(page, "#player12");
+
+  // Inject code referencing random_wgsl (not in initial content)
+  await page.click("#inject-npm12");
+  await page.waitForLoadState("networkidle");
+  await waitForFrame(page, "#player12");
+
+  const hasError = await page.evaluate(
+    () => (document.querySelector("#player12") as any)?.hasError ?? true,
+  );
+  expect(hasError).toBe(false);
+  await expectCanvasSnapshot(page, "#player12", "connect-dynamic-npm.png");
+});
+
 test("editor.link() with virtualLibs resolves env:: module", async ({
   page,
 }) => {
   await page.goto("/");
   await waitForWgslPlay(page);
 
-  await page.click("#link-btn12");
+  await page.click("#link-btn13");
   await page.waitForFunction(
     () =>
-      document.querySelector("#link-output12")?.textContent !==
+      document.querySelector("#link-output13")?.textContent !==
       "Not linked yet",
   );
 
-  const output = await page.textContent("#link-output12");
+  const output = await page.textContent("#link-output13");
   expect(output).toContain("var<uniform>");
   expect(output).toContain("fs_main");
   expect(output).not.toContain("Error");