docs: More rebust import helpers in examples and translator app

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

@@ -17,6 +17,9 @@ import { ControlPanel } from './ControlPanel.tsx';
 import { Button } from './design/Button.tsx';
 import { Snackbar } from './design/Snackbar.tsx';
 import { openInStackBlitz } from './stackblitz/openInStackBlitz.ts';
+import { importMap } from '../utils/importmap/importmap.ts';
+
+console.log(importMap());
 
 type Props = {
   example: Example;
@@ -171,9 +174,7 @@ export function ExampleView({ example }: Props) {
                 </div>
 
                 <div className='absolute right-0 z-5 md:top-15 md:right-8'>
-                  <Button
-                    onClick={() => openInStackBlitz(example)}
-                  >
+                  <Button onClick={() => openInStackBlitz(example)}>
                     <span className='font-bold'>Edit on</span>
                     <img
                       src='https://developer.stackblitz.com/img/logo/stackblitz-logo-black_blue.svg'

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

@@ -6,35 +6,7 @@ import type {
   ExampleSrcFile,
   ThumbnailPair,
 } from './types.ts';
-
-function extractUrlFromViteImport(
-  importFn: () => void,
-): [URL | undefined, boolean] {
-  const filePath = String(importFn);
-  const match = filePath.match(/\(\)\s*=>\s*import\("([^"]+)"\)/);
-
-  if (match?.[1]) {
-    const isRelative = match[1].startsWith('./');
-    return [new URL(match[1], window.location.origin), isRelative];
-  }
-
-  return [undefined, false];
-}
-
-function noCacheImport<T>(
-  importFn: () => Promise<T>,
-): Promise<T> {
-  const [url, isRelative] = extractUrlFromViteImport(importFn);
-
-  if (!url) {
-    throw new Error(`Could not no-cache-import using ${importFn}`);
-  }
-
-  url.searchParams.append('update', Date.now().toString());
-  return import(
-    /* @vite-ignore */ `${isRelative ? '.' : ''}${url.pathname}${url.search}`
-  );
-}
+import { noCacheImport } from '../import-helpers.ts';
 
 const contentExamplesPath = '../../content/examples/';
 
@@ -135,7 +107,7 @@ export const examples = R.pipe(
         key,
         metadata: value,
         tsFiles: readonlyTsFiles[key] ?? [],
-        tsImport: () => noCacheImport(tsFilesImportFunctions[key]),
+        tsImport: () => noCacheImport(tsFilesImportFunctions[key], import.meta.url),
         htmlFile: htmlFiles[key]?.[0] ?? '',
         thumbnails: thumbnailFiles[key],
       }) satisfies Example,

apps/typegpu-docs/src/utils/import-helpers.ts

@@ -0,0 +1,29 @@
+/**
+ * Extracts the imported URL as-in
+ */
+export function extractUrlFromViteImport(
+  importFn: () => void,
+): string | undefined {
+  const match = String(importFn).match(/import\(["']([^"']+)["']\)/);
+
+  if (match?.[1]) {
+    return match[1];
+  }
+
+  return undefined;
+}
+
+export function noCacheImport<T>(
+  importFn: () => Promise<T>,
+  baseUrl?: string,
+): Promise<T> {
+  const href = extractUrlFromViteImport(importFn);
+
+  if (!href) {
+    throw new Error(`Could not no-cache-import using ${importFn}`);
+  }
+
+  const url = new URL(href, baseUrl);
+  url.searchParams.append('update', Date.now().toString());
+  return import(/* @vite-ignore */ url.href);
+}

apps/typegpu-docs/src/utils/importmap/importmap.ts

@@ -0,0 +1,53 @@
+import { extractUrlFromViteImport } from '../import-helpers.ts';
+
+function importToUrl(importFn: () => unknown, options: { hasDefaultExport?: boolean }): string {
+  const href = extractUrlFromViteImport(importFn);
+  if (!href) {
+    throw new Error(`Could not retrieve URL from import: ${importFn}`);
+  }
+  const absoluteUrl = new URL(href, import.meta.url);
+  const importFnCode = String(importFn);
+  console.log(absoluteUrl.href, importFnCode);
+  let interModuleCode: string;
+  // For some reason, Vite introduces indirection when importing some
+  // modules (e.g. "typegpu", but not "typegpu/data")
+  // The following conditions are meant to work around these
+  // code transformations.
+  if (importFnCode.includes('.then')) {
+    // The import code resembles something like:
+    // () => import(...).then(foo=>foo.bar)
+    const indirectionProperty = '???';
+    interModuleCode = `\
+import mod from '${absoluteUrl.href}'
+export 
+`;
+    if (options.hasDefaultExport) {
+      interModuleCode += '';
+    }
+    // interModuleCode = `...`;
+  } else {
+    interModuleCode = '';
+  }
+
+  // console.log(interModuleCode);
+
+  const userBlob = new Blob([interModuleCode], { type: 'text/javascript' });
+  const userModuleUrl = URL.createObjectURL(userBlob);
+
+  // const module = await import(userModuleUrl);
+
+  // URL.revokeObjectURL(userModuleUrl);
+  // return module;
+
+  // console.log(userModuleUrl);
+
+  return userModuleUrl;
+}
+
+export function importMap(): Record<string, string> {
+  return {
+    'typegpu': importToUrl(() => import('./typegpu-reexport.ts'), { hasDefaultExport: true }),
+    'typegpu/data': importToUrl(() => import('./typegpu-data-reexport.ts'), {}),
+    'typegpu/std': importToUrl(() => import('./typegpu-std-reexport.ts'), {}),
+  };
+}

apps/typegpu-docs/src/utils/importmap/typegpu-data-reexport.ts

@@ -0,0 +1 @@
+export * from 'typegpu/data';

apps/typegpu-docs/src/utils/importmap/typegpu-reexport.ts

@@ -0,0 +1,2 @@
+export * from 'typegpu';
+export { default } from 'typegpu';

apps/typegpu-docs/src/utils/importmap/typegpu-std-reexport.ts

@@ -0,0 +1 @@
+export * from 'typegpu/std';