Vite as Volto bundler

packages/coresandbox/src/components/Blocks/FormBlock/Edit.tsx

@@ -1,7 +1,7 @@
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import Data from './Data';
 import type { BlockEditProps } from '@plone/types';
-import { Helmet } from '@plone/volto/helpers';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 
 import { defineMessages, useIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';

packages/coresandbox/src/components/Blocks/InputBlock/Edit.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import Data from './Data';
 import type { BlockEditProps } from '@plone/types';
 import { Input, Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 
 const InputBlockEdit = (props: BlockEditProps) => {

packages/coresandbox/src/components/Blocks/TestBlock/Edit.tsx

@@ -1,4 +1,4 @@
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import Data from './Data';
 import type { BlockEditProps } from '@plone/types';
 

packages/coresandbox/src/components/TestForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from '@plone/volto/helpers';
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 
 import { defineMessages, useIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';

packages/coresandbox/src/components/Views/NewsAndEvents.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { searchContent } from '@plone/volto/actions';
+import { searchContent } from '@plone/volto/actions/search/search';
 import { useDispatch, useSelector } from 'react-redux';
 import { Container } from 'semantic-ui-react';
 

packages/coresandbox/src/customizations/volto/components/manage/Controlpanels/VersionOverview.jsx

@@ -0,0 +1,85 @@
+/**
+ * Version Overview component.
+ * @module components/manage/Controlpanels/VersionOverview
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { isEmpty } from 'lodash-es';
+
+import voltoPackageJson from '@plone/volto/../package.json';
+import projectPackageJson from '@root/../package.json';
+
+import { defineMessages, useIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  no_addons: {
+    id: 'No addons found',
+    defaultMessage: 'No addons found',
+  },
+});
+
+const voltoVersion = voltoPackageJson.version;
+
+const VersionOverview = ({
+  cmf_version,
+  debug_mode,
+  pil_version,
+  plone_version,
+  plone_restapi_version,
+  python_version,
+  zope_version,
+}) => {
+  const intl = useIntl();
+  const { addonsInfo } = config.settings;
+  const isProject = voltoPackageJson.name !== projectPackageJson.name;
+
+  return (
+    <>
+      <h2>
+        This is a customized Route Component from @plone/volto-coresandbox
+      </h2>
+      <ul
+        style={{
+          fontSize: '16px',
+          fontFamily: 'Monospace',
+          paddingLeft: '1rem',
+        }}
+      >
+        {isProject ? (
+          <li>
+            {projectPackageJson.name} {projectPackageJson.version}
+          </li>
+        ) : null}
+        {voltoVersion && <li>Volto {voltoVersion}</li>}
+        <li>Plone {plone_version}</li>
+        <li>plone.restapi {plone_restapi_version}</li>
+        <li>CMF {cmf_version}</li>
+        <li>Zope {zope_version}</li>
+        <li>Python {python_version}</li>
+        <li>PIL {pil_version}</li>
+      </ul>
+      <h3>Add-ons</h3>
+      {isEmpty(addonsInfo) ? (
+        <p>{intl.formatMessage(messages.no_addons)}</p>
+      ) : (
+        <ul style={{ fontSize: '16px', fontFamily: 'Monospace' }}>
+          {addonsInfo.map((addon) => (
+            <li key={addon.name}>{`${addon.name} ${addon.version || ''}`}</li>
+          ))}
+        </ul>
+      )}
+      {debug_mode !== 'No' && (
+        <p>
+          <FormattedMessage
+            id="Warning Regarding debug mode"
+            defaultMessage="You are running in 'debug mode'. This mode is intended for sites that are under development. This allows many configuration changes to be immediately visible, but will make your site run more slowly. To turn off debug mode, stop the server, set 'debug-mode=off' in your buildout.cfg, re-run bin/buildout and then restart the server process."
+          />
+        </p>
+      )}
+    </>
+  );
+};
+
+export default VersionOverview;

packages/coresandbox/src/index.ts

@@ -4,7 +4,7 @@ import TestBlockView from './components/Blocks/TestBlock/View';
 import TestBlockEdit from './components/Blocks/TestBlock/Edit';
 import InputBlockView from './components/Blocks/InputBlock/View';
 import InputBlockEdit from './components/Blocks/InputBlock/Edit';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { SliderSchema as TestBlockSchema } from './components/Blocks/TestBlock/schema';
 import { inputBlockSchema } from './components/Blocks/InputBlock/schema';
 import { multipleFieldsetsSchema } from './components/Blocks/TestBlock/schema';
@@ -13,8 +13,10 @@ import codeSVG from '@plone/volto/icons/code.svg';
 import type { BlockConfigBase } from '@plone/types';
 import type { ConfigType } from '@plone/registry';
 import SlotComponentTest from './components/Slots/SlotTest';
-import { ContentTypeCondition } from '@plone/volto/helpers';
-import { RouteCondition } from '@plone/volto/helpers/Slots';
+import {
+  ContentTypeCondition,
+  RouteCondition,
+} from '@plone/volto/helpers/Slots';
 import TestForm from './components/TestForm';
 import FormBlockView from './components/Blocks/FormBlock/View';
 import FormBlockEdit from './components/Blocks/FormBlock/Edit';

packages/registry/package.json

@@ -33,13 +33,13 @@
   },
   "source": "src/index.ts",
   "main": "dist/main.js",
-  "module": "dist/module.js",
+  "module": "dist/module.mjs",
   "types": "dist/types.d.ts",
   "exports": {
     "./src/*": "./src/*.js",
     ".": {
       "types": "./dist/types.d.ts",
-      "import": "./dist/module.js",
+      "import": "./dist/module.mjs",
       "require": "./dist/main.js"
     }
   },
@@ -71,7 +71,8 @@
     "crypto-random-string": "3.2.0",
     "debug": "4.3.2",
     "dependency-graph": "0.10.0",
-    "glob": "7.1.6"
+    "glob": "7.1.6",
+    "tmp": "0.2.1"
   },
   "devDependencies": {
     "@parcel/packager-ts": "^2.12.0",

packages/registry/src/addon-registry.js

@@ -109,6 +109,10 @@ class AddonConfigurationRegistry {
       this.voltoConfigJS = require(
         path.join(projectRootPath, 'volto.config.js'),
       );
+    } else if (fs.existsSync(path.join(projectRootPath, 'volto.config.cjs'))) {
+      this.voltoConfigJS = require(
+        path.join(projectRootPath, 'volto.config.cjs'),
+      );
     } else {
       this.voltoConfigJS = {};
     }
@@ -384,8 +388,10 @@ class AddonConfigurationRegistry {
         fullPathsPath,
         options[item][0].replace(/\/\*$/, ''),
       );
-
-      aliases[name] = value;
+      // We don't want to alias Volto itself, since that's fixed
+      if (name !== '@plone/volto') {
+        aliases[name] = value;
+      }
     });
 
     return aliases;
@@ -396,7 +402,7 @@ class AddonConfigurationRegistry {
    * It includes all registered add-ons and their `src` paths, and also the paths
    * defined in the `tsconfig.json` files of the add-ons.
    */
-  getResolveAliases() {
+  getResolveAliases(mode = 'flat') {
     const pairs = [
       ...Object.keys(this.packages).map((o) => [
         o,
@@ -417,7 +423,15 @@ class AddonConfigurationRegistry {
       }
     });
 
-    return { ...fromEntries(pairs), ...aliasesFromTSPaths };
+    const flatAliases = { ...fromEntries(pairs), ...aliasesFromTSPaths };
+    if (mode === 'flat') {
+      return flatAliases;
+    } else {
+      return Object.entries(flatAliases).map(([key, value]) => ({
+        find: key,
+        replacement: value,
+      }));
+    }
   }
 
   /**
@@ -568,7 +582,7 @@ class AddonConfigurationRegistry {
    * customizations in volto-addonB if the declaration in package.json is like:
    * `addons:volto-addonA,volto-addonB`
    */
-  getAddonCustomizationPaths() {
+  getAddonCustomizationPaths(mode = 'flat') {
     let aliases = {};
     this.getAddons().forEach((addon) => {
       aliases = {
@@ -579,7 +593,14 @@ class AddonConfigurationRegistry {
         ),
       };
     });
-    return aliases;
+    if (mode === 'flat') {
+      return aliases;
+    } else {
+      return Object.entries(aliases).map(([key, value]) => ({
+        find: key,
+        replacement: value,
+      }));
+    }
   }
 
   /**

packages/registry/src/create-addons-loader.js

@@ -27,7 +27,7 @@ This file is autogenerated. Don't change it directly.
 Instead, change the "addons" setting in your package.json file.
 */
 
-const projectConfigLoader = require('@root/config');
+// import projectConfigLoader from '@root/config';
 `;
   let configsToLoad = [],
     counter = 0;
@@ -77,9 +77,10 @@ const safeWrapper = (func) => (config) => {
   return res;
 }
 
-const projectConfig = (config) => {
-  return typeof projectConfigLoader.default === "function" ? projectConfigLoader.default(config) : config;
-}
+// We are deprecating the load through the project config file in Volto 20.
+// const projectConfig = (config) => {
+//   return typeof projectConfigLoader.default === "function" ? projectConfigLoader.default(config) : config;
+// }
 
 const load = (config) => {
   const addonLoaders = [${configsToLoad.join(', ')}];
@@ -88,7 +89,7 @@ const load = (config) => {
       'Each addon has to provide a function applying its configuration to the projects configuration.',
     );
   }
-  return projectConfig(addonLoaders.reduce((acc, apply) => safeWrapper(apply)(acc), config));
+  return addonLoaders.reduce((acc, apply) => safeWrapper(apply)(acc), config);
 };
 export default load;
 `;

packages/volto-slate/package.json

@@ -25,8 +25,12 @@
     "is-url": "1.2.4",
     "jsdom": "^16.6.0",
     "lodash": "4.17.21",
+    "lodash-es": "^4.17.21",
+    "promise-file-reader": "1.0.2",
+    "prop-types": "15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "11.1.0",
     "react-intersection-observer": "9.1.0",
     "react-intl": "3.12.1",
     "react-redux": "8.1.2",

packages/volto-slate/src/actions/content.js

@@ -1,4 +1,4 @@
-import { nestContent } from '@plone/volto/helpers';
+import { nestContent } from '@plone/volto/helpers/Content/Content';
 import { UPLOAD_CONTENT } from '@plone/volto-slate/constants';
 
 // TODO: the PR has been merged into Volto, so this should be cleaned up

packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -5,13 +5,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { isEmpty, map, remove } from 'lodash';
+import { isEmpty, map, remove } from 'lodash-es';
 import { Button, Table } from 'semantic-ui-react';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { Icon, SidebarPortal } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableSchema from './schema';
 

packages/volto-slate/src/blocks/Table/TableBlockView.jsx

@@ -6,7 +6,7 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import { map } from 'lodash';
+import { map } from 'lodash-es';
 import {
   serializeNodes,
   serializeNodesToText,

packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -6,13 +6,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useInView } from 'react-intersection-observer';
 import { Dimmer, Loader, Message, Segment } from 'semantic-ui-react';
 
-import {
-  flattenToAppURL,
-  getBaseUrl,
-  validateFileUploadSize,
-} from '@plone/volto/helpers';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import config from '@plone/volto/registry';
-import { SidebarPortal, BlockChooserButton } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
+import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/BlockChooserButton';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import { SlateEditor } from '@plone/volto-slate/editor';

packages/volto-slate/src/blocks/Text/SlashMenu.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { filter, isEmpty } from 'lodash';
+import { filter, isEmpty } from 'lodash-es';
 import { Menu } from 'semantic-ui-react';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { useSelector } from 'react-redux';
 
 const emptySlateBlock = () => ({

packages/volto-slate/src/blocks/Text/TextBlockView.jsx

@@ -3,9 +3,9 @@ import {
   serializeNodesToText,
 } from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import Slugger from 'github-slugger';
-import { normalizeString } from '@plone/volto/helpers';
+import { normalizeString } from '@plone/volto/helpers/Utils/Utils';
 
 const TextBlockView = (props) => {
   const { id, data, styling = {} } = props;

packages/volto-slate/src/blocks/Text/extensions/withDeserializers.js

@@ -1,7 +1,8 @@
 import isUrl from 'is-url';
 import imageExtensions from 'image-extensions';
 import { blockTagDeserializer } from '@plone/volto-slate/editor/deserialize';
-import { getBaseUrl, validateFileUploadSize } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { v4 as uuid } from 'uuid';
 import { Transforms } from 'slate';
 

packages/volto-slate/src/blocks/Text/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import TextBlockView from './TextBlockView';
 import TextBlockEdit from './TextBlockEdit';
 import TextBlockSchema from './TextBlockSchema';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 
 import {
   goDown,