use esbuild-plugin-webgl

Author: mayank1513

lib/package.json

@@ -35,6 +35,7 @@
     "esbuild-plugin-rdi": "^0.0.0",
     "esbuild-plugin-react18": "0.2.4",
     "esbuild-plugin-react18-css": "^0.0.4",
+    "esbuild-plugin-webgl": "^0.0.1",
     "jsdom": "^24.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

lib/src/simulator.ts

@@ -267,7 +267,6 @@ export const renderParticles = (canvas: HTMLCanvasElement, options?: ParticlesOp
   /** Set up observer to observe size changes */
   const observer = new ResizeObserver(entries => {
     const { width, height } = entries[0].contentRect;
-    console.log({ width, height });
     canvas.width = width;
     canvas.height = height;
     gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

lib/tsup.config.ts

@@ -3,6 +3,7 @@ import { defineConfig, type Options } from "tsup";
 import react18Plugin from "esbuild-plugin-react18";
 import cssPlugin from "esbuild-plugin-react18-css";
 import { rdiPlugin } from "esbuild-plugin-rdi";
+import { webglPlugin } from "esbuild-plugin-webgl";
 
 export default defineConfig(
   (options: Options) =>
@@ -19,30 +20,18 @@ export default defineConfig(
           name: "webgl",
           setup(build) {
             if (!options.watch)
-              build.onLoad({ filter: /utils\.ts$/, namespace: "file" }, args => {
+              build.onLoad({ filter: /simulator\.ts$/, namespace: "file" }, args => {
+                console.log("utils ----- >", args.path);
                 const text = fs.readFileSync(args.path, "utf8");
                 const contents = text
-                  .replace(/if \(!gl[^}]*}/gm, "")
-                  .replace(/;\s*if \(![^;]*;/gm, "!;")
+                  .replace(/if \(!gl\.[^}]*}/gm, "")
+                  .replace(/;\s*if \(!(shader|program)[^;]*;/gm, "!;")
                   .trim();
                 return { contents, loader: "ts" };
               });
-            // eslint-disable-next-line prefer-named-capture-group -- ok
-            build.onLoad({ filter: /\.glsl$/, namespace: "file" }, args => {
-              const text = fs.readFileSync(args.path, "utf8");
-              const lines = text
-                // remove comments
-                .replace(/\/\*.*\*\//gm, "")
-                // remove white spaces around =
-                // .replace(/ = /g, "=")
-                .split("\n")
-                .map(line => line.trim())
-                .filter(Boolean);
-              const contents = `export default \`${lines[0]}\n${lines.slice(1).join("")}\``;
-              return { contents, loader: "ts" };
-            });
           },
         },
+        webglPlugin(),
         react18Plugin({ disableJSXRequireDedup: true }),
         cssPlugin({ generateScopedName: "[folder]__[local]" }),
         rdiPlugin(),