fix: Stackblitz canvas resize observers (#1044)

mhawryluk · web-flow · commit dd02a682b424 · 2025-03-20T12:09:37.000+01:00
* fix: Stackblitz canvas resize observers
* Fix unexpected color behavior in fluid with atomics example
diff --git a/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts b/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts
@@ -33,7 +33,7 @@ export const openInStackBlitz = (example: Example) => {
       template: 'node',
       title: example.metadata.title,
       files: {
-        'index.ts': index.slice('// @ts-ignore\n'.length),
+        'index.ts': index.replaceAll(/\/\/\s*@ts-ignore\s*\n/g, ''),
         ...tsFiles,
         'index.html': `\
 <!DOCTYPE html>
diff --git a/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts b/apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts
@@ -1,6 +1,3 @@
-// @ts-ignore
-import * as example from './src/index.ts';
-
 const body = document.querySelector('body') as HTMLBodyElement;
 body.style.display = 'flex';
 body.style.flexDirection = 'column';
@@ -67,6 +64,10 @@ if (body.firstChild) {
   body.appendChild(controlsPanel);
 }
 
+// Execute example
+// @ts-ignore
+const example = import('./src/index.ts');
+
 // Create example controls
 for (const controls of Object.values(example)) {
   if (typeof controls === 'function') {
diff --git a/apps/typegpu-docs/src/content/examples/simulation/fluid-with-atomics/index.ts b/apps/typegpu-docs/src/content/examples/simulation/fluid-with-atomics/index.ts
@@ -328,7 +328,7 @@ const fragment = tgpu['~unstable']
     }
 
     const res = 1 / (1 + std.exp(-(normalized - 0.2) * 10));
-    return d.vec4f(0, 0, std.max(0.5, res), res);
+    return d.vec4f(0, 0, res, res);
   });
 
 const vertexInstanceLayout = tgpu.vertexLayout(

Original file line number	Diff line number	Diff line change
`@@ -328,7 +328,7 @@ const fragment = tgpu['~unstable']`
`328`	`328`	`}`
`329`	`329`
`330`	`330`	`const res = 1 / (1 + std.exp(-(normalized - 0.2) * 10));`
`331`		`- return d.vec4f(0, 0, std.max(0.5, res), res);`
	`331`	`+ return d.vec4f(0, 0, res, res);`
`332`	`332`	`});`
`333`	`333`
`334`	`334`	`const vertexInstanceLayout = tgpu.vertexLayout(`