Skip to content

Commit 14da897

Browse files
janthuraujanthurau
committed
feat: playground for provider-react and renamed hooks.
1 parent 200e822 commit 14da897

19 files changed

+470
-29
lines changed

‎packages/provider-react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"yjs": "^13.6.8"
2727
},
2828
"devDependencies": {
29-
"@types/react": "^18.0.0",
30-
"react": "^18.0.0"
29+
"@types/react": "^19.0.0",
30+
"react": "^19.0.0"
3131
},
3232
"repository": {
3333
"url": "https://github.com/ueberdosis/hocuspocus"

‎packages/provider-react/src/HocuspocusRoom.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export function HocuspocusRoom({
6565
destroyTimeoutRef.current = null;
6666
}
6767

68+
// Attach the provider to the websocket so it starts syncing
69+
provider.attach();
70+
6871
return () => {
6972
// Deferred destruction - wait for potential remount in StrictMode
7073
// Using setTimeout(0) allows React to remount before we destroy

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { useCollabUsers } from "./useCollabUsers.ts";
2-
export { useConnectionStatus } from "./useConnectionStatus.ts";
3-
export { useHocuspocus } from "./useHocuspocus.ts";
4-
export { useSyncStatus } from "./useSyncStatus.ts";
1+
export { useHocuspocusAwareness } from "./useHocuspocusAwareness.ts";
2+
export { useHocuspocusConnectionStatus } from "./useHocuspocusConnectionStatus.ts";
3+
export { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
4+
export { useHocuspocusSyncStatus } from "./useHocuspocusSyncStatus.ts";

packages/provider-react/src/hooks/useCollabUsers.ts renamed to packages/provider-react/src/hooks/useHocuspocusAwareness.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useRef, useSyncExternalStore } from "react";
22

33
import type { CollabUser } from "../types.ts";
4-
import { useHocuspocus } from "./useHocuspocus.ts";
4+
import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
55

66
/**
77
* Subscribe to the list of connected users in the document.
@@ -14,7 +14,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
1414
* @example
1515
* ```tsx
1616
* function UserList() {
17-
* const users = useCollabUsers()
17+
* const users = useHocuspocusAwareness()
1818
*
1919
* return (
2020
* <div className="avatars">
@@ -32,8 +32,8 @@ import { useHocuspocus } from "./useHocuspocus.ts";
3232
* }
3333
* ```
3434
*/
35-
export function useCollabUsers(): CollabUser[] {
36-
const provider = useHocuspocus();
35+
export function useHocuspocusAwareness(): CollabUser[] {
36+
const provider = useHocuspocusProvider();
3737

3838
// Cache the last snapshot to avoid unnecessary array allocations
3939
const cacheRef = useRef<{

packages/provider-react/src/hooks/useConnectionStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusConnectionStatus.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useRef, useSyncExternalStore } from "react";
22

33
import type { ConnectionStatus } from "../types.ts";
4-
import { useHocuspocus } from "./useHocuspocus.ts";
4+
import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
55

66
/**
77
* Subscribe to the connection status of the collaboration provider.
@@ -14,7 +14,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
1414
* @example
1515
* ```tsx
1616
* function ConnectionIndicator() {
17-
* const status = useConnectionStatus()
17+
* const status = useHocuspocusConnectionStatus()
1818
*
1919
* return (
2020
* <div className={`status-${status}`}>
@@ -24,8 +24,8 @@ import { useHocuspocus } from "./useHocuspocus.ts";
2424
* }
2525
* ```
2626
*/
27-
export function useConnectionStatus(): ConnectionStatus {
28-
const provider = useHocuspocus();
27+
export function useHocuspocusConnectionStatus(): ConnectionStatus {
28+
const provider = useHocuspocusProvider();
2929
// Track connection status via events since the provider doesn't expose a status property
3030
const statusRef = useRef<ConnectionStatus>("connecting");
3131

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { HocuspocusRoomContext } from "../context.ts";
1313
* @example
1414
* ```tsx
1515
* function Editor() {
16-
* const provider = useHocuspocus()
16+
* const provider = useHocuspocusProvider()
1717
*
1818
* const editor = useEditor({
1919
* extensions: [
@@ -26,11 +26,11 @@ import { HocuspocusRoomContext } from "../context.ts";
2626
* }
2727
* ```
2828
*/
29-
export function useHocuspocus() {
29+
export function useHocuspocusProvider() {
3030
const context = useContext(HocuspocusRoomContext);
3131

3232
if (!context) {
33-
throw new Error("useHocuspocus must be used within a HocuspocusRoom");
33+
throw new Error("useHocuspocusProvider must be used within a HocuspocusRoom");
3434
}
3535

3636
return context.provider;

packages/provider-react/src/hooks/useSyncStatus.ts renamed to packages/provider-react/src/hooks/useHocuspocusSyncStatus.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useSyncExternalStore } from "react";
22

33
import type { SyncStatus } from "../types.ts";
4-
import { useHocuspocus } from "./useHocuspocus.ts";
4+
import { useHocuspocusProvider } from "./useHocuspocusProvider.ts";
55

66
/**
77
* Subscribe to the sync status of local changes.
@@ -13,7 +13,7 @@ import { useHocuspocus } from "./useHocuspocus.ts";
1313
* @example
1414
* ```tsx
1515
* function SaveIndicator() {
16-
* const syncStatus = useSyncStatus()
16+
* const syncStatus = useHocuspocusSyncStatus()
1717
*
1818
* return (
1919
* <div>
@@ -23,8 +23,8 @@ import { useHocuspocus } from "./useHocuspocus.ts";
2323
* }
2424
* ```
2525
*/
26-
export function useSyncStatus(): SyncStatus {
27-
const provider = useHocuspocus();
26+
export function useHocuspocusSyncStatus(): SyncStatus {
27+
const provider = useHocuspocusProvider();
2828

2929
const subscribe = useCallback(
3030
(onStoreChange: () => void) => {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export { HocuspocusRoom } from "./HocuspocusRoom.tsx";
77

88
// Hooks
99
export {
10-
useCollabUsers,
11-
useConnectionStatus,
12-
useHocuspocus,
13-
useSyncStatus,
10+
useHocuspocusAwareness,
11+
useHocuspocusConnectionStatus,
12+
useHocuspocusProvider,
13+
useHocuspocusSyncStatus,
1414
} from "./hooks/index.ts";
1515

1616
// Utils

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const CollaborationStatus = (props: {
1212

1313
const [unsyncedChanges, setUnsyncedChanges] = useState(0);
1414
const [socketStatus, setSocketStatus] = useState<string | null>(null);
15-
const [isAttached, _setAttached] = useState<boolean | null>(null);
15+
const [isAttached, _setAttached] = useState<boolean>(false);
1616

1717
useEffect(() => {
1818
setSocketStatus(provider.configuration.websocketProvider.status);

‎playground/frontend/app/layout.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export default function RootLayout({
2424

2525
<nav className="space-y-6">
2626
<div>
27-
<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Articles</h2>
27+
<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Classic Provider</h2>
2828
<ul className="space-y-2">
2929
{[1, 2, 3, 4].map((num) => (
3030
<li key={num}>
31-
<Link
32-
href={`/articles/${num}`}
31+
<Link
32+
href={`/articles/${num}`}
3333
className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200"
3434
>
3535
<div className="w-2 h-2 bg-slate-400 dark:bg-slate-500 rounded-full mr-3"></div>
@@ -39,6 +39,22 @@ export default function RootLayout({
3939
))}
4040
</ul>
4141
</div>
42+
<div>
43+
<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">React Provider</h2>
44+
<ul className="space-y-2">
45+
{[1, 2, 3, 4].map((num) => (
46+
<li key={num}>
47+
<Link
48+
href={`/react-provider/${num}`}
49+
className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-purple-600 dark:hover:text-purple-400 transition-all duration-200"
50+
>
51+
<div className="w-2 h-2 bg-purple-400 dark:bg-purple-500 rounded-full mr-3"></div>
52+
Article {num}
53+
</Link>
54+
</li>
55+
))}
56+
</ul>
57+
</div>
4258
</nav>
4359
</div>
4460
</div>

0 commit comments

Comments
 (0)