From 84018db509a7bef27f19c221400e4f837e9a45dc Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 6 Feb 2022 13:57:57 -0500
Subject: [PATCH 01/64] Initial Reconciler using visitor pattern

---
 Package.swift                                 |   1 +
 .../AttributeGraph/ViewGraph.swift            | 395 ++++++++++++++++++
 .../Environment/EnvironmentValues.swift       |   2 +-
 .../Reflection/Models/PropertyInfo.swift      |  15 +-
 Sources/TokamakCore/Views/AnyView.swift       |   8 +
 .../Views/Containers/ForEach.swift            |   6 +
 .../Views/Containers/TupleView.swift          |  83 ++++
 .../TokamakCore/Views/Controls/Button.swift   |  12 +-
 Sources/TokamakCore/Views/Layout/HStack.swift |   6 +-
 Sources/TokamakCore/Views/Layout/VStack.swift |   6 +-
 Sources/TokamakCore/Views/View.swift          |   4 +
 Sources/TokamakCore/Views/ViewBuilder.swift   |  22 +-
 .../TokamakStaticHTML/Views/Text/Text.swift   |   4 +-
 .../TokamakReconcilerTests/VisitorTests.swift | 175 ++++++++
 14 files changed, 725 insertions(+), 14 deletions(-)
 create mode 100644 Sources/TokamakCore/AttributeGraph/ViewGraph.swift
 create mode 100644 Tests/TokamakReconcilerTests/VisitorTests.swift

diff --git a/Package.swift b/Package.swift
index 65f4064bc..b379ee3f2 100644
--- a/Package.swift
+++ b/Package.swift
@@ -207,6 +207,7 @@ let package = Package(
       name: "TokamakTestRenderer",
       dependencies: ["TokamakCore"]
     ),
+    .testTarget(name: "TokamakReconcilerTests", dependencies: ["TokamakCore"]),
     .testTarget(
       name: "TokamakTests",
       dependencies: ["TokamakTestRenderer"]
diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
new file mode 100644
index 000000000..823822043
--- /dev/null
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -0,0 +1,395 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/3/22.
+//
+
+public protocol ViewVisitor {
+  func visit<V: View>(_ view: V)
+}
+
+public extension View {
+  func _visitChildren<V: ViewVisitor>(_ visitor: V) {
+    visitor.visit(body)
+  }
+}
+
+typealias ViewVisitorF<V: ViewVisitor> = (V) -> ()
+
+protocol ViewReducer {
+  associatedtype Result
+  static var initialResult: Result { get }
+  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result
+}
+
+final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
+  var result: R.Result = R.initialResult
+
+  func visit<V>(_ view: V) where V: View {
+    result = R.reduce(partialResult: result, nextView: view)
+  }
+}
+
+extension ViewReducer {
+  typealias Visitor = ReducerVisitor<Self>
+}
+
+/// An output from a `Renderer`.
+public protocol Element: AnyObject, Equatable {
+  init<V: View>(from primitiveView: V)
+}
+
+public protocol GraphRenderer {
+  associatedtype ElementType: Element
+  static func isPrimitive<V>(_ view: V) -> Bool where V: View
+  func commit(_ mutations: [RenderableMutation<Self>])
+}
+
+public enum RenderableMutation<Renderer: GraphRenderer> {
+  case insert(
+    element: Renderer.ElementType,
+    parent: Renderer.ElementType,
+    sibling: Renderer.ElementType?
+  )
+  case remove(element: Renderer.ElementType, parent: Renderer.ElementType?)
+  case replace(
+    parent: Renderer.ElementType,
+    previous: Renderer.ElementType,
+    replacement: Renderer.ElementType
+  )
+  case update(previous: Renderer.ElementType, newElement: Renderer.ElementType)
+}
+
+@_spi(TokamakCore) public final class ViewNode<Renderer: GraphRenderer>: CustomDebugStringConvertible {
+  weak var reconciler: Reconciler<Renderer>?
+
+  var view: Any!
+  var visitView: ((ViewVisitor) -> ())!
+  var id: Identity?
+  var element: Renderer.ElementType?
+  var children: [ViewNode<Renderer>]
+  unowned var parent: ViewNode<Renderer>?
+  let typeInfo: TypeInfo?
+  var state: [PropertyInfo: MutableStorage]!
+
+  final class MutableStorage {
+    private(set) var value: Any
+    let onSet: () -> ()
+
+    func setValue(_ newValue: Any, with transaction: Transaction) {
+      value = newValue
+      onSet()
+    }
+
+    init(initialValue: Any, onSet: @escaping () -> ()) {
+      value = initialValue
+      self.onSet = onSet
+    }
+  }
+
+  public enum Identity: Hashable {
+    case explicit(AnyHashable)
+    case structural(index: Int)
+  }
+
+  init<V: View>(
+    _ view: inout V,
+    element: Renderer.ElementType?,
+    parent: ViewNode<Renderer>?,
+    reconciler: Reconciler<Renderer>?
+  ) {
+    self.reconciler = reconciler
+    self.element = element
+    children = []
+    self.parent = parent
+    typeInfo = TokamakCore.typeInfo(of: V.self)
+
+    state = bindProperties(to: &view, typeInfo)
+    self.view = view
+    visitView = { [weak self] in
+      guard let self = self else { return }
+      // swiftlint:disable:next force_cast
+      $0.visit(self.view as! V)
+    }
+  }
+
+  init(
+    bound view: Any,
+    typeInfo: TypeInfo?,
+    visitView: @escaping (ViewVisitor) -> (),
+    element: Renderer.ElementType?,
+    parent: ViewNode<Renderer>?,
+    reconciler: Reconciler<Renderer>?
+  ) {
+    self.view = view
+    self.reconciler = reconciler
+    self.element = element
+    children = []
+    self.parent = parent
+    self.typeInfo = typeInfo
+    self.visitView = visitView
+  }
+
+  private func bindProperties<V: View>(
+    to view: inout V,
+    _ typeInfo: TypeInfo?
+  ) -> [PropertyInfo: MutableStorage] {
+    guard let typeInfo = typeInfo else { return [:] }
+
+    var state: [PropertyInfo: MutableStorage] = [:]
+    for property in typeInfo.properties where property.type is DynamicProperty.Type {
+      var value = property.get(from: view)
+      if var storage = value as? WritableValueStorage {
+        let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
+          guard let self = self else { return }
+          self.reconciler?.reconcile(from: self)
+        })
+        state[property] = box
+        storage.getter = { box.value }
+        storage.setter = { box.setValue($0, with: $1) }
+        value = storage
+      }
+      property.set(value: value, on: &view)
+    }
+    return state
+  }
+
+  func clone() -> ViewNode<Renderer> {
+    .init(
+      bound: view!,
+      typeInfo: typeInfo,
+      visitView: visitView,
+      element: nil,
+      parent: nil,
+      reconciler: reconciler
+    )
+  }
+
+  public var debugDescription: String {
+    flush()
+  }
+
+  private func flush(level: Int = 0) -> String {
+    let spaces = String(repeating: "  ", count: level)
+    let elementDescription: String
+    if let element = element {
+      elementDescription = """
+      (
+      \(spaces)  \(String(describing: element))
+      \(spaces))
+      """
+    } else {
+      elementDescription = ""
+    }
+    let childrenDescription: String
+    if children.isEmpty {
+      childrenDescription = ""
+    } else {
+      childrenDescription = """
+      {
+      \(children.map { $0.flush(level: level + 1) }.joined(separator: "\n"))
+      \(spaces)}
+      """
+    }
+    return """
+    \(spaces)\(String(describing: type(of: view!))
+      .split(separator: "<")[0])\(elementDescription) \(childrenDescription)
+    """
+  }
+}
+
+@_spi(TokamakCore) public extension ViewNode {
+  func traverse<Result>(_ work: (ViewNode<Renderer>) -> Result?) -> Result? {
+    var stack = children
+    while true {
+      guard let next = stack.popLast() else { return nil }
+      if let result = work(next) {
+        return result
+      }
+      stack.insert(contentsOf: next.children, at: 0)
+    }
+  }
+
+  func findView(id: ViewNode<Renderer>.Identity) -> ViewNode<Renderer>? {
+    traverse { node in
+      node.id == id ? node : nil
+    }
+  }
+}
+
+public final class Reconciler<Renderer: GraphRenderer> {
+  var tree: ViewNode<Renderer>!
+  let renderer: Renderer
+
+  public init<V: View>(_ renderer: Renderer, _ view: V) {
+    self.renderer = renderer
+    let visitor = InitialTreeBuilderVisitor(reconciler: self)
+    visitor.visit(view)
+    tree = visitor.root
+  }
+
+  enum Mutation {
+    case insert(ViewNode<Renderer>, parent: ViewNode<Renderer>, sibling: ViewNode<Renderer>?)
+    case remove(ViewNode<Renderer>, parent: ViewNode<Renderer>)
+    case replace(
+      parent: ViewNode<Renderer>,
+      previous: ViewNode<Renderer>,
+      current: ViewNode<Renderer>
+    )
+    case update(ViewNode<Renderer>, newElement: Renderer.ElementType)
+  }
+
+  final class InitialTreeBuilderVisitor: ViewVisitor {
+    var root: ViewNode<Renderer>
+    var reconciler: Reconciler<Renderer>
+
+    init(reconciler: Reconciler<Renderer>) {
+      self.reconciler = reconciler
+      var view = EmptyView()
+      root = .init(&view, element: nil, parent: nil, reconciler: reconciler)
+    }
+
+    func visit<V>(_ view: V) where V: View {
+      root.view = view
+      // Create a stack of nodes and the accessor for their children.
+      var accessors: [(ViewNode<Renderer>, (TreeReducer.Visitor) -> ())] =
+        [(root, { $0.visit(view) })]
+      while true {
+        guard let next = accessors.popLast() else { return } // Pop from the stack
+        // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
+        let reducer = TreeReducer.Visitor()
+        next.1(reducer)
+        for (index, child) in reducer.result.enumerated() {
+          child.0.parent = next.0
+          child.0.reconciler = reconciler
+          child.0.id = .structural(index: index)
+          next.0.children.append(child.0)
+        }
+        accessors.append(contentsOf: reducer.result)
+      }
+    }
+  }
+
+  struct TreeReducer: ViewReducer {
+    typealias Result = [(ViewNode<Renderer>, visitChildren: (TreeReducer.Visitor) -> ())]
+    static var initialResult: Result { [] }
+
+    static func reduce<V>(partialResult: Result, nextView: V) -> Result where V: View {
+      var nextView = nextView
+      return partialResult + [(ViewNode<Renderer>(
+        &nextView,
+        element: Renderer.isPrimitive(nextView) ? Renderer.ElementType(from: nextView) : nil,
+        parent: nil,
+        reconciler: nil
+      ), nextView._visitChildren)]
+    }
+  }
+
+  final class ReconcilerVisitor: ViewVisitor {
+    var current: ViewNode<Renderer>
+    var mutations = [Mutation]()
+
+    init(current: ViewNode<Renderer>) {
+      self.current = current
+    }
+
+    func visit<V>(_ view: V) where V: View {
+      var nodeStack = [current]
+      var accessorStack: [(ViewNode<Renderer>, (TreeReducer.Visitor) -> ())] =
+        [(current.clone(), { view._visitChildren($0) })]
+      while true {
+        guard let nextNode = nodeStack.popLast(),
+              let nextAccessor = accessorStack.popLast()
+        else { return } // Pop from the stacks
+        // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
+        let reducer = TreeReducer.Visitor()
+        nextAccessor.1(reducer)
+        var lastSibling: ViewNode<Renderer>?
+        for (index, child) in reducer.result
+          .enumerated()
+        { // TODO: Reconcile with nextNode.children
+          child.0.parent = nextAccessor.0
+          child.0.reconciler = current.reconciler
+          child.0.id = .structural(index: index)
+          nextAccessor.0.children.append(child.0)
+          if !nextNode.children.indices.contains(index) {
+            mutations.append(.insert(child.0, parent: nextNode, sibling: lastSibling))
+          } else {
+            let previousChild = nextNode.children[index]
+            if child.0.typeInfo?.type != previousChild.typeInfo?.type {
+              mutations
+                .append(.replace(parent: nextNode, previous: previousChild, current: child.0))
+            } else if let newElement = child.0.element,
+                      newElement != previousChild.element
+            {
+              mutations.append(.update(previousChild, newElement: newElement))
+            }
+            lastSibling = previousChild
+          }
+        }
+        for removed in nextNode.children.dropFirst(reducer.result.count) {
+          mutations.append(.remove(removed, parent: nextNode))
+        }
+        accessorStack.append(contentsOf: reducer.result)
+        nodeStack.append(contentsOf: nextNode.children)
+      }
+    }
+  }
+
+  func reconcile(from current: ViewNode<Renderer>) {
+    let visitor = ReconcilerVisitor(current: current)
+    current.visitView(visitor)
+    // Apply mutations to the tree and the renderer.
+    var renderableMutations = [RenderableMutation<Renderer>]()
+    for mutation in visitor.mutations {
+      switch mutation {
+      case let .insert(viewNode, parent, sibling):
+        if let sibling = sibling,
+           let index = parent.children.firstIndex(where: { $0 === sibling })
+        {
+          parent.children.insert(viewNode, at: index + 1)
+        } else {
+          parent.children.insert(viewNode, at: 0)
+        }
+        guard let element = viewNode.element,
+              let parentElement = parent.element
+        else { continue }
+        renderableMutations
+          .append(.insert(element: element, parent: parentElement, sibling: sibling?.element))
+      case let .remove(viewNode, parent):
+        guard let index = parent.children.firstIndex(where: { $0 === viewNode }) else { continue }
+        parent.children.remove(at: index)
+        guard let element = viewNode.element else { continue }
+        renderableMutations.append(.remove(element: element, parent: parent.element))
+      case let .replace(parent, previous, current):
+        guard let index = parent.children.firstIndex(where: { $0 === previous }) else { continue }
+        parent.children[index] = current
+        if let parentElement = parent.element,
+           let previousElement = previous.element,
+           let currentElement = current.element
+        {
+          renderableMutations
+            .append(.replace(
+              parent: parentElement,
+              previous: previousElement,
+              replacement: currentElement
+            ))
+        }
+      case let .update(viewNode, newElement):
+        if let previous = viewNode.element {
+          renderableMutations.append(.update(previous: previous, newElement: newElement))
+        }
+        viewNode.element = newElement
+      }
+    }
+    renderer.commit(renderableMutations)
+  }
+}
+
+public extension GraphRenderer {
+  @discardableResult
+  func render<V: View>(_ view: V) -> Reconciler<Self> {
+    .init(self, view)
+  }
+}
diff --git a/Sources/TokamakCore/Environment/EnvironmentValues.swift b/Sources/TokamakCore/Environment/EnvironmentValues.swift
index e54a00f86..dc1ec51d7 100644
--- a/Sources/TokamakCore/Environment/EnvironmentValues.swift
+++ b/Sources/TokamakCore/Environment/EnvironmentValues.swift
@@ -47,7 +47,7 @@ public struct EnvironmentValues: CustomStringConvertible {
   @_spi(TokamakCore)
   public mutating func merge(_ other: Self?) {
     if let other = other {
-      values.merge(other.values) { existing, new in
+      values.merge(other.values) { _, new in
         new
       }
     }
diff --git a/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift b/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
index 3f09a164e..323fca340 100644
--- a/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
+++ b/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
@@ -20,7 +20,20 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-public struct PropertyInfo {
+public struct PropertyInfo: Hashable {
+  public static func == (lhs: PropertyInfo, rhs: PropertyInfo) -> Bool {
+    lhs.name == rhs.name && lhs.type == rhs.type && lhs.isVar == rhs.isVar && lhs.offset == rhs
+      .offset && lhs.ownerType == rhs.ownerType
+  }
+
+  public func hash(into hasher: inout Hasher) {
+    hasher.combine(name)
+    hasher.combine(ObjectIdentifier(type))
+    hasher.combine(isVar)
+    hasher.combine(offset)
+    hasher.combine(ObjectIdentifier(ownerType))
+  }
+
   public let name: String
   public let type: Any.Type
   public let isVar: Bool
diff --git a/Sources/TokamakCore/Views/AnyView.swift b/Sources/TokamakCore/Views/AnyView.swift
index 47e0263a5..fd9170380 100644
--- a/Sources/TokamakCore/Views/AnyView.swift
+++ b/Sources/TokamakCore/Views/AnyView.swift
@@ -40,6 +40,8 @@ public struct AnyView: _PrimitiveView {
    */
   let bodyType: Any.Type
 
+  let visitChildren: (ViewVisitor, Any) -> ()
+
   public init<V>(_ view: V) where V: View {
     if let anyView = view as? AnyView {
       self = anyView
@@ -52,8 +54,14 @@ public struct AnyView: _PrimitiveView {
       self.view = view
       // swiftlint:disable:next force_cast
       bodyClosure = { AnyView(($0 as! V).body) }
+      // swiftlint:disable:next force_cast
+      visitChildren = { $0.visit($1 as! V) }
     }
   }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitChildren(visitor, view)
+  }
 }
 
 public func mapAnyView<T, V>(_ anyView: AnyView, transform: (V) -> T) -> T? {
diff --git a/Sources/TokamakCore/Views/Containers/ForEach.swift b/Sources/TokamakCore/Views/Containers/ForEach.swift
index 88a3eff8a..ef2bf6ef9 100644
--- a/Sources/TokamakCore/Views/Containers/ForEach.swift
+++ b/Sources/TokamakCore/Views/Containers/ForEach.swift
@@ -48,6 +48,12 @@ public struct ForEach<Data, ID, Content>: _PrimitiveView where Data: RandomAcces
     self.id = id
     self.content = content
   }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    for element in data {
+      visitor.visit(content(element))
+    }
+  }
 }
 
 extension ForEach: ForEachProtocol where Data.Index == Int {
diff --git a/Sources/TokamakCore/Views/Containers/TupleView.swift b/Sources/TokamakCore/Views/Containers/TupleView.swift
index 0f0cfdec0..6945589a5 100644
--- a/Sources/TokamakCore/Views/Containers/TupleView.swift
+++ b/Sources/TokamakCore/Views/Containers/TupleView.swift
@@ -22,26 +22,46 @@ public struct TupleView<T>: _PrimitiveView {
   public let value: T
 
   let _children: [AnyView]
+  private let visit: (ViewVisitor) -> ()
 
   public init(_ value: T) {
     self.value = value
     _children = []
+    visit = { _ in }
   }
 
   public init(_ value: T, children: [AnyView]) {
     self.value = value
     _children = children
+    visit = {
+      for child in children {
+        $0.visit(child)
+      }
+    }
+  }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visit(visitor)
   }
 
   init<T1: View, T2: View>(_ v1: T1, _ v2: T2) where T == (T1, T2) {
     value = (v1, v2)
     _children = [AnyView(v1), AnyView(v2)]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+    }
   }
 
   // swiftlint:disable large_tuple
   init<T1: View, T2: View, T3: View>(_ v1: T1, _ v2: T2, _ v3: T3) where T == (T1, T2, T3) {
     value = (v1, v2, v3)
     _children = [AnyView(v1), AnyView(v2), AnyView(v3)]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View>(_ v1: T1, _ v2: T2, _ v3: T3, _ v4: T4)
@@ -49,6 +69,12 @@ public struct TupleView<T>: _PrimitiveView {
   {
     value = (v1, v2, v3, v4)
     _children = [AnyView(v1), AnyView(v2), AnyView(v3), AnyView(v4)]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View, T5: View>(
@@ -60,6 +86,13 @@ public struct TupleView<T>: _PrimitiveView {
   ) where T == (T1, T2, T3, T4, T5) {
     value = (v1, v2, v3, v4, v5)
     _children = [AnyView(v1), AnyView(v2), AnyView(v3), AnyView(v4), AnyView(v5)]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View, T5: View, T6: View>(
@@ -72,6 +105,14 @@ public struct TupleView<T>: _PrimitiveView {
   ) where T == (T1, T2, T3, T4, T5, T6) {
     value = (v1, v2, v3, v4, v5, v6)
     _children = [AnyView(v1), AnyView(v2), AnyView(v3), AnyView(v4), AnyView(v5), AnyView(v6)]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+      $0.visit(v6)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View, T5: View, T6: View, T7: View>(
@@ -93,6 +134,15 @@ public struct TupleView<T>: _PrimitiveView {
       AnyView(v6),
       AnyView(v7),
     ]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+      $0.visit(v6)
+      $0.visit(v7)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View, T5: View, T6: View, T7: View, T8: View>(
@@ -116,6 +166,16 @@ public struct TupleView<T>: _PrimitiveView {
       AnyView(v7),
       AnyView(v8),
     ]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+      $0.visit(v6)
+      $0.visit(v7)
+      $0.visit(v8)
+    }
   }
 
   init<T1: View, T2: View, T3: View, T4: View, T5: View, T6: View, T7: View, T8: View, T9: View>(
@@ -141,6 +201,17 @@ public struct TupleView<T>: _PrimitiveView {
       AnyView(v8),
       AnyView(v9),
     ]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+      $0.visit(v6)
+      $0.visit(v7)
+      $0.visit(v8)
+      $0.visit(v9)
+    }
   }
 
   init<
@@ -179,6 +250,18 @@ public struct TupleView<T>: _PrimitiveView {
       AnyView(v9),
       AnyView(v10),
     ]
+    visit = {
+      $0.visit(v1)
+      $0.visit(v2)
+      $0.visit(v3)
+      $0.visit(v4)
+      $0.visit(v5)
+      $0.visit(v6)
+      $0.visit(v7)
+      $0.visit(v8)
+      $0.visit(v9)
+      $0.visit(v10)
+    }
   }
 }
 
diff --git a/Sources/TokamakCore/Views/Controls/Button.swift b/Sources/TokamakCore/Views/Controls/Button.swift
index a675bb86f..9e69c46de 100644
--- a/Sources/TokamakCore/Views/Controls/Button.swift
+++ b/Sources/TokamakCore/Views/Controls/Button.swift
@@ -65,7 +65,7 @@ public struct Button<Label>: View where Label: View {
   }
 }
 
-public struct _PrimitiveButtonStyleBody<Label>: _PrimitiveView where Label: View {
+public struct _PrimitiveButtonStyleBody<Label>: View where Label: View {
   public let label: Label
   public let role: ButtonRole?
   public let action: () -> ()
@@ -85,9 +85,13 @@ public struct _PrimitiveButtonStyleBody<Label>: _PrimitiveView where Label: View
   }
 
   @Environment(\.controlSize) public var controlSize
+
+  public var body: some View {
+    label
+  }
 }
 
-public struct _Button<Label>: _PrimitiveView where Label: View {
+public struct _Button<Label>: View where Label: View {
   public let label: Label
   public let role: ButtonRole?
   public let action: () -> ()
@@ -104,6 +108,10 @@ public struct _Button<Label>: _PrimitiveView where Label: View {
       )
     )
   }
+
+  public var body: some View {
+    makeStyleBody()
+  }
 }
 
 public extension Button where Label == Text {
diff --git a/Sources/TokamakCore/Views/Layout/HStack.swift b/Sources/TokamakCore/Views/Layout/HStack.swift
index edf11f2bc..f7bc91402 100644
--- a/Sources/TokamakCore/Views/Layout/HStack.swift
+++ b/Sources/TokamakCore/Views/Layout/HStack.swift
@@ -32,7 +32,7 @@ public let defaultStackSpacing: CGFloat = 8
 ///       Text("Hello")
 ///       Text("World")
 ///     }
-public struct HStack<Content>: _PrimitiveView where Content: View {
+public struct HStack<Content>: View where Content: View {
   public let alignment: VerticalAlignment
   let spacing: CGFloat
   public let content: Content
@@ -46,6 +46,10 @@ public struct HStack<Content>: _PrimitiveView where Content: View {
     self.spacing = spacing ?? defaultStackSpacing
     self.content = content()
   }
+
+  public var body: some View {
+    content
+  }
 }
 
 extension HStack: ParentView {
diff --git a/Sources/TokamakCore/Views/Layout/VStack.swift b/Sources/TokamakCore/Views/Layout/VStack.swift
index 81d287325..c63f9b8ad 100644
--- a/Sources/TokamakCore/Views/Layout/VStack.swift
+++ b/Sources/TokamakCore/Views/Layout/VStack.swift
@@ -27,7 +27,7 @@ public enum HorizontalAlignment: Equatable {
 ///       Text("Hello")
 ///       Text("World")
 ///     }
-public struct VStack<Content>: _PrimitiveView where Content: View {
+public struct VStack<Content>: View where Content: View {
   public let alignment: HorizontalAlignment
   let spacing: CGFloat
   public let content: Content
@@ -41,6 +41,10 @@ public struct VStack<Content>: _PrimitiveView where Content: View {
     self.spacing = spacing ?? defaultStackSpacing
     self.content = content()
   }
+
+  public var body: some View {
+    content
+  }
 }
 
 extension VStack: ParentView {
diff --git a/Sources/TokamakCore/Views/View.swift b/Sources/TokamakCore/Views/View.swift
index 4e6f4ad2f..1d9a9b953 100644
--- a/Sources/TokamakCore/Views/View.swift
+++ b/Sources/TokamakCore/Views/View.swift
@@ -19,6 +19,8 @@ public protocol View {
   associatedtype Body: View
 
   @ViewBuilder var body: Self.Body { get }
+
+  func _visitChildren<V: ViewVisitor>(_ visitor: V)
 }
 
 public extension Never {
@@ -38,6 +40,8 @@ public extension _PrimitiveView {
   var body: Never {
     neverBody(String(reflecting: Self.self))
   }
+
+  func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {}
 }
 
 /// A `View` type that renders with subviews, usually specified in the `Content` type argument
diff --git a/Sources/TokamakCore/Views/ViewBuilder.swift b/Sources/TokamakCore/Views/ViewBuilder.swift
index 0f06eab0b..eeb7848de 100644
--- a/Sources/TokamakCore/Views/ViewBuilder.swift
+++ b/Sources/TokamakCore/Views/ViewBuilder.swift
@@ -31,6 +31,15 @@ public struct _ConditionalContent<TrueContent, FalseContent>: _PrimitiveView
   }
 
   let storage: Storage
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    switch storage {
+    case let .trueContent(view):
+      visitor.visit(view)
+    case let .falseContent(view):
+      visitor.visit(view)
+    }
+  }
 }
 
 extension _ConditionalContent: GroupView {
@@ -44,12 +53,13 @@ extension _ConditionalContent: GroupView {
   }
 }
 
-extension Optional: View where Wrapped: View {
-  public var body: some View {
-    if let view = self {
-      view
-    } else {
-      EmptyView()
+extension Optional: View, _PrimitiveView where Wrapped: View {
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    switch self {
+    case .none:
+      break
+    case let .some(wrapped):
+      visitor.visit(wrapped)
     }
   }
 }
diff --git a/Sources/TokamakStaticHTML/Views/Text/Text.swift b/Sources/TokamakStaticHTML/Views/Text/Text.swift
index 49c986c9e..c0511404f 100644
--- a/Sources/TokamakStaticHTML/Views/Text/Text.swift
+++ b/Sources/TokamakStaticHTML/Views/Text/Text.swift
@@ -168,9 +168,9 @@ extension Text {
 
     var fontStack: [Font] = []
     var color: Color?
-    var italic: Bool = false
+    var italic = false
     var weight: Font.Weight?
-    var kerning: String = "normal"
+    var kerning = "normal"
     var baseline: CGFloat?
     var strikethrough: (Bool, Color?)?
     var underline: (Bool, Color?)?
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
new file mode 100644
index 000000000..77ffdb814
--- /dev/null
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -0,0 +1,175 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 2/3/22.
+//
+
+import XCTest
+
+@_spi(TokamakCore) @testable import TokamakCore
+
+private struct TestView: View {
+  struct Counter: View {
+    @State private var count = 0
+
+    var body: some View {
+      VStack {
+        Text("\(count)")
+        HStack {
+          Button("Decrement") {
+            count -= 1
+          }
+          Button("Increment") {
+            count += 1
+          }
+        }
+      }
+    }
+  }
+
+  public var body: some View {
+    Counter()
+  }
+}
+
+protocol TestPrimitive {
+  var tag: String { get }
+  var attributes: [String: Any] { get }
+}
+
+extension TestPrimitive {
+  var tag: String { String(String(reflecting: Self.self).split(separator: "<")[0]) }
+}
+
+extension VStack: TestPrimitive {
+  var attributes: [String: Any] {
+    ["spacing": spacing, "alignment": alignment]
+  }
+}
+
+extension HStack: TestPrimitive {
+  var attributes: [String: Any] {
+    ["spacing": spacing, "alignment": alignment]
+  }
+}
+
+extension Text: TestPrimitive {
+  var attributes: [String: Any] {
+    ["content": storage.rawText, "modifiers": modifiers]
+  }
+}
+
+extension _Button: TestPrimitive {
+  var attributes: [String: Any] {
+    ["action": action, "role": role as Any]
+  }
+}
+
+extension _PrimitiveButtonStyleBody: TestPrimitive {
+  var attributes: [String: Any] {
+    ["size": controlSize, "role": role as Any]
+  }
+}
+
+final class TestElement: Element, CustomStringConvertible {
+  static func == (lhs: TestElement, rhs: TestElement) -> Bool {
+    lhs.renderedValue == rhs.renderedValue && lhs.closingTag == rhs.closingTag
+  }
+
+  var renderedValue: String
+  var closingTag: String
+
+  init<V>(from primitiveView: V) where V: View {
+    guard let primitiveView = primitiveView as? TestPrimitive else { fatalError() }
+    renderedValue =
+      "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
+    closingTag = "</\(primitiveView.tag)>"
+  }
+
+  var description: String {
+    "\(renderedValue)\(closingTag)"
+  }
+}
+
+struct TestRenderer: GraphRenderer {
+  typealias ElementType = TestElement
+
+  static func isPrimitive<V>(_ view: V) -> Bool where V: View {
+    view is TestPrimitive
+  }
+
+  func commit(_ mutations: [RenderableMutation<TestRenderer>]) {
+    for mutation in mutations {
+      switch mutation {
+      case let .insert(element, parent, sibling):
+        print("Insert \(element) after \(sibling as Any) in \(parent)")
+      case let .remove(element, parent):
+        print("Remove \(element) from \(parent as Any)")
+      case let .replace(parent, previous, replacement):
+        print("Replace \(previous) with \(replacement) in \(parent)")
+      case let .update(previous, newElement):
+        print("Update \(previous) with \(newElement)")
+      }
+    }
+  }
+}
+
+final class VisitorTests: XCTestCase {
+  func testRenderer() {
+    let reconciler = TestRenderer().render(TestView())
+    let decrement = (
+      reconciler.tree
+        .findView(id: .structural(index: 0))? // TestView
+        .findView(id: .structural(index: 0))? // Counter
+        .findView(id: .structural(index: 0))? // VStack
+        .findView(id: .structural(index: 0))? // TupleView
+        .findView(id: .structural(index: 1))? // HStack
+        .findView(id: .structural(index: 0))? // TupleView
+        .findView(id: .structural(index: 0))? // Increment Button
+        .view as? Button<Text>
+    )
+    let increment = (
+      reconciler.tree
+        .findView(id: .structural(index: 0))? // TestView
+        .findView(id: .structural(index: 0))? // Counter
+        .findView(id: .structural(index: 0))? // VStack
+        .findView(id: .structural(index: 0))? // TupleView
+        .findView(id: .structural(index: 1))? // HStack
+        .findView(id: .structural(index: 0))? // TupleView
+        .findView(id: .structural(index: 1))? // Increment Button
+        .view as? Button<Text>
+    )
+    increment?.action()
+    let text = reconciler.tree
+      .findView(id: .structural(index: 0))? // TestView
+      .findView(id: .structural(index: 0))? // Counter
+      .findView(id: .structural(index: 0))? // VStack
+      .findView(id: .structural(index: 0))? // TupleView
+      .findView(id: .structural(index: 0)) // Text
+    XCTAssertEqual(
+      text?.element?.description,
+      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
+    )
+    increment?.action()
+    XCTAssertEqual(
+      text?.element?.description,
+      "<TokamakCore.Text content=\"2\" modifiers=\"[]\"></TokamakCore.Text>"
+    )
+    decrement?.action()
+    XCTAssertEqual(
+      text?.element?.description,
+      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
+    )
+  }
+}

From aa8c4dd9df0e0f3ab4a0239af96b149e374a7d89 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 6 Feb 2022 15:53:04 -0500
Subject: [PATCH 02/64] Preliminary static HTML renderer using the new
 reconciler

---
 .../AttributeGraph/ViewGraph.swift            | 321 ++++++++++--------
 .../StaticHTMLGraphRenderer.swift             |  83 +++++
 .../TokamakReconcilerTests/VisitorTests.swift |  15 +-
 .../GraphRendererTests.swift                  |  23 ++
 4 files changed, 292 insertions(+), 150 deletions(-)
 create mode 100644 Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
 create mode 100644 Tests/TokamakStaticHTMLTests/GraphRendererTests.swift

diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
index 823822043..d943d8aad 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -44,6 +44,7 @@ public protocol GraphRenderer {
   associatedtype ElementType: Element
   static func isPrimitive<V>(_ view: V) -> Bool where V: View
   func commit(_ mutations: [RenderableMutation<Self>])
+  var rootElement: ElementType { get }
 }
 
 public enum RenderableMutation<Renderer: GraphRenderer> {
@@ -61,146 +62,148 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
   case update(previous: Renderer.ElementType, newElement: Renderer.ElementType)
 }
 
-@_spi(TokamakCore) public final class ViewNode<Renderer: GraphRenderer>: CustomDebugStringConvertible {
-  weak var reconciler: Reconciler<Renderer>?
-
-  var view: Any!
-  var visitView: ((ViewVisitor) -> ())!
-  var id: Identity?
-  var element: Renderer.ElementType?
-  var children: [ViewNode<Renderer>]
-  unowned var parent: ViewNode<Renderer>?
-  let typeInfo: TypeInfo?
-  var state: [PropertyInfo: MutableStorage]!
-
-  final class MutableStorage {
-    private(set) var value: Any
-    let onSet: () -> ()
-
-    func setValue(_ newValue: Any, with transaction: Transaction) {
-      value = newValue
-      onSet()
-    }
+@_spi(TokamakCore) public extension Reconciler {
+  final class ViewNode: CustomDebugStringConvertible {
+    weak var reconciler: Reconciler<Renderer>?
+
+    var view: Any!
+    var visitView: ((ViewVisitor) -> ())!
+    var id: Identity?
+    var element: Renderer.ElementType?
+    var children: [Reconciler<Renderer>.ViewNode]
+    unowned var parent: Reconciler<Renderer>.ViewNode?
+    let typeInfo: TypeInfo?
+    var state: [PropertyInfo: MutableStorage]!
+
+    final class MutableStorage {
+      private(set) var value: Any
+      let onSet: () -> ()
+
+      func setValue(_ newValue: Any, with transaction: Transaction) {
+        value = newValue
+        onSet()
+      }
 
-    init(initialValue: Any, onSet: @escaping () -> ()) {
-      value = initialValue
-      self.onSet = onSet
+      init(initialValue: Any, onSet: @escaping () -> ()) {
+        value = initialValue
+        self.onSet = onSet
+      }
     }
-  }
 
-  public enum Identity: Hashable {
-    case explicit(AnyHashable)
-    case structural(index: Int)
-  }
+    public enum Identity: Hashable {
+      case explicit(AnyHashable)
+      case structural(index: Int)
+    }
 
-  init<V: View>(
-    _ view: inout V,
-    element: Renderer.ElementType?,
-    parent: ViewNode<Renderer>?,
-    reconciler: Reconciler<Renderer>?
-  ) {
-    self.reconciler = reconciler
-    self.element = element
-    children = []
-    self.parent = parent
-    typeInfo = TokamakCore.typeInfo(of: V.self)
-
-    state = bindProperties(to: &view, typeInfo)
-    self.view = view
-    visitView = { [weak self] in
-      guard let self = self else { return }
-      // swiftlint:disable:next force_cast
-      $0.visit(self.view as! V)
+    init<V: View>(
+      _ view: inout V,
+      element: Renderer.ElementType?,
+      parent: Reconciler<Renderer>.ViewNode?,
+      reconciler: Reconciler<Renderer>?
+    ) {
+      self.reconciler = reconciler
+      self.element = element
+      children = []
+      self.parent = parent
+      typeInfo = TokamakCore.typeInfo(of: V.self)
+
+      state = bindProperties(to: &view, typeInfo)
+      self.view = view
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
     }
-  }
 
-  init(
-    bound view: Any,
-    typeInfo: TypeInfo?,
-    visitView: @escaping (ViewVisitor) -> (),
-    element: Renderer.ElementType?,
-    parent: ViewNode<Renderer>?,
-    reconciler: Reconciler<Renderer>?
-  ) {
-    self.view = view
-    self.reconciler = reconciler
-    self.element = element
-    children = []
-    self.parent = parent
-    self.typeInfo = typeInfo
-    self.visitView = visitView
-  }
+    init(
+      bound view: Any,
+      typeInfo: TypeInfo?,
+      visitView: @escaping (ViewVisitor) -> (),
+      element: Renderer.ElementType?,
+      parent: Reconciler<Renderer>.ViewNode?,
+      reconciler: Reconciler<Renderer>?
+    ) {
+      self.view = view
+      self.reconciler = reconciler
+      self.element = element
+      children = []
+      self.parent = parent
+      self.typeInfo = typeInfo
+      self.visitView = visitView
+    }
 
-  private func bindProperties<V: View>(
-    to view: inout V,
-    _ typeInfo: TypeInfo?
-  ) -> [PropertyInfo: MutableStorage] {
-    guard let typeInfo = typeInfo else { return [:] }
-
-    var state: [PropertyInfo: MutableStorage] = [:]
-    for property in typeInfo.properties where property.type is DynamicProperty.Type {
-      var value = property.get(from: view)
-      if var storage = value as? WritableValueStorage {
-        let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
-          guard let self = self else { return }
-          self.reconciler?.reconcile(from: self)
-        })
-        state[property] = box
-        storage.getter = { box.value }
-        storage.setter = { box.setValue($0, with: $1) }
-        value = storage
+    private func bindProperties<V: View>(
+      to view: inout V,
+      _ typeInfo: TypeInfo?
+    ) -> [PropertyInfo: MutableStorage] {
+      guard let typeInfo = typeInfo else { return [:] }
+
+      var state: [PropertyInfo: MutableStorage] = [:]
+      for property in typeInfo.properties where property.type is DynamicProperty.Type {
+        var value = property.get(from: view)
+        if var storage = value as? WritableValueStorage {
+          let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
+            guard let self = self else { return }
+            self.reconciler?.reconcile(from: self)
+          })
+          state[property] = box
+          storage.getter = { box.value }
+          storage.setter = { box.setValue($0, with: $1) }
+          value = storage
+        }
+        property.set(value: value, on: &view)
       }
-      property.set(value: value, on: &view)
+      return state
     }
-    return state
-  }
-
-  func clone() -> ViewNode<Renderer> {
-    .init(
-      bound: view!,
-      typeInfo: typeInfo,
-      visitView: visitView,
-      element: nil,
-      parent: nil,
-      reconciler: reconciler
-    )
-  }
 
-  public var debugDescription: String {
-    flush()
-  }
+    func clone() -> Reconciler<Renderer>.ViewNode {
+      .init(
+        bound: view!,
+        typeInfo: typeInfo,
+        visitView: visitView,
+        element: nil,
+        parent: nil,
+        reconciler: reconciler
+      )
+    }
 
-  private func flush(level: Int = 0) -> String {
-    let spaces = String(repeating: "  ", count: level)
-    let elementDescription: String
-    if let element = element {
-      elementDescription = """
-      (
-      \(spaces)  \(String(describing: element))
-      \(spaces))
-      """
-    } else {
-      elementDescription = ""
+    public var debugDescription: String {
+      flush()
     }
-    let childrenDescription: String
-    if children.isEmpty {
-      childrenDescription = ""
-    } else {
-      childrenDescription = """
-      {
-      \(children.map { $0.flush(level: level + 1) }.joined(separator: "\n"))
-      \(spaces)}
+
+    private func flush(level: Int = 0) -> String {
+      let spaces = String(repeating: "  ", count: level)
+      let elementDescription: String
+      if let element = element {
+        elementDescription = """
+        (
+        \(spaces)  \(String(describing: element))
+        \(spaces))
+        """
+      } else {
+        elementDescription = ""
+      }
+      let childrenDescription: String
+      if children.isEmpty {
+        childrenDescription = ""
+      } else {
+        childrenDescription = """
+        {
+        \(children.map { $0.flush(level: level + 1) }.joined(separator: "\n"))
+        \(spaces)}
+        """
+      }
+      return """
+      \(spaces)\(String(describing: type(of: view!))
+        .split(separator: "<")[0])\(elementDescription) \(childrenDescription)
       """
     }
-    return """
-    \(spaces)\(String(describing: type(of: view!))
-      .split(separator: "<")[0])\(elementDescription) \(childrenDescription)
-    """
   }
 }
 
-@_spi(TokamakCore) public extension ViewNode {
-  func traverse<Result>(_ work: (ViewNode<Renderer>) -> Result?) -> Result? {
+@_spi(TokamakCore) public extension Reconciler.ViewNode {
+  func traverse<Result>(_ work: (Reconciler<Renderer>.ViewNode) -> Result?) -> Result? {
     var stack = children
     while true {
       guard let next = stack.popLast() else { return nil }
@@ -211,7 +214,7 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
     }
   }
 
-  func findView(id: ViewNode<Renderer>.Identity) -> ViewNode<Renderer>? {
+  func findView(id: Reconciler<Renderer>.ViewNode.Identity) -> Reconciler<Renderer>.ViewNode? {
     traverse { node in
       node.id == id ? node : nil
     }
@@ -219,52 +222,70 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
 }
 
 public final class Reconciler<Renderer: GraphRenderer> {
-  var tree: ViewNode<Renderer>!
-  let renderer: Renderer
+  @_spi(TokamakCore) public var tree: ViewNode!
+  public let renderer: Renderer
 
   public init<V: View>(_ renderer: Renderer, _ view: V) {
     self.renderer = renderer
     let visitor = InitialTreeBuilderVisitor(reconciler: self)
     visitor.visit(view)
     tree = visitor.root
+    var mutations = [RenderableMutation<Renderer>]()
+    for mutation in visitor.mutations {
+      switch mutation {
+      case let .insert(viewNode, parent, sibling):
+        guard let element = viewNode.element else { continue }
+        mutations.append(.insert(
+          element: element,
+          parent: parent?.element ?? renderer.rootElement,
+          sibling: sibling?.element
+        ))
+      default: continue
+      }
+    }
   }
 
   enum Mutation {
-    case insert(ViewNode<Renderer>, parent: ViewNode<Renderer>, sibling: ViewNode<Renderer>?)
-    case remove(ViewNode<Renderer>, parent: ViewNode<Renderer>)
+    case insert(ViewNode, parent: ViewNode?, sibling: ViewNode?)
+    case remove(ViewNode, parent: ViewNode)
     case replace(
-      parent: ViewNode<Renderer>,
-      previous: ViewNode<Renderer>,
-      current: ViewNode<Renderer>
+      parent: ViewNode,
+      previous: ViewNode,
+      current: ViewNode
     )
-    case update(ViewNode<Renderer>, newElement: Renderer.ElementType)
+    case update(ViewNode, newElement: Renderer.ElementType)
   }
 
   final class InitialTreeBuilderVisitor: ViewVisitor {
-    var root: ViewNode<Renderer>
+    var root: ViewNode
     var reconciler: Reconciler<Renderer>
+    var mutations: [Mutation]
 
     init(reconciler: Reconciler<Renderer>) {
       self.reconciler = reconciler
       var view = EmptyView()
       root = .init(&view, element: nil, parent: nil, reconciler: reconciler)
+      mutations = [.insert(root, parent: nil, sibling: nil)]
     }
 
     func visit<V>(_ view: V) where V: View {
       root.view = view
       // Create a stack of nodes and the accessor for their children.
-      var accessors: [(ViewNode<Renderer>, (TreeReducer.Visitor) -> ())] =
+      var accessors: [(ViewNode, (TreeReducer.Visitor) -> ())] =
         [(root, { $0.visit(view) })]
       while true {
         guard let next = accessors.popLast() else { return } // Pop from the stack
         // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
         let reducer = TreeReducer.Visitor()
         next.1(reducer)
+        var lastSibling: ViewNode?
         for (index, child) in reducer.result.enumerated() {
           child.0.parent = next.0
           child.0.reconciler = reconciler
           child.0.id = .structural(index: index)
           next.0.children.append(child.0)
+          mutations.append(.insert(child.0, parent: next.0, sibling: lastSibling))
+          lastSibling = child.0
         }
         accessors.append(contentsOf: reducer.result)
       }
@@ -272,12 +293,12 @@ public final class Reconciler<Renderer: GraphRenderer> {
   }
 
   struct TreeReducer: ViewReducer {
-    typealias Result = [(ViewNode<Renderer>, visitChildren: (TreeReducer.Visitor) -> ())]
+    typealias Result = [(ViewNode, visitChildren: (TreeReducer.Visitor) -> ())]
     static var initialResult: Result { [] }
 
     static func reduce<V>(partialResult: Result, nextView: V) -> Result where V: View {
       var nextView = nextView
-      return partialResult + [(ViewNode<Renderer>(
+      return partialResult + [(ViewNode(
         &nextView,
         element: Renderer.isPrimitive(nextView) ? Renderer.ElementType(from: nextView) : nil,
         parent: nil,
@@ -287,16 +308,16 @@ public final class Reconciler<Renderer: GraphRenderer> {
   }
 
   final class ReconcilerVisitor: ViewVisitor {
-    var current: ViewNode<Renderer>
+    var current: ViewNode
     var mutations = [Mutation]()
 
-    init(current: ViewNode<Renderer>) {
+    init(current: ViewNode) {
       self.current = current
     }
 
     func visit<V>(_ view: V) where V: View {
       var nodeStack = [current]
-      var accessorStack: [(ViewNode<Renderer>, (TreeReducer.Visitor) -> ())] =
+      var accessorStack: [(ViewNode, (TreeReducer.Visitor) -> ())] =
         [(current.clone(), { view._visitChildren($0) })]
       while true {
         guard let nextNode = nodeStack.popLast(),
@@ -305,10 +326,10 @@ public final class Reconciler<Renderer: GraphRenderer> {
         // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
         let reducer = TreeReducer.Visitor()
         nextAccessor.1(reducer)
-        var lastSibling: ViewNode<Renderer>?
+        var lastSibling: ViewNode?
         for (index, child) in reducer.result
           .enumerated()
-        { // TODO: Reconcile with nextNode.children
+        {
           child.0.parent = nextAccessor.0
           child.0.reconciler = current.reconciler
           child.0.id = .structural(index: index)
@@ -337,7 +358,7 @@ public final class Reconciler<Renderer: GraphRenderer> {
     }
   }
 
-  func reconcile(from current: ViewNode<Renderer>) {
+  func reconcile(from current: ViewNode) {
     let visitor = ReconcilerVisitor(current: current)
     current.visitView(visitor)
     // Apply mutations to the tree and the renderer.
@@ -346,17 +367,19 @@ public final class Reconciler<Renderer: GraphRenderer> {
       switch mutation {
       case let .insert(viewNode, parent, sibling):
         if let sibling = sibling,
-           let index = parent.children.firstIndex(where: { $0 === sibling })
+           let index = parent?.children.firstIndex(where: { $0 === sibling })
         {
-          parent.children.insert(viewNode, at: index + 1)
+          parent?.children.insert(viewNode, at: index + 1)
         } else {
-          parent.children.insert(viewNode, at: 0)
+          parent?.children.insert(viewNode, at: 0)
         }
-        guard let element = viewNode.element,
-              let parentElement = parent.element
-        else { continue }
+        guard let element = viewNode.element else { continue }
         renderableMutations
-          .append(.insert(element: element, parent: parentElement, sibling: sibling?.element))
+          .append(.insert(
+            element: element,
+            parent: parent?.element ?? renderer.rootElement,
+            sibling: sibling?.element
+          ))
       case let .remove(viewNode, parent):
         guard let index = parent.children.firstIndex(where: { $0 === viewNode }) else { continue }
         parent.children.remove(at: index)
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
new file mode 100644
index 000000000..faf284ff1
--- /dev/null
+++ b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
@@ -0,0 +1,83 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/6/22.
+//
+
+import TokamakCore
+
+public final class HTMLElement: Element {
+  public static func == (lhs: HTMLElement, rhs: HTMLElement) -> Bool {
+    lhs.tag == rhs.tag && lhs.attributes == rhs.attributes
+  }
+
+  var tag: String
+  var attributes: [HTMLAttribute: String]
+  var innerHTML: String?
+  var children: [HTMLElement] = []
+
+  public init<V>(from primitiveView: V) where V: View {
+    guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
+    tag = primitiveView.tag
+    attributes = primitiveView.attributes
+    innerHTML = primitiveView.innerHTML
+  }
+
+  public init(
+    tag: String,
+    attributes: [HTMLAttribute: String],
+    innerHTML: String?,
+    children: [HTMLElement]
+  ) {
+    self.tag = tag
+    self.attributes = attributes
+    self.innerHTML = innerHTML
+    self.children = children
+  }
+}
+
+protocol HTMLConvertible {
+  var tag: String { get }
+  var attributes: [HTMLAttribute: String] { get }
+  var innerHTML: String? { get }
+}
+
+extension Text: HTMLConvertible {
+  var innerHTML: String? {
+    _TextProxy(self).rawText
+  }
+}
+
+public struct StaticHTMLGraphRenderer: GraphRenderer {
+  public let rootElement: HTMLElement
+
+  init() {
+    rootElement = .init(tag: "body", attributes: [:], innerHTML: nil, children: [])
+  }
+
+  public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
+    view is HTMLConvertible
+  }
+
+  public func commit(_ mutations: [RenderableMutation<Self>]) {
+    for mutation in mutations {
+      switch mutation {
+      case let .insert(element, parent, sibling):
+        if let index = parent.children.firstIndex(where: { $0 === sibling }) {
+          parent.children.insert(element, at: index + 1)
+        } else {
+          parent.children.insert(element, at: 0)
+        }
+      case let .remove(element, parent):
+        parent?.children.removeAll(where: { $0 === element })
+      case let .replace(parent, previous, replacement):
+        guard let index = parent.children.firstIndex(where: { $0 === previous }) else { continue }
+        parent.children[index] = replacement
+      case let .update(previous, newElement):
+        previous.tag = newElement.tag
+        previous.attributes = newElement.attributes
+      }
+    }
+  }
+}
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 77ffdb814..d32d9c5cc 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -100,11 +100,24 @@ final class TestElement: Element, CustomStringConvertible {
   var description: String {
     "\(renderedValue)\(closingTag)"
   }
+
+  init(renderedValue: String, closingTag: String) {
+    self.renderedValue = renderedValue
+    self.closingTag = closingTag
+  }
+
+  static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }
 }
 
 struct TestRenderer: GraphRenderer {
   typealias ElementType = TestElement
 
+  let rootElement: TestElement
+
+  init(_ rootElement: TestElement) {
+    self.rootElement = rootElement
+  }
+
   static func isPrimitive<V>(_ view: V) -> Bool where V: View {
     view is TestPrimitive
   }
@@ -127,7 +140,7 @@ struct TestRenderer: GraphRenderer {
 
 final class VisitorTests: XCTestCase {
   func testRenderer() {
-    let reconciler = TestRenderer().render(TestView())
+    let reconciler = TestRenderer(.root).render(TestView())
     let decrement = (
       reconciler.tree
         .findView(id: .structural(index: 0))? // TestView
diff --git a/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift b/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
new file mode 100644
index 000000000..efd79acf4
--- /dev/null
+++ b/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
@@ -0,0 +1,23 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/6/22.
+//
+
+@_spi(TokamakCore) import TokamakCore
+@testable import TokamakStaticHTML
+import XCTest
+
+struct TestView: View {
+  var body: some View {
+    Text("Hello, world!")
+  }
+}
+
+final class GraphRendererTests: XCTestCase {
+  func testRenderer() {
+    let reconciler = StaticHTMLGraphRenderer().render(TestView())
+    print(reconciler.tree)
+  }
+}

From 67b35093c111a6fe7859ac5aa696b475f33185df Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 7 Feb 2022 11:43:53 -0500
Subject: [PATCH 03/64] Add environment

---
 .../AttributeGraph/ViewArguments.swift        |  60 +++++++
 .../AttributeGraph/ViewGraph.swift            | 157 +++++++++++++-----
 .../TokamakCore/Modifiers/ViewModifier.swift  |  12 ++
 Sources/TokamakCore/Views/View.swift          |   1 +
 Sources/TokamakDOM/DOMGraphRenderer.swift     |   8 +
 .../StaticHTMLGraphRenderer.swift             |  33 +++-
 .../GraphRendererTests.swift                  |   7 +-
 7 files changed, 234 insertions(+), 44 deletions(-)
 create mode 100644 Sources/TokamakCore/AttributeGraph/ViewArguments.swift
 create mode 100644 Sources/TokamakDOM/DOMGraphRenderer.swift

diff --git a/Sources/TokamakCore/AttributeGraph/ViewArguments.swift b/Sources/TokamakCore/AttributeGraph/ViewArguments.swift
new file mode 100644
index 000000000..e6785fdb2
--- /dev/null
+++ b/Sources/TokamakCore/AttributeGraph/ViewArguments.swift
@@ -0,0 +1,60 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/7/22.
+//
+
+import Foundation
+
+public struct ViewInputs<V: View> {
+  let view: V
+  let proposedSize: CGSize?
+  let environment: EnvironmentValues
+}
+
+public struct ViewOutputs {
+  let environment: EnvironmentValues
+  let preferences: _PreferenceStore
+  let size: CGSize
+  let layoutComputer: LayoutComputer?
+}
+
+extension ViewOutputs {
+  init<V: View>(
+    inputs: ViewInputs<V>,
+    environment: EnvironmentValues? = nil,
+    preferences: _PreferenceStore? = nil,
+    size: CGSize? = nil,
+    layoutComputer: LayoutComputer? = nil
+  ) {
+    self.environment = environment ?? inputs.environment
+    self.preferences = preferences ?? .init()
+    self.size = size ?? inputs.proposedSize ?? .zero
+    self.layoutComputer = layoutComputer
+  }
+}
+
+protocol LayoutComputer {
+  func proposeSize<V: View>(for child: V, at index: Int) -> CGSize
+}
+
+public extension View {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(inputs: inputs)
+  }
+}
+
+public extension ModifiedContent where Content: View, Modifier: ViewModifier {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    var environment = inputs.environment
+    if let environmentWriter = inputs.view.modifier as? EnvironmentModifier {
+      environmentWriter.modifyEnvironment(&environment)
+    }
+    return .init(inputs: inputs, environment: environment)
+  }
+
+  func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
+  }
+}
diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
index d943d8aad..237456149 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -45,6 +45,11 @@ public protocol GraphRenderer {
   static func isPrimitive<V>(_ view: V) -> Bool where V: View
   func commit(_ mutations: [RenderableMutation<Self>])
   var rootElement: ElementType { get }
+  var defaultEnvironment: EnvironmentValues { get }
+}
+
+public extension GraphRenderer {
+  var defaultEnvironment: EnvironmentValues { .init() }
 }
 
 public enum RenderableMutation<Renderer: GraphRenderer> {
@@ -67,11 +72,13 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
     weak var reconciler: Reconciler<Renderer>?
 
     var view: Any!
+    var outputs: ViewOutputs!
     var visitView: ((ViewVisitor) -> ())!
     var id: Identity?
     var element: Renderer.ElementType?
     var children: [Reconciler<Renderer>.ViewNode]
     unowned var parent: Reconciler<Renderer>.ViewNode?
+    var parentElement: Renderer.ElementType?
     let typeInfo: TypeInfo?
     var state: [PropertyInfo: MutableStorage]!
 
@@ -97,31 +104,43 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
 
     init<V: View>(
       _ view: inout V,
-      element: Renderer.ElementType?,
+      element: ((V) -> Renderer.ElementType?)?,
       parent: Reconciler<Renderer>.ViewNode?,
+      parentElement: Renderer.ElementType?,
+      childIndex: Int,
       reconciler: Reconciler<Renderer>?
     ) {
       self.reconciler = reconciler
-      self.element = element
       children = []
       self.parent = parent
+      self.parentElement = parentElement
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
-      state = bindProperties(to: &view, typeInfo)
+      let viewInputs = ViewInputs<V>(
+        view: view,
+        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        environment: parent?.outputs.environment ?? .init()
+      )
+      state = bindProperties(to: &view, typeInfo, viewInputs)
       self.view = view
+      outputs = V._makeView(viewInputs)
       visitView = { [weak self] in
         guard let self = self else { return }
         // swiftlint:disable:next force_cast
         $0.visit(self.view as! V)
       }
+
+      self.element = element?(view)
     }
 
     init(
       bound view: Any,
+      outputs: ViewOutputs,
       typeInfo: TypeInfo?,
       visitView: @escaping (ViewVisitor) -> (),
       element: Renderer.ElementType?,
       parent: Reconciler<Renderer>.ViewNode?,
+      parentElement: Renderer.ElementType?,
       reconciler: Reconciler<Renderer>?
     ) {
       self.view = view
@@ -129,13 +148,16 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
       self.element = element
       children = []
       self.parent = parent
+      self.parentElement = parentElement
       self.typeInfo = typeInfo
       self.visitView = visitView
+      self.outputs = outputs
     }
 
     private func bindProperties<V: View>(
       to view: inout V,
-      _ typeInfo: TypeInfo?
+      _ typeInfo: TypeInfo?,
+      _ viewInputs: ViewInputs<V>
     ) -> [PropertyInfo: MutableStorage] {
       guard let typeInfo = typeInfo else { return [:] }
 
@@ -151,6 +173,9 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
           storage.getter = { box.value }
           storage.setter = { box.setValue($0, with: $1) }
           value = storage
+        } else if var environmentReader = value as? EnvironmentReader {
+          environmentReader.setContent(from: viewInputs.environment)
+          value = environmentReader
         }
         property.set(value: value, on: &view)
       }
@@ -160,10 +185,12 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
     func clone() -> Reconciler<Renderer>.ViewNode {
       .init(
         bound: view!,
+        outputs: outputs,
         typeInfo: typeInfo,
         visitView: visitView,
         element: nil,
         parent: nil,
+        parentElement: nil,
         reconciler: reconciler
       )
     }
@@ -228,7 +255,7 @@ public final class Reconciler<Renderer: GraphRenderer> {
   public init<V: View>(_ renderer: Renderer, _ view: V) {
     self.renderer = renderer
     let visitor = InitialTreeBuilderVisitor(reconciler: self)
-    visitor.visit(view)
+    visitor.visit(view.environmentValues(renderer.defaultEnvironment))
     tree = visitor.root
     var mutations = [RenderableMutation<Renderer>]()
     for mutation in visitor.mutations {
@@ -237,12 +264,13 @@ public final class Reconciler<Renderer: GraphRenderer> {
         guard let element = viewNode.element else { continue }
         mutations.append(.insert(
           element: element,
-          parent: parent?.element ?? renderer.rootElement,
+          parent: viewNode.parentElement ?? renderer.rootElement,
           sibling: sibling?.element
         ))
       default: continue
       }
     }
+    renderer.commit(mutations)
   }
 
   enum Mutation {
@@ -264,46 +292,86 @@ public final class Reconciler<Renderer: GraphRenderer> {
     init(reconciler: Reconciler<Renderer>) {
       self.reconciler = reconciler
       var view = EmptyView()
-      root = .init(&view, element: nil, parent: nil, reconciler: reconciler)
+      root = .init(
+        &view,
+        element: nil,
+        parent: nil,
+        parentElement: reconciler.renderer.rootElement,
+        childIndex: 0,
+        reconciler: reconciler
+      )
       mutations = [.insert(root, parent: nil, sibling: nil)]
     }
 
     func visit<V>(_ view: V) where V: View {
       root.view = view
       // Create a stack of nodes and the accessor for their children.
-      var accessors: [(ViewNode, (TreeReducer.Visitor) -> ())] =
-        [(root, { $0.visit(view) })]
+      var accessors: [TreeReducer.Result.Child] = [.init(
+        viewNode: root,
+        parentElement: root.element ?? root.parentElement,
+        visitChildren: { $0.visit(view) }
+      )]
       while true {
         guard let next = accessors.popLast() else { return } // Pop from the stack
         // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
         let reducer = TreeReducer.Visitor()
-        next.1(reducer)
+        reducer.result.parent = next.viewNode
+        reducer.result.parentElement = next.parentElement
+        next.visitChildren(reducer)
         var lastSibling: ViewNode?
-        for (index, child) in reducer.result.enumerated() {
-          child.0.parent = next.0
-          child.0.reconciler = reconciler
-          child.0.id = .structural(index: index)
-          next.0.children.append(child.0)
-          mutations.append(.insert(child.0, parent: next.0, sibling: lastSibling))
-          lastSibling = child.0
+        for (index, child) in reducer.result.children.enumerated() {
+          child.viewNode.reconciler = reconciler
+          child.viewNode.id = .structural(index: index)
+          next.viewNode.children.append(child.viewNode)
+          mutations.append(.insert(child.viewNode, parent: next.viewNode, sibling: lastSibling))
+          lastSibling = child.viewNode
         }
-        accessors.append(contentsOf: reducer.result)
+        accessors.append(contentsOf: reducer.result.children)
       }
     }
   }
 
   struct TreeReducer: ViewReducer {
-    typealias Result = [(ViewNode, visitChildren: (TreeReducer.Visitor) -> ())]
-    static var initialResult: Result { [] }
+    struct Data {
+      var parent: ViewNode?
+      /// The element to mount this, and its children, on.
+      var parentElement: Renderer.ElementType?
+      /// The collapsed children.
+      var children: [Child]
+
+      struct Child {
+        let viewNode: ViewNode
+        /// The element to use for this children of this child. Either its own element, or its parent if it has no element.
+        let parentElement: Renderer.ElementType?
+        let visitChildren: (TreeReducer.Visitor) -> ()
+      }
+    }
+
+    typealias Result = Data
+    static var initialResult: Result { .init(parent: nil, parentElement: nil, children: []) }
 
     static func reduce<V>(partialResult: Result, nextView: V) -> Result where V: View {
       var nextView = nextView
-      return partialResult + [(ViewNode(
+      let viewNode = ViewNode(
         &nextView,
-        element: Renderer.isPrimitive(nextView) ? Renderer.ElementType(from: nextView) : nil,
-        parent: nil,
+        element: { view in Renderer.isPrimitive(view) ? Renderer.ElementType(from: view) : nil },
+        parent: partialResult.parent,
+        parentElement: partialResult.parentElement,
+        childIndex: partialResult.children.count,
+        // The index is the same as the number of previous children.
         reconciler: nil
-      ), nextView._visitChildren)]
+      )
+      return .init(
+        parent: partialResult.parent,
+        parentElement: partialResult.parentElement,
+        children: partialResult.children + [
+          .init(
+            viewNode: viewNode,
+            parentElement: viewNode.element ?? partialResult.parentElement,
+            visitChildren: nextView._visitChildren
+          ),
+        ]
+      )
     }
   }
 
@@ -317,31 +385,38 @@ public final class Reconciler<Renderer: GraphRenderer> {
 
     func visit<V>(_ view: V) where V: View {
       var nodeStack = [current]
-      var accessorStack: [(ViewNode, (TreeReducer.Visitor) -> ())] =
-        [(current.clone(), { view._visitChildren($0) })]
+      var accessorStack: [TreeReducer.Result.Child] =
+        [.init(
+          viewNode: current.clone(),
+          parentElement: current.element ?? current.parentElement,
+          visitChildren: { view._visitChildren($0) }
+        )]
       while true {
         guard let nextNode = nodeStack.popLast(),
               let nextAccessor = accessorStack.popLast()
         else { return } // Pop from the stacks
         // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
         let reducer = TreeReducer.Visitor()
-        nextAccessor.1(reducer)
+        reducer.result.parent = nextAccessor.viewNode
+        reducer.result.parentElement = nextAccessor.parentElement
+        nextAccessor.visitChildren(reducer)
         var lastSibling: ViewNode?
-        for (index, child) in reducer.result
-          .enumerated()
-        {
-          child.0.parent = nextAccessor.0
-          child.0.reconciler = current.reconciler
-          child.0.id = .structural(index: index)
-          nextAccessor.0.children.append(child.0)
+        for (index, child) in reducer.result.children.enumerated() {
+          child.viewNode.reconciler = current.reconciler
+          child.viewNode.id = .structural(index: index)
+          nextAccessor.viewNode.children.append(child.viewNode)
           if !nextNode.children.indices.contains(index) {
-            mutations.append(.insert(child.0, parent: nextNode, sibling: lastSibling))
+            mutations.append(.insert(child.viewNode, parent: nextNode, sibling: lastSibling))
           } else {
             let previousChild = nextNode.children[index]
-            if child.0.typeInfo?.type != previousChild.typeInfo?.type {
+            if child.viewNode.typeInfo?.type != previousChild.typeInfo?.type {
               mutations
-                .append(.replace(parent: nextNode, previous: previousChild, current: child.0))
-            } else if let newElement = child.0.element,
+                .append(.replace(
+                  parent: nextNode,
+                  previous: previousChild,
+                  current: child.viewNode
+                ))
+            } else if let newElement = child.viewNode.element,
                       newElement != previousChild.element
             {
               mutations.append(.update(previousChild, newElement: newElement))
@@ -349,10 +424,10 @@ public final class Reconciler<Renderer: GraphRenderer> {
             lastSibling = previousChild
           }
         }
-        for removed in nextNode.children.dropFirst(reducer.result.count) {
+        for removed in nextNode.children.dropFirst(reducer.result.children.count) {
           mutations.append(.remove(removed, parent: nextNode))
         }
-        accessorStack.append(contentsOf: reducer.result)
+        accessorStack.append(contentsOf: reducer.result.children)
         nodeStack.append(contentsOf: nextNode.children)
       }
     }
@@ -377,7 +452,7 @@ public final class Reconciler<Renderer: GraphRenderer> {
         renderableMutations
           .append(.insert(
             element: element,
-            parent: parent?.element ?? renderer.rootElement,
+            parent: viewNode.parentElement ?? renderer.rootElement,
             sibling: sibling?.element
           ))
       case let .remove(viewNode, parent):
diff --git a/Sources/TokamakCore/Modifiers/ViewModifier.swift b/Sources/TokamakCore/Modifiers/ViewModifier.swift
index d4d343fe6..436e672f8 100644
--- a/Sources/TokamakCore/Modifiers/ViewModifier.swift
+++ b/Sources/TokamakCore/Modifiers/ViewModifier.swift
@@ -23,15 +23,27 @@ public struct _ViewModifier_Content<Modifier>: View
 {
   public let modifier: Modifier
   public let view: AnyView
+  let visitChildren: (ViewVisitor) -> ()
 
   public init(modifier: Modifier, view: AnyView) {
     self.modifier = modifier
     self.view = view
+    visitChildren = { $0.visit(view) }
+  }
+
+  public init<V: View>(modifier: Modifier, view: V) {
+    self.modifier = modifier
+    self.view = AnyView(view)
+    visitChildren = { $0.visit(view) }
   }
 
   public var body: some View {
     view
   }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitChildren(visitor)
+  }
 }
 
 public extension View {
diff --git a/Sources/TokamakCore/Views/View.swift b/Sources/TokamakCore/Views/View.swift
index 1d9a9b953..6f080f1ec 100644
--- a/Sources/TokamakCore/Views/View.swift
+++ b/Sources/TokamakCore/Views/View.swift
@@ -21,6 +21,7 @@ public protocol View {
   @ViewBuilder var body: Self.Body { get }
 
   func _visitChildren<V: ViewVisitor>(_ visitor: V)
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs
 }
 
 public extension Never {
diff --git a/Sources/TokamakDOM/DOMGraphRenderer.swift b/Sources/TokamakDOM/DOMGraphRenderer.swift
new file mode 100644
index 000000000..80c0e1ba5
--- /dev/null
+++ b/Sources/TokamakDOM/DOMGraphRenderer.swift
@@ -0,0 +1,8 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/7/22.
+//
+
+import Foundation
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
index faf284ff1..fdc2c02d5 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
@@ -7,7 +7,7 @@
 
 import TokamakCore
 
-public final class HTMLElement: Element {
+public final class HTMLElement: Element, CustomStringConvertible {
   public static func == (lhs: HTMLElement, rhs: HTMLElement) -> Bool {
     lhs.tag == rhs.tag && lhs.attributes == rhs.attributes
   }
@@ -35,6 +35,15 @@ public final class HTMLElement: Element {
     self.innerHTML = innerHTML
     self.children = children
   }
+
+  public var description: String {
+    """
+    <\(tag)\(attributes.map { " \($0.key.value)=\"\($0.value)\"" }
+      .joined(separator: ""))>\(innerHTML != nil ? "\(innerHTML!)" : "")\(!children
+      .isEmpty ? "\n" : "")\(children.map(\.description).joined(separator: "\n"))\(!children
+      .isEmpty ? "\n" : "")</\(tag)>
+    """
+  }
 }
 
 protocol HTMLConvertible {
@@ -49,11 +58,33 @@ extension Text: HTMLConvertible {
   }
 }
 
+extension VStack: HTMLConvertible {
+  var tag: String { "div" }
+  var attributes: [HTMLAttribute: String] {
+    let spacing = _VStackProxy(self).spacing
+    return [
+      "style": """
+      justify-items: \(alignment.cssValue);
+      \(hasSpacer ? "height: 100%;" : "")
+      \(fillCrossAxis ? "width: 100%;" : "")
+      \(spacing != defaultStackSpacing ? "--tokamak-stack-gap: \(spacing)px;" : "")
+      """,
+      "class": "_tokamak-stack _tokamak-vstack",
+    ]
+  }
+
+  var innerHTML: String? { nil }
+}
+
 public struct StaticHTMLGraphRenderer: GraphRenderer {
   public let rootElement: HTMLElement
+  public let defaultEnvironment: EnvironmentValues
 
   init() {
     rootElement = .init(tag: "body", attributes: [:], innerHTML: nil, children: [])
+    var environment = EnvironmentValues()
+    environment[_ColorSchemeKey.self] = .light
+    defaultEnvironment = environment
   }
 
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
diff --git a/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift b/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
index efd79acf4..72985211f 100644
--- a/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
+++ b/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
@@ -11,13 +11,16 @@ import XCTest
 
 struct TestView: View {
   var body: some View {
-    Text("Hello, world!")
+    VStack {
+      Text("A")
+      Text("B")
+    }
   }
 }
 
 final class GraphRendererTests: XCTestCase {
   func testRenderer() {
     let reconciler = StaticHTMLGraphRenderer().render(TestView())
-    print(reconciler.tree)
+    print(reconciler.renderer.rootElement)
   }
 }

From 7f96bc1b5b9762561e1f8e2ca5ed74f3efdf6d61 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 7 Feb 2022 14:54:55 -0500
Subject: [PATCH 04/64] Initial DOM renderer

---
 .../AttributeGraph/ViewGraph.swift            |  31 ++--
 Sources/TokamakDOM/DOMGraphRenderer.swift     | 161 +++++++++++++++++-
 Sources/TokamakDOM/index.html                 |  74 ++++++++
 Sources/TokamakDemo/main.swift                |  56 ++++--
 .../StaticHTMLGraphRenderer.swift             |  26 ++-
 5 files changed, 295 insertions(+), 53 deletions(-)
 create mode 100644 Sources/TokamakDOM/index.html

diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
index 237456149..dcd3c6992 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -56,7 +56,7 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
   case insert(
     element: Renderer.ElementType,
     parent: Renderer.ElementType,
-    sibling: Renderer.ElementType?
+    index: Int
   )
   case remove(element: Renderer.ElementType, parent: Renderer.ElementType?)
   case replace(
@@ -260,12 +260,12 @@ public final class Reconciler<Renderer: GraphRenderer> {
     var mutations = [RenderableMutation<Renderer>]()
     for mutation in visitor.mutations {
       switch mutation {
-      case let .insert(viewNode, parent, sibling):
+      case let .insert(viewNode, _, index):
         guard let element = viewNode.element else { continue }
         mutations.append(.insert(
           element: element,
           parent: viewNode.parentElement ?? renderer.rootElement,
-          sibling: sibling?.element
+          index: index
         ))
       default: continue
       }
@@ -274,7 +274,7 @@ public final class Reconciler<Renderer: GraphRenderer> {
   }
 
   enum Mutation {
-    case insert(ViewNode, parent: ViewNode?, sibling: ViewNode?)
+    case insert(ViewNode, parent: ViewNode?, index: Int)
     case remove(ViewNode, parent: ViewNode)
     case replace(
       parent: ViewNode,
@@ -300,7 +300,8 @@ public final class Reconciler<Renderer: GraphRenderer> {
         childIndex: 0,
         reconciler: reconciler
       )
-      mutations = [.insert(root, parent: nil, sibling: nil)]
+      mutations = [.insert(root, parent: nil, index: 0)]
+      print(root)
     }
 
     func visit<V>(_ view: V) where V: View {
@@ -318,13 +319,11 @@ public final class Reconciler<Renderer: GraphRenderer> {
         reducer.result.parent = next.viewNode
         reducer.result.parentElement = next.parentElement
         next.visitChildren(reducer)
-        var lastSibling: ViewNode?
         for (index, child) in reducer.result.children.enumerated() {
           child.viewNode.reconciler = reconciler
           child.viewNode.id = .structural(index: index)
           next.viewNode.children.append(child.viewNode)
-          mutations.append(.insert(child.viewNode, parent: next.viewNode, sibling: lastSibling))
-          lastSibling = child.viewNode
+          mutations.append(.insert(child.viewNode, parent: next.viewNode, index: index))
         }
         accessors.append(contentsOf: reducer.result.children)
       }
@@ -400,13 +399,12 @@ public final class Reconciler<Renderer: GraphRenderer> {
         reducer.result.parent = nextAccessor.viewNode
         reducer.result.parentElement = nextAccessor.parentElement
         nextAccessor.visitChildren(reducer)
-        var lastSibling: ViewNode?
         for (index, child) in reducer.result.children.enumerated() {
           child.viewNode.reconciler = current.reconciler
           child.viewNode.id = .structural(index: index)
           nextAccessor.viewNode.children.append(child.viewNode)
           if !nextNode.children.indices.contains(index) {
-            mutations.append(.insert(child.viewNode, parent: nextNode, sibling: lastSibling))
+            mutations.append(.insert(child.viewNode, parent: nextNode, index: index))
           } else {
             let previousChild = nextNode.children[index]
             if child.viewNode.typeInfo?.type != previousChild.typeInfo?.type {
@@ -421,7 +419,6 @@ public final class Reconciler<Renderer: GraphRenderer> {
             {
               mutations.append(.update(previousChild, newElement: newElement))
             }
-            lastSibling = previousChild
           }
         }
         for removed in nextNode.children.dropFirst(reducer.result.children.count) {
@@ -440,20 +437,14 @@ public final class Reconciler<Renderer: GraphRenderer> {
     var renderableMutations = [RenderableMutation<Renderer>]()
     for mutation in visitor.mutations {
       switch mutation {
-      case let .insert(viewNode, parent, sibling):
-        if let sibling = sibling,
-           let index = parent?.children.firstIndex(where: { $0 === sibling })
-        {
-          parent?.children.insert(viewNode, at: index + 1)
-        } else {
-          parent?.children.insert(viewNode, at: 0)
-        }
+      case let .insert(viewNode, parent, index):
+        parent?.children.insert(viewNode, at: index)
         guard let element = viewNode.element else { continue }
         renderableMutations
           .append(.insert(
             element: element,
             parent: viewNode.parentElement ?? renderer.rootElement,
-            sibling: sibling?.element
+            index: index
           ))
       case let .remove(viewNode, parent):
         guard let index = parent.children.firstIndex(where: { $0 === viewNode }) else { continue }
diff --git a/Sources/TokamakDOM/DOMGraphRenderer.swift b/Sources/TokamakDOM/DOMGraphRenderer.swift
index 80c0e1ba5..a875cccfe 100644
--- a/Sources/TokamakDOM/DOMGraphRenderer.swift
+++ b/Sources/TokamakDOM/DOMGraphRenderer.swift
@@ -5,4 +5,163 @@
 //  Created by Carson Katri on 2/7/22.
 //
 
-import Foundation
+import JavaScriptKit
+@_spi(TokamakCore) import TokamakCore
+@_spi(TokamakStaticHTML) import TokamakStaticHTML
+
+public final class DOMElement: Element {
+  public static func == (lhs: DOMElement, rhs: DOMElement) -> Bool {
+    lhs.tag == rhs.tag && lhs.attributes == rhs.attributes && lhs.innerHTML == rhs.innerHTML
+  }
+
+  var reference: JSObject?
+  var tag: String
+  var attributes: [HTMLAttribute: String]
+  var innerHTML: String?
+  var listeners: [String: Listener] = [:]
+
+  public init<V>(from primitiveView: V) where V: View {
+    guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
+    tag = primitiveView.tag
+    attributes = primitiveView.attributes
+    innerHTML = primitiveView.innerHTML
+
+    if let primitiveView = primitiveView as? DOMNodeConvertible {
+      listeners = primitiveView.listeners
+    }
+  }
+
+  public init(
+    reference: JSObject?,
+    tag: String,
+    attributes: [HTMLAttribute: String],
+    innerHTML: String?,
+    listeners: [String: Listener]
+  ) {
+    self.reference = reference
+    self.tag = tag
+    self.attributes = attributes
+    self.innerHTML = innerHTML
+    self.listeners = listeners
+  }
+}
+
+protocol DOMNodeConvertible: HTMLConvertible {
+  var listeners: [String: Listener] { get }
+}
+
+public struct DOMGraphRenderer: GraphRenderer {
+  public let rootElement: DOMElement
+  private let jsCommit: JSFunction
+
+  public var defaultEnvironment: EnvironmentValues {
+    var environment = EnvironmentValues()
+    environment[_ColorSchemeKey.self] = .light
+    return environment
+  }
+
+  public init(_ rootSelector: String) {
+    guard let Tokamak = JSObject.global.Tokamak.object else {
+      fatalError("""
+      Tokamak is not detected in the page's scripts. Ensure you included the Tokamak script in your site.
+      """)
+    }
+    jsCommit = Tokamak.commit.function!
+    guard let reference = document.querySelector!(rootSelector).object else {
+      fatalError("""
+      The root element with selector '\(rootSelector)' could not be found. \
+      Ensure this element exists in your site's index.html file.
+      """)
+    }
+    rootElement = .init(
+      reference: reference,
+      tag: "",
+      attributes: [:],
+      innerHTML: nil,
+      listeners: [:]
+    )
+    Tokamak.root = .object(reference)
+  }
+
+  public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
+    view is HTMLConvertible || view is DOMNodeConvertible
+  }
+
+  public func commit(_ mutations: [RenderableMutation<Self>]) {
+    jsCommit(mutations.map { $0.object() })
+  }
+}
+
+extension RenderableMutation where Renderer == DOMGraphRenderer {
+  func object() -> [String: ConvertibleToJSValue] {
+    switch self {
+    case let .insert(element, parent, index):
+      return [
+        "operation": 0,
+        "element": element.data,
+        "parent": parent.lazyReference,
+        "index": index,
+      ]
+    case let .remove(element, parent):
+      return [
+        "operation": 1,
+        "element": element.reference,
+        "parent": parent?.lazyReference,
+      ]
+    case let .replace(parent, previous, replacement):
+      return [
+        "operation": 2,
+        "parent": parent.lazyReference,
+        "element": previous.lazyReference,
+        "replacement": replacement.data,
+      ]
+    case let .update(previous, newElement):
+      return [
+        "operation": 3,
+        "previous": previous.reference,
+        "updates": newElement.data,
+      ]
+    }
+  }
+}
+
+extension DOMElement {
+  var data: [String: ConvertibleToJSValue] {
+    [
+      "tag": reference ?? tag,
+      "attributes": attributes.map {
+        [
+          "name": $0.key.value,
+          "property": $0.key.isUpdatedAsProperty,
+          "value": $0.value,
+        ]
+      },
+      "innerHTML": innerHTML,
+      "listeners": listeners.mapValues { listener in
+        JSClosure {
+          listener($0[0].object!)
+          return .undefined
+        }
+      },
+      "bind": JSOneshotClosure { [weak self] in
+        self?.reference = $0[0].object!
+        return .undefined
+      },
+    ]
+  }
+
+  var lazyReference: JSClosure {
+    JSClosure { _ in
+      guard let reference = self.reference else { return .undefined }
+      return .object(reference)
+    }
+  }
+}
+
+extension _PrimitiveButtonStyleBody: DOMNodeConvertible {
+  public var tag: String { "button" }
+  public var attributes: [HTMLAttribute: String] { [:] }
+  var listeners: [String: Listener] {
+    ["pointerup": { _ in self.action() }]
+  }
+}
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
new file mode 100644
index 000000000..d802ab033
--- /dev/null
+++ b/Sources/TokamakDOM/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Tokamak App</title>
+    <script>
+      window.Tokamak = {
+        root: undefined,
+        commit: (mutations) => {
+          for (const mutation of mutations) {
+            console.log(mutation)
+            switch (mutation.operation) {
+            case 0: // .insert
+              const parent = mutation.parent() ?? window.Tokamak.root
+              const element = document.createElement(mutation.element.tag)
+              for (const attribute of mutation.element.attributes) {
+                if (attribute.property)
+                  element[attribute.name] = attribute.value
+                else
+                  element.setAttribute(attribute.name, attribute.value)
+              }
+              if (!!mutation.element.innerHTML)
+                element.innerHTML = mutation.element.innerHTML
+              for (const [event, action] of Object.entries(mutation.element.listeners))
+                element.addEventListener(event, action)
+              mutation.element.bind(element)
+              let sibling = undefined
+              if (!!mutation.sibling)
+                sibling = mutation.sibling()
+              if (parent.children.length > mutation.index)
+                parent.insertBefore(element, parent.children[mutation.index])
+              else
+                parent.prepend(element)
+              break
+            case 1: // .remove
+              if (!mutation.element) {
+                console.error(`Cannot remove null from parent.`)
+                continue
+              }
+              mutation.parent()?.removeChild(mutation.element)
+              break
+            case 3: // .update
+              for (const attribute of mutation.updates.attributes) {
+                if (attribute.property)
+                  mutation.previous[attribute.name] = attribute.value
+                else
+                  mutation.previous.setAttribute(attribute.name, attribute.value)
+              }
+              mutation.previous.innerHTML = mutation.updates.innerHTML
+              for (const [event, action] of Object.entries(mutation.updates.listeners))
+                mutation.previous.addEventListener(event, action)
+              mutation.updates.bind(mutation.previous)
+              break
+            default:
+              console.error(`Unhandled mutation ${mutation.operation}`, mutation)
+              continue
+            }
+          }
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <!--
+      Your Tokamak app will be injected into the #root element,
+      unless a different mountpoint is specified in the renderer.
+    -->
+    <div id="root"></div>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+  </body>
+</html>
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index c29cbe20e..bda7b7c1a 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -14,27 +14,47 @@
 
 import TokamakShim
 
-@available(OSX 10.16, iOS 14.0, *)
-struct CustomScene: Scene {
-  @Environment(\.scenePhase) private var scenePhase
+struct TestView: View {
+  @State private var count = 0
 
-  var body: some Scene {
-    print("In CustomScene.body scenePhase is \(scenePhase)")
-    return WindowGroup("Tokamak Demo") {
-      TokamakDemoView()
+  var body: some View {
+    VStack {
+      Text("\(count)")
+      HStack {
+        if count > 0 {
+          Button("Decrement") { count -= 1 }
+        }
+        if count < 5 {
+          Button("Increment") { count += 1 }
+        }
+      }
     }
   }
 }
 
-@available(OSX 10.16, iOS 14.0, *)
-struct TokamakDemoApp: App {
-  var body: some Scene {
-    CustomScene()
-  }
-}
+let reconciler = DOMGraphRenderer("#root").render(TestView())
 
-// If @main was supported for executable Swift Packages,
-// this would match SwiftUI 100%
-if #available(OSX 10.16, iOS 14.0, *) {
-  TokamakDemoApp.main()
-}
+// @available(OSX 10.16, iOS 14.0, *)
+// struct CustomScene: Scene {
+//  @Environment(\.scenePhase) private var scenePhase
+//
+//  var body: some Scene {
+//    print("In CustomScene.body scenePhase is \(scenePhase)")
+//    return WindowGroup("Tokamak Demo") {
+//      TokamakDemoView()
+//    }
+//  }
+// }
+//
+// @available(OSX 10.16, iOS 14.0, *)
+// struct TokamakDemoApp: App {
+//  var body: some Scene {
+//    CustomScene()
+//  }
+// }
+//
+//// If @main was supported for executable Swift Packages,
+//// this would match SwiftUI 100%
+// if #available(OSX 10.16, iOS 14.0, *) {
+//  TokamakDemoApp.main()
+// }
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
index fdc2c02d5..4d4d9bbf8 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
@@ -46,21 +46,25 @@ public final class HTMLElement: Element, CustomStringConvertible {
   }
 }
 
-protocol HTMLConvertible {
+@_spi(TokamakStaticHTML) public protocol HTMLConvertible {
   var tag: String { get }
   var attributes: [HTMLAttribute: String] { get }
   var innerHTML: String? { get }
 }
 
-extension Text: HTMLConvertible {
-  var innerHTML: String? {
+public extension HTMLConvertible {
+  @_spi(TokamakStaticHTML) var innerHTML: String? { nil }
+}
+
+@_spi(TokamakStaticHTML) extension Text: HTMLConvertible {
+  @_spi(TokamakStaticHTML) public var innerHTML: String? {
     _TextProxy(self).rawText
   }
 }
 
-extension VStack: HTMLConvertible {
-  var tag: String { "div" }
-  var attributes: [HTMLAttribute: String] {
+@_spi(TokamakStaticHTML) extension VStack: HTMLConvertible {
+  @_spi(TokamakStaticHTML) public var tag: String { "div" }
+  @_spi(TokamakStaticHTML) public var attributes: [HTMLAttribute: String] {
     let spacing = _VStackProxy(self).spacing
     return [
       "style": """
@@ -72,8 +76,6 @@ extension VStack: HTMLConvertible {
       "class": "_tokamak-stack _tokamak-vstack",
     ]
   }
-
-  var innerHTML: String? { nil }
 }
 
 public struct StaticHTMLGraphRenderer: GraphRenderer {
@@ -94,12 +96,8 @@ public struct StaticHTMLGraphRenderer: GraphRenderer {
   public func commit(_ mutations: [RenderableMutation<Self>]) {
     for mutation in mutations {
       switch mutation {
-      case let .insert(element, parent, sibling):
-        if let index = parent.children.firstIndex(where: { $0 === sibling }) {
-          parent.children.insert(element, at: index + 1)
-        } else {
-          parent.children.insert(element, at: 0)
-        }
+      case let .insert(element, parent, index):
+        parent.children.insert(element, at: index)
       case let .remove(element, parent):
         parent?.children.removeAll(where: { $0 === element })
       case let .replace(parent, previous, replacement):

From 4ea2247b3479841bc91175843a921f4b32d1a191 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 11 Feb 2022 18:56:21 -0500
Subject: [PATCH 05/64] Nearly-working and simplified reconciler

---
 .../AttributeGraph/ViewArguments.swift        |  19 +-
 .../AttributeGraph/ViewGraph.swift            | 389 +++++++++---------
 Sources/TokamakDOM/DOMGraphRenderer.swift     |   4 +-
 Sources/TokamakDOM/index.html                 |  49 ++-
 .../StaticHTMLGraphRenderer.swift             |  18 +-
 .../TokamakReconcilerTests/VisitorTests.swift | 141 ++++---
 6 files changed, 360 insertions(+), 260 deletions(-)

diff --git a/Sources/TokamakCore/AttributeGraph/ViewArguments.swift b/Sources/TokamakCore/AttributeGraph/ViewArguments.swift
index e6785fdb2..c18e3bed4 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewArguments.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewArguments.swift
@@ -10,16 +10,26 @@ import Foundation
 public struct ViewInputs<V: View> {
   let view: V
   let proposedSize: CGSize?
-  let environment: EnvironmentValues
+  let environment: EnvironmentBox
 }
 
 public struct ViewOutputs {
-  let environment: EnvironmentValues
+  /// A container for a reference to the current `EnvironmentValues`.
+  /// This is stored as a reference to avoid copying the environment when unnecessary.
+  let environment: EnvironmentBox
   let preferences: _PreferenceStore
   let size: CGSize
   let layoutComputer: LayoutComputer?
 }
 
+final class EnvironmentBox {
+  let environment: EnvironmentValues
+
+  init(_ environment: EnvironmentValues) {
+    self.environment = environment
+  }
+}
+
 extension ViewOutputs {
   init<V: View>(
     inputs: ViewInputs<V>,
@@ -28,7 +38,8 @@ extension ViewOutputs {
     size: CGSize? = nil,
     layoutComputer: LayoutComputer? = nil
   ) {
-    self.environment = environment ?? inputs.environment
+    // Only replace the EnvironmentBox when we change the environment. Otherwise the same box can be reused.
+    self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
     self.size = size ?? inputs.proposedSize ?? .zero
     self.layoutComputer = layoutComputer
@@ -47,7 +58,7 @@ public extension View {
 
 public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
-    var environment = inputs.environment
+    var environment = inputs.environment.environment
     if let environmentWriter = inputs.view.modifier as? EnvironmentModifier {
       environmentWriter.modifyEnvironment(&environment)
     }
diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
index dcd3c6992..42f59ff0a 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -19,12 +19,15 @@ typealias ViewVisitorF<V: ViewVisitor> = (V) -> ()
 
 protocol ViewReducer {
   associatedtype Result
-  static var initialResult: Result { get }
   static func reduce<V: View>(partialResult: Result, nextView: V) -> Result
 }
 
 final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
-  var result: R.Result = R.initialResult
+  var result: R.Result
+
+  init(initialResult: R.Result) {
+    result = initialResult
+  }
 
   func visit<V>(_ view: V) where V: View {
     result = R.reduce(partialResult: result, nextView: view)
@@ -43,7 +46,7 @@ public protocol Element: AnyObject, Equatable {
 public protocol GraphRenderer {
   associatedtype ElementType: Element
   static func isPrimitive<V>(_ view: V) -> Bool where V: View
-  func commit(_ mutations: [RenderableMutation<Self>])
+  func commit(_ mutations: [Mutation<Self>])
   var rootElement: ElementType { get }
   var defaultEnvironment: EnvironmentValues { get }
 }
@@ -52,7 +55,7 @@ public extension GraphRenderer {
   var defaultEnvironment: EnvironmentValues { .init() }
 }
 
-public enum RenderableMutation<Renderer: GraphRenderer> {
+public enum Mutation<Renderer: GraphRenderer> {
   case insert(
     element: Renderer.ElementType,
     parent: Renderer.ElementType,
@@ -76,10 +79,10 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
     var visitView: ((ViewVisitor) -> ())!
     var id: Identity?
     var element: Renderer.ElementType?
-    var children: [Reconciler<Renderer>.ViewNode]
-    unowned var parent: Reconciler<Renderer>.ViewNode?
-    var parentElement: Renderer.ElementType?
-    let typeInfo: TypeInfo?
+    var children: [ViewNode]
+    unowned var parent: ViewNode?
+    var elementParent: ViewNode?
+    var typeInfo: TypeInfo?
     var state: [PropertyInfo: MutableStorage]!
 
     final class MutableStorage {
@@ -105,21 +108,21 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
     init<V: View>(
       _ view: inout V,
       element: ((V) -> Renderer.ElementType?)?,
-      parent: Reconciler<Renderer>.ViewNode?,
-      parentElement: Renderer.ElementType?,
+      parent: ViewNode?,
+      elementParent: ViewNode?,
       childIndex: Int,
       reconciler: Reconciler<Renderer>?
     ) {
       self.reconciler = reconciler
       children = []
       self.parent = parent
-      self.parentElement = parentElement
+      self.elementParent = elementParent
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
       let viewInputs = ViewInputs<V>(
         view: view,
         proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
-        environment: parent?.outputs.environment ?? .init()
+        environment: parent?.outputs.environment ?? .init(.init())
       )
       state = bindProperties(to: &view, typeInfo, viewInputs)
       self.view = view
@@ -140,7 +143,7 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
       visitView: @escaping (ViewVisitor) -> (),
       element: Renderer.ElementType?,
       parent: Reconciler<Renderer>.ViewNode?,
-      parentElement: Renderer.ElementType?,
+      elementParent: ViewNode?,
       reconciler: Reconciler<Renderer>?
     ) {
       self.view = view
@@ -148,7 +151,7 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
       self.element = element
       children = []
       self.parent = parent
-      self.parentElement = parentElement
+      self.elementParent = elementParent
       self.typeInfo = typeInfo
       self.visitView = visitView
       self.outputs = outputs
@@ -166,15 +169,16 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
         var value = property.get(from: view)
         if var storage = value as? WritableValueStorage {
           let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
-            guard let self = self else { return }
-            self.reconciler?.reconcile(from: self)
+            guard let self = self,
+                  let wip = self.reconciler?.reconcile(from: self) else { return }
+            self.apply(wip)
           })
           state[property] = box
           storage.getter = { box.value }
           storage.setter = { box.setValue($0, with: $1) }
           value = storage
         } else if var environmentReader = value as? EnvironmentReader {
-          environmentReader.setContent(from: viewInputs.environment)
+          environmentReader.setContent(from: viewInputs.environment.environment)
           value = environmentReader
         }
         property.set(value: value, on: &view)
@@ -182,19 +186,32 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
       return state
     }
 
-    func clone() -> Reconciler<Renderer>.ViewNode {
+    func clone() -> ViewNode {
       .init(
         bound: view!,
         outputs: outputs,
         typeInfo: typeInfo,
         visitView: visitView,
-        element: nil,
-        parent: nil,
-        parentElement: nil,
+        element: element,
+        parent: parent,
+        elementParent: elementParent,
         reconciler: reconciler
       )
     }
 
+    private func apply(_ wip: ViewNode) {
+      view = wip.view
+      outputs = wip.outputs
+      visitView = wip.visitView
+      id = wip.id
+      element = wip.element
+      children = wip.children
+      parent = wip.parent
+      elementParent = wip.elementParent
+      typeInfo = wip.typeInfo
+      state = wip.state
+    }
+
     public var debugDescription: String {
       flush()
     }
@@ -246,6 +263,11 @@ public enum RenderableMutation<Renderer: GraphRenderer> {
       node.id == id ? node : nil
     }
   }
+
+  func child(at index: Int) -> Reconciler<Renderer>.ViewNode? {
+    guard children.indices.contains(index) else { return nil }
+    return children[index]
+  }
 }
 
 public final class Reconciler<Renderer: GraphRenderer> {
@@ -254,100 +276,36 @@ public final class Reconciler<Renderer: GraphRenderer> {
 
   public init<V: View>(_ renderer: Renderer, _ view: V) {
     self.renderer = renderer
-    let visitor = InitialTreeBuilderVisitor(reconciler: self)
-    visitor.visit(view.environmentValues(renderer.defaultEnvironment))
-    tree = visitor.root
-    var mutations = [RenderableMutation<Renderer>]()
-    for mutation in visitor.mutations {
-      switch mutation {
-      case let .insert(viewNode, _, index):
-        guard let element = viewNode.element else { continue }
-        mutations.append(.insert(
-          element: element,
-          parent: viewNode.parentElement ?? renderer.rootElement,
-          index: index
-        ))
-      default: continue
-      }
-    }
-    renderer.commit(mutations)
-  }
-
-  enum Mutation {
-    case insert(ViewNode, parent: ViewNode?, index: Int)
-    case remove(ViewNode, parent: ViewNode)
-    case replace(
-      parent: ViewNode,
-      previous: ViewNode,
-      current: ViewNode
+    var view = view.environmentValues(renderer.defaultEnvironment)
+    tree = .init(
+      &view,
+      element: { _ in renderer.rootElement },
+      parent: nil,
+      elementParent: nil,
+      childIndex: 0,
+      reconciler: self
     )
-    case update(ViewNode, newElement: Renderer.ElementType)
-  }
-
-  final class InitialTreeBuilderVisitor: ViewVisitor {
-    var root: ViewNode
-    var reconciler: Reconciler<Renderer>
-    var mutations: [Mutation]
-
-    init(reconciler: Reconciler<Renderer>) {
-      self.reconciler = reconciler
-      var view = EmptyView()
-      root = .init(
-        &view,
-        element: nil,
-        parent: nil,
-        parentElement: reconciler.renderer.rootElement,
-        childIndex: 0,
-        reconciler: reconciler
-      )
-      mutations = [.insert(root, parent: nil, index: 0)]
-      print(root)
-    }
-
-    func visit<V>(_ view: V) where V: View {
-      root.view = view
-      // Create a stack of nodes and the accessor for their children.
-      var accessors: [TreeReducer.Result.Child] = [.init(
-        viewNode: root,
-        parentElement: root.element ?? root.parentElement,
-        visitChildren: { $0.visit(view) }
-      )]
-      while true {
-        guard let next = accessors.popLast() else { return } // Pop from the stack
-        // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
-        let reducer = TreeReducer.Visitor()
-        reducer.result.parent = next.viewNode
-        reducer.result.parentElement = next.parentElement
-        next.visitChildren(reducer)
-        for (index, child) in reducer.result.children.enumerated() {
-          child.viewNode.reconciler = reconciler
-          child.viewNode.id = .structural(index: index)
-          next.viewNode.children.append(child.viewNode)
-          mutations.append(.insert(child.viewNode, parent: next.viewNode, index: index))
-        }
-        accessors.append(contentsOf: reducer.result.children)
-      }
-    }
+    tree = reconcile(from: tree)
   }
 
   struct TreeReducer: ViewReducer {
     struct Data {
+      let reconciler: Reconciler?
       var parent: ViewNode?
       /// The element to mount this, and its children, on.
-      var parentElement: Renderer.ElementType?
+      var elementParent: ViewNode?
       /// The collapsed children.
       var children: [Child]
 
       struct Child {
         let viewNode: ViewNode
-        /// The element to use for this children of this child. Either its own element, or its parent if it has no element.
-        let parentElement: Renderer.ElementType?
+        /// The element to use for this children of this child (aka, the grandchildren). Either its own element, or its parent if it has no element.
+        let elementParent: ViewNode?
         let visitChildren: (TreeReducer.Visitor) -> ()
       }
     }
 
     typealias Result = Data
-    static var initialResult: Result { .init(parent: nil, parentElement: nil, children: []) }
 
     static func reduce<V>(partialResult: Result, nextView: V) -> Result where V: View {
       var nextView = nextView
@@ -355,18 +313,19 @@ public final class Reconciler<Renderer: GraphRenderer> {
         &nextView,
         element: { view in Renderer.isPrimitive(view) ? Renderer.ElementType(from: view) : nil },
         parent: partialResult.parent,
-        parentElement: partialResult.parentElement,
+        elementParent: partialResult.elementParent,
         childIndex: partialResult.children.count,
         // The index is the same as the number of previous children.
-        reconciler: nil
+        reconciler: partialResult.reconciler
       )
       return .init(
+        reconciler: partialResult.reconciler,
         parent: partialResult.parent,
-        parentElement: partialResult.parentElement,
+        elementParent: partialResult.elementParent,
         children: partialResult.children + [
           .init(
             viewNode: viewNode,
-            parentElement: viewNode.element ?? partialResult.parentElement,
+            elementParent: viewNode.element != nil ? viewNode : partialResult.elementParent,
             visitChildren: nextView._visitChildren
           ),
         ]
@@ -375,104 +334,162 @@ public final class Reconciler<Renderer: GraphRenderer> {
   }
 
   final class ReconcilerVisitor: ViewVisitor {
-    var current: ViewNode
-    var mutations = [Mutation]()
+    unowned let reconciler: Reconciler<Renderer>
+    var currentRoot: ViewNode
+    let wipRoot: ViewNode
+    var mutations = [Mutation<Renderer>]()
 
-    init(current: ViewNode) {
-      self.current = current
+    init(root: ViewNode, reconciler: Reconciler<Renderer>) {
+      self.reconciler = reconciler
+      currentRoot = root
+      wipRoot = root.clone()
     }
 
     func visit<V>(_ view: V) where V: View {
-      var nodeStack = [current]
-      var accessorStack: [TreeReducer.Result.Child] =
-        [.init(
-          viewNode: current.clone(),
-          parentElement: current.element ?? current.parentElement,
-          visitChildren: { view._visitChildren($0) }
-        )]
+      /// A stack for walking the current tree of view nodes.
+      var currentStack = [currentRoot]
+      /// A stack for walking a new tree of view nodes.
+      var wipStack = [TreeReducer.Result.Child(
+        viewNode: wipRoot,
+        elementParent: wipRoot.element != nil ? wipRoot : wipRoot.elementParent,
+        visitChildren: { view._visitChildren($0) }
+      )]
+      /// The number of actual elements added to any given `elementParent`.
+      var elementIndices = [ObjectIdentifier: Int]()
       while true {
-        guard let nextNode = nodeStack.popLast(),
-              let nextAccessor = accessorStack.popLast()
-        else { return } // Pop from the stacks
-        // Visit each child, collapsing the result into an array of (ViewNode, Accessor)
-        let reducer = TreeReducer.Visitor()
-        reducer.result.parent = nextAccessor.viewNode
-        reducer.result.parentElement = nextAccessor.parentElement
-        nextAccessor.visitChildren(reducer)
-        for (index, child) in reducer.result.children.enumerated() {
-          child.viewNode.reconciler = current.reconciler
-          child.viewNode.id = .structural(index: index)
-          nextAccessor.viewNode.children.append(child.viewNode)
-          if !nextNode.children.indices.contains(index) {
-            mutations.append(.insert(child.viewNode, parent: nextNode, index: index))
-          } else {
-            let previousChild = nextNode.children[index]
-            if child.viewNode.typeInfo?.type != previousChild.typeInfo?.type {
-              mutations
-                .append(.replace(
-                  parent: nextNode,
-                  previous: previousChild,
-                  current: child.viewNode
+        if let current = currentStack.popLast() {
+          if let wip = wipStack.popLast() {
+            if wip.viewNode !== wipRoot {
+              wip.viewNode.parent?.children.append(wip.viewNode)
+            }
+            if wip.viewNode.element != nil,
+               let parent = wip.viewNode.elementParent
+            {
+              let id = ObjectIdentifier(parent)
+              elementIndices[id] = elementIndices[id, default: 0] + 1
+            }
+
+            // Compute the next WIP children
+            let reducer = TreeReducer.Visitor(initialResult: .init(
+              reconciler: reconciler,
+              parent: wip.viewNode,
+              elementParent: wip.elementParent,
+              children: []
+            ))
+            wip.visitChildren(reducer)
+
+            if current.typeInfo?.type != wip.viewNode.typeInfo?.type {
+              // The new view is a completely different type than the previous element.
+              if let previous = current.element,
+                 let replacement = wip.viewNode.element,
+                 let parent = wip.viewNode.elementParent?.element
+              {
+                mutations
+                  .append(.replace(parent: parent, previous: previous, replacement: replacement))
+              } else {
+                // We couldn't replace the root, so remove the top-level children with elements of the original
+                var removeStack = [current]
+                while true {
+                  guard let remove = removeStack.popLast()
+                  else { break }
+                  if let element = remove.element {
+                    // This is a child with an element. Remove it and stop.
+                    mutations
+                      .append(.remove(element: element, parent: remove.elementParent?.element))
+                  } else {
+                    // This is a child without an element. Keep walking down until we hit an element.
+                    removeStack.append(contentsOf: remove.children.reversed())
+                  }
+                }
+              }
+              // Push the children of the replacement too.
+              var childStack = reducer.result.children
+              while true {
+                guard let child = childStack.popLast() else { break }
+                child.viewNode.parent?.children.append(child.viewNode)
+                if let element = child.viewNode.element,
+                   let parent = child.viewNode.elementParent?.element
+                {
+                  let id = ObjectIdentifier(parent)
+                  mutations
+                    .append(.insert(
+                      element: element,
+                      parent: parent,
+                      index: elementIndices[id, default: 0]
+                    ))
+                  elementIndices[id] = elementIndices[id, default: 0] + 1
+                }
+                let reducer = TreeReducer.Visitor(initialResult: .init(
+                  reconciler: reconciler,
+                  parent: child.viewNode,
+                  elementParent: child.elementParent,
+                  children: []
                 ))
-            } else if let newElement = child.viewNode.element,
-                      newElement != previousChild.element
+                child.visitChildren(reducer)
+                childStack.append(contentsOf: reducer.result.children.reversed())
+              }
+              // Push the current element back on the stack, because it may match something upcoming...
+//              currentStack.append(current)
+              continue // Don't push the current children yet, because we haven't actually matched it yet.
+            } else if let previous = current.element,
+                      let newElement = wip.viewNode.element,
+                      previous != newElement
             {
-              mutations.append(.update(previousChild, newElement: newElement))
+              mutations.append(.update(previous: previous, newElement: newElement))
+            } else {
+              // It matches, so keep the previous element in our WIP tree.
+              wip.viewNode.element = current.element
+            }
+            // Reverse it so we always walk down the first child,
+            // then back out and into its sibling, and so on.
+            wipStack.append(contentsOf: reducer.result.children.reversed())
+            currentStack.append(contentsOf: current.children.reversed())
+          } else {
+            // If a node in the current tree is not in the WIP tree, then we removed it.
+            if let element = current.element {
+              mutations.append(.remove(element: element, parent: current.elementParent?.element))
             }
+            return // And break from the loop.
           }
+        } else if let wip = wipStack.popLast() {
+          // If a node in the WIP tree is not in the current tree, then we inserted it.
+          wip.viewNode.parent?.children.append(wip.viewNode)
+          if let element = wip.viewNode.element,
+             let parent = wip.viewNode.elementParent?.element
+          {
+            let id = ObjectIdentifier(parent)
+            mutations.append(.insert(
+              element: element,
+              parent: parent,
+              index: elementIndices[id, default: 0]
+            ))
+            elementIndices[id] = elementIndices[id, default: 0] + 1
+          }
+          let reducer = TreeReducer.Visitor(initialResult: .init(
+            reconciler: reconciler,
+            parent: wip.viewNode,
+            elementParent: wip.elementParent,
+            children: []
+          ))
+          wip.visitChildren(reducer)
+          // Reverse it so we always walk down the first child,
+          // then back out and into its sibling, and so on.
+          wipStack.append(contentsOf: reducer.result.children.reversed())
+        } else {
+          // When we run out of nodes in the current tree and the WIP tree, break.
+          return
         }
-        for removed in nextNode.children.dropFirst(reducer.result.children.count) {
-          mutations.append(.remove(removed, parent: nextNode))
-        }
-        accessorStack.append(contentsOf: reducer.result.children)
-        nodeStack.append(contentsOf: nextNode.children)
       }
     }
   }
 
-  func reconcile(from current: ViewNode) {
-    let visitor = ReconcilerVisitor(current: current)
-    current.visitView(visitor)
-    // Apply mutations to the tree and the renderer.
-    var renderableMutations = [RenderableMutation<Renderer>]()
-    for mutation in visitor.mutations {
-      switch mutation {
-      case let .insert(viewNode, parent, index):
-        parent?.children.insert(viewNode, at: index)
-        guard let element = viewNode.element else { continue }
-        renderableMutations
-          .append(.insert(
-            element: element,
-            parent: viewNode.parentElement ?? renderer.rootElement,
-            index: index
-          ))
-      case let .remove(viewNode, parent):
-        guard let index = parent.children.firstIndex(where: { $0 === viewNode }) else { continue }
-        parent.children.remove(at: index)
-        guard let element = viewNode.element else { continue }
-        renderableMutations.append(.remove(element: element, parent: parent.element))
-      case let .replace(parent, previous, current):
-        guard let index = parent.children.firstIndex(where: { $0 === previous }) else { continue }
-        parent.children[index] = current
-        if let parentElement = parent.element,
-           let previousElement = previous.element,
-           let currentElement = current.element
-        {
-          renderableMutations
-            .append(.replace(
-              parent: parentElement,
-              previous: previousElement,
-              replacement: currentElement
-            ))
-        }
-      case let .update(viewNode, newElement):
-        if let previous = viewNode.element {
-          renderableMutations.append(.update(previous: previous, newElement: newElement))
-        }
-        viewNode.element = newElement
-      }
-    }
-    renderer.commit(renderableMutations)
+  func reconcile(from root: ViewNode) -> ViewNode {
+    let visitor = ReconcilerVisitor(root: root, reconciler: self)
+    root.visitView(visitor)
+    // Apply mutations to the rendered output.
+    renderer.commit(visitor.mutations)
+    // Return the new tree
+    return visitor.wipRoot
   }
 }
 
diff --git a/Sources/TokamakDOM/DOMGraphRenderer.swift b/Sources/TokamakDOM/DOMGraphRenderer.swift
index a875cccfe..6f7d6da1d 100644
--- a/Sources/TokamakDOM/DOMGraphRenderer.swift
+++ b/Sources/TokamakDOM/DOMGraphRenderer.swift
@@ -87,12 +87,12 @@ public struct DOMGraphRenderer: GraphRenderer {
     view is HTMLConvertible || view is DOMNodeConvertible
   }
 
-  public func commit(_ mutations: [RenderableMutation<Self>]) {
+  public func commit(_ mutations: [Mutation<Self>]) {
     jsCommit(mutations.map { $0.object() })
   }
 }
 
-extension RenderableMutation where Renderer == DOMGraphRenderer {
+extension Mutation where Renderer == DOMGraphRenderer {
   func object() -> [String: ConvertibleToJSValue] {
     switch self {
     case let .insert(element, parent, index):
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index d802ab033..59211d1f4 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -7,38 +7,49 @@
     <script>
       window.Tokamak = {
         root: undefined,
+        create: (element) => {
+          const result = document.createElement(element.tag)
+          for (const attribute of element.attributes) {
+            if (attribute.property)
+              result[attribute.name] = attribute.value
+            else
+              result.setAttribute(attribute.name, attribute.value)
+          }
+          if (!!element.innerHTML)
+            result.innerHTML = element.innerHTML
+          for (const [event, action] of Object.entries(element.listeners))
+            result.addEventListener(event, action)
+          element.bind(result)
+          return result
+        },
         commit: (mutations) => {
           for (const mutation of mutations) {
             console.log(mutation)
             switch (mutation.operation) {
             case 0: // .insert
               const parent = mutation.parent() ?? window.Tokamak.root
-              const element = document.createElement(mutation.element.tag)
-              for (const attribute of mutation.element.attributes) {
-                if (attribute.property)
-                  element[attribute.name] = attribute.value
-                else
-                  element.setAttribute(attribute.name, attribute.value)
-              }
-              if (!!mutation.element.innerHTML)
-                element.innerHTML = mutation.element.innerHTML
-              for (const [event, action] of Object.entries(mutation.element.listeners))
-                element.addEventListener(event, action)
-              mutation.element.bind(element)
-              let sibling = undefined
-              if (!!mutation.sibling)
-                sibling = mutation.sibling()
-              if (parent.children.length > mutation.index)
+              const element = window.Tokamak.create(mutation.element)
+              if (parent.children.length > mutation.index) {
+                console.log('Inserting', element, 'at', mutation.index, 'before', parent.children[mutation.index], 'on', parent)
                 parent.insertBefore(element, parent.children[mutation.index])
-              else
-                parent.prepend(element)
+              } else {
+                console.log('Appending', element, 'because parent', parent, 'only has', parent.children.length, 'and we want index', mutation.index)
+                parent.appendChild(element)
+              }
               break
             case 1: // .remove
               if (!mutation.element) {
                 console.error(`Cannot remove null from parent.`)
                 continue
               }
-              mutation.parent()?.removeChild(mutation.element)
+              mutation.element.remove()
+              break
+            case 2: // .replace
+              const replaceParent = mutation.parent() ?? window.Tokamak.root
+              const original = mutation.element()
+              const replacement = window.Tokamak.create(mutation.replacement)
+              console.log("Replace", original, "with", replacement, "on", replaceParent)
+              replaceParent.replaceChild(replacement, original)
               break
             case 3: // .update
               for (const attribute of mutation.updates.attributes) {
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
index 4d4d9bbf8..905a08a47 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
@@ -78,6 +78,22 @@ public extension HTMLConvertible {
   }
 }
 
+@_spi(TokamakStaticHTML) extension HStack: HTMLConvertible {
+  @_spi(TokamakStaticHTML) public var tag: String { "div" }
+  @_spi(TokamakStaticHTML) public var attributes: [HTMLAttribute: String] {
+    let spacing = _HStackProxy(self).spacing
+    return [
+      "style": """
+      align-items: \(alignment.cssValue);
+      \(hasSpacer ? "width: 100%;" : "")
+      \(fillCrossAxis ? "height: 100%;" : "")
+      \(spacing != defaultStackSpacing ? "--tokamak-stack-gap: \(spacing)px;" : "")
+      """,
+      "class": "_tokamak-stack _tokamak-hstack",
+    ]
+  }
+}
+
 public struct StaticHTMLGraphRenderer: GraphRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
@@ -93,7 +109,7 @@ public struct StaticHTMLGraphRenderer: GraphRenderer {
     view is HTMLConvertible
   }
 
-  public func commit(_ mutations: [RenderableMutation<Self>]) {
+  public func commit(_ mutations: [Mutation<Self>]) {
     for mutation in mutations {
       switch mutation {
       case let .insert(element, parent, index):
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index d32d9c5cc..78683f607 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -27,11 +27,17 @@ private struct TestView: View {
       VStack {
         Text("\(count)")
         HStack {
-          Button("Decrement") {
-            count -= 1
+          if count > 0 {
+            Button("Decrement") {
+              print("Decrement")
+              count -= 1
+            }
           }
-          Button("Increment") {
-            count += 1
+          if count < 5 {
+            Button("Increment") {
+              print("Increment")
+              count += 1
+            }
           }
         }
       }
@@ -122,7 +128,7 @@ struct TestRenderer: GraphRenderer {
     view is TestPrimitive
   }
 
-  func commit(_ mutations: [RenderableMutation<TestRenderer>]) {
+  func commit(_ mutations: [Mutation<TestRenderer>]) {
     for mutation in mutations {
       switch mutation {
       case let .insert(element, parent, sibling):
@@ -141,48 +147,87 @@ struct TestRenderer: GraphRenderer {
 final class VisitorTests: XCTestCase {
   func testRenderer() {
     let reconciler = TestRenderer(.root).render(TestView())
-    let decrement = (
-      reconciler.tree
-        .findView(id: .structural(index: 0))? // TestView
-        .findView(id: .structural(index: 0))? // Counter
-        .findView(id: .structural(index: 0))? // VStack
-        .findView(id: .structural(index: 0))? // TupleView
-        .findView(id: .structural(index: 1))? // HStack
-        .findView(id: .structural(index: 0))? // TupleView
-        .findView(id: .structural(index: 0))? // Increment Button
-        .view as? Button<Text>
-    )
-    let increment = (
-      reconciler.tree
-        .findView(id: .structural(index: 0))? // TestView
-        .findView(id: .structural(index: 0))? // Counter
-        .findView(id: .structural(index: 0))? // VStack
-        .findView(id: .structural(index: 0))? // TupleView
-        .findView(id: .structural(index: 1))? // HStack
-        .findView(id: .structural(index: 0))? // TupleView
-        .findView(id: .structural(index: 1))? // Increment Button
-        .view as? Button<Text>
-    )
-    increment?.action()
-    let text = reconciler.tree
-      .findView(id: .structural(index: 0))? // TestView
-      .findView(id: .structural(index: 0))? // Counter
-      .findView(id: .structural(index: 0))? // VStack
-      .findView(id: .structural(index: 0))? // TupleView
-      .findView(id: .structural(index: 0)) // Text
-    XCTAssertEqual(
-      text?.element?.description,
-      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
-    )
-    increment?.action()
-    XCTAssertEqual(
-      text?.element?.description,
-      "<TokamakCore.Text content=\"2\" modifiers=\"[]\"></TokamakCore.Text>"
-    )
-    decrement?.action()
-    XCTAssertEqual(
-      text?.element?.description,
-      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
-    )
+    print(reconciler.tree)
+    func decrement() {
+      (
+        reconciler.tree // ModifiedContent
+          .child(at: 0)? // _ViewModifier_Content
+          .child(at: 0)? // TestView
+          .child(at: 0)? // Counter
+          .child(at: 0)? // VStack
+          .child(at: 0)? // TupleView
+          .child(at: 1)? // HStack
+          .child(at: 0)? // TupleView
+          .child(at: 0)? // Optional
+          .child(at: 0)? // Button
+          .view as? Button<Text>
+      )?
+        .action()
+    }
+    func increment() {
+      (
+        reconciler.tree // ModifiedContent
+          .child(at: 0)? // _ViewModifier_Content
+          .child(at: 0)? // TestView
+          .child(at: 0)? // Counter
+          .child(at: 0)? // VStack
+          .child(at: 0)? // TupleView
+          .child(at: 1)? // HStack
+          .child(at: 0)? // TupleView
+          .child(at: 1)? // Optional
+          .child(at: 0)? // Button
+          .view as? Button<Text>
+      )?
+        .action()
+    }
+    for i in 0..<5 {
+      increment()
+    }
+    print(reconciler.tree)
+    decrement()
+    print(reconciler.tree)
+//    let decrement = (
+//      reconciler.tree
+//        .findView(id: .structural(index: 0))? // TestView
+//        .findView(id: .structural(index: 0))? // Counter
+//        .findView(id: .structural(index: 0))? // VStack
+//        .findView(id: .structural(index: 0))? // TupleView
+//        .findView(id: .structural(index: 1))? // HStack
+//        .findView(id: .structural(index: 0))? // TupleView
+//        .findView(id: .structural(index: 0))? // Increment Button
+//        .view as? Button<Text>
+//    )
+//    let increment = (
+//      reconciler.tree
+//        .findView(id: .structural(index: 0))? // TestView
+//        .findView(id: .structural(index: 0))? // Counter
+//        .findView(id: .structural(index: 0))? // VStack
+//        .findView(id: .structural(index: 0))? // TupleView
+//        .findView(id: .structural(index: 1))? // HStack
+//        .findView(id: .structural(index: 0))? // TupleView
+//        .findView(id: .structural(index: 1))? // Increment Button
+//        .view as? Button<Text>
+//    )
+//    increment?.action()
+//    let text = reconciler.tree
+//      .findView(id: .structural(index: 0))? // TestView
+//      .findView(id: .structural(index: 0))? // Counter
+//      .findView(id: .structural(index: 0))? // VStack
+//      .findView(id: .structural(index: 0))? // TupleView
+//      .findView(id: .structural(index: 0)) // Text
+//    XCTAssertEqual(
+//      text?.element?.description,
+//      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
+//    )
+//    increment?.action()
+//    XCTAssertEqual(
+//      text?.element?.description,
+//      "<TokamakCore.Text content=\"2\" modifiers=\"[]\"></TokamakCore.Text>"
+//    )
+//    decrement?.action()
+//    XCTAssertEqual(
+//      text?.element?.description,
+//      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
+//    )
   }
 }

From 026f00bf14a343f1d8d485b1082e4e01d353bd7d Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 15 Feb 2022 12:58:59 -0500
Subject: [PATCH 06/64] Working reconciler for HTML/DOM renderers

---
 Package.swift                                 |   3 +-
 .../AttributeGraph/ViewGraph.swift            | 636 +++++++++++-------
 Sources/TokamakCore/AttributeGraph/walk.swift |  63 ++
 Sources/TokamakDOM/DOMGraphRenderer.swift     | 104 +--
 Sources/TokamakDOM/index.html                 |   5 +-
 .../StaticHTMLGraphRenderer.swift             |  82 ++-
 .../TokamakReconcilerTests/VisitorTests.swift | 105 +--
 7 files changed, 632 insertions(+), 366 deletions(-)
 create mode 100644 Sources/TokamakCore/AttributeGraph/walk.swift

diff --git a/Package.swift b/Package.swift
index b379ee3f2..7d7971445 100644
--- a/Package.swift
+++ b/Package.swift
@@ -177,7 +177,8 @@ let package = Package(
     ),
     .target(
       name: "TokamakDOM",
-      dependencies: tokamakDOMDependencies
+      dependencies: tokamakDOMDependencies,
+      exclude: ["index.html"]
     ),
     .executableTarget(
       name: "TokamakDemo",
diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
index 42f59ff0a..09762d543 100644
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
@@ -19,9 +19,22 @@ typealias ViewVisitorF<V: ViewVisitor> = (V) -> ()
 
 protocol ViewReducer {
   associatedtype Result
+  static func reduce<V: View>(into partialResult: inout Result, nextView: V)
   static func reduce<V: View>(partialResult: Result, nextView: V) -> Result
 }
 
+extension ViewReducer {
+  static func reduce<V: View>(into partialResult: inout Result, nextView: V) {
+    partialResult = Self.reduce(partialResult: partialResult, nextView: nextView)
+  }
+
+  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result {
+    var result = partialResult
+    Self.reduce(into: &result, nextView: nextView)
+    return result
+  }
+}
+
 final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
   var result: R.Result
 
@@ -30,7 +43,7 @@ final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
   }
 
   func visit<V>(_ view: V) where V: View {
-    result = R.reduce(partialResult: result, nextView: view)
+    R.reduce(into: &result, nextView: view)
   }
 }
 
@@ -39,7 +52,15 @@ extension ViewReducer {
 }
 
 /// An output from a `Renderer`.
-public protocol Element: AnyObject, Equatable {
+public protocol Element: AnyObject {
+  associatedtype Data: ElementData
+  var data: Data { get }
+  init(from data: Data)
+  func update(with data: Data)
+}
+
+/// The data used to create an `Element`. We re-use `Element` instances, but can re-create and copy `ElementData` as often as needed.
+public protocol ElementData: Equatable {
   init<V: View>(from primitiveView: V)
 }
 
@@ -67,24 +88,43 @@ public enum Mutation<Renderer: GraphRenderer> {
     previous: Renderer.ElementType,
     replacement: Renderer.ElementType
   )
-  case update(previous: Renderer.ElementType, newElement: Renderer.ElementType)
+  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
 }
 
 @_spi(TokamakCore) public extension Reconciler {
   final class ViewNode: CustomDebugStringConvertible {
     weak var reconciler: Reconciler<Renderer>?
 
+    /// The underlying `View` instance.
     var view: Any!
+    /// Outputs from evaluating `View._makeView`
     var outputs: ViewOutputs!
+    /// A function to visit `view` generically.
     var visitView: ((ViewVisitor) -> ())!
+    /// The identity of this `View`
     var id: Identity?
+    /// The mounted element, if this is a Renderer primitive.
     var element: Renderer.ElementType?
-    var children: [ViewNode]
+    /// The first child node.
+    var child: ViewNode?
+    /// This node's right sibling.
+    var sibling: ViewNode?
+    /// An unowned reference to the parent node.
     unowned var parent: ViewNode?
-    var elementParent: ViewNode?
+    /// The nearest parent that can be mounted on.
+    unowned var elementParent: ViewNode?
+    /// The cached type information for the underlying `View`.
     var typeInfo: TypeInfo?
+    /// Boxes that store `State` data.
     var state: [PropertyInfo: MutableStorage]!
 
+    /// The WIP node if this is current, or the current node if this is WIP.
+    weak var alternate: ViewNode?
+
+    var createAndBindAlternate: (() -> ViewNode)?
+
+    /// A box holding a value for an `@State` property wrapper.
+    /// Will call `onSet` (usually a `Reconciler.reconcile` call) when updated.
     final class MutableStorage {
       private(set) var value: Any
       let onSet: () -> ()
@@ -107,14 +147,15 @@ public enum Mutation<Renderer: GraphRenderer> {
 
     init<V: View>(
       _ view: inout V,
-      element: ((V) -> Renderer.ElementType?)?,
+      element: Renderer.ElementType?,
       parent: ViewNode?,
       elementParent: ViewNode?,
       childIndex: Int,
       reconciler: Reconciler<Renderer>?
     ) {
       self.reconciler = reconciler
-      children = []
+      child = nil
+      sibling = nil
       self.parent = parent
       self.elementParent = elementParent
       typeInfo = TokamakCore.typeInfo(of: V.self)
@@ -133,28 +174,68 @@ public enum Mutation<Renderer: GraphRenderer> {
         $0.visit(self.view as! V)
       }
 
-      self.element = element?(view)
+      if let element = element {
+        self.element = element
+      } else if Renderer.isPrimitive(view) {
+        self.element = .init(from: .init(from: view))
+      }
+
+      let alternateView = view
+      createAndBindAlternate = {
+        // Create the alternate lazily
+        let alternate = ViewNode(
+          bound: alternateView,
+          alternate: self,
+          outputs: self.outputs,
+          typeInfo: self.typeInfo,
+          element: self.element,
+          parent: self.parent?.alternate,
+          elementParent: self.elementParent?.alternate,
+          reconciler: reconciler
+        )
+        self.alternate = alternate
+        if self.parent?.child === self {
+          self.parent?.alternate?.child = alternate // Link it with our parent's alternate.
+        } else {
+          // Find our left sibling.
+          var node = self.parent?.child
+          while node?.sibling !== self {
+            guard node?.sibling != nil else { return alternate }
+            node = node?.sibling
+          }
+          if node?.sibling === self {
+            node?.alternate?.sibling = alternate // Link it with our left sibling's alternate.
+          }
+        }
+        return alternate
+      }
     }
 
-    init(
-      bound view: Any,
+    init<V: View>(
+      bound view: V,
+      alternate: ViewNode,
       outputs: ViewOutputs,
       typeInfo: TypeInfo?,
-      visitView: @escaping (ViewVisitor) -> (),
       element: Renderer.ElementType?,
       parent: Reconciler<Renderer>.ViewNode?,
       elementParent: ViewNode?,
       reconciler: Reconciler<Renderer>?
     ) {
       self.view = view
+      self.alternate = alternate
       self.reconciler = reconciler
       self.element = element
-      children = []
+      child = nil
+      sibling = nil
       self.parent = parent
       self.elementParent = elementParent
       self.typeInfo = typeInfo
-      self.visitView = visitView
       self.outputs = outputs
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
     }
 
     private func bindProperties<V: View>(
@@ -169,9 +250,9 @@ public enum Mutation<Renderer: GraphRenderer> {
         var value = property.get(from: view)
         if var storage = value as? WritableValueStorage {
           let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
-            guard let self = self,
-                  let wip = self.reconciler?.reconcile(from: self) else { return }
-            self.apply(wip)
+            guard let self = self else { return }
+            self.reconciler?.reconcile(from: self)
+//            self.flip()
           })
           state[property] = box
           storage.getter = { box.value }
@@ -186,30 +267,61 @@ public enum Mutation<Renderer: GraphRenderer> {
       return state
     }
 
-    func clone() -> ViewNode {
-      .init(
-        bound: view!,
-        outputs: outputs,
-        typeInfo: typeInfo,
-        visitView: visitView,
-        element: element,
-        parent: parent,
-        elementParent: elementParent,
-        reconciler: reconciler
-      )
+    /// Flip this node with its `alternate` to reflect changes from the reconciler.
+    func flip() {
+      let child = child
+      self.child = alternate?.child
+      alternate?.child = child
+//      if self.parent?.child === self {
+//        self.parent?.child = alternate
+//        self.parent?.alternate?.child = self
+//      } else {
+//        var node = self.parent?.child
+//        while node != nil && node?.sibling !== self {
+//          node = node?.sibling
+//        }
+//        node?.alternate?.sibling = self
+//        node?.sibling = alternate
+//      }
+//      let alternateElement = alternate?.element
+//      let alternateElementParent = alternate?.elementParent
+//      let alternateParent = alternate?.parent
+//      let alternateSibling = alternate?.sibling
+//      alternate?.element = self.element
+//      alternate?.elementParent = self.elementParent
+//      alternate?.parent = self.parent
+//      alternate?.sibling = self.sibling
+//      self.element = alternateElement
+//      self.elementParent = alternateElementParent
+//      self.parent = alternateParent
+//      self.sibling = alternateSibling
     }
 
-    private func apply(_ wip: ViewNode) {
-      view = wip.view
-      outputs = wip.outputs
-      visitView = wip.visitView
-      id = wip.id
-      element = wip.element
-      children = wip.children
-      parent = wip.parent
-      elementParent = wip.elementParent
-      typeInfo = wip.typeInfo
-      state = wip.state
+    func update<V: View>(
+      with view: inout V,
+      childIndex: Int
+    ) -> Renderer.ElementType.Data? {
+      typeInfo = TokamakCore.typeInfo(of: V.self)
+
+      let viewInputs = ViewInputs<V>(
+        view: view,
+        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        environment: parent?.outputs.environment ?? .init(.init())
+      )
+      state = bindProperties(to: &view, typeInfo, viewInputs)
+      self.view = view
+      outputs = V._makeView(viewInputs)
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
+
+      if Renderer.isPrimitive(view) {
+        return .init(from: view)
+      } else {
+        return nil
+      }
     }
 
     public var debugDescription: String {
@@ -217,279 +329,295 @@ public enum Mutation<Renderer: GraphRenderer> {
     }
 
     private func flush(level: Int = 0) -> String {
-      let spaces = String(repeating: "  ", count: level)
-      let elementDescription: String
-      if let element = element {
-        elementDescription = """
-        (
-        \(spaces)  \(String(describing: element))
-        \(spaces))
-        """
-      } else {
-        elementDescription = ""
-      }
-      let childrenDescription: String
-      if children.isEmpty {
-        childrenDescription = ""
-      } else {
-        childrenDescription = """
-        {
-        \(children.map { $0.flush(level: level + 1) }.joined(separator: "\n"))
-        \(spaces)}
-        """
-      }
+//      var result = ""
+//      walk(self) { node in
+//        result += "\n\(node.typeInfo?.type ?? Any.self)\(node.element != nil ? "(\(node.element!))" : "")"
+//        return true
+//      }
+//      return result
+//      return "\(typeInfo?.type ?? Any.self)\(element != nil ? "(\(element!))" : "")"
+      let spaces = String(repeating: " ", count: level)
       return """
-      \(spaces)\(String(describing: type(of: view!))
-        .split(separator: "<")[0])\(elementDescription) \(childrenDescription)
+      \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
+        .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {
+      \(child?.flush(level: level + 2) ?? "")
+      \(spaces)}
+      \(sibling?.flush(level: level) ?? "")
       """
     }
   }
 }
 
-@_spi(TokamakCore) public extension Reconciler.ViewNode {
-  func traverse<Result>(_ work: (Reconciler<Renderer>.ViewNode) -> Result?) -> Result? {
-    var stack = children
-    while true {
-      guard let next = stack.popLast() else { return nil }
-      if let result = work(next) {
-        return result
-      }
-      stack.insert(contentsOf: next.children, at: 0)
-    }
-  }
-
-  func findView(id: Reconciler<Renderer>.ViewNode.Identity) -> Reconciler<Renderer>.ViewNode? {
-    traverse { node in
-      node.id == id ? node : nil
-    }
-  }
-
-  func child(at index: Int) -> Reconciler<Renderer>.ViewNode? {
-    guard children.indices.contains(index) else { return nil }
-    return children[index]
-  }
-}
-
 public final class Reconciler<Renderer: GraphRenderer> {
-  @_spi(TokamakCore) public var tree: ViewNode!
+  @_spi(TokamakCore) public var current: ViewNode!
+  private var alternate: ViewNode!
   public let renderer: Renderer
 
   public init<V: View>(_ renderer: Renderer, _ view: V) {
     self.renderer = renderer
     var view = view.environmentValues(renderer.defaultEnvironment)
-    tree = .init(
+    current = .init(
       &view,
-      element: { _ in renderer.rootElement },
+      element: renderer.rootElement,
       parent: nil,
       elementParent: nil,
       childIndex: 0,
       reconciler: self
     )
-    tree = reconcile(from: tree)
+    // Start by building the initial tree.
+    alternate = current.createAndBindAlternate?()
+    reconcile(from: current)
+    // Copy this tree into the alternate so we have two identical trees as a starting point.
+//    self.reconcile(from: current)
   }
 
+  /// Convert the first level of children of a `View` into a linked list of `ViewNode`s.
   struct TreeReducer: ViewReducer {
-    struct Data {
-      let reconciler: Reconciler?
-      var parent: ViewNode?
-      /// The element to mount this, and its children, on.
-      var elementParent: ViewNode?
-      /// The collapsed children.
-      var children: [Child]
-
-      struct Child {
-        let viewNode: ViewNode
-        /// The element to use for this children of this child (aka, the grandchildren). Either its own element, or its parent if it has no element.
-        let elementParent: ViewNode?
-        let visitChildren: (TreeReducer.Visitor) -> ()
+    final class Result {
+      // For references
+      let viewNode: ViewNode?
+      let visitChildren: (TreeReducer.Visitor) -> ()
+      unowned var parent: Result?
+      var child: Result?
+      var sibling: Result?
+      var newData: Renderer.ElementType.Data?
+
+      // For reducing
+      var childrenCount: Int = 0
+      var lastSibling: Result?
+      var nextExisting: ViewNode?
+      var nextExistingAlternate: ViewNode?
+
+      init(
+        viewNode: ViewNode?,
+        visitChildren: @escaping (TreeReducer.Visitor) -> (),
+        parent: Result?,
+        child: ViewNode?,
+        alternateChild: ViewNode?,
+        newData: Renderer.ElementType.Data? = nil
+      ) {
+        self.viewNode = viewNode
+        self.visitChildren = visitChildren
+        self.parent = parent
+        nextExisting = child
+        nextExistingAlternate = alternateChild
+        self.newData = newData
       }
     }
 
-    typealias Result = Data
-
-    static func reduce<V>(partialResult: Result, nextView: V) -> Result where V: View {
+    static func reduce<V>(into partialResult: inout Result, nextView: V) where V: View {
+      // Create the node and its element.
       var nextView = nextView
-      let viewNode = ViewNode(
-        &nextView,
-        element: { view in Renderer.isPrimitive(view) ? Renderer.ElementType(from: view) : nil },
-        parent: partialResult.parent,
-        elementParent: partialResult.elementParent,
-        childIndex: partialResult.children.count,
-        // The index is the same as the number of previous children.
-        reconciler: partialResult.reconciler
-      )
-      return .init(
-        reconciler: partialResult.reconciler,
-        parent: partialResult.parent,
-        elementParent: partialResult.elementParent,
-        children: partialResult.children + [
-          .init(
-            viewNode: viewNode,
-            elementParent: viewNode.element != nil ? viewNode : partialResult.elementParent,
-            visitChildren: nextView._visitChildren
-          ),
-        ]
-      )
+      let resultChild: Result
+      if let existing = partialResult.nextExisting {
+        let newData = existing.update(
+          with: &nextView,
+          childIndex: partialResult.childrenCount
+        )
+        resultChild = Result(
+          viewNode: existing,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: existing.child,
+          alternateChild: existing.alternate?.child,
+          newData: newData
+        )
+        partialResult.nextExisting = existing.sibling
+      } else {
+        let viewNode = ViewNode(
+          &nextView,
+          element: partialResult.nextExistingAlternate?.element,
+          parent: partialResult.viewNode,
+          elementParent: partialResult.viewNode?.element != nil
+            ? partialResult.viewNode
+            : partialResult.viewNode?.elementParent,
+          childIndex: partialResult.childrenCount,
+          reconciler: partialResult.viewNode?.reconciler
+        )
+        if let alternate = partialResult.nextExistingAlternate {
+          viewNode.alternate = alternate
+          partialResult.nextExistingAlternate = alternate.sibling
+        }
+        resultChild = Result(
+          viewNode: viewNode,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: nil,
+          alternateChild: viewNode.alternate?.child
+        )
+      }
+      partialResult.childrenCount += 1
+      // Get the last child element we've processed, and add the new child as its sibling.
+      if let lastSibling = partialResult.lastSibling {
+        lastSibling.viewNode?.sibling = resultChild.viewNode
+        lastSibling.sibling = resultChild
+      } else {
+        // Otherwise setup the first child
+        partialResult.viewNode?.child = resultChild.viewNode
+        partialResult.child = resultChild
+      }
+      partialResult.lastSibling = resultChild
     }
   }
 
   final class ReconcilerVisitor: ViewVisitor {
     unowned let reconciler: Reconciler<Renderer>
+    /// The current, mounted `ViewNode`.
     var currentRoot: ViewNode
-    let wipRoot: ViewNode
     var mutations = [Mutation<Renderer>]()
 
     init(root: ViewNode, reconciler: Reconciler<Renderer>) {
       self.reconciler = reconciler
       currentRoot = root
-      wipRoot = root.clone()
     }
 
+    /// Walk the current tree, recomputing at each step to check for discrepancies.
+    ///
+    /// Parent-first depth-first traversal.
+    /// Take this `View` tree for example.
+    /// ```swift
+    /// VStack {
+    ///   HStack {
+    ///     Text("A")
+    ///     Text("B")
+    ///   }
+    ///   Text("C")
+    /// }
+    /// ```
+    /// Basically, we read it like this:
+    /// 1. `VStack` has children, so we go to it's first child, `HStack`.
+    /// 2. `HStack` has children, so we go further to it's first child, `Text`.
+    /// 3. `Text` has no child, but has a sibling, so we go to that.
+    /// 4. `Text` has no child and no sibling, so we return to the `HStack`.
+    /// 5. We've already read the children, so we look for a sibling, `Text`.
+    /// 6. `Text` has no children and no sibling, so we return to the `VStack.`
+    /// We finish once we've returned to the root element.
+    /// ```
+    ///    ┌──────┐
+    ///    │VStack│
+    ///    └──┬───┘
+    ///   ▲ 1 │
+    ///   │   └──►┌──────┐
+    ///   │       │HStack│
+    ///   │     ┌─┴───┬──┘
+    ///   │     │   ▲ │ 2
+    ///   │     │   │ │  ┌────┐
+    ///   │     │   │ └─►│Text├─┐
+    /// 6 │     │ 4 │    └────┘ │
+    ///   │     │   │           │ 3
+    ///   │   5 │   │    ┌────┐ │
+    ///   │     │   └────┤Text│◄┘
+    ///   │     │        └────┘
+    ///   │     │
+    ///   │     └►┌────┐
+    ///   │       │Text│
+    ///   └───────┴────┘
+    /// ```
     func visit<V>(_ view: V) where V: View {
-      /// A stack for walking the current tree of view nodes.
-      var currentStack = [currentRoot]
-      /// A stack for walking a new tree of view nodes.
-      var wipStack = [TreeReducer.Result.Child(
-        viewNode: wipRoot,
-        elementParent: wipRoot.element != nil ? wipRoot : wipRoot.elementParent,
-        visitChildren: { view._visitChildren($0) }
-      )]
-      /// The number of actual elements added to any given `elementParent`.
+      let alternateRoot: ViewNode?
+      if let alternate = currentRoot.alternate {
+        alternateRoot = alternate
+      } else {
+        alternateRoot = currentRoot.createAndBindAlternate?()
+      }
+      let rootResult = TreeReducer.Result(
+        viewNode: alternateRoot, // The alternate is the WIP node.
+        visitChildren: view._visitChildren,
+        parent: nil,
+        child: alternateRoot?.child,
+        alternateChild: currentRoot.child
+      )
+      var node = rootResult
       var elementIndices = [ObjectIdentifier: Int]()
+
+      func reconcile(_ node: TreeReducer.Result) {
+        // Compare `node` and its alternate.
+        if let element = node.viewNode?.element,
+           let parent = node.viewNode?.elementParent?.element
+        {
+          let key = ObjectIdentifier(parent)
+          let index = elementIndices[key, default: 0]
+          if node.viewNode?.alternate == nil { // This didn't exist before (no alternate)
+            mutations.append(.insert(element: element, parent: parent, index: index))
+          } else if let newData = node.newData,
+                    newData != element.data
+          { // This changed.
+            mutations.append(.update(previous: element, newData: newData))
+          }
+          elementIndices[key] = index + 1
+        }
+      }
+
       while true {
-        if let current = currentStack.popLast() {
-          if let wip = wipStack.popLast() {
-            if wip.viewNode !== wipRoot {
-              wip.viewNode.parent?.children.append(wip.viewNode)
-            }
-            if wip.viewNode.element != nil,
-               let parent = wip.viewNode.elementParent
+        // Perform work on the node
+        reconcile(node)
+        let reducer = TreeReducer.Visitor(initialResult: node)
+        node.visitChildren(reducer)
+
+        // Setup the alternate if it doesn't exist yet.
+        if node.viewNode?.alternate == nil {
+          node.viewNode?.createAndBindAlternate?()
+        }
+
+        // Walk into the child
+        if let child = reducer.result.child {
+          node = child
+          continue
+        } else if let alternateChild = node.viewNode?.alternate?.child {
+          walk(alternateChild) { node in
+            if let element = node.element,
+               let parent = node.elementParent?.element
             {
-              let id = ObjectIdentifier(parent)
-              elementIndices[id] = elementIndices[id, default: 0] + 1
+              // The alternate has a child that no longer exists
+              self.mutations.append(.remove(element: element, parent: parent))
             }
+            return true
+          }
+        }
+        if reducer.result.child == nil {
+          node.viewNode?.child = nil // Make sure we clear the child if there was none
+        }
 
-            // Compute the next WIP children
-            let reducer = TreeReducer.Visitor(initialResult: .init(
-              reconciler: reconciler,
-              parent: wip.viewNode,
-              elementParent: wip.elementParent,
-              children: []
-            ))
-            wip.visitChildren(reducer)
-
-            if current.typeInfo?.type != wip.viewNode.typeInfo?.type {
-              // The new view is a completely different type than the previous element.
-              if let previous = current.element,
-                 let replacement = wip.viewNode.element,
-                 let parent = wip.viewNode.elementParent?.element
-              {
-                mutations
-                  .append(.replace(parent: parent, previous: previous, replacement: replacement))
-              } else {
-                // We couldn't replace the root, so remove the top-level children with elements of the original
-                var removeStack = [current]
-                while true {
-                  guard let remove = removeStack.popLast()
-                  else { break }
-                  if let element = remove.element {
-                    // This is a child with an element. Remove it and stop.
-                    mutations
-                      .append(.remove(element: element, parent: remove.elementParent?.element))
-                  } else {
-                    // This is a child without an element. Keep walking down until we hit an element.
-                    removeStack.append(contentsOf: remove.children.reversed())
-                  }
-                }
-              }
-              // Push the children of the replacement too.
-              var childStack = reducer.result.children
-              while true {
-                guard let child = childStack.popLast() else { break }
-                child.viewNode.parent?.children.append(child.viewNode)
-                if let element = child.viewNode.element,
-                   let parent = child.viewNode.elementParent?.element
-                {
-                  let id = ObjectIdentifier(parent)
-                  mutations
-                    .append(.insert(
-                      element: element,
-                      parent: parent,
-                      index: elementIndices[id, default: 0]
-                    ))
-                  elementIndices[id] = elementIndices[id, default: 0] + 1
-                }
-                let reducer = TreeReducer.Visitor(initialResult: .init(
-                  reconciler: reconciler,
-                  parent: child.viewNode,
-                  elementParent: child.elementParent,
-                  children: []
-                ))
-                child.visitChildren(reducer)
-                childStack.append(contentsOf: reducer.result.children.reversed())
-              }
-              // Push the current element back on the stack, because it may match something upcoming...
-//              currentStack.append(current)
-              continue // Don't push the current children yet, because we haven't actually matched it yet.
-            } else if let previous = current.element,
-                      let newElement = wip.viewNode.element,
-                      previous != newElement
+        // When we walk back to the root, exit
+        if node === rootResult {
+          return
+        }
+        // Walk back up until we find a sibling
+        while node.sibling == nil {
+          var alternateSibling = node.viewNode?.alternate?.sibling
+          while alternateSibling != nil { // The alternate had siblings that no longer exist.
+            if let element = alternateSibling?.element,
+               let parent = alternateSibling?.elementParent?.element
             {
-              mutations.append(.update(previous: previous, newElement: newElement))
-            } else {
-              // It matches, so keep the previous element in our WIP tree.
-              wip.viewNode.element = current.element
-            }
-            // Reverse it so we always walk down the first child,
-            // then back out and into its sibling, and so on.
-            wipStack.append(contentsOf: reducer.result.children.reversed())
-            currentStack.append(contentsOf: current.children.reversed())
-          } else {
-            // If a node in the current tree is not in the WIP tree, then we removed it.
-            if let element = current.element {
-              mutations.append(.remove(element: element, parent: current.elementParent?.element))
+              mutations.append(.remove(element: element, parent: parent))
             }
-            return // And break from the loop.
+            alternateSibling = alternateSibling?.sibling
           }
-        } else if let wip = wipStack.popLast() {
-          // If a node in the WIP tree is not in the current tree, then we inserted it.
-          wip.viewNode.parent?.children.append(wip.viewNode)
-          if let element = wip.viewNode.element,
-             let parent = wip.viewNode.elementParent?.element
-          {
-            let id = ObjectIdentifier(parent)
-            mutations.append(.insert(
-              element: element,
-              parent: parent,
-              index: elementIndices[id, default: 0]
-            ))
-            elementIndices[id] = elementIndices[id, default: 0] + 1
+          // When we walk back to the root, exit
+          guard let parent = node.parent,
+                parent !== currentRoot.alternate
+          else {
+            return
           }
-          let reducer = TreeReducer.Visitor(initialResult: .init(
-            reconciler: reconciler,
-            parent: wip.viewNode,
-            elementParent: wip.elementParent,
-            children: []
-          ))
-          wip.visitChildren(reducer)
-          // Reverse it so we always walk down the first child,
-          // then back out and into its sibling, and so on.
-          wipStack.append(contentsOf: reducer.result.children.reversed())
-        } else {
-          // When we run out of nodes in the current tree and the WIP tree, break.
-          return
+          node = parent
         }
+        // Walk the sibling
+        // swiftlint:disable:next force_unwrap
+        node = node.sibling!
       }
     }
   }
 
-  func reconcile(from root: ViewNode) -> ViewNode {
+  func reconcile(from root: ViewNode) {
     let visitor = ReconcilerVisitor(root: root, reconciler: self)
     root.visitView(visitor)
     // Apply mutations to the rendered output.
     renderer.commit(visitor.mutations)
-    // Return the new tree
-    return visitor.wipRoot
+
+    // Swap the root out for its alternate.
+    let child = root.child
+    root.child = root.alternate?.child
+    root.alternate?.child = child
   }
 }
 
diff --git a/Sources/TokamakCore/AttributeGraph/walk.swift b/Sources/TokamakCore/AttributeGraph/walk.swift
new file mode 100644
index 000000000..341da3544
--- /dev/null
+++ b/Sources/TokamakCore/AttributeGraph/walk.swift
@@ -0,0 +1,63 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/11/22.
+//
+
+enum WalkWorkResult<Success> {
+  case `continue`
+  case `break`(with: Success)
+  case pause
+}
+
+enum WalkResult<Renderer: GraphRenderer, Success> {
+  case success(Success)
+  case finished
+  case paused(at: Reconciler<Renderer>.ViewNode)
+}
+
+@discardableResult
+func walk<Renderer: GraphRenderer>(
+  _ root: Reconciler<Renderer>.ViewNode,
+  _ work: @escaping (Reconciler<Renderer>.ViewNode) throws -> Bool
+) rethrows -> WalkResult<Renderer, ()> {
+  try walk(root) {
+    try work($0) ? .continue : .pause
+  }
+}
+
+/// Parent-first depth-first traversal of a `ViewNode` tree.
+func walk<Renderer: GraphRenderer, Success>(
+  _ root: Reconciler<Renderer>.ViewNode,
+  _ work: @escaping (Reconciler<Renderer>.ViewNode) throws -> WalkWorkResult<Success>
+) rethrows -> WalkResult<Renderer, Success> {
+  var current = root
+  while true {
+    // Perform work on the node
+    switch try work(current) {
+    case .continue: break
+    case let .break(success): return .success(success)
+    case .pause: return .paused(at: current)
+    }
+    // Walk into the child
+    if let child = current.child {
+      current = child
+      continue
+    }
+    // When we walk back to the root, exit
+    if current === root {
+      return .finished
+    }
+    // Walk back up until we find a sibling
+    while current.sibling == nil {
+      // When we walk back to the root, exit
+      guard let parent = current.parent,
+            parent !== root else { return .finished }
+      current = parent
+    }
+    // Walk the sibling
+    // swiftlint:disable:next force_unwrap
+    current = current.sibling!
+  }
+}
diff --git a/Sources/TokamakDOM/DOMGraphRenderer.swift b/Sources/TokamakDOM/DOMGraphRenderer.swift
index 6f7d6da1d..54458b50d 100644
--- a/Sources/TokamakDOM/DOMGraphRenderer.swift
+++ b/Sources/TokamakDOM/DOMGraphRenderer.swift
@@ -10,17 +10,33 @@ import JavaScriptKit
 @_spi(TokamakStaticHTML) import TokamakStaticHTML
 
 public final class DOMElement: Element {
-  public static func == (lhs: DOMElement, rhs: DOMElement) -> Bool {
-    lhs.tag == rhs.tag && lhs.attributes == rhs.attributes && lhs.innerHTML == rhs.innerHTML
+  var reference: JSObject?
+
+  public struct Data: ElementData {
+    let tag: String
+    let attributes: [HTMLAttribute: String]
+    let innerHTML: String?
+    let listeners: [String: Listener]
+    let debugData: [String: ConvertibleToJSValue]
+
+    public static func == (lhs: Self, rhs: Self) -> Bool {
+      lhs.tag == rhs.tag && lhs.attributes == rhs.attributes && lhs.innerHTML == rhs.innerHTML
+    }
   }
 
-  var reference: JSObject?
-  var tag: String
-  var attributes: [HTMLAttribute: String]
-  var innerHTML: String?
-  var listeners: [String: Listener] = [:]
+  public var data: Data
+
+  public init(from data: Data) {
+    self.data = data
+  }
+
+  public func update(with data: Data) {
+    self.data = data
+  }
+}
 
-  public init<V>(from primitiveView: V) where V: View {
+public extension DOMElement.Data {
+  init<V>(from primitiveView: V) where V: View {
     guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
     tag = primitiveView.tag
     attributes = primitiveView.attributes
@@ -28,21 +44,13 @@ public final class DOMElement: Element {
 
     if let primitiveView = primitiveView as? DOMNodeConvertible {
       listeners = primitiveView.listeners
+    } else {
+      listeners = [:]
     }
-  }
 
-  public init(
-    reference: JSObject?,
-    tag: String,
-    attributes: [HTMLAttribute: String],
-    innerHTML: String?,
-    listeners: [String: Listener]
-  ) {
-    self.reference = reference
-    self.tag = tag
-    self.attributes = attributes
-    self.innerHTML = innerHTML
-    self.listeners = listeners
+    debugData = [
+      "view": String(reflecting: V.self),
+    ]
   }
 }
 
@@ -74,12 +82,15 @@ public struct DOMGraphRenderer: GraphRenderer {
       """)
     }
     rootElement = .init(
-      reference: reference,
-      tag: "",
-      attributes: [:],
-      innerHTML: nil,
-      listeners: [:]
+      from: .init(
+        tag: "",
+        attributes: [:],
+        innerHTML: nil,
+        listeners: [:],
+        debugData: ["view": "root"]
+      )
     )
+    rootElement.reference = reference
     Tokamak.root = .object(reference)
   }
 
@@ -98,7 +109,8 @@ extension Mutation where Renderer == DOMGraphRenderer {
     case let .insert(element, parent, index):
       return [
         "operation": 0,
-        "element": element.data,
+        "element": element.data.encoded
+          .merging(["bind": element.bindClosure], uniquingKeysWith: { $1 }),
         "parent": parent.lazyReference,
         "index": index,
       ]
@@ -113,22 +125,40 @@ extension Mutation where Renderer == DOMGraphRenderer {
         "operation": 2,
         "parent": parent.lazyReference,
         "element": previous.lazyReference,
-        "replacement": replacement.data,
+        "replacement": replacement.data.encoded,
       ]
     case let .update(previous, newElement):
+      previous.update(with: newElement)
       return [
         "operation": 3,
         "previous": previous.reference,
-        "updates": newElement.data,
+        "updates": newElement.encoded
+          .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }),
       ]
     }
   }
 }
 
 extension DOMElement {
-  var data: [String: ConvertibleToJSValue] {
+  var bindClosure: ConvertibleToJSValue {
+    JSOneshotClosure { [weak self] in
+      self?.reference = $0[0].object!
+      return .undefined
+    }
+  }
+
+  var lazyReference: JSClosure {
+    JSClosure { _ in
+      guard let reference = self.reference else { return .undefined }
+      return .object(reference)
+    }
+  }
+}
+
+extension DOMElement.Data {
+  var encoded: [String: ConvertibleToJSValue] {
     [
-      "tag": reference ?? tag,
+      "tag": tag,
       "attributes": attributes.map {
         [
           "name": $0.key.value,
@@ -143,19 +173,9 @@ extension DOMElement {
           return .undefined
         }
       },
-      "bind": JSOneshotClosure { [weak self] in
-        self?.reference = $0[0].object!
-        return .undefined
-      },
+      "debugData": debugData,
     ]
   }
-
-  var lazyReference: JSClosure {
-    JSClosure { _ in
-      guard let reference = self.reference else { return .undefined }
-      return .object(reference)
-    }
-  }
 }
 
 extension _PrimitiveButtonStyleBody: DOMNodeConvertible {
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index 59211d1f4..95a66ef5f 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -24,16 +24,14 @@
         },
         commit: (mutations) => {
           for (const mutation of mutations) {
-            console.log(mutation)
             switch (mutation.operation) {
             case 0: // .insert
               const parent = mutation.parent() ?? window.Tokamak.root
               const element = window.Tokamak.create(mutation.element)
+              element.dataset.view = mutation.element.debugData.view
               if (parent.children.length > mutation.index) {
-                console.log('Inserting', element, 'at', mutation.index, 'before', parent.children[mutation.index], 'on', parent)
                 parent.insertBefore(element, parent.children[mutation.index])
               } else {
-                console.log('Appending', element, 'because parent', parent, 'only has', parent.children.length, 'and we want index', mutation.index)
                 parent.appendChild(element)
               }
               break
@@ -48,7 +46,6 @@
               const replaceParent = mutation.parent() ?? window.Tokamak.root
               const original = mutation.element()
               const replacement = window.Tokamak.create(mutation.replacement)
-              console.log("Replace", original, "with", replacement, "on", replaceParent)
               replaceParent.replaceChild(replacement, original)
               break
             case 3: // .update
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
index 905a08a47..40427dfaa 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
@@ -8,20 +8,43 @@
 import TokamakCore
 
 public final class HTMLElement: Element, CustomStringConvertible {
-  public static func == (lhs: HTMLElement, rhs: HTMLElement) -> Bool {
-    lhs.tag == rhs.tag && lhs.attributes == rhs.attributes
+  public struct Data: ElementData, Equatable {
+    public static func == (lhs: HTMLElement.Data, rhs: HTMLElement.Data) -> Bool {
+      lhs.tag == rhs.tag
+        && lhs.attributes == rhs.attributes
+        && lhs.innerHTML == rhs.innerHTML
+        && lhs.children.map(\.data) == rhs.children.map(\.data)
+    }
+
+    var tag: String
+    var attributes: [HTMLAttribute: String]
+    var innerHTML: String?
+    var children: [HTMLElement] = []
+
+    public init<V>(from primitiveView: V) where V: View {
+      guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
+      tag = primitiveView.tag
+      attributes = primitiveView.attributes
+      innerHTML = primitiveView.innerHTML
+    }
+
+    public init(
+      tag: String,
+      attributes: [HTMLAttribute: String],
+      innerHTML: String?,
+      children: [HTMLElement]
+    ) {
+      self.tag = tag
+      self.attributes = attributes
+      self.innerHTML = innerHTML
+      self.children = children
+    }
   }
 
-  var tag: String
-  var attributes: [HTMLAttribute: String]
-  var innerHTML: String?
-  var children: [HTMLElement] = []
+  public var data: Data
 
-  public init<V>(from primitiveView: V) where V: View {
-    guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
-    tag = primitiveView.tag
-    attributes = primitiveView.attributes
-    innerHTML = primitiveView.innerHTML
+  public init(from data: Data) {
+    self.data = data
   }
 
   public init(
@@ -30,18 +53,25 @@ public final class HTMLElement: Element, CustomStringConvertible {
     innerHTML: String?,
     children: [HTMLElement]
   ) {
-    self.tag = tag
-    self.attributes = attributes
-    self.innerHTML = innerHTML
-    self.children = children
+    data = .init(
+      tag: tag,
+      attributes: attributes,
+      innerHTML: innerHTML,
+      children: children
+    )
+  }
+
+  public func update(with data: Data) {
+    self.data = data
   }
 
   public var description: String {
     """
-    <\(tag)\(attributes.map { " \($0.key.value)=\"\($0.value)\"" }
-      .joined(separator: ""))>\(innerHTML != nil ? "\(innerHTML!)" : "")\(!children
-      .isEmpty ? "\n" : "")\(children.map(\.description).joined(separator: "\n"))\(!children
-      .isEmpty ? "\n" : "")</\(tag)>
+    <\(data.tag)\(data.attributes.map { " \($0.key.value)=\"\($0.value)\"" }
+      .joined(separator: ""))>\(data.innerHTML != nil ? "\(data.innerHTML!)" : "")\(!data.children
+      .isEmpty ? "\n" : "")\(data.children.map(\.description).joined(separator: "\n"))\(!data
+      .children
+      .isEmpty ? "\n" : "")</\(data.tag)>
     """
   }
 }
@@ -113,15 +143,15 @@ public struct StaticHTMLGraphRenderer: GraphRenderer {
     for mutation in mutations {
       switch mutation {
       case let .insert(element, parent, index):
-        parent.children.insert(element, at: index)
+        parent.data.children.insert(element, at: index)
       case let .remove(element, parent):
-        parent?.children.removeAll(where: { $0 === element })
+        parent?.data.children.removeAll(where: { $0 === element })
       case let .replace(parent, previous, replacement):
-        guard let index = parent.children.firstIndex(where: { $0 === previous }) else { continue }
-        parent.children[index] = replacement
-      case let .update(previous, newElement):
-        previous.tag = newElement.tag
-        previous.attributes = newElement.attributes
+        guard let index = parent.data.children.firstIndex(where: { $0 === previous })
+        else { continue }
+        parent.data.children[index] = replacement
+      case let .update(previous, newData):
+        previous.update(with: newData)
       }
     }
   }
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 78683f607..94428fba9 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -36,6 +36,9 @@ private struct TestView: View {
           if count < 5 {
             Button("Increment") {
               print("Increment")
+              if count + 1 >= 5 {
+                print("Hit 5")
+              }
               count += 1
             }
           }
@@ -89,27 +92,42 @@ extension _PrimitiveButtonStyleBody: TestPrimitive {
 }
 
 final class TestElement: Element, CustomStringConvertible {
-  static func == (lhs: TestElement, rhs: TestElement) -> Bool {
-    lhs.renderedValue == rhs.renderedValue && lhs.closingTag == rhs.closingTag
+  struct Data: ElementData, Equatable {
+    let renderedValue: String
+    let closingTag: String
+
+    init(
+      renderedValue: String,
+      closingTag: String
+    ) {
+      self.renderedValue = renderedValue
+      self.closingTag = closingTag
+    }
+
+    init<V>(from primitiveView: V) where V: View {
+      guard let primitiveView = primitiveView as? TestPrimitive else { fatalError() }
+      renderedValue =
+        "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
+      closingTag = "</\(primitiveView.tag)>"
+    }
   }
 
-  var renderedValue: String
-  var closingTag: String
+  var data: Data
 
-  init<V>(from primitiveView: V) where V: View {
-    guard let primitiveView = primitiveView as? TestPrimitive else { fatalError() }
-    renderedValue =
-      "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
-    closingTag = "</\(primitiveView.tag)>"
+  init(from data: Data) {
+    self.data = data
   }
 
   var description: String {
-    "\(renderedValue)\(closingTag)"
+    "\(data.renderedValue)\(data.closingTag)"
   }
 
   init(renderedValue: String, closingTag: String) {
-    self.renderedValue = renderedValue
-    self.closingTag = closingTag
+    data = .init(renderedValue: renderedValue, closingTag: closingTag)
+  }
+
+  func update(with data: Data) {
+    self.data = data
   }
 
   static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }
@@ -131,14 +149,16 @@ struct TestRenderer: GraphRenderer {
   func commit(_ mutations: [Mutation<TestRenderer>]) {
     for mutation in mutations {
       switch mutation {
-      case let .insert(element, parent, sibling):
-        print("Insert \(element) after \(sibling as Any) in \(parent)")
+      case let .insert(element, parent, index):
+        print("Insert \(element) at \(index) in \(parent)")
       case let .remove(element, parent):
         print("Remove \(element) from \(parent as Any)")
       case let .replace(parent, previous, replacement):
         print("Replace \(previous) with \(replacement) in \(parent)")
-      case let .update(previous, newElement):
-        print("Update \(previous) with \(newElement)")
+      case let .update(previous, newData):
+        print("Update \(previous) with \(newData)")
+        previous.update(with: newData)
+        print(previous)
       }
     }
   }
@@ -147,35 +167,36 @@ struct TestRenderer: GraphRenderer {
 final class VisitorTests: XCTestCase {
   func testRenderer() {
     let reconciler = TestRenderer(.root).render(TestView())
-    print(reconciler.tree)
     func decrement() {
       (
-        reconciler.tree // ModifiedContent
-          .child(at: 0)? // _ViewModifier_Content
-          .child(at: 0)? // TestView
-          .child(at: 0)? // Counter
-          .child(at: 0)? // VStack
-          .child(at: 0)? // TupleView
-          .child(at: 1)? // HStack
-          .child(at: 0)? // TupleView
-          .child(at: 0)? // Optional
-          .child(at: 0)? // Button
+        reconciler.current // ModifiedContent
+          .child? // _ViewModifier_Content
+          .child? // TestView
+          .child? // Counter
+          .child? // VStack
+          .child? // TupleView
+          .child?.sibling? // HStack
+          .child? // TupleView
+          .child? // Optional
+          .child? // Button
           .view as? Button<Text>
       )?
         .action()
     }
     func increment() {
       (
-        reconciler.tree // ModifiedContent
-          .child(at: 0)? // _ViewModifier_Content
-          .child(at: 0)? // TestView
-          .child(at: 0)? // Counter
-          .child(at: 0)? // VStack
-          .child(at: 0)? // TupleView
-          .child(at: 1)? // HStack
-          .child(at: 0)? // TupleView
-          .child(at: 1)? // Optional
-          .child(at: 0)? // Button
+        reconciler.current // ModifiedContent
+          .child? // _ViewModifier_Content
+          .child? // TestView
+          .child? // Counter
+          .child? // VStack
+          .child? // TupleView
+          .child? // Text
+          .sibling? // HStack
+          .child? // TupleView
+          .child? // Optional
+          .sibling? // Optional
+          .child? // Button
           .view as? Button<Text>
       )?
         .action()
@@ -183,9 +204,15 @@ final class VisitorTests: XCTestCase {
     for i in 0..<5 {
       increment()
     }
-    print(reconciler.tree)
+    print(reconciler.current)
     decrement()
-    print(reconciler.tree)
+//    for i in 0..<5 {
+//      increment()
+//    }
+//    print(reconciler.tree)
+//    decrement()
+//    print(reconciler.tree)
+
 //    let decrement = (
 //      reconciler.tree
 //        .findView(id: .structural(index: 0))? // TestView

From e340ed5b2ecc28a06dcb3db89a5b2a0d5a5659f6 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 15 Feb 2022 18:42:09 -0500
Subject: [PATCH 07/64] Rename files, and split code across files

---
 .../AttributeGraph/ViewGraph.swift            | 629 ------------------
 Sources/TokamakCore/Fiber/Element.swift       |  19 +
 Sources/TokamakCore/Fiber/Fiber.swift         | 263 ++++++++
 .../TokamakCore/Fiber/FiberReconciler.swift   | 277 ++++++++
 Sources/TokamakCore/Fiber/FiberRenderer.swift |  23 +
 Sources/TokamakCore/Fiber/Mutation.swift      |  21 +
 .../ViewArguments.swift                       |   0
 Sources/TokamakCore/Fiber/ViewVisitor.swift   |  52 ++
 .../{AttributeGraph => Fiber}/walk.swift      |  18 +-
 ...hRenderer.swift => DOMFiberRenderer.swift} |   4 +-
 Sources/TokamakDemo/main.swift                |   2 +-
 ...er.swift => StaticHTMLFiberRenderer.swift} |   2 +-
 12 files changed, 668 insertions(+), 642 deletions(-)
 delete mode 100644 Sources/TokamakCore/AttributeGraph/ViewGraph.swift
 create mode 100644 Sources/TokamakCore/Fiber/Element.swift
 create mode 100644 Sources/TokamakCore/Fiber/Fiber.swift
 create mode 100644 Sources/TokamakCore/Fiber/FiberReconciler.swift
 create mode 100644 Sources/TokamakCore/Fiber/FiberRenderer.swift
 create mode 100644 Sources/TokamakCore/Fiber/Mutation.swift
 rename Sources/TokamakCore/{AttributeGraph => Fiber}/ViewArguments.swift (100%)
 create mode 100644 Sources/TokamakCore/Fiber/ViewVisitor.swift
 rename Sources/TokamakCore/{AttributeGraph => Fiber}/walk.swift (70%)
 rename Sources/TokamakDOM/{DOMGraphRenderer.swift => DOMFiberRenderer.swift} (97%)
 rename Sources/TokamakStaticHTML/{StaticHTMLGraphRenderer.swift => StaticHTMLFiberRenderer.swift} (98%)

diff --git a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift b/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
deleted file mode 100644
index 09762d543..000000000
--- a/Sources/TokamakCore/AttributeGraph/ViewGraph.swift
+++ /dev/null
@@ -1,629 +0,0 @@
-//
-//  File.swift
-//
-//
-//  Created by Carson Katri on 2/3/22.
-//
-
-public protocol ViewVisitor {
-  func visit<V: View>(_ view: V)
-}
-
-public extension View {
-  func _visitChildren<V: ViewVisitor>(_ visitor: V) {
-    visitor.visit(body)
-  }
-}
-
-typealias ViewVisitorF<V: ViewVisitor> = (V) -> ()
-
-protocol ViewReducer {
-  associatedtype Result
-  static func reduce<V: View>(into partialResult: inout Result, nextView: V)
-  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result
-}
-
-extension ViewReducer {
-  static func reduce<V: View>(into partialResult: inout Result, nextView: V) {
-    partialResult = Self.reduce(partialResult: partialResult, nextView: nextView)
-  }
-
-  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result {
-    var result = partialResult
-    Self.reduce(into: &result, nextView: nextView)
-    return result
-  }
-}
-
-final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
-  var result: R.Result
-
-  init(initialResult: R.Result) {
-    result = initialResult
-  }
-
-  func visit<V>(_ view: V) where V: View {
-    R.reduce(into: &result, nextView: view)
-  }
-}
-
-extension ViewReducer {
-  typealias Visitor = ReducerVisitor<Self>
-}
-
-/// An output from a `Renderer`.
-public protocol Element: AnyObject {
-  associatedtype Data: ElementData
-  var data: Data { get }
-  init(from data: Data)
-  func update(with data: Data)
-}
-
-/// The data used to create an `Element`. We re-use `Element` instances, but can re-create and copy `ElementData` as often as needed.
-public protocol ElementData: Equatable {
-  init<V: View>(from primitiveView: V)
-}
-
-public protocol GraphRenderer {
-  associatedtype ElementType: Element
-  static func isPrimitive<V>(_ view: V) -> Bool where V: View
-  func commit(_ mutations: [Mutation<Self>])
-  var rootElement: ElementType { get }
-  var defaultEnvironment: EnvironmentValues { get }
-}
-
-public extension GraphRenderer {
-  var defaultEnvironment: EnvironmentValues { .init() }
-}
-
-public enum Mutation<Renderer: GraphRenderer> {
-  case insert(
-    element: Renderer.ElementType,
-    parent: Renderer.ElementType,
-    index: Int
-  )
-  case remove(element: Renderer.ElementType, parent: Renderer.ElementType?)
-  case replace(
-    parent: Renderer.ElementType,
-    previous: Renderer.ElementType,
-    replacement: Renderer.ElementType
-  )
-  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
-}
-
-@_spi(TokamakCore) public extension Reconciler {
-  final class ViewNode: CustomDebugStringConvertible {
-    weak var reconciler: Reconciler<Renderer>?
-
-    /// The underlying `View` instance.
-    var view: Any!
-    /// Outputs from evaluating `View._makeView`
-    var outputs: ViewOutputs!
-    /// A function to visit `view` generically.
-    var visitView: ((ViewVisitor) -> ())!
-    /// The identity of this `View`
-    var id: Identity?
-    /// The mounted element, if this is a Renderer primitive.
-    var element: Renderer.ElementType?
-    /// The first child node.
-    var child: ViewNode?
-    /// This node's right sibling.
-    var sibling: ViewNode?
-    /// An unowned reference to the parent node.
-    unowned var parent: ViewNode?
-    /// The nearest parent that can be mounted on.
-    unowned var elementParent: ViewNode?
-    /// The cached type information for the underlying `View`.
-    var typeInfo: TypeInfo?
-    /// Boxes that store `State` data.
-    var state: [PropertyInfo: MutableStorage]!
-
-    /// The WIP node if this is current, or the current node if this is WIP.
-    weak var alternate: ViewNode?
-
-    var createAndBindAlternate: (() -> ViewNode)?
-
-    /// A box holding a value for an `@State` property wrapper.
-    /// Will call `onSet` (usually a `Reconciler.reconcile` call) when updated.
-    final class MutableStorage {
-      private(set) var value: Any
-      let onSet: () -> ()
-
-      func setValue(_ newValue: Any, with transaction: Transaction) {
-        value = newValue
-        onSet()
-      }
-
-      init(initialValue: Any, onSet: @escaping () -> ()) {
-        value = initialValue
-        self.onSet = onSet
-      }
-    }
-
-    public enum Identity: Hashable {
-      case explicit(AnyHashable)
-      case structural(index: Int)
-    }
-
-    init<V: View>(
-      _ view: inout V,
-      element: Renderer.ElementType?,
-      parent: ViewNode?,
-      elementParent: ViewNode?,
-      childIndex: Int,
-      reconciler: Reconciler<Renderer>?
-    ) {
-      self.reconciler = reconciler
-      child = nil
-      sibling = nil
-      self.parent = parent
-      self.elementParent = elementParent
-      typeInfo = TokamakCore.typeInfo(of: V.self)
-
-      let viewInputs = ViewInputs<V>(
-        view: view,
-        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
-        environment: parent?.outputs.environment ?? .init(.init())
-      )
-      state = bindProperties(to: &view, typeInfo, viewInputs)
-      self.view = view
-      outputs = V._makeView(viewInputs)
-      visitView = { [weak self] in
-        guard let self = self else { return }
-        // swiftlint:disable:next force_cast
-        $0.visit(self.view as! V)
-      }
-
-      if let element = element {
-        self.element = element
-      } else if Renderer.isPrimitive(view) {
-        self.element = .init(from: .init(from: view))
-      }
-
-      let alternateView = view
-      createAndBindAlternate = {
-        // Create the alternate lazily
-        let alternate = ViewNode(
-          bound: alternateView,
-          alternate: self,
-          outputs: self.outputs,
-          typeInfo: self.typeInfo,
-          element: self.element,
-          parent: self.parent?.alternate,
-          elementParent: self.elementParent?.alternate,
-          reconciler: reconciler
-        )
-        self.alternate = alternate
-        if self.parent?.child === self {
-          self.parent?.alternate?.child = alternate // Link it with our parent's alternate.
-        } else {
-          // Find our left sibling.
-          var node = self.parent?.child
-          while node?.sibling !== self {
-            guard node?.sibling != nil else { return alternate }
-            node = node?.sibling
-          }
-          if node?.sibling === self {
-            node?.alternate?.sibling = alternate // Link it with our left sibling's alternate.
-          }
-        }
-        return alternate
-      }
-    }
-
-    init<V: View>(
-      bound view: V,
-      alternate: ViewNode,
-      outputs: ViewOutputs,
-      typeInfo: TypeInfo?,
-      element: Renderer.ElementType?,
-      parent: Reconciler<Renderer>.ViewNode?,
-      elementParent: ViewNode?,
-      reconciler: Reconciler<Renderer>?
-    ) {
-      self.view = view
-      self.alternate = alternate
-      self.reconciler = reconciler
-      self.element = element
-      child = nil
-      sibling = nil
-      self.parent = parent
-      self.elementParent = elementParent
-      self.typeInfo = typeInfo
-      self.outputs = outputs
-      visitView = { [weak self] in
-        guard let self = self else { return }
-        // swiftlint:disable:next force_cast
-        $0.visit(self.view as! V)
-      }
-    }
-
-    private func bindProperties<V: View>(
-      to view: inout V,
-      _ typeInfo: TypeInfo?,
-      _ viewInputs: ViewInputs<V>
-    ) -> [PropertyInfo: MutableStorage] {
-      guard let typeInfo = typeInfo else { return [:] }
-
-      var state: [PropertyInfo: MutableStorage] = [:]
-      for property in typeInfo.properties where property.type is DynamicProperty.Type {
-        var value = property.get(from: view)
-        if var storage = value as? WritableValueStorage {
-          let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
-            guard let self = self else { return }
-            self.reconciler?.reconcile(from: self)
-//            self.flip()
-          })
-          state[property] = box
-          storage.getter = { box.value }
-          storage.setter = { box.setValue($0, with: $1) }
-          value = storage
-        } else if var environmentReader = value as? EnvironmentReader {
-          environmentReader.setContent(from: viewInputs.environment.environment)
-          value = environmentReader
-        }
-        property.set(value: value, on: &view)
-      }
-      return state
-    }
-
-    /// Flip this node with its `alternate` to reflect changes from the reconciler.
-    func flip() {
-      let child = child
-      self.child = alternate?.child
-      alternate?.child = child
-//      if self.parent?.child === self {
-//        self.parent?.child = alternate
-//        self.parent?.alternate?.child = self
-//      } else {
-//        var node = self.parent?.child
-//        while node != nil && node?.sibling !== self {
-//          node = node?.sibling
-//        }
-//        node?.alternate?.sibling = self
-//        node?.sibling = alternate
-//      }
-//      let alternateElement = alternate?.element
-//      let alternateElementParent = alternate?.elementParent
-//      let alternateParent = alternate?.parent
-//      let alternateSibling = alternate?.sibling
-//      alternate?.element = self.element
-//      alternate?.elementParent = self.elementParent
-//      alternate?.parent = self.parent
-//      alternate?.sibling = self.sibling
-//      self.element = alternateElement
-//      self.elementParent = alternateElementParent
-//      self.parent = alternateParent
-//      self.sibling = alternateSibling
-    }
-
-    func update<V: View>(
-      with view: inout V,
-      childIndex: Int
-    ) -> Renderer.ElementType.Data? {
-      typeInfo = TokamakCore.typeInfo(of: V.self)
-
-      let viewInputs = ViewInputs<V>(
-        view: view,
-        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
-        environment: parent?.outputs.environment ?? .init(.init())
-      )
-      state = bindProperties(to: &view, typeInfo, viewInputs)
-      self.view = view
-      outputs = V._makeView(viewInputs)
-      visitView = { [weak self] in
-        guard let self = self else { return }
-        // swiftlint:disable:next force_cast
-        $0.visit(self.view as! V)
-      }
-
-      if Renderer.isPrimitive(view) {
-        return .init(from: view)
-      } else {
-        return nil
-      }
-    }
-
-    public var debugDescription: String {
-      flush()
-    }
-
-    private func flush(level: Int = 0) -> String {
-//      var result = ""
-//      walk(self) { node in
-//        result += "\n\(node.typeInfo?.type ?? Any.self)\(node.element != nil ? "(\(node.element!))" : "")"
-//        return true
-//      }
-//      return result
-//      return "\(typeInfo?.type ?? Any.self)\(element != nil ? "(\(element!))" : "")"
-      let spaces = String(repeating: " ", count: level)
-      return """
-      \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
-        .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {
-      \(child?.flush(level: level + 2) ?? "")
-      \(spaces)}
-      \(sibling?.flush(level: level) ?? "")
-      """
-    }
-  }
-}
-
-public final class Reconciler<Renderer: GraphRenderer> {
-  @_spi(TokamakCore) public var current: ViewNode!
-  private var alternate: ViewNode!
-  public let renderer: Renderer
-
-  public init<V: View>(_ renderer: Renderer, _ view: V) {
-    self.renderer = renderer
-    var view = view.environmentValues(renderer.defaultEnvironment)
-    current = .init(
-      &view,
-      element: renderer.rootElement,
-      parent: nil,
-      elementParent: nil,
-      childIndex: 0,
-      reconciler: self
-    )
-    // Start by building the initial tree.
-    alternate = current.createAndBindAlternate?()
-    reconcile(from: current)
-    // Copy this tree into the alternate so we have two identical trees as a starting point.
-//    self.reconcile(from: current)
-  }
-
-  /// Convert the first level of children of a `View` into a linked list of `ViewNode`s.
-  struct TreeReducer: ViewReducer {
-    final class Result {
-      // For references
-      let viewNode: ViewNode?
-      let visitChildren: (TreeReducer.Visitor) -> ()
-      unowned var parent: Result?
-      var child: Result?
-      var sibling: Result?
-      var newData: Renderer.ElementType.Data?
-
-      // For reducing
-      var childrenCount: Int = 0
-      var lastSibling: Result?
-      var nextExisting: ViewNode?
-      var nextExistingAlternate: ViewNode?
-
-      init(
-        viewNode: ViewNode?,
-        visitChildren: @escaping (TreeReducer.Visitor) -> (),
-        parent: Result?,
-        child: ViewNode?,
-        alternateChild: ViewNode?,
-        newData: Renderer.ElementType.Data? = nil
-      ) {
-        self.viewNode = viewNode
-        self.visitChildren = visitChildren
-        self.parent = parent
-        nextExisting = child
-        nextExistingAlternate = alternateChild
-        self.newData = newData
-      }
-    }
-
-    static func reduce<V>(into partialResult: inout Result, nextView: V) where V: View {
-      // Create the node and its element.
-      var nextView = nextView
-      let resultChild: Result
-      if let existing = partialResult.nextExisting {
-        let newData = existing.update(
-          with: &nextView,
-          childIndex: partialResult.childrenCount
-        )
-        resultChild = Result(
-          viewNode: existing,
-          visitChildren: nextView._visitChildren,
-          parent: partialResult,
-          child: existing.child,
-          alternateChild: existing.alternate?.child,
-          newData: newData
-        )
-        partialResult.nextExisting = existing.sibling
-      } else {
-        let viewNode = ViewNode(
-          &nextView,
-          element: partialResult.nextExistingAlternate?.element,
-          parent: partialResult.viewNode,
-          elementParent: partialResult.viewNode?.element != nil
-            ? partialResult.viewNode
-            : partialResult.viewNode?.elementParent,
-          childIndex: partialResult.childrenCount,
-          reconciler: partialResult.viewNode?.reconciler
-        )
-        if let alternate = partialResult.nextExistingAlternate {
-          viewNode.alternate = alternate
-          partialResult.nextExistingAlternate = alternate.sibling
-        }
-        resultChild = Result(
-          viewNode: viewNode,
-          visitChildren: nextView._visitChildren,
-          parent: partialResult,
-          child: nil,
-          alternateChild: viewNode.alternate?.child
-        )
-      }
-      partialResult.childrenCount += 1
-      // Get the last child element we've processed, and add the new child as its sibling.
-      if let lastSibling = partialResult.lastSibling {
-        lastSibling.viewNode?.sibling = resultChild.viewNode
-        lastSibling.sibling = resultChild
-      } else {
-        // Otherwise setup the first child
-        partialResult.viewNode?.child = resultChild.viewNode
-        partialResult.child = resultChild
-      }
-      partialResult.lastSibling = resultChild
-    }
-  }
-
-  final class ReconcilerVisitor: ViewVisitor {
-    unowned let reconciler: Reconciler<Renderer>
-    /// The current, mounted `ViewNode`.
-    var currentRoot: ViewNode
-    var mutations = [Mutation<Renderer>]()
-
-    init(root: ViewNode, reconciler: Reconciler<Renderer>) {
-      self.reconciler = reconciler
-      currentRoot = root
-    }
-
-    /// Walk the current tree, recomputing at each step to check for discrepancies.
-    ///
-    /// Parent-first depth-first traversal.
-    /// Take this `View` tree for example.
-    /// ```swift
-    /// VStack {
-    ///   HStack {
-    ///     Text("A")
-    ///     Text("B")
-    ///   }
-    ///   Text("C")
-    /// }
-    /// ```
-    /// Basically, we read it like this:
-    /// 1. `VStack` has children, so we go to it's first child, `HStack`.
-    /// 2. `HStack` has children, so we go further to it's first child, `Text`.
-    /// 3. `Text` has no child, but has a sibling, so we go to that.
-    /// 4. `Text` has no child and no sibling, so we return to the `HStack`.
-    /// 5. We've already read the children, so we look for a sibling, `Text`.
-    /// 6. `Text` has no children and no sibling, so we return to the `VStack.`
-    /// We finish once we've returned to the root element.
-    /// ```
-    ///    ┌──────┐
-    ///    │VStack│
-    ///    └──┬───┘
-    ///   ▲ 1 │
-    ///   │   └──►┌──────┐
-    ///   │       │HStack│
-    ///   │     ┌─┴───┬──┘
-    ///   │     │   ▲ │ 2
-    ///   │     │   │ │  ┌────┐
-    ///   │     │   │ └─►│Text├─┐
-    /// 6 │     │ 4 │    └────┘ │
-    ///   │     │   │           │ 3
-    ///   │   5 │   │    ┌────┐ │
-    ///   │     │   └────┤Text│◄┘
-    ///   │     │        └────┘
-    ///   │     │
-    ///   │     └►┌────┐
-    ///   │       │Text│
-    ///   └───────┴────┘
-    /// ```
-    func visit<V>(_ view: V) where V: View {
-      let alternateRoot: ViewNode?
-      if let alternate = currentRoot.alternate {
-        alternateRoot = alternate
-      } else {
-        alternateRoot = currentRoot.createAndBindAlternate?()
-      }
-      let rootResult = TreeReducer.Result(
-        viewNode: alternateRoot, // The alternate is the WIP node.
-        visitChildren: view._visitChildren,
-        parent: nil,
-        child: alternateRoot?.child,
-        alternateChild: currentRoot.child
-      )
-      var node = rootResult
-      var elementIndices = [ObjectIdentifier: Int]()
-
-      func reconcile(_ node: TreeReducer.Result) {
-        // Compare `node` and its alternate.
-        if let element = node.viewNode?.element,
-           let parent = node.viewNode?.elementParent?.element
-        {
-          let key = ObjectIdentifier(parent)
-          let index = elementIndices[key, default: 0]
-          if node.viewNode?.alternate == nil { // This didn't exist before (no alternate)
-            mutations.append(.insert(element: element, parent: parent, index: index))
-          } else if let newData = node.newData,
-                    newData != element.data
-          { // This changed.
-            mutations.append(.update(previous: element, newData: newData))
-          }
-          elementIndices[key] = index + 1
-        }
-      }
-
-      while true {
-        // Perform work on the node
-        reconcile(node)
-        let reducer = TreeReducer.Visitor(initialResult: node)
-        node.visitChildren(reducer)
-
-        // Setup the alternate if it doesn't exist yet.
-        if node.viewNode?.alternate == nil {
-          node.viewNode?.createAndBindAlternate?()
-        }
-
-        // Walk into the child
-        if let child = reducer.result.child {
-          node = child
-          continue
-        } else if let alternateChild = node.viewNode?.alternate?.child {
-          walk(alternateChild) { node in
-            if let element = node.element,
-               let parent = node.elementParent?.element
-            {
-              // The alternate has a child that no longer exists
-              self.mutations.append(.remove(element: element, parent: parent))
-            }
-            return true
-          }
-        }
-        if reducer.result.child == nil {
-          node.viewNode?.child = nil // Make sure we clear the child if there was none
-        }
-
-        // When we walk back to the root, exit
-        if node === rootResult {
-          return
-        }
-        // Walk back up until we find a sibling
-        while node.sibling == nil {
-          var alternateSibling = node.viewNode?.alternate?.sibling
-          while alternateSibling != nil { // The alternate had siblings that no longer exist.
-            if let element = alternateSibling?.element,
-               let parent = alternateSibling?.elementParent?.element
-            {
-              mutations.append(.remove(element: element, parent: parent))
-            }
-            alternateSibling = alternateSibling?.sibling
-          }
-          // When we walk back to the root, exit
-          guard let parent = node.parent,
-                parent !== currentRoot.alternate
-          else {
-            return
-          }
-          node = parent
-        }
-        // Walk the sibling
-        // swiftlint:disable:next force_unwrap
-        node = node.sibling!
-      }
-    }
-  }
-
-  func reconcile(from root: ViewNode) {
-    let visitor = ReconcilerVisitor(root: root, reconciler: self)
-    root.visitView(visitor)
-    // Apply mutations to the rendered output.
-    renderer.commit(visitor.mutations)
-
-    // Swap the root out for its alternate.
-    let child = root.child
-    root.child = root.alternate?.child
-    root.alternate?.child = child
-  }
-}
-
-public extension GraphRenderer {
-  @discardableResult
-  func render<V: View>(_ view: V) -> Reconciler<Self> {
-    .init(self, view)
-  }
-}
diff --git a/Sources/TokamakCore/Fiber/Element.swift b/Sources/TokamakCore/Fiber/Element.swift
new file mode 100644
index 000000000..f7e60dc7a
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Element.swift
@@ -0,0 +1,19 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/15/22.
+//
+
+/// An output from a `Renderer`.
+public protocol Element: AnyObject {
+  associatedtype Data: ElementData
+  var data: Data { get }
+  init(from data: Data)
+  func update(with data: Data)
+}
+
+/// The data used to create an `Element`. We re-use `Element` instances, but can re-create and copy `ElementData` as often as needed.
+public protocol ElementData: Equatable {
+  init<V: View>(from primitiveView: V)
+}
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
new file mode 100644
index 000000000..7eb72c855
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -0,0 +1,263 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/15/22.
+//
+
+@_spi(TokamakCore) public extension FiberReconciler {
+  final class Fiber: CustomDebugStringConvertible {
+    weak var reconciler: FiberReconciler<Renderer>?
+
+    /// The underlying `View` instance.
+    var view: Any!
+    /// Outputs from evaluating `View._makeView`
+    var outputs: ViewOutputs!
+    /// A function to visit `view` generically.
+    var visitView: ((ViewVisitor) -> ())!
+    /// The identity of this `View`
+    var id: Identity?
+    /// The mounted element, if this is a Renderer primitive.
+    var element: Renderer.ElementType?
+    /// The first child node.
+    var child: Fiber?
+    /// This node's right sibling.
+    var sibling: Fiber?
+    /// An unowned reference to the parent node.
+    unowned var parent: Fiber?
+    /// The nearest parent that can be mounted on.
+    unowned var elementParent: Fiber?
+    /// The cached type information for the underlying `View`.
+    var typeInfo: TypeInfo?
+    /// Boxes that store `State` data.
+    var state: [PropertyInfo: MutableStorage]!
+
+    /// The WIP node if this is current, or the current node if this is WIP.
+    weak var alternate: Fiber?
+
+    var createAndBindAlternate: (() -> Fiber)?
+
+    /// A box holding a value for an `@State` property wrapper.
+    /// Will call `onSet` (usually a `Reconciler.reconcile` call) when updated.
+    final class MutableStorage {
+      private(set) var value: Any
+      let onSet: () -> ()
+
+      func setValue(_ newValue: Any, with transaction: Transaction) {
+        value = newValue
+        onSet()
+      }
+
+      init(initialValue: Any, onSet: @escaping () -> ()) {
+        value = initialValue
+        self.onSet = onSet
+      }
+    }
+
+    public enum Identity: Hashable {
+      case explicit(AnyHashable)
+      case structural(index: Int)
+    }
+
+    init<V: View>(
+      _ view: inout V,
+      element: Renderer.ElementType?,
+      parent: Fiber?,
+      elementParent: Fiber?,
+      childIndex: Int,
+      reconciler: FiberReconciler<Renderer>?
+    ) {
+      self.reconciler = reconciler
+      child = nil
+      sibling = nil
+      self.parent = parent
+      self.elementParent = elementParent
+      typeInfo = TokamakCore.typeInfo(of: V.self)
+
+      let viewInputs = ViewInputs<V>(
+        view: view,
+        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        environment: parent?.outputs.environment ?? .init(.init())
+      )
+      state = bindProperties(to: &view, typeInfo, viewInputs)
+      self.view = view
+      outputs = V._makeView(viewInputs)
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
+
+      if let element = element {
+        self.element = element
+      } else if Renderer.isPrimitive(view) {
+        self.element = .init(from: .init(from: view))
+      }
+
+      let alternateView = view
+      createAndBindAlternate = {
+        // Create the alternate lazily
+        let alternate = Fiber(
+          bound: alternateView,
+          alternate: self,
+          outputs: self.outputs,
+          typeInfo: self.typeInfo,
+          element: self.element,
+          parent: self.parent?.alternate,
+          elementParent: self.elementParent?.alternate,
+          reconciler: reconciler
+        )
+        self.alternate = alternate
+        if self.parent?.child === self {
+          self.parent?.alternate?.child = alternate // Link it with our parent's alternate.
+        } else {
+          // Find our left sibling.
+          var node = self.parent?.child
+          while node?.sibling !== self {
+            guard node?.sibling != nil else { return alternate }
+            node = node?.sibling
+          }
+          if node?.sibling === self {
+            node?.alternate?.sibling = alternate // Link it with our left sibling's alternate.
+          }
+        }
+        return alternate
+      }
+    }
+
+    init<V: View>(
+      bound view: V,
+      alternate: Fiber,
+      outputs: ViewOutputs,
+      typeInfo: TypeInfo?,
+      element: Renderer.ElementType?,
+      parent: FiberReconciler<Renderer>.Fiber?,
+      elementParent: Fiber?,
+      reconciler: FiberReconciler<Renderer>?
+    ) {
+      self.view = view
+      self.alternate = alternate
+      self.reconciler = reconciler
+      self.element = element
+      child = nil
+      sibling = nil
+      self.parent = parent
+      self.elementParent = elementParent
+      self.typeInfo = typeInfo
+      self.outputs = outputs
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
+    }
+
+    private func bindProperties<V: View>(
+      to view: inout V,
+      _ typeInfo: TypeInfo?,
+      _ viewInputs: ViewInputs<V>
+    ) -> [PropertyInfo: MutableStorage] {
+      guard let typeInfo = typeInfo else { return [:] }
+
+      var state: [PropertyInfo: MutableStorage] = [:]
+      for property in typeInfo.properties where property.type is DynamicProperty.Type {
+        var value = property.get(from: view)
+        if var storage = value as? WritableValueStorage {
+          let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
+            guard let self = self else { return }
+            self.reconciler?.reconcile(from: self)
+//            self.flip()
+          })
+          state[property] = box
+          storage.getter = { box.value }
+          storage.setter = { box.setValue($0, with: $1) }
+          value = storage
+        } else if var environmentReader = value as? EnvironmentReader {
+          environmentReader.setContent(from: viewInputs.environment.environment)
+          value = environmentReader
+        }
+        property.set(value: value, on: &view)
+      }
+      return state
+    }
+
+    /// Flip this node with its `alternate` to reflect changes from the reconciler.
+    func flip() {
+      let child = child
+      self.child = alternate?.child
+      alternate?.child = child
+//      if self.parent?.child === self {
+//        self.parent?.child = alternate
+//        self.parent?.alternate?.child = self
+//      } else {
+//        var node = self.parent?.child
+//        while node != nil && node?.sibling !== self {
+//          node = node?.sibling
+//        }
+//        node?.alternate?.sibling = self
+//        node?.sibling = alternate
+//      }
+//      let alternateElement = alternate?.element
+//      let alternateElementParent = alternate?.elementParent
+//      let alternateParent = alternate?.parent
+//      let alternateSibling = alternate?.sibling
+//      alternate?.element = self.element
+//      alternate?.elementParent = self.elementParent
+//      alternate?.parent = self.parent
+//      alternate?.sibling = self.sibling
+//      self.element = alternateElement
+//      self.elementParent = alternateElementParent
+//      self.parent = alternateParent
+//      self.sibling = alternateSibling
+    }
+
+    func update<V: View>(
+      with view: inout V,
+      childIndex: Int
+    ) -> Renderer.ElementType.Data? {
+      typeInfo = TokamakCore.typeInfo(of: V.self)
+
+      let viewInputs = ViewInputs<V>(
+        view: view,
+        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        environment: parent?.outputs.environment ?? .init(.init())
+      )
+      state = bindProperties(to: &view, typeInfo, viewInputs)
+      self.view = view
+      outputs = V._makeView(viewInputs)
+      visitView = { [weak self] in
+        guard let self = self else { return }
+        // swiftlint:disable:next force_cast
+        $0.visit(self.view as! V)
+      }
+
+      if Renderer.isPrimitive(view) {
+        return .init(from: view)
+      } else {
+        return nil
+      }
+    }
+
+    public var debugDescription: String {
+      flush()
+    }
+
+    private func flush(level: Int = 0) -> String {
+//      var result = ""
+//      walk(self) { node in
+//        result += "\n\(node.typeInfo?.type ?? Any.self)\(node.element != nil ? "(\(node.element!))" : "")"
+//        return true
+//      }
+//      return result
+//      return "\(typeInfo?.type ?? Any.self)\(element != nil ? "(\(element!))" : "")"
+      let spaces = String(repeating: " ", count: level)
+      return """
+      \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
+        .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {
+      \(child?.flush(level: level + 2) ?? "")
+      \(spaces)}
+      \(sibling?.flush(level: level) ?? "")
+      """
+    }
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
new file mode 100644
index 000000000..fda41181c
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -0,0 +1,277 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/15/22.
+//
+
+public final class FiberReconciler<Renderer: FiberRenderer> {
+  @_spi(TokamakCore) public var current: Fiber!
+  private var alternate: Fiber!
+  public let renderer: Renderer
+
+  public init<V: View>(_ renderer: Renderer, _ view: V) {
+    self.renderer = renderer
+    var view = view.environmentValues(renderer.defaultEnvironment)
+    current = .init(
+      &view,
+      element: renderer.rootElement,
+      parent: nil,
+      elementParent: nil,
+      childIndex: 0,
+      reconciler: self
+    )
+    // Start by building the initial tree.
+    alternate = current.createAndBindAlternate?()
+    reconcile(from: current)
+  }
+
+  /// Convert the first level of children of a `View` into a linked list of `Fiber`s.
+  struct TreeReducer: ViewReducer {
+    final class Result {
+      // For references
+      let fiber: Fiber?
+      let visitChildren: (TreeReducer.Visitor) -> ()
+      unowned var parent: Result?
+      var child: Result?
+      var sibling: Result?
+      var newData: Renderer.ElementType.Data?
+
+      // For reducing
+      var childrenCount: Int = 0
+      var lastSibling: Result?
+      var nextExisting: Fiber?
+      var nextExistingAlternate: Fiber?
+
+      init(
+        fiber: Fiber?,
+        visitChildren: @escaping (TreeReducer.Visitor) -> (),
+        parent: Result?,
+        child: Fiber?,
+        alternateChild: Fiber?,
+        newData: Renderer.ElementType.Data? = nil
+      ) {
+        self.fiber = fiber
+        self.visitChildren = visitChildren
+        self.parent = parent
+        nextExisting = child
+        nextExistingAlternate = alternateChild
+        self.newData = newData
+      }
+    }
+
+    static func reduce<V>(into partialResult: inout Result, nextView: V) where V: View {
+      // Create the node and its element.
+      var nextView = nextView
+      let resultChild: Result
+      if let existing = partialResult.nextExisting {
+        let newData = existing.update(
+          with: &nextView,
+          childIndex: partialResult.childrenCount
+        )
+        resultChild = Result(
+          fiber: existing,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: existing.child,
+          alternateChild: existing.alternate?.child,
+          newData: newData
+        )
+        partialResult.nextExisting = existing.sibling
+      } else {
+        let fiber = Fiber(
+          &nextView,
+          element: partialResult.nextExistingAlternate?.element,
+          parent: partialResult.fiber,
+          elementParent: partialResult.fiber?.element != nil
+            ? partialResult.fiber
+            : partialResult.fiber?.elementParent,
+          childIndex: partialResult.childrenCount,
+          reconciler: partialResult.fiber?.reconciler
+        )
+        if let alternate = partialResult.nextExistingAlternate {
+          fiber.alternate = alternate
+          partialResult.nextExistingAlternate = alternate.sibling
+        }
+        resultChild = Result(
+          fiber: fiber,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: nil,
+          alternateChild: fiber.alternate?.child
+        )
+      }
+      partialResult.childrenCount += 1
+      // Get the last child element we've processed, and add the new child as its sibling.
+      if let lastSibling = partialResult.lastSibling {
+        lastSibling.fiber?.sibling = resultChild.fiber
+        lastSibling.sibling = resultChild
+      } else {
+        // Otherwise setup the first child
+        partialResult.fiber?.child = resultChild.fiber
+        partialResult.child = resultChild
+      }
+      partialResult.lastSibling = resultChild
+    }
+  }
+
+  final class ReconcilerVisitor: ViewVisitor {
+    unowned let reconciler: FiberReconciler<Renderer>
+    /// The current, mounted `Fiber`.
+    var currentRoot: Fiber
+    var mutations = [Mutation<Renderer>]()
+
+    init(root: Fiber, reconciler: FiberReconciler<Renderer>) {
+      self.reconciler = reconciler
+      currentRoot = root
+    }
+
+    /// Walk the current tree, recomputing at each step to check for discrepancies.
+    ///
+    /// Parent-first depth-first traversal.
+    /// Take this `View` tree for example.
+    /// ```swift
+    /// VStack {
+    ///   HStack {
+    ///     Text("A")
+    ///     Text("B")
+    ///   }
+    ///   Text("C")
+    /// }
+    /// ```
+    /// Basically, we read it like this:
+    /// 1. `VStack` has children, so we go to it's first child, `HStack`.
+    /// 2. `HStack` has children, so we go further to it's first child, `Text`.
+    /// 3. `Text` has no child, but has a sibling, so we go to that.
+    /// 4. `Text` has no child and no sibling, so we return to the `HStack`.
+    /// 5. We've already read the children, so we look for a sibling, `Text`.
+    /// 6. `Text` has no children and no sibling, so we return to the `VStack.`
+    /// We finish once we've returned to the root element.
+    /// ```
+    ///    ┌──────┐
+    ///    │VStack│
+    ///    └──┬───┘
+    ///   ▲ 1 │
+    ///   │   └──►┌──────┐
+    ///   │       │HStack│
+    ///   │     ┌─┴───┬──┘
+    ///   │     │   ▲ │ 2
+    ///   │     │   │ │  ┌────┐
+    ///   │     │   │ └─►│Text├─┐
+    /// 6 │     │ 4 │    └────┘ │
+    ///   │     │   │           │ 3
+    ///   │   5 │   │    ┌────┐ │
+    ///   │     │   └────┤Text│◄┘
+    ///   │     │        └────┘
+    ///   │     │
+    ///   │     └►┌────┐
+    ///   │       │Text│
+    ///   └───────┴────┘
+    /// ```
+    func visit<V>(_ view: V) where V: View {
+      let alternateRoot: Fiber?
+      if let alternate = currentRoot.alternate {
+        alternateRoot = alternate
+      } else {
+        alternateRoot = currentRoot.createAndBindAlternate?()
+      }
+      let rootResult = TreeReducer.Result(
+        fiber: alternateRoot, // The alternate is the WIP node.
+        visitChildren: view._visitChildren,
+        parent: nil,
+        child: alternateRoot?.child,
+        alternateChild: currentRoot.child
+      )
+      var node = rootResult
+      var elementIndices = [ObjectIdentifier: Int]()
+
+      func reconcile(_ node: TreeReducer.Result) {
+        // Compare `node` and its alternate.
+        if let element = node.fiber?.element,
+           let parent = node.fiber?.elementParent?.element
+        {
+          let key = ObjectIdentifier(parent)
+          let index = elementIndices[key, default: 0]
+          if node.fiber?.alternate == nil { // This didn't exist before (no alternate)
+            mutations.append(.insert(element: element, parent: parent, index: index))
+          } else if let newData = node.newData,
+                    newData != element.data
+          { // This changed.
+            mutations.append(.update(previous: element, newData: newData))
+          }
+          elementIndices[key] = index + 1
+        }
+      }
+
+      while true {
+        // Perform work on the node
+        reconcile(node)
+        let reducer = TreeReducer.Visitor(initialResult: node)
+        node.visitChildren(reducer)
+
+        // Setup the alternate if it doesn't exist yet.
+        if node.fiber?.alternate == nil {
+          node.fiber?.createAndBindAlternate?()
+        }
+
+        // Walk into the child
+        if let child = reducer.result.child {
+          node = child
+          continue
+        } else if let alternateChild = node.fiber?.alternate?.child {
+          walk(alternateChild) { node in
+            if let element = node.element,
+               let parent = node.elementParent?.element
+            {
+              // The alternate has a child that no longer exists
+              self.mutations.append(.remove(element: element, parent: parent))
+            }
+            return true
+          }
+        }
+        if reducer.result.child == nil {
+          node.fiber?.child = nil // Make sure we clear the child if there was none
+        }
+
+        // When we walk back to the root, exit
+        if node === rootResult {
+          return
+        }
+        // Walk back up until we find a sibling
+        while node.sibling == nil {
+          var alternateSibling = node.fiber?.alternate?.sibling
+          while alternateSibling != nil { // The alternate had siblings that no longer exist.
+            if let element = alternateSibling?.element,
+               let parent = alternateSibling?.elementParent?.element
+            {
+              mutations.append(.remove(element: element, parent: parent))
+            }
+            alternateSibling = alternateSibling?.sibling
+          }
+          // When we walk back to the root, exit
+          guard let parent = node.parent,
+                parent !== currentRoot.alternate
+          else {
+            return
+          }
+          node = parent
+        }
+        // Walk the sibling
+        // swiftlint:disable:next force_unwrap
+        node = node.sibling!
+      }
+    }
+  }
+
+  func reconcile(from root: Fiber) {
+    let visitor = ReconcilerVisitor(root: root, reconciler: self)
+    root.visitView(visitor)
+    // Apply mutations to the rendered output.
+    renderer.commit(visitor.mutations)
+
+    // Swap the root out for its alternate.
+    let child = root.child
+    root.child = root.alternate?.child
+    root.alternate?.child = child
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
new file mode 100644
index 000000000..53539bd74
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -0,0 +1,23 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/15/22.
+//
+
+public protocol FiberRenderer {
+  associatedtype ElementType: Element
+  static func isPrimitive<V>(_ view: V) -> Bool where V: View
+  func commit(_ mutations: [Mutation<Self>])
+  var rootElement: ElementType { get }
+  var defaultEnvironment: EnvironmentValues { get }
+}
+
+public extension FiberRenderer {
+  var defaultEnvironment: EnvironmentValues { .init() }
+
+  @discardableResult
+  func render<V: View>(_ view: V) -> FiberReconciler<Self> {
+    .init(self, view)
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
new file mode 100644
index 000000000..5c6d3cd34
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -0,0 +1,21 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/15/22.
+//
+
+public enum Mutation<Renderer: FiberRenderer> {
+  case insert(
+    element: Renderer.ElementType,
+    parent: Renderer.ElementType,
+    index: Int
+  )
+  case remove(element: Renderer.ElementType, parent: Renderer.ElementType?)
+  case replace(
+    parent: Renderer.ElementType,
+    previous: Renderer.ElementType,
+    replacement: Renderer.ElementType
+  )
+  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
+}
diff --git a/Sources/TokamakCore/AttributeGraph/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
similarity index 100%
rename from Sources/TokamakCore/AttributeGraph/ViewArguments.swift
rename to Sources/TokamakCore/Fiber/ViewArguments.swift
diff --git a/Sources/TokamakCore/Fiber/ViewVisitor.swift b/Sources/TokamakCore/Fiber/ViewVisitor.swift
new file mode 100644
index 000000000..fe0948f98
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/ViewVisitor.swift
@@ -0,0 +1,52 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/3/22.
+//
+
+public protocol ViewVisitor {
+  func visit<V: View>(_ view: V)
+}
+
+public extension View {
+  func _visitChildren<V: ViewVisitor>(_ visitor: V) {
+    visitor.visit(body)
+  }
+}
+
+typealias ViewVisitorF<V: ViewVisitor> = (V) -> ()
+
+protocol ViewReducer {
+  associatedtype Result
+  static func reduce<V: View>(into partialResult: inout Result, nextView: V)
+  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result
+}
+
+extension ViewReducer {
+  static func reduce<V: View>(into partialResult: inout Result, nextView: V) {
+    partialResult = Self.reduce(partialResult: partialResult, nextView: nextView)
+  }
+
+  static func reduce<V: View>(partialResult: Result, nextView: V) -> Result {
+    var result = partialResult
+    Self.reduce(into: &result, nextView: nextView)
+    return result
+  }
+}
+
+final class ReducerVisitor<R: ViewReducer>: ViewVisitor {
+  var result: R.Result
+
+  init(initialResult: R.Result) {
+    result = initialResult
+  }
+
+  func visit<V>(_ view: V) where V: View {
+    R.reduce(into: &result, nextView: view)
+  }
+}
+
+extension ViewReducer {
+  typealias Visitor = ReducerVisitor<Self>
+}
diff --git a/Sources/TokamakCore/AttributeGraph/walk.swift b/Sources/TokamakCore/Fiber/walk.swift
similarity index 70%
rename from Sources/TokamakCore/AttributeGraph/walk.swift
rename to Sources/TokamakCore/Fiber/walk.swift
index 341da3544..a5ee83a54 100644
--- a/Sources/TokamakCore/AttributeGraph/walk.swift
+++ b/Sources/TokamakCore/Fiber/walk.swift
@@ -11,26 +11,26 @@ enum WalkWorkResult<Success> {
   case pause
 }
 
-enum WalkResult<Renderer: GraphRenderer, Success> {
+enum WalkResult<Renderer: FiberRenderer, Success> {
   case success(Success)
   case finished
-  case paused(at: Reconciler<Renderer>.ViewNode)
+  case paused(at: FiberReconciler<Renderer>.Fiber)
 }
 
 @discardableResult
-func walk<Renderer: GraphRenderer>(
-  _ root: Reconciler<Renderer>.ViewNode,
-  _ work: @escaping (Reconciler<Renderer>.ViewNode) throws -> Bool
+func walk<Renderer: FiberRenderer>(
+  _ root: FiberReconciler<Renderer>.Fiber,
+  _ work: @escaping (FiberReconciler<Renderer>.Fiber) throws -> Bool
 ) rethrows -> WalkResult<Renderer, ()> {
   try walk(root) {
     try work($0) ? .continue : .pause
   }
 }
 
-/// Parent-first depth-first traversal of a `ViewNode` tree.
-func walk<Renderer: GraphRenderer, Success>(
-  _ root: Reconciler<Renderer>.ViewNode,
-  _ work: @escaping (Reconciler<Renderer>.ViewNode) throws -> WalkWorkResult<Success>
+/// Parent-first depth-first traversal of a `Fiber` tree.
+func walk<Renderer: FiberRenderer, Success>(
+  _ root: FiberReconciler<Renderer>.Fiber,
+  _ work: @escaping (FiberReconciler<Renderer>.Fiber) throws -> WalkWorkResult<Success>
 ) rethrows -> WalkResult<Renderer, Success> {
   var current = root
   while true {
diff --git a/Sources/TokamakDOM/DOMGraphRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
similarity index 97%
rename from Sources/TokamakDOM/DOMGraphRenderer.swift
rename to Sources/TokamakDOM/DOMFiberRenderer.swift
index 54458b50d..942cdae8d 100644
--- a/Sources/TokamakDOM/DOMGraphRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -58,7 +58,7 @@ protocol DOMNodeConvertible: HTMLConvertible {
   var listeners: [String: Listener] { get }
 }
 
-public struct DOMGraphRenderer: GraphRenderer {
+public struct DOMFiberRenderer: FiberRenderer {
   public let rootElement: DOMElement
   private let jsCommit: JSFunction
 
@@ -103,7 +103,7 @@ public struct DOMGraphRenderer: GraphRenderer {
   }
 }
 
-extension Mutation where Renderer == DOMGraphRenderer {
+extension Mutation where Renderer == DOMFiberRenderer {
   func object() -> [String: ConvertibleToJSValue] {
     switch self {
     case let .insert(element, parent, index):
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index bda7b7c1a..4bf7e97a9 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -32,7 +32,7 @@ struct TestView: View {
   }
 }
 
-let reconciler = DOMGraphRenderer("#root").render(TestView())
+let reconciler = DOMFiberRenderer("#root").render(TestView())
 
 // @available(OSX 10.16, iOS 14.0, *)
 // struct CustomScene: Scene {
diff --git a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
similarity index 98%
rename from Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
rename to Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 40427dfaa..6a5214753 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLGraphRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -124,7 +124,7 @@ public extension HTMLConvertible {
   }
 }
 
-public struct StaticHTMLGraphRenderer: GraphRenderer {
+public struct StaticHTMLFiberRenderer: FiberRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
 

From 885ba0686be8aae928ae4b889546402a305f3c0d Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Wed, 16 Feb 2022 09:49:52 -0500
Subject: [PATCH 08/64] Add some documentation and refinements

---
 Sources/TokamakCore/Fiber/Element.swift       |  6 ++-
 Sources/TokamakCore/Fiber/Fiber.swift         | 53 ++++++-------------
 .../TokamakCore/Fiber/FiberReconciler.swift   | 53 +++++++++++++++----
 Sources/TokamakCore/Fiber/FiberRenderer.swift |  6 +++
 .../TokamakCore/Fiber/LayoutComputer.swift    | 15 ++++++
 Sources/TokamakCore/Fiber/ViewArguments.swift | 15 ++++--
 .../TokamakReconcilerTests/VisitorTests.swift | 52 +-----------------
 7 files changed, 94 insertions(+), 106 deletions(-)
 create mode 100644 Sources/TokamakCore/Fiber/LayoutComputer.swift

diff --git a/Sources/TokamakCore/Fiber/Element.swift b/Sources/TokamakCore/Fiber/Element.swift
index f7e60dc7a..f2f281cd9 100644
--- a/Sources/TokamakCore/Fiber/Element.swift
+++ b/Sources/TokamakCore/Fiber/Element.swift
@@ -5,7 +5,8 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
-/// An output from a `Renderer`.
+/// A reference type that points to a `Renderer`-specific element that has been mounted.
+/// For instance, a DOM node in the `DOMFiberRenderer`.
 public protocol Element: AnyObject {
   associatedtype Data: ElementData
   var data: Data { get }
@@ -13,7 +14,8 @@ public protocol Element: AnyObject {
   func update(with data: Data)
 }
 
-/// The data used to create an `Element`. We re-use `Element` instances, but can re-create and copy `ElementData` as often as needed.
+/// The data used to create an `Element`. We re-use `Element` instances in the `Fiber` tree,
+/// but can re-create and copy `ElementData` as often as needed.
 public protocol ElementData: Equatable {
   init<V: View>(from primitiveView: V)
 }
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 7eb72c855..99945629c 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -6,6 +6,21 @@
 //
 
 @_spi(TokamakCore) public extension FiberReconciler {
+  /// A manager for a single `View`.
+  ///
+  /// There are always 2 `Fiber`s for every `View` in the tree,
+  /// a current `Fiber`, and a work in progress `Fiber`.
+  /// They point to each other using the `alternate` property.
+  ///
+  /// The current `Fiber` represents the `View` as it is currently rendered on the screen.
+  /// The work in progress `Fiber` (the `alternate` of current), is used in the reconciler to compute the new tree.
+  ///
+  /// When reconciling, the tree is recomputed from the root of the state change on the work in progress `Fiber`.
+  /// Each node in the fiber tree is updated to apply any changes, and a list of mutations needed to get the
+  /// rendered output to match is created.
+  ///
+  /// After the entire tree has been traversed, the current and work in progress trees are swapped,
+  /// making the updated tree the current one, and leaving the previous current tree available to apply future changes on.
   final class Fiber: CustomDebugStringConvertible {
     weak var reconciler: FiberReconciler<Renderer>?
 
@@ -166,7 +181,6 @@
           let box = MutableStorage(initialValue: storage.anyInitialValue, onSet: { [weak self] in
             guard let self = self else { return }
             self.reconciler?.reconcile(from: self)
-//            self.flip()
           })
           state[property] = box
           storage.getter = { box.value }
@@ -181,36 +195,6 @@
       return state
     }
 
-    /// Flip this node with its `alternate` to reflect changes from the reconciler.
-    func flip() {
-      let child = child
-      self.child = alternate?.child
-      alternate?.child = child
-//      if self.parent?.child === self {
-//        self.parent?.child = alternate
-//        self.parent?.alternate?.child = self
-//      } else {
-//        var node = self.parent?.child
-//        while node != nil && node?.sibling !== self {
-//          node = node?.sibling
-//        }
-//        node?.alternate?.sibling = self
-//        node?.sibling = alternate
-//      }
-//      let alternateElement = alternate?.element
-//      let alternateElementParent = alternate?.elementParent
-//      let alternateParent = alternate?.parent
-//      let alternateSibling = alternate?.sibling
-//      alternate?.element = self.element
-//      alternate?.elementParent = self.elementParent
-//      alternate?.parent = self.parent
-//      alternate?.sibling = self.sibling
-//      self.element = alternateElement
-//      self.elementParent = alternateElementParent
-//      self.parent = alternateParent
-//      self.sibling = alternateSibling
-    }
-
     func update<V: View>(
       with view: inout V,
       childIndex: Int
@@ -243,13 +227,6 @@
     }
 
     private func flush(level: Int = 0) -> String {
-//      var result = ""
-//      walk(self) { node in
-//        result += "\n\(node.typeInfo?.type ?? Any.self)\(node.element != nil ? "(\(node.element!))" : "")"
-//        return true
-//      }
-//      return result
-//      return "\(typeInfo?.type ?? Any.self)\(element != nil ? "(\(element!))" : "")"
       let spaces = String(repeating: " ", count: level)
       return """
       \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index fda41181c..a3b376530 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -5,9 +5,16 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+/// A reconciler modeled after React's [Fiber reconciler](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber)
 public final class FiberReconciler<Renderer: FiberRenderer> {
+  /// The root node in the `Fiber` tree that represents the `View`s currently rendered on screen.
   @_spi(TokamakCore) public var current: Fiber!
+  /// The alternate of `current`, or the work in progress tree root.
+  ///
+  /// We must keep a strong reference to both the current and alternate tree roots,
+  /// as they only keep weak references to each other.
   private var alternate: Fiber!
+  /// The `FiberRenderer` used to create and update the `Element`s on screen.
   public let renderer: Renderer
 
   public init<V: View>(_ renderer: Renderer, _ view: V) {
@@ -65,6 +72,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       var nextView = nextView
       let resultChild: Result
       if let existing = partialResult.nextExisting {
+        // If a fiber already exists, simply update it with the new view.
         let newData = existing.update(
           with: &nextView,
           childIndex: partialResult.childrenCount
@@ -79,6 +87,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         )
         partialResult.nextExisting = existing.sibling
       } else {
+        // Otherwise, create a new fiber for this child.
         let fiber = Fiber(
           &nextView,
           element: partialResult.nextExistingAlternate?.element,
@@ -89,6 +98,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           childIndex: partialResult.childrenCount,
           reconciler: partialResult.fiber?.reconciler
         )
+        // If a fiber already exists for an alternate, link them.
         if let alternate = partialResult.nextExistingAlternate {
           fiber.alternate = alternate
           partialResult.nextExistingAlternate = alternate.sibling
@@ -101,6 +111,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           alternateChild: fiber.alternate?.child
         )
       }
+      // Keep track of the index of the child so the LayoutComputer can propose sizes.
       partialResult.childrenCount += 1
       // Get the last child element we've processed, and add the new child as its sibling.
       if let lastSibling = partialResult.lastSibling {
@@ -183,10 +194,14 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         alternateChild: currentRoot.child
       )
       var node = rootResult
+
+      /// A dictionary keyed by the unique ID of an element, with a value indicating what index
+      /// we are currently at. This ensures we place children in the correct order, even if they are
+      /// at different levels in the `View` tree.
       var elementIndices = [ObjectIdentifier: Int]()
 
+      /// Compare `node` with its alternate, and add any mutations to the list.
       func reconcile(_ node: TreeReducer.Result) {
-        // Compare `node` and its alternate.
         if let element = node.fiber?.element,
            let parent = node.fiber?.elementParent?.element
         {
@@ -194,18 +209,27 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           let index = elementIndices[key, default: 0]
           if node.fiber?.alternate == nil { // This didn't exist before (no alternate)
             mutations.append(.insert(element: element, parent: parent, index: index))
+          } else if node.fiber?.typeInfo?.type != node.fiber?.alternate?.typeInfo?.type,
+                    let previous = node.fiber?.alternate?.element
+          {
+            // This is a completely different type of view.
+            mutations.append(.replace(parent: parent, previous: previous, replacement: element))
           } else if let newData = node.newData,
                     newData != element.data
-          { // This changed.
+          {
+            // This is the same type of view, but its backing data has changed.
             mutations.append(.update(previous: element, newData: newData))
           }
           elementIndices[key] = index + 1
         }
       }
 
+      // The main reconciler loop.
       while true {
-        // Perform work on the node
+        // Perform work on the node.
         reconcile(node)
+
+        // Compute the children of the node.
         let reducer = TreeReducer.Visitor(initialResult: node)
         node.visitChildren(reducer)
 
@@ -214,7 +238,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           node.fiber?.createAndBindAlternate?()
         }
 
-        // Walk into the child
+        // Walk all down all the way into the deepest child.
         if let child = reducer.result.child {
           node = child
           continue
@@ -223,8 +247,10 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             if let element = node.element,
                let parent = node.elementParent?.element
             {
-              // The alternate has a child that no longer exists
-              self.mutations.append(.remove(element: element, parent: parent))
+              // The alternate has a child that no longer exists.
+              // Removals must happen in reverse order, so a child element
+              // is removed before its parent.
+              self.mutations.insert(.remove(element: element, parent: parent), at: 0)
             }
             return true
           }
@@ -233,18 +259,20 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           node.fiber?.child = nil // Make sure we clear the child if there was none
         }
 
-        // When we walk back to the root, exit
+        // If we've made it back to the root, then exit.
         if node === rootResult {
           return
         }
-        // Walk back up until we find a sibling
+        // Now walk back up the tree until we find a sibling.
         while node.sibling == nil {
           var alternateSibling = node.fiber?.alternate?.sibling
           while alternateSibling != nil { // The alternate had siblings that no longer exist.
             if let element = alternateSibling?.element,
                let parent = alternateSibling?.elementParent?.element
             {
-              mutations.append(.remove(element: element, parent: parent))
+              // Removals happen in reverse order, so a child element is removed before
+              // its parent.
+              mutations.insert(.remove(element: element, parent: parent), at: 0)
             }
             alternateSibling = alternateSibling?.sibling
           }
@@ -256,7 +284,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           }
           node = parent
         }
-        // Walk the sibling
+        // Walk across to the sibling, and repeat.
         // swiftlint:disable:next force_unwrap
         node = node.sibling!
       }
@@ -264,12 +292,17 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
   }
 
   func reconcile(from root: Fiber) {
+    // Create a list of mutations.
     let visitor = ReconcilerVisitor(root: root, reconciler: self)
     root.visitView(visitor)
+
     // Apply mutations to the rendered output.
     renderer.commit(visitor.mutations)
 
     // Swap the root out for its alternate.
+    // Essentially, making the work in progress tree the current,
+    // and leaving the current available to be the work in progress
+    // on our next update.
     let child = root.child
     root.child = root.alternate?.child
     root.alternate?.child = child
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index 53539bd74..5da1f5d14 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -5,11 +5,17 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+/// A renderer capable of performing mutations specified by a `FiberReconciler`.
 public protocol FiberRenderer {
+  /// The element class this renderer uses.
   associatedtype ElementType: Element
+  /// Check whether a `View` is a primitive for this renderer.
   static func isPrimitive<V>(_ view: V) -> Bool where V: View
+  /// Apply the mutations to the elements.
   func commit(_ mutations: [Mutation<Self>])
+  /// The root element all top level views should be mounted on.
   var rootElement: ElementType { get }
+  /// The smallest set of initial `EnvironmentValues` needed for this renderer to function.
   var defaultEnvironment: EnvironmentValues { get }
 }
 
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
new file mode 100644
index 000000000..a7c0e607a
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -0,0 +1,15 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/16/22.
+//
+
+import Foundation
+
+/// A type that is able to propose sizes for its children.
+protocol LayoutComputer {
+  /// Will be called every time a child is evaluated.
+  /// The calls will always be in order, and no more than one call will be made per child.
+  func proposeSize<V: View>(for child: V, at index: Int) -> CGSize
+}
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index c18e3bed4..a0ee38afe 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -7,18 +7,23 @@
 
 import Foundation
 
+/// Data passed to `_makeView` to create the `ViewOutputs` used in reconciling/rendering.
 public struct ViewInputs<V: View> {
   let view: V
+  /// The size proposed by this view's parent.
   let proposedSize: CGSize?
   let environment: EnvironmentBox
 }
 
+/// Data used to reconcile and render a `View` and its children.
 public struct ViewOutputs {
-  /// A container for a reference to the current `EnvironmentValues`.
+  /// A container for the current `EnvironmentValues`.
   /// This is stored as a reference to avoid copying the environment when unnecessary.
   let environment: EnvironmentBox
   let preferences: _PreferenceStore
+  /// The size requested by this view.
   let size: CGSize
+  /// The `LayoutComputer` used to propose sizes for the children of this view.
   let layoutComputer: LayoutComputer?
 }
 
@@ -46,11 +51,9 @@ extension ViewOutputs {
   }
 }
 
-protocol LayoutComputer {
-  func proposeSize<V: View>(for child: V, at index: Int) -> CGSize
-}
-
 public extension View {
+  // By default, we simply pass the inputs through without modifications
+  // or layout considerations.
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
     .init(inputs: inputs)
   }
@@ -58,6 +61,7 @@ public extension View {
 
 public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    // Update the environment if needed.
     var environment = inputs.environment.environment
     if let environmentWriter = inputs.view.modifier as? EnvironmentModifier {
       environmentWriter.modifyEnvironment(&environment)
@@ -66,6 +70,7 @@ public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   }
 
   func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    // Visit the computed body of the modifier.
     visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
   }
 }
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 94428fba9..e6b0fcce7 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -133,7 +133,7 @@ final class TestElement: Element, CustomStringConvertible {
   static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }
 }
 
-struct TestRenderer: GraphRenderer {
+struct TestRenderer: FiberRenderer {
   typealias ElementType = TestElement
 
   let rootElement: TestElement
@@ -206,55 +206,5 @@ final class VisitorTests: XCTestCase {
     }
     print(reconciler.current)
     decrement()
-//    for i in 0..<5 {
-//      increment()
-//    }
-//    print(reconciler.tree)
-//    decrement()
-//    print(reconciler.tree)
-
-//    let decrement = (
-//      reconciler.tree
-//        .findView(id: .structural(index: 0))? // TestView
-//        .findView(id: .structural(index: 0))? // Counter
-//        .findView(id: .structural(index: 0))? // VStack
-//        .findView(id: .structural(index: 0))? // TupleView
-//        .findView(id: .structural(index: 1))? // HStack
-//        .findView(id: .structural(index: 0))? // TupleView
-//        .findView(id: .structural(index: 0))? // Increment Button
-//        .view as? Button<Text>
-//    )
-//    let increment = (
-//      reconciler.tree
-//        .findView(id: .structural(index: 0))? // TestView
-//        .findView(id: .structural(index: 0))? // Counter
-//        .findView(id: .structural(index: 0))? // VStack
-//        .findView(id: .structural(index: 0))? // TupleView
-//        .findView(id: .structural(index: 1))? // HStack
-//        .findView(id: .structural(index: 0))? // TupleView
-//        .findView(id: .structural(index: 1))? // Increment Button
-//        .view as? Button<Text>
-//    )
-//    increment?.action()
-//    let text = reconciler.tree
-//      .findView(id: .structural(index: 0))? // TestView
-//      .findView(id: .structural(index: 0))? // Counter
-//      .findView(id: .structural(index: 0))? // VStack
-//      .findView(id: .structural(index: 0))? // TupleView
-//      .findView(id: .structural(index: 0)) // Text
-//    XCTAssertEqual(
-//      text?.element?.description,
-//      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
-//    )
-//    increment?.action()
-//    XCTAssertEqual(
-//      text?.element?.description,
-//      "<TokamakCore.Text content=\"2\" modifiers=\"[]\"></TokamakCore.Text>"
-//    )
-//    decrement?.action()
-//    XCTAssertEqual(
-//      text?.element?.description,
-//      "<TokamakCore.Text content=\"1\" modifiers=\"[]\"></TokamakCore.Text>"
-//    )
   }
 }

From dd8a2ebd5b3301d7688e9e61a3750dda2fa8e469 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Wed, 16 Feb 2022 09:55:03 -0500
Subject: [PATCH 09/64] Remove GraphRendererTests

---
 .../GraphRendererTests.swift                  | 26 -------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 Tests/TokamakStaticHTMLTests/GraphRendererTests.swift

diff --git a/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift b/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
deleted file mode 100644
index 72985211f..000000000
--- a/Tests/TokamakStaticHTMLTests/GraphRendererTests.swift
+++ /dev/null
@@ -1,26 +0,0 @@
-//
-//  File.swift
-//
-//
-//  Created by Carson Katri on 2/6/22.
-//
-
-@_spi(TokamakCore) import TokamakCore
-@testable import TokamakStaticHTML
-import XCTest
-
-struct TestView: View {
-  var body: some View {
-    VStack {
-      Text("A")
-      Text("B")
-    }
-  }
-}
-
-final class GraphRendererTests: XCTestCase {
-  func testRenderer() {
-    let reconciler = StaticHTMLGraphRenderer().render(TestView())
-    print(reconciler.renderer.rootElement)
-  }
-}

From 88f689f375baee6f555cc419b093168d44ad501e Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 18 Feb 2022 22:19:07 -0500
Subject: [PATCH 10/64] Initial layout engine (only implemented for the
 TestRenderer)

---
 Sources/TokamakCore/Fiber/AlignmentID.swift   |  90 +++++++++
 Sources/TokamakCore/Fiber/Fiber.swift         |  64 ++++++-
 .../TokamakCore/Fiber/FiberReconciler.swift   | 158 ++++++++++++---
 Sources/TokamakCore/Fiber/FiberRenderer.swift |   4 +
 .../TokamakCore/Fiber/LayoutComputer.swift    | 180 +++++++++++++++++-
 Sources/TokamakCore/Fiber/Mutation.swift      |   3 +
 Sources/TokamakCore/Fiber/ViewArguments.swift |  14 +-
 .../TokamakCore/Fiber/ViewDimensions.swift    |  39 ++++
 Sources/TokamakCore/Views/Layout/HStack.swift |   7 -
 Sources/TokamakCore/Views/Layout/VStack.swift |   7 -
 .../Modifiers/LayoutModifiers.swift           |   2 +
 .../StaticHTMLFiberRenderer.swift             |   4 +
 .../Views/Layout/HStack.swift                 |   2 +
 .../Views/Layout/VStack.swift                 |   2 +
 .../TokamakReconcilerTests/VisitorTests.swift |  25 ++-
 15 files changed, 542 insertions(+), 59 deletions(-)
 create mode 100644 Sources/TokamakCore/Fiber/AlignmentID.swift
 create mode 100644 Sources/TokamakCore/Fiber/ViewDimensions.swift

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
new file mode 100644
index 000000000..d564c674d
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -0,0 +1,90 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/18/22.
+//
+
+import Foundation
+
+public protocol AlignmentID {
+  static func defaultValue(in context: ViewDimensions) -> CGFloat
+}
+
+/// An alignment position along the horizontal axis.
+@frozen public struct HorizontalAlignment: Equatable {
+  public static func == (lhs: Self, rhs: Self) -> Bool {
+    lhs.id == rhs.id
+  }
+
+  let id: AlignmentID.Type
+
+  public init(_ id: AlignmentID.Type) {
+    self.id = id
+  }
+}
+
+extension HorizontalAlignment {
+  public static let leading = Self(Leading.self)
+
+  private enum Leading: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      0
+    }
+  }
+
+  public static let center = Self(Center.self)
+
+  private enum Center: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      context.width / 2
+    }
+  }
+
+  public static let trailing = Self(Leading.self)
+
+  private enum Trailing: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      context.width
+    }
+  }
+}
+
+@frozen public struct VerticalAlignment: Equatable {
+  public static func == (lhs: Self, rhs: Self) -> Bool {
+    lhs.id == rhs.id
+  }
+
+  let id: AlignmentID.Type
+
+  public init(_ id: AlignmentID.Type) {
+    self.id = id
+  }
+}
+
+extension VerticalAlignment {
+  public static let top = Self(Top.self)
+  private enum Top: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      0
+    }
+  }
+
+  public static let center = Self(Center.self)
+  private enum Center: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      context.height / 2
+    }
+  }
+
+  public static let bottom = Self(Bottom.self)
+  private enum Bottom: AlignmentID {
+    static func defaultValue(in context: ViewDimensions) -> CGFloat {
+      context.height
+    }
+  }
+
+  // TODO: Add baseline vertical alignment guides.
+  // public static let firstTextBaseline: VerticalAlignment
+  // public static let lastTextBaseline: VerticalAlignment
+}
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 99945629c..16366a295 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -5,6 +5,8 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+import Foundation
+
 @_spi(TokamakCore) public extension FiberReconciler {
   /// A manager for a single `View`.
   ///
@@ -34,6 +36,8 @@
     var id: Identity?
     /// The mounted element, if this is a Renderer primitive.
     var element: Renderer.ElementType?
+    /// The index of this element in its elementParent
+    var elementIndex: Int?
     /// The first child node.
     var child: Fiber?
     /// This node's right sibling.
@@ -47,6 +51,9 @@
     /// Boxes that store `State` data.
     var state: [PropertyInfo: MutableStorage]!
 
+    /// The dimensions computed by
+    var dimensions: ViewDimensions = .init(origin: .zero, size: .zero, alignmentGuides: [:])
+
     /// The WIP node if this is current, or the current node if this is WIP.
     weak var alternate: Fiber?
 
@@ -79,7 +86,7 @@
       element: Renderer.ElementType?,
       parent: Fiber?,
       elementParent: Fiber?,
-      childIndex: Int,
+      elementIndex: Int?,
       reconciler: FiberReconciler<Renderer>?
     ) {
       self.reconciler = reconciler
@@ -89,9 +96,18 @@
       self.elementParent = elementParent
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
+      let proposedSize: CGSize
+      if let elementIndex = elementIndex {
+        proposedSize = elementParent?.outputs.layoutComputer.proposeSize(
+          for: view,
+          at: elementIndex
+        ) ?? .zero
+      } else {
+        proposedSize = .zero
+      }
       let viewInputs = ViewInputs<V>(
         view: view,
-        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        proposedSize: proposedSize,
         environment: parent?.outputs.environment ?? .init(.init())
       )
       state = bindProperties(to: &view, typeInfo, viewInputs)
@@ -109,6 +125,11 @@
         self.element = .init(from: .init(from: view))
       }
 
+      // Only specify an elementIndex if we have an element.
+      if self.element != nil {
+        self.elementIndex = elementIndex
+      }
+
       let alternateView = view
       createAndBindAlternate = {
         // Create the alternate lazily
@@ -197,13 +218,24 @@
 
     func update<V: View>(
       with view: inout V,
-      childIndex: Int
+      elementIndex: Int?
     ) -> Renderer.ElementType.Data? {
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
+      self.elementIndex = elementIndex
+
+      let proposedSize: CGSize
+      if let elementIndex = elementIndex {
+        proposedSize = elementParent?.outputs.layoutComputer.proposeSize(
+          for: view,
+          at: elementIndex
+        ) ?? .zero
+      } else {
+        proposedSize = .zero
+      }
       let viewInputs = ViewInputs<V>(
         view: view,
-        proposedSize: parent?.outputs.layoutComputer?.proposeSize(for: view, at: childIndex),
+        proposedSize: proposedSize,
         environment: parent?.outputs.environment ?? .init(.init())
       )
       state = bindProperties(to: &view, typeInfo, viewInputs)
@@ -222,6 +254,27 @@
       }
     }
 
+    struct LayoutRequest {
+      let child: LayoutContext.Child
+      let onLayout: (CGPoint) -> ()
+    }
+
+    var layoutRequests = [LayoutRequest]()
+    /// A child requests a position from its parent, but this won't be computed until we have walked far enough up the tree to get to said parent.
+    func enqueueLayoutRequest(
+      _ dimensions: ViewDimensions,
+      at index: Int,
+      onLayout: @escaping (CGPoint) -> ()
+    ) {
+      layoutRequests.insert(
+        .init(
+          child: .init(index: index, dimensions: dimensions),
+          onLayout: onLayout
+        ),
+        at: index
+      )
+    }
+
     public var debugDescription: String {
       flush()
     }
@@ -230,7 +283,8 @@
       let spaces = String(repeating: " ", count: level)
       return """
       \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
-        .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {
+        .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {\(element != nil ?
+        "\n\(spaces)dimensions: \(dimensions)" : "")
       \(child?.flush(level: level + 2) ?? "")
       \(spaces)}
       \(sibling?.flush(level: level) ?? "")
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index a3b376530..c5270e168 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -5,6 +5,28 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+import Foundation
+
+final class RootLayoutComputer: LayoutComputer {
+  let sceneSize: CGSize
+
+  init(sceneSize: CGSize) {
+    self.sceneSize = sceneSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+    sceneSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    .zero
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    sceneSize
+  }
+}
+
 /// A reconciler modeled after React's [Fiber reconciler](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber)
 public final class FiberReconciler<Renderer: FiberRenderer> {
   /// The root node in the `Fiber` tree that represents the `View`s currently rendered on screen.
@@ -17,15 +39,32 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
   /// The `FiberRenderer` used to create and update the `Element`s on screen.
   public let renderer: Renderer
 
+  struct RootView<Content: View>: View {
+    let content: Content
+    let renderer: Renderer
+
+    var body: some View {
+      content
+        .environmentValues(renderer.defaultEnvironment)
+    }
+
+    static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+      .init(
+        inputs: inputs,
+        layoutComputer: RootLayoutComputer(sceneSize: inputs.view.renderer.sceneSize)
+      )
+    }
+  }
+
   public init<V: View>(_ renderer: Renderer, _ view: V) {
     self.renderer = renderer
-    var view = view.environmentValues(renderer.defaultEnvironment)
+    var view = RootView(content: view, renderer: renderer)
     current = .init(
       &view,
       element: renderer.rootElement,
       parent: nil,
       elementParent: nil,
-      childIndex: 0,
+      elementIndex: 0,
       reconciler: self
     )
     // Start by building the initial tree.
@@ -43,9 +82,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       var child: Result?
       var sibling: Result?
       var newData: Renderer.ElementType.Data?
+      var elementIndices: [ObjectIdentifier: Int]
 
       // For reducing
-      var childrenCount: Int = 0
       var lastSibling: Result?
       var nextExisting: Fiber?
       var nextExistingAlternate: Fiber?
@@ -56,7 +95,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         parent: Result?,
         child: Fiber?,
         alternateChild: Fiber?,
-        newData: Renderer.ElementType.Data? = nil
+        newData: Renderer.ElementType.Data? = nil,
+        elementIndices: [ObjectIdentifier: Int]
       ) {
         self.fiber = fiber
         self.visitChildren = visitChildren
@@ -64,6 +104,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         nextExisting = child
         nextExistingAlternate = alternateChild
         self.newData = newData
+        self.elementIndices = elementIndices
       }
     }
 
@@ -73,9 +114,15 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       let resultChild: Result
       if let existing = partialResult.nextExisting {
         // If a fiber already exists, simply update it with the new view.
+        let key: ObjectIdentifier?
+        if let elementParent = existing.elementParent {
+          key = ObjectIdentifier(elementParent)
+        } else {
+          key = nil
+        }
         let newData = existing.update(
           with: &nextView,
-          childIndex: partialResult.childrenCount
+          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] }
         )
         resultChild = Result(
           fiber: existing,
@@ -83,19 +130,34 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           parent: partialResult,
           child: existing.child,
           alternateChild: existing.alternate?.child,
-          newData: newData
+          newData: newData,
+          elementIndices: partialResult.elementIndices
         )
         partialResult.nextExisting = existing.sibling
+
+        // If this fiber has an element, increment the elementIndex for its parent.
+        if let key = key,
+           existing.element != nil
+        {
+          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
+        }
       } else {
+        let elementParent = partialResult.fiber?.element != nil
+          ? partialResult.fiber
+          : partialResult.fiber?.elementParent
+        let key: ObjectIdentifier?
+        if let elementParent = elementParent {
+          key = ObjectIdentifier(elementParent)
+        } else {
+          key = nil
+        }
         // Otherwise, create a new fiber for this child.
         let fiber = Fiber(
           &nextView,
           element: partialResult.nextExistingAlternate?.element,
           parent: partialResult.fiber,
-          elementParent: partialResult.fiber?.element != nil
-            ? partialResult.fiber
-            : partialResult.fiber?.elementParent,
-          childIndex: partialResult.childrenCount,
+          elementParent: elementParent,
+          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] },
           reconciler: partialResult.fiber?.reconciler
         )
         // If a fiber already exists for an alternate, link them.
@@ -103,16 +165,21 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           fiber.alternate = alternate
           partialResult.nextExistingAlternate = alternate.sibling
         }
+        // If this fiber has an element, increment the elementIndex for its parent.
+        if let key = key,
+           fiber.element != nil
+        {
+          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
+        }
         resultChild = Result(
           fiber: fiber,
           visitChildren: nextView._visitChildren,
           parent: partialResult,
           child: nil,
-          alternateChild: fiber.alternate?.child
+          alternateChild: fiber.alternate?.child,
+          elementIndices: partialResult.elementIndices
         )
       }
-      // Keep track of the index of the child so the LayoutComputer can propose sizes.
-      partialResult.childrenCount += 1
       // Get the last child element we've processed, and add the new child as its sibling.
       if let lastSibling = partialResult.lastSibling {
         lastSibling.fiber?.sibling = resultChild.fiber
@@ -191,7 +258,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         visitChildren: view._visitChildren,
         parent: nil,
         child: alternateRoot?.child,
-        alternateChild: currentRoot.child
+        alternateChild: currentRoot.child,
+        elementIndices: [:]
       )
       var node = rootResult
 
@@ -203,10 +271,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       /// Compare `node` with its alternate, and add any mutations to the list.
       func reconcile(_ node: TreeReducer.Result) {
         if let element = node.fiber?.element,
+           let index = node.fiber?.elementIndex,
            let parent = node.fiber?.elementParent?.element
         {
-          let key = ObjectIdentifier(parent)
-          let index = elementIndices[key, default: 0]
           if node.fiber?.alternate == nil { // This didn't exist before (no alternate)
             mutations.append(.insert(element: element, parent: parent, index: index))
           } else if node.fiber?.typeInfo?.type != node.fiber?.alternate?.typeInfo?.type,
@@ -220,7 +287,46 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             // This is the same type of view, but its backing data has changed.
             mutations.append(.update(previous: element, newData: newData))
           }
-          elementIndices[key] = index + 1
+        }
+      }
+
+      /// Request a size for the view on the way back up the tree.
+      func layout(_ node: TreeReducer.Result) {
+        // FIXME: Add alignmentGuide modifier to override defaults and pass the correct guide data.
+        if let elementIndex = node.fiber?.elementIndex,
+           let element = node.fiber?.element
+        {
+          // Fulfill the layout requests.
+          let context = LayoutContext(children: node.fiber?.layoutRequests.map(\.child) ?? [])
+          for request in node.fiber?.layoutRequests ?? [] {
+            request.onLayout(node.fiber?.outputs.layoutComputer.position(
+              request.child, in: context
+            ) ?? .zero)
+          }
+          // Compute our size in the context.
+          let size = node.fiber?.outputs.layoutComputer.requestSize(in: context) ?? .zero
+          let dimensions = ViewDimensions(
+            origin: .zero, size: size, alignmentGuides: [:]
+          )
+          node.fiber?.dimensions = dimensions
+          // We enqueue our positioning request, but do not perform it until
+          // all children of the elementParent are processed.
+          node.fiber?.elementParent?.enqueueLayoutRequest(
+            dimensions,
+            at: elementIndex
+          ) { [weak self, weak node, weak element] origin in
+            let dimensions = ViewDimensions(
+              origin: origin,
+              size: size,
+              alignmentGuides: [:]
+            )
+            if dimensions != node?.fiber?.dimensions,
+               let element = element
+            {
+              self?.mutations.append(.layout(element: element, dimensions: dimensions))
+            }
+            node?.fiber?.dimensions = dimensions
+          }
         }
       }
 
@@ -229,13 +335,16 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         // Perform work on the node.
         reconcile(node)
 
+        node.elementIndices = elementIndices
+
         // Compute the children of the node.
         let reducer = TreeReducer.Visitor(initialResult: node)
         node.visitChildren(reducer)
+        elementIndices = node.elementIndices
 
         // Setup the alternate if it doesn't exist yet.
         if node.fiber?.alternate == nil {
-          node.fiber?.createAndBindAlternate?()
+          _ = node.fiber?.createAndBindAlternate?()
         }
 
         // Walk all down all the way into the deepest child.
@@ -259,10 +368,14 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           node.fiber?.child = nil // Make sure we clear the child if there was none
         }
 
+        // We call layout when we reach the bottommost view.
+        layout(node)
+
         // If we've made it back to the root, then exit.
         if node === rootResult {
           return
         }
+
         // Now walk back up the tree until we find a sibling.
         while node.sibling == nil {
           var alternateSibling = node.fiber?.alternate?.sibling
@@ -276,12 +389,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             }
             alternateSibling = alternateSibling?.sibling
           }
+          guard let parent = node.parent else { return }
+          // We also call layout when we are walking back up the tree.
+          layout(parent)
           // When we walk back to the root, exit
-          guard let parent = node.parent,
-                parent !== currentRoot.alternate
-          else {
-            return
-          }
+          guard parent !== currentRoot.alternate else { return }
           node = parent
         }
         // Walk across to the sibling, and repeat.
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index 5da1f5d14..8a62d61ce 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -5,6 +5,8 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+import Foundation
+
 /// A renderer capable of performing mutations specified by a `FiberReconciler`.
 public protocol FiberRenderer {
   /// The element class this renderer uses.
@@ -17,6 +19,8 @@ public protocol FiberRenderer {
   var rootElement: ElementType { get }
   /// The smallest set of initial `EnvironmentValues` needed for this renderer to function.
   var defaultEnvironment: EnvironmentValues { get }
+  /// The size of the window we are rendering in.
+  var sceneSize: CGSize { get }
 }
 
 public extension FiberRenderer {
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index a7c0e607a..2c1548573 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -7,9 +7,187 @@
 
 import Foundation
 
+struct LayoutContext {
+  let children: [Child]
+
+  struct Child {
+    let index: Int
+    let dimensions: ViewDimensions
+  }
+}
+
 /// A type that is able to propose sizes for its children.
-protocol LayoutComputer {
+protocol LayoutComputer: AnyObject {
   /// Will be called every time a child is evaluated.
   /// The calls will always be in order, and no more than one call will be made per child.
   func proposeSize<V: View>(for child: V, at index: Int) -> CGSize
+  /// The child responds with their size and we place them relative to our origin.
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint
+  /// Request a size for ourself from our parent.
+  func requestSize(in context: LayoutContext) -> CGSize
+}
+
+/// A `LayoutComputer` that takes the size of its children.
+final class ShrinkWrapLayout: LayoutComputer {
+  let proposedSize: CGSize
+  var childSize: CGSize?
+
+  init(proposedSize: CGSize) {
+    self.proposedSize = proposedSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+    proposedSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    childSize = child.dimensions.size
+    return .zero
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    childSize ?? .zero
+  }
+}
+
+/// A `LayoutComputer` that fills its parent.
+final class FlexLayout: LayoutComputer {
+  let proposedSize: CGSize
+
+  init(proposedSize: CGSize) {
+    self.proposedSize = proposedSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+    proposedSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    .zero
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    proposedSize
+  }
+}
+
+extension VStack {
+  private final class VStackLayout: LayoutComputer {
+    let proposedSize: CGSize
+    let alignment: HorizontalAlignment
+
+    init(proposedSize: CGSize, alignment: HorizontalAlignment) {
+      self.proposedSize = proposedSize
+      self.alignment = alignment
+    }
+
+    func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+      // FIXME: Only propose the remaining space after each child is processed.
+      proposedSize
+    }
+
+    func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+      let maxWidth = context.children.max(by: { $0.dimensions.width < $1.dimensions.width })
+      return .init(
+        x: (maxWidth?.dimensions[alignment] ?? .zero) - child.dimensions[alignment],
+        y: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.height }
+      )
+    }
+
+    func requestSize(in context: LayoutContext) -> CGSize {
+      .init(
+        width: context.children.max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions
+          .width
+          ?? .zero,
+        height: context.children.reduce(0) { $0 + $1.dimensions.height }
+      )
+    }
+  }
+
+  public static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: VStackLayout(
+        proposedSize: inputs.proposedSize,
+        alignment: inputs.view.alignment
+      )
+    )
+  }
+}
+
+extension HStack {
+  private final class HStackLayout: LayoutComputer {
+    let proposedSize: CGSize
+    let alignment: VerticalAlignment
+
+    init(proposedSize: CGSize, alignment: VerticalAlignment) {
+      self.proposedSize = proposedSize
+      self.alignment = alignment
+    }
+
+    func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+      // FIXME: Only propose the remaining space after each child is processed.
+      proposedSize
+    }
+
+    func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+      let maxHeight = context.children.max(by: { $0.dimensions.height < $1.dimensions.height })
+      return .init(
+        x: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.width },
+        y: (maxHeight?.dimensions[alignment] ?? .zero) - child.dimensions[alignment]
+      )
+    }
+
+    func requestSize(in context: LayoutContext) -> CGSize {
+      .init(
+        width: context.children.reduce(0) { $0 + $1.dimensions.width },
+        height: context.children.max(by: { $0.dimensions.height < $1.dimensions.height })?
+          .dimensions.height
+          ?? .zero
+      )
+    }
+  }
+
+  public static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: HStackLayout(
+        proposedSize: inputs.proposedSize,
+        alignment: inputs.view.alignment
+      )
+    )
+  }
+}
+
+/// Measures the bounds of the `Text` with modifiers and wrapping inside the `proposedSize`.
+final class TextLayoutComputer: LayoutComputer {
+  let text: Text
+  let proposedSize: CGSize
+
+  init(text: Text, proposedSize: CGSize) {
+    self.text = text
+    self.proposedSize = proposedSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+    fatalError("Text views cannot have children.")
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    fatalError("Text views cannot have children.")
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    // FIXME: Renderer-provided text measurement.
+    .init(width: 100, height: 50)
+  }
+}
+
+public extension Text {
+  static func _makeView(_ inputs: ViewInputs<Text>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: TextLayoutComputer(text: inputs.view, proposedSize: inputs.proposedSize)
+    )
+  }
 }
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
index 5c6d3cd34..d04ec2619 100644
--- a/Sources/TokamakCore/Fiber/Mutation.swift
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -5,6 +5,8 @@
 //  Created by Carson Katri on 2/15/22.
 //
 
+import Foundation
+
 public enum Mutation<Renderer: FiberRenderer> {
   case insert(
     element: Renderer.ElementType,
@@ -18,4 +20,5 @@ public enum Mutation<Renderer: FiberRenderer> {
     replacement: Renderer.ElementType
   )
   case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
+  case layout(element: Renderer.ElementType, dimensions: ViewDimensions)
 }
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index a0ee38afe..84a1dbeaf 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -11,7 +11,7 @@ import Foundation
 public struct ViewInputs<V: View> {
   let view: V
   /// The size proposed by this view's parent.
-  let proposedSize: CGSize?
+  let proposedSize: CGSize
   let environment: EnvironmentBox
 }
 
@@ -21,10 +21,10 @@ public struct ViewOutputs {
   /// This is stored as a reference to avoid copying the environment when unnecessary.
   let environment: EnvironmentBox
   let preferences: _PreferenceStore
-  /// The size requested by this view.
-  let size: CGSize
+  /// The size requested by this view. Can use the data from our `LayoutComputer` after all its children are processed.
+  var size: (LayoutComputer) -> CGSize
   /// The `LayoutComputer` used to propose sizes for the children of this view.
-  let layoutComputer: LayoutComputer?
+  let layoutComputer: LayoutComputer
 }
 
 final class EnvironmentBox {
@@ -40,14 +40,14 @@ extension ViewOutputs {
     inputs: ViewInputs<V>,
     environment: EnvironmentValues? = nil,
     preferences: _PreferenceStore? = nil,
-    size: CGSize? = nil,
+    size: ((LayoutComputer) -> CGSize)? = nil,
     layoutComputer: LayoutComputer? = nil
   ) {
     // Only replace the EnvironmentBox when we change the environment. Otherwise the same box can be reused.
     self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
-    self.size = size ?? inputs.proposedSize ?? .zero
-    self.layoutComputer = layoutComputer
+    self.size = size ?? { _ in inputs.proposedSize }
+    self.layoutComputer = layoutComputer ?? ShrinkWrapLayout(proposedSize: inputs.proposedSize)
   }
 }
 
diff --git a/Sources/TokamakCore/Fiber/ViewDimensions.swift b/Sources/TokamakCore/Fiber/ViewDimensions.swift
new file mode 100644
index 000000000..d5e4ddd21
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/ViewDimensions.swift
@@ -0,0 +1,39 @@
+//
+//  File.swift
+//
+//
+//  Created by Carson Katri on 2/17/22.
+//
+
+import Foundation
+
+public struct ViewDimensions: Equatable {
+  @_spi(TokamakCore) public let origin: CGPoint
+  @_spi(TokamakCore) public let size: CGSize
+  @_spi(TokamakCore) public let alignmentGuides: [ObjectIdentifier: CGFloat]
+
+  public var width: CGFloat { size.width }
+  public var height: CGFloat { size.height }
+
+  public subscript(guide: HorizontalAlignment) -> CGFloat {
+    self[explicit: guide] ?? guide.id.defaultValue(in: self)
+  }
+
+  public subscript(guide: VerticalAlignment) -> CGFloat {
+    self[explicit: guide] ?? guide.id.defaultValue(in: self)
+  }
+
+  public subscript(explicit guide: HorizontalAlignment) -> CGFloat? {
+    alignmentGuides[.init(guide.id)]
+  }
+
+  public subscript(explicit guide: VerticalAlignment) -> CGFloat? {
+    alignmentGuides[.init(guide.id)]
+  }
+}
+
+extension ViewDimensions: CustomDebugStringConvertible {
+  public var debugDescription: String {
+    "(\(origin.x), \(origin.y)), (\(width), \(height))"
+  }
+}
diff --git a/Sources/TokamakCore/Views/Layout/HStack.swift b/Sources/TokamakCore/Views/Layout/HStack.swift
index f7bc91402..21a3f50f1 100644
--- a/Sources/TokamakCore/Views/Layout/HStack.swift
+++ b/Sources/TokamakCore/Views/Layout/HStack.swift
@@ -17,13 +17,6 @@
 
 import Foundation
 
-/// An alignment position along the vertical axis.
-public enum VerticalAlignment: Equatable {
-  case top
-  case center
-  case bottom
-}
-
 public let defaultStackSpacing: CGFloat = 8
 
 /// A view that arranges its children in a horizontal line.
diff --git a/Sources/TokamakCore/Views/Layout/VStack.swift b/Sources/TokamakCore/Views/Layout/VStack.swift
index c63f9b8ad..eb3f6103a 100644
--- a/Sources/TokamakCore/Views/Layout/VStack.swift
+++ b/Sources/TokamakCore/Views/Layout/VStack.swift
@@ -14,13 +14,6 @@
 
 import Foundation
 
-/// An alignment position along the horizontal axis.
-public enum HorizontalAlignment: Equatable {
-  case leading
-  case center
-  case trailing
-}
-
 /// A view that arranges its children in a vertical line.
 ///
 ///     VStack {
diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
index 4a2f1c067..29585454c 100644
--- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
@@ -39,6 +39,7 @@ private extension VerticalAlignment {
     case .top: return "flex-start"
     case .center: return "center"
     case .bottom: return "flex-end"
+    default: return "center"
     }
   }
 }
@@ -49,6 +50,7 @@ private extension HorizontalAlignment {
     case .leading: return "flex-start"
     case .center: return "center"
     case .trailing: return "flex-end"
+    default: return "center"
     }
   }
 }
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 6a5214753..5800c798a 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -5,6 +5,7 @@
 //  Created by Carson Katri on 2/6/22.
 //
 
+import Foundation
 import TokamakCore
 
 public final class HTMLElement: Element, CustomStringConvertible {
@@ -127,6 +128,7 @@ public extension HTMLConvertible {
 public struct StaticHTMLFiberRenderer: FiberRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
+  public var sceneSize: CGSize { .zero }
 
   init() {
     rootElement = .init(tag: "body", attributes: [:], innerHTML: nil, children: [])
@@ -152,6 +154,8 @@ public struct StaticHTMLFiberRenderer: FiberRenderer {
         parent.data.children[index] = replacement
       case let .update(previous, newData):
         previous.update(with: newData)
+      case let .layout(element, data):
+        print("Received layout message \(data) for \(element)")
       }
     }
   }
diff --git a/Sources/TokamakStaticHTML/Views/Layout/HStack.swift b/Sources/TokamakStaticHTML/Views/Layout/HStack.swift
index 91690a981..e44ec8b8a 100644
--- a/Sources/TokamakStaticHTML/Views/Layout/HStack.swift
+++ b/Sources/TokamakStaticHTML/Views/Layout/HStack.swift
@@ -23,6 +23,8 @@ extension VerticalAlignment {
       return "center"
     case .bottom:
       return "end"
+    default:
+      return "center"
     }
   }
 }
diff --git a/Sources/TokamakStaticHTML/Views/Layout/VStack.swift b/Sources/TokamakStaticHTML/Views/Layout/VStack.swift
index dd99d3c75..354047954 100644
--- a/Sources/TokamakStaticHTML/Views/Layout/VStack.swift
+++ b/Sources/TokamakStaticHTML/Views/Layout/VStack.swift
@@ -23,6 +23,8 @@ extension HorizontalAlignment {
       return "center"
     case .trailing:
       return "flex-end"
+    default:
+      return "center"
     }
   }
 }
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index e6b0fcce7..77bece65c 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -137,9 +137,11 @@ struct TestRenderer: FiberRenderer {
   typealias ElementType = TestElement
 
   let rootElement: TestElement
+  let sceneSize: CGSize
 
-  init(_ rootElement: TestElement) {
+  init(_ rootElement: TestElement, size: CGSize) {
     self.rootElement = rootElement
+    sceneSize = size
   }
 
   static func isPrimitive<V>(_ view: V) -> Bool where V: View {
@@ -159,6 +161,8 @@ struct TestRenderer: FiberRenderer {
         print("Update \(previous) with \(newData)")
         previous.update(with: newData)
         print(previous)
+      case let .layout(element, data):
+        print("Layout \(element) with \(data)")
       }
     }
   }
@@ -166,10 +170,11 @@ struct TestRenderer: FiberRenderer {
 
 final class VisitorTests: XCTestCase {
   func testRenderer() {
-    let reconciler = TestRenderer(.root).render(TestView())
+    let reconciler = TestRenderer(.root, size: .init(width: 500, height: 500)).render(TestView())
     func decrement() {
       (
-        reconciler.current // ModifiedContent
+        reconciler.current // RootView
+          .child? // ModifiedContent
           .child? // _ViewModifier_Content
           .child? // TestView
           .child? // Counter
@@ -185,7 +190,8 @@ final class VisitorTests: XCTestCase {
     }
     func increment() {
       (
-        reconciler.current // ModifiedContent
+        reconciler.current // RootView
+          .child? // ModifiedContent
           .child? // _ViewModifier_Content
           .child? // TestView
           .child? // Counter
@@ -201,10 +207,11 @@ final class VisitorTests: XCTestCase {
       )?
         .action()
     }
-    for i in 0..<5 {
-      increment()
-    }
-    print(reconciler.current)
-    decrement()
+//    for _ in 0..<5 {
+//      increment()
+//    }
+//    decrement()
+    increment()
+    print(reconciler.current as Any)
   }
 }

From a9af988a6d24f35b55d9ec01ea13cba3d3bc0d7d Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 21 Feb 2022 16:13:58 -0500
Subject: [PATCH 11/64] Layout engine for the DOM renderer

---
 Sources/TokamakCore/Fiber/Fiber.swift         |   5 +-
 .../TokamakCore/Fiber/FiberReconciler.swift   | 161 ++++++++++--------
 .../TokamakCore/Fiber/LayoutComputer.swift    |  57 ++++---
 Sources/TokamakDOM/DOMFiberRenderer.swift     |  24 ++-
 Sources/TokamakDOM/index.html                 |  16 ++
 .../TokamakReconcilerTests/VisitorTests.swift |   1 +
 6 files changed, 162 insertions(+), 102 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 16366a295..95ac471c9 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -52,7 +52,7 @@ import Foundation
     var state: [PropertyInfo: MutableStorage]!
 
     /// The dimensions computed by
-    var dimensions: ViewDimensions = .init(origin: .zero, size: .zero, alignmentGuides: [:])
+    var dimensions: ViewDimensions?
 
     /// The WIP node if this is current, or the current node if this is WIP.
     weak var alternate: Fiber?
@@ -284,7 +284,8 @@ import Foundation
       return """
       \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
         .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {\(element != nil ?
-        "\n\(spaces)dimensions: \(dimensions)" : "")
+        "\n\(spaces)dimensions: \(dimensions ?? .init(origin: .zero, size: .zero, alignmentGuides: [:]))" :
+        "")
       \(child?.flush(level: level + 2) ?? "")
       \(spaces)}
       \(sibling?.flush(level: level) ?? "")
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index c5270e168..9eea35b4c 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -19,7 +19,10 @@ final class RootLayoutComputer: LayoutComputer {
   }
 
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    .zero
+    .init(
+      x: sceneSize.width / 2 - child.dimensions[HorizontalAlignment.center],
+      y: sceneSize.height / 2 - child.dimensions[VerticalAlignment.center]
+    )
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
@@ -291,27 +294,27 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       }
 
       /// Request a size for the view on the way back up the tree.
-      func layout(_ node: TreeReducer.Result) {
+      func layout(_ node: Fiber) {
         // FIXME: Add alignmentGuide modifier to override defaults and pass the correct guide data.
-        if let elementIndex = node.fiber?.elementIndex,
-           let element = node.fiber?.element
-        {
+        if let element = node.element {
+          let elementIndex = node.elementIndex ?? 0
           // Fulfill the layout requests.
-          let context = LayoutContext(children: node.fiber?.layoutRequests.map(\.child) ?? [])
-          for request in node.fiber?.layoutRequests ?? [] {
-            request.onLayout(node.fiber?.outputs.layoutComputer.position(
+          let context = LayoutContext(children: node.layoutRequests.map(\.child))
+          for request in node.layoutRequests {
+            request.onLayout(node.outputs.layoutComputer.position(
               request.child, in: context
-            ) ?? .zero)
+            ))
           }
+          node.layoutRequests = []
+          node.alternate?.layoutRequests = []
           // Compute our size in the context.
-          let size = node.fiber?.outputs.layoutComputer.requestSize(in: context) ?? .zero
+          let size = node.outputs.layoutComputer.requestSize(in: context)
           let dimensions = ViewDimensions(
             origin: .zero, size: size, alignmentGuides: [:]
           )
-          node.fiber?.dimensions = dimensions
           // We enqueue our positioning request, but do not perform it until
           // all children of the elementParent are processed.
-          node.fiber?.elementParent?.enqueueLayoutRequest(
+          node.elementParent?.enqueueLayoutRequest(
             dimensions,
             at: elementIndex
           ) { [weak self, weak node, weak element] origin in
@@ -320,85 +323,101 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
               size: size,
               alignmentGuides: [:]
             )
-            if dimensions != node?.fiber?.dimensions,
+            if dimensions != node?.alternate?.dimensions,
                let element = element
             {
               self?.mutations.append(.layout(element: element, dimensions: dimensions))
             }
-            node?.fiber?.dimensions = dimensions
+            node?.dimensions = dimensions
+            node?.alternate?.dimensions = dimensions
           }
         }
       }
 
-      // The main reconciler loop.
-      while true {
-        // Perform work on the node.
-        reconcile(node)
+      /// The main reconciler loop.
+      func mainLoop() {
+        while true {
+          // Perform work on the node.
+          reconcile(node)
 
-        node.elementIndices = elementIndices
+          node.elementIndices = elementIndices
 
-        // Compute the children of the node.
-        let reducer = TreeReducer.Visitor(initialResult: node)
-        node.visitChildren(reducer)
-        elementIndices = node.elementIndices
+          // Compute the children of the node.
+          let reducer = TreeReducer.Visitor(initialResult: node)
+          node.visitChildren(reducer)
+          elementIndices = node.elementIndices
 
-        // Setup the alternate if it doesn't exist yet.
-        if node.fiber?.alternate == nil {
-          _ = node.fiber?.createAndBindAlternate?()
-        }
+          // Setup the alternate if it doesn't exist yet.
+          if node.fiber?.alternate == nil {
+            _ = node.fiber?.createAndBindAlternate?()
+          }
 
-        // Walk all down all the way into the deepest child.
-        if let child = reducer.result.child {
-          node = child
-          continue
-        } else if let alternateChild = node.fiber?.alternate?.child {
-          walk(alternateChild) { node in
-            if let element = node.element,
-               let parent = node.elementParent?.element
-            {
-              // The alternate has a child that no longer exists.
-              // Removals must happen in reverse order, so a child element
-              // is removed before its parent.
-              self.mutations.insert(.remove(element: element, parent: parent), at: 0)
+          // Walk all down all the way into the deepest child.
+          if let child = reducer.result.child {
+            node = child
+            continue
+          } else if let alternateChild = node.fiber?.alternate?.child {
+            // The alternate has a child that no longer exists.
+            walk(alternateChild) { node in
+              if let element = node.element,
+                 let parent = node.elementParent?.element
+              {
+                // Removals must happen in reverse order, so a child element
+                // is removed before its parent.
+                self.mutations.insert(.remove(element: element, parent: parent), at: 0)
+              }
+              return true
             }
-            return true
           }
-        }
-        if reducer.result.child == nil {
-          node.fiber?.child = nil // Make sure we clear the child if there was none
-        }
+          if reducer.result.child == nil {
+            node.fiber?.child = nil // Make sure we clear the child if there was none
+          }
 
-        // We call layout when we reach the bottommost view.
-        layout(node)
+          // We call layout when we reach the bottommost view.
+          if let fiber = node.fiber {
+            layout(fiber)
+          }
 
-        // If we've made it back to the root, then exit.
-        if node === rootResult {
-          return
-        }
+          // If we've made it back to the root, then exit.
+          if node === rootResult {
+            return
+          }
 
-        // Now walk back up the tree until we find a sibling.
-        while node.sibling == nil {
-          var alternateSibling = node.fiber?.alternate?.sibling
-          while alternateSibling != nil { // The alternate had siblings that no longer exist.
-            if let element = alternateSibling?.element,
-               let parent = alternateSibling?.elementParent?.element
-            {
-              // Removals happen in reverse order, so a child element is removed before
-              // its parent.
-              mutations.insert(.remove(element: element, parent: parent), at: 0)
+          // Now walk back up the tree until we find a sibling.
+          while node.sibling == nil {
+            var alternateSibling = node.fiber?.alternate?.sibling
+            while alternateSibling != nil { // The alternate had siblings that no longer exist.
+              if let element = alternateSibling?.element,
+                 let parent = alternateSibling?.elementParent?.element
+              {
+                // Removals happen in reverse order, so a child element is removed before
+                // its parent.
+                mutations.insert(.remove(element: element, parent: parent), at: 0)
+              }
+              alternateSibling = alternateSibling?.sibling
+            }
+            guard let parent = node.parent else { return }
+            // We also call layout when we are walking back up the tree.
+            if let fiber = parent.fiber {
+              layout(fiber)
             }
-            alternateSibling = alternateSibling?.sibling
+            // When we walk back to the root, exit
+            guard parent !== currentRoot.alternate else { return }
+            node = parent
           }
-          guard let parent = node.parent else { return }
-          // We also call layout when we are walking back up the tree.
-          layout(parent)
-          // When we walk back to the root, exit
-          guard parent !== currentRoot.alternate else { return }
-          node = parent
+          // Walk across to the sibling, and repeat.
+          // swiftlint:disable:next force_unwrap
+          node = node.sibling!
         }
-        // Walk across to the sibling, and repeat.
-        // swiftlint:disable:next force_unwrap
-        node = node.sibling!
+      }
+      mainLoop()
+
+      // We continue afterwards to lay out any parents that may have pending layout requests
+      // up the entire tree.
+      var layoutNode = node.fiber
+      while let current = layoutNode {
+        layout(current)
+        layoutNode = current.elementParent
       }
     }
   }
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 2c1548573..5e3bb50c2 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -71,40 +71,41 @@ final class FlexLayout: LayoutComputer {
   }
 }
 
-extension VStack {
-  private final class VStackLayout: LayoutComputer {
-    let proposedSize: CGSize
-    let alignment: HorizontalAlignment
+final class VStackLayout: LayoutComputer {
+  let proposedSize: CGSize
+  let alignment: HorizontalAlignment
 
-    init(proposedSize: CGSize, alignment: HorizontalAlignment) {
-      self.proposedSize = proposedSize
-      self.alignment = alignment
-    }
+  init(proposedSize: CGSize, alignment: HorizontalAlignment) {
+    self.proposedSize = proposedSize
+    self.alignment = alignment
+  }
 
-    func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
-      // FIXME: Only propose the remaining space after each child is processed.
-      proposedSize
-    }
+  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+    // FIXME: Only propose the remaining space after each child is processed.
+    proposedSize
+  }
 
-    func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-      let maxWidth = context.children.max(by: { $0.dimensions.width < $1.dimensions.width })
-      return .init(
-        x: (maxWidth?.dimensions[alignment] ?? .zero) - child.dimensions[alignment],
-        y: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.height }
-      )
-    }
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    let maxWidth = context.children.max(by: { $0.dimensions.width < $1.dimensions.width })
+    return .init(
+      x: (maxWidth?.dimensions[alignment] ?? .zero) - child.dimensions[alignment],
+      y: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.height }
+    )
+  }
 
-    func requestSize(in context: LayoutContext) -> CGSize {
-      .init(
-        width: context.children.max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions
-          .width
-          ?? .zero,
-        height: context.children.reduce(0) { $0 + $1.dimensions.height }
-      )
-    }
+  func requestSize(in context: LayoutContext) -> CGSize {
+    print("VStack is laying out in \(context)")
+    return .init(
+      width: context.children.max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions
+        .width
+        ?? .zero,
+      height: context.children.reduce(0) { $0 + $1.dimensions.height }
+    )
   }
+}
 
-  public static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+public extension VStack {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
     .init(
       inputs: inputs,
       layoutComputer: VStackLayout(
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 942cdae8d..d1988d896 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -5,6 +5,7 @@
 //  Created by Carson Katri on 2/7/22.
 //
 
+import Foundation
 import JavaScriptKit
 @_spi(TokamakCore) import TokamakCore
 @_spi(TokamakStaticHTML) import TokamakStaticHTML
@@ -62,6 +63,10 @@ public struct DOMFiberRenderer: FiberRenderer {
   public let rootElement: DOMElement
   private let jsCommit: JSFunction
 
+  public var sceneSize: CGSize {
+    .init(width: body.clientWidth.number!, height: body.clientHeight.number!)
+  }
+
   public var defaultEnvironment: EnvironmentValues {
     var environment = EnvironmentValues()
     environment[_ColorSchemeKey.self] = .light
@@ -91,7 +96,7 @@ public struct DOMFiberRenderer: FiberRenderer {
       )
     )
     rootElement.reference = reference
-    Tokamak.root = .object(reference)
+    Tokamak.initRoot.function!(reference)
   }
 
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
@@ -135,6 +140,12 @@ extension Mutation where Renderer == DOMFiberRenderer {
         "updates": newElement.encoded
           .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }),
       ]
+    case let .layout(element, dimensions):
+      return [
+        "operation": 4,
+        "element": element.lazyReference,
+        "dimensions": dimensions.encoded,
+      ]
     }
   }
 }
@@ -178,6 +189,17 @@ extension DOMElement.Data {
   }
 }
 
+extension ViewDimensions {
+  var encoded: [String: ConvertibleToJSValue] {
+    [
+      "x": Double(origin.x),
+      "y": Double(origin.y),
+      "width": Double(width),
+      "height": Double(height),
+    ]
+  }
+}
+
 extension _PrimitiveButtonStyleBody: DOMNodeConvertible {
   public var tag: String { "button" }
   public var attributes: [HTMLAttribute: String] { [:] }
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index 95a66ef5f..b62ab9683 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -7,6 +7,13 @@
     <script>
       window.Tokamak = {
         root: undefined,
+        initRoot: (root) => {
+          document.body.style.margin = '0'
+          root.style.width = '100vw'
+          root.style.height = '100vh'
+          root.style.position = 'relative'
+          window.Tokamak.root = root
+        },
         create: (element) => {
           const result = document.createElement(element.tag)
           for (const attribute of element.attributes) {
@@ -19,6 +26,7 @@
             result.innerHTML = element.innerHTML
           for (const [event, action] of Object.entries(element.listeners))
             result.addEventListener(event, action)
+          result.style.position = 'absolute'
           element.bind(result)
           return result
         },
@@ -60,6 +68,14 @@
                 mutation.previous.addEventListener(event, action)
               mutation.updates.bind(mutation.previous)
               break
+            case 4: // .layout
+              const target = mutation.element()
+              target.style.position = 'absolute'
+              target.style.width = `${mutation.dimensions.width}px`
+              target.style.height = `${mutation.dimensions.height}px`
+              target.style.left = `${mutation.dimensions.x}px`
+              target.style.top = `${mutation.dimensions.y}px`
+              continue
             default:
               console.error(`Unhandled mutation ${mutation.operation}`, mutation)
               continue
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 77bece65c..337c4b60d 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -212,6 +212,7 @@ final class VisitorTests: XCTestCase {
 //    }
 //    decrement()
     increment()
+//    decrement()
     print(reconciler.current as Any)
   }
 }

From 26ce22962c29881319df8151e5b456b087e65695 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 3 Mar 2022 09:55:41 -0500
Subject: [PATCH 12/64] Refined layout pass

---
 Sources/TokamakCore/Fiber/Fiber.swift         |  55 +-----
 .../TokamakCore/Fiber/FiberReconciler.swift   | 166 +++++++++++-----
 .../TokamakCore/Fiber/LayoutComputer.swift    | 186 +++++++++++-------
 Sources/TokamakCore/Fiber/Mutation.swift      |   2 +-
 Sources/TokamakCore/Fiber/ViewArguments.swift |  15 +-
 ...iewDimensions.swift => ViewGeometry.swift} |  20 +-
 Sources/TokamakDOM/DOMFiberRenderer.swift     |  10 +-
 Sources/TokamakDOM/index.html                 |   8 +-
 .../StaticHTMLFiberRenderer.swift             |   4 +-
 9 files changed, 272 insertions(+), 194 deletions(-)
 rename Sources/TokamakCore/Fiber/{ViewDimensions.swift => ViewGeometry.swift} (70%)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 95ac471c9..16e0c8c78 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -51,8 +51,8 @@ import Foundation
     /// Boxes that store `State` data.
     var state: [PropertyInfo: MutableStorage]!
 
-    /// The dimensions computed by
-    var dimensions: ViewDimensions?
+    /// The computed dimensions and origin.
+    var geometry: ViewGeometry?
 
     /// The WIP node if this is current, or the current node if this is WIP.
     weak var alternate: Fiber?
@@ -96,23 +96,14 @@ import Foundation
       self.elementParent = elementParent
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
-      let proposedSize: CGSize
-      if let elementIndex = elementIndex {
-        proposedSize = elementParent?.outputs.layoutComputer.proposeSize(
-          for: view,
-          at: elementIndex
-        ) ?? .zero
-      } else {
-        proposedSize = .zero
-      }
       let viewInputs = ViewInputs<V>(
         view: view,
-        proposedSize: proposedSize,
         environment: parent?.outputs.environment ?? .init(.init())
       )
       state = bindProperties(to: &view, typeInfo, viewInputs)
       self.view = view
       outputs = V._makeView(viewInputs)
+
       visitView = { [weak self] in
         guard let self = self else { return }
         // swiftlint:disable:next force_cast
@@ -224,23 +215,14 @@ import Foundation
 
       self.elementIndex = elementIndex
 
-      let proposedSize: CGSize
-      if let elementIndex = elementIndex {
-        proposedSize = elementParent?.outputs.layoutComputer.proposeSize(
-          for: view,
-          at: elementIndex
-        ) ?? .zero
-      } else {
-        proposedSize = .zero
-      }
       let viewInputs = ViewInputs<V>(
         view: view,
-        proposedSize: proposedSize,
         environment: parent?.outputs.environment ?? .init(.init())
       )
       state = bindProperties(to: &view, typeInfo, viewInputs)
       self.view = view
       outputs = V._makeView(viewInputs)
+
       visitView = { [weak self] in
         guard let self = self else { return }
         // swiftlint:disable:next force_cast
@@ -254,29 +236,12 @@ import Foundation
       }
     }
 
-    struct LayoutRequest {
-      let child: LayoutContext.Child
-      let onLayout: (CGPoint) -> ()
-    }
-
-    var layoutRequests = [LayoutRequest]()
-    /// A child requests a position from its parent, but this won't be computed until we have walked far enough up the tree to get to said parent.
-    func enqueueLayoutRequest(
-      _ dimensions: ViewDimensions,
-      at index: Int,
-      onLayout: @escaping (CGPoint) -> ()
-    ) {
-      layoutRequests.insert(
-        .init(
-          child: .init(index: index, dimensions: dimensions),
-          onLayout: onLayout
-        ),
-        at: index
-      )
-    }
-
     public var debugDescription: String {
-      flush()
+//      flush()
+      if let text = view as? Text {
+        return "Text(\"\(text.storage.rawText)\")"
+      }
+      return typeInfo?.name ?? "Unknown"
     }
 
     private func flush(level: Int = 0) -> String {
@@ -284,7 +249,7 @@ import Foundation
       return """
       \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
         .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {\(element != nil ?
-        "\n\(spaces)dimensions: \(dimensions ?? .init(origin: .zero, size: .zero, alignmentGuides: [:]))" :
+        "\n\(spaces)geometry: \(geometry ?? .init(origin: .init(origin: .zero), dimensions: .init(size: .zero, alignmentGuides: [:])))" :
         "")
       \(child?.flush(level: level + 2) ?? "")
       \(spaces)}
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 9eea35b4c..87108bb40 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -14,7 +14,9 @@ final class RootLayoutComputer: LayoutComputer {
     self.sceneSize = sceneSize
   }
 
-  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
     sceneSize
   }
 
@@ -54,7 +56,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
     static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
       .init(
         inputs: inputs,
-        layoutComputer: RootLayoutComputer(sceneSize: inputs.view.renderer.sceneSize)
+        layoutComputer: { _ in RootLayoutComputer(sceneSize: inputs.view.renderer.sceneSize) }
       )
     }
   }
@@ -86,6 +88,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       var sibling: Result?
       var newData: Renderer.ElementType.Data?
       var elementIndices: [ObjectIdentifier: Int]
+      var layoutContexts: [ObjectIdentifier: LayoutContext]
 
       // For reducing
       var lastSibling: Result?
@@ -99,7 +102,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         child: Fiber?,
         alternateChild: Fiber?,
         newData: Renderer.ElementType.Data? = nil,
-        elementIndices: [ObjectIdentifier: Int]
+        elementIndices: [ObjectIdentifier: Int],
+        layoutContexts: [ObjectIdentifier: LayoutContext]
       ) {
         self.fiber = fiber
         self.visitChildren = visitChildren
@@ -108,6 +112,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         nextExistingAlternate = alternateChild
         self.newData = newData
         self.elementIndices = elementIndices
+        self.layoutContexts = layoutContexts
       }
     }
 
@@ -134,7 +139,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           child: existing.child,
           alternateChild: existing.alternate?.child,
           newData: newData,
-          elementIndices: partialResult.elementIndices
+          elementIndices: partialResult.elementIndices,
+          layoutContexts: partialResult.layoutContexts
         )
         partialResult.nextExisting = existing.sibling
 
@@ -180,7 +186,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           parent: partialResult,
           child: nil,
           alternateChild: fiber.alternate?.child,
-          elementIndices: partialResult.elementIndices
+          elementIndices: partialResult.elementIndices,
+          layoutContexts: partialResult.layoutContexts
         )
       }
       // Get the last child element we've processed, and add the new child as its sibling.
@@ -262,7 +269,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         parent: nil,
         child: alternateRoot?.child,
         alternateChild: currentRoot.child,
-        elementIndices: [:]
+        elementIndices: [:],
+        layoutContexts: [:]
       )
       var node = rootResult
 
@@ -270,6 +278,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       /// we are currently at. This ensures we place children in the correct order, even if they are
       /// at different levels in the `View` tree.
       var elementIndices = [ObjectIdentifier: Int]()
+      /// The `LayoutContext` for each parent view.
+      var layoutContexts = [ObjectIdentifier: LayoutContext]()
 
       /// Compare `node` with its alternate, and add any mutations to the list.
       func reconcile(_ node: TreeReducer.Result) {
@@ -293,45 +303,81 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         }
       }
 
-      /// Request a size for the view on the way back up the tree.
-      func layout(_ node: Fiber) {
+      func proposeSize(for node: Fiber) {
+        guard node.element != nil else { return }
+
+        // Ask the parent for a size.
+        let proposedSize = node.elementParent?.outputs.layoutComputer.proposeSize(
+          for: view,
+          at: node.elementIndex ?? 0,
+          in: node.elementParent.flatMap { layoutContexts[ObjectIdentifier($0)] }
+            ?? .init(children: [])
+        ) ?? .zero
+        // Make our layout computer using that size.
+        node.outputs.layoutComputer = node.outputs.makeLayoutComputer(proposedSize)
+        node.alternate?.outputs.layoutComputer = node.outputs.layoutComputer
+        print("\(node): parent proposed \(proposedSize)")
+      }
+
+      func size(_ node: Fiber) {
+        guard node.element != nil,
+              let elementParent = node.elementParent
+        else { return }
+
+        let key = ObjectIdentifier(elementParent)
+        let elementIndex = node.elementIndex ?? 0
+        var parentContext = layoutContexts[key, default: .init(children: [])]
+
+        // Compute our size and position in our context.
+        let size = node.outputs.layoutComputer.requestSize(
+          in: layoutContexts[ObjectIdentifier(node), default: .init(children: [])]
+        )
+        let dimensions = ViewDimensions(size: size, alignmentGuides: [:])
+        let child = LayoutContext.Child(index: elementIndex, dimensions: dimensions)
+
+        print("\(node): requested \(size)")
+
+        // Add ourself to the parent context.
+        parentContext.children.append(child)
+        layoutContexts[key] = parentContext
+
+        // Update our geometry
+        node.geometry = .init(
+          origin: node.geometry?.origin ?? .init(origin: .zero),
+          dimensions: dimensions
+        )
+      }
+
+      /// Request a size and position from the parent on the way back up.
+      func position(_ node: Fiber) {
         // FIXME: Add alignmentGuide modifier to override defaults and pass the correct guide data.
-        if let element = node.element {
-          let elementIndex = node.elementIndex ?? 0
-          // Fulfill the layout requests.
-          let context = LayoutContext(children: node.layoutRequests.map(\.child))
-          for request in node.layoutRequests {
-            request.onLayout(node.outputs.layoutComputer.position(
-              request.child, in: context
-            ))
-          }
-          node.layoutRequests = []
-          node.alternate?.layoutRequests = []
-          // Compute our size in the context.
-          let size = node.outputs.layoutComputer.requestSize(in: context)
-          let dimensions = ViewDimensions(
-            origin: .zero, size: size, alignmentGuides: [:]
-          )
-          // We enqueue our positioning request, but do not perform it until
-          // all children of the elementParent are processed.
-          node.elementParent?.enqueueLayoutRequest(
-            dimensions,
-            at: elementIndex
-          ) { [weak self, weak node, weak element] origin in
-            let dimensions = ViewDimensions(
-              origin: origin,
-              size: size,
-              alignmentGuides: [:]
-            )
-            if dimensions != node?.alternate?.dimensions,
-               let element = element
-            {
-              self?.mutations.append(.layout(element: element, dimensions: dimensions))
-            }
-            node?.dimensions = dimensions
-            node?.alternate?.dimensions = dimensions
-          }
+        guard let element = node.element,
+              let elementParent = node.elementParent
+        else { return }
+
+        let key = ObjectIdentifier(elementParent)
+        let elementIndex = node.elementIndex ?? 0
+        let context = layoutContexts[key, default: .init(children: [])]
+
+        guard let child = context.children.first(where: { $0.index == elementIndex })
+        else { return }
+
+        // Compute our position in the context.
+        let position = elementParent.outputs.layoutComputer.position(child, in: context)
+        let geometry = ViewGeometry(
+          origin: .init(origin: position),
+          dimensions: child.dimensions
+        )
+
+        print("\(node): positioned \(position)")
+
+        // Push a layout mutation if needed.
+        if geometry != node.alternate?.geometry {
+          mutations.append(.layout(element: element, geometry: geometry))
         }
+        // Update ours and our alternate's geometry
+        node.geometry = geometry
+        node.alternate?.geometry = geometry
       }
 
       /// The main reconciler loop.
@@ -347,6 +393,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           node.visitChildren(reducer)
           elementIndices = node.elementIndices
 
+          // Propose sizes on the way down.
+          if let fiber = node.fiber {
+            proposeSize(for: fiber)
+          }
+
           // Setup the alternate if it doesn't exist yet.
           if node.fiber?.alternate == nil {
             _ = node.fiber?.createAndBindAlternate?()
@@ -373,11 +424,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             node.fiber?.child = nil // Make sure we clear the child if there was none
           }
 
-          // We call layout when we reach the bottommost view.
-          if let fiber = node.fiber {
-            layout(fiber)
-          }
-
           // If we've made it back to the root, then exit.
           if node === rootResult {
             return
@@ -396,15 +442,28 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
               }
               alternateSibling = alternateSibling?.sibling
             }
-            guard let parent = node.parent else { return }
-            // We also call layout when we are walking back up the tree.
-            if let fiber = parent.fiber {
-              layout(fiber)
+            // We `size` and `position` when we are walking back up the tree.
+            if let fiber = node.fiber {
+              size(fiber)
+              // Position the siblings in order.
+              var sibling = fiber.parent?.child
+              while let fiber = sibling {
+                position(fiber)
+                sibling = fiber.sibling
+              }
             }
+            guard let parent = node.parent else { return }
             // When we walk back to the root, exit
             guard parent !== currentRoot.alternate else { return }
             node = parent
           }
+
+          // We `size` when we reach the bottommost view that has a sibling.
+          // Otherwise, sizing takes place in the above loop.
+          if let fiber = node.fiber {
+            size(fiber)
+          }
+
           // Walk across to the sibling, and repeat.
           // swiftlint:disable:next force_unwrap
           node = node.sibling!
@@ -416,7 +475,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       // up the entire tree.
       var layoutNode = node.fiber
       while let current = layoutNode {
-        layout(current)
+        size(current)
+        position(current)
         layoutNode = current.elementParent
       }
     }
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 5e3bb50c2..29990da86 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -7,8 +7,9 @@
 
 import Foundation
 
+/// The currently computed children.
 struct LayoutContext {
-  let children: [Child]
+  var children: [Child]
 
   struct Child {
     let index: Int
@@ -17,10 +18,22 @@ struct LayoutContext {
 }
 
 /// A type that is able to propose sizes for its children.
+///
+/// The order of calls is guaranteed to be:
+/// 1. `proposeSize(for: child1, at: 0, in: context)`
+/// 2. `proposeSize(for: child2, at: 1, in: context)`
+/// 3. `position(child1)`
+/// 4. `position(child2)`
+///
+/// The `context` will contain all of the previously computed children from `proposeSize` calls.
+///
+/// The same `LayoutComputer` instance will be used for any given view during a single layout pass.
+///
+/// Sizes from `proposeSize` will be clamped, so it is safe to return negative numbers.
 protocol LayoutComputer: AnyObject {
   /// Will be called every time a child is evaluated.
   /// The calls will always be in order, and no more than one call will be made per child.
-  func proposeSize<V: View>(for child: V, at index: Int) -> CGSize
+  func proposeSize<V: View>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
   /// The child responds with their size and we place them relative to our origin.
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint
   /// Request a size for ourself from our parent.
@@ -30,23 +43,29 @@ protocol LayoutComputer: AnyObject {
 /// A `LayoutComputer` that takes the size of its children.
 final class ShrinkWrapLayout: LayoutComputer {
   let proposedSize: CGSize
-  var childSize: CGSize?
 
   init(proposedSize: CGSize) {
     self.proposedSize = proposedSize
   }
 
-  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
     proposedSize
   }
 
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    childSize = child.dimensions.size
-    return .zero
+    .zero
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
-    childSize ?? .zero
+    print("Shrinkwrap requesting size in \(context)")
+    return context.children.reduce(CGSize.zero) {
+      .init(
+        width: max($0.width, $1.dimensions.width),
+        height: max($0.height, $1.dimensions.height)
+      )
+    }
   }
 }
 
@@ -58,7 +77,9 @@ final class FlexLayout: LayoutComputer {
     self.proposedSize = proposedSize
   }
 
-  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
     proposedSize
   }
 
@@ -71,35 +92,86 @@ final class FlexLayout: LayoutComputer {
   }
 }
 
-final class VStackLayout: LayoutComputer {
+final class StackLayout: LayoutComputer {
   let proposedSize: CGSize
-  let alignment: HorizontalAlignment
-
-  init(proposedSize: CGSize, alignment: HorizontalAlignment) {
+  let axis: Axis
+  let alignment: Alignment
+  /// A multiplier of `1` for the axis that takes the size of the largest child.
+  let maxAxis: CGSize
+  /// A multiplier of `1` for the axis that the children are aligned on.
+  let fitAxis: CGSize
+
+  init(proposedSize: CGSize, axis: Axis, alignment: Alignment) {
     self.proposedSize = proposedSize
+    self.axis = axis
     self.alignment = alignment
+    switch axis {
+    case .horizontal:
+      maxAxis = .init(width: 0, height: 1)
+      fitAxis = .init(width: 1, height: 0)
+    case .vertical:
+      maxAxis = .init(width: 1, height: 0)
+      fitAxis = .init(width: 0, height: 1)
+    }
   }
 
-  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
-    // FIXME: Only propose the remaining space after each child is processed.
-    proposedSize
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    let used = context.children.reduce(CGSize.zero) {
+      .init(
+        width: $0.width + $1.dimensions.width,
+        height: $0.height + $1.dimensions.height
+      )
+    }
+    let size = CGSize(
+      width: proposedSize.width - (used.width * maxAxis.width),
+      height: proposedSize.height - (used.height * maxAxis.height)
+    )
+    return size
   }
 
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    let maxWidth = context.children.max(by: { $0.dimensions.width < $1.dimensions.width })
-    return .init(
-      x: (maxWidth?.dimensions[alignment] ?? .zero) - child.dimensions[alignment],
-      y: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.height }
+    let maxDimensions = CGSize(
+      width: (
+        context.children
+          .max(by: { $0.dimensions.width > $1.dimensions.width })?
+          .dimensions[alignment.horizontal] ?? .zero
+      )
+        - child.dimensions[alignment.horizontal],
+      height: (
+        context.children
+          .max(by: { $0.dimensions.height > $1.dimensions.height })?
+          .dimensions[alignment.vertical] ?? .zero
+      )
+        - child.dimensions[alignment.vertical]
+    )
+    let fitDimensions = context.children[0..<child.index]
+      .reduce(CGSize.zero) {
+        .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
+      }
+    let position = CGPoint(
+      x: (maxDimensions.width * maxAxis.width) + (fitDimensions.width * fitAxis.width),
+      y: (maxDimensions.height * maxAxis.height) + (fitDimensions.height * fitAxis.height)
     )
+    return position
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
-    print("VStack is laying out in \(context)")
+    let maxDimensions = CGSize(
+      width: context.children
+        .max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions.width ?? .zero,
+      height: context.children
+        .max(by: { $0.dimensions.height < $1.dimensions.height })?.dimensions.height ?? .zero
+    )
+    let fitDimensions = context.children
+      .reduce(CGSize.zero) {
+        .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
+      }
+
     return .init(
-      width: context.children.max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions
-        .width
-        ?? .zero,
-      height: context.children.reduce(0) { $0 + $1.dimensions.height }
+      width: (maxDimensions.width * maxAxis.width) + (fitDimensions.width * fitAxis.width),
+      height: (maxDimensions.height * maxAxis.height) + (fitDimensions.height * fitAxis.height)
     )
   }
 }
@@ -108,54 +180,28 @@ public extension VStack {
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
     .init(
       inputs: inputs,
-      layoutComputer: VStackLayout(
-        proposedSize: inputs.proposedSize,
-        alignment: inputs.view.alignment
-      )
+      layoutComputer: { proposedSize in
+        StackLayout(
+          proposedSize: proposedSize,
+          axis: .vertical,
+          alignment: .init(horizontal: inputs.view.alignment, vertical: .center)
+        )
+      }
     )
   }
 }
 
-extension HStack {
-  private final class HStackLayout: LayoutComputer {
-    let proposedSize: CGSize
-    let alignment: VerticalAlignment
-
-    init(proposedSize: CGSize, alignment: VerticalAlignment) {
-      self.proposedSize = proposedSize
-      self.alignment = alignment
-    }
-
-    func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
-      // FIXME: Only propose the remaining space after each child is processed.
-      proposedSize
-    }
-
-    func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-      let maxHeight = context.children.max(by: { $0.dimensions.height < $1.dimensions.height })
-      return .init(
-        x: context.children[0..<child.index].reduce(0) { $0 + $1.dimensions.width },
-        y: (maxHeight?.dimensions[alignment] ?? .zero) - child.dimensions[alignment]
-      )
-    }
-
-    func requestSize(in context: LayoutContext) -> CGSize {
-      .init(
-        width: context.children.reduce(0) { $0 + $1.dimensions.width },
-        height: context.children.max(by: { $0.dimensions.height < $1.dimensions.height })?
-          .dimensions.height
-          ?? .zero
-      )
-    }
-  }
-
-  public static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+public extension HStack {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
     .init(
       inputs: inputs,
-      layoutComputer: HStackLayout(
-        proposedSize: inputs.proposedSize,
-        alignment: inputs.view.alignment
-      )
+      layoutComputer: { proposedSize in
+        StackLayout(
+          proposedSize: proposedSize,
+          axis: .horizontal,
+          alignment: .init(horizontal: .center, vertical: inputs.view.alignment)
+        )
+      }
     )
   }
 }
@@ -170,7 +216,9 @@ final class TextLayoutComputer: LayoutComputer {
     self.proposedSize = proposedSize
   }
 
-  func proposeSize<V>(for child: V, at index: Int) -> CGSize where V: View {
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
     fatalError("Text views cannot have children.")
   }
 
@@ -188,7 +236,9 @@ public extension Text {
   static func _makeView(_ inputs: ViewInputs<Text>) -> ViewOutputs {
     .init(
       inputs: inputs,
-      layoutComputer: TextLayoutComputer(text: inputs.view, proposedSize: inputs.proposedSize)
+      layoutComputer: { proposedSize in
+        TextLayoutComputer(text: inputs.view, proposedSize: proposedSize)
+      }
     )
   }
 }
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
index d04ec2619..44d3e24cb 100644
--- a/Sources/TokamakCore/Fiber/Mutation.swift
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -20,5 +20,5 @@ public enum Mutation<Renderer: FiberRenderer> {
     replacement: Renderer.ElementType
   )
   case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
-  case layout(element: Renderer.ElementType, dimensions: ViewDimensions)
+  case layout(element: Renderer.ElementType, geometry: ViewGeometry)
 }
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index 84a1dbeaf..a64a17f15 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -10,8 +10,6 @@ import Foundation
 /// Data passed to `_makeView` to create the `ViewOutputs` used in reconciling/rendering.
 public struct ViewInputs<V: View> {
   let view: V
-  /// The size proposed by this view's parent.
-  let proposedSize: CGSize
   let environment: EnvironmentBox
 }
 
@@ -21,10 +19,9 @@ public struct ViewOutputs {
   /// This is stored as a reference to avoid copying the environment when unnecessary.
   let environment: EnvironmentBox
   let preferences: _PreferenceStore
-  /// The size requested by this view. Can use the data from our `LayoutComputer` after all its children are processed.
-  var size: (LayoutComputer) -> CGSize
+  let makeLayoutComputer: (CGSize) -> LayoutComputer
   /// The `LayoutComputer` used to propose sizes for the children of this view.
-  let layoutComputer: LayoutComputer
+  var layoutComputer: LayoutComputer!
 }
 
 final class EnvironmentBox {
@@ -40,14 +37,14 @@ extension ViewOutputs {
     inputs: ViewInputs<V>,
     environment: EnvironmentValues? = nil,
     preferences: _PreferenceStore? = nil,
-    size: ((LayoutComputer) -> CGSize)? = nil,
-    layoutComputer: LayoutComputer? = nil
+    layoutComputer: ((CGSize) -> LayoutComputer)? = nil
   ) {
     // Only replace the EnvironmentBox when we change the environment. Otherwise the same box can be reused.
     self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
-    self.size = size ?? { _ in inputs.proposedSize }
-    self.layoutComputer = layoutComputer ?? ShrinkWrapLayout(proposedSize: inputs.proposedSize)
+    makeLayoutComputer = layoutComputer ?? { proposedSize in
+      ShrinkWrapLayout(proposedSize: proposedSize)
+    }
   }
 }
 
diff --git a/Sources/TokamakCore/Fiber/ViewDimensions.swift b/Sources/TokamakCore/Fiber/ViewGeometry.swift
similarity index 70%
rename from Sources/TokamakCore/Fiber/ViewDimensions.swift
rename to Sources/TokamakCore/Fiber/ViewGeometry.swift
index d5e4ddd21..a40193736 100644
--- a/Sources/TokamakCore/Fiber/ViewDimensions.swift
+++ b/Sources/TokamakCore/Fiber/ViewGeometry.swift
@@ -7,8 +7,20 @@
 
 import Foundation
 
-public struct ViewDimensions: Equatable {
+public struct ViewGeometry: Equatable {
+  @_spi(TokamakCore) public let origin: ViewOrigin
+  @_spi(TokamakCore) public let dimensions: ViewDimensions
+}
+
+/// The position of the `View` relative to its parent.
+public struct ViewOrigin: Equatable {
   @_spi(TokamakCore) public let origin: CGPoint
+
+  @_spi(TokamakCore) public var x: CGFloat { origin.x }
+  @_spi(TokamakCore) public var y: CGFloat { origin.y }
+}
+
+public struct ViewDimensions: Equatable {
   @_spi(TokamakCore) public let size: CGSize
   @_spi(TokamakCore) public let alignmentGuides: [ObjectIdentifier: CGFloat]
 
@@ -31,9 +43,3 @@ public struct ViewDimensions: Equatable {
     alignmentGuides[.init(guide.id)]
   }
 }
-
-extension ViewDimensions: CustomDebugStringConvertible {
-  public var debugDescription: String {
-    "(\(origin.x), \(origin.y)), (\(width), \(height))"
-  }
-}
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index d1988d896..c84b50702 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -140,11 +140,11 @@ extension Mutation where Renderer == DOMFiberRenderer {
         "updates": newElement.encoded
           .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }),
       ]
-    case let .layout(element, dimensions):
+    case let .layout(element, geometry):
       return [
         "operation": 4,
         "element": element.lazyReference,
-        "dimensions": dimensions.encoded,
+        "geometry": geometry.encoded,
       ]
     }
   }
@@ -189,13 +189,13 @@ extension DOMElement.Data {
   }
 }
 
-extension ViewDimensions {
+extension ViewGeometry {
   var encoded: [String: ConvertibleToJSValue] {
     [
       "x": Double(origin.x),
       "y": Double(origin.y),
-      "width": Double(width),
-      "height": Double(height),
+      "width": Double(dimensions.width),
+      "height": Double(dimensions.height),
     ]
   }
 }
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index b62ab9683..9afb46636 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -71,10 +71,10 @@
             case 4: // .layout
               const target = mutation.element()
               target.style.position = 'absolute'
-              target.style.width = `${mutation.dimensions.width}px`
-              target.style.height = `${mutation.dimensions.height}px`
-              target.style.left = `${mutation.dimensions.x}px`
-              target.style.top = `${mutation.dimensions.y}px`
+              target.style.width = `${mutation.geometry.width}px`
+              target.style.height = `${mutation.geometry.height}px`
+              target.style.left = `${mutation.geometry.x}px`
+              target.style.top = `${mutation.geometry.y}px`
               continue
             default:
               console.error(`Unhandled mutation ${mutation.operation}`, mutation)
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 5800c798a..578102495 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -6,7 +6,7 @@
 //
 
 import Foundation
-import TokamakCore
+@_spi(TokamakCore) import TokamakCore
 
 public final class HTMLElement: Element, CustomStringConvertible {
   public struct Data: ElementData, Equatable {
@@ -125,7 +125,7 @@ public extension HTMLConvertible {
   }
 }
 
-public struct StaticHTMLFiberRenderer: FiberRenderer {
+@_spi(TokamakCore) public struct StaticHTMLFiberRenderer: FiberRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
   public var sceneSize: CGSize { .zero }

From 2891e6b635a1d7f1cb5e45d2738da22b2b2c4da2 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 3 Mar 2022 10:50:30 -0500
Subject: [PATCH 13/64] Revise positioning and restoration of position styles
 on .update

---
 .../TokamakCore/Fiber/FiberReconciler.swift   | 20 ++++----
 .../TokamakCore/Fiber/LayoutComputer.swift    | 50 ++++++++++---------
 Sources/TokamakDOM/index.html                 | 11 ++++
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 87108bb40..22db4ffa8 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -316,7 +316,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         // Make our layout computer using that size.
         node.outputs.layoutComputer = node.outputs.makeLayoutComputer(proposedSize)
         node.alternate?.outputs.layoutComputer = node.outputs.layoutComputer
-        print("\(node): parent proposed \(proposedSize)")
       }
 
       func size(_ node: Fiber) {
@@ -335,8 +334,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         let dimensions = ViewDimensions(size: size, alignmentGuides: [:])
         let child = LayoutContext.Child(index: elementIndex, dimensions: dimensions)
 
-        print("\(node): requested \(size)")
-
         // Add ourself to the parent context.
         parentContext.children.append(child)
         layoutContexts[key] = parentContext
@@ -369,8 +366,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           dimensions: child.dimensions
         )
 
-        print("\(node): positioned \(position)")
-
         // Push a layout mutation if needed.
         if geometry != node.alternate?.geometry {
           mutations.append(.layout(element: element, geometry: geometry))
@@ -471,13 +466,18 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       }
       mainLoop()
 
-      // We continue afterwards to lay out any parents that may have pending layout requests
-      // up the entire tree.
-      var layoutNode = node.fiber
+      // We continue to the very top to update all necessary positions.
+      var layoutNode = node.fiber?.child
       while let current = layoutNode {
-        size(current)
+        // We only need to re-position, because the size can't change if no state changed.
         position(current)
-        layoutNode = current.elementParent
+        if current.sibling != nil {
+          // We also don't need to go deep into sibling children,
+          // because child positioning is relative to the parent.
+          layoutNode = current.sibling
+        } else {
+          layoutNode = current.parent
+        }
       }
     }
   }
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 29990da86..5b389531d 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -59,8 +59,7 @@ final class ShrinkWrapLayout: LayoutComputer {
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
-    print("Shrinkwrap requesting size in \(context)")
-    return context.children.reduce(CGSize.zero) {
+    context.children.reduce(CGSize.zero) {
       .init(
         width: max($0.width, $1.dimensions.width),
         height: max($0.height, $1.dimensions.height)
@@ -125,34 +124,39 @@ final class StackLayout: LayoutComputer {
       )
     }
     let size = CGSize(
-      width: proposedSize.width - (used.width * maxAxis.width),
-      height: proposedSize.height - (used.height * maxAxis.height)
+      width: proposedSize.width - (used.width * fitAxis.width),
+      height: proposedSize.height - (used.height * fitAxis.height)
     )
     return size
   }
 
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    let maxDimensions = CGSize(
-      width: (
-        context.children
-          .max(by: { $0.dimensions.width > $1.dimensions.width })?
-          .dimensions[alignment.horizontal] ?? .zero
-      )
-        - child.dimensions[alignment.horizontal],
-      height: (
-        context.children
-          .max(by: { $0.dimensions.height > $1.dimensions.height })?
-          .dimensions[alignment.vertical] ?? .zero
-      )
-        - child.dimensions[alignment.vertical]
-    )
-    let fitDimensions = context.children[0..<child.index]
-      .reduce(CGSize.zero) {
-        .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
+    let (maxSize, fitSize) = context.children
+      .enumerated()
+      .reduce((CGSize.zero, CGSize.zero)) { res, next in
+        (
+          .init(
+            width: max(res.0.width, next.element.dimensions.width),
+            height: max(res.0.height, next.element.dimensions.height)
+          ),
+          next.offset < child.index ? .init(
+            width: res.1.width + next.element.dimensions.width,
+            height: res.1.height + next.element.dimensions.height
+          ) : res.1
+        )
       }
+    let maxDimensions = ViewDimensions(size: maxSize, alignmentGuides: [:])
     let position = CGPoint(
-      x: (maxDimensions.width * maxAxis.width) + (fitDimensions.width * fitAxis.width),
-      y: (maxDimensions.height * maxAxis.height) + (fitDimensions.height * fitAxis.height)
+      x: (
+        (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal]) * maxAxis
+          .width
+      )
+        + (fitSize.width * fitAxis.width),
+      y: (
+        (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]) * maxAxis
+          .height
+      )
+        + (fitSize.height * fitAxis.height)
     )
     return position
   }
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index 9afb46636..22fe7a3ef 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -57,6 +57,13 @@
               replaceParent.replaceChild(replacement, original)
               break
             case 3: // .update
+              // If we set the .style property, we need to copy the layout styles back in after.
+              const geometry = {
+                width: mutation.previous.style.width,
+                height: mutation.previous.style.height,
+                left: mutation.previous.style.left,
+                top: mutation.previous.style.top
+              }
               for (const attribute of mutation.updates.attributes) {
                 if (attribute.property)
                   mutation.previous[attribute.name] = attribute.value
@@ -67,6 +74,10 @@
               for (const [event, action] of Object.entries(mutation.updates.listeners))
                 mutation.previous.addEventListener(event, action)
               mutation.updates.bind(mutation.previous)
+              // Copy back the layout.
+              mutation.previous.style.position = 'absolute'
+              for (const [style, value] of Object.entries(geometry))
+                mutation.previous.style[style] = value
               break
             case 4: // .layout
               const target = mutation.element()

From 055c8264cf4cd6bde296364fab78de037eea18d7 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 3 Mar 2022 12:22:09 -0500
Subject: [PATCH 14/64] Re-add Optional.body for StackReconciler-based
 renderers

---
 Sources/TokamakCore/Views/ViewBuilder.swift | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Views/ViewBuilder.swift b/Sources/TokamakCore/Views/ViewBuilder.swift
index eeb7848de..dca1465d1 100644
--- a/Sources/TokamakCore/Views/ViewBuilder.swift
+++ b/Sources/TokamakCore/Views/ViewBuilder.swift
@@ -53,7 +53,15 @@ extension _ConditionalContent: GroupView {
   }
 }
 
-extension Optional: View, _PrimitiveView where Wrapped: View {
+extension Optional: View where Wrapped: View {
+  public var body: some View {
+    if let view = self {
+      view
+    } else {
+      EmptyView()
+    }
+  }
+
   public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
     switch self {
     case .none:

From 9902ace76f29d98c08ee7144f69fc29f48f77f0f Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 7 Mar 2022 12:16:41 -0500
Subject: [PATCH 15/64] Add text measurement

---
 .../TokamakCore/Fiber/FiberReconciler.swift   |  8 +++++++-
 Sources/TokamakCore/Fiber/FiberRenderer.swift | 15 +++++++++++++++
 .../TokamakCore/Fiber/LayoutComputer.swift    | 13 +++++++++----
 Sources/TokamakCore/Fiber/ViewArguments.swift |  9 +++++++--
 Sources/TokamakDOM/DOMFiberRenderer.swift     | 19 +++++++++++++++++++
 Sources/TokamakDOM/index.html                 | 14 ++++++++++++++
 .../StaticHTMLFiberRenderer.swift             |  6 ++++++
 .../TokamakReconcilerTests/VisitorTests.swift |  6 ++++++
 8 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 22db4ffa8..b84a208e6 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -48,9 +48,15 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
     let content: Content
     let renderer: Renderer
 
+    var environment: EnvironmentValues {
+      var environment = renderer.defaultEnvironment
+      environment.measureText = renderer.measureText
+      return environment
+    }
+
     var body: some View {
       content
-        .environmentValues(renderer.defaultEnvironment)
+        .environmentValues(environment)
     }
 
     static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index 8a62d61ce..d8fea1395 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -21,6 +21,8 @@ public protocol FiberRenderer {
   var defaultEnvironment: EnvironmentValues { get }
   /// The size of the window we are rendering in.
   var sceneSize: CGSize { get }
+  /// Calculate the size of `Text` in `environment` for layout.
+  func measureText(_ text: Text, proposedSize: CGSize, in environment: EnvironmentValues) -> CGSize
 }
 
 public extension FiberRenderer {
@@ -31,3 +33,16 @@ public extension FiberRenderer {
     .init(self, view)
   }
 }
+
+extension EnvironmentValues {
+  private enum MeasureTextKey: EnvironmentKey {
+    static var defaultValue: (Text, CGSize, EnvironmentValues) -> CGSize {
+      { _, _, _ in .zero }
+    }
+  }
+
+  var measureText: (Text, CGSize, EnvironmentValues) -> CGSize {
+    get { self[MeasureTextKey.self] }
+    set { self[MeasureTextKey.self] = newValue }
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 5b389531d..29c84b1cd 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -214,10 +214,12 @@ public extension HStack {
 final class TextLayoutComputer: LayoutComputer {
   let text: Text
   let proposedSize: CGSize
+  let environment: EnvironmentValues
 
-  init(text: Text, proposedSize: CGSize) {
+  init(text: Text, proposedSize: CGSize, environment: EnvironmentValues) {
     self.text = text
     self.proposedSize = proposedSize
+    self.environment = environment
   }
 
   func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
@@ -231,8 +233,7 @@ final class TextLayoutComputer: LayoutComputer {
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
-    // FIXME: Renderer-provided text measurement.
-    .init(width: 100, height: 50)
+    environment.measureText(text, proposedSize, environment)
   }
 }
 
@@ -241,7 +242,11 @@ public extension Text {
     .init(
       inputs: inputs,
       layoutComputer: { proposedSize in
-        TextLayoutComputer(text: inputs.view, proposedSize: proposedSize)
+        TextLayoutComputer(
+          text: inputs.view,
+          proposedSize: proposedSize,
+          environment: inputs.environment.environment
+        )
       }
     )
   }
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index a64a17f15..9976ce0c2 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -67,7 +67,12 @@ public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   }
 
   func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
-    // Visit the computed body of the modifier.
-    visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
+    if Modifier.Body.self == Never.self {
+      // Don't compute the body of a primitive modifier. Just return the content.
+      visitor.visit(content)
+    } else {
+      // Visit the computed body of the modifier.
+      visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
+    }
   }
 }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index c84b50702..a757a4abe 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -62,6 +62,7 @@ protocol DOMNodeConvertible: HTMLConvertible {
 public struct DOMFiberRenderer: FiberRenderer {
   public let rootElement: DOMElement
   private let jsCommit: JSFunction
+  private let jsMeasureText: JSFunction
 
   public var sceneSize: CGSize {
     .init(width: body.clientWidth.number!, height: body.clientHeight.number!)
@@ -80,6 +81,7 @@ public struct DOMFiberRenderer: FiberRenderer {
       """)
     }
     jsCommit = Tokamak.commit.function!
+    jsMeasureText = Tokamak.measureText.function!
     guard let reference = document.querySelector!(rootSelector).object else {
       fatalError("""
       The root element with selector '\(rootSelector)' could not be found. \
@@ -106,6 +108,23 @@ public struct DOMFiberRenderer: FiberRenderer {
   public func commit(_ mutations: [Mutation<Self>]) {
     jsCommit(mutations.map { $0.object() })
   }
+
+  public func measureText(_ text: Text, proposedSize: CGSize,
+                          in environment: EnvironmentValues) -> CGSize
+  {
+    // FIXME: Use text styles.
+    let dimensions = jsMeasureText(
+      text.innerHTML ?? "",
+      [
+        "width": Double(proposedSize.width),
+        "height": Double(proposedSize.height),
+      ]
+    )
+    return .init(
+      width: dimensions.width.number ?? 0,
+      height: dimensions.height.number ?? 0
+    )
+  }
 }
 
 extension Mutation where Renderer == DOMFiberRenderer {
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
index 22fe7a3ef..a99f37ce6 100644
--- a/Sources/TokamakDOM/index.html
+++ b/Sources/TokamakDOM/index.html
@@ -7,6 +7,20 @@
     <script>
       window.Tokamak = {
         root: undefined,
+        measureText: (text, proposedSize) => {
+          const element = document.createElement("span")
+          element.textContent = text
+          element.style.maxWidth = `${proposedSize.width}px`
+          element.style.maxHeight = `${proposedSize.height}px`
+          document.body.appendChild(element)
+          const rect = element.getBoundingClientRect()
+          const size = {
+            width: rect.width,
+            height: rect.height
+          }
+          document.body.removeChild(element)
+          return size
+        },
         initRoot: (root) => {
           document.body.style.margin = '0'
           root.style.width = '100vw'
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 578102495..4afca7177 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -159,4 +159,10 @@ public extension HTMLConvertible {
       }
     }
   }
+
+  public func measureText(_ text: Text, proposedSize: CGSize,
+                          in environment: EnvironmentValues) -> CGSize
+  {
+    .zero
+  }
 }
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 337c4b60d..d39fe8339 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -166,6 +166,12 @@ struct TestRenderer: FiberRenderer {
       }
     }
   }
+
+  func measureText(_ text: Text, proposedSize: CGSize,
+                   in environment: EnvironmentValues) -> CGSize
+  {
+    .init(width: 100, height: 50)
+  }
 }
 
 final class VisitorTests: XCTestCase {

From d576798ab7b0adcf341a871641d54e9c6e252a95 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 7 Mar 2022 16:06:27 -0500
Subject: [PATCH 16/64] Add spacing to StackLayout

---
 .../TokamakCore/Fiber/LayoutComputer.swift    | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 29c84b1cd..c3ba1e05c 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -95,15 +95,17 @@ final class StackLayout: LayoutComputer {
   let proposedSize: CGSize
   let axis: Axis
   let alignment: Alignment
+  let spacing: CGFloat
   /// A multiplier of `1` for the axis that takes the size of the largest child.
   let maxAxis: CGSize
   /// A multiplier of `1` for the axis that the children are aligned on.
   let fitAxis: CGSize
 
-  init(proposedSize: CGSize, axis: Axis, alignment: Alignment) {
+  init(proposedSize: CGSize, axis: Axis, alignment: Alignment, spacing: CGFloat) {
     self.proposedSize = proposedSize
     self.axis = axis
     self.alignment = alignment
+    self.spacing = spacing
     switch axis {
     case .horizontal:
       maxAxis = .init(width: 0, height: 1)
@@ -146,17 +148,19 @@ final class StackLayout: LayoutComputer {
         )
       }
     let maxDimensions = ViewDimensions(size: maxSize, alignmentGuides: [:])
+    /// The gaps up to this point.
+    let fitSpacing = CGFloat(child.index) * spacing
     let position = CGPoint(
       x: (
         (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal]) * maxAxis
           .width
       )
-        + (fitSize.width * fitAxis.width),
+        + ((fitSize.width + fitSpacing) * fitAxis.width),
       y: (
         (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]) * maxAxis
           .height
       )
-        + (fitSize.height * fitAxis.height)
+        + ((fitSize.height + fitSpacing) * fitAxis.height)
     )
     return position
   }
@@ -173,9 +177,14 @@ final class StackLayout: LayoutComputer {
         .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
       }
 
+    /// The combined gap size.
+    let fitSpacing = CGFloat(context.children.count - 1) * spacing
+
     return .init(
-      width: (maxDimensions.width * maxAxis.width) + (fitDimensions.width * fitAxis.width),
-      height: (maxDimensions.height * maxAxis.height) + (fitDimensions.height * fitAxis.height)
+      width: (maxDimensions.width * maxAxis.width) +
+        ((fitDimensions.width + fitSpacing) * fitAxis.width),
+      height: (maxDimensions.height * maxAxis.height) +
+        ((fitDimensions.height + fitSpacing) * fitAxis.height)
     )
   }
 }
@@ -188,7 +197,8 @@ public extension VStack {
         StackLayout(
           proposedSize: proposedSize,
           axis: .vertical,
-          alignment: .init(horizontal: inputs.view.alignment, vertical: .center)
+          alignment: .init(horizontal: inputs.view.alignment, vertical: .center),
+          spacing: inputs.view.spacing
         )
       }
     )
@@ -203,7 +213,8 @@ public extension HStack {
         StackLayout(
           proposedSize: proposedSize,
           axis: .horizontal,
-          alignment: .init(horizontal: .center, vertical: inputs.view.alignment)
+          alignment: .init(horizontal: .center, vertical: inputs.view.alignment),
+          spacing: inputs.view.spacing
         )
       }
     )

From c457dce1328c8d0f42ef9626c26eb6b6dddc894b Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 4 Apr 2022 22:18:32 -0400
Subject: [PATCH 17/64] Add benchmarks to compare the stack/fiber reconcilers

---
 .../StaticHTMLFiberRenderer.swift             |  2 +-
 Sources/TokamakStaticHTMLBenchmark/main.swift | 48 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 6a5214753..817ac7f7e 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -128,7 +128,7 @@ public struct StaticHTMLFiberRenderer: FiberRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
 
-  init() {
+  public init() {
     rootElement = .init(tag: "body", attributes: [:], innerHTML: nil, children: [])
     var environment = EnvironmentValues()
     environment[_ColorSchemeKey.self] = .light
diff --git a/Sources/TokamakStaticHTMLBenchmark/main.swift b/Sources/TokamakStaticHTMLBenchmark/main.swift
index d059c22aa..e4c8ae19b 100644
--- a/Sources/TokamakStaticHTMLBenchmark/main.swift
+++ b/Sources/TokamakStaticHTMLBenchmark/main.swift
@@ -43,4 +43,52 @@ benchmark("render List sorted attributes") {
   _ = StaticHTMLRenderer(List(1..<100) { Text("\($0)") }).render(shouldSortAttributes: true)
 }
 
+benchmark("render Text (StackReconciler)") {
+  _ = StaticHTMLRenderer(Text("Hello, world!")).render(shouldSortAttributes: false)
+}
+
+benchmark("render Text (FiberReconciler)") {
+  StaticHTMLFiberRenderer().render(Text("Hello, world!"))
+}
+
+benchmark("render ForEach(100) (StackReconciler)") {
+  _ = StaticHTMLRenderer(ForEach(1..<100) { Text("\($0)") }).render(shouldSortAttributes: false)
+}
+
+benchmark("render ForEach(100) (FiberReconciler)") {
+  StaticHTMLFiberRenderer().render(ForEach(1..<100) { Text("\($0)") })
+}
+
+benchmark("render ForEach(1000) (StackReconciler)") {
+  _ = StaticHTMLRenderer(ForEach(1..<1000) { Text("\($0)") }).render(shouldSortAttributes: false)
+}
+
+benchmark("render ForEach(1000) (FiberReconciler)") {
+  StaticHTMLFiberRenderer().render(ForEach(1..<1000) { Text("\($0)") })
+}
+
+struct RecursiveView: View {
+  let count: Int
+
+  init(_ count: Int) {
+    self.count = count
+  }
+
+  var body: some View {
+    if count == 0 {
+      Text("RecursiveView")
+    } else {
+      RecursiveView(count - 1)
+    }
+  }
+}
+
+benchmark("render RecursiveView(1000) (StackReconciler)") {
+  _ = StaticHTMLRenderer(RecursiveView(1000)).render(shouldSortAttributes: false)
+}
+
+benchmark("render RecursiveView(1000) (FiberReconciler)") {
+  StaticHTMLFiberRenderer().render(RecursiveView(1000))
+}
+
 Benchmark.main()

From be6aa89fa02574716bf33eb91caf3cfd052d244b Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 5 Apr 2022 10:45:57 -0400
Subject: [PATCH 18/64] Fix some issues created for the StackReconciler, and
 add update benchmarks

---
 Package.swift                                 |   9 +-
 Sources/TokamakCore/Fiber/Fiber.swift         |   6 +-
 .../TokamakCore/Views/Controls/Button.swift   |   8 +-
 Sources/TokamakCore/Views/Layout/HStack.swift |   8 +-
 Sources/TokamakCore/Views/Layout/VStack.swift |   8 +-
 Sources/TokamakCoreBenchmark/main.swift       | 210 +++++++++++++++++-
 Sources/TokamakDOM/DOMRenderer.swift          |   4 +-
 Sources/TokamakDemo/main.swift                |   2 +-
 .../TestFiberRenderer.swift                   | 125 +++++++++++
 .../TokamakReconcilerTests/VisitorTests.swift | 115 +---------
 10 files changed, 369 insertions(+), 126 deletions(-)
 create mode 100644 Sources/TokamakTestRenderer/TestFiberRenderer.swift

diff --git a/Package.swift b/Package.swift
index 7d7971445..e83aafb6d 100644
--- a/Package.swift
+++ b/Package.swift
@@ -166,6 +166,7 @@ let package = Package(
       dependencies: [
         "Benchmark",
         "TokamakCore",
+        "TokamakTestRenderer",
       ]
     ),
     .executableTarget(
@@ -208,7 +209,13 @@ let package = Package(
       name: "TokamakTestRenderer",
       dependencies: ["TokamakCore"]
     ),
-    .testTarget(name: "TokamakReconcilerTests", dependencies: ["TokamakCore"]),
+    .testTarget(
+      name: "TokamakReconcilerTests",
+      dependencies: [
+        "TokamakCore",
+        "TokamakTestRenderer",
+      ]
+    ),
     .testTarget(
       name: "TokamakTests",
       dependencies: ["TokamakTestRenderer"]
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 99945629c..d0ace1e36 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -25,7 +25,7 @@
     weak var reconciler: FiberReconciler<Renderer>?
 
     /// The underlying `View` instance.
-    var view: Any!
+    @_spi(TokamakCore) public var view: Any!
     /// Outputs from evaluating `View._makeView`
     var outputs: ViewOutputs!
     /// A function to visit `view` generically.
@@ -35,9 +35,9 @@
     /// The mounted element, if this is a Renderer primitive.
     var element: Renderer.ElementType?
     /// The first child node.
-    var child: Fiber?
+    @_spi(TokamakCore) public var child: Fiber?
     /// This node's right sibling.
-    var sibling: Fiber?
+    @_spi(TokamakCore) public var sibling: Fiber?
     /// An unowned reference to the parent node.
     unowned var parent: Fiber?
     /// The nearest parent that can be mounted on.
diff --git a/Sources/TokamakCore/Views/Controls/Button.swift b/Sources/TokamakCore/Views/Controls/Button.swift
index 9e69c46de..45c04becd 100644
--- a/Sources/TokamakCore/Views/Controls/Button.swift
+++ b/Sources/TokamakCore/Views/Controls/Button.swift
@@ -86,8 +86,12 @@ public struct _PrimitiveButtonStyleBody<Label>: View where Label: View {
 
   @Environment(\.controlSize) public var controlSize
 
-  public var body: some View {
-    label
+  public var body: Never {
+    neverBody("_PrimitiveButtonStyleBody")
+  }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitor.visit(label)
   }
 }
 
diff --git a/Sources/TokamakCore/Views/Layout/HStack.swift b/Sources/TokamakCore/Views/Layout/HStack.swift
index f7bc91402..7f47f177b 100644
--- a/Sources/TokamakCore/Views/Layout/HStack.swift
+++ b/Sources/TokamakCore/Views/Layout/HStack.swift
@@ -47,8 +47,12 @@ public struct HStack<Content>: View where Content: View {
     self.content = content()
   }
 
-  public var body: some View {
-    content
+  public var body: Never {
+    neverBody("HStack")
+  }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitor.visit(content)
   }
 }
 
diff --git a/Sources/TokamakCore/Views/Layout/VStack.swift b/Sources/TokamakCore/Views/Layout/VStack.swift
index c63f9b8ad..42fbe227f 100644
--- a/Sources/TokamakCore/Views/Layout/VStack.swift
+++ b/Sources/TokamakCore/Views/Layout/VStack.swift
@@ -42,8 +42,12 @@ public struct VStack<Content>: View where Content: View {
     self.content = content()
   }
 
-  public var body: some View {
-    content
+  public var body: Never {
+    neverBody("VStack")
+  }
+
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitor.visit(content)
   }
 }
 
diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index 6c3a70533..b0684b04b 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import Benchmark
-import TokamakCore
+@_spi(TokamakCore) import TokamakCore
+import TokamakTestRenderer
 
 private let bigType = NavigationView<HStack<VStack<Button<Text>>>>.self
 
@@ -25,4 +26,211 @@ benchmark("typeConstructorName TokamakCore") {
   _ = typeConstructorName(bigType)
 }
 
+struct UpdateWide: View {
+  @State var update = -1
+
+  var body: some View {
+    VStack {
+      ForEach(0..<1000) {
+        if update == $0 {
+          Text("Updated")
+        } else {
+          Text("\($0)")
+        }
+      }
+      Button("Update") {
+        update = 999
+      }
+    }
+  }
+}
+
+benchmark("update wide (StackReconciler)") {
+  let view = UpdateWide()
+  let renderer = TestRenderer(view)
+  mapAnyView(
+    renderer.rootTarget.subviews[0].subviews[1].subviews[0]
+      .view
+  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button.action()
+  }
+}
+
+benchmark("update wide (FiberReconciler)") {
+  let view = UpdateWide()
+  let reconciler = TestFiberRenderer(.root).render(view)
+  let button = reconciler.current // ModifiedContent
+    .child? // _ViewModifier_Content
+    .child? // UpdateLast
+    .child? // VStack
+    .child? // TupleView
+    .child?.sibling? // Button
+    .child? // ConditionalContent
+    .child? // AnyView
+    .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
+    .view
+  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+}
+
+struct UpdateNarrow: View {
+  @State var update = -1
+
+  var body: some View {
+    VStack {
+      ForEach(0..<1000) {
+        if update == $0 {
+          Text("Updated")
+        } else {
+          Text("\($0)")
+        }
+      }
+      Button("Update") {
+        update = 0
+      }
+    }
+  }
+}
+
+benchmark("update narrow (StackReconciler)") {
+  let view = UpdateNarrow()
+  let renderer = TestRenderer(view)
+  mapAnyView(
+    renderer.rootTarget.subviews[0].subviews[1].subviews[0]
+      .view
+  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button.action()
+  }
+}
+
+benchmark("update narrow (FiberReconciler)") {
+  let view = UpdateNarrow()
+  let reconciler = TestFiberRenderer(.root).render(view)
+  let button = reconciler.current // ModifiedContent
+    .child? // _ViewModifier_Content
+    .child? // UpdateLast
+    .child? // VStack
+    .child? // TupleView
+    .child?.sibling? // Button
+    .child? // ConditionalContent
+    .child? // AnyView
+    .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
+    .view
+  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+}
+
+struct UpdateDeep: View {
+  @State var update = "A"
+
+  struct RecursiveView: View {
+    let count: Int
+    let content: String
+
+    init(_ count: Int, content: String) {
+      self.count = count
+      self.content = content
+    }
+
+    var body: some View {
+      if count == 0 {
+        Text(content)
+      } else {
+        RecursiveView(count - 1, content: content)
+      }
+    }
+  }
+
+  var body: some View {
+    VStack {
+      RecursiveView(1000, content: update)
+      Button("Update") {
+        update = "B"
+      }
+    }
+  }
+}
+
+benchmark("update deep (StackReconciler)") {
+  let view = UpdateDeep()
+  let renderer = TestRenderer(view)
+  mapAnyView(
+    renderer.rootTarget.subviews[0].subviews[1].subviews[0]
+      .view
+  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button.action()
+  }
+}
+
+benchmark("update deep (FiberReconciler)") {
+  let view = UpdateDeep()
+  let reconciler = TestFiberRenderer(.root).render(view)
+  let button = reconciler.current // ModifiedContent
+    .child? // _ViewModifier_Content
+    .child? // UpdateLast
+    .child? // VStack
+    .child? // TupleView
+    .child?.sibling? // Button
+    .child? // ConditionalContent
+    .child? // AnyView
+    .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
+    .view
+  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+}
+
+struct UpdateShallow: View {
+  @State var update = "A"
+
+  struct RecursiveView: View {
+    let count: Int
+
+    init(_ count: Int) {
+      self.count = count
+    }
+
+    var body: some View {
+      if count == 0 {
+        Text("RecursiveView")
+      } else {
+        RecursiveView(count - 1)
+      }
+    }
+  }
+
+  var body: some View {
+    VStack {
+      Text(update)
+      RecursiveView(1000)
+      Button("Update") {
+        update = "B"
+      }
+    }
+  }
+}
+
+benchmark("update shallow (StackReconciler)") {
+  let view = UpdateShallow()
+  let renderer = TestRenderer(view)
+  mapAnyView(
+    renderer.rootTarget.subviews[0].subviews[1].subviews[0]
+      .view
+  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button.action()
+  }
+}
+
+benchmark("update shallow (FiberReconciler)") {
+  let view = UpdateShallow()
+  let reconciler = TestFiberRenderer(.root).render(view)
+  let button = reconciler.current // ModifiedContent
+    .child? // _ViewModifier_Content
+    .child? // UpdateLast
+    .child? // VStack
+    .child? // TupleView
+    .child?.sibling? // Button
+    .child? // ConditionalContent
+    .child? // AnyView
+    .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
+    .view
+  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+}
+
 Benchmark.main()
diff --git a/Sources/TokamakDOM/DOMRenderer.swift b/Sources/TokamakDOM/DOMRenderer.swift
index e429227c9..80f730be0 100644
--- a/Sources/TokamakDOM/DOMRenderer.swift
+++ b/Sources/TokamakDOM/DOMRenderer.swift
@@ -92,7 +92,9 @@ final class DOMRenderer: Renderer {
     appendRootStyle(ref)
 
     #if compiler(>=5.5) && (canImport(Concurrency) || canImport(_Concurrency))
-    JavaScriptEventLoop.installGlobalExecutor()
+    if #available(macOS 12.0, *) {
+      JavaScriptEventLoop.installGlobalExecutor()
+    }
     #endif
 
     let scheduler = JSScheduler()
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 4bf7e97a9..e330411c8 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -32,7 +32,7 @@ struct TestView: View {
   }
 }
 
-let reconciler = DOMFiberRenderer("#root").render(TestView())
+// let reconciler = DOMFiberRenderer("#root").render(TestView())
 
 // @available(OSX 10.16, iOS 14.0, *)
 // struct CustomScene: Scene {
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
new file mode 100644
index 000000000..b949eb224
--- /dev/null
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -0,0 +1,125 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 4/5/22.
+//
+
+@_spi(TokamakCore) import TokamakCore
+
+public protocol TestFiberPrimitive {
+  var tag: String { get }
+  var attributes: [String: Any] { get }
+}
+
+public extension TestFiberPrimitive {
+  var tag: String { String(String(reflecting: Self.self).split(separator: "<")[0]) }
+}
+
+extension VStack: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    ["spacing": _VStackProxy(self).spacing, "alignment": alignment]
+  }
+}
+
+extension HStack: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    ["spacing": _HStackProxy(self).spacing, "alignment": alignment]
+  }
+}
+
+extension Text: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    let proxy = _TextProxy(self)
+    return ["content": proxy.storage.rawText, "modifiers": proxy.modifiers]
+  }
+}
+
+extension _Button: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    ["action": action, "role": role as Any]
+  }
+}
+
+extension _PrimitiveButtonStyleBody: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    ["size": controlSize, "role": role as Any]
+  }
+}
+
+public final class TestFiberElement: Element, CustomStringConvertible {
+  public struct Data: ElementData, Equatable {
+    let renderedValue: String
+    let closingTag: String
+
+    init(
+      renderedValue: String,
+      closingTag: String
+    ) {
+      self.renderedValue = renderedValue
+      self.closingTag = closingTag
+    }
+
+    public init<V>(from primitiveView: V) where V: View {
+      guard let primitiveView = primitiveView as? TestFiberPrimitive else { fatalError() }
+      renderedValue =
+        "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
+      closingTag = "</\(primitiveView.tag)>"
+    }
+  }
+
+  public var data: Data
+
+  public init(from data: Data) {
+    self.data = data
+  }
+
+  public var description: String {
+    "\(data.renderedValue)\(data.closingTag)"
+  }
+
+  public init(renderedValue: String, closingTag: String) {
+    data = .init(renderedValue: renderedValue, closingTag: closingTag)
+  }
+
+  public func update(with data: Data) {
+    self.data = data
+  }
+
+  public static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }
+}
+
+public struct TestFiberRenderer: FiberRenderer {
+  public typealias ElementType = TestFiberElement
+
+  public let rootElement: ElementType
+
+  public init(_ rootElement: ElementType) {
+    self.rootElement = rootElement
+  }
+
+  public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
+    view is TestFiberPrimitive
+  }
+
+  public func commit(_ mutations: [Mutation<Self>]) {
+    for mutation in mutations {
+      switch mutation {
+      case .insert, .remove, .replace:
+        break
+      case let .update(previous, newData):
+        previous.update(with: newData)
+      }
+    }
+  }
+}
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index e6b0fcce7..1ea5aaad5 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -18,6 +18,7 @@
 import XCTest
 
 @_spi(TokamakCore) @testable import TokamakCore
+import TokamakTestRenderer
 
 private struct TestView: View {
   struct Counter: View {
@@ -52,121 +53,9 @@ private struct TestView: View {
   }
 }
 
-protocol TestPrimitive {
-  var tag: String { get }
-  var attributes: [String: Any] { get }
-}
-
-extension TestPrimitive {
-  var tag: String { String(String(reflecting: Self.self).split(separator: "<")[0]) }
-}
-
-extension VStack: TestPrimitive {
-  var attributes: [String: Any] {
-    ["spacing": spacing, "alignment": alignment]
-  }
-}
-
-extension HStack: TestPrimitive {
-  var attributes: [String: Any] {
-    ["spacing": spacing, "alignment": alignment]
-  }
-}
-
-extension Text: TestPrimitive {
-  var attributes: [String: Any] {
-    ["content": storage.rawText, "modifiers": modifiers]
-  }
-}
-
-extension _Button: TestPrimitive {
-  var attributes: [String: Any] {
-    ["action": action, "role": role as Any]
-  }
-}
-
-extension _PrimitiveButtonStyleBody: TestPrimitive {
-  var attributes: [String: Any] {
-    ["size": controlSize, "role": role as Any]
-  }
-}
-
-final class TestElement: Element, CustomStringConvertible {
-  struct Data: ElementData, Equatable {
-    let renderedValue: String
-    let closingTag: String
-
-    init(
-      renderedValue: String,
-      closingTag: String
-    ) {
-      self.renderedValue = renderedValue
-      self.closingTag = closingTag
-    }
-
-    init<V>(from primitiveView: V) where V: View {
-      guard let primitiveView = primitiveView as? TestPrimitive else { fatalError() }
-      renderedValue =
-        "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
-      closingTag = "</\(primitiveView.tag)>"
-    }
-  }
-
-  var data: Data
-
-  init(from data: Data) {
-    self.data = data
-  }
-
-  var description: String {
-    "\(data.renderedValue)\(data.closingTag)"
-  }
-
-  init(renderedValue: String, closingTag: String) {
-    data = .init(renderedValue: renderedValue, closingTag: closingTag)
-  }
-
-  func update(with data: Data) {
-    self.data = data
-  }
-
-  static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }
-}
-
-struct TestRenderer: FiberRenderer {
-  typealias ElementType = TestElement
-
-  let rootElement: TestElement
-
-  init(_ rootElement: TestElement) {
-    self.rootElement = rootElement
-  }
-
-  static func isPrimitive<V>(_ view: V) -> Bool where V: View {
-    view is TestPrimitive
-  }
-
-  func commit(_ mutations: [Mutation<TestRenderer>]) {
-    for mutation in mutations {
-      switch mutation {
-      case let .insert(element, parent, index):
-        print("Insert \(element) at \(index) in \(parent)")
-      case let .remove(element, parent):
-        print("Remove \(element) from \(parent as Any)")
-      case let .replace(parent, previous, replacement):
-        print("Replace \(previous) with \(replacement) in \(parent)")
-      case let .update(previous, newData):
-        print("Update \(previous) with \(newData)")
-        previous.update(with: newData)
-        print(previous)
-      }
-    }
-  }
-}
-
 final class VisitorTests: XCTestCase {
   func testRenderer() {
-    let reconciler = TestRenderer(.root).render(TestView())
+    let reconciler = TestFiberRenderer(.root).render(TestView())
     func decrement() {
       (
         reconciler.current // ModifiedContent

From ac5c11097d198b56673ddf0c3dda7df4402596d5 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Wed, 6 Apr 2022 09:31:24 -0400
Subject: [PATCH 19/64] Add BenchmarkState.measure to only calculate the time
 to update

---
 Sources/TokamakCoreBenchmark/main.swift | 66 +++++++++++++++++--------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index b0684b04b..17e559b4e 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -45,18 +45,22 @@ struct UpdateWide: View {
   }
 }
 
-benchmark("update wide (StackReconciler)") {
+benchmark("update wide (StackReconciler)") { state in
   let view = UpdateWide()
   let renderer = TestRenderer(view)
+  var button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>?
   mapAnyView(
     renderer.rootTarget.subviews[0].subviews[1].subviews[0]
       .view
-  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
-    button.action()
+  ) { (v: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button = v
+  }
+  try state.measure {
+    button?.action()
   }
 }
 
-benchmark("update wide (FiberReconciler)") {
+benchmark("update wide (FiberReconciler)") { state in
   let view = UpdateWide()
   let reconciler = TestFiberRenderer(.root).render(view)
   let button = reconciler.current // ModifiedContent
@@ -69,7 +73,9 @@ benchmark("update wide (FiberReconciler)") {
     .child? // AnyView
     .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
     .view
-  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  try state.measure {
+    (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  }
 }
 
 struct UpdateNarrow: View {
@@ -91,18 +97,22 @@ struct UpdateNarrow: View {
   }
 }
 
-benchmark("update narrow (StackReconciler)") {
+benchmark("update narrow (StackReconciler)") { state in
   let view = UpdateNarrow()
   let renderer = TestRenderer(view)
+  var button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>?
   mapAnyView(
     renderer.rootTarget.subviews[0].subviews[1].subviews[0]
       .view
-  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
-    button.action()
+  ) { (v: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button = v
+  }
+  try state.measure {
+    button?.action()
   }
 }
 
-benchmark("update narrow (FiberReconciler)") {
+benchmark("update narrow (FiberReconciler)") { state in
   let view = UpdateNarrow()
   let reconciler = TestFiberRenderer(.root).render(view)
   let button = reconciler.current // ModifiedContent
@@ -115,7 +125,9 @@ benchmark("update narrow (FiberReconciler)") {
     .child? // AnyView
     .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
     .view
-  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  try state.measure {
+    (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  }
 }
 
 struct UpdateDeep: View {
@@ -149,18 +161,22 @@ struct UpdateDeep: View {
   }
 }
 
-benchmark("update deep (StackReconciler)") {
+benchmark("update deep (StackReconciler)") { state in
   let view = UpdateDeep()
   let renderer = TestRenderer(view)
+  var button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>?
   mapAnyView(
     renderer.rootTarget.subviews[0].subviews[1].subviews[0]
       .view
-  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
-    button.action()
+  ) { (v: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button = v
+  }
+  try state.measure {
+    button?.action()
   }
 }
 
-benchmark("update deep (FiberReconciler)") {
+benchmark("update deep (FiberReconciler)") { state in
   let view = UpdateDeep()
   let reconciler = TestFiberRenderer(.root).render(view)
   let button = reconciler.current // ModifiedContent
@@ -173,7 +189,9 @@ benchmark("update deep (FiberReconciler)") {
     .child? // AnyView
     .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
     .view
-  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  try state.measure {
+    (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  }
 }
 
 struct UpdateShallow: View {
@@ -198,7 +216,7 @@ struct UpdateShallow: View {
   var body: some View {
     VStack {
       Text(update)
-      RecursiveView(1000)
+      RecursiveView(500)
       Button("Update") {
         update = "B"
       }
@@ -206,18 +224,22 @@ struct UpdateShallow: View {
   }
 }
 
-benchmark("update shallow (StackReconciler)") {
+benchmark("update shallow (StackReconciler)") { state in
   let view = UpdateShallow()
   let renderer = TestRenderer(view)
+  var button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>?
   mapAnyView(
     renderer.rootTarget.subviews[0].subviews[1].subviews[0]
       .view
-  ) { (button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
-    button.action()
+  ) { (v: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
+    button = v
+  }
+  try state.measure {
+    button?.action()
   }
 }
 
-benchmark("update shallow (FiberReconciler)") {
+benchmark("update shallow (FiberReconciler)") { state in
   let view = UpdateShallow()
   let reconciler = TestFiberRenderer(.root).render(view)
   let button = reconciler.current // ModifiedContent
@@ -230,7 +252,9 @@ benchmark("update shallow (FiberReconciler)") {
     .child? // AnyView
     .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
     .view
-  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  try state.measure {
+    (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
+  }
 }
 
 Benchmark.main()

From 0d82cecdd4a6bf1cd51bbaed9ecf67e6d44ae0a6 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Wed, 6 Apr 2022 09:33:27 -0400
Subject: [PATCH 20/64] Fix hang in update shallow benchmark

---
 Sources/TokamakCoreBenchmark/main.swift | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index 17e559b4e..d214bf43f 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -224,7 +224,7 @@ struct UpdateShallow: View {
   }
 }
 
-benchmark("update shallow (StackReconciler)") { state in
+benchmark("update shallow (StackReconciler)") { _ in
   let view = UpdateShallow()
   let renderer = TestRenderer(view)
   var button: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>?
@@ -234,12 +234,11 @@ benchmark("update shallow (StackReconciler)") { state in
   ) { (v: _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>) in
     button = v
   }
-  try state.measure {
-    button?.action()
-  }
+  // Using state.measure here hangs the benchmark app?
+  button?.action()
 }
 
-benchmark("update shallow (FiberReconciler)") { state in
+benchmark("update shallow (FiberReconciler)") { _ in
   let view = UpdateShallow()
   let reconciler = TestFiberRenderer(.root).render(view)
   let button = reconciler.current // ModifiedContent
@@ -252,9 +251,8 @@ benchmark("update shallow (FiberReconciler)") { state in
     .child? // AnyView
     .child? // _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>
     .view
-  try state.measure {
-    (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
-  }
+  // Using state.measure here hangs the benchmark app?g
+  (button as? _PrimitiveButtonStyleBody<PrimitiveButtonStyleConfiguration.Label>)?.action()
 }
 
 Benchmark.main()

From 7ef9bed51aafa2df43eb704dc1713b31fa3a5668 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Sun, 10 Apr 2022 19:21:37 +0100
Subject: [PATCH 21/64] Fix build errors

---
 Sources/TokamakDOM/DOMFiberRenderer.swift | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 942cdae8d..665c819a0 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -99,7 +99,7 @@ public struct DOMFiberRenderer: FiberRenderer {
   }
 
   public func commit(_ mutations: [Mutation<Self>]) {
-    jsCommit(mutations.map { $0.object() })
+    jsCommit(mutations.map { $0.object().jsValue })
   }
 }
 
@@ -110,7 +110,7 @@ extension Mutation where Renderer == DOMFiberRenderer {
       return [
         "operation": 0,
         "element": element.data.encoded
-          .merging(["bind": element.bindClosure], uniquingKeysWith: { $1 }),
+          .merging(["bind": element.bindClosure], uniquingKeysWith: { $1 }).jsValue,
         "parent": parent.lazyReference,
         "index": index,
       ]
@@ -125,7 +125,7 @@ extension Mutation where Renderer == DOMFiberRenderer {
         "operation": 2,
         "parent": parent.lazyReference,
         "element": previous.lazyReference,
-        "replacement": replacement.data.encoded,
+        "replacement": replacement.data.encoded.jsValue,
       ]
     case let .update(previous, newElement):
       previous.update(with: newElement)
@@ -133,7 +133,7 @@ extension Mutation where Renderer == DOMFiberRenderer {
         "operation": 3,
         "previous": previous.reference,
         "updates": newElement.encoded
-          .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }),
+          .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }).jsValue,
       ]
     }
   }
@@ -161,19 +161,19 @@ extension DOMElement.Data {
       "tag": tag,
       "attributes": attributes.map {
         [
-          "name": $0.key.value,
-          "property": $0.key.isUpdatedAsProperty,
-          "value": $0.value,
+          "name": $0.key.value.jsValue,
+          "property": $0.key.isUpdatedAsProperty.jsValue,
+          "value": $0.value.jsValue,
         ]
-      },
+      }.jsValue,
       "innerHTML": innerHTML,
       "listeners": listeners.mapValues { listener in
         JSClosure {
           listener($0[0].object!)
           return .undefined
         }
-      },
-      "debugData": debugData,
+      }.jsValue,
+      "debugData": debugData.jsValue,
     ]
   }
 }

From 34cd9d775bc446dd40c2b7610f17f3a74b2940d1 Mon Sep 17 00:00:00 2001
From: Max Desiatov <max@desiatov.com>
Date: Sun, 10 Apr 2022 19:22:36 +0100
Subject: [PATCH 22/64] Address build issues

---
 .github/workflows/ci.yml | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cc088e0ec..f6041effb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,14 +15,15 @@ jobs:
         with:
           shell-action: carton bundle --product TokamakDemo
 
-  swiftwasm_test_5_6:
-    runs-on: ubuntu-20.04
+  # FIXME: re-enable after https://github.com/swiftwasm/WasmTransformer/issues/18 is fixed.
+  # swiftwasm_test_5_6:
+  #   runs-on: ubuntu-20.04
 
-    steps:
-      - uses: actions/checkout@v2
-      - uses: swiftwasm/swiftwasm-action@main
-        with:
-          shell-action: carton test
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #     - uses: swiftwasm/swiftwasm-action@main
+  #       with:
+  #         shell-action: carton test
 
   # Disabled until macos-12 is available on GitHub Actions, which is required for Xcode 13.3
   # core_macos_build:

From a70a93815739f7efa067ffd5ac3da2cce073caf1 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 19 May 2022 16:34:23 -0400
Subject: [PATCH 23/64] Remove File.swift headers

---
 Sources/TokamakCore/Fiber/Element.swift              | 12 +++++++++++-
 Sources/TokamakCore/Fiber/Fiber.swift                | 12 +++++++++++-
 Sources/TokamakCore/Fiber/FiberReconciler.swift      | 12 +++++++++++-
 Sources/TokamakCore/Fiber/FiberRenderer.swift        | 12 +++++++++++-
 Sources/TokamakCore/Fiber/LayoutComputer.swift       | 12 +++++++++++-
 Sources/TokamakCore/Fiber/Mutation.swift             | 12 +++++++++++-
 Sources/TokamakCore/Fiber/ViewArguments.swift        | 12 +++++++++++-
 Sources/TokamakCore/Fiber/ViewVisitor.swift          | 12 +++++++++++-
 Sources/TokamakCore/Fiber/walk.swift                 | 12 +++++++++++-
 Sources/TokamakDOM/DOMFiberRenderer.swift            | 12 +++++++++++-
 .../TokamakStaticHTML/StaticHTMLFiberRenderer.swift  | 12 +++++++++++-
 11 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Element.swift b/Sources/TokamakCore/Fiber/Element.swift
index f2f281cd9..319912b87 100644
--- a/Sources/TokamakCore/Fiber/Element.swift
+++ b/Sources/TokamakCore/Fiber/Element.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/15/22.
 //
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index d0ace1e36..f22b47393 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/15/22.
 //
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index a3b376530..bbdd15a66 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/15/22.
 //
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index 5da1f5d14..d00b7bc5b 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/15/22.
 //
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index a7c0e607a..4d49d8366 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/16/22.
 //
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
index 5c6d3cd34..dcc9685d4 100644
--- a/Sources/TokamakCore/Fiber/Mutation.swift
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/15/22.
 //
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index a0ee38afe..ef35031fa 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/7/22.
 //
diff --git a/Sources/TokamakCore/Fiber/ViewVisitor.swift b/Sources/TokamakCore/Fiber/ViewVisitor.swift
index fe0948f98..5f972238f 100644
--- a/Sources/TokamakCore/Fiber/ViewVisitor.swift
+++ b/Sources/TokamakCore/Fiber/ViewVisitor.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/3/22.
 //
diff --git a/Sources/TokamakCore/Fiber/walk.swift b/Sources/TokamakCore/Fiber/walk.swift
index a5ee83a54..7e00c8ab4 100644
--- a/Sources/TokamakCore/Fiber/walk.swift
+++ b/Sources/TokamakCore/Fiber/walk.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/11/22.
 //
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 665c819a0..d9da549f4 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/7/22.
 //
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 817ac7f7e..a6904a995 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/6/22.
 //

From 485da767e0cc785f4c351a17c7661ca910a164ae Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 20 May 2022 15:02:57 -0400
Subject: [PATCH 24/64] Rename Element -> FiberElement and Element.Data ->
 FiberElement.Content

---
 Sources/TokamakCore/Fiber/Fiber.swift         |  2 +-
 .../{Element.swift => FiberElement.swift}     | 16 ++++----
 .../TokamakCore/Fiber/FiberReconciler.swift   |  8 ++--
 Sources/TokamakCore/Fiber/FiberRenderer.swift |  2 +-
 Sources/TokamakCore/Fiber/Mutation.swift      |  2 +-
 Sources/TokamakDOM/DOMFiberRenderer.swift     | 22 +++++------
 .../StaticHTMLFiberRenderer.swift             | 37 ++++++++++---------
 .../TestFiberRenderer.swift                   | 18 ++++-----
 8 files changed, 54 insertions(+), 53 deletions(-)
 rename Sources/TokamakCore/Fiber/{Element.swift => FiberElement.swift} (66%)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index f22b47393..145820401 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -208,7 +208,7 @@
     func update<V: View>(
       with view: inout V,
       childIndex: Int
-    ) -> Renderer.ElementType.Data? {
+    ) -> Renderer.ElementType.Content? {
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
       let viewInputs = ViewInputs<V>(
diff --git a/Sources/TokamakCore/Fiber/Element.swift b/Sources/TokamakCore/Fiber/FiberElement.swift
similarity index 66%
rename from Sources/TokamakCore/Fiber/Element.swift
rename to Sources/TokamakCore/Fiber/FiberElement.swift
index 319912b87..307e9379b 100644
--- a/Sources/TokamakCore/Fiber/Element.swift
+++ b/Sources/TokamakCore/Fiber/FiberElement.swift
@@ -17,15 +17,15 @@
 
 /// A reference type that points to a `Renderer`-specific element that has been mounted.
 /// For instance, a DOM node in the `DOMFiberRenderer`.
-public protocol Element: AnyObject {
-  associatedtype Data: ElementData
-  var data: Data { get }
-  init(from data: Data)
-  func update(with data: Data)
+public protocol FiberElement: AnyObject {
+  associatedtype Content: FiberElementContent
+  var content: Content { get }
+  init(from content: Content)
+  func update(with content: Content)
 }
 
-/// The data used to create an `Element`. We re-use `Element` instances in the `Fiber` tree,
-/// but can re-create and copy `ElementData` as often as needed.
-public protocol ElementData: Equatable {
+/// The data used to create an `FiberElement`. We re-use `FiberElement` instances in the `Fiber` tree,
+/// but can re-create and copy `FiberElementContent` as often as needed.
+public protocol FiberElementContent: Equatable {
   init<V: View>(from primitiveView: V)
 }
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index bbdd15a66..83f1569e1 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -52,7 +52,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       unowned var parent: Result?
       var child: Result?
       var sibling: Result?
-      var newData: Renderer.ElementType.Data?
+      var newData: Renderer.ElementType.Content?
 
       // For reducing
       var childrenCount: Int = 0
@@ -66,7 +66,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         parent: Result?,
         child: Fiber?,
         alternateChild: Fiber?,
-        newData: Renderer.ElementType.Data? = nil
+        newData: Renderer.ElementType.Content? = nil
       ) {
         self.fiber = fiber
         self.visitChildren = visitChildren
@@ -225,7 +225,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             // This is a completely different type of view.
             mutations.append(.replace(parent: parent, previous: previous, replacement: element))
           } else if let newData = node.newData,
-                    newData != element.data
+                    newData != element.content
           {
             // This is the same type of view, but its backing data has changed.
             mutations.append(.update(previous: element, newData: newData))
@@ -245,7 +245,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
 
         // Setup the alternate if it doesn't exist yet.
         if node.fiber?.alternate == nil {
-          node.fiber?.createAndBindAlternate?()
+          _ = node.fiber?.createAndBindAlternate?()
         }
 
         // Walk all down all the way into the deepest child.
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index d00b7bc5b..5bdf4db88 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -18,7 +18,7 @@
 /// A renderer capable of performing mutations specified by a `FiberReconciler`.
 public protocol FiberRenderer {
   /// The element class this renderer uses.
-  associatedtype ElementType: Element
+  associatedtype ElementType: FiberElement
   /// Check whether a `View` is a primitive for this renderer.
   static func isPrimitive<V>(_ view: V) -> Bool where V: View
   /// Apply the mutations to the elements.
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
index dcc9685d4..7f1af004f 100644
--- a/Sources/TokamakCore/Fiber/Mutation.swift
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -27,5 +27,5 @@ public enum Mutation<Renderer: FiberRenderer> {
     previous: Renderer.ElementType,
     replacement: Renderer.ElementType
   )
-  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Data)
+  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Content)
 }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index d9da549f4..52318237d 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -19,10 +19,10 @@ import JavaScriptKit
 @_spi(TokamakCore) import TokamakCore
 @_spi(TokamakStaticHTML) import TokamakStaticHTML
 
-public final class DOMElement: Element {
+public final class DOMElement: FiberElement {
   var reference: JSObject?
 
-  public struct Data: ElementData {
+  public struct Content: FiberElementContent {
     let tag: String
     let attributes: [HTMLAttribute: String]
     let innerHTML: String?
@@ -34,18 +34,18 @@ public final class DOMElement: Element {
     }
   }
 
-  public var data: Data
+  public var content: Content
 
-  public init(from data: Data) {
-    self.data = data
+  public init(from content: Content) {
+    self.content = content
   }
 
-  public func update(with data: Data) {
-    self.data = data
+  public func update(with content: Content) {
+    self.content = content
   }
 }
 
-public extension DOMElement.Data {
+public extension DOMElement.Content {
   init<V>(from primitiveView: V) where V: View {
     guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
     tag = primitiveView.tag
@@ -119,7 +119,7 @@ extension Mutation where Renderer == DOMFiberRenderer {
     case let .insert(element, parent, index):
       return [
         "operation": 0,
-        "element": element.data.encoded
+        "element": element.content.encoded
           .merging(["bind": element.bindClosure], uniquingKeysWith: { $1 }).jsValue,
         "parent": parent.lazyReference,
         "index": index,
@@ -135,7 +135,7 @@ extension Mutation where Renderer == DOMFiberRenderer {
         "operation": 2,
         "parent": parent.lazyReference,
         "element": previous.lazyReference,
-        "replacement": replacement.data.encoded.jsValue,
+        "replacement": replacement.content.encoded.jsValue,
       ]
     case let .update(previous, newElement):
       previous.update(with: newElement)
@@ -165,7 +165,7 @@ extension DOMElement {
   }
 }
 
-extension DOMElement.Data {
+extension DOMElement.Content {
   var encoded: [String: ConvertibleToJSValue] {
     [
       "tag": tag,
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index a6904a995..17a360edf 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -17,13 +17,13 @@
 
 import TokamakCore
 
-public final class HTMLElement: Element, CustomStringConvertible {
-  public struct Data: ElementData, Equatable {
-    public static func == (lhs: HTMLElement.Data, rhs: HTMLElement.Data) -> Bool {
+public final class HTMLElement: FiberElement, CustomStringConvertible {
+  public struct Content: FiberElementContent, Equatable {
+    public static func == (lhs: Self, rhs: Self) -> Bool {
       lhs.tag == rhs.tag
         && lhs.attributes == rhs.attributes
         && lhs.innerHTML == rhs.innerHTML
-        && lhs.children.map(\.data) == rhs.children.map(\.data)
+        && lhs.children.map(\.content) == rhs.children.map(\.content)
     }
 
     var tag: String
@@ -51,10 +51,10 @@ public final class HTMLElement: Element, CustomStringConvertible {
     }
   }
 
-  public var data: Data
+  public var content: Content
 
-  public init(from data: Data) {
-    self.data = data
+  public init(from content: Content) {
+    self.content = content
   }
 
   public init(
@@ -63,7 +63,7 @@ public final class HTMLElement: Element, CustomStringConvertible {
     innerHTML: String?,
     children: [HTMLElement]
   ) {
-    data = .init(
+    content = .init(
       tag: tag,
       attributes: attributes,
       innerHTML: innerHTML,
@@ -71,17 +71,18 @@ public final class HTMLElement: Element, CustomStringConvertible {
     )
   }
 
-  public func update(with data: Data) {
-    self.data = data
+  public func update(with content: Content) {
+    self.content = content
   }
 
   public var description: String {
     """
-    <\(data.tag)\(data.attributes.map { " \($0.key.value)=\"\($0.value)\"" }
-      .joined(separator: ""))>\(data.innerHTML != nil ? "\(data.innerHTML!)" : "")\(!data.children
-      .isEmpty ? "\n" : "")\(data.children.map(\.description).joined(separator: "\n"))\(!data
+    <\(content.tag)\(content.attributes.map { " \($0.key.value)=\"\($0.value)\"" }
+      .joined(separator: ""))>\(content.innerHTML != nil ? "\(content.innerHTML!)" : "")\(!content
       .children
-      .isEmpty ? "\n" : "")</\(data.tag)>
+      .isEmpty ? "\n" : "")\(content.children.map(\.description).joined(separator: "\n"))\(!content
+      .children
+      .isEmpty ? "\n" : "")</\(content.tag)>
     """
   }
 }
@@ -153,13 +154,13 @@ public struct StaticHTMLFiberRenderer: FiberRenderer {
     for mutation in mutations {
       switch mutation {
       case let .insert(element, parent, index):
-        parent.data.children.insert(element, at: index)
+        parent.content.children.insert(element, at: index)
       case let .remove(element, parent):
-        parent?.data.children.removeAll(where: { $0 === element })
+        parent?.content.children.removeAll(where: { $0 === element })
       case let .replace(parent, previous, replacement):
-        guard let index = parent.data.children.firstIndex(where: { $0 === previous })
+        guard let index = parent.content.children.firstIndex(where: { $0 === previous })
         else { continue }
-        parent.data.children[index] = replacement
+        parent.content.children[index] = replacement
       case let .update(previous, newData):
         previous.update(with: newData)
       }
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index b949eb224..e6956b7c9 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -57,8 +57,8 @@ extension _PrimitiveButtonStyleBody: TestFiberPrimitive {
   }
 }
 
-public final class TestFiberElement: Element, CustomStringConvertible {
-  public struct Data: ElementData, Equatable {
+public final class TestFiberElement: FiberElement, CustomStringConvertible {
+  public struct Content: FiberElementContent, Equatable {
     let renderedValue: String
     let closingTag: String
 
@@ -78,22 +78,22 @@ public final class TestFiberElement: Element, CustomStringConvertible {
     }
   }
 
-  public var data: Data
+  public var content: Content
 
-  public init(from data: Data) {
-    self.data = data
+  public init(from content: Content) {
+    self.content = content
   }
 
   public var description: String {
-    "\(data.renderedValue)\(data.closingTag)"
+    "\(content.renderedValue)\(content.closingTag)"
   }
 
   public init(renderedValue: String, closingTag: String) {
-    data = .init(renderedValue: renderedValue, closingTag: closingTag)
+    content = .init(renderedValue: renderedValue, closingTag: closingTag)
   }
 
-  public func update(with data: Data) {
-    self.data = data
+  public func update(with content: Content) {
+    self.content = content
   }
 
   public static var root: Self { .init(renderedValue: "<root>", closingTag: "</root>") }

From 81deb5aed9afca4ae0834a9b3b1b70579761d435 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 20 May 2022 15:05:44 -0400
Subject: [PATCH 25/64] Add doc comment explaining unowned usage

---
 Sources/TokamakCore/Fiber/Fiber.swift | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 145820401..0ad740633 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -49,6 +49,9 @@
     /// This node's right sibling.
     @_spi(TokamakCore) public var sibling: Fiber?
     /// An unowned reference to the parent node.
+    ///
+    /// Parent references are `unowned` (as opposed to `weak`) because the parent will always exist if a child does.
+    /// If the parent is released, the child is released with it.
     unowned var parent: Fiber?
     /// The nearest parent that can be mounted on.
     unowned var elementParent: Fiber?

From 74ee8532b5c2867ee228cd063017310a7547feda Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 21 May 2022 07:06:11 -0400
Subject: [PATCH 26/64] Add doc comments explaining implicitly unwrapped
 optionals

---
 Sources/TokamakCore/Fiber/Fiber.swift | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 0ad740633..e7ec04db6 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -35,10 +35,18 @@
     weak var reconciler: FiberReconciler<Renderer>?
 
     /// The underlying `View` instance.
+    ///
+    /// Stored as an IUO because we must use the `bindProperties` method to create the `View` with its dependencies setup,
+    /// which requires all stored properties be set before using.
     @_spi(TokamakCore) public var view: Any!
     /// Outputs from evaluating `View._makeView`
+    ///
+    /// Stored as an IUO because creating `ViewOutputs` depends on the `bindProperties` method, which requires
+    /// all stored properties be set before using. `outputs` is guaranteed to be set in the initializer.
     var outputs: ViewOutputs!
     /// A function to visit `view` generically.
+    ///
+    /// Stored as an IUO because it captures a weak reference to `self`, which requires all stored properties be set before capturing.
     var visitView: ((ViewVisitor) -> ())!
     /// The identity of this `View`
     var id: Identity?
@@ -58,7 +66,7 @@
     /// The cached type information for the underlying `View`.
     var typeInfo: TypeInfo?
     /// Boxes that store `State` data.
-    var state: [PropertyInfo: MutableStorage]!
+    var state: [PropertyInfo: MutableStorage] = [:]
 
     /// The WIP node if this is current, or the current node if this is WIP.
     weak var alternate: Fiber?

From 8a8c075f837d686ce1b66db1f9f01ee63c9b1ad7 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 22 May 2022 16:05:34 -0400
Subject: [PATCH 27/64] Attempt to use Swift instead of JS for applying
 mutations

---
 .../TokamakCore/Fiber/FiberReconciler.swift   |  16 +--
 Sources/TokamakCore/Fiber/Mutation.swift      |   2 +-
 Sources/TokamakDOM/DOMFiberRenderer.swift     | 131 +++++++-----------
 Sources/TokamakDOM/index.html                 |  82 -----------
 Sources/TokamakDemo/main.swift                |   4 +-
 .../StaticHTMLFiberRenderer.swift             |   4 +-
 .../TestFiberRenderer.swift                   |   4 +-
 .../TokamakReconcilerTests/VisitorTests.swift |   3 +-
 8 files changed, 69 insertions(+), 177 deletions(-)
 delete mode 100644 Sources/TokamakDOM/index.html

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 83f1569e1..0e214dbe3 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -52,7 +52,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       unowned var parent: Result?
       var child: Result?
       var sibling: Result?
-      var newData: Renderer.ElementType.Content?
+      var newContent: Renderer.ElementType.Content?
 
       // For reducing
       var childrenCount: Int = 0
@@ -66,14 +66,14 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         parent: Result?,
         child: Fiber?,
         alternateChild: Fiber?,
-        newData: Renderer.ElementType.Content? = nil
+        newContent: Renderer.ElementType.Content? = nil
       ) {
         self.fiber = fiber
         self.visitChildren = visitChildren
         self.parent = parent
         nextExisting = child
         nextExistingAlternate = alternateChild
-        self.newData = newData
+        self.newContent = newContent
       }
     }
 
@@ -83,7 +83,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       let resultChild: Result
       if let existing = partialResult.nextExisting {
         // If a fiber already exists, simply update it with the new view.
-        let newData = existing.update(
+        let newContent = existing.update(
           with: &nextView,
           childIndex: partialResult.childrenCount
         )
@@ -93,7 +93,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           parent: partialResult,
           child: existing.child,
           alternateChild: existing.alternate?.child,
-          newData: newData
+          newContent: newContent
         )
         partialResult.nextExisting = existing.sibling
       } else {
@@ -224,11 +224,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           {
             // This is a completely different type of view.
             mutations.append(.replace(parent: parent, previous: previous, replacement: element))
-          } else if let newData = node.newData,
-                    newData != element.content
+          } else if let newContent = node.newContent,
+                    newContent != element.content
           {
             // This is the same type of view, but its backing data has changed.
-            mutations.append(.update(previous: element, newData: newData))
+            mutations.append(.update(previous: element, newContent: newContent))
           }
           elementIndices[key] = index + 1
         }
diff --git a/Sources/TokamakCore/Fiber/Mutation.swift b/Sources/TokamakCore/Fiber/Mutation.swift
index 7f1af004f..f29d0cfaf 100644
--- a/Sources/TokamakCore/Fiber/Mutation.swift
+++ b/Sources/TokamakCore/Fiber/Mutation.swift
@@ -27,5 +27,5 @@ public enum Mutation<Renderer: FiberRenderer> {
     previous: Renderer.ElementType,
     replacement: Renderer.ElementType
   )
-  case update(previous: Renderer.ElementType, newData: Renderer.ElementType.Content)
+  case update(previous: Renderer.ElementType, newContent: Renderer.ElementType.Content)
 }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 52318237d..3ce7dd031 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -70,7 +70,6 @@ protocol DOMNodeConvertible: HTMLConvertible {
 
 public struct DOMFiberRenderer: FiberRenderer {
   public let rootElement: DOMElement
-  private let jsCommit: JSFunction
 
   public var defaultEnvironment: EnvironmentValues {
     var environment = EnvironmentValues()
@@ -79,12 +78,6 @@ public struct DOMFiberRenderer: FiberRenderer {
   }
 
   public init(_ rootSelector: String) {
-    guard let Tokamak = JSObject.global.Tokamak.object else {
-      fatalError("""
-      Tokamak is not detected in the page's scripts. Ensure you included the Tokamak script in your site.
-      """)
-    }
-    jsCommit = Tokamak.commit.function!
     guard let reference = document.querySelector!(rootSelector).object else {
       fatalError("""
       The root element with selector '\(rootSelector)' could not be found. \
@@ -101,90 +94,70 @@ public struct DOMFiberRenderer: FiberRenderer {
       )
     )
     rootElement.reference = reference
-    Tokamak.root = .object(reference)
   }
 
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
     view is HTMLConvertible || view is DOMNodeConvertible
   }
-
-  public func commit(_ mutations: [Mutation<Self>]) {
-    jsCommit(mutations.map { $0.object().jsValue })
+  
+  private func createElement(_ element: DOMElement) -> JSObject {
+    let result = document.createElement!(element.content.tag).object!
+    apply(element.content, to: result)
+    element.reference = result
+    return result
   }
-}
-
-extension Mutation where Renderer == DOMFiberRenderer {
-  func object() -> [String: ConvertibleToJSValue] {
-    switch self {
-    case let .insert(element, parent, index):
-      return [
-        "operation": 0,
-        "element": element.content.encoded
-          .merging(["bind": element.bindClosure], uniquingKeysWith: { $1 }).jsValue,
-        "parent": parent.lazyReference,
-        "index": index,
-      ]
-    case let .remove(element, parent):
-      return [
-        "operation": 1,
-        "element": element.reference,
-        "parent": parent?.lazyReference,
-      ]
-    case let .replace(parent, previous, replacement):
-      return [
-        "operation": 2,
-        "parent": parent.lazyReference,
-        "element": previous.lazyReference,
-        "replacement": replacement.content.encoded.jsValue,
-      ]
-    case let .update(previous, newElement):
-      previous.update(with: newElement)
-      return [
-        "operation": 3,
-        "previous": previous.reference,
-        "updates": newElement.encoded
-          .merging(["bind": previous.bindClosure], uniquingKeysWith: { $1 }).jsValue,
-      ]
+  
+  private func apply(_ content: DOMElement.Content, to element: JSObject) {
+    for (attribute, value) in content.attributes {
+      if attribute.isUpdatedAsProperty {
+        element[dynamicMember: attribute.value] = .string(value)
+      } else {
+        _ = element.setAttribute?(attribute.value, value)
+      }
     }
-  }
-}
-
-extension DOMElement {
-  var bindClosure: ConvertibleToJSValue {
-    JSOneshotClosure { [weak self] in
-      self?.reference = $0[0].object!
-      return .undefined
+    if let innerHTML = content.innerHTML {
+      element.innerHTML = .string(innerHTML)
     }
-  }
-
-  var lazyReference: JSClosure {
-    JSClosure { _ in
-      guard let reference = self.reference else { return .undefined }
-      return .object(reference)
+    for (event, action) in content.listeners {
+      _ = element.addEventListener?(event, JSClosure {
+        action($0[0].object!)
+        return .undefined
+      })
+    }
+    for (key, value) in content.debugData {
+      element.dataset.object?[dynamicMember: key] = value.jsValue
     }
   }
-}
 
-extension DOMElement.Content {
-  var encoded: [String: ConvertibleToJSValue] {
-    [
-      "tag": tag,
-      "attributes": attributes.map {
-        [
-          "name": $0.key.value.jsValue,
-          "property": $0.key.isUpdatedAsProperty.jsValue,
-          "value": $0.value.jsValue,
-        ]
-      }.jsValue,
-      "innerHTML": innerHTML,
-      "listeners": listeners.mapValues { listener in
-        JSClosure {
-          listener($0[0].object!)
-          return .undefined
+  public func commit(_ mutations: [Mutation<Self>]) {
+    for mutation in mutations {
+      switch mutation {
+      case let .insert(newElement, parent, index):
+        let element = createElement(newElement)
+        guard let parentElement = parent.reference ?? rootElement.reference
+        else { fatalError("The root element was not bound (trying to insert element).") }
+        if Int((parentElement.children.object?.length.number ?? 0)) > index {
+          _ = parentElement.insertBefore?(element, parentElement.children[index])
+        } else {
+          _ = parentElement.appendChild?(element)
         }
-      }.jsValue,
-      "debugData": debugData.jsValue,
-    ]
+      case let .remove(element, _):
+        _ = element.reference?.remove?()
+      case let .replace(parent, previous, replacement):
+        guard let parentElement = parent.reference ?? rootElement.reference
+        else { fatalError("The root element was not bound (trying to replace element).") }
+        guard let previousElement = previous.reference else {
+          fatalError("The previous element does not exist (trying to replace element).")
+        }
+        let replacementElement = createElement(replacement)
+        _ = parentElement.replaceChild?(previousElement, replacementElement)
+      case let .update(previous, newContent):
+        guard let previousElement = previous.reference
+        else { fatalError("The element does not exist (trying to update element).") }
+        apply(newContent, to: previousElement)
+        previous.reference = previousElement
+      }
+    }
   }
 }
 
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
deleted file mode 100644
index 95a66ef5f..000000000
--- a/Sources/TokamakDOM/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Tokamak App</title>
-    <script>
-      window.Tokamak = {
-        root: undefined,
-        create: (element) => {
-          const result = document.createElement(element.tag)
-          for (const attribute of element.attributes) {
-            if (attribute.property)
-              result[attribute.name] = attribute.value
-            else
-              result.setAttribute(attribute.name, attribute.value)
-          }
-          if (!!element.innerHTML)
-            result.innerHTML = element.innerHTML
-          for (const [event, action] of Object.entries(element.listeners))
-            result.addEventListener(event, action)
-          element.bind(result)
-          return result
-        },
-        commit: (mutations) => {
-          for (const mutation of mutations) {
-            switch (mutation.operation) {
-            case 0: // .insert
-              const parent = mutation.parent() ?? window.Tokamak.root
-              const element = window.Tokamak.create(mutation.element)
-              element.dataset.view = mutation.element.debugData.view
-              if (parent.children.length > mutation.index) {
-                parent.insertBefore(element, parent.children[mutation.index])
-              } else {
-                parent.appendChild(element)
-              }
-              break
-            case 1: // .remove
-              if (!mutation.element) {
-                console.error(`Cannot remove null from parent.`)
-                continue
-              }
-              mutation.element.remove()
-              break
-            case 2: // .replace
-              const replaceParent = mutation.parent() ?? window.Tokamak.root
-              const original = mutation.element()
-              const replacement = window.Tokamak.create(mutation.replacement)
-              replaceParent.replaceChild(replacement, original)
-              break
-            case 3: // .update
-              for (const attribute of mutation.updates.attributes) {
-                if (attribute.property)
-                  mutation.previous[attribute.name] = attribute.value
-                else
-                  mutation.previous.setAttribute(attribute.name, attribute.value)
-              }
-              mutation.previous.innerHTML = mutation.updates.innerHTML
-              for (const [event, action] of Object.entries(mutation.updates.listeners))
-                mutation.previous.addEventListener(event, action)
-              mutation.updates.bind(mutation.previous)
-              break
-            default:
-              console.error(`Unhandled mutation ${mutation.operation}`, mutation)
-              continue
-            }
-          }
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <!--
-      Your Tokamak app will be injected into the #root element,
-      unless a different mountpoint is specified in the renderer.
-    -->
-    <div id="root"></div>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-  </body>
-</html>
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index e330411c8..0fc00c57d 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -32,7 +32,9 @@ struct TestView: View {
   }
 }
 
-// let reconciler = DOMFiberRenderer("#root").render(TestView())
+#if os(WASI)
+let reconciler = DOMFiberRenderer("body").render(TestView())
+#endif
 
 // @available(OSX 10.16, iOS 14.0, *)
 // struct CustomScene: Scene {
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 17a360edf..52a06579c 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -161,8 +161,8 @@ public struct StaticHTMLFiberRenderer: FiberRenderer {
         guard let index = parent.content.children.firstIndex(where: { $0 === previous })
         else { continue }
         parent.content.children[index] = replacement
-      case let .update(previous, newData):
-        previous.update(with: newData)
+      case let .update(previous, newContent):
+        previous.update(with: newContent)
       }
     }
   }
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index e6956b7c9..c12dcb97d 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -117,8 +117,8 @@ public struct TestFiberRenderer: FiberRenderer {
       switch mutation {
       case .insert, .remove, .replace:
         break
-      case let .update(previous, newData):
-        previous.update(with: newData)
+      case let .update(previous, newContent):
+        previous.update(with: newContent)
       }
     }
   }
diff --git a/Tests/TokamakReconcilerTests/VisitorTests.swift b/Tests/TokamakReconcilerTests/VisitorTests.swift
index 1ea5aaad5..71bde926a 100644
--- a/Tests/TokamakReconcilerTests/VisitorTests.swift
+++ b/Tests/TokamakReconcilerTests/VisitorTests.swift
@@ -90,10 +90,9 @@ final class VisitorTests: XCTestCase {
       )?
         .action()
     }
-    for i in 0..<5 {
+    for _ in 0..<5 {
       increment()
     }
-    print(reconciler.current)
     decrement()
   }
 }

From b7cc779220eee0dadb8c4f5b69a5a0fdcecb9227 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 22 May 2022 17:41:11 -0400
Subject: [PATCH 28/64] Fix issue with not applying updates to DOMFiberElement

---
 Package.swift                             | 3 +--
 Sources/TokamakDOM/DOMFiberRenderer.swift | 7 ++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Package.swift b/Package.swift
index f4c599d6e..d04a6f804 100644
--- a/Package.swift
+++ b/Package.swift
@@ -165,8 +165,7 @@ let package = Package(
           condition: .when(platforms: [.wasi])
         ),
         "OpenCombineJS",
-      ],
-      exclude: ["index.html"]
+      ]
     ),
     .executableTarget(
       name: "TokamakDemo",
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 3ce7dd031..c7c6365af 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -99,14 +99,14 @@ public struct DOMFiberRenderer: FiberRenderer {
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
     view is HTMLConvertible || view is DOMNodeConvertible
   }
-  
+
   private func createElement(_ element: DOMElement) -> JSObject {
     let result = document.createElement!(element.content.tag).object!
     apply(element.content, to: result)
     element.reference = result
     return result
   }
-  
+
   private func apply(_ content: DOMElement.Content, to element: JSObject) {
     for (attribute, value) in content.attributes {
       if attribute.isUpdatedAsProperty {
@@ -136,7 +136,7 @@ public struct DOMFiberRenderer: FiberRenderer {
         let element = createElement(newElement)
         guard let parentElement = parent.reference ?? rootElement.reference
         else { fatalError("The root element was not bound (trying to insert element).") }
-        if Int((parentElement.children.object?.length.number ?? 0)) > index {
+        if Int(parentElement.children.object?.length.number ?? 0) > index {
           _ = parentElement.insertBefore?(element, parentElement.children[index])
         } else {
           _ = parentElement.appendChild?(element)
@@ -152,6 +152,7 @@ public struct DOMFiberRenderer: FiberRenderer {
         let replacementElement = createElement(replacement)
         _ = parentElement.replaceChild?(previousElement, replacementElement)
       case let .update(previous, newContent):
+        previous.update(with: newContent)
         guard let previousElement = previous.reference
         else { fatalError("The element does not exist (trying to update element).") }
         apply(newContent, to: previousElement)

From 78d0bf5f8806310c3347f2b3c2e377096c9a47c3 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 22 May 2022 17:54:59 -0400
Subject: [PATCH 29/64] Add comment explaining manual implementation of
 Hashable for PropertyInfo

---
 Sources/TokamakCore/Reflection/Models/PropertyInfo.swift | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift b/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
index 323fca340..7357cdea8 100644
--- a/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
+++ b/Sources/TokamakCore/Reflection/Models/PropertyInfo.swift
@@ -21,6 +21,7 @@
 // SOFTWARE.
 
 public struct PropertyInfo: Hashable {
+  // Hashable/Equatable conformance is not synthesize for metatypes.
   public static func == (lhs: PropertyInfo, rhs: PropertyInfo) -> Bool {
     lhs.name == rhs.name && lhs.type == rhs.type && lhs.isVar == rhs.isVar && lhs.offset == rhs
       .offset && lhs.ownerType == rhs.ownerType

From 4becea31f8b7aba269f252229551d05a31ff3ac0 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 22 May 2022 18:05:50 -0400
Subject: [PATCH 30/64] Fix linter issues

---
 Sources/TokamakCore/Fiber/Fiber.swift        | 25 +++++++++++++-------
 Sources/TokamakCore/Fiber/FiberElement.swift |  4 +++-
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index e7ec04db6..b592d61b9 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -23,26 +23,32 @@
   /// They point to each other using the `alternate` property.
   ///
   /// The current `Fiber` represents the `View` as it is currently rendered on the screen.
-  /// The work in progress `Fiber` (the `alternate` of current), is used in the reconciler to compute the new tree.
+  /// The work in progress `Fiber` (the `alternate` of current),
+  /// is used in the reconciler to compute the new tree.
   ///
-  /// When reconciling, the tree is recomputed from the root of the state change on the work in progress `Fiber`.
-  /// Each node in the fiber tree is updated to apply any changes, and a list of mutations needed to get the
-  /// rendered output to match is created.
+  /// When reconciling, the tree is recomputed from
+  /// the root of the state change on the work in progress `Fiber`.
+  /// Each node in the fiber tree is updated to apply any changes,
+  /// and a list of mutations needed to get the rendered output to match is created.
   ///
   /// After the entire tree has been traversed, the current and work in progress trees are swapped,
-  /// making the updated tree the current one, and leaving the previous current tree available to apply future changes on.
+  /// making the updated tree the current one,
+  /// and leaving the previous current tree available to apply future changes on.
   final class Fiber: CustomDebugStringConvertible {
     weak var reconciler: FiberReconciler<Renderer>?
 
     /// The underlying `View` instance.
     ///
-    /// Stored as an IUO because we must use the `bindProperties` method to create the `View` with its dependencies setup,
+    /// Stored as an IUO because we must use the `bindProperties` method
+    /// to create the `View` with its dependencies setup,
     /// which requires all stored properties be set before using.
     @_spi(TokamakCore) public var view: Any!
     /// Outputs from evaluating `View._makeView`
     ///
-    /// Stored as an IUO because creating `ViewOutputs` depends on the `bindProperties` method, which requires
-    /// all stored properties be set before using. `outputs` is guaranteed to be set in the initializer.
+    /// Stored as an IUO because creating `ViewOutputs` depends on
+    /// the `bindProperties` method, which requires
+    /// all stored properties be set before using.
+    /// `outputs` is guaranteed to be set in the initializer.
     var outputs: ViewOutputs!
     /// A function to visit `view` generically.
     ///
@@ -58,7 +64,8 @@
     @_spi(TokamakCore) public var sibling: Fiber?
     /// An unowned reference to the parent node.
     ///
-    /// Parent references are `unowned` (as opposed to `weak`) because the parent will always exist if a child does.
+    /// Parent references are `unowned` (as opposed to `weak`)
+    /// because the parent will always exist if a child does.
     /// If the parent is released, the child is released with it.
     unowned var parent: Fiber?
     /// The nearest parent that can be mounted on.
diff --git a/Sources/TokamakCore/Fiber/FiberElement.swift b/Sources/TokamakCore/Fiber/FiberElement.swift
index 307e9379b..27e5ee4c5 100644
--- a/Sources/TokamakCore/Fiber/FiberElement.swift
+++ b/Sources/TokamakCore/Fiber/FiberElement.swift
@@ -24,7 +24,9 @@ public protocol FiberElement: AnyObject {
   func update(with content: Content)
 }
 
-/// The data used to create an `FiberElement`. We re-use `FiberElement` instances in the `Fiber` tree,
+/// The data used to create an `FiberElement`.
+///
+/// We re-use `FiberElement` instances in the `Fiber` tree,
 /// but can re-create and copy `FiberElementContent` as often as needed.
 public protocol FiberElementContent: Equatable {
   init<V: View>(from primitiveView: V)

From 8c9141b574af3a104cb9a9c6e32bbbbe6b851f39 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 23 May 2022 09:42:05 -0400
Subject: [PATCH 31/64] Remove dynamicMember label from subscript

---
 Sources/TokamakDOM/DOMFiberRenderer.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index c7c6365af..86043ef9d 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -110,7 +110,7 @@ public struct DOMFiberRenderer: FiberRenderer {
   private func apply(_ content: DOMElement.Content, to element: JSObject) {
     for (attribute, value) in content.attributes {
       if attribute.isUpdatedAsProperty {
-        element[dynamicMember: attribute.value] = .string(value)
+        element[attribute.value] = .string(value)
       } else {
         _ = element.setAttribute?(attribute.value, value)
       }

From 33f0e67f1de8fa56e929335530a554dbddc8cbd0 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 23 May 2022 09:52:12 -0400
Subject: [PATCH 32/64] Re-enable carton test

---
 .github/workflows/ci.yml | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6b6f5eb6f..a84fbdb1f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,15 +15,14 @@ jobs:
         with:
           shell-action: carton bundle --product TokamakDemo
 
-  # FIXME: re-enable after https://github.com/swiftwasm/WasmTransformer/issues/18 is fixed.
-  # swiftwasm_test_5_6:
-  #   runs-on: ubuntu-20.04
+  swiftwasm_test_5_6:
+    runs-on: ubuntu-20.04
 
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - uses: swiftwasm/swiftwasm-action@v5.6
-  #       with:
-  #         shell-action: carton test
+    steps:
+      - uses: actions/checkout@v2
+      - uses: swiftwasm/swiftwasm-action@v5.6
+        with:
+          shell-action: carton test --environment node
 
   # Disabled until macos-12 is available on GitHub Actions, which is required for Xcode 13.3
   # core_macos_build:

From 4d86f897457dfe82536b54598fb7c2e294d8da0f Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 23 May 2022 10:41:57 -0400
Subject: [PATCH 33/64] Attempt GTK fix

---
 Sources/TokamakGTK/Views/Stack.swift | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Sources/TokamakGTK/Views/Stack.swift b/Sources/TokamakGTK/Views/Stack.swift
index d2fc4af1a..e3a3841b5 100644
--- a/Sources/TokamakGTK/Views/Stack.swift
+++ b/Sources/TokamakGTK/Views/Stack.swift
@@ -86,6 +86,7 @@ extension HorizontalAlignment {
     case .center: return GTK_ALIGN_CENTER
     case .leading: return GTK_ALIGN_START
     case .trailing: return GTK_ALIGN_END
+    default: return GTK_ALIGN_CENTER
     }
   }
 }
@@ -96,6 +97,7 @@ extension VerticalAlignment {
     case .center: return GTK_ALIGN_CENTER
     case .top: return GTK_ALIGN_START
     case .bottom: return GTK_ALIGN_END
+    default: return GTK_ALIGN_CENTER
     }
   }
 }

From 3189e777bfc13fedd7636b4f46b2190b4113cc83 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 23 May 2022 11:36:16 -0400
Subject: [PATCH 34/64] Add option to disable layout in the FiberReconciler

---
 Brewfile.lock.json                            | 125 ++++++++++++++++++
 Sources/TokamakCore/Fiber/Fiber.swift         |  30 +++--
 .../TokamakCore/Fiber/FiberReconciler.swift   |  36 +++--
 Sources/TokamakCore/Fiber/FiberRenderer.swift |   2 +
 Sources/TokamakDOM/DOMFiberRenderer.swift     |  31 ++---
 Sources/TokamakDemo/main.swift                |   2 +-
 .../StaticHTMLFiberRenderer.swift             |   9 +-
 .../TokamakStaticHTML/Views/Text/Text.swift   |  27 +++-
 .../TestFiberRenderer.swift                   |   6 +-
 9 files changed, 214 insertions(+), 54 deletions(-)
 create mode 100644 Brewfile.lock.json

diff --git a/Brewfile.lock.json b/Brewfile.lock.json
new file mode 100644
index 000000000..57d59e0ab
--- /dev/null
+++ b/Brewfile.lock.json
@@ -0,0 +1,125 @@
+{
+  "entries": {
+    "brew": {
+      "pre-commit": {
+        "version": "2.19.0",
+        "bottle": {
+          "rebuild": 0,
+          "root_url": "https://ghcr.io/v2/homebrew/core",
+          "files": {
+            "arm64_monterey": {
+              "cellar": ":any",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:35830ae8dc83700b547c078a43e0cae5b99c69d820e6a70b7dd43872105cc075",
+              "sha256": "35830ae8dc83700b547c078a43e0cae5b99c69d820e6a70b7dd43872105cc075"
+            },
+            "arm64_big_sur": {
+              "cellar": ":any",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:ae925eb818c247559e36558216c63a5298653d65ecd528383340a0ee8b92c07e",
+              "sha256": "ae925eb818c247559e36558216c63a5298653d65ecd528383340a0ee8b92c07e"
+            },
+            "monterey": {
+              "cellar": ":any",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:fa8795f2fc5231708ac69b3447732d3342ac77084c75d4cd92636e4cb3306918",
+              "sha256": "fa8795f2fc5231708ac69b3447732d3342ac77084c75d4cd92636e4cb3306918"
+            },
+            "big_sur": {
+              "cellar": ":any",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:1eb31671ec49ce4703bdf821c46238a541ef5972f462174f4765dac8a2cf72c3",
+              "sha256": "1eb31671ec49ce4703bdf821c46238a541ef5972f462174f4765dac8a2cf72c3"
+            },
+            "catalina": {
+              "cellar": ":any",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:4852270ec8f9249be28101899cfc2f5718b8b5ac79432089484af3e754a075cf",
+              "sha256": "4852270ec8f9249be28101899cfc2f5718b8b5ac79432089484af3e754a075cf"
+            },
+            "x86_64_linux": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:6376d63fa6a158bd89dcf23bf75c6b684c542ca933c4c47e434287f92649cd17",
+              "sha256": "6376d63fa6a158bd89dcf23bf75c6b684c542ca933c4c47e434287f92649cd17"
+            }
+          }
+        }
+      },
+      "swiftformat": {
+        "version": "0.49.9",
+        "bottle": {
+          "rebuild": 0,
+          "root_url": "https://ghcr.io/v2/homebrew/core",
+          "files": {
+            "arm64_monterey": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:bacd0dc8f488fd7909252467eaf16dcd339468857aea13a3643f7e0efd7715f8",
+              "sha256": "bacd0dc8f488fd7909252467eaf16dcd339468857aea13a3643f7e0efd7715f8"
+            },
+            "arm64_big_sur": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:7bc39a57d110f727993aa556cca5cba5549d536367bc12f25b56e25c4fdfa194",
+              "sha256": "7bc39a57d110f727993aa556cca5cba5549d536367bc12f25b56e25c4fdfa194"
+            },
+            "monterey": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:739d230372dd797d5cf5a0586156068ecb5965878550a67b5ca56ccdf2799557",
+              "sha256": "739d230372dd797d5cf5a0586156068ecb5965878550a67b5ca56ccdf2799557"
+            },
+            "big_sur": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:22080bdc75b03f5926d68fb248fc401d6a94876205ce03663a8950644b0e41e6",
+              "sha256": "22080bdc75b03f5926d68fb248fc401d6a94876205ce03663a8950644b0e41e6"
+            },
+            "catalina": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:d4cda88cf3bef7b18e960197b8db4826f234e3b3434ba902c3924c37b9040fe8",
+              "sha256": "d4cda88cf3bef7b18e960197b8db4826f234e3b3434ba902c3924c37b9040fe8"
+            }
+          }
+        }
+      },
+      "swiftlint": {
+        "version": "0.47.1",
+        "bottle": {
+          "rebuild": 0,
+          "root_url": "https://ghcr.io/v2/homebrew/core",
+          "files": {
+            "arm64_monterey": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:13b6b6d881b6cfa3f5399c14150ef6da0f1d1cec2b58fd24c6dcbc432c462106",
+              "sha256": "13b6b6d881b6cfa3f5399c14150ef6da0f1d1cec2b58fd24c6dcbc432c462106"
+            },
+            "arm64_big_sur": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:406fb7b019a5b7f0c052a7d4738f6cda5eaf15ef9c1bc1f89bdc3dc2efc719b6",
+              "sha256": "406fb7b019a5b7f0c052a7d4738f6cda5eaf15ef9c1bc1f89bdc3dc2efc719b6"
+            },
+            "monterey": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:3c02d2875bef6dbd474c60a4ce42cce5f9e1da64580c00c351753adeaece5700",
+              "sha256": "3c02d2875bef6dbd474c60a4ce42cce5f9e1da64580c00c351753adeaece5700"
+            },
+            "big_sur": {
+              "cellar": ":any_skip_relocation",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:775d4db3c21549bb18384be86ee82a43c92af12b74f9135e7b44f448cd6e0eff",
+              "sha256": "775d4db3c21549bb18384be86ee82a43c92af12b74f9135e7b44f448cd6e0eff"
+            },
+            "x86_64_linux": {
+              "cellar": "/home/linuxbrew/.linuxbrew/Cellar",
+              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:f00160b4eb1d370d6baf4341341f813af80ba2fcfa2e65657f96153713d1c774",
+              "sha256": "f00160b4eb1d370d6baf4341341f813af80ba2fcfa2e65657f96153713d1c774"
+            }
+          }
+        }
+      }
+    }
+  },
+  "system": {
+    "macos": {
+      "monterey": {
+        "HOMEBREW_VERSION": "3.4.11",
+        "HOMEBREW_PREFIX": "/opt/homebrew",
+        "Homebrew/homebrew-core": "85b199adfaa4014a5f4446df74ebee8293435eca",
+        "CLT": "13.4.0.0.1.1651278267",
+        "Xcode": "13.4",
+        "macOS": "12.3.1"
+      }
+    }
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 6626548f0..0721c9d57 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -124,13 +124,15 @@ import Foundation
       self.elementParent = elementParent
       typeInfo = TokamakCore.typeInfo(of: V.self)
 
-      let viewInputs = ViewInputs<V>(
-        view: view,
-        environment: parent?.outputs.environment ?? .init(.init())
-      )
-      state = bindProperties(to: &view, typeInfo, viewInputs)
+      let environment = parent?.outputs.environment ?? .init(.init())
+      state = bindProperties(to: &view, typeInfo, environment.environment)
       self.view = view
-      outputs = V._makeView(viewInputs)
+      outputs = V._makeView(
+        .init(
+          view: view,
+          environment: environment
+        )
+      )
 
       visitView = { [weak self] in
         guard let self = self else { return }
@@ -210,7 +212,7 @@ import Foundation
     private func bindProperties<V: View>(
       to view: inout V,
       _ typeInfo: TypeInfo?,
-      _ viewInputs: ViewInputs<V>
+      _ environment: EnvironmentValues
     ) -> [PropertyInfo: MutableStorage] {
       guard let typeInfo = typeInfo else { return [:] }
 
@@ -227,7 +229,7 @@ import Foundation
           storage.setter = { box.setValue($0, with: $1) }
           value = storage
         } else if var environmentReader = value as? EnvironmentReader {
-          environmentReader.setContent(from: viewInputs.environment.environment)
+          environmentReader.setContent(from: environment)
           value = environmentReader
         }
         property.set(value: value, on: &view)
@@ -243,13 +245,13 @@ import Foundation
 
       self.elementIndex = elementIndex
 
-      let viewInputs = ViewInputs<V>(
-        view: view,
-        environment: parent?.outputs.environment ?? .init(.init())
-      )
-      state = bindProperties(to: &view, typeInfo, viewInputs)
+      let environment = parent?.outputs.environment ?? .init(.init())
+      state = bindProperties(to: &view, typeInfo, environment.environment)
       self.view = view
-      outputs = V._makeView(viewInputs)
+      outputs = V._makeView(.init(
+        view: view,
+        environment: environment
+      ))
 
       visitView = { [weak self] in
         guard let self = self else { return }
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 6f55397bb..f856d74ee 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -412,7 +412,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           elementIndices = node.elementIndices
 
           // Propose sizes on the way down.
-          if let fiber = node.fiber {
+          if reconciler.renderer.shouldLayout,
+             let fiber = node.fiber
+          {
             proposeSize(for: fiber)
           }
 
@@ -461,7 +463,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
               alternateSibling = alternateSibling?.sibling
             }
             // We `size` and `position` when we are walking back up the tree.
-            if let fiber = node.fiber {
+            if reconciler.renderer.shouldLayout,
+               let fiber = node.fiber
+            {
               size(fiber)
               // Position the siblings in order.
               var sibling = fiber.parent?.child
@@ -478,7 +482,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
 
           // We `size` when we reach the bottommost view that has a sibling.
           // Otherwise, sizing takes place in the above loop.
-          if let fiber = node.fiber {
+          if reconciler.renderer.shouldLayout,
+             let fiber = node.fiber
+          {
             size(fiber)
           }
 
@@ -489,17 +495,19 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       }
       mainLoop()
 
-      // We continue to the very top to update all necessary positions.
-      var layoutNode = node.fiber?.child
-      while let current = layoutNode {
-        // We only need to re-position, because the size can't change if no state changed.
-        position(current)
-        if current.sibling != nil {
-          // We also don't need to go deep into sibling children,
-          // because child positioning is relative to the parent.
-          layoutNode = current.sibling
-        } else {
-          layoutNode = current.parent
+      if reconciler.renderer.shouldLayout {
+        // We continue to the very top to update all necessary positions.
+        var layoutNode = node.fiber?.child
+        while let current = layoutNode {
+          // We only need to re-position, because the size can't change if no state changed.
+          position(current)
+          if current.sibling != nil {
+            // We also don't need to go deep into sibling children,
+            // because child positioning is relative to the parent.
+            layoutNode = current.sibling
+          } else {
+            layoutNode = current.parent
+          }
         }
       }
     }
diff --git a/Sources/TokamakCore/Fiber/FiberRenderer.swift b/Sources/TokamakCore/Fiber/FiberRenderer.swift
index 4bfa8f453..7f05564d5 100644
--- a/Sources/TokamakCore/Fiber/FiberRenderer.swift
+++ b/Sources/TokamakCore/Fiber/FiberRenderer.swift
@@ -31,6 +31,8 @@ public protocol FiberRenderer {
   var defaultEnvironment: EnvironmentValues { get }
   /// The size of the window we are rendering in.
   var sceneSize: CGSize { get }
+  /// Whether layout is enabled for this renderer.
+  var shouldLayout: Bool { get }
   /// Calculate the size of `Text` in `environment` for layout.
   func measureText(_ text: Text, proposedSize: CGSize, in environment: EnvironmentValues) -> CGSize
 }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 44c5b863d..a99177c8a 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -76,13 +76,15 @@ public struct DOMFiberRenderer: FiberRenderer {
     .init(width: body.clientWidth.number!, height: body.clientHeight.number!)
   }
 
+  public let shouldLayout: Bool
+
   public var defaultEnvironment: EnvironmentValues {
     var environment = EnvironmentValues()
     environment[_ColorSchemeKey.self] = .light
     return environment
   }
 
-  public init(_ rootSelector: String) {
+  public init(_ rootSelector: String, shouldLayout: Bool = true) {
     guard let reference = document.querySelector!(rootSelector).object else {
       fatalError("""
       The root element with selector '\(rootSelector)' could not be found. \
@@ -99,12 +101,15 @@ public struct DOMFiberRenderer: FiberRenderer {
       )
     )
     rootElement.reference = reference
-
-    // Setup the root styles
-    body.style.margin = .string("0")
-    reference.style.width = .string("100vw")
-    reference.style.width = .string("100vh")
-    reference.style.position = .string("relative")
+    self.shouldLayout = shouldLayout
+
+    if shouldLayout {
+      // Setup the root styles
+      body.style.margin = .string("0")
+      reference.style.width = .string("100vw")
+      reference.style.width = .string("100vh")
+      reference.style.position = .string("relative")
+    }
   }
 
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {
@@ -123,18 +128,15 @@ public struct DOMFiberRenderer: FiberRenderer {
     proposedSize: CGSize,
     in environment: EnvironmentValues
   ) -> CGSize {
-    // FIXME: Use text styles.
-    let element = document.createElement!("span").object!
-    element.textContent = .string(text.innerHTML ?? "")
-    element.style.maxWidth = .string("\(proposedSize.width)px")
-    element.style.maxHeight = .string("\(proposedSize.height)px")
+    let element = createElement(.init(from: .init(from: text)))
+    _ = element.style.setProperty("maxWidth", "\(proposedSize.width)px")
+    _ = element.style.setProperty("maxHeight", "\(proposedSize.height)px")
     _ = document.body.appendChild(element)
     let rect = element.getBoundingClientRect!()
     let size = CGSize(
       width: rect.width.number ?? 0,
       height: rect.height.number ?? 0
     )
-    print("Measured text at \(size)")
     _ = document.body.removeChild(element)
     return size
   }
@@ -162,8 +164,7 @@ public struct DOMFiberRenderer: FiberRenderer {
   }
 
   private func apply(_ geometry: ViewGeometry, to element: JSObject) {
-    print("Apply \(geometry) to \(element)")
-    print(element)
+    guard shouldLayout else { return }
     _ = element.style.setProperty("position", "absolute")
     _ = element.style.setProperty("width", "\(geometry.dimensions.width)px")
     _ = element.style.setProperty("height", "\(geometry.dimensions.height)px")
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 0fc00c57d..725ba5eca 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -33,7 +33,7 @@ struct TestView: View {
 }
 
 #if os(WASI)
-let reconciler = DOMFiberRenderer("body").render(TestView())
+let reconciler = DOMFiberRenderer("body", shouldLayout: true).render(TestView())
 #endif
 
 // @available(OSX 10.16, iOS 14.0, *)
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index a22e90349..a0d935b88 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -98,12 +98,6 @@ public extension HTMLConvertible {
   @_spi(TokamakStaticHTML) var innerHTML: String? { nil }
 }
 
-@_spi(TokamakStaticHTML) extension Text: HTMLConvertible {
-  @_spi(TokamakStaticHTML) public var innerHTML: String? {
-    _TextProxy(self).rawText
-  }
-}
-
 @_spi(TokamakStaticHTML) extension VStack: HTMLConvertible {
   @_spi(TokamakStaticHTML) public var tag: String { "div" }
   @_spi(TokamakStaticHTML) public var attributes: [HTMLAttribute: String] {
@@ -139,7 +133,8 @@ public extension HTMLConvertible {
 public struct StaticHTMLFiberRenderer: FiberRenderer {
   public let rootElement: HTMLElement
   public let defaultEnvironment: EnvironmentValues
-  public var sceneSize: CGSize { .zero }
+  public let sceneSize: CGSize = .zero
+  public let shouldLayout: Bool = false
 
   public init() {
     rootElement = .init(tag: "body", attributes: [:], innerHTML: nil, children: [])
diff --git a/Sources/TokamakStaticHTML/Views/Text/Text.swift b/Sources/TokamakStaticHTML/Views/Text/Text.swift
index c0511404f..bf5c632fa 100644
--- a/Sources/TokamakStaticHTML/Views/Text/Text.swift
+++ b/Sources/TokamakStaticHTML/Views/Text/Text.swift
@@ -84,7 +84,7 @@ public extension Font {
       "font-family": families(in: environment).joined(separator: ", "),
       "font-weight": "\(proxy._bold ? Font.Weight.bold.value : proxy._weight.value)",
       "font-style": proxy._italic ? "italic" : "normal",
-      "font-size": "\(proxy._size)",
+      "font-size": "\(proxy._size)px",
       "line-height": proxy._leading.description,
       "font-variant": proxy._smallCaps ? "small-caps" : "normal",
     ]
@@ -158,6 +158,31 @@ extension Text: AnyHTML {
   }
 }
 
+@_spi(TokamakStaticHTML) extension Text: HTMLConvertible {
+  @_spi(TokamakStaticHTML) public var innerHTML: String? {
+    let proxy = _TextProxy(self)
+    let innerHTML: String
+    switch proxy.storage {
+    case let .verbatim(text):
+      innerHTML = proxy.environment.domTextSanitizer(text)
+    case let .segmentedText(segments):
+      innerHTML = segments
+        .map {
+          TextSpan(
+            content: proxy.environment.domTextSanitizer($0.0.rawText),
+            attributes: Self.attributes(
+              from: $0.1,
+              environment: proxy.environment
+            )
+          )
+          .outerHTML(shouldSortAttributes: false, children: [])
+        }
+        .reduce("", +)
+    }
+    return innerHTML.replacingOccurrences(of: "\n", with: "<br />")
+  }
+}
+
 extension Text {
   // swiftlint:disable function_body_length
   static func attributes(
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index adcebc18b..971c45b02 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -101,7 +101,8 @@ public final class TestFiberElement: FiberElement, CustomStringConvertible {
 }
 
 public struct TestFiberRenderer: FiberRenderer {
-  public var sceneSize: CGSize
+  public let sceneSize: CGSize
+  public let shouldLayout: Bool
 
   public func measureText(
     _ text: Text,
@@ -115,9 +116,10 @@ public struct TestFiberRenderer: FiberRenderer {
 
   public let rootElement: ElementType
 
-  public init(_ rootElement: ElementType, size: CGSize) {
+  public init(_ rootElement: ElementType, size: CGSize, shouldLayout: Bool = true) {
     self.rootElement = rootElement
     sceneSize = size
+    self.shouldLayout = shouldLayout
   }
 
   public static func isPrimitive<V>(_ view: V) -> Bool where V: View {

From 104f14f04b211a19fd2a541edfd28463dcee39f4 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 23 May 2022 12:03:39 -0400
Subject: [PATCH 35/64] Re-enable TokamakDemo with StackReconciler

---
 Sources/TokamakDemo/main.swift | 58 +++++++++++-----------------------
 1 file changed, 18 insertions(+), 40 deletions(-)

diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 0fc00c57d..c29cbe20e 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -14,49 +14,27 @@
 
 import TokamakShim
 
-struct TestView: View {
-  @State private var count = 0
+@available(OSX 10.16, iOS 14.0, *)
+struct CustomScene: Scene {
+  @Environment(\.scenePhase) private var scenePhase
 
-  var body: some View {
-    VStack {
-      Text("\(count)")
-      HStack {
-        if count > 0 {
-          Button("Decrement") { count -= 1 }
-        }
-        if count < 5 {
-          Button("Increment") { count += 1 }
-        }
-      }
+  var body: some Scene {
+    print("In CustomScene.body scenePhase is \(scenePhase)")
+    return WindowGroup("Tokamak Demo") {
+      TokamakDemoView()
     }
   }
 }
 
-#if os(WASI)
-let reconciler = DOMFiberRenderer("body").render(TestView())
-#endif
+@available(OSX 10.16, iOS 14.0, *)
+struct TokamakDemoApp: App {
+  var body: some Scene {
+    CustomScene()
+  }
+}
 
-// @available(OSX 10.16, iOS 14.0, *)
-// struct CustomScene: Scene {
-//  @Environment(\.scenePhase) private var scenePhase
-//
-//  var body: some Scene {
-//    print("In CustomScene.body scenePhase is \(scenePhase)")
-//    return WindowGroup("Tokamak Demo") {
-//      TokamakDemoView()
-//    }
-//  }
-// }
-//
-// @available(OSX 10.16, iOS 14.0, *)
-// struct TokamakDemoApp: App {
-//  var body: some Scene {
-//    CustomScene()
-//  }
-// }
-//
-//// If @main was supported for executable Swift Packages,
-//// this would match SwiftUI 100%
-// if #available(OSX 10.16, iOS 14.0, *) {
-//  TokamakDemoApp.main()
-// }
+// If @main was supported for executable Swift Packages,
+// this would match SwiftUI 100%
+if #available(OSX 10.16, iOS 14.0, *) {
+  TokamakDemoApp.main()
+}

From 389b3e828b4688054b4d38fc1a033236487399c0 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 24 May 2022 08:24:05 -0400
Subject: [PATCH 36/64] Restore CI config

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a84fbdb1f..58d1fd2bd 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: swiftwasm/swiftwasm-action@v5.6
         with:
-          shell-action: carton test --environment node
+          shell-action: carton test
 
   # Disabled until macos-12 is available on GitHub Actions, which is required for Xcode 13.3
   # core_macos_build:

From a20d94b56850cec9bb80dbd09573b9c13b7430bf Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 24 May 2022 08:25:59 -0400
Subject: [PATCH 37/64] Restore CI config

---
 .github/workflows/ci.yml | 113 +++++++++++++++++++--------------------
 1 file changed, 56 insertions(+), 57 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 58d1fd2bd..ff39216c5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,63 +22,62 @@ jobs:
       - uses: actions/checkout@v2
       - uses: swiftwasm/swiftwasm-action@v5.6
         with:
-          shell-action: carton test
-
-  # Disabled until macos-12 is available on GitHub Actions, which is required for Xcode 13.3
-  # core_macos_build:
-  #   runs-on: macos-11
-
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - name: Run the test suite on macOS, build the demo project for iOS
-  #       shell: bash
-  #       run: |
-  #         set -ex
-  #         sudo xcode-select --switch /Applications/Xcode_13.0.app/Contents/Developer/
-  #         # avoid building unrelated products for testing by specifying the test product explicitly
-  #         swift build --product TokamakPackageTests
-  #         `xcrun --find xctest` .build/debug/TokamakPackageTests.xctest ||
-  #           (cp -r /var/folders/*/*/*/*Tests . ; exit 1)
-
-  #         rm -rf Sources/TokamakGTKCHelpers/*.c
-
-  #         xcodebuild -version
-
-  #         # Make sure Tokamak can be built on macOS so that Xcode autocomplete works.
-  #         # Disable macOS builds until Monterey is available on GHA.
-  #         # xcodebuild -scheme TokamakDemo -destination 'generic/platform=macOS' \
-  #         #   CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO | \
-  #         #   xcpretty --color
-
-  #         cd "NativeDemo"
-  #         xcodebuild -scheme iOS -destination 'generic/platform=iOS' \
-  #           CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO | \
-  #           xcpretty --color
-  #         cd ..
-
-  #         ./benchmark.sh
-
-  #     - name: Upload failed snapshots
-  #       uses: actions/upload-artifact@v2
-  #       if: ${{ failure() }}
-  #       with:
-  #         name: Failed snapshots
-  #         path: '*Tests'
-
-  # gtk_macos_build:
-  #   runs-on: macos-11
-
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - name: Build the GTK renderer on macOS
-  #       shell: bash
-  #       run: |
-  #         set -ex
-  #         sudo xcode-select --switch /Applications/Xcode_13.0.app/Contents/Developer/
-
-  #         brew install gtk+3
-
-  #         make build
+          shell-action: carton test --environment node
+
+  core_macos_build:
+    runs-on: macos-12
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Run the test suite on macOS, build the demo project for iOS
+        shell: bash
+        run: |
+          set -ex
+          sudo xcode-select --switch /Applications/Xcode_13.4.app/Contents/Developer/
+          # avoid building unrelated products for testing by specifying the test product explicitly
+          swift build --product TokamakPackageTests
+          `xcrun --find xctest` .build/debug/TokamakPackageTests.xctest ||
+            (cp -r /var/folders/*/*/*/*Tests . ; exit 1)
+
+          rm -rf Sources/TokamakGTKCHelpers/*.c
+
+          xcodebuild -version
+
+          # Make sure Tokamak can be built on macOS so that Xcode autocomplete works.
+          # Disable macOS builds until Monterey is available on GHA.
+          # xcodebuild -scheme TokamakDemo -destination 'generic/platform=macOS' \
+          #   CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO | \
+          #   xcpretty --color
+
+          cd "NativeDemo"
+          xcodebuild -scheme iOS -destination 'generic/platform=iOS' \
+            CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO | \
+            xcpretty --color
+          cd ..
+
+          ./benchmark.sh
+
+      - name: Upload failed snapshots
+        uses: actions/upload-artifact@v2
+        if: ${{ failure() }}
+        with:
+          name: Failed snapshots
+          path: '*Tests'
+
+  gtk_macos_build:
+    runs-on: macos-12
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build the GTK renderer on macOS
+        shell: bash
+        run: |
+          set -ex
+          sudo xcode-select --switch /Applications/Xcode_13.4.app/Contents/Developer/
+
+          brew install gtk+3
+
+          make build
 
   gtk_ubuntu_18_04_build:
     runs-on: ubuntu-latest

From 05d5a243ff2f9c4c62bf5232893287b73cdafc44 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Tue, 24 May 2022 08:36:11 -0400
Subject: [PATCH 38/64] Add file headers and cleanup structure

---
 Sources/TokamakCore/Fiber/AlignmentID.swift   |  12 +-
 .../Fiber/Layout/FlexLayoutComputer.swift     |  41 ++++
 .../Layout/ShrinkWrapLayoutComputer.swift     |  46 ++++
 .../Fiber/Layout/StackLayoutComputer.swift    | 148 ++++++++++++
 .../Fiber/Layout/TextLayoutComputer.swift     |  60 +++++
 .../TokamakCore/Fiber/LayoutComputer.swift    | 223 ------------------
 Sources/TokamakCore/Fiber/ViewArguments.swift |   2 +-
 Sources/TokamakCore/Fiber/ViewGeometry.swift  |  12 +-
 8 files changed, 318 insertions(+), 226 deletions(-)
 create mode 100644 Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
 create mode 100644 Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
 create mode 100644 Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
 create mode 100644 Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index d564c674d..186c0002e 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/18/22.
 //
diff --git a/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
new file mode 100644
index 000000000..c365c18e1
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
@@ -0,0 +1,41 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/24/22.
+//
+
+import Foundation
+
+/// A `LayoutComputer` that fills its parent.
+final class FlexLayoutComputer: LayoutComputer {
+  let proposedSize: CGSize
+
+  init(proposedSize: CGSize) {
+    self.proposedSize = proposedSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    proposedSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    .zero
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    proposedSize
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
new file mode 100644
index 000000000..43d8a64ce
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
@@ -0,0 +1,46 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/24/22.
+//
+
+import Foundation
+
+/// A `LayoutComputer` that takes the size of its children.
+final class ShrinkWrapLayoutComputer: LayoutComputer {
+  let proposedSize: CGSize
+
+  init(proposedSize: CGSize) {
+    self.proposedSize = proposedSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    proposedSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    .zero
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    context.children.reduce(CGSize.zero) {
+      .init(
+        width: max($0.width, $1.dimensions.width),
+        height: max($0.height, $1.dimensions.height)
+      )
+    }
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
new file mode 100644
index 000000000..d14dc051d
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -0,0 +1,148 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/24/22.
+//
+
+import Foundation
+
+final class StackLayoutComputer: LayoutComputer {
+  let proposedSize: CGSize
+  let axis: Axis
+  let alignment: Alignment
+  let spacing: CGFloat
+  /// A multiplier of `1` for the axis that takes the size of the largest child.
+  let maxAxis: CGSize
+  /// A multiplier of `1` for the axis that the children are aligned on.
+  let fitAxis: CGSize
+
+  init(proposedSize: CGSize, axis: Axis, alignment: Alignment, spacing: CGFloat) {
+    self.proposedSize = proposedSize
+    self.axis = axis
+    self.alignment = alignment
+    self.spacing = spacing
+    switch axis {
+    case .horizontal:
+      maxAxis = .init(width: 0, height: 1)
+      fitAxis = .init(width: 1, height: 0)
+    case .vertical:
+      maxAxis = .init(width: 1, height: 0)
+      fitAxis = .init(width: 0, height: 1)
+    }
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    let used = context.children.reduce(CGSize.zero) {
+      .init(
+        width: $0.width + $1.dimensions.width,
+        height: $0.height + $1.dimensions.height
+      )
+    }
+    let size = CGSize(
+      width: proposedSize.width - (used.width * fitAxis.width),
+      height: proposedSize.height - (used.height * fitAxis.height)
+    )
+    return size
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    let (maxSize, fitSize) = context.children
+      .enumerated()
+      .reduce((CGSize.zero, CGSize.zero)) { res, next in
+        (
+          .init(
+            width: max(res.0.width, next.element.dimensions.width),
+            height: max(res.0.height, next.element.dimensions.height)
+          ),
+          next.offset < child.index ? .init(
+            width: res.1.width + next.element.dimensions.width,
+            height: res.1.height + next.element.dimensions.height
+          ) : res.1
+        )
+      }
+    let maxDimensions = ViewDimensions(size: maxSize, alignmentGuides: [:])
+    /// The gaps up to this point.
+    let fitSpacing = CGFloat(child.index) * spacing
+    let position = CGPoint(
+      x: (
+        (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal]) * maxAxis
+          .width
+      )
+        + ((fitSize.width + fitSpacing) * fitAxis.width),
+      y: (
+        (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]) * maxAxis
+          .height
+      )
+        + ((fitSize.height + fitSpacing) * fitAxis.height)
+    )
+    return position
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    let maxDimensions = CGSize(
+      width: context.children
+        .max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions.width ?? .zero,
+      height: context.children
+        .max(by: { $0.dimensions.height < $1.dimensions.height })?.dimensions.height ?? .zero
+    )
+    let fitDimensions = context.children
+      .reduce(CGSize.zero) {
+        .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
+      }
+
+    /// The combined gap size.
+    let fitSpacing = CGFloat(context.children.count - 1) * spacing
+
+    return .init(
+      width: (maxDimensions.width * maxAxis.width) +
+        ((fitDimensions.width + fitSpacing) * fitAxis.width),
+      height: (maxDimensions.height * maxAxis.height) +
+        ((fitDimensions.height + fitSpacing) * fitAxis.height)
+    )
+  }
+}
+
+public extension VStack {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: { proposedSize in
+        StackLayoutComputer(
+          proposedSize: proposedSize,
+          axis: .vertical,
+          alignment: .init(horizontal: inputs.view.alignment, vertical: .center),
+          spacing: inputs.view.spacing
+        )
+      }
+    )
+  }
+}
+
+public extension HStack {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: { proposedSize in
+        StackLayoutComputer(
+          proposedSize: proposedSize,
+          axis: .horizontal,
+          alignment: .init(horizontal: .center, vertical: inputs.view.alignment),
+          spacing: inputs.view.spacing
+        )
+      }
+    )
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
new file mode 100644
index 000000000..723a87c13
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
@@ -0,0 +1,60 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/24/22.
+//
+
+import Foundation
+
+/// Measures the bounds of the `Text` with modifiers and wrapping inside the `proposedSize`.
+final class TextLayoutComputer: LayoutComputer {
+  let text: Text
+  let proposedSize: CGSize
+  let environment: EnvironmentValues
+
+  init(text: Text, proposedSize: CGSize, environment: EnvironmentValues) {
+    self.text = text
+    self.proposedSize = proposedSize
+    self.environment = environment
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    fatalError("Text views cannot have children.")
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    fatalError("Text views cannot have children.")
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    environment.measureText(text, proposedSize, environment)
+  }
+}
+
+public extension Text {
+  static func _makeView(_ inputs: ViewInputs<Text>) -> ViewOutputs {
+    .init(
+      inputs: inputs,
+      layoutComputer: { proposedSize in
+        TextLayoutComputer(
+          text: inputs.view,
+          proposedSize: proposedSize,
+          environment: inputs.environment.environment
+        )
+      }
+    )
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index bc7222e16..3dc575b00 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -49,226 +49,3 @@ protocol LayoutComputer: AnyObject {
   /// Request a size for ourself from our parent.
   func requestSize(in context: LayoutContext) -> CGSize
 }
-
-/// A `LayoutComputer` that takes the size of its children.
-final class ShrinkWrapLayout: LayoutComputer {
-  let proposedSize: CGSize
-
-  init(proposedSize: CGSize) {
-    self.proposedSize = proposedSize
-  }
-
-  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
-    where V: View
-  {
-    proposedSize
-  }
-
-  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    .zero
-  }
-
-  func requestSize(in context: LayoutContext) -> CGSize {
-    context.children.reduce(CGSize.zero) {
-      .init(
-        width: max($0.width, $1.dimensions.width),
-        height: max($0.height, $1.dimensions.height)
-      )
-    }
-  }
-}
-
-/// A `LayoutComputer` that fills its parent.
-final class FlexLayout: LayoutComputer {
-  let proposedSize: CGSize
-
-  init(proposedSize: CGSize) {
-    self.proposedSize = proposedSize
-  }
-
-  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
-    where V: View
-  {
-    proposedSize
-  }
-
-  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    .zero
-  }
-
-  func requestSize(in context: LayoutContext) -> CGSize {
-    proposedSize
-  }
-}
-
-final class StackLayout: LayoutComputer {
-  let proposedSize: CGSize
-  let axis: Axis
-  let alignment: Alignment
-  let spacing: CGFloat
-  /// A multiplier of `1` for the axis that takes the size of the largest child.
-  let maxAxis: CGSize
-  /// A multiplier of `1` for the axis that the children are aligned on.
-  let fitAxis: CGSize
-
-  init(proposedSize: CGSize, axis: Axis, alignment: Alignment, spacing: CGFloat) {
-    self.proposedSize = proposedSize
-    self.axis = axis
-    self.alignment = alignment
-    self.spacing = spacing
-    switch axis {
-    case .horizontal:
-      maxAxis = .init(width: 0, height: 1)
-      fitAxis = .init(width: 1, height: 0)
-    case .vertical:
-      maxAxis = .init(width: 1, height: 0)
-      fitAxis = .init(width: 0, height: 1)
-    }
-  }
-
-  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
-    where V: View
-  {
-    let used = context.children.reduce(CGSize.zero) {
-      .init(
-        width: $0.width + $1.dimensions.width,
-        height: $0.height + $1.dimensions.height
-      )
-    }
-    let size = CGSize(
-      width: proposedSize.width - (used.width * fitAxis.width),
-      height: proposedSize.height - (used.height * fitAxis.height)
-    )
-    return size
-  }
-
-  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    let (maxSize, fitSize) = context.children
-      .enumerated()
-      .reduce((CGSize.zero, CGSize.zero)) { res, next in
-        (
-          .init(
-            width: max(res.0.width, next.element.dimensions.width),
-            height: max(res.0.height, next.element.dimensions.height)
-          ),
-          next.offset < child.index ? .init(
-            width: res.1.width + next.element.dimensions.width,
-            height: res.1.height + next.element.dimensions.height
-          ) : res.1
-        )
-      }
-    let maxDimensions = ViewDimensions(size: maxSize, alignmentGuides: [:])
-    /// The gaps up to this point.
-    let fitSpacing = CGFloat(child.index) * spacing
-    let position = CGPoint(
-      x: (
-        (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal]) * maxAxis
-          .width
-      )
-        + ((fitSize.width + fitSpacing) * fitAxis.width),
-      y: (
-        (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]) * maxAxis
-          .height
-      )
-        + ((fitSize.height + fitSpacing) * fitAxis.height)
-    )
-    return position
-  }
-
-  func requestSize(in context: LayoutContext) -> CGSize {
-    let maxDimensions = CGSize(
-      width: context.children
-        .max(by: { $0.dimensions.width < $1.dimensions.width })?.dimensions.width ?? .zero,
-      height: context.children
-        .max(by: { $0.dimensions.height < $1.dimensions.height })?.dimensions.height ?? .zero
-    )
-    let fitDimensions = context.children
-      .reduce(CGSize.zero) {
-        .init(width: $0.width + $1.dimensions.width, height: $0.height + $1.dimensions.height)
-      }
-
-    /// The combined gap size.
-    let fitSpacing = CGFloat(context.children.count - 1) * spacing
-
-    return .init(
-      width: (maxDimensions.width * maxAxis.width) +
-        ((fitDimensions.width + fitSpacing) * fitAxis.width),
-      height: (maxDimensions.height * maxAxis.height) +
-        ((fitDimensions.height + fitSpacing) * fitAxis.height)
-    )
-  }
-}
-
-public extension VStack {
-  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
-    .init(
-      inputs: inputs,
-      layoutComputer: { proposedSize in
-        StackLayout(
-          proposedSize: proposedSize,
-          axis: .vertical,
-          alignment: .init(horizontal: inputs.view.alignment, vertical: .center),
-          spacing: inputs.view.spacing
-        )
-      }
-    )
-  }
-}
-
-public extension HStack {
-  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
-    .init(
-      inputs: inputs,
-      layoutComputer: { proposedSize in
-        StackLayout(
-          proposedSize: proposedSize,
-          axis: .horizontal,
-          alignment: .init(horizontal: .center, vertical: inputs.view.alignment),
-          spacing: inputs.view.spacing
-        )
-      }
-    )
-  }
-}
-
-/// Measures the bounds of the `Text` with modifiers and wrapping inside the `proposedSize`.
-final class TextLayoutComputer: LayoutComputer {
-  let text: Text
-  let proposedSize: CGSize
-  let environment: EnvironmentValues
-
-  init(text: Text, proposedSize: CGSize, environment: EnvironmentValues) {
-    self.text = text
-    self.proposedSize = proposedSize
-    self.environment = environment
-  }
-
-  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
-    where V: View
-  {
-    fatalError("Text views cannot have children.")
-  }
-
-  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    fatalError("Text views cannot have children.")
-  }
-
-  func requestSize(in context: LayoutContext) -> CGSize {
-    environment.measureText(text, proposedSize, environment)
-  }
-}
-
-public extension Text {
-  static func _makeView(_ inputs: ViewInputs<Text>) -> ViewOutputs {
-    .init(
-      inputs: inputs,
-      layoutComputer: { proposedSize in
-        TextLayoutComputer(
-          text: inputs.view,
-          proposedSize: proposedSize,
-          environment: inputs.environment.environment
-        )
-      }
-    )
-  }
-}
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index 702235fd9..969a059d7 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -53,7 +53,7 @@ extension ViewOutputs {
     self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
     makeLayoutComputer = layoutComputer ?? { proposedSize in
-      ShrinkWrapLayout(proposedSize: proposedSize)
+      ShrinkWrapLayoutComputer(proposedSize: proposedSize)
     }
   }
 }
diff --git a/Sources/TokamakCore/Fiber/ViewGeometry.swift b/Sources/TokamakCore/Fiber/ViewGeometry.swift
index a40193736..384f4d013 100644
--- a/Sources/TokamakCore/Fiber/ViewGeometry.swift
+++ b/Sources/TokamakCore/Fiber/ViewGeometry.swift
@@ -1,6 +1,16 @@
+// Copyright 2021 Tokamak contributors
 //
-//  File.swift
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
 //
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 //
 //  Created by Carson Katri on 2/17/22.
 //

From d507848e1a34f7ee0eafabf5cfa7520f2f6a50f3 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 26 May 2022 08:49:38 -0400
Subject: [PATCH 39/64] Add 'px' to font-size in test outputs

---
 .../__Snapshots__/HTMLTests/testDoubleTitle.1.html            | 4 ++--
 .../__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html    | 4 ++--
 .../__Snapshots__/HTMLTests/testFontStacks.1.html             | 4 ++--
 .../__Snapshots__/HTMLTests/testFontStacks.2.html             | 4 ++--
 .../__Snapshots__/HTMLTests/testHTMLSanitizer.1.html          | 4 ++--
 .../__Snapshots__/HTMLTests/testHTMLSanitizer.2.html          | 4 ++--
 .../__Snapshots__/HTMLTests/testMetaAll.1.html                | 4 ++--
 .../__Snapshots__/HTMLTests/testMetaCharset.1.html            | 4 ++--
 .../__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html    | 4 ++--
 .../__Snapshots__/HTMLTests/testTitle.1.html                  | 4 ++--
 .../__Snapshots__/HTMLTests/testTitleModifier.1.html          | 4 ++--
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
index 76693aeff..e8dc85c15 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
@@ -249,7 +249,7 @@
 overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
 
 
-"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -263,4 +263,4 @@
 
 
 "></div></div></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
index b9be41498..da469dafc 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
@@ -246,7 +246,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
index 36f343f92..6add735c4 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
@@ -246,7 +246,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: 'Marker Felt', system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: 'Marker Felt', system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
index 20bc62ef0..43931cd4d 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
@@ -249,7 +249,7 @@
 overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
 
 
-"><span style="font-family: 'Marker Felt', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+"><span style="font-family: 'Marker Felt', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -259,4 +259,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
index 5040727c1..2010c9231 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
@@ -246,7 +246,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">&lt;b&gt;&quot;Hello&quot; &amp; &#x27;World&#x27;&lt;/b&gt; </span></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
index f9cbbeeba..3894b4ea8 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
@@ -246,7 +246,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;"><b>"Hello" & 'World'</b> </span></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
index 9d2102a2a..c001e0231 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
@@ -253,7 +253,7 @@
 overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
 
 
-"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -263,4 +263,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
index 59f905217..2cb8f905f 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
@@ -250,7 +250,7 @@
 overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
 
 
-"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -260,4 +260,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
index 8297ce73a..cefa2d95a 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
@@ -247,7 +247,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -257,4 +257,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
index c12a0bbac..7f789ba19 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
@@ -249,7 +249,7 @@
 overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
 
 
-"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -259,4 +259,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
index e1816f325..deb7ee981 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
@@ -246,7 +246,7 @@
 height: 100%;
 justify-content: center;
 align-items: center;
-overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
+overflow: hidden;"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
 
 color: rgba(0.0, 0.0, 0.0, 1.0);
 font-style: normal;
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
\ No newline at end of file
+</html>

From 65e78e819a958b539ed09d0332e74f67cc4e3393 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Thu, 26 May 2022 08:54:21 -0400
Subject: [PATCH 40/64] Remove extra newlines

---
 .../__Snapshots__/HTMLTests/testDoubleTitle.1.html              | 2 +-
 .../__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html      | 2 +-
 .../__Snapshots__/HTMLTests/testFontStacks.1.html               | 2 +-
 .../__Snapshots__/HTMLTests/testFontStacks.2.html               | 2 +-
 .../__Snapshots__/HTMLTests/testHTMLSanitizer.1.html            | 2 +-
 .../__Snapshots__/HTMLTests/testHTMLSanitizer.2.html            | 2 +-
 .../__Snapshots__/HTMLTests/testMetaAll.1.html                  | 2 +-
 .../__Snapshots__/HTMLTests/testMetaCharset.1.html              | 2 +-
 .../__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html      | 2 +-
 .../__Snapshots__/HTMLTests/testTitle.1.html                    | 2 +-
 .../__Snapshots__/HTMLTests/testTitleModifier.1.html            | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
index e8dc85c15..1bd12a0c6 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
@@ -263,4 +263,4 @@
 
 
 "></div></div></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
index da469dafc..5d4d4c6a2 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
index 6add735c4..5804d070c 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
index 43931cd4d..b4d79e9b7 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
@@ -259,4 +259,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
index 2010c9231..af4842109 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">&lt;b&gt;&quot;Hello&quot; &amp; &#x27;World&#x27;&lt;/b&gt; </span></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
index 3894b4ea8..e244da29b 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;"><b>"Hello" & 'World'</b> </span></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
index c001e0231..fba72fc76 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
@@ -263,4 +263,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
index 2cb8f905f..98d59bc49 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
@@ -260,4 +260,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
index cefa2d95a..7d0fd49e2 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
@@ -257,4 +257,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
index 7f789ba19..ce5dc987d 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
@@ -259,4 +259,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></div></body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
index deb7ee981..ddc542493 100644
--- a/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
+++ b/Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
@@ -256,4 +256,4 @@
 text-decoration: none;
 text-decoration-color: inherit;
 text-align: left;">Hello, world!</span></body>
-</html>
+</html>
\ No newline at end of file

From f94d7334563b0851f7b51483931154f969e893bd Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 27 May 2022 11:44:33 -0400
Subject: [PATCH 41/64] Keep track of 'elementChildren' so children are
 positioned in the correct order

---
 .../TokamakCore/Fiber/FiberReconciler.swift    | 17 ++++++++++++-----
 Sources/TokamakDOM/DOMFiberRenderer.swift      |  8 ++++----
 Sources/TokamakDemo/main.swift                 | 18 +++++++++++++++++-
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index f856d74ee..13bcc07b6 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -296,6 +296,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       var elementIndices = [ObjectIdentifier: Int]()
       /// The `LayoutContext` for each parent view.
       var layoutContexts = [ObjectIdentifier: LayoutContext]()
+      /// The children of an `elementParent` with `element`s in order.
+      var elementChildren = [ObjectIdentifier: [Fiber]]()
 
       /// Compare `node` with its alternate, and add any mutations to the list.
       func reconcile(_ node: TreeReducer.Result) {
@@ -416,6 +418,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
              let fiber = node.fiber
           {
             proposeSize(for: fiber)
+            if fiber.element != nil,
+               let key = fiber.elementParent.map(ObjectIdentifier.init)
+            {
+              elementChildren[key] = elementChildren[key, default: []] + [fiber]
+            }
           }
 
           // Setup the alternate if it doesn't exist yet.
@@ -467,11 +474,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
                let fiber = node.fiber
             {
               size(fiber)
-              // Position the siblings in order.
-              var sibling = fiber.parent?.child
-              while let fiber = sibling {
-                position(fiber)
-                sibling = fiber.sibling
+              // Position the children in order.
+              if let elementChildren = elementChildren[ObjectIdentifier(fiber)] {
+                for elementChild in elementChildren {
+                  position(elementChild)
+                }
               }
             }
             guard let parent = node.parent else { return }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index a99177c8a..05647e248 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -105,10 +105,10 @@ public struct DOMFiberRenderer: FiberRenderer {
 
     if shouldLayout {
       // Setup the root styles
-      body.style.margin = .string("0")
-      reference.style.width = .string("100vw")
-      reference.style.width = .string("100vh")
-      reference.style.position = .string("relative")
+      _ = reference.style.setProperty("margin", "0")
+      _ = reference.style.setProperty("width", "100vw")
+      _ = reference.style.setProperty("height", "100vh")
+      _ = reference.style.setProperty("position", "relative")
     }
   }
 
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 4634a36af..427f1fdd1 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -18,7 +18,23 @@ struct TestView: View {
   @State private var count = 0
   var body: some View {
     VStack {
-      Text("\(count)")
+      Count(count: count)
+      Actions(count: $count)
+    }
+  }
+
+  struct Count: View {
+    let count: Int
+
+    var body: some View {
+      Text("Count: \(count)")
+    }
+  }
+
+  struct Actions: View {
+    @Binding var count: Int
+
+    var body: some View {
       HStack {
         if count > 0 {
           Button("Decrement") {

From 001cd4b4e3b85c1590a01998addf6bdb0e36357b Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Fri, 27 May 2022 11:58:29 -0400
Subject: [PATCH 42/64] Use a ViewVisitor to pass the correct View type to the
 proposeSize function

---
 .../TokamakCore/Fiber/FiberReconciler.swift   | 30 ++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 13bcc07b6..c4fc09147 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -230,6 +230,25 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       currentRoot = root
     }
 
+    /// A `ViewVisitor` that proposes a size for the `View` represented by the fiber `node`.
+    struct ProposeSizeVisitor: ViewVisitor {
+      let node: Fiber
+      let layoutContexts: [ObjectIdentifier: LayoutContext]
+
+      func visit<V>(_ view: V) where V: View {
+        // Ask the parent for a size.
+        let proposedSize = node.elementParent?.outputs.layoutComputer.proposeSize(
+          for: view,
+          at: node.elementIndex ?? 0,
+          in: node.elementParent.flatMap { layoutContexts[ObjectIdentifier($0)] }
+            ?? .init(children: [])
+        ) ?? .zero
+        // Make our layout computer using that size.
+        node.outputs.layoutComputer = node.outputs.makeLayoutComputer(proposedSize)
+        node.alternate?.outputs.layoutComputer = node.outputs.layoutComputer
+      }
+    }
+
     /// Walk the current tree, recomputing at each step to check for discrepancies.
     ///
     /// Parent-first depth-first traversal.
@@ -331,16 +350,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       func proposeSize(for node: Fiber) {
         guard node.element != nil else { return }
 
-        // Ask the parent for a size.
-        let proposedSize = node.elementParent?.outputs.layoutComputer.proposeSize(
-          for: view,
-          at: node.elementIndex ?? 0,
-          in: node.elementParent.flatMap { layoutContexts[ObjectIdentifier($0)] }
-            ?? .init(children: [])
-        ) ?? .zero
-        // Make our layout computer using that size.
-        node.outputs.layoutComputer = node.outputs.makeLayoutComputer(proposedSize)
-        node.alternate?.outputs.layoutComputer = node.outputs.layoutComputer
+        node.visitView(ProposeSizeVisitor(node: node, layoutContexts: layoutContexts))
       }
 
       func size(_ node: Fiber) {

From f89d24d80d92fd3278ade17b0aa99dbd06a6c1bc Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 09:17:13 -0400
Subject: [PATCH 43/64] Add support for view modifiers

---
 .../Environment/EnvironmentKey.swift          | 14 ++++++--
 .../Environment/EnvironmentValues.swift       |  2 +-
 Sources/TokamakCore/Fiber/Fiber.swift         |  4 +--
 .../TokamakCore/Fiber/FiberReconciler.swift   |  2 +-
 .../Fiber/Layout/StackLayoutComputer.swift    |  8 ++---
 .../Fiber/Layout/TextLayoutComputer.swift     |  2 +-
 Sources/TokamakCore/Fiber/ViewArguments.swift | 34 ++++++++++---------
 .../Modifiers/ModifiedContent.swift           |  4 +--
 .../TokamakCore/Modifiers/ViewModifier.swift  | 17 ++++++++++
 .../Shapes/ShapeStyles/BackgroundStyle.swift  |  2 +-
 .../Shapes/ShapeStyles/ForegroundStyle.swift  |  2 +-
 Sources/TokamakDemo/main.swift                |  8 +++++
 12 files changed, 67 insertions(+), 32 deletions(-)

diff --git a/Sources/TokamakCore/Environment/EnvironmentKey.swift b/Sources/TokamakCore/Environment/EnvironmentKey.swift
index 6f482a892..6b346a2af 100644
--- a/Sources/TokamakCore/Environment/EnvironmentKey.swift
+++ b/Sources/TokamakCore/Environment/EnvironmentKey.swift
@@ -17,11 +17,19 @@ public protocol EnvironmentKey {
   static var defaultValue: Value { get }
 }
 
-protocol EnvironmentModifier {
+public protocol _EnvironmentModifier {
   func modifyEnvironment(_ values: inout EnvironmentValues)
 }
 
-public struct _EnvironmentKeyWritingModifier<Value>: ViewModifier, EnvironmentModifier {
+public extension ViewModifier where Self: _EnvironmentModifier {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    var environment = inputs.environment.environment
+    inputs.content.modifyEnvironment(&environment)
+    return .init(inputs: inputs, environment: environment)
+  }
+}
+
+public struct _EnvironmentKeyWritingModifier<Value>: ViewModifier, _EnvironmentModifier {
   public let keyPath: WritableKeyPath<EnvironmentValues, Value>
   public let value: Value
 
@@ -32,7 +40,7 @@ public struct _EnvironmentKeyWritingModifier<Value>: ViewModifier, EnvironmentMo
 
   public typealias Body = Never
 
-  func modifyEnvironment(_ values: inout EnvironmentValues) {
+  public func modifyEnvironment(_ values: inout EnvironmentValues) {
     values[keyPath: keyPath] = value
   }
 }
diff --git a/Sources/TokamakCore/Environment/EnvironmentValues.swift b/Sources/TokamakCore/Environment/EnvironmentValues.swift
index dc1ec51d7..6fbb9d669 100644
--- a/Sources/TokamakCore/Environment/EnvironmentValues.swift
+++ b/Sources/TokamakCore/Environment/EnvironmentValues.swift
@@ -76,7 +76,7 @@ public extension EnvironmentValues {
   }
 }
 
-struct _EnvironmentValuesWritingModifier: ViewModifier, EnvironmentModifier {
+struct _EnvironmentValuesWritingModifier: ViewModifier, _EnvironmentModifier {
   let environmentValues: EnvironmentValues
 
   func body(content: Content) -> some View {
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 0721c9d57..b9dbb2e73 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -129,7 +129,7 @@ import Foundation
       self.view = view
       outputs = V._makeView(
         .init(
-          view: view,
+          content: view,
           environment: environment
         )
       )
@@ -249,7 +249,7 @@ import Foundation
       state = bindProperties(to: &view, typeInfo, environment.environment)
       self.view = view
       outputs = V._makeView(.init(
-        view: view,
+        content: view,
         environment: environment
       ))
 
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index c4fc09147..e32e21072 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -72,7 +72,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
     static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
       .init(
         inputs: inputs,
-        layoutComputer: { _ in RootLayoutComputer(sceneSize: inputs.view.renderer.sceneSize) }
+        layoutComputer: { _ in RootLayoutComputer(sceneSize: inputs.content.renderer.sceneSize) }
       )
     }
   }
diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index d14dc051d..32150adf6 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -123,8 +123,8 @@ public extension VStack {
         StackLayoutComputer(
           proposedSize: proposedSize,
           axis: .vertical,
-          alignment: .init(horizontal: inputs.view.alignment, vertical: .center),
-          spacing: inputs.view.spacing
+          alignment: .init(horizontal: inputs.content.alignment, vertical: .center),
+          spacing: inputs.content.spacing
         )
       }
     )
@@ -139,8 +139,8 @@ public extension HStack {
         StackLayoutComputer(
           proposedSize: proposedSize,
           axis: .horizontal,
-          alignment: .init(horizontal: .center, vertical: inputs.view.alignment),
-          spacing: inputs.view.spacing
+          alignment: .init(horizontal: .center, vertical: inputs.content.alignment),
+          spacing: inputs.content.spacing
         )
       }
     )
diff --git a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
index 723a87c13..bdc22ac64 100644
--- a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
@@ -50,7 +50,7 @@ public extension Text {
       inputs: inputs,
       layoutComputer: { proposedSize in
         TextLayoutComputer(
-          text: inputs.view,
+          text: inputs.content,
           proposedSize: proposedSize,
           environment: inputs.environment.environment
         )
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index 969a059d7..e7109050d 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -18,8 +18,8 @@
 import Foundation
 
 /// Data passed to `_makeView` to create the `ViewOutputs` used in reconciling/rendering.
-public struct ViewInputs<V: View> {
-  let view: V
+public struct ViewInputs<V> {
+  let content: V
   let environment: EnvironmentBox
 }
 
@@ -43,7 +43,7 @@ final class EnvironmentBox {
 }
 
 extension ViewOutputs {
-  init<V: View>(
+  init<V>(
     inputs: ViewInputs<V>,
     environment: EnvironmentValues? = nil,
     preferences: _PreferenceStore? = nil,
@@ -68,21 +68,23 @@ public extension View {
 
 public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
-    // Update the environment if needed.
-    var environment = inputs.environment.environment
-    if let environmentWriter = inputs.view.modifier as? EnvironmentModifier {
-      environmentWriter.modifyEnvironment(&environment)
-    }
-    return .init(inputs: inputs, environment: environment)
+    Modifier._makeView(.init(content: inputs.content.modifier, environment: inputs.environment))
+//    // Update the environment if needed.
+//    var environment = inputs.environment.environment
+//    if let environmentWriter = inputs.content.modifier as? _EnvironmentModifier {
+//      environmentWriter.modifyEnvironment(&environment)
+//    }
+//    return .init(inputs: inputs, environment: environment)
   }
 
   func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
-    if Modifier.Body.self == Never.self {
-      // Don't compute the body of a primitive modifier. Just return the content.
-      visitor.visit(content)
-    } else {
-      // Visit the computed body of the modifier.
-      visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
-    }
+    modifier._visitChildren(visitor, content: .init(modifier: modifier, view: content))
+//    if Modifier.Body.self == Never.self {
+//      // Don't compute the body of a primitive modifier. Just return the content.
+//      visitor.visit(content)
+//    } else {
+//      // Visit the computed body of the modifier.
+//      visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
+//    }
   }
 }
diff --git a/Sources/TokamakCore/Modifiers/ModifiedContent.swift b/Sources/TokamakCore/Modifiers/ModifiedContent.swift
index 9011ab1dc..dc592da57 100644
--- a/Sources/TokamakCore/Modifiers/ModifiedContent.swift
+++ b/Sources/TokamakCore/Modifiers/ModifiedContent.swift
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 protocol ModifierContainer {
-  var environmentModifier: EnvironmentModifier? { get }
+  var environmentModifier: _EnvironmentModifier? { get }
 }
 
 protocol ModifiedContentProtocol {}
@@ -32,7 +32,7 @@ public struct ModifiedContent<Content, Modifier>: ModifiedContentProtocol {
 }
 
 extension ModifiedContent: ModifierContainer {
-  var environmentModifier: EnvironmentModifier? { modifier as? EnvironmentModifier }
+  var environmentModifier: _EnvironmentModifier? { modifier as? _EnvironmentModifier }
 }
 
 extension ModifiedContent: EnvironmentReader where Modifier: EnvironmentReader {
diff --git a/Sources/TokamakCore/Modifiers/ViewModifier.swift b/Sources/TokamakCore/Modifiers/ViewModifier.swift
index 436e672f8..772676942 100644
--- a/Sources/TokamakCore/Modifiers/ViewModifier.swift
+++ b/Sources/TokamakCore/Modifiers/ViewModifier.swift
@@ -16,6 +16,23 @@ public protocol ViewModifier {
   typealias Content = _ViewModifier_Content<Self>
   associatedtype Body: View
   func body(content: Content) -> Self.Body
+
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs
+  func _visitChildren<V>(_ visitor: V, content: Content) where V: ViewVisitor
+}
+
+public extension ViewModifier {
+  static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
+    .init(inputs: inputs)
+  }
+
+  func _visitChildren<V>(_ visitor: V, content: Content) where V: ViewVisitor {
+    if Body.self == Never.self {
+      content.visitChildren(visitor)
+    } else {
+      visitor.visit(body(content: content))
+    }
+  }
 }
 
 public struct _ViewModifier_Content<Modifier>: View
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift b/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift
index f25587ab3..364225c64 100644
--- a/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/BackgroundStyle.swift
@@ -56,7 +56,7 @@ public extension View {
   }
 }
 
-@frozen public struct _BackgroundStyleModifier<Style>: ViewModifier, EnvironmentModifier,
+@frozen public struct _BackgroundStyleModifier<Style>: ViewModifier, _EnvironmentModifier,
   EnvironmentReader
   where Style: ShapeStyle
 {
diff --git a/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift b/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
index 22c713217..ac109c751 100644
--- a/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
+++ b/Sources/TokamakCore/Shapes/ShapeStyles/ForegroundStyle.swift
@@ -73,7 +73,7 @@ public extension View {
 
 @frozen public struct _ForegroundStyleModifier<
   Primary, Secondary, Tertiary
->: ViewModifier, EnvironmentModifier
+>: ViewModifier, _EnvironmentModifier
   where Primary: ShapeStyle, Secondary: ShapeStyle, Tertiary: ShapeStyle
 {
   public var primary: Primary
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 427f1fdd1..daae78367 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -14,6 +14,12 @@
 
 import TokamakShim
 
+struct TestModifier: ViewModifier {
+  func body(content: Content) -> some View {
+    content.foregroundStyle(.red)
+  }
+}
+
 struct TestView: View {
   @State private var count = 0
   var body: some View {
@@ -40,10 +46,12 @@ struct TestView: View {
           Button("Decrement") {
             self.count -= 1
           }
+          .modifier(TestModifier())
         }
         Button("Increment") {
           self.count += 1
         }
+        .modifier(TestModifier())
       }
     }
   }

From 10368b1c4fe4b8bfdbb74deddc7400c958483a07 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:05:28 -0400
Subject: [PATCH 44/64] Add frame modifier to demonstrate modifiers

---
 Sources/TokamakCore/Fiber/AlignmentID.swift   |  2 +-
 Sources/TokamakCore/Fiber/Fiber.swift         |  6 +-
 Sources/TokamakCore/Fiber/FiberElement.swift  |  2 +-
 .../Fiber/Layout/FrameLayoutComputer.swift    | 74 +++++++++++++++++++
 Sources/TokamakDOM/DOMFiberRenderer.swift     | 11 ++-
 Sources/TokamakDemo/main.swift                |  3 +-
 .../Modifiers/LayoutModifiers.swift           | 11 +++
 .../Modifiers/ViewModifier.swift              | 11 +++
 .../StaticHTMLFiberRenderer.swift             | 12 +--
 .../TokamakStaticHTML/Views/Text/Text.swift   |  4 +
 10 files changed, 122 insertions(+), 14 deletions(-)
 create mode 100644 Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 186c0002e..9810249fe 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -51,7 +51,7 @@ extension HorizontalAlignment {
     }
   }
 
-  public static let trailing = Self(Leading.self)
+  public static let trailing = Self(Trailing.self)
 
   private enum Trailing: AlignmentID {
     static func defaultValue(in context: ViewDimensions) -> CGFloat {
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index b9dbb2e73..a114c7e7b 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -143,7 +143,9 @@ import Foundation
       if let element = element {
         self.element = element
       } else if Renderer.isPrimitive(view) {
-        self.element = .init(from: .init(from: view))
+        self
+          .element =
+          .init(from: .init(from: view, shouldLayout: reconciler?.renderer.shouldLayout ?? false))
       }
 
       // Only specify an elementIndex if we have an element.
@@ -260,7 +262,7 @@ import Foundation
       }
 
       if Renderer.isPrimitive(view) {
-        return .init(from: view)
+        return .init(from: view, shouldLayout: reconciler?.renderer.shouldLayout ?? false)
       } else {
         return nil
       }
diff --git a/Sources/TokamakCore/Fiber/FiberElement.swift b/Sources/TokamakCore/Fiber/FiberElement.swift
index 27e5ee4c5..cefe750ea 100644
--- a/Sources/TokamakCore/Fiber/FiberElement.swift
+++ b/Sources/TokamakCore/Fiber/FiberElement.swift
@@ -29,5 +29,5 @@ public protocol FiberElement: AnyObject {
 /// We re-use `FiberElement` instances in the `Fiber` tree,
 /// but can re-create and copy `FiberElementContent` as often as needed.
 public protocol FiberElementContent: Equatable {
-  init<V: View>(from primitiveView: V)
+  init<V: View>(from primitiveView: V, shouldLayout: Bool)
 }
diff --git a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
new file mode 100644
index 000000000..b4b65a67e
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
@@ -0,0 +1,74 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/28/22.
+//
+
+import Foundation
+
+/// A `LayoutComputer` that fills its parent.
+final class FrameLayoutComputer: LayoutComputer {
+  let proposedSize: CGSize
+  let width: CGFloat?
+  let height: CGFloat?
+  let alignment: Alignment
+
+  init(proposedSize: CGSize, width: CGFloat?, height: CGFloat?, alignment: Alignment) {
+    self.proposedSize = proposedSize
+    self.width = width
+    self.height = height
+    self.alignment = alignment
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    .init(width: width ?? proposedSize.width, height: height ?? proposedSize.height)
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    let size = ViewDimensions(
+      size: .init(
+        width: width ?? child.dimensions.width,
+        height: height ?? child.dimensions.height
+      ),
+      alignmentGuides: [:]
+    )
+    return .init(
+      x: size[alignment.horizontal] - child.dimensions[alignment.horizontal],
+      y: size[alignment.vertical] - child.dimensions[alignment.vertical]
+    )
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    let childSize = context.children.reduce(CGSize.zero) {
+      .init(
+        width: max($0.width, $1.dimensions.width),
+        height: max($0.height, $1.dimensions.height)
+      )
+    }
+    return .init(width: width ?? childSize.width, height: height ?? childSize.height)
+  }
+}
+
+public extension _FrameLayout {
+  static func _makeView(_ inputs: ViewInputs<_FrameLayout>) -> ViewOutputs {
+    .init(inputs: inputs, layoutComputer: { FrameLayoutComputer(
+      proposedSize: $0,
+      width: inputs.content.width,
+      height: inputs.content.height,
+      alignment: inputs.content.alignment
+    ) })
+  }
+}
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 05647e248..36ee50d3e 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -47,10 +47,10 @@ public final class DOMElement: FiberElement {
 }
 
 public extension DOMElement.Content {
-  init<V>(from primitiveView: V) where V: View {
+  init<V>(from primitiveView: V, shouldLayout: Bool) where V: View {
     guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
     tag = primitiveView.tag
-    attributes = primitiveView.attributes
+    attributes = primitiveView.attributes(shouldLayout: shouldLayout)
     innerHTML = primitiveView.innerHTML
 
     if let primitiveView = primitiveView as? DOMNodeConvertible {
@@ -128,7 +128,7 @@ public struct DOMFiberRenderer: FiberRenderer {
     proposedSize: CGSize,
     in environment: EnvironmentValues
   ) -> CGSize {
-    let element = createElement(.init(from: .init(from: text)))
+    let element = createElement(.init(from: .init(from: text, shouldLayout: true)))
     _ = element.style.setProperty("maxWidth", "\(proposedSize.width)px")
     _ = element.style.setProperty("maxHeight", "\(proposedSize.height)px")
     _ = document.body.appendChild(element)
@@ -214,7 +214,10 @@ public struct DOMFiberRenderer: FiberRenderer {
 
 extension _PrimitiveButtonStyleBody: DOMNodeConvertible {
   public var tag: String { "button" }
-  public var attributes: [HTMLAttribute: String] { [:] }
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
+    [:]
+  }
+
   var listeners: [String: Listener] {
     ["pointerup": { _ in self.action() }]
   }
diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index daae78367..54be8b20b 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -16,7 +16,8 @@ import TokamakShim
 
 struct TestModifier: ViewModifier {
   func body(content: Content) -> some View {
-    content.foregroundStyle(.red)
+    content
+      .foregroundStyle(.secondary)
   }
 }
 
diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
index 29585454c..c363d1661 100644
--- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
@@ -73,6 +73,17 @@ extension _FrameLayout: DOMViewModifier {
   }
 }
 
+@_spi(TokamakStaticHTML) extension _FrameLayout: HTMLConvertible {
+  public var tag: String { "div" }
+  public var includeAttributes: Bool { false }
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
+    guard !shouldLayout else { return [
+      "style": "overflow: hidden;",
+    ] }
+    return attributes
+  }
+}
+
 extension _FlexFrameLayout: DOMViewModifier {
   public var isOrderDependent: Bool { true }
   public var attributes: [HTMLAttribute: String] {
diff --git a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
index e4827e7b2..ed88b858a 100644
--- a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
@@ -44,3 +44,14 @@ extension _ZIndexModifier: DOMViewModifier {
     ["style": "z-index: \(index);"]
   }
 }
+
+@_spi(TokamakStaticHTML) extension ModifiedContent: HTMLConvertible where Content: View,
+  Modifier: HTMLConvertible
+{
+  public var tag: String { modifier.tag }
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
+    modifier.attributes(shouldLayout: shouldLayout)
+  }
+
+  public var innerHTML: String? { modifier.innerHTML }
+}
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index a0d935b88..25d795a2b 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -32,10 +32,10 @@ public final class HTMLElement: FiberElement, CustomStringConvertible {
     var innerHTML: String?
     var children: [HTMLElement] = []
 
-    public init<V>(from primitiveView: V) where V: View {
+    public init<V>(from primitiveView: V, shouldLayout: Bool) where V: View {
       guard let primitiveView = primitiveView as? HTMLConvertible else { fatalError() }
       tag = primitiveView.tag
-      attributes = primitiveView.attributes
+      attributes = primitiveView.attributes(shouldLayout: shouldLayout)
       innerHTML = primitiveView.innerHTML
     }
 
@@ -90,7 +90,7 @@ public final class HTMLElement: FiberElement, CustomStringConvertible {
 
 @_spi(TokamakStaticHTML) public protocol HTMLConvertible {
   var tag: String { get }
-  var attributes: [HTMLAttribute: String] { get }
+  func attributes(shouldLayout: Bool) -> [HTMLAttribute: String]
   var innerHTML: String? { get }
 }
 
@@ -100,7 +100,8 @@ public extension HTMLConvertible {
 
 @_spi(TokamakStaticHTML) extension VStack: HTMLConvertible {
   @_spi(TokamakStaticHTML) public var tag: String { "div" }
-  @_spi(TokamakStaticHTML) public var attributes: [HTMLAttribute: String] {
+  @_spi(TokamakStaticHTML)
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
     let spacing = _VStackProxy(self).spacing
     return [
       "style": """
@@ -116,7 +117,8 @@ public extension HTMLConvertible {
 
 @_spi(TokamakStaticHTML) extension HStack: HTMLConvertible {
   @_spi(TokamakStaticHTML) public var tag: String { "div" }
-  @_spi(TokamakStaticHTML) public var attributes: [HTMLAttribute: String] {
+  @_spi(TokamakStaticHTML)
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
     let spacing = _HStackProxy(self).spacing
     return [
       "style": """
diff --git a/Sources/TokamakStaticHTML/Views/Text/Text.swift b/Sources/TokamakStaticHTML/Views/Text/Text.swift
index bf5c632fa..b3e71d8bd 100644
--- a/Sources/TokamakStaticHTML/Views/Text/Text.swift
+++ b/Sources/TokamakStaticHTML/Views/Text/Text.swift
@@ -181,6 +181,10 @@ extension Text: AnyHTML {
     }
     return innerHTML.replacingOccurrences(of: "\n", with: "<br />")
   }
+
+  public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
+    attributes
+  }
 }
 
 extension Text {

From f926fbe330c6e9445df6f55c9c94dbe1efd42978 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:10:24 -0400
Subject: [PATCH 45/64] Fix TestRenderer

---
 Sources/TokamakTestRenderer/TestFiberRenderer.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index 971c45b02..a0eef1406 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -71,7 +71,7 @@ public final class TestFiberElement: FiberElement, CustomStringConvertible {
       self.closingTag = closingTag
     }
 
-    public init<V>(from primitiveView: V) where V: View {
+    public init<V>(from primitiveView: V, shouldLayout: Bool) where V: View {
       guard let primitiveView = primitiveView as? TestFiberPrimitive else { fatalError() }
       renderedValue =
         "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"

From 4d96217eeedd89631406ee8016348216d235b936 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:13:16 -0400
Subject: [PATCH 46/64] Remove unused property

---
 Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
index c363d1661..b90f41a7a 100644
--- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
@@ -75,7 +75,6 @@ extension _FrameLayout: DOMViewModifier {
 
 @_spi(TokamakStaticHTML) extension _FrameLayout: HTMLConvertible {
   public var tag: String { "div" }
-  public var includeAttributes: Bool { false }
   public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
     guard !shouldLayout else { return [
       "style": "overflow: hidden;",

From aeb59839b01e525003308ed6473d1ecf07dcdd9c Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:22:35 -0400
Subject: [PATCH 47/64] Fix doc comment

---
 Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
index b4b65a67e..5648f3e4c 100644
--- a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
@@ -17,7 +17,7 @@
 
 import Foundation
 
-/// A `LayoutComputer` that fills its parent.
+/// A `LayoutComputer` that uses a specified size in one or more axes.
 final class FrameLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
   let width: CGFloat?

From 3265b74dd14344a2383c35173494e81c5a1ec140 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:42:18 -0400
Subject: [PATCH 48/64] Fix linter issues and refactor slightly

---
 Sources/TokamakCore/Fiber/AlignmentID.swift   |  24 +++
 Sources/TokamakCore/Fiber/Fiber.swift         |   5 +-
 .../Fiber/FiberReconciler+TreeReducer.swift   | 146 +++++++++++++++++
 .../TokamakCore/Fiber/FiberReconciler.swift   | 155 +-----------------
 .../Fiber/Layout/RootLayoutComputer.swift     |  44 +++++
 Sources/TokamakCore/Fiber/ViewArguments.swift |  16 +-
 Sources/TokamakCore/Fiber/walk.swift          |   1 -
 Sources/TokamakCore/Views/Layout/ZStack.swift |  24 ---
 Sources/TokamakDOM/index.html                 | 123 --------------
 .../TestFiberRenderer.swift                   |   6 +-
 10 files changed, 227 insertions(+), 317 deletions(-)
 create mode 100644 Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
 create mode 100644 Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
 delete mode 100644 Sources/TokamakDOM/index.html

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 9810249fe..7849d75a4 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -98,3 +98,27 @@ extension VerticalAlignment {
   // public static let firstTextBaseline: VerticalAlignment
   // public static let lastTextBaseline: VerticalAlignment
 }
+
+/// An alignment in both axes.
+public struct Alignment: Equatable {
+  public var horizontal: HorizontalAlignment
+  public var vertical: VerticalAlignment
+
+  public init(
+    horizontal: HorizontalAlignment,
+    vertical: VerticalAlignment
+  ) {
+    self.horizontal = horizontal
+    self.vertical = vertical
+  }
+
+  public static let topLeading = Self(horizontal: .leading, vertical: .top)
+  public static let top = Self(horizontal: .center, vertical: .top)
+  public static let topTrailing = Self(horizontal: .trailing, vertical: .top)
+  public static let leading = Self(horizontal: .leading, vertical: .center)
+  public static let center = Self(horizontal: .center, vertical: .center)
+  public static let trailing = Self(horizontal: .trailing, vertical: .center)
+  public static let bottomLeading = Self(horizontal: .leading, vertical: .bottom)
+  public static let bottom = Self(horizontal: .center, vertical: .bottom)
+  public static let bottomTrailing = Self(horizontal: .trailing, vertical: .bottom)
+}
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index a114c7e7b..9010caf3d 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -277,10 +277,13 @@ import Foundation
 
     private func flush(level: Int = 0) -> String {
       let spaces = String(repeating: " ", count: level)
+      let geometry = geometry ?? .init(
+        origin: .init(origin: .zero), dimensions: .init(size: .zero, alignmentGuides: [:])
+      )
       return """
       \(spaces)\(String(describing: typeInfo?.type ?? Any.self)
         .split(separator: "<")[0])\(element != nil ? "(\(element!))" : "") {\(element != nil ?
-        "\n\(spaces)geometry: \(geometry ?? .init(origin: .init(origin: .zero), dimensions: .init(size: .zero, alignmentGuides: [:])))" :
+        "\n\(spaces)geometry: \(geometry)" :
         "")
       \(child?.flush(level: level + 2) ?? "")
       \(spaces)}
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift b/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
new file mode 100644
index 000000000..d7888cc8c
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
@@ -0,0 +1,146 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/28/22.
+//
+
+import Foundation
+
+extension FiberReconciler {
+  /// Convert the first level of children of a `View` into a linked list of `Fiber`s.
+  struct TreeReducer: ViewReducer {
+    final class Result {
+      // For references
+      let fiber: Fiber?
+      let visitChildren: (TreeReducer.Visitor) -> ()
+      unowned var parent: Result?
+      var child: Result?
+      var sibling: Result?
+      var newContent: Renderer.ElementType.Content?
+      var elementIndices: [ObjectIdentifier: Int]
+      var layoutContexts: [ObjectIdentifier: LayoutContext]
+
+      // For reducing
+      var lastSibling: Result?
+      var nextExisting: Fiber?
+      var nextExistingAlternate: Fiber?
+
+      init(
+        fiber: Fiber?,
+        visitChildren: @escaping (TreeReducer.Visitor) -> (),
+        parent: Result?,
+        child: Fiber?,
+        alternateChild: Fiber?,
+        newContent: Renderer.ElementType.Content? = nil,
+        elementIndices: [ObjectIdentifier: Int],
+        layoutContexts: [ObjectIdentifier: LayoutContext]
+      ) {
+        self.fiber = fiber
+        self.visitChildren = visitChildren
+        self.parent = parent
+        nextExisting = child
+        nextExistingAlternate = alternateChild
+        self.newContent = newContent
+        self.elementIndices = elementIndices
+        self.layoutContexts = layoutContexts
+      }
+    }
+
+    static func reduce<V>(into partialResult: inout Result, nextView: V) where V: View {
+      // Create the node and its element.
+      var nextView = nextView
+      let resultChild: Result
+      if let existing = partialResult.nextExisting {
+        // If a fiber already exists, simply update it with the new view.
+        let key: ObjectIdentifier?
+        if let elementParent = existing.elementParent {
+          key = ObjectIdentifier(elementParent)
+        } else {
+          key = nil
+        }
+        let newContent = existing.update(
+          with: &nextView,
+          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] }
+        )
+        resultChild = Result(
+          fiber: existing,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: existing.child,
+          alternateChild: existing.alternate?.child,
+          newContent: newContent,
+          elementIndices: partialResult.elementIndices,
+          layoutContexts: partialResult.layoutContexts
+        )
+        partialResult.nextExisting = existing.sibling
+
+        // If this fiber has an element, increment the elementIndex for its parent.
+        if let key = key,
+           existing.element != nil
+        {
+          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
+        }
+      } else {
+        let elementParent = partialResult.fiber?.element != nil
+          ? partialResult.fiber
+          : partialResult.fiber?.elementParent
+        let key: ObjectIdentifier?
+        if let elementParent = elementParent {
+          key = ObjectIdentifier(elementParent)
+        } else {
+          key = nil
+        }
+        // Otherwise, create a new fiber for this child.
+        let fiber = Fiber(
+          &nextView,
+          element: partialResult.nextExistingAlternate?.element,
+          parent: partialResult.fiber,
+          elementParent: elementParent,
+          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] },
+          reconciler: partialResult.fiber?.reconciler
+        )
+        // If a fiber already exists for an alternate, link them.
+        if let alternate = partialResult.nextExistingAlternate {
+          fiber.alternate = alternate
+          partialResult.nextExistingAlternate = alternate.sibling
+        }
+        // If this fiber has an element, increment the elementIndex for its parent.
+        if let key = key,
+           fiber.element != nil
+        {
+          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
+        }
+        resultChild = Result(
+          fiber: fiber,
+          visitChildren: nextView._visitChildren,
+          parent: partialResult,
+          child: nil,
+          alternateChild: fiber.alternate?.child,
+          elementIndices: partialResult.elementIndices,
+          layoutContexts: partialResult.layoutContexts
+        )
+      }
+      // Get the last child element we've processed, and add the new child as its sibling.
+      if let lastSibling = partialResult.lastSibling {
+        lastSibling.fiber?.sibling = resultChild.fiber
+        lastSibling.sibling = resultChild
+      } else {
+        // Otherwise setup the first child
+        partialResult.fiber?.child = resultChild.fiber
+        partialResult.child = resultChild
+      }
+      partialResult.lastSibling = resultChild
+    }
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index e32e21072..c6fb3b503 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -17,32 +17,8 @@
 
 import Foundation
 
-final class RootLayoutComputer: LayoutComputer {
-  let sceneSize: CGSize
-
-  init(sceneSize: CGSize) {
-    self.sceneSize = sceneSize
-  }
-
-  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
-    where V: View
-  {
-    sceneSize
-  }
-
-  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
-    .init(
-      x: sceneSize.width / 2 - child.dimensions[HorizontalAlignment.center],
-      y: sceneSize.height / 2 - child.dimensions[VerticalAlignment.center]
-    )
-  }
-
-  func requestSize(in context: LayoutContext) -> CGSize {
-    sceneSize
-  }
-}
-
-/// A reconciler modeled after React's [Fiber reconciler](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber)
+/// A reconciler modeled after React's
+/// [Fiber reconciler](https://reactjs.org/docs/faq-internals.html#what-is-react-fiber)
 public final class FiberReconciler<Renderer: FiberRenderer> {
   /// The root node in the `Fiber` tree that represents the `View`s currently rendered on screen.
   @_spi(TokamakCore) public var current: Fiber!
@@ -93,132 +69,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
     reconcile(from: current)
   }
 
-  /// Convert the first level of children of a `View` into a linked list of `Fiber`s.
-  struct TreeReducer: ViewReducer {
-    final class Result {
-      // For references
-      let fiber: Fiber?
-      let visitChildren: (TreeReducer.Visitor) -> ()
-      unowned var parent: Result?
-      var child: Result?
-      var sibling: Result?
-      var newContent: Renderer.ElementType.Content?
-      var elementIndices: [ObjectIdentifier: Int]
-      var layoutContexts: [ObjectIdentifier: LayoutContext]
-
-      // For reducing
-      var lastSibling: Result?
-      var nextExisting: Fiber?
-      var nextExistingAlternate: Fiber?
-
-      init(
-        fiber: Fiber?,
-        visitChildren: @escaping (TreeReducer.Visitor) -> (),
-        parent: Result?,
-        child: Fiber?,
-        alternateChild: Fiber?,
-        newContent: Renderer.ElementType.Content? = nil,
-        elementIndices: [ObjectIdentifier: Int],
-        layoutContexts: [ObjectIdentifier: LayoutContext]
-      ) {
-        self.fiber = fiber
-        self.visitChildren = visitChildren
-        self.parent = parent
-        nextExisting = child
-        nextExistingAlternate = alternateChild
-        self.newContent = newContent
-        self.elementIndices = elementIndices
-        self.layoutContexts = layoutContexts
-      }
-    }
-
-    static func reduce<V>(into partialResult: inout Result, nextView: V) where V: View {
-      // Create the node and its element.
-      var nextView = nextView
-      let resultChild: Result
-      if let existing = partialResult.nextExisting {
-        // If a fiber already exists, simply update it with the new view.
-        let key: ObjectIdentifier?
-        if let elementParent = existing.elementParent {
-          key = ObjectIdentifier(elementParent)
-        } else {
-          key = nil
-        }
-        let newContent = existing.update(
-          with: &nextView,
-          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] }
-        )
-        resultChild = Result(
-          fiber: existing,
-          visitChildren: nextView._visitChildren,
-          parent: partialResult,
-          child: existing.child,
-          alternateChild: existing.alternate?.child,
-          newContent: newContent,
-          elementIndices: partialResult.elementIndices,
-          layoutContexts: partialResult.layoutContexts
-        )
-        partialResult.nextExisting = existing.sibling
-
-        // If this fiber has an element, increment the elementIndex for its parent.
-        if let key = key,
-           existing.element != nil
-        {
-          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
-        }
-      } else {
-        let elementParent = partialResult.fiber?.element != nil
-          ? partialResult.fiber
-          : partialResult.fiber?.elementParent
-        let key: ObjectIdentifier?
-        if let elementParent = elementParent {
-          key = ObjectIdentifier(elementParent)
-        } else {
-          key = nil
-        }
-        // Otherwise, create a new fiber for this child.
-        let fiber = Fiber(
-          &nextView,
-          element: partialResult.nextExistingAlternate?.element,
-          parent: partialResult.fiber,
-          elementParent: elementParent,
-          elementIndex: key.map { partialResult.elementIndices[$0, default: 0] },
-          reconciler: partialResult.fiber?.reconciler
-        )
-        // If a fiber already exists for an alternate, link them.
-        if let alternate = partialResult.nextExistingAlternate {
-          fiber.alternate = alternate
-          partialResult.nextExistingAlternate = alternate.sibling
-        }
-        // If this fiber has an element, increment the elementIndex for its parent.
-        if let key = key,
-           fiber.element != nil
-        {
-          partialResult.elementIndices[key] = partialResult.elementIndices[key, default: 0] + 1
-        }
-        resultChild = Result(
-          fiber: fiber,
-          visitChildren: nextView._visitChildren,
-          parent: partialResult,
-          child: nil,
-          alternateChild: fiber.alternate?.child,
-          elementIndices: partialResult.elementIndices,
-          layoutContexts: partialResult.layoutContexts
-        )
-      }
-      // Get the last child element we've processed, and add the new child as its sibling.
-      if let lastSibling = partialResult.lastSibling {
-        lastSibling.fiber?.sibling = resultChild.fiber
-        lastSibling.sibling = resultChild
-      } else {
-        // Otherwise setup the first child
-        partialResult.fiber?.child = resultChild.fiber
-        partialResult.child = resultChild
-      }
-      partialResult.lastSibling = resultChild
-    }
-  }
-
   final class ReconcilerVisitor: ViewVisitor {
     unowned let reconciler: FiberReconciler<Renderer>
     /// The current, mounted `Fiber`.
@@ -506,7 +356,6 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           }
 
           // Walk across to the sibling, and repeat.
-          // swiftlint:disable:next force_unwrap
           node = node.sibling!
         }
       }
diff --git a/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
new file mode 100644
index 000000000..0da2fc878
--- /dev/null
+++ b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
@@ -0,0 +1,44 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 5/28/22.
+//
+
+import Foundation
+
+/// A `LayoutComputer` for the root element of a `FiberRenderer`.
+final class RootLayoutComputer: LayoutComputer {
+  let sceneSize: CGSize
+
+  init(sceneSize: CGSize) {
+    self.sceneSize = sceneSize
+  }
+
+  func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+    where V: View
+  {
+    sceneSize
+  }
+
+  func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
+    .init(
+      x: sceneSize.width / 2 - child.dimensions[HorizontalAlignment.center],
+      y: sceneSize.height / 2 - child.dimensions[VerticalAlignment.center]
+    )
+  }
+
+  func requestSize(in context: LayoutContext) -> CGSize {
+    sceneSize
+  }
+}
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index e7109050d..b8fa6a4a6 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -49,7 +49,8 @@ extension ViewOutputs {
     preferences: _PreferenceStore? = nil,
     layoutComputer: ((CGSize) -> LayoutComputer)? = nil
   ) {
-    // Only replace the EnvironmentBox when we change the environment. Otherwise the same box can be reused.
+    // Only replace the EnvironmentBox when we change the environment.
+    // Otherwise the same box can be reused.
     self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
     makeLayoutComputer = layoutComputer ?? { proposedSize in
@@ -69,22 +70,9 @@ public extension View {
 public extension ModifiedContent where Content: View, Modifier: ViewModifier {
   static func _makeView(_ inputs: ViewInputs<Self>) -> ViewOutputs {
     Modifier._makeView(.init(content: inputs.content.modifier, environment: inputs.environment))
-//    // Update the environment if needed.
-//    var environment = inputs.environment.environment
-//    if let environmentWriter = inputs.content.modifier as? _EnvironmentModifier {
-//      environmentWriter.modifyEnvironment(&environment)
-//    }
-//    return .init(inputs: inputs, environment: environment)
   }
 
   func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
     modifier._visitChildren(visitor, content: .init(modifier: modifier, view: content))
-//    if Modifier.Body.self == Never.self {
-//      // Don't compute the body of a primitive modifier. Just return the content.
-//      visitor.visit(content)
-//    } else {
-//      // Visit the computed body of the modifier.
-//      visitor.visit(modifier.body(content: .init(modifier: modifier, view: content)))
-//    }
   }
 }
diff --git a/Sources/TokamakCore/Fiber/walk.swift b/Sources/TokamakCore/Fiber/walk.swift
index 7e00c8ab4..0c7b49628 100644
--- a/Sources/TokamakCore/Fiber/walk.swift
+++ b/Sources/TokamakCore/Fiber/walk.swift
@@ -67,7 +67,6 @@ func walk<Renderer: FiberRenderer, Success>(
       current = parent
     }
     // Walk the sibling
-    // swiftlint:disable:next force_unwrap
     current = current.sibling!
   }
 }
diff --git a/Sources/TokamakCore/Views/Layout/ZStack.swift b/Sources/TokamakCore/Views/Layout/ZStack.swift
index e12709fbc..b37ad109c 100644
--- a/Sources/TokamakCore/Views/Layout/ZStack.swift
+++ b/Sources/TokamakCore/Views/Layout/ZStack.swift
@@ -14,30 +14,6 @@
 
 import Foundation
 
-/// An alignment in both axes.
-public struct Alignment: Equatable {
-  public var horizontal: HorizontalAlignment
-  public var vertical: VerticalAlignment
-
-  public init(
-    horizontal: HorizontalAlignment,
-    vertical: VerticalAlignment
-  ) {
-    self.horizontal = horizontal
-    self.vertical = vertical
-  }
-
-  public static let topLeading = Self(horizontal: .leading, vertical: .top)
-  public static let top = Self(horizontal: .center, vertical: .top)
-  public static let topTrailing = Self(horizontal: .trailing, vertical: .top)
-  public static let leading = Self(horizontal: .leading, vertical: .center)
-  public static let center = Self(horizontal: .center, vertical: .center)
-  public static let trailing = Self(horizontal: .trailing, vertical: .center)
-  public static let bottomLeading = Self(horizontal: .leading, vertical: .bottom)
-  public static let bottom = Self(horizontal: .center, vertical: .bottom)
-  public static let bottomTrailing = Self(horizontal: .trailing, vertical: .bottom)
-}
-
 /// A view that overlays its children, aligning them in both axes.
 ///
 ///     ZStack {
diff --git a/Sources/TokamakDOM/index.html b/Sources/TokamakDOM/index.html
deleted file mode 100644
index a99f37ce6..000000000
--- a/Sources/TokamakDOM/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Tokamak App</title>
-    <script>
-      window.Tokamak = {
-        root: undefined,
-        measureText: (text, proposedSize) => {
-          const element = document.createElement("span")
-          element.textContent = text
-          element.style.maxWidth = `${proposedSize.width}px`
-          element.style.maxHeight = `${proposedSize.height}px`
-          document.body.appendChild(element)
-          const rect = element.getBoundingClientRect()
-          const size = {
-            width: rect.width,
-            height: rect.height
-          }
-          document.body.removeChild(element)
-          return size
-        },
-        initRoot: (root) => {
-          document.body.style.margin = '0'
-          root.style.width = '100vw'
-          root.style.height = '100vh'
-          root.style.position = 'relative'
-          window.Tokamak.root = root
-        },
-        create: (element) => {
-          const result = document.createElement(element.tag)
-          for (const attribute of element.attributes) {
-            if (attribute.property)
-              result[attribute.name] = attribute.value
-            else
-              result.setAttribute(attribute.name, attribute.value)
-          }
-          if (!!element.innerHTML)
-            result.innerHTML = element.innerHTML
-          for (const [event, action] of Object.entries(element.listeners))
-            result.addEventListener(event, action)
-          result.style.position = 'absolute'
-          element.bind(result)
-          return result
-        },
-        commit: (mutations) => {
-          for (const mutation of mutations) {
-            switch (mutation.operation) {
-            case 0: // .insert
-              const parent = mutation.parent() ?? window.Tokamak.root
-              const element = window.Tokamak.create(mutation.element)
-              element.dataset.view = mutation.element.debugData.view
-              if (parent.children.length > mutation.index) {
-                parent.insertBefore(element, parent.children[mutation.index])
-              } else {
-                parent.appendChild(element)
-              }
-              break
-            case 1: // .remove
-              if (!mutation.element) {
-                console.error(`Cannot remove null from parent.`)
-                continue
-              }
-              mutation.element.remove()
-              break
-            case 2: // .replace
-              const replaceParent = mutation.parent() ?? window.Tokamak.root
-              const original = mutation.element()
-              const replacement = window.Tokamak.create(mutation.replacement)
-              replaceParent.replaceChild(replacement, original)
-              break
-            case 3: // .update
-              // If we set the .style property, we need to copy the layout styles back in after.
-              const geometry = {
-                width: mutation.previous.style.width,
-                height: mutation.previous.style.height,
-                left: mutation.previous.style.left,
-                top: mutation.previous.style.top
-              }
-              for (const attribute of mutation.updates.attributes) {
-                if (attribute.property)
-                  mutation.previous[attribute.name] = attribute.value
-                else
-                  mutation.previous.setAttribute(attribute.name, attribute.value)
-              }
-              mutation.previous.innerHTML = mutation.updates.innerHTML
-              for (const [event, action] of Object.entries(mutation.updates.listeners))
-                mutation.previous.addEventListener(event, action)
-              mutation.updates.bind(mutation.previous)
-              // Copy back the layout.
-              mutation.previous.style.position = 'absolute'
-              for (const [style, value] of Object.entries(geometry))
-                mutation.previous.style[style] = value
-              break
-            case 4: // .layout
-              const target = mutation.element()
-              target.style.position = 'absolute'
-              target.style.width = `${mutation.geometry.width}px`
-              target.style.height = `${mutation.geometry.height}px`
-              target.style.left = `${mutation.geometry.x}px`
-              target.style.top = `${mutation.geometry.y}px`
-              continue
-            default:
-              console.error(`Unhandled mutation ${mutation.operation}`, mutation)
-              continue
-            }
-          }
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <!--
-      Your Tokamak app will be injected into the #root element,
-      unless a different mountpoint is specified in the renderer.
-    -->
-    <div id="root"></div>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-  </body>
-</html>
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index a0eef1406..d0b19aa6f 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -73,8 +73,12 @@ public final class TestFiberElement: FiberElement, CustomStringConvertible {
 
     public init<V>(from primitiveView: V, shouldLayout: Bool) where V: View {
       guard let primitiveView = primitiveView as? TestFiberPrimitive else { fatalError() }
+      let attributes = primitiveView.attributes
+        .sorted(by: { $0.key < $1.key })
+        .map { "\($0.key)=\"\(String(describing: $0.value))\"" }
+        .joined(separator: " ")
       renderedValue =
-        "<\(primitiveView.tag) \(primitiveView.attributes.sorted(by: { $0.key < $1.key }).map { "\($0.key)=\"\(String(describing: $0.value))\"" }.joined(separator: " "))>"
+        "<\(primitiveView.tag) \(attributes)>"
       closingTag = "</\(primitiveView.tag)>"
     }
   }

From b6c5d8e48960c4af89c844d1b8fb577a5d3cb345 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 14:49:31 -0400
Subject: [PATCH 49/64] Fix benchmark builds

---
 Sources/TokamakCoreBenchmark/main.swift | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index d214bf43f..349b8cffa 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -62,7 +62,7 @@ benchmark("update wide (StackReconciler)") { state in
 
 benchmark("update wide (FiberReconciler)") { state in
   let view = UpdateWide()
-  let reconciler = TestFiberRenderer(.root).render(view)
+  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
   let button = reconciler.current // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
@@ -114,7 +114,7 @@ benchmark("update narrow (StackReconciler)") { state in
 
 benchmark("update narrow (FiberReconciler)") { state in
   let view = UpdateNarrow()
-  let reconciler = TestFiberRenderer(.root).render(view)
+  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
   let button = reconciler.current // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
@@ -178,7 +178,7 @@ benchmark("update deep (StackReconciler)") { state in
 
 benchmark("update deep (FiberReconciler)") { state in
   let view = UpdateDeep()
-  let reconciler = TestFiberRenderer(.root).render(view)
+  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
   let button = reconciler.current // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
@@ -240,7 +240,7 @@ benchmark("update shallow (StackReconciler)") { _ in
 
 benchmark("update shallow (FiberReconciler)") { _ in
   let view = UpdateShallow()
-  let reconciler = TestFiberRenderer(.root).render(view)
+  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
   let button = reconciler.current // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast

From 8ca135c975e08fe108c38e5f8efa814a69fe5ff3 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 17:48:52 -0400
Subject: [PATCH 50/64] Attempt to fix benchmarks

---
 Sources/TokamakCoreBenchmark/main.swift | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index 349b8cffa..3d5426b56 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -62,8 +62,9 @@ benchmark("update wide (StackReconciler)") { state in
 
 benchmark("update wide (FiberReconciler)") { state in
   let view = UpdateWide()
-  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
-  let button = reconciler.current // ModifiedContent
+  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let button = reconciler.current // RootView
+    .child? // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
     .child? // VStack
@@ -114,8 +115,9 @@ benchmark("update narrow (StackReconciler)") { state in
 
 benchmark("update narrow (FiberReconciler)") { state in
   let view = UpdateNarrow()
-  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
-  let button = reconciler.current // ModifiedContent
+  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let button = reconciler.current // RootView
+    .child? // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
     .child? // VStack
@@ -178,8 +180,9 @@ benchmark("update deep (StackReconciler)") { state in
 
 benchmark("update deep (FiberReconciler)") { state in
   let view = UpdateDeep()
-  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
-  let button = reconciler.current // ModifiedContent
+  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let button = reconciler.current // RootView
+    .child? // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
     .child? // VStack
@@ -240,8 +243,9 @@ benchmark("update shallow (StackReconciler)") { _ in
 
 benchmark("update shallow (FiberReconciler)") { _ in
   let view = UpdateShallow()
-  let reconciler = TestFiberRenderer(.root, size: .zero).render(view)
-  let button = reconciler.current // ModifiedContent
+  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let button = reconciler.current // RootView
+    .child? // ModifiedContent
     .child? // _ViewModifier_Content
     .child? // UpdateLast
     .child? // VStack

From 8779df699fd0fa395ff52c89d0fb78b63aec9c31 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 18:27:10 -0400
Subject: [PATCH 51/64] Fix sibling layout issues

---
 .../TokamakCore/Fiber/FiberReconciler.swift   | 14 +++++++++--
 .../TokamakCore/Views/Containers/Group.swift  |  6 ++++-
 Sources/TokamakCoreBenchmark/main.swift       | 24 +++++++++++++++----
 .../TestFiberRenderer.swift                   | 12 ++++++++++
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index c6fb3b503..2327b3c85 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -347,12 +347,18 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             node = parent
           }
 
-          // We `size` when we reach the bottommost view that has a sibling.
+          // We `size` and `position` when we reach the bottommost view that has a sibling.
           // Otherwise, sizing takes place in the above loop.
           if reconciler.renderer.shouldLayout,
              let fiber = node.fiber
           {
             size(fiber)
+            // Position the children in order.
+            if let elementChildren = elementChildren[ObjectIdentifier(fiber)] {
+              for elementChild in elementChildren {
+                position(elementChild)
+              }
+            }
           }
 
           // Walk across to the sibling, and repeat.
@@ -366,7 +372,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         var layoutNode = node.fiber?.child
         while let current = layoutNode {
           // We only need to re-position, because the size can't change if no state changed.
-          position(current)
+          if let elementChildren = elementChildren[ObjectIdentifier(current)] {
+            for elementChild in elementChildren {
+              position(elementChild)
+            }
+          }
           if current.sibling != nil {
             // We also don't need to go deep into sibling children,
             // because child positioning is relative to the parent.
diff --git a/Sources/TokamakCore/Views/Containers/Group.swift b/Sources/TokamakCore/Views/Containers/Group.swift
index e27e2629c..3ef05c4c4 100644
--- a/Sources/TokamakCore/Views/Containers/Group.swift
+++ b/Sources/TokamakCore/Views/Containers/Group.swift
@@ -19,7 +19,11 @@ public struct Group<Content> {
   }
 }
 
-extension Group: _PrimitiveView, View where Content: View {}
+extension Group: _PrimitiveView, View where Content: View {
+  public func _visitChildren<V>(_ visitor: V) where V: ViewVisitor {
+    visitor.visit(content)
+  }
+}
 
 extension Group: ParentView where Content: View {
   @_spi(TokamakCore)
diff --git a/Sources/TokamakCoreBenchmark/main.swift b/Sources/TokamakCoreBenchmark/main.swift
index 3d5426b56..5cf824bae 100644
--- a/Sources/TokamakCoreBenchmark/main.swift
+++ b/Sources/TokamakCoreBenchmark/main.swift
@@ -62,7 +62,11 @@ benchmark("update wide (StackReconciler)") { state in
 
 benchmark("update wide (FiberReconciler)") { state in
   let view = UpdateWide()
-  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let reconciler = TestFiberRenderer(
+    .root,
+    size: .init(width: 500, height: 500),
+    shouldLayout: false
+  ).render(view)
   let button = reconciler.current // RootView
     .child? // ModifiedContent
     .child? // _ViewModifier_Content
@@ -115,7 +119,11 @@ benchmark("update narrow (StackReconciler)") { state in
 
 benchmark("update narrow (FiberReconciler)") { state in
   let view = UpdateNarrow()
-  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let reconciler = TestFiberRenderer(
+    .root,
+    size: .init(width: 500, height: 500),
+    shouldLayout: false
+  ).render(view)
   let button = reconciler.current // RootView
     .child? // ModifiedContent
     .child? // _ViewModifier_Content
@@ -180,7 +188,11 @@ benchmark("update deep (StackReconciler)") { state in
 
 benchmark("update deep (FiberReconciler)") { state in
   let view = UpdateDeep()
-  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let reconciler = TestFiberRenderer(
+    .root,
+    size: .init(width: 500, height: 500),
+    shouldLayout: false
+  ).render(view)
   let button = reconciler.current // RootView
     .child? // ModifiedContent
     .child? // _ViewModifier_Content
@@ -243,7 +255,11 @@ benchmark("update shallow (StackReconciler)") { _ in
 
 benchmark("update shallow (FiberReconciler)") { _ in
   let view = UpdateShallow()
-  let reconciler = TestFiberRenderer(.root, size: .init(width: 500, height: 500)).render(view)
+  let reconciler = TestFiberRenderer(
+    .root,
+    size: .init(width: 500, height: 500),
+    shouldLayout: false
+  ).render(view)
   let button = reconciler.current // RootView
     .child? // ModifiedContent
     .child? // _ViewModifier_Content
diff --git a/Sources/TokamakTestRenderer/TestFiberRenderer.swift b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
index d0b19aa6f..017425ef8 100644
--- a/Sources/TokamakTestRenderer/TestFiberRenderer.swift
+++ b/Sources/TokamakTestRenderer/TestFiberRenderer.swift
@@ -58,6 +58,18 @@ extension _PrimitiveButtonStyleBody: TestFiberPrimitive {
   }
 }
 
+extension _FrameLayout: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    ["width": width as Any, "height": height as Any]
+  }
+}
+
+extension ModifiedContent: TestFiberPrimitive where Modifier: TestFiberPrimitive {
+  public var attributes: [String: Any] {
+    modifier.attributes
+  }
+}
+
 public final class TestFiberElement: FiberElement, CustomStringConvertible {
   public struct Content: FiberElementContent, Equatable {
     let renderedValue: String

From 90e1c5d947ad56272f1935d89faeb2f19ab87b40 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sat, 28 May 2022 18:32:11 -0400
Subject: [PATCH 52/64] Restore original demo

---
 Sources/TokamakDemo/main.swift | 84 ++++++++--------------------------
 1 file changed, 18 insertions(+), 66 deletions(-)

diff --git a/Sources/TokamakDemo/main.swift b/Sources/TokamakDemo/main.swift
index 54be8b20b..c29cbe20e 100644
--- a/Sources/TokamakDemo/main.swift
+++ b/Sources/TokamakDemo/main.swift
@@ -14,75 +14,27 @@
 
 import TokamakShim
 
-struct TestModifier: ViewModifier {
-  func body(content: Content) -> some View {
-    content
-      .foregroundStyle(.secondary)
-  }
-}
-
-struct TestView: View {
-  @State private var count = 0
-  var body: some View {
-    VStack {
-      Count(count: count)
-      Actions(count: $count)
-    }
-  }
-
-  struct Count: View {
-    let count: Int
-
-    var body: some View {
-      Text("Count: \(count)")
+@available(OSX 10.16, iOS 14.0, *)
+struct CustomScene: Scene {
+  @Environment(\.scenePhase) private var scenePhase
+
+  var body: some Scene {
+    print("In CustomScene.body scenePhase is \(scenePhase)")
+    return WindowGroup("Tokamak Demo") {
+      TokamakDemoView()
     }
   }
+}
 
-  struct Actions: View {
-    @Binding var count: Int
-
-    var body: some View {
-      HStack {
-        if count > 0 {
-          Button("Decrement") {
-            self.count -= 1
-          }
-          .modifier(TestModifier())
-        }
-        Button("Increment") {
-          self.count += 1
-        }
-        .modifier(TestModifier())
-      }
-    }
+@available(OSX 10.16, iOS 14.0, *)
+struct TokamakDemoApp: App {
+  var body: some Scene {
+    CustomScene()
   }
 }
 
-#if os(WASI)
-let reconciler = DOMFiberRenderer("body", shouldLayout: true).render(TestView())
-#endif
-
-// @available(OSX 10.16, iOS 14.0, *)
-// struct CustomScene: Scene {
-//   @Environment(\.scenePhase) private var scenePhase
-
-//   var body: some Scene {
-//     print("In CustomScene.body scenePhase is \(scenePhase)")
-//     return WindowGroup("Tokamak Demo") {
-//       TokamakDemoView()
-//     }
-//   }
-// }
-
-// @available(OSX 10.16, iOS 14.0, *)
-// struct TokamakDemoApp: App {
-//   var body: some Scene {
-//     CustomScene()
-//   }
-// }
-
-// // If @main was supported for executable Swift Packages,
-// // this would match SwiftUI 100%
-// if #available(OSX 10.16, iOS 14.0, *) {
-//   TokamakDemoApp.main()
-// }
+// If @main was supported for executable Swift Packages,
+// this would match SwiftUI 100%
+if #available(OSX 10.16, iOS 14.0, *) {
+  TokamakDemoApp.main()
+}

From 0cf20a0f65c054ff8bc7bb17380a193d15c9b6d3 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Sun, 29 May 2022 17:18:47 -0400
Subject: [PATCH 53/64] Address review comments

---
 Brewfile.lock.json                            | 125 ------------------
 .../Environment/EnvironmentKey.swift          |   5 +
 Sources/TokamakCore/Fiber/AlignmentID.swift   |   2 +-
 .../Fiber/FiberReconciler+TreeReducer.swift   |   2 +-
 .../Fiber/Layout/StackLayoutComputer.swift    |  14 +-
 .../Fiber/Layout/TextLayoutComputer.swift     |   2 +-
 Sources/TokamakCore/Fiber/ViewGeometry.swift  |   2 +-
 Sources/TokamakCore/Views/Text/Text.swift     |   2 +-
 .../TokamakStaticHTML/Views/Text/Text.swift   |  17 +--
 9 files changed, 30 insertions(+), 141 deletions(-)
 delete mode 100644 Brewfile.lock.json

diff --git a/Brewfile.lock.json b/Brewfile.lock.json
deleted file mode 100644
index 57d59e0ab..000000000
--- a/Brewfile.lock.json
+++ /dev/null
@@ -1,125 +0,0 @@
-{
-  "entries": {
-    "brew": {
-      "pre-commit": {
-        "version": "2.19.0",
-        "bottle": {
-          "rebuild": 0,
-          "root_url": "https://ghcr.io/v2/homebrew/core",
-          "files": {
-            "arm64_monterey": {
-              "cellar": ":any",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:35830ae8dc83700b547c078a43e0cae5b99c69d820e6a70b7dd43872105cc075",
-              "sha256": "35830ae8dc83700b547c078a43e0cae5b99c69d820e6a70b7dd43872105cc075"
-            },
-            "arm64_big_sur": {
-              "cellar": ":any",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:ae925eb818c247559e36558216c63a5298653d65ecd528383340a0ee8b92c07e",
-              "sha256": "ae925eb818c247559e36558216c63a5298653d65ecd528383340a0ee8b92c07e"
-            },
-            "monterey": {
-              "cellar": ":any",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:fa8795f2fc5231708ac69b3447732d3342ac77084c75d4cd92636e4cb3306918",
-              "sha256": "fa8795f2fc5231708ac69b3447732d3342ac77084c75d4cd92636e4cb3306918"
-            },
-            "big_sur": {
-              "cellar": ":any",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:1eb31671ec49ce4703bdf821c46238a541ef5972f462174f4765dac8a2cf72c3",
-              "sha256": "1eb31671ec49ce4703bdf821c46238a541ef5972f462174f4765dac8a2cf72c3"
-            },
-            "catalina": {
-              "cellar": ":any",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:4852270ec8f9249be28101899cfc2f5718b8b5ac79432089484af3e754a075cf",
-              "sha256": "4852270ec8f9249be28101899cfc2f5718b8b5ac79432089484af3e754a075cf"
-            },
-            "x86_64_linux": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/pre-commit/blobs/sha256:6376d63fa6a158bd89dcf23bf75c6b684c542ca933c4c47e434287f92649cd17",
-              "sha256": "6376d63fa6a158bd89dcf23bf75c6b684c542ca933c4c47e434287f92649cd17"
-            }
-          }
-        }
-      },
-      "swiftformat": {
-        "version": "0.49.9",
-        "bottle": {
-          "rebuild": 0,
-          "root_url": "https://ghcr.io/v2/homebrew/core",
-          "files": {
-            "arm64_monterey": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:bacd0dc8f488fd7909252467eaf16dcd339468857aea13a3643f7e0efd7715f8",
-              "sha256": "bacd0dc8f488fd7909252467eaf16dcd339468857aea13a3643f7e0efd7715f8"
-            },
-            "arm64_big_sur": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:7bc39a57d110f727993aa556cca5cba5549d536367bc12f25b56e25c4fdfa194",
-              "sha256": "7bc39a57d110f727993aa556cca5cba5549d536367bc12f25b56e25c4fdfa194"
-            },
-            "monterey": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:739d230372dd797d5cf5a0586156068ecb5965878550a67b5ca56ccdf2799557",
-              "sha256": "739d230372dd797d5cf5a0586156068ecb5965878550a67b5ca56ccdf2799557"
-            },
-            "big_sur": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:22080bdc75b03f5926d68fb248fc401d6a94876205ce03663a8950644b0e41e6",
-              "sha256": "22080bdc75b03f5926d68fb248fc401d6a94876205ce03663a8950644b0e41e6"
-            },
-            "catalina": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftformat/blobs/sha256:d4cda88cf3bef7b18e960197b8db4826f234e3b3434ba902c3924c37b9040fe8",
-              "sha256": "d4cda88cf3bef7b18e960197b8db4826f234e3b3434ba902c3924c37b9040fe8"
-            }
-          }
-        }
-      },
-      "swiftlint": {
-        "version": "0.47.1",
-        "bottle": {
-          "rebuild": 0,
-          "root_url": "https://ghcr.io/v2/homebrew/core",
-          "files": {
-            "arm64_monterey": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:13b6b6d881b6cfa3f5399c14150ef6da0f1d1cec2b58fd24c6dcbc432c462106",
-              "sha256": "13b6b6d881b6cfa3f5399c14150ef6da0f1d1cec2b58fd24c6dcbc432c462106"
-            },
-            "arm64_big_sur": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:406fb7b019a5b7f0c052a7d4738f6cda5eaf15ef9c1bc1f89bdc3dc2efc719b6",
-              "sha256": "406fb7b019a5b7f0c052a7d4738f6cda5eaf15ef9c1bc1f89bdc3dc2efc719b6"
-            },
-            "monterey": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:3c02d2875bef6dbd474c60a4ce42cce5f9e1da64580c00c351753adeaece5700",
-              "sha256": "3c02d2875bef6dbd474c60a4ce42cce5f9e1da64580c00c351753adeaece5700"
-            },
-            "big_sur": {
-              "cellar": ":any_skip_relocation",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:775d4db3c21549bb18384be86ee82a43c92af12b74f9135e7b44f448cd6e0eff",
-              "sha256": "775d4db3c21549bb18384be86ee82a43c92af12b74f9135e7b44f448cd6e0eff"
-            },
-            "x86_64_linux": {
-              "cellar": "/home/linuxbrew/.linuxbrew/Cellar",
-              "url": "https://ghcr.io/v2/homebrew/core/swiftlint/blobs/sha256:f00160b4eb1d370d6baf4341341f813af80ba2fcfa2e65657f96153713d1c774",
-              "sha256": "f00160b4eb1d370d6baf4341341f813af80ba2fcfa2e65657f96153713d1c774"
-            }
-          }
-        }
-      }
-    }
-  },
-  "system": {
-    "macos": {
-      "monterey": {
-        "HOMEBREW_VERSION": "3.4.11",
-        "HOMEBREW_PREFIX": "/opt/homebrew",
-        "Homebrew/homebrew-core": "85b199adfaa4014a5f4446df74ebee8293435eca",
-        "CLT": "13.4.0.0.1.1651278267",
-        "Xcode": "13.4",
-        "macOS": "12.3.1"
-      }
-    }
-  }
-}
diff --git a/Sources/TokamakCore/Environment/EnvironmentKey.swift b/Sources/TokamakCore/Environment/EnvironmentKey.swift
index 6b346a2af..8567336e5 100644
--- a/Sources/TokamakCore/Environment/EnvironmentKey.swift
+++ b/Sources/TokamakCore/Environment/EnvironmentKey.swift
@@ -17,6 +17,11 @@ public protocol EnvironmentKey {
   static var defaultValue: Value { get }
 }
 
+/// This protocol defines a type which mutates the environment in some way.
+/// Unlike `EnvironmentalModifier`, which reads the environment to
+/// create a `ViewModifier`.
+///
+/// It can be applied to a `View` or `ViewModifier`.
 public protocol _EnvironmentModifier {
   func modifyEnvironment(_ values: inout EnvironmentValues)
 }
diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 7849d75a4..0a349d7d1 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift b/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
index d7888cc8c..ed3d5da68 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler+TreeReducer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index 32150adf6..a90171506 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -22,9 +22,17 @@ final class StackLayoutComputer: LayoutComputer {
   let axis: Axis
   let alignment: Alignment
   let spacing: CGFloat
-  /// A multiplier of `1` for the axis that takes the size of the largest child.
+  /// Will contain a value of `1` for the axis that takes the size of the largest child.
+  /// For instance, a `VStack` will provide `1` for the width because
+  /// it takes the width of its largest child.
+  ///
+  /// Typically flipped from the width/height of `fitAxis`
   let maxAxis: CGSize
-  /// A multiplier of `1` for the axis that the children are aligned on.
+  /// Will contain a value of `1` for the axis that the children are aligned on.
+  /// For instance, a `VStack` will provide `1` for the height because
+  /// it fits to the combined height of its children.
+  ///
+  /// Typically flipped from the width/height of `maxAxis`
   let fitAxis: CGSize
 
   init(proposedSize: CGSize, axis: Axis, alignment: Alignment, spacing: CGFloat) {
diff --git a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
index bdc22ac64..7b925268d 100644
--- a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/ViewGeometry.swift b/Sources/TokamakCore/Fiber/ViewGeometry.swift
index 384f4d013..0718fdbcb 100644
--- a/Sources/TokamakCore/Fiber/ViewGeometry.swift
+++ b/Sources/TokamakCore/Fiber/ViewGeometry.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Views/Text/Text.swift b/Sources/TokamakCore/Views/Text/Text.swift
index 0faf5f7d8..0d2de1067 100644
--- a/Sources/TokamakCore/Views/Text/Text.swift
+++ b/Sources/TokamakCore/Views/Text/Text.swift
@@ -44,7 +44,7 @@ public struct Text: _PrimitiveView, Equatable {
 
   public enum _Storage: Equatable {
     case verbatim(String)
-    case segmentedText([(_Storage, [_Modifier])])
+    case segmentedText([(storage: _Storage, modifiers: [_Modifier])])
 
     public static func == (lhs: Text._Storage, rhs: Text._Storage) -> Bool {
       switch lhs {
diff --git a/Sources/TokamakStaticHTML/Views/Text/Text.swift b/Sources/TokamakStaticHTML/Views/Text/Text.swift
index b3e71d8bd..a74ef141e 100644
--- a/Sources/TokamakStaticHTML/Views/Text/Text.swift
+++ b/Sources/TokamakStaticHTML/Views/Text/Text.swift
@@ -133,17 +133,18 @@ extension Text: AnyHTML {
       innerHTML = proxy.environment.domTextSanitizer(text)
     case let .segmentedText(segments):
       innerHTML = segments
-        .map {
-          TextSpan(
-            content: proxy.environment.domTextSanitizer($0.0.rawText),
-            attributes: Self.attributes(
-              from: $0.1,
-              environment: proxy.environment
+        .reduce(into: "") {
+          $0.append(
+            TextSpan(
+              content: proxy.environment.domTextSanitizer($1.storage.rawText),
+              attributes: Self.attributes(
+                from: $1.modifiers,
+                environment: proxy.environment
+              )
             )
+            .outerHTML(shouldSortAttributes: shouldSortAttributes, children: [])
           )
-          .outerHTML(shouldSortAttributes: shouldSortAttributes, children: [])
         }
-        .reduce("", +)
     }
     return innerHTML.replacingOccurrences(of: "\n", with: "<br />")
   }

From 8a96570ba0fb14c7ca662639fb2399db8e2fac2c Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 10:29:51 -0400
Subject: [PATCH 54/64] Remove maxAxis and fitAxis properties

---
 .../Fiber/Layout/StackLayoutComputer.swift    | 54 ++++++++-----------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index a90171506..36ba1ad0e 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -22,32 +22,12 @@ final class StackLayoutComputer: LayoutComputer {
   let axis: Axis
   let alignment: Alignment
   let spacing: CGFloat
-  /// Will contain a value of `1` for the axis that takes the size of the largest child.
-  /// For instance, a `VStack` will provide `1` for the width because
-  /// it takes the width of its largest child.
-  ///
-  /// Typically flipped from the width/height of `fitAxis`
-  let maxAxis: CGSize
-  /// Will contain a value of `1` for the axis that the children are aligned on.
-  /// For instance, a `VStack` will provide `1` for the height because
-  /// it fits to the combined height of its children.
-  ///
-  /// Typically flipped from the width/height of `maxAxis`
-  let fitAxis: CGSize
 
   init(proposedSize: CGSize, axis: Axis, alignment: Alignment, spacing: CGFloat) {
     self.proposedSize = proposedSize
     self.axis = axis
     self.alignment = alignment
     self.spacing = spacing
-    switch axis {
-    case .horizontal:
-      maxAxis = .init(width: 0, height: 1)
-      fitAxis = .init(width: 1, height: 0)
-    case .vertical:
-      maxAxis = .init(width: 1, height: 0)
-      fitAxis = .init(width: 0, height: 1)
-    }
   }
 
   func proposeSize<V>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
@@ -60,8 +40,8 @@ final class StackLayoutComputer: LayoutComputer {
       )
     }
     let size = CGSize(
-      width: proposedSize.width - (used.width * fitAxis.width),
-      height: proposedSize.height - (used.height * fitAxis.height)
+      width: proposedSize.width - (axis == .horizontal ? used.width : 0),
+      height: proposedSize.height - (axis == .vertical ? used.height : 0)
     )
     return size
   }
@@ -86,15 +66,25 @@ final class StackLayoutComputer: LayoutComputer {
     let fitSpacing = CGFloat(child.index) * spacing
     let position = CGPoint(
       x: (
-        (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal]) * maxAxis
-          .width
+        axis == .vertical
+          ? (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal])
+          : 0
       )
-        + ((fitSize.width + fitSpacing) * fitAxis.width),
+        + (
+          axis == .horizontal
+            ? (fitSize.width + fitSpacing)
+            : 0
+        ),
       y: (
-        (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]) * maxAxis
-          .height
+        axis == .horizontal
+          ? (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical])
+          : 0
       )
-        + ((fitSize.height + fitSpacing) * fitAxis.height)
+        + (
+          axis == .vertical
+            ? (fitSize.height + fitSpacing)
+            : 0
+        )
     )
     return position
   }
@@ -115,10 +105,10 @@ final class StackLayoutComputer: LayoutComputer {
     let fitSpacing = CGFloat(context.children.count - 1) * spacing
 
     return .init(
-      width: (maxDimensions.width * maxAxis.width) +
-        ((fitDimensions.width + fitSpacing) * fitAxis.width),
-      height: (maxDimensions.height * maxAxis.height) +
-        ((fitDimensions.height + fitSpacing) * fitAxis.height)
+      width: (axis == .vertical ? maxDimensions.width : 0) +
+        (axis == .horizontal ? (fitDimensions.width + fitSpacing) : 0),
+      height: (axis == .horizontal ? maxDimensions.height : 0) +
+        (axis == .vertical ? (fitDimensions.height + fitSpacing) : 0)
     )
   }
 }

From ca7fb6b8565c94901366f75e0e73a24ee648d326 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 10:34:04 -0400
Subject: [PATCH 55/64] Use switch instead of ternary operators

---
 .../Fiber/Layout/StackLayoutComputer.swift    | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index 36ba1ad0e..ba1af51fe 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -39,11 +39,18 @@ final class StackLayoutComputer: LayoutComputer {
         height: $0.height + $1.dimensions.height
       )
     }
-    let size = CGSize(
-      width: proposedSize.width - (axis == .horizontal ? used.width : 0),
-      height: proposedSize.height - (axis == .vertical ? used.height : 0)
-    )
-    return size
+    switch axis {
+    case .horizontal:
+      return .init(
+        width: proposedSize.width - used.width,
+        height: proposedSize.height
+      )
+    case .vertical:
+      return .init(
+        width: proposedSize.width,
+        height: proposedSize.height - used.height
+      )
+    }
   }
 
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint {
@@ -64,29 +71,18 @@ final class StackLayoutComputer: LayoutComputer {
     let maxDimensions = ViewDimensions(size: maxSize, alignmentGuides: [:])
     /// The gaps up to this point.
     let fitSpacing = CGFloat(child.index) * spacing
-    let position = CGPoint(
-      x: (
-        axis == .vertical
-          ? (maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal])
-          : 0
+    switch axis {
+    case .horizontal:
+      return .init(
+        x: fitSize.width + fitSpacing,
+        y: maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical]
       )
-        + (
-          axis == .horizontal
-            ? (fitSize.width + fitSpacing)
-            : 0
-        ),
-      y: (
-        axis == .horizontal
-          ? (maxDimensions[alignment.vertical] - child.dimensions[alignment.vertical])
-          : 0
+    case .vertical:
+      return .init(
+        x: maxDimensions[alignment.horizontal] - child.dimensions[alignment.horizontal],
+        y: fitSize.height + fitSpacing
       )
-        + (
-          axis == .vertical
-            ? (fitSize.height + fitSpacing)
-            : 0
-        )
-    )
-    return position
+    }
   }
 
   func requestSize(in context: LayoutContext) -> CGSize {
@@ -104,12 +100,18 @@ final class StackLayoutComputer: LayoutComputer {
     /// The combined gap size.
     let fitSpacing = CGFloat(context.children.count - 1) * spacing
 
-    return .init(
-      width: (axis == .vertical ? maxDimensions.width : 0) +
-        (axis == .horizontal ? (fitDimensions.width + fitSpacing) : 0),
-      height: (axis == .horizontal ? maxDimensions.height : 0) +
-        (axis == .vertical ? (fitDimensions.height + fitSpacing) : 0)
-    )
+    switch axis {
+    case .horizontal:
+      return .init(
+        width: fitDimensions.width + fitSpacing,
+        height: maxDimensions.height
+      )
+    case .vertical:
+      return .init(
+        width: maxDimensions.width,
+        height: fitDimensions.height + fitSpacing
+      )
+    }
   }
 }
 

From e90f1a1843b3ebe00de7d4c9b2e1b08dbe6817fc Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 10:54:15 -0400
Subject: [PATCH 56/64] Add more documentation to layout steps

---
 .../TokamakCore/Fiber/FiberReconciler.swift   | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 2327b3c85..10741b307 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -86,7 +86,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       let layoutContexts: [ObjectIdentifier: LayoutContext]
 
       func visit<V>(_ view: V) where V: View {
-        // Ask the parent for a size.
+        // Ask the parent what space is available.
         let proposedSize = node.elementParent?.outputs.layoutComputer.proposeSize(
           for: view,
           at: node.elementIndex ?? 0,
@@ -165,7 +165,8 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
       var elementIndices = [ObjectIdentifier: Int]()
       /// The `LayoutContext` for each parent view.
       var layoutContexts = [ObjectIdentifier: LayoutContext]()
-      /// The children of an `elementParent` with `element`s in order.
+      /// The (potentially nested) children of an `elementParent` with `element` values in order.
+      /// Used to position children in the correct order.
       var elementChildren = [ObjectIdentifier: [Fiber]]()
 
       /// Compare `node` with its alternate, and add any mutations to the list.
@@ -197,12 +198,15 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         }
       }
 
+      /// Ask the `LayoutComputer` for the fiber's `elementParent` to propose a size.
       func proposeSize(for node: Fiber) {
         guard node.element != nil else { return }
 
+        // Use the visitor so we can pass the correct View type to the function.
         node.visitView(ProposeSizeVisitor(node: node, layoutContexts: layoutContexts))
       }
 
+      /// Request a size from the fiber's `elementParent`.
       func size(_ node: Fiber) {
         guard node.element != nil,
               let elementParent = node.elementParent
@@ -212,14 +216,15 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         let elementIndex = node.elementIndex ?? 0
         var parentContext = layoutContexts[key, default: .init(children: [])]
 
-        // Compute our size and position in our context.
+        // Using our LayoutComputer, compute our required size.
+        // This does not have to respect the elementParent's proposed size.
         let size = node.outputs.layoutComputer.requestSize(
           in: layoutContexts[ObjectIdentifier(node), default: .init(children: [])]
         )
         let dimensions = ViewDimensions(size: size, alignmentGuides: [:])
         let child = LayoutContext.Child(index: elementIndex, dimensions: dimensions)
 
-        // Add ourself to the parent context.
+        // Add ourself to the parent's LayoutContext.
         parentContext.children.append(child)
         layoutContexts[key] = parentContext
 
@@ -230,7 +235,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         )
       }
 
-      /// Request a size and position from the parent on the way back up.
+      /// Request a position from the parent on the way back up.
       func position(_ node: Fiber) {
         // FIXME: Add alignmentGuide modifier to override defaults and pass the correct guide data.
         guard let element = node.element,
@@ -241,10 +246,11 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
         let elementIndex = node.elementIndex ?? 0
         let context = layoutContexts[key, default: .init(children: [])]
 
+        // Find our child element in our parent's LayoutContext (as added by `size(_:)`).
         guard let child = context.children.first(where: { $0.index == elementIndex })
         else { return }
 
-        // Compute our position in the context.
+        // Ask our parent to position us in it's coordinate space (given our requested size).
         let position = elementParent.outputs.layoutComputer.position(child, in: context)
         let geometry = ViewGeometry(
           origin: .init(origin: position),
@@ -273,7 +279,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
           node.visitChildren(reducer)
           elementIndices = node.elementIndices
 
-          // Propose sizes on the way down.
+          // As we walk down the tree, propose a size for each View.
           if reconciler.renderer.shouldLayout,
              let fiber = node.fiber
           {
@@ -333,8 +339,14 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             if reconciler.renderer.shouldLayout,
                let fiber = node.fiber
             {
+              // The elementParent proposed a size for this fiber on the way down.
+              // At this point all of this fiber's children have requested sizes.
+              // On the way back up, we tell our elementParent what size we want,
+              // based on our own requirements and the sizes required by our children.
               size(fiber)
-              // Position the children in order.
+              // Loop through each (potentially nested) child fiber with an `element`,
+              // and position them in our coordinate space. This ensures children are
+              // positioned in order.
               if let elementChildren = elementChildren[ObjectIdentifier(fiber)] {
                 for elementChild in elementChildren {
                   position(elementChild)
@@ -347,13 +359,15 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             node = parent
           }
 
-          // We `size` and `position` when we reach the bottommost view that has a sibling.
-          // Otherwise, sizing takes place in the above loop.
+          // We also `size` and `position` when we reach the bottommost view that has a sibling.
+          // Sizing and positioning also happen when we have no sibling,
+          // as seen in the above loop.
           if reconciler.renderer.shouldLayout,
              let fiber = node.fiber
           {
+            // Request a size from our `elementParent`.
             size(fiber)
-            // Position the children in order.
+            // Position our children in order.
             if let elementChildren = elementChildren[ObjectIdentifier(fiber)] {
               for elementChild in elementChildren {
                 position(elementChild)

From a0b71d30d026477aeff310fc29a8d2143a228c98 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 14:39:08 -0400
Subject: [PATCH 57/64] Resolve reconciler issue due to alternate child not
 being cleared/released

---
 Sources/TokamakCore/Fiber/FiberReconciler.swift | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 10741b307..71902cdd1 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -314,7 +314,9 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             }
           }
           if reducer.result.child == nil {
-            node.fiber?.child = nil // Make sure we clear the child if there was none
+            // Make sure we clear the child if there was none
+            node.fiber?.child = nil
+            node.fiber?.alternate?.child = nil
           }
 
           // If we've made it back to the root, then exit.

From 8cd570ab0b42fc22e07b664a22bc25a06b0017de Mon Sep 17 00:00:00 2001
From: Carson Katri <Carson.katri@gmail.com>
Date: Mon, 30 May 2022 14:50:21 -0400
Subject: [PATCH 58/64] Apply suggestions from code review

Co-authored-by: Max Desiatov <max@desiatov.com>
---
 Sources/TokamakCore/Fiber/Fiber.swift         |  3 ++-
 .../TokamakCore/Fiber/FiberReconciler.swift   |  4 ++--
 .../Fiber/Layout/FlexLayoutComputer.swift     |  2 +-
 .../Fiber/Layout/FrameLayoutComputer.swift    |  2 +-
 .../Fiber/Layout/RootLayoutComputer.swift     |  2 +-
 .../Layout/ShrinkWrapLayoutComputer.swift     |  2 +-
 .../Fiber/Layout/TextLayoutComputer.swift     |  2 +-
 .../TokamakCore/Fiber/LayoutComputer.swift    |  2 ++
 Sources/TokamakCore/Fiber/ViewArguments.swift |  2 +-
 Sources/TokamakCore/Fiber/ViewGeometry.swift  | 23 +++++++++++++------
 Sources/TokamakDOM/DOMFiberRenderer.swift     |  6 +++--
 .../Modifiers/LayoutModifiers.swift           |  3 ++-
 .../Modifiers/ViewModifier.swift              |  3 ++-
 .../StaticHTMLFiberRenderer.swift             |  3 ++-
 14 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 9010caf3d..af304cfd1 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -17,7 +17,8 @@
 
 import Foundation
 
-@_spi(TokamakCore) public extension FiberReconciler {
+@_spi(TokamakCore) 
+public extension FiberReconciler {
   /// A manager for a single `View`.
   ///
   /// There are always 2 `Fiber`s for every `View` in the tree,
diff --git a/Sources/TokamakCore/Fiber/FiberReconciler.swift b/Sources/TokamakCore/Fiber/FiberReconciler.swift
index 71902cdd1..904b4c20c 100644
--- a/Sources/TokamakCore/Fiber/FiberReconciler.swift
+++ b/Sources/TokamakCore/Fiber/FiberReconciler.swift
@@ -341,7 +341,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             if reconciler.renderer.shouldLayout,
                let fiber = node.fiber
             {
-              // The elementParent proposed a size for this fiber on the way down.
+              // The `elementParent` proposed a size for this fiber on the way down.
               // At this point all of this fiber's children have requested sizes.
               // On the way back up, we tell our elementParent what size we want,
               // based on our own requirements and the sizes required by our children.
@@ -361,7 +361,7 @@ public final class FiberReconciler<Renderer: FiberRenderer> {
             node = parent
           }
 
-          // We also `size` and `position` when we reach the bottommost view that has a sibling.
+          // We also request `size` and `position` when we reach the bottom-most view that has a sibling.
           // Sizing and positioning also happen when we have no sibling,
           // as seen in the above loop.
           if reconciler.renderer.shouldLayout,
diff --git a/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
index c365c18e1..6dc01ebac 100644
--- a/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
index 5648f3e4c..5b74ce9c1 100644
--- a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
index 0da2fc878..8e212c585 100644
--- a/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
index 43d8a64ce..27e7bcd75 100644
--- a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
@@ -1,4 +1,4 @@
-// Copyright 2021 Tokamak contributors
+// Copyright 2022 Tokamak contributors
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
index 7b925268d..33ab9bc88 100644
--- a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
@@ -17,7 +17,7 @@
 
 import Foundation
 
-/// Measures the bounds of the `Text` with modifiers and wrapping inside the `proposedSize`.
+/// Measures the bounds of the `Text` with modifiers and wraps it inside the `proposedSize`.
 final class TextLayoutComputer: LayoutComputer {
   let text: Text
   let proposedSize: CGSize
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 3dc575b00..02d5b5bc3 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -44,8 +44,10 @@ protocol LayoutComputer: AnyObject {
   /// Will be called every time a child is evaluated.
   /// The calls will always be in order, and no more than one call will be made per child.
   func proposeSize<V: View>(for child: V, at index: Int, in context: LayoutContext) -> CGSize
+
   /// The child responds with their size and we place them relative to our origin.
   func position(_ child: LayoutContext.Child, in context: LayoutContext) -> CGPoint
+
   /// Request a size for ourself from our parent.
   func requestSize(in context: LayoutContext) -> CGSize
 }
diff --git a/Sources/TokamakCore/Fiber/ViewArguments.swift b/Sources/TokamakCore/Fiber/ViewArguments.swift
index b8fa6a4a6..82a696b68 100644
--- a/Sources/TokamakCore/Fiber/ViewArguments.swift
+++ b/Sources/TokamakCore/Fiber/ViewArguments.swift
@@ -49,7 +49,7 @@ extension ViewOutputs {
     preferences: _PreferenceStore? = nil,
     layoutComputer: ((CGSize) -> LayoutComputer)? = nil
   ) {
-    // Only replace the EnvironmentBox when we change the environment.
+    // Only replace the `EnvironmentBox` when we change the environment.
     // Otherwise the same box can be reused.
     self.environment = environment.map(EnvironmentBox.init) ?? inputs.environment
     self.preferences = preferences ?? .init()
diff --git a/Sources/TokamakCore/Fiber/ViewGeometry.swift b/Sources/TokamakCore/Fiber/ViewGeometry.swift
index 0718fdbcb..98290d888 100644
--- a/Sources/TokamakCore/Fiber/ViewGeometry.swift
+++ b/Sources/TokamakCore/Fiber/ViewGeometry.swift
@@ -18,21 +18,30 @@
 import Foundation
 
 public struct ViewGeometry: Equatable {
-  @_spi(TokamakCore) public let origin: ViewOrigin
-  @_spi(TokamakCore) public let dimensions: ViewDimensions
+  @_spi(TokamakCore) 
+  public let origin: ViewOrigin
+
+  @_spi(TokamakCore) 
+  public let dimensions: ViewDimensions
 }
 
 /// The position of the `View` relative to its parent.
 public struct ViewOrigin: Equatable {
-  @_spi(TokamakCore) public let origin: CGPoint
+  @_spi(TokamakCore) 
+  public let origin: CGPoint
 
-  @_spi(TokamakCore) public var x: CGFloat { origin.x }
-  @_spi(TokamakCore) public var y: CGFloat { origin.y }
+  @_spi(TokamakCore) 
+  public var x: CGFloat { origin.x }
+  @_spi(TokamakCore) 
+  public var y: CGFloat { origin.y }
 }
 
 public struct ViewDimensions: Equatable {
-  @_spi(TokamakCore) public let size: CGSize
-  @_spi(TokamakCore) public let alignmentGuides: [ObjectIdentifier: CGFloat]
+  @_spi(TokamakCore) 
+  public let size: CGSize
+
+  @_spi(TokamakCore) 
+  public let alignmentGuides: [ObjectIdentifier: CGFloat]
 
   public var width: CGFloat { size.width }
   public var height: CGFloat { size.height }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index 36ee50d3e..e9c81a41f 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -17,8 +17,10 @@
 
 import Foundation
 import JavaScriptKit
-@_spi(TokamakCore) import TokamakCore
-@_spi(TokamakStaticHTML) import TokamakStaticHTML
+@_spi(TokamakCore) 
+import TokamakCore
+@_spi(TokamakStaticHTML) 
+import TokamakStaticHTML
 
 public final class DOMElement: FiberElement {
   var reference: JSObject?
diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
index b90f41a7a..8c2f5d6d4 100644
--- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
@@ -73,7 +73,8 @@ extension _FrameLayout: DOMViewModifier {
   }
 }
 
-@_spi(TokamakStaticHTML) extension _FrameLayout: HTMLConvertible {
+@_spi(TokamakStaticHTML) 
+extension _FrameLayout: HTMLConvertible {
   public var tag: String { "div" }
   public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
     guard !shouldLayout else { return [
diff --git a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
index ed88b858a..6a7c135a5 100644
--- a/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/ViewModifier.swift
@@ -45,7 +45,8 @@ extension _ZIndexModifier: DOMViewModifier {
   }
 }
 
-@_spi(TokamakStaticHTML) extension ModifiedContent: HTMLConvertible where Content: View,
+@_spi(TokamakStaticHTML)
+extension ModifiedContent: HTMLConvertible where Content: View,
   Modifier: HTMLConvertible
 {
   public var tag: String { modifier.tag }
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index 25d795a2b..a4d39fc92 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -16,7 +16,8 @@
 //
 
 import Foundation
-@_spi(TokamakCore) import TokamakCore
+@_spi(TokamakCore) 
+import TokamakCore
 
 public final class HTMLElement: FiberElement, CustomStringConvertible {
   public struct Content: FiberElementContent, Equatable {

From c0567d42abab47c881a7097abd2b36d55f3af0d8 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:06:43 -0400
Subject: [PATCH 59/64] Reuse Text resolution code.

---
 .../TokamakStaticHTML/Views/Text/Text.swift   | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/Sources/TokamakStaticHTML/Views/Text/Text.swift b/Sources/TokamakStaticHTML/Views/Text/Text.swift
index a74ef141e..c496b980b 100644
--- a/Sources/TokamakStaticHTML/Views/Text/Text.swift
+++ b/Sources/TokamakStaticHTML/Views/Text/Text.swift
@@ -161,26 +161,7 @@ extension Text: AnyHTML {
 
 @_spi(TokamakStaticHTML) extension Text: HTMLConvertible {
   @_spi(TokamakStaticHTML) public var innerHTML: String? {
-    let proxy = _TextProxy(self)
-    let innerHTML: String
-    switch proxy.storage {
-    case let .verbatim(text):
-      innerHTML = proxy.environment.domTextSanitizer(text)
-    case let .segmentedText(segments):
-      innerHTML = segments
-        .map {
-          TextSpan(
-            content: proxy.environment.domTextSanitizer($0.0.rawText),
-            attributes: Self.attributes(
-              from: $0.1,
-              environment: proxy.environment
-            )
-          )
-          .outerHTML(shouldSortAttributes: false, children: [])
-        }
-        .reduce("", +)
-    }
-    return innerHTML.replacingOccurrences(of: "\n", with: "<br />")
+    innerHTML(shouldSortAttributes: false)
   }
 
   public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {

From e9671c38ee6c58dcdfaefb962c903030a6cf558c Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:21:12 -0400
Subject: [PATCH 60/64] Add more documentation

---
 Sources/TokamakCore/Fiber/AlignmentID.swift   | 20 +++++++++++++++++++
 Sources/TokamakCore/Fiber/Fiber.swift         |  2 +-
 .../Layout/ShrinkWrapLayoutComputer.swift     |  2 +-
 .../Fiber/Layout/StackLayoutComputer.swift    |  6 ++++++
 Sources/TokamakCore/Fiber/ViewGeometry.swift  | 14 ++++++-------
 Sources/TokamakDOM/DOMFiberRenderer.swift     |  4 ++--
 .../Modifiers/LayoutModifiers.swift           |  2 +-
 .../StaticHTMLFiberRenderer.swift             |  2 +-
 8 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 0a349d7d1..89848b8dd 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -17,7 +17,27 @@
 
 import Foundation
 
+/// Used identify an alignment guide.
+///
+/// Typically, you would define an alignment guide inside
+/// an extension on `HorizontalAlignment` or `VerticalAlignment`:
+///
+///     extension HorizontalAlignment {
+///       private enum MyAlignmentGuide: AlignmentID {
+///         static func defaultValue(in context: ViewDimensions) -> CGFloat {
+///           return 10.0
+///         }
+///       }
+///       public static let myAlignmentGuide = Self(MyAlignmentGuide.self)
+///     }
+///
+/// Which you can then use with the `alignmentGuide` modifier:
+///
+///     Text("Hello, world!")
+///       .alignmentGuide(.myAlignmentGuide) { $0[.trailing] - 3 }
 public protocol AlignmentID {
+  /// The default value for this alignment guide
+  /// when not set via the `alignmentGuide` modifier.
   static func defaultValue(in context: ViewDimensions) -> CGFloat
 }
 
diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index af304cfd1..3ecd5ee41 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -17,7 +17,7 @@
 
 import Foundation
 
-@_spi(TokamakCore) 
+@_spi(TokamakCore)
 public extension FiberReconciler {
   /// A manager for a single `View`.
   ///
diff --git a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
index 27e7bcd75..673e55a80 100644
--- a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
@@ -17,7 +17,7 @@
 
 import Foundation
 
-/// A `LayoutComputer` that takes the size of its children.
+/// A `LayoutComputer` that shrinks to the size of its children.
 final class ShrinkWrapLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
 
diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index ba1af51fe..93ca158a9 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -17,6 +17,12 @@
 
 import Foundation
 
+/// A `LayoutComputer` that aligns `Views` along a specified `Axis`
+/// with a given spacing and alignment.
+///
+/// The specified main `Axis` will fit to the combined width/height (depending on the axis)
+/// of the children.
+/// The cross axis will fit to the child with the largest height/width.
 final class StackLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
   let axis: Axis
diff --git a/Sources/TokamakCore/Fiber/ViewGeometry.swift b/Sources/TokamakCore/Fiber/ViewGeometry.swift
index 98290d888..0a0adf8bb 100644
--- a/Sources/TokamakCore/Fiber/ViewGeometry.swift
+++ b/Sources/TokamakCore/Fiber/ViewGeometry.swift
@@ -18,29 +18,29 @@
 import Foundation
 
 public struct ViewGeometry: Equatable {
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public let origin: ViewOrigin
 
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public let dimensions: ViewDimensions
 }
 
 /// The position of the `View` relative to its parent.
 public struct ViewOrigin: Equatable {
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public let origin: CGPoint
 
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public var x: CGFloat { origin.x }
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public var y: CGFloat { origin.y }
 }
 
 public struct ViewDimensions: Equatable {
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public let size: CGSize
 
-  @_spi(TokamakCore) 
+  @_spi(TokamakCore)
   public let alignmentGuides: [ObjectIdentifier: CGFloat]
 
   public var width: CGFloat { size.width }
diff --git a/Sources/TokamakDOM/DOMFiberRenderer.swift b/Sources/TokamakDOM/DOMFiberRenderer.swift
index e9c81a41f..e74e7e514 100644
--- a/Sources/TokamakDOM/DOMFiberRenderer.swift
+++ b/Sources/TokamakDOM/DOMFiberRenderer.swift
@@ -17,9 +17,9 @@
 
 import Foundation
 import JavaScriptKit
-@_spi(TokamakCore) 
+@_spi(TokamakCore)
 import TokamakCore
-@_spi(TokamakStaticHTML) 
+@_spi(TokamakStaticHTML)
 import TokamakStaticHTML
 
 public final class DOMElement: FiberElement {
diff --git a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
index 8c2f5d6d4..f472f4235 100644
--- a/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
+++ b/Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift
@@ -73,7 +73,7 @@ extension _FrameLayout: DOMViewModifier {
   }
 }
 
-@_spi(TokamakStaticHTML) 
+@_spi(TokamakStaticHTML)
 extension _FrameLayout: HTMLConvertible {
   public var tag: String { "div" }
   public func attributes(shouldLayout: Bool) -> [HTMLAttribute: String] {
diff --git a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
index a4d39fc92..b8d389107 100644
--- a/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
+++ b/Sources/TokamakStaticHTML/StaticHTMLFiberRenderer.swift
@@ -16,7 +16,7 @@
 //
 
 import Foundation
-@_spi(TokamakCore) 
+@_spi(TokamakCore)
 import TokamakCore
 
 public final class HTMLElement: FiberElement, CustomStringConvertible {

From 3c9248332639099f1cf5090d07031b485f63ced6 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:22:34 -0400
Subject: [PATCH 61/64] Fix typo

---
 Sources/TokamakCore/Fiber/AlignmentID.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 89848b8dd..414856f91 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -17,7 +17,7 @@
 
 import Foundation
 
-/// Used identify an alignment guide.
+/// Used to identify an alignment guide.
 ///
 /// Typically, you would define an alignment guide inside
 /// an extension on `HorizontalAlignment` or `VerticalAlignment`:

From cfaf990b454c5bf401974eb6551325c5d0ea4b20 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:26:07 -0400
Subject: [PATCH 62/64] Use structs for LayoutComputers

---
 Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift       | 2 +-
 Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift      | 2 +-
 Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift       | 2 +-
 Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift | 2 +-
 Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift      | 2 +-
 Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift       | 2 +-
 Sources/TokamakCore/Fiber/LayoutComputer.swift                  | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
index 6dc01ebac..fb8b93244 100644
--- a/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/FlexLayoutComputer.swift
@@ -18,7 +18,7 @@
 import Foundation
 
 /// A `LayoutComputer` that fills its parent.
-final class FlexLayoutComputer: LayoutComputer {
+struct FlexLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
 
   init(proposedSize: CGSize) {
diff --git a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
index 5b74ce9c1..535dcbf79 100644
--- a/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/FrameLayoutComputer.swift
@@ -18,7 +18,7 @@
 import Foundation
 
 /// A `LayoutComputer` that uses a specified size in one or more axes.
-final class FrameLayoutComputer: LayoutComputer {
+struct FrameLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
   let width: CGFloat?
   let height: CGFloat?
diff --git a/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
index 8e212c585..7e6c21499 100644
--- a/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/RootLayoutComputer.swift
@@ -18,7 +18,7 @@
 import Foundation
 
 /// A `LayoutComputer` for the root element of a `FiberRenderer`.
-final class RootLayoutComputer: LayoutComputer {
+struct RootLayoutComputer: LayoutComputer {
   let sceneSize: CGSize
 
   init(sceneSize: CGSize) {
diff --git a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
index 673e55a80..7d312bf1c 100644
--- a/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/ShrinkWrapLayoutComputer.swift
@@ -18,7 +18,7 @@
 import Foundation
 
 /// A `LayoutComputer` that shrinks to the size of its children.
-final class ShrinkWrapLayoutComputer: LayoutComputer {
+struct ShrinkWrapLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
 
   init(proposedSize: CGSize) {
diff --git a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
index 93ca158a9..4d56ef738 100644
--- a/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/StackLayoutComputer.swift
@@ -23,7 +23,7 @@ import Foundation
 /// The specified main `Axis` will fit to the combined width/height (depending on the axis)
 /// of the children.
 /// The cross axis will fit to the child with the largest height/width.
-final class StackLayoutComputer: LayoutComputer {
+struct StackLayoutComputer: LayoutComputer {
   let proposedSize: CGSize
   let axis: Axis
   let alignment: Alignment
diff --git a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
index 33ab9bc88..2b3644a83 100644
--- a/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/Layout/TextLayoutComputer.swift
@@ -18,7 +18,7 @@
 import Foundation
 
 /// Measures the bounds of the `Text` with modifiers and wraps it inside the `proposedSize`.
-final class TextLayoutComputer: LayoutComputer {
+struct TextLayoutComputer: LayoutComputer {
   let text: Text
   let proposedSize: CGSize
   let environment: EnvironmentValues
diff --git a/Sources/TokamakCore/Fiber/LayoutComputer.swift b/Sources/TokamakCore/Fiber/LayoutComputer.swift
index 02d5b5bc3..d449d6a5a 100644
--- a/Sources/TokamakCore/Fiber/LayoutComputer.swift
+++ b/Sources/TokamakCore/Fiber/LayoutComputer.swift
@@ -40,7 +40,7 @@ struct LayoutContext {
 /// The same `LayoutComputer` instance will be used for any given view during a single layout pass.
 ///
 /// Sizes from `proposeSize` will be clamped, so it is safe to return negative numbers.
-protocol LayoutComputer: AnyObject {
+protocol LayoutComputer {
   /// Will be called every time a child is evaluated.
   /// The calls will always be in order, and no more than one call will be made per child.
   func proposeSize<V: View>(for child: V, at index: Int, in context: LayoutContext) -> CGSize

From cff213d9da4359f4a8d817946183bf03e528a421 Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:35:06 -0400
Subject: [PATCH 63/64] Update AlignmentID demo

---
 Sources/TokamakCore/Fiber/AlignmentID.swift | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/AlignmentID.swift b/Sources/TokamakCore/Fiber/AlignmentID.swift
index 414856f91..1f19467cd 100644
--- a/Sources/TokamakCore/Fiber/AlignmentID.swift
+++ b/Sources/TokamakCore/Fiber/AlignmentID.swift
@@ -25,7 +25,7 @@ import Foundation
 ///     extension HorizontalAlignment {
 ///       private enum MyAlignmentGuide: AlignmentID {
 ///         static func defaultValue(in context: ViewDimensions) -> CGFloat {
-///           return 10.0
+///           return 0.0
 ///         }
 ///       }
 ///       public static let myAlignmentGuide = Self(MyAlignmentGuide.self)
@@ -33,8 +33,15 @@ import Foundation
 ///
 /// Which you can then use with the `alignmentGuide` modifier:
 ///
-///     Text("Hello, world!")
-///       .alignmentGuide(.myAlignmentGuide) { $0[.trailing] - 3 }
+///     VStack(alignment: .myAlignmentGuide) {
+///       Text("Align Leading")
+///         .border(.red)
+///         .alignmentGuide(.myAlignmentGuide) { $0[.leading] }
+///       Text("Align Trailing")
+///         .border(.blue)
+///         .alignmentGuide(.myAlignmentGuide) { $0[.trailing] }
+///     }
+///     .border(.green)
 public protocol AlignmentID {
   /// The default value for this alignment guide
   /// when not set via the `alignmentGuide` modifier.

From cdb5df22b034b817f6a3708e764bbbc8de23e47c Mon Sep 17 00:00:00 2001
From: Carson Katri <carson.katri@gmail.com>
Date: Mon, 30 May 2022 15:40:08 -0400
Subject: [PATCH 64/64] Fix weird formatting

---
 Sources/TokamakCore/Fiber/Fiber.swift | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Sources/TokamakCore/Fiber/Fiber.swift b/Sources/TokamakCore/Fiber/Fiber.swift
index 3ecd5ee41..2212ccc01 100644
--- a/Sources/TokamakCore/Fiber/Fiber.swift
+++ b/Sources/TokamakCore/Fiber/Fiber.swift
@@ -144,12 +144,12 @@ public extension FiberReconciler {
       if let element = element {
         self.element = element
       } else if Renderer.isPrimitive(view) {
-        self
-          .element =
-          .init(from: .init(from: view, shouldLayout: reconciler?.renderer.shouldLayout ?? false))
+        self.element = .init(
+          from: .init(from: view, shouldLayout: reconciler?.renderer.shouldLayout ?? false)
+        )
       }
 
-      // Only specify an elementIndex if we have an element.
+      // Only specify an `elementIndex` if we have an element.
       if self.element != nil {
         self.elementIndex = elementIndex
       }