diff --git a/package.json b/package.json
index 6e792515..ddcb91ba 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "test:e2e": "run-s e2e:*",
     "e2e:01_counter": "server-test examples:01_counter http://localhost:8080 'vitest run --project=e2e 01_counter'",
     "e2e:02_person": "server-test examples:02_person http://localhost:8080 'vitest run --project=e2e 02_person'",
-    "e2e:03_setstate": "server-test examples:03_setstate http://localhost:8080 'vitest run --project=e2e 03_setstate'",
+    "e2e:03_usestate": "server-test examples:03_usestate http://localhost:8080 'vitest run --project=e2e 03_usestate'",
     "e2e:04_selector": "server-test examples:04_selector http://localhost:8080 'vitest run --project=e2e 04_selector'",
     "e2e:05_container": "server-test examples:05_container http://localhost:8080 'vitest run --project=e2e 05_container'",
     "e2e:06_customhook": "server-test examples:06_customhook http://localhost:8080 'vitest run --project=e2e 06_customhook'",
diff --git a/tests/e2e/__snapshots__/01_counter.ts.snap b/tests/e2e/__snapshots__/01_counter.ts.snap
new file mode 100644
index 00000000..ae585683
--- /dev/null
+++ b/tests/e2e/__snapshots__/01_counter.ts.snap
@@ -0,0 +1,129 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`01_minimal > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 26<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 28<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 34<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 36<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 42<div><span>Count: 3</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 44<div><span>Count: 3</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 52<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 58<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 60<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 66<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 68<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 82<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 84<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 90<div><span>Count: -3</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 92<div><span>Count: -3</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 98<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 100<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 106<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 108<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 114<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 116<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 13`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 114<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 116<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 6<div><span>Text: hello</span><input value="hello"></div></div><div>numRendered: 8<div><span>Text: hello</span><input value="hello"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 14`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 114<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 116<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 126<div><span>Text: hello1</span><input value="hello1"></div></div><div>numRendered: 128<div><span>Text: hello1</span><input value="hello1"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 15`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 114<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 116<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 134<div><span>Text: hello12</span><input value="hello12"></div></div><div>numRendered: 136<div><span>Text: hello12</span><input value="hello12"></div></div></div>
+  
+
+"
+`;
+
+exports[`01_minimal > should work with recorded events 16`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 114<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 116<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>TextBox</h1><div>numRendered: 142<div><span>Text: hello123</span><input value="hello123"></div></div><div>numRendered: 144<div><span>Text: hello123</span><input value="hello123"></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/02_person.ts.snap b/tests/e2e/__snapshots__/02_person.ts.snap
new file mode 100644
index 00000000..e11f07a1
--- /dev/null
+++ b/tests/e2e/__snapshots__/02_person.ts.snap
@@ -0,0 +1,145 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`02_typescript > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 18<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 36<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 40<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 26<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 28<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 52<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 56<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 34<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 36<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 68<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 72<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 42<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 44<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 84<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 88<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 52<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 100<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 104<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 58<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 60<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 116<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 120<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 66<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 68<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 132<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 136<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 148<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 152<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>numRendered: 148<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 6<div>numRendered: 152<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 162<div>numRendered: 164a<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 166<div>numRendered: 168a<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 178<div>numRendered: 180ab<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="ab"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 182<div>numRendered: 184ab<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="ab"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 194<div>numRendered: 196abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 198<div>numRendered: 200abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 13`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 210<div>numRendered: 212abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="d"></div><div>Age:<input value="0"></div></div><div>numRendered: 214<div>numRendered: 216abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="d"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 14`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 226<div>numRendered: 228abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="de"></div><div>Age:<input value="0"></div></div><div>numRendered: 230<div>numRendered: 232abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="de"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 15`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 242<div>numRendered: 244abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="0"></div></div><div>numRendered: 246<div>numRendered: 248abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 16`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 258<div>numRendered: 260abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="1"></div></div><div>numRendered: 262<div>numRendered: 264abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="1"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 17`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 274<div>numRendered: 276abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="12"></div></div><div>numRendered: 278<div>numRendered: 280abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="12"></div></div></div>
+  
+
+"
+`;
+
+exports[`02_typescript > should work with recorded events 18`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 74<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 76<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 290<div>numRendered: 292abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="123"></div></div><div>numRendered: 294<div>numRendered: 296abc<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>First Name:<input value="abc"></div><div>Last Name:<input value="def"></div><div>Age:<input value="123"></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/03_usestate.ts.snap b/tests/e2e/__snapshots__/03_usestate.ts.snap
new file mode 100644
index 00000000..26fe44bb
--- /dev/null
+++ b/tests/e2e/__snapshots__/03_usestate.ts.snap
@@ -0,0 +1,121 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`03_usestate > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 18<div><span>Count: 1</span><button type="button">+1</button></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 26<div><span>Count: 2</span><button type="button">+1</button></div></div><div>numRendered: 28<div><span>Count: 2</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 34<div><span>Count: 3</span><button type="button">+1</button></div></div><div>numRendered: 36<div><span>Count: 3</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 42<div><span>Count: 4</span><button type="button">+1</button></div></div><div>numRendered: 44<div><span>Count: 4</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 58<div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 60<div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 66<div>First Name:<input value="aa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 68<div>First Name:<input value="aa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 74<div>First Name:<input value="aaa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 76<div>First Name:<input value="aaa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 82<div>First Name:<input value="aaa"></div><div>Last Name:<input value="b"></div><div>Age:<input value="0"></div></div><div>numRendered: 84<div>First Name:<input value="aaa"></div><div>Last Name:<input value="b"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 90<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bb"></div><div>Age:<input value="0"></div></div><div>numRendered: 92<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bb"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 98<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="0"></div></div><div>numRendered: 100<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 13`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 106<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="1"></div></div><div>numRendered: 108<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="1"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 14`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 114<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="11"></div></div><div>numRendered: 116<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="11"></div></div></div>
+  
+
+"
+`;
+
+exports[`03_usestate > should work with recorded events 15`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 50<div><span>Count: 5</span><button type="button">+1</button></div></div><div>numRendered: 52<div><span>Count: 5</span><button type="button">+1</button></div></div><h1>Person</h1><div>numRendered: 122<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="111"></div></div><div>numRendered: 124<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="111"></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/04_selector.ts.snap b/tests/e2e/__snapshots__/04_selector.ts.snap
new file mode 100644
index 00000000..e49ec5d9
--- /dev/null
+++ b/tests/e2e/__snapshots__/04_selector.ts.snap
@@ -0,0 +1,113 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`04_selector > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 14<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 16<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 22<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 24<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 30<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 32<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 46<div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 48<div>First Name:<input value="a"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 54<div>First Name:<input value="aa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 56<div>First Name:<input value="aa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 62<div>First Name:<input value="aaa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div><div>numRendered: 64<div>First Name:<input value="aaa"></div><div>Last Name:<input value=""></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 70<div>First Name:<input value="aaa"></div><div>Last Name:<input value="b"></div><div>Age:<input value="0"></div></div><div>numRendered: 72<div>First Name:<input value="aaa"></div><div>Last Name:<input value="b"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 78<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bb"></div><div>Age:<input value="0"></div></div><div>numRendered: 80<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bb"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 86<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="0"></div></div><div>numRendered: 88<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 94<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="1"></div></div><div>numRendered: 96<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="1"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 13`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 102<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="11"></div></div><div>numRendered: 104<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="11"></div></div></div>
+  
+
+"
+`;
+
+exports[`04_selector > should work with recorded events 14`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Person</h1><div>numRendered: 110<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="111"></div></div><div>numRendered: 112<div>First Name:<input value="aaa"></div><div>Last Name:<input value="bbb"></div><div>Age:<input value="111"></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/05_container.ts.snap b/tests/e2e/__snapshots__/05_container.ts.snap
new file mode 100644
index 00000000..0b378b78
--- /dev/null
+++ b/tests/e2e/__snapshots__/05_container.ts.snap
@@ -0,0 +1,161 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`05_container > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 30<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 32<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 38<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 40<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 46<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 48<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 54<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 56<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 62<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 64<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 70<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 72<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 78<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 80<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 86<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 88<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 94<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 96<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 6<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 8<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 110<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 112<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 118<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 120<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 13`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 126<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 128<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 14`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 134<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 136<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 15`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 142<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 144<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 16`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 150<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 152<div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 17`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 158<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 160<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 18`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 166<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 168<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 19`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 174<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 176<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
+
+exports[`05_container > should work with recorded events 20`] = `
+"
+    <div id="app"><h1>First container</h1><div>numRendered: 102<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 104<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><h1>Second container</h1><div>numRendered: 182<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div><div>numRendered: 184<div><span>Count: -2</span><button type="button">+1</button><button type="button">-1</button></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/06_customhook.ts.snap b/tests/e2e/__snapshots__/06_customhook.ts.snap
new file mode 100644
index 00000000..cf2a213f
--- /dev/null
+++ b/tests/e2e/__snapshots__/06_customhook.ts.snap
@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`06_customhook > should work with recorded events 1`] = `
+"
+    <div id="app"><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 2`] = `
+"
+    <div id="app"><div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 3`] = `
+"
+    <div id="app"><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 4`] = `
+"
+    <div id="app"><div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 5`] = `
+"
+    <div id="app"><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 6`] = `
+"
+    <div id="app"><div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 2</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 7`] = `
+"
+    <div id="app"><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
+
+exports[`06_customhook > should work with recorded events 8`] = `
+"
+    <div id="app"><div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div><div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/07_todolist.ts.snap b/tests/e2e/__snapshots__/07_todolist.ts.snap
new file mode 100644
index 00000000..2f3f81fa
--- /dev/null
+++ b/tests/e2e/__snapshots__/07_todolist.ts.snap
@@ -0,0 +1,225 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`07_todolist > should work with recorded events 1`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 2`] = `
+"
+    <div id="app"><div><div><form><input value="a"><button type="submit">Add Todo</button></form></div><ul></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 3`] = `
+"
+    <div id="app"><div><div><form><input value="aa"><button type="submit">Add Todo</button></form></div><ul></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 4`] = `
+"
+    <div id="app"><div><div><form><input value="aaa"><button type="submit">Add Todo</button></form></div><ul></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 5`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 6`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 7`] = `
+"
+    <div id="app"><div><div><form><input value="b"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 8`] = `
+"
+    <div id="app"><div><div><form><input value="bb"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 9`] = `
+"
+    <div id="app"><div><div><form><input value="bbb"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 10`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 11`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 12`] = `
+"
+    <div id="app"><div><div><form><input value="c"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 13`] = `
+"
+    <div id="app"><div><div><form><input value="cc"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 14`] = `
+"
+    <div id="app"><div><div><form><input value="ccc"><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 15`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" disabled="" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 16`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;" disabled="">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 17`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;" disabled="">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 18`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;" disabled="">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 19`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;" disabled="">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 20`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;" disabled="">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 21`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: line-through; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;" disabled="">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 22`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: none; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;" disabled="">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 23`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;" disabled="">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 24`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;" disabled="">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 25`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: line-through; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;" disabled="">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 26`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: line-through; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;" disabled="">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 27`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li><li role="presentation" style="text-decoration: line-through; cursor: pointer;">ccc</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;" disabled="">All</button><button type="button" style="margin-left: 4px;">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
+
+exports[`07_todolist > should work with recorded events 28`] = `
+"
+    <div id="app"><div><div><form><input value=""><button type="submit">Add Todo</button></form></div><ul><li role="presentation" style="text-decoration: none; cursor: pointer;">aaa</li><li role="presentation" style="text-decoration: none; cursor: pointer;">bbb</li></ul><div><span>Show: </span><button type="button" style="margin-left: 4px;">All</button><button type="button" style="margin-left: 4px;" disabled="">Active</button><button type="button" style="margin-left: 4px;">Completed</button></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/08_comparison.ts.snap b/tests/e2e/__snapshots__/08_comparison.ts.snap
new file mode 100644
index 00000000..ccb3f1c4
--- /dev/null
+++ b/tests/e2e/__snapshots__/08_comparison.ts.snap
@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`08_comparison > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Split Context</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter">(renders:3)</div><h1>Split Context</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter">(renders:1)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry">(renders:2)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter">(renders:2)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>react-tracked</h1><div>First Name:<input value="Harry">(renders:1)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>react-tracked</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter">(renders:1)</div></div>
+  
+
+"
+`;
+
+exports[`08_comparison > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Naive Context</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>Split Context</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with React.memo</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div><h1>Context with useMemo</h1><div>First Name:<input value="Harry1">(renders:4)</div><div>Family Name:<input value="Potter1">(renders:4)</div><h1>react-tracked</h1><div>First Name:<input value="Harry1">(renders:3)</div><div>Family Name:<input value="Potter1">(renders:3)</div></div>
+  
+
+"
+`;
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`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 4<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 6<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 2`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 6<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 3`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 4`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 5`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 16<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`09_reactmemo > should work with recorded events 6`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 16<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 18<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/10_untracked.ts.snap b/tests/e2e/__snapshots__/10_untracked.ts.snap
new file mode 100644
index 00000000..0e5073aa
--- /dev/null
+++ b/tests/e2e/__snapshots__/10_untracked.ts.snap
@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`10_untracked > should work with recorded events 1`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 2`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 3`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 4`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket3"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 5`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket3"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 6`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket3"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 7`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket3"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 8`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Buy ticket3"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox" checked=""><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 9`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox" checked=""><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 10`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox"><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox" checked=""><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
+
+exports[`10_untracked > should work with recorded events 11`] = `
+"
+    <div id="app"><ul><li><input type="checkbox" checked=""><input value="Wash dishes"><button type="button">Delete</button><button type="button">Duplicate</button></li><li><input type="checkbox" checked=""><input value="Study JS2"><button type="button">Delete</button><button type="button">Duplicate</button></li></ul></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/11_form.ts.snap b/tests/e2e/__snapshots__/11_form.ts.snap
new file mode 100644
index 00000000..aabe61b9
--- /dev/null
+++ b/tests/e2e/__snapshots__/11_form.ts.snap
@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`11_form > should work with recorded events 1`] = `
+"
+    <div id="app"><form>numRendered: 42<button type="submit" disabled="">Submit</button><h3>First Name</h3><div>numRendered: 44<div>First Name:<input value="">name is required</div></div><h3>Family Name</h3><div>numRendered: 46<div>Family Name:<input value="">name is required</div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 2`] = `
+"
+    <div id="app"><form>numRendered: 62<button type="submit" disabled="">Submit</button><h3>First Name</h3><div>numRendered: 64<div>First Name:<input value="1"></div></div><h3>Family Name</h3><div>numRendered: 46<div>Family Name:<input value="">name is required</div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 3`] = `
+"
+    <div id="app"><form>numRendered: 82<button type="submit" disabled="">Submit</button><h3>First Name</h3><div>numRendered: 84<div>First Name:<input value="11"></div></div><h3>Family Name</h3><div>numRendered: 46<div>Family Name:<input value="">name is required</div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 4`] = `
+"
+    <div id="app"><form>numRendered: 102<button type="submit" disabled="">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 46<div>Family Name:<input value="">name is required</div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 5`] = `
+"
+    <div id="app"><form>numRendered: 122<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 126<div>Family Name:<input value="2"></div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 6`] = `
+"
+    <div id="app"><form>numRendered: 142<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 146<div>Family Name:<input value="22"></div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 7`] = `
+"
+    <div id="app"><form>numRendered: 162<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 166<div>Family Name:<input value="222"></div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 8`] = `
+"
+    <div id="app"><form>numRendered: 162<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 166<div>Family Name:<input value="222"></div></div><h3>Gender</h3><div>numRendered: 38<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 9`] = `
+"
+    <div id="app"><form>numRendered: 182<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 166<div>Family Name:<input value="222"></div></div><h3>Gender</h3><div>numRendered: 188<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 40<div>Teenager:<input type="checkbox" value="false"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 10`] = `
+"
+    <div id="app"><form>numRendered: 202<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 166<div>Family Name:<input value="222"></div></div><h3>Gender</h3><div>numRendered: 188<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 210<div>Teenager:<input type="checkbox" value="true"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
+
+exports[`11_form > should work with recorded events 11`] = `
+"
+    <div id="app"><form>numRendered: 202<button type="submit">Submit</button><h3>First Name</h3><div>numRendered: 104<div>First Name:<input value="111"></div></div><h3>Family Name</h3><div>numRendered: 166<div>Family Name:<input value="222"></div></div><h3>Gender</h3><div>numRendered: 188<div>Gender:<select><option value="na">N/A</option><option value="male">Male</option><option value="female">Female</option></select></div></div><h3>Teenager</h3><div>numRendered: 210<div>Teenager:<input type="checkbox" value="true"></div></div></form><div><a href="https://codesandbox.io/s/react-form-library-stress-test-4luf3">Stress Test</a></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/12_async.ts.snap b/tests/e2e/__snapshots__/12_async.ts.snap
new file mode 100644
index 00000000..12b47e1a
--- /dev/null
+++ b/tests/e2e/__snapshots__/12_async.ts.snap
@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`12_async > should work with recorded events 1`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><span>connecting...</span><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`12_async > should work with recorded events 2`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`12_async > should work with recorded events 3`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 1<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`12_async > should work with recorded events 4`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 1<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`12_async > should work with recorded events 5`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/13_saga.ts.snap b/tests/e2e/__snapshots__/13_saga.ts.snap
new file mode 100644
index 00000000..50f62cc9
--- /dev/null
+++ b/tests/e2e/__snapshots__/13_saga.ts.snap
@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`13_saga > should work with recorded events 1`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><span>connecting...</span><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`13_saga > should work with recorded events 2`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`13_saga > should work with recorded events 3`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 1<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`13_saga > should work with recorded events 4`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 1<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
+
+exports[`13_saga > should work with recorded events 5`] = `
+"
+    <div id="app"><div><h1>Person</h1><div>User ID:<input value="3"></div><div>First Name: Emma<button type="button">Fetch User</button><button type="button">Clear</button></div><div><h1>Counter</h1>Count: 0<button type="button">+1</button><button type="button">-1 (Delayed)</button></div></div></div>
+  
+
+"
+`;
diff --git a/tests/e2e/__snapshots__/14_dynamic.ts.snap b/tests/e2e/__snapshots__/14_dynamic.ts.snap
new file mode 100644
index 00000000..8473ae3e
--- /dev/null
+++ b/tests/e2e/__snapshots__/14_dynamic.ts.snap
@@ -0,0 +1,97 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`14_dynamic > should work with recorded events 1`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 18<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 2`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 18<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 3`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 22<div><span>Count: 0</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 4`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 5`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 20<div><span>Count: 1</span><button type="button">+1</button><button type="button">-1</button><input value="0"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 6`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 7`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 2<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 4<div>First Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 8`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 34<div>First Name:<input value="a"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 36<div>First Name:<input value="a"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 9`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 38<div>Last Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 36<div>First Name:<input value="a"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 10`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 38<div>Last Name:<input value=""><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 36<div>First Name:<input value="a"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 11`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 44<div>Last Name:<input value="b"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 36<div>First Name:<input value="a"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
+
+exports[`14_dynamic > should work with recorded events 12`] = `
+"
+    <div id="app"><h1>Counter</h1><div>numRendered: 28<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><div>numRendered: 33<div><span>Count: -1</span><button type="button">+1</button><button type="button">-1</button><input value="1"></div></div><h1>Person</h1><div>numRendered: 44<div>Last Name:<input value="b"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div><div>numRendered: 49<div>Last Name:<input value="b"><button type="button">toggle</button></div><div>Age:<input value="0"></div></div></div>
+  
+
+"
+`;
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`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 4<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 6<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 2`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 6<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 3`] = `
+"
+    <div id="app"><ul><li>numRendered: 8<input type="checkbox"><span style="text-decoration: line-through;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 4`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 10<input type="checkbox"><span style="text-decoration: line-through;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 5`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 16<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 12<input type="checkbox"><span style="text-decoration: line-through;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;
+
+exports[`15_reactmemoref > should work with recorded events 6`] = `
+"
+    <div id="app"><ul><li>numRendered: 14<input type="checkbox"><span style="text-decoration: none;">Wash dishes</span></li><li>numRendered: 16<input type="checkbox"><span style="text-decoration: none;">Study JS</span></li><li>numRendered: 18<input type="checkbox"><span style="text-decoration: none;">Buy ticket</span></li></ul></div>
+  
+
+"
+`;