Use typegpu from source

Author: iwoplaza

apps/typegpu-docs/src/components/CodeEditor.tsx

@@ -17,7 +17,7 @@ function handleEditorWillMount(monaco: Monaco) {
     entries(SANDBOX_MODULES),
     map(([key, moduleDef]) => {
       if ('reroute' in moduleDef.typeDef) {
-        return [key, moduleDef.typeDef.reroute] as const;
+        return [key, [moduleDef.typeDef.reroute]] as [string, string[]];
       }
       return null;
     }),

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

@@ -44,7 +44,7 @@ export function setupMonacoEditor(monaco: Monaco) {
     entries(SANDBOX_MODULES),
     map(([key, moduleDef]) => {
       if ('reroute' in moduleDef.typeDef) {
-        return [key, moduleDef.typeDef.reroute] as const;
+        return [key, [moduleDef.typeDef.reroute]] as [string, string[]];
       }
       return null;
     }),

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

@@ -1,5 +1,5 @@
 import type { InputOptions, OutputOptions } from '@rolldown/browser';
-import { resolve } from 'pathe';
+import { join } from 'pathe';
 
 export interface BundleResult {
   output: Record<string, string | Uint8Array>;
@@ -12,7 +12,14 @@ export interface SourceFile {
   isEntry?: boolean;
 }
 
-export type FileMap = Record<string, string>;
+export type FileMap = Record<
+  string,
+  {
+    content: string;
+  } | {
+    reroute: string;
+  } | undefined
+>;
 
 export async function bundle(
   files: FileMap,
@@ -39,18 +46,32 @@ export async function bundle(
       {
         name: 'virtual-fs',
         resolveId(source, importer) {
-          if (source[0] === '/') {
-            // Absolute import
-            return source;
+          if (source.includes('typegpu') || importer?.includes('typegpu')) {
+            debug = true;
           }
-          if (source[0] === '.') {
-            // Relative import
-            return resolve(importer || '/', '..', source);
+
+          const id = source[0] === '.'
+            ? join(importer || '/', '..', source)
+            : source;
+
+          if (files[id] && 'reroute' in files[id]) {
+            // Rerouting
+            return files[id].reroute;
           }
+
+          return id;
         },
         load(id) {
-          if (id[0] !== '/') return;
-          return files[id];
+          if (!files[id]) {
+            return;
+          }
+
+          if ('reroute' in files[id]) {
+            // Reroutes are supposed to be resolved in `resolveId`
+            throw new Error(`Unresolved reroute for ${id}`);
+          }
+
+          return files[id].content;
         },
       },
       ...(Array.isArray(config?.plugins)

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

@@ -1,29 +1,33 @@
+import { mapValues, pipe } from 'remeda';
 import rolldownPlugin from 'unplugin-typegpu/rolldown-browser';
 import { bundle } from './rolldown.ts';
+import { SANDBOX_MODULES } from '../../../utils/examples/sandboxModules.ts';
 
 const moduleImports = {
-  'typegpu': 'https://esm.sh/typegpu@latest/?bundle=false',
-  'typegpu/data': 'https://esm.sh/typegpu@latest/data/?bundle=false',
-  'typegpu/std': 'https://esm.sh/typegpu@latest/std/?bundle=false',
+  'typed-binary': 'https://esm.sh/typed-binary@latest',
 } as Record<string, string>;
 
 type TgslModule = Record<string, unknown>;
 
 async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
   const result = await bundle(
     {
-      '/shader.js': tgslCode,
-      '/index.ts': `
-        import tgpu from 'typegpu';
-        import * as exports from './shader.js';
+      ...pipe(SANDBOX_MODULES, mapValues((val) => val.import)),
+      '/shader.js': { content: tgslCode },
+      '/index.ts': {
+        content: `
+          import tgpu from 'typegpu';
+          import * as exports from './shader.js';
 
-        const shaderCode = tgpu.resolve({ externals: exports });
-        export default shaderCode;
-      `,
+          const shaderCode = tgpu.resolve({ externals: exports });
+          export default shaderCode;
+        `,
+      },
     },
     ['./index.ts'],
     {
       plugins: [rolldownPlugin({})],
+      external: ['typed-binary'],
     },
   );
 
@@ -40,7 +44,7 @@ async function executeTgslModule(tgslCode: string): Promise<TgslModule> {
     const userBlob = new Blob([output], { type: 'text/javascript' });
     const userModuleUrl = URL.createObjectURL(userBlob);
 
-    const module = await import(userModuleUrl);
+    const module = await import(/* @vite-ignore */ userModuleUrl);
 
     URL.revokeObjectURL(userModuleUrl);
     return module;

apps/typegpu-docs/src/utils/examples/sandboxModules.ts

@@ -4,7 +4,32 @@ import dtsWebGPU from '@webgpu/types/dist/index.d.ts?raw';
 import dtsWgpuMatrix from 'wgpu-matrix/dist/3.x/wgpu-matrix.d.ts?raw';
 
 interface SandboxModuleDefinition {
-  typeDef: { filename?: string; content: string } | { reroute: string[] };
+  typeDef:
+    | { filename?: string; content: string }
+    | { reroute: string };
+  import?:
+    | { filename?: string; content: string }
+    | { reroute: string }
+    | undefined;
+}
+
+function srcFileToModule(
+  [filepath, content]: [string, string],
+  baseUrl: string,
+): [moduleKey: string, moduleDef: SandboxModuleDefinition] {
+  const filename = filepath.replace(baseUrl, '');
+  const def = {
+    filename,
+    content,
+  };
+
+  return [
+    filename,
+    {
+      typeDef: def,
+      import: def,
+    },
+  ] as const;
 }
 
 function dtsFileToModule(
@@ -26,13 +51,16 @@ function dtsFileToModule(
 
 const allPackagesSrcFiles = pipe(
   entries(
-    import.meta.glob('../../../../../packages/*/src/**/*.ts', {
+    import.meta.glob([
+      '../../../../../packages/*/src/**/*.ts',
+      '../../../../../packages/*/package.json',
+    ], {
       query: 'raw',
       eager: true,
       import: 'default',
     }) as Record<string, string>,
   ),
-  map((dtsFile) => dtsFileToModule(dtsFile, '../../../../../packages/')),
+  map((dtsFile) => srcFileToModule(dtsFile, '../../../../../packages/')),
   fromEntries(),
 );
 
@@ -61,21 +89,30 @@ export const SANDBOX_MODULES: Record<string, SandboxModuleDefinition> = {
   'wgpu-matrix': {
     typeDef: { filename: 'wgpu-matrix.d.ts', content: dtsWgpuMatrix },
   },
+  tinyest: {
+    import: { reroute: 'tinyest/src/index.ts' },
+    typeDef: { reroute: 'tinyest/src/index.ts' },
+  },
   typegpu: {
-    typeDef: { reroute: ['typegpu/src/index.ts'] },
+    import: { reroute: 'typegpu/src/index.ts' },
+    typeDef: { reroute: 'typegpu/src/index.ts' },
   },
   'typegpu/data': {
-    typeDef: { reroute: ['typegpu/src/data/index.ts'] },
+    import: { reroute: 'typegpu/src/data/index.ts' },
+    typeDef: { reroute: 'typegpu/src/data/index.ts' },
   },
   'typegpu/std': {
-    typeDef: { reroute: ['typegpu/src/std/index.ts'] },
+    import: { reroute: 'typegpu/src/std/index.ts' },
+    typeDef: { reroute: 'typegpu/src/std/index.ts' },
   },
 
   // Utility modules
   '@typegpu/noise': {
-    typeDef: { reroute: ['typegpu-noise/src/index.ts'] },
+    import: { reroute: 'typegpu-noise/src/index.ts' },
+    typeDef: { reroute: 'typegpu-noise/src/index.ts' },
   },
   '@typegpu/color': {
-    typeDef: { reroute: ['typegpu-color/src/index.ts'] },
+    import: { reroute: 'typegpu-color/src/index.ts' },
+    typeDef: { reroute: 'typegpu-color/src/index.ts' },
   },
 };