improved DOM attribute and event handler handling (#24)

* wip

* testing wasm crashers

* remove some deinit tracing

* more efficient event handlers

* removed view context from patch calls

* changed _ViewContext to borrowing

* better text patching

* element clean up

* todo grooming

* fixme grooming

* stack size for full swift debug

Author: sliemeobn

Examples/Basic/Sources/App/Views.swift

@@ -9,6 +9,7 @@ struct App {
     @State var counters: [Int] = [1]
     @State var nextCounterName = 1
     @State var data = SomeData()
+    @State var bindingViewCount = 1
 
     var content: some View {
         div {
@@ -23,7 +24,20 @@ struct App {
             .environment(data)
         }
         hr()
-        BindingsView()
+        div {
+            for _ in 0..<bindingViewCount {
+                BindingsView()
+            }
+            button { "Add bindings view" }
+                .onClick { _ in
+                    bindingViewCount += 1
+                }
+            button { "Remove bindings view" }
+                .onClick { _ in
+                    guard bindingViewCount > 0 else { return }
+                    bindingViewCount -= 1
+                }
+        }
         hr()
         // TODE: replaceChildren does not keep animations and similar going....
         // if counters.count > 1 {
@@ -126,8 +140,7 @@ struct TestObjectView {
 
     var content: some View {
         span { "Via environment object: \(data.name)" }
-        // TODO: figure out how to make optional environment object work in embedded
         br()
-        //span { "Via optional environment object: \(optionalData?.name ?? "")" }
+        span { "Via optional environment object: \(optionalData?.name ?? "")" }
     }
 }

Examples/Swiftle/Package.swift

@@ -15,6 +15,9 @@ let package = Package(
             dependencies: [
                 .product(name: "ElementaryDOM", package: "elementary-dom"),
                 .product(name: "ElementaryCSS", package: "elementary-css"),
+            ],
+            linkerSettings: [
+                .unsafeFlags(["-Xlinker", "-z", "-Xlinker", "stack-size=1048576"], .when(platforms: [.wasi], configuration: .debug))
             ]
         )
     ],

Examples/Swiftle/Sources/Swiftle/main.swift

@@ -7,4 +7,5 @@ struct App {
     }
 }
 
+print("Mounting app")
 App().mount(in: .body)

Examples/Swiftle/build-dev.sh

@@ -5,4 +5,4 @@ swift package \
   --swift-sdk "$(swiftc -print-target-info | jq -r '.swiftCompilerTag')_wasm" \
   --enable-experimental-prebuilts \
   --allow-writing-to-package-directory \
-  js -c debug --output $OUTDIR --use-cdn
+  js -c debug --output $OUTDIR --use-cdn --debug-info-format dwarf

Package.swift

@@ -10,7 +10,7 @@ let package = Package(
     ],
     dependencies: [
         .package(url: "https://github.com/swiftwasm/JavaScriptKit", from: "0.33.1"),
-        .package(url: "https://github.com/sliemeobn/elementary", from: "0.5.1"),
+        .package(url: "https://github.com/sliemeobn/elementary", from: "0.5.4"),
         .package(url: "https://github.com/swiftlang/swift-syntax", "600.0.0"..<"602.0.0-prerelease"),
     ],
     targets: [

Sources/ElementaryDOM/Data/Environment/View+Envionment.swift

@@ -38,10 +38,10 @@ public struct _EnvironmentView<V, Wrapped: View>: View {
 
     public static func _makeNode(
         _ view: consuming Self,
-        context: consuming _ViewContext,
+        context: borrowing _ViewContext,
         reconciler: inout _RenderContext
     ) -> _MountedNode {
-
+        var context = copy context
         let box = EnvironmentValues._Box<V>(view.value)
         context.environment.boxes[view.key.propertyID] = box
 
@@ -50,7 +50,6 @@ public struct _EnvironmentView<V, Wrapped: View>: View {
 
     public static func _patchNode(
         _ view: consuming Self,
-        context: consuming _ViewContext,
         node: inout _MountedNode,
         reconciler: inout _RenderContext
     ) {
@@ -67,7 +66,6 @@ public struct _EnvironmentView<V, Wrapped: View>: View {
             )
         }
 
-        context.environment.boxes[view.key.propertyID] = node.state
-        Wrapped._patchNode(view.wrapped, context: context, node: &node.child, reconciler: &reconciler)
+        Wrapped._patchNode(view.wrapped, node: &node.child, reconciler: &reconciler)
     }
 }

Sources/ElementaryDOM/ElementModifiers/AttributeModifier.swift

@@ -0,0 +1,82 @@
+import Elementary
+
+public final class _AttributeModifier: DOMElementModifier, Invalidateable {
+    typealias Value = _AttributeStorage
+
+    let upstream: _AttributeModifier?
+    var tracker: DependencyTracker = .init()
+
+    private var lastValue: Value
+
+    var value: Value {
+        var combined = lastValue
+        combined.append(upstream?.value ?? .none)
+        return combined
+    }
+
+    init(value: consuming Value, upstream: borrowing DOMElementModifiers, _ context: inout _RenderContext) {
+        self.lastValue = value
+        self.upstream = upstream[_AttributeModifier.key]
+        self.upstream?.tracker.addDependency(self)
+
+        #if hasFeature(Embedded)
+        if __omg_this_was_annoying_I_am_false {
+            // this is to force inclusion of types
+            _ = p {}.attributes(.class([""]), .style(["": ""]))
+        }
+        #endif
+    }
+
+    func updateValue(_ value: consuming Value, _ context: inout _RenderContext) {
+        if value != lastValue {
+            lastValue = value
+            tracker.invalidateAll(&context)
+        }
+    }
+
+    func mount(_ node: DOM.Node, _ context: inout _CommitContext) -> AnyUnmountable {
+        logTrace("mounting attribute modifier")
+        return AnyUnmountable(MountedInstance(node, self, &context))
+    }
+
+    func invalidate(_ context: inout _RenderContext) {
+        self.tracker.invalidateAll(&context)
+    }
+}
+
+extension _AttributeModifier {
+    final class MountedInstance: Unmountable, Invalidateable {
+        let modifier: _AttributeModifier
+        let node: DOM.Node
+
+        var isDirty: Bool = false
+        var previousValue: _AttributeStorage = .none
+
+        init(_ node: DOM.Node, _ modifier: _AttributeModifier, _ context: inout _CommitContext) {
+            self.node = node
+            self.modifier = modifier
+            self.modifier.tracker.addDependency(self)
+            updateDOMNode(&context)
+        }
+
+        func invalidate(_ context: inout _RenderContext) {
+            guard !isDirty else { return }
+            logTrace("invalidating attribute modifier")
+            isDirty = true
+            context.commitPlan.addNodeAction(CommitAction(run: updateDOMNode(_:)))
+        }
+
+        func updateDOMNode(_ context: inout _CommitContext) {
+            logTrace("updating attribute modifier")
+            let newValue = modifier.value
+            context.dom.patchElementAttributes(node, with: newValue, replacing: previousValue)
+            isDirty = false
+            previousValue = newValue
+        }
+
+        func unmount(_ context: inout _CommitContext) {
+            logTrace("unmounting attribute modifier")
+            self.modifier.tracker.removeDependency(self)
+        }
+    }
+}

Sources/ElementaryDOM/DOMElementModifiers.swift renamed to Sources/ElementaryDOM/ElementModifiers/BindingModifiers.swift

@@ -1,67 +1,3 @@
-protocol DOMElementModifier: AnyObject {
-    associatedtype Value
-
-    static var key: DOMElementModifiers.Key<Self> { get }
-
-    init(value: consuming Value, upstream: Self?, _ context: inout _RenderContext)
-    func updateValue(_ value: consuming Value, _ context: inout _RenderContext)
-
-    func mount(_ node: DOM.Node, _ context: inout _CommitContext) -> AnyUnmountable
-}
-
-extension DOMElementModifier {
-    static var key: DOMElementModifiers.Key<Self> {
-        DOMElementModifiers.Key(Self.self)
-    }
-}
-
-protocol Unmountable: AnyObject {
-    func unmount(_ context: inout _CommitContext)
-}
-
-struct DOMElementModifiers {
-    struct Key<Directive: DOMElementModifier> {
-        let typeID: ObjectIdentifier
-
-        init(_: Directive.Type) {
-            typeID = ObjectIdentifier(Directive.self)
-        }
-    }
-
-    private var storage: [ObjectIdentifier: any DOMElementModifier] = [:]
-
-    subscript<Directive: DOMElementModifier>(_ key: Key<Directive>) -> Directive? {
-        get {
-            storage[key.typeID] as? Directive
-        }
-        set {
-            if let newValue = newValue {
-                storage[key.typeID] = newValue
-            } else {
-                storage.removeValue(forKey: key.typeID)
-            }
-        }
-    }
-
-    consuming func takeModifiers() -> [any DOMElementModifier] {
-        let directives = Array(storage.values)
-        storage.removeAll()
-        return directives
-    }
-}
-
-struct AnyUnmountable {
-    private let _unmount: (inout _CommitContext) -> Void
-
-    init(_ unmountable: some Unmountable) {
-        self._unmount = unmountable.unmount(_:)
-    }
-
-    func unmount(_ context: inout _CommitContext) {
-        _unmount(&context)
-    }
-}
-
 final class BindingModifier<Configuration>: DOMElementModifier, Unmountable where Configuration: BindingConfiguration {
     typealias Value = Binding<Configuration.Value>
 
@@ -73,7 +9,7 @@ final class BindingModifier<Configuration>: DOMElementModifier, Unmountable wher
     var accessor: DOM.PropertyAccessor?
     var isDirty: Bool = false
 
-    init(value: consuming Value, upstream: BindingModifier?, _ context: inout _RenderContext) {
+    init(value: consuming Value, upstream: borrowing DOMElementModifiers, _ context: inout _RenderContext) {
         self.lastValue = value.wrappedValue
         self.binding = value
     }
@@ -88,6 +24,7 @@ final class BindingModifier<Configuration>: DOMElementModifier, Unmountable wher
     }
 
     private func markDirty(_ context: inout _RenderContext) {
+        precondition(mountedNode != nil, "Binding effect can only be marked dirty on a mounted element")
         guard !isDirty else { return }
         isDirty = true
 
@@ -138,7 +75,7 @@ final class BindingModifier<Configuration>: DOMElementModifier, Unmountable wher
 
     func unmount(_ context: inout _CommitContext) {
         guard let sink = self.sink, let node = self.mountedNode else {
-            assertionFailure("Binding effect can only be unmounted on a mounted element")
+            // NOTE: since this object is used for both state and mounted effect, it will be unmounted twice
             return
         }
 
@@ -231,17 +168,3 @@ struct CheckboxBindingConfiguration: BindingConfiguration {
         .boolean(value)
     }
 }
-
-struct DependencyList: ~Copyable {
-    private var downstreams: [() -> Void] = []
-
-    mutating func add(_ invalidate: @escaping () -> Void) {
-        downstreams.append(invalidate)
-    }
-
-    func invalidateAll() {
-        for downstream in downstreams {
-            downstream()
-        }
-    }
-}