Add YorkieProvider, DocumentProvider and suspense hooks #946
Conversation
|
Warning Rate limit exceeded@hackerwins has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 6 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (5)
WalkthroughThis pull request refactors several parts of the codebase by simplifying hook usage and component structure in the React TodoMVC example. It removes unnecessary configurations, standardizes variable names, and integrates new Yorkie SDK–based providers and hooks. New components for document and client context management have been added, and the exports are updated accordingly. Additionally, minor configuration updates in TypeScript and Vite strengthen React support. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
hackerwins
changed the title
hackerwins
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (11)
examples/react-todomvc/src/main.tsx (2)
5-11: Fix the typo in variable name.There's a typo in the variable name:
initalRootshould beinitialRoot.-const initalRoot = { +const initialRoot = { todos: [ { id: 0, text: 'Yorkie JS SDK', completed: false }, { id: 1, text: 'Garbage collection', completed: false }, { id: 2, text: 'RichText datatype', completed: false }, ], };
14-21: Check for environment variable existence.The API key is directly accessed without checking if it exists, which could lead to runtime errors if the environment variable is not defined.
Consider adding a fallback or showing a meaningful error:
- <YorkieProvider apiKey={import.meta.env.VITE_YORKIE_API_KEY}> + <YorkieProvider apiKey={import.meta.env.VITE_YORKIE_API_KEY || ''}>Additionally, you might want to consider if creating a new document each day (based on the date in the docKey) is the intended behavior.
Does the application need to create a new document every day, or should it maintain the same document across days?
examples/react-todomvc/src/App.tsx (1)
32-43: Consider optimizing todo lookup.The current implementation iterates through all todos to find a matching id. This could be optimized using methods like
findor by maintaining a map of todos by id.deleteTodo: (id: number) => { update((root) => { - let target: (Todo & JSONObject<Todo>) | undefined; - for (const todo of root.todos) { - if (todo.id === id) { - target = todo as Todo & JSONObject<Todo>; - break; - } - } + const target = root.todos.find(todo => todo.id === id) as (Todo & JSONObject<Todo>) | undefined; if (target) { root.todos.deleteByID!(target.getID!()); } }); },This pattern could be applied to other similar blocks in the file (editTodo, completeTodo).
packages/react/src/YorkieProvider.tsx (3)
1-3: Check copyright yearThe copyright notice shows 2025, which is in the future. This should be updated to the current year or the year when the code was created.
-/* - * Copyright 2025 The Yorkie Authors. All rights reserved. +/* + * Copyright 2024 The Yorkie Authors. All rights reserved.
24-24: Consider importing from package root instead of src directoryImporting directly from
srcfolder is generally not recommended as it bypasses the package's public API and may lead to issues if the internal structure changes.-import { Client } from '@yorkie-js-sdk/src/yorkie'; +import { Client } from '@yorkie-js/sdk';
68-71: Improve error handling in useYorkie hookThe
useYorkiehook should check if the context exists before accessing the client property to prevent potential runtime errors.export const useYorkie = () => { const context = useContext(YorkieContext); + if (!context) { + throw new Error('useYorkie must be used within a YorkieProvider'); + } return context?.client; };packages/react/src/DocumentProvider.tsx (4)
1-3: Check copyright yearThe copyright notice shows 2025, which is in the future. This should be updated to the current year or the year when the code was created.
-/* - * Copyright 2025 The Yorkie Authors. All rights reserved. +/* + * Copyright 2024 The Yorkie Authors. All rights reserved.
21-27: Consider using more specific types instead of 'any'Using
anytype loses TypeScript's benefits. Consider using more specific types forrootandpresence.const DocumentContext = createContext<{ - root: any; - presences: { clientID: string; presence: any }[]; + root: Indexable; + presences: { clientID: string; presence: Record<string, unknown> }[]; update: (callback: (root: any) => void) => void; loading: boolean; error: Error | undefined; } | null>(null);
80-84: Add loading and error state to the update functionThe
updatefunction should handle potential errors and update loading state to provide better feedback to users.const update = (callback: (root: any) => void) => { if (doc) { - doc.update(callback); + try { + setLoading(true); + doc.update(callback); + } catch (err) { + setError(err instanceof Error ? err : new Error('Failed to update document')); + } finally { + setLoading(false); + } } };
125-134: Complete documentation for usePresence hookThe
usePresencehook has incomplete documentation compared to other hooks./** * `usePresence` is a custom hook that returns the presence of the document. + * This hook must be used within a `DocumentProvider`. */ export const usePresence = () => { const context = useContext(DocumentContext); if (!context) { throw new Error('usePresence must be used within a DocumentProvider'); } return context.presences; };packages/react/src/index.ts (1)
29-36: Consider adding JSDoc comments for exported entitiesTo improve developer experience, consider adding JSDoc comments for the exported entities that briefly explain their purpose.
export type { JSONArray, JSONObject }; +/** + * Exports components and hooks for Yorkie integration with React + * - YorkieProvider: Provider for Yorkie client + * - DocumentProvider: Provider for Yorkie document + * - useDocument: Hook to access document data + * - useRoot: Hook to access document root + * - usePresence: Hook to access document presences + * - useYorkieDoc: Legacy hook for Yorkie document + */ export { YorkieProvider, DocumentProvider, useDocument, useRoot, usePresence, useYorkieDoc, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
examples/react-todomvc/src/App.tsx(1 hunks)examples/react-todomvc/src/MainSection.tsx(2 hunks)examples/react-todomvc/src/main.tsx(1 hunks)packages/react/src/DocumentProvider.tsx(1 hunks)packages/react/src/YorkieProvider.tsx(1 hunks)packages/react/src/index.ts(1 hunks)packages/react/src/useYorkieDoc.ts(1 hunks)packages/react/tsconfig.json(1 hunks)packages/react/vite.config.js(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/react/src/useYorkieDoc.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (18.x)
🔇 Additional comments (10)
packages/react/tsconfig.json (1)
9-9: Good addition of React JSX support!Adding
"jsx": "react-jsx"to the TypeScript configuration is essential for the new React components being introduced. This enables the newer JSX transform from React 17+ which is more efficient and doesn't require importing React in every JSX file.packages/react/vite.config.js (1)
3-3: Appropriate addition of the React Vite plugin.Adding the React plugin is necessary for proper React support in the Vite build process. This enables React-specific optimizations, Fast Refresh during development, and proper JSX handling.
Also applies to: 28-28
examples/react-todomvc/src/main.tsx (1)
3-3: Good import of the new provider components.The import of
DocumentProviderandYorkieProvideraligns with the PR objectives to introduce these new components.examples/react-todomvc/src/App.tsx (4)
1-1: Clean import statement from the React package.The import now correctly references the components from the '@yorkie-js/react' package, which aligns with the introduction of the new providers.
14-14: Simplified useDocument hook usage.The hook call has been simplified by removing the explicit configuration, as it's now handled by the providers in
main.tsx. This follows good React practices by moving configuration to higher-level components.
16-17: Improved conditional rendering.The loading and error states now use concise return statements instead of block statements, which is a more modern and readable React pattern.
24-24: Consistent variable naming.Changed from
maxIdtomaxID, which provides better consistency in the codebase.examples/react-todomvc/src/MainSection.tsx (2)
19-19: LGTM: Good use of parameter destructuringThe refactoring to use destructuring in the function parameters improves code readability.
39-47: LGTM: Improved JSX formattingThe JSX formatting changes make the code more concise while maintaining readability.
packages/react/src/index.ts (1)
19-26: LGTM: Well-organized importsThe new import structure clearly organizes all the necessary components and hooks.
hackerwins
force-pushed
the
react-provider
branch
from
96a75b5 to
62ebd3e
Compare
hackerwins
force-pushed
the
react-provider
branch
from
62ebd3e to
1e37976
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #946 +/- ##
==========================================
- Coverage 78.54% 78.50% -0.04%
==========================================
Files 63 63
Lines 5421 5421
Branches 998 998
==========================================
- Hits 4258 4256 -2
Misses 874 874
- Partials 289 291 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
examples/react-todomvc/src/main.tsx (2)
5-5: Fix typo in variable nameinitalRootThe variable name has a spelling error - it should be
initialRootinstead ofinitalRoot(missing an "i").-const initalRoot = { +const initialRoot = {
14-21: Consider more unique docKey generation for multi-user scenariosThe current docKey is based only on the date, which could lead to collisions if multiple users access the application on the same day.
- docKey={`react-todomvc-${new Date().toISOString().substring(0, 10).replace(/-/g, '')}`} + docKey={`react-todomvc-${new Date().toISOString().substring(0, 10).replace(/-/g, '')}-${Math.random().toString(36).substring(2, 9)}`}packages/react/src/DocumentProvider.tsx (3)
51-58: Consider adding a timeout or retry mechanism for document attachmentThe document attachment logic could benefit from a timeout or retry mechanism to handle network issues or service unavailability.
useEffect(() => { setLoading(true); setError(undefined); if (!client) return; const newDoc = new Document<R, P>(docKey); + let retryCount = 0; + const maxRetries = 3; async function attachDocument() { + if (retryCount >= maxRetries) { + setError(new Error(`Failed to attach document after ${maxRetries} attempts`)); + setLoading(false); + return; + }
135-137: Complete the JSDoc comment for usePresenceThe JSDoc comment for
usePresenceis incomplete. It should mention that the hook must be used within a DocumentProvider like the other hook comments do./** - * `usePresence` is a custom hook that returns the presence of the document. + * `usePresence` is a custom hook that returns the presence of the document. + * This hook must be used within a `DocumentProvider`. */
57-86: Consider using a more robust document attachment patternThe document attachment logic could be improved by separating the subscription setup into its own function and adding more robust error handling.
const newDoc = new Document<R, P>(docKey); async function attachDocument() { try { await client?.attach(newDoc); - - newDoc.subscribe(() => { - setRoot({ ...newDoc.getRoot() }); - }); - - newDoc.subscribe('presence', () => { - setPresences(newDoc.getPresences()); - }); + setupSubscriptions(newDoc); setDoc(newDoc); setRoot({ ...newDoc.getRoot() }); } catch (err) { setError( err instanceof Error ? err : new Error('Failed to attach document'), ); } finally { setLoading(false); } } +function setupSubscriptions(document: Document<R, P>) { + document.subscribe(() => { + setRoot({ ...document.getRoot() }); + }); + + document.subscribe('presence', () => { + setPresences(document.getPresences()); + }); +} attachDocument(); return () => { - client.detach(newDoc); + if (client && newDoc) { + try { + client.detach(newDoc); + } catch (err) { + console.error('Failed to detach document:', err); + } + } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
examples/react-todomvc/src/App.tsx(1 hunks)examples/react-todomvc/src/MainSection.tsx(2 hunks)examples/react-todomvc/src/main.tsx(1 hunks)packages/react/src/DocumentProvider.tsx(1 hunks)packages/react/src/YorkieProvider.tsx(1 hunks)packages/react/src/index.ts(1 hunks)packages/react/src/useYorkieDoc.ts(1 hunks)packages/react/tsconfig.json(1 hunks)packages/react/vite.config.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/react/vite.config.js
- packages/react/tsconfig.json
- packages/react/src/useYorkieDoc.ts
- packages/react/src/YorkieProvider.tsx
- examples/react-todomvc/src/App.tsx
- examples/react-todomvc/src/MainSection.tsx
🔇 Additional comments (7)
examples/react-todomvc/src/main.tsx (1)
5-11: The default todos look goodThe initial todo items provide a clear example of how the todos should be structured, with appropriate fields (id, text, completed).
packages/react/src/index.ts (2)
17-28: Organized imports look cleanThe structure of imports is well-organized, clearly separating the core types from the custom hooks and providers.
29-36: Well-structured exports provide a complete public APIThe exports include all necessary components (YorkieProvider, DocumentProvider) and hooks (useDocument, useRoot, usePresence, useYorkieDoc), making them accessible to consumers of the package.
packages/react/src/DocumentProvider.tsx (4)
18-18: Use consistent import path for Yorkie SDKThere appears to be an inconsistency in import paths across files. Ensure that all files use the same import path for the Yorkie SDK.
21-27: Well-defined context type with appropriate fieldsThe
DocumentContextTypeis well-structured, including all necessary fields for document management: root, presences, update function, loading state, and error handling.
33-41: Good use of generics for type safetyThe
DocumentProvidercomponent properly uses TypeScript generics to ensure type safety across the document root and presence objects.
83-85: Add client null check in cleanup functionThe cleanup function should check if the client exists before attempting to detach the document.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
packages/react/src/DocumentProvider.tsx (2)
86-88:⚠️ Potential issueAdd client null check in cleanup function
The cleanup function should check if the client exists before attempting to detach the document.
return () => { - client.detach(newDoc); + if (client) { + client.detach(newDoc); + } };
119-120:⚠️ Potential issueFix type mismatch in useDocument update function
The update function type defined in
useDocumentdoesn't match the original context definition. The callback in the returned object includes a presence parameter that isn't present in the context type definition.update: context.update as ( - callback: (root: R, presence: P) => void, + callback: (root: R) => void, ) => void,
🧹 Nitpick comments (3)
packages/react/src/DocumentProvider.tsx (2)
138-147: Complete JSDoc comment for usePresences hookThe JSDoc comment for
usePresencesis incomplete compared to other hooks. It should include the same information about it being used within aDocumentProvider./** * `usePresences` is a custom hook that returns the presences of the document. + * This hook must be used within a `DocumentProvider`. */
65-67: Consider optimizing root object updatesCreating a new object on every update with
{ ...newDoc.getRoot() }could lead to performance issues if the root object is large. Consider implementing a more efficient update mechanism that only triggers re-renders when necessary.newDoc.subscribe(() => { - setRoot({ ...newDoc.getRoot() }); + // Only update if there are actual changes + const newRoot = newDoc.getRoot(); + setRoot(prevRoot => { + // Simple comparison might not be sufficient for complex objects + // Consider using a deep comparison library if needed + return JSON.stringify(prevRoot) !== JSON.stringify(newRoot) ? { ...newRoot } : prevRoot; + }); });packages/sdk/src/yorkie.ts (1)
53-53: Ensure Presence is included in default export and globalThisYou've correctly exported the Presence type, but for consistency, consider also adding it to the default export object (lines 142-153) and the globalThis exposure (lines 156-169).
export default { Client, Document, Primitive, Text, Counter, Tree, + Presence, LogLevel, setLogLevel, IntType: CounterType.IntegerCnt, LongType: CounterType.LongCnt, }; // And also update the globalThis definition if (typeof globalThis !== 'undefined') { (globalThis as any).yorkie = { Client, Document, Primitive, Text, Counter, Tree, + Presence, LogLevel, setLogLevel, IntType: CounterType.IntegerCnt, LongType: CounterType.LongCnt, }; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/react-todomvc/src/App.tsx(1 hunks)packages/react/src/DocumentProvider.tsx(1 hunks)packages/react/src/YorkieProvider.tsx(1 hunks)packages/react/src/index.ts(1 hunks)packages/sdk/src/yorkie.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- examples/react-todomvc/src/App.tsx
- packages/react/src/YorkieProvider.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (18.x)
hackerwins
force-pushed
the
react-provider
branch
from
28d783e to
a055289
Compare
hackerwins
force-pushed
the
react-provider
branch
from
a055289 to
469b9a6
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
packages/react/src/DocumentProvider.tsx (3)
86-88:⚠️ Potential issueAdd client null check in cleanup function
The cleanup function should check if the client exists before attempting to detach the document to prevent potential errors if the component unmounts when the client is null or undefined.
return () => { - client.detach(newDoc); + if (client) { + client.detach(newDoc); + } };
91-95:⚠️ Potential issueFix parameter type mismatch and add error handling to update function
There are two issues with the update function:
- The parameter type (
callback: (root: R, presence: Presence<P>) => void) doesn't match the type defined inDocumentContextTypeon line 24 (update: (callback: (root: R) => void) => void).- The function lacks error handling to prevent unhandled exceptions.
- const update = (callback: (root: R, presence: Presence<P>) => void) => { + const update = (callback: (root: R) => void) => { if (doc) { - doc.update(callback); + try { + doc.update(callback); + } catch (err) { + setError(err instanceof Error ? err : new Error('Failed to update document')); + } } };
116-123:⚠️ Potential issueFix type mismatch in useDocument update function
The update function type in the useDocument hook doesn't match what's defined in the DocumentContextType. The callback includes a presence parameter that's not present in the context type definition.
update: context.update as ( - callback: (root: R, presence: P) => void, + callback: (root: R) => void, ) => void,
🧹 Nitpick comments (4)
packages/react/src/DocumentProvider.tsx (3)
138-147: Update usePresences documentation for consistencyThe documentation for usePresences is missing the statement that it must be used within a DocumentProvider, unlike the other hooks which include this important information.
/** * `usePresences` is a custom hook that returns the presences of the document. + * This hook must be used within a `DocumentProvider`. */
45-52: Optimize state initialization and add types for better type safetyThe state initialization could be more type-safe and explicit to prevent potential type errors.
const client = useYorkie(); - const [doc, setDoc] = useState<Document<R, P> | undefined>(undefined); + const [doc, setDoc] = useState<Document<R, P> | undefined>(); const [loading, setLoading] = useState<boolean>(true); - const [error, setError] = useState<Error | undefined>(undefined); + const [error, setError] = useState<Error | undefined>(); const [root, setRoot] = useState(initialRoot); const [presences, setPresences] = useState< - { clientID: string; presence: any }[] + { clientID: string; presence: P }[] >([]);
97-103: Memoize the context value to prevent unnecessary re-rendersThe context value object is recreated on every render, which can cause unnecessary re-renders in consuming components. Consider memoizing it with useMemo.
+ import { createContext, useContext, useEffect, useState, useMemo } from 'react'; // ... + const contextValue = useMemo( + () => ({ root, presences, update, loading, error }), + [root, presences, update, loading, error] + ); return ( <DocumentContext.Provider - value={{ root, presences, update, loading, error }} + value={contextValue} > {children} </DocumentContext.Provider> );packages/react/src/index.ts (1)
28-36: Consider adding proper JSDoc comments for exportsAdding JSDoc comments for the exported components and hooks would improve the developer experience by providing documentation directly in the IDE.
export type { JSONArray, JSONObject }; + +/** + * Provides Yorkie client context to the application + */ export { YorkieProvider, + +/** + * Provides document context to manage document state + */ DocumentProvider, + +/** + * Hook to access document state including root, presences, update function, loading and error states + */ useDocument, + +/** + * Hook to access only the root object of the document + */ useRoot, + +/** + * Hook to access only the presences of the document + */ usePresences, + +/** + * Legacy hook for backward compatibility + */ useYorkieDoc, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/react-todomvc/src/App.tsx(1 hunks)packages/react/src/DocumentProvider.tsx(1 hunks)packages/react/src/YorkieProvider.tsx(1 hunks)packages/react/src/index.ts(1 hunks)packages/sdk/src/yorkie.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- examples/react-todomvc/src/App.tsx
- packages/react/src/YorkieProvider.tsx
- packages/sdk/src/yorkie.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (18.x)
🔇 Additional comments (1)
packages/react/src/index.ts (1)
25-26:✅ Verification successful
Maintain consistent naming between import and export for usePresences
There's a potential naming consistency issue with
usePresences(plural form). If this is intended to be used as a singular concept elsewhere in the codebase, consider standardizing the naming to prevent confusion.Also applies to: 34-35
🏁 Script executed:
#!/bin/bash # Description: Check how the usePresences hook is used in the codebase to verify naming consistency # Check for usage of usePresence(s) in the codebase echo "Checking for usage of usePresence(s) in the codebase:" rg -i "usePresence" --type ts --type tsx # Check for patterns related to presence in the codebase echo -e "\nChecking for presence-related patterns:" rg -i "presence" --type ts --type tsx | grep -i "function\|hook\|const"Length of output: 380
Below is a new shell script to re-run the verification using file globs rather than file type identifiers. This should accurately search for both “usePresences” and “usePresence” in all TS/TSX files:
Please run the above script to gather a clearer picture of how these hooks are used across the codebase. Once you’ve confirmed that the naming is consistent (or identified areas where singular versus plural usage might cause confusion), consider one of the following actions:
- If usage is consistent: Approve keeping
usePresencesas is.- If naming differs (e.g. both singular and plural forms are used): Standardize the naming (either switch to
usePresenceor update all occurrences tousePresences) to avoid confusion. This applies to the import at lines 25–26 and the similar pattern at lines 34–35 inpackages/react/src/index.ts.Once you verify this manually (or if the re-run script provides the expected output), please update the code as needed.
Action Required: Verify Naming Consistency for usePresences Across TS/TSX Files
- Confirm consistent usage of
usePresencesvs.usePresencein the DocumentProvider and elsewhere.- Update naming if discrepancies are detected.
🏁 Script executed:
#!/bin/bash # Re-run search with file globs to verify naming consistency for usePresences echo "Searching for 'usePresences' occurrences in TS/TSX files:" rg -i "usePresences" --glob "*.ts" --glob "*.tsx" echo -e "\nSearching for 'usePresence' occurrences in TS/TSX files:" rg -i "usePresence" --glob "*.ts" --glob "*.tsx" echo -e "\nSearching for generic 'presence' patterns (function/hook/const) in TS/TSX files:" rg -i "presence" --glob "*.ts" --glob "*.tsx" | grep -i -E "function|hook|const"Length of output: 16600
Naming Consistency Verified – No Changes Needed
After verifying the codebase, the custom hook is consistently exported and imported as
usePresencesin bothpackages/react/src/DocumentProvider.tsxandpackages/react/src/index.ts(lines 25–26 and 34–35). No occurrences of a singular form (usePresence) were found, so the current naming is consistent across the codebase.
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into React applications.
They also provide convenient hooks for accessing and updating shared documents
in real-time.
```tsx
<YorkieProvider apiKey={API_KEY}>
<DocumentProvider
docKey={DOC_KEY}
initialRoot={{}}
>
<App />
</DocumentProvider>
</YorkieProvider>
// ...
export default function App() {
const { root, update, loading, error } = useDocument();
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
// ...
}
```
What this PR does / why we need it?
Add YorkieProvider, DocumentProvider and suspense hooks
YorkieProvider and DocumentProvider are React context providers that enable
easy integration of Yorkie clients and documents into your React applications.
They provide convenient hooks for accessing and updating shared documents
in real-time.
Any background context you want to provide?
What are the relevant tickets?
Fixes #
Checklist
Summary by CodeRabbit
Summary by CodeRabbit
New Features
YorkieProviderandDocumentProvidercomponents for improved state management.useYorkieDocfor better document management.Refactor
useDocumenthook touseYorkieDocto better reflect its purpose.Chores
Presenceentity for improved functionality.