[Typescript] Add types for world messages (like setGravity)

src/Provider.tsx

@@ -12,7 +12,9 @@ import CannonWorker from '../src/worker'
 import { useUpdateWorldPropsEffect } from './useUpdateWorldPropsEffect'
 
 import type { Buffers, Refs, Events, Subscriptions, ProviderContext } from './setup'
-import type { AtomicProps } from './hooks'
+import type { AtomicProps, Triplet } from './hooks'
+
+export type Broadphase = 'Naive' | 'SAP'
 
 export type ProviderProps = {
   children: React.ReactNode
@@ -23,8 +25,8 @@ export type ProviderProps = {
   iterations?: number
 
   allowSleep?: boolean
-  broadphase?: 'Naive' | 'SAP'
-  gravity?: number[]
+  broadphase?: Broadphase
+  gravity?: Triplet
   quatNormalizeFast?: boolean
   quatNormalizeSkip?: number
   solver?: 'GS' | 'Split'
@@ -303,7 +305,7 @@ export default function Provider({
     return () => worker.terminate()
   }, [])
 
-  useUpdateWorldPropsEffect({ worker, axisIndex, broadphase, gravity, iterations, step, tolerance })
+  useUpdateWorldPropsEffect({ axisIndex, broadphase, gravity, iterations, step, tolerance, worker })
 
   const api = useMemo(
     () => ({ worker, bodies, refs, buffers, events, subscriptions }),

src/setup.ts

@@ -1,6 +1,6 @@
 import type { RayOptions } from 'cannon-es'
 import type { Object3D } from 'three'
-import type { WorkerCollideEvent, WorkerRayhitEvent } from './Provider'
+import type { ProviderProps, WorkerCollideEvent, WorkerRayhitEvent } from './Provider'
 import type {
   AtomicProps,
   BodyProps,
@@ -71,7 +71,7 @@ export const vectorNames = [
 export type VectorName = typeof vectorNames[number]
 export type CannonVectorName = Exclude<VectorName, 'rotation'> | 'quaternion'
 
-export type SetOpName<T extends AtomicName | CannonVectorName> = `set${Capitalize<T>}`
+export type SetOpName<T extends AtomicName | CannonVectorName | WorldPropName> = `set${Capitalize<T>}`
 export type SubscriptionName = AtomicName | CannonVectorName | 'sliding'
 
 type Operation<T extends string, P> = { op: T } & (P extends void ? {} : { props: P })
@@ -206,6 +206,10 @@ type UnsubscribeMessage = Operation<'unsubscribe', number>
 
 type SubscriptionMessage = SubscribeMessage | UnsubscribeMessage
 
+export type WorldPropName = 'axisIndex' | 'broadphase' | 'gravity' | 'iterations' | 'step' | 'tolerance'
+
+type WorldMessage<T extends WorldPropName> = Operation<SetOpName<T>, Required<ProviderProps[T]>>
+
 type CannonMessage =
   | ApplyMessage
   | AtomicMessage
@@ -219,6 +223,7 @@ type CannonMessage =
   | SubscriptionMessage
   | VectorMessage
   | WakeUpMessage
+  | WorldMessage<WorldPropName>
 
 export interface CannonWorker extends Worker {
   postMessage: (message: CannonMessage) => void

src/useUpdateWorldPropsEffect.ts

@@ -1,24 +1,22 @@
 import { useEffect } from 'react'
 import type { ProviderProps } from './Provider'
+import type { CannonWorker, WorldPropName } from './setup'
 
-type useUpdateWorldPropsEffect = Pick<
-  ProviderProps,
-  'gravity' | 'tolerance' | 'step' | 'iterations' | 'broadphase' | 'axisIndex'
-> & { worker: Worker }
+type Props = Pick<Required<ProviderProps>, WorldPropName> & { worker: CannonWorker }
 
 export function useUpdateWorldPropsEffect({
-  worker,
+  axisIndex,
+  broadphase,
   gravity,
-  tolerance,
-  step,
   iterations,
-  broadphase,
-  axisIndex,
-}: useUpdateWorldPropsEffect) {
+  step,
+  tolerance,
+  worker,
+}: Props) {
+  useEffect(() => void worker.postMessage({ op: 'setAxisIndex', props: axisIndex }), [axisIndex])
+  useEffect(() => void worker.postMessage({ op: 'setBroadphase', props: broadphase }), [broadphase])
   useEffect(() => void worker.postMessage({ op: 'setGravity', props: gravity }), [gravity])
-  useEffect(() => void worker.postMessage({ op: 'setTolerance', props: tolerance }), [tolerance])
-  useEffect(() => void worker.postMessage({ op: 'setStep', props: step }), [step])
   useEffect(() => void worker.postMessage({ op: 'setIterations', props: iterations }), [iterations])
-  useEffect(() => void worker.postMessage({ op: 'setBroadphase', props: broadphase }), [broadphase])
-  useEffect(() => void worker.postMessage({ op: 'setAxisIndex', props: axisIndex }), [axisIndex])
+  useEffect(() => void worker.postMessage({ op: 'setStep', props: step }), [step])
+  useEffect(() => void worker.postMessage({ op: 'setTolerance', props: tolerance }), [tolerance])
 }