feat: playground for provider-react and renamed hooks.

Author: janthurau

packages/provider-react/package.json

@@ -26,8 +26,8 @@
 		"yjs": "^13.6.8"
 	},
 	"devDependencies": {
-		"@types/react": "^18.0.0",
-		"react": "^18.0.0"
+		"@types/react": "^19.0.0",
+		"react": "^19.0.0"
 	},
 	"repository": {
 		"url": "https://github.com/ueberdosis/hocuspocus"

packages/provider-react/src/HocuspocusProviderComponent.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
 import { useEffect, useMemo, useRef } from "react";
 
@@ -25,6 +27,7 @@ export function HocuspocusProviderComponent({
 	websocketProvider: externalWebsocketProvider,
 }: HocuspocusProviderComponentProps) {
 	const websocketRef = useRef<HocuspocusProviderWebsocket | null>(null);
+	const destroyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	// Create WebSocket provider once on mount
 	if (!websocketRef.current && !externalWebsocketProvider) {
@@ -37,13 +40,22 @@ export function HocuspocusProviderComponent({
 		externalWebsocketProvider ??
 		(websocketRef.current as HocuspocusProviderWebsocket);
 
-	// Cleanup on unmount
+	// Cleanup on unmount with deferred destruction to handle StrictMode double-mount
 	useEffect(() => {
+		if (destroyTimeoutRef.current) {
+			clearTimeout(destroyTimeoutRef.current);
+			destroyTimeoutRef.current = null;
+		}
+
 		return () => {
 			// Only destroy if we created the websocket (not externally provided)
-			if (!externalWebsocketProvider && websocketRef.current) {
-				websocketRef.current.destroy();
-				websocketRef.current = null;
+			if (!externalWebsocketProvider) {
+				destroyTimeoutRef.current = setTimeout(() => {
+					if (websocketRef.current) {
+						websocketRef.current.destroy();
+						websocketRef.current = null;
+					}
+				}, 0);
 			}
 		};
 	}, [externalWebsocketProvider]);

packages/provider-react/src/HocuspocusRoom.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { useContext, useEffect, useMemo, useRef } from "react";
 
@@ -65,6 +67,9 @@ export function HocuspocusRoom({
 			destroyTimeoutRef.current = null;
 		}
 
+		// Attach the provider to the websocket so it starts syncing
+		provider.attach();
+
 		return () => {
 			// Deferred destruction - wait for potential remount in StrictMode
 			// Using setTimeout(0) allows React to remount before we destroy
@@ -92,6 +97,7 @@ export function HocuspocusRoom({
 				document: propsRef.current.document,
 				token: propsRef.current.token,
 			});
+			providerRef.current.attach();
 		}
 	}, [name, websocketProvider]);
 

packages/provider-react/src/hooks/index.ts

@@ -1,4 +1,4 @@
-export { useCollabUsers } from "./useCollabUsers.ts";
-export { useConnectionStatus } from "./useConnectionStatus.ts";
-export { useHocuspocus } from "./useHocuspocus.ts";
-export { useSyncStatus } from "./useSyncStatus.ts";
+export { useHocuspocusAwareness } from "./useHocuspocusAwareness.ts";
+export { useHocuspocusConnectionStatus } from "./useHocuspocusConnectionStatus.ts";
+export { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
+export { useHocuspocusSyncStatus } from "./useHocuspocusSyncStatus.ts";

…ovider-react/src/hooks/useCollabUsers.ts …eact/src/hooks/useHocuspocusAwareness.tspackages/provider-react/src/hooks/useCollabUsers.ts renamed to packages/provider-react/src/hooks/useHocuspocusAwareness.ts packages/provider-react/src/hooks/useCollabUsers.ts renamed to packages/provider-react/src/hooks/useHocuspocusAwareness.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useSyncExternalStore } from "react";
 
 import type { CollabUser } from "../types.ts";
-import { useHocuspocus } from "./useHocuspocus.ts";
+import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
 
 /**
  * Subscribe to the list of connected users in the document.
@@ -14,7 +14,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * @example
  * ```tsx
  * function UserList() {
- *   const users = useCollabUsers()
+ *   const users = useHocuspocusAwareness()
  *
  *   return (
  *     <div className="avatars">
@@ -32,8 +32,8 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * }
  * ```
  */
-export function useCollabUsers(): CollabUser[] {
-	const provider = useHocuspocus();
+export function useHocuspocusAwareness(): CollabUser[] {
+	const provider = useHocuspocusProvider();
 
 	// Cache the last snapshot to avoid unnecessary array allocations
 	const cacheRef = useRef<{

…r-react/src/hooks/useConnectionStatus.ts …c/hooks/useHocuspocusConnectionStatus.tspackages/provider-react/src/hooks/useConnectionStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusConnectionStatus.ts packages/provider-react/src/hooks/useConnectionStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusConnectionStatus.ts

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useSyncExternalStore } from "react";
 
 import type { ConnectionStatus } from "../types.ts";
-import { useHocuspocus } from "./useHocuspocus.ts";
+import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
 
 /**
  * Subscribe to the connection status of the collaboration provider.
@@ -14,7 +14,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * @example
  * ```tsx
  * function ConnectionIndicator() {
- *   const status = useConnectionStatus()
+ *   const status = useHocuspocusConnectionStatus()
  *
  *   return (
  *     <div className={`status-${status}`}>
@@ -24,34 +24,31 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * }
  * ```
  */
-export function useConnectionStatus(): ConnectionStatus {
-	const provider = useHocuspocus();
-	// Track connection status via events since the provider doesn't expose a status property
-	const statusRef = useRef<ConnectionStatus>("connecting");
+export function useHocuspocusConnectionStatus(): ConnectionStatus {
+	const provider = useHocuspocusProvider();
+	const statusRef = useRef<ConnectionStatus>(
+		provider.configuration.websocketProvider.status as ConnectionStatus,
+	);
 
 	const subscribe = useCallback(
 		(onStoreChange: () => void) => {
-			const handleConnect = () => {
-				statusRef.current = "connected";
+			const handleStatus = (data: { status: ConnectionStatus }) => {
+				statusRef.current = data.status;
 				onStoreChange();
 			};
 
-			const handleDisconnect = () => {
-				statusRef.current = "disconnected";
-				onStoreChange();
-			};
+			provider.on("status", handleStatus);
 
-			provider.on("connect", handleConnect);
-			provider.on("disconnect", handleDisconnect);
-
-			// Set initial status based on current state
-			if (provider.isSynced) {
-				statusRef.current = "connected";
+			// Sync initial status in case it changed between render and subscribe
+			const currentStatus = provider.configuration.websocketProvider
+				.status as ConnectionStatus;
+			if (statusRef.current !== currentStatus) {
+				statusRef.current = currentStatus;
+				onStoreChange();
 			}
 
 			return () => {
-				provider.off("connect", handleConnect);
-				provider.off("disconnect", handleDisconnect);
+				provider.off("status", handleStatus);
 			};
 		},
 		[provider],

…rovider-react/src/hooks/useHocuspocus.ts …react/src/hooks/useHocuspocusProvider.tspackages/provider-react/src/hooks/useHocuspocus.ts renamed to packages/provider-react/src/hooks/useHocuspocusProvider.ts packages/provider-react/src/hooks/useHocuspocus.ts renamed to packages/provider-react/src/hooks/useHocuspocusProvider.ts

@@ -13,7 +13,7 @@ import { HocuspocusRoomContext } from "../context.ts";
  * @example
  * ```tsx
  * function Editor() {
- *   const provider = useHocuspocus()
+ *   const provider = useHocuspocusProvider()
  *
  *   const editor = useEditor({
  *     extensions: [
@@ -26,11 +26,11 @@ import { HocuspocusRoomContext } from "../context.ts";
  * }
  * ```
  */
-export function useHocuspocus() {
+export function useHocuspocusProvider() {
 	const context = useContext(HocuspocusRoomContext);
 
 	if (!context) {
-		throw new Error("useHocuspocus must be used within a HocuspocusRoom");
+		throw new Error("useHocuspocusProvider must be used within a HocuspocusRoom");
 	}
 
 	return context.provider;

…rovider-react/src/hooks/useSyncStatus.ts …act/src/hooks/useHocuspocusSyncStatus.tspackages/provider-react/src/hooks/useSyncStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusSyncStatus.ts packages/provider-react/src/hooks/useSyncStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusSyncStatus.ts

@@ -1,7 +1,7 @@
 import { useCallback, useSyncExternalStore } from "react";
 
 import type { SyncStatus } from "../types.ts";
-import { useHocuspocus } from "./useHocuspocus.ts";
+import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
 
 /**
  * Subscribe to the sync status of local changes.
@@ -13,7 +13,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * @example
  * ```tsx
  * function SaveIndicator() {
- *   const syncStatus = useSyncStatus()
+ *   const syncStatus = useHocuspocusSyncStatus()
  *
  *   return (
  *     <div>
@@ -23,8 +23,8 @@ import { useHocuspocus } from "./useHocuspocus.ts";
  * }
  * ```
  */
-export function useSyncStatus(): SyncStatus {
-	const provider = useHocuspocus();
+export function useHocuspocusSyncStatus(): SyncStatus {
+	const provider = useHocuspocusProvider();
 
 	const subscribe = useCallback(
 		(onStoreChange: () => void) => {

packages/provider-react/src/index.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // Contexts
 export { HocuspocusContext, HocuspocusRoomContext } from "./context.ts";
 
@@ -7,10 +9,10 @@ export { HocuspocusRoom } from "./HocuspocusRoom.tsx";
 
 // Hooks
 export {
-	useCollabUsers,
-	useConnectionStatus,
-	useHocuspocus,
-	useSyncStatus,
+	useHocuspocusAwareness,
+	useHocuspocusConnectionStatus,
+	useHocuspocusProvider,
+	useHocuspocusSyncStatus,
 } from "./hooks/index.ts";
 
 // Utils

playground/frontend/app/articles/[slug]/CollaborationStatus.tsx

@@ -12,7 +12,7 @@ const CollaborationStatus = (props: {
 
 	const [unsyncedChanges, setUnsyncedChanges] = useState(0);
 	const [socketStatus, setSocketStatus] = useState<string | null>(null);
-	const [isAttached, _setAttached] = useState<boolean | null>(null);
+	const [isAttached, _setAttached] = useState<boolean>(false);
 
 	useEffect(() => {
 		setSocketStatus(provider.configuration.websocketProvider.status);