feat: port WebGPU/RendererLike + construction firewall + fixes from next

.github/workflows/pkg-pr-new.yml

@@ -20,12 +20,15 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install --with-deps chromium
+
       - name: Typecheck
         run: pnpm lint:types
 

.gitignore

@@ -4,3 +4,7 @@ types
 node_modules
 demo/node_modules
 packed/
+
+# vitest browser mode
+.vitest-attachments/
+tests/**/__screenshots__/

package.json

@@ -80,7 +80,7 @@
     "@solidjs/router": "0.17.0-next.1",
     "@solidjs/testing-library": "^0.8.10",
     "@solidjs/web": "2.0.0-beta.10",
-    "@types/three": "^0.164.1",
+    "@types/three": "^0.181.0",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
     "dpdm": "^3.14.0",
@@ -95,14 +95,16 @@
     "eslint-plugin-no-only-tests": "^3.3.0",
     "jest": "^29.7.0",
     "jiti": "^2.5.1",
-    "jsdom": "^24.1.0",
+    "@vitest/browser": "^4.1.7",
+    "@vitest/browser-playwright": "^4.1.7",
+    "playwright": "^1.60.0",
     "prettier": "^3.8.3",
     "remark-gfm": "^3.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
     "solid-app-router": "^0.1.14",
     "solid-js": "2.0.0-beta.10",
-    "three": "^0.164.1",
+    "three": "^0.181.2",
     "three-stdlib": "^2.36.0",
     "tsm": "^2.3.0",
     "tsup": "^8.0.2",
@@ -112,7 +114,7 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-inspect": "0.8.4",
     "vite-plugin-solid": "next",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "@solidjs/signals": "*",

playground/controls/orbit-controls.tsx

@@ -46,7 +46,9 @@ export function OrbitControls(props: OrbitControlsProps) {
 
   useFrame(() => controls().update())
 
-  whenEffect(controls, controls => controls.connect(props.domElement ?? three.gl.domElement))
+  whenEffect(controls, controls =>
+    controls.connect(props.domElement ?? (three.gl.domElement as HTMLElement)),
+  )
 
   createEffect(
     () => ({ callback: config.onStart, _controls: controls() }),