split up debug & physics context / providers (#362)

## @react-three/cannon

- Access the physics context with the `usePhysicsContext` hook, which immediately gives you a clear error message when trying to access physics components or hooks outside of a Physics provider.
- Renamed `context` to `physicsContext`
- Added a `useDebugContext` hook for consistency
- [`Provider.tsx`] Renamed to `physics-provider.tsx`
- [`Debug.tsx`] Renamed to `debug-provider.tsx` (Still exported as Debug & DebugProps)
- [`physics-provider.tsx`] One useState call that contains the whole context
- [`physics-provider.tsx`] bodies is not a ref, no need to access current
- [`setup.ts`] Removed, split into more appropriately named modules
- [`worker.d.ts`] Removed, belongs in cannon-worker-api
- [`package.json`] Use dependencies rather than peerDependencies
- [`.eslintrc.json`] Clean up
- [`.eslintrc.json`] Disallow non-null assertions

## @pmndrs/cannon-worker-api

- [WorkerRayHitEvent] from & to are optional
- [WorkerRayHitEvent] Omit methods from shape type
- [`src/worker`] self.postMessage should be typed to ensure we match API types
- [`src/worker`] Stop using non-null assertions
- [`addBodies`] If the body or target does not have a uuid, don't process the event
- [`addRay`] If the body does not have a uuid, don't process the event
- [`package.json`] Has one dependency: `three`
- [`.eslintrc.json`] Clean up
- [`.eslintrc.json`] Disallow non-null assertions

## @react-three/cannon-examples

- [MondayMorning] Don't use non-null assertions
- [`.eslintrc.json`] Clean up
- [`.eslintrc.json`] Disallow non-null assertions
- [`package.json`] Only devDependencies
- [`tsconfig.json`] Alphabetize

## @pmndrs/use-cannon

- [`package.json`] Add .json, .jsx, & .tsx to lint-staged files
- [`yarn.lock`] Updated dependencies

Author: bjornstar

package.json

@@ -27,8 +27,8 @@
     "npm": ">=8"
   },
   "lint-staged": {
-    "*.{js,ts}": "eslint --cache --fix",
-    "*.{js,ts,md}": "prettier --write"
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+    "*.{js,jsx,json,md,ts,tsx}": "prettier --write"
   },
   "scripts": {
     "build": "npm run build --workspaces",

packages/cannon-worker-api/.eslintrc.json

@@ -3,7 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["prettier", "eslint:recommended"],
+  "extends": ["eslint:recommended", "prettier"],
   "overrides": [
     {
       "extends": "plugin:@typescript-eslint/recommended",
@@ -56,7 +56,7 @@
           }
         ],
         "@typescript-eslint/no-namespace": ["error", { "allowDeclarations": true }],
-        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-non-null-assertion": "error",
         "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
         "@typescript-eslint/quotes": [
           "error",
@@ -69,9 +69,6 @@
         "@typescript-eslint/semi": ["error", "never"],
         "typescript-enum/no-enum": "error"
       }
-    },
-    {
-      "files": ["*.jsx", "*.js"]
     }
   ],
   "parserOptions": {

packages/cannon-worker-api/package.json

@@ -29,8 +29,6 @@
     "prettier-fix": "prettier --write ."
   },
   "dependencies": {
-    "cannon-es": "^0.19.0",
-    "events": "^3.3.0",
     "three": "^0.137.0"
   },
   "devDependencies": {
@@ -45,11 +43,13 @@
     "@types/three": "^0.137.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
+    "cannon-es": "^0.19.0",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-typescript-enum": "^2.1.0",
+    "events": "^3.3.0",
     "prettier": "^2.5.1",
     "rollup": "^2.61.1",
     "rollup-plugin-web-worker-loader": "^1.6.1",

packages/cannon-worker-api/rollup.config.js

@@ -3,6 +3,7 @@ import pluginCommonjs from '@rollup/plugin-commonjs'
 import pluginNodeResolve from '@rollup/plugin-node-resolve'
 import pluginWebWorker from 'rollup-plugin-web-worker-loader'
 
+// These are our dependencies, everything else is in the bundle
 const external = ['three']
 const extensions = ['.js', '.ts', '.json']
 

packages/cannon-worker-api/src/types.ts

@@ -245,13 +245,18 @@ export type WorkerRayhitEvent = {
       collisionFilterGroup: number
       collisionFilterMask: number
       direction: number[]
-      from: number[]
-      to: number[]
+      from?: Triplet
+      to?: Triplet
       uuid: string
     }
-    rayFromWorld: number[]
-    rayToWorld: number[]
-    shape: (Omit<Shape, 'body'> & { body: string }) | null
+    rayFromWorld: Triplet
+    rayToWorld: Triplet
+    shape:
+      | (Omit<
+          Shape,
+          'body' | 'updateBoundingSphereRadius' | 'volume' | 'calculateLocalInertia' | 'calculateWorldAABB'
+        > & { body: string })
+      | null
     shouldStop: boolean
     type: 'rayhit'
   }

packages/cannon-worker-api/src/worker/index.ts

