Rename ReplayDocEventType to DocEventScope

packages/devtools/src/devtools/contexts/YorkieSource.tsx

@@ -30,7 +30,7 @@ import { Code, YorkieError } from '@yorkie-js-sdk/src/util/error';
 
 const DocKeyContext = createContext<string>(null);
 const YorkieDocContext = createContext(null);
-const ReplayDocEventsContext = createContext<{
+const DocEventsForReplayContext = createContext<{
   events: Array<Devtools.DocEventsForReplay>;
   hidePresenceEvents: boolean;
   setHidePresenceEvents: Dispatch<SetStateAction<boolean>>;
@@ -43,7 +43,7 @@ type Props = {
 export function YorkieSourceProvider({ children }: Props) {
   const [currentDocKey, setCurrentDocKey] = useState<string>('');
   const [doc, setDoc] = useState(null);
-  const [replayDocEvents, setReplayDocEvents] = useState<
+  const [docEventsForReplay, setDocEventsForReplay] = useState<
     Array<Devtools.DocEventsForReplay>
   >([]);
 
@@ -52,7 +52,7 @@ export function YorkieSourceProvider({ children }: Props) {
 
   const resetDocument = () => {
     setCurrentDocKey('');
-    setReplayDocEvents([]);
+    setDocEventsForReplay([]);
     setDoc(null);
   };
 
@@ -72,11 +72,11 @@ export function YorkieSourceProvider({ children }: Props) {
       case 'doc::sync::full':
         // TODO(chacha912): Notify the user that they need to use the latest version of Yorkie-JS-SDK.
         if (message.events === undefined) break;
-        setReplayDocEvents(message.events);
+        setDocEventsForReplay(message.events);
         break;
       case 'doc::sync::partial':
         if (message.event === undefined) break;
-        setReplayDocEvents((events) => [...events, message.event]);
+        setDocEventsForReplay((events) => [...events, message.event]);
         break;
     }
   }, []);
@@ -103,17 +103,17 @@ export function YorkieSourceProvider({ children }: Props) {
 
   return (
     <DocKeyContext.Provider value={currentDocKey}>
-      <ReplayDocEventsContext.Provider
+      <DocEventsForReplayContext.Provider
         value={{
-          events: replayDocEvents,
+          events: docEventsForReplay,
           hidePresenceEvents,
           setHidePresenceEvents,
         }}
       >
         <YorkieDocContext.Provider value={[doc, setDoc]}>
           {children}
         </YorkieDocContext.Provider>
-      </ReplayDocEventsContext.Provider>
+      </DocEventsForReplayContext.Provider>
     </DocKeyContext.Provider>
   );
 }
@@ -140,51 +140,54 @@ export function useYorkieDoc() {
   return value;
 }
 
-export enum ReplayDocEventType {
-  Document = 'document',
+/**
+ * `DocEventScope` represents the scope of the document event.
+ */
+export enum DocEventScope {
+  Root = 'root',
   Presence = 'presence',
+  Document = 'document',
 }
 
-export const getReplayDocEventType = (
-  event: Devtools.DocEventsForReplay,
-): ReplayDocEventType => {
-  for (const docEvent of event) {
+export const getDocEventsScope = (
+  events: Devtools.DocEventsForReplay,
+): DocEventScope => {
+  for (const e of events) {
     if (
-      docEvent.type === DocEventType.StatusChanged ||
-      docEvent.type === DocEventType.Snapshot ||
-      docEvent.type === DocEventType.LocalChange ||
-      docEvent.type === DocEventType.RemoteChange
+      e.type === DocEventType.Snapshot ||
+      e.type === DocEventType.LocalChange ||
+      e.type === DocEventType.RemoteChange
     ) {
-      return ReplayDocEventType.Document;
+      return DocEventScope.Root;
+    } else if (e.type === DocEventType.StatusChanged) {
+      return DocEventScope.Document;
     }
   }
 
-  return ReplayDocEventType.Presence;
+  return DocEventScope.Presence;
 };
 
-export function useReplayDocEvents() {
+export function useDocEventsForReplay() {
   const { events, hidePresenceEvents, setHidePresenceEvents } = useContext(
-    ReplayDocEventsContext,
+    DocEventsForReplayContext,
   );
 
   if (events === undefined) {
     throw new YorkieError(
       Code.ErrContextNotProvided,
-      'useReplayDocEvents should be used within YorkieSourceProvider',
+      'useDocEventsForReplay should be used within YorkieSourceProvider',
     );
   }
 
   // create an enhanced events with metadata
   const enhancedEvents = useMemo(() => {
     return events.map((event) => {
-      const replayDocEventType = getReplayDocEventType(event);
+      const scope = getDocEventsScope(event);
 
       return {
         event,
-        replayDocEventType: replayDocEventType,
-        isFiltered:
-          hidePresenceEvents &&
-          replayDocEventType === ReplayDocEventType.Presence,
+        scope,
+        isFiltered: hidePresenceEvents && scope === DocEventScope.Presence,
       };
     });
   }, [hidePresenceEvents, events]);

packages/devtools/src/devtools/panel/index.tsx

@@ -23,7 +23,7 @@ import { SelectedPresenceProvider } from '../contexts/SelectedPresence';
 import {
   YorkieSourceProvider,
   useCurrentDocKey,
-  useReplayDocEvents,
+  useDocEventsForReplay,
   useYorkieDoc,
 } from '../contexts/YorkieSource';
 import { Document } from '../tabs/Document';
@@ -34,7 +34,7 @@ import { Separator } from '../components/ResizableSeparator';
 const Panel = () => {
   const currentDocKey = useCurrentDocKey();
   const { originalEvents, presenceFilteredEvents, hidePresenceEvents } =
-    useReplayDocEvents();
+    useDocEventsForReplay();
   const [, setDoc] = useYorkieDoc();
   const [selectedEventIndexInfo, setSelectedEventIndexInfo] = useState({
     index: null,

packages/devtools/src/devtools/tabs/History.tsx

@@ -19,10 +19,7 @@ import { DocEventType, Change, Devtools } from 'yorkie-js-sdk';
 import Slider from 'rc-slider';
 import { JSONView } from '../components/JsonView';
 import { CursorIcon, DocumentIcon } from '../icons';
-import {
-  ReplayDocEventType,
-  useReplayDocEvents,
-} from '../contexts/YorkieSource';
+import { DocEventScope, useDocEventsForReplay } from '../contexts/YorkieSource';
 
 const SLIDER_MARK_WIDTH = 24;
 
@@ -75,7 +72,7 @@ export function History({
     presenceFilteredEvents,
     hidePresenceEvents,
     setHidePresenceEvents,
-  } = useReplayDocEvents();
+  } = useDocEventsForReplay();
 
   const events = hidePresenceEvents ? presenceFilteredEvents : originalEvents;
 
@@ -109,13 +106,10 @@ export function History({
     const marks = {};
     for (const [index, event] of events.entries()) {
       const source = event.event[0].source;
-      const replayDocEventType = event.replayDocEventType;
 
       marks[index] = (
-        <span
-          className={`mark-history mark-${source} mark-${replayDocEventType}`}
-        >
-          {replayDocEventType === ReplayDocEventType.Presence ? (
+        <span className={`mark-history mark-${source} mark-${event.scope}`}>
+          {event.scope === DocEventScope.Presence ? (
             <CursorIcon />
           ) : (
             <DocumentIcon />

packages/sdk/src/devtools/index.ts

@@ -25,18 +25,18 @@ let devtoolsStatus: DevtoolsStatus = 'disconnected';
 const unsubsByDocKey = new Map<string, Array<() => void>>();
 
 /**
- * `replayEventsByDocKey` stores all events in the document for replaying
+ * `docEventsForReplayByDocKey` stores all events in the document for replaying
  * (time-traveling feature) in Devtools. Later, external storage such as
  * IndexedDB will be used.
  */
-const replayEventsByDocKey = new Map<string, Array<DocEventsForReplay>>();
+const docEventsForReplayByDocKey = new Map<string, Array<DocEventsForReplay>>();
 declare global {
   interface Window {
-    replayEventsByDocKey: Map<string, Array<DocEventsForReplay>>;
+    docEventsForReplayByDocKey: Map<string, Array<DocEventsForReplay>>;
   }
 }
 if (typeof window !== 'undefined') {
-  window.replayEventsByDocKey = replayEventsByDocKey;
+  window.docEventsForReplayByDocKey = docEventsForReplayByDocKey;
 }
 
 /**
@@ -75,13 +75,13 @@ export function setupDevtools<T, P extends Indexable>(
     return;
   }
 
-  replayEventsByDocKey.set(doc.getKey(), []);
+  docEventsForReplayByDocKey.set(doc.getKey(), []);
   const unsub = doc.subscribe('all', (event) => {
     if (!isDocEventsForReplay(event)) {
       return;
     }
 
-    replayEventsByDocKey.get(doc.getKey())!.push(event);
+    docEventsForReplayByDocKey.get(doc.getKey())!.push(event);
     if (devtoolsStatus === 'synced') {
       sendToPanel({
         msg: 'doc::sync::partial',
@@ -132,7 +132,7 @@ export function setupDevtools<T, P extends Indexable>(
           sendToPanel({
             msg: 'doc::sync::full',
             docKey: doc.getKey(),
-            events: replayEventsByDocKey.get(doc.getKey())!,
+            events: docEventsForReplayByDocKey.get(doc.getKey())!,
           });
           logger.info(`[YD] Devtools subscribed. Doc: ${doc.getKey()}`);
           break;

packages/sdk/src/devtools/types.ts

@@ -127,7 +127,7 @@ export type DocEventsForReplay = Array<DocEventForReplay>;
 export function isDocEventForReplay(
   event: DocEvent,
 ): event is DocEventForReplay {
-  const typesForDocReplay = [
+  const types = [
     DocEventType.StatusChanged,
     DocEventType.Snapshot,
     DocEventType.LocalChange,
@@ -138,7 +138,7 @@ export function isDocEventForReplay(
     DocEventType.PresenceChanged,
   ];
 
-  return typesForDocReplay.includes(event.type);
+  return types.includes(event.type);
 }
 
 /**

packages/sdk/src/document/document.ts

@@ -1780,7 +1780,7 @@ export class Document<T, P extends Indexable = Indexable> {
   }
 
   /**
-   * `applyEventsForDocReplay` applies the given events into this document.
+   * `applyDocEventsForReplay` applies the given events into this document.
    */
   public applyDocEventsForReplay(event: Array<Devtools.DocEventForReplay<P>>) {
     for (const docEvent of event) {