fix: issues resolved with final example

Author: vip-git

.gitignore

@@ -4,3 +4,4 @@ index.d.ts
 coverage/
 todo
 build/
+index.min.js

.npmignore

@@ -4,4 +4,7 @@ public/
 example/
 config/
 scripts/
-build/
+build/
+index.js
+index.ts
+index.d.ts

config/paths.js

@@ -56,7 +56,7 @@ module.exports = {
 	appSrc: resolveApp('example'),
 	appTsConfig: resolveApp('tsconfig.json'),
 	appJsConfig: resolveApp('jsconfig.json'),
-	pluginJs: resolveApp('index'),
+	pluginJs: resolveApp('index.min'),
 	yarnLockFile: resolveApp('yarn.lock'),
 	testsSetup: resolveModule(resolveApp, 'src/setupTests'),
 	proxySetup: resolveApp('src/setupProxy.js'),

example/App.test.tsx

@@ -4,11 +4,27 @@ import TodoList from './components/TodoList';
 import { TodosContextProvider } from './contexts/TodosContext';
 
 const App = () => {
+   const mainStyle: React.CSSProperties = {
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'column',
+		alignSelf: 'center',
+		height: '100vh',
+	};
+
+   const imgStyle: React.CSSProperties = {
+	   maxHeight: 200,
+   };
+	
   return (
-			<TodosContextProvider>
+		<TodosContextProvider>
+			<div id={'main'} style={mainStyle}>
+				<img src={require('./logo.svg')} alt={'react-logo'} style={imgStyle} />
 				<TodoForm />
 				<TodoList />
-			</TodosContextProvider>
+			</div>
+		</TodosContextProvider>
 	);
 };
 

example/App.tsx

@@ -5,6 +5,12 @@ function TodoForm() {
   const [value, setValue] = useState('');
   const dispatch = useTodosDispatch();
 
+  const formStyles: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '50%'
+  };
+
   const onSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     dispatch({
@@ -15,15 +21,28 @@ function TodoForm() {
   };
 
   return (
-    <form onSubmit={onSubmit}>
-      <input
-        value={value}
-        placeholder="What are you planning to do?"
-        onChange={e => setValue(e.target.value)}
-      />
-      <button>Create</button>
-    </form>
-  );
+		<form onSubmit={onSubmit} style={formStyles}>
+			<input
+				value={value}
+				placeholder='What are you planning to do?'
+				onChange={(e) => setValue(e.target.value)}
+				style={{
+					padding: 10,
+          borderRadius: 5,
+          flexBasis: '35%'
+				}}
+			/>
+			<button
+				style={{
+					padding: 10,
+					marginLeft: 10,
+					borderRadius: 5,
+				}}
+			>
+				Create
+			</button>
+		</form>
+	);
 }
 
 export default TodoForm;

example/components/TodoForm.tsx

@@ -6,7 +6,7 @@ function TodoList() {
   const todos = useTodosState();
   return (
     <ul>
-      {todos.map(todo => (
+      {todos?.root?.map(todo => (
         <TodoItem todo={todo} key={todo.id} />
       ))}
     </ul>

example/components/TodoList.tsx

@@ -6,75 +6,87 @@ import React, {
 	useEffect,
 } from 'react';
 
-import useContextDevTools from '../../index';
+import useContextDevTools from '../../index.min';
 
 export type Todo = {
   id: number;
   text: string;
   done: boolean;
 };
 
-export type TodosState = Todo[];
+export type TodosState = { root: Todo[] };
 
 const TodosStateContext = createContext<TodosState | undefined>(undefined);
 
 type Action =
   | { type: 'CREATE'; text: string }
   | { type: 'TOGGLE'; id: number }
-  | { type: 'REMOVE'; id: number };
+  | { type: 'REMOVE'; id: number }
+  | { type: 'IMPORT_STATE'; state: any };
 
 type TodosDispatch = Dispatch<Action>;
 const TodosDispatchContext = createContext<TodosDispatch | undefined>(
   undefined
 );
 
-function todosReducer(state: TodosState, action: Action): TodosState {
+function todosReducer(givenState: TodosState, action: Action): TodosState {
+  const state = givenState.root;
   switch (action.type) {
-    case 'CREATE':
-      const nextId = Math.max(...state.map(todo => todo.id)) + 1;
-      return state.concat({
-        id: nextId,
-        text: action.text,
-        done: false
-      });
-    case 'TOGGLE':
-      return state.map(todo =>
-        todo.id === action.id ? { ...todo, done: !todo.done } : todo
-      );
-    case 'REMOVE':
-      return state.filter(todo => todo.id !== action.id);
-    default:
-      throw new Error('Unhandled action');
-  }
+		case 'CREATE':
+      const nextId = Math.max(...state.map((todo) => todo.id)) + 1;
+			return {
+				root: state.concat({
+					id: (Number.isFinite(nextId) && nextId) || 1,
+					text: action.text,
+					done: false,
+				}),
+			};
+		case 'TOGGLE':
+			return {
+        root: state.map((todo) =>
+          todo.id === action.id ? { ...todo, done: !todo.done } : todo
+        )
+      }
+		case 'REMOVE':
+			return {
+				root: state.filter((todo) => todo.id !== action.id),
+			};
+		case 'IMPORT_STATE':
+			return action.state;
+		default:
+			throw new Error('Unhandled action');
+	}
 }
 
 export function TodosContextProvider({
   children
 }: {
   children: React.ReactNode;
 }) {
-	const [todos, dispatch] = useReducer(todosReducer, [
-		{
-			id: 1,
-			text: 'Learn Context API',
-			done: true,
-		},
-		{
-			id: 2,
-			text: 'Learn TypeScript',
-			done: true,
-		},
-		{
-			id: 3,
-			text: 'Use Context API with TypeScript',
-			done: false,
-		},
-  ]);
+	const [todos, dispatch] = useReducer(todosReducer, {
+		root: [
+			{
+				id: 1,
+				text: 'My first todo using context API',
+				done: true,
+			},
+			{
+				id: 2,
+				text: 'Second one to try time travel debugging',
+				done: true,
+			},
+			{
+				id: 3,
+				text: '3rd one to import new todos',
+				done: false,
+			},
+		],
+	});
 
   const devTools = useContextDevTools(dispatch);
 
   useEffect(() => {
-		devTools.sendUpdatedState(todos);
+    devTools.sendUpdatedState(todos);
 	}, [todos, devTools]);
 
 

example/contexts/TodosContext.tsx

@@ -2,12 +2,46 @@
 const devTools: any = { send: () => {} };
 let isInitialized = false;
 let firstRender = false;
-let oldArgs = {};
+let oldArgs: any = {};
 
 const useContextDevTools = (dispatch: Function) => {
 	if (!isInitialized) {
-		devTools.current = (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect();
+		devTools.current = (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect({
+			features: {
+				pause: true, // start/pause recording of dispatched actions
+				lock: true, // lock/unlock dispatching actions and side effects    
+				persist: true, // persist states on page reloading
+				export: true, // export history of actions in a file
+				import: 'custom', // import history of actions from a file
+				jump: true, // jump back and forth (time travelling)
+				skip: true, // skip (cancel) actions
+				reorder: true, // drag and drop actions in the history list 
+				dispatch: true, // dispatch custom actions or action creators
+				test: true // generate tests for the selected actions
+			},
+			// other options like actionSanitizer, stateSanitizer
+		});
 		isInitialized = true;
+		devTools.current.subscribe((message: any) => {
+			if (message.payload && (message.payload.type === 'JUMP_TO_STATE' || message.payload.type === 'JUMP_TO_ACTION') && message.state) {
+				const parsedState = JSON.parse(message.state);
+				sendDispatch({
+					type: 'IMPORT_STATE',
+					state: parsedState,
+				});
+			} else if (message.type === 'DISPATCH' && message.payload && message.payload.nextLiftedState) {
+				message.payload.nextLiftedState.computedStates.forEach((cs: { state: any}, csi: number) => {
+					const actionToSend = message.payload.nextLiftedState.actionsById[csi];
+					if (actionToSend.action.type !== '@@INIT') {
+						sendDispatch(actionToSend.action);
+					}
+				});
+			}
+		});
+		window.addEventListener('beforeunload', function (e) {
+			e.preventDefault();
+			disconnectDevTools();
+		});
 	}
 
 	const sendDispatch = (args: any) => {
@@ -22,12 +56,14 @@ const useContextDevTools = (dispatch: Function) => {
 			devTools.current.init(updatedState);
 			firstRender = true;
 		} else {
-			devTools.current.send(oldArgs, { root: updatedState });
+			if (oldArgs.type !== 'IMPORT_STATE') {
+				devTools.current.send(oldArgs, updatedState);
+			}
 		}
 	};
 
 	const disconnectDevTools = () => {
-		return devTools.current.disconnect();
+		return typeof devTools?.current?.disconnect === 'function' && devTools?.current?.disconnect();
 	}
 
 	return {