atom.io 0.4.1 → 0.6.0

package/src/internal/transaction-internal.ts

@@ -1,143 +1,25 @@
 import HAMT from "hamt_plus"
 import * as Rx from "rxjs"
 
+import type { ƒn } from "~/packages/anvl/src/function"
+
 import type { Store, StoreCore } from "."
-import { cacheValue, deposit, withdraw, IMPLICIT } from "."
+import {
+  abortTransaction,
+  applyTransaction,
+  buildTransaction,
+  deposit,
+  IMPLICIT,
+} from "."
+import type { TransactionOptions, TransactionToken, TransactionUpdate } from ".."
 import { getState, setState } from ".."
-import type {
-  AtomToken,
-  StateUpdate,
-  Transaction,
-  TransactionOptions,
-  TransactionToken,
-  ƒn,
-} from ".."
-
-export const TRANSACTION_PHASES = [`idle`, `building`, `applying`] as const
-export type TransactionPhase = (typeof TRANSACTION_PHASES)[number]
 
-export type KeyedStateUpdate<T> = StateUpdate<T> & {
-  key: string
-}
-export type TransactionUpdate<ƒ extends ƒn> = {
+export type Transaction<ƒ extends ƒn> = {
   key: string
-  atomUpdates: KeyedStateUpdate<unknown>[]
-  params: Parameters<ƒ>
-  output: ReturnType<ƒ>
-}
-
-export type TransactionUpdateInProgress<ƒ extends ƒn> = TransactionUpdate<ƒ> & {
-  phase: `applying` | `building`
-  core: StoreCore
-}
-export type TransactionIdle = {
-  phase: `idle`
-}
-export type TransactionStatus<ƒ extends ƒn> =
-  | TransactionIdle
-  | TransactionUpdateInProgress<ƒ>
-
-export const buildTransaction = (
-  key: string,
-  params: any[],
-  store: Store
-): void => {
-  store.transactionStatus = {
-    key,
-    phase: `building`,
-    core: {
-      atoms: store.atoms,
-      atomsThatAreDefault: store.atomsThatAreDefault,
-      operation: { open: false },
-      readonlySelectors: store.readonlySelectors,
-      timelines: store.timelines,
-      timelineAtoms: store.timelineAtoms,
-      transactions: store.transactions,
-      selectorAtoms: store.selectorAtoms,
-      selectorGraph: store.selectorGraph,
-      selectors: store.selectors,
-      valueMap: store.valueMap,
-    },
-    atomUpdates: [],
-    params,
-    output: undefined,
-  }
-  store.config.logger?.info(`🛫`, `transaction "${key}" started`)
-}
-export const applyTransaction = <ƒ extends ƒn>(
-  output: ReturnType<ƒ>,
-  store: Store
-): void => {
-  if (store.transactionStatus.phase !== `building`) {
-    store.config.logger?.warn(
-      `abortTransaction called outside of a transaction. This is probably a bug.`
-    )
-    return
-  }
-  store.config.logger?.info(
-    `🛃 apply transaction "${store.transactionStatus.key}"`
-  )
-  store.transactionStatus.phase = `applying`
-  store.transactionStatus.output = output
-  const { atomUpdates } = store.transactionStatus
-
-  for (const { key, newValue } of atomUpdates) {
-    const token: AtomToken<unknown> = { key, type: `atom` }
-    if (!HAMT.has(token.key, store.valueMap)) {
-      const atom = HAMT.get(token.key, store.transactionStatus.core.atoms)
-      store.atoms = HAMT.set(atom.key, atom, store.atoms)
-      store.valueMap = HAMT.set(atom.key, atom.default, store.valueMap)
-      store.config.logger?.info(`🔧`, `add atom "${atom.key}"`)
-    }
-    const state = withdraw(token, store)
-
-    setState(state, newValue, store)
-  }
-  const myTransaction = withdraw<ƒ>(
-    { key: store.transactionStatus.key, type: `transaction` },
-    store
-  )
-  myTransaction.subject.next({
-    key: store.transactionStatus.key,
-    atomUpdates,
-    output,
-    params: store.transactionStatus.params as Parameters<ƒ>,
-  })
-  store.transactionStatus = { phase: `idle` }
-  store.config.logger?.info(`🛬`, `transaction done`)
-}
-export const undoTransactionUpdate = <ƒ extends ƒn>(
-  update: TransactionUpdate<ƒ>,
-  store: Store
-): void => {
-  store.config.logger?.info(` ⏮ undo transaction "${update.key}" (undo)`)
-  for (const { key, oldValue } of update.atomUpdates) {
-    const token: AtomToken<unknown> = { key, type: `atom` }
-    const state = withdraw(token, store)
-    setState(state, oldValue, store)
-  }
-}
-export const redoTransactionUpdate = <ƒ extends ƒn>(
-  update: TransactionUpdate<ƒ>,
-  store: Store
-): void => {
-  store.config.logger?.info(` ⏭ redo transaction "${update.key}" (redo)`)
-  for (const { key, newValue } of update.atomUpdates) {
-    const token: AtomToken<unknown> = { key, type: `atom` }
-    const state = withdraw(token, store)
-    setState(state, newValue, store)
-  }
-}
-
-export const abortTransaction = (store: Store): void => {
-  if (store.transactionStatus.phase === `idle`) {
-    store.config.logger?.warn(
-      `abortTransaction called outside of a transaction. This is probably a bug.`
-    )
-    return
-  }
-  store.transactionStatus = { phase: `idle` }
-  store.config.logger?.info(`🪂`, `transaction fail`)
+  type: `transaction`
+  install: (store: Store) => void
+  subject: Rx.Subject<TransactionUpdate<ƒ>>
+  run: (...parameters: Parameters<ƒ>) => ReturnType<ƒ>
 }
 
 export function transaction__INTERNAL<ƒ extends ƒn>(
@@ -165,6 +47,7 @@ export function transaction__INTERNAL<ƒ extends ƒn>(
         throw thrown
       }
     },
+    install: (store) => transaction__INTERNAL(options, store),
     subject: new Rx.Subject(),
   }
   const core = target(store)

