atom.io 0.6.2 → 0.6.3

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

@@ -9,26 +9,26 @@ import { RealtimeContext } from "./realtime-context"
 
 const TX_SUBS = new Map<string, number>()
 export function useServerAction<ƒ extends ƒn>(
-  token: AtomIO.TransactionToken<ƒ>
+	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)
+	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/realtime-testing/index.ts

@@ -0,0 +1 @@
+export * from "./setup-realtime-test"

package/src/realtime-testing/setup-realtime-test.tsx

@@ -0,0 +1,160 @@
+import * as http from "http"
+
+import * as React from "react"
+
+import { prettyDOM, render, type RenderResult } from "@testing-library/react"
+import * as AtomIO from "atom.io"
+import * as AR from "atom.io/react"
+import * as RTC from "atom.io/realtime-react"
+import * as RR from "fp-ts/ReadonlyRecord"
+import * as Happy from "happy-dom"
+import * as SocketIO from "socket.io"
+import type { Socket as ClientSocket } from "socket.io-client"
+import { io } from "socket.io-client"
+
+export type TestSetupOptions = {
+	server: (tools: { socket: SocketIO.Socket; silo: AtomIO.Silo }) => void
+}
+export type TestSetupOptions__SingleClient = TestSetupOptions & {
+	client: React.FC
+}
+export type TestSetupOptions__MultiClient<ClientNames extends string> =
+	TestSetupOptions & {
+		clients: {
+			[K in ClientNames]: React.FC
+		}
+	}
+
+export type RealtimeTestTools = {
+	name: string
+	silo: AtomIO.Silo
+	dispose: () => void
+}
+export type RealtimeTestClient = RealtimeTestTools & {
+	renderResult: RenderResult
+	prettyPrint: () => void
+	reconnect: () => void
+	disconnect: () => void
+}
+export type RealtimeTestServer = RealtimeTestTools & {
+	port: number
+}
+
+export type RealtimeTestAPI = {
+	server: RealtimeTestServer
+	teardown: () => void
+}
+export type RealtimeTestAPI__SingleClient = RealtimeTestAPI & {
+	client: RealtimeTestClient
+}
+export type RealtimeTestAPI__MultiClient<ClientNames extends string> =
+	RealtimeTestAPI & {
+		clients: Record<ClientNames, RealtimeTestClient>
+	}
+
+export const setupRealtimeTestServer = (
+	options: TestSetupOptions,
+): RealtimeTestServer => {
+	const httpServer = http.createServer((_, res) => res.end(`Hello World!`))
+	const address = httpServer.listen().address()
+	const port =
+		typeof address === `string` ? 80 : address === null ? null : address.port
+	if (port === null) throw new Error(`Could not determine port for test server`)
+	const server = new SocketIO.Server(httpServer)
+	const silo = AtomIO.silo(`SERVER`, AtomIO.__INTERNAL__.IMPLICIT.STORE)
+
+	server.on(`connection`, (socket: SocketIO.Socket) => {
+		options.server({ socket, silo })
+	})
+
+	const dispose = () => {
+		server.close()
+		AtomIO.__INTERNAL__.clearStore(silo.store)
+	}
+
+	return {
+		name: `SERVER`,
+		silo,
+		dispose,
+		port,
+	}
+}
+export const setupRealtimeTestClient = (
+	options: TestSetupOptions__SingleClient,
+	name: string,
+	port: number,
+): RealtimeTestClient => {
+	const socket: ClientSocket = io(`http://localhost:${port}/`)
+	const silo = AtomIO.silo(name, AtomIO.__INTERNAL__.IMPLICIT.STORE)
+
+	const { document } = new Happy.Window()
+	document.body.innerHTML = `<div id="app"></div>`
+	const renderResult = render(
+		<AR.StoreProvider store={silo.store}>
+			<RTC.RealtimeProvider socket={socket}>
+				<options.client />
+			</RTC.RealtimeProvider>
+		</AR.StoreProvider>,
+		{
+			container: document.querySelector(`#app`) as unknown as HTMLElement,
+		},
+	)
+
+	const prettyPrint = () => console.log(prettyDOM(renderResult.container))
+
+	const disconnect = () => socket.disconnect()
+	const reconnect = () => socket.connect()
+
+	const dispose = () => {
+		socket.disconnect()
+		AtomIO.__INTERNAL__.clearStore(silo.store)
+	}
+
+	return {
+		name,
+		silo,
+		renderResult,
+		prettyPrint,
+		disconnect,
+		reconnect,
+		dispose,
+	}
+}
+
+export const singleClient = (
+	options: TestSetupOptions__SingleClient,
+): RealtimeTestAPI__SingleClient => {
+	const server = setupRealtimeTestServer(options)
+	const client = setupRealtimeTestClient(options, `CLIENT`, server.port)
+
+	return {
+		client,
+		server,
+		teardown: () => {
+			client.dispose()
+			server.dispose()
+		},
+	}
+}
+
+export const multiClient = <ClientNames extends string>(
+	options: TestSetupOptions__MultiClient<ClientNames>,
+): RealtimeTestAPI__MultiClient<ClientNames> => {
+	const server = setupRealtimeTestServer(options)
+	const clients = RR.toEntries(options.clients).reduce(
+		(clients, [name, client]) => ({
+			...clients,
+			[name]: setupRealtimeTestClient({ ...options, client }, name, server.port),
+		}),
+		{} as Record<ClientNames, RealtimeTestClient>,
+	)
+
+	return {
+		clients,
+		server,
+		teardown: () => {
+			RR.toEntries(clients).forEach(([, client]) => client.dispose())
+			server.dispose()
+		},
+	}
+}

