|
| 1 | +# js-plugin Reference |
| 2 | + |
| 3 | +`js-plugin` is a lightweight, general-purpose plugin engine for building extensible JavaScript applications. It provides the **extension point** pattern that lets independent features discover and integrate with each other without direct coupling. |
| 4 | + |
| 5 | +Works in both browser and Node.js environments. If you need to understand internals (caching, registration ordering, invocation mechanics), read the source directly — it's ~150 lines. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## The Problem It Solves |
| 10 | + |
| 11 | +Without a plugin system, adding features requires modifying shared files that every feature touches: |
| 12 | + |
| 13 | +```javascript |
| 14 | +// menu.js — WITHOUT js-plugin |
| 15 | +function Menu() { |
| 16 | + return ( |
| 17 | + <ul> |
| 18 | + <li>Profile</li> |
| 19 | + <li>Account</li> |
| 20 | + {/* Every new feature must edit this file */} |
| 21 | + <li>Blocked Users</li> |
| 22 | + <li>API Keys</li> |
| 23 | + </ul> |
| 24 | + ); |
| 25 | +} |
| 26 | +``` |
| 27 | + |
| 28 | +**With js-plugin**, each feature registers its own contributions, and shared components collect them dynamically: |
| 29 | + |
| 30 | +```javascript |
| 31 | +// menu.js — WITH js-plugin |
| 32 | +import plugin from 'js-plugin'; |
| 33 | + |
| 34 | +function Menu() { |
| 35 | + const items = plugin.invoke('menu.getItems'); |
| 36 | + return <ul>{items.map(item => <li key={item.key}>{item.label}</li>)}</ul>; |
| 37 | +} |
| 38 | + |
| 39 | +// blocked-users/index.js |
| 40 | +plugin.register({ |
| 41 | + name: 'blocked-users', |
| 42 | + menu: { getItems: () => ({ key: 'blocked', label: 'Blocked Users' }) } |
| 43 | +}); |
| 44 | + |
| 45 | +// api-keys/index.js |
| 46 | +plugin.register({ |
| 47 | + name: 'api-keys', |
| 48 | + menu: { getItems: () => ({ key: 'api-keys', label: 'API Keys' }) } |
| 49 | +}); |
| 50 | +``` |
| 51 | + |
| 52 | +`menu.js` never changes when features are added or removed. Each feature's code stays self-contained. |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +## API Reference |
| 57 | + |
| 58 | +### `plugin.register(pluginObject)` |
| 59 | + |
| 60 | +Register a feature plugin. Call this at module top-level in the feature's entry file, before the app renders. |
| 61 | + |
| 62 | +```javascript |
| 63 | +import plugin from 'js-plugin'; |
| 64 | + |
| 65 | +plugin.register({ |
| 66 | + name: 'notifications', // Required: unique identifier |
| 67 | + deps: ['auth'], // Optional: plugins that must be registered first |
| 68 | + initialize() { // Optional: called immediately after registration |
| 69 | + console.log('notifications ready'); |
| 70 | + }, |
| 71 | + // Everything else is an extension point contribution: |
| 72 | + menu: { |
| 73 | + getItems: () => [{ key: 'notif', label: 'Notifications', order: 20 }] |
| 74 | + }, |
| 75 | + route: { path: '/notifications', component: NotificationsPage } |
| 76 | +}); |
| 77 | +``` |
| 78 | + |
| 79 | +- If a declared `deps` entry is missing from the registry, the plugin is excluded from all invocations and a console warning is logged. |
| 80 | +- Never register conditionally — plugins should be statically registered. |
| 81 | + |
| 82 | +--- |
| 83 | + |
| 84 | +### `plugin.invoke(extPoint, ...args)` |
| 85 | + |
| 86 | +Collect contributions from all plugins that implement an extension point. Returns an array — one entry per contributing plugin. |
| 87 | + |
| 88 | +| Syntax | Behavior | |
| 89 | +|---|---| |
| 90 | +| `plugin.invoke('a.b')` | Calls `a.b` as a function if it is one; otherwise returns the value | |
| 91 | +| `plugin.invoke('!a.b')` | Always returns the value without calling, even if it's a function | |
| 92 | +| `plugin.invoke('a.b!')` | Same as default, but throws errors instead of swallowing them | |
| 93 | + |
| 94 | +```javascript |
| 95 | +// Call a lifecycle hook on every feature |
| 96 | +plugin.invoke('onInit'); |
| 97 | + |
| 98 | +// Collect plain values |
| 99 | +const routes = plugin.invoke('!route'); |
| 100 | +// → [{ path: '/a', component: A }, { path: '/b', component: B }] |
| 101 | + |
| 102 | +// Call with arguments |
| 103 | +const items = plugin.invoke('menu.getItems', currentUser); |
| 104 | +// → calls menu.getItems(currentUser) on each plugin that defines it |
| 105 | + |
| 106 | +// Collect functions to call later |
| 107 | +const getters = plugin.invoke('!getHeaderWidget'); |
| 108 | +// → [fn1, fn2] — call when ready: getters.map(fn => fn()) |
| 109 | +``` |
| 110 | + |
| 111 | +--- |
| 112 | + |
| 113 | +### `plugin.getPlugin(name)` |
| 114 | + |
| 115 | +Look up a specific plugin by name. Returns the plugin object or `undefined`. |
| 116 | + |
| 117 | +```javascript |
| 118 | +const auth = plugin.getPlugin('auth'); |
| 119 | +if (auth) { |
| 120 | + const user = auth.exports.getCurrentUser(); |
| 121 | +} |
| 122 | +``` |
| 123 | + |
| 124 | +**Never call at module top-level** — the registry populates as modules load, so other plugins may not be registered yet: |
| 125 | + |
| 126 | +```javascript |
| 127 | +// ❌ Too early |
| 128 | +const auth = plugin.getPlugin('auth'); |
| 129 | + |
| 130 | +// ✅ Inside a function, called after all plugins are loaded |
| 131 | +function handleLogin() { |
| 132 | + const auth = plugin.getPlugin('auth'); |
| 133 | + auth?.exports.login(); |
| 134 | +} |
| 135 | +``` |
| 136 | +
|
| 137 | +--- |
| 138 | +
|
| 139 | +### `plugin.getPlugins(extPoint?)` |
| 140 | +
|
| 141 | +Get all plugins contributing to an extension point. Omit the argument to get all registered plugins. |
| 142 | +
|
| 143 | +```javascript |
| 144 | +const all = plugin.getPlugins(); |
| 145 | +const routed = plugin.getPlugins('route'); |
| 146 | +const contributors = plugin.getPlugins('menu.getItems'); |
| 147 | +``` |
| 148 | +
|
| 149 | +Plugins with unresolved dependencies are automatically excluded. |
| 150 | +
|
| 151 | +--- |
| 152 | +
|
| 153 | +### `plugin.sort(array, sortProp?)` |
| 154 | +
|
| 155 | +Sort an array of objects by a numeric property (default: `'order'`), in-place. Objects missing the property go to the end. |
| 156 | +
|
| 157 | +```javascript |
| 158 | +const items = plugin.invoke('menu.getItems').flat(); |
| 159 | +plugin.sort(items); // sorts by item.order |
| 160 | +``` |
| 161 | +
|
| 162 | +--- |
| 163 | +
|
| 164 | +### `plugin.unregister(name)` |
| 165 | +
|
| 166 | +Remove a plugin from the registry. Mainly useful in tests and hot-reload scenarios. |
| 167 | +
|
| 168 | +--- |
| 169 | +
|
| 170 | +### `plugin.config` |
| 171 | +
|
| 172 | +```javascript |
| 173 | +plugin.config.throws = true; // Make all invocations throw on error |
| 174 | +``` |
| 175 | +
|
| 176 | +--- |
| 177 | +
|
| 178 | +## Exports Pattern |
| 179 | +
|
| 180 | +`exports` is a js-plugin convention for sharing APIs, utilities, components, or services between features. Define an `exports` property on your plugin registration — other features access it via `plugin.getPlugin()`. |
| 181 | +
|
| 182 | +```javascript |
| 183 | +// feature-a/index.js |
| 184 | +import plugin from 'js-plugin'; |
| 185 | +import * as hooks from './hooks'; |
| 186 | +import * as utils from './utils'; |
| 187 | +import apiClient from './apiClient'; |
| 188 | + |
| 189 | +plugin.register({ |
| 190 | + name: 'feature-a', |
| 191 | + exports: { |
| 192 | + hooks, // e.g. useFeatureAData, useFeatureAAuth |
| 193 | + utils, // e.g. formatItem, parseConfig |
| 194 | + apiClient // configured axios instance or similar |
| 195 | + } |
| 196 | +}); |
| 197 | +``` |
| 198 | +
|
| 199 | +```javascript |
| 200 | +// feature-b/SomeComponent.jsx |
| 201 | +import plugin from 'js-plugin'; |
| 202 | + |
| 203 | +function SomeComponent() { |
| 204 | + const { hooks, utils } = plugin.getPlugin('feature-a')?.exports || {}; |
| 205 | + const data = hooks?.useFeatureAData(); |
| 206 | + // ... |
| 207 | +} |
| 208 | +``` |
| 209 | +
|
| 210 | +**When to use exports vs extension points:** |
| 211 | +
|
| 212 | +- Use **exports** when one feature needs to *consume* APIs or code owned by another — hooks, utilities, configured service clients, shared components. |
| 213 | +- Use **extension points** when a feature wants to let others *contribute* capabilities to it. Exports create direct coupling; extension points stay loose. |
| 214 | +
|
| 215 | +**Avoid calling `plugin.getPlugin()` at module top level** — the registry may not be fully populated yet when the module first evaluates. Always call it inside a function, component, or hook. |
| 216 | +
|
| 217 | +```javascript |
| 218 | +// ❌ Too early — feature-a may not be registered yet |
| 219 | +const { hooks } = plugin.getPlugin('feature-a').exports; |
| 220 | + |
| 221 | +// ✅ Inside a function — safe |
| 222 | +function MyComponent() { |
| 223 | + const { hooks } = plugin.getPlugin('feature-a')?.exports || {}; |
| 224 | +} |
| 225 | +``` |
| 226 | +
|
| 227 | +Document your feature's exports in its `FEATURE_SPEC.md` so other features know what's available and how to access it. |
| 228 | +
|
| 229 | +--- |
| 230 | +
|
| 231 | +## Extension Point Conventions |
| 232 | +
|
| 233 | +### Use nested objects, not string keys |
| 234 | +
|
| 235 | +Extension points are resolved by traversing object properties, not by parsing dot-notation strings: |
| 236 | +
|
| 237 | +```javascript |
| 238 | +// ✅ Correct |
| 239 | +plugin.register({ |
| 240 | + name: 'my-feature', |
| 241 | + layout: { sidebar: { getItems: () => [...] } } |
| 242 | +}); |
| 243 | + |
| 244 | +// ❌ Wrong — string path keys are not traversed |
| 245 | +plugin.register({ |
| 246 | + name: 'my-feature', |
| 247 | + 'layout.sidebar.getItems': () => [...] |
| 248 | +}); |
| 249 | +``` |
| 250 | +
|
| 251 | +### Extension points are implicitly defined |
| 252 | +
|
| 253 | +There is no central registry of extension points. A point exists when a consumer calls `plugin.invoke('some.point')` and contributors register a matching property path. Document your feature's extension points in `FEATURE_SPEC.md` so other features know how to contribute. |
| 254 | +
|
| 255 | +### Two roles for every extension point |
| 256 | +
|
| 257 | +```javascript |
| 258 | +// Provider — defines the extension point by consuming it |
| 259 | +function Sidebar() { |
| 260 | + const items = plugin.invoke('sidebar.getItems').flat(); |
| 261 | + plugin.sort(items); |
| 262 | + return <nav>{items.map(renderItem)}</nav>; |
| 263 | +} |
| 264 | + |
| 265 | +// Contributor — any feature that wants to appear in the sidebar |
| 266 | +plugin.register({ |
| 267 | + name: 'reports', |
| 268 | + sidebar: { getItems: () => [{ key: 'reports', label: 'Reports', order: 40 }] } |
| 269 | +}); |
| 270 | +``` |
0 commit comments