atom.io 0.5.0 → 0.6.0

package/src/react/store-hooks.ts

@@ -0,0 +1,48 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+import type { Modifier } from "~/packages/anvl/src/function"
+
+import { StoreContext } from "./store-context"
+
+export type StoreHooks = {
+  useI: <T>(token: AtomIO.StateToken<T>) => (next: Modifier<T> | T) => void
+  useO: <T>(token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>) => T
+  useIO: <T>(token: AtomIO.StateToken<T>) => [T, (next: Modifier<T> | T) => void]
+}
+export const storeHooks: StoreHooks = { useI, useO, useIO }
+
+export function useI<T>(
+  token: AtomIO.StateToken<T>
+): (next: Modifier<T> | T) => void {
+  const store = React.useContext(StoreContext)
+  const update = (next: Modifier<T> | T) => AtomIO.setState(token, next, store)
+  return update
+}
+
+export function useO<T>(
+  token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>
+): T {
+  const store = React.useContext(StoreContext)
+  return React.useSyncExternalStore<T>(
+    (observe) => AtomIO.subscribe(token, observe, store),
+    () => AtomIO.getState(token, store)
+  )
+}
+
+export function useIO<T>(
+  token: AtomIO.StateToken<T>
+): [T, (next: Modifier<T> | T) => void] {
+  return [useO(token), useI(token)]
+}
+
+export function useStore<T>(
+  token: AtomIO.StateToken<T>
+): [T, (next: Modifier<T> | T) => void]
+export function useStore<T>(token: AtomIO.ReadonlySelectorToken<T>): T
+export function useStore<T>(
+  token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>
+): T | [T, (next: Modifier<T> | T) => void] {
+  return token.type === `readonly_selector` ? useO(token) : useIO(token)
+}

package/src/react-devtools/AtomIODevtools.tsx

@@ -2,8 +2,8 @@ import type { FC } from "react"
 import { useRef } from "react"
 
 import { atom, __INTERNAL__ } from "atom.io"
-import { useI, useO, useIO } from "atom.io/react"
 import type { StoreHooks } from "atom.io/react"
+import { useI, useO, useIO } from "atom.io/react"
 import { LayoutGroup, motion, spring } from "framer-motion"
 
 import { TokenList } from "./TokenList"

package/src/react-explorer/AtomIOExplorer.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from "react"
 import { useEffect } from "react"
 
+import type { StoreHooks } from "atom.io/react"
 import { Link, MemoryRouter, useLocation } from "react-router-dom"
 
-import type { composeStoreHooks } from "~/packages/atom.io/src/react"
 import { ErrorBoundary } from "~/packages/hamr/src/react-error-boundary"
 import type { WC } from "~/packages/hamr/src/react-json-editor"
 
@@ -17,7 +17,7 @@ export type ExplorerOptions = {
     SpaceWrapper: WC
     CloseSpaceButton: FC<{ onClick: () => void }>
   }