package/src/selector.ts

@@ -7,59 +7,59 @@ import { selectorFamily__INTERNAL, selector__INTERNAL } from "./internal"
 import type { Read, Write } from "./transaction"
 
 export type SelectorOptions<T> = {
-  key: string
-  get: Read<() => T>
-  set: Write<(newValue: T) => void>
+	key: string
+	get: Read<() => T>
+	set: Write<(newValue: T) => void>
 }
 export type ReadonlySelectorOptions<T> = {
-  key: string
-  get: Read<() => T>
+	key: string
+	get: Read<() => T>
 }
 
 export function selector<T>(options: SelectorOptions<T>): SelectorToken<T>
 export function selector<T>(
-  options: ReadonlySelectorOptions<T>
+	options: ReadonlySelectorOptions<T>,
 ): ReadonlySelectorToken<T>
 export function selector<T>(
-  options: ReadonlySelectorOptions<T> | SelectorOptions<T>
+	options: ReadonlySelectorOptions<T> | SelectorOptions<T>,
 ): ReadonlySelectorToken<T> | SelectorToken<T> {
-  return selector__INTERNAL(options)
+	return selector__INTERNAL(options)
 }
 
 export type SelectorFamilyOptions<T, K extends Serializable> = {
-  key: string
-  get: (key: K) => Read<() => T>
-  set: (key: K) => Write<(newValue: T) => void>
+	key: string
+	get: (key: K) => Read<() => T>
+	set: (key: K) => Write<(newValue: T) => void>
 }
 export type ReadonlySelectorFamilyOptions<T, K extends Serializable> = {
-  key: string
-  get: (key: K) => Read<() => T>
+	key: string
+	get: (key: K) => Read<() => T>
 }
 
 export type SelectorFamily<T, K extends Serializable = Serializable> = ((
-  key: K
+	key: K,
 ) => SelectorToken<T>) & {
-  key: string
-  type: `selector_family`
-  subject: Rx.Subject<SelectorToken<T>>
+	key: string
+	type: `selector_family`
+	subject: Rx.Subject<SelectorToken<T>>
 }
 
 export type ReadonlySelectorFamily<T, K extends Serializable = Serializable> = ((
-  key: K
+	key: K,
 ) => ReadonlySelectorToken<T>) & {
-  key: string
-  type: `readonly_selector_family`
-  subject: Rx.Subject<ReadonlySelectorToken<T>>
+	key: string
+	type: `readonly_selector_family`
+	subject: Rx.Subject<ReadonlySelectorToken<T>>
 }
 
 export function selectorFamily<T, K extends Serializable>(
-  options: SelectorFamilyOptions<T, K>
+	options: SelectorFamilyOptions<T, K>,
 ): SelectorFamily<T, K>
 export function selectorFamily<T, K extends Serializable>(
-  options: ReadonlySelectorFamilyOptions<T, K>
+	options: ReadonlySelectorFamilyOptions<T, K>,
 ): ReadonlySelectorFamily<T, K>
 export function selectorFamily<T, K extends Serializable>(
-  options: ReadonlySelectorFamilyOptions<T, K> | SelectorFamilyOptions<T, K>
+	options: ReadonlySelectorFamilyOptions<T, K> | SelectorFamilyOptions<T, K>,
 ): ReadonlySelectorFamily<T, K> | SelectorFamily<T, K> {
-  return selectorFamily__INTERNAL(options)
+	return selectorFamily__INTERNAL(options)
 }

package/src/silo.ts

@@ -3,15 +3,15 @@ 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,
+	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"
@@ -19,35 +19,35 @@ import type { transaction } from "./transaction"
 export type Silo = ReturnType<typeof silo>
 
 export const silo = (
-  name: string,
-  fromStore: Store | null = null
+	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
+	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),
-  }
+	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,12 +1,12 @@
 import type { ƒn } from "~/packages/anvl/src/function"
 
 import type {
-  ReadonlySelectorToken,
-  StateToken,
-  TimelineToken,
-  TimelineUpdate,
-  TransactionToken,
-  TransactionUpdate,
+	ReadonlySelectorToken,
+	StateToken,
+	TimelineToken,
+	TimelineUpdate,
+	TransactionToken,
+	TransactionUpdate,
 } from "."
 import type { Store } from "./internal"
 import { IMPLICIT, subscribeToRootAtoms, withdraw } from "./internal"
