fix: splint crashes

packages/mask/dashboard/components/SetupFrame/ParentSize.tsx

@@ -0,0 +1,69 @@
+// Modified version of
+// https://github.com/splinetool/react-spline/blob/main/src/ParentSize.tsx
+import { debounce } from 'lodash-es'
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+
+interface ParentSizeProps {
+    children: (
+        args: {
+            ref: HTMLDivElement | null
+            resize: (state: ParentSizeState) => void
+        } & ParentSizeState,
+    ) => React.ReactNode
+}
+
+type ParentSizeState = {
+    width: number
+    height: number
+    top: number
+    left: number
+}
+
+const defaultParentSizeStyles = { width: '100%', height: '100%' }
+
+export default forwardRef<HTMLDivElement, ParentSizeProps>(function ParentSize({ children }: ParentSizeProps, ref) {
+    const target = useRef<HTMLDivElement | null>(null)
+    const animationFrameID = useRef(0)
+
+    const [state, setState] = useState<ParentSizeState>({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    })
+
+    const resize = useMemo(() => debounce(setState, 50), [])
+
+    useEffect(() => {
+        const observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                const { left, top, width, height } = entry?.contentRect ?? {}
+                animationFrameID.current = window.requestAnimationFrame(() => {
+                    resize({ width, height, top, left })
+                })
+            })
+        })
+        if (target.current) observer.observe(target.current)
+
+        return () => {
+            window.cancelAnimationFrame(animationFrameID.current)
+            observer.disconnect()
+            resize.cancel()
+        }
+    }, [resize])
+
+    return (
+        <div
+            style={defaultParentSizeStyles}
+            ref={(r) => {
+                typeof ref === 'function' ? ref(r) : ref !== null && (ref.current = r)
+                target.current = r
+            }}>
+            {children({
+                ...state,
+                ref: target.current,
+                resize,
+            })}
+        </div>
+    )
+})

packages/mask/dashboard/components/SetupFrame/index.tsx

@@ -5,7 +5,7 @@ import { Welcome } from '../../assets/index.js'
 import { LoadingBase, makeStyles } from '@masknet/theme'
 import { Outlet } from 'react-router-dom'
 
-const Spline = lazy(() => import('@splinetool/react-spline'))
+const Spline = lazy(() => import('./spline.js'))
 interface SetupFrameProps {
     hiddenSpline?: boolean
 }

packages/mask/dashboard/components/SetupFrame/spline.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState, forwardRef } from 'react'
+import { Application } from '@splinetool/runtime'
+import ParentSize from './ParentSize.js'
+
+export interface SplineProps {
+    scene: string
+    onLoad?: (e: Application) => void
+}
+
+const Spline = forwardRef<HTMLDivElement, SplineProps>(({ scene, onLoad }, ref) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
+    const [isLoading, setIsLoading] = useState(true)
+
+    useEffect(() => {
+        setIsLoading(true)
+        let disposed = false
+        let speApp: Application
+        if (canvasRef.current) {
+            speApp = new Application(canvasRef.current)
+            async function init() {
+                await speApp.load(scene)
+                if (disposed) return
+                setIsLoading(false)
+                onLoad?.(speApp)
+            }
+            init()
+        }
+        return () => {
+            disposed = true
+            speApp.dispose()
+        }
+    }, [scene])
+
+    return (
+        <ParentSize ref={ref}>
+            {() => <canvas ref={canvasRef} style={{ display: isLoading ? 'none' : 'block' }} />}
+        </ParentSize>
+    )
+})
+
+export default Spline

packages/mask/package.json

@@ -98,7 +98,7 @@
     "@react-hookz/web": "^23.1.0",
     "@servie/events": "^3.0.0",
     "@sinonjs/text-encoding": "^0.7.2",
-    "@splinetool/react-spline": "2.2.6",
+    "@splinetool/runtime": "0.9.342",
     "@tanstack/query-async-storage-persister": "^5.29.1",
     "@tanstack/react-query-devtools": "^5.29.2",
     "@tanstack/react-query-persist-client": "^5.29.2",