Plugin system architecture

readme.md

Inspiration

• Gatsby
• Sketch

https://www.smashingmagazine.com/2017/08/create-sketch-plugin-front-end-technologies/

• Codemirror
• VS Code
• Insomnia
• Chrome extensions

Gatsby plugin browser APIs

How to use react component in Angular Using Vue component via custom elements in Angular

Dynamically load component

https://www.gistia.com/angular-dynamic-components/

https://angular.io/guide/dynamic-component-loader

https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6

https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d

https://jaxenter.com/dynamically-create-component-angular-142720.html

https://malcoded.com/posts/angular-dynamic-components/

https://medium.com/front-end-weekly/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

Using ng-container, ng-template, ng-content

https://blog.bitsrc.io/how-to-build-dynamic-components-in-angular-6-41f50abddc64

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

http://nataliesmith.ca/blog/ngtemplate-ngcontainer-ngcontent

Runtime compilation

https://github.com/DenysVuika/ng2-dynamic-content/blob/master/app/runtime-content.component.ts

---

LukasBombach/react-web-component#13 (comment)

https://editorjs.io/the-first-plugin

plugin/manifest.json

{
  "manifest_version": 1,
  "name" : "cool-plugin",
  "version" : "1.0.0",
  "description" : "A cool plugin for Altair GraphQL",
  "authorEmail" : "youremail@example.com",
  "author" : "Your Name",
  "type": "sidebar",
  "sidebar_opts": {
    "element_name": "cool-plugin",
    "icon": "path/to/icon.png"
  },
  "scripts": [
    "path/to/script.js"
  ],

  "commands" : [
    {
      "handler" : "onRun",
      "shortcut" : "ctrl alt q",
      "name" : "Export All Symbols",
      "identifier" : "show-symbol-exporter-ui"
    }
  ],

Called when the plugin is being installed plugin.install(context) => { element }

context

• document
• store

PluginManager

• installPlugin

Add plugin to registry.

• listPlugins
• removePlugin

Sidebar

Plugin component placeholder. Render content with custom element. Pass all props to custom element.

Install plugins as npm packages into directory in electron apps. https://github.com/tristanMatthias/yarn-programmatic/blob/master/commands/add.js

https://github.com/getinsomnia/insomnia/blob/develop/packages/insomnia-app/app/plugins/index.js

Altair.init('#root', {
  query: ``,
  plugins: [{ name: 'xxx' }, {}]
});

Plugin registries

Plugins can be searched from npm, yarn, github. Served through jsdelivr.com

https://www.codeguru.com/cpp/misc/misc/plug-insadd-ins/article.php/c3879/Plugin-Architecture-Framework-for-Beginners.htm

https://www.goetas.com/blog/modular-application-architecture-intro/

https://blog.ircmaxell.com/2012/03/handling-plugins-in-php.html

https://www.chartjs.org/docs/latest/developers/plugins.html