Better Bindings Revisited (#2215)

* Simpler bindable view state

* wip

* wip

* wip

* wip

* wip

* wip

* simplify

* wip

* wip

* wip

* wip

* wip

* wip

* wip

Author: stephencelis

Examples/CaseStudies/SwiftUICaseStudies/01-GettingStarted-Bindings-Forms.swift

@@ -60,30 +60,26 @@ struct BindingFormView: View {
         }
 
         HStack {
-          TextField("Type here", text: viewStore.binding(\.$text))
+          TextField("Type here", text: viewStore.$text)
             .disableAutocorrection(true)
             .foregroundStyle(viewStore.toggleIsOn ? Color.secondary : .primary)
           Text(alternate(viewStore.text))
         }
         .disabled(viewStore.toggleIsOn)
 
-        Toggle(
-          "Disable other controls",
-          isOn: viewStore.binding(\.$toggleIsOn)
-            .resignFirstResponder()
-        )
+        Toggle("Disable other controls", isOn: viewStore.$toggleIsOn.resignFirstResponder())
 
         Stepper(
           "Max slider value: \(viewStore.stepCount)",
-          value: viewStore.binding(\.$stepCount),
+          value: viewStore.$stepCount,
           in: 0...100
         )
         .disabled(viewStore.toggleIsOn)
 
         HStack {
           Text("Slider value: \(Int(viewStore.sliderValue))")
 
-          Slider(value: viewStore.binding(\.$sliderValue), in: 0...Double(viewStore.stepCount))
+          Slider(value: viewStore.$sliderValue, in: 0...Double(viewStore.stepCount))
             .tint(.accentColor)
         }
         .disabled(viewStore.toggleIsOn)

Examples/CaseStudies/SwiftUICaseStudies/01-GettingStarted-FocusState.swift

@@ -55,9 +55,9 @@ struct FocusDemoView: View {
         AboutView(readMe: readMe)
 
         VStack {
-          TextField("Username", text: viewStore.binding(\.$username))
+          TextField("Username", text: viewStore.$username)
             .focused($focusedField, equals: .username)
-          SecureField("Password", text: viewStore.binding(\.$password))
+          SecureField("Password", text: viewStore.$password)
             .focused($focusedField, equals: .password)
           Button("Sign In") {
             viewStore.send(.signInButtonTapped)
@@ -66,7 +66,7 @@ struct FocusDemoView: View {
         }
         .textFieldStyle(.roundedBorder)
       }
-      .synchronize(viewStore.binding(\.$focusedField), self.$focusedField)
+      .synchronize(viewStore.$focusedField, self.$focusedField)
     }
     .navigationTitle("Focus demo")
   }

Examples/Integration/Integration/BindingLocalTestCase.swift

@@ -135,9 +135,9 @@ private struct ChildView: View {
         Button("Dismiss") {
           self.dismiss()
         }
-        TextField("Text", text: viewStore.binding(\.$text))
+        TextField("Text", text: viewStore.$text)
         Button(viewStore.sendOnDisappear ? "Don't send onDisappear" : "Send onDisappear") {
-          viewStore.binding(\.$sendOnDisappear).wrappedValue.toggle()
+          viewStore.$sendOnDisappear.wrappedValue.toggle()
         }
       }
       .onDisappear {

Examples/Integration/Integration/PresentationTestCase.swift

@@ -417,7 +417,7 @@ private struct ChildView: View {
     WithViewStore(self.store, observe: { $0 }) { viewStore in
       VStack {
         Text("Count: \(viewStore.count)")
-        TextField("Text field", text: viewStore.binding(\.$text))
+        TextField("Text field", text: viewStore.$text)
         Button("Child dismiss") {
           viewStore.send(.childDismissButtonTapped)
         }

Examples/Standups/Standups/StandupForm.swift

@@ -65,21 +65,21 @@ struct StandupFormView: View {
     WithViewStore(self.store, observe: { $0 }) { viewStore in
       Form {
         Section {
-          TextField("Title", text: viewStore.binding(\.$standup.title))
+          TextField("Title", text: viewStore.$standup.title)
             .focused(self.$focus, equals: .title)
           HStack {
-            Slider(value: viewStore.binding(\.$standup.duration).seconds, in: 5...30, step: 1) {
+            Slider(value: viewStore.$standup.duration.seconds, in: 5...30, step: 1) {
               Text("Length")
             }
             Spacer()
             Text(viewStore.standup.duration.formatted(.units()))
           }
-          ThemePicker(selection: viewStore.binding(\.$standup.theme))
+          ThemePicker(selection: viewStore.$standup.theme)
         } header: {
           Text("Standup Info")
         }
         Section {
-          ForEach(viewStore.binding(\.$standup.attendees)) { $attendee in
+          ForEach(viewStore.$standup.attendees) { $attendee in
             TextField("Name", text: $attendee.name)
               .focused(self.$focus, equals: .attendee(attendee.id))
           }
@@ -94,7 +94,7 @@ struct StandupFormView: View {
           Text("Attendees")
         }
       }
-      .bind(viewStore.binding(\.$focus), to: self.$focus)
+      .bind(viewStore.$focus, to: self.$focus)
     }
   }
 }

Examples/TicTacToe/tic-tac-toe/Package.swift

@@ -86,10 +86,6 @@ let package = Package(
       name: "GameSwiftUI",
       dependencies: ["GameCore"]
     ),
-    .testTarget(
-      name: "GameSwiftUITests",
-      dependencies: ["GameSwiftUI"]
-    ),
     .target(
       name: "GameUIKit",
       dependencies: ["GameCore"]
@@ -114,10 +110,6 @@ let package = Package(
         "TwoFactorSwiftUI",
       ]
     ),
-    .testTarget(
-      name: "LoginSwiftUITests",
-      dependencies: ["LoginSwiftUI"]
-    ),
     .target(
       name: "LoginUIKit",
       dependencies: [
@@ -144,10 +136,6 @@ let package = Package(
         "NewGameCore",
       ]
     ),
-    .testTarget(
-      name: "NewGameSwiftUITests",
-      dependencies: ["NewGameSwiftUI"]
-    ),
     .target(
       name: "NewGameUIKit",
       dependencies: [
@@ -171,10 +159,6 @@ let package = Package(
       name: "TwoFactorSwiftUI",
       dependencies: ["TwoFactorCore"]
     ),
-    .testTarget(
-      name: "TwoFactorSwiftUITests",
-      dependencies: ["TwoFactorSwiftUI"]
-    ),
     .target(
       name: "TwoFactorUIKit",
       dependencies: ["TwoFactorCore"]

Examples/TicTacToe/tic-tac-toe/Sources/LoginCore/LoginCore.swift

@@ -6,22 +6,25 @@ import TwoFactorCore
 public struct Login: ReducerProtocol, Sendable {
   public struct State: Equatable {
     @PresentationState public var alert: AlertState<AlertAction>?
-    public var email = ""
+    @BindingState public var email = ""
     public var isFormValid = false
     public var isLoginRequestInFlight = false
-    public var password = ""
+    @BindingState public var password = ""
     @PresentationState public var twoFactor: TwoFactor.State?
 
     public init() {}
   }
 
-  public enum Action: Equatable, Sendable {
+  public enum Action: Equatable {
     case alert(PresentationAction<AlertAction>)
-    case emailChanged(String)
-    case passwordChanged(String)
-    case loginButtonTapped
     case loginResponse(TaskResult<AuthenticationResponse>)
     case twoFactor(PresentationAction<TwoFactor.Action>)
+    case view(View)
+
+    public enum View: BindableAction, Equatable {
+      case binding(BindingAction<State>)
+      case loginButtonTapped
+    }
   }
 
   public enum AlertAction: Equatable, Sendable {}
@@ -31,16 +34,12 @@ public struct Login: ReducerProtocol, Sendable {
   public init() {}
 
   public var body: some ReducerProtocol<State, Action> {
+    BindingReducer(action: /Action.view)
     Reduce { state, action in
       switch action {
       case .alert:
         return .none
 
-      case let .emailChanged(email):
-        state.email = email
-        state.isFormValid = !state.email.isEmpty && !state.password.isEmpty
-        return .none
-
       case let .loginResponse(.success(response)):
         state.isLoginRequestInFlight = false
         if response.twoFactorRequired {
@@ -53,12 +52,14 @@ public struct Login: ReducerProtocol, Sendable {
         state.isLoginRequestInFlight = false
         return .none
 
-      case let .passwordChanged(password):
-        state.password = password
+      case .twoFactor:
+        return .none
+
+      case .view(.binding):
         state.isFormValid = !state.email.isEmpty && !state.password.isEmpty
         return .none
 
-      case .loginButtonTapped:
+      case .view(.loginButtonTapped):
         state.isLoginRequestInFlight = true
         return .run { [email = state.email, password = state.password] send in
           await send(
@@ -71,9 +72,6 @@ public struct Login: ReducerProtocol, Sendable {
             )
           )
         }
-
-      case .twoFactor:
-        return .none
       }
     }
     .ifLet(\.$alert, action: /Action.alert)

Examples/TicTacToe/tic-tac-toe/Sources/LoginSwiftUI/LoginView.swift

@@ -9,35 +9,19 @@ public struct LoginView: View {
   let store: StoreOf<Login>
 
   struct ViewState: Equatable {
-    var alert: AlertState<Login.AlertAction>?
-    var email: String
+    @BindingViewState var email: String
     var isActivityIndicatorVisible: Bool
     var isFormDisabled: Bool
     var isLoginButtonDisabled: Bool
-    var password: String
-
-    init(state: Login.State) {
-      self.alert = state.alert
-      self.email = state.email
-      self.isActivityIndicatorVisible = state.isLoginRequestInFlight
-      self.isFormDisabled = state.isLoginRequestInFlight
-      self.isLoginButtonDisabled = !state.isFormValid
-      self.password = state.password
-    }
-  }
-
-  enum ViewAction {
-    case emailChanged(String)
-    case loginButtonTapped
-    case passwordChanged(String)
+    @BindingViewState var password: String
   }
 
   public init(store: StoreOf<Login>) {
     self.store = store
   }
 
   public var body: some View {
-    WithViewStore(self.store, observe: ViewState.init, send: Login.Action.init) { viewStore in
+    WithViewStore(self.store, observe: \.view, send: { .view($0) }) { viewStore in
       Form {
         Text(
           """
@@ -48,18 +32,12 @@ public struct LoginView: View {
         )
 
         Section {
-          TextField(
-            "[email protected]",
-            text: viewStore.binding(get: \.email, send: ViewAction.emailChanged)
-          )
-          .autocapitalization(.none)
-          .keyboardType(.emailAddress)
-          .textContentType(.emailAddress)
+          TextField("[email protected]", text: viewStore.$email)
+            .autocapitalization(.none)
+            .keyboardType(.emailAddress)
+            .textContentType(.emailAddress)
 
-          SecureField(
-            "••••••••",
-            text: viewStore.binding(get: \.password, send: ViewAction.passwordChanged)
-          )
+          SecureField("••••••••", text: viewStore.$password)
         }
 
         Button {
@@ -93,16 +71,15 @@ public struct LoginView: View {
   }
 }
 
-extension Login.Action {
-  init(action: LoginView.ViewAction) {
-    switch action {
-    case let .emailChanged(email):
-      self = .emailChanged(email)
-    case .loginButtonTapped:
-      self = .loginButtonTapped
-    case let .passwordChanged(password):
-      self = .passwordChanged(password)
-    }
+extension BindingViewStore<Login.State> {
+  var view: LoginView.ViewState {
+    LoginView.ViewState(
+      email: self.$email,
+      isActivityIndicatorVisible: self.isLoginRequestInFlight,
+      isFormDisabled: self.isLoginRequestInFlight,
+      isLoginButtonDisabled: !self.isFormValid,
+      password: self.$password
+    )
   }
 }
 

Examples/TicTacToe/tic-tac-toe/Sources/LoginUIKit/LoginViewController.swift

@@ -200,11 +200,11 @@ extension Login.Action {
     case .alertDismissed:
       self = .alert(.dismiss)
     case let .emailChanged(email):
-      self = .emailChanged(email ?? "")
+      self = .view(.set(\.$email, email ?? ""))
     case .loginButtonTapped:
-      self = .loginButtonTapped
+      self = .view(.loginButtonTapped)
     case let .passwordChanged(password):
-      self = .passwordChanged(password ?? "")
+      self = .view(.set(\.$password, password ?? ""))
     case .twoFactorDismissed:
       self = .twoFactor(.dismiss)
     }