Update packages; add TSX support

package.json

@@ -19,6 +19,7 @@
     "@types/lodash": "^4.14.177",
     "@types/ms": "^0.7.31",
     "@types/react": "^17.0.35",
+    "@types/styled-components": "^5.1.15",
     "axios": "^0.21.4",
     "babel-plugin-styled-components": "^1.13.3",
     "binary-parser": "^1.9.2",
@@ -35,9 +36,9 @@
     "react-reduce-motion": "^2.0.2",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
-    "react-spring": "^9.3.0",
+    "react-spring": "^9.3.1",
     "react-window": "^1.8.6",
-    "socket.io-client": "^4.3.2",
+    "socket.io-client": "^4.4.0",
     "styled-components": "^5.3.3",
     "url-join": "^4.0.1"
   },

src/components/viewer/ViewerPositionalOverlay.jsx → src/components/viewer/ViewerPositionalOverlay.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-
+import { Vector2 } from "@free-draw/moderation-client"
 import ViewerContext from "./ViewerContext"
 
 const ViewerPositionalOverlayElement = styled.div`
@@ -16,21 +16,28 @@ const ViewerPositionalOverlayElement = styled.div`
 	}
 `
 
-function ViewerPositionalOverlay(props) {
-	const { camera } = React.useContext(ViewerContext)
-	const ref = React.useRef()
+function ViewerPositionalOverlay(props: {
+	position: Vector2,
+	ignoreScale?: boolean,
+}) {
+	const context = React.useContext(ViewerContext)
+	if (!context) throw new Error("ViewerPositionalOverlay must be inside of a ViewerCanvas")
+	const { camera } = context
+
+	const ref = React.useRef() as React.RefObject<HTMLDivElement>
 
 	React.useEffect(() => {
-		const updatePosition = () => {
+		const onUpdate = () => {
 			const position = camera.position.inverse().add(props.position).multiplyScalar(camera.scale)
 			const scale = props.ignoreScale ? 1 : camera.scale
-			ref.current.style.transform = `translate(${position.x}px, ${position.y}px) scale(${scale})`
+			ref.current!.style.transform = `translate(${position.x}px, ${position.y}px) scale(${scale})`
 		}
 
-		updatePosition()
-
-		const listener = camera.on("update", updatePosition, { objectify: true })
-		return () => listener.off()
+		onUpdate()
+		camera.on("update", onUpdate)
+		return () => {
+			camera.off("update", onUpdate)
+		}
 	}, [ props.position, props.ignoreScale ])
 
 	return (

tsconfig.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"jsx": "react",
 		"strict": true,
 		"esModuleInterop": true,
 		"skipLibCheck": true,