From 009c97d5ecae1f320b30b2227bb768c947e36813 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=94?= <drcmda@gmail.com>
Date: Mon, 20 Jan 2025 11:41:45 +0100
Subject: [PATCH] types for webgpudemo

---
 example/package.json         |  1 +
 example/src/demos/WebGPU.tsx | 19 ++++++++++++++-----
 example/tsconfig.json        |  4 ++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/example/package.json b/example/package.json
index f4c41ff1f4..3610e6a809 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,6 +1,7 @@
 {
   "name": "example",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/example/src/demos/WebGPU.tsx b/example/src/demos/WebGPU.tsx
index 2222ebd757..8ff0a63f59 100644
--- a/example/src/demos/WebGPU.tsx
+++ b/example/src/demos/WebGPU.tsx
@@ -1,17 +1,26 @@
 import { useState, useMemo } from 'react'
-// @ts-ignore
 import * as THREE from 'three/webgpu'
-// @ts-ignore
 import { mix, positionLocal, sin, time, vec3, uniform, color } from 'three/tsl'
-import { Canvas, extend, useFrame } from '@react-three/fiber'
+import { ThreeElement, Canvas, extend, useFrame, ConstructorRepresentation } from '@react-three/fiber'
 import { easing } from 'maath'
 
+type ThreeExports = typeof THREE
+type ThreeElementsImpl = {
+  [K in keyof ThreeExports as Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation
+    ? ThreeElement<ThreeExports[K]>
+    : never
+}
+
+declare module '@react-three/fiber' {
+  interface ThreeElements extends ThreeElementsImpl {}
+}
+
 export default function App() {
   return (
     <Canvas
       gl={(props) => {
-        extend(THREE)
-        const renderer = new THREE.WebGPURenderer(props)
+        extend(THREE as any)
+        const renderer = new THREE.WebGPURenderer(props as any)
         return renderer.init().then(() => renderer)
       }}>
       <ambientLight intensity={Math.PI} />
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 14f47fd977..ccdeafff2e 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -8,8 +8,8 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,