Inject component into Cloneable SDK

Now that you have a built component, inject it into the SDK to make it available to your applications

Component Registry

Components are "registered" with the SDK via a static class aptly named Components. In order to add your components to the registry simply call addComponent on the registry early in your app lifecycle, preferably prior or just after initializing the CloneablePlatform.

Get your ComponentID

In order to register your component you will need its UUID. This can be found in the components definition in the web builder Component JSON Structure

Example componentID as a lowercased UUID

"736a9441-ea01-4e91-b2da-b84600774705"

Non-UI Components

For non-ui components we simple create a CloneableComponent which references the static id of the component, it's type, the runtimes (should only be ios for ios), and the processingType which is the reference to the class which comprises the implementation of the component.

Example

// Define the Component that we want to add
let component = CloneableComponent(
                id: "af91b5a3-9004-405a-afea-ae7bb5504731", 
                type: ComponentType.processing, 
                runtimes: [.ios], // set to .ios for your ios app
                processingType: AIObjectDetection.self)
Components.addComponent(component: component)

see: ComponentType for available component types

UI Components

For UI components, registration is slightly different. We will create a component, and along with it will pass along the reference to the view type which we will render. We will omit the model which will ultimately subscribe to the platform as it will be initialized by the view.

// Define the Component that we want to add
// OMIT PROCESSINGTYPE or set to nil as the model will be initialized by a StateObject
// which we implement in the SwiftUI view struct
let component = CloneableComponent(
                id: "af91b5a3-9004-405a-afea-ae7bb5504731",
                runtimes: [.ios]) // set to .ios for your ios app
// Register the UI component
// Overlay header is defaulted to false
Components.registerUIComponent(component: component, view: CameraView.self, overlayHeader: true)

OverlayHeader

The platform SDK will automatically render the header for our component at the top of the devices screen. In default cases this will be a regular header with a white or dark background which includes the component name and a back button.

Adding an overlay header will make the header semi-translucent and will allow your view to extend to the top of the device under the header.

Example

The following example is from the open-source sample app

import SwiftUI
import CloneableCore
import CloneablePlatformiOS

@main
struct cloneable_example_app: App {
    // instantiate the CloneablePlatform as a StateObject to use throughout our app
    @StateObject private var cloneable = CloneablePlatform(authType: .email, backend_env: .dev)
    
    init() {
        // Register our custom Counting component. This is a non-ui component
        Components.addComponent(component: CloneableComponent(id: "504a23c1-9710-4881-8c24-a870ea2b69ef", 
                                type: ComponentType.logical, 
                                runtimes: [.cloud, .ios, .edge_linux], 
                                processingType: CountComponent.self))
        // Register a UI component which displays a PDF
        Components.registerUIComponent(component: CloneableComponent(id: "52808a5e-3126-44e1-9d4c-86b41dcdccae", 
                                       type: ComponentType.ui, runtimes: [.ios]),
                                       view: PdfViewComponent.self)
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
            // add the CloneablePlatform as an environment object so that we can access it throughout the app
                .environmentObject(cloneable)
        }
    }
}