First working version, using the kb from #6050

plone · Dec 16, 2024 · 4a6db26 · 4a6db26
1 parent 81632ac
commit 4a6db26
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 60 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ eslint.xml
 yarn-error.log
 build
 .changelog.draft
+.registry.loader.js
 
 # yarn 3
 .pnp.*

diff --git a/packages/volto/.eslintrc b/packages/volto/.eslintrc
@@ -54,7 +54,7 @@
         "rootPathSuffix": "src",
       },
     },
-    "import/core-modules": ["load-volto-addons"],
+    "import/core-modules": ["@plone/registry/addons-loader"],
     "react": {
       "version": "detect",
     },

diff --git a/packages/volto/package.json b/packages/volto/package.json
@@ -101,7 +101,7 @@
       "~/config": "<rootDir>/src/config",
       "~/../locales/${lang}.json": "<rootDir>/locales/en.json",
       "(.*)/locales/(.*)": "<rootDir>/locales/$2",
-      "load-volto-addons": "<rootDir>/jest-addons-loader.js",
+      "@plone/registry/addons-loader": "<rootDir>/jest-addons-loader.js",
       "@package/(.*)$": "<rootDir>/src/$1",
       "@root/config": "<rootDir>/jest-addons-loader.js",
       "@root/(.*)$": "<rootDir>/src/$1",

