Create a browser variant of the rolldown plugin

Author: iwoplaza

apps/typegpu-docs/public/coi-serviceworker.js

@@ -35,7 +35,6 @@ if (typeof window === 'undefined') {
 
   self.addEventListener('fetch', (event) => {
     const r = event.request;
-    console.log('SERVICE: Intercepting request...', r);
     if (r.cache === 'only-if-cached' && r.mode !== 'same-origin') {
       return;
     }

apps/typegpu-docs/src/components/translator/lib/tgslExecutor.ts

@@ -1,18 +1,6 @@
-import * as Babel from '@babel/standalone';
-import plugin from 'unplugin-typegpu/babel';
+import rolldownPlugin from 'unplugin-typegpu/rolldown-browser';
 import { bundle } from './rolldown.ts';
 
-function translateTGSL(
-  code: string,
-): string {
-  const result = Babel.transform(code, {
-    'presets': ['typescript'],
-    'filename': 'example.ts',
-    plugins: [plugin],
-  }).code;
-  return result || '';
-}
-
 const moduleImports = {
   'typegpu': 'https://esm.sh/typegpu@latest/?bundle=false',
   'typegpu/data': 'https://esm.sh/typegpu@latest/data/?bundle=false',
@@ -22,19 +10,24 @@ const moduleImports = {
 type TgslModule = Record<string, unknown>;
 
 async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
-  const translatedCode = translateTGSL(tgslCode);
-
-  const { output } = await bundle(
+  const result = await bundle(
     {
-      '/utils.ts':
-        'export function add(a: number, b: number): number { return a + b; }',
-      '/index.ts':
-        `import {add} from './utils.ts'; console.log('Hello, World!');`,
+      '/shader.js': tgslCode,
+      '/index.ts': `
+        import tgpu from 'typegpu';
+        import * as exports from './shader.js';
+
+        const shaderCode = tgpu.resolve({ externals: exports });
+        export default shaderCode;
+      `,
     },
     ['./index.ts'],
+    {
+      plugins: [rolldownPlugin({})],
+    },
   );
 
-  console.log(output);
+  const output = result.output['index.js'];
 
   const importMap = { imports: moduleImports };
 
@@ -44,7 +37,7 @@ async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
   document.head.appendChild(importMapScript);
 
   try {
-    const userBlob = new Blob([translatedCode], { type: 'text/javascript' });
+    const userBlob = new Blob([output], { type: 'text/javascript' });
     const userModuleUrl = URL.createObjectURL(userBlob);
 
     const module = await import(userModuleUrl);
@@ -58,16 +51,8 @@ async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
 
 export async function executeTgslCode(tgslCode: string): Promise<string> {
   try {
-    const exports = await executeTgslModule(tgslCode);
-
-    const tgpuModule = await import(
-      //@ts-expect-error
-      'https://esm.sh/typegpu@latest?bundle=false'
-    );
-
-    return tgpuModule.default.resolve({
-      externals: exports as Record<string, object>,
-    });
+    const shaderCode = await executeTgslModule(tgslCode);
+    return shaderCode.default as string;
   } catch (error) {
     throw new Error(
       `Failed to execute TGSL code: ${

packages/unplugin-typegpu/package.json

@@ -26,6 +26,7 @@
     "./esbuild": "./src/esbuild.ts",
     "./farm": "./src/farm.ts",
     "./rolldown": "./src/rolldown.ts",
+    "./rolldown-browser": "./src/rolldown-browser.ts",
     "./rspack": "./src/rspack.ts",
     "./vite": "./src/vite.ts",
     "./webpack": "./src/webpack.ts"
@@ -79,6 +80,12 @@
         "import": "./dist/rolldown.js",
         "default": "./dist/rolldown.cjs"
       },
+      "./rolldown-browser": {
+        "types": "./dist/rolldown-browser.d.ts",
+        "module": "./dist/rolldown-browser.js",
+        "import": "./dist/rolldown-browser.js",
+        "default": "./dist/rolldown-browser.cjs"
+      },
       "./rspack": {
         "types": "./dist/rspack.d.ts",
         "module": "./dist/rspack.js",
@@ -138,6 +145,7 @@
     "@types/bun": "^1.2.19",
     "@types/picomatch": "^4.0.1",
     "acorn": "^8.14.1",
+    "rolldown": "1.0.0-beta.33",
     "rollup": "~4.37.0",
     "tsup": "catalog:build",
     "typescript": "catalog:types"

packages/unplugin-typegpu/src/bun.ts

@@ -17,7 +17,7 @@ export default (rawOptions: Options): BunPlugin => {
   }
 
   return {
-    name: 'TypeGPU',
+    name: 'unplugin-typegpu',
     setup(build) {
       build.onLoad({ filter: include }, async (args) => {
         const text = await Bun.file(args.path).text();

packages/unplugin-typegpu/src/common.ts

@@ -1,5 +1,6 @@
 import type * as babel from '@babel/types';
 import type * as acorn from 'acorn';
+import type { MagicStringAST } from 'magic-string-ast';
 import type { FilterPattern } from 'unplugin';
 
 export type Context = {
@@ -243,6 +244,69 @@ export function performExpressionNaming<T extends acorn.AnyNode | babel.Node>(
   }
 }
 
+export type FunctionNode =
+  | acorn.FunctionDeclaration
+  | acorn.AnonymousFunctionDeclaration
+  | acorn.FunctionExpression
+  | acorn.ArrowFunctionExpression;
+
+export function containsKernelDirective(node: FunctionNode): boolean {
+  if (node.body.type === 'BlockStatement') {
+    for (const statement of node.body.body) {
+      if (
+        statement.type === 'ExpressionStatement' &&
+        statement.directive === kernelDirective
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+export function removeKernelDirective(node: FunctionNode) {
+  const cloned = structuredClone(node);
+
+  if (cloned.body.type === 'BlockStatement') {
+    cloned.body.body = cloned.body.body.filter(
+      (statement) =>
+        !(
+          statement.type === 'ExpressionStatement' &&
+          statement.directive === kernelDirective
+        ),
+    );
+  }
+
+  return cloned;
+}
+
+export function assignMetadata(
+  magicString: MagicStringAST,
+  node: acorn.AnyNode,
+  metadata: string,
+) {
+  magicString.prependLeft(
+    node.start,
+    '(($ => (globalThis.__TYPEGPU_META__ ??= new WeakMap()).set($.f = (',
+  ).appendRight(
+    node.end,
+    `), ${metadata}) && $.f)({}))`,
+  );
+}
+
+export function wrapInAutoName(
+  magicString: MagicStringAST,
+  node: acorn.Node,
+  name: string,
+) {
+  magicString
+    .prependLeft(
+      node.start,
+      '((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(',
+    )
+    .appendRight(node.end, `, "${name}"))`);
+}
+
 export const kernelDirective = 'kernel';
 
 /** Regular expressions used for early pruning (to avoid unnecessary parsing, which is expensive) */

packages/unplugin-typegpu/src/index.ts

@@ -6,80 +6,21 @@ import { FORMAT_VERSION } from 'tinyest';
 import { transpileFn } from 'tinyest-for-wgsl';
 import { createUnplugin, type UnpluginInstance } from 'unplugin';
 import {
+  assignMetadata,
+  containsKernelDirective,
   type Context,
   defaultOptions,
   earlyPruneRegex,
   embedJSON,
+  type FunctionNode,
   gatherTgpuAliases,
   isShellImplementationCall,
-  kernelDirective,
   type Options,
   performExpressionNaming,
+  removeKernelDirective,
+  wrapInAutoName,
 } from './common.ts';
 
-type FunctionNode =
-  | acorn.FunctionDeclaration
-  | acorn.AnonymousFunctionDeclaration
-  | acorn.FunctionExpression
-  | acorn.ArrowFunctionExpression;
-
-function containsKernelDirective(node: FunctionNode): boolean {
-  if (node.body.type === 'BlockStatement') {
-    for (const statement of node.body.body) {
-      if (
-        statement.type === 'ExpressionStatement' &&
-        statement.directive === kernelDirective
-      ) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
-function removeKernelDirective(node: FunctionNode) {
-  const cloned = structuredClone(node);
-
-  if (cloned.body.type === 'BlockStatement') {
-    cloned.body.body = cloned.body.body.filter(
-      (statement) =>
-        !(
-          statement.type === 'ExpressionStatement' &&
-          statement.directive === kernelDirective
-        ),
-    );
-  }
-
-  return cloned;
-}
-
-function assignMetadata(
-  magicString: MagicStringAST,
-  node: acorn.AnyNode,
-  metadata: string,
-) {
-  magicString.prependLeft(
-    node.start,
-    '(($ => (globalThis.__TYPEGPU_META__ ??= new WeakMap()).set($.f = (',
-  ).appendRight(
-    node.end,
-    `), ${metadata}) && $.f)({}))`,
-  );
-}
-
-function wrapInAutoName(
-  magicString: MagicStringAST,
-  node: acorn.Node,
-  name: string,
-) {
-  magicString
-    .prependLeft(
-      node.start,
-      '((globalThis.__TYPEGPU_AUTONAME__ ?? (a => a))(',
-    )
-    .appendRight(node.end, `, "${name}"))`);
-}
-
 const typegpu: UnpluginInstance<Options, false> = createUnplugin(
   (rawOptions) => {
     const options = defu(rawOptions, defaultOptions);