SwiftUI integration

[jessesquires]

We should integrate easily with SwiftUI projects.

• Provide a basic SwiftUI component using the UIHosting* APIs
• Add a SwiftUI setup to the example project

[harrisonbay]

IGListKit has an example of integration of UIHosting* for compositionally laying out the body of the cells themselves which I think is sufficiently informative of how to use those APIs: Instagram/IGListKit@15b45d0

Imo the more interesting case is using ReactiveCollectionsKit in a SwiftUI view tree. From my testing, this is relatively straightforward as well as long as you have a good understanding of how data should flow. In my usecase, I'm lucky to have access to Observation APIs since I'm targeting iOS 17+. Here's a rough sketch:

swiftui-wrapped viewcontroller

/// Wrap the ViewController in a UIViewControllerRepresentable
struct ReactiveListViewControllerRepresentable: UIViewControllerRepresentable {
    var collectionViewModel: CollectionViewModel

    // Navigation handlers for SwiftUI
    var navigateToPersonHandler: ((PersonModel) -> Void)
    var navigateToColorHandler: ((ColorModel) -> Void)

    func makeUIViewController(context: Context) -> ListViewController {
        print("making the UI view controller in the swiftUI wrapped view")

        // If you use NavigationStack, imo its clearer to pass in handlers rather than cells handling their own navigation
        let listViewController = ListViewController(
            collectionViewModel: collectionViewModel,
            navigateToPersonHandler: navigateToPersonHandler,
            navigateToColorHandler: navigateToColorHandler
        )

        return listViewController
    }

    func updateUIViewController(_ uiViewController: ListViewController, context: Context) {
        print("updating the ui view controller in the swiftUI wrapped view")
        uiViewController.collectionViewModel = collectionViewModel
    }
}

viewmodel

@Observable
class ReactiveCollectionsViewModel {
    var people: [PersonModel]
    var colors: [ColorModel]

    init() {
        self.people = PersonModel.makePeople()
        self.colors = ColorModel.makeColors()
    }

    // Move CollectionViewModel mapping to a computed property so Observation works
    var collectionViewModel: CollectionViewModel {
        print("recalculating due to observation")
        // Create People Section
        let peopleCellViewModels = people.map {
            let menuConfig = UIContextMenuConfiguration.configFor(
                itemId: $0.id,
                favoriteAction: { [weak self] id in
                    self?.toggleFavorite(id: id)
                },
                deleteAction: { [weak self] id in
                    self?.deleteItem(id: id)
                }
            )

            return PersonCellViewModelList(
                person: $0,
                contextMenuConfiguration: menuConfig
            ).eraseToAnyViewModel()
        }
        let peopleHeader = HeaderViewModel(title: "People", style: .small)
        let peopleFooter = FooterViewModel(text: "\(people.count) people")
        let peopleSection = SectionViewModel(
            id: "section_people_list",
            cells: peopleCellViewModels,
            header: peopleHeader,
            footer: peopleFooter
        )

        // Create Color Section
        let colorCellViewModels = colors.map {
            let menuConfig = UIContextMenuConfiguration.configFor(
                itemId: $0.id,
                favoriteAction: { [weak self] id in
                    self?.toggleFavorite(id: id)
                },
                deleteAction: { [weak self] id in
                    self?.deleteItem(id: id)
                }
            )
            return ColorCellViewModelList(
                color: $0,
                contextMenuConfiguration: menuConfig
            ).eraseToAnyViewModel()
        }
        let colorHeader = HeaderViewModel(title: "Colors", style: .small)
        let colorFooter = FooterViewModel(text: "\(colors.count) colors")
        let colorSection = SectionViewModel(
            id: "section_colors_list",
            cells: colorCellViewModels,
            header: colorHeader,
            footer: colorFooter
        )

        // Create final view model
        return CollectionViewModel(id: "list_view", sections: [peopleSection, colorSection])
    }
}

viewcontroller

final class ListViewController {
    // Generally same as example except the mapping has been moved into your @Observable ViewModel
    var collectionViewModel: CollectionViewModel {
        didSet {
            Task { @MainActor in
                await self.driver.update(viewModel: collectionViewModel)
                print("list did update! async")
            }
        }
    }

swiftui view tree

var body: some View {
        NavigationStack {
            ReactiveListViewControllerRepresentable(
                collectionViewModel: viewModel.collectionViewModel,
                navigateToPersonHandler: { person in
                    selectedPerson = person
                },
                navigateToColorHandler: { color in
                    selectedColor = color
                }
            )
            .navigationTitle("Reactive List")
            .navigationDestination(item: $selectedPerson) { person in
                PersonDetailView(person: person)
            }
            .navigationDestination(item: $selectedColor) { color in
                ColorDetailView(color: color)
            }
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button(action: { viewModel.shuffle() }) {
                        Image(systemName: "shuffle")
                    }
                }

                ToolbarItem(placement: .topBarTrailing) {
                    Menu {
                        Button("Reset") {
                            viewModel.reset()
                        }

                        Button("Remove All", role: .destructive) {
                            viewModel.removeAll()
                        }
                    } label: {
                        Image(systemName: "arrow.clockwise")
                    }
                }
            }
        }
    }
}

// Simple SwiftUI person detail view
struct PersonDetailView: View {
    let person: PersonModel
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Name: \(person.name)")
                .font(.headline)
            Text("Birthdate: \(person.birthDateText)")
            Text("Nationality: \(person.nationality)")
            Text("Favorite: \(person.isFavorite ? "Yes" : "No")")
            Spacer()
        }
        .padding()
        .navigationTitle(person.name)
    }
}

// Simple SwiftUI color detail view
struct ColorDetailView: View {
    let color: ColorModel
    
    var body: some View {
        VStack(spacing: 20) {
            Text(color.name.capitalized)
                .font(.largeTitle)
                .foregroundColor(.primary)
            
            if color.isFavorite {
                Label("Favorite", systemImage: "star.fill")
                    .foregroundColor(.yellow)
            }
            
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .navigationTitle(color.name.capitalized)
    }
}

• Note that this is essentially two types of "diffing" -- 1, the "diffing" that Observation does when it decides whether or not to recompute collectionViewModel; 2, the diffing that the driver does internally. You can get these two closer together if you just pass raw models and not collectionViewModel into the UIViewControllerRepresentable; I moved it because it feels clearer to explain this way w/ Observation thrown in the mix.
• For more general behavior like drag and drop, I believe you could use a Coordinator to make communication between your Observable viewmodel + the wrapped view controller move smoothly.

I don't know how to integrate this into the example app -- I created an entirely new project with a swiftUI ContentView as the root and this seems to work well, even with thousands of list entries.