UI Plugin

With a UI Plugin, you can extend the ScriptBee UI by adding new views, buttons, and other UI elements. This allows you to create a more interactive and customized experience for the users of your plugin.

Manifest

An example can be seen below:

extensionPoints:
  - kind: UI
    remoteName: remote
    remoteEntry: http://localhost:4201/remoteEntry.js
    outlets:
      - type: top-navigation-bar
        exposedModule: './RemoteComponent'
        path: /my-plugin
        label: My Plugin

Anatomy of a UI Plugin

A UI plugin consists of the following components:

• remoteName: The name of the remote module that will be used to load the UI components of the plugin.
• remoteEntry: The URL of the remote entry file that will be used to load the UI components of the plugin. This file is typically generated by a module federation setup in a frontend application.
• outlets: A list of outlets that define where and how the UI components of the plugin will be integrated into the ScriptBee UI. Each outlet has a type that specifies the type of UI extension it provides.

Types of UI Plugins Outlets

There are different types of UI plugins that can be implemented to extend the ScriptBee UI in different ways.

Routing

Routing capability is built into outlets like top-navigation-bar and side-panel. These outlets share a set of routing-related fields: exposedModule, path, label, nested, and componentName.

Common routing fields:

• exposedModule (required): Path to the module inside the remote that exports the component(s) or routes (e.g. ./routes).
• path (required): The path of the route the outlet will add to the application (e.g. /my-plugin).
• label (required): Human-readable label used by the host UI (e.g. the top-nav button text or side panel label).
• nested (optional, boolean): If true, ScriptBee will load the exposed routing module as route children (the exposed module can contain its own router and nested routes). If false, only a single component is loaded from the exposed module. Default: false.
• componentName (optional): When nested is false, the name of the exported component to load from the module. Default: "App".

Icons

Some outlets can display an icon. When present, the icon value should be the name/key of a font icon from a compatible icon set. We recommend using Google Material Icons (see https://fonts.google.com/icons) or any icon set compatible with Angular Material Icons (https://material.angular.io/components/icon/overview). Use the icon's short name (for example menu, add) as the icon value. Where an outlet requires an icon the field will be marked as required in that outlet's section below.

Top Navigation Bar

A top navigation bar outlet adds a button to the top navigation bar of ScriptBee that navigates to a route exposed by the plugin. This is useful for adding new features that should be easily accessible from anywhere in the application.

outlets:
  - type: top-navigation-bar
    exposedModule: './routes'
    path: /my-plugin
    label: My Plugin
    nested: true

• type: top-navigation-bar
• exposedModule: Module path in the remote that exports the route(s) or component (required).
• path: The route path to navigate to (required).
• label: Text shown in the top navigation bar (required).
• nested: If true, the exposed module's routing (including nested routes) will be mounted as children at path. If false, a single component from the exposed module is loaded. Default: false.
• componentName: Optional component export name to load when nested is false.

Side Panel

A side panel outlet adds a section to the side panel of ScriptBee that opens a route or component exposed by the plugin. This is useful for displaying additional information or controls that are relevant to the user's current context.

outlets:
  - type: side-panel
    exposedModule: './routes'
    path: /my-plugin
    label: My Plugin
    icon: my-plugin-icon
    nested: false
    componentName: App

• type: side-panel
• exposedModule: Module path in the remote that exports the route(s) or component (required).
• path: The route path to navigate to (required).
• label: Text shown in the side panel (required).
• icon: Icon name to display for the side panel entry (required). See the Icons section above for guidance.
• nested: If true, the exposed module's routing (including nested routes) will be mounted as children at path. If false, a single component from the exposed module is loaded. Default: false.
• componentName: Optional component export name to load when nested is false.

Output Tabs

An output tab plugin allows you to add a new tab to the output panel of ScriptBee. This is useful for displaying the results of your plugin's operations or for providing additional output options to the user.

Output File Previewer

An output file preview plugin allows you to add a new preview option for files in the output panel of ScriptBee. This is useful for providing a quick and easy way for users to view the contents of output files without having to open them in an external application.

outlets:
  - type: file-previewer
    exposedModule: './routes'
    label: My Plugin
    icon: my-plugin-icon
    supportedFileExtensions:
      - txt
      - md
      - json
    componentName: App

• type: file-previewer
• exposedModule: Module path in the remote that exports the component (required).
• label: Text shown in the file preview tab (required).
• icon: Icon name to display for the file preview tab. See the Icons section above for guidance.
• supportedFileExtensions: List of file extensions that the preview tab should be available for. If left empty, the preview tab will be available for all file types.
• componentName: Optional component export name to load from the exposed module. Default: "App".