Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Plugin API #4256

Merged
merged 14 commits into from
Nov 28, 2023
Merged

UI Plugin API #4256

merged 14 commits into from
Nov 28, 2023

Conversation

WithoutPants
Copy link
Collaborator

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:
image

Test page render
image

Added link in tools page
image

Example changing of scene card display:
image

@WithoutPants WithoutPants added the feature Pull requests that add a new feature label Oct 27, 2023
@WithoutPants WithoutPants added this to the Version 0.24.0 milestone Oct 27, 2023
@WithoutPants WithoutPants merged commit b915428 into stashapp:develop Nov 28, 2023
2 checks passed
halkeye pushed a commit to halkeye/stash that referenced this pull request Sep 1, 2024
* Add page registration
* Add example plugin
* First version of proper react plugins
* Make reference react plugin
* Add patching functions
* Add tools link poc
* NavItem poc
* Add loading hook for lazily loaded components
* Add documentation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Pull requests that add a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant