Connected Plugins with backend (Part 1)

.gitignore

@@ -1,16 +1,20 @@
 .DS_Store
 server/node_modules/
-client/node_modules/
 node_modules/
-client/dist/
-client/plugins/
-backend/plugins/
 
-client/public/data/
 server/uploads/
+
+# Client
+client/plugins/
+client/dist/
+client/public/data/
+client/node_modules/
 client/src/locales/
 client/public/plugins/
 
+# Backend
+backend/plugins/
+
 # local env files
 .env.local
 .env.*.local

README.md

@@ -15,5 +15,24 @@ Dragonroll is an open source online virtual tabletop aimed to be an alternative
 
 ## Installation 🛠️
 
-TODO
+Run
+```
+./install.sh
+```
 
+This will install all the necesary npm packages both for the frontend and the backend
+
+## Running 🚀
+
+Run
+```
+./start.sh
+```
+
+or
+
+```
+./start-dev.sh
+```
+
+if you want to start the development environment

backend/server.js

@@ -13,6 +13,8 @@ const passport = require('passport');
 const server = http.createServer(app);
 const config = JSON.parse(fs.readFileSync("config.json"));
 
+const pluginManager = require('./services/plugins')
+
 // SET CONSTANTS
 const PORT = 8081;
 global.appRoot = path.resolve(__dirname);
@@ -69,6 +71,8 @@ app.use('/user', require('./routes/user'));
 checkAuth = passport.authenticate('jwt', {session: false});
 app.use(checkAuth);
 
+pluginManager.init();
+
 // ROUTES WITH AUTH
 app.use('/campaign', require('./routes/campaign'));
 app.use('/maps', require('./routes/map'))

backend/services/plugins.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const path = require('path')
+const Api = {}
+
+const basePath = path.resolve(__dirname, '../')
+console.log(basePath)
+
+let pluginsInfo = [];
+let plugins = {};
+
+function init(){
+    console.log("Initializing plugins");
+    const pluginFolders = fs.readdirSync(path.resolve(basePath + '/plugins'));
+    pluginFolders.forEach(pluginFolder => {
+        pluginsInfo.push(JSON.parse(fs.readFileSync(
+            path.resolve(basePath, 'plugins', pluginFolder, "plugin.json")
+        )));
+    });
+    
+    console.log("Launching using the following plugins:");
+    pluginsInfo.forEach(pluginInfo => {
+        console.log(`\t- ${pluginInfo.name}`);
+        plugins[pluginInfo.package] = require(`${basePath}/plugins/${pluginInfo.package}/${pluginInfo.backend.entrypoint}`);
+    });
+
+    // Execute main
+    Object.keys(plugins).forEach(k => {
+        plugins[k].Main(Api)
+    })
+}
+
+module.exports = {
+    init
+}

client/src/services/ContextMenu.js

@@ -26,6 +26,7 @@ function PopulateContext(val){
     let children = [];
 
     let elementNum = 0;
+    console.log(val);
     val.forEach(element => {
         let contextMenuElement = document.createElement('div');
         contextMenuElement.classList.add("context-menu-element");

client/src/views/partials/ConceptEntry.vue

@@ -23,13 +23,13 @@ async function updateElement(){
     if(tooltip) AddTooltip(tooltipContainer.value, tooltip);
 }
 
-onMounted(() => {
+onMounted(async () => {
     updateElement();
     watch(() => props.element, () => {
         updateElement();
     });
 
-    let context = props.context();
+    let context = await props.context();
     if(context) AddContextMenu(elementDiv.value, context);
 })
 </script>

plugins/dnd-5e/backend/main.js

@@ -0,0 +1,6 @@
+// Entrypoint
+function Main(Api){
+    console.log("Hello World from backend!");
+}
+
+export { Main };

plugins/dnd-5e/client/main.js

@@ -1,6 +1,5 @@
-// TODO: We should move client/plugin.json to plugin.json and generate the client plugin.json
-// with the prebuild.js
 
+// Entrypoint
 function Main(Api){
     console.log("Hello World!");
     console.log(Api);

plugins/dnd-5e/plugin.json

@@ -1,4 +1,5 @@
 {
+    "package": "dnd-5e",
     "name": "Dnd 5e System",
     "description": "This plugin provides the Dnd 5e module",
     "authors": [
@@ -9,5 +10,8 @@
     "version": "0.1",
     "client": {
         "entrypoint": "main.js"
+    },
+    "backend": {
+        "entrypoint": "main.js"
     }
 }

plugins/example/plugin.json

@@ -1,4 +1,5 @@
 {
+    "package": "example-plugin"
     "name": "Dragonroll example plugin",
     "description": "This is an example plugin to help you getting started with the Dragonroll API",
     "authors": [

prebuild.js

@@ -97,6 +97,11 @@ for(let j = 0; j < plugins.length; j++){
     fs.copyFileSync(`./plugins/${plugins[j]}/plugin.json`, `./client/plugins/${plugins[j]}/plugin.json`);
   }
 
+  if(fs.existsSync(`./plugins/${plugins[j]}/backend/`)){
+    fs.cpSync(`./plugins/${plugins[j]}/backend/`, `./backend/plugins/${plugins[j]}`, {recursive: true});
+    fs.copyFileSync(`./plugins/${plugins[j]}/plugin.json`, `./backend/plugins/${plugins[j]}/plugin.json`);
+  }
+
   if(fs.existsSync(`./plugins/${plugins[j]}/public/`)){
     fs.cpSync(`./plugins/${plugins[j]}/public/`, `./client/public/plugins/${plugins[j]}`, {recursive: true});
   }