avoid memory leaking (ish) the dom tree

this was happening in tests, where generate in a bench() was causing
the dom tree to explode

Author: chearon

src/layout-flow.ts

@@ -1592,7 +1592,7 @@ function mapTree(
   if (!bail) path.pop();
   const end = text.value.length;
   const box = new Inline(start, end, el.style, children, 0);
-  el.boxes.push(box);
+  el.boxes.splice(0, el.boxes.length, box);
 
   return [bail, box];
 }
@@ -1627,7 +1627,7 @@ function wrapInBlockContainer(parentEl: HTMLElement, inlines: InlineLevel[], tex
 function generateBlockBox(el: HTMLElement): BlockLevel {
   if (el.tagName === 'img') {
     const box = new ReplacedBox(el.style, el.attrs.src ?? "");
-    el.boxes.push(box);
+    el.boxes.splice(0, el.boxes.length, box);
     return box;
   } else {
     return generateBlockContainer(el);
@@ -1732,6 +1732,6 @@ export function generateBlockContainer(el: HTMLElement): BlockContainer {
     box = new BlockContainerOfBlocks(el.style, blocks, attrs);
   }
 
-  el.boxes.push(box);
+  el.boxes.splice(0, el.boxes.length, box);
   return box;
 }

test/api.spec.js

@@ -148,6 +148,18 @@ describe('Hyperscript API', function () {
     expect(ifc.lineboxes).to.have.lengthOf(4);
     unregisterFontAsset('Arimo/Arimo-Regular.ttf');
   });
+
+  it('doesn\'t accumulate 2 boxes after generating twice', function () {
+    const el = flow.dom([flow.h('div'), flow.h('span'), flow.h('img')]);
+    flow.generate(el);
+    expect(el.query('div').boxes).to.have.lengthOf(1);
+    expect(el.query('span').boxes).to.have.lengthOf(1);
+    expect(el.query('img').boxes).to.have.lengthOf(1);
+    flow.generate(el);
+    expect(el.query('div').boxes).to.have.lengthOf(1);
+    expect(el.query('span').boxes).to.have.lengthOf(1);
+    expect(el.query('img').boxes).to.have.lengthOf(1);
+  });
 });
 
 describe('Parse API', function () {