[Idea/v9] Redesign the plugin system

[idiotWu]

Discussed in #393

^{Originally posted by idiotWu October 19, 2021}

Motivation

The plugin system in smooth-scrollbar@8 is great, but it lacks flexibility due to the declarative configurations. For example, the following code is quite common when using the overscroll plugin:

// enable the plugin globally
Scrollbar.use(OverscrollPlugin);

// turn it on
const s1 = Scrollbar.init(elem, {
  plugins: {
    overscroll: {
      effect: 'bounce',
      // add scrolling listener
      onScroll(position) {
        // do something
      },
    },
  },
});

// turn it off on another scrollbar
const s2 = Scrollbar.init(anotherElem, {
  plugins: {
    overscroll: false,
  },
});

// switch the overscroll effect on the first scrollbar
s1.updatePluginOptions('overscroll', {
  effect: 'glow',
});

So far so good, huh? But what if we want to turn off the overscroll plugin on s1? Or if we want to add more listeners to the plugin? The current design just doesn't allow you to do so.

// turn of the plugin? ❌
s1.updatePluginOptions('overscroll', false); 

// add more listeners? ❌
s1.updatePluginOptions('overscroll', {
  onScroll() {
    // ...
  },
}); 

Besides, the current plugin system requires you to add a static member pluginName to identify the plugin, otherwise you can not change the plugin options later:

class MyPlugin extends ScrollbarPlugin {
  // why should I do this stupid stuff???
  static pluginName = 'myPlugin';
}

Proposal

In the next major release, I'd like to redesign the plugin system so that we can use it more programmatically. Instead of passing a bunch of options, we can use the new operator to construct plugins, for example:

// init the plugin
const overscrollPlugin = new OverscrollPlugin({
  effect: 'bounce',
});

// init the scrollbar (we may also remove the unnecessary `Scrollbar.init()` method in the next version)
const scrollbar = new Scrollbar(elem, {
  plugins: [overscrollPlugin, /* others... */]
});

// attach listeners
overscrollPlugin.addListener((position) => {
  // do something
});

// switch overscroll effect
overscrollPlugin.setEffect('glow');

// disable the plugin...
overscrollPlugin.disable();

// ...and re-enable it
overscrollPlugin.enable();

Interface

class ScrollbarPlugin {
  enabled = true;

  #scrollbar: Scrollbar;

  // will be called when scrollbar initializes
  init(s: Scrollbar) {
    this.#scrollbar = s;
  }

  enable() {
    this.enabled = true;
  }

  disable() {
    this.enabled = false;
  }

  onInit() {}
  onDestroy() {}

  onUpdate() {}
  onRender(remainMomentum: Vec2) {}

  transformDelta(delta: Vec2, evt: Event): Vec2 {
    return { ...delta };
  }
}