Error: Multiple instances of `<Root>` found when using with Storybook

[RNm-dove]

Description:
When using this library with Storybook, an error occurs:
Error: Multiple instances of <Root> found!

Expected Behavior

Storybook should work without this error.

Steps to Reproduce

1. Clone the repository:

   git clone https://github.com/RNm-dove/react-call-storybook-bug
   cd react-call-storybook-bug

2. Install dependencies:

   npm install

3. Start Storybook:

   npm run storybook

4. The error appears on the screen.

Reproduction Repository

https://github.com/RNm-dove/react-call-storybook-bug

Screen Shot

[RNm-dove]

@desko27

Is there any particular reason for restricting multiple Root definitions?
Is it possible to provide an additional Root for use cases like Storybook, where multiple Roots are needed?

[desko27]

Hi @RNm-dove!

Thanks for taking the time for such a complete report 👌🏻

I got an idea for this, I'll give it a try as soon as I get some free time.

Thanks again!

[RNm-dove]

@desko27
I really love your library!
I'm looking forward to seeing the updates.
Please let me know if there's anything I can do to help.

[desko27]

Hi @RNm-dove, sorry for the delay! After giving it a try I just realized that:

• Allowing multiple Roots increases complexity of implementation 😰
• There’s no other use case except for Storybook 👀

May the following alternative be good enough?

// preview.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import type { Preview } from '@storybook/react';

import { ConfirmRoot } from '../src/Confirm';

let rendered = false;
if (!rendered) {
  rendered = true;

  const hostDiv = document.createElement('div');
  hostDiv.id = 'confirm-host';
  document.body.appendChild(hostDiv);

  const root = ReactDOM.createRoot(hostDiv);
  root.render(<ConfirmRoot />);
}

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
      },
    },
  },
};

export default preview;

// Confirm.tsx

import { createCallable } from 'react-call'

interface Props { message: string }
type Response = boolean

const {Root, ...Confirm} = createCallable<Props, Response>(({ call, message }) => (
  <div style={{
    position: 'fixed',
    inset: 0,
    background: '#0007',
    zIndex: 10,
    display: 'flex',
    alignItems: 'center'
  }}>
    <dialog open>
      <p>{message}</p>
      <button onClick={() => call.end(true)}>Yes</button>
      <button onClick={() => call.end(false)}>No</button>
    </dialog>
  </div>
))

export const ConfirmRoot = Root;

export { Confirm };

Please let me know! Thanks! 🙇🏻‍♂️