Count: {state.count}
-
-
+
+
);
@@ -43,7 +59,12 @@ const TextBox = () => {
numRendered: {++numRendered}
Text: {state.text}
- dispatch({ type: 'setText', text: event.target.value })} />
+
+ dispatch({ type: 'setText', text: event.target.value })
+ }
+ />
);
@@ -51,7 +72,7 @@ const TextBox = () => {
const App = () => (
Counter
Count: {state.count}
-
-
+
+
);
diff --git a/examples/02_person/src/index.tsx b/examples/02_person/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/02_person/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
Count: {state.count}
-
-
+
+
);
diff --git a/examples/02_person/src/state.ts b/examples/02_person/src/state.ts
new file mode 100644
index 00000000..216f99c3
--- /dev/null
+++ b/examples/02_person/src/state.ts
@@ -0,0 +1,69 @@
+import { useReducer } from 'react';
+import type { Reducer } from 'react';
+
+import { createContainer } from 'react-tracked';
+
+const initialState = {
+ count: 0,
+ person: {
+ age: 0,
+ firstName: '',
+ lastName: '',
+ },
+};
+
+type State = typeof initialState;
+
+type Action =
+ | { type: 'increment' }
+ | { type: 'decrement' }
+ | { type: 'setFirstName'; firstName: string }
+ | { type: 'setLastName'; lastName: string }
+ | { type: 'setAge'; age: number };
+
+const reducer: Reducer
Count: {state.count}
-
+
);
diff --git a/examples/03_usestate/src/index.ts b/examples/03_usestate/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/03_usestate/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/03_usestate/src/index.tsx b/examples/03_usestate/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/03_usestate/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
Count: {count}
-
-
+
+
);
diff --git a/examples/04_selector/src/index.ts b/examples/04_selector/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/04_selector/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/04_selector/src/index.tsx b/examples/04_selector/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/04_selector/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
Count: {state.count}
-
-
+
+
);
diff --git a/examples/05_container/src/index.ts b/examples/05_container/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/05_container/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/05_container/src/index.tsx b/examples/05_container/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/05_container/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
+ Count: {count}
+
+
+
+ );
+};
+
+const App = () => (
+
- Count: {count}
-
-
-
- );
-};
-
-const App = () => (
-
- First Name:
- {
- dispatch({ type: 'setFirstName', firstName: event.target.value });
- }}
- />
- (renders:{renders.current})
-
- );
-});
+// eslint-disable-next-line react/display-name
+const InnerPersonFirstName = memo(
+ ({ firstName, dispatch }: { firstName: string; dispatch: Dispatch }) => {
+ const renders = useRef(1);
+ useEffect(() => {
+ renders.current += 1;
+ });
+ return (
+
+ First Name:
+ {
+ dispatch({ type: 'setFirstName', firstName: event.target.value });
+ }}
+ />
+ (renders:{renders.current})
+
+ );
+ },
+);
const PersonFirstName = () => {
const [state, dispatch] = useContext(PersonContext);
- return
- Family Name:
- {
- dispatch({ type: 'setFamilyName', familyName: event.target.value });
- }}
- />
- (renders:{renders.current})
-
+
+ Family Name:
+ {
+ dispatch({ type: 'setFamilyName', familyName: event.target.value });
+ }}
+ />
+ (renders:{renders.current})
+
+ );
+ },
+);
const PersonFamilyName = () => {
const [state, dispatch] = useContext(PersonContext);
- return
numRendered: {++numRendered}
);
diff --git a/examples/13_saga/src/Person.tsx b/examples/13_saga/src/person.tsx
similarity index 96%
rename from examples/13_saga/src/Person.tsx
rename to examples/13_saga/src/person.tsx
index 107f8e21..8191aec8 100644
--- a/examples/13_saga/src/Person.tsx
+++ b/examples/13_saga/src/person.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { useTrackedState, useDispatch } from './store';
type Props = {
diff --git a/examples/13_saga/src/store.ts b/examples/13_saga/src/store.ts
index 31f91a36..96cbb187 100644
--- a/examples/13_saga/src/store.ts
+++ b/examples/13_saga/src/store.ts
@@ -1,4 +1,4 @@
-import { Reducer } from 'react';
+import type { Reducer } from 'react';
import {
call,
put,
@@ -7,6 +7,7 @@ import {
takeEvery,
all,
} from 'redux-saga/effects';
+// eslint-disable-next-line import/no-named-as-default
import useSagaReducer from 'use-saga-reducer';
import { createContainer } from 'react-tracked';
@@ -29,9 +30,7 @@ type InnerAction =
| { type: 'ERROR_FETCH_USER' }
| { type: 'DECREMENT' };
-type OuterAction =
- | { type: 'CLEAR_USER_NAME' }
- | { type: 'INCREMENT' };
+type OuterAction = { type: 'CLEAR_USER_NAME' } | { type: 'INCREMENT' };
const reducer: Reducer
@@ -28,7 +28,8 @@ const FirstName = React.memo(() => (
));
-const FamilyName = React.memo(() => (
+// eslint-disable-next-line react/display-name
+const FamilyName = memo(() => (
numRendered: {++numRendered}
= (state, action) => {
}
};
-type AsyncActionFetch = { type: 'FETCH_USER'; id: number }
+type AsyncActionFetch = { type: 'FETCH_USER'; id: number };
type AsyncActionClear = { type: 'DELAYED_DECREMENT' };
type AsyncAction = AsyncActionFetch | AsyncActionClear;
-const sleep = (ms: number) => new Promise((resolve) => {
- setTimeout(resolve, ms);
-});
+const sleep = (ms: number) =>
+ new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
-const asyncActionHandlers: AsyncActionHandlers, AsyncAction> = {
- FETCH_USER: ({ dispatch }) => async (action) => {
- try {
- dispatch({ type: 'START_FETCH_USER' });
- const response = await fetch(`https://reqres.in/api/users/${action.id}?delay=1`);
- dispatch({ type: 'CONTINUE_FETCH_USER' });
- const data = await response.json();
+const asyncActionHandlers: AsyncActionHandlers<
+ Reducer,
+ AsyncAction
+> = {
+ FETCH_USER:
+ ({ dispatch }) =>
+ async (action) => {
+ try {
+ dispatch({ type: 'START_FETCH_USER' });
+ const response = await fetch(
+ `https://reqres.in/api/users/${action.id}?delay=1`,
+ );
+ dispatch({ type: 'CONTINUE_FETCH_USER' });
+ const data = await response.json();
+ await sleep(500);
+ const firstName = data.data.first_name;
+ if (typeof firstName !== 'string') throw new Error();
+ dispatch({ type: 'FINISH_FETCH_USER', firstName });
+ } catch (_e) {
+ dispatch({ type: 'ERROR_FETCH_USER' });
+ }
+ },
+ DELAYED_DECREMENT:
+ ({ dispatch }) =>
+ async () => {
await sleep(500);
- const firstName = data.data.first_name;
- if (typeof firstName !== 'string') throw new Error();
- dispatch({ type: 'FINISH_FETCH_USER', firstName });
- } catch (e) {
- dispatch({ type: 'ERROR_FETCH_USER' });
- }
- },
- DELAYED_DECREMENT: ({ dispatch }) => async () => {
- await sleep(500);
- dispatch({ type: 'DECREMENT' });
- },
+ dispatch({ type: 'DECREMENT' });
+ },
};
-const useValue = () => useReducerAsync<
- Reducer,
- AsyncAction,
- AsyncAction | OuterAction
->(reducer, initialState, asyncActionHandlers);
+const useValue = () =>
+ useReducerAsync<
+ Reducer,
+ AsyncAction,
+ AsyncAction | OuterAction
+ >(reducer, initialState, asyncActionHandlers);
export const {
Provider,
diff --git a/examples/13_saga/package.json b/examples/13_saga/package.json
index cd9f1ff9..05e52f39 100644
--- a/examples/13_saga/package.json
+++ b/examples/13_saga/package.json
@@ -1,28 +1,23 @@
{
- "name": "react-tracked-example",
- "version": "0.1.0",
+ "name": "example",
+ "version": "0.0.0",
"private": true,
+ "type": "commonjs",
"dependencies": {
"@types/react": "latest",
"@types/react-dom": "latest",
- "react": "18.0.0-rc.2",
- "react-dom": "18.0.0-rc.2",
- "react-tracked": "latest",
+ "react": "latest",
+ "react-dom": "latest",
"react-scripts": "latest",
+ "react-tracked": "latest",
"redux-saga": "latest",
"typescript": "latest",
- "use-saga-reducer": ">=2.0.0"
+ "use-saga-reducer": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
- },
- "browserslist": [
- ">0.2%",
- "not dead",
- "not ie <= 11",
- "not op_mini all"
- ]
+ }
}
diff --git a/examples/13_saga/public/index.html b/examples/13_saga/public/index.html
index 71fee982..ad4c7826 100644
--- a/examples/13_saga/public/index.html
+++ b/examples/13_saga/public/index.html
@@ -1,6 +1,6 @@
- react-tracked example
+ example
diff --git a/examples/12_async/src/App.tsx b/examples/13_saga/src/app.tsx
similarity index 68%
rename from examples/12_async/src/App.tsx
rename to examples/13_saga/src/app.tsx
index 33e61fba..305afd67 100644
--- a/examples/12_async/src/App.tsx
+++ b/examples/13_saga/src/app.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
import { Provider } from './store';
-import Main from './Main';
+import Main from './main';
const App = () => (
diff --git a/examples/12_async/src/Counter.tsx b/examples/13_saga/src/counter.tsx
similarity index 55%
rename from examples/12_async/src/Counter.tsx
rename to examples/13_saga/src/counter.tsx
index 1fc97194..63430817 100644
--- a/examples/12_async/src/Counter.tsx
+++ b/examples/13_saga/src/counter.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
import { useTrackedState, useDispatch } from './store';
@@ -9,10 +9,17 @@ const Counter = () => {
);
};
-export default React.memo(Counter);
+export default memo(Counter);
diff --git a/examples/13_saga/src/index.ts b/examples/13_saga/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/13_saga/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/13_saga/src/index.tsx b/examples/13_saga/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/13_saga/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
+ ,
+ );
+}
diff --git a/examples/13_saga/src/Main.tsx b/examples/13_saga/src/main.tsx
similarity index 60%
rename from examples/13_saga/src/Main.tsx
rename to examples/13_saga/src/main.tsx
index fd6d10f1..7f5eb621 100644
--- a/examples/13_saga/src/Main.tsx
+++ b/examples/13_saga/src/main.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
import { useTrackedState } from './store';
-import Person from './Person';
-import Counter from './Counter';
+import Person from './person';
+import Counter from './counter';
const Main = () => {
const state = useTrackedState();
@@ -14,7 +14,11 @@ const Main = () => {
User ID:
setId(e.target.value)} />
- {state.loadingState !== 'idle' ? {state.loadingState}... :
@@ -39,7 +40,8 @@ const FamilyName = React.memo(() => (
));
-const Gender = React.memo(() => (
+// eslint-disable-next-line react/display-name
+const Gender = memo(() => (
numRendered: {++numRendered}
);
diff --git a/examples/12_async/src/Person.tsx b/examples/12_async/src/person.tsx
similarity index 96%
rename from examples/12_async/src/Person.tsx
rename to examples/12_async/src/person.tsx
index 107f8e21..8191aec8 100644
--- a/examples/12_async/src/Person.tsx
+++ b/examples/12_async/src/person.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { useTrackedState, useDispatch } from './store';
type Props = {
diff --git a/examples/12_async/src/store.ts b/examples/12_async/src/store.ts
index b1b7ddfb..17d840de 100644
--- a/examples/12_async/src/store.ts
+++ b/examples/12_async/src/store.ts
@@ -1,5 +1,6 @@
-import { Reducer } from 'react';
-import { useReducerAsync, AsyncActionHandlers } from 'use-reducer-async';
+import type { Reducer } from 'react';
+import { useReducerAsync } from 'use-reducer-async';
+import type { AsyncActionHandlers } from 'use-reducer-async';
import { createContainer } from 'react-tracked';
type State = {
@@ -21,9 +22,7 @@ type InnerAction =
| { type: 'ERROR_FETCH_USER' }
| { type: 'DECREMENT' };
-type OuterAction =
- | { type: 'CLEAR_USER_NAME' }
- | { type: 'INCREMENT' };
+type OuterAction = { type: 'CLEAR_USER_NAME' } | { type: 'INCREMENT' };
type Action = InnerAction | OuterAction;
@@ -70,40 +69,51 @@ const reducer: Reducer
@@ -54,7 +56,8 @@ const Gender = React.memo(() => (
));
-const Teenager = React.memo(() => (
+// eslint-disable-next-line react/display-name
+const Teenager = memo(() => (
numRendered: {++numRendered}
- {state.loadingState !== 'idle' ? {state.loadingState}... :
@@ -65,17 +68,19 @@ const Teenager = React.memo(() => (
));
-const PersonForm = React.memo(() => {
+// eslint-disable-next-line react/display-name
+const PersonForm = memo(() => {
const formValues = useFormValues();
- const onSubmit = (event: React.FormEvent) => {
+ const onSubmit = (event: FormEvent) => {
event.preventDefault();
- // eslint-disable-next-line no-console
console.log(formValues);
};
return (
Counter
Count: {state.count} - - + +
- numRendered: {++numRendered}
-
- );
-};
-
-export default Counter;
diff --git a/examples/14_dynamic/src/App.tsx b/examples/14_dynamic/src/app.tsx
similarity index 70%
rename from examples/14_dynamic/src/App.tsx
rename to examples/14_dynamic/src/app.tsx
index 6cb2edcf..e709ae26 100644
--- a/examples/14_dynamic/src/App.tsx
+++ b/examples/14_dynamic/src/app.tsx
@@ -1,9 +1,9 @@
-import React, { StrictMode } from 'react';
+import { StrictMode } from 'react';
import { Provider } from './state';
-import Counter from './Counter';
-import Person from './Person';
+import Counter from './counter';
+import Person from './person';
const App = () => (
- Count: {state.count[index]}
-
-
- setIndex(Number(e.target.value) || 0)} />
-
-
+ numRendered: {++numRendered}
+
+ );
+};
+
+export default Counter;
diff --git a/examples/14_dynamic/src/index.ts b/examples/14_dynamic/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/14_dynamic/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/14_dynamic/src/index.tsx b/examples/14_dynamic/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/14_dynamic/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
+ Count: {state.count[index]}
+
+
+ setIndex(Number(e.target.value) || 0)}
+ />
+
+
diff --git a/examples/14_dynamic/src/state.ts b/examples/14_dynamic/src/state.ts
index d4c368c4..c475575d 100644
--- a/examples/14_dynamic/src/state.ts
+++ b/examples/14_dynamic/src/state.ts
@@ -1,4 +1,5 @@
-import { useReducer, Reducer } from 'react';
+import { useReducer } from 'react';
+import type { Reducer } from 'react';
import { createContainer } from 'react-tracked';
@@ -22,43 +23,48 @@ type Action =
const reducer: Reducer = (state, action) => {
switch (action.type) {
- case 'increment': return {
- ...state,
- count: [
- ...state.count.slice(0, action.index),
- (state.count[action.index] as number) + 1,
- ...state.count.slice(action.index + 1),
- ],
- };
- case 'decrement': return {
- ...state,
- count: [
- ...state.count.slice(0, action.index),
- (state.count[action.index] as number) - 1,
- ...state.count.slice(action.index + 1),
- ],
- };
- case 'setFirstName': return {
- ...state,
- person: {
- ...state.person,
- firstName: action.firstName,
- },
- };
- case 'setLastName': return {
- ...state,
- person: {
- ...state.person,
- lastName: action.lastName,
- },
- };
- case 'setAge': return {
- ...state,
- person: {
- ...state.person,
- age: action.age,
- },
- };
+ case 'increment':
+ return {
+ ...state,
+ count: [
+ ...state.count.slice(0, action.index),
+ (state.count[action.index] as number) + 1,
+ ...state.count.slice(action.index + 1),
+ ],
+ };
+ case 'decrement':
+ return {
+ ...state,
+ count: [
+ ...state.count.slice(0, action.index),
+ (state.count[action.index] as number) - 1,
+ ...state.count.slice(action.index + 1),
+ ],
+ };
+ case 'setFirstName':
+ return {
+ ...state,
+ person: {
+ ...state.person,
+ firstName: action.firstName,
+ },
+ };
+ case 'setLastName':
+ return {
+ ...state,
+ person: {
+ ...state.person,
+ lastName: action.lastName,
+ },
+ };
+ case 'setAge':
+ return {
+ ...state,
+ person: {
+ ...state.person,
+ age: action.age,
+ },
+ };
default:
throw new Error('unknown action type');
}
@@ -66,4 +72,6 @@ const reducer: Reducer = (state, action) => {
const useValue = () => useReducer(reducer, initialState);
-export const { Provider, useTracked } = createContainer(useValue, { concurrentMode: true });
+export const { Provider, useTracked } = createContainer(useValue, {
+ concurrentMode: true,
+});
diff --git a/examples/15_reactmemoref/package.json b/examples/15_reactmemoref/package.json
index 08e26380..bba01aef 100644
--- a/examples/15_reactmemoref/package.json
+++ b/examples/15_reactmemoref/package.json
@@ -1,14 +1,15 @@
{
- "name": "react-tracked-example",
- "version": "0.1.0",
+ "name": "example",
+ "version": "0.0.0",
"private": true,
+ "type": "commonjs",
"dependencies": {
"@types/react": "latest",
"@types/react-dom": "latest",
- "react": "18.0.0-rc.2",
- "react-dom": "18.0.0-rc.2",
- "react-tracked": "latest",
+ "react": "latest",
+ "react-dom": "latest",
"react-scripts": "latest",
+ "react-tracked": "latest",
"typescript": "latest"
},
"scripts": {
@@ -16,11 +17,5 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
- },
- "browserslist": [
- ">0.2%",
- "not dead",
- "not ie <= 11",
- "not op_mini all"
- ]
+ }
}
diff --git a/examples/15_reactmemoref/public/index.html b/examples/15_reactmemoref/public/index.html
index 71fee982..ad4c7826 100644
--- a/examples/15_reactmemoref/public/index.html
+++ b/examples/15_reactmemoref/public/index.html
@@ -1,6 +1,6 @@
- react-tracked example
+ example
diff --git a/examples/15_reactmemoref/src/TodoItem.tsx b/examples/15_reactmemoref/src/TodoItem.tsx
index 68b92a4a..edf4cbd9 100644
--- a/examples/15_reactmemoref/src/TodoItem.tsx
+++ b/examples/15_reactmemoref/src/TodoItem.tsx
@@ -1,16 +1,15 @@
-import React, { forwardRef } from 'react';
+import { memo, forwardRef } from 'react';
-import { useDispatch, TodoType } from './store';
+import { useDispatch } from './store';
+import type { TodoType } from './store';
type Props = {
- // FIXME why this complaints?
- // eslint-disable-next-line react/no-unused-prop-types
todo: TodoType;
};
let numRendered = 0;
-const TodoItem = React.memo(
+const TodoItem = memo(
forwardRef(({ todo }, ref) => {
const dispatch = useDispatch();
return (
diff --git a/examples/15_reactmemoref/src/TodoList.tsx b/examples/15_reactmemoref/src/TodoList.tsx
index e931d71d..d3fed1bf 100644
--- a/examples/15_reactmemoref/src/TodoList.tsx
+++ b/examples/15_reactmemoref/src/TodoList.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { useRef } from 'react';
import { useTrackedState } from './store';
import TodoItem from './TodoItem';
const TodoList = () => {
const state = useTrackedState();
- const ref = React.useRef(null);
+ const ref = useRef(null);
const { todos } = state;
return (
-
diff --git a/examples/10_untracked/src/App.tsx b/examples/15_reactmemoref/src/app.tsx
similarity index 85%
rename from examples/10_untracked/src/App.tsx
rename to examples/15_reactmemoref/src/app.tsx
index 36a94204..70fd75cc 100644
--- a/examples/10_untracked/src/App.tsx
+++ b/examples/15_reactmemoref/src/app.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
import { Provider } from './store';
import TodoList from './TodoList';
diff --git a/examples/15_reactmemoref/src/index.ts b/examples/15_reactmemoref/src/index.ts
deleted file mode 100644
index ba847f04..00000000
--- a/examples/15_reactmemoref/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import App from './App';
-
-const ele = document.getElementById('app');
-if (!ele) throw new Error('no app');
-createRoot(ele).render(React.createElement(App));
diff --git a/examples/15_reactmemoref/src/index.tsx b/examples/15_reactmemoref/src/index.tsx
new file mode 100644
index 00000000..10774d1c
--- /dev/null
+++ b/examples/15_reactmemoref/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+ createRoot(ele).render(
+
- aaa
- aaa
- aaa
- aaa
- aaa
- aaa
- bbb
- aaa
- bbb
- aaa
- bbb
- aaa
- bbb
- aaa
- bbb
- aaa
- bbb
- ccc
- aaa
- bbb
- ccc
- aaa
- bbb
- ccc
- aaa
- bbb
- ccc
- aaa
- ccc
- bbb
- aaa
- bbb
- ccc
- aaa
- bbb
- ccc
- aaa
- bbb
- ccc
- ccc
- aaa
- bbb
- ccc
- aaa
- bbb
- numRendered: 8Wash dishes
- numRendered: 4Study JS
- numRendered: 6Buy ticket
- numRendered: 8Wash dishes
- numRendered: 10Study JS
- numRendered: 6Buy ticket
- numRendered: 8Wash dishes
- numRendered: 10Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 10Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 16Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 16Study JS
- numRendered: 18Buy ticket
- numRendered: 8Wash dishes
- numRendered: 4Study JS
- numRendered: 6Buy ticket
- numRendered: 8Wash dishes
- numRendered: 10Study JS
- numRendered: 6Buy ticket
- numRendered: 8Wash dishes
- numRendered: 10Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 10Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 16Study JS
- numRendered: 12Buy ticket
- numRendered: 14Wash dishes
- numRendered: 16Study JS
- numRendered: 18Buy ticket
{state.count1}
-
+
);
};
diff --git a/__tests__/__snapshots__/01_basic_spec.tsx.snap b/tests/__snapshots__/01_basic.spec.tsx.snap
similarity index 74%
rename from __tests__/__snapshots__/01_basic_spec.tsx.snap
rename to tests/__snapshots__/01_basic.spec.tsx.snap
index 3efe856e..d3c86432 100644
--- a/__tests__/__snapshots__/01_basic_spec.tsx.snap
+++ b/tests/__snapshots__/01_basic.spec.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`basic spec create a component 1`] = `
+exports[`basic spec > create a component 1`] = `
@@ -25,7 +25,7 @@ exports[`basic spec create a component 1`] = `
`;
-exports[`basic spec create a component 2`] = `
+exports[`basic spec > create a component 2`] = `
diff --git a/tests/e2e/01_counter.ts b/tests/e2e/01_counter.ts
new file mode 100644
index 00000000..e00abc94
--- /dev/null
+++ b/tests/e2e/01_counter.ts
@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('01_minimal', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(5) > div > input');
+ await page.click('body > #app > div:nth-child(5) > div > input');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type('body > #app > div:nth-child(5) > div > input', '1');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type('body > #app > div:nth-child(5) > div > input', '2');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type('body > #app > div:nth-child(5) > div > input', '3');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/02_person.ts b/tests/e2e/02_person.ts
new file mode 100644
index 00000000..cb193406
--- /dev/null
+++ b/tests/e2e/02_person.ts
@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('02_typescript', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ '#app > div:nth-child(5) > div > div > button:nth-child(2)',
+ );
+ await page.click(
+ '#app > div:nth-child(5) > div > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ '#app > div:nth-child(5) > div > div > button:nth-child(2)',
+ );
+ await page.click(
+ '#app > div:nth-child(5) > div > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ '#app > div:nth-child(5) > div > div > button:nth-child(3)',
+ );
+ await page.click(
+ '#app > div:nth-child(5) > div > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ '#app > div:nth-child(5) > div > div > button:nth-child(3)',
+ );
+ await page.click(
+ '#app > div:nth-child(5) > div > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'c',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ 'd',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ 'e',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ 'f',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(4) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(4) > input',
+ '2',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(4) > input',
+ '3',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/03_usestate.ts b/tests/e2e/03_usestate.ts
new file mode 100644
index 00000000..45f18f86
--- /dev/null
+++ b/tests/e2e/03_usestate.ts
@@ -0,0 +1,127 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('03_usestate', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector('body > #app > div:nth-child(2) > div > button');
+ await page.click('body > #app > div:nth-child(2) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(2) > div > button');
+ await page.click('body > #app > div:nth-child(2) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(3) > div > button');
+ await page.click('body > #app > div:nth-child(3) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(3) > div > button');
+ await page.click('body > #app > div:nth-child(3) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(3) > div > button');
+ await page.click('body > #app > div:nth-child(3) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/04_selector.ts b/tests/e2e/04_selector.ts
new file mode 100644
index 00000000..f9f9a940
--- /dev/null
+++ b/tests/e2e/04_selector.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('04_selector', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(2) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(3) > input',
+ '1',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/05_container.ts b/tests/e2e/05_container.ts
new file mode 100644
index 00000000..d944b06b
--- /dev/null
+++ b/tests/e2e/05_container.ts
@@ -0,0 +1,215 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('05_container', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(6) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/06_customhook.ts b/tests/e2e/06_customhook.ts
new file mode 100644
index 00000000..d96d0ea7
--- /dev/null
+++ b/tests/e2e/06_customhook.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('06_customhook', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(1) > button:nth-child(2)',
+ );
+ await page.click('body > #app > div:nth-child(1) > button:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(1) > button:nth-child(2)',
+ );
+ await page.click('body > #app > div:nth-child(1) > button:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(1) > button:nth-child(3)',
+ );
+ await page.click('body > #app > div:nth-child(1) > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(1) > button:nth-child(3)',
+ );
+ await page.click('body > #app > div:nth-child(1) > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > button:nth-child(2)',
+ );
+ await page.click('body > #app > div:nth-child(2) > button:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > button:nth-child(2)',
+ );
+ await page.click('body > #app > div:nth-child(2) > button:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > button:nth-child(3)',
+ );
+ await page.click('body > #app > div:nth-child(2) > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > button:nth-child(3)',
+ );
+ await page.click('body > #app > div:nth-child(2) > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/__tests__/e2e/07_todolist.ts b/tests/e2e/07_todolist.ts
similarity index 56%
rename from __tests__/e2e/07_todolist.ts
rename to tests/e2e/07_todolist.ts
index 014b3b01..21b2adcb 100644
--- a/__tests__/e2e/07_todolist.ts
+++ b/tests/e2e/07_todolist.ts
@@ -1,117 +1,173 @@
+import { describe, expect, it } from 'vitest';
import puppeteer from 'puppeteer';
-jest.setTimeout(15 * 1000);
-
describe('07_todolist', () => {
const port = process.env.PORT || '8080';
it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('#app > div > div > form > input');
await page.click('#app > div > div > form > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'a');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'a');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'a');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > div > div > form > button');
await page.click('#app > div > div > form > button');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > div > div > form > input');
await page.click('#app > div > div > form > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'b');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'b');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'b');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > div > div > form > button');
await page.click('#app > div > div > form > button');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > div > div > form > input');
await page.click('#app > div > div > form > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'c');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'c');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > div > div > form > input', 'c');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > div > div > form > button');
await page.click('#app > div > div > form > button');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
await page.click('body > #app > div > div > button:nth-child(3)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(4)');
await page.click('body > #app > div > div > button:nth-child(4)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(2)');
await page.click('body > #app > div > div > button:nth-child(2)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > ul > li:nth-child(2)');
await page.click('body > #app > div > ul > li:nth-child(2)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
await page.click('body > #app > div > div > button:nth-child(3)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(4)');
await page.click('body > #app > div > div > button:nth-child(4)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(2)');
await page.click('body > #app > div > div > button:nth-child(2)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > ul > li:nth-child(3)');
await page.click('body > #app > div > ul > li:nth-child(3)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
await page.click('body > #app > div > div > button:nth-child(3)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(4)');
await page.click('body > #app > div > div > button:nth-child(4)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > ul > li:nth-child(1)');
await page.click('body > #app > div > ul > li:nth-child(1)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(2)');
await page.click('body > #app > div > div > button:nth-child(2)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
await page.click('body > #app > div > div > button:nth-child(3)');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await browser.close();
});
diff --git a/__tests__/e2e/08_comparison.ts b/tests/e2e/08_comparison.ts
similarity index 50%
rename from __tests__/e2e/08_comparison.ts
rename to tests/e2e/08_comparison.ts
index 0cfc5610..6614b690 100644
--- a/__tests__/e2e/08_comparison.ts
+++ b/tests/e2e/08_comparison.ts
@@ -1,48 +1,70 @@
+import { describe, expect, it } from 'vitest';
import puppeteer from 'puppeteer';
-jest.setTimeout(15 * 1000);
-
describe('08_comparison', () => {
const port = process.env.PORT || '8080';
it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('body > #app > div:nth-child(2) > input');
await page.click('body > #app > div:nth-child(2) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(2) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(3) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(5) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(6) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(8) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(9) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(11) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(12) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(14) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('body > #app > div:nth-child(15) > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await browser.close();
});
diff --git a/__tests__/e2e/09_reactmemo.ts b/tests/e2e/09_reactmemo.ts
similarity index 64%
rename from __tests__/e2e/09_reactmemo.ts
rename to tests/e2e/09_reactmemo.ts
index 13477f4e..ab26d5ed 100644
--- a/__tests__/e2e/09_reactmemo.ts
+++ b/tests/e2e/09_reactmemo.ts
@@ -1,38 +1,50 @@
+import { describe, expect, it } from 'vitest';
import puppeteer from 'puppeteer';
-jest.setTimeout(15 * 1000);
-
describe('09_reactmemo', () => {
const port = process.env.PORT || '8080';
it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('body > #app > ul > li:nth-child(1) > input');
await page.click('body > #app > ul > li:nth-child(1) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(2) > input');
await page.click('body > #app > ul > li:nth-child(2) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(3) > input');
await page.click('body > #app > ul > li:nth-child(3) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(1) > input');
await page.click('body > #app > ul > li:nth-child(1) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(2) > input');
await page.click('body > #app > ul > li:nth-child(2) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(3) > input');
await page.click('body > #app > ul > li:nth-child(3) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await browser.close();
});
diff --git a/tests/e2e/10_untracked.ts b/tests/e2e/10_untracked.ts
new file mode 100644
index 00000000..982f5a0c
--- /dev/null
+++ b/tests/e2e/10_untracked.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('10_untracked', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(2) > input:nth-child(2)',
+ );
+ await page.click('body > #app > ul > li:nth-child(2) > input:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > ul > li:nth-child(2) > input:nth-child(2)',
+ '2',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(3) > input:nth-child(2)',
+ );
+ await page.click('body > #app > ul > li:nth-child(3) > input:nth-child(2)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > ul > li:nth-child(3) > input:nth-child(2)',
+ '3',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(2) > input:nth-child(1)',
+ );
+ await page.click('body > #app > ul > li:nth-child(2) > input:nth-child(1)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(3) > input:nth-child(1)',
+ );
+ await page.click('body > #app > ul > li:nth-child(3) > input:nth-child(1)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(1) > input:nth-child(1)',
+ );
+ await page.click('body > #app > ul > li:nth-child(1) > input:nth-child(1)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(2) > button:nth-child(4)',
+ );
+ await page.click(
+ 'body > #app > ul > li:nth-child(2) > button:nth-child(4)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(3) > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > ul > li:nth-child(3) > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(3) > input:nth-child(1)',
+ );
+ await page.click('body > #app > ul > li:nth-child(3) > input:nth-child(1)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > ul > li:nth-child(2) > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > ul > li:nth-child(2) > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/__tests__/e2e/11_form.ts b/tests/e2e/11_form.ts
similarity index 54%
rename from __tests__/e2e/11_form.ts
rename to tests/e2e/11_form.ts
index fddb4f6f..134e0de6 100644
--- a/__tests__/e2e/11_form.ts
+++ b/tests/e2e/11_form.ts
@@ -1,51 +1,73 @@
+import { describe, expect, it } from 'vitest';
import puppeteer from 'puppeteer';
-jest.setTimeout(15 * 1000);
-
describe('11_form', () => {
const port = process.env.PORT || '8080';
it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('#app > form > div:nth-child(3) > div > input');
await page.click('#app > form > div:nth-child(3) > div > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(3) > div > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(3) > div > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(3) > div > input', '1');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(5) > div > input', '2');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(5) > div > input', '2');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.type('#app > form > div:nth-child(5) > div > input', '2');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > form > div > div > select');
await page.click('#app > form > div > div > select');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.select('#app > form > div > div > select', 'male');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('#app > form > div:nth-child(9) > div > input');
await page.click('#app > form > div:nth-child(9) > div > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > form > button');
await page.click('body > #app > form > button');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await browser.close();
});
diff --git a/tests/e2e/12_async.ts b/tests/e2e/12_async.ts
new file mode 100644
index 00000000..baae0358
--- /dev/null
+++ b/tests/e2e/12_async.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+// this test is not very stable because of timer
+describe('12_async', () => {
+ const port = process.env.PORT || '8080';
+ const sleep = (ms: number) =>
+ new Promise((r) => {
+ setTimeout(r, ms);
+ });
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector('body > #app > div > div:nth-child(3) > button');
+ await page.click('body > #app > div > div:nth-child(3) > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await sleep(3000);
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div > div:nth-child(4) > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div > div:nth-child(4) > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
+ await page.click('body > #app > div > div > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await sleep(1000);
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/13_saga.ts b/tests/e2e/13_saga.ts
new file mode 100644
index 00000000..5536265a
--- /dev/null
+++ b/tests/e2e/13_saga.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+// this test is not very stable because of timer
+describe('13_saga', () => {
+ const port = process.env.PORT || '8080';
+ const sleep = (ms: number) =>
+ new Promise((r) => {
+ setTimeout(r, ms);
+ });
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector('body > #app > div > div:nth-child(3) > button');
+ await page.click('body > #app > div > div:nth-child(3) > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await sleep(3000);
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div > div:nth-child(4) > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div > div:nth-child(4) > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div > div > button:nth-child(3)');
+ await page.click('body > #app > div > div > button:nth-child(3)');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await sleep(1000);
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/tests/e2e/14_dynamic.ts b/tests/e2e/14_dynamic.ts
new file mode 100644
index 00000000..07cac6cc
--- /dev/null
+++ b/tests/e2e/14_dynamic.ts
@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest';
+import puppeteer from 'puppeteer';
+
+describe('14_dynamic', () => {
+ const port = process.env.PORT || '8080';
+
+ it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto(`http://localhost:${port}/`);
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(2) > div > input');
+ await page.click('body > #app > div:nth-child(2) > div > input');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type('body > #app > div:nth-child(2) > div > input', '1');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(3) > div > input');
+ await page.click('body > #app > div:nth-child(3) > div > input');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type('body > #app > div:nth-child(3) > div > input', '1');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'a',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(5) > div > button');
+ await page.click('body > #app > div:nth-child(5) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ await page.click(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.type(
+ 'body > #app > div:nth-child(5) > div:nth-child(1) > input',
+ 'b',
+ );
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await page.waitForSelector('body > #app > div:nth-child(6) > div > button');
+ await page.click('body > #app > div:nth-child(6) > div > button');
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
+
+ await browser.close();
+ });
+});
diff --git a/__tests__/e2e/15_reactmemoref.ts b/tests/e2e/15_reactmemoref.ts
similarity index 64%
rename from __tests__/e2e/15_reactmemoref.ts
rename to tests/e2e/15_reactmemoref.ts
index 929141ed..68850b69 100644
--- a/__tests__/e2e/15_reactmemoref.ts
+++ b/tests/e2e/15_reactmemoref.ts
@@ -1,38 +1,50 @@
+import { describe, expect, it } from 'vitest';
import puppeteer from 'puppeteer';
-jest.setTimeout(15 * 1000);
-
describe('15_reactmemoref', () => {
const port = process.env.PORT || '8080';
it('should work with recorded events', async () => {
+ // eslint-disable-next-line import/no-named-as-default-member
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`http://localhost:${port}/`);
await page.waitForSelector('body > #app > ul > li:nth-child(1) > input');
await page.click('body > #app > ul > li:nth-child(1) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(2) > input');
await page.click('body > #app > ul > li:nth-child(2) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(3) > input');
await page.click('body > #app > ul > li:nth-child(3) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(1) > input');
await page.click('body > #app > ul > li:nth-child(1) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(2) > input');
await page.click('body > #app > ul > li:nth-child(2) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await page.waitForSelector('body > #app > ul > li:nth-child(3) > input');
await page.click('body > #app > ul > li:nth-child(3) > input');
- expect(await page.evaluate(() => document.body.innerHTML)).toMatchSnapshot();
+ expect(
+ await page.evaluate(() => document.body.innerHTML),
+ ).toMatchSnapshot();
await browser.close();
});
diff --git a/__tests__/e2e/__snapshots__/01_minimal.ts.snap b/tests/e2e/__snapshots__/01_counter.ts.snap
similarity index 87%
rename from __tests__/e2e/__snapshots__/01_minimal.ts.snap
rename to tests/e2e/__snapshots__/01_counter.ts.snap
index ab005ea9..ae585683 100644
--- a/__tests__/e2e/__snapshots__/01_minimal.ts.snap
+++ b/tests/e2e/__snapshots__/01_counter.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`01_minimal should work with recorded events 1`] = `
+exports[`01_minimal > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`01_minimal should work with recorded events 1`] = `
"
`;
-exports[`01_minimal should work with recorded events 2`] = `
+exports[`01_minimal > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`01_minimal should work with recorded events 2`] = `
"
`;
-exports[`01_minimal should work with recorded events 3`] = `
+exports[`01_minimal > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`01_minimal should work with recorded events 3`] = `
"
`;
-exports[`01_minimal should work with recorded events 4`] = `
+exports[`01_minimal > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`01_minimal should work with recorded events 4`] = `
"
`;
-exports[`01_minimal should work with recorded events 5`] = `
+exports[`01_minimal > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`01_minimal should work with recorded events 5`] = `
"
`;
-exports[`01_minimal should work with recorded events 6`] = `
+exports[`01_minimal > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`01_minimal should work with recorded events 6`] = `
"
`;
-exports[`01_minimal should work with recorded events 7`] = `
+exports[`01_minimal > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`01_minimal should work with recorded events 7`] = `
"
`;
-exports[`01_minimal should work with recorded events 8`] = `
+exports[`01_minimal > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`01_minimal should work with recorded events 8`] = `
"
`;
-exports[`01_minimal should work with recorded events 9`] = `
+exports[`01_minimal > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`01_minimal should work with recorded events 9`] = `
"
`;
-exports[`01_minimal should work with recorded events 10`] = `
+exports[`01_minimal > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`01_minimal should work with recorded events 10`] = `
"
`;
-exports[`01_minimal should work with recorded events 11`] = `
+exports[`01_minimal > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`01_minimal should work with recorded events 11`] = `
"
`;
-exports[`01_minimal should work with recorded events 12`] = `
+exports[`01_minimal > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`01_minimal should work with recorded events 12`] = `
"
`;
-exports[`01_minimal should work with recorded events 13`] = `
+exports[`01_minimal > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`01_minimal should work with recorded events 13`] = `
"
`;
-exports[`01_minimal should work with recorded events 14`] = `
+exports[`01_minimal > should work with recorded events 14`] = `
"
@@ -112,7 +112,7 @@ exports[`01_minimal should work with recorded events 14`] = `
"
`;
-exports[`01_minimal should work with recorded events 15`] = `
+exports[`01_minimal > should work with recorded events 15`] = `
"
@@ -120,7 +120,7 @@ exports[`01_minimal should work with recorded events 15`] = `
"
`;
-exports[`01_minimal should work with recorded events 16`] = `
+exports[`01_minimal > should work with recorded events 16`] = `
"
diff --git a/__tests__/e2e/__snapshots__/02_typescript.ts.snap b/tests/e2e/__snapshots__/02_person.ts.snap
similarity index 92%
rename from __tests__/e2e/__snapshots__/02_typescript.ts.snap
rename to tests/e2e/__snapshots__/02_person.ts.snap
index 8f4c043b..e11f07a1 100644
--- a/__tests__/e2e/__snapshots__/02_typescript.ts.snap
+++ b/tests/e2e/__snapshots__/02_person.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`02_typescript should work with recorded events 1`] = `
+exports[`02_typescript > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`02_typescript should work with recorded events 1`] = `
"
`;
-exports[`02_typescript should work with recorded events 2`] = `
+exports[`02_typescript > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`02_typescript should work with recorded events 2`] = `
"
`;
-exports[`02_typescript should work with recorded events 3`] = `
+exports[`02_typescript > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`02_typescript should work with recorded events 3`] = `
"
`;
-exports[`02_typescript should work with recorded events 4`] = `
+exports[`02_typescript > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`02_typescript should work with recorded events 4`] = `
"
`;
-exports[`02_typescript should work with recorded events 5`] = `
+exports[`02_typescript > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`02_typescript should work with recorded events 5`] = `
"
`;
-exports[`02_typescript should work with recorded events 6`] = `
+exports[`02_typescript > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`02_typescript should work with recorded events 6`] = `
"
`;
-exports[`02_typescript should work with recorded events 7`] = `
+exports[`02_typescript > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`02_typescript should work with recorded events 7`] = `
"
`;
-exports[`02_typescript should work with recorded events 8`] = `
+exports[`02_typescript > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`02_typescript should work with recorded events 8`] = `
"
`;
-exports[`02_typescript should work with recorded events 9`] = `
+exports[`02_typescript > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`02_typescript should work with recorded events 9`] = `
"
`;
-exports[`02_typescript should work with recorded events 10`] = `
+exports[`02_typescript > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`02_typescript should work with recorded events 10`] = `
"
`;
-exports[`02_typescript should work with recorded events 11`] = `
+exports[`02_typescript > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`02_typescript should work with recorded events 11`] = `
"
`;
-exports[`02_typescript should work with recorded events 12`] = `
+exports[`02_typescript > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`02_typescript should work with recorded events 12`] = `
"
`;
-exports[`02_typescript should work with recorded events 13`] = `
+exports[`02_typescript > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`02_typescript should work with recorded events 13`] = `
"
`;
-exports[`02_typescript should work with recorded events 14`] = `
+exports[`02_typescript > should work with recorded events 14`] = `
"
@@ -112,7 +112,7 @@ exports[`02_typescript should work with recorded events 14`] = `
"
`;
-exports[`02_typescript should work with recorded events 15`] = `
+exports[`02_typescript > should work with recorded events 15`] = `
"
@@ -120,7 +120,7 @@ exports[`02_typescript should work with recorded events 15`] = `
"
`;
-exports[`02_typescript should work with recorded events 16`] = `
+exports[`02_typescript > should work with recorded events 16`] = `
"
@@ -128,7 +128,7 @@ exports[`02_typescript should work with recorded events 16`] = `
"
`;
-exports[`02_typescript should work with recorded events 17`] = `
+exports[`02_typescript > should work with recorded events 17`] = `
"
@@ -136,7 +136,7 @@ exports[`02_typescript should work with recorded events 17`] = `
"
`;
-exports[`02_typescript should work with recorded events 18`] = `
+exports[`02_typescript > should work with recorded events 18`] = `
"
diff --git a/__tests__/e2e/__snapshots__/03_usestate.ts.snap b/tests/e2e/__snapshots__/03_usestate.ts.snap
similarity index 88%
rename from __tests__/e2e/__snapshots__/03_usestate.ts.snap
rename to tests/e2e/__snapshots__/03_usestate.ts.snap
index c6c12398..26fe44bb 100644
--- a/__tests__/e2e/__snapshots__/03_usestate.ts.snap
+++ b/tests/e2e/__snapshots__/03_usestate.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`03_usestate should work with recorded events 1`] = `
+exports[`03_usestate > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`03_usestate should work with recorded events 1`] = `
"
`;
-exports[`03_usestate should work with recorded events 2`] = `
+exports[`03_usestate > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`03_usestate should work with recorded events 2`] = `
"
`;
-exports[`03_usestate should work with recorded events 3`] = `
+exports[`03_usestate > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`03_usestate should work with recorded events 3`] = `
"
`;
-exports[`03_usestate should work with recorded events 4`] = `
+exports[`03_usestate > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`03_usestate should work with recorded events 4`] = `
"
`;
-exports[`03_usestate should work with recorded events 5`] = `
+exports[`03_usestate > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`03_usestate should work with recorded events 5`] = `
"
`;
-exports[`03_usestate should work with recorded events 6`] = `
+exports[`03_usestate > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`03_usestate should work with recorded events 6`] = `
"
`;
-exports[`03_usestate should work with recorded events 7`] = `
+exports[`03_usestate > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`03_usestate should work with recorded events 7`] = `
"
`;
-exports[`03_usestate should work with recorded events 8`] = `
+exports[`03_usestate > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`03_usestate should work with recorded events 8`] = `
"
`;
-exports[`03_usestate should work with recorded events 9`] = `
+exports[`03_usestate > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`03_usestate should work with recorded events 9`] = `
"
`;
-exports[`03_usestate should work with recorded events 10`] = `
+exports[`03_usestate > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`03_usestate should work with recorded events 10`] = `
"
`;
-exports[`03_usestate should work with recorded events 11`] = `
+exports[`03_usestate > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`03_usestate should work with recorded events 11`] = `
"
`;
-exports[`03_usestate should work with recorded events 12`] = `
+exports[`03_usestate > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`03_usestate should work with recorded events 12`] = `
"
`;
-exports[`03_usestate should work with recorded events 13`] = `
+exports[`03_usestate > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`03_usestate should work with recorded events 13`] = `
"
`;
-exports[`03_usestate should work with recorded events 14`] = `
+exports[`03_usestate > should work with recorded events 14`] = `
"
@@ -112,7 +112,7 @@ exports[`03_usestate should work with recorded events 14`] = `
"
`;
-exports[`03_usestate should work with recorded events 15`] = `
+exports[`03_usestate > should work with recorded events 15`] = `
"
diff --git a/__tests__/e2e/__snapshots__/04_selector.ts.snap b/tests/e2e/__snapshots__/04_selector.ts.snap
similarity index 89%
rename from __tests__/e2e/__snapshots__/04_selector.ts.snap
rename to tests/e2e/__snapshots__/04_selector.ts.snap
index 0ab021c4..e49ec5d9 100644
--- a/__tests__/e2e/__snapshots__/04_selector.ts.snap
+++ b/tests/e2e/__snapshots__/04_selector.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`04_selector should work with recorded events 1`] = `
+exports[`04_selector > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`04_selector should work with recorded events 1`] = `
"
`;
-exports[`04_selector should work with recorded events 2`] = `
+exports[`04_selector > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`04_selector should work with recorded events 2`] = `
"
`;
-exports[`04_selector should work with recorded events 3`] = `
+exports[`04_selector > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`04_selector should work with recorded events 3`] = `
"
`;
-exports[`04_selector should work with recorded events 4`] = `
+exports[`04_selector > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`04_selector should work with recorded events 4`] = `
"
`;
-exports[`04_selector should work with recorded events 5`] = `
+exports[`04_selector > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`04_selector should work with recorded events 5`] = `
"
`;
-exports[`04_selector should work with recorded events 6`] = `
+exports[`04_selector > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`04_selector should work with recorded events 6`] = `
"
`;
-exports[`04_selector should work with recorded events 7`] = `
+exports[`04_selector > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`04_selector should work with recorded events 7`] = `
"
`;
-exports[`04_selector should work with recorded events 8`] = `
+exports[`04_selector > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`04_selector should work with recorded events 8`] = `
"
`;
-exports[`04_selector should work with recorded events 9`] = `
+exports[`04_selector > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`04_selector should work with recorded events 9`] = `
"
`;
-exports[`04_selector should work with recorded events 10`] = `
+exports[`04_selector > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`04_selector should work with recorded events 10`] = `
"
`;
-exports[`04_selector should work with recorded events 11`] = `
+exports[`04_selector > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`04_selector should work with recorded events 11`] = `
"
`;
-exports[`04_selector should work with recorded events 12`] = `
+exports[`04_selector > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`04_selector should work with recorded events 12`] = `
"
`;
-exports[`04_selector should work with recorded events 13`] = `
+exports[`04_selector > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`04_selector should work with recorded events 13`] = `
"
`;
-exports[`04_selector should work with recorded events 14`] = `
+exports[`04_selector > should work with recorded events 14`] = `
"
diff --git a/__tests__/e2e/__snapshots__/05_container.ts.snap b/tests/e2e/__snapshots__/05_container.ts.snap
similarity index 89%
rename from __tests__/e2e/__snapshots__/05_container.ts.snap
rename to tests/e2e/__snapshots__/05_container.ts.snap
index 9e1d1e55..0b378b78 100644
--- a/__tests__/e2e/__snapshots__/05_container.ts.snap
+++ b/tests/e2e/__snapshots__/05_container.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`05_container should work with recorded events 1`] = `
+exports[`05_container > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`05_container should work with recorded events 1`] = `
"
`;
-exports[`05_container should work with recorded events 2`] = `
+exports[`05_container > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`05_container should work with recorded events 2`] = `
"
`;
-exports[`05_container should work with recorded events 3`] = `
+exports[`05_container > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`05_container should work with recorded events 3`] = `
"
`;
-exports[`05_container should work with recorded events 4`] = `
+exports[`05_container > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`05_container should work with recorded events 4`] = `
"
`;
-exports[`05_container should work with recorded events 5`] = `
+exports[`05_container > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`05_container should work with recorded events 5`] = `
"
`;
-exports[`05_container should work with recorded events 6`] = `
+exports[`05_container > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`05_container should work with recorded events 6`] = `
"
`;
-exports[`05_container should work with recorded events 7`] = `
+exports[`05_container > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`05_container should work with recorded events 7`] = `
"
`;
-exports[`05_container should work with recorded events 8`] = `
+exports[`05_container > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`05_container should work with recorded events 8`] = `
"
`;
-exports[`05_container should work with recorded events 9`] = `
+exports[`05_container > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`05_container should work with recorded events 9`] = `
"
`;
-exports[`05_container should work with recorded events 10`] = `
+exports[`05_container > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`05_container should work with recorded events 10`] = `
"
`;
-exports[`05_container should work with recorded events 11`] = `
+exports[`05_container > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`05_container should work with recorded events 11`] = `
"
`;
-exports[`05_container should work with recorded events 12`] = `
+exports[`05_container > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`05_container should work with recorded events 12`] = `
"
`;
-exports[`05_container should work with recorded events 13`] = `
+exports[`05_container > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`05_container should work with recorded events 13`] = `
"
`;
-exports[`05_container should work with recorded events 14`] = `
+exports[`05_container > should work with recorded events 14`] = `
"
@@ -112,7 +112,7 @@ exports[`05_container should work with recorded events 14`] = `
"
`;
-exports[`05_container should work with recorded events 15`] = `
+exports[`05_container > should work with recorded events 15`] = `
"
@@ -120,7 +120,7 @@ exports[`05_container should work with recorded events 15`] = `
"
`;
-exports[`05_container should work with recorded events 16`] = `
+exports[`05_container > should work with recorded events 16`] = `
"
@@ -128,7 +128,7 @@ exports[`05_container should work with recorded events 16`] = `
"
`;
-exports[`05_container should work with recorded events 17`] = `
+exports[`05_container > should work with recorded events 17`] = `
"
@@ -136,7 +136,7 @@ exports[`05_container should work with recorded events 17`] = `
"
`;
-exports[`05_container should work with recorded events 18`] = `
+exports[`05_container > should work with recorded events 18`] = `
"
@@ -144,7 +144,7 @@ exports[`05_container should work with recorded events 18`] = `
"
`;
-exports[`05_container should work with recorded events 19`] = `
+exports[`05_container > should work with recorded events 19`] = `
"
@@ -152,7 +152,7 @@ exports[`05_container should work with recorded events 19`] = `
"
`;
-exports[`05_container should work with recorded events 20`] = `
+exports[`05_container > should work with recorded events 20`] = `
"
diff --git a/__tests__/e2e/__snapshots__/06_customhook.ts.snap b/tests/e2e/__snapshots__/06_customhook.ts.snap
similarity index 75%
rename from __tests__/e2e/__snapshots__/06_customhook.ts.snap
rename to tests/e2e/__snapshots__/06_customhook.ts.snap
index 780bce2f..cf2a213f 100644
--- a/__tests__/e2e/__snapshots__/06_customhook.ts.snap
+++ b/tests/e2e/__snapshots__/06_customhook.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`06_customhook should work with recorded events 1`] = `
+exports[`06_customhook > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`06_customhook should work with recorded events 1`] = `
"
`;
-exports[`06_customhook should work with recorded events 2`] = `
+exports[`06_customhook > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`06_customhook should work with recorded events 2`] = `
"
`;
-exports[`06_customhook should work with recorded events 3`] = `
+exports[`06_customhook > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`06_customhook should work with recorded events 3`] = `
"
`;
-exports[`06_customhook should work with recorded events 4`] = `
+exports[`06_customhook > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`06_customhook should work with recorded events 4`] = `
"
`;
-exports[`06_customhook should work with recorded events 5`] = `
+exports[`06_customhook > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`06_customhook should work with recorded events 5`] = `
"
`;
-exports[`06_customhook should work with recorded events 6`] = `
+exports[`06_customhook > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`06_customhook should work with recorded events 6`] = `
"
`;
-exports[`06_customhook should work with recorded events 7`] = `
+exports[`06_customhook > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`06_customhook should work with recorded events 7`] = `
"
`;
-exports[`06_customhook should work with recorded events 8`] = `
+exports[`06_customhook > should work with recorded events 8`] = `
"
diff --git a/__tests__/e2e/__snapshots__/07_todolist.ts.snap b/tests/e2e/__snapshots__/07_todolist.ts.snap
similarity index 88%
rename from __tests__/e2e/__snapshots__/07_todolist.ts.snap
rename to tests/e2e/__snapshots__/07_todolist.ts.snap
index ee495ba7..2f3f81fa 100644
--- a/__tests__/e2e/__snapshots__/07_todolist.ts.snap
+++ b/tests/e2e/__snapshots__/07_todolist.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`07_todolist should work with recorded events 1`] = `
+exports[`07_todolist > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`07_todolist should work with recorded events 1`] = `
"
`;
-exports[`07_todolist should work with recorded events 2`] = `
+exports[`07_todolist > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`07_todolist should work with recorded events 2`] = `
"
`;
-exports[`07_todolist should work with recorded events 3`] = `
+exports[`07_todolist > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`07_todolist should work with recorded events 3`] = `
"
`;
-exports[`07_todolist should work with recorded events 4`] = `
+exports[`07_todolist > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`07_todolist should work with recorded events 4`] = `
"
`;
-exports[`07_todolist should work with recorded events 5`] = `
+exports[`07_todolist > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`07_todolist should work with recorded events 5`] = `
"
`;
-exports[`07_todolist should work with recorded events 6`] = `
+exports[`07_todolist > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`07_todolist should work with recorded events 6`] = `
"
`;
-exports[`07_todolist should work with recorded events 7`] = `
+exports[`07_todolist > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`07_todolist should work with recorded events 7`] = `
"
`;
-exports[`07_todolist should work with recorded events 8`] = `
+exports[`07_todolist > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`07_todolist should work with recorded events 8`] = `
"
`;
-exports[`07_todolist should work with recorded events 9`] = `
+exports[`07_todolist > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`07_todolist should work with recorded events 9`] = `
"
`;
-exports[`07_todolist should work with recorded events 10`] = `
+exports[`07_todolist > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`07_todolist should work with recorded events 10`] = `
"
`;
-exports[`07_todolist should work with recorded events 11`] = `
+exports[`07_todolist > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`07_todolist should work with recorded events 11`] = `
"
`;
-exports[`07_todolist should work with recorded events 12`] = `
+exports[`07_todolist > should work with recorded events 12`] = `
"
@@ -96,7 +96,7 @@ exports[`07_todolist should work with recorded events 12`] = `
"
`;
-exports[`07_todolist should work with recorded events 13`] = `
+exports[`07_todolist > should work with recorded events 13`] = `
"
@@ -104,7 +104,7 @@ exports[`07_todolist should work with recorded events 13`] = `
"
`;
-exports[`07_todolist should work with recorded events 14`] = `
+exports[`07_todolist > should work with recorded events 14`] = `
"
@@ -112,7 +112,7 @@ exports[`07_todolist should work with recorded events 14`] = `
"
`;
-exports[`07_todolist should work with recorded events 15`] = `
+exports[`07_todolist > should work with recorded events 15`] = `
"
@@ -120,7 +120,7 @@ exports[`07_todolist should work with recorded events 15`] = `
"
`;
-exports[`07_todolist should work with recorded events 16`] = `
+exports[`07_todolist > should work with recorded events 16`] = `
"
@@ -128,7 +128,7 @@ exports[`07_todolist should work with recorded events 16`] = `
"
`;
-exports[`07_todolist should work with recorded events 17`] = `
+exports[`07_todolist > should work with recorded events 17`] = `
"
@@ -136,7 +136,7 @@ exports[`07_todolist should work with recorded events 17`] = `
"
`;
-exports[`07_todolist should work with recorded events 18`] = `
+exports[`07_todolist > should work with recorded events 18`] = `
"
@@ -144,7 +144,7 @@ exports[`07_todolist should work with recorded events 18`] = `
"
`;
-exports[`07_todolist should work with recorded events 19`] = `
+exports[`07_todolist > should work with recorded events 19`] = `
"
@@ -152,7 +152,7 @@ exports[`07_todolist should work with recorded events 19`] = `
"
`;
-exports[`07_todolist should work with recorded events 20`] = `
+exports[`07_todolist > should work with recorded events 20`] = `
"
@@ -160,7 +160,7 @@ exports[`07_todolist should work with recorded events 20`] = `
"
`;
-exports[`07_todolist should work with recorded events 21`] = `
+exports[`07_todolist > should work with recorded events 21`] = `
"
@@ -168,7 +168,7 @@ exports[`07_todolist should work with recorded events 21`] = `
"
`;
-exports[`07_todolist should work with recorded events 22`] = `
+exports[`07_todolist > should work with recorded events 22`] = `
"
@@ -176,7 +176,7 @@ exports[`07_todolist should work with recorded events 22`] = `
"
`;
-exports[`07_todolist should work with recorded events 23`] = `
+exports[`07_todolist > should work with recorded events 23`] = `
"
@@ -184,7 +184,7 @@ exports[`07_todolist should work with recorded events 23`] = `
"
`;
-exports[`07_todolist should work with recorded events 24`] = `
+exports[`07_todolist > should work with recorded events 24`] = `
"
@@ -192,7 +192,7 @@ exports[`07_todolist should work with recorded events 24`] = `
"
`;
-exports[`07_todolist should work with recorded events 25`] = `
+exports[`07_todolist > should work with recorded events 25`] = `
"
@@ -200,7 +200,7 @@ exports[`07_todolist should work with recorded events 25`] = `
"
`;
-exports[`07_todolist should work with recorded events 26`] = `
+exports[`07_todolist > should work with recorded events 26`] = `
"
@@ -208,7 +208,7 @@ exports[`07_todolist should work with recorded events 26`] = `
"
`;
-exports[`07_todolist should work with recorded events 27`] = `
+exports[`07_todolist > should work with recorded events 27`] = `
"
@@ -216,7 +216,7 @@ exports[`07_todolist should work with recorded events 27`] = `
"
`;
-exports[`07_todolist should work with recorded events 28`] = `
+exports[`07_todolist > should work with recorded events 28`] = `
"
diff --git a/__tests__/e2e/__snapshots__/08_comparison.ts.snap b/tests/e2e/__snapshots__/08_comparison.ts.snap
similarity index 90%
rename from __tests__/e2e/__snapshots__/08_comparison.ts.snap
rename to tests/e2e/__snapshots__/08_comparison.ts.snap
index 6ab68aeb..ccb3f1c4 100644
--- a/__tests__/e2e/__snapshots__/08_comparison.ts.snap
+++ b/tests/e2e/__snapshots__/08_comparison.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`08_comparison should work with recorded events 1`] = `
+exports[`08_comparison > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`08_comparison should work with recorded events 1`] = `
"
`;
-exports[`08_comparison should work with recorded events 2`] = `
+exports[`08_comparison > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`08_comparison should work with recorded events 2`] = `
"
`;
-exports[`08_comparison should work with recorded events 3`] = `
+exports[`08_comparison > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`08_comparison should work with recorded events 3`] = `
"
`;
-exports[`08_comparison should work with recorded events 4`] = `
+exports[`08_comparison > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`08_comparison should work with recorded events 4`] = `
"
`;
-exports[`08_comparison should work with recorded events 5`] = `
+exports[`08_comparison > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`08_comparison should work with recorded events 5`] = `
"
`;
-exports[`08_comparison should work with recorded events 6`] = `
+exports[`08_comparison > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`08_comparison should work with recorded events 6`] = `
"
`;
-exports[`08_comparison should work with recorded events 7`] = `
+exports[`08_comparison > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`08_comparison should work with recorded events 7`] = `
"
`;
-exports[`08_comparison should work with recorded events 8`] = `
+exports[`08_comparison > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`08_comparison should work with recorded events 8`] = `
"
`;
-exports[`08_comparison should work with recorded events 9`] = `
+exports[`08_comparison > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`08_comparison should work with recorded events 9`] = `
"
`;
-exports[`08_comparison should work with recorded events 10`] = `
+exports[`08_comparison > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`08_comparison should work with recorded events 10`] = `
"
`;
-exports[`08_comparison should work with recorded events 11`] = `
+exports[`08_comparison > should work with recorded events 11`] = `
"
diff --git a/tests/e2e/__snapshots__/09_reactmemo.ts.snap b/tests/e2e/__snapshots__/09_reactmemo.ts.snap
new file mode 100644
index 00000000..ceeb9bbd
--- /dev/null
+++ b/tests/e2e/__snapshots__/09_reactmemo.ts.snap
@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`09_reactmemo > should work with recorded events 1`] = `
+"
+
+
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 2`] = `
+"
+
+
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 3`] = `
+"
+
+
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 4`] = `
+"
+
+
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 5`] = `
+"
+
+
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 6`] = `
+"
+
+
+
+"
+`;
diff --git a/__tests__/e2e/__snapshots__/10_untracked.ts.snap b/tests/e2e/__snapshots__/10_untracked.ts.snap
similarity index 86%
rename from __tests__/e2e/__snapshots__/10_untracked.ts.snap
rename to tests/e2e/__snapshots__/10_untracked.ts.snap
index 69f7151f..0e5073aa 100644
--- a/__tests__/e2e/__snapshots__/10_untracked.ts.snap
+++ b/tests/e2e/__snapshots__/10_untracked.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`10_untracked should work with recorded events 1`] = `
+exports[`10_untracked > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`10_untracked should work with recorded events 1`] = `
"
`;
-exports[`10_untracked should work with recorded events 2`] = `
+exports[`10_untracked > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`10_untracked should work with recorded events 2`] = `
"
`;
-exports[`10_untracked should work with recorded events 3`] = `
+exports[`10_untracked > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`10_untracked should work with recorded events 3`] = `
"
`;
-exports[`10_untracked should work with recorded events 4`] = `
+exports[`10_untracked > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`10_untracked should work with recorded events 4`] = `
"
`;
-exports[`10_untracked should work with recorded events 5`] = `
+exports[`10_untracked > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`10_untracked should work with recorded events 5`] = `
"
`;
-exports[`10_untracked should work with recorded events 6`] = `
+exports[`10_untracked > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`10_untracked should work with recorded events 6`] = `
"
`;
-exports[`10_untracked should work with recorded events 7`] = `
+exports[`10_untracked > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`10_untracked should work with recorded events 7`] = `
"
`;
-exports[`10_untracked should work with recorded events 8`] = `
+exports[`10_untracked > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`10_untracked should work with recorded events 8`] = `
"
`;
-exports[`10_untracked should work with recorded events 9`] = `
+exports[`10_untracked > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`10_untracked should work with recorded events 9`] = `
"
`;
-exports[`10_untracked should work with recorded events 10`] = `
+exports[`10_untracked > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`10_untracked should work with recorded events 10`] = `
"
`;
-exports[`10_untracked should work with recorded events 11`] = `
+exports[`10_untracked > should work with recorded events 11`] = `
"
diff --git a/__tests__/e2e/__snapshots__/11_form.ts.snap b/tests/e2e/__snapshots__/11_form.ts.snap
similarity index 90%
rename from __tests__/e2e/__snapshots__/11_form.ts.snap
rename to tests/e2e/__snapshots__/11_form.ts.snap
index 783581b8..aabe61b9 100644
--- a/__tests__/e2e/__snapshots__/11_form.ts.snap
+++ b/tests/e2e/__snapshots__/11_form.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`11_form should work with recorded events 1`] = `
+exports[`11_form > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`11_form should work with recorded events 1`] = `
"
`;
-exports[`11_form should work with recorded events 2`] = `
+exports[`11_form > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`11_form should work with recorded events 2`] = `
"
`;
-exports[`11_form should work with recorded events 3`] = `
+exports[`11_form > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`11_form should work with recorded events 3`] = `
"
`;
-exports[`11_form should work with recorded events 4`] = `
+exports[`11_form > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`11_form should work with recorded events 4`] = `
"
`;
-exports[`11_form should work with recorded events 5`] = `
+exports[`11_form > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`11_form should work with recorded events 5`] = `
"
`;
-exports[`11_form should work with recorded events 6`] = `
+exports[`11_form > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`11_form should work with recorded events 6`] = `
"
`;
-exports[`11_form should work with recorded events 7`] = `
+exports[`11_form > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`11_form should work with recorded events 7`] = `
"
`;
-exports[`11_form should work with recorded events 8`] = `
+exports[`11_form > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`11_form should work with recorded events 8`] = `
"
`;
-exports[`11_form should work with recorded events 9`] = `
+exports[`11_form > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`11_form should work with recorded events 9`] = `
"
`;
-exports[`11_form should work with recorded events 10`] = `
+exports[`11_form > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`11_form should work with recorded events 10`] = `
"
`;
-exports[`11_form should work with recorded events 11`] = `
+exports[`11_form > should work with recorded events 11`] = `
"
diff --git a/__tests__/e2e/__snapshots__/12_async.ts.snap b/tests/e2e/__snapshots__/12_async.ts.snap
similarity index 80%
rename from __tests__/e2e/__snapshots__/12_async.ts.snap
rename to tests/e2e/__snapshots__/12_async.ts.snap
index d098a1a5..12b47e1a 100644
--- a/__tests__/e2e/__snapshots__/12_async.ts.snap
+++ b/tests/e2e/__snapshots__/12_async.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`12_async should work with recorded events 1`] = `
+exports[`12_async > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`12_async should work with recorded events 1`] = `
"
`;
-exports[`12_async should work with recorded events 2`] = `
+exports[`12_async > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`12_async should work with recorded events 2`] = `
"
`;
-exports[`12_async should work with recorded events 3`] = `
+exports[`12_async > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`12_async should work with recorded events 3`] = `
"
`;
-exports[`12_async should work with recorded events 4`] = `
+exports[`12_async > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`12_async should work with recorded events 4`] = `
"
`;
-exports[`12_async should work with recorded events 5`] = `
+exports[`12_async > should work with recorded events 5`] = `
"
diff --git a/__tests__/e2e/__snapshots__/13_saga.ts.snap b/tests/e2e/__snapshots__/13_saga.ts.snap
similarity index 80%
rename from __tests__/e2e/__snapshots__/13_saga.ts.snap
rename to tests/e2e/__snapshots__/13_saga.ts.snap
index d7b7a97a..50f62cc9 100644
--- a/__tests__/e2e/__snapshots__/13_saga.ts.snap
+++ b/tests/e2e/__snapshots__/13_saga.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`13_saga should work with recorded events 1`] = `
+exports[`13_saga > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`13_saga should work with recorded events 1`] = `
"
`;
-exports[`13_saga should work with recorded events 2`] = `
+exports[`13_saga > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`13_saga should work with recorded events 2`] = `
"
`;
-exports[`13_saga should work with recorded events 3`] = `
+exports[`13_saga > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`13_saga should work with recorded events 3`] = `
"
`;
-exports[`13_saga should work with recorded events 4`] = `
+exports[`13_saga > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`13_saga should work with recorded events 4`] = `
"
`;
-exports[`13_saga should work with recorded events 5`] = `
+exports[`13_saga > should work with recorded events 5`] = `
"
diff --git a/__tests__/e2e/__snapshots__/14_dynamic.ts.snap b/tests/e2e/__snapshots__/14_dynamic.ts.snap
similarity index 90%
rename from __tests__/e2e/__snapshots__/14_dynamic.ts.snap
rename to tests/e2e/__snapshots__/14_dynamic.ts.snap
index acb0004b..8473ae3e 100644
--- a/__tests__/e2e/__snapshots__/14_dynamic.ts.snap
+++ b/tests/e2e/__snapshots__/14_dynamic.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`14_dynamic should work with recorded events 1`] = `
+exports[`14_dynamic > should work with recorded events 1`] = `
"
@@ -8,7 +8,7 @@ exports[`14_dynamic should work with recorded events 1`] = `
"
`;
-exports[`14_dynamic should work with recorded events 2`] = `
+exports[`14_dynamic > should work with recorded events 2`] = `
"
@@ -16,7 +16,7 @@ exports[`14_dynamic should work with recorded events 2`] = `
"
`;
-exports[`14_dynamic should work with recorded events 3`] = `
+exports[`14_dynamic > should work with recorded events 3`] = `
"
@@ -24,7 +24,7 @@ exports[`14_dynamic should work with recorded events 3`] = `
"
`;
-exports[`14_dynamic should work with recorded events 4`] = `
+exports[`14_dynamic > should work with recorded events 4`] = `
"
@@ -32,7 +32,7 @@ exports[`14_dynamic should work with recorded events 4`] = `
"
`;
-exports[`14_dynamic should work with recorded events 5`] = `
+exports[`14_dynamic > should work with recorded events 5`] = `
"
@@ -40,7 +40,7 @@ exports[`14_dynamic should work with recorded events 5`] = `
"
`;
-exports[`14_dynamic should work with recorded events 6`] = `
+exports[`14_dynamic > should work with recorded events 6`] = `
"
@@ -48,7 +48,7 @@ exports[`14_dynamic should work with recorded events 6`] = `
"
`;
-exports[`14_dynamic should work with recorded events 7`] = `
+exports[`14_dynamic > should work with recorded events 7`] = `
"
@@ -56,7 +56,7 @@ exports[`14_dynamic should work with recorded events 7`] = `
"
`;
-exports[`14_dynamic should work with recorded events 8`] = `
+exports[`14_dynamic > should work with recorded events 8`] = `
"
@@ -64,7 +64,7 @@ exports[`14_dynamic should work with recorded events 8`] = `
"
`;
-exports[`14_dynamic should work with recorded events 9`] = `
+exports[`14_dynamic > should work with recorded events 9`] = `
"
@@ -72,7 +72,7 @@ exports[`14_dynamic should work with recorded events 9`] = `
"
`;
-exports[`14_dynamic should work with recorded events 10`] = `
+exports[`14_dynamic > should work with recorded events 10`] = `
"
@@ -80,7 +80,7 @@ exports[`14_dynamic should work with recorded events 10`] = `
"
`;
-exports[`14_dynamic should work with recorded events 11`] = `
+exports[`14_dynamic > should work with recorded events 11`] = `
"
@@ -88,7 +88,7 @@ exports[`14_dynamic should work with recorded events 11`] = `
"
`;
-exports[`14_dynamic should work with recorded events 12`] = `
+exports[`14_dynamic > should work with recorded events 12`] = `
"
diff --git a/tests/e2e/__snapshots__/15_reactmemoref.ts.snap b/tests/e2e/__snapshots__/15_reactmemoref.ts.snap
new file mode 100644
index 00000000..698f9458
--- /dev/null
+++ b/tests/e2e/__snapshots__/15_reactmemoref.ts.snap
@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`15_reactmemoref > should work with recorded events 1`] = `
+"
+
+
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 2`] = `
+"
+
+
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 3`] = `
+"
+
+
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 4`] = `
+"
+
+
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 5`] = `
+"
+
+
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 6`] = `
+"
+
+
+
+"
+`;
diff --git a/tests/vitest-setup.js b/tests/vitest-setup.js
new file mode 100644
index 00000000..bb02c60c
--- /dev/null
+++ b/tests/vitest-setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json
new file mode 100644
index 00000000..cfb5bb00
--- /dev/null
+++ b/tsconfig.cjs.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "module": "commonjs",
+ "verbatimModuleSyntax": false,
+ "declaration": true,
+ "outDir": "./dist/cjs"
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.esm.json b/tsconfig.esm.json
new file mode 100644
index 00000000..f9ef3ba3
--- /dev/null
+++ b/tsconfig.esm.json
@@ -0,0 +1,8 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "declaration": true,
+ "outDir": "./dist"
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 81747ffd..f53340da 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,20 +1,20 @@
{
"compilerOptions": {
"strict": true,
- "target": "esnext",
+ "target": "es2018",
"downlevelIteration": true,
"esModuleInterop": true,
- "module": "es2015",
- "moduleResolution": "node",
+ "module": "nodenext",
+ "skipLibCheck": true,
"allowJs": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
+ "verbatimModuleSyntax": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
- "jsx": "react",
+ "jsx": "react-jsx",
"baseUrl": ".",
"paths": {
- "react-tracked": ["./src"]
+ "react-tracked": ["./src/index.js"]
}
- }
+ },
+ "exclude": ["dist", "examples"]
}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..cd2345a1
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,65 @@
+/// {
]}
>
`,
- }, {
- type: node.type,
- lang: 'javascript',
- value: jscode,
- }, {
- type: 'jsx',
- value: `
+ },
+ {
+ type: node.type,
+ lang: 'javascript',
+ value: jscode,
+ },
+ {
+ type: 'jsx',
+ value: `
`,
- }, {
- type: node.type,
- lang: 'typescript',
- value: tscode,
- }, {
- type: 'jsx',
- value: `
+ },
+ {
+ type: node.type,
+ lang: 'typescript',
+ value: tscode,
+ },
+ {
+ type: 'jsx',
+ value: `
`,
- }];
+ },
+ ];
};
module.exports = () => {
diff --git a/website/docs/api.md b/website/docs/api.md
index 0c65cdb6..aab10242 100644
--- a/website/docs/api.md
+++ b/website/docs/api.md
@@ -52,7 +52,7 @@ type Options = {
stateContextName?: string;
updateContextName?: string;
concurrentMode?: boolean;
-}
+};
```
- `defaultState` and `defaultUpdate` are to specify context default values in case you want something without Provider.
@@ -83,11 +83,7 @@ Typically, it's close to the root component,
but it can be (sometimes desirably) lower in the component tree.
```javascript
-const App = (props) => (
-
- ...
-
-);
+const App = (props) => ... ;
```
### useTracked
diff --git a/website/docs/quick-start.md b/website/docs/quick-start.md
index 415a9652..eef5f9a1 100644
--- a/website/docs/quick-start.md
+++ b/website/docs/quick-start.md
@@ -166,10 +166,8 @@ const initialState = {
const useMyState = () => useState(initialState);
-export const {
- Provider: SharedStateProvider,
- useTracked: useSharedState,
-} = createContainer(useMyState);
+export const { Provider: SharedStateProvider, useTracked: useSharedState } =
+ createContainer(useMyState);
```
That's it. Check the running app and see it works as before.
diff --git a/website/docs/recipes.md b/website/docs/recipes.md
index 91bb0098..e5bf31d9 100644
--- a/website/docs/recipes.md
+++ b/website/docs/recipes.md
@@ -151,7 +151,8 @@ you can sync a container state with a state from props.
```javascript
const useValue = ({ propState }) => {
const [state, setState] = useState(propState);
- useEffect(() => { // or useLayoutEffect
+ useEffect(() => {
+ // or useLayoutEffect
setState(propState);
}, [propState]);
return [state, setState];
@@ -163,11 +164,7 @@ const {
// ...
} = createContainer(useValue);
-const App = ({ propState }) => (
-
- ...
-
-);
+const App = ({ propState }) => ... ;
```
Note that `propState` has to be updated immutably.
@@ -223,24 +220,25 @@ const useValue = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
const decrement = useCallback(() => setCount((c) => c - 1), []);
- const state = useMemo(() => ({
- count,
- increment,
- decrement,
- }), [count, increment, decrement]);
- return [state, () => { throw new Error('use functions in the state') }];
+ const state = useMemo(
+ () => ({
+ count,
+ increment,
+ decrement,
+ }),
+ [count, increment, decrement],
+ );
+ return [
+ state,
+ () => {
+ throw new Error('use functions in the state');
+ },
+ ];
};
-const {
- Provider,
- useTrackedState,
-} = createContainer(useValue);
+const { Provider, useTrackedState } = createContainer(useValue);
-const App = () => (
-
- ...
-
-);
+const App = () => ... ;
```
Note: With custom update functions, you don't get the benefit
@@ -257,7 +255,7 @@ Selector interface is useful to share selection logic.
You can create a selector hook with state usage tracking very easily.
```javascript
-const useSelectorWithTracking = selector => selector(useTrackedState());
+const useSelectorWithTracking = (selector) => selector(useTrackedState());
```
Note: This is different from `useSelector` which has no tracking support
@@ -271,12 +269,15 @@ Here's a custom hook to return a tuple `[value, setValue]` selected by a name.
```javascript
const useTrackedByName = (name) => {
const [state, setState] = useTracked();
- const update = useCallback((newVal) => {
- setState(oldVal => ({
- ...oldVal,
- [name]: typeof newVal === 'function' ? newVal(oldVal[name]) : newVal,
- }));
- }, [setState, name]);
+ const update = useCallback(
+ (newVal) => {
+ setState((oldVal) => ({
+ ...oldVal,
+ [name]: typeof newVal === 'function' ? newVal(oldVal[name]) : newVal,
+ }));
+ },
+ [setState, name],
+ );
return [state[name], update];
};
```
@@ -291,9 +292,12 @@ import produce from 'immer';
const useTrackedWithImmer = () => {
const [state, setState] = useTracked();
- const update = useCallback((updater) => {
- setState(oldVal => produce(oldVal, updater));
- }, [setState]);
+ const update = useCallback(
+ (updater) => {
+ setState((oldVal) => produce(oldVal, updater));
+ },
+ [setState],
+ );
return [state, update];
};
```
@@ -333,8 +337,11 @@ const untrackDeep = (obj) => {
const useSafeDispatch = () => {
const dispatch = useDispatch();
- return useCallback((action) => {
- dispatch(untrackDeep(action));
- }, [dispatch]);
+ return useCallback(
+ (action) => {
+ dispatch(untrackDeep(action));
+ },
+ [dispatch],
+ );
};
```
diff --git a/website/docs/tutorial-01.md b/website/docs/tutorial-01.md
index 678424ce..bdeec490 100644
--- a/website/docs/tutorial-01.md
+++ b/website/docs/tutorial-01.md
@@ -133,7 +133,7 @@ export const useFlasher = () => {
if (!ref.current) return;
ref.current.setAttribute(
'style',
- 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;'
+ 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;',
);
setTimeout(() => {
if (!ref.current) return;
diff --git a/website/docs/tutorial-02.md b/website/docs/tutorial-02.md
index 28c016ba..d6d0fba5 100644
--- a/website/docs/tutorial-02.md
+++ b/website/docs/tutorial-02.md
@@ -70,13 +70,15 @@ const reducer = (state: State, action: Action): State => {
case 'DELETE_TODO':
return {
...state,
- todos: state.todos.filter(todo => todo.id !== action.id),
+ todos: state.todos.filter((todo) => todo.id !== action.id),
};
case 'TOGGLE_TODO':
return {
...state,
- todos: state.todos.map(todo =>
- todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
+ todos: state.todos.map((todo) =>
+ todo.id === action.id
+ ? { ...todo, completed: !todo.completed }
+ : todo,
),
};
case 'SET_QUERY':
@@ -239,7 +241,7 @@ export const useFlasher = () => {
if (!ref.current) return;
ref.current.setAttribute(
'style',
- 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;'
+ 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;',
);
setTimeout(() => {
if (!ref.current) return;
diff --git a/website/docs/tutorial-03.md b/website/docs/tutorial-03.md
index 9a3b3dc4..7366af86 100644
--- a/website/docs/tutorial-03.md
+++ b/website/docs/tutorial-03.md
@@ -55,9 +55,11 @@ const initialState: State = {
const useValue = () => useState(initialState);
-const { Provider, useTrackedState, useUpdate: useSetState } = createContainer(
- useValue
-);
+const {
+ Provider,
+ useTrackedState,
+ useUpdate: useSetState,
+} = createContainer(useValue);
const useSetDraft = () => {
const setState = useSetState();
@@ -65,7 +67,7 @@ const useSetDraft = () => {
(draftUpdater: (draft: Draft) => void) => {
setState(produce(draftUpdater));
},
- [setState]
+ [setState],
);
};
@@ -101,12 +103,12 @@ let nextId = 100;
export const useAddTodo = () => {
const setDraft = useSetDraft();
return useCallback(
- title => {
- setDraft(draft => {
+ (title) => {
+ setDraft((draft) => {
draft.todos.push({ id: nextId++, title });
});
},
- [setDraft]
+ [setDraft],
);
};
```
@@ -124,12 +126,12 @@ export const useDeleteTodo = () => {
const setDraft = useSetDraft();
return useCallback(
(id: number) => {
- setDraft(draft => {
- const index = draft.todos.findIndex(todo => todo.id === id);
+ setDraft((draft) => {
+ const index = draft.todos.findIndex((todo) => todo.id === id);
if (index >= 0) draft.todos.splice(index, 1);
});
},
- [setDraft]
+ [setDraft],
);
};
```
@@ -147,12 +149,12 @@ export const useToggleTodo = () => {
const setDraft = useSetDraft();
return useCallback(
(id: number) => {
- setDraft(draft => {
- const todo = draft.todos.find(todo => todo.id === id);
+ setDraft((draft) => {
+ const todo = draft.todos.find((todo) => todo.id === id);
if (todo) todo.completed = !todo.completed;
});
},
- [setDraft]
+ [setDraft],
);
};
```
@@ -172,11 +174,11 @@ export const useQuery = () => {
const setDraft = useSetDraft();
const setQuery = useCallback(
(query: string) => {
- setDraft(draft => {
+ setDraft((draft) => {
draft.query = query;
});
},
- [setDraft]
+ [setDraft],
);
return { getQuery, setQuery };
};
@@ -328,7 +330,7 @@ export const useFlasher = () => {
if (ref.current) {
ref.current.setAttribute(
'style',
- 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;'
+ 'box-shadow: 0 0 2px 1px red; transition: box-shadow 100ms ease-out;',
);
}
const timeOutId = setTimeout(() => {
diff --git a/website/docs/tutorial-04.md b/website/docs/tutorial-04.md
index f9316ac0..8974e814 100644
--- a/website/docs/tutorial-04.md
+++ b/website/docs/tutorial-04.md
@@ -87,7 +87,7 @@ const reducer: Reducer = (state, action) => {
const { [action.id]: _removed, ...rest } = state.todoMap;
return {
...state,
- todoIds: state.todoIds.filter(id => id !== action.id),
+ todoIds: state.todoIds.filter((id) => id !== action.id),
todoMap: rest,
pending: false,
};
@@ -118,67 +118,73 @@ const asyncActionHandlers: AsyncActionHandlers<
Reducer,
AsyncAction
> = {
- CREATE_TODO: ({ dispatch }) => async action => {
- try {
- dispatch({ type: 'STARTED' });
- const response = await fetch(`https://reqres.in/api/todos?delay=1`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ title: action.title }),
- });
- const data = await response.json();
- if (typeof data.id !== 'string') throw new Error('no id');
- if (typeof data.title !== 'string') throw new Error('no title');
- dispatch({ type: 'TODO_CREATED', todo: data });
- } catch (error) {
- dispatch({ type: 'FAILED', error });
- }
- },
- TOGGLE_TODO: ({ dispatch, getState }) => async action => {
- try {
- dispatch({ type: 'STARTED' });
- const todo = getState().todoMap[action.id];
- const body = {
- ...todo,
- completed: !todo.completed,
- };
- const response = await fetch(
- `https://reqres.in/api/todos/${action.id}?delay=1`,
- {
- method: 'PUT',
+ CREATE_TODO:
+ ({ dispatch }) =>
+ async (action) => {
+ try {
+ dispatch({ type: 'STARTED' });
+ const response = await fetch(`https://reqres.in/api/todos?delay=1`, {
+ method: 'POST',
headers: {
'Content-Type': 'application/json',
},
- body: JSON.stringify(body),
- }
- );
- const data = await response.json();
- if (typeof data.title !== 'string') throw new Error('no title');
- dispatch({ type: 'TODO_UPDATED', todo: { ...data, id: action.id } });
- } catch (error) {
- dispatch({ type: 'FAILED', error });
- }
- },
- DELETE_TODO: ({ dispatch } )=> async action => {
- try {
- dispatch({ type: 'STARTED' });
- await fetch(`https://reqres.in/api/todos/${action.id}?delay=1`, {
- method: 'DELETE',
- });
- dispatch({ type: 'TODO_DELETED', id: action.id });
- } catch (error) {
- dispatch({ type: 'FAILED', error });
- }
- },
+ body: JSON.stringify({ title: action.title }),
+ });
+ const data = await response.json();
+ if (typeof data.id !== 'string') throw new Error('no id');
+ if (typeof data.title !== 'string') throw new Error('no title');
+ dispatch({ type: 'TODO_CREATED', todo: data });
+ } catch (error) {
+ dispatch({ type: 'FAILED', error });
+ }
+ },
+ TOGGLE_TODO:
+ ({ dispatch, getState }) =>
+ async (action) => {
+ try {
+ dispatch({ type: 'STARTED' });
+ const todo = getState().todoMap[action.id];
+ const body = {
+ ...todo,
+ completed: !todo.completed,
+ };
+ const response = await fetch(
+ `https://reqres.in/api/todos/${action.id}?delay=1`,
+ {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ },
+ );
+ const data = await response.json();
+ if (typeof data.title !== 'string') throw new Error('no title');
+ dispatch({ type: 'TODO_UPDATED', todo: { ...data, id: action.id } });
+ } catch (error) {
+ dispatch({ type: 'FAILED', error });
+ }
+ },
+ DELETE_TODO:
+ ({ dispatch }) =>
+ async (action) => {
+ try {
+ dispatch({ type: 'STARTED' });
+ await fetch(`https://reqres.in/api/todos/${action.id}?delay=1`, {
+ method: 'DELETE',
+ });
+ dispatch({ type: 'TODO_DELETED', id: action.id });
+ } catch (error) {
+ dispatch({ type: 'FAILED', error });
+ }
+ },
};
const useValue = () =>
useReducerAsync, AsyncAction>(
reducer,
initialState,
- asyncActionHandlers
+ asyncActionHandlers,
);
export const {
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 182de343..4d04b2f5 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -2,16 +2,15 @@
module.exports = {
title: 'React Tracked',
- tagline: 'State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.',
+ tagline:
+ 'State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.',
organizationName: 'dai-shi',
projectName: 'react-tracked',
baseUrl: '/',
url: 'https://react-tracked.js.org',
favicon: 'img/favicon.ico',
trailingSlash: true,
- themes: [
- '@docusaurus/theme-live-codeblock',
- ],
+ themes: ['@docusaurus/theme-live-codeblock'],
plugins: [],
presets: [
[
diff --git a/website/sidebars.js b/website/sidebars.js
index 545a366a..9b4ada09 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -1,27 +1,14 @@
module.exports = {
docs: {
- 'Getting Started': [
- 'introduction',
- 'quick-start',
- 'comparison',
- ],
+ 'Getting Started': ['introduction', 'quick-start', 'comparison'],
'Tutorial with createContainer': [
'tutorial-01',
'tutorial-02',
'tutorial-03',
'tutorial-04',
],
- 'Tutorial with react-redux': [
- 'tutorial-redux-01',
- ],
- 'Tutorial with zustand': [
- 'tutorial-zustand-01',
- ],
- Reference: [
- 'api',
- 'recipes',
- 'debugging',
- 'caveats',
- ],
+ 'Tutorial with react-redux': ['tutorial-redux-01'],
+ 'Tutorial with zustand': ['tutorial-zustand-01'],
+ Reference: ['api', 'recipes', 'debugging', 'caveats'],
},
};
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 00c331ab..fff48ecd 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -11,15 +11,13 @@ const Home = () => {
const { siteConfig = {} } = useDocusaurusContext();
return (
-
-
Counter
numRendered: 26
Count: 1
numRendered: 28
Count: 1
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 34
Count: 2
numRendered: 36
Count: 2
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 42
Count: 3
numRendered: 44
Count: 3
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 50
Count: 2
numRendered: 52
Count: 2
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 58
Count: 1
numRendered: 60
Count: 1
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 66
Count: 0
numRendered: 68
Count: 0
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 74
Count: -1
numRendered: 76
Count: -1
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 82
Count: -2
numRendered: 84
Count: -2
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 90
Count: -3
numRendered: 92
Count: -3
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 98
Count: -2
numRendered: 100
Count: -2
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 106
Count: -1
numRendered: 108
Count: -1
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 114
Count: 0
numRendered: 116
Count: 0
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 114
Count: 0
numRendered: 116
Count: 0
TextBox
numRendered: 6
Text: hello
numRendered: 8
Text: hello
Counter
numRendered: 114
Count: 0
numRendered: 116
Count: 0
TextBox
numRendered: 126
Text: hello1
numRendered: 128
Text: hello1
Counter
numRendered: 114
Count: 0
numRendered: 116
Count: 0
TextBox
numRendered: 134
Text: hello12
numRendered: 136
Text: hello12
Counter
numRendered: 114
Count: 0
numRendered: 116
Count: 0
TextBox
numRendered: 142
Text: hello123
numRendered: 144
Text: hello123
Counter
numRendered: 18
Count: 1
numRendered: 20
Count: 1
Person
numRendered: 2
numRendered: 36
Count: 1
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 40
Count: 1
First Name:
Last Name:
Age:
Counter
numRendered: 26
Count: 2
numRendered: 28
Count: 2
Person
numRendered: 2
numRendered: 52
Count: 2
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 56
Count: 2
First Name:
Last Name:
Age:
Counter
numRendered: 34
Count: 1
numRendered: 36
Count: 1
Person
numRendered: 2
numRendered: 68
Count: 1
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 72
Count: 1
First Name:
Last Name:
Age:
Counter
numRendered: 42
Count: 0
numRendered: 44
Count: 0
Person
numRendered: 2
numRendered: 84
Count: 0
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 88
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 1
numRendered: 52
Count: 1
Person
numRendered: 2
numRendered: 100
Count: 1
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 104
Count: 1
First Name:
Last Name:
Age:
Counter
numRendered: 58
Count: 2
numRendered: 60
Count: 2
Person
numRendered: 2
numRendered: 116
Count: 2
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 120
Count: 2
First Name:
Last Name:
Age:
Counter
numRendered: 66
Count: 1
numRendered: 68
Count: 1
Person
numRendered: 2
numRendered: 132
Count: 1
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 136
Count: 1
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 2
numRendered: 148
Count: 0
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 152
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 2
numRendered: 148
Count: 0
First Name:
Last Name:
Age:
numRendered: 6
numRendered: 152
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 162
numRendered: 164a
Count: 0
First Name:
Last Name:
Age:
numRendered: 166
numRendered: 168a
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 178
numRendered: 180ab
Count: 0
First Name:
Last Name:
Age:
numRendered: 182
numRendered: 184ab
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 194
numRendered: 196abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 198
numRendered: 200abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 210
numRendered: 212abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 214
numRendered: 216abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 226
numRendered: 228abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 230
numRendered: 232abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 242
numRendered: 244abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 246
numRendered: 248abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 258
numRendered: 260abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 262
numRendered: 264abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 274
numRendered: 276abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 278
numRendered: 280abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 74
Count: 0
numRendered: 76
Count: 0
Person
numRendered: 290
numRendered: 292abc
Count: 0
First Name:
Last Name:
Age:
numRendered: 294
numRendered: 296abc
Count: 0
First Name:
Last Name:
Age:
Counter
numRendered: 18
Count: 1
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 26
Count: 2
numRendered: 28
Count: 2
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 34
Count: 3
numRendered: 36
Count: 3
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 42
Count: 4
numRendered: 44
Count: 4
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 58
First Name:
Last Name:
Age:
numRendered: 60
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 66
First Name:
Last Name:
Age:
numRendered: 68
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 74
First Name:
Last Name:
Age:
numRendered: 76
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 82
First Name:
Last Name:
Age:
numRendered: 84
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 90
First Name:
Last Name:
Age:
numRendered: 92
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 98
First Name:
Last Name:
Age:
numRendered: 100
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 106
First Name:
Last Name:
Age:
numRendered: 108
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 114
First Name:
Last Name:
Age:
numRendered: 116
First Name:
Last Name:
Age:
Counter
numRendered: 50
Count: 5
numRendered: 52
Count: 5
Person
numRendered: 122
First Name:
Last Name:
Age:
numRendered: 124
First Name:
Last Name:
Age:
Counter
numRendered: 14
Count: 1
numRendered: 16
Count: 1
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 22
Count: 0
numRendered: 24
Count: 0
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 30
Count: 1
numRendered: 32
Count: 1
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 2
First Name:
Last Name:
Age:
numRendered: 4
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 46
First Name:
Last Name:
Age:
numRendered: 48
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 54
First Name:
Last Name:
Age:
numRendered: 56
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 62
First Name:
Last Name:
Age:
numRendered: 64
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 70
First Name:
Last Name:
Age:
numRendered: 72
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 78
First Name:
Last Name:
Age:
numRendered: 80
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 86
First Name:
Last Name:
Age:
numRendered: 88
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 94
First Name:
Last Name:
Age:
numRendered: 96
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 102
First Name:
Last Name:
Age:
numRendered: 104
First Name:
Last Name:
Age:
Counter
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Person
numRendered: 110
First Name:
Last Name:
Age:
numRendered: 112
First Name:
Last Name:
Age:
First container
numRendered: 30
Count: 1
numRendered: 32
Count: 1
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 38
Count: 0
numRendered: 40
Count: 0
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 46
Count: -1
numRendered: 48
Count: -1
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 54
Count: 0
numRendered: 56
Count: 0
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 62
Count: 1
numRendered: 64
Count: 1
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 70
Count: 2
numRendered: 72
Count: 2
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 78
Count: 1
numRendered: 80
Count: 1
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 86
Count: 0
numRendered: 88
Count: 0
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 94
Count: -1
numRendered: 96
Count: -1
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 6
Count: 0
numRendered: 8
Count: 0
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 110
Count: 1
numRendered: 112
Count: 1
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 118
Count: 0
numRendered: 120
Count: 0
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 126
Count: -1
numRendered: 128
Count: -1
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 134
Count: 0
numRendered: 136
Count: 0
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 142
Count: 1
numRendered: 144
Count: 1
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 150
Count: 2
numRendered: 152
Count: 2
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 158
Count: 1
numRendered: 160
Count: 1
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 166
Count: 0
numRendered: 168
Count: 0
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 174
Count: -1
numRendered: 176
Count: -1
First container
numRendered: 102
Count: -2
numRendered: 104
Count: -2
Second container
numRendered: 182
Count: -2
numRendered: 184
Count: -2
Count: 1
Count: 1
Count: 2
Count: 2
Count: 1
Count: 1
Count: 0
Count: 0
Count: 1
Count: 1
Count: 2
Count: 2
Count: 1
Count: 1
Count: 0
Count: 0
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Show:
Naive Context
First Name:(renders:1)
Family Name:(renders:1)
Split Context
First Name:(renders:1)
Family Name:(renders:1)
Context with React.memo
First Name:(renders:1)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:3)
Family Name:(renders:3)
Split Context
First Name:(renders:1)
Family Name:(renders:1)
Context with React.memo
First Name:(renders:1)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:1)
Family Name:(renders:1)
Context with React.memo
First Name:(renders:1)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:1)
Context with React.memo
First Name:(renders:1)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:1)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:1)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:3)
Context with useMemo
First Name:(renders:2)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:3)
Context with useMemo
First Name:(renders:4)
Family Name:(renders:2)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:3)
Context with useMemo
First Name:(renders:4)
Family Name:(renders:4)
react-tracked
First Name:(renders:1)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:3)
Context with useMemo
First Name:(renders:4)
Family Name:(renders:4)
react-tracked
First Name:(renders:3)
Family Name:(renders:1)
Naive Context
First Name:(renders:4)
Family Name:(renders:4)
Split Context
First Name:(renders:3)
Family Name:(renders:3)
Context with React.memo
First Name:(renders:3)
Family Name:(renders:3)
Context with useMemo
First Name:(renders:4)
Family Name:(renders:4)
react-tracked
First Name:(renders:3)
Family Name:(renders:3)
Person
User ID:
connecting...Counter
Count: 0Person
User ID:
First Name: Emma
Counter
Count: 0Person
User ID:
First Name: Emma
Counter
Count: 1Person
User ID:
First Name: Emma
Counter
Count: 1Person
User ID:
First Name: Emma
Counter
Count: 0Person
User ID:
connecting...Counter
Count: 0Person
User ID:
First Name: Emma
Counter
Count: 0Person
User ID:
First Name: Emma
Counter
Count: 1Person
User ID:
First Name: Emma
Counter
Count: 1Person
User ID:
First Name: Emma
Counter
Count: 0Counter
numRendered: 18
Count: 1
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 18
Count: 1
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 22
Count: 0
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 20
Count: 1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 2
First Name:
Age:
numRendered: 4
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 34
First Name:
Age:
numRendered: 36
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 38
Last Name:
Age:
numRendered: 36
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 38
Last Name:
Age:
numRendered: 36
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 44
Last Name:
Age:
numRendered: 36
First Name:
Age:
Counter
numRendered: 28
Count: -1
numRendered: 33
Count: -1
Person
numRendered: 44
Last Name:
Age:
numRendered: 49
Last Name:
Age:
+
![React Tracked Logo]()
{
/>
{siteConfig.title}
{siteConfig.tagline}
-
-
- Getting Started
-
+ Getting Started