Add observation example

Author: lkzhao

Examples/UIComponentExample/Examples/ObservableExample.swift

@@ -0,0 +1,51 @@
+//  Created by Luke Zhao on 10/29/25.
+
+import UIKit
+import UIComponent
+
+/// In iOS 26, UIViewController has built-in support for observing @Observable objects.
+/// Just override updateProperties() to update your component when any observed property changes.
+@available(iOS 26.0, *)
+class ObservableViewController: UIViewController {
+    @Observable
+    private class ViewModel {
+        var count: Int = 0
+    }
+
+    private let viewModel = ViewModel()
+
+    override func updateProperties() {
+        super.updateProperties()
+        let viewModel = viewModel
+        view.componentEngine.component = VStack(spacing: 8, justifyContent: .center, alignItems: .center) {
+            Text("Hello world!", font: .boldSystemFont(ofSize: 22))
+            Text("Count: \(viewModel.count)")
+            Text("Increase").tappableView {
+                viewModel.count += 1
+            }
+        }.fill()
+    }
+}
+
+/// Same can be done in UIView subclasses by overriding updateProperties().
+/// Here is an example UIView that uses @Observable to update its component.
+@available(iOS 26.0, *)
+class CountExampleView: ComponentView {
+    @Observable private class ViewModel {
+        var count: Int = 0
+    }
+
+    private let viewModel = ViewModel()
+
+    override func updateProperties() {
+        super.updateProperties()
+        let viewModel = viewModel
+        component = VStack(spacing: 8, justifyContent: .center, alignItems: .center) {
+            Text("Hello world!", font: .boldSystemFont(ofSize: 22))
+            Text("Count: \(viewModel.count)")
+            Text("Increase").tappableView {
+                viewModel.count += 1
+            }
+        }.fill()
+    }
+}

Examples/UIComponentExample/ViewController.swift

@@ -19,6 +19,9 @@ class ViewController: ComponentViewController {
                 ExampleItem(name: "Size Example", viewController: SizeExampleViewController())
                 ExampleItem(name: "SwiftUI Example", viewController: SwiftUIExampleViewController())
                 ExampleItem(name: "Theme System Example", viewController: ThemeSystemViewController())
+                if #available(iOS 26.0, *) {
+                    ExampleItem(name: "Observable Example", viewController: ObservableViewController())
+                }
             } separator: {
                 Separator()
             }

Sources/UIComponent/Documentation.docc/ObservableSupport.md

@@ -0,0 +1,89 @@
+# Observable Support in UIKit
+
+Built-in observation for `UIViewController` and `UIView` integrations.
+
+Starting in iOS 26, UIComponent plays nicely with the new Swift Observation system.
+``UIViewController`` and ``ComponentView`` automatically track any `@Observable`
+state you access inside ``UIViewController/updateProperties()`` or ``ComponentView/updateProperties()``
+and re-run those methods whenever the data changes. This lets you treat UIKit surfaces the
+same way you would a SwiftUI view: declare the UI from your latest model, and UIComponent
+takes care of the rest.
+
+## Observing inside ``UIViewController``
+
+Override ``UIViewController/updateProperties()`` and build your component tree from
+observed model data. When any observed property changes, UIComponent renders the
+new component automatically.
+
+```swift
+@available(iOS 26.0, *)
+final class ObservableViewController: UIViewController {
+    @Observable
+    private final class ViewModel {
+        var count: Int = 0
+    }
+
+    private let viewModel = ViewModel()
+
+    override func updateProperties() {
+        super.updateProperties()
+        let viewModel = viewModel
+
+        view.componentEngine.component = VStack(spacing: 8, justifyContent: .center, alignItems: .center) {
+            Text("Hello world!", font: .boldSystemFont(ofSize: 22))
+            Text("Count: \(viewModel.count)")
+            Text("Increase").tappableView {
+                viewModel.count += 1
+            }
+        }.fill()
+    }
+}
+```
+
+Key details:
+- Access every observed value inside `updateProperties()` so UIKit knows what to track.
+- Keep calling `super.updateProperties()` to preserve UIKit book-keeping.
+- Assign directly to ``ComponentEngine/component``; diffing and view reuse happen automatically.
+
+## Observing inside ``UIView``
+
+The same pattern works for any ``ComponentView`` (a ``UIView`` subclass tailored for
+UIComponent). Create an `@Observable` model, override ``ComponentView/updateProperties()``,
+and assign to the `component` property.
+
+```swift
+@available(iOS 26.0, *)
+final class CountExampleView: ComponentView {
+    @Observable
+    private final class ViewModel {
+        var count: Int = 0
+    }
+
+    private let viewModel = ViewModel()
+
+    override func updateProperties() {
+        super.updateProperties()
+        let viewModel = viewModel
+
+        component = VStack(spacing: 8, justifyContent: .center, alignItems: .center) {
+            Text("Hello world!", font: .boldSystemFont(ofSize: 22))
+            Text("Count: \(viewModel.count)")
+            Text("Increase").tappableView {
+                viewModel.count += 1
+            }
+        }.fill()
+    }
+}
+```
+
+## Tips for adopting Observation
+
+- Scope the observable view model privately inside the view or controller to keep
+  the observation graph local to that surface.
+- Reassign the entire component tree from your latest model instead of mutating
+  existing UIKit views.
+- If you support pre-iOS 26, gate your observation-enabled code with availability
+  checks and fall back to manual `reloadComponent()` calls on earlier systems.
+
+For a complete, runnable sample, see `ObservableExample.swift` in the Examples
+project.

Sources/UIComponent/Documentation.docc/UIComponent.md

@@ -31,4 +31,5 @@ In version 5.0, UIComponent can also easily render SwiftUI View alongside UIView
 - <doc:PerformanceOptimization>
 - <doc:Component>
 - <doc:Environment>
+- <doc:ObservableSupport>
 }