diff --git a/packages/volto/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx b/packages/volto/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
@@ -16,7 +16,7 @@ import {
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
 
-import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick/doesNodeContainClick';
+import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick';
 import { Input, Form, Button } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 

diff --git a/packages/volto/src/components/manage/BlockChooser/BlockChooserButton.jsx b/packages/volto/src/components/manage/BlockChooser/BlockChooserButton.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick/doesNodeContainClick';
+import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import { blockHasValue } from '@plone/volto/helpers/Blocks/Blocks';
 import Icon from '@plone/volto/components/theme/Icon/Icon';

diff --git a/packages/volto/src/components/manage/Sidebar/SidebarPopup.jsx b/packages/volto/src/components/manage/Sidebar/SidebarPopup.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
-import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick/doesNodeContainClick';
+import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick';
 
 const DEFAULT_TIMEOUT = 500;
 

diff --git a/packages/volto/src/components/manage/Toolbar/Toolbar.jsx b/packages/volto/src/components/manage/Toolbar/Toolbar.jsx
@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom';
 import jwtDecode from 'jwt-decode';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick/doesNodeContainClick';
+import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick';
 import { withCookies } from 'react-cookie';
 import filter from 'lodash/filter';
 import find from 'lodash/find';

diff --git a/packages/volto/src/components/theme/App/App.jsx b/packages/volto/src/components/theme/App/App.jsx
@@ -44,6 +44,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+// TODO: RouteAnnouncer fails with hydation error?
 import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
@@ -185,7 +186,7 @@ export class App extends Component {
             </main>
           </Segment>
         </MultilingualRedirector>
-        <RouteAnnouncer />
+        {/* <RouteAnnouncer /> */}
         <Footer />
         <LockingToastsFactory
           content={this.props.content}

diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js
@@ -14,7 +14,9 @@ import {
   unwantedControlPanelsFields,
 } from './ControlPanels';
 
-import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
+import applyAddonConfiguration, {
+  addonsInfo,
+} from '@plone/registry/addons-loader';
 
 import { installDefaultComponents } from './Components';
 import { installDefaultWidgets } from './Widgets';

diff --git a/packages/volto/src/constants/Languages.cjs b/packages/volto/src/constants/Languages.cjs
@@ -3,7 +3,7 @@
  * @module constants/Languages
  */
 
-module.exports = {
+const languages = {
   ca: 'Català',
   de: 'Deutsch',
   en: 'English',
@@ -21,4 +21,7 @@ module.exports = {
   zh_CN: '中文',
 };
 
-// export default languages;
+// module.exports = languages;
+// module.exports = { default: languages };
+// TODO: For some reason loading cjs from ESM fails, and this has to export default as ESM :/
+export default languages;
diff --git a/packages/volto/src/helpers/Utils/useDetectClickOutside.js b/packages/volto/src/helpers/Utils/useDetectClickOutside.js
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick/doesNodeContainClick';
+import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick';
 
 /**
  * Hook used to detect clicks outside a component (or an escape key press).

diff --git a/packages/volto/vite-plugins/volto.js b/packages/volto/vite-plugins/volto.js
@@ -2,42 +2,26 @@ import fs from 'fs';
 import path from 'path';
 import fixReactVirtualized from 'esbuild-plugin-react-virtualized';
 import { svgLoader } from './svg';
-
-import AddonConfigurationRegistry from '@plone/registry/src/addon-registry';
-import createAddonsLoader from '@plone/registry/src/create-addons-loader';
-import createThemeAddonsLoader from '@plone/registry/src/create-theme-addons-loader';
+import { PloneRegistryVitePlugin } from '@plone/registry/vite-plugin';
+import { AddonRegistry } from '@plone/registry/addon-registry';
 import { poToJson } from '@plone/scripts/i18n.cjs';
 
 export const VoltoVitePlugin = () => {
   const projectRootPath = path.resolve('.');
-  const registry = new AddonConfigurationRegistry(projectRootPath);
-  console.log(
-    registry,
-    // registry.getAddonsFromEnvVarCustomizationPaths(),
-    registry.getResolveAliases('vite'),
-    registry.getAddonCustomizationPaths('vite'),
-    // registry.getAddonsFromEnvVarCustomizationPaths(),
-  );
-  const addonsLoaderPath = createAddonsLoader(
-    registry.getAddonDependencies(),
-    registry.getAddons(),
-  );
+  const { registry } = AddonRegistry.init(projectRootPath);
 
-  const [addonsThemeLoaderVariablesPath, addonsThemeLoaderMainPath] =
-    createThemeAddonsLoader(registry.getCustomThemeAddons());
+  // Compile language JSON files from po files
+  // TODO: make a vite plugin for it
+  poToJson({ registry, addonMode: false });
 
+  // TODO: improve later
   let themeConfigPath, themePath;
   if (registry.theme) {
     // The themes should be located in `src/theme`
     themePath = registry.packages[registry.theme].modulePath;
     themeConfigPath = `${themePath}/theme/theme.config`;
   }
 
-  const addOns = Object.keys(registry.packages);
-
-  // Compile language JSON files from po files
-  poToJson({ registry, addonMode: false });
-
   return [
     svgLoader({
       svgoConfig: {
@@ -56,15 +40,13 @@ export const VoltoVitePlugin = () => {
         ],
       },
     }),
+    PloneRegistryVitePlugin(),
     {
       name: 'volto',
       enforce: 'pre',
       config: () => ({
-        envPrefix: 'VOLTO_',
+        envPrefix: 'PLONE_',
         ssr: {
-          optimizeDeps: {
-            exclude: addOns,
-          },
           // external: ['lodash', 'semantic-ui-react'],
           noExternal: ['use-deep-compare-effect'],
         },
@@ -74,17 +56,13 @@ export const VoltoVitePlugin = () => {
           },
         },
         optimizeDeps: {
-          exclude: addOns,
           esbuildOptions: {
             plugins: [fixReactVirtualized],
           },
         },
         resolve: {
           alias: [
             { find: /^~/, replacement: '' },
-            ...registry.getAddonCustomizationPaths('vite'),
-            ...registry.getAddonsFromEnvVarCustomizationPaths('vite'),
-            ...registry.getResolveAliases('vite'),
             {
               find: '@plone/volto/config',
               replacement: path.resolve(__dirname, '../src/config'),
@@ -104,17 +82,7 @@ export const VoltoVitePlugin = () => {
             },
             ...(registry.theme
               ? // Load the theme config from the theme
-                [
-                  { find: '../../theme.config', replacement: themeConfigPath },
-                  {
-                    find: 'addonsThemeCustomizationsVariables',
-                    replacement: addonsThemeLoaderVariablesPath,
-                  },
-                  {
-                    find: 'addonsThemeCustomizationsMain',
-                    replacement: addonsThemeLoaderMainPath,
-                  },
-                ]
+                [{ find: '../../theme.config', replacement: themeConfigPath }]
               : // Load the theme config from SemanticUI
                 [
                   {
@@ -125,16 +93,15 @@ export const VoltoVitePlugin = () => {
                     ),
                   },
                 ]),
-            { find: 'load-volto-addons', replacement: addonsLoaderPath },
             {
               find: 'volto-themes',
               replacement: path.resolve(__dirname, '../theme/themes'),
             },
             // This is needed to make lodash work with Vite as lodash-es is full ESM
-            {
-              find: 'lodash',
-              replacement: 'lodash-es',
-            },
+            // {
+            //   find: 'lodash',
+            //   replacement: 'lodash-es',
+            // },
           ],
         },
       }),

diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js
@@ -3,14 +3,31 @@ import react from '@vitejs/plugin-react';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { VoltoVitePlugin } from './vite-plugins/volto';
 
+// TODO: improve deployment settings
+const prodServerName =
+  process.env.PLONE_API_PATH && process.env.PLONE_API_PATH.startsWith('https')
+    ? process.env.PLONE_API_PATH
+    : '';
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [VoltoVitePlugin(), nodePolyfills(), react()],
   server: {
     port: 3000,
     proxy: {
-      '/++api++/':
-        'http://localhost:8080/VirtualHostBase/http/localhost:3000/Plone/++api++/VirtualHostRoot',
+      '^/\\+\\+api\\+\\+($$|/.*)': {
+        target: prodServerName
+          ? prodServerName
+          : 'http://localhost:8080/VirtualHostBase/http/localhost:3000/Plone/++api++/VirtualHostRoot',
+        ...(prodServerName && {
+          changeOrigin: true,
+          secure: false,
+        }),
+        rewrite: (path) => {
+          console.log(path);
+          return path.replace('/++api++', '');
+        },
+      },
     },
   },
   define: {