add onChange lifecycle feature (#32)

* straightening out scheduling a bit

* reworked lifecycle stuff a bit

* fixed embedded issue

* formatting fix

* tests

Author: sliemeobn

Examples/Basic/Sources/App/Views.swift

@@ -25,6 +25,15 @@ struct App {
             .environment(#Key(\.myText), data.name)
             .environment(data)
         }
+        .onChange(of: bindingViewCount) { oldValue, newValue in
+            print("bindingViewCount changed to \(oldValue) -> \(newValue)")
+        }
+        .onChange(of: bindingViewCount) {
+            if bindingViewCount > 5 {
+                data.name = "Binding View Count > 5"
+            }
+        }
+
         hr()
         div {
             for _ in 0..<bindingViewCount {

Sources/ElementaryDOM/Data/Lifecycle/View+LifecycleEvents.swift

@@ -2,50 +2,88 @@ import Elementary
 import _Concurrency
 
 public extension View {
-    // TODO: make rename this to onAppear and onDisappear and reserve mounting lingo for DOM nodes?
-    func onMount(_ action: @escaping () -> Void) -> _LifecycleEventView<Self> {
+    func onMount(_ action: @escaping () -> Void) -> some View<Tag> {
         _LifecycleEventView(wrapped: self, listener: .onMount(action))
     }
 
-    func onUnmount(_ action: @escaping () -> Void) -> _LifecycleEventView<Self> {
+    func onUnmount(_ action: @escaping () -> Void) -> some View<Tag> {
         _LifecycleEventView(wrapped: self, listener: .onUnmount(action))
     }
 
-    func task(_ task: @escaping () async -> Void) -> _LifecycleEventView<Self> {
+    func task(_ task: @escaping () async -> Void) -> some View<Tag> {
         _LifecycleEventView(
             wrapped: self,
             listener: .onMountReturningCancelFunction({ Task { await task() }.cancel })
         )
     }
 }
 
-public struct _LifecycleEventView<Wrapped: View>: View {
-    public typealias Tag = Wrapped.Tag
-    public typealias _MountedNode = _LifecycleNode
+enum LifecycleHook {
+    case onMount(() -> Void)
+    case onUnmount(() -> Void)
+    case onMountReturningCancelFunction(() -> () -> Void)
+}
+
+struct _LifecycleEventView<Wrapped: View>: View {
+    typealias Tag = Wrapped.Tag
+    typealias _MountedNode = _StatefulNode<LifecycleState, Wrapped._MountedNode>
 
     let wrapped: Wrapped
     let listener: LifecycleHook
 
-    public static func _makeNode(
+    final class LifecycleState: Unmountable {
+        var onUnmount: (() -> Void)?
+        let scheduler: Scheduler
+
+        init(hook: LifecycleHook, scheduler: Scheduler) {
+            self.scheduler = scheduler
+
+            switch hook {
+            case .onMount(let onMount):
+                scheduler.onNextTick { onMount() }
+            case .onUnmount(let callback):
+                self.onUnmount = callback
+            case .onMountReturningCancelFunction(let onMountReturningCancelFunction):
+                scheduler.onNextTick {
+                    let cancelFunc = onMountReturningCancelFunction()
+                    self.onUnmount = cancelFunc
+                }
+            }
+        }
+
+        func unmount(_ context: inout _CommitContext) {
+            scheduler.onNextTick {
+                self.onUnmount?()
+                self.onUnmount = nil
+            }
+        }
+    }
+
+    static func _makeNode(
         _ view: consuming Self,
         context: borrowing _ViewContext,
         reconciler: inout _RenderContext
     ) -> _MountedNode {
-        .init(
-            value: view.listener,
-            child: Wrapped._makeNode(view.wrapped, context: context, reconciler: &reconciler),
-            context: &reconciler
-        )
+        let state = LifecycleState(hook: view.listener, scheduler: reconciler.scheduler)
+        let child = Wrapped._makeNode(view.wrapped, context: context, reconciler: &reconciler)
+
+        let node = _StatefulNode(state: state, child: child)
+        return node
     }
 
-    public static func _patchNode(
+    static func _patchNode(
         _ view: consuming Self,
         node: _MountedNode,
         reconciler: inout _RenderContext
     ) {
-        //TODO: should we patch something? maybe update values?
-        node.patch(context: &reconciler) { n, r in
-            Wrapped._patchNode(view.wrapped, node: n, reconciler: &r)
+        switch view.listener {
+        case .onUnmount(let callback):
+            // unmount is the only lifecycle hook that can be patched
+            node.state.onUnmount = callback
+        default:
+            break
         }
+
+        Wrapped._patchNode(view.wrapped, node: node.child, reconciler: &reconciler)
     }
 }

Sources/ElementaryDOM/Data/Lifecycle/View+OnChange.swift

@@ -0,0 +1,93 @@
+import Elementary
+
+public extension View {
+    /// Adds an action to perform when the given value changes.
+    ///
+    /// - Parameters:
+    ///   - value: The value to observe for changes.
+    ///   - initial: Whether the action should be run when the view initially appears.
+    ///   - action: The action to perform when a change is detected.
+    /// - Returns: A view that triggers the given action when the value changes.
+    func onChange<V: Equatable>(
+        of value: V,
+        initial: Bool = false,
+        _ action: @escaping () -> Void
+    ) -> some View<Tag> {
+        _OnChangeView(wrapped: self, value: value, initial: initial) { _, _ in action() }
+    }
+
+    /// Adds an action to perform when the given value changes, providing both the old and new values.
+    ///
+    /// - Parameters:
+    ///   - value: The value to observe for changes.
+    ///   - initial: Whether the action should be run when the view initially appears.
+    ///   - action: The action to perform when a change is detected, receiving the old and new values.
+    /// - Returns: A view that triggers the given action when the value changes.
+    nonisolated func onChange<V: Equatable>(
+        of value: V,
+        initial: Bool = false,
+        _ action: @escaping (V, V) -> Void
+    ) -> some View<Tag> {
+        _OnChangeView(wrapped: self, value: value, initial: initial, action: action)
+    }
+}
+
+struct _OnChangeView<Wrapped: View, Value: Equatable>: View {
+    typealias Tag = Wrapped.Tag
+    typealias _MountedNode = _StatefulNode<State, Wrapped._MountedNode>
+
+    struct State {
+        var value: Value
+        var action: (Value, Value) -> Void
+
+        init(value: Value, action: @escaping (Value, Value) -> Void) {
+            self.value = value
+            self.action = action
+        }
+    }
+
+    let wrapped: Wrapped
+    let value: Value
+    let initial: Bool
+    let action: (Value, Value) -> Void
+
+    static func _makeNode(
+        _ view: consuming Self,
+        context: borrowing _ViewContext,
+        reconciler: inout _RenderContext
+    ) -> _MountedNode {
+        let state = State(value: view.value, action: view.action)
+        let child = Wrapped._makeNode(view.wrapped, context: context, reconciler: &reconciler)
+
+        if view.initial {
+            let initialValue = view.value
+            let action = view.action
+            reconciler.scheduler.afterReconcile {
+                action(initialValue, initialValue)
+            }
+        }
+
+        return .init(state: state, child: child)
+    }
+
+    static func _patchNode(
+        _ view: consuming Self,
+        node: _MountedNode,
+        reconciler: inout _RenderContext
+    ) {
+        node.state.action = view.action
+
+        if node.state.value != view.value {
+            let oldValue = node.state.value
+            let newValue = view.value
+            node.state.value = newValue
+
+            let action = view.action
+            reconciler.scheduler.afterReconcile {
+                action(oldValue, newValue)
+            }
+        }
+
+        Wrapped._patchNode(view.wrapped, node: node.child, reconciler: &reconciler)
+    }
+}

Sources/ElementaryDOM/Data/Lifecycle/_LifecycleNode.swift

@@ -1,17 +1,23 @@
 public final class _StatefulNode<State, Child: _Reconcilable> {
     var state: State
     var child: Child
-    var onUnmount: ((inout _CommitContext) -> Void)?
+    private var onUnmount: ((inout _CommitContext) -> Void)?
 
     init(state: State, child: Child) {
         self.state = state
         self.child = child
     }
 
-    init(_ state: State, _ child: Child) where State: Unmountable {
+    private init(state: State, child: Child, onUnmount: ((inout _CommitContext) -> Void)? = nil) {
         self.state = state
         self.child = child
-        self.onUnmount = state.unmount(_:)
+        self.onUnmount = onUnmount
+    }
+
+    // generic initializers must be convenience on final classes for embedded wasm
+    // https://github.com/swiftlang/swift/issues/78150
+    convenience init(state: State, child: Child) where State: Unmountable {
+        self.init(state: state, child: child, onUnmount: state.unmount(_:))
     }
 }
 

Sources/ElementaryDOM/Data/Lifecycle/_StatefulNode.swift

@@ -63,7 +63,7 @@ extension _AttributeModifier {
             guard !isDirty else { return }
             logTrace("invalidating attribute modifier")
             isDirty = true
-            context.scheduler.addNodeAction(CommitAction(run: updateDOMNode(_:)))
+            context.scheduler.addCommitAction(CommitAction(run: updateDOMNode(_:)))
         }
 
         func updateDOMNode(_ context: inout _CommitContext) {

Sources/ElementaryDOM/HTMLViews/ElementModifiers/AttributeModifier.swift

@@ -28,7 +28,7 @@ final class BindingModifier<Configuration>: DOMElementModifier, Unmountable wher
         guard !isDirty else { return }
         isDirty = true
 
-        context.scheduler.addNodeAction(
+        context.scheduler.addCommitAction(
             CommitAction(run: updateDOMNode)
         )
     }

Sources/ElementaryDOM/HTMLViews/ElementModifiers/BindingModifiers.swift

@@ -25,7 +25,7 @@ final class MountedStyleModifier<Instance: CSSAnimatedValueInstance>: Unmountabl
     func invalidate(_ context: inout _RenderContext) {
         guard !isDirty else { return }
         isDirty = true
-        context.scheduler.addNodeAction(CommitAction(run: updateDOMNode(_:)))
+        context.scheduler.addCommitAction(CommitAction(run: updateDOMNode(_:)))
         scheduler = context.scheduler  // FIXME: this is a bit hacky
     }
 

Sources/ElementaryDOM/HTMLViews/StyleModifiers/MountedStyleModifier.swift

@@ -31,7 +31,7 @@ public final class _ElementNode: _Reconcilable {
         viewContext.parentElement = self
         let modifiers = viewContext.takeModifiers()
 
-        context.scheduler.addNodeAction(
+        context.scheduler.addCommitAction(
             CommitAction { [self] context in
                 precondition(self.domNode == nil, "element already has a DOM node")
                 let ref = context.dom.createElement(tag)

Sources/ElementaryDOM/HTMLViews/_ElementNode.swift

@@ -12,7 +12,7 @@ public final class _TextNode: _Reconcilable {
         self.parentElement?.reportChangedChildren(.elementAdded, context: &context)
 
         isDirty = true
-        context.scheduler.addNodeAction(
+        context.scheduler.addCommitAction(
             CommitAction { [self] context in
                 self.domNode = ManagedDOMReference(reference: context.dom.createText(newValue), status: .added)
                 self.isDirty = false
@@ -27,7 +27,7 @@ public final class _TextNode: _Reconcilable {
         guard needsUpdate else { return }
 
         isDirty = true
-        context.scheduler.addNodeAction(
+        context.scheduler.addCommitAction(
             CommitAction { [self] context in
                 assert(isDirty, "text node is not dirty")
                 assert(domNode != nil, "text node is not mounted")