package/src/json/index.ts

@@ -0,0 +1 @@
+export * from "./select-json"

package/src/json/select-json.ts

@@ -0,0 +1,18 @@
+import * as AtomIO from "atom.io"
+
+import type { Json, JsonInterface } from "~/packages/anvl/src/json"
+
+export const selectJson = <T, J extends Json>(
+  atom: AtomIO.AtomToken<T>,
+  transform: JsonInterface<T, J>,
+  store: AtomIO.Store = AtomIO.__INTERNAL__.IMPLICIT.STORE
+): AtomIO.SelectorToken<J> =>
+  AtomIO.__INTERNAL__.selector__INTERNAL(
+    {
+      key: `${atom.key}JSON`,
+      get: ({ get }) => transform.toJson(get(atom)),
+      set: ({ set }, newValue) => set(atom, transform.fromJson(newValue)),
+    },
+    undefined,
+    store
+  )

package/src/react/index.ts

@@ -1,46 +1,2 @@
-import { useSyncExternalStore } from "react"
-
-import { subscribe, setState, __INTERNAL__, getState } from "atom.io"
-import type { ReadonlySelectorToken, StateToken } from "atom.io"
-
-import type { Modifier } from "~/packages/anvl/src/function"
-
-export type StoreHooks = {
-  useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void
-  useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T
-  useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void]
-}
-
-export const composeStoreHooks = (
-  store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE
-): StoreHooks => {
-  function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {
-    const updateState = (next: Modifier<T> | T) => setState(token, next, store)
-    return updateState
-  }
-
-  function useO<T>(token: ReadonlySelectorToken<T> | StateToken<T>): T {
-    return useSyncExternalStore<T>(
-      (observe) => subscribe(token, observe, store),
-      () => getState(token, store)
-    )
-  }
-
-  function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {
-    return [useO(token), useI(token)]
-  }
-
-  return { useI, useO, useIO }
-}
-
-export const { useI, useO, useIO } = composeStoreHooks()
-
-export function useStore<T>(
-  token: StateToken<T>
-): [T, (next: Modifier<T> | T) => void]
-export function useStore<T>(token: ReadonlySelectorToken<T>): T
-export function useStore<T>(
-  token: ReadonlySelectorToken<T> | StateToken<T>
-): T | [T, (next: Modifier<T> | T) => void] {
-  return token.type === `readonly_selector` ? useO(token) : useIO(token)
-}
+export * from "./store-context"
+export * from "./store-hooks"

package/src/react/store-context.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+import * as AtomIO from "atom.io"
+
+export const StoreContext = React.createContext<AtomIO.Store>(
+  AtomIO.__INTERNAL__.IMPLICIT.STORE
+)
+
+export const StoreProvider: React.FC<{
+  children: React.ReactNode
+  store?: AtomIO.Store
+}> = ({ children, store = AtomIO.__INTERNAL__.IMPLICIT.STORE }) => (
+  <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+)

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/explorer-states.ts

