Trying to write a custom UIPlugin: Examples?

Uppy
1

Hi,
I’m trying to write a custom UIPlugin for uppy. For me it is absolutely required to use Typescript.

But I’m struggling with the complexity. The first step for me is set up my project and get something rendered to the page for this I’m trying to configure Rollup to work with Preact and Typescript while bundling the dependencies correctly.

Are there any examples for third party-plugins (especially with Typescript)? I tried to search Github but could not find anything.

Help would be really appreciated.

2

As mentioned in a recent blog post, we (the Uppy team) are in the process of rewriting all the official Uppy plugins to TypeScript. We are doing this as the current types provided with the Uppy plugins are often outdated / slightly wrong, and because refactoring a JS codebase to TS has a few benefits. If you are starting to write a plugin, I would recommend doing it using the 4.x branch on the Uppy repo, otherwise you’ll have a bad time trying to make your plugin work with Uppy 4.x when it’s released.

My advice would be to do the following:

  1. Clone the Uppy repo 4.x branch locally
  2. Develop your plugin there, alongside the official Uppy plugins
  3. Once Uppy 4.0.0 is released, publish your own plugin on npm.

You can either keep your plugin development on an Uppy fork, and keep up with the upstream repo to use Uppy dev tools, or you can freely take inspiration from those dev tools to make your own. I hope it helps!

3

Hi @aduh95, thanks for your reply!

My initial idea was to develop the plugin in a separate repository and transprile and bundle it and use the resulting javascript file with uppy. As mentioned this has been quite difficult so far and I’ve not been able to get it to work. Nothing renders to the screen. And I’ve been seeing node output in my bundled script that seems to originate from uppy such as fs, path imports.

Maybe not typescript, but are there any examples of third-party UIPlugin stand-alone repos on github?

What it the maturity of the 4.x branch? I’m a bit worried to develop something that is supposed to go into prod with it.

4

I understand your point of vue, I don’t have a good example of such repo unfortunately.

If you allow me to come back to my suggestion, here are some points you might to consider:

  • the Uppy repo is maintained by Transloadit, and use (relatively) modern build chain (including TS on the 4.x branch). You can use it as is, and save lots of time as you don’t need to set it up yourself and maintain it.
  • Using types from current npm package is guaranteed to break when Uppy 4.0.0 is released.
  • regarding the stability, we don’t plan on making lots of breaking changes – except for TS. In particular, I expect that the JS output of a plugin developed for Uppy 4.x should work just fine on 3.x (which is the version you should be using in production, definitely!), and vice-versa.

You’re of course welcome to not take my advice, in which case I’m sorry I was not able to help you further. Maybe someone else will chime in with more insight.