Smart Builder SDK comes with a few built-in export methods that we can use to export the following:
You’ll notice that in each sample code, there is a comment specifying the name of the file; these are files that have been exported from one file called index.ts, which we've referenced in the manifest file
💡 Need a refresher of the manifest file? See Required Packages).
An App requires registering up to 4 different parts so that it works seamlessly with the Smart Builder. The name of each method will describe the part of your App for which it is responsible. Your App’s entry file index.ts can look like the following:
IMPORTANT: Note that ordering is critical here, so please be mindful of this.
import { registerControl, registerComponent, registerSection, registerHook } from 'ub-shared';
import { Hook } from './my-hook';
import { Template } from './my-section';
import { Component } from './my-component';
import { Control } from './my-control';
// The order is important!
registerHook(Hook);
registerControl(Control);
registerComponent(Component); // Required
registerSection(Template);
To get the developer up and running quickly, this page will go over the the files in order of importance rather than the order specified above. A Hello World example will be used to represent code examples. Please reach out to Unbounce Apps Team for the sample repository.
Your component configuration is the most important for the App to be registered and have it available in the Smart Builder. The component configuration is an object with specifications so that it can be registered correctly into the Smart Builder:
componentTypeId: A unique ID for your App, must be camelCase.
displayName: A name to be displayed for your component within the Smart Builder.
tags: A list of tags that describes its registration type. (More details TBD):
section,
'no-label',
'no-wrappers',
'head-script',
image,
conversion,
copy,
swappable,
newControls
schema: Definition of your App’s data structure to specify its keys and its type. A Schema instance will be provided via ub-shared to create this object. See more details here.
Component: The React component that will render to represent your App.
version: Optional parameter to specify the version of your App schema to use. Related to migrations.