Forwardport of several new additions in the Seven side. (#7584)

Author: sneridagh

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

@@ -100,6 +100,7 @@ describe('AddonRegistry - Project', () => {
       },
       'test-released-addon': {
         basePath: `${base}/node_modules/test-released-addon`,
+        hasServerConfig: false,
         isPublishedPackage: true,
         modulePath: `${base}/node_modules/test-released-addon`,
         name: 'test-released-addon',
@@ -112,6 +113,7 @@ describe('AddonRegistry - Project', () => {
       },
       'test-released-source-addon': {
         basePath: `${base}/node_modules/test-released-source-addon`,
+        hasServerConfig: false,
         isPublishedPackage: true,
         modulePath: `${base}/node_modules/test-released-source-addon/src`,
         name: 'test-released-source-addon',
@@ -126,6 +128,7 @@ describe('AddonRegistry - Project', () => {
       'test-released-unmentioned': {
         addons: [],
         basePath: `${base}/node_modules/test-released-unmentioned`,
+        hasServerConfig: false,
         isPublishedPackage: true,
         modulePath: `${base}/node_modules/test-released-unmentioned`,
         name: 'test-released-unmentioned',

packages/registry/__tests__/create-addons-loader.server.test.js

@@ -0,0 +1,177 @@
+import {
+  getAddonsLoaderCode,
+  nameFromPackage,
+} from '../src/addon-registry/create-addons-loader-server';
+import { describe, expect, test } from 'vitest';
+
+describe('create-addons-loader code generation', () => {
+  test('no addon creates simple loader, default = no loadProjectConfig', () => {
+    const code = getAddonsLoaderCode([], []);
+    expect(code).toBe(`/*
+Don't change this file manually.
+It is autogenerated by @plone/registry.
+Instead, change the "addons" registration in the app.
+*/
+
+const safeWrapper = (func) => (config) => {
+  const res = func(config);
+  if (typeof res === 'undefined') {
+    throw new Error("Configuration function doesn't return config");
+  }
+  return res;
+};
+
+const load = (config) => {
+  const addonLoaders = [];
+  if (!addonLoaders.every((el) => typeof el === 'function')) {
+    throw new TypeError(
+      'Each addon has to provide a function applying its configuration to the projects configuration.',
+    );
+  }
+  return addonLoaders.reduce((acc, apply) => safeWrapper(apply)(acc), config);
+};
+export default load;
+`);
+  });
+
+  test('no addon creates simple loader, loadProjectConfig set to true', () => {
+    const code = getAddonsLoaderCode([], []);
+    expect(code).toBe(`/*
+Don't change this file manually.
+It is autogenerated by @plone/registry.
+Instead, change the "addons" registration in the app.
+*/
+
+const safeWrapper = (func) => (config) => {
+  const res = func(config);
+  if (typeof res === 'undefined') {
+    throw new Error("Configuration function doesn't return config");
+  }
+  return res;
+};
+
+const load = (config) => {
+  const addonLoaders = [];
+  if (!addonLoaders.every((el) => typeof el === 'function')) {
+    throw new TypeError(
+      'Each addon has to provide a function applying its configuration to the projects configuration.',
+    );
+  }
+  return addonLoaders.reduce((acc, apply) => safeWrapper(apply)(acc), config);
+};
+export default load;
+`);
+  });
+
+  test('one addon creates loader when hasServerConfig is true', () => {
+    const code = getAddonsLoaderCode(
+      ['volto-addon1'],
+      [{ name: 'volto-addon1', hasServerConfig: true }],
+    );
+    expect(
+      code.indexOf("import voltoAddon1 from 'volto-addon1/config/server';") > 0,
+    ).toBe(true);
+  });
+
+  test('two addons create loaders when both are server-enabled', () => {
+    const code = getAddonsLoaderCode(
+      ['volto-addon1', 'volto-addon2'],
+      [
+        { name: 'volto-addon1', hasServerConfig: true },
+        { name: 'volto-addon2', hasServerConfig: true },
+      ],
+    );
+    expect(
+      code.indexOf(`
+import voltoAddon1 from 'volto-addon1/config/server';
+import voltoAddon2 from 'volto-addon2/config/server';`) > 0,
+    ).toBe(true);
+  });
+
+  test('one addon plus one extra creates loader when server-enabled', () => {
+    const code = getAddonsLoaderCode(
+      ['volto-addon1:loadExtra1'],
+      [{ name: 'volto-addon1', hasServerConfig: true }],
+    );
+    expect(
+      code.indexOf(`
+import voltoAddon1, { loadExtra1 as loadExtra10 } from 'volto-addon1/config/server';
+`) > 0,
+    ).toBe(true);
+  });
+
+  test('one addon plus two extras creates loader when server-enabled', () => {
+    const code = getAddonsLoaderCode(
+      ['volto-addon1:loadExtra1,loadExtra2'],
+      [{ name: 'volto-addon1', hasServerConfig: true }],
+    );
+    expect(
+      code.indexOf(`
+import voltoAddon1, { loadExtra1 as loadExtra10, loadExtra2 as loadExtra21 } from 'volto-addon1/config/server';
+`) > 0,
+    ).toBe(true);
+  });
+
+  test('two addons plus extras creates loader when server-enabled', () => {
+    const code = getAddonsLoaderCode(
+      [
+        'volto-addon1:loadExtra1,loadExtra2',
+        'volto-addon2:loadExtra3,loadExtra4',
+      ],
+      [
+        { name: 'volto-addon1', hasServerConfig: true },
+        { name: 'volto-addon2', hasServerConfig: true },
+      ],
+    );
+    expect(
+      code.indexOf(`
+import voltoAddon1, { loadExtra1 as loadExtra10, loadExtra2 as loadExtra21 } from 'volto-addon1/config/server';
+import voltoAddon2, { loadExtra3 as loadExtra32, loadExtra4 as loadExtra43 } from 'volto-addon2/config/server';
+`) > 0,
+    ).toBe(true);
+  });
+});
+
+describe('create-addons-loader default name generation', () => {
+  const getName = nameFromPackage;
+
+  test('passing a simple word returns a word', () => {
+    expect(getName('something')).toBe('something');
+  });
+
+  test('passing a kebab-name returns a word', () => {
+    expect(getName('volto-something-else')).toBe('voltoSomethingElse');
+  });
+
+  test('passing a simple relative path returns random string', () => {
+    const rand = getName('../../');
+    expect(rand.length).toBe(10);
+    expect(new RegExp(/[abcdefghjk]+/).exec(rand)[0].length > 0).toBe(true);
+  });
+  test('passing a tilda relative path with addon strips tilda', () => {
+    const name = getName('~/addons/volto-addon1');
+    expect(name).toBe('addonsvoltoAddon1');
+  });
+  test('passing a namespace package strips @', () => {
+    const name = getName('@plone/volto-addon1');
+    expect(name).toBe('plonevoltoAddon1');
+  });
+  test('passing a tilda relative path strips tilda', () => {
+    const name = getName('~/../');
+    expect(name.length).toBe(10);
+    expect(new RegExp(/[abcdefghjk]+/).exec(name)[0].length > 0).toBe(true);
+  });
+  test('passing a backspaced path strips backspace', () => {
+    const name = getName('c:\\nodeprojects');
+    expect(name).toBe('cnodeprojects');
+  });
+});
+test('addon without server config does not create import', () => {
+  const code = getAddonsLoaderCode(
+    ['volto-addon1'],
+    [{ name: 'volto-addon1', hasServerConfig: false }],
+  );
+  expect(
+    code.indexOf("import voltoAddon1 from 'volto-addon1/config/server';") > 0,
+  ).toBe(false);
+});

packages/registry/bin/init-loaders.js

@@ -3,22 +3,69 @@
 // the unit tests before they run.
 // It was used when React Router was evaluating `routes.ts` before running vite build.
 // See https://github.com/remix-run/react-router/issues/13078#issuecomment-2863445977
+import fs from 'fs';
 import path from 'path';
+import { createServer } from 'vite';
 import { AddonRegistry } from '@plone/registry/addon-registry';
 import { createAddonsLoader } from '@plone/registry/create-addons-loader';
+import { createAddonsServerLoader } from '@plone/registry/create-addons-loader-server';
 import { createAddonsStyleLoader } from '@plone/registry/create-addons-styles-loader';
+import { createAddonsLocalesLoader } from '@plone/registry/create-addons-locales-loader';
+import { PloneRegistryVitePlugin } from '@plone/registry/vite-plugin';
+import config from '@plone/registry';
 
-function initPloneRegistryLoaders() {
+async function evaluateAddons(addonsLoaderPath) {
+  const projectRootPath = path.resolve('.');
+
+  const ploneDir = path.join(projectRootPath, '.plone');
+
+  const server = await createServer({
+    root: projectRootPath,
+    configFile: false,
+    server: { middlewareMode: true },
+    plugins: [PloneRegistryVitePlugin()],
+  });
+
+  try {
+    const { default: loader, addonsInfo } =
+      await server.ssrLoadModule(addonsLoaderPath);
+
+    fs.writeFileSync(
+      path.join(ploneDir, 'registry.routes.json'),
+      JSON.stringify(loader(config).routes, null, 2),
+    );
+    fs.writeFileSync(
+      path.join(ploneDir, 'registry.addonsInfo.json'),
+      JSON.stringify(addonsInfo, null, 2),
+    );
+  } finally {
+    await server.close();
+  }
+}
+
+async function initPloneRegistryLoaders() {
   const projectRootPath = path.resolve('.');
   const { registry, shadowAliases } = AddonRegistry.init(projectRootPath);
 
+  const ploneDir = path.join(projectRootPath, '.plone');
+  if (!fs.existsSync(ploneDir)) {
+    fs.mkdirSync(ploneDir, { recursive: true });
+  }
+
   const addonsLoaderPath = createAddonsLoader(
     registry.getAddonDependencies(),
     registry.getAddons(),
     { tempInProject: true },
   );
 
+  await evaluateAddons(addonsLoaderPath);
+
+  createAddonsServerLoader(
+    registry.getAddonDependencies(),
+    registry.getAddons(),
+  );
   createAddonsStyleLoader(registry);
+  createAddonsLocalesLoader(registry);
 
   return { registry, shadowAliases, addonsLoaderPath };
 }

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

@@ -15,7 +15,7 @@ This should be a JavaScript or TypeScript file, such as {file}`index.ts` or {fil
 
 ```json
 {
-  "main": "index.ts",
+  "main": "index.ts"
 }
 ```
 
@@ -33,7 +33,7 @@ export default function loadConfig(config: ConfigType) {
 `@plone/registry` has a helper utility `createAddonsLoader` which generates the add-ons loader file.
 That file contains the code needed to load the add-ons configuration of all the registered add-ons, keeping the order in which they were defined.
 
-This loader is a JavaScript file and it is placed in the root of your application.
+This loader is a JavaScript file and it is placed in the {file}`.plone` directory in the root of your application.
 By default, it's called {file}`registry.loader.js`.
 
 ```{important}
@@ -46,23 +46,23 @@ The add-ons loader generator is meant to be run before bundling your app or by t
 The `@plone/registry` Vite plugin generates this file, so the framework can load it during app bootstrap time, as shown below.
 
 ```js
-  const projectRootPath = path.resolve('.');
-  const { registry, shadowAliases } = AddonRegistry.init(projectRootPath);
-
-  createAddonsLoader(
-    registry.getAddonDependencies(),
-    registry.getAddons(),
-    { tempInProject: true },
-  );
+import { createAddonsLoader } from '@plone/registry/create-addons-loader';
+
+const projectRootPath = path.resolve('.');
+const { registry, shadowAliases } = AddonRegistry.init(projectRootPath);
+
+createAddonsLoader(registry.getAddonDependencies(), registry.getAddons(), {
+  tempInProject: true,
+});
 ```
 
-This will create {file}`registry.loader.js` in the root of your app.
+This will create {file}`registry.loader.js` in the {file}`.plone` directory in the root of your app.
 
 Afterwards, configure your app to load the code during the app bootstrap, as early as possible in both your client and server code, and as a module side-effect, as shown in the following example.
 
 ```js
 import config from '@plone/registry';
-import applyAddonConfiguration from './registry.loader';
+import applyAddonConfiguration from './.plone/registry.loader';
 
 applyAddonConfiguration(config);
 ```
@@ -73,6 +73,70 @@ If you use a non-Vite framework, you will have to build your own integration.
 You can take the implementation of the Vite plugin as reference.
 ```
 
+## Add-ons server configuration loader
+
+Add-ons can also provide a server-side configuration loader.
+To do so, create a file {file}`config/server.ts` at the root of your add-on package.
+This is useful when your add-on needs to load configuration that is only relevant on the server side, such as API endpoints or server-only features.
+This file should contain a default export with a function with the same signature as the client-side loader.
+
+```ts
+import type { ConfigType } from '@plone/registry';
+
+export default function loadConfig(config: ConfigType) {
+  // You can mutate the configuration object in here
+  return config;
+}
+```
+
+When registering your add-on, `@plone/registry` will detect the presence of this file and include it in the generated server-side add-ons loader file, which is called {file}`registry.loader.server.js` by default.
+
+```{note}
+The server-side configuration loader is optional.
+If your add-on does not need to load any server-side configuration, you can omit this file.
+```
+
+`@plone/registry` has a helper utility `createAddonsServerLoader` which generates the add-ons loader file.
+That file contains the code needed to load the add-ons configuration of all the registered add-ons, keeping the order in which they were defined.
+
+This loader is a JavaScript file and it is placed in the {file}`.plone` directory in the root of your application.
+By default, it's called {file}`registry.loader.server.js`.
+
+```{important}
+This file is generated and maintained by `@plone/registry`.
+You should neither modify it nor add your own styles in here.
+It will be overwritten in the next bundler run.
+```
+
+The add-ons loader generator is meant to be run before bundling your app or by the bundler itself when it runs.
+The `@plone/registry` Vite plugin generates this file, so the framework can load it during app bootstrap time, as shown below.
+
+```js
+import { createAddonsServerLoader } from '@plone/registry/create-addons-loader-server';
+
+const projectRootPath = path.resolve('.');
+const { registry, shadowAliases } = AddonRegistry.init(projectRootPath);
+
+createAddonsServerLoader(registry.getAddonDependencies(), registry.getAddons());
+```
+
+This will create {file}`registry.loader.js` in the {file}`.plone` directory in the root of your app.
+
+Afterwards, configure your app to load the code during the app bootstrap, as early as possible in both your client and server code, and as a module side-effect, as shown in the following example.
+
+```js
+import config from '@plone/registry';
+import applyServerAddonConfiguration from './.plone/registry.loader.server';
+
+applyServerAddonConfiguration(config);
+```
+
+```{note}
+If you use a Vite-powered framework, use the `@plone/registry` Vite plugin.
+If you use a non-Vite framework, you will have to build your own integration.
+You can take the implementation of the Vite plugin as reference.
+```
+
 ## Provide optional add-on configurations
 
 You can export additional configuration functions from your add-ons configuration loader file.