@@ -11,13 +11,17 @@ import { addBodies, addConstraint, addRay, addRaycastVehicle, addSpring, init, s
 import { state } from './state'
 import type { CannonWorkerGlobalScope } from './types'
 
+// TODO: Declare this for all files in worker
 declare const self: CannonWorkerGlobalScope
 
 const isHingeConstraint = (c: unknown): c is HingeConstraint => c instanceof HingeConstraint
 
 function syncBodies() {
   state.bodiesNeedSyncing = true
-  state.bodies = state.world.bodies.reduce((bodies, body) => ({ ...bodies, [body.uuid!]: body }), {})
+  state.bodies = state.world.bodies.reduce(
+    (bodies, body) => (body.uuid ? { ...bodies, [body.uuid]: body } : bodies),
+    {},
+  )
 }
 
 const broadphases = { NaiveBroadphase, SAPBroadphase }

packages/cannon-worker-api/src/worker/operations/add-bodies.ts

@@ -2,7 +2,9 @@ import { propsToBody } from '../../props-to-body'
 import type { CannonMessageMap } from '../../types'
 import type { CreateMaterial } from '../material'
 import type { State } from '../state'
-import type { CannonCollideEvent } from '../types'
+import type { CannonCollideEvent, CannonWorkerGlobalScope } from '../types'
+
+declare const self: CannonWorkerGlobalScope
 
 export const addBodies = (
   state: State,
@@ -20,11 +22,14 @@ export const addBodies = (
 
     if (props[i].onCollide)
       body.addEventListener('collide', ({ type, body, target, contact }: CannonCollideEvent) => {
+        if (!body.uuid || !target.uuid) return
+
         const { ni, ri, rj, bi, bj, id } = contact
         const contactPoint = bi.position.vadd(ri)
         const contactNormal = bi === body ? ni : ni.scale(-1)
+
         self.postMessage({
-          body: body.uuid!,
+          body: body.uuid,
           collisionFilters: {
             bodyFilterGroup: body.collisionFilterGroup,
             bodyFilterMask: body.collisionFilterMask,
@@ -47,7 +52,7 @@ export const addBodies = (
             rj: rj.toArray(),
           },
           op: 'event',
-          target: target.uuid!,
+          target: target.uuid,
           type,
         })
       })

packages/cannon-worker-api/src/worker/operations/add-ray.ts

@@ -4,7 +4,9 @@ import { Ray, RAY_MODES, RaycastResult } from 'cannon-es'
 import type { CannonMessageMap } from '../../types'
 import type { State } from '../state'
 import { tripletToVec3 } from '../triplet-to-vec3'
-import type { WithUUID } from '../types'
+import type { CannonWorkerGlobalScope, WithUUID } from '../types'
+
+declare const self: CannonWorkerGlobalScope
 
 function toUppercase<T extends string>(str: T): Uppercase<T> {
   return str.toUpperCase() as Uppercase<T>
@@ -31,8 +33,10 @@ export const addRay = (
 
     const bodyUUID = (body as WithUUID<Body>).uuid
 
+    if (!bodyUUID) return
+
     self.postMessage({
-      body: bodyUUID || null,
+      body: bodyUUID,
       hitNormalWorld: hitNormalWorld.toArray(),
       hitPointWorld: hitPointWorld.toArray(),
       op: 'event',

packages/cannon-worker-api/src/worker/operations/init.ts

@@ -3,20 +3,22 @@ import { GSSolver, NaiveBroadphase, SAPBroadphase, SplitSolver } from 'cannon-es
 
 import type { CannonMessageProps } from '../../types'
 import type { State } from '../state'
-import type { WithUUID } from '../types'
+import type { CannonWorkerGlobalScope, WithUUID } from '../types'
+
+declare const self: CannonWorkerGlobalScope
 
 type TwoBodies = {
   bodyA?: WithUUID<Body>
   bodyB?: WithUUID<Body>
 }
 
 function emitBeginContact({ bodyA, bodyB }: TwoBodies) {
-  if (!bodyA || !bodyB) return
+  if (!bodyA?.uuid || !bodyB?.uuid) return
   self.postMessage({ bodyA: bodyA.uuid, bodyB: bodyB.uuid, op: 'event', type: 'collideBegin' })
 }
 
 function emitEndContact({ bodyA, bodyB }: TwoBodies) {
-  if (!bodyA || !bodyB) return
+  if (!bodyA?.uuid || !bodyB?.uuid) return
   self.postMessage({ bodyA: bodyA.uuid, bodyB: bodyB.uuid, op: 'event', type: 'collideEnd' })
 }
 

packages/cannon-worker-api/src/worker/operations/step.ts

@@ -4,7 +4,7 @@ import type { CannonMessageMap, Observation, PropValue, WorkerFrameMessage } fro
 import type { State } from '../state'
 import type { CannonWorkerGlobalScope } from '../types'
 
-declare let self: CannonWorkerGlobalScope
+declare const self: CannonWorkerGlobalScope
 
 const isQorV = (v: unknown): v is Quaternion | Vec3 => v instanceof Quaternion || v instanceof Vec3