v4.2.0 - 2021-12-01

CHANGELOG.md

@@ -1,5 +1,13 @@
 # @react-three/cannon Changelog
 
+## v4.2.0 - 2021-12-01
+
+- [Types] Use `PropsWithChildren` from React instead of `children: ReactNode` (@bjornstar)
+- [README.md] Update default Physics prop values (@bjornstar)
+- export \* from `'./setup'` there are a lot of useful types in here (@bjornstar)
+- Build using jsx runtime instead of React runtime for a slightly smaller bundle (@bjornstar)
+- [CHANGELOG.md] Add details for v3.1.1 & v3.1.2 (@bjornstar)
+
 ## v4.1.0 - 2021-11-21
 
 - Update default gravity value from `-10` to `-9.81` (@alexandernanberg)

README.md

@@ -123,24 +123,25 @@ ReactDOM.render(
 
 ```typescript
 function Physics({
+  allowSleep = false,
+  axisIndex = 0,
+  broadphase = 'Naive',
   children,
-  shouldInvalidate = true,
-  step = 1 / 60,
+  defaultContactMaterial = { contactEquationStiffness: 1e6 },
   gravity = [0, -9.81, 0],
-  tolerance = 0.001,
   iterations = 5,
-  allowSleep = false,
-  broadphase = 'Naive',
-  axisIndex = 0,
-  defaultContactMaterial = {
-    contactEquationStiffness: 1e6,
-  },
+  quatNormalizeFast = false,
+  quatNormalizeSkip = 0,
+  shouldInvalidate = true,
   // Maximum amount of physics objects inside your scene
   // Lower this value to save memory, increase if 1000 isn't enough
   size = 1000,
+  solver = 'GS',
+  step = 1 / 60,
+  tolerance = 0.001,
 }: ProviderProps): JSX.Element
 
-function Debug({ children, color = 'black', scale = 1 }: DebugProps): JSX.Element
+function Debug({ color = 'black', scale = 1 }: DebugProps): JSX.Element
 
 function usePlane(
   fn: GetByIndex<PlaneProps>,
@@ -350,8 +351,7 @@ interface RaycastVehiclePublicApi {
 ### Props
 
 ```typescript
-type ProviderProps = {
-  children: React.ReactNode
+type ProviderProps = React.PropsWithChildren<{
   shouldInvalidate?: boolean
   gravity?: Triplet
   tolerance?: number
@@ -369,7 +369,7 @@ type ProviderProps = {
     frictionEquationRelaxation?: number
   }
   size?: number
-}
+}>
 
 type AtomicProps = {
   allowSleep: boolean

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/cannon",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "physics based hooks for react-three-fiber",
   "keywords": [
     "cannon",

src/Debug.tsx

@@ -7,7 +7,7 @@ import propsToBody from './propsToBody'
 
 import type { Body, Quaternion as CQuaternion, Vec3 } from 'cannon-es'
 import type { DebugOptions } from 'cannon-es-debugger'
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 import type { Color } from 'three'
 import type { BodyProps, BodyShapeType } from './hooks'
 
@@ -19,12 +19,11 @@ export type DebuggerInterface = (scene: Scene, bodies: Body[], props?: DebugOpti
 
 export type DebugInfo = { bodies: Body[]; refs: { [uuid: string]: Body } }
 
-export type DebugProps = {
-  children: ReactNode
+export type DebugProps = PropsWithChildren<{
   color?: string | number | Color
-  scale?: number
   impl?: DebuggerInterface
-}
+  scale?: number
+}>
 
 const v = new Vector3()
 const s = new Vector3(1, 1, 1)

src/Provider.tsx

@@ -1,13 +1,15 @@
-import { useThree, useFrame } from '@react-three/fiber'
-import { useState, useLayoutEffect, useRef, useMemo, useCallback } from 'react'
-import { InstancedMesh, Vector3, Quaternion, Matrix4 } from 'three'
+import { useFrame, useThree } from '@react-three/fiber'
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { InstancedMesh, Matrix4, Quaternion, Vector3 } from 'three'
+
 import { context } from './setup'
 import { useUpdateWorldPropsEffect } from './useUpdateWorldPropsEffect'
 
-import type { Shape } from 'cannon-es'
-import type { ReactNode } from 'react'
+import type { ContactMaterial, Shape } from 'cannon-es'
+import type { PropsWithChildren } from 'react'
 import type { Object3D } from 'three'
-import type { AtomicName, Buffers, PropValue, Refs, ProviderContext } from './setup'
+
+import type { AtomicName, Buffers, PropValue, ProviderContext, Refs } from './setup'
 import type { Triplet } from './hooks'
 
 // @ts-expect-error Types are not setup for this yet
@@ -18,33 +20,35 @@ function noop() {
 }
 
 export type Broadphase = 'Naive' | 'SAP'
+export type Solver = 'GS' | 'Split'
 
-export type ProviderProps = {
-  children: ReactNode
-  shouldInvalidate?: boolean
-
-  tolerance?: number
-  step?: number
-  iterations?: number
+export type DefaultContactMaterial = Partial<
+  Pick<
+    ContactMaterial,
+    | 'contactEquationRelaxation'
+    | 'contactEquationStiffness'
+    | 'friction'
+    | 'frictionEquationRelaxation'
+    | 'frictionEquationStiffness'
+    | 'restitution'
+  >
+>
 
+export type ProviderProps = PropsWithChildren<{
   allowSleep?: boolean
+  axisIndex?: number
   broadphase?: Broadphase
+  defaultContactMaterial?: DefaultContactMaterial
   gravity?: Triplet
+  iterations?: number
   quatNormalizeFast?: boolean
   quatNormalizeSkip?: number
-  solver?: 'GS' | 'Split'
-
-  axisIndex?: number
-  defaultContactMaterial?: {
-    friction?: number
-    restitution?: number
-    contactEquationStiffness?: number
-    contactEquationRelaxation?: number
-    frictionEquationStiffness?: number
-    frictionEquationRelaxation?: number
-  }
+  shouldInvalidate?: boolean
   size?: number
-}
+  solver?: Solver
+  step?: number
+  tolerance?: number
+}>
 
 type Observation = { [K in AtomicName]: [id: number, value: PropValue<K>, type: K] }[AtomicName]
 
@@ -154,20 +158,20 @@ function apply(index: number, buffers: Buffers, object?: Object3D) {
 }
 
 export function Provider({
+  allowSleep = false,
+  axisIndex = 0,
+  broadphase = 'Naive',
   children,
-  shouldInvalidate = true,
-  step = 1 / 60,
+  defaultContactMaterial = { contactEquationStiffness: 1e6 },
   gravity = [0, -9.81, 0],
-  tolerance = 0.001,
   iterations = 5,
-  allowSleep = false,
-  broadphase = 'Naive',
-  axisIndex = 0,
   quatNormalizeFast = false,
   quatNormalizeSkip = 0,
-  solver = 'GS',
-  defaultContactMaterial = { contactEquationStiffness: 1e6 },
+  shouldInvalidate = true,
   size = 1000,
+  solver = 'GS',
+  step = 1 / 60,
+  tolerance = 0.001,
 }: ProviderProps): JSX.Element {
   const { invalidate } = useThree()
   const [worker] = useState<Worker>(() => new CannonWorker() as Worker)

src/index.tsx

@@ -1,11 +1,11 @@
 import { Suspense } from 'react'
 import { Provider } from './Provider'
-import { context } from './setup'
 
 import type { ProviderProps } from './Provider'
 
 export * from './Debug'
 export * from './hooks'
+export * from './setup'
 
 function Physics(props: ProviderProps) {
   return (
@@ -15,4 +15,4 @@ function Physics(props: ProviderProps) {
   )
 }
 
-export { Physics, context }
+export { Physics }