fix: fix node removing

Author: gregberge

packages/h2x-traverse/src/NodePath.js

@@ -58,8 +58,16 @@ class NodePath {
 
   remove() {
     this.shouldStop = true
+    if (this.type === 'HTMLElement') {
+      this.parent.removeChild(this.node)
+    } else if (this.type === 'HTMLAttribute') {
+      this.parent.removeAttribute(this.node.name)
+    } else if (Array.isArray(this.container)) {
+      this.container.splice(this.key, 1)
+    } else {
+      this.container[this.key] = null
+    }
     this.node = null
-    this.container[this.key] = null
   }
 
   _call(fns) {

packages/h2x-traverse/src/TraversalContext.js

@@ -20,9 +20,14 @@ class TraversalContext {
     if (container.length === 0) return false
     let shouldStop = false
 
+    const paths = []
+
     Array.from(container).forEach((value, key) => {
-      if (!value) return
       const nodePath = this.create(parent, container, key, listKey)
+      paths.push(nodePath)
+    })
+
+    paths.forEach(nodePath => {
       if (nodePath && nodePath.visit()) shouldStop = true
     })
 

packages/h2x-traverse/src/index.test.js

@@ -123,7 +123,7 @@ describe('traverse', () => {
     expect(enter.mock.calls[1][0].type).toBe('HTMLElement')
   })
 
-  it('should be possible to remove', () => {
+  it('should be possible to remove elements', () => {
     const enter = jest.fn(path => {
       if (path.node.tagName === 'DIV') {
         path.remove()
@@ -132,18 +132,26 @@ describe('traverse', () => {
 
     const ast = parse(`<header><div></div><span></span></header>`)
 
-    traverse(ast, {
-      enter,
-    })
-
+    traverse(ast, { enter })
     expect(enter).toHaveBeenCalledTimes(3)
-    expect(enter.mock.calls[0][0].type).toBe('HTMLElement')
-    expect(enter.mock.calls[1][0].type).toBe('HTMLElement')
 
-    traverse(ast, {
-      enter,
+    traverse(ast, { enter })
+    expect(enter).toHaveBeenCalledTimes(5)
+  })
+
+  it('should be possible to remove attribute', () => {
+    const enter = jest.fn(path => {
+      if (path.node.name === 'foo') {
+        path.remove()
+      }
     })
 
+    const ast = parse(`<div foo bar x></div>`)
+
+    traverse(ast, { HTMLAttribute: { enter } })
+    expect(enter).toHaveBeenCalledTimes(3)
+
+    traverse(ast, { HTMLAttribute: { enter } })
     expect(enter).toHaveBeenCalledTimes(5)
   })
 })