Rapier with miniplex

[verybomb]

Has anyone been able to make newer versions of react-three-rapier work with miniplex?

It used to be really simple up until some recent version I think (after at least 0.9). Here's how you'd assign a RigidBody to an entity component:

<ECS.Entity>
  <ECS.Component name="player" data={{...}} />
  <ECS.Component name="rigidBody">
    <RigidBody>
      <PlayerModel />
    </RigidBody>
  </ECS.Component>
</ECS.Entity>

For some reason this no longer works. Some context from the miniplex repo:
hmans/miniplex#303 (comment)

[hmans]

For context, especially for those who're not familiar with Miniplex: for this to work, the child component within <ECS.Component> only needs to forward a ref. Once it does that, <ECS.Component> will pick it up and assign it to the specified ECS component.

I'm 100% positive that this used to work, so I'm guessing some newer version of r3-rapier no longer forwards a ref to the created rigidbody?

[Akis-Hajittofi]

Hey, is there any updates on this or any work around that I could implement? I'm new to react so I'm not sure how to move forward from this. I believe the matter should be urgent, since ECS are used in games and rapier is a physic engine for games, which goes hand in hand.

[isaac-mason]

In another library, I've been able to capture @react-three/rapier refs without issues. But I capture refs slightly differently to miniplex:

import React from "react";

const Example = (props) => {
  const [childRef, setChildRef] = React.useState();

  const refCatpureProps = useMemo(() => {
      return {
        ref: setChildRef,
      }
    }, [])

  if (props.children) {
    const child = React.Children.only(props.children);

    return React.cloneElement(child, refCatpureProps);
  }

  return null;
};

For comparison, miniplex is doing something like this right now:

import React from 'react'

const mergeRefs =
  <T>(refs: Array<React.Ref<T>>): React.Ref<T> =>
  (v: T) => {
    refs.forEach((ref) => {
      if (typeof ref === "function") ref(v);
      else if (!!ref) (ref as any).current = v;
    });
  };

const Example = (props) => {
  const ref = React.useRef(null)

  if (props.children) {
    const child = React.Children.only(props.children)

    return React.cloneElement(child, {
      ref: mergeRefs([child.ref, ref])
    })
  }

  return null
};

I'm not sure what the implications are for each approach.

If I understand correctly, the miniplex approach does have a limitation in that it won't capture updated ref values. At the same time though, maybe react-three/rapier could be changed to have a stable initial ref value.

Curious what others think!

[theostavrides]

Did anyone find a workaround for this issue?

[verybomb]

Haven't done too much testing but this is what I ended up using (as provided by @isaac-mason). Not sure why this works and not ECS.Component out of the box

import React, { Children, cloneElement, PropsWithChildren, useEffect, useState } from 'react'

function ECSComponent2(props: PropsWithChildren<{name: keyof Entity}>) {
  const entity = ECS.useCurrentEntity()
  const [childRef, setChildRef] = useState()

  useEffect(
    () => {
      ECS.world.addComponent(entity, props.name, childRef)
      return () => {
        ECS.world.removeComponent(entity, props.name)
      }
    },
    [childRef, entity, props.name],
  )

  const child = Children.only(props.children)
  return cloneElement(child as any, { ref: setChildRef })
}

function TestEntity() {
  return (
    <ECS.Entity>
      <ECSComponent2 name="rigidBody">
        <RigidBody>
          <mesh>
            <boxGeometry />
            <meshNormalMaterial />
          </mesh>
        </RigidBody>
      </ECSComponent2>
    </ECS.Entity>
  )
}