Exploring bidirectional Swift states

Implementation as of Synchronous bidirectional variable states #6

1. Declare in React view:

const [switchValue, setSwitchValue] = useExposeState<boolean>(true, 'switchValue');

2. swiftgen

3. Connect in SwiftUI view:

let manager: ObservableWebViewManager
@State private var switchValue: Bool = true

ObservableWebView(manager: manager)
  // change happened in React side
  .tsMessageHandler(.switchValue {  newValue in
    switchValue = newValue // update Swift var
  }, manager: manager)
  // change happened on Swift side
  .onChange(of: switchValue) {
    manager.ts(.switchValue(switchValue)) // update React var
  }

Next Steps

Modifiers

Hook up state variables with one line of code.

ObservableWebView(manager: manager)
  .sync(.switchValue, $switchValue, manager: manager)

Observable Classes

SwiftGen generates one State variable.

• Updating it from Swift will automatically update the React variable
• Updating it from React will automatically update the Swift variable

@Observable
class Variables {
  init(manager: WKWebView) { ... }
 
  let webView: WKWebView
  var switchValue: TypeSwiftObservable {
    get: // retrieve from React
    set: // set in React
  }

  func render() {
    withObservationTracking {
      for variable in TypeSwift.Variables {
        // case .switchValue: self.switchValue = switchValue
      }
    } onChange: {
      render()
    }
  }
}

Usage

.onChange(of: switchValue) {
  // do something
}

Observable Environments

Usage

@Environment(\.variable) private var variable

variable.switchValue  // call directly
variable.$switchValue // edit directly