Add new npm / glup tasks: clone:default_plugins, build:dev_plugins, watch:plugins

README.md

@@ -93,11 +93,15 @@ cd ./g3w-client
 You can start the built-in development servers by using the following:
 
 ```sh
-npm run docker:up # backend server (g3w-admin)
+npm run docker:up      # backend server   (g3w-admin)
 ```
 
 ```sh
-npm run dev       # frontend server (g3w-client)
+npm run dev            # frontend server  (g3w-client)
+```
+
+```sh
+npm run watch:plugins  # watch built-in plugins (editing, qplotly, qtimeseries)
 ```
 
 If everything went fine, you can now visit you local development server URL to see changes, the following rules are applied:
@@ -124,16 +128,40 @@ http://localhost:3000/en/map/eleprofile/qdjango/2 # g3w-client (development)
 
 ### Plugins
 
-If you want develop custom plugins you need to place them in the [`src/plugins`](https://github.com/g3w-suite/g3w-client/blob/dev/src/plugins) folder, below you can see some examples:
+If you want develop client plugins you need place them in the [`src/plugins`](https://github.com/g3w-suite/g3w-client/blob/dev/src/plugins) folder:
+
+```sh
+.
+└── src/
+    └── plugins/
+        ├── base
+        ├── eleprofile
+        ├── sidebar
+        └── ...
+```
+
+Update your [`config.js`](https://github.com/g3w-suite/g3w-client/blob/dev/config.template.js) file accordingly:
+
+```js
+// overrides global `window.initConfig.group.plugins` property for custom plugin development
 
-- [base-template](https://github.com/g3w-suite/g3w-client-plugin-base-template)
-- [editing](https://github.com/g3w-suite/g3w-client-plugin-editing)
-- [eleprofile](https://github.com/g3w-suite/g3w-client-plugin-elevation-profile)
-- [openrouteservice](https://github.com/g3w-suite/g3w-client-plugin-openrouteservice)
-- [qplotly](https://github.com/g3w-suite/g3w-client-plugin-qplotly)
-- [qtimeseries](https://github.com/g3w-suite/g3w-client-plugin-qtimeseries)
-- [queryresult-template](https://github.com/g3w-suite/g3w-client-plugin-queryresult-template)
-- [sidebar-template](https://github.com/g3w-suite/g3w-client-plugin-sidebar-template)
+const G3W_PLUGINS = [
+  'base',
+  'eleprofile',
+  'sidebar',
+  ...
+];
+```
+
+And then start again the development servers:
+
+```sh
+npm run docker:up      # backend server (g3w-admin)
+npm run dev            # frontend server (g3w-client)
+npm run watch:plugins  # watch built-in plugins + any custom plugin (eg. base, eleprofile, sidebar)
+```
+
+For further information about plugin development, see also: [`src/plugins/README.md`](https://github.com/g3w-suite/g3w-client/blob/dev/src/src/plugins/README.md)
 
 ---
 
@@ -214,7 +242,37 @@ For more info:
 
 <details>
 
-<summary>3. How can I translate this project?</summary>
+<summary>3. How can I keep client plugins updated ?</summary>
+
+Currently built-in and custom plugins are managed with several "independent" git repositories, so there is currently no automated task to achieve this.
+
+You can use the following commands to fetch the latest changes of built-in plugins:
+
+```sh
+cd /g3w-client/src/plugins/editing
+
+git pull editing
+```
+
+```sh
+cd /g3w-client/src/plugins/qplotly
+
+git pull qplotly
+```
+
+```sh
+cd /g3w-client/src/plugins/qtimeseries
+
+git pull qtimeseries
+```
+
+If you are looking for an alternative workflow, also try to take a look at [git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules) or [git subtrees](https://www.atlassian.com/git/tutorials/git-subtree)
+
+</details>
+
+<details>
+
+<summary>4. How can I translate this project?</summary>
 
 Depending on your current project version, you can edit one of the following files and then submit a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request):
 

gulpfile.js

@@ -18,6 +18,8 @@ const buffer      = require('vinyl-buffer');
 const source      = require('vinyl-source-stream');
 
 // Node.js
+const exec        = require('child_process').exec;
+const execSync    = require('child_process').execSync;
 const del         = require('del');
 const fs          = require('fs');
 const path        = require('path');
@@ -45,9 +47,27 @@ const g3w         = require('./config');
 let production   = false;
 let outputFolder = g3w.admin_overrides_folder;
 
+// ANSI color codes
+const INFO__ = "\033[0;32m\#\#\# ";
+const __INFO = " \#\#\# \033[0m";
+const H1__ = "\n\n" + INFO__;
+const __H1 = __INFO + "\n";
+
+
 // Retrieve project dependencies ("g3w-client")
 const dependencies = Object.keys(packageJSON.dependencies).filter(dep => dep !== 'vue');
 
+// Built-in client plugins
+const default_plugins = [
+  'editing',
+  'qplotly',
+  'qtimeseries'
+];
+// Locally developed client plugins = [ default_plugins ] + [ g3w.plugins ]
+const dev_plugins = Array.from(new Set(
+  default_plugins.concat(g3w.plugins instanceof Array ? plugins : Object.keys(g3w.plugins))
+));
+
 // production const to set environmental variable
 function setNODE_ENV() {
   process.env.NODE_ENV = production ? 'production' : 'development';
@@ -321,6 +341,62 @@ gulp.task('browser-sync', function() {
   });
 });
 
+/**
+ * Make sure that core client plugins are there
+ * 
+ * [submodule "src/plugins/editing"]     <-- https://github.com/g3w-suite/g3w-client-plugin-editing.git
+ * [submodule "src/plugins/qplotly"]     <-- https://github.com/g3w-suite/g3w-client-plugin-qplotly.git
+ * [submodule "src/plugins/qtimeseries"] <-- https://github.com/g3w-suite/g3w-client-plugin-qtimeseries.git
+ */
+gulp.task('clone:default_plugins', function() {
+  console.log(H1__ + `Cloning default plugins` + __H1);
+  for (const pluginName of default_plugins) {
+    if (!fs.existsSync(`${g3w.pluginsFolder}/${pluginName}/.git`)) {
+      execSync(`git clone https://github.com/g3w-suite/g3w-client-plugin-${pluginName}.git ${g3w.pluginsFolder}/${pluginName}`, {stdio: 'inherit'});
+    }
+    if (!fs.existsSync(`${g3w.pluginsFolder}/${pluginName}/plugin.js`)) {
+      execSync(`gulp --gulpfile ${g3w.pluginsFolder}/${pluginName}/gulpfile.js default`, {stdio: 'inherit'});
+    }
+  }
+});
+
+/**
+ * Make sure that all g3w.plugins bundles are there (NB: without watching them)
+ * 
+ * CORE PLUGINS:
+ * - [submodule "src/plugins/editing"]     --> src/plugins/editing/plugin.js
+ * - [submodule "src/plugins/qplotly"]     --> src/plugins/qplotly/plugin.js
+ * - [submodule "src/plugins/qtimeseries"] --> src/plugins/qtimeseries/plugin.js
+ * 
+ * CUSTOM PLUGINS:
+ * - [submodule "src/plugins/eleprofile"]  --> src/plugins/eleprofile/plugin.js
+ * - [submodule "src/plugins/sidebar"]     --> src/plugins/sidebar/plugin.js
+ */
+gulp.task('build:dev_plugins', function() {
+  for (const pluginName of dev_plugins) {
+    console.log(H1__ + `Building plugin: ${g3w.pluginsFolder}/${pluginName}/plugin.js` + __H1);
+    try {
+      execSync(`gulp --gulpfile ${g3w.pluginsFolder}/${pluginName}/gulpfile.js default`, {stdio: 'inherit'});
+    } catch(e) { /* soft fails on missing `gulp default` task */ }
+  }
+});
+
+/**
+ * Run `gulp watch` on each g3w.plugins folder
+ */
+gulp.task('watch:plugins', function() {
+  for (const pluginName of dev_plugins) {
+    console.log(INFO__ + `Watching plugin: ${g3w.pluginsFolder}/${pluginName}/plugin.js` + __INFO);
+    exec(`gulp --gulpfile ${g3w.pluginsFolder}/${pluginName}/gulpfile.js watch`,
+      (error, stdout, stderr) => {
+        if (error) { console.error(`exec error: ${error}`); return; }
+        console.log(`stdout: ${stdout}`);
+        console.error(`stderr: ${stderr}`);
+      }
+    );
+  }
+});
+
 /**
  * Ask the developer which plugins wants to deploy
  */
@@ -382,7 +458,7 @@ gulp.task('deploy-plugins', function() {
 /**
  * Deploy local developed plugins (src/plugins)
  */
-gulp.task('build:plugins', (done) => runSequence('select-plugins', 'deploy-plugins', done));
+gulp.task('build:plugins', (done) => runSequence('clone:default_plugins', 'select-plugins', 'deploy-plugins', done));
 
 /**
  * Compile and deploy local developed client file assets (static and templates)
@@ -397,8 +473,9 @@ gulp.task('build:client', ['browserify:app', 'concatenate:vendor_js', 'concatena
  */
 gulp.task('build', done => runSequence(
   'production',
-  'clean:admin',
+  // 'clean:admin',
   'clean:overrides',
+  'clone:default_plugins',
   'build:client',
   done
   )
@@ -411,8 +488,10 @@ gulp.task('build', done => runSequence(
  * outputFolder = g3w.admin_overrides_folder
  */
 gulp.task('dev', done => runSequence(
-  'clean:admin',
+  // 'clean:admin',
   'clean:overrides',
+  'clone:default_plugins',
+  'build:dev_plugins',
   'build:client',
   'browser-sync',
   done
@@ -470,11 +549,7 @@ gulp.task('version', function () {
 // Backward compatibilities (v3.x)
 gulp.task('g3w-admin',                           ['build']);
 gulp.task('g3w-admin-plugins-select',            ['build:plugins']);
-gulp.task('g3w-admin-client:static',             ['build:static']);
-gulp.task('g3w-admin-client:template',           ['build:templates']);
 gulp.task('g3w-admin-client',                    ['g3w-admin']);
 gulp.task('g3w-admin:plugins',                   ['build:plugins']);
-gulp.task('g3w-admin:static',                    ['build:static']);
-gulp.task('g3w-admin:templates',                 ['build:templates']);
 gulp.task('serve',                               ['dev']);
 gulp.task('default',                             ['dev']);

package.json

@@ -7,6 +7,7 @@
     "preinstall": "npx npm-force-resolutions",
     "build": "gulp version && gulp build --max-old-space-size=2048",
     "build:plugins": "gulp version && gulp build:plugins",
+    "watch:plugins": "gulp version && gulp watch:plugins",
     "dev": "gulp dev --max-old-space-size=2048",
     "docker": "docker compose --env-file ../g3w-suite-docker/.env --file ../g3w-suite-docker/docker-compose-dev.yml --project-name g3w-suite-docker --project-directory ../g3w-suite-docker",
     "docker:pull": "npm run docker pull",