Designing a Minimal JavaScript Plugin System

Plugins are a common feature of libraries and frameworks because they let developers add functionality in a safe, extensible way, fostering community contributions without increasing maintenance burden.

We start with a tiny calculator called BetaCalc implemented as an object literal that exposes setValue , plus , and minus methods and logs results via console.log :

const betaCalc = {
  currentValue: 0,
  setValue(newValue) {
    this.currentValue = newValue;
    console.log(this.currentValue);
  },
  plus(addend) {
    this.setValue(this.currentValue + addend);
  },
  minus(subtrahend) {
    this.setValue(this.currentValue - subtrahend);
  }
};

betaCalc.setValue(3); // => 3
betaCalc.plus(3);   // => 6
betaCalc.minus(2);  // => 4

To make the calculator extensible we introduce a register method that accepts a plugin object containing a name and an exec function, attaching the function to the calculator under the given name:

const betaCalc = {
  // ...other calculator code
  register(plugin) {
    const { name, exec } = plugin;
    this[name] = exec;
  }
};

An example squared plugin adds a new button that squares the current value:

const squaredPlugin = {
  name: 'squared',
  exec: function() {
    this.setValue(this.currentValue * this.currentValue);
  }
};

betaCalc.register(squaredPlugin);

After registration the calculator can call betaCalc.squared() repeatedly, producing 25, then 625, and so on.

While this minimal system works, it gives plugins full access to the calculator’s internal state via this , violating the Open/Closed Principle and making it easy for a plugin to unintentionally modify core behavior.

To improve safety we redesign the architecture: core arithmetic functions live in a core object, plugins are stored in a separate plugins map, and a new press method looks up a button name in either core or plugins , passes the current value to the plugin’s exec , and sets the returned value.

const betaCalc = {
  currentValue: 0,
  setValue(value) {
    this.currentValue = value;
    console.log(this.currentValue);
  },
  core: {
    plus: (currentVal, addend) => currentVal + addend,
    minus: (currentVal, subtrahend) => currentVal - subtrahend
  },
  plugins: {},
  press(buttonName, newVal) {
    const func = this.core[buttonName] || this.plugins[buttonName];
    this.setValue(func(this.currentValue, newVal));
  },
  register(plugin) {
    const { name, exec } = plugin;
    this.plugins[name] = exec;
  }
};

const squaredPlugin = {
  name: 'squared',
  exec: function(currentValue) {
    return currentValue * currentValue;
  }
};

betaCalc.register(squaredPlugin);

betaCalc.setValue(3);          // => 3
betaCalc.press('plus', 2);     // => 5
betaCalc.press('squared');     // => 25
betaCalc.press('squared');     // => 625

This structure isolates plugins from the calculator’s internal properties, makes each button a pure function, simplifies testing, and reduces coupling. However, it also limits plugins to operate only on currentValue , so more advanced features like memory or history would require further extensions.

The article concludes by suggesting additional improvements such as error handling for missing plugin metadata, lifecycle callbacks, initial configuration, and grouping related buttons into packs, encouraging developers to study existing JavaScript plugin ecosystems (e.g., jQuery, Gatsby, D3, CKEditor) and design patterns to build robust, community‑friendly extensions.