atom.io 0.39.1 → 0.40.0

package/src/internal/operation.ts

@@ -1,4 +1,4 @@
-import type { ReadableToken } from "atom.io"
+import type { AtomUpdateEvent, ReadableToken, StateCreationEvent } from "atom.io"
 
 import type { Store } from "./store"
 import { isChildStore } from "./transaction/is-root-store"
@@ -14,6 +14,7 @@ export type OpenOperation<R extends ReadableToken<any> = ReadableToken<any>> = {
 	done: Set<string>
 	prev: Map<string, any>
 	timestamp: number
+	subEvents: (AtomUpdateEvent<any> | StateCreationEvent<any>)[]
 }
 
 export function openOperation(
@@ -36,6 +37,7 @@ export function openOperation(
 		prev: new Map(),
 		timestamp: Date.now(),
 		token,
+		subEvents: [],
 	}
 	store.logger.info(
 		`⭕`,

package/src/internal/set-state/dispatch-state-update.ts

@@ -1,12 +1,12 @@
-import type { AtomUpdateEvent, StateCreationEvent, StateUpdate } from "atom.io"
+import type {
+	AtomUpdateEvent,
+	StateCreationEvent,
+	StateUpdate,
+	TimelineEvent,
+} from "atom.io"
 
-import {
-	type MutableAtom,
-	newest,
-	type Subject,
-	type WritableFamily,
-	type WritableState,
-} from ".."
+import type { MutableAtom, Subject, WritableFamily, WritableState } from ".."
+import { newest } from ".."
 import { hasRole } from "../atom"
 import { readOrComputeValue } from "../get-state"
 import type { Transceiver } from "../mutable"
@@ -27,13 +27,15 @@ export function dispatchOrDeferStateUpdate<T>(
 	const token = deposit(state)
 	if (stateIsNewlyCreated && family) {
 		state.subject.next({ newValue })
-		const stateCreationEvent: StateCreationEvent<any> = {
+		const stateCreationEvent: StateCreationEvent<any> & TimelineEvent<any> = {
+			write: true,
 			type: `state_creation`,
 			subType: `writable`,
 			token,
 			timestamp: Date.now(),
 			value: newValue,
 		}
+		target.operation.subEvents.push(stateCreationEvent)
 		const familySubject = family.subject as Subject<StateCreationEvent<any>>
 		familySubject.next(stateCreationEvent)
 		const innerTarget = newest(target)
@@ -75,7 +77,7 @@ export function dispatchOrDeferStateUpdate<T>(
 					`is now (`,
 					newValue,
 					`) subscribers:`,
-					subject.subscribers,
+					subject.subscribers.keys(),
 				)
 				break
 			case `atom`:
@@ -90,7 +92,7 @@ export function dispatchOrDeferStateUpdate<T>(
 					`->`,
 					newValue,
 					`) subscribers:`,
-					subject.subscribers,
+					subject.subscribers.keys(),
 				)
 		}
 		subject.next(update)

package/src/internal/timeline/create-timeline.ts

@@ -4,13 +4,16 @@ import type {
 	AtomUpdateEvent,
 	StateCreationEvent,
 	StateDisposalEvent,
+	StateUpdate,
 	TimelineEvent,
 	TimelineManageable,
 	TimelineOptions,
+	TimelineSelectorUpdateEvent,
 	TimelineToken,
 	TransactionOutcomeEvent,
 	TransactionSubEvent,
 	TransactionToken,
+	WritablePureSelectorToken,
 } from "atom.io"
 
 import { reduceReference } from "../get-state/reduce-reference"
@@ -24,10 +27,6 @@ export type Timeline<ManagedAtom extends TimelineManageable> = {
 	type: `timeline`
 	key: string
 	at: number
-	shouldCapture?: (
-		update: TimelineEvent<ManagedAtom>,
-		timeline: Timeline<ManagedAtom>,
-	) => boolean
 	timeTraveling: `into_future` | `into_past` | null
 	history: TimelineEvent<ManagedAtom>[]
 	selectorTime: number | null
@@ -46,7 +45,6 @@ export function createTimeline<ManagedAtom extends TimelineManageable>(
 		type: `timeline`,
 		key: options.key,
 		at: 0,
-
 		timeTraveling: null,
 		selectorTime: null,
 		transactionKey: null,
@@ -56,9 +54,7 @@ export function createTimeline<ManagedAtom extends TimelineManageable>(
 		subject: new Subject(),
 		subscriptions: new Map(),
 	}
-	if (options.shouldCapture) {
-		tl.shouldCapture = options.shouldCapture
-	}
+
 	const timelineKey = options.key
 	const target = newest(store)
 	for (const initialTopic of options.scope) {
@@ -182,93 +178,32 @@ function addAtomToTimeline(
 					if (txUpdateInProgress) {
 						joinTransaction(store, tl, txUpdateInProgress)
 					} else if (currentSelectorToken && currentSelectorTime) {
-						let latestUpdate: TimelineEvent<any> | undefined = tl.history.at(-1)
-
-						if (currentSelectorTime !== tl.selectorTime) {
-							latestUpdate = {
-								type: `selector_update`,
-								timestamp: currentSelectorTime,
-								// key: currentSelectorKey,
-								token: currentSelectorToken,
-								atomUpdates: [],
-							}
-							latestUpdate.atomUpdates.push({
-								type: `atom_update`,
-								token: atomToken,
-								update,
-								timestamp: Date.now(), // 👺 use store operation
-							})
-							if (tl.at !== tl.history.length) {
-								tl.history.splice(tl.at)
-							}
-
-							tl.history.push(latestUpdate)
-
-							store.logger.info(
-								`⌛`,
-								`timeline`,
-								tl.key,
-								`got a selector_update "${currentSelectorToken.key}" with`,
-								latestUpdate.atomUpdates.map(
-									(atomUpdate) => atomUpdate.token.key,
-								),
-							)
-
-							tl.at = tl.history.length
-							tl.selectorTime = currentSelectorTime
-						} else {
-							if (latestUpdate?.type === `selector_update`) {
-								latestUpdate.atomUpdates.push({
-									type: `atom_update`,
-									token: atomToken,
-									update,
-									timestamp: Date.now(), // 👺 use store operation
-								})
-								store.logger.info(
-									`⌛`,
-									`timeline`,
-									tl.key,
-									`set selector_update "${currentSelectorToken.key}" to`,
-									latestUpdate?.atomUpdates.map(
-										(atomUpdate) => atomUpdate.token.key,
-									),
-								)
-							}
-						}
-						if (latestUpdate) {
-							const willCaptureSelectorUpdate =
-								tl.shouldCapture?.(latestUpdate, tl) ?? true
-							if (willCaptureSelectorUpdate) {
-								tl.subject.next(latestUpdate)
-							} else {
-								tl.history.pop()
-								tl.at = tl.history.length
-							}
-						}
+						buildSelectorUpdate(
+							store,
+							tl,
+							atomToken,
+							update,
+							currentSelectorToken,
+							currentSelectorTime,
+						)
 					} else {
 						const timestamp = Date.now()
 						tl.selectorTime = null
-						if (tl.at !== tl.history.length) {
-							tl.history.splice(tl.at)
-						}
-						const atomUpdate: AtomUpdateEvent<any> = {
+
+						const atomUpdate: AtomUpdateEvent<any> & TimelineEvent<any> = {
+							write: true,
 							type: `atom_update`,
 							token: deposit(atom),
 							update,
 							timestamp,
 						}
-						const willCapture = tl.shouldCapture?.(atomUpdate, tl) ?? true
 						store.logger.info(
 							`⌛`,
 							`timeline`,
 							tl.key,
 							`got an atom_update to "${atom.key}"`,
 						)
-						if (willCapture) {
-							tl.history.push(atomUpdate)
-							tl.at = tl.history.length
-							tl.subject.next(atomUpdate)
-						}
+						addToHistory(tl, atomUpdate)
 					}
 				}
 			},
@@ -322,10 +257,6 @@ function joinTransaction(
 				unsubscribe()
 				tl.transactionKey = null
 				if (tl.timeTraveling === null && currentTxInstanceId) {
-					if (tl.at !== tl.history.length) {
-						tl.history.splice(tl.at)
-					}
-
 					// biome-ignore lint/style/noNonNullAssertion: we are in the context of this timeline
 					const timelineTopics = store.timelineTopics.getRelatedKeys(tl.key)!
 
@@ -334,25 +265,99 @@ function joinTransaction(
 						timelineTopics,
 					)
 
-					const timelineTransactionUpdate: TransactionOutcomeEvent<
-						TransactionToken<any>
-					> = {
+					const timelineTransactionUpdate: TimelineEvent<any> &
+						TransactionOutcomeEvent<TransactionToken<any>> = {
+						write: true,
 						...transactionUpdate,
 						subEvents: subEventsFiltered,
 					}
-					const willCapture =
-						tl.shouldCapture?.(timelineTransactionUpdate, tl) ?? true
-					if (willCapture) {
-						tl.history.push(timelineTransactionUpdate)
-						tl.at = tl.history.length
-						tl.subject.next(timelineTransactionUpdate)
-					}
+
+					addToHistory(tl, timelineTransactionUpdate)
 				}
 			},
 		)
 	}
 }
 
+function buildSelectorUpdate(
+	store: Store,
+	tl: Timeline<any>,
+	atomToken: AtomToken<any>,
+	eventOrUpdate: StateCreationEvent<any> | StateUpdate<any>,
+	currentSelectorToken: WritablePureSelectorToken<any>,
+	currentSelectorTime: number,
+) {
+	let latestUpdate: TimelineEvent<any> | undefined = tl.history.at(-1)
+	if (currentSelectorTime !== tl.selectorTime) {
+		const selectorUpdate: TimelineEvent<any> & TimelineSelectorUpdateEvent<any> =
+			(latestUpdate = {
+				write: true,
+				type: `selector_update`,
+				timestamp: currentSelectorTime,
+				token: currentSelectorToken,
+				subEvents: [],
+			})
+		if (`type` in eventOrUpdate) {
+			latestUpdate.subEvents.push(eventOrUpdate)
+		} else {
+			latestUpdate.subEvents.push({
+				type: `atom_update`,
+				token: atomToken,
+				update: eventOrUpdate,
+				timestamp: Date.now(), // 👺 use store operation
+			})
+		}
+
+		addToHistory(tl, latestUpdate)
+		tl.selectorTime = currentSelectorTime
+
+		store.logger.info(
+			`⌛`,
+			`timeline`,
+			tl.key,
+			`got a selector_update "${currentSelectorToken.key}" with`,
+			latestUpdate.subEvents.map((event) => event.token.key),
+		)
+
+		const operation = store.operation
+		const unsub = store.on.operationClose.subscribe(
+			`timeline:${tl.key} (needs to gather nested selector creations)`,
+			() => {
+				unsub()
+				if (operation.open) {
+					selectorUpdate.subEvents = [
+						...operation.subEvents,
+						...selectorUpdate.subEvents,
+					]
+				}
+			},
+		)
+	} else {
+		if (latestUpdate?.type === `selector_update`) {
+			if (`type` in eventOrUpdate) {
+				latestUpdate.subEvents.push(eventOrUpdate)
+			} else {
+				latestUpdate.subEvents.push({
+					type: `atom_update`,
+					token: atomToken,
+					update: eventOrUpdate,
+					timestamp: Date.now(), // 👺 use store operation
+				})
+			}
+			store.logger.info(
+				`⌛`,
+				`timeline`,
+				tl.key,
+				`set selector_update "${currentSelectorToken.key}" to`,
+				latestUpdate?.subEvents.map((event) => event.token.key),
+			)
+		}
+	}
+	if (latestUpdate) {
+		tl.subject.next(latestUpdate)
+	}
+}
+
 function filterTransactionSubEvents(
 	updates: TransactionSubEvent[],
 	timelineTopics: Set<string>,
@@ -402,6 +407,16 @@ function handleStateLifecycleEvent(
 	event: StateCreationEvent<any> | StateDisposalEvent<any>,
 	tl: Timeline<any>,
 ): void {
+	const currentSelectorToken =
+		store.operation.open &&
+		store.operation.token.type === `writable_pure_selector`
+			? store.operation.token
+			: null
+	const currentSelectorTime =
+		store.operation.open &&
+		store.operation.token.type === `writable_pure_selector`
+			? store.operation.timestamp
+			: null
 	if (!tl.timeTraveling) {
 		const target = newest(store)
 		if (isChildStore(target)) {
@@ -410,10 +425,21 @@ function handleStateLifecycleEvent(
 			const txUpdateInProgress = target.on.transactionApplying.state
 			if (txUpdateInProgress) {
 				joinTransaction(store, tl, txUpdateInProgress.update)
+			} else if (
+				currentSelectorToken &&
+				currentSelectorTime &&
+				event.type === `state_creation`
+			) {
+				buildSelectorUpdate(
+					store,
+					tl,
+					event.token,
+					event,
+					currentSelectorToken,
+					currentSelectorTime,
+				)
 			} else {
-				tl.history.push(event)
-				tl.at = tl.history.length
-				tl.subject.next(event)
+				addToHistory(tl, event)
 			}
 		}
 	}
@@ -427,3 +453,12 @@ function handleStateLifecycleEvent(
 			break
 	}
 }
+
+function addToHistory(tl: Timeline<any>, event: TimelineEvent<any>): void {
+	if (tl.at !== tl.history.length) {
+		tl.history.splice(tl.at)
+	}
+	tl.history.push(event)
+	tl.at = tl.history.length
+	tl.subject.next(event)
+}

package/src/internal/timeline/time-travel.ts

@@ -1,4 +1,4 @@
-import type { TimelineToken } from "atom.io"
+import type { TimelineEvent, TimelineToken } from "atom.io"
 
 import {
 	ingestAtomUpdateEvent,
@@ -30,6 +30,7 @@ export const timeTravel = (
 		)
 		return
 	}
+
 	if (
 		(action === `redo` && timelineData.at === timelineData.history.length) ||
 		(action === `undo` && timelineData.at === 0)
@@ -46,46 +47,56 @@ export const timeTravel = (
 	}
 
 	timelineData.timeTraveling = action === `redo` ? `into_future` : `into_past`
-	if (action === `undo`) {
-		--timelineData.at
+	let nextIndex = timelineData.at
+	let events: TimelineEvent<any>[]
+	switch (action) {
+		case `undo`:
+			--nextIndex
+			while (nextIndex !== 0 && timelineData.history[nextIndex].write !== true) {
+				--nextIndex
+			}
+			events = timelineData.history.slice(nextIndex, timelineData.at).reverse()
+
+			break
+		case `redo`:
+			++nextIndex
+			events = timelineData.history.slice(timelineData.at, nextIndex)
 	}
+	timelineData.at = nextIndex
 
-	const event = timelineData.history[timelineData.at]
 	const applying = action === `redo` ? `newValue` : `oldValue`
 
-	switch (event.type) {
-		case `atom_update`: {
-			ingestAtomUpdateEvent(store, event, applying)
-			break
-		}
-		case `selector_update`: {
-			ingestSelectorUpdateEvent(store, event, applying)
-			break
-		}
-		case `transaction_outcome`: {
-			ingestTransactionOutcomeEvent(store, event, applying)
-			break
-		}
-		case `state_creation`: {
-			ingestCreationEvent(store, event, applying)
-			break
+	for (const event of events) {
+		switch (event.type) {
+			case `atom_update`: {
+				ingestAtomUpdateEvent(store, event, applying)
+				break
+			}
+			case `selector_update`: {
+				ingestSelectorUpdateEvent(store, event, applying)
+				break
+			}
+			case `transaction_outcome`: {
+				ingestTransactionOutcomeEvent(store, event, applying)
+				break
+			}
+			case `state_creation`: {
+				ingestCreationEvent(store, event, applying)
+				break
+			}
+			case `state_disposal`: {
+				ingestDisposalEvent(store, event, applying)
+				break
+			}
+			case `molecule_creation`:
+			case `molecule_disposal`:
 		}
-		case `state_disposal`: {
-			ingestDisposalEvent(store, event, applying)
-			break
-		}
-		case `molecule_creation`:
-		case `molecule_disposal`:
-	}
-
-	if (action === `redo`) {
-		++timelineData.at
 	}
 
 	timelineData.subject.next(action)
 	timelineData.timeTraveling = null
 	store.logger.info(
-		`⏹️`,
+		`⏸️`,
 		`timeline`,
 		token.key,
 		`"${token.key}" is now at ${timelineData.at} / ${timelineData.history.length}`,

package/src/internal/transaction/apply-transaction.ts

@@ -34,7 +34,7 @@ export function applyTransaction<F extends Fn>(
 		`🛄`,
 		`transaction`,
 		child.transactionMeta.update.token.key,
-		`Applying transaction with ${updates.length} updates:`,
+		`applying ${updates.length} subEvents:`,
 		updates,
 	)
 
@@ -55,7 +55,7 @@ export function applyTransaction<F extends Fn>(
 			`🛬`,
 			`transaction`,
 			child.transactionMeta.update.token.key,
-			`Finished applying transaction.`,
+			`applied`,
 		)
 	} else if (isChildStore(parent)) {
 		parent.transactionMeta.update.subEvents.push(child.transactionMeta.update)

package/src/internal/transaction/build-transaction.ts

@@ -97,7 +97,7 @@ export const buildTransaction = (
 		`🛫`,
 		`transaction`,
 		token.key,
-		`Building transaction with params:`,
+		`building with params:`,
 		params,
 	)
 	return child

package/src/main/events.ts

@@ -23,10 +23,13 @@ export type AtomUpdateEvent<A extends AtomToken<any>> = {
 	timestamp: number
 }
 
+export type SelectorUpdateSubEvent<A extends AtomToken<any>> =
+	| AtomUpdateEvent<A>
+	| StateCreationEvent<any>
 export type TimelineSelectorUpdateEvent<A extends TimelineManageable> = {
 	type: `selector_update`
 	token: SelectorToken<any>
-	atomUpdates: AtomUpdateEvent<AtomOnly<A>>[]
+	subEvents: SelectorUpdateSubEvent<AtomOnly<A>>[]
 	timestamp: number
 }
 
@@ -110,7 +113,9 @@ export type TransactionOutcomeEvent<T extends TransactionToken<any>> = {
 	output: ReturnType<TokenType<T>>
 }
 
-export type TimelineEvent<ManagedAtom extends TimelineManageable> =
+export type TimelineEvent<ManagedAtom extends TimelineManageable> = {
+	write?: true
+} & (
 	| AtomUpdateEvent<AtomOnly<ManagedAtom>>
 	| MoleculeCreationEvent
 	| MoleculeDisposalEvent
@@ -118,3 +123,4 @@ export type TimelineEvent<ManagedAtom extends TimelineManageable> =
 	| StateDisposalEvent<AtomOnly<ManagedAtom>>
 	| TimelineSelectorUpdateEvent<ManagedAtom>
 	| TransactionOutcomeEvent<TransactionToken<any>>
+)

package/src/main/logger.ts

@@ -37,7 +37,7 @@ const LOGGER_ICON_DICTIONARY = {
 	"⏭️": `Transaction redo`,
 	"⏮️": `Transaction undo`,
 	"⏳": `Timeline event partially captured`,
-	"⏹️": `Time-travel complete`,
+	"⏸️": `Time-travel complete`,
 	// Problems
 	"💣": `Dangerous action likely to cause bad errors down the line`,
 	"❗": `Dangerous action unless in development mode`,

package/src/main/timeline.ts

@@ -1,7 +1,6 @@
-import type { Timeline } from "atom.io/internal"
 import { createTimeline, IMPLICIT, timeTravel } from "atom.io/internal"
 
-import type { AtomFamilyToken, AtomToken, TimelineEvent, TimelineToken } from "."
+import type { AtomFamilyToken, AtomToken, TimelineToken } from "."
 
 export type TimelineManageable = AtomFamilyToken<any, any> | AtomToken<any>
 export type AtomOnly<M extends TimelineManageable> = M extends AtomFamilyToken<
@@ -33,11 +32,6 @@ export type TimelineOptions<ManagedAtom extends TimelineManageable> = {
 	key: string
 	/** The managed atoms (and families of atoms) to record */
 	scope: ManagedAtom[]
-	/** A function that determines whether a given update should be recorded */
-	shouldCapture?: (
-		update: TimelineEvent<ManagedAtom>,
-		timeline: Timeline<TimelineManageable>,
-	) => boolean
 }
 
 /**

package/src/react-devtools/Updates.tsx

@@ -192,18 +192,23 @@ export const TimelineUpdateFC: React.FC<{
 							}
 						})
 				) : timelineUpdate.type === `selector_update` ? (
-					timelineUpdate.atomUpdates
+					timelineUpdate.subEvents
 						.filter(
 							(atomUpdateEvent) => !atomUpdateEvent.token.key.startsWith(`👁‍🗨`),
 						)
-						.map((atomUpdate, index) => {
-							return (
-								<article.AtomUpdate
-									key={`${timelineUpdate.token.key}:${index}:${atomUpdate.token.key}`}
-									serialNumber={index}
-									atomUpdate={atomUpdate}
-								/>
-							)
+						.map((event, index) => {
+							switch (event.type) {
+								case `atom_update`:
+									return (
+										<article.AtomUpdate
+											key={`${timelineUpdate.token.key}:${index}:${event.token.key}`}
+											serialNumber={index}
+											atomUpdate={event}
+										/>
+									)
+								case `state_creation`:
+									return null
+							}
 						})
 				) : timelineUpdate.type === `atom_update` ? (
 					<article.AtomUpdate