@tldraw/store 5.6.0-next.c4e9c54a816e → 5.6.0-next.f151f7f3ebd6

package/src/lib/Store.ts

@@ -1,4 +1,13 @@
-import { Atom, Reactor, Signal, atom, computed, reactor, transact } from '@tldraw/state'
+import {
+	Atom,
+	Reactor,
+	Signal,
+	atom,
+	computed,
+	isUninitialized,
+	reactor,
+	transact,
+} from '@tldraw/state'
 import {
 	WeakCache,
 	assert,
@@ -20,6 +29,10 @@ import { StoreQueries } from './StoreQueries'
 import { SerializedSchema, StoreSchema } from './StoreSchema'
 import { StoreSideEffects } from './StoreSideEffects'
 
+// The value of a cached computed whose record has been deleted (see `createComputedCache`). It never
+// reaches callers: `get` resolves the record's atom first, and there is none for a deleted id.
+const DELETED_RECORD = Symbol('deleted record')
+
 /**
  * Extracts the record type from a record ID type.
  *
@@ -517,8 +530,9 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 
 	public _flushHistory() {
 		// If we have accumulated history, flush it and update listeners
-		if (this.historyAccumulator.hasChanges()) {
-			const entries = this.historyAccumulator.flush()
+		const version = this.history.__unsafe__getWithoutCapture()
+		const entries = this.historyAccumulator.flush(version)
+		if (entries.length > 0) {
 			const errors: unknown[] = []
 			const wasFlushingHistory = this.isFlushingHistory
 			this.isFlushingHistory = true
@@ -587,15 +601,22 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 	 * @param changes - The changes to add to the history.
 	 */
 	private updateHistory(changes: RecordsDiff<R>): void {
-		this.historyAccumulator.add({
-			changes,
-			source: this.isMergingRemoteChanges ? 'remote' : 'user',
-		})
+		// Don't capture: a reaction that writes to the store must not become a dependent of the
+		// history atom, or every other store change would re-run it (and it could loop forever).
+		const version = this.history.__unsafe__getWithoutCapture() + 1
+		// Set the atom before recording the entry: interceptors run inside `add`, and a flush they
+		// trigger (e.g. via `listen`) would otherwise discard the entry as not yet committed.
+		this.history.set(version, changes)
+		this.historyAccumulator.add(
+			{
+				changes,
+				source: this.isMergingRemoteChanges ? 'remote' : 'user',
+			},
+			version
+		)
 		if (this.listeners.size === 0) {
 			this.historyAccumulator.clear()
 		}
-		// Don't capture: a reaction that writes would otherwise re-run on every store change (S11).
-		this.history.set(this.history.__unsafe__getWithoutCapture() + 1, changes)
 	}
 
 	validate(phase: 'initialize' | 'createRecord' | 'updateRecord' | 'tests') {
@@ -1076,11 +1097,22 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 	 * Run `fn` and return a {@link RecordsDiff} of the changes that occurred as a result.
 	 */
 	extractingChanges(fn: () => void): RecordsDiff<R> {
-		const changes: Array<RecordsDiff<R>> = []
-		const dispose = this.historyAccumulator.addInterceptor((entry) => changes.push(entry.changes))
+		const collected: Array<{ version: number; changes: RecordsDiff<R> }> = []
+		const dispose = this.historyAccumulator.addInterceptor((entry, version) => {
+			// a nested transaction that rolled back inside `fn` leaves entries stamped at or past the
+			// next committed version — see HistoryAccumulator
+			while (collected.length && collected[collected.length - 1].version >= version) {
+				collected.pop()
+			}
+			collected.push({ version, changes: entry.changes })
+		})
 		try {
 			transact(fn)
-			return squashRecordDiffs(changes)
+			const current = this.history.__unsafe__getWithoutCapture()
+			while (collected.length && collected[collected.length - 1].version > current) {
+				collected.pop()
+			}
+			return squashRecordDiffs(collected.map((c) => c.changes))
 		} finally {
 			dispose()
 		}
@@ -1140,6 +1172,12 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 	 * signal for the underlying record. Return a signal (usually a computed) for the cached value.
 	 * For simple derivations, use {@link Store.createComputedCache}. This function is useful if you
 	 * need more precise control over intermediate values.
+	 *
+	 * After the record is deleted the record signal holds `UNINITIALIZED` rather than a record, and
+	 * a signal that a reader still depends on can be re-derived once more in that state. Guard with
+	 * `isUninitialized` and return a value no live record can produce: returning the same value the
+	 * record last had (e.g. `undefined`) leaves readers stale if a record with that id comes back.
+	 * {@link Store.createComputedCache} handles this for you.
 	 */
 	createCache<Result, Record extends R = R>(
 		create: (id: IdOf<Record>, recordSignal: Signal<R>) => Signal<Result>
@@ -1167,18 +1205,33 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
 		derive: (record: Record) => Result | undefined,
 		opts?: CreateComputedCacheOpts<Result, Record>
 	): ComputedCache<Result, Record> {
+		const areRecordsEqual = opts?.areRecordsEqual
+		const areResultsEqual = opts?.areResultsEqual
 		return this.createCache((id, record) => {
-			const recordSignal = opts?.areRecordsEqual
-				? computed(`${name}:${id}:isEqual`, () => record.get(), { isEqual: opts.areRecordsEqual })
+			const recordSignal = areRecordsEqual
+				? computed(`${name}:${id}:isEqual`, () => record.get(), {
+						// a deleted record's atom holds UNINITIALIZED, which user code must not see
+						isEqual: (a, b) =>
+							isUninitialized(a) || isUninitialized(b) ? a === b : areRecordsEqual(a, b),
+					})
 				: record
 
 			return computed<Result | undefined>(
 				name + ':' + id,
 				() => {
-					return derive(recordSignal.get() as Record)
+					// The computed can be re-derived after its record is deleted (e.g. by a reaction
+					// checking whether its parents changed), when the atom holds UNINITIALIZED. Return
+					// DELETED_RECORD rather than undefined: it never equals a real result, so a reader
+					// re-runs, looks the id up again, and so sees the record if it comes back.
+					const value = recordSignal.get()
+					if (isUninitialized(value)) return DELETED_RECORD as any
+					return derive(value as Record)
 				},
 				{
-					isEqual: opts?.areResultsEqual,
+					isEqual: areResultsEqual
+						? (a, b) =>
+								a === DELETED_RECORD || b === DELETED_RECORD ? a === b : areResultsEqual(a, b)
+						: undefined,
 				}
 			)
 		})
@@ -1365,13 +1418,18 @@ function squashHistoryEntries<T extends UnknownRecord>(
 class HistoryAccumulator<T extends UnknownRecord> {
 	private _history: HistoryEntry<T>[] = []
 
-	private _interceptors: Set<(entry: HistoryEntry<T>) => void> = new Set()
+	// The `history` atom value each entry was recorded at. A transaction that aborts rolls that atom
+	// back but cannot unwind this array, so an entry stamped at or past the atom's current value
+	// belongs to a rolled-back change-set and must not reach listeners.
+	private _versions: number[] = []
+
+	private _interceptors: Set<(entry: HistoryEntry<T>, version: number) => void> = new Set()
 
 	/**
-	 * Add an interceptor that will be called for each history entry.
-	 * Returns a function to remove the interceptor.
+	 * Add an interceptor that will be called for each history entry, with the version it was
+	 * recorded at (see `add`). Returns a function to remove the interceptor.
 	 */
-	addInterceptor(fn: (entry: HistoryEntry<T>) => void) {
+	addInterceptor(fn: (entry: HistoryEntry<T>, version: number) => void) {
 		this._interceptors.add(fn)
 		return () => {
 			this._interceptors.delete(fn)
@@ -1379,13 +1437,15 @@ class HistoryAccumulator<T extends UnknownRecord> {
 	}
 
 	/**
-	 * Add a history entry to the accumulator.
+	 * Add a history entry recorded at `version` (the `history` atom value it sets).
 	 * Calls all registered interceptors with the entry.
 	 */
-	add(entry: HistoryEntry<T>) {
+	add(entry: HistoryEntry<T>, version: number) {
+		this.discardFrom(version)
 		this._history.push(entry)
+		this._versions.push(version)
 		for (const interceptor of this._interceptors) {
-			interceptor(entry)
+			interceptor(entry, version)
 		}
 	}
 
@@ -1393,9 +1453,10 @@ class HistoryAccumulator<T extends UnknownRecord> {
 	 * Flush all accumulated history entries, squashing adjacent entries from the same source.
 	 * Clears the internal history buffer.
 	 */
-	flush() {
+	flush(currentVersion: number) {
+		this.discardFrom(currentVersion + 1)
 		const history = squashHistoryEntries(this._history)
-		this._history = []
+		this.clear()
 		return history
 	}
 
@@ -1404,13 +1465,16 @@ class HistoryAccumulator<T extends UnknownRecord> {
 	 */
 	clear() {
 		this._history = []
+		this._versions = []
 	}
 
-	/**
-	 * Check if there are any accumulated history entries.
-	 */
-	hasChanges() {
-		return this._history.length > 0
+	// Drops the entries recorded at or after `version`. Entries are in ascending version order: the
+	// atom increments by one per entry, and a rollback is followed by exactly this discard.
+	private discardFrom(version: number) {
+		while (this._versions.length && this._versions[this._versions.length - 1] >= version) {
+			this._versions.pop()
+			this._history.pop()
+		}
 	}
 }
 

package/src/lib/StoreListeners.test.ts

@@ -1,4 +1,4 @@
-import { react, RESET_VALUE, transact } from '@tldraw/state'
+import { react, RESET_VALUE, transact, transaction } from '@tldraw/state'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { BaseRecord, RecordId } from './BaseRecord'
 import { RecordsDiff, reverseRecordsDiff } from './RecordsDiff'
@@ -461,6 +461,93 @@ describe('applying diffs (H)', () => {
 	})
 })
 
+describe('listeners: rollback (H)', () => {
+	it('[H11] listeners never see change-sets from a transaction that rolled back', async () => {
+		const listener = vi.fn()
+		store.listen(listener)
+		const author = tolkein()
+
+		expect(() =>
+			store.atomic(() => {
+				store.put([author])
+				throw new Error('abort')
+			})
+		).toThrow('abort')
+		expect(store.get(author.id)).toBeUndefined()
+
+		// a later, committed change flushes whatever the accumulator still holds
+		store.put([Author.create({ name: 'Ursula K. Le Guin' })])
+		await new Promise((resolve) => requestAnimationFrame(resolve))
+
+		const addedIds = listener.mock.calls.flatMap(([entry]) => Object.keys(entry.changes.added))
+		expect(addedIds).not.toContain(author.id)
+		expect(addedIds).toHaveLength(1)
+	})
+
+	it('[H11] a rolled-back nested transaction only discards its own change-sets', async () => {
+		const listener = vi.fn()
+		store.listen(listener)
+		const kept = tolkein()
+		const dropped = Author.create({ name: 'Dropped' })
+
+		transact(() => {
+			store.put([kept])
+			try {
+				transaction(() => {
+					store.put([dropped])
+					throw new Error('inner')
+				})
+			} catch {
+				// the outer transaction commits
+			}
+		})
+		await new Promise((resolve) => requestAnimationFrame(resolve))
+
+		expect(store.get(kept.id)).toBeDefined()
+		expect(store.get(dropped.id)).toBeUndefined()
+		const addedIds = listener.mock.calls.flatMap(([entry]) => Object.keys(entry.changes.added))
+		expect(addedIds).toEqual([kept.id])
+	})
+})
+
+describe('extracting changes across rolled-back nested transactions (H)', () => {
+	it('[H7] extractingChanges excludes changes from a nested transaction that rolled back', () => {
+		const kept = tolkein()
+		const dropped = Author.create({ name: 'Dropped' })
+		const changes = store.extractingChanges(() => {
+			store.put([kept])
+			try {
+				transaction(() => {
+					store.put([dropped])
+					throw new Error('inner')
+				})
+			} catch {
+				// swallowed: the outer work continues
+			}
+		})
+		expect(Object.keys(changes.added)).toEqual([kept.id])
+		expect(store.get(dropped.id)).toBeUndefined()
+	})
+})
+
+describe('listeners added from an interceptor (H)', () => {
+	it('[H8] a flush triggered from inside an interceptor still delivers the entry being recorded', () => {
+		const first = vi.fn()
+		store.listen(first)
+		let added = false
+		store.addHistoryInterceptor(() => {
+			if (added) return
+			added = true
+			// listen() flushes synchronously while the entry is still being recorded
+			store.listen(() => {})
+		})
+
+		store.put([tolkein()])
+		store._flushHistory()
+		expect(first).toHaveBeenCalledTimes(1)
+	})
+})
+
 describe('applying diffs with ignoreEphemeralKeys (H)', () => {
 	it('[H10] ignoreEphemeralKeys also applies the removal of a non-ephemeral key', () => {
 		const visitId = Visit.createId('jane')