atom.io 0.32.3 → 0.33.0

package/src/react-devtools/devtools.css

@@ -0,0 +1,308 @@
+main[data-css="atom_io_devtools"] {
+	--fg-color: #eee;
+	--bg-color: #111;
+	--bg-tint1: #222;
+	--fg-border: 1px solid var(--fg-color);
+	@media (prefers-color-scheme: light) {
+		--fg-color: #444;
+		--bg-color: #ddd;
+		--bg-tint1: #e3e3e3;
+	}
+	& {
+		box-sizing: border-box;
+		color: var(--fg-color);
+		background-color: var(--bg-color);
+		border: 2px solid var(--fg-color);
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		height: 100%;
+		display: flex;
+		flex-flow: column;
+		max-height: 800px;
+		width: 100%;
+		max-width: 500px;
+		overflow-y: scroll;
+	}
+	* {
+		font-size: 16px;
+		font-family: theia, monospace;
+	}
+	> header {
+		padding: 5px;
+		padding-left: 10px;
+		padding-bottom: 0;
+		display: flex;
+		justify-content: space-between;
+		h1 {
+			font-size: inherit;
+			margin: 0;
+			font-size: 24px;
+			font-family: charter, serif;
+		}
+		nav {
+			display: flex;
+			flex-flow: row nowrap;
+			button {
+				cursor: pointer;
+				background: none;
+				border: none;
+				padding: none;
+				margin-bottom: -2px;
+				z-index: 1000;
+				&:disabled {
+					cursor: default;
+					background-color: var(--bg-tint1);
+					color: var(--fg-color);
+					border: var(--fg-border);
+					border-bottom: none;
+				}
+			}
+		}
+	}
+	> main {
+		background: var(--bg-tint1);
+	}
+	main {
+		overflow-y: scroll;
+		flex-grow: 1;
+		display: flex;
+		flex-flow: column;
+		gap: 0;
+		article.index {
+			.node .node {
+				border-right: var(--fg-border);
+				padding-right: 0;
+				background: #fff3;
+			}
+			.node > .node {
+				margin: 5px 0;
+				margin-left: 12px;
+				border-left: var(--fg-border);
+			}
+			.node {
+				border-top: var(--fg-border);
+				overflow-x: scroll;
+				padding: 5px;
+				&:last-of-type {
+					border-bottom: var(--fg-border);
+				}
+				&.transaction_update {
+					padding: 0;
+				}
+				header {
+					display: flex;
+					flex-flow: row;
+					gap: 5px;
+					position: sticky;
+					z-index: 999;
+					top: 0;
+					button.carat {
+						cursor: pointer;
+						background: none;
+						border: none;
+						width: 20px;
+						&.open {
+							transform: rotate(90deg);
+						}
+						&:disabled {
+							cursor: default;
+						}
+					}
+					> main {
+						display: flex;
+						flex-flow: row;
+						gap: 5px;
+						cursor: help;
+						h2 {
+							display: inline-block;
+							margin: 0;
+						}
+						.detail {
+							color: #777;
+							@media (prefers-color-scheme: light) {
+								color: #999;
+							}
+						}
+					}
+				}
+				main {
+					margin-left: 15px;
+				}
+			}
+			section.transaction_log {
+				margin-top: 0;
+				main {
+					display: flex;
+					flex-flow: row wrap;
+					gap: 5px;
+					.transaction_update {
+						width: 100%;
+						display: flex;
+						flex-flow: row;
+						align-items: flex-start;
+						justify-content: flex-start;
+						justify-items: flex-start;
+						align-content: flex-start;
+						border-left: var(--fg-border);
+						border-top: var(--fg-border);
+						header {
+							padding: 5px;
+							h4 {
+								margin: 0;
+								padding: 0;
+								font-size: inherit;
+							}
+						}
+						main {
+							margin-left: 0;
+							display: flex;
+							flex-flow: column;
+							gap: 0px;
+							border-left: 1px solid #333;
+							section ~ section {
+								border-top: 1px solid #333;
+							}
+							section {
+								padding: 5px;
+								&.transaction_output {
+									border-right: none;
+								}
+								&.transaction_impact {
+									padding: 5px;
+								}
+								margin: 0;
+								article {
+									border-left: var(--fg-border);
+									border-right: var(--fg-border);
+									.summary {
+										white-space: nowrap;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			section.timeline_log {
+				header {
+					display: flex;
+					> main {
+						display: flex;
+						width: 100%;
+						flex-grow: 1;
+						.gap {
+							flex-grow: 1;
+						}
+						nav {
+							display: flex;
+							flex-flow: row nowrap;
+							gap: 5px;
+						}
+					}
+				}
+				.timeline_update {
+					padding: 5px;
+					border-left: var(--fg-border);
+					h4 {
+						margin: 0;
+						padding: 0;
+						font-size: inherit;
+					}
+					main {
+						margin: 0;
+						.node.atom_update {
+							border-left: var(--fg-border);
+						}
+					}
+				}
+				.you_are_here {
+					background: var(--fg-color);
+					color: var(--bg-color);
+					text-align: center;
+				}
+			}
+		}
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		button {
+			cursor: pointer;
+			background: none;
+			border: none;
+			padding: none;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+		}
+	}
+
+	.json_editor {
+		input {
+			font-family: theia, monospace;
+			border: none;
+			border-bottom: 1px solid;
+			background: none;
+			&:disabled {
+				border: none;
+			}
+		}
+		button {
+			background: none;
+			color: #777;
+			border: none;
+			font-family: theia, monospace;
+			font-size: 14px;
+			margin: none;
+			padding: 4px;
+			padding-bottom: 6px;
+			cursor: pointer;
+			&:hover {
+				color: #333;
+				background-color: #aaa;
+			}
+		}
+		select {
+			font-family: theia, monospace;
+			font-size: 14px;
+			background: none;
+			border: none;
+			color: #777;
+			@media (prefers-color-scheme: light) {
+				color: #999;
+			}
+		}
+		.json_editor_unofficial {
+			background-color: #777;
+			button {
+				color: #333;
+			}
+		}
+		.json_editor_missing {
+			background-color: #f055;
+		}
+		.json_editor_key {
+			padding-right: 10px;
+			input {
+				color: #999;
+				@media (prefers-color-scheme: light) {
+					color: #777;
+				}
+			}
+		}
+		.json_editor_object {
+			border-left: 2px solid #333;
+			padding-left: 20px;
+			@media (prefers-color-scheme: light) {
+				border-color: #ccc;
+			}
+			.json_editor_properties {
+				> * {
+					border-bottom: var(--fg-border);
+					margin-bottom: 2px;
+				}
+			}
+		}
+	}
+}

package/{react-devtools/src → src/react-devtools}/json-editor/developer-interface.tsx

@@ -31,7 +31,7 @@ export type JsonEditorProps<T> = {
 	set: (valOrUpdater: T | ((currVal: T) => T)) => void
 	name?: string | undefined
 	rename?: ((newKey: string) => void) | undefined
-	remove?: () => void
+	remove?: (() => void) | undefined
 	path?: ReadonlyArray<number | string>
 	isReadonly?: (path: ReadonlyArray<number | string>) => boolean
 	isHidden?: (path: ReadonlyArray<number | string>) => boolean
@@ -39,7 +39,7 @@ export type JsonEditorProps<T> = {
 	style?: CSSProperties
 	Header?: FC<{ data: T }>
 	Components?: Partial<JsonEditorComponents>
-	testid?: string
+	testid?: string | undefined
 }
 
 export const JsonEditor = <T,>({

package/{react-devtools/src → src/react-devtools}/json-editor/editors-by-type/utilities/cast-json.ts

@@ -14,9 +14,9 @@ export const stringToObject = (str: string): Json.Tree.Object => {
 export const objectToString = (obj: Json.Tree.Object): string =>
 	JSON.stringify(obj)
 export const objectToBoolean = (obj: Json.Tree.Object): boolean =>
-	obj.true === true
+	obj[`true`] === true
 export const objectToNumber = (obj: Json.Tree.Object): number =>
-	Number(obj.number ?? obj.size ?? obj.count ?? 0)
+	Number(obj[`number`] ?? obj[`size`] ?? obj[`count`] ?? 0)
 export const objectToArray = <T>(
 	obj: Json.Tree.Object<string, T>,
 ): [key: string, value: T][] => Object.entries(obj)

package/{react-devtools/src → src/react-devtools}/json-editor/editors-by-type/utilities/object-properties.ts

@@ -1,7 +1,7 @@
 import { become } from "atom.io/internal"
 import type { Json, JsonTypeName } from "atom.io/json"
 import { fromEntries, JSON_DEFAULTS, toEntries } from "atom.io/json"
-import type { MutableRefObject } from "react"
+import type { RefObject } from "react"
 
 import type { SetterOrUpdater } from "../.."
 import { castToJson } from "./cast-to-json"
@@ -13,7 +13,7 @@ export const makePropertySetters = <T extends Json.Tree.Object>(
 	fromEntries(
 		toEntries(data).map(([key, value]) => [
 			key,
-			(newValue) => {
+			(newValue: unknown) => {
 				set({ ...data, [key]: become(newValue)(value) })
 			},
 		]),
@@ -22,7 +22,7 @@ export const makePropertySetters = <T extends Json.Tree.Object>(
 export const makePropertyRenamers = <T extends Json.Tree.Object>(
 	data: T,
 	set: SetterOrUpdater<T>,
-	stableKeyMapRef: MutableRefObject<{ [Key in keyof T]: keyof T }>,
+	stableKeyMapRef: RefObject<{ [Key in keyof T]: keyof T }>,
 ): { [K in keyof T]: (newKey: string) => void } =>
 	fromEntries(
 		toEntries(data).map(([key, value]) => [

package/{react-devtools/src → src/react-devtools}/json-editor/json-editor-internal.tsx

@@ -47,7 +47,9 @@ export const JsonEditor_INTERNAL = <T,>({
 		type: `non-json`,
 		data,
 	}
-	const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor
+	const SubEditor = dataIsJson
+		? SubEditors[refined.type as keyof JsonTypes]
+		: NonJsonEditor
 
 	const disabled = isReadonly(path)
 
@@ -92,7 +94,7 @@ export const JsonEditor_INTERNAL = <T,>({
 					</Components.KeyWrapper>
 				)}
 				<SubEditor
-					data={refined.data}
+					data={refined.data as never}
 					set={set}
 					remove={remove}
 					rename={rename}

package/{react-devtools/src → src/react-devtools}/store.ts

@@ -8,6 +8,7 @@ import {
 import type { IntrospectionStates } from "atom.io/introspection"
 import { attachIntrospectionStates } from "atom.io/introspection"
 import { persistSync } from "atom.io/web"
+import type { Context } from "react"
 import { createContext } from "react"
 
 type DevtoolsView = `atoms` | `selectors` | `timelines` | `transactions`
@@ -70,6 +71,6 @@ export function attachDevtoolsStates(
 	}
 }
 
-export const DevtoolsContext = createContext<
+export const DevtoolsContext: Context<
 	DevtoolsStates & IntrospectionStates & { store: Store }
->(attachDevtoolsStates(IMPLICIT.STORE))
+> = createContext(attachDevtoolsStates(IMPLICIT.STORE))

package/{realtime/src → src/realtime}/shared-room-store.ts

@@ -1,9 +1,19 @@
-import type { MutableAtomToken } from "atom.io"
+import type {
+	AtomToken,
+	JoinToken,
+	MutableAtomToken,
+	ReadonlySelectorFamilyToken,
+	ReadonlySelectorToken,
+} from "atom.io"
 import { atom, getInternalRelations, join, selectorFamily } from "atom.io"
+import { Join } from "atom.io/internal"
 import type { SetRTXJson } from "atom.io/transceivers/set-rtx"
 import { SetRTX } from "atom.io/transceivers/set-rtx"
 
-export const usersInThisRoomIndex = atom<SetRTX<string>, SetRTXJson<string>>({
+export const usersInThisRoomIndex: MutableAtomToken<
+	SetRTX<string>,
+	SetRTXJson<string>
+> = atom<SetRTX<string>, SetRTXJson<string>>({
 	key: `usersInRoomIndex`,
 	mutable: true,
 	default: () => new SetRTX<string>(),
@@ -11,7 +21,10 @@ export const usersInThisRoomIndex = atom<SetRTX<string>, SetRTXJson<string>>({
 	fromJson: (json) => SetRTX.fromJSON(json),
 })
 
-export const roomIndex = atom<SetRTX<string>, SetRTXJson<string>>({
+export const roomIndex: MutableAtomToken<
+	SetRTX<string>,
+	SetRTXJson<string>
+> = atom<SetRTX<string>, SetRTXJson<string>>({
 	key: `roomIndex`,
 	default: () => new SetRTX<string>(),
 	mutable: true,
@@ -25,7 +38,14 @@ export type UserInRoomMeta = {
 export const DEFAULT_USER_IN_ROOM_META: UserInRoomMeta = {
 	enteredAtEpoch: 0,
 }
-export const usersInRooms = join(
+export const usersInRooms: JoinToken<
+	`room`,
+	string,
+	`user`,
+	string,
+	`1:n`,
+	UserInRoomMeta
+> = join(
 	{
 		key: `usersInRooms`,
 		between: [`room`, `user`],
@@ -36,7 +56,10 @@ export const usersInRooms = join(
 	DEFAULT_USER_IN_ROOM_META,
 )
 
-export const usersInMyRoomView = selectorFamily<
+export const usersInMyRoomView: ReadonlySelectorFamilyToken<
+	MutableAtomToken<SetRTX<string>, SetRTXJson<string>>[],
+	string
+> = selectorFamily<
 	MutableAtomToken<SetRTX<string>, SetRTXJson<string>>[],
 	string
 >({

package/src/realtime-client/realtime-client-stores/client-main-store.ts

@@ -0,0 +1,23 @@
+import * as AtomIO from "atom.io"
+import { persistSync } from "atom.io/web"
+
+export const myIdState__INTERNAL: AtomIO.RegularAtomToken<string | undefined> =
+	AtomIO.atom<string | undefined>({
+		key: `mySocketId__INTERNAL`,
+		default: undefined,
+	})
+export const myIdState: AtomIO.ReadonlySelectorToken<string | undefined> =
+	AtomIO.selector<string | undefined>({
+		key: `mySocketId`,
+		get: ({ get }) => get(myIdState__INTERNAL),
+	})
+
+export const myUsernameState: AtomIO.RegularAtomToken<string | null> =
+	AtomIO.atom<string | null>({
+		key: `myName`,
+		default: null,
+		effects:
+			typeof window === `undefined`
+				? []
+				: [persistSync(window.localStorage, JSON, `myUsername`)],
+	})

package/src/realtime-client/realtime-client-stores/client-sync-store.ts

@@ -0,0 +1,15 @@
+import * as AtomIO from "atom.io"
+
+export const optimisticUpdateQueue: AtomIO.RegularAtomToken<
+	AtomIO.TransactionUpdate<any>[]
+> = AtomIO.atom<AtomIO.TransactionUpdate<any>[]>({
+	key: `updateQueue`,
+	default: [],
+})
+
+export const confirmedUpdateQueue: AtomIO.RegularAtomToken<
+	AtomIO.TransactionUpdate<any>[]
+> = AtomIO.atom<AtomIO.TransactionUpdate<any>[]>({
+	key: `serverConfirmedUpdateQueue`,
+	default: [],
+})

package/{realtime-react/src → src/realtime-react}/index.ts

@@ -1,3 +1,4 @@
+export * from "./on-mount"
 export * from "./realtime-context"
 export * from "./use-pull-atom"
 export * from "./use-pull-atom-family-member"

package/{realtime-react/src → src/realtime-react}/on-mount.ts

@@ -1,5 +1,5 @@
 import { useSingleEffect } from "./use-single-effect"
 
-export function onMount(effect: () => (() => void) | undefined): void {
+export function onMount(effect: () => (() => void) | undefined | void): void {
 	useSingleEffect(effect, [])
 }

package/{realtime-react/src → src/realtime-react}/realtime-context.tsx

@@ -11,10 +11,11 @@ export type RealtimeReactStore = {
 	> | null
 }
 
-export const RealtimeContext = React.createContext<RealtimeReactStore>({
-	socket: null,
-	services: null,
-})
+export const RealtimeContext: React.Context<RealtimeReactStore> =
+	React.createContext({
+		socket: null,
+		services: null,
+	})
 
 export const RealtimeProvider: React.FC<{
 	children: React.ReactNode

package/{realtime-react/src → src/realtime-react}/use-single-effect.ts

@@ -1,12 +1,13 @@
 import * as React from "react"
 
-const { NODE_ENV } = globalThis.env ?? {}
+// @ts-expect-error this is a safe way to check a property on the global object
+const { NODE_ENV } = globalThis[`env`] ?? {}
 const IN_DEV = NODE_ENV === `development`
 
 function noop() {}
 
 export function useSingleEffect(
-	effect: () => (() => void) | undefined,
+	effect: () => (() => void) | undefined | void,
 	deps: unknown[],
 ): void {
 	if (IN_DEV) {

package/{realtime-server/src → src/realtime-server}/ipc-sockets/child-socket.ts

@@ -49,7 +49,7 @@ export class ChildSocket<
 	) {
 		super((event, ...args) => {
 			const stringifiedEvent = JSON.stringify([event, ...args]) + `\x03`
-			const errorHandler = (err) => {
+			const errorHandler = (err: { code: string }) => {
 				if (err.code === `EPIPE`) {
 					console.error(`EPIPE error during write`, this.process.stdin)
 				}

package/{realtime-server/src → src/realtime-server}/realtime-server-stores/server-room-external-actions.ts

@@ -8,13 +8,13 @@ import type { ChildSocket } from "../ipc-sockets"
 import type { RoomArguments } from "./server-room-external-store"
 import { roomArgumentsAtoms, roomSelectors } from "./server-room-external-store"
 
-export const createRoomTX = AtomIO.transaction<
+export const createRoomTX: AtomIO.TransactionToken<
 	(
 		roomId: string,
 		script: string,
 		options?: string[],
 	) => Loadable<ChildSocket<any, any>>
->({
+> = AtomIO.transaction({
 	key: `createRoom`,
 	do: ({ get, set, find }, roomId, script, options) => {
 		const args: RoomArguments = options ? [script, options] : [script]
@@ -28,9 +28,9 @@ export const createRoomTX = AtomIO.transaction<
 })
 export type CreateRoomIO = AtomIO.TransactionIO<typeof createRoomTX>
 
-export const joinRoomTX = AtomIO.transaction<
+export const joinRoomTX: AtomIO.TransactionToken<
 	(roomId: string, userId: string, enteredAtEpoch: number) => UserInRoomMeta
->({
+> = AtomIO.transaction({
 	key: `joinRoom`,
 	do: (tools, roomId, userId, enteredAtEpoch) => {
 		const meta = { enteredAtEpoch }
@@ -46,9 +46,9 @@ export const joinRoomTX = AtomIO.transaction<
 })
 export type JoinRoomIO = AtomIO.TransactionIO<typeof joinRoomTX>
 
-export const leaveRoomTX = AtomIO.transaction<
+export const leaveRoomTX: AtomIO.TransactionToken<
 	(roomId: string, userId: string) => void
->({
+> = AtomIO.transaction({
 	key: `leaveRoom`,
 	do: (tools, roomId, userId) => {
 		editRelationsInStore(
@@ -62,16 +62,17 @@ export const leaveRoomTX = AtomIO.transaction<
 })
 export type LeaveRoomIO = AtomIO.TransactionIO<typeof leaveRoomTX>
 
-export const destroyRoomTX = AtomIO.transaction<(roomId: string) => void>({
-	key: `destroyRoom`,
-	do: (tools, roomId) => {
-		editRelationsInStore(
-			usersInRooms,
-			(relations) => {
-				relations.delete({ room: roomId })
-			},
-			tools.env().store,
-		)
-		tools.set(roomIndex, (s) => (s.delete(roomId), s))
-	},
-})
+export const destroyRoomTX: AtomIO.TransactionToken<(roomId: string) => void> =
+	AtomIO.transaction({
+		key: `destroyRoom`,
+		do: (tools, roomId) => {
+			editRelationsInStore(
+				usersInRooms,
+				(relations) => {
+					relations.delete({ room: roomId })
+				},
+				tools.env().store,
+			)
+			tools.set(roomIndex, (s) => (s.delete(roomId), s))
+		},
+	})

package/{realtime-server/src → src/realtime-server}/realtime-server-stores/server-room-external-store.ts

@@ -1,7 +1,11 @@
 import type { ChildProcessWithoutNullStreams } from "node:child_process"
 import { spawn } from "node:child_process"
 
-import type { Loadable } from "atom.io"
+import type {
+	Loadable,
+	ReadonlySelectorFamilyToken,
+	RegularAtomFamilyToken,
+} from "atom.io"
 import { atomFamily, selectorFamily } from "atom.io"
 
 import { ChildSocket } from "../ipc-sockets"
@@ -10,15 +14,16 @@ export type RoomArguments =
 	| [script: string, options: string[]]
 	| [script: string]
 
-export const roomArgumentsAtoms = atomFamily<RoomArguments, string>({
-	key: `roomArguments`,
-	default: [`echo`, [`Hello World!`]],
-})
+export const roomArgumentsAtoms: RegularAtomFamilyToken<RoomArguments, string> =
+	atomFamily<RoomArguments, string>({
+		key: `roomArguments`,
+		default: [`echo`, [`Hello World!`]],
+	})
 
-export const roomSelectors = selectorFamily<
+export const roomSelectors: ReadonlySelectorFamilyToken<
 	Loadable<ChildSocket<any, any>>,
 	string
->({
+> = selectorFamily<Loadable<ChildSocket<any, any>>, string>({
 	key: `room`,
 	get:
 		(roomId) =>