React Dynamic Plugin Modules


(Manuel83) #1

Hi

I’m building a basic web application framework based on reactjs. This app is transpiled by using webpack.
Each user of my framework is runing his own web server.

Now I want to build a plugin system which offers the user to extend the core application dynamically.
I like to load dynamically the JavaScript files of each plugin. How can I access from my core app (bundle.js) the plugin modules? For example I like to instanciate a component defined in a plugin from my core app.

webpack chunks are not an option because I like to do this at runtime and the core app should always untouched by a plugin developer. Of course I can request information from a plugin via a REST API from the server. For example to define the entry component or the plugin configuration. Is there maybe a gobal scope where I can register a plugin?

<html>
<head>
<script src="bundle.js" type="text/javascript"></script>
<script src="p1.js" type="text/javascript"></script>
<script src="p2.js" type="text/javascript"></script>
</head>

<body>
   ....
<body>
</html>


Webapp
  |-- bundle.js (transpiled with webpack before)
  |-- index.html
  |-- plugins
        |-- plugin1
        |      |-- p1.js (transpiled at runtime)
        |- plugin 2
               |- p2.js (transpiled at runtime)

Thanks for any hint.
Manuel


(Abel K Bil) #2

Hi Manuel, I am also looking the same,
Did you find any idea, I thing you can use single spa. I cannot, I want it inside a single spa.
What about webcomponents or polymers ?

Thanks for sharing.