@@ -16,80 +16,80 @@ export type KeyedStateUpdate<T> = StateUpdate<T> & { key: string }
 export type UpdateHandler<T> = (update: StateUpdate<T>) => void
 
 export const subscribe = <T>(
-  token: ReadonlySelectorToken<T> | StateToken<T>,
-  handleUpdate: UpdateHandler<T>,
-  store: Store = IMPLICIT.STORE
+	token: ReadonlySelectorToken<T> | StateToken<T>,
+	handleUpdate: UpdateHandler<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 =
-    state.type !== `atom` ? subscribeToRootAtoms(state, store) : null
+	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 =
+		state.type !== `atom` ? subscribeToRootAtoms(state, store) : null
 
-  const unsubscribe =
-    dependencySubscriptions === null
-      ? () => {
-          store.config.logger?.info(`🙈 unsubscribe from "${state.key}"`)
-          subscription.unsubscribe()
-        }
-      : () => {
-          store.config.logger?.info(
-            `🙈 unsubscribe from "${state.key}" and its dependencies`
-          )
-          subscription.unsubscribe()
-          for (const dependencySubscription of dependencySubscriptions) {
-            dependencySubscription.unsubscribe()
-          }
-        }
+	const unsubscribe =
+		dependencySubscriptions === null
+			? () => {
+					store.config.logger?.info(`🙈 unsubscribe from "${state.key}"`)
+					subscription.unsubscribe()
+			  }
+			: () => {
+					store.config.logger?.info(
+						`🙈 unsubscribe from "${state.key}" and its dependencies`,
+					)
+					subscription.unsubscribe()
+					for (const dependencySubscription of dependencySubscriptions) {
+						dependencySubscription.unsubscribe()
+					}
+			  }
 
-  return unsubscribe
+	return unsubscribe
 }
 
 export type TransactionUpdateHandler<ƒ extends ƒn> = (
-  data: TransactionUpdate<ƒ>
+	data: TransactionUpdate<ƒ>,
 ) => void
 
 export const subscribeToTransaction = <ƒ extends ƒn>(
-  token: TransactionToken<ƒ>,
-  handleUpdate: TransactionUpdateHandler<ƒ>,
-  store = IMPLICIT.STORE
+	token: TransactionToken<ƒ>,
+	handleUpdate: TransactionUpdateHandler<ƒ>,
+	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 = () => {
-    store.config.logger?.info(`🙈 unsubscribe from transaction "${token.key}"`)
-    subscription.unsubscribe()
-  }
-  return unsubscribe
+	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 = () => {
+		store.config.logger?.info(`🙈 unsubscribe from transaction "${token.key}"`)
+		subscription.unsubscribe()
+	}
+	return unsubscribe
 }
 
 export const subscribeToTimeline = (
-  token: TimelineToken,
-  handleUpdate: (update: TimelineUpdate) => void,
-  store = IMPLICIT.STORE
+	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
+	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,35 +1,35 @@
 import type { AtomFamily, AtomToken } from "."
 import type {
-  TimelineAtomUpdate,
-  TimelineSelectorUpdate,
-  TimelineTransactionUpdate,
+	TimelineAtomUpdate,
+	TimelineSelectorUpdate,
+	TimelineTransactionUpdate,
 } from "./internal"
 import { IMPLICIT } from "./internal"
 import { redo__INTERNAL, timeline__INTERNAL, undo__INTERNAL } from "./internal/"
 
 export type TimelineToken = {
-  key: string
-  type: `timeline`
+	key: string
+	type: `timeline`
 }
 
 export type TimelineOptions = {
-  key: string
-  atoms: (AtomFamily<any, any> | AtomToken<any>)[]
+	key: string
+	atoms: (AtomFamily<any, any> | AtomToken<any>)[]
 }
 
 export type TimelineUpdate =
-  | TimelineAtomUpdate
-  | TimelineSelectorUpdate
-  | TimelineTransactionUpdate
+	| TimelineAtomUpdate
+	| TimelineSelectorUpdate
+	| TimelineTransactionUpdate
 
 export const timeline = (options: TimelineOptions): TimelineToken => {
-  return timeline__INTERNAL(options)
+	return timeline__INTERNAL(options)
 }
 
 export const redo = (token: TimelineToken): void => {
-  return redo__INTERNAL(token, IMPLICIT.STORE)
+	redo__INTERNAL(token, IMPLICIT.STORE)
 }
 
 export const undo = (token: TimelineToken): void => {
-  return undo__INTERNAL(token, IMPLICIT.STORE)
+	undo__INTERNAL(token, IMPLICIT.STORE)
 }