Custom view comparing and environment dependency tracking (#22)

* add view comparison and environment access tracking

* fold environent dependencies into same run

* embedded fixes - still crashing... :(

* improved reactive object handling and fixed embedded build

* fix 6.1 build

* refined view equatability

* added view equating tests

Author: sliemeobn

.swift-version

@@ -1 +1 @@
-6.2-snapshot-2025-08-21
+6.2-snapshot-2025-08-30

Examples/Basic/Sources/App/Views.swift

@@ -1,7 +1,7 @@
 import ElementaryDOM
 
 extension EnvironmentValues {
-    @Entry var myText = ""
+    @Entry var myText: String = ""
 }
 
 @View
@@ -11,7 +11,7 @@ struct App {
     @State var data = SomeData()
 
     var content: some View {
-        TextField(value: #Binding(data.name))
+        TextField(value: Binding(get: { data.name }, set: { data.name = $0 }))
         div {
             p { "Via Binding: \(data.name)" }
             p { TestValueView() }
@@ -93,13 +93,15 @@ struct Counter {
 
 @View
 struct TextField {
-    @Binding var value: String
+    @Binding<String> var value: String
 
     var content: some View {
-        // TODO: make proper two-way binding for DOM elements
+        // // TODO: make proper two-way binding for DOM elements
         input(.type(.text))
             .onInput { event in
-                value = event.targetValue ?? ""
+                let text: String = event.targetValue ?? ""
+                print(event.targetValue ?? "No target value")
+                _value.wrappedValue = text
             }
     }
 }
@@ -121,13 +123,13 @@ struct TestValueView {
 
 @View
 struct TestObjectView {
-    //@Environment<SomeData>() var data
-    // @Environment<SomeData?>() var optionalData
+    @Environment(SomeData.self) var data: SomeData
+    @Environment(SomeData.self) var optionalData: SomeData?
 
     var content: some View {
-        //span { "Via environment object: \(data.name)" }
+        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 ?? "")" }
+        br()
+        //span { "Via optional environment object: \(optionalData?.name ?? "")" }
     }
 }

Examples/Basic/Sources/App/main.swift

@@ -1,5 +1,3 @@
 import ElementaryDOM
 
 App().mount(in: .body)
-
-//div {}.mount(in: .body)

Examples/Basic/build-full.sh

@@ -0,0 +1,9 @@
+OUTDIR=Public/lib/example
+
+set -ex
+rm -rf $OUTDIR
+
+swift package \
+  --swift-sdk "$(swiftc -print-target-info | jq -r '.swiftCompilerTag')_wasm" \
+  --allow-writing-to-package-directory \
+  js -c release --output $OUTDIR --use-cdn

README.md

@@ -28,15 +28,16 @@ For embedded builds, a recent main or 6.2 snapshot with matching *Swift SDKs for
 - ~~dependencies on versioned packages (i.e., build without unsafe flags)~~
 - ~~fix DOM not child-diffing to preserve animations/nodes (the current solution based on `replaceChildren` will not work, it seems)~~
 - "model-bindings" for inputs (i.e., bind a @Binding<String> to a text box, or bind a @Binding<Bool> to a checkbox)
-- view value comparing (Equatable and/or memcmp if possible)
-- different handling of environment (individual reactivity needed)
+- ~~view value comparing (generated comparing and custom equatable support)~~
+- ~~different handling of environment (individual reactivity needed)~~
 - transitions and animations (ideally CSS-based, probably svelte-like custom easing functions applied through WAAPI)
-- proper unit testing (once APIs firm up a bit more)
+- proper unit testing (once APIs firm up a bit more, partially started)
+- implement @ViewEquatableIgnored
 - split out JavaScriptKit stuff in separate module to contain spread, maybe one day we can switch to faster interop somehow
 - add basic docs, a good intro readme, and push a 0.1 out the door! (probably best to wait for Swift 6.2 to drop)
 - a router implementation (probably in extra module?)
 - maybe conditionally support @Observable for non-embedded builds?
-- figure out why `@Environment` with optional `ReactiveObject` does not build in embedded
+- ~~figure out why `@Environment` with optional `ReactiveObject` does not build in embedded~~
 - preference system (i.e., bubbling up values)
 - embedded-friendly Browser APIs (Storage, History, maybe in swiftwasm package with new JavaScriptKit macros)
 - ~~think about how to deal with the lack of `Codable` in embedded (wait for new serialization macros)~~

Sources/ElementaryDOM/Data/Environment/Environment+ReactiveObject.swift

@@ -1,38 +1,46 @@
-public extension ReactiveObject {
+internal extension ReactiveObject {
     static var environmentKey: EnvironmentValues._Key<Self> {
         EnvironmentValues._Key(_$typeID)
     }
+
+    static var _$typeID: PropertyID {
+        .init(ObjectIdentifier(self))
+    }
 }
 
 public extension Environment {
     init(_: V.Type = V.self) where V: ReactiveObject {
         self.init(ObjectStorageReader(V.self))
     }
 
-    // NOTE: in embedded for some reason this causes a compiler crash around the (actually unused) StoredValue<Optional<O>> type
-    // ¯\_(ツ)_/¯ - try again with a newer toolchain in the future
-    @_unavailableInEmbedded
+    // // NOTE: in embedded for some reason this causes a compiler crash around the (actually unused) StoredValue<Optional<O>> type
+    // // ¯\_(ツ)_/¯ - try again with a newer toolchain in the future
+    // @_unavailableInEmbedded
     init<O: ReactiveObject>(_: O.Type = O.self) where V == O? {
         self.init(ObjectStorageReader(V.self))
     }
 }
 
 struct ObjectStorageReader<Value> {
-    let read: (borrowing [PropertyID: StoredValue]) -> Value
+    let propertyID: PropertyID
+    let read: (borrowing AnyObject?) -> Value
 
     init(_: Value.Type) where Value: ReactiveObject {
-        let propertyID = Value.environmentKey.propertyID
-        read = {
-            if let value = $0[propertyID] {
-                return value[as: Value.self]
+        propertyID = Value._$typeID
+        read = { box in
+            if let box = box {
+                return (box as! EnvironmentValues._Box<Value>).value
             } else {
-                fatalError("No value for \(propertyID.description) in environment")
+                fatalError("No value for \(Value._$typeID) in environment")
             }
         }
     }
 
     init<O: ReactiveObject>(_: Value.Type) where Value == O? {
-        let propertyID = O.environmentKey.propertyID
-        read = { $0[propertyID]?[as: O.self] }
+        propertyID = O._$typeID
+        read = { box in
+            guard let box else { return nil }
+            return (box as! EnvironmentValues._Box<O>).value
+        }
     }
 }

Sources/ElementaryDOM/Data/Environment/Environment.swift

@@ -2,8 +2,9 @@
 public struct Environment<V> {
     enum Storage {
         case value(V)
+        case valueBox(EnvironmentValues._Box<V>)
         case valueKey(EnvironmentValues._Key<V>)
-        case objectReader(ObjectStorageReader<V>)
+        case objectReader(ObjectStorageReader<V>, AnyObject?)
     }
 
     var storage: Storage
@@ -13,17 +14,19 @@ public struct Environment<V> {
     }
 
     init(_ objectReader: ObjectStorageReader<V>) {
-        storage = .objectReader(objectReader)
+        storage = .objectReader(objectReader, nil)
     }
 
     public var wrappedValue: V {
         switch storage {
         case let .value(value):
             value
+        case let .valueBox(box):
+            box.value
         case let .valueKey(accessor):
             accessor.defaultValue
-        case let .objectReader(reader):
-            reader.read([:])
+        case let .objectReader(reader, box):
+            reader.read(box)
         }
     }
 
@@ -34,24 +37,68 @@ public struct Environment<V> {
     mutating func __load(from values: borrowing EnvironmentValues) {
         switch storage {
         case let .valueKey(key):
-            storage = .value(values[key])
-        case let .objectReader(reader):
-            storage = .value(reader.read(values.values))
+            if let box = values.boxes[key.propertyID] {
+                storage = .valueBox(box as! EnvironmentValues._Box<V>)
+            } else {
+                storage = .value(key.defaultValue)
+            }
+        case let .objectReader(reader, _):
+            storage = .objectReader(reader, values.boxes[reader.propertyID])
+            #if hasFeature(Embedded)
+            // FIXME: embedded - create issue and check with main
+            if __omg_this_was_annoying_I_am_false {
+                // NOTE: this is only to force inclusion of the the box type for V
+                storage = .valueBox(EnvironmentValues._Box<V>(reader.read(values.boxes[reader.propertyID])))
+            }
+            #endif
         default:
             fatalError("Cannot load environment value twice")
         }
     }
 }
 
-public struct EnvironmentValues: _ValueStorage {
-    var values: [PropertyID: StoredValue] = [:]
+public struct EnvironmentValues {
+    public typealias _Key<Value> = _StorageKey<Self, Value>
+
+    var boxes: [PropertyID: AnyObject] = [:]
 
     public subscript<Value>(key: _Key<Value>) -> Value {
         get {
-            values[key.propertyID]?[as: Value.self] ?? key.defaultValue
+            (boxes[key.propertyID] as? _Box<Value>)?.value ?? key.defaultValue
         }
         set {
-            values[key.propertyID] = StoredValue(newValue)
+            boxes[key.propertyID] = _Box<Value>(newValue)
+        }
+    }
+}
+
+extension EnvironmentValues {
+    public final class _Box<Value> {
+        let _value_id = PropertyID(0)
+        var _registrar = ReactivityRegistrar()
+
+        var _value: Value
+
+        var value: Value {
+            get {
+                _registrar.access(_value_id)
+                return _value
+            }
+            set {
+                _registrar.willSet(_value_id)
+                _value = newValue
+                _registrar.didSet(_value_id)
+            }
+            _modify {
+                _registrar.access(_value_id)
+                _registrar.willSet(_value_id)
+                defer { _registrar.didSet(_value_id) }
+                yield &_value
+            }
+        }
+
+        init(_ value: Value) {
+            self._value = value
         }
     }
 }

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

@@ -1,28 +1,51 @@
 public extension View {
     consuming func environment<V>(_ key: EnvironmentValues._Key<V>, _ value: V) -> _EnvironmentView<V, Self> {
-        _EnvironmentView(wrapped: self, key: key, value: value)
+        _EnvironmentView(wrapped: self, key: key, value: value, isEqual: nil)
+    }
+
+    consuming func environment<V>(_ key: EnvironmentValues._Key<V>, _ value: V) -> _EnvironmentView<V, Self>
+    where V: Equatable {
+        _EnvironmentView(wrapped: self, key: key, value: value, isEqual: ==)
+    }
+
+    consuming func environment(_ key: EnvironmentValues._Key<String>, _ value: String) -> _EnvironmentView<String, Self> {
+        _EnvironmentView(wrapped: self, key: key, value: value, isEqual: String.utf8Equals)
+    }
+
+    consuming func environment<V>(_ key: EnvironmentValues._Key<V>, _ value: V) -> _EnvironmentView<V, Self>
+    where V: Equatable & AnyObject {
+        _EnvironmentView(wrapped: self, key: key, value: value, isEqual: ===)
+    }
+
+    consuming func environment<V>(_ key: EnvironmentValues._Key<V>, _ value: V) -> _EnvironmentView<V, Self>
+    where V: AnyObject {
+        _EnvironmentView(wrapped: self, key: key, value: value, isEqual: ===)
     }
 
     consuming func environment<V: ReactiveObject>(_ object: V) -> _EnvironmentView<V, Self> {
-        _EnvironmentView(wrapped: self, key: V.environmentKey, value: object)
+        _EnvironmentView(wrapped: self, key: V.environmentKey, value: object, isEqual: ===)
     }
 }
 
 public struct _EnvironmentView<V, Wrapped: View>: View {
-    public typealias _MountedNode = Wrapped._MountedNode
-
+    public typealias _MountedNode = _StatefulNode<EnvironmentValues._Box<V>, Wrapped._MountedNode>
     public typealias Tag = Wrapped.Tag
+
     let wrapped: Wrapped
     let key: EnvironmentValues._Key<V>
     let value: V
+    let isEqual: ((V, V) -> Bool)?
 
     public static func _makeNode(
         _ view: consuming Self,
         context: consuming _ViewContext,
         reconciler: inout _RenderContext
     ) -> _MountedNode {
-        context.environment[view.key] = view.value
-        return Wrapped._makeNode(view.wrapped, context: context, reconciler: &reconciler)
+
+        let box = EnvironmentValues._Box<V>(view.value)
+        context.environment.boxes[view.key.propertyID] = box
+
+        return .init(state: box, child: Wrapped._makeNode(view.wrapped, context: context, reconciler: &reconciler))
     }
 
     public static func _patchNode(
@@ -31,7 +54,20 @@ public struct _EnvironmentView<V, Wrapped: View>: View {
         node: inout _MountedNode,
         reconciler: inout _RenderContext
     ) {
-        context.environment[view.key] = view.value
-        Wrapped._patchNode(view.wrapped, context: context, node: &node, reconciler: &reconciler)
+        // IMPORTANT: _value does not cause access tracking!
+        if view.isEqual?(node.state._value, view.value) ?? true {
+            node.state._value = view.value
+        } else {
+            // NOTE: a bit of a hack to allow dependent functions to run in the same reconciler run
+            reconciler.scheduler.withAmbientRenderContext(
+                &reconciler,
+                {
+                    node.state.value = view.value
+                }
+            )
+        }
+
+        context.environment.boxes[view.key.propertyID] = node.state
+        Wrapped._patchNode(view.wrapped, context: context, node: &node.child, reconciler: &reconciler)
     }
 }

Sources/ElementaryDOM/Data/State/Binding.swift

@@ -30,6 +30,13 @@ public struct Binding<V> {
             case let .stateAccessor(accessor):
                 accessor.value = newValue
             case let .getSet(_, set):
+                #if hasFeature(Embedded)
+                // FIXME: embedded - create issue and check with main
+                if __omg_this_was_annoying_I_am_false {
+                    _ = AnyValueBox.init(newValue)
+                }
+                #endif
+
                 set(newValue)
             }
         }

Sources/ElementaryDOM/Data/State/ViewStateStorage.swift

@@ -4,7 +4,7 @@ import Reactivity
 public final class _ViewStateStorage {
     // TODO: maybe we can store AnyObjects directly instread of double-boxing them
     @ReactiveIgnored
-    private var values: [StoredValue] = []
+    private var values: [AnyValueBox] = []
 
     public init() {}
 
@@ -14,12 +14,12 @@ public final class _ViewStateStorage {
 
     public func initializeValueStorage<V>(initialValue: V, index: Int) {
         precondition(index == values.count, "State storage must be initialized in order")
-        values.append(StoredValue(initialValue))
+        values.append(AnyValueBox(initialValue))
     }
 
     public func initializeValueStorage<V: AnyObject>(initialValue: V, index: Int) {
         precondition(index == values.count, "State storage must be initialized in order")
-        values.append(StoredValue(initialValue))
+        values.append(AnyValueBox(initialValue))
     }
 
     public subscript<V>(_ index: Int, as type: V.Type = V.self) -> V {