Merge branch 'main' into slots-base

* main:
  Fix require load of CJS config from ESM module (#6458)
  Fix redirects (#6457)
  Clean up add-on-registry.md docs (#6456)

docs/source/tutorials/index.md

@@ -40,8 +40,8 @@ In recent years the React based Volto frontend for Plone has been presented in m
 
 ### PloneConf 2023
 
--   [State of Plone Keynote](https://www.youtube.com/watch?v=jl19wuC0wtw&list=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&index=1)
--   [Piero Nicolli - Theming Volto in 2024](https://www.youtube.com/watch?v=LkPOsIn1jYY&list=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&index=6)
+-   [State of Plone Keynote](https://www.youtube.com/watch?v=jl19wuC0wtw&%3Blist=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&%3Bindex=1)
+-   [Piero Nicolli - Theming Volto in 2024](https://www.youtube.com/watch?v=LkPOsIn1jYY&%3Blist=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&%3Bindex=6)
 -   [Víctor Fernández de Alba - Breaking boundaries: Plone as headless CMS](https://www.youtube.com/watch?v=43LVtjYyo28&list=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&index=7)
 -   [Rob Gietema - How to build a site using Nick](https://www.youtube.com/watch?v=ZbdYvNAnamM&list=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&index=18)
 -   [Alok Kumar - Is your Volto add-on developer friendly?](https://www.youtube.com/watch?v=E6fH3NhR2Hc&list=PLGN9BI-OAQkSXMXVBXLWQAQr0AF2xM_NU&index=20)
@@ -56,14 +56,14 @@ In recent years the React based Volto frontend for Plone has been presented in m
 Plone 6 site presentations:
 
 -   [Rai Way: Plone6 supporting the world of italian information, sports and entertainment](https://www.youtube.com/watch?v=hHHGlSjf5O4&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
--   [How Plone Powers Hundreds of Websites at one of the Largest Research Institutions in Europe](https://www.youtube.com/watch?v=bxWt-GEmPcc&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
+-   [How Plone Powers Hundreds of Websites at one of the Largest Research Institutions in Europe](https://www.youtube.com/watch?v=bxWt-GEmPcc&%3Blist=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
 
 Developer/integrator talks:
 
 -   [Anatomy of a Volto project](https://www.youtube.com/watch?v=JtNufyFlgc8&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
--   [Creating a Volto Theme](https://www.youtube.com/watch?v=AMHN74Jr27Y&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
+-   [Creating a Volto Theme](https://www.youtube.com/watch?v=AMHN74Jr27Y&%3Blist=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
 -   [A Deep Dive Into Internals Of Volto](https://www.youtube.com/watch?v=sMeTDRgp3uI&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
--   [DevOps Bird's Eye View on the Plone 6 Backend](https://www.youtube.com/watch?v=L5PvGwWC9P4&list=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
+-   [DevOps Bird's Eye View on the Plone 6 Backend](https://www.youtube.com/watch?v=L5PvGwWC9P4&%3Blist=PLGN9BI-OAQkQxqQcCZeJefMC8XlA_qv3Z)
 
 
 ### Previous PloneConfs
@@ -78,5 +78,5 @@ World Plone Day is a 24-hour streaming event, with the goal was to promote and e
 
 -   [Plone 6 Volto's Seamless Mode](https://www.youtube.com/watch?v=Mj8pHRBls-w&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL)
 -   [Volto add ons separator and carousel](https://www.youtube.com/watch?v=eyTMI5TYcVg&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL)
--   [Weekly Volto Live – Retrospective](https://www.youtube.com/watch?v=WT6OjkSrB20&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL)
+-   [Weekly Volto Live – Retrospective](https://www.youtube.com/watch?v=WT6OjkSrB20&%3Blist=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL)
 -   [Migrating from Classic to Volto](https://www.youtube.com/watch?v=09fg456T90s&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL)

packages/registry/Makefile

@@ -83,8 +83,8 @@ docs-rtd-registry: ## Build Plone Registry docs on RTD
 
 ## Build
 
-.PHONY: rename-to-cjs
-rename-to-cjs: ## Rename the built files js -> cjs
+.PHONY: fix-build
+fix-build: ## Rename the built files js -> cjs and fix import.meta.url appearences in cjs
 	mv dist/cjs/addon-registry.js dist/cjs/addon-registry.cjs
 	mv dist/cjs/create-addons-loader.js dist/cjs/create-addons-loader.cjs
 	mv dist/cjs/create-theme-loader.js dist/cjs/create-theme-loader.cjs

packages/registry/__tests__/fixtures/test-app/package.json

@@ -1,3 +1,4 @@
 {
-  "name": "test-app"
+  "name": "test-app",
+  "type": "module"
 }

packages/registry/__tests__/fixtures/test-app/registry.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  addons: ['@plone/slots', 'my-addon'],
-};
+const addons = ['@plone/slots', 'my-addon'];
+
+export { addons };

packages/registry/docs/conceptual-guides/add-on-registry.md

@@ -19,20 +19,20 @@ The add-on registry can be queried, so it can provide a list of add-ons installe
 ## What is an add-on?
 
 Add-on packages are just CommonJS or ESM packages.
-Their main purpose is to encapsulate logic, configuration and customizations in a reusable way.
-The only requirement is that their primary entry point (the `main` key of their `package.json`) points to a module that exports a default function, which acts as a default configuration loader for that package.
+Their main purpose is to encapsulate logic, configuration, and customizations in a reusable way.
+The only requirement is that their primary entry point (the `main` key of their {file}`package.json`) points to a module that exports a default function, which acts as a default configuration loader for that package.
 
-Add-ons are applied in the order they are declared in the `addons` key of {file}`package.json` or programatically via a provided configuration file.
+Add-ons are applied in the order they are declared in the `addons` key of {file}`package.json` or programmatically via a provided configuration file.
 Add-ons can override configuration coming from other add-ons, providing a hierarchy of configuration stacks.
 
 An add-on can be published in an npm registry, just as any other package.
-However, add-ons are meant to not be transpiled, but built along with your app code.
+However, add-ons are meant not to be transpiled, but built along with your app code.
 They can be released as "source" packages or used directly in your app as local code.
 
-Add-ons can define shadowed components.
-"Component shadowing" is a technique for overriding modules of other packages at build time.
-This technique builds upon the `resolve.aliases` facilities of bundlers, so modules can be replaced when the app is being built.
-
 Add-ons can be chained, where each one can configure the app in some way.
 If needed, each add-on in the chain can override or extend the previous configuration that other add-ons set.
 Thus, the order in which you register add-ons matters.
+
+Add-ons can define shadowed components.
+"Component shadowing" is a technique for overriding modules of other packages at build time.
+This technique builds upon the `resolve.aliases` facilities of bundlers, so modules can be replaced when the app is being built.

packages/registry/news/6458.bugfix

@@ -0,0 +1 @@
+Fix ERR_REQUIRE from ESM module requiring CJS module. @sneridagh

packages/registry/news/6458.feature

@@ -0,0 +1 @@
+Allow any type `js`, `cjs`, `mjs`, `ts` as configuration for the add-on registry. @sneridagh

packages/registry/package.json

@@ -73,7 +73,7 @@
     "build": "parcel build && pnpm build:node:esm && pnpm build:node:cjs",
     "build:force": "rm -rf dist && parcel build --no-cache && pnpm build:node:esm && pnpm build:node:cjs",
     "build:node:esm": "tsc --project tsconfig.node.json || true",
-    "build:node:cjs": "tsc --project tsconfig.node.json --module commonjs --moduleResolution Node --outDir dist/cjs || true && make rename-to-cjs",
+    "build:node:cjs": "tsc --project tsconfig.node.json --module commonjs --moduleResolution Node --outDir dist/cjs || true && make fix-build",
     "test": "vitest",
     "test:debug": "vitest --inspect-brk --no-file-parallelism registry",
     "dry-release": "release-it --dry-run",
@@ -91,6 +91,7 @@
     }
   },
   "dependencies": {
+    "auto-config-loader": "^1.7.7",
     "crypto-random-string": "3.2.0",
     "debug": "4.3.2",
     "dependency-graph": "0.10.0",

packages/registry/src/addon-registry/addon-registry.ts

@@ -4,8 +4,11 @@ import path from 'path';
 import fs from 'fs';
 import _debug from 'debug';
 import { DepGraph } from 'dependency-graph';
+import { createRequire } from 'node:module';
+import { autoConf, jsLoader, getConfigPath } from 'auto-config-loader';
 
-const debug = _debug('shadowing');
+const debugShadowing = _debug('shadowing');
+const debugConfig = _debug('config');
 
 export type Package = {
   name: string;
@@ -247,34 +250,55 @@ class AddonRegistry {
 
   isESM = () => this.packageJson.type === 'module';
 
+  /**
+   * Gets the registry configuration from the project's config file (.js, .cjs, .ts, .mts).
+   * It tries first if there's an environment variable pointing to the config file.
+   * If it doesn't exist, it tries to load one from the local project.
+   * If it doesn't exist, it returns an empty config object.
+   */
   getRegistryConfig(projectRootPath: string) {
-    let config: VoltoConfigJS = {
+    const config: VoltoConfigJS = {
       addons: [],
       theme: '',
     };
-    const CONFIGMAP = {
-      REGISTRYCONFIG: this.isESM()
-        ? 'registry.config.cjs'
-        : 'registry.config.js',
-      VOLTOCONFIG: this.isESM() ? 'volto.config.cjs' : 'volto.config.js',
-    };
 
-    for (const key in CONFIGMAP) {
-      if (process.env[key]) {
-        const resolvedPath = path.resolve(process.env[key]);
-        if (fs.existsSync(resolvedPath)) {
-          const voltoConfigPath = resolvedPath;
-          console.log(`Using configuration file in: ${voltoConfigPath}`);
-          config = require(voltoConfigPath);
-          break;
+    function loadConfigFromEnvVar() {
+      let config: VoltoConfigJS | null = null;
+      const ENVVARCONFIG = ['REGISTRYCONFIG', 'VOLTOCONFIG'];
+      ENVVARCONFIG.forEach((envVar) => {
+        if (process.env[envVar]) {
+          const resolvedPath = path.resolve(process.env[envVar]);
+          if (fs.existsSync(resolvedPath)) {
+            // @ts-expect-error It seems that the types are not correct in the auto-config-loader
+            config = jsLoader(resolvedPath);
+            debugConfig(
+              `[@plone/registry] Using configuration file in: ${resolvedPath}`,
+            );
+          }
         }
-      } else if (fs.existsSync(path.join(projectRootPath, CONFIGMAP[key]))) {
-        config = require(path.join(projectRootPath, CONFIGMAP[key]));
-        break;
-      }
+      });
+
+      return config;
     }
 
-    return config;
+    function loadConfigFromNamespace(namespace: string) {
+      let config: VoltoConfigJS | null = null;
+      config = autoConf(namespace, {
+        cwd: projectRootPath,
+        mustExist: true, // It seems that the bool is inverted
+      });
+      debugConfig(
+        `[@plone/registry] Using configuration file in: ${getConfigPath()}`,
+      );
+      return config;
+    }
+
+    return (
+      loadConfigFromEnvVar() ||
+      loadConfigFromNamespace('registry') ||
+      loadConfigFromNamespace('volto') ||
+      config
+    );
   }
 
   /**
@@ -297,8 +321,13 @@ class AddonRegistry {
       const jsConfig = JSON.parse(
         fs.readFileSync(configFile, 'utf-8'),
       ).compilerOptions;
-      pathsConfig = jsConfig.paths;
-      baseUrl = jsConfig.baseUrl;
+      if (jsConfig) {
+        pathsConfig = jsConfig.paths;
+        baseUrl = jsConfig.baseUrl;
+      } else {
+        pathsConfig = {};
+        baseUrl = '';
+      }
     }
 
     return [baseUrl, pathsConfig];
@@ -375,6 +404,7 @@ class AddonRegistry {
     }
 
     if (!Object.keys(this.packages).includes(name)) {
+      const require = createRequire(this.projectRootPath);
       const resolved = require.resolve(name, { paths: [this.projectRootPath] });
       const basePath = getPackageBasePath(resolved);
       const packageJson = path.join(basePath, 'package.json');
@@ -674,7 +704,7 @@ class AddonRegistry {
                 .replace(/\.(js|jsx|ts|tsx)$/, '')
             ] = path.resolve(filename);
           } else {
-            debug(
+            debugShadowing(
               `The file ${filename} doesn't exist in the ${name} (${targetPath}), unable to customize.`,
             );
           }

packages/registry/src/addon-registry/create-addons-loader.ts

@@ -118,7 +118,7 @@ export function createAddonsLoader(
   // the `tempInProject` allows to place it inside
   let addonsLoaderPath: string;
   if (tempInProject) {
-    addonsLoaderPath = path.join(process.cwd(), 'src', '.addons-loader.js');
+    addonsLoaderPath = path.join(process.cwd(), '.registry.loader.js');
   } else {
     addonsLoaderPath = tmp.tmpNameSync({ postfix: '.js' });
   }

packages/registry/vite-plugin.js

@@ -10,6 +10,7 @@ export const PloneRegistryVitePlugin = () => {
   const addonsLoaderPath = createAddonsLoader(
     registry.getAddonDependencies(),
     registry.getAddons(),
+    { tempInProject: true },
   );
 
   const [addonsThemeLoaderVariablesPath, addonsThemeLoaderMainPath] =

packages/volto/__tests__/addon-registry-project.test.js

@@ -241,29 +241,3 @@ describe('Addon via env var - Released addon', () => {
     ).toBe(true);
   });
 });
-
-describe('Addon via env var - local packages folder addon', () => {
-  const originalEnv = process.env;
-
-  beforeEach(() => {
-    jest.resetModules();
-    process.env = {
-      ...originalEnv,
-      ADDONS: 'test-local-packages-via-addons-env-var',
-    };
-  });
-
-  afterEach(() => {
-    process.env = originalEnv;
-  });
-
-  it('addons can be specified on the fly using ADDONS env var - local packages folder addon', () => {
-    const base = path.join(__dirname, 'fixtures', 'test-volto-project');
-    const { registry } = AddonRegistry.init(base);
-    expect(
-      Object.keys(registry.packages).includes(
-        'test-local-packages-via-addons-env-var',
-      ),
-    ).toBe(true);
-  });
-});

packages/volto/news/6458.bugfix

@@ -0,0 +1 @@
+Fix ERR_REQUIRE from ESM module requiring CJS module in `@plone/registry` fix tests. @sneridagh