feat: first draft of @hocuspocus/provider-react package

[janthurau]

The idea of this package is to remove all issues around rerendering during development in React. Strict mode triggers hooks twice, which is confusing (the network tab shows two websockets, one is dead and another is connected), and can cause timing issues (the server doesnt support opening the same document name twice over the same websocket connection), so if a disconnect and connect happen really fast, the state may mix and connections break.

Status: Needs careful testing.

[bdbch]

small things

[Copilot]

Pull request overview

Introduces a first draft of a new @hocuspocus/provider-react package intended to provide React components/hooks for managing Hocuspocus provider lifecycle (especially around React StrictMode), and adds a playground route to demo it.

Changes:

• Adds packages/provider-react with contexts, components (HocuspocusProviderWebsocketComponent, HocuspocusRoom), and hooks (connection/sync status, awareness, event subscription).
• Updates the playground frontend to include a new /react-provider/[slug] demo route and workspace wiring.
• Replaces several @ts-ignore usages with @ts-expect-error and makes small provider/internal adjustments.

Reviewed changes

Copilot reviewed 35 out of 37 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
tsconfig.json	Expands root TS include to TSX and adjusts JSX setting.
tests/utils/flushRedis.ts	Replaces @ts-ignore with @ts-expect-error.
tests/extension-s3/fetch.ts	Replaces @ts-ignore with @ts-expect-error.
tests/extension-logger/onListen.ts	Replaces @ts-ignore with @ts-expect-error.
pnpm-lock.yaml	Adds lock entries for the new provider-react workspace usage and deps.
playground/frontend/package.json	Adds @hocuspocus/provider-react and yjs to deps.
playground/frontend/next.config.ts	Adds Next webpack alias for the new workspace package source.
playground/frontend/app/react-provider/layout.tsx	Adds nested layout for the new demo route.
playground/frontend/app/react-provider/[slug]/page.tsx	Adds page wiring for the new demo route.
playground/frontend/app/react-provider/[slug]/ConnectedUsers.tsx	Demo UI using useHocuspocusAwareness().
playground/frontend/app/react-provider/[slug]/CollaborativeEditor.tsx	Demo editor using useHocuspocusProvider() and TipTap.
playground/frontend/app/react-provider/[slug]/CollaborationStatus.tsx	Demo status UI using provider-react hooks/events.
playground/frontend/app/react-provider/[slug]/ArticleEditor.tsx	Demo composition of websocket component + room + UI.
playground/frontend/app/layout.tsx	Adds navigation section for the new demo route.
playground/frontend/app/articles/[slug]/CollaborationStatus.tsx	UI tweak and adds unsynced threshold styling/banner.
playground/backend/src/webhook.ts	Replaces @ts-ignore with @ts-expect-error.
playground/backend/src/tiptapcollab.ts	Replaces @ts-ignore with @ts-expect-error.
playground/backend/src/load-document.ts	Replaces @ts-ignore with @ts-expect-error.
playground/backend/src/default.ts	Replaces @ts-ignore with @ts-expect-error (commented code).
packages/transformer/src/Tiptap.ts	Replaces @ts-ignore with @ts-expect-error.
packages/transformer/src/Prosemirror.ts	Replaces @ts-ignore with @ts-expect-error.
packages/provider/src/version.ts	Replaces @ts-ignore with @ts-expect-error.
packages/provider/src/MessageReceiver.ts	Adds case block braces and replaces @ts-ignore with @ts-expect-error.
packages/provider/src/HocuspocusProvider.ts	Normalizes type-only import and replaces @ts-ignore with @ts-expect-error.
packages/provider-react/tsconfig.json	Adds package-level TS config overriding JSX mode.
packages/provider-react/src/types.ts	Adds provider-react public types.
packages/provider-react/src/index.ts	Exports provider-react API surface.
packages/provider-react/src/hooks/*	Adds hooks for provider access, events, status, awareness.
packages/provider-react/src/context.ts	Adds contexts for websocket and room provider instances.
packages/provider-react/src/HocuspocusRoom.tsx	Adds room component that creates/attaches a provider.
packages/provider-react/src/HocuspocusProviderWebsocketComponent.tsx	Adds websocket component intended to share a websocket across rooms.
packages/provider-react/package.json	Adds new package metadata and peer deps.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.