Composability of Workflows with SwiftUI Views

[Curtis-Halbrook]

I've been puzzling over this issue for a few hours, and I'm at a loss as to how to move forward.

Given the situation that I've created a very simple Workflow driving the functionality of a Search Bar, I would now like to use this Search Bar as part of another larger view with its own Workflow. I don't seem to see any way to tie the behavior of the Search Bar to the owning Workflow.

Here's the Search Bar's code with some SwiftUI cut out:

struct SearchBarScreen {
    var searchTerm: String
    var onSearchTermChanged: (String) -> Void
    var clearSearchTerm: () -> Void
}

struct SearchBar: View {
    
    var body: some View {
        WorkflowView(workflow: self.workflow, onOutput: { output in } ) { rendering in
            TextField(
                "Search",
                text: Binding(
                    get: { rendering.searchTerm },
                    set: { rendering.onSearchTermChanged($0) }
                )
            )
               //snip
        }
    }
    
    let workflow: SearchBarWorkflow
}

Here's the SearchBarWorkflow, pared down to just the render method

extension SearchBarWorkflow {
    typealias Rendering = SearchBarScreen

    func render(state: SearchBarWorkflow.State, context: RenderContext<SearchBarWorkflow>) -> Rendering {
        let sink = context.makeSink(of: Action.self)
        return SearchBarScreen(
            searchTerm: state.searchValue,
            onSearchTermChanged: { term in
                sink.send(.searchTermChanged(term: term))
            },
            clearSearchTerm: {
                sink.send(.clearTerm)
            }
        )
    }
}

You can likely figure out the Action and the State just from this little bit.

Now, I would like to use this View in a parent View, something along the lines of

struct DefinitionLookupScreen {
    var searchBarWorkflow: SearchBarWorkflow //???????
    var definitions: [Definition]
    var searchTermChanged: (String) -> Void
}

struct DefinitionLookup: View {
    
    var body: some View {
        WorkflowView(workflow: self.workflow, onOutput: { _ in }) { rendering in
            VStack {
                
                SearchBar(workflow: rendering.searchBarWorkflow)
                    .padding(.top, -20)
                
                List(rendering.definitions, id: \.definition) { definition in
                    Text(definition.definition)
                }
            }
        }
    }
    
    let workflow: DefinitionLookupWorkflow
}

but my issue in the DefinitionLookupWorkflow is that I don't seem to have any means of mapping the SearchBarWorkflow.Output to DefinitionLookupWorkflow.Action. I don't see how I can pass state and behavior to the nested SearchBar, since "mapOutput" returns an AnyWorkflow<SearchBarScreen, DefinitionLookupWorkflowAction>, and I can't pass that into the SearchBar since it is looking for a SearchBarWorkflow.

extension DefinitionLookupWorkflow {
    typealias Rendering = DefinitionLookupScreen

    func render(state: DefinitionLookupWorkflow.State, context: RenderContext<DefinitionLookupWorkflow>) -> Rendering {
        let sink = context.makeSink(of: Action.self)
        
        switch state.lookupState {
        
        case .idle:
            break
            
        case .lookingUp:
            DefinitionLookupWorker(
                dictionaryRepository: BasicDictionaryRepository(
                    dictionaryService: WordsAPIDictionaryService(),
                    dictionaryDataStore: MemoryDictionaryDataStore()
                ),
                term: state.term
            )
                .mapOutput { (output) -> Action in
                    switch output {
                    case .results(let definitions):
                        return .lookupComplete(definitions: definitions)
                    case .error:
                        return .nothing
                    }
                }
                .running(in: context)
        }
        
        let searchBarWorkflow = SearchBarWorkflow(initialSearchTerm: state.term)
        //How to map behavior?!
            .mapOutput { (output) -> Action in
                switch output {
                case .searchTermChanged(term: let term):
                    return .lookup(term: term)
                }
            }
        
        return DefinitionLookupScreen(
            searchBarWorkflow: searchBarWorkflow,
            definitions: state.definitions,
            searchTermChanged: { term in
                sink.send(.lookup(term: term))
            }
        )
    }
}

Any thoughts here?