chore(demos): cleanup SVGRenderer

example/package.json

@@ -13,10 +13,9 @@
     "@use-gesture/react": "latest",
     "react": "19.0.0-beta-94eed63c49-20240425",
     "react-dom": "19.0.0-beta-94eed63c49-20240425",
-    "react-merge-refs": "^2.1.1",
     "react-use-refs": "^1.0.1",
     "three": "^0.160.0",
-    "three-stdlib": "^2.29.1",
+    "three-stdlib": "^2.29.8",
     "use-error-boundary": "^2.0.6",
     "wouter": "^2.12.1",
     "zustand": "^4.4.7"

example/src/demos/SVGRenderer.tsx

@@ -1,16 +1,6 @@
 import * as THREE from 'three'
-import React, { useRef, useState } from 'react'
-import {
-  RenderProps,
-  extend,
-  createRoot,
-  unmountComponentAtNode,
-  useFrame,
-  events,
-  ReconcilerRoot,
-} from '@react-three/fiber'
-import useMeasure, { Options as ResizeOptions } from 'react-use-measure'
-import mergeRefs from 'react-merge-refs'
+import React, { useEffect, useRef, useState } from 'react'
+import { useFrame, Canvas } from '@react-three/fiber'
 import { SVGRenderer } from 'three-stdlib'
 
 function TorusKnot() {
@@ -28,48 +18,21 @@ function TorusKnot() {
   )
 }
 
+const gl = new SVGRenderer()
+gl.domElement.style.position = 'absolute'
+gl.domElement.style.top = 0
+gl.domElement.style.left = 0
+
 export default function () {
+  useEffect(() => {
+    document.body.appendChild(gl.domElement)
+    return () => document.body.removeChild(gl.domElement)
+  }, [])
+
   return (
-    <Canvas camera={{ position: [0, 0, 50] }}>
+    <Canvas gl={gl} camera={{ position: [0, 0, 50] }} eventSource={gl.domElement}>
       <color attach="background" args={['#dedddf']} />
       <TorusKnot />
     </Canvas>
   )
 }
-
-interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'gl'>, React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-  resize?: ResizeOptions
-}
-
-function Canvas({ children, resize, style, className, ...props }: Props) {
-  React.useMemo(() => extend(THREE), [])
-
-  const [bind, size] = useMeasure({ scroll: true, debounce: { scroll: 50, resize: 0 }, ...resize })
-  const ref = React.useRef<HTMLDivElement>(null!)
-  const [gl] = useState(() => new SVGRenderer() as unknown as THREE.WebGLRenderer)
-  const root = React.useRef<ReconcilerRoot<HTMLElement>>(null!)
-
-  if (size.width > 0 && size.height > 0) {
-    if (!root.current) root.current = createRoot<HTMLElement>(ref.current)
-    root.current.configure({ ...props, size, events, gl })
-    root.current.render(children)
-  }
-
-  React.useEffect(() => {
-    const container = ref.current
-    container.appendChild(gl.domElement)
-    return () => {
-      container.removeChild(gl.domElement)
-      unmountComponentAtNode(container)
-    }
-  }, [])
-
-  return (
-    <div
-      ref={mergeRefs([ref, bind])}
-      className={className}
-      style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', ...style }}
-    />
-  )
-}

yarn.lock

@@ -8948,11 +8948,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-merge-refs@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-2.1.1.tgz#e46763f8f1b881c0226ee54a1a2a10ffefba0233"
-  integrity sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==
-
 react-native-codegen@^0.69.1:
   version "0.69.2"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.69.2.tgz#e33ac3b1486de59ddae687b731ddbfcef8af0e4e"
@@ -10159,7 +10154,7 @@ three-mesh-bvh@^0.7.0:
   resolved "https://registry.yarnpkg.com/three-mesh-bvh/-/three-mesh-bvh-0.7.3.tgz#91f2d7e26f230288b5b0a6bdf41bdd9620348945"
   integrity sha512-3W6KjzmupjfE89GuHPT31kxKWZ4YGZPEZJNysJpiOZfQRsBQQgmK7v/VJPpjG6syhAvTnY+5Fr77EvIkTLpGSw==
 
-three-stdlib@^2.13.0, three-stdlib@^2.29.1, three-stdlib@^2.29.4:
+three-stdlib@^2.13.0, three-stdlib@^2.29.4:
   version "2.29.6"
   resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.29.6.tgz#d1d17a7e5d48921ebb3aed9f5131bb85968e4d29"
   integrity sha512-nj9bHkzhhwfmqQcM/keC2RDb0bHhbw6bRXTy81ehzi8F1rtp6pJ5eS0/vl1Eg5RMFqXOMyxJ6sDHPoLU+IrVZg==
@@ -10171,6 +10166,18 @@ three-stdlib@^2.13.0, three-stdlib@^2.29.1, three-stdlib@^2.29.4:
     fflate "^0.6.9"
     potpack "^1.0.1"
 
+three-stdlib@^2.29.8:
+  version "2.29.8"
+  resolved "https://registry.yarnpkg.com/three-stdlib/-/three-stdlib-2.29.8.tgz#d2aebed6bb12451ccf69d7ff3aaed22ff6df98dd"
+  integrity sha512-macJJjnrWlLnQ3S0u+iHDSIPvgUOGtBKAk0rlcDxKP1q8RvxkVm2LBGyBfjVcmz8kzwTWYuOuk300rqcMMHS7w==
+  dependencies:
+    "@types/draco3d" "^1.4.0"
+    "@types/offscreencanvas" "^2019.6.4"
+    "@types/webxr" "^0.5.2"
+    draco3d "^1.4.1"
+    fflate "^0.6.9"
+    potpack "^1.0.1"
+
 three@^0.141.0:
   version "0.141.0"
   resolved "https://registry.yarnpkg.com/three/-/three-0.141.0.tgz#16677a12b9dd0c3e1568ebad0fd09de15d5a8216"