feat: fix insert error

examples/todo.html

@@ -255,7 +255,27 @@ <h1>todos</h1>
         app.$mount('.todoapp')
 
     </script>
-    <script type="module" src="web-replay.js"></script>
+
+    <script type="module">
+        import { record, DB } from './web-replay.js'
+        DB.then(db => {
+            db.clear()
+            const ctr = record({
+                emitter: data => {
+                    db.add(data)
+                }
+            })
+
+            const replayButton = document.getElementById('replay')
+            if (replayButton) {
+                replayButton.onclick = () => {
+                    ctr.uninstall()
+                    window.open('/replay.html')
+                }
+            }
+        })
+
+    </script>
 </body>
 
 </html>

packages/player/src/container.ts

@@ -42,6 +42,7 @@ export class Container {
         const element = parser.parseFromString(HTML, 'text/html').body.firstChild as HTMLElement
         element.style.width = this.width + 'px'
         element.style.height = this.height + 'px'
+        element.style.margin = '0 auto'
         return (this.container = element)
     }
 

packages/player/src/dom.ts

@@ -14,6 +14,7 @@ import {
 } from '@WebReplay/snapshot'
 import { Player } from './player'
 import { nodeStore } from '@WebReplay/utils'
+import { convertVNode } from '@WebReplay/virtual-dom';
 
 export function execFrame(this: Player, snapshot: SnapshotData) {
     const { type, data } = snapshot
@@ -30,7 +31,7 @@ export function execFrame(this: Player, snapshot: SnapshotData) {
             const { mutations } = data as DOMObserveData
             mutations.forEach((mutate: DOMObserveMutations) => {
                 const { mType, data } = mutate
-                const { value, attr, type, parentId, pos, nodeId } = data as ChildListUpdateData &
+                const { value, attr, type, parentId, pos, nodeId, vNode } = data as ChildListUpdateData &
                     (CharacterDataUpdateData & AttributesUpdateData)
                 switch (mType) {
                     case 'attributes':
@@ -48,7 +49,7 @@ export function execFrame(this: Player, snapshot: SnapshotData) {
                         break
                     case 'childList':
                         const parentNode = nodeStore.getNode(parentId) as HTMLElement
-                        const targetNode = nodeStore.getNode(nodeId) as Element
+                        const targetNode = nodeStore.getNode(nodeId) as Element || convertVNode(vNode, null)
                         if (type === ChildListUpdateDataType.DELETE) {
                             if (targetNode) {
                                 parentNode!.removeChild(targetNode)
@@ -63,6 +64,7 @@ export function execFrame(this: Player, snapshot: SnapshotData) {
                                     parentNode!.appendChild(textNode)
                                 }
                             } else {
+                                // it's a ElementNode
                                 parentNode.insertBefore(targetNode, parentNode.childNodes[pos])
                             }
                         }

packages/player/src/index.ts

@@ -1,18 +1,13 @@
-import { DBPromise, listenerStore, Redux } from '@WebReplay/utils'
+import { DBPromise, Redux } from '@WebReplay/utils'
 import { Container } from './container'
 import { Panel } from './panel'
 
 export async function replay() {
     const indexDB = await DBPromise
     const { width, height, vNode, data } = await indexDB.getData()
 
-    const contain = new Container({
-        vNode,
-        width,
-        height
-    })
-
-    new Panel(contain.container, data)
+    const box = new Container({ vNode, width, height })
+    new Panel(box.container, data)
 
     Redux.dispatch({
         type: 'PLAY',

packages/player/src/player.ts

@@ -63,8 +63,4 @@ export class Player {
         this.pause()
         this.index = 0
     }
-
-    setSpeed(speed: number) {
-        console.log('Set Speed', speed)
-    }
 }

packages/snapshot/src/snapshot.ts

@@ -97,7 +97,7 @@ function mouseObserve(emit: SnapshotEvent<MouseSnapshot>) {
 }
 
 function DOMObserve(emit: SnapshotEvent<DOMObserve>) {
-    const callback: MutationCallback = (records: MutationRecord[]) => {
+    const mutationCallback: MutationCallback = (records: MutationRecord[]) => {
         const mutations: DOMObserveMutations[] = []
         function addMutation(mType: 'attributes' | 'characterData' | 'childList') {
             return function(data: any) {
@@ -136,7 +136,6 @@ function DOMObserve(emit: SnapshotEvent<DOMObserve>) {
                         addedNodes.forEach(node => {
                             let text
                             let vNode: any
-
                             if (node.nodeType === Node.TEXT_NODE) {
                                 text = node.nodeValue
                                 const pos = Array.from(node.parentNode!.childNodes).indexOf(node as ChildNode)
@@ -149,12 +148,12 @@ function DOMObserve(emit: SnapshotEvent<DOMObserve>) {
                             } else {
                                 // reset element for remove reference
                                 vNode = createElement(node as HTMLElement)
-                                convertVNode(vNode, null)
+                                // convertVNode(vNode, null)
                                 const parent = node.parentNode!
                                 joinData({
                                     type: ChildListUpdateDataType.ADD,
                                     parentId: nodeStore.getNodeId(target),
-                                    nodeId: vNode && vNode.id,
+                                    vNode,
                                     pos:
                                         parent.childNodes.length > 0
                                             ? [...parent.childNodes].indexOf(node as ChildNode)
@@ -189,7 +188,7 @@ function DOMObserve(emit: SnapshotEvent<DOMObserve>) {
         }
     }
 
-    const observer = new MutationObserver(callback)
+    const observer = new MutationObserver(mutationCallback)
     observer.observe(document.body, {
         attributeOldValue: true,
         attributes: true,
@@ -213,10 +212,8 @@ function listenInputs(emit: SnapshotEvent<FormElementObserve>) {
     const eventTypes = ['input', 'change', 'focus', 'blur']
 
     eventTypes
-        .map(type => {
-            return (fn: (e: InputEvent) => void) => {
-                document.addEventListener(type, fn, { passive: true, capture: true, once: false })
-            }
+        .map(type => (fn: (e: InputEvent) => void) => {
+            document.addEventListener(type, fn, { once: false, passive: true, capture: true })
         })
         .forEach(handle => handle(handleFn))
 

packages/snapshot/src/types.ts

@@ -78,9 +78,10 @@ export interface CharacterDataUpdateData {
 export interface ChildListUpdateData {
     type: ChildListUpdateDataType
     parentId: number
-    nodeId?: number
-    value?: string
+    nodeId: number
     pos: number
+    value?: string
+    vNode: VNode
 }
 export enum ChildListUpdateDataType {
     'ADD' = 'ADD',

rollup.config.dev.js

@@ -20,7 +20,7 @@ export default {
         node(),
         sourcemaps(),
         html({
-            template: () => fs.readFileSync('examples/test.html')
+            template: () => fs.readFileSync('examples/todo.html')
         }),
         html({
             fileName: 'replay.html',

rollup.config.prod.js

@@ -10,8 +10,9 @@ import { string } from 'rollup-plugin-string'
 export default {
     input: 'index.ts',
     output: {
+        name: 'wr',
+        format: 'esm',
         file: 'dist/web-replay.js',
-        format: 'umd',
         sourcemap: true
     },
     plugins: [