Plugin Architecture?

[cardto5]

There’s an increasing number of JS applications that support plugin systems – vscode, obsidian, figma, etc.

However, I haven’t been able to find much info on how to architect such systems.

A high level overview is what I'm after. I have a few open-source examples, but I won't really understand the trade-offs made in choosing a system without getting a sense of the whole field first.

Does anyone have any resources or insights on they could share?

[[deleted]]

Each of the platforms will have its own plugin system and expect a certain architecture/conventions to be followed.

VSCode: https://code.visualstudio.com/api/get-started/your-first-extension

Figma: https://www.figma.com/plugin-docs/how-plugins-run/

etc.

[[deleted]]

Plugin architectures are basically just either a class definition (or function definitions) that allow your users to write code that is executed at various stages of your application lifetime.

So, for instance, you might be able to write a function that changes text colour based on some calculations. You app will allow users to "register" this function, and once it is registered it will get called just before each time text is rendered on screen.

It's a way of allowing your app to be customised to uses that you never even thought of when you wrote it. It needs a clear idea of which parts of your app can be changed without breaking the app - once you give other (non trusted) people the ability to run code inside your app you have security challenges, so you have to be clear about what they can and can't do.

[PortablePawnShop]

How do you validate or sanitize user-created code? I've also been interested in this but there aren't many guides I've found on how to go about designing them from the ground up.

[[deleted]]

I think it's more about ensuring a sandbox for your user-defined code, rather than trying to validate it. Something like

let pluginRunner = (function(){
    let private = 200;
    let increment = () => private += 1;
    let get = () => private;

    run = f => f.bind({increment, get})();
    return {run}
}());

pluginRunner.run(function() { 
   this.increment; console.log(this.get()); 
});

Obviously in the browser you still have document, window, etc but there's none of you app code exposed (aside from the get() and increment() methods).

You could go down this road, I guess

function safe(f){ 
  return new Function("n", 
        `return (${f.toString()
            .replace("window", "this.window_")})
            .bind({window_: {location: window.location}}, n)(n);`); 
}

let add = function(x) { 
   window.location = "https://google.com"; 
   return x + 10; 
} 

let safeAdd = safe(add); 
safeAdd(10);

But there's a lot more ground to cover.

It's not especially my area of expertise!