perf: add diverging BlockContainer types

Saves a bit of memory, since an OfInlines only ever has one child,
which we can now represent without wrapping in an array.

Soon the paragraph's properties will go on BlockContainerOfInlines.

Author: chearon

src/api.ts

@@ -218,8 +218,7 @@ export function staticLayoutContribution(box: BlockContainer): number {
   }
 
   if (box.isBlockContainerOfInlines()) {
-    const [ifc] = box.children;
-    for (const line of ifc.paragraph.lineboxes) {
+    for (const line of box.ifc.paragraph.lineboxes) {
       intrinsicSize = Math.max(intrinsicSize, line.width);
     }
     // TODO: floats

src/layout-box.ts

@@ -2,7 +2,16 @@ import {id, Logger} from './util.ts';
 
 import type {Style} from './style.ts';
 import type {Run} from './layout-text.ts';
-import type {InlineLevel, Break, Inline, IfcInline, BlockContainer, ReplacedBox} from './layout-flow.ts';
+import type {
+  InlineLevel,
+  Break,
+  Inline,
+  IfcInline,
+  BlockContainer,
+  BlockContainerOfInlines,
+  BlockContainerOfBlocks,
+  ReplacedBox
+} from './layout-flow.ts';
 
 export interface LogicalArea {
   blockStart: number | undefined;
@@ -34,6 +43,14 @@ export abstract class RenderItem {
     return false;
   }
 
+  isBlockContainerOfInlines(): this is BlockContainerOfInlines {
+    return false;
+  }
+
+  isBlockContainerOfBlocks(): this is BlockContainerOfBlocks {
+    return false;
+  }
+
   isFormattingBox(): this is FormattingBox {
     return false;
   }
@@ -94,11 +111,16 @@ export abstract class RenderItem {
 
     log.text('\n');
 
-    if (this.isBlockContainer() || this.isInline()) {
+    if (
+      this.isBlockContainerOfInlines() ||
+      this.isBlockContainerOfBlocks() ||
+      this.isInline()
+    ) {
+      const children = this.isBlockContainerOfInlines() ? [this.ifc] : this.children;
       log.pushIndent();
 
-      for (let i = 0; i < this.children.length; i++) {
-        this.children[i].log(options, log);
+      for (let i = 0; i < children.length; i++) {
+        children[i].log(options, log);
       }
 
       log.popIndent();
@@ -782,10 +804,12 @@ export function prelayout(root: BlockContainer, icb: BoxArea) {
         if (box.style.position !== 'static') pstack.push(box.getPaddingArea());
       }
 
-      if (box.isBlockContainer() || box.isInline()) {
+      if (box.isBlockContainerOfBlocks() || box.isInline()) {
         for (let i = box.children.length - 1; i >= 0; i--) {
           stack.push(box.children[i]);
         }
+      } else if (box.isBlockContainerOfInlines()) {
+        stack.push(box.ifc);
       }
     } else if (box.isRun()) {
       box.propagate(parents.at(-1)!, ifcs.at(-1)!.paragraph.string);
@@ -809,14 +833,18 @@ export function postlayout(root: BlockContainer) {
       box.postlayoutPreorder();
       stack.push({sentinel: true});
       parents.push(box);
-      for (let i = box.children.length - 1; i >= 0; i--) {
-        const child = box.children[i];
-        if (child.isBlockContainer() || child.isInline()) {
-          stack.push(child);
-        } else {
-          child.postlayoutPreorder()
-          child.postlayoutPostorder();
+      if (box.isBlockContainerOfBlocks() || box.isInline()) {
+        for (let i = box.children.length - 1; i >= 0; i--) {
+          const child = box.children[i];
+          if (child.isBlockContainer() || child.isInline()) {
+            stack.push(child);
+          } else {
+            child.postlayoutPreorder()
+            child.postlayoutPostorder();
+          }
         }
+      } else if (box.isBlockContainerOfInlines()) {
+        stack.push(box.ifc);
       }
     }
   }

src/layout-flow.ts

@@ -728,30 +728,13 @@ export class FloatContext {
   }
 }
 
-export interface BlockContainerOfInlines extends BlockContainer {
-  children: IfcInline[];
-}
-
-export type BlockLevel = BlockContainer | ReplacedBox;
-
-export interface BlockContainerOfBlocks extends BlockContainer {
-  children: BlockLevel[];
-}
-
-export class BlockContainer extends FormattingBox {
-  public children: IfcInline[] | BlockLevel[];
-
+export abstract class BlockContainer extends FormattingBox {
   static ATTRS = {
     ...FormattingBox.ATTRS,
     isInline: Box.BITS.isInline,
     isBfcRoot: Box.BITS.isBfcRoot
   };
 
-  constructor(style: Style, children: IfcInline[] | BlockLevel[], attrs: number) {
-    super(style, attrs);
-    this.children = children;
-  }
-
   getLogSymbol() {
     if (this.isFloat()) {
       return '○︎';
@@ -802,27 +785,21 @@ export class BlockContainer extends FormattingBox {
     return Boolean(this.bitfield & Box.BITS.enableLogging);
   }
 
-  isBlockContainerOfInlines(): this is BlockContainerOfInlines {
-    return Boolean(this.children.length && this.children[0].isIfcInline());
-  }
-
   canCollapseThrough(): boolean {
     const blockSize = this.style.getBlockSize(this.getContainingBlock());
 
     if (blockSize !== 'auto' && blockSize !== 0) return false;
 
     if (this.isBlockContainerOfInlines()) {
-      const [ifc] = this.children;
-      return !ifc.hasText();
-    } else {
+      return !this.ifc.hasText();
+    } else if (this.isBlockContainerOfBlocks()) {
       return this.children.length === 0;
+    } else {
+      // TODO: this is a terrible situation, but where else does the method go?
+      throw new Error('Unreachable');
     }
   }
 
-  isBlockContainerOfBlocks(): this is BlockContainerOfBlocks {
-    return !this.isBlockContainerOfInlines();
-  }
-
   propagate(parent: Box) {
     super.propagate(parent);
 
@@ -832,14 +809,6 @@ export class BlockContainer extends FormattingBox {
     }
   }
 
-  doTextLayout(ctx: LayoutContext) {
-    if (!this.isBlockContainerOfInlines()) throw new Error('Children are block containers');
-    const [ifc] = this.children;
-    const blockSize = this.style.getBlockSize(this.getContainingBlock());
-    ifc.doTextLayout(ctx);
-    if (blockSize === 'auto') this.setBlockSize(ifc.paragraph.getHeight());
-  }
-
   hasBackground() {
     return this.style.hasPaint();
   }
@@ -849,6 +818,40 @@ export class BlockContainer extends FormattingBox {
   }
 }
 
+export class BlockContainerOfInlines extends BlockContainer {
+  ifc: IfcInline;
+
+  constructor(style: Style, ifc: IfcInline, attrs: number) {
+    super(style, attrs);
+    this.ifc = ifc;
+  }
+
+  isBlockContainerOfInlines(): this is BlockContainerOfInlines {
+    return true;
+  }
+
+  doTextLayout(ctx: LayoutContext) {
+    const blockSize = this.style.getBlockSize(this.getContainingBlock());
+    this.ifc.doTextLayout(ctx);
+    if (blockSize === 'auto') this.setBlockSize(this.ifc.paragraph.getHeight());
+  }
+}
+
+export type BlockLevel = BlockContainer | ReplacedBox;
+
+export class BlockContainerOfBlocks extends BlockContainer {
+  children: BlockLevel[];
+
+  constructor(style: Style, children: BlockLevel[], attrs: number) {
+    super(style, attrs);
+    this.children = children;
+  }
+
+  isBlockContainerOfBlocks(): this is BlockContainerOfBlocks {
+    return true;
+  }
+}
+
 // §10.3.3
 function doInlineBoxModelForBlockBox(box: FormattingBox) {
   const containingBlock = box.getContainingBlock();
@@ -921,7 +924,7 @@ function doBlockBoxModelForBlockBox(box: BlockContainer) {
   const blockSize = box.style.getBlockSize(containingBlock);
 
   if (blockSize === 'auto') {
-    if (box.children.length === 0) {
+    if (box.canCollapseThrough()) {
       box.setBlockSize(0); // Case 4
     } else {
       // Cases 1-4 should be handled by doBoxPositioning, where margin
@@ -1036,9 +1039,8 @@ export function layoutContribution(
           isize = Math.max(isize, layoutContribution(child, mode));
         }
       } else if (box.isBlockContainerOfInlines()) {
-        const [ifc] = box.children;
-        if (ifc.shouldLayoutContent()) {
-          isize = ifc.paragraph.contribution(mode);
+        if (box.ifc.shouldLayoutContent()) {
+          isize = box.ifc.paragraph.contribution(mode);
         }
       }
     }
@@ -1610,7 +1612,7 @@ function wrapInBlockContainer(parentEl: HTMLElement, inlines: InlineLevel[], tex
   let attrs = Box.ATTRS.isAnonymous;
   if ('x-dropflow-log' in parentEl.attrs) attrs |= Box.ATTRS.enableLogging;
   const ifc = new IfcInline(anonStyle, text.value, inlines, attrs);
-  return new BlockContainer(anonStyle, [ifc], attrs);
+  return new BlockContainerOfInlines(anonStyle, ifc, attrs);
 }
 
 function generateFormattingBox(el: HTMLElement): BlockLevel {
@@ -1705,22 +1707,22 @@ export function generateBlockContainer(el: HTMLElement): BlockContainer {
     attrs |= BlockContainer.ATTRS.isInline;
   }
 
-  let children: BlockLevel[] | IfcInline[];
+  let box;
 
   if (inlines.length) {
     if (blocks.length) {
       blocks.push(wrapInBlockContainer(el, inlines, text));
-      children = blocks;
+      box = new BlockContainerOfBlocks(el.style, blocks, attrs);
     } else {
       const anonComputedStyle = createStyle(el.style, EMPTY_STYLE);
       const ifcAttrs = Box.ATTRS.isAnonymous | (enableLogging ? Box.ATTRS.enableLogging : 0);
-      children = [new IfcInline(anonComputedStyle, text.value, inlines, ifcAttrs)];
+      const ifc = new IfcInline(anonComputedStyle, text.value, inlines, ifcAttrs);
+      box = new BlockContainerOfInlines(el.style, ifc, attrs);
     }
   } else {
-    children = blocks;
+    box = new BlockContainerOfBlocks(el.style, blocks, attrs);
   }
 
-  const box = new BlockContainer(el.style, children, attrs);
   el.boxes.push(box);
   return box;
 }

src/layout-text.ts

@@ -1011,26 +1011,21 @@ function getLastBaseline(block: FormattingBox) {
 
     if (block.isReplacedBox()) {
       return undefined;
-    } else if (block.isBlockContainer()) {
-      if (block.isBlockContainerOfInlines()) {
-        const [ifc] = block.children;
-        const linebox = ifc.paragraph.lineboxes.at(-1);
-        if (linebox) return offset + linebox.blockOffset + linebox.ascender;
-      }
-
-      if (block.isBlockContainerOfBlocks()) {
-        const parentOffset = offset;
-
-        for (const child of block.children) {
-          if (child.isBlockContainer()) {
-            const containingBlock = child.getContainingBlock();
-            const offset = parentOffset
-              + child.getBorderArea().blockStart
-              + child.style.getBorderBlockStartWidth(containingBlock);
-              + child.style.getPaddingBlockStart(containingBlock);
-
-            stack.push({block: child, offset});
-          }
+    } else if (block.isBlockContainerOfInlines()) {
+      const linebox = block.ifc.paragraph.lineboxes.at(-1);
+      if (linebox) return offset + linebox.blockOffset + linebox.ascender;
+    } else if (block.isBlockContainerOfBlocks()) {
+      const parentOffset = offset;
+
+      for (const child of block.children) {
+        if (child.isBlockContainer()) {
+          const containingBlock = child.getContainingBlock();
+          const offset = parentOffset
+            + child.getBorderArea().blockStart
+            + child.style.getBorderBlockStartWidth(containingBlock);
+          + child.style.getPaddingBlockStart(containingBlock);
+
+          stack.push({block: child, offset});
         }
       }
     }

src/paint.ts

@@ -175,11 +175,7 @@ function paintBackgroundDescendents(root: FormattingBox, b: PaintBackend) {
         paintFormattingBoxBackground(box, b);
       }
 
-      if (
-        box.isBlockContainer() &&
-        box.isBlockContainerOfBlocks() &&
-        box.hasBackgroundInLayerRoot()
-      ) {
+      if (box.isBlockContainerOfBlocks() && box.hasBackgroundInLayerRoot()) {
         stack.push({sentinel: true});
         parents.push(box);
 
@@ -429,8 +425,12 @@ function paintBlockForeground(root: BlockLayerRoot, b: PaintBackend) {
           stack.push({sentinel: true});
         }
 
-        for (let i = box.children.length - 1; i >= 0; i--) {
-          stack.push(box.children[i]);
+        if (box.isBlockContainerOfBlocks()) {
+          for (let i = box.children.length - 1; i >= 0; i--) {
+            stack.push(box.children[i]);
+          }
+        } else if (box.isBlockContainerOfInlines()) {
+          stack.push(box.ifc);
         }
       }
     }
@@ -643,7 +643,9 @@ function createLayerRoot(rootBox: BlockContainer) {
         stack.push({sentinel: true});
         parents.push(box);
         if (layerRoot) parentRoots.push(layerRoot);
-        if (box.isBlockContainer() || box.isInline()) {
+        if (box.isBlockContainerOfInlines()) {
+          stack.push(box.ifc);
+        } else if (box.isInline() || box.isBlockContainerOfBlocks()) {
           for (let i = box.children.length - 1; i >= 0; i--) {
             stack.push(box.children[i]);
           }

test/api.spec.js

@@ -114,7 +114,7 @@ describe('Hyperscript API', function () {
     const box = flow.generate(tree);
     registerFontAsset('Arimo/Arimo-Regular.ttf');
     flow.layout(box, 100);
-    const ifc = box.children[0].children[1].children[0];
+    const ifc = box.children[0].children[1].ifc;
     expect(ifc.paragraph.lineboxes).to.have.lengthOf(4);
     expect(ifc.paragraph.lineboxes[0].blockOffset).to.equal(0);
     expect(ifc.paragraph.lineboxes[1].startOffset).to.equal(20);
@@ -144,7 +144,7 @@ describe('Hyperscript API', function () {
     registerFontAsset('Arimo/Arimo-Regular.ttf');
     flow.layout(box, 100);
     flow.layout(box, 100);
-    const ifc = box.children[0].children[1].children[0];
+    const ifc = box.children[0].children[1].ifc;
     expect(ifc.paragraph.lineboxes).to.have.lengthOf(4);
     unregisterFontAsset('Arimo/Arimo-Regular.ttf');
   });