@@ -2,7 +2,6 @@ import { lastOf } from "~/packages/anvl/src/array"
 import { now } from "~/packages/anvl/src/id"
 import { Join } from "~/packages/anvl/src/join"
 import type { Entries } from "~/packages/anvl/src/object"
-import { cannotExist } from "~/packages/anvl/src/refinement"
 
 import { addToIndex, removeFromIndex } from "."
 import {
@@ -21,9 +20,7 @@ import type {
   AtomFamily,
   AtomToken,
   ReadonlySelectorFamily,
-  ReadonlySelectorToken,
   SelectorFamily,
-  TransactionToken,
   Write,
 } from ".."
 import { selectorFamily, selector, transaction, atom } from ".."
@@ -39,14 +36,17 @@ export const makeViewsPerSpaceState = (
       persistAtom<Join<null, `viewId`, `spaceId`>>(localStorage)({
         stringify: (index) => JSON.stringify(index.toJSON()),
         parse: (json) =>
-          Join.fromJSON(JSON.parse(json), cannotExist, `viewId`, `spaceId`),
+          Join.fromJSON(JSON.parse(json), {
+            from: `viewId`,
+            to: `spaceId`,
+          }),
       })(`${key}:views_per_space`),
     ],
   })
 
 export const makeSpaceViewsFamily = (
   key: string,
-  viewsPerSpaceState: AtomToken<Join>
+  viewsPerSpaceState: AtomToken<Join<null, `viewId`, `spaceId`>>
 ): ReadonlySelectorFamily<string[], string> =>
   selectorFamily<string[], string>({
     key: `${key}:space_views`,

package/src/react-explorer/index.ts

@@ -1,4 +1,4 @@
-import type { AtomToken, Write } from ".."
+import type { AtomToken, Write } from "atom.io"
 
 export * from "./AtomIOExplorer"
 

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"
@@ -30,12 +30,11 @@ export const makeSpaceLayoutState = (
         parse: (string) => {
           try {
             const json = parseJson(string)
-            const join = Join.fromJSON(
-              json,
-              hasExactProperties({ size: isNumber }),
-              `parent`,
-              `child`
-            )
+            const join = Join.fromJSON(json, {
+              isContent: hasExactProperties({ size: isNumber }),
+              from: `parent`,
+              to: `child`,
+            })
             return join
           } catch (thrown) {
             console.error(`Error parsing spaceLayoutState from localStorage`)
@@ -48,7 +47,7 @@ export const makeSpaceLayoutState = (
 
 export const makeSpaceLayoutNodeFamily = (
   key: string,
-  spaceLayoutState: AtomToken<Join<{ size: number }>>
+  spaceLayoutState: AtomToken<Join<{ size: number }, `parent`, `child`>>
 ): ReadonlySelectorFamily<{ childSpaceIds: string[]; size: number }, string> =>
   selectorFamily<{ childSpaceIds: string[]; size: number }, string>({
     key: `${key}:explorer_space`,

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/expose-family.ts

@@ -0,0 +1,101 @@
+import type { Json } from "anvl/json"
+import { parseJson } from "anvl/json"
+import * as AtomIO from "atom.io"
+
+import type { ServerConfig } from ".."
+
+const subscribeToTokenCreation = <T>(
+  family: AtomIO.AtomFamily<T> | AtomIO.SelectorFamily<T>,
+  handleTokenCreation: (token: AtomIO.StateToken<T>) => void
+): (() => void) => {
+  const subscription =
+    family.type === `atom_family`
+      ? family.subject.subscribe(handleTokenCreation)
+      : family.subject.subscribe(handleTokenCreation)
+  return () => subscription.unsubscribe()
+}
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+export const useExposeFamily = ({ socket, store }: ServerConfig) => {
+  return function exposeFamily<J extends Json>(
+    family: AtomIO.AtomFamily<J> | AtomIO.SelectorFamily<J>,
+    index: AtomIO.StateToken<Set<string>>
+  ): () => void {
+    const unsubSingleCallbacksByKey = new Map<string, () => void>()
+    const unsubFamilyCallbacksByKey = new Map<string, () => void>()
+
+    const fillFamilyUnsubRequest = () => {
+      unsubFamilyCallbacksByKey.forEach((unsub) => unsub())
+      unsubFamilyCallbacksByKey.clear()
+      socket.off(`unsub:${family.key}`, fillFamilyUnsubRequest)
+    }
+
+    const fillSingleUnsubRequest = (key: string) => {
+      socket.off(`unsub:${key}`, fillSingleUnsubRequest)
+      const unsub = unsubSingleCallbacksByKey.get(key)
+      if (unsub) {
+        unsub()
+        unsubSingleCallbacksByKey.delete(key)
+      }
+    }
+
+    const fillSubRequest = (subKey?: AtomIO.Serializable) => {
+      if (subKey === undefined) {
+        const keys = AtomIO.getState(index, store)
+        keys.forEach((key) => {
+          const token = family(key)
+          socket.emit(
+            `serve:${family.key}`,
+            parseJson(token.family?.subKey || `null`),
+            AtomIO.getState(token, store)
+          )
+        })
+
+        const unsubscribeFromTokenCreation = subscribeToTokenCreation(
+          family,
+          (token) => {
+            const unsub = AtomIO.subscribe(
+              token,
+              ({ newValue }) => {
+                socket.emit(
+                  `serve:${family.key}`,
+                  parseJson(token.family?.subKey || `null`),
+                  newValue
+                )
+              },
+              store
+            )
+            unsubFamilyCallbacksByKey.set(token.key, unsub)
+          }
+        )
+        unsubFamilyCallbacksByKey.set(family.key, unsubscribeFromTokenCreation)
+
+        socket.on(`unsub:${family.key}`, fillFamilyUnsubRequest)
+      } else {
+        const token = family(subKey)
+        socket.emit(`serve:${token.key}`, AtomIO.getState(token, store))
+        const unsubscribe = AtomIO.subscribe(
+          token,
+          ({ newValue }) => {
+            socket.emit(`serve:${token.key}`, newValue)
+          },
+          store
+        )
+        unsubSingleCallbacksByKey.set(token.key, unsubscribe)
+        socket.on(`unsub:${token.key}`, () => {
+          fillSingleUnsubRequest(token.key)
+        })
+      }
+    }
+
+    socket.on(`sub:${family.key}`, fillSubRequest)
+
+    return () => {
+      socket.off(`sub:${family.key}`, fillSubRequest)
+      unsubFamilyCallbacksByKey.forEach((unsub) => unsub())
+      unsubSingleCallbacksByKey.forEach((unsub) => unsub())
+      unsubFamilyCallbacksByKey.clear()
+      unsubSingleCallbacksByKey.clear()
+    }
+  }
+}

package/src/realtime/hook-composition/expose-single.ts

@@ -0,0 +1,38 @@
+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 useExposeSingle = ({ socket, store }: ServerConfig) => {
+  return function exposeSingle<J extends Json>(
+    token: AtomIO.StateToken<J>
+  ): () => void {
+    let unsubscribeFromStateUpdates: (() => void) | null = null
+
+    const fillUnsubRequest = () => {
+      socket.off(`unsub:${token.key}`, fillUnsubRequest)
+      unsubscribeFromStateUpdates?.()
+      unsubscribeFromStateUpdates = null
+    }
+
+    const fillSubRequest = () => {
+      socket.emit(`serve:${token.key}`, AtomIO.getState(token, store))
+      unsubscribeFromStateUpdates = AtomIO.subscribe(
+        token,
+        ({ newValue }) => {
+          socket.emit(`serve:${token.key}`, newValue)
+        },
+        store
+      )
+      socket.on(`unsub:${token.key}`, fillUnsubRequest)
+    }
+
+    socket.on(`sub:${token.key}`, fillSubRequest)
+
+    return () => {
+      socket.off(`sub:${token.key}`, fillSubRequest)
+      unsubscribeFromStateUpdates?.()
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import type * as AtomIO from "atom.io"
+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
+  store?: AtomIO.__INTERNAL__.Store
+}

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

@@ -0,0 +1,18 @@
+import * as AtomIO from "atom.io"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+import type { ServerConfig } from "."
+
+export const useReceiveTransaction = ({ socket, store }: ServerConfig) => {
+  return function receiveTransaction<ƒ extends ƒn>(
+    tx: AtomIO.TransactionToken<ƒ>
+  ): () => void {
+    const fillTransactionRequest = (update: AtomIO.TransactionUpdate<ƒ>) =>
+      AtomIO.runTransaction<ƒ>(tx, store)(...update.params)
+
+    socket.on(`tx:${tx.key}`, fillTransactionRequest)
+
+    return () => socket.off(`tx:${tx.key}`, fillTransactionRequest)
+  }
+}

package/src/realtime/index.ts

@@ -0,0 +1 @@
+export * from "./hook-composition"

package/src/realtime-react/index.ts

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