atom.io 0.4.1 → 0.6.0

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/selector.ts

@@ -11,12 +11,15 @@ export type SelectorOptions<T> = {
   get: Read<() => T>
   set: Write<(newValue: T) => void>
 }
-export type ReadonlySelectorOptions<T> = Omit<SelectorOptions<T>, `set`>
+export type ReadonlySelectorOptions<T> = {
+  key: string
+  get: Read<() => T>
+}
 
+export function selector<T>(options: SelectorOptions<T>): SelectorToken<T>
 export function selector<T>(
   options: ReadonlySelectorOptions<T>
 ): ReadonlySelectorToken<T>
-export function selector<T>(options: SelectorOptions<T>): SelectorToken<T>
 export function selector<T>(
   options: ReadonlySelectorOptions<T> | SelectorOptions<T>
 ): ReadonlySelectorToken<T> | SelectorToken<T> {
@@ -28,10 +31,10 @@ export type SelectorFamilyOptions<T, K extends Serializable> = {
   get: (key: K) => Read<() => T>
   set: (key: K) => Write<(newValue: T) => void>
 }
-export type ReadonlySelectorFamilyOptions<T, K extends Serializable> = Omit<
-  SelectorFamilyOptions<T, K>,
-  `set`
->
+export type ReadonlySelectorFamilyOptions<T, K extends Serializable> = {
+  key: string
+  get: (key: K) => Read<() => T>
+}
 
 export type SelectorFamily<T, K extends Serializable = Serializable> = ((
   key: K

package/src/silo.ts

@@ -0,0 +1,53 @@
+import type { redo, timeline, undo } from "."
+import { getState, setState, subscribe } from "."
+import type { atom, atomFamily } from "./atom"
+import type { Store } from "./internal"
+import {
+  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"
+
+export type Silo = ReturnType<typeof silo>
+
+export const silo = (
+  name: string,
+  fromStore: Store | null = null
+): {
+  store: Store
+  atom: typeof atom
+  atomFamily: typeof atomFamily
+  selector: typeof selector
+  selectorFamily: typeof selectorFamily
+  transaction: typeof transaction
+  timeline: typeof timeline
+  getState: typeof getState
+  setState: typeof setState
+  subscribe: typeof subscribe
+  undo: typeof undo
+  redo: typeof redo
+} => {
+  const store = createStore(name, fromStore)
+  return {
+    store,
+    atom: (options) => atom__INTERNAL(options, undefined, store),
+    atomFamily: (options) => atomFamily__INTERNAL(options, store),
+    selector: (options) => selector__INTERNAL(options, undefined, store) as any,
+    selectorFamily: (options) => selectorFamily__INTERNAL(options, store) as any,
+    transaction: (options) => transaction__INTERNAL(options, store),
+    timeline: (options) => timeline__INTERNAL(options, store),
+    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,8 +1,18 @@
-import type { ReadonlySelectorToken, StateToken, TransactionToken, ƒn } from "."
-import type { Store, TransactionUpdate } from "./internal"
+import type { ƒn } from "~/packages/anvl/src/function"
+
+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>(
@@ -11,6 +21,11 @@ export const subscribe = <T>(
   store: Store = IMPLICIT.STORE
 ): (() => void) => {
   const state = withdraw<T>(token, store)
+  if (state === null) {
+    throw new Error(
+      `State "${token.key}" not found in this store. Did you forget to initialize with the "atom" or "selector" function?`
+    )
+  }
   const subscription = state.subject.subscribe(handleUpdate)
   store.config.logger?.info(`👀 subscribe to "${state.key}"`)
   const dependencySubscriptions =
@@ -45,6 +60,11 @@ export const subscribeToTransaction = <ƒ extends ƒn>(
   store = IMPLICIT.STORE
 ): (() => void) => {
   const tx = withdraw(token, store)
+  if (tx === null) {
+    throw new Error(
+      `Cannot subscribe to transaction "${token.key}": transaction not found in store "${store.config.name}".`
+    )
+  }
   store.config.logger?.info(`👀 subscribe to transaction "${token.key}"`)
   const subscription = tx.subject.subscribe(handleUpdate)
   const unsubscribe = () => {
@@ -53,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,10 +1,21 @@
-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 ƒn = (...parameters: any[]) => any
+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
@@ -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
 
@@ -44,5 +49,12 @@ export function transaction<ƒ extends ƒn>(
 
 export const runTransaction =
   <ƒ extends ƒn>(token: TransactionToken<ƒ>, store: Store = IMPLICIT.STORE) =>
-  (...parameters: Parameters<ƒ>): ReturnType<ƒ> =>
-    withdraw(token, store).run(...parameters)
+  (...parameters: Parameters<ƒ>): ReturnType<ƒ> => {
+    const tx = withdraw(token, store)
+    if (tx) {
+      return tx.run(...parameters)
+    }
+    throw new Error(
+      `Cannot run transaction "${token.key}": transaction not found in store "${store.config.name}".`
+    )
+  }