What I want to achieve:
I want to develop a core browser library for a given product. There are some parts where function implementations will differ based on a customization ( let’s call them plugin functions ). I want to avoid having to manage these plugin functions inside the library code, I want to manage them in different code bases and only install them during CI/CD so I can include them in the bundle.
The app configuration tells the system which plugin function to choose, let’s assume customer 1 is going for foo and customer 2 for bar. It would be nice if the core library gets a parameter to identify the correct function to be called.
What I’ve done so far:
During runtime I had no idea how to call an implementation without an “explicit” if-statement. I think the only way that might work is to use decorators. The configuration will contain a unique name so I might search for a given function.
I started with this decorator every plugin should use
function pluginFunc(name: string) {
console.log(`plugin func '${name}'`);
return function (
target: any,
propertyKey: string,
descriptor: PropertyDescriptor
) {
console.log({ name, target, propertyKey, descriptor });
};
}
export { pluginFunc };
And a custom plugin
import { pluginFunc } from "./pluginFunc";
@pluginFunc("foo")
function pluginOne() {
console.log("hello from plugin 1");
}
export { pluginOne }
Now I want to test my approach in a simple index.ts file
/* async */ function callPlugin(name: string) {
// find function by decorator and name and call it
}
callPlugin('foo');
Is it possible to find a function ( without importing it during build time! ) by a decorator pluginFunc and a given name?
If that’s not possible what about the simpler approach to simply call a function by its name ( without importing it ) ?
5
Keep it stupidly simple:
// index.ts
import hooks from './hooks.ts';
hooks.foo();
// hooks.ts
export default {
foo() {}, // noop, or default implementation
};
// plugin.ts
import hooks from './hooks.ts';
hooks.foo = function pluginOne() {
console.log("hello from plugin 1");
};
This is the basic pattern. You can of course make the hook registration more elaborate if you don’t like the simple assignment, and use something like registerHook('foo', function pluginOne() { … }); or those fancy decorators. It is assumed that the plugin.ts is somehow loaded at startup – whether you do that with import './plugin.ts'; somewhere, a special plugin loader function, or through the environment or build process is up to you.
2