When we’re about to start building a new app, you’ll likely come across the need to install third-party libraries to achieve a specific goal or feature.

Smart Builder SDK comes with a built-in utility component called Script and receives the following object parameters:

• mode: only two string values: publish and view.
• dependencies: this property is the same as dependencies in the useEffect react hook. So, you can add in other dependencies you want to keep aware of to respond to those changes.
• externalScript(optional): this is an object with the following properties:
  • scriptId: every script we want to have to have a proper ID.
  • src: script’s URL.
  • onloadMethod: our function body to execute when the script gets loaded.
  • condition: if you want to condition the loading of the script, use this property.
• inlineScript(optional): this could be handy when creating your own scripts.
  • Apply your code in this property; the function will apply the code into another function before executing the external script (if it was specified). When both the inline script and an external script are present, the inline script gets executed first.

So, we can translate the above properties into the following interfaces:

// This first interface is the expected in the Script util function.
interface ScriptConfig {
  mode: 'publish' | 'view';
  inlineScript?: string;
  externalScript?: ExternalScript;
  dependencies: unknown[];
}

interface ExternalScript = {
  scriptId: string;
  src: string;
  onloadMethod: string;
  condition: boolean;
}

Please review this sample code to see an example of this function: Loading an External Script Using the Built-in component.