feat: Initial version of @typegpu/react

iwoplaza · iwoplaza · commit 3da3c4a4b256 · 2026-03-03T15:34:16.000+01:00
Adapt examples environment to allow for React examples Implemented stuff feat(@typegpu/react): Implement useUniformValue hook (#1694) Use callable schemas for initial value Move example to appropriate place Change 'kernel' to 'use gpu'
diff --git a/apps/typegpu-docs/package.json b/apps/typegpu-docs/package.json
@@ -31,6 +31,7 @@
     "@typegpu/concurrent-scan": "workspace:*",
     "@typegpu/geometry": "workspace:*",
     "@typegpu/noise": "workspace:*",
+    "@typegpu/react": "workspace:*",
     "@typegpu/sdf": "workspace:*",
     "@typegpu/three": "workspace:*",
     "@types/react": "^19.1.8",
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -66,20 +66,21 @@ function useExample(
 export function ExampleView({ example, common }: Props) {
   const { tsFiles: srcFiles, tsImport, htmlFile } = example;
 
-  const [snackbarText, setSnackbarText] = useAtom(currentSnackbarAtom);
-  const [currentFilePath, setCurrentFilePath] = useState<string>('index.ts');
-
-  const codeEditorShown = useAtomValue(codeEditorShownAtom);
-  const exampleHtmlRef = useRef<HTMLDivElement>(null);
-
   const tsFiles = filterRelevantTsFiles(srcFiles, common);
   const filePaths = tsFiles.map((file) => file.path);
+  const entryFile = filePaths.find((path) => path.startsWith('index.ts')) as string;
   const editorTabsList = [
-    'index.ts',
-    ...filePaths.filter((name) => name !== 'index.ts'),
+    entryFile,
+    ...filePaths.filter((name) => name !== entryFile),
     'index.html',
   ];
 
+  const [snackbarText, setSnackbarText] = useAtom(currentSnackbarAtom);
+  const [currentFilePath, setCurrentFilePath] = useState(entryFile);
+
+  const codeEditorShown = useAtomValue(codeEditorShownAtom);
+  const exampleHtmlRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (!exampleHtmlRef.current) {
       return;
diff --git a/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts b/apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts
@@ -5,6 +5,7 @@ import typegpuColorPackageJson from '@typegpu/color/package.json' with { type: '
 import typegpuNoisePackageJson from '@typegpu/noise/package.json' with { type: 'json' };
 import typegpuSdfPackageJson from '@typegpu/sdf/package.json' with { type: 'json' };
 import typegpuThreePackageJson from '@typegpu/three/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' };
 import pnpmWorkspace from '../../../../../pnpm-workspace.yaml?raw';
@@ -121,6 +122,7 @@ ${example.htmlFile.content}
       "@typegpu/color": "${typegpuColorPackageJson.version}",
       "@typegpu/sdf": "${typegpuSdfPackageJson.version}",
       "@typegpu/three": "${typegpuThreePackageJson.version}"
+      "@typegpu/react": "${typegpuReactPackageJson.version}"
     }
 }`,
         'vite.config.js': `\
diff --git a/apps/typegpu-docs/src/examples/exampleContent.ts b/apps/typegpu-docs/src/examples/exampleContent.ts
@@ -59,16 +59,16 @@ const metaFiles = R.pipe(
 );
 
 // Files that were generated by stripping away use of overloaded operators in .ts files
-// './<category>/<example>/<file>.tsnotover.ts'
-const exampleTsnotoverFiles = import.meta.glob('./*/*/*.tsnotover.ts', {
+// './<category>/<example>/<file>.tsnotover.tsx?'
+const exampleTsnotoverFiles = import.meta.glob(['./*/*/*.tsnotover.ts', './*/*/*.tsnotover.tsx'], {
   query: 'raw',
   eager: true,
   import: 'default',
 }) as Record<string, string>;
 
 const exampleTsFiles = R.pipe(
-  // './<category>/<example>/<file>.ts'
-  import.meta.glob('./*/*/*.ts', {
+  // './<category>/<example>/<file>.tsx?'
+  import.meta.glob(['./**/*.ts', './**/*.tsx'], {
     query: 'raw',
     eager: true,
     import: 'default',
@@ -87,7 +87,7 @@ const exampleTsFiles = R.pipe(
 );
 
 const tsFilesImportFunctions = R.pipe(
-  import.meta.glob('./**/index.ts') as Record<string, () => Promise<unknown>>,
+  import.meta.glob(['./**/index.ts', './**/index.tsx']) as Record<string, () => Promise<unknown>>,
   R.mapKeys(pathToExampleKey),
 );
 
diff --git a/apps/typegpu-docs/src/examples/react/triangle/index.html b/apps/typegpu-docs/src/examples/react/triangle/index.html
@@ -0,0 +1 @@
+<div id="example-app"></div>
diff --git a/apps/typegpu-docs/src/examples/react/triangle/index.tsx b/apps/typegpu-docs/src/examples/react/triangle/index.tsx
@@ -0,0 +1,38 @@
+import * as d from 'typegpu/data';
+import { useFrame, useRender, useUniformValue } from '@typegpu/react';
+import { hsvToRgb } from '@typegpu/color';
+
+function App() {
+  const time = useUniformValue(d.f32, 0);
+
+  useFrame(() => {
+    time.value = performance.now() / 1000;
+  });
+
+  const { ref } = useRender({
+    fragment: () => {
+      'use gpu';
+      const t = time.$;
+      const rgb = hsvToRgb(d.vec3f(t * 0.5, 1, 1));
+      return d.vec4f(rgb, 1);
+    },
+  });
+
+  return (
+    <main>
+      <canvas ref={ref} width="256" height="256" />
+    </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() {
+  setTimeout(() => reactRoot.unmount(), 0);
+}
+
+// #endregion
diff --git a/apps/typegpu-docs/src/examples/react/triangle/meta.json b/apps/typegpu-docs/src/examples/react/triangle/meta.json
@@ -0,0 +1,5 @@
+{
+  "title": "React: Spinning Triangle",
+  "category": "react",
+  "tags": ["experimental"]
+}
diff --git a/apps/typegpu-docs/src/examples/react/triangle/thumbnail.png b/apps/typegpu-docs/src/examples/react/triangle/thumbnail.png
diff --git a/apps/typegpu-docs/src/utils/examples/sandboxModules.ts b/apps/typegpu-docs/src/utils/examples/sandboxModules.ts
@@ -46,6 +46,18 @@ function dtsFileToModule(
   ] as const;
 }
 
+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 allPackagesSrcFiles = pipe(
   entries(
     import.meta.glob(
@@ -93,7 +105,11 @@ export const SANDBOX_MODULES: Record<string, SandboxModuleDefinition> = {
   ...allPackagesSrcFiles,
   ...threeModules,
   ...mediacaptureModules,
+  ...reactModules,
 
+  react: {
+    typeDef: { reroute: ['@types/react/index.d.ts'] },
+  },
   '@webgpu/types': {
     typeDef: { content: dtsWebGPU },
   },
@@ -144,4 +160,10 @@ export const SANDBOX_MODULES: Record<string, SandboxModuleDefinition> = {
   '@typegpu/three': {
     typeDef: { reroute: 'typegpu-three/src/index.ts' },
   },
+  '@typegpu/sdf': {
+    typeDef: { reroute: ['typegpu-sdf/src/index.ts'] },
+  },
+  '@typegpu/react': {
+    typeDef: { reroute: ['typegpu-react/src/index.ts'] },
+  },
 };
diff --git a/apps/typegpu-docs/src/utils/liveEditor/embeddedTypeScript.ts b/apps/typegpu-docs/src/utils/liveEditor/embeddedTypeScript.ts
@@ -10,5 +10,6 @@ export const tsCompilerOptions: languages.typescript.CompilerOptions = {
   skipLibCheck: true,
   exactOptionalPropertyTypes: true,
   baseUrl: '.',
+  jsx: languages.typescript.JsxEmit.React,
   lib: ['dom', 'es2021'],
 };
diff --git a/packages/typegpu-react/README.md b/packages/typegpu-react/README.md
@@ -0,0 +1,34 @@
+<div align="center">
+
+# @typegpu/react
+
+🚧 **Under Construction** 🚧
+
+</div>
+
+# Basic usage (draft)
+
+```ts
+import { hsvToRgb } from '@typegpu/color';
+import { useFrame, useRender, useUniformValue } from '@typegpu/react';
+
+const App = (props: Props) => {
+  const time = useUniformValue(d.f32, 0);
+  const color = useMirroredUniform(d.vec3f, props.color);
+
+  // Runs each frame on the CPU 🤖
+  useFrame(() => {
+    time.value = performance.now() / 1000;
+  });
+
+  const { ref } = useRender({
+    // Runs each frame on the GPU 🌈
+    fragment: ({ uv }) => {
+      'use gpu';
+      return hsvToRgb(time.$, uv.x, uv.y) * color.$;
+    },
+  });
+
+  return <canvas ref={ref} />;
+};
+```
diff --git a/packages/typegpu-react/deno.json b/packages/typegpu-react/deno.json
@@ -0,0 +1,7 @@
+{
+  "exclude": ["."],
+  "fmt": {
+    "exclude": ["!.", "./dist"],
+    "singleQuote": true
+  }
+}
diff --git a/packages/typegpu-react/package.json b/packages/typegpu-react/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@typegpu/react",
+  "version": "0.10.0",
+  "description": "The best way to integrate TypeGPU into your React app.",
+  "keywords": [],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "exports": {
+      "./package.json": "./dist/package.json",
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "linkDirectory": false,
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test:types": "pnpm tsc --p ./tsconfig.json --noEmit",
+    "prepublishOnly": "tgpu-dev-cli prepack"
+  },
+  "devDependencies": {
+    "@typegpu/tgpu-dev-cli": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@webgpu/types": "catalog:types",
+    "tsdown": "catalog:build",
+    "typegpu": "workspace:*",
+    "typescript": "catalog:types",
+    "unplugin-typegpu": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "typegpu": "^0.10.1"
+  }
+}
diff --git a/packages/typegpu-react/src/index.ts b/packages/typegpu-react/src/index.ts
@@ -0,0 +1,3 @@
+export { useFrame } from './use-frame.ts';
+export { useRender } from './use-render.ts';
+export { useUniformValue } from './use-uniform-value.ts';
diff --git a/packages/typegpu-react/src/root-context.tsx b/packages/typegpu-react/src/root-context.tsx
@@ -0,0 +1,46 @@
+import { createContext, type ReactNode, use, useContext, useState } from 'react';
+import tgpu, { type TgpuRoot } from 'typegpu';
+
+class RootContext {
+  #root: TgpuRoot | undefined;
+  #rootPromise: Promise<TgpuRoot> | undefined;
+
+  initOrGetRoot(): Promise<TgpuRoot> | TgpuRoot {
+    if (this.#root) {
+      return this.#root;
+    }
+
+    if (!this.#rootPromise) {
+      this.#rootPromise = tgpu.init().then((root) => {
+        this.#root = root;
+        return root;
+      });
+    }
+
+    return this.#rootPromise;
+  }
+}
+
+/**
+ * Used in case no provider is mounted
+ */
+const globalRootContextValue = new RootContext();
+
+const rootContext = createContext<RootContext | null>(null);
+
+export interface RootProps {
+  children?: ReactNode | undefined;
+}
+
+export const Root = ({ children }: RootProps) => {
+  const [ctx] = useState(() => new RootContext());
+
+  return <rootContext.Provider value={ctx}>{children}</rootContext.Provider>;
+};
+
+export function useRoot(): TgpuRoot {
+  const context = useContext(rootContext) ?? globalRootContextValue;
+
+  const maybeRoot = context.initOrGetRoot();
+  return maybeRoot instanceof Promise ? use(maybeRoot) : maybeRoot;
+}
diff --git a/packages/typegpu-react/src/use-frame.ts b/packages/typegpu-react/src/use-frame.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+export function useFrame(cb: () => void) {
+  const latestCb = useRef(cb);
+
+  useEffect(() => {
+    latestCb.current = cb;
+  }, [cb]);
+
+  useEffect(() => {
+    let frameId: number | undefined;
+
+    const loop = () => {
+      frameId = requestAnimationFrame(loop);
+      latestCb.current();
+    };
+
+    loop();
+
+    return () => {
+      if (frameId !== undefined) {
+        cancelAnimationFrame(frameId);
+      }
+    };
+  }, []);
+}
diff --git a/packages/typegpu-react/src/use-render.ts b/packages/typegpu-react/src/use-render.ts
diff --git a/packages/typegpu-react/src/use-uniform-value.ts b/packages/typegpu-react/src/use-uniform-value.ts
diff --git a/packages/typegpu-react/tsconfig.json b/packages/typegpu-react/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