-  storeHooks: ReturnType<typeof composeStoreHooks>
+  storeHooks: StoreHooks
 }
 
 const DEFAULT_COMPONENTS: ExplorerOptions[`Components`] = {

package/src/react-explorer/space-states.ts

@@ -5,8 +5,8 @@ import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
 import { hasExactProperties } from "~/packages/anvl/src/object"
 
 import { persistStringSetAtom } from "./explorer-effects"
-import type { AtomToken, ReadonlySelectorFamily, SelectorFamily } from ".."
-import { selectorFamily } from ".."
+import type { AtomToken, ReadonlySelectorFamily } from ".."
+import { SelectorFamily, selectorFamily } from ".."
 import type { AtomFamily } from "../atom"
 import { atom, atomFamily } from "../atom"
 import { lazyLocalStorageEffect, persistAtom } from "../web-effects"

package/src/realtime/README.md

@@ -0,0 +1,33 @@
+# CLIENT ACTS AND REPORTS
+- [x] input event fires
+- [x] event handler runs transaction
+  - [x] client store updates optimistically
+- [ ] on success
+  - [ ] client generates transactionId and optimistic TransactionUpdate
+  - [ ] client pushes TransactionUpdate to TimelineData.history
+  - [ ] client sets TransactionUpdate in optimisticTransactions map by transactionId
+  - [ ] client emits TransactionRequest { key, params, transactionId }
+
+# SERVER VALIDATES, INTEGRATES, AND BROADCASTS
+## use
+- [x] server receives TransactionRequest
+  - `{ key, params, transactionId }`
+- [ ] verify `transactionId` is unique
+- [ ] server adds timestamp to `TransactionRequest`
+  - `{ key, params, transactionId, timestamp }`
+- [ ] server runs transaction, computing `TransactionUpdate` in the process
+  - [ ] emit `TransactionUpdate` 
+    - `{ key, params, transactionId, timestamp, atomUpdates, output }`
+- [ ] server adds `TransactionUpdate` to TimelineData.history
+
+# CLIENT BEHOLDS AND REACTS
+- [ ] client receives official TransactionUpdate
+  - [ ] client retrieves its own TransactionUpdate from optimisticTransactions map
+  - [ ] client compares official and optimistic TransactionUpdates
+    - [ ] (stringify atomUpdates and compare strict)
+  - [ ] if match, client removes TransactionUpdate from optimisticTransactions map
+  - [ ] if mismatch
+    - [ ] client undoes timeline until it finds its own TransactionUpdate
+    - [ ] client replaces its own TransactionUpdate with official TransactionUpdate
+    - [ ] client removes its own TransactionUpdate from optimisticTransactions map
+    - [ ] client redoes timeline until it reaches the "HEAD"

package/src/realtime/hook-composition/index.ts

@@ -4,6 +4,7 @@ import type * as SocketIO from "socket.io"
 export * from "./expose-single"
 export * from "./expose-family"
 export * from "./receive-transaction"
+export * from "./receive-state"
 
 export type ServerConfig = {
   socket: SocketIO.Socket

package/src/realtime/hook-composition/receive-state.ts

@@ -0,0 +1,29 @@
+import type { Json } from "anvl/json"
+import * as AtomIO from "atom.io"
+
+import type { ServerConfig } from ".."
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+export const useReceiveState = ({ socket, store }: ServerConfig) => {
+  return function receiveState<J extends Json>(
+    token: AtomIO.StateToken<J>
+  ): () => void {
+    const publish = (newValue: J) => AtomIO.setState(token, newValue, store)
+
+    const fillPubUnclaim = () => {
+      socket.off(`pub:${token.key}`, publish)
+      socket.off(`unclaim:${token.key}`, fillPubUnclaim)
+    }
+    const fillPubClaim = () => {
+      socket.on(`pub:${token.key}`, publish)
+      socket.on(`unclaim:${token.key}`, fillPubUnclaim)
+    }
+
+    socket.on(`claim:${token.key}`, fillPubClaim)
+
+    return () => {
+      socket.off(`claim:${token.key}`, fillPubClaim)
+      socket.off(`pub:${token.key}`, publish)
+    }
+  }
+}

package/src/realtime/hook-composition/receive-transaction.ts

@@ -8,9 +8,8 @@ export const useReceiveTransaction = ({ socket, store }: ServerConfig) => {
   return function receiveTransaction<ƒ extends ƒn>(
     tx: AtomIO.TransactionToken<ƒ>
   ): () => void {
-    const fillTransactionRequest = (
-      update: AtomIO.__INTERNAL__.TransactionUpdate<ƒ>
-    ) => AtomIO.runTransaction<ƒ>(tx, store)(...update.params)
+    const fillTransactionRequest = (update: AtomIO.TransactionUpdate<ƒ>) =>
+      AtomIO.runTransaction<ƒ>(tx, store)(...update.params)
 
     socket.on(`tx:${tx.key}`, fillTransactionRequest)
 

package/src/realtime-react/index.ts

@@ -0,0 +1,3 @@
+export * from "./realtime-context"
+export * from "./realtime-hooks"
+export * from "./realtime-state"

package/src/realtime-react/realtime-context.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import * as AR from "atom.io/react"
+import type { Socket } from "socket.io-client"
+import { io } from "socket.io-client"
+
+import { myIdState__INTERNAL } from "./realtime-state"
+
+export const RealtimeContext = React.createContext<{ socket: Socket }>({
+  socket: io(),
+})
+
+export const RealtimeProvider: React.FC<{
+  children: React.ReactNode
+  socket: Socket
+}> = ({ children, socket }) => {
+  const setMyId = AR.useI(myIdState__INTERNAL)
+  React.useEffect(() => {
+    socket.on(`connect`, () => {
+      setMyId(socket.id)
+    })
+    socket.on(`disconnect`, () => {
+      setMyId(null)
+    })
+  }, [socket, setMyId])
+  return (
+    <RealtimeContext.Provider value={{ socket }}>
+      {children}
+    </RealtimeContext.Provider>
+  )
+}

package/src/realtime-react/realtime-hooks.ts

@@ -0,0 +1,39 @@
+import type * as AtomIO from "atom.io"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+import type { Json } from "~/packages/anvl/src/json"
+
+import { usePull } from "./use-pull"
+import { usePullFamily } from "./use-pull-family"
+import { usePullFamilyMember } from "./use-pull-family-member"
+import { usePush } from "./use-push"
+import { useServerAction } from "./use-server-action"
+
+export type RealtimeHooks = {
+  usePull: <J extends Json>(token: AtomIO.StateToken<J>) => void
+  usePullFamily: <J extends Json>(
+    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>
+  ) => void
+  usePullFamilyMember: <J extends Json>(
+    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>,
+    subKey: string
+  ) => void
+  usePush: <J extends Json>(token: AtomIO.StateToken<J>) => void
+  useServerAction: <ƒ extends ƒn>(
+    token: AtomIO.TransactionToken<ƒ>
+  ) => (...parameters: Parameters<ƒ>) => ReturnType<ƒ>
+}
+
+export const realtimeHooks: RealtimeHooks = {
+  usePull,
+  usePullFamily,
+  usePullFamilyMember,
+  usePush,
+  useServerAction,
+}
+
+export * from "./use-pull"
+export * from "./use-pull-family"
+export * from "./use-pull-family-member"
+export * from "./use-push"
+export * from "./use-server-action"

package/src/realtime-react/realtime-state.ts

@@ -0,0 +1,10 @@
+import * as AtomIO from "atom.io"
+
+export const myIdState__INTERNAL = AtomIO.atom<string | null>({
+  key: `myId__INTERNAL`,
+  default: null,
+})
+export const myIdState = AtomIO.selector<string | null>({
+  key: `myId`,
+  get: ({ get }) => get(myIdState__INTERNAL),
+})

package/src/realtime-react/use-pull-family-member.ts

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+import type { Json } from "~/packages/anvl/src/json"
+
+import { RealtimeContext } from "./realtime-context"
+import { StoreContext } from "../react"
+
+export function usePullFamilyMember<J extends Json>(
+  family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>,
+  subKey: AtomIO.Serializable
+): void {
+  const token = family(subKey)
+  const { socket } = React.useContext(RealtimeContext)
+  const store = React.useContext(StoreContext)
+  React.useEffect(() => {
+    socket?.on(`serve:${token.key}`, (data: J) => {
+      AtomIO.setState(family(subKey), data, store)
+    })
+    socket?.emit(`sub:${family.key}`, subKey)
+    return () => {
+      socket?.off(`serve:${token.key}`)
+      socket?.emit(`unsub:${token.key}`)
+    }
+  }, [family.key])
+}

package/src/realtime-react/use-pull-family.ts

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+import type { Json } from "~/packages/anvl/src/json"
+
+import { RealtimeContext } from "./realtime-context"
+import { StoreContext } from "../react"
+
+export function usePullFamily<J extends Json>(
+  family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>
+): void {
+  const { socket } = React.useContext(RealtimeContext)
+  const store = React.useContext(StoreContext)
+  React.useEffect(() => {
+    socket.on(`serve:${family.key}`, (key: Json, data: J) => {
+      AtomIO.setState(family(key), data, store)
+    })
+    socket?.emit(`sub:${family.key}`)
+    return () => {
+      socket?.off(`serve:${family.key}`)
+      socket?.emit(`unsub:${family.key}`)
+    }
+  }, [family.key])
+}

package/src/realtime-react/use-pull.ts

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+import type { Json } from "~/packages/anvl/src/json"
+
+import { RealtimeContext } from "./realtime-context"
+import { StoreContext } from "../react"
+
+export function usePull<J extends Json>(token: AtomIO.StateToken<J>): void {
+  const { socket } = React.useContext(RealtimeContext)
+  const store = React.useContext(StoreContext)
+  React.useEffect(() => {
+    socket.on(`serve:${token.key}`, (data: J) => {
+      AtomIO.setState(token, data, store)
+    })
+    socket.emit(`sub:${token.key}`)
+    return () => {
+      socket.off(`serve:${token.key}`)
+      socket.emit(`unsub:${token.key}`)
+    }
+  }, [token.key])
+}

package/src/realtime-react/use-push.ts

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+import type { Json } from "~/packages/anvl/src/json"
+
+import { RealtimeContext } from "./realtime-context"
+import { StoreContext } from "../react"
+
+export function usePush<J extends Json>(token: AtomIO.StateToken<J>): void {
+  const { socket } = React.useContext(RealtimeContext)
+  const store = React.useContext(StoreContext)
+  React.useEffect(() => {
+    socket.emit(`claim:${token.key}`)
+    AtomIO.subscribe(
+      token,
+      ({ newValue }) => {
+        socket.emit(`pub:${token.key}`, newValue)
+      },
+      store
+    )
+    return () => {
+      socket.emit(`unclaim:${token.key}`)
+    }
+  }, [token.key])
+}

package/src/realtime-react/use-server-action.ts

@@ -0,0 +1,34 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+import { StoreContext } from "atom.io/react"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+import { RealtimeContext } from "./realtime-context"
+
+const TX_SUBS = new Map<string, number>()
+export function useServerAction<ƒ extends ƒn>(
+  token: AtomIO.TransactionToken<ƒ>
+): (...parameters: Parameters<ƒ>) => ReturnType<ƒ> {
+  const store = React.useContext(StoreContext)
+  const { socket } = React.useContext(RealtimeContext)
+  React.useEffect(() => {
+    const count = TX_SUBS.get(token.key) ?? 0
+    TX_SUBS.set(token.key, count + 1)
+    const unsubscribe =
+      count === 0
+        ? AtomIO.subscribeToTransaction(
+            token,
+            (update) => socket.emit(`tx:${token.key}`, update),
+            store
+          )
+        : () => null
+    return () => {
+      const newCount = TX_SUBS.get(token.key) ?? 0
+      TX_SUBS.set(token.key, newCount - 1)
+      unsubscribe()
+    }
+  }, [token.key])
+  return AtomIO.runTransaction(token, store)
+}

package/src/silo.ts

@@ -1,14 +1,17 @@
-import { type timeline, getState, setState, subscribe } from "."
+import type { redo, timeline, undo } from "."
+import { getState, setState, subscribe } from "."
 import type { atom, atomFamily } from "./atom"
+import type { Store } from "./internal"
 import {
-  type Store,
   atomFamily__INTERNAL,
   atom__INTERNAL,
   createStore,
+  redo__INTERNAL,
   selectorFamily__INTERNAL,
   selector__INTERNAL,
   timeline__INTERNAL,
   transaction__INTERNAL,
+  undo__INTERNAL,
 } from "./internal"
 import type { selector, selectorFamily } from "./selector"
 import type { transaction } from "./transaction"
@@ -16,7 +19,8 @@ import type { transaction } from "./transaction"
 export type Silo = ReturnType<typeof silo>
 
 export const silo = (
-  name: string
+  name: string,
+  fromStore: Store | null = null
 ): {
   store: Store
   atom: typeof atom
@@ -28,8 +32,10 @@ export const silo = (
   getState: typeof getState
   setState: typeof setState
   subscribe: typeof subscribe
+  undo: typeof undo
+  redo: typeof redo
 } => {
-  const store = createStore(name)
+  const store = createStore(name, fromStore)
   return {
     store,
     atom: (options) => atom__INTERNAL(options, undefined, store),
@@ -41,5 +47,7 @@ export const silo = (
     getState: (token) => getState(token, store),
     setState: (token, newValue) => setState(token, newValue, store),
     subscribe: (token, handler) => subscribe(token, handler, store),
+    undo: (token) => undo__INTERNAL(token, store),
+    redo: (token) => redo__INTERNAL(token, store),
   }
 }

package/src/subscribe.ts

@@ -1,10 +1,18 @@
 import type { ƒn } from "~/packages/anvl/src/function"
 
-import type { ReadonlySelectorToken, StateToken, TransactionToken } from "."
-import type { Store, TransactionUpdate } from "./internal"
+import type {
+  ReadonlySelectorToken,
+  StateToken,
+  TimelineToken,
+  TimelineUpdate,
+  TransactionToken,
+  TransactionUpdate,
+} from "."
+import type { Store } from "./internal"
 import { IMPLICIT, subscribeToRootAtoms, withdraw } from "./internal"
 
 export type StateUpdate<T> = { newValue: T; oldValue: T }
+export type KeyedStateUpdate<T> = StateUpdate<T> & { key: string }
 export type UpdateHandler<T> = (update: StateUpdate<T>) => void
 
 export const subscribe = <T>(
@@ -65,3 +73,23 @@ export const subscribeToTransaction = <ƒ extends ƒn>(
   }
   return unsubscribe
 }
+
+export const subscribeToTimeline = (
+  token: TimelineToken,
+  handleUpdate: (update: TimelineUpdate) => void,
+  store = IMPLICIT.STORE
+): (() => void) => {
+  const tl = withdraw(token, store)
+  if (tl === null) {
+    throw new Error(
+      `Cannot subscribe to timeline "${token.key}": timeline not found in store "${store.config.name}".`
+    )
+  }
+  store.config.logger?.info(`👀 subscribe to timeline "${token.key}"`)
+  const subscription = tl.subject.subscribe(handleUpdate)
+  const unsubscribe = () => {
+    store.config.logger?.info(`🙈 unsubscribe from timeline "${token.key}"`)
+    subscription.unsubscribe()
+  }
+  return unsubscribe
+}

package/src/timeline.ts

@@ -1,4 +1,9 @@
 import type { AtomFamily, AtomToken } from "."
+import type {
+  TimelineAtomUpdate,
+  TimelineSelectorUpdate,
+  TimelineTransactionUpdate,
+} from "./internal"
 import { IMPLICIT } from "./internal"
 import { redo__INTERNAL, timeline__INTERNAL, undo__INTERNAL } from "./internal/"
 
@@ -12,6 +17,11 @@ export type TimelineOptions = {
   atoms: (AtomFamily<any> | AtomToken<any>)[]
 }
 
+export type TimelineUpdate =
+  | TimelineAtomUpdate
+  | TimelineSelectorUpdate
+  | TimelineTransactionUpdate
+
 export const timeline = (options: TimelineOptions): TimelineToken => {
   return timeline__INTERNAL(options)
 }

package/src/transaction.ts

@@ -1,11 +1,22 @@
-import type * as Rx from "rxjs"
-
 import type { ƒn } from "~/packages/anvl/src/function"
 
-import type { ReadonlySelectorToken, StateToken, TransactionToken } from "."
-import type { Store, TransactionUpdate } from "./internal"
+import type { KeyedStateUpdate, ReadonlySelectorToken, StateToken } from "."
+import type { Store } from "./internal"
 import { IMPLICIT, transaction__INTERNAL, withdraw } from "./internal"
 
+export type TransactionToken<_> = {
+  key: string
+  type: `transaction`
+  __brand?: _
+}
+
+export type TransactionUpdate<ƒ extends ƒn> = {
+  key: string
+  atomUpdates: KeyedStateUpdate<unknown>[]
+  params: Parameters<ƒ>
+  output: ReturnType<ƒ>
+}
+
 export type Transactors = {
   get: <S>(state: ReadonlySelectorToken<S> | StateToken<S>) => S
   set: <S>(state: StateToken<S>, newValue: S | ((oldValue: S) => S)) => void
@@ -27,12 +38,6 @@ export type TransactionOptions<ƒ extends ƒn> = {
   do: Write<ƒ>
 }
 
-export type Transaction<ƒ extends ƒn> = {
-  key: string
-  type: `transaction`
-  run: (...parameters: Parameters<ƒ>) => ReturnType<ƒ>
-  subject: Rx.Subject<TransactionUpdate<ƒ>>
-}
 export type TransactionIO<Token extends TransactionToken<any>> =
   Token extends TransactionToken<infer ƒ> ? ƒ : never
 

package/src/realtime-client/hook-composition/compose-realtime-hooks.ts

@@ -1,62 +0,0 @@
-import { atom, selector } from "atom.io"
-import * as AtomIO from "atom.io"
-import type * as SocketIO from "socket.io-client"
-
-import type { ƒn } from "~/packages/anvl/src/function"
-import type { Json } from "~/packages/anvl/src/json"
-
-import { realtimeClientFamilyHook } from "./realtime-client-family"
-import { realtimeClientFamilyMemberHook } from "./realtime-client-family-member"
-import { realtimeClientSingleHook } from "./realtime-client-single"
-import { realtimeClientTransactionHook } from "./realtime-client-transaction"
-import { atom__INTERNAL, selector__INTERNAL } from "../../internal"
-
-export type RealtimeClientHooks = {
-  socketIdState: AtomIO.ReadonlySelectorToken<string | null>
-  useRemoteState: <J extends Json>(token: AtomIO.StateToken<J>) => void
-  useRemoteFamily: <J extends Json>(
-    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>
-  ) => void
-  useRemoteFamilyMember: <J extends Json>(
-    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>,
-    subKey: string
-  ) => void
-  useRemoteTransaction: <ƒ extends ƒn>(
-    token: AtomIO.TransactionToken<ƒ>
-  ) => (...parameters: Parameters<ƒ>) => ReturnType<ƒ>
-}
-
-export const composeRealtimeHooks = (
-  socket: SocketIO.Socket,
-  store: AtomIO.Store = AtomIO.__INTERNAL__.IMPLICIT.STORE
-): RealtimeClientHooks => {
-  const socketIdState_INTERNAL = atom__INTERNAL<string | null>(
-    {
-      key: `socketIdState_INTERNAL`,
-      default: null,
-      effects: [
-        ({ setSelf }) => {
-          socket.on(`connection`, () => {
-            setSelf(socket.id)
-          })
-        },
-      ],
-    },
-    undefined,
-    store
-  )
-  return {
-    socketIdState: selector__INTERNAL<string | null>(
-      {
-        key: `socketIdState`,
-        get: ({ get }) => get(socketIdState_INTERNAL),
-      },
-      undefined,
-      store
-    ),
-    useRemoteState: realtimeClientSingleHook(socket, store),
-    useRemoteFamily: realtimeClientFamilyHook(socket, store),
-    useRemoteFamilyMember: realtimeClientFamilyMemberHook(socket, store),
-    useRemoteTransaction: realtimeClientTransactionHook(socket, store),
-  }
-}

package/src/realtime-client/hook-composition/realtime-client-family-member.ts

@@ -1,28 +0,0 @@
-import { useEffect } from "react"
-
-import * as AtomIO from "atom.io"
-import type * as SocketIO from "socket.io-client"
-
-import type { Json } from "~/packages/anvl/src/json"
-
-export const realtimeClientFamilyMemberHook =
-  (
-    socket: SocketIO.Socket,
-    store: AtomIO.Store = AtomIO.__INTERNAL__.IMPLICIT.STORE
-  ) =>
-  <J extends Json>(
-    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>,
-    subKey: AtomIO.Serializable
-  ): void => {
-    const token = family(subKey)
-    useEffect(() => {
-      socket.on(`serve:${token.key}`, (data: J) => {
-        AtomIO.setState(family(subKey), data, store)
-      })
-      socket.emit(`sub:${family.key}`, subKey)
-      return () => {
-        socket.off(`serve:${token.key}`)
-        socket.emit(`unsub:${token.key}`)
-      }
-    }, [family.key])
-  }