From 82466f53337eeb8a365a973ed47dd77673dd0970 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 29 Jan 2026 19:22:14 +0000 Subject: [PATCH 1/2] feat(bippy): add React state time-travel debugging module - Add TimeTravel class that tracks state/props history on every commit - Implement history navigation (goBack, goForward, goToIndex, goToCommitId) - Support state restoration via overrideHookState and overrideProps - Add component filtering by name or custom function - Implement diff functionality to compare snapshots - Add state/props timeline methods for individual fibers - Support export/import of history as JSON - Add comprehensive test coverage for all features The time-travel module uses bippy's instrumentation to: 1. Capture snapshots of fiber state on every commit 2. Store props and hook states with proper cloning 3. Restore previous states using React DevTools-style overrides Co-authored-by: aiden --- packages/bippy/src/test/time-travel.test.tsx | 656 +++++++++++++++++++ packages/bippy/src/time-travel.ts | 445 +++++++++++++ 2 files changed, 1101 insertions(+) create mode 100644 packages/bippy/src/test/time-travel.test.tsx create mode 100644 packages/bippy/src/time-travel.ts diff --git a/packages/bippy/src/test/time-travel.test.tsx b/packages/bippy/src/test/time-travel.test.tsx new file mode 100644 index 00000000..93160a33 --- /dev/null +++ b/packages/bippy/src/test/time-travel.test.tsx @@ -0,0 +1,656 @@ +import '../index.js'; + +import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'; +import React, { useState } from 'react'; +import { render, screen, fireEvent, act, cleanup } from '@testing-library/react'; +import { TimeTravel, createTimeTravel } from '../time-travel.js'; + +afterEach(() => { + cleanup(); +}); + +const Counter = ({ initialCount = 0 }: { initialCount?: number }) => { + const [count, setCount] = useState(initialCount); + + return ( +
+ {count} + + +
+ ); +}; + +const TodoApp = () => { + const [todos, setTodos] = useState([]); + const [inputValue, setInputValue] = useState(''); + + const addTodo = () => { + if (inputValue.trim()) { + setTodos((previousTodos) => [...previousTodos, inputValue]); + setInputValue(''); + } + }; + + const removeTodo = (index: number) => { + setTodos((previousTodos) => previousTodos.filter((_, itemIndex) => itemIndex !== index)); + }; + + return ( +
+ setInputValue(event.target.value)} + /> + +
    + {todos.map((todo, index) => ( +
  • + {todo} + +
    • + ))} +
+
+ ); +}; + +const MultiStateComponent = () => { + const [name, setName] = useState(''); + const [age, setAge] = useState(0); + const [active, setActive] = useState(false); + + return ( +
+ setName(event.target.value)} + /> + setAge(Number(event.target.value))} + /> + +
+ {name} - {age} - {active ? 'active' : 'inactive'} +
+
+ ); +}; + +describe('TimeTravel', () => { + describe('createTimeTravel', () => { + it('should create a TimeTravel instance', () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + expect(timeTravel).toBeInstanceOf(TimeTravel); + }); + + it('should accept options', () => { + const onSnapshot = vi.fn(); + const timeTravel = createTimeTravel({ + maxHistoryLength: 50, + onSnapshot, + dangerouslyRunInProduction: true, + }); + expect(timeTravel).toBeInstanceOf(TimeTravel); + }); + }); + + describe('snapshot tracking', () => { + it('should capture snapshots on commit', async () => { + const onSnapshot = vi.fn(); + createTimeTravel({ + onSnapshot, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(onSnapshot).toHaveBeenCalled(); + }); + + it('should track state changes', async () => { + const onSnapshot = vi.fn(); + const timeTravel = createTimeTravel({ + onSnapshot, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const initialHistory = timeTravel.getHistory(); + expect(initialHistory.length).toBeGreaterThan(0); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const updatedHistory = timeTravel.getHistory(); + expect(updatedHistory.length).toBeGreaterThanOrEqual(initialHistory.length); + }); + + it('should filter components by name', async () => { + const onSnapshot = vi.fn(); + const timeTravel = createTimeTravel({ + onSnapshot, + trackComponents: ['Counter'], + dangerouslyRunInProduction: true, + }); + + render( +
+ + +
, + ); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + for (const snapshot of history) { + for (const fiberSnapshot of snapshot.fibers.values()) { + expect(fiberSnapshot.displayName).toBe('Counter'); + } + } + }); + + it('should filter components by function', async () => { + const trackFunction = vi.fn((displayName: string | null) => { + return displayName === 'Counter' || displayName === 'TodoApp'; + }); + const timeTravel = createTimeTravel({ + trackComponents: trackFunction, + dangerouslyRunInProduction: true, + }); + + render( +
+ + +
, + ); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(trackFunction).toHaveBeenCalled(); + }); + }); + + describe('history navigation', () => { + it('should track history length', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + expect(history.length).toBeGreaterThan(0); + }); + + it('should return current snapshot', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const current = timeTravel.getCurrentSnapshot(); + expect(current).not.toBeNull(); + expect(current?.fibers).toBeDefined(); + }); + + it('should report canGoBack and canGoForward correctly', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(timeTravel.canGoForward()).toBe(false); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < 3; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + const currentIndex = timeTravel.getCurrentIndex(); + if (currentIndex > 0) { + expect(timeTravel.canGoBack()).toBe(true); + } + }); + + it('should navigate back and forward', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < 3; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + const historyLength = timeTravel.getHistory().length; + + if (historyLength > 1) { + const previousIndex = timeTravel.getCurrentIndex(); + timeTravel.goBack(); + expect(timeTravel.getCurrentIndex()).toBe(previousIndex - 1); + + timeTravel.goForward(); + expect(timeTravel.getCurrentIndex()).toBe(previousIndex); + } + }); + + it('should go to specific index', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < 5; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + const history = timeTravel.getHistory(); + if (history.length > 2) { + timeTravel.goToIndex(1); + expect(timeTravel.getCurrentIndex()).toBe(1); + } + }); + + it('should go to specific commit ID', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + if (history.length > 0) { + const targetCommitId = history[0].commitId; + timeTravel.goToCommitId(targetCommitId); + expect(timeTravel.getCurrentSnapshot()?.commitId).toBe(targetCommitId); + } + }); + }); + + describe('timeline methods', () => { + it('should get state timeline for a fiber', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < 3; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + const history = timeTravel.getHistory(); + if (history.length > 0) { + const firstFiberId = history[0].fibers.keys().next().value; + if (firstFiberId !== undefined) { + const timeline = timeTravel.getStateTimeline(firstFiberId, 0); + expect(timeline).toBeDefined(); + expect(Array.isArray(timeline)).toBe(true); + } + } + }); + + it('should get component history by display name', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const componentHistory = timeTravel.getComponentHistory('Counter'); + expect(Array.isArray(componentHistory)).toBe(true); + }); + }); + + describe('diff functionality', () => { + it('should compute diff between snapshots', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + if (history.length >= 2) { + const diffResult = timeTravel.diff(0, history.length - 1); + expect(diffResult).toBeDefined(); + expect(diffResult instanceof Map).toBe(true); + } + }); + }); + + describe('export/import', () => { + it('should export history to JSON', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const exported = timeTravel.exportHistory(); + expect(typeof exported).toBe('string'); + + const parsed = JSON.parse(exported); + expect(parsed.history).toBeDefined(); + expect(parsed.currentIndex).toBeDefined(); + }); + + it('should import history from JSON', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const exported = timeTravel.exportHistory(); + timeTravel.clear(); + + expect(timeTravel.getHistory().length).toBe(0); + + timeTravel.importHistory(exported); + expect(timeTravel.getHistory().length).toBeGreaterThan(0); + }); + }); + + describe('clear functionality', () => { + it('should clear history', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(timeTravel.getHistory().length).toBeGreaterThan(0); + + timeTravel.clear(); + + expect(timeTravel.getHistory().length).toBe(0); + expect(timeTravel.getCurrentIndex()).toBe(-1); + }); + }); + + describe('max history length', () => { + it('should respect max history length', async () => { + const maxLength = 5; + const timeTravel = createTimeTravel({ + maxHistoryLength: maxLength, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < maxLength + 5; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + expect(timeTravel.getHistory().length).toBeLessThanOrEqual(maxLength); + }); + }); + + describe('callbacks', () => { + it('should call onSnapshot callback', async () => { + const onSnapshot = vi.fn(); + createTimeTravel({ + onSnapshot, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(onSnapshot).toHaveBeenCalled(); + }); + + it('should call onRestore callback when navigating', async () => { + const onRestore = vi.fn(); + const timeTravel = createTimeTravel({ + onRestore, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + for (let iterationIndex = 0; iterationIndex < 3; iterationIndex++) { + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + } + + if (timeTravel.canGoBack()) { + timeTravel.goBack(); + expect(onRestore).toHaveBeenCalled(); + } + }); + }); + + describe('complex state tracking', () => { + it('should track multiple state hooks', async () => { + const timeTravel = createTimeTravel({ + trackComponents: ['MultiStateComponent'], + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const nameInput = screen.getByTestId('name-input'); + const ageInput = screen.getByTestId('age-input'); + const toggleButton = screen.getByTestId('toggle-active'); + + await act(async () => { + fireEvent.change(nameInput, { target: { value: 'John' } }); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + await act(async () => { + fireEvent.change(ageInput, { target: { value: '25' } }); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + await act(async () => { + fireEvent.click(toggleButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + expect(history.length).toBeGreaterThan(0); + + const lastSnapshot = history[history.length - 1]; + for (const fiberSnapshot of lastSnapshot.fibers.values()) { + if (fiberSnapshot.displayName === 'MultiStateComponent') { + expect(fiberSnapshot.hookStates.length).toBeGreaterThan(0); + } + } + }); + + it('should track array state changes', async () => { + const timeTravel = createTimeTravel({ + trackComponents: ['TodoApp'], + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const todoInput = screen.getByTestId('todo-input'); + const addButton = screen.getByTestId('add-todo'); + + await act(async () => { + fireEvent.change(todoInput, { target: { value: 'First todo' } }); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + await act(async () => { + fireEvent.click(addButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + await act(async () => { + fireEvent.change(todoInput, { target: { value: 'Second todo' } }); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + await act(async () => { + fireEvent.click(addButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + expect(history.length).toBeGreaterThan(0); + }); + }); +}); diff --git a/packages/bippy/src/time-travel.ts b/packages/bippy/src/time-travel.ts new file mode 100644 index 00000000..9ade1322 --- /dev/null +++ b/packages/bippy/src/time-travel.ts @@ -0,0 +1,445 @@ +import type { Fiber, FiberRoot, MemoizedState, Props } from './types.js'; +import { + instrument, + traverseFiber, + traverseState, + getDisplayName, + getFiberId, + isCompositeFiber, + overrideHookState, + overrideProps, + traverseRenderedFibers, + secure, +} from './core.js'; + +interface HookState { + hookIndex: number; + value: unknown; +} + +interface FiberSnapshot { + fiberId: number; + displayName: string | null; + props: Props; + hookStates: HookState[]; + timestamp: number; +} + +interface CommitSnapshot { + commitId: number; + timestamp: number; + fibers: Map; +} + +interface TimeTravelOptions { + maxHistoryLength?: number; + onSnapshot?: (snapshot: CommitSnapshot) => void; + onRestore?: (snapshot: CommitSnapshot) => void; + trackComponents?: string[] | ((displayName: string | null) => boolean); + dangerouslyRunInProduction?: boolean; +} + +const cloneValue = (value: T): T => { + if (value === null || value === undefined) return value; + if (typeof value === 'function') return value; + if (typeof value !== 'object') return value; + + try { + return JSON.parse(JSON.stringify(value)) as T; + } catch { + return value; + } +}; + +const extractHookStates = (fiber: Fiber): HookState[] => { + const hookStates: HookState[] = []; + let hookIndex = 0; + + traverseState(fiber, (nextState) => { + if (nextState && 'memoizedState' in nextState) { + const stateValue = nextState.memoizedState; + if ( + nextState.queue !== undefined && + nextState.queue !== null && + typeof nextState.queue === 'object' && + 'dispatch' in nextState.queue + ) { + hookStates.push({ + hookIndex, + value: cloneValue(stateValue), + }); + } + } + hookIndex++; + }); + + return hookStates; +}; + +const createFiberSnapshot = (fiber: Fiber): FiberSnapshot => { + return { + fiberId: getFiberId(fiber), + displayName: getDisplayName(fiber.type), + props: cloneValue(fiber.memoizedProps), + hookStates: extractHookStates(fiber), + timestamp: Date.now(), + }; +}; + +export class TimeTravel { + private history: CommitSnapshot[] = []; + private currentIndex = -1; + private commitCounter = 0; + private maxHistoryLength: number; + private onSnapshot?: (snapshot: CommitSnapshot) => void; + private onRestore?: (snapshot: CommitSnapshot) => void; + private trackComponents?: string[] | ((displayName: string | null) => boolean); + private fiberMap = new WeakMap(); + private fiberIdToFiberMap = new Map(); + private isRestoring = false; + private fiberRoots = new Set(); + + constructor(options: TimeTravelOptions = {}) { + this.maxHistoryLength = options.maxHistoryLength ?? 100; + this.onSnapshot = options.onSnapshot; + this.onRestore = options.onRestore; + this.trackComponents = options.trackComponents; + + const instrumentOptions = { + onCommitFiberRoot: (_rendererID: number, root: FiberRoot) => { + if (this.isRestoring) return; + + this.fiberRoots.add(root); + this.captureSnapshot(root); + }, + }; + + if (options.dangerouslyRunInProduction) { + instrument( + secure(instrumentOptions, { dangerouslyRunInProduction: true }), + ); + } else { + instrument(secure(instrumentOptions)); + } + } + + private shouldTrackFiber(fiber: Fiber): boolean { + if (!isCompositeFiber(fiber)) return false; + + const displayName = getDisplayName(fiber.type); + + if (!this.trackComponents) return true; + + if (Array.isArray(this.trackComponents)) { + return displayName !== null && this.trackComponents.includes(displayName); + } + + return this.trackComponents(displayName); + } + + private captureSnapshot(root: FiberRoot): void { + const snapshot: CommitSnapshot = { + commitId: this.commitCounter++, + timestamp: Date.now(), + fibers: new Map(), + }; + + traverseRenderedFibers(root, (fiber) => { + if (this.shouldTrackFiber(fiber)) { + const fiberSnapshot = createFiberSnapshot(fiber); + snapshot.fibers.set(fiberSnapshot.fiberId, fiberSnapshot); + this.fiberIdToFiberMap.set(fiberSnapshot.fiberId, fiber); + } + }); + + if (snapshot.fibers.size > 0) { + if (this.currentIndex < this.history.length - 1) { + this.history = this.history.slice(0, this.currentIndex + 1); + } + + this.history.push(snapshot); + this.currentIndex = this.history.length - 1; + + if (this.history.length > this.maxHistoryLength) { + this.history.shift(); + this.currentIndex--; + } + + this.onSnapshot?.(snapshot); + } + } + + getHistory(): CommitSnapshot[] { + return [...this.history]; + } + + getCurrentIndex(): number { + return this.currentIndex; + } + + getCurrentSnapshot(): CommitSnapshot | null { + return this.history[this.currentIndex] ?? null; + } + + getSnapshotAt(index: number): CommitSnapshot | null { + return this.history[index] ?? null; + } + + canGoBack(): boolean { + return this.currentIndex > 0; + } + + canGoForward(): boolean { + return this.currentIndex < this.history.length - 1; + } + + goBack(): CommitSnapshot | null { + if (!this.canGoBack()) return null; + return this.goToIndex(this.currentIndex - 1); + } + + goForward(): CommitSnapshot | null { + if (!this.canGoForward()) return null; + return this.goToIndex(this.currentIndex + 1); + } + + goToIndex(index: number): CommitSnapshot | null { + if (index < 0 || index >= this.history.length) return null; + + const snapshot = this.history[index]; + this.restoreSnapshot(snapshot); + this.currentIndex = index; + + return snapshot; + } + + goToCommitId(commitId: number): CommitSnapshot | null { + const index = this.history.findIndex( + (snapshot) => snapshot.commitId === commitId, + ); + if (index === -1) return null; + return this.goToIndex(index); + } + + private restoreSnapshot(snapshot: CommitSnapshot): void { + this.isRestoring = true; + + try { + for (const [fiberId, fiberSnapshot] of snapshot.fibers) { + const fiber = this.fiberIdToFiberMap.get(fiberId); + if (!fiber) continue; + + for (const hookState of fiberSnapshot.hookStates) { + const restoredValue = cloneValue(hookState.value); + overrideHookState(fiber, hookState.hookIndex, restoredValue as Record); + } + + const currentProps = fiber.memoizedProps ?? {}; + const snapshotProps = fiberSnapshot.props ?? {}; + + for (const propName of Object.keys(snapshotProps)) { + if (propName === 'children') continue; + if (currentProps[propName] !== snapshotProps[propName]) { + overrideProps(fiber, { [propName]: cloneValue(snapshotProps[propName]) }); + } + } + } + + this.onRestore?.(snapshot); + } finally { + this.isRestoring = false; + } + } + + getFiberSnapshotHistory(fiberId: number): FiberSnapshot[] { + const snapshots: FiberSnapshot[] = []; + for (const commit of this.history) { + const fiberSnapshot = commit.fibers.get(fiberId); + if (fiberSnapshot) { + snapshots.push(fiberSnapshot); + } + } + return snapshots; + } + + getComponentHistory(displayName: string): FiberSnapshot[] { + const snapshots: FiberSnapshot[] = []; + for (const commit of this.history) { + for (const fiberSnapshot of commit.fibers.values()) { + if (fiberSnapshot.displayName === displayName) { + snapshots.push(fiberSnapshot); + } + } + } + return snapshots; + } + + clear(): void { + this.history = []; + this.currentIndex = -1; + this.commitCounter = 0; + this.fiberIdToFiberMap.clear(); + } + + getStateTimeline( + fiberId: number, + hookIndex: number, + ): Array<{ commitId: number; timestamp: number; value: unknown }> { + const timeline: Array<{ commitId: number; timestamp: number; value: unknown }> = []; + + for (const commit of this.history) { + const fiberSnapshot = commit.fibers.get(fiberId); + if (fiberSnapshot) { + const hookState = fiberSnapshot.hookStates.find( + (hookStateItem) => hookStateItem.hookIndex === hookIndex, + ); + if (hookState) { + timeline.push({ + commitId: commit.commitId, + timestamp: commit.timestamp, + value: hookState.value, + }); + } + } + } + + return timeline; + } + + getPropsTimeline( + fiberId: number, + propName: string, + ): Array<{ commitId: number; timestamp: number; value: unknown }> { + const timeline: Array<{ commitId: number; timestamp: number; value: unknown }> = []; + + for (const commit of this.history) { + const fiberSnapshot = commit.fibers.get(fiberId); + if (fiberSnapshot && propName in fiberSnapshot.props) { + timeline.push({ + commitId: commit.commitId, + timestamp: commit.timestamp, + value: fiberSnapshot.props[propName], + }); + } + } + + return timeline; + } + + exportHistory(): string { + return JSON.stringify( + { + history: this.history.map((commit) => ({ + ...commit, + fibers: Array.from(commit.fibers.entries()), + })), + currentIndex: this.currentIndex, + }, + null, + 2, + ); + } + + importHistory(jsonString: string): void { + const data = JSON.parse(jsonString) as { + history: Array<{ + commitId: number; + timestamp: number; + fibers: Array<[number, FiberSnapshot]>; + }>; + currentIndex: number; + }; + + this.history = data.history.map((commit) => ({ + ...commit, + fibers: new Map(commit.fibers), + })); + this.currentIndex = data.currentIndex; + } + + diff( + fromIndex: number, + toIndex: number, + ): Map< + number, + { + fiberId: number; + displayName: string | null; + propChanges: Array<{ prop: string; from: unknown; to: unknown }>; + stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }>; + } + > { + const fromSnapshot = this.history[fromIndex]; + const toSnapshot = this.history[toIndex]; + + if (!fromSnapshot || !toSnapshot) { + return new Map(); + } + + const changes = new Map< + number, + { + fiberId: number; + displayName: string | null; + propChanges: Array<{ prop: string; from: unknown; to: unknown }>; + stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }>; + } + >(); + + const allFiberIds = new Set([ + ...fromSnapshot.fibers.keys(), + ...toSnapshot.fibers.keys(), + ]); + + for (const fiberId of allFiberIds) { + const fromFiber = fromSnapshot.fibers.get(fiberId); + const toFiber = toSnapshot.fibers.get(fiberId); + + if (!fromFiber || !toFiber) continue; + + const propChanges: Array<{ prop: string; from: unknown; to: unknown }> = []; + const stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }> = []; + + const allProps = new Set([ + ...Object.keys(fromFiber.props ?? {}), + ...Object.keys(toFiber.props ?? {}), + ]); + + for (const prop of allProps) { + const fromValue = fromFiber.props?.[prop]; + const toValue = toFiber.props?.[prop]; + if (JSON.stringify(fromValue) !== JSON.stringify(toValue)) { + propChanges.push({ prop, from: fromValue, to: toValue }); + } + } + + for (const toState of toFiber.hookStates) { + const fromState = fromFiber.hookStates.find( + (hookStateItem) => hookStateItem.hookIndex === toState.hookIndex, + ); + const fromValue = fromState?.value; + const toValue = toState.value; + if (JSON.stringify(fromValue) !== JSON.stringify(toValue)) { + stateChanges.push({ hookIndex: toState.hookIndex, from: fromValue, to: toValue }); + } + } + + if (propChanges.length > 0 || stateChanges.length > 0) { + changes.set(fiberId, { + fiberId, + displayName: toFiber.displayName, + propChanges, + stateChanges, + }); + } + } + + return changes; + } +} + +export const createTimeTravel = (options?: TimeTravelOptions): TimeTravel => { + return new TimeTravel(options); +}; + +export type { CommitSnapshot, FiberSnapshot, HookState, TimeTravelOptions }; From 2c294085de817fe85b121297b879e3c9eafbac6d Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 29 Jan 2026 19:36:40 +0000 Subject: [PATCH 2/2] refactor(bippy): improve time-travel robustness and add features Improvements: - Proper hook type identification (State, Reducer, Ref, Effect, Memo, etc.) - Track which hooks are actually editable (only State and Reducer) - Use WeakRef for fiber references to handle double-buffering - Add class component state tracking support - Add external state manager integration hooks (captureExternalState, restoreExternalState) - Add onBeforeRestore callback for restore cancellation - Add fibersByName index for faster component lookups - Better error handling during restoration - Skip non-serializable props (functions, key, ref, children) - Use getLatestFiber to handle fiber alternates correctly - Add utility methods: getTrackedFiberIds, getTrackedComponentNames, getEditableStateCount - Include hookType in diff results and state timeline - Export/import now includes version and external state Test improvements: - Add hook type identification tests - Add external state capture/restore tests - Add onBeforeRestore callback tests - Add utility method tests - Fix test cleanup between runs Co-authored-by: aiden --- packages/bippy/src/test/time-travel.test.tsx | 209 ++++++++- packages/bippy/src/time-travel.ts | 455 ++++++++++++++++--- 2 files changed, 595 insertions(+), 69 deletions(-) diff --git a/packages/bippy/src/test/time-travel.test.tsx b/packages/bippy/src/test/time-travel.test.tsx index 93160a33..8c8d9496 100644 --- a/packages/bippy/src/test/time-travel.test.tsx +++ b/packages/bippy/src/test/time-travel.test.tsx @@ -609,7 +609,7 @@ describe('TimeTravel', () => { const lastSnapshot = history[history.length - 1]; for (const fiberSnapshot of lastSnapshot.fibers.values()) { if (fiberSnapshot.displayName === 'MultiStateComponent') { - expect(fiberSnapshot.hookStates.length).toBeGreaterThan(0); + expect(fiberSnapshot.hooks.length).toBeGreaterThan(0); } } }); @@ -652,5 +652,212 @@ describe('TimeTravel', () => { const history = timeTravel.getHistory(); expect(history.length).toBeGreaterThan(0); }); + + it('should identify hook types correctly', async () => { + const timeTravel = createTimeTravel({ + trackComponents: ['MultiStateComponent'], + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const history = timeTravel.getHistory(); + expect(history.length).toBeGreaterThan(0); + + const lastSnapshot = history[history.length - 1]; + for (const fiberSnapshot of lastSnapshot.fibers.values()) { + if (fiberSnapshot.displayName === 'MultiStateComponent') { + const stateHooks = fiberSnapshot.hooks.filter((hook) => hook.hookType === 'State'); + expect(stateHooks.length).toBeGreaterThan(0); + expect(stateHooks.every((hook) => hook.isEditable)).toBe(true); + } + } + }); + }); + + describe('external state support', () => { + it('should capture external state if provided', async () => { + let externalCounter = 0; + const captureExternalState = vi.fn(() => [ + { key: 'counter', value: externalCounter }, + ]); + + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + captureExternalState, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(captureExternalState).toHaveBeenCalled(); + }); + + it('should restore external state if provided', async () => { + let externalCounter = 0; + const restoreExternalState = vi.fn((entries) => { + const counterEntry = entries.find((entry: { key: string }) => entry.key === 'counter'); + if (counterEntry) { + externalCounter = counterEntry.value; + } + }); + + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + captureExternalState: () => [{ key: 'counter', value: externalCounter }], + restoreExternalState, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + externalCounter = 5; + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + if (timeTravel.canGoBack()) { + timeTravel.goBack(); + expect(restoreExternalState).toHaveBeenCalled(); + } + }); + }); + + describe('onBeforeRestore callback', () => { + it('should call onBeforeRestore before restoring', async () => { + const onBeforeRestore = vi.fn(() => true); + const timeTravel = createTimeTravel({ + onBeforeRestore, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + if (timeTravel.canGoBack()) { + timeTravel.goBack(); + expect(onBeforeRestore).toHaveBeenCalled(); + } + }); + + it('should prevent restore if onBeforeRestore returns false', async () => { + const onBeforeRestore = vi.fn(() => false); + const onRestore = vi.fn(); + const timeTravel = createTimeTravel({ + onBeforeRestore, + onRestore, + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const incrementButton = screen.getByTestId('increment'); + + await act(async () => { + fireEvent.click(incrementButton); + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const indexBeforeGoBack = timeTravel.getCurrentIndex(); + + if (timeTravel.canGoBack()) { + timeTravel.goBack(); + expect(onBeforeRestore).toHaveBeenCalled(); + expect(onRestore).not.toHaveBeenCalled(); + expect(timeTravel.getCurrentIndex()).toBe(indexBeforeGoBack); + } + }); + }); + + describe('utility methods', () => { + it('should return tracked fiber IDs', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const fiberIds = timeTravel.getTrackedFiberIds(); + expect(Array.isArray(fiberIds)).toBe(true); + }); + + it('should return tracked component names', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const componentNames = timeTravel.getTrackedComponentNames(); + expect(Array.isArray(componentNames)).toBe(true); + }); + + it('should return editable state count', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + const fiberIds = timeTravel.getTrackedFiberIds(); + if (fiberIds.length > 0) { + const count = timeTravel.getEditableStateCount(fiberIds[0]); + expect(typeof count).toBe('number'); + } + }); + + it('should report restore in progress state', async () => { + const timeTravel = createTimeTravel({ + dangerouslyRunInProduction: true, + }); + + render(); + + await act(async () => { + await new Promise((resolve) => setTimeout(resolve, 10)); + }); + + expect(timeTravel.isRestoreInProgress()).toBe(false); + }); }); }); diff --git a/packages/bippy/src/time-travel.ts b/packages/bippy/src/time-travel.ts index 9ade1322..d1059f8f 100644 --- a/packages/bippy/src/time-travel.ts +++ b/packages/bippy/src/time-travel.ts @@ -1,8 +1,6 @@ import type { Fiber, FiberRoot, MemoizedState, Props } from './types.js'; import { instrument, - traverseFiber, - traverseState, getDisplayName, getFiberId, isCompositeFiber, @@ -10,18 +8,49 @@ import { overrideProps, traverseRenderedFibers, secure, + ClassComponentTag, + FunctionComponentTag, + ForwardRefTag, + MemoComponentTag, + SimpleMemoComponentTag, + getLatestFiber, } from './core.js'; -interface HookState { +type HookType = + | 'State' + | 'Reducer' + | 'Ref' + | 'Effect' + | 'LayoutEffect' + | 'InsertionEffect' + | 'Memo' + | 'Callback' + | 'Context' + | 'ImperativeHandle' + | 'DebugValue' + | 'DeferredValue' + | 'Transition' + | 'SyncExternalStore' + | 'Id' + | 'Optimistic' + | 'FormState' + | 'ActionState' + | 'Unknown'; + +interface HookInfo { hookIndex: number; + hookType: HookType; value: unknown; + isEditable: boolean; } interface FiberSnapshot { fiberId: number; displayName: string | null; + componentType: 'function' | 'class' | 'forwardRef' | 'memo' | 'unknown'; props: Props; - hookStates: HookState[]; + hooks: HookInfo[]; + classState: unknown | null; timestamp: number; } @@ -29,59 +58,178 @@ interface CommitSnapshot { commitId: number; timestamp: number; fibers: Map; + fibersByName: Map; +} + +interface ExternalStateEntry { + key: string; + value: unknown; } interface TimeTravelOptions { maxHistoryLength?: number; onSnapshot?: (snapshot: CommitSnapshot) => void; onRestore?: (snapshot: CommitSnapshot) => void; - trackComponents?: string[] | ((displayName: string | null) => boolean); + onBeforeRestore?: (snapshot: CommitSnapshot) => boolean | void; + trackComponents?: string[] | ((displayName: string | null, fiber: Fiber) => boolean); dangerouslyRunInProduction?: boolean; + captureExternalState?: () => ExternalStateEntry[]; + restoreExternalState?: (entries: ExternalStateEntry[]) => void; } -const cloneValue = (value: T): T => { +const safeClone = (value: T): T => { if (value === null || value === undefined) return value; if (typeof value === 'function') return value; if (typeof value !== 'object') return value; + if (value instanceof Date) return new Date(value.getTime()) as T; + if (value instanceof RegExp) return new RegExp(value.source, value.flags) as T; + if (value instanceof Map) return new Map(Array.from(value.entries()).map(([mapKey, mapValue]) => [safeClone(mapKey), safeClone(mapValue)])) as T; + if (value instanceof Set) return new Set(Array.from(value).map(safeClone)) as T; try { - return JSON.parse(JSON.stringify(value)) as T; + const serialized = JSON.stringify(value, (_key, innerValue) => { + if (typeof innerValue === 'function') return '[Function]'; + if (innerValue instanceof Error) return { __error: true, message: innerValue.message, name: innerValue.name }; + if (typeof innerValue === 'symbol') return `[Symbol: ${innerValue.toString()}]`; + if (typeof innerValue === 'bigint') return `[BigInt: ${innerValue.toString()}]`; + return innerValue; + }); + return JSON.parse(serialized) as T; } catch { return value; } }; -const extractHookStates = (fiber: Fiber): HookState[] => { - const hookStates: HookState[] = []; +const identifyHookType = ( + hookState: MemoizedState, + hookIndex: number, + prevHookState?: MemoizedState | null, +): HookType => { + if (!hookState) return 'Unknown'; + + const memoizedState = hookState.memoizedState; + const queue = hookState.queue; + + if (queue !== null && queue !== undefined && typeof queue === 'object') { + if ('dispatch' in queue && typeof (queue as { dispatch?: unknown }).dispatch === 'function') { + if ('lastRenderedReducer' in queue) { + const reducer = (queue as { lastRenderedReducer?: unknown }).lastRenderedReducer; + if (typeof reducer === 'function' && reducer.name === 'basicStateReducer') { + return 'State'; + } + return 'Reducer'; + } + return 'State'; + } + } + + if (memoizedState !== null && typeof memoizedState === 'object') { + if ('current' in memoizedState && Object.keys(memoizedState).length === 1) { + return 'Ref'; + } + + if ('tag' in memoizedState && 'destroy' in memoizedState && 'deps' in memoizedState) { + const tag = memoizedState.tag as number; + if ((tag & 0b0100) !== 0) return 'LayoutEffect'; + if ((tag & 0b1000) !== 0) return 'InsertionEffect'; + return 'Effect'; + } + + if (Array.isArray(memoizedState) && memoizedState.length === 2) { + const [first, second] = memoizedState; + if (Array.isArray(second) || second === null) { + if (typeof first === 'function') return 'Callback'; + return 'Memo'; + } + } + } + + if ('baseState' in hookState && 'baseQueue' in hookState) { + return 'State'; + } + + return 'Unknown'; +}; + +const extractHooks = (fiber: Fiber): HookInfo[] => { + const hooks: HookInfo[] = []; + + if (!isCompositeFiber(fiber)) return hooks; + if (fiber.tag === ClassComponentTag) return hooks; + + let hookState: MemoizedState | null = fiber.memoizedState; + let prevHookState: MemoizedState | null = fiber.alternate?.memoizedState ?? null; let hookIndex = 0; - traverseState(fiber, (nextState) => { - if (nextState && 'memoizedState' in nextState) { - const stateValue = nextState.memoizedState; - if ( - nextState.queue !== undefined && - nextState.queue !== null && - typeof nextState.queue === 'object' && - 'dispatch' in nextState.queue - ) { - hookStates.push({ - hookIndex, - value: cloneValue(stateValue), - }); + while (hookState) { + const hookType = identifyHookType(hookState, hookIndex, prevHookState); + const isEditable = hookType === 'State' || hookType === 'Reducer'; + + let value: unknown = hookState.memoizedState; + + if (hookType === 'Ref' && value && typeof value === 'object' && 'current' in value) { + value = (value as { current: unknown }).current; + } + + if (hookType === 'Memo' || hookType === 'Callback') { + if (Array.isArray(value) && value.length === 2) { + value = value[0]; } } + + hooks.push({ + hookIndex, + hookType, + value: isEditable ? safeClone(value) : value, + isEditable, + }); + + hookState = hookState.next ?? null; + prevHookState = prevHookState?.next ?? null; hookIndex++; - }); + } + + return hooks; +}; - return hookStates; +const getComponentType = (fiber: Fiber): FiberSnapshot['componentType'] => { + switch (fiber.tag) { + case FunctionComponentTag: + return 'function'; + case ClassComponentTag: + return 'class'; + case ForwardRefTag: + return 'forwardRef'; + case MemoComponentTag: + case SimpleMemoComponentTag: + return 'memo'; + default: + return 'unknown'; + } +}; + +const extractClassState = (fiber: Fiber): unknown | null => { + if (fiber.tag !== ClassComponentTag) return null; + if (!fiber.stateNode) return null; + + const instance = fiber.stateNode as { state?: unknown }; + if (instance.state) { + return safeClone(instance.state); + } + + return null; }; const createFiberSnapshot = (fiber: Fiber): FiberSnapshot => { + const latestFiber = getLatestFiber(fiber); + return { - fiberId: getFiberId(fiber), - displayName: getDisplayName(fiber.type), - props: cloneValue(fiber.memoizedProps), - hookStates: extractHookStates(fiber), + fiberId: getFiberId(latestFiber), + displayName: getDisplayName(latestFiber.type), + componentType: getComponentType(latestFiber), + props: safeClone(latestFiber.memoizedProps ?? {}), + hooks: extractHooks(latestFiber), + classState: extractClassState(latestFiber), timestamp: Date.now(), }; }; @@ -93,17 +241,23 @@ export class TimeTravel { private maxHistoryLength: number; private onSnapshot?: (snapshot: CommitSnapshot) => void; private onRestore?: (snapshot: CommitSnapshot) => void; - private trackComponents?: string[] | ((displayName: string | null) => boolean); - private fiberMap = new WeakMap(); - private fiberIdToFiberMap = new Map(); + private onBeforeRestore?: (snapshot: CommitSnapshot) => boolean | void; + private trackComponents?: string[] | ((displayName: string | null, fiber: Fiber) => boolean); + private fiberIdToFiberRef = new Map>(); private isRestoring = false; private fiberRoots = new Set(); + private captureExternalState?: () => ExternalStateEntry[]; + private restoreExternalState?: (entries: ExternalStateEntry[]) => void; + private externalStateHistory = new Map(); constructor(options: TimeTravelOptions = {}) { this.maxHistoryLength = options.maxHistoryLength ?? 100; this.onSnapshot = options.onSnapshot; this.onRestore = options.onRestore; + this.onBeforeRestore = options.onBeforeRestore; this.trackComponents = options.trackComponents; + this.captureExternalState = options.captureExternalState; + this.restoreExternalState = options.restoreExternalState; const instrumentOptions = { onCommitFiberRoot: (_rendererID: number, root: FiberRoot) => { @@ -134,7 +288,30 @@ export class TimeTravel { return displayName !== null && this.trackComponents.includes(displayName); } - return this.trackComponents(displayName); + return this.trackComponents(displayName, fiber); + } + + private updateFiberRef(fiberId: number, fiber: Fiber): void { + const existingRef = this.fiberIdToFiberRef.get(fiberId); + if (!existingRef || !existingRef.deref()) { + this.fiberIdToFiberRef.set(fiberId, new WeakRef(fiber)); + } else { + const existingFiber = existingRef.deref(); + if (existingFiber !== fiber && existingFiber !== fiber.alternate) { + this.fiberIdToFiberRef.set(fiberId, new WeakRef(fiber)); + } + } + } + + private getFiberByIdFromRoots(fiberId: number): Fiber | null { + const weakRef = this.fiberIdToFiberRef.get(fiberId); + if (weakRef) { + const fiber = weakRef.deref(); + if (fiber) { + return getLatestFiber(fiber); + } + } + return null; } private captureSnapshot(root: FiberRoot): void { @@ -142,26 +319,51 @@ export class TimeTravel { commitId: this.commitCounter++, timestamp: Date.now(), fibers: new Map(), + fibersByName: new Map(), }; traverseRenderedFibers(root, (fiber) => { if (this.shouldTrackFiber(fiber)) { const fiberSnapshot = createFiberSnapshot(fiber); snapshot.fibers.set(fiberSnapshot.fiberId, fiberSnapshot); - this.fiberIdToFiberMap.set(fiberSnapshot.fiberId, fiber); + + this.updateFiberRef(fiberSnapshot.fiberId, fiber); + + if (fiberSnapshot.displayName) { + const existing = snapshot.fibersByName.get(fiberSnapshot.displayName) ?? []; + existing.push(fiberSnapshot); + snapshot.fibersByName.set(fiberSnapshot.displayName, existing); + } } }); if (snapshot.fibers.size > 0) { if (this.currentIndex < this.history.length - 1) { this.history = this.history.slice(0, this.currentIndex + 1); + const commitIdsToRemove: number[] = []; + for (let historyIndex = this.currentIndex + 1; historyIndex < this.history.length; historyIndex++) { + commitIdsToRemove.push(this.history[historyIndex].commitId); + } + commitIdsToRemove.forEach((commitId) => this.externalStateHistory.delete(commitId)); + } + + if (this.captureExternalState) { + try { + const externalState = this.captureExternalState(); + this.externalStateHistory.set(snapshot.commitId, safeClone(externalState)); + } catch { + // External state capture failed, continue without it + } } this.history.push(snapshot); this.currentIndex = this.history.length - 1; if (this.history.length > this.maxHistoryLength) { - this.history.shift(); + const removedSnapshot = this.history.shift(); + if (removedSnapshot) { + this.externalStateHistory.delete(removedSnapshot.commitId); + } this.currentIndex--; } @@ -207,6 +409,12 @@ export class TimeTravel { if (index < 0 || index >= this.history.length) return null; const snapshot = this.history[index]; + + if (this.onBeforeRestore) { + const shouldProceed = this.onBeforeRestore(snapshot); + if (shouldProceed === false) return null; + } + this.restoreSnapshot(snapshot); this.currentIndex = index; @@ -225,22 +433,70 @@ export class TimeTravel { this.isRestoring = true; try { - for (const [fiberId, fiberSnapshot] of snapshot.fibers) { - const fiber = this.fiberIdToFiberMap.get(fiberId); - if (!fiber) continue; + const restorationErrors: Array<{ fiberId: number; error: Error }> = []; - for (const hookState of fiberSnapshot.hookStates) { - const restoredValue = cloneValue(hookState.value); - overrideHookState(fiber, hookState.hookIndex, restoredValue as Record); + for (const [fiberId, fiberSnapshot] of snapshot.fibers) { + const fiber = this.getFiberByIdFromRoots(fiberId); + if (!fiber) { + continue; } - const currentProps = fiber.memoizedProps ?? {}; - const snapshotProps = fiberSnapshot.props ?? {}; + try { + if (fiberSnapshot.componentType === 'class' && fiberSnapshot.classState !== null) { + const instance = fiber.stateNode as { state?: unknown; setState?: (state: unknown) => void }; + if (instance && typeof instance.setState === 'function') { + instance.setState(safeClone(fiberSnapshot.classState)); + } + } + + for (const hook of fiberSnapshot.hooks) { + if (!hook.isEditable) continue; - for (const propName of Object.keys(snapshotProps)) { - if (propName === 'children') continue; - if (currentProps[propName] !== snapshotProps[propName]) { - overrideProps(fiber, { [propName]: cloneValue(snapshotProps[propName]) }); + const latestFiber = getLatestFiber(fiber); + const restoredValue = safeClone(hook.value); + + try { + overrideHookState(latestFiber, hook.hookIndex, restoredValue as Record); + } catch (hookError) { + restorationErrors.push({ + fiberId, + error: hookError instanceof Error ? hookError : new Error(String(hookError)), + }); + } + } + + const currentProps = fiber.memoizedProps ?? {}; + const snapshotProps = fiberSnapshot.props ?? {}; + + for (const propName of Object.keys(snapshotProps)) { + if (propName === 'children') continue; + if (propName === 'key') continue; + if (propName === 'ref') continue; + if (typeof snapshotProps[propName] === 'function') continue; + + if (JSON.stringify(currentProps[propName]) !== JSON.stringify(snapshotProps[propName])) { + try { + overrideProps(fiber, { [propName]: safeClone(snapshotProps[propName]) }); + } catch { + // Props override can fail for various reasons, continue + } + } + } + } catch (fiberError) { + restorationErrors.push({ + fiberId, + error: fiberError instanceof Error ? fiberError : new Error(String(fiberError)), + }); + } + } + + if (this.restoreExternalState) { + const externalState = this.externalStateHistory.get(snapshot.commitId); + if (externalState) { + try { + this.restoreExternalState(safeClone(externalState)); + } catch { + // External state restore failed, continue } } } @@ -251,6 +507,16 @@ export class TimeTravel { } } + getEditableStateCount(fiberId: number): number { + const snapshot = this.getCurrentSnapshot(); + if (!snapshot) return 0; + + const fiberSnapshot = snapshot.fibers.get(fiberId); + if (!fiberSnapshot) return 0; + + return fiberSnapshot.hooks.filter((hook) => hook.isEditable).length; + } + getFiberSnapshotHistory(fiberId: number): FiberSnapshot[] { const snapshots: FiberSnapshot[] = []; for (const commit of this.history) { @@ -265,10 +531,9 @@ export class TimeTravel { getComponentHistory(displayName: string): FiberSnapshot[] { const snapshots: FiberSnapshot[] = []; for (const commit of this.history) { - for (const fiberSnapshot of commit.fibers.values()) { - if (fiberSnapshot.displayName === displayName) { - snapshots.push(fiberSnapshot); - } + const fiberSnapshots = commit.fibersByName.get(displayName); + if (fiberSnapshots) { + snapshots.push(...fiberSnapshots); } } return snapshots; @@ -278,26 +543,28 @@ export class TimeTravel { this.history = []; this.currentIndex = -1; this.commitCounter = 0; - this.fiberIdToFiberMap.clear(); + this.fiberIdToFiberRef.clear(); + this.externalStateHistory.clear(); } getStateTimeline( fiberId: number, hookIndex: number, - ): Array<{ commitId: number; timestamp: number; value: unknown }> { - const timeline: Array<{ commitId: number; timestamp: number; value: unknown }> = []; + ): Array<{ commitId: number; timestamp: number; value: unknown; hookType: HookType }> { + const timeline: Array<{ commitId: number; timestamp: number; value: unknown; hookType: HookType }> = []; for (const commit of this.history) { const fiberSnapshot = commit.fibers.get(fiberId); if (fiberSnapshot) { - const hookState = fiberSnapshot.hookStates.find( - (hookStateItem) => hookStateItem.hookIndex === hookIndex, + const hookInfo = fiberSnapshot.hooks.find( + (hook) => hook.hookIndex === hookIndex, ); - if (hookState) { + if (hookInfo) { timeline.push({ commitId: commit.commitId, timestamp: commit.timestamp, - value: hookState.value, + value: hookInfo.value, + hookType: hookInfo.hookType, }); } } @@ -329,11 +596,14 @@ export class TimeTravel { exportHistory(): string { return JSON.stringify( { + version: 1, history: this.history.map((commit) => ({ ...commit, fibers: Array.from(commit.fibers.entries()), + fibersByName: Array.from(commit.fibersByName.entries()), })), currentIndex: this.currentIndex, + externalState: Array.from(this.externalStateHistory.entries()), }, null, 2, @@ -342,19 +612,27 @@ export class TimeTravel { importHistory(jsonString: string): void { const data = JSON.parse(jsonString) as { + version?: number; history: Array<{ commitId: number; timestamp: number; fibers: Array<[number, FiberSnapshot]>; + fibersByName: Array<[string, FiberSnapshot[]]>; }>; currentIndex: number; + externalState?: Array<[number, ExternalStateEntry[]]>; }; this.history = data.history.map((commit) => ({ ...commit, fibers: new Map(commit.fibers), + fibersByName: new Map(commit.fibersByName), })); this.currentIndex = data.currentIndex; + + if (data.externalState) { + this.externalStateHistory = new Map(data.externalState); + } } diff( @@ -366,7 +644,8 @@ export class TimeTravel { fiberId: number; displayName: string | null; propChanges: Array<{ prop: string; from: unknown; to: unknown }>; - stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }>; + stateChanges: Array<{ hookIndex: number; hookType: HookType; from: unknown; to: unknown }>; + classStateChange: { from: unknown; to: unknown } | null; } > { const fromSnapshot = this.history[fromIndex]; @@ -382,7 +661,8 @@ export class TimeTravel { fiberId: number; displayName: string | null; propChanges: Array<{ prop: string; from: unknown; to: unknown }>; - stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }>; + stateChanges: Array<{ hookIndex: number; hookType: HookType; from: unknown; to: unknown }>; + classStateChange: { from: unknown; to: unknown } | null; } >(); @@ -398,7 +678,8 @@ export class TimeTravel { if (!fromFiber || !toFiber) continue; const propChanges: Array<{ prop: string; from: unknown; to: unknown }> = []; - const stateChanges: Array<{ hookIndex: number; from: unknown; to: unknown }> = []; + const stateChanges: Array<{ hookIndex: number; hookType: HookType; from: unknown; to: unknown }> = []; + let classStateChange: { from: unknown; to: unknown } | null = null; const allProps = new Set([ ...Object.keys(fromFiber.props ?? {}), @@ -406,6 +687,7 @@ export class TimeTravel { ]); for (const prop of allProps) { + if (prop === 'children') continue; const fromValue = fromFiber.props?.[prop]; const toValue = toFiber.props?.[prop]; if (JSON.stringify(fromValue) !== JSON.stringify(toValue)) { @@ -413,33 +695,70 @@ export class TimeTravel { } } - for (const toState of toFiber.hookStates) { - const fromState = fromFiber.hookStates.find( - (hookStateItem) => hookStateItem.hookIndex === toState.hookIndex, + for (const toHook of toFiber.hooks) { + if (!toHook.isEditable) continue; + + const fromHook = fromFiber.hooks.find( + (hook) => hook.hookIndex === toHook.hookIndex, ); - const fromValue = fromState?.value; - const toValue = toState.value; + const fromValue = fromHook?.value; + const toValue = toHook.value; if (JSON.stringify(fromValue) !== JSON.stringify(toValue)) { - stateChanges.push({ hookIndex: toState.hookIndex, from: fromValue, to: toValue }); + stateChanges.push({ + hookIndex: toHook.hookIndex, + hookType: toHook.hookType, + from: fromValue, + to: toValue, + }); + } + } + + if (fromFiber.classState !== null || toFiber.classState !== null) { + if (JSON.stringify(fromFiber.classState) !== JSON.stringify(toFiber.classState)) { + classStateChange = { from: fromFiber.classState, to: toFiber.classState }; } } - if (propChanges.length > 0 || stateChanges.length > 0) { + if (propChanges.length > 0 || stateChanges.length > 0 || classStateChange !== null) { changes.set(fiberId, { fiberId, displayName: toFiber.displayName, propChanges, stateChanges, + classStateChange, }); } } return changes; } + + getTrackedFiberIds(): number[] { + const snapshot = this.getCurrentSnapshot(); + if (!snapshot) return []; + return Array.from(snapshot.fibers.keys()); + } + + getTrackedComponentNames(): string[] { + const snapshot = this.getCurrentSnapshot(); + if (!snapshot) return []; + return Array.from(snapshot.fibersByName.keys()); + } + + isRestoreInProgress(): boolean { + return this.isRestoring; + } } export const createTimeTravel = (options?: TimeTravelOptions): TimeTravel => { return new TimeTravel(options); }; -export type { CommitSnapshot, FiberSnapshot, HookState, TimeTravelOptions }; +export type { + CommitSnapshot, + ExternalStateEntry, + FiberSnapshot, + HookInfo, + HookType, + TimeTravelOptions, +};