Make import error workaround more visible

#7

examples/r3f-zustand/src/control-kit/SphericalCamera.tsx → examples/r3f-zustand/src/Controls/TEMPORARY_control-kit/SphericalCamera.tsx

@@ -3,22 +3,20 @@ import { invalidate } from '@react-three/fiber'
 import { PerspectiveCamera } from '@react-three/drei'
 
 export const SphericalCamera = ({
-  origin = [0, 0, 0], // Target position
-  coords: [
-    r, // Distance to origin
-    theta, // Polar (up-down) angle
-    phi // Azimuthal (left-right) angle
-  ] = [0, 0, 0],
   makeDefault = true, // Make this the default three camera
   updateStream, // Stream of { origin, coords } updates
+  // TODO: Depreciate origin/coords in this type (hopefully we can recommend them in the future)
+  origin = [0, 0, 0], // Target position
+  coords = [0, 0, 0], // Camera rotation
   ...cameraProps
 }) => {
   const groupRef = useRef()
   const cameraRef = useRef()
+  // TODO: Show a development-mode console depreciation warning if `origin`/`coords` is truthy
   useEffect(
     () =>
-      // Take a stream of {origin,coords} updates and imperatively move camera.
-      // Escape hatch for bypassing the React update system (i.e. for animations).
+      // Subscribe to a stream of {origin,coords} updates and imperatively move camera.
+      // Escape hatch for bypassing React diffing.
       updateStream &&
       updateStream(({ origin, coords }) => {
         if (!groupRef.current || !cameraRef.current) return
@@ -31,8 +29,10 @@ export const SphericalCamera = ({
         }
         if (origin || coords) invalidate()
       }),
-    [updateStream, invalidate]
+    [updateStream, invalidate] // TODO: Invalidate probably shouldn't be a dependency
   )
+  const [r, theta, phi] = coords
+  // TODO: Use maths, not a <group> https://github.com/garbo-succus/control-kit/issues/6
   return (
     <group ref={groupRef} position={origin} rotation={[0, phi, theta]}>
       <PerspectiveCamera

examples/r3f-zustand/src/control-kit/dom.ts → examples/r3f-zustand/src/Controls/TEMPORARY_control-kit/dom.ts

@@ -1,12 +1,3 @@
-// Convert a PointerEvent "buttons" prop into an array of booleans
-export const bitmaskToArray = (i: number) => [
-  !!(i & 1),
-  !!(i & 2),
-  !!(i & 4),
-  !!(i & 8),
-  !!(i & 16)
-]
-
 // Add event listeners to a list of events on a target; return a function to remove them
 export const addEventListeners = (
   target: undefined | HTMLElement,
@@ -22,6 +13,15 @@ export const addEventListeners = (
     )
 }
 
+// Convert a PointerEvent "buttons" prop into an array of booleans
+export const bitmaskToArray = (i: number) => [
+  !!(i & 1),
+  !!(i & 2),
+  !!(i & 4),
+  !!(i & 8),
+  !!(i & 16)
+]
+
 // PreventDefault on a list of events
 export const addPreventDefaults = (
   target: undefined | HTMLElement,

examples/r3f-zustand/src/control-kit/index.ts → examples/r3f-zustand/src/Controls/TEMPORARY_control-kit/index.ts

@@ -1,5 +1,7 @@
-export { ControlRig } from './ControlRig'
+// DOM API
 export { bitmaskToArray, addEventListeners, addPreventDefaults } from './dom'
+export { ControlRig } from './ControlRig'
 
-export { SphericalCamera } from './SphericalCamera'
+// Camera API
 export { normalizeCoords, getScreenXY } from './camera'
+export { SphericalCamera } from './SphericalCamera'

examples/r3f-zustand/src/Controls/eventHandler.ts

@@ -1,4 +1,5 @@
-import { normalizeCoords, bitmaskToArray, getScreenXY } from '../control-kit'
+// TODO: Remove `TEMPORARY_control-kit` - https://github.com/garbo-succus/control-kit/issues/7
+import { normalizeCoords, bitmaskToArray, getScreenXY } from './TEMPORARY_control-kit'
 import { useCameraConfig, updateCamera } from './cameraState'
 
 export const eventHandler = (event) => {

examples/r3f-zustand/src/Controls/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { useThree } from '@react-three/fiber'
-import { ControlRig, SphericalCamera } from '../control-kit'
+// TODO: Remove `TEMPORARY_control-kit` - https://github.com/garbo-succus/control-kit/issues/7
+import { ControlRig, SphericalCamera } from './TEMPORARY_control-kit'
 import { useCamera, updateCamera } from './cameraState'
 import { eventHandler } from './eventHandler'
 

src/SphericalCamera.tsx

@@ -6,8 +6,8 @@ export const SphericalCamera = ({
   makeDefault = true, // Make this the default three camera
   updateStream, // Stream of { origin, coords } updates
   // TODO: Depreciate origin/coords in this type (hopefully we can recommend them in the future)
-  origin, // Target position
-  coords, // Camera rotation
+  origin = [0, 0, 0], // Target position
+  coords = [0, 0, 0], // Camera rotation
   ...cameraProps
 }) => {
   const groupRef = useRef()

src/index.ts

@@ -1,5 +1,7 @@
+// DOM API
 export { bitmaskToArray, addEventListeners, addPreventDefaults } from './dom'
 export { ControlRig } from './ControlRig'
 
-export { normalizeCoords } from './camera'
+// Camera API
+export { normalizeCoords, getScreenXY } from './camera'
 export { SphericalCamera } from './SphericalCamera'