UI Plugin API

[WithoutPants]

Introduces a UI plugin API. The main interface can be viewed at pluginApi.tsx.

Adds PluginApi to the window object. The PluginApi object:

• grants access to React and a number of libraries and utility namespaces
• provides access to various components
• supports registering page routes via PluginApi.register.route. (eg PluginApi.register.route("/plugin/test-react", TestPage);)
• supports registering custom components which can then be used by other plugins via PluginApi.register.component.
• supports patching a selection of components:
  • PluginApi.patch.before accepts a function that will be called before the target component function is run. The provided function is given the input arguments and is expected to return an array of arguments. This allows the arguments to be modified before the target component function is run.
  • PluginApi.patch.instead accepts a function that will be called instead of the target component function. The provided function is given the input arguments, plus the original component function. It is expected to return the rendered component. instead may only be called once for a given component.
  • PluginApi.patch.after accepts a function that will be called after the target component function. The provided function is given the original input arguments, plus the result of the original component function. It is expected to return the rendered component.

Examples of using before and instead are in testReact.tsx. The example shows proof of concept for changing the scene card display, adding a test page route, and adding links for said page to the Tools page and to the main nav bar.

The supported patchable components is not intended to be exhaustive, and more components can be made supportive of patching according to plugin developer needs.

Example of adding an icon link to the navbar:

Test page render

Added link in tools page

Example changing of scene card display: