Plugins!

[inorganik]

Recently, @msoler75 made PR #304 into CountUp with a new animation style:

It's very cool! But rather than merge his code, (about 130 lines) I would like to create a plugin interface for CountUp. This would allow plugin authors to get credit for and maintain their code, prevent shipping unused code, and allow for endless alternative animations of CountUp.

As part of supporting plugins, I would like to call out each available plugin in the README of CountUp with a sample gif, explanation, package name and author credit. I would also add an explanation of how to use plugins in general.

Which brings me to the API. Marcel's code gets invoked in printValue, and just needs a reference to this.el. So if plugins where exported as a class with a render function, we could use it like this:

import { CountUp } from 'countup.js';
import { Odometer } from 'countup-odometer'; // just an idea for the name

const odometerPlugin = new Odometer({
  duration: 1,
  delay: 0.3,
  // etc... any options the plugin author wants
});
const numAnim = new CountUp('targetId', 5234, {
  plugin: odometerPlugin
});
numAnim.start();

The plugin interface could look like this. It just needs to implement a render function that accepts the target element and a string of the formatted number. Render would get called in place of the existing printValue on each frame.

export declare interface CountUpPlugin {
   render(elem: HTMLElement | HTMLInputElement, formatted: string): void;
}

So the Odometer class might look something like this:

export class Odometer implements CountUpPlugin {
  // ...some properties here

  constructor(options: OdometerOptions) {
    // ...setup code
  }

  render(elem: HTMLElement | HTMLInputElement, formatted: string): void {
    // render DOM here
  }
}

Thoughts?

[inorganik]

It occurred to me that this particular plugin would not support input elements... that's ok.

[msoler75]

Good suggestion. I am waiting for the next version to create the odometer plugin with this simple and effective interface :)

[msoler75]

Ready! You can check https://github.com/msoler75/odometer_countup.js and test it?

[inorganik]

This looks good. Were you able to publish an npm package?

[inorganik]

Looks good to me! Can you publish a package on npm and add install instructions to your repo? Once that is done I will update the README and link to your repo.

[inorganik]

@msoler75 just wanted to check in. Were you able to publish your plugin? I'd love to add it to the countUp README

[msoler75]

Hello, sorry for the delay, here is the package odometer_countup

[inorganik]

Awesome! Thanks Marcel. I will update the README on CountUp. One small feedback, I see in your example you are importing the packages from urls, but in most every use-case they will import from the package, like the following:

import { Odometer } from 'odometer_countup';

[inorganik]

Also, looks like the default distribution is umd, so you are not able to import it like that anyway... I will try to make a PR soon into your repo to address those things