Adapt examples environment to allow for React examples

Author: iwoplaza

apps/typegpu-docs/package.json

@@ -27,6 +27,7 @@
     "@typegpu/color": "workspace:*",
     "@typegpu/noise": "workspace:*",
     "@typegpu/sdf": "workspace:*",
+    "@typegpu/react": "workspace:*",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "arktype": "catalog:",

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

@@ -69,17 +69,21 @@ function useExample(
 export function ExampleView({ example }: Props) {
   const { tsFiles, tsImport, htmlFile } = example;
 
+  const filePaths = tsFiles.map((file) => file.path);
+  const entryFile = filePaths.find((path) =>
+    path.startsWith('index.ts')
+  ) as string;
+
   const [snackbarText, setSnackbarText] = useAtom(currentSnackbarAtom);
-  const [currentFilePath, setCurrentFilePath] = useState<string>('index.ts');
+  const [currentFilePath, setCurrentFilePath] = useState(entryFile);
 
   const codeEditorShowing = useAtomValue(codeEditorShownAtom);
   const codeEditorMobileShowing = useAtomValue(codeEditorShownMobileAtom);
   const exampleHtmlRef = useRef<HTMLDivElement>(null);
 
-  const filePaths = tsFiles.map((file) => file.path);
   const editorTabsList = [
-    'index.ts',
-    ...filePaths.filter((name) => name !== 'index.ts'),
+    entryFile,
+    ...filePaths.filter((name) => name !== entryFile),
     'index.html',
   ];
 

apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts

@@ -10,7 +10,12 @@ import typegpuNoisePackageJson from '@typegpu/noise/package.json' with {
 import typegpuSdfPackageJson from '@typegpu/sdf/package.json' with {
   type: 'json',
 };
-import typegpuPackageJson from 'typegpu/package.json' with { type: 'json' };
+import typegpuReactPackageJson from '@typegpu/react/package.json' with {
+  type: 'json',
+};
+import typegpuPackageJson from 'typegpu/package.json' with {
+  type: 'json',
+};
 import unpluginPackageJson from 'unplugin-typegpu/package.json' with {
   type: 'json',
 };
@@ -128,6 +133,7 @@ ${example.htmlFile.content}
       "@typegpu/noise": "${typegpuNoisePackageJson.version}",
       "@typegpu/color": "${typegpuColorPackageJson.version}",
       "@typegpu/sdf": "${typegpuSdfPackageJson.version}"
+      "@typegpu/react": "${typegpuReactPackageJson.version}"
     }
 }`,
         'vite.config.js': `\

apps/typegpu-docs/src/content/examples/react/triangle/index.html

@@ -0,0 +1 @@
+<div id='example-app'></div>

apps/typegpu-docs/src/content/examples/react/triangle/index.tsx

@@ -0,0 +1,20 @@
+function App() {
+  // TODO: Use useRender to draw a full-screen gradient
+  // TODO: Provide a time variable to the shader with useUniformValue
+  // TODO: Make the gradient shift colors over time using hsvToRgb from @typegpu/color
+  return <main>Hello</main>;
+}
+
+// #region Example controls and cleanup
+
+import { createRoot } from 'react-dom/client';
+const reactRoot = createRoot(
+  document.getElementById('example-app') as HTMLDivElement,
+);
+reactRoot.render(<App />);
+
+export function onCleanup() {
+  reactRoot.unmount();
+}
+
+// #endregion

apps/typegpu-docs/src/content/examples/react/triangle/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "React: Spinning Triangle",
+  "category": "react",
+  "tags": ["experimental"]
+}

apps/typegpu-docs/src/content/examples/react/triangle/thumbnail.png

@@ -82,7 +82,10 @@ const metaFiles = R.pipe(
 );
 
 const readonlyTsFiles = R.pipe(
-  import.meta.glob('../../content/examples/**/*.ts', {
+  import.meta.glob([
+    '../../content/examples/**/*.ts',
+    '../../content/examples/**/*.tsx',
+  ], {
     query: 'raw',
     eager: true,
     import: 'default',
@@ -91,7 +94,10 @@ const readonlyTsFiles = R.pipe(
 );
 
 const tsFilesImportFunctions = R.pipe(
-  import.meta.glob('../../content/examples/**/index.ts') as Record<
+  import.meta.glob([
+    '../../content/examples/**/index.ts',
+    '../../content/examples/**/index.tsx',
+  ]) as Record<
     string,
     () => Promise<unknown>
   >,

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

@@ -36,6 +36,21 @@ const allPackagesSrcFiles = pipe(
   fromEntries(),
 );
 
+const reactModules = pipe(
+  entries(
+    import.meta.glob(
+      '../../../node_modules/@types/react/**/*.d.ts',
+      {
+        query: 'raw',
+        eager: true,
+        import: 'default',
+      },
+    ) as Record<string, string>,
+  ),
+  map((dtsFile) => dtsFileToModule(dtsFile, '../../../node_modules/')),
+  fromEntries(),
+);
+
 const mediacaptureModules = pipe(
   entries(
     import.meta.glob(
@@ -54,7 +69,11 @@ const mediacaptureModules = pipe(
 export const SANDBOX_MODULES: Record<string, SandboxModuleDefinition> = {
   ...allPackagesSrcFiles,
   ...mediacaptureModules,
+  ...reactModules,
 
+  'react': {
+    typeDef: { reroute: ['@types/react/index.d.ts'] },
+  },
   '@webgpu/types': {
     typeDef: { content: dtsWebGPU },
   },
@@ -78,4 +97,10 @@ export const SANDBOX_MODULES: Record<string, SandboxModuleDefinition> = {
   '@typegpu/color': {
     typeDef: { reroute: ['typegpu-color/src/index.ts'] },
   },
+  '@typegpu/sdf': {
+    typeDef: { reroute: ['typegpu-sdf/src/index.ts'] },
+  },
+  '@typegpu/react': {
+    typeDef: { reroute: ['typegpu-react/src/index.ts'] },
+  },
 };

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

@@ -10,5 +10,6 @@ export const tsCompilerOptions: languages.typescript.CompilerOptions = {
   skipLibCheck: true,
   exactOptionalPropertyTypes: true,
   baseUrl: '.',
+  jsx: languages.typescript.JsxEmit.React,
   lib: ['dom', 'es2021'],
 };