Use volto.config.js as dynamic configuration for addons. It adds up…

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Feature
 
+- Use `volto.config.js` as dynamic configuration for addons. It adds up to the `package.json` `addons` key, allowing dynamic load of addons (eg. via environment variables) @sneridagh
+
 ### Bugfix
 
 ### Internal

__tests__/addon-registry.test.js

@@ -26,6 +26,7 @@ describe('AddonConfigurationRegistry', () => {
       'test-addon',
       'test-released-addon',
       'test-released-source-addon',
+      'my-volto-config-addon',
       'test-released-dummy',
       'test-released-unmentioned',
     ]);
@@ -60,6 +61,13 @@ describe('AddonConfigurationRegistry', () => {
         name: 'test-released-unmentioned',
         packageJson: `${base}/node_modules/test-released-unmentioned/package.json`,
       },
+      'my-volto-config-addon': {
+        addons: ['test-released-dummy'],
+        isPublishedPackage: false,
+        modulePath: `${base}/addons/my-volto-config-addon/src`,
+        name: 'my-volto-config-addon',
+        packageJson: `${base}/addons/my-volto-config-addon/package.json`,
+      },
       'test-released-dummy': {
         addons: ['test-released-unmentioned'],
         isPublishedPackage: false,
@@ -74,6 +82,7 @@ describe('AddonConfigurationRegistry', () => {
     const base = path.join(__dirname, 'fixtures', 'test-volto-project');
     const reg = new AddonConfigurationRegistry(base);
     expect(reg.getResolveAliases()).toStrictEqual({
+      'my-volto-config-addon': `${base}/addons/my-volto-config-addon/src`,
       'test-addon': `${base}/addons/test-addon/src`,
       'test-released-addon': `${base}/node_modules/test-released-addon`,
       'test-released-dummy': `${base}/addons/test-released-dummy`,
@@ -98,6 +107,7 @@ describe('AddonConfigurationRegistry', () => {
       'test-addon',
       'test-released-addon',
       'test-released-source-addon',
+      'my-volto-config-addon',
     ]);
   });
 

__tests__/fixtures/test-volto-project/addons/my-volto-config-addon/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "test-addon",
+  "customizationPaths": [
+    "src/custom-addons"
+  ],
+  "addons": [
+    "test-released-dummy"
+  ]
+}

__tests__/fixtures/test-volto-project/jsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "paths": {
       "test-addon": ["test-addon/src"],
-      "test-released-dummy": ["test-released-dummy"]
+      "test-released-dummy": ["test-released-dummy"],
+      "my-volto-config-addon": ["my-volto-config-addon/src"]
     },
     "baseUrl": "addons"
   }

__tests__/fixtures/test-volto-project/volto.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  addons: ['my-volto-config-addon'],
+};

addon-registry.js

@@ -99,13 +99,26 @@ class AddonConfigurationRegistry {
       projectRootPath,
       'package.json',
     )));
+    // Loads the dynamic config, if any
+    if (fs.existsSync(path.join(projectRootPath, 'volto.config.js'))) {
+      this.voltoConfigJS = require(path.join(
+        projectRootPath,
+        'volto.config.js',
+      ));
+    } else {
+      this.voltoConfigJS = [];
+    }
+    this.resultantMergedAddons = [
+      ...(packageJson.addons || []),
+      ...(this.voltoConfigJS.addons || []),
+    ];
 
     this.projectRootPath = projectRootPath;
     this.voltoPath =
       packageJson.name === '@plone/volto'
         ? `${projectRootPath}`
         : `${projectRootPath}/node_modules/@plone/volto`;
-    this.addonNames = (packageJson.addons || []).map((s) => s.split(':')[0]);
+    this.addonNames = this.resultantMergedAddons.map((s) => s.split(':')[0]);
     this.packages = {};
     this.customizations = new Map();
 
@@ -114,7 +127,7 @@ class AddonConfigurationRegistry {
     this.initTestingPackages();
 
     this.dependencyGraph = buildDependencyGraph(
-      packageJson.addons || [],
+      this.resultantMergedAddons,
       (name) => {
         this.initPublishedPackage(name);
         return this.packages[name].addons || [];

docs/mkdocs.yml

@@ -31,6 +31,7 @@ nav:
       - Settings reference guide: 'configuration/settings-reference.md'
       - Zero config builds: 'configuration/zero-config-builds.md'
       - Internal proxy: 'configuration/internalproxy.md'
+      - Dynamic Volto Addons Configuration: 'configuration/volto-config-js.md'
       - Backend configuration: 'configuration/backend.md'
       - Richeditor settings: 'configuration/richeditor-settings.md'
       - Multilingual: 'configuration/multilingual.md'

docs/source/configuration/volto-config-js.md

@@ -0,0 +1,21 @@
+# Dynamic Volto Addons Configuration
+
+There are some cases where defining the Volto addons your project is going to use is not enough, and you need more control over it. For example, when you have several builds under the umbrella of the same project that share the core of the code, but each build have special requirements, like other CSS, customizations, shadowing or the features of other addons available.
+
+There is a scapehatch `volto.config.js`. This module exports an object and can have arbitrary code depending on your needs:
+
+```js
+let addons = [];
+if (process.env.MY_SPECIAL_CUSTOM_BUILD) {
+  addons = ['volto-custom-addon'];
+}
+
+module.exports = {
+  addons: addons,
+};
+
+```
+
+In the case above, we delegate to the presence of an environment variable (MY_SPECIAL_CUSTOM_BUILD) the use of the list of addons specified.
+
+This list, sums up to the one defined in `package.json` (it does not override it), and the addons added are placed at the end of the addons list, so the config in there is applied after the ones in the `package.json`.

razzle.config.js

@@ -227,7 +227,7 @@ const defaultModify = ({
     include.push(fs.realpathSync(`${registry.voltoPath}/src`));
   }
   // Add babel support external (ie. node_modules npm published packages)
-  if (packageJson.addons) {
+  if (registry.addonNames && registry.addonNames.length > 0) {
     registry.addonNames.forEach((addon) => {
       const p = fs.realpathSync(registry.packages[addon].modulePath);
       if (include.indexOf(p) === -1) {

volto.config.js

@@ -1,3 +1,3 @@
-export default function applyConfig(config) {
-  return config;
-}
+module.exports = {
+  addons: [],
+};