Stash UI plugin template

I’ve created a GitHub repository template for creating new UI plugins. It includes some simple demo code that new plugin developers may find useful, and this is easy enough to remove or update to your requirements. Scripts for creating development and production bundles are also included.

The template is built with the Stash plugin API in mind, but it’s not a requirement if you don’t want to use it.

Installation

  1. In the repo, click the green Use this template button on the right-hand side of the page.
  2. Click Create a new repository, and fill out the form as usual when creating a new repo.
  3. Clone the newly created repo to your computer.
  4. Check the readme for starter instructions.
  5. Get coding!

Stack

  • TypeScript
    • The repo includes a stashGQL.d.ts types definition file generated from Stash. These may be outdated depending on when I last generated them, but you can generate new ones using my developer tools repo.
    • The repo also includes a stashPlugin.d.ts types definition file. These are manually written type definitions relating primarily to the plugin API. I’ve only defined the types I’ve used, so they are far from exhaustive. If you find any errors or have any additions, please raise an issue on the template repository.
  • React (optional but recommended)
  • SCSS
  • Webpack (for compiling Typescript)
4 Likes

I was playing around with this last night and was able to refactor one of my vanilla JS plugins to use the PluginApi, and now it’s in a good state to add some additional functionality. This helped a great deal :slight_smile:

Although, since I have extremely little React experience, it was a pain in the ass when I didn’t know if the typings were out of date/incorrect or if it was my lack of experience. I did see your StashDevTools repo to update the types but it was a bit late for me lol, I’d already picked out what I was missing from the current Stash branch. The PluginApi documentation is pretty minimal too which doesn’t help. I feel like, alongside each stash release, there ought to be a comprehensive set of types and utility functions, which can be imported into a plugin project… I’ll probably look into it because it would be really useful - I’m imagining a workflow which builds the types during a release puts them on github as a package? I’ve never looked at GH packages before or published libraries in general… but I imagine people are avoiding using the PluginApi since it’s a bit mysterious to use if you don’t have decent JSX/React knowledge.

This is awesome, and helped me a lot, the UI PluginAPI is a bit hard to wrap your mind around when getting started with it.

I’m glad it helped you both out!

Typings are a bit of a difficult one - I don’t update them anywhere as often as I should, and there are a few issues with the ones I’ve done. I haven’t looked in a while but I believe there’s also “slim” data that certain components use rather than the full data set, and the typings don’t always reflect this. I made an issue on my repo a good while back. I need to get round to it.

I totally understand people’s hesistancy if they don’t know React beforehand. I’m a React dev for my job so it’s a lot easier for me! I’d recommend giving the basics a go as you can probably do most stuff you want with just that.