[effector-react] Add 'use client' directive to gate as component

[domosedov]

Proposal

Mark Gate Component with 'use client' directive

Use case

// model.ts
export const PageGate = createGate()

Now we cant do like this

// react server component
export default function Page() {
  return (
    <>
      <PageGate/>
    </>
  )
}

Error

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

Current solution

// gate.tsx
'use client'
import {PageGate as Gate} from './model.ts'
export const PageGate = () => {
useGate(Gate)
return null
}

[zerobias]

Its ok to improve this case as we eventually have to deal with that anyway.

Open questions are only implementation details:

• The library is bundled as single file and we don't want to change that, so is it ok to add 'use client' at the top of the whole module?
• How it should be implemented with rollup? There could be sourcemap issues if we just add a directive after the build is complete. Is there a rollup plugin for that?

I suggest waiting until the release of react 19 to learn from the experience of other libraries