From 932bad0f1643308d6f6e24ecce4e591ce9446242 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Thu, 23 May 2024 09:22:43 +0200 Subject: [PATCH 01/40] WIP 1 --- packages/volto-slate/package.json | 7 +- .../src/blocks/Text/{index.js => index.jsx} | 0 .../Blockquote/{index.js => index.jsx} | 0 .../plugins/Callout/{index.js => index.jsx} | 0 .../plugins/Link/{index.js => index.jsx} | 0 .../plugins/StyleMenu/{index.js => index.jsx} | 0 .../plugins/Table/{index.js => index.jsx} | 0 packages/volto/index.html | 13 + packages/volto/package.json | 11 +- .../volto/src/components/manage/Add/Add.jsx | 2 +- .../Blocks/Image/{schema.js => schema.jsx} | 0 .../manage/Multilingual/CreateTranslation.jsx | 2 +- .../manage/Multilingual/TranslationObject.jsx | 2 +- .../Preferences/PersonalPreferences.jsx | 2 +- ...nguageSelector.js => LanguageSelector.jsx} | 0 .../MultilingualRedirector.jsx | 2 +- packages/volto/src/constants/Languages.js | 2 +- .../volto/src/helpers/AuthToken/AuthToken.js | 10 +- ...kExtensions.js => withBlockExtensions.jsx} | 0 ...nhancer.js => withBlockSchemaEnhancer.jsx} | 0 .../{FormValidation.js => FormValidation.jsx} | 0 .../helpers/Helmet/{Helmet.js => Helmet.jsx} | 0 .../Loadable/{Loadable.js => Loadable.jsx} | 0 .../src/helpers/Utils/{Utils.js => Utils.jsx} | 0 packages/volto/src/middleware/api.js | 2 +- packages/volto/src/start-client.jsx | 2 +- packages/volto/theme/theme.config | 8 +- packages/volto/vite.config.js | 55 +++ pnpm-lock.yaml | 380 +++++++++++++++++- 29 files changed, 473 insertions(+), 27 deletions(-) rename packages/volto-slate/src/blocks/Text/{index.js => index.jsx} (100%) rename packages/volto-slate/src/editor/plugins/Blockquote/{index.js => index.jsx} (100%) rename packages/volto-slate/src/editor/plugins/Callout/{index.js => index.jsx} (100%) rename packages/volto-slate/src/editor/plugins/Link/{index.js => index.jsx} (100%) rename packages/volto-slate/src/editor/plugins/StyleMenu/{index.js => index.jsx} (100%) rename packages/volto-slate/src/editor/plugins/Table/{index.js => index.jsx} (100%) create mode 100644 packages/volto/index.html rename packages/volto/src/components/manage/Blocks/Image/{schema.js => schema.jsx} (100%) rename packages/volto/src/components/theme/LanguageSelector/{LanguageSelector.js => LanguageSelector.jsx} (100%) rename packages/volto/src/helpers/Extensions/{withBlockExtensions.js => withBlockExtensions.jsx} (100%) rename packages/volto/src/helpers/Extensions/{withBlockSchemaEnhancer.js => withBlockSchemaEnhancer.jsx} (100%) rename packages/volto/src/helpers/FormValidation/{FormValidation.js => FormValidation.jsx} (100%) rename packages/volto/src/helpers/Helmet/{Helmet.js => Helmet.jsx} (100%) rename packages/volto/src/helpers/Loadable/{Loadable.js => Loadable.jsx} (100%) rename packages/volto/src/helpers/Utils/{Utils.js => Utils.jsx} (100%) create mode 100644 packages/volto/vite.config.js diff --git a/packages/volto-slate/package.json b/packages/volto-slate/package.json index 8937fe8037..56b4341a13 100644 --- a/packages/volto-slate/package.json +++ b/packages/volto-slate/package.json @@ -18,16 +18,21 @@ "access": "public" }, "dependencies": { + "classnames": "2.2.6", "image-extensions": "1.1.0", + "is-hotkey": "0.2.0", "is-url": "1.2.4", "jsdom": "^16.6.0", + "lodash": "4.17.21", "react": "18.2.0", - "react-intersection-observer": "9.1.0", "react-dom": "18.2.0", + "react-intersection-observer": "9.1.0", + "redux-mock-store": "1.5.4", "slate": "0.100.0", "slate-history": "0.100.0", "slate-hyperscript": "0.100.0", "slate-react": "0.98.4", + "uuid": "^9.0.1", "weak-key": "^1.0.2" }, "devDependencies": { diff --git a/packages/volto-slate/src/blocks/Text/index.js b/packages/volto-slate/src/blocks/Text/index.jsx similarity index 100% rename from packages/volto-slate/src/blocks/Text/index.js rename to packages/volto-slate/src/blocks/Text/index.jsx diff --git a/packages/volto-slate/src/editor/plugins/Blockquote/index.js b/packages/volto-slate/src/editor/plugins/Blockquote/index.jsx similarity index 100% rename from packages/volto-slate/src/editor/plugins/Blockquote/index.js rename to packages/volto-slate/src/editor/plugins/Blockquote/index.jsx diff --git a/packages/volto-slate/src/editor/plugins/Callout/index.js b/packages/volto-slate/src/editor/plugins/Callout/index.jsx similarity index 100% rename from packages/volto-slate/src/editor/plugins/Callout/index.js rename to packages/volto-slate/src/editor/plugins/Callout/index.jsx diff --git a/packages/volto-slate/src/editor/plugins/Link/index.js b/packages/volto-slate/src/editor/plugins/Link/index.jsx similarity index 100% rename from packages/volto-slate/src/editor/plugins/Link/index.js rename to packages/volto-slate/src/editor/plugins/Link/index.jsx diff --git a/packages/volto-slate/src/editor/plugins/StyleMenu/index.js b/packages/volto-slate/src/editor/plugins/StyleMenu/index.jsx similarity index 100% rename from packages/volto-slate/src/editor/plugins/StyleMenu/index.js rename to packages/volto-slate/src/editor/plugins/StyleMenu/index.jsx diff --git a/packages/volto-slate/src/editor/plugins/Table/index.js b/packages/volto-slate/src/editor/plugins/Table/index.jsx similarity index 100% rename from packages/volto-slate/src/editor/plugins/Table/index.js rename to packages/volto-slate/src/editor/plugins/Table/index.jsx diff --git a/packages/volto/index.html b/packages/volto/index.html new file mode 100644 index 0000000000..ef5d242368 --- /dev/null +++ b/packages/volto/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/packages/volto/package.json b/packages/volto/package.json index 5e31261282..c28fc98f4e 100644 --- a/packages/volto/package.json +++ b/packages/volto/package.json @@ -62,7 +62,8 @@ "release-major-alpha": "release-it major --preRelease=alpha", "release-alpha": "release-it --preRelease=alpha", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "dev": "vite" }, "bundlewatch": { "files": [ @@ -229,7 +230,7 @@ "react-fast-compare": "2.0.4", "react-image-gallery": "1.2.7", "react-intersection-observer": "9.1.0", - "react-intl": "3.8.0", + "react-intl": "3.12.1", "react-intl-redux": "2.3.0", "react-medium-image-zoom": "3.0.15", "react-popper": "^2.3.0", @@ -268,7 +269,8 @@ "universal-cookie-express": "4.0.3", "url": "^0.11.3", "use-deep-compare-effect": "1.8.1", - "uuid": "^8.3.2" + "uuid": "^8.3.2", + "vite-plugin-node-polyfills": "^0.22.0" }, "devDependencies": { "@babel/core": "^7.0.0", @@ -310,6 +312,7 @@ "@types/uuid": "^9.0.2", "@typescript-eslint/eslint-plugin": "^7.7.0", "@typescript-eslint/parser": "^7.7.0", + "@vitejs/plugin-react": "^4.3.0", "autoprefixer": "10.4.8", "axe-core": "4.4.2", "babel-loader": "9.1.0", @@ -325,6 +328,7 @@ "cypress-axe": "1.5.0", "cypress-file-upload": "5.0.8", "deep-freeze": "0.0.1", + "esbuild-plugin-react-virtualized": "^1.0.4", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-react-app": "^7.0.1", @@ -379,6 +383,7 @@ "ts-loader": "9.4.4", "typescript": "^5.4.2", "use-trace-update": "1.3.2", + "vite": "^5.2.11", "wait-on": "6.0.0", "webpack": "5.90.1", "webpack-bundle-analyzer": "4.10.1", diff --git a/packages/volto/src/components/manage/Add/Add.jsx b/packages/volto/src/components/manage/Add/Add.jsx index 0510b43f5a..c62297d1f1 100644 --- a/packages/volto/src/components/manage/Add/Add.jsx +++ b/packages/volto/src/components/manage/Add/Add.jsx @@ -239,7 +239,7 @@ class Add extends Component { if (this.props.location?.state?.translationOf) { const language = this.props.location.state.languageFrom; const langFileName = toGettextLang(language); - import('@root/../locales/' + langFileName + '.json').then((locale) => { + import(`../../../../locales/${langFileName}.json`).then((locale) => { this.props.changeLanguage(language, locale.default); }); this.props.history.push(this.props.location?.state?.translationOf); diff --git a/packages/volto/src/components/manage/Blocks/Image/schema.js b/packages/volto/src/components/manage/Blocks/Image/schema.jsx similarity index 100% rename from packages/volto/src/components/manage/Blocks/Image/schema.js rename to packages/volto/src/components/manage/Blocks/Image/schema.jsx diff --git a/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx b/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx index adc364f507..7a9cc880ab 100644 --- a/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx +++ b/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx @@ -34,7 +34,7 @@ const CreateTranslation = (props) => { // We change the interface language if (config.settings.supportedLanguages.includes(language)) { const langFileName = toGettextLang(language); - import('@root/../locales/' + langFileName + '.json').then((locale) => { + import(`../../../../locales/${langFileName}.json`).then((locale) => { dispatch(changeLanguage(language, locale.default)); }); } diff --git a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx index 706507b878..38fd1bfeca 100644 --- a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx +++ b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx @@ -48,7 +48,7 @@ const TranslationObject = ({ let lang = config.settings.supportedLanguages[Object.keys(locales).length]; const langFileName = toGettextLang(lang); - import('@root/../locales/' + langFileName + '.json').then((locale) => { + import(`../../../../locales/${langFileName}.json`).then((locale) => { setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default }); setLoadingLocale(false); }); diff --git a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx index 605da71837..fed7583925 100644 --- a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx +++ b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx @@ -88,7 +88,7 @@ class PersonalPreferences extends Component { let language = data.language || 'en'; if (config.settings.supportedLanguages.includes(language)) { const langFileName = toGettextLang(language); - import('@root/../locales/' + langFileName + '.json').then((locale) => { + import(`../../../../locales/${langFileName}.json`).then((locale) => { this.props.changeLanguage(language, locale.default); }); } diff --git a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx similarity index 100% rename from packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js rename to packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx diff --git a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx index dfd5fc99b2..9b09bb71ae 100644 --- a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx +++ b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx @@ -24,7 +24,7 @@ const MultilingualRedirector = (props) => { let mounted = true; if (settings.isMultilingual && pathname === '/') { const langFileName = toGettextLang(redirectToLanguage); - import('@root/../locales/' + langFileName + '.json').then((locale) => { + import(`../../../../locales/${langFileName}.json`).then((locale) => { if (mounted) { dispatch(changeLanguage(redirectToLanguage, locale.default)); } diff --git a/packages/volto/src/constants/Languages.js b/packages/volto/src/constants/Languages.js index fad2f37ffe..38ed20205b 100644 --- a/packages/volto/src/constants/Languages.js +++ b/packages/volto/src/constants/Languages.js @@ -3,7 +3,7 @@ * @module constants/Languages */ -module.exports = { +export default { ca: 'CatalĂ ', de: 'Deutsch', en: 'English', diff --git a/packages/volto/src/helpers/AuthToken/AuthToken.js b/packages/volto/src/helpers/AuthToken/AuthToken.js index 3d146e6d18..fce7343895 100644 --- a/packages/volto/src/helpers/AuthToken/AuthToken.js +++ b/packages/volto/src/helpers/AuthToken/AuthToken.js @@ -102,8 +102,8 @@ export function persistAuthToken(store, req) { handleChange(true); } -if (module.hot) { - module.hot.dispose((data) => { - data.reloaded = true; - }); -} +// if (module.hot) { +// module.hot.dispose((data) => { +// data.reloaded = true; +// }); +// } diff --git a/packages/volto/src/helpers/Extensions/withBlockExtensions.js b/packages/volto/src/helpers/Extensions/withBlockExtensions.jsx similarity index 100% rename from packages/volto/src/helpers/Extensions/withBlockExtensions.js rename to packages/volto/src/helpers/Extensions/withBlockExtensions.jsx diff --git a/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.js b/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx similarity index 100% rename from packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.js rename to packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx diff --git a/packages/volto/src/helpers/FormValidation/FormValidation.js b/packages/volto/src/helpers/FormValidation/FormValidation.jsx similarity index 100% rename from packages/volto/src/helpers/FormValidation/FormValidation.js rename to packages/volto/src/helpers/FormValidation/FormValidation.jsx diff --git a/packages/volto/src/helpers/Helmet/Helmet.js b/packages/volto/src/helpers/Helmet/Helmet.jsx similarity index 100% rename from packages/volto/src/helpers/Helmet/Helmet.js rename to packages/volto/src/helpers/Helmet/Helmet.jsx diff --git a/packages/volto/src/helpers/Loadable/Loadable.js b/packages/volto/src/helpers/Loadable/Loadable.jsx similarity index 100% rename from packages/volto/src/helpers/Loadable/Loadable.js rename to packages/volto/src/helpers/Loadable/Loadable.jsx diff --git a/packages/volto/src/helpers/Utils/Utils.js b/packages/volto/src/helpers/Utils/Utils.jsx similarity index 100% rename from packages/volto/src/helpers/Utils/Utils.js rename to packages/volto/src/helpers/Utils/Utils.jsx diff --git a/packages/volto/src/middleware/api.js b/packages/volto/src/middleware/api.js index f46dc30470..b0a9a4c315 100644 --- a/packages/volto/src/middleware/api.js +++ b/packages/volto/src/middleware/api.js @@ -237,7 +237,7 @@ const apiMiddlewareFactory = config.settings.supportedLanguages.includes(lang) ) { const langFileName = toGettextLang(lang); - import('@root/../locales/' + langFileName + '.json').then( + import(`../../../../locales/${langFileName}.json`).then( (locale) => { dispatch(changeLanguage(lang, locale.default)); }, diff --git a/packages/volto/src/start-client.jsx b/packages/volto/src/start-client.jsx index 4494b118c7..067194811d 100644 --- a/packages/volto/src/start-client.jsx +++ b/packages/volto/src/start-client.jsx @@ -1,4 +1,4 @@ -import '@plone/volto/config'; // This is the bootstrap for the global config - client side +import './config'; // This is the bootstrap for the global config - client side import '@root/theme'; import React from 'react'; import { hydrateRoot } from 'react-dom/client'; diff --git a/packages/volto/theme/theme.config b/packages/volto/theme/theme.config index 58c1dd0c77..e15f2fa7cd 100644 --- a/packages/volto/theme/theme.config +++ b/packages/volto/theme/theme.config @@ -82,17 +82,17 @@ *******************************/ /* Path to theme packages */ -@themesFolder : '~volto-themes'; +@themesFolder : 'volto-themes'; /* Path to site override folder */ -@siteFolder : "~@root/../themes/site"; +@siteFolder : "@root/../themes/site"; /******************************* Import Theme *******************************/ -@import (multiple) "~semantic-ui-less/theme.less"; -@fontPath : "~volto-themes/@{theme}/assets/fonts"; +@import (multiple) "semantic-ui-less/theme.less"; +@fontPath : "volto-themes/@{theme}/assets/fonts"; /* End Config */ diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js new file mode 100644 index 0000000000..b0649b23f1 --- /dev/null +++ b/packages/volto/vite.config.js @@ -0,0 +1,55 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; +import fixReactVirtualized from 'esbuild-plugin-react-virtualized'; +import { nodePolyfills } from 'vite-plugin-node-polyfills'; + +import AddonConfigurationRegistry from '@plone/registry/src/addon-registry'; +import createAddonsLoader from '@plone/registry/src/create-addons-loader'; + +const projectRootPath = path.resolve('.'); +const registry = new AddonConfigurationRegistry(projectRootPath); + +const addonsLoaderPath = createAddonsLoader( + registry.getAddonDependencies(), + registry.getAddons(), +); + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react(), nodePolyfills()], + resolve: { + alias: [ + { find: /^~/, replacement: '' }, + { find: '@plone/volto', replacement: path.resolve(__dirname, './src/') }, + { find: '@root', replacement: path.resolve(__dirname, './src/') }, + { + find: '@root/../themes', + replacement: path.resolve(__dirname, './theme/'), + }, + { + find: '@plone/volto-slate', + replacement: path.resolve(__dirname, '../volto-slate/src/'), + }, + { + find: '../../theme.config', + replacement: path.resolve(__dirname, './theme/theme.config'), + }, + { find: 'load-volto-addons', replacement: addonsLoaderPath }, + { + find: 'volto-themes', + replacement: path.resolve(__dirname, './theme/themes'), + }, + ], + }, + define: { + // By default, Vite doesn't include shims for NodeJS/ + // necessary for segment analytics lib to work + __CLIENT__: true, + }, + optimizeDeps: { + esbuildOptions: { + plugins: [fixReactVirtualized], + }, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d855d87a7..556d1d0bd3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1839,11 +1839,11 @@ importers: specifier: 9.1.0 version: 9.1.0(react@18.2.0) react-intl: - specifier: 3.8.0 - version: 3.8.0(react@18.2.0) + specifier: 3.12.1 + version: 3.12.1(react@18.2.0) react-intl-redux: specifier: 2.3.0 - version: 2.3.0(@babel/runtime@7.20.6)(prop-types@15.7.2)(react-intl@3.8.0(react@18.2.0))(react-redux@8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1))(react@18.2.0) + version: 2.3.0(@babel/runtime@7.20.6)(prop-types@15.7.2)(react-intl@3.12.1(react@18.2.0))(react-redux@8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1))(react@18.2.0) react-medium-image-zoom: specifier: 3.0.15 version: 3.0.15(prop-types@15.7.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -1958,6 +1958,9 @@ importers: uuid: specifier: ^8.3.2 version: 8.3.2 + vite-plugin-node-polyfills: + specifier: ^0.22.0 + version: 0.22.0(rollup@4.14.3)(vite@5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)) devDependencies: '@babel/core': specifier: ^7.0.0 @@ -2076,6 +2079,9 @@ importers: '@typescript-eslint/parser': specifier: ^7.7.0 version: 7.7.0(eslint@8.57.0)(typescript@5.4.5) + '@vitejs/plugin-react': + specifier: ^4.3.0 + version: 4.3.0(vite@5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)) autoprefixer: specifier: 10.4.8 version: 10.4.8(postcss@8.4.31) @@ -2121,6 +2127,9 @@ importers: deep-freeze: specifier: 0.0.1 version: 0.0.1 + esbuild-plugin-react-virtualized: + specifier: ^1.0.4 + version: 1.0.4(esbuild@0.20.2) eslint: specifier: ^8.57.0 version: 8.57.0 @@ -2283,6 +2292,9 @@ importers: use-trace-update: specifier: 1.3.2 version: 1.3.2 + vite: + specifier: ^5.2.11 + version: 5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3) wait-on: specifier: 6.0.0 version: 6.0.0(debug@4.3.2) @@ -2304,15 +2316,24 @@ importers: packages/volto-slate: dependencies: + classnames: + specifier: 2.2.6 + version: 2.2.6 image-extensions: specifier: 1.1.0 version: 1.1.0 + is-hotkey: + specifier: 0.2.0 + version: 0.2.0 is-url: specifier: 1.2.4 version: 1.2.4 jsdom: specifier: ^16.6.0 version: 16.7.0 + lodash: + specifier: 4.17.21 + version: 4.17.21 react: specifier: 18.2.0 version: 18.2.0 @@ -2322,6 +2343,9 @@ importers: react-intersection-observer: specifier: 9.1.0 version: 9.1.0(react@18.2.0) + redux-mock-store: + specifier: 1.5.4 + version: 1.5.4 slate: specifier: 0.100.0 version: 0.100.0 @@ -2334,6 +2358,9 @@ importers: slate-react: specifier: 0.98.4 version: 0.98.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(slate@0.100.0) + uuid: + specifier: ^9.0.1 + version: 9.0.1 weak-key: specifier: ^1.0.2 version: 1.0.3 @@ -2411,6 +2438,10 @@ packages: resolution: {integrity: sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==} engines: {node: '>=6.9.0'} + '@babel/core@7.24.5': + resolution: {integrity: sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==} + engines: {node: '>=6.9.0'} + '@babel/eslint-parser@7.22.15': resolution: {integrity: sha512-yc8OOBIQk1EcRrpizuARSQS0TWAcOMpEJ1aafhNznaeYkeL+OhqnDObGFylB8ka8VFF/sZc+S4RzHyO+3LjQxg==} engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0} @@ -2422,6 +2453,10 @@ packages: resolution: {integrity: sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==} engines: {node: '>=6.9.0'} + '@babel/generator@7.24.5': + resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==} + engines: {node: '>=6.9.0'} + '@babel/helper-annotate-as-pure@7.22.5': resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -2486,6 +2521,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0 + '@babel/helper-module-transforms@7.24.5': + resolution: {integrity: sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + '@babel/helper-optimise-call-expression@7.22.5': resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} @@ -2494,6 +2535,10 @@ packages: resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==} engines: {node: '>=6.9.0'} + '@babel/helper-plugin-utils@7.24.5': + resolution: {integrity: sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==} + engines: {node: '>=6.9.0'} + '@babel/helper-remap-async-to-generator@7.22.20': resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==} engines: {node: '>=6.9.0'} @@ -2510,6 +2555,10 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} + '@babel/helper-simple-access@7.24.5': + resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==} + engines: {node: '>=6.9.0'} + '@babel/helper-skip-transparent-expression-wrappers@7.22.5': resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} @@ -2518,6 +2567,10 @@ packages: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} + '@babel/helper-split-export-declaration@7.24.5': + resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==} + engines: {node: '>=6.9.0'} + '@babel/helper-string-parser@7.24.1': resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==} engines: {node: '>=6.9.0'} @@ -2526,6 +2579,10 @@ packages: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} + '@babel/helper-validator-identifier@7.24.5': + resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==} + engines: {node: '>=6.9.0'} + '@babel/helper-validator-option@7.23.5': resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==} engines: {node: '>=6.9.0'} @@ -2538,6 +2595,10 @@ packages: resolution: {integrity: sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==} engines: {node: '>=6.9.0'} + '@babel/helpers@7.24.5': + resolution: {integrity: sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==} + engines: {node: '>=6.9.0'} + '@babel/highlight@7.24.2': resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==} engines: {node: '>=6.9.0'} @@ -2547,6 +2608,11 @@ packages: engines: {node: '>=6.0.0'} hasBin: true + '@babel/parser@7.24.5': + resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==} + engines: {node: '>=6.0.0'} + hasBin: true + '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4': resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==} engines: {node: '>=6.9.0'} @@ -3041,6 +3107,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/plugin-transform-react-jsx-self@7.24.5': + resolution: {integrity: sha512-RtCJoUO2oYrYwFPtR1/jkoBEcFuI1ae9a9IMxeyAVa3a1Ap4AnxmyIKG2b2FaJKqkidw/0cxRbWN+HOs6ZWd1w==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@babel/plugin-transform-react-jsx-source@7.24.1': resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==} engines: {node: '>=6.9.0'} @@ -3195,6 +3267,10 @@ packages: resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==} engines: {node: '>=6.9.0'} + '@babel/traverse@7.24.5': + resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==} + engines: {node: '>=6.9.0'} + '@babel/types@7.20.5': resolution: {integrity: sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==} engines: {node: '>=6.9.0'} @@ -3203,6 +3279,10 @@ packages: resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==} engines: {node: '>=6.9.0'} + '@babel/types@7.24.5': + resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==} + engines: {node: '>=6.9.0'} + '@base2/pretty-print-object@1.0.1': resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} @@ -3892,6 +3972,9 @@ packages: '@formatjs/icu-skeleton-parser@1.8.0': resolution: {integrity: sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==} + '@formatjs/intl-displaynames@1.2.10': + resolution: {integrity: sha512-GROA2RP6+7Ouu0WnHFF78O5XIU7pBfI19WM1qm93l6MFWibUk67nCfVCK3VAYJkLy8L8ZxjkYT11VIAfvSz8wg==} + '@formatjs/intl-listformat@1.4.8': resolution: {integrity: sha512-WNMQlEg0e50VZrGIkgD5n7+DAMGt3boKi1GJALfhFMymslJb5i+5WzWxyj/3a929Z6MAFsmzRIJjKuv+BxKAOQ==} @@ -7610,6 +7693,12 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 + '@vitejs/plugin-react@4.3.0': + resolution: {integrity: sha512-KcEbMsn4Dpk+LIbHMj7gDPRKaTMStxxWRkRmxsg/jVdFdJCZWt1SchZcf0M4t8lIKdwwMsEyzhrcOXRrDPtOBw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + '@vitest/coverage-v8@1.5.0': resolution: {integrity: sha512-1igVwlcqw1QUMdfcMlzzY4coikSIBN944pkueGi0pawrX5I5Z+9hxdTR+w3Sg6Q3eZhvdMAs8ZaF9JuTG1uYOQ==} peerDependencies: @@ -8617,6 +8706,9 @@ packages: browser-resolve@1.11.3: resolution: {integrity: sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==} + browser-resolve@2.0.0: + resolution: {integrity: sha512-7sWsQlYL2rGLy2IWm8WL8DCTJvYLc/qlOnsakDac87SOoCd16WLsaAMdCiAqsTNHIe+SXfaqyxyo6THoWqs8WQ==} + browserify-aes@1.2.0: resolution: {integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==} @@ -9388,6 +9480,9 @@ packages: create-hmac@1.1.7: resolution: {integrity: sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==} + create-require@1.1.1: + resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==} + cross-spawn@5.1.0: resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==} @@ -9995,6 +10090,10 @@ packages: resolution: {integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==} engines: {node: '>=0.4', npm: '>=1.2'} + domain-browser@4.23.0: + resolution: {integrity: sha512-ArzcM/II1wCCujdCNyQjXrAFwS4mrLh4C7DZWlaI8mdh7h3BfKdNd3bKXITfl2PT9FtfQqaGvhi1vPRQPimjGA==} + engines: {node: '>=10'} + domelementtype@1.3.1: resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==} @@ -10253,6 +10352,11 @@ packages: esbuild-plugin-alias@0.2.1: resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==} + esbuild-plugin-react-virtualized@1.0.4: + resolution: {integrity: sha512-/Y+82TBduHox0/uhJlTgUqi3ZWN+qZPF0xy9crkHQE2AOOdm76l6VY2F0Mdfvue9hqXz2FOlKHlHUVXNalHLzA==} + peerDependencies: + esbuild: '*' + esbuild-plugins-node-modules-polyfill@1.6.3: resolution: {integrity: sha512-nydQGT3RijD8mBd3Hek+2gSAxndgceZU9GIjYYiqU+7CE7veN8utTmupf0frcKpwIXCXWpRofL9CY9k0yU70CA==} engines: {node: '>=14.0.0'} @@ -12364,6 +12468,10 @@ packages: isomorphic-fetch@2.2.1: resolution: {integrity: sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==} + isomorphic-timers-promises@1.0.1: + resolution: {integrity: sha512-u4sej9B1LPSxTGKB/HiuzvEQnXH0ECYkSVQU39koSwmFAxhlEAFl9RdTvLv4TOTQUgBS5O3O5fwUxk6byBZ+IQ==} + engines: {node: '>=10'} + isstream@0.1.2: resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==} @@ -14261,6 +14369,10 @@ packages: node-releases@2.0.14: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + node-stdlib-browser@1.2.0: + resolution: {integrity: sha512-VSjFxUhRhkyed8AtLwSCkMrJRfQ3e2lGtG3sP6FEgaLKBBbxM/dLfjRe1+iLhjvyLFW3tBQ8+c0pcOtXGbAZJg==} + engines: {node: '>=10'} + nopt@5.0.0: resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} engines: {node: '>=6'} @@ -15711,6 +15823,11 @@ packages: react-intl: "^2.2.2 ||\_^3.0.0 || ^4.0.0 || ^5.0.0" react-redux: ^5.0.1 || ^6.0.0 || ^7.0.0 + react-intl@3.12.1: + resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==} + peerDependencies: + react: ^16.3.0 + react-intl@3.8.0: resolution: {integrity: sha512-jWSbc7PUJOpmy0gC9LzTyERpt/auYmMyY0jtCmczgmRns5MIKG9Bav+NpCyZ6XG2jJQgJNWpLkMFy8u7MgjuqA==} peerDependencies: @@ -16990,6 +17107,9 @@ packages: stream-browserify@2.0.2: resolution: {integrity: sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==} + stream-browserify@3.0.0: + resolution: {integrity: sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==} + stream-combiner@0.0.4: resolution: {integrity: sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==} @@ -16999,6 +17119,9 @@ packages: stream-http@2.8.3: resolution: {integrity: sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==} + stream-http@3.2.0: + resolution: {integrity: sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==} + stream-shift@1.0.3: resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==} @@ -17732,6 +17855,9 @@ packages: tty-browserify@0.0.0: resolution: {integrity: sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==} + tty-browserify@0.0.1: + resolution: {integrity: sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==} + tuf-js@1.1.7: resolution: {integrity: sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -18291,6 +18417,11 @@ packages: '@nuxt/kit': optional: true + vite-plugin-node-polyfills@0.22.0: + resolution: {integrity: sha512-F+G3LjiGbG8QpbH9bZ//GSBr9i1InSTkaulfUHFa9jkLqVGORFBoqc2A/Yu5Mmh1kNAbiAeKeK+6aaQUf3x0JA==} + peerDependencies: + vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 + vite-plugin-solid@2.10.2: resolution: {integrity: sha512-AOEtwMe2baBSXMXdo+BUwECC8IFHcKS6WQV/1NEd+Q7vHPap5fmIhLcAzr+DUJ04/KHx/1UBU0l1/GWP+rMAPQ==} peerDependencies: @@ -18337,6 +18468,34 @@ packages: terser: optional: true + vite@5.2.11: + resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + vite@5.2.9: resolution: {integrity: sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==} engines: {node: ^18.0.0 || >=20.0.0} @@ -18999,6 +19158,26 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/core@7.24.5': + dependencies: + '@ampproject/remapping': 2.3.0 + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.5 + '@babel/helper-compilation-targets': 7.23.6 + '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5) + '@babel/helpers': 7.24.5 + '@babel/parser': 7.24.5 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.5 + '@babel/types': 7.24.5 + convert-source-map: 2.0.0 + debug: 4.3.4(supports-color@8.1.1) + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + '@babel/eslint-parser@7.22.15(@babel/core@7.24.4)(eslint@8.49.0)': dependencies: '@babel/core': 7.24.4 @@ -19022,6 +19201,13 @@ snapshots: '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 + '@babel/generator@7.24.5': + dependencies: + '@babel/types': 7.24.5 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + jsesc: 2.5.2 + '@babel/helper-annotate-as-pure@7.22.5': dependencies: '@babel/types': 7.24.0 @@ -19115,12 +19301,23 @@ snapshots: '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 + '@babel/helper-module-transforms@7.24.5(@babel/core@7.24.5)': + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-simple-access': 7.24.5 + '@babel/helper-split-export-declaration': 7.24.5 + '@babel/helper-validator-identifier': 7.24.5 + '@babel/helper-optimise-call-expression@7.22.5': dependencies: '@babel/types': 7.24.0 '@babel/helper-plugin-utils@7.24.0': {} + '@babel/helper-plugin-utils@7.24.5': {} + '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.4)': dependencies: '@babel/core': 7.24.4 @@ -19139,6 +19336,10 @@ snapshots: dependencies: '@babel/types': 7.24.0 + '@babel/helper-simple-access@7.24.5': + dependencies: + '@babel/types': 7.24.5 + '@babel/helper-skip-transparent-expression-wrappers@7.22.5': dependencies: '@babel/types': 7.24.0 @@ -19147,10 +19348,16 @@ snapshots: dependencies: '@babel/types': 7.24.0 + '@babel/helper-split-export-declaration@7.24.5': + dependencies: + '@babel/types': 7.24.5 + '@babel/helper-string-parser@7.24.1': {} '@babel/helper-validator-identifier@7.22.20': {} + '@babel/helper-validator-identifier@7.24.5': {} + '@babel/helper-validator-option@7.23.5': {} '@babel/helper-wrap-function@7.22.20': @@ -19167,6 +19374,14 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/helpers@7.24.5': + dependencies: + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.5 + '@babel/types': 7.24.5 + transitivePeerDependencies: + - supports-color + '@babel/highlight@7.24.2': dependencies: '@babel/helper-validator-identifier': 7.22.20 @@ -19178,6 +19393,10 @@ snapshots: dependencies: '@babel/types': 7.20.5 + '@babel/parser@7.24.5': + dependencies: + '@babel/types': 7.20.5 + '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.4)': dependencies: '@babel/core': 7.24.4 @@ -19663,11 +19882,21 @@ snapshots: '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-transform-react-jsx-self@7.24.5(@babel/core@7.24.5)': + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-plugin-utils': 7.24.5 + '@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.4)': dependencies: '@babel/core': 7.24.4 '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.5)': + dependencies: + '@babel/core': 7.24.5 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4)': dependencies: '@babel/core': 7.24.4 @@ -19928,6 +20157,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/traverse@7.24.5': + dependencies: + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 + '@babel/helper-hoist-variables': 7.22.5 + '@babel/helper-split-export-declaration': 7.24.5 + '@babel/parser': 7.24.5 + '@babel/types': 7.24.5 + debug: 4.3.4(supports-color@8.1.1) + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + '@babel/types@7.20.5': dependencies: '@babel/helper-string-parser': 7.24.1 @@ -19940,6 +20184,12 @@ snapshots: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + '@babel/types@7.24.5': + dependencies: + '@babel/helper-string-parser': 7.24.1 + '@babel/helper-validator-identifier': 7.24.5 + to-fast-properties: 2.0.0 + '@base2/pretty-print-object@1.0.1': {} '@bcoe/v8-coverage@0.2.3': {} @@ -20400,6 +20650,10 @@ snapshots: '@formatjs/ecma402-abstract': 1.18.2 tslib: 2.6.2 + '@formatjs/intl-displaynames@1.2.10': + dependencies: + '@formatjs/intl-utils': 2.3.0 + '@formatjs/intl-listformat@1.4.8': dependencies: '@formatjs/intl-utils': 2.3.0 @@ -26267,7 +26521,7 @@ snapshots: '@types/eslint@8.56.10': dependencies: - '@types/estree': 0.0.51 + '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 '@types/estree-jsx@1.0.5': @@ -26999,6 +27253,17 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitejs/plugin-react@4.3.0(vite@5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3))': + dependencies: + '@babel/core': 7.24.5 + '@babel/plugin-transform-react-jsx-self': 7.24.5(@babel/core@7.24.5) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.5) + '@types/babel__core': 7.20.5 + react-refresh: 0.14.0 + vite: 5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3) + transitivePeerDependencies: + - supports-color + '@vitest/coverage-v8@1.5.0(vitest@1.5.0(@types/node@20.12.7)(jsdom@21.1.2)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3))': dependencies: '@ampproject/remapping': 2.3.0 @@ -28402,6 +28667,10 @@ snapshots: dependencies: resolve: 1.1.7 + browser-resolve@2.0.0: + dependencies: + resolve: 1.22.8 + browserify-aes@1.2.0: dependencies: buffer-xor: 1.0.3 @@ -29378,6 +29647,8 @@ snapshots: safe-buffer: 5.2.1 sha.js: 2.4.11 + create-require@1.1.1: {} + cross-spawn@5.1.0: dependencies: lru-cache: 4.1.5 @@ -30065,6 +30336,8 @@ snapshots: domain-browser@1.2.0: {} + domain-browser@4.23.0: {} + domelementtype@1.3.1: {} domelementtype@2.3.0: {} @@ -30397,6 +30670,10 @@ snapshots: esbuild-plugin-alias@0.2.1: {} + esbuild-plugin-react-virtualized@1.0.4(esbuild@0.20.2): + dependencies: + esbuild: 0.20.2 + esbuild-plugins-node-modules-polyfill@1.6.3(esbuild@0.17.6): dependencies: '@jspm/core': 2.0.1 @@ -30839,7 +31116,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -31703,7 +31980,7 @@ snapshots: fork-ts-checker-webpack-plugin@4.1.6(eslint@8.57.0)(typescript@5.4.5)(vue-template-compiler@2.7.16)(webpack@5.90.1(esbuild@0.20.2)): dependencies: - '@babel/code-frame': 7.10.4 + '@babel/code-frame': 7.24.2 chalk: 2.4.2 micromatch: 3.1.10 minimatch: 3.1.2 @@ -33291,6 +33568,8 @@ snapshots: node-fetch: 1.7.3 whatwg-fetch: 3.6.20 + isomorphic-timers-promises@1.0.1: {} + isstream@0.1.2: {} issue-parser@6.0.0: @@ -36401,6 +36680,36 @@ snapshots: node-releases@2.0.14: {} + node-stdlib-browser@1.2.0: + dependencies: + assert: 2.1.0 + browser-resolve: 2.0.0 + browserify-zlib: 0.2.0 + buffer: 5.7.1 + console-browserify: 1.2.0 + constants-browserify: 1.0.0 + create-require: 1.1.1 + crypto-browserify: 3.12.0 + domain-browser: 4.23.0 + events: 3.3.0 + https-browserify: 1.0.0 + isomorphic-timers-promises: 1.0.1 + os-browserify: 0.3.0 + path-browserify: 1.0.1 + pkg-dir: 5.0.0 + process: 0.11.10 + punycode: 1.4.1 + querystring-es3: 0.2.1 + readable-stream: 3.6.2 + stream-browserify: 3.0.0 + stream-http: 3.2.0 + string_decoder: 1.3.0 + timers-browserify: 2.0.12 + tty-browserify: 0.0.1 + url: 0.11.3 + util: 0.12.5 + vm-browserify: 1.1.2 + nopt@5.0.0: dependencies: abbrev: 1.1.1 @@ -38439,6 +38748,14 @@ snapshots: dependencies: react: 18.2.0 + react-intl-redux@2.3.0(@babel/runtime@7.20.6)(prop-types@15.7.2)(react-intl@3.12.1(react@18.2.0))(react-redux@8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1))(react@18.2.0): + dependencies: + '@babel/runtime': 7.20.6 + prop-types: 15.7.2 + react: 18.2.0 + react-intl: 3.12.1(react@18.2.0) + react-redux: 8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1) + react-intl-redux@2.3.0(@babel/runtime@7.20.6)(prop-types@15.7.2)(react-intl@3.8.0(react@18.2.0))(react-redux@8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1))(react@18.2.0): dependencies: '@babel/runtime': 7.20.6 @@ -38447,6 +38764,22 @@ snapshots: react-intl: 3.8.0(react@18.2.0) react-redux: 8.1.2(@types/react-dom@18.2.25)(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(redux@4.2.1) + react-intl@3.12.1(react@18.2.0): + dependencies: + '@formatjs/intl-displaynames': 1.2.10 + '@formatjs/intl-listformat': 1.4.8 + '@formatjs/intl-relativetimeformat': 4.5.16 + '@formatjs/intl-unified-numberformat': 3.3.7 + '@formatjs/intl-utils': 2.3.0 + '@types/hoist-non-react-statics': 3.3.5 + '@types/invariant': 2.2.37 + hoist-non-react-statics: 3.3.2 + intl-format-cache: 4.3.1 + intl-messageformat: 7.8.4 + intl-messageformat-parser: 3.6.4 + react: 18.2.0 + shallow-equal: 1.2.1 + react-intl@3.8.0(react@18.2.0): dependencies: '@formatjs/intl-listformat': 1.4.8 @@ -40223,6 +40556,11 @@ snapshots: inherits: 2.0.4 readable-stream: 2.3.8 + stream-browserify@3.0.0: + dependencies: + inherits: 2.0.4 + readable-stream: 3.6.2 + stream-combiner@0.0.4: dependencies: duplexer: 0.1.2 @@ -40240,6 +40578,13 @@ snapshots: to-arraybuffer: 1.0.1 xtend: 4.0.2 + stream-http@3.2.0: + dependencies: + builtin-status-codes: 3.0.0 + inherits: 2.0.4 + readable-stream: 3.6.2 + xtend: 4.0.2 + stream-shift@1.0.3: {} stream-slice@0.1.2: {} @@ -41114,6 +41459,8 @@ snapshots: tty-browserify@0.0.0: {} + tty-browserify@0.0.1: {} + tuf-js@1.1.7: dependencies: '@tufjs/models': 1.0.4 @@ -41848,6 +42195,14 @@ snapshots: - rollup - supports-color + vite-plugin-node-polyfills@0.22.0(rollup@4.14.3)(vite@5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)): + dependencies: + '@rollup/plugin-inject': 5.0.5(rollup@4.14.3) + node-stdlib-browser: 1.2.0 + vite: 5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3) + transitivePeerDependencies: + - rollup + vite-plugin-solid@2.10.2(@testing-library/jest-dom@6.4.2(vitest@1.5.0(@types/node@20.12.7)(jsdom@22.1.0)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)))(solid-js@1.8.16)(vite@4.5.0(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)): dependencies: '@babel/core': 7.24.4 @@ -41887,6 +42242,19 @@ snapshots: sass: 1.75.0 terser: 5.30.3 + vite@5.2.11(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3): + dependencies: + esbuild: 0.20.2 + postcss: 8.4.38 + rollup: 4.14.3 + optionalDependencies: + '@types/node': 20.12.7 + fsevents: 2.3.3 + less: 3.11.1 + lightningcss: 1.24.1 + sass: 1.75.0 + terser: 5.30.3 + vite@5.2.9(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3): dependencies: esbuild: 0.20.2 From 5ba23cd5f869c583b2260156cc9eb0e1e0f40d36 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Fri, 24 May 2024 23:58:26 +0200 Subject: [PATCH 02/40] First rendering of something --- packages/registry/src/create-addons-loader.js | 2 +- packages/volto-slate/package.json | 1 + packages/volto/index.html | 3 ++- packages/volto/src/client.js | 4 ---- packages/volto/src/config/index.js | 7 +++++++ packages/volto/src/helpers/AuthToken/AuthToken.js | 8 +++++--- packages/volto/src/init-store.js | 15 +++++++++++++++ packages/volto/src/middleware/api.js | 8 +++----- packages/volto/src/start-client.jsx | 2 ++ packages/volto/vite.config.js | 5 +++++ pnpm-lock.yaml | 5 ++++- 11 files changed, 45 insertions(+), 15 deletions(-) create mode 100644 packages/volto/src/init-store.js diff --git a/packages/registry/src/create-addons-loader.js b/packages/registry/src/create-addons-loader.js index 7eb5f55757..9cb1b3ffb9 100644 --- a/packages/registry/src/create-addons-loader.js +++ b/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; diff --git a/packages/volto-slate/package.json b/packages/volto-slate/package.json index 56b4341a13..cb8694745f 100644 --- a/packages/volto-slate/package.json +++ b/packages/volto-slate/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "classnames": "2.2.6", + "github-slugger": "1.4.0", "image-extensions": "1.1.0", "is-hotkey": "0.2.0", "is-url": "1.2.4", diff --git a/packages/volto/index.html b/packages/volto/index.html index ef5d242368..0282e8138e 100644 --- a/packages/volto/index.html +++ b/packages/volto/index.html @@ -8,6 +8,7 @@
- + + diff --git a/packages/volto/src/client.js b/packages/volto/src/client.js index 6cc5103add..74002d356d 100644 --- a/packages/volto/src/client.js +++ b/packages/volto/src/client.js @@ -1,7 +1,3 @@ import client from './start-client'; client(); - -if (module.hot) { - module.hot.accept(); -} diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js index e3e0b43fad..c523c10de9 100644 --- a/packages/volto/src/config/index.js +++ b/packages/volto/src/config/index.js @@ -241,3 +241,10 @@ ConfigRegistry.components = config.components; ConfigRegistry.slots = config.slots; applyAddonConfiguration(ConfigRegistry); + +// [Vite] This is needed to comply with the Volto add-on configuration. +// TODO: In Volto 18, projectless builds this won't be needed anymore. +// TODO: To deprecate in Volto 19. +export default function applyConfig(config) { + return config; +} diff --git a/packages/volto/src/helpers/AuthToken/AuthToken.js b/packages/volto/src/helpers/AuthToken/AuthToken.js index fce7343895..912330e9ef 100644 --- a/packages/volto/src/helpers/AuthToken/AuthToken.js +++ b/packages/volto/src/helpers/AuthToken/AuthToken.js @@ -48,9 +48,11 @@ export function persistAuthToken(store, req) { currentValue = state.userSession.token; if ( - module.hot && - module.hot.data && - module.hot.data.reloaded && + // TODO: how Vite handles the hotreload? + // module.hot && + // module.hot.data && + // module.hot.data.reloaded && + false && previousValue ) { currentValue = previousValue; diff --git a/packages/volto/src/init-store.js b/packages/volto/src/init-store.js new file mode 100644 index 0000000000..e3e72593fc --- /dev/null +++ b/packages/volto/src/init-store.js @@ -0,0 +1,15 @@ +import serialize from 'serialize-javascript'; + +const initialState = { + userSession: { + token: + 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTYwMDY1NTM1OSwiZnVsbG5hbWUiOm51bGx9.G7vqPxmRTQkJkLlRoUFZIJRJqdjjKcc9Ymacty9_h0g', + }, + intl: { + defaultLocale: 'en', + locale: 'en', + messages: {}, + }, +}; + +window.__data = serialize(initialState); diff --git a/packages/volto/src/middleware/api.js b/packages/volto/src/middleware/api.js index b0a9a4c315..119643373f 100644 --- a/packages/volto/src/middleware/api.js +++ b/packages/volto/src/middleware/api.js @@ -237,11 +237,9 @@ const apiMiddlewareFactory = config.settings.supportedLanguages.includes(lang) ) { const langFileName = toGettextLang(lang); - import(`../../../../locales/${langFileName}.json`).then( - (locale) => { - dispatch(changeLanguage(lang, locale.default)); - }, - ); + import(`../../locales/${langFileName}.json`).then((locale) => { + dispatch(changeLanguage(lang, locale.default)); + }); } } if (type === LOGIN && settings.websockets) { diff --git a/packages/volto/src/start-client.jsx b/packages/volto/src/start-client.jsx index 067194811d..67c8f9f746 100644 --- a/packages/volto/src/start-client.jsx +++ b/packages/volto/src/start-client.jsx @@ -38,6 +38,8 @@ export default function client() { // Setup the client registry from the SSR response values, presents in the `window.env` // variable. This is key for the Seamless mode to work. + // [Vite] TODO: Add window.env vars in Vite too + window.env = window.env || {}; if (window.env.apiPath) { config.settings.apiPath = window.env.apiPath; } diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js index b0649b23f1..9aa03d1197 100644 --- a/packages/volto/vite.config.js +++ b/packages/volto/vite.config.js @@ -18,6 +18,9 @@ const addonsLoaderPath = createAddonsLoader( // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), nodePolyfills()], + server: { + port: 3000, + }, resolve: { alias: [ { find: /^~/, replacement: '' }, @@ -46,6 +49,8 @@ export default defineConfig({ // By default, Vite doesn't include shims for NodeJS/ // necessary for segment analytics lib to work __CLIENT__: true, + __SERVER__: false, + __DEVELOPMENT__: true, }, optimizeDeps: { esbuildOptions: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 556d1d0bd3..de69e078f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2319,6 +2319,9 @@ importers: classnames: specifier: 2.2.6 version: 2.2.6 + github-slugger: + specifier: 1.4.0 + version: 1.4.0 image-extensions: specifier: 1.1.0 version: 1.1.0 @@ -31116,7 +31119,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 From 4c89f2a07ae8cf13ed329693f979130714c0949e Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 27 May 2024 11:46:48 +0200 Subject: [PATCH 03/40] Make it actually does the request --- packages/volto/index.html | 2 ++ packages/volto/vite.config.js | 3 +++ 2 files changed, 5 insertions(+) diff --git a/packages/volto/index.html b/packages/volto/index.html index 0282e8138e..80b7ed5890 100644 --- a/packages/volto/index.html +++ b/packages/volto/index.html @@ -7,7 +7,9 @@ Vite + React +
+ diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js index 9aa03d1197..1610ac7620 100644 --- a/packages/volto/vite.config.js +++ b/packages/volto/vite.config.js @@ -20,6 +20,9 @@ export default defineConfig({ plugins: [react(), nodePolyfills()], server: { port: 3000, + proxy: { + '/++api++/': 'http://localhost:8080/Plone', + }, }, resolve: { alias: [ From 3cbe84c21658a784c1de5f06e0688a82240da800 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Wed, 3 Jul 2024 09:50:08 +0200 Subject: [PATCH 04/40] WIP for SSR --- packages/registry/package.json | 3 +- packages/volto/package.json | 13 ++- .../components/manage/Widgets/AlignWidget.jsx | 2 +- .../manage/Widgets/ButtonsWidget.jsx | 2 +- packages/volto/src/config/index.js | 10 +- packages/volto/src/entry-server.tsx | 53 +++++++++ packages/volto/src/test_loadable.tsx | 23 ++++ packages/volto/src/vite-server.js | 108 ++++++++++++++++++ packages/volto/vite.config.js | 11 ++ .../{volto.config.js => volto.config.cjs} | 0 pnpm-lock.yaml | 63 ++++++---- 11 files changed, 256 insertions(+), 32 deletions(-) create mode 100644 packages/volto/src/entry-server.tsx create mode 100644 packages/volto/src/test_loadable.tsx create mode 100644 packages/volto/src/vite-server.js rename packages/volto/{volto.config.js => volto.config.cjs} (100%) diff --git a/packages/registry/package.json b/packages/registry/package.json index dd781a679d..c69c7a0bba 100644 --- a/packages/registry/package.json +++ b/packages/registry/package.json @@ -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", diff --git a/packages/volto/package.json b/packages/volto/package.json index a74569de38..1321c49e50 100644 --- a/packages/volto/package.json +++ b/packages/volto/package.json @@ -32,6 +32,7 @@ "package": "@plone/volto-slate" } }, + "type": "module", "main": "src/index.js", "types": "types/index.d.ts", "scripts": { @@ -63,7 +64,8 @@ "release-alpha": "release-it --preRelease=alpha", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "dev": "vite" + "dev": "vite", + "dev:server": "node src/vite-server.js" }, "bundlewatch": { "files": [ @@ -205,6 +207,7 @@ "linkify-it": "3.0.2", "locale": "0.1.0", "lodash": "4.17.21", + "lodash-es": "^4.17.21", "lodash-move": "1.1.1", "moment": "2.29.4", "object-assign": "4.1.1", @@ -283,11 +286,11 @@ "@babel/plugin-syntax-export-namespace-from": "7.8.3", "@babel/runtime": "7.20.6", "@babel/types": "7.20.5", - "@fiverr/afterbuild-webpack-plugin": "^1.0.0", - "@jest/globals": "^29.7.0", "@dnd-kit/core": "6.0.8", "@dnd-kit/sortable": "7.0.2", "@dnd-kit/utilities": "3.2.2", + "@fiverr/afterbuild-webpack-plugin": "^1.0.0", + "@jest/globals": "^29.7.0", "@loadable/babel-plugin": "5.13.2", "@loadable/webpack-plugin": "5.15.2", "@plone/types": "workspace:*", @@ -306,6 +309,7 @@ "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "14.2.0", "@testing-library/react-hooks": "8.0.1", + "@types/express": "^4.17.21", "@types/history": "^4.7.11", "@types/jest": "^29.5.8", "@types/loadable__component": "^5.13.9", @@ -328,6 +332,7 @@ "babel-preset-razzle": "4.2.18", "bundlewatch": "0.3.3", "circular-dependency-plugin": "5.2.2", + "compression": "^1.7.4", "css-loader": "5.2.7", "cypress": "13.6.6", "cypress-axe": "1.5.0", @@ -346,6 +351,7 @@ "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "full-icu": "1.4.0", + "get-port": "^7.0.0", "html-webpack-plugin": "5.5.0", "identity-obj-proxy": "3.0.0", "jest": "26.6.3", @@ -374,6 +380,7 @@ "react-is": "^18.2.0", "release-it": "^17.1.1", "semver": "^7.5.4", + "sirv": "^2.0.4", "start-server-and-test": "1.14.0", "storybook": "^8.0.4", "style-loader": "3.3.1", diff --git a/packages/volto/src/components/manage/Widgets/AlignWidget.jsx b/packages/volto/src/components/manage/Widgets/AlignWidget.jsx index 2855068e3e..5cee3d73f8 100644 --- a/packages/volto/src/components/manage/Widgets/AlignWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/AlignWidget.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import ButtonsWidget from './ButtonsWidget'; +import ButtonsWidget from '@plone/volto/components/manage/Widgets/ButtonsWidget'; import imageLeftSVG from '@plone/volto/icons/image-left.svg'; import imageRightSVG from '@plone/volto/icons/image-right.svg'; import imageFitSVG from '@plone/volto/icons/image-fit.svg'; diff --git a/packages/volto/src/components/manage/Widgets/ButtonsWidget.jsx b/packages/volto/src/components/manage/Widgets/ButtonsWidget.jsx index 6b9b940e69..32c54a3287 100644 --- a/packages/volto/src/components/manage/Widgets/ButtonsWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/ButtonsWidget.jsx @@ -1,6 +1,6 @@ import React from 'react'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; -import { Icon } from '@plone/volto/components'; +import Icon from '@plone/volto/components/theme/Icon/Icon'; import { Button } from 'semantic-ui-react'; // The ButtonsWidget diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js index b69a912786..ef2e2abfe6 100644 --- a/packages/volto/src/config/index.js +++ b/packages/volto/src/config/index.js @@ -59,10 +59,12 @@ const publicURL = ? `http://${host}:${port}` : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`); -const serverConfig = - typeof __SERVER__ !== 'undefined' && __SERVER__ - ? require('./server').default - : {}; +const serverConfig = {}; +// Move this to the server build only +// const serverConfig = +// typeof __SERVER__ !== 'undefined' && __SERVER__ +// ? require('./server').default +// : {}; let config = { settings: { diff --git a/packages/volto/src/entry-server.tsx b/packages/volto/src/entry-server.tsx new file mode 100644 index 0000000000..7797c2557d --- /dev/null +++ b/packages/volto/src/entry-server.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import ReactDOMServer from 'react-dom/server'; +import { ServerResponse } from 'http'; +import express from 'express'; +import { TitleWidget, Moment } from './test_loadable'; +// import './config'; +// import { CookiesProvider } from 'react-cookie'; +// import { Provider } from 'react-intl-redux'; +// import { StaticRouter } from 'react-router-dom'; +// import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect'; + +// index.js +// import './fetch-polyfill'; + +export async function render(opts: { + url: string; + head: string; + req: express.Request; + res: ServerResponse; +}) { + // const markup = ReactDOMServer.renderToString( + // + // + // + // + // + // + // , + // ); + const moment = (await Moment).default; + // Render the app + const appHtml = ReactDOMServer.renderToString( +
+ HELLO from SSR!{' '} + + + + +
, + // , + ); + + opts.res.statusCode = 200; + opts.res.setHeader('Content-Type', 'text/html'); + opts.res.end(`${appHtml}`); +} diff --git a/packages/volto/src/test_loadable.tsx b/packages/volto/src/test_loadable.tsx new file mode 100644 index 0000000000..68b44e5d33 --- /dev/null +++ b/packages/volto/src/test_loadable.tsx @@ -0,0 +1,23 @@ +import { lazy } from 'react'; + +export const AlignWidget = lazy( + () => + import( + /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/AlignWidget' + ), +); + +export const TitleWidget = lazy( + () => + import( + /* webpackChunkName: "Widgets" */ '@plone/volto/components/theme/Widgets/TitleWidget' + ), +); +// export const ButtonsWidget = loadable( +// () => +// import( +// /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ButtonsWidget' +// ), +// ); + +export const Moment = import('moment'); diff --git a/packages/volto/src/vite-server.js b/packages/volto/src/vite-server.js new file mode 100644 index 0000000000..e5af2f9156 --- /dev/null +++ b/packages/volto/src/vite-server.js @@ -0,0 +1,108 @@ +import fs from 'node:fs/promises'; +import express from 'express'; +import getPort, { portNumbers } from 'get-port'; +import dns from 'dns'; + +const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD; + +// If DNS returns both ipv4 and ipv6 addresses, prefer ipv4 + +export async function createServer( + root = process.cwd(), + isProd = process.env.NODE_ENV === 'production', + hmrPort, +) { + dns.setDefaultResultOrder('ipv4first'); + const app = express(); + + const prodIndexHtml = isProd + ? await fs.readFile('./dist/client/index.html', 'utf-8') + : ''; + + /** + * @type {import('vite').ViteDevServer} + */ + let vite; + if (!isProd) { + vite = await ( + await import('vite') + ).createServer({ + root, + logLevel: isTest ? 'error' : 'info', + server: { + middlewareMode: true, + watch: { + // During tests we edit the files too fast and sometimes chokidar + // misses change events, so enforce polling for consistency + usePolling: true, + interval: 100, + }, + hmr: { + port: hmrPort, + }, + }, + appType: 'custom', + }); + // use vite's connect instance as middleware + app.use(vite.middlewares); + } else { + const sirv = (await import('sirv')).default; + app.use((await import('compression')).default()); + app.use('/', sirv('./dist/client', { extensions: [] })); + } + + app.use('*', async (req, res) => { + try { + const url = req.originalUrl; + + if (url.includes('.')) { + console.warn(`${url} is not valid router path`); + res.status(404); + res.end(`${url} is not valid router path`); + return; + } + + // Extract the head from vite's index transformation hook + let viteHead = !isProd + ? await vite.transformIndexHtml( + url, + ``, + ) + : prodIndexHtml; + + viteHead = viteHead.substring( + viteHead.indexOf('') + 6, + viteHead.indexOf(''), + ); + + const entry = await (async () => { + if (!isProd) { + return vite.ssrLoadModule('/src/entry-server.tsx'); + } else { + return import('./dist/server/entry-server.js'); + } + })(); + + console.log('Rendering: ', url, '...'); + entry.render({ req, res, url, head: isProd ? viteHead : '' }); + } catch (e) { + !isProd && vite.ssrFixStacktrace(e); + console.log(e.stack); + res.status(500).end(e.stack); + } + }); + + return { app, vite }; +} + +if (!isTest) { + createServer().then(async ({ app }) => + app.listen( + await getPort({ port: portNumbers(3000, 3100) }), + '0.0.0.0', + () => { + console.log('Client Server: http://localhost:3000'); + }, + ), + ); +} diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js index 1610ac7620..6fe0a304b8 100644 --- a/packages/volto/vite.config.js +++ b/packages/volto/vite.config.js @@ -46,6 +46,11 @@ export default defineConfig({ 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', + }, ], }, define: { @@ -55,6 +60,12 @@ export default defineConfig({ __SERVER__: false, __DEVELOPMENT__: true, }, + // ssr: { + // optimizeDeps: { + // include: ['lodash'], + // }, + // noExternal: ['lodash'], + // }, optimizeDeps: { esbuildOptions: { plugins: [fixReactVirtualized], diff --git a/packages/volto/volto.config.js b/packages/volto/volto.config.cjs similarity index 100% rename from packages/volto/volto.config.js rename to packages/volto/volto.config.cjs diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20fa8ebe83..963cbd7f37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -878,7 +878,7 @@ importers: version: 1.29.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0) axios: specifier: ^1.6.5 - version: 1.6.8 + version: 1.6.8(debug@4.3.4) react: specifier: ^18.2.0 version: 18.2.0 @@ -942,7 +942,7 @@ importers: version: 1.28.2(vite@5.2.9(@types/node@20.12.7)(less@3.11.1)(lightningcss@1.24.1)(sass@1.75.0)(terser@5.30.3)) axios: specifier: ^1.6.5 - version: 1.6.8 + version: 1.6.8(debug@4.3.4) get-port: specifier: ^7.0.0 version: 7.1.0 @@ -1509,6 +1509,9 @@ importers: glob: specifier: 7.1.6 version: 7.1.6 + tmp: + specifier: 0.2.1 + version: 0.2.1 devDependencies: '@parcel/packager-ts': specifier: ^2.12.0 @@ -1593,7 +1596,7 @@ importers: version: 1.0.10 wait-on: specifier: ^7.2.0 - version: 7.2.0 + version: 7.2.0(debug@4.3.4) devDependencies: release-it: specifier: ^16.1.3 @@ -1763,6 +1766,9 @@ importers: lodash: specifier: 4.17.21 version: 4.17.21 + lodash-es: + specifier: ^4.17.21 + version: 4.17.21 lodash-move: specifier: 1.1.1 version: 1.1.1 @@ -2061,6 +2067,9 @@ importers: '@testing-library/react-hooks': specifier: 8.0.1 version: 8.0.1(@types/react@18.2.79)(react-dom@18.2.0(react@18.2.0))(react-test-renderer@18.2.0(react@18.2.0))(react@18.2.0) + '@types/express': + specifier: ^4.17.21 + version: 4.17.21 '@types/history': specifier: ^4.7.11 version: 4.7.11 @@ -2127,6 +2136,9 @@ importers: circular-dependency-plugin: specifier: 5.2.2 version: 5.2.2(webpack@5.90.1(esbuild@0.20.2)) + compression: + specifier: ^1.7.4 + version: 1.7.4 css-loader: specifier: 5.2.7 version: 5.2.7(webpack@5.90.1(esbuild@0.20.2)) @@ -2181,6 +2193,9 @@ importers: full-icu: specifier: 1.4.0 version: 1.4.0 + get-port: + specifier: ^7.0.0 + version: 7.1.0 html-webpack-plugin: specifier: 5.5.0 version: 5.5.0(webpack@5.90.1(esbuild@0.20.2)) @@ -2265,6 +2280,9 @@ importers: semver: specifier: ^7.5.4 version: 7.6.0 + sirv: + specifier: ^2.0.4 + version: 2.0.4 start-server-and-test: specifier: 1.14.0 version: 1.14.0 @@ -11909,10 +11927,12 @@ packages: glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} engines: {node: '>=12'} + deprecated: Glob versions prior to v9 are no longer supported global-cache@1.2.1: resolution: {integrity: sha512-EOeUaup5DgWKlCMhA9YFqNRIlZwoxt731jCh47WBV9fQqHgXhr3Fa55hfgIUqilIcPsfdNKN7LHjrNY+Km40KA==} @@ -17006,14 +17026,17 @@ packages: rimraf@2.6.3: resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@2.7.1: resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true ripemd160@2.0.2: @@ -29585,23 +29608,21 @@ snapshots: axe-core@4.8.4: {} - axios@0.21.4(debug@4.3.2): + axios@0.21.4: dependencies: - follow-redirects: 1.15.6(debug@4.3.2) + follow-redirects: 1.15.6(debug@4.3.4) transitivePeerDependencies: - debug - axios@0.24.0(debug@4.3.2): + axios@0.21.4(debug@4.3.2): dependencies: follow-redirects: 1.15.6(debug@4.3.2) transitivePeerDependencies: - debug - axios@1.6.8: + axios@0.24.0(debug@4.3.2): dependencies: follow-redirects: 1.15.6(debug@4.3.2) - form-data: 4.0.0 - proxy-from-env: 1.1.0 transitivePeerDependencies: - debug @@ -32601,7 +32622,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.0(eslint@8.57.0)(typescript@5.4.5))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.1.1(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -33818,7 +33839,7 @@ snapshots: gitly@2.0.3: dependencies: - axios: 0.21.4(debug@4.3.2) + axios: 0.21.4 tar: 6.2.1 transitivePeerDependencies: - debug @@ -34421,6 +34442,14 @@ snapshots: transitivePeerDependencies: - debug + http-proxy@1.18.1: + dependencies: + eventemitter3: 4.0.7 + follow-redirects: 1.15.6(debug@4.3.4) + requires-port: 1.0.0 + transitivePeerDependencies: + - debug + http-proxy@1.18.1(debug@4.3.2): dependencies: eventemitter3: 4.0.7 @@ -43598,7 +43627,7 @@ snapshots: get-port-please: 3.1.2 h3: 1.10.1 hookable: 5.5.3 - http-proxy: 1.18.1(debug@4.3.2) + http-proxy: 1.18.1 micromatch: 4.0.5 mri: 1.2.0 nitropack: 2.8.1(encoding@0.1.13) @@ -44007,16 +44036,6 @@ snapshots: transitivePeerDependencies: - debug - wait-on@7.2.0: - dependencies: - axios: 1.6.8 - joi: 17.12.3 - lodash: 4.17.21 - minimist: 1.2.8 - rxjs: 7.8.1 - transitivePeerDependencies: - - debug - wait-on@7.2.0(debug@4.3.4): dependencies: axios: 1.6.8(debug@4.3.4) From e7ce11355258c407d6bdb915f105e4ae38f19ee2 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 8 Jul 2024 09:28:12 +0200 Subject: [PATCH 05/40] Fix eslint as a module --- packages/volto/{babel.js => babel.cjs} | 0 packages/volto/babel.config.cjs | 1 + packages/volto/babel.config.js | 1 - 3 files changed, 1 insertion(+), 1 deletion(-) rename packages/volto/{babel.js => babel.cjs} (100%) create mode 100644 packages/volto/babel.config.cjs delete mode 100644 packages/volto/babel.config.js diff --git a/packages/volto/babel.js b/packages/volto/babel.cjs similarity index 100% rename from packages/volto/babel.js rename to packages/volto/babel.cjs diff --git a/packages/volto/babel.config.cjs b/packages/volto/babel.config.cjs new file mode 100644 index 0000000000..6b77e55f2a --- /dev/null +++ b/packages/volto/babel.config.cjs @@ -0,0 +1 @@ +module.exports = require('./babel.cjs'); diff --git a/packages/volto/babel.config.js b/packages/volto/babel.config.js deleted file mode 100644 index 38355d6c91..0000000000 --- a/packages/volto/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./babel'); From c4bd9b4c2019a1b080074bff9208c88f0ad74673 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Mon, 16 Sep 2024 08:52:55 +0200 Subject: [PATCH 06/40] WIP - SSR --- packages/registry/src/create-addons-loader.js | 11 +- packages/volto-slate/package.json | 4 + .../src/blocks/Table/TableBlockEdit.jsx | 2 +- .../src/blocks/Table/TableBlockView.jsx | 2 +- .../volto-slate/src/blocks/Text/SlashMenu.jsx | 2 +- .../src/blocks/Text/TextBlockView.jsx | 2 +- .../volto-slate/src/blocks/Text/index.jsx | 2 +- .../src/blocks/Text/keyboard/joinBlocks.js | 2 +- .../volto-slate/src/editor/SlateEditor.jsx | 4 +- .../editor/extensions/withTestingFeatures.jsx | 2 +- .../plugins/AdvancedLink/deserialize.js | 2 +- .../src/editor/plugins/Markdown/extensions.js | 2 +- .../editor/plugins/StyleMenu/StyleMenu.jsx | 2 +- packages/volto-slate/src/editor/render.jsx | 2 +- .../src/elementEditor/PluginEditor.jsx | 2 +- .../src/elementEditor/ToolbarButton.jsx | 2 +- .../elementEditor/makeInlineElementPlugin.js | 2 +- packages/volto-slate/src/i18n.js | 2 +- packages/volto-slate/src/utils/blocks.js | 2 +- packages/volto-slate/src/utils/selection.js | 2 +- .../volto-slate/src/utils/volto-blocks.js | 2 +- packages/volto/package.json | 6 +- packages/volto/src/actions/search/search.js | 10 +- packages/volto/src/components/index.js | 14 +- .../volto/src/components/manage/Add/Add.jsx | 2 +- .../components/LinkButton/AddLinkForm.jsx | 2 +- .../manage/BlockChooser/BlockChooser.jsx | 2 +- .../BlockChooser/BlockChooserButton.jsx | 2 +- .../manage/Blocks/Block/BlocksForm.jsx | 2 +- .../manage/Blocks/Block/Order/Item.jsx | 2 +- .../manage/Blocks/Block/Order/Order.jsx | 2 +- .../manage/Blocks/Block/Order/utilities.js | 2 +- .../manage/Blocks/Container/Edit.jsx | 2 +- .../components/manage/Blocks/HTML/Edit.jsx | 6 +- .../components/manage/Blocks/Listing/Edit.jsx | 2 +- .../manage/Blocks/Listing/ImageGallery.jsx | 4 +- .../manage/Blocks/Search/SearchBlockEdit.jsx | 2 +- .../manage/Blocks/Search/SearchBlockView.jsx | 2 +- .../Blocks/Search/components/FilterList.jsx | 2 +- .../manage/Blocks/Search/components/base.js | 2 +- .../manage/Blocks/Search/hocs/withSearch.jsx | 2 +- .../components/manage/Blocks/Search/schema.js | 2 +- .../Search/widgets/SelectMetadataField.jsx | 2 +- .../components/manage/Blocks/Teaser/Data.jsx | 2 +- .../manage/Blocks/Teaser/adapter.js | 2 +- .../ToC/variations/DefaultTocRenderer.jsx | 2 +- .../Blocks/ToC/variations/HorizontalMenu.jsx | 2 +- .../components/manage/Contents/Contents.jsx | 2 +- .../manage/Contents/ContentsItem.jsx | 2 +- .../Contents/ContentsPropertiesModal.jsx | 2 +- .../manage/Contents/ContentsRenameModal.jsx | 2 +- .../manage/Contents/ContentsTagsModal.jsx | 2 +- .../manage/Contents/ContentsUploadModal.jsx | 6 +- .../manage/Contents/ContentsWorkflowModal.jsx | 2 +- .../src/components/manage/Contents/index.tsx | 20 +- .../manage/Controlpanels/Aliases.jsx | 2 +- .../manage/Controlpanels/ContentType.jsx | 2 +- .../Controlpanels/ContentTypeLayout.jsx | 2 +- .../Controlpanels/ContentTypeSchema.jsx | 2 +- .../manage/Controlpanels/ContentTypes.jsx | 2 +- .../manage/Controlpanels/Controlpanels.jsx | 2 +- .../Groups/GroupsControlpanel.jsx | 2 +- .../Relations/BrokenRelations.jsx | 2 +- .../Controlpanels/Relations/Relations.jsx | 2 +- .../Relations/RelationsListing.jsx | 2 +- .../Relations/RelationsMatrix.jsx | 2 +- .../manage/Controlpanels/UndoControlpanel.jsx | 2 +- .../Controlpanels/UpgradeControlPanel.jsx | 2 +- .../Users/UserGroupMembershipControlPanel.jsx | 2 +- .../Users/UserGroupMembershipListing.jsx | 2 +- .../Users/UserGroupMembershipMatrix.jsx | 2 +- .../Controlpanels/Users/UsersControlpanel.jsx | 2 +- .../manage/Controlpanels/VersionOverview.jsx | 2 +- .../components/manage/Controlpanels/index.tsx | 48 +- .../volto/src/components/manage/Diff/Diff.jsx | 2 +- .../src/components/manage/Diff/DiffField.jsx | 2 +- .../manage/DragDropList/DragDropList.jsx | 2 +- .../volto/src/components/manage/Edit/Edit.jsx | 2 +- .../components/manage/Form/BlocksToolbar.jsx | 2 +- .../volto/src/components/manage/Form/Form.jsx | 2 +- .../src/components/manage/Form/InlineForm.jsx | 2 +- .../components/manage/Form/InlineFormState.js | 2 +- .../src/components/manage/Form/ModalForm.jsx | 2 +- .../src/components/manage/Form/index.tsx | 18 +- .../src/components/manage/History/History.jsx | 2 +- .../manage/LinksToItem/LinksToItem.jsx | 2 +- .../components/manage/Messages/Messages.jsx | 2 +- .../Multilingual/ManageTranslations.jsx | 2 +- .../manage/Multilingual/TranslationObject.jsx | 2 +- .../src/components/manage/Pluggable/index.js | 2 +- .../Preferences/PersonalPreferences.jsx | 2 +- .../src/components/manage/Rules/index.tsx | 4 +- .../src/components/manage/Sharing/Sharing.jsx | 2 +- .../manage/Sidebar/ObjectBrowserBody.jsx | 2 +- .../manage/Sidebar/SidebarPopup.jsx | 2 +- .../src/components/manage/Toolbar/More.jsx | 2 +- .../src/components/manage/Toolbar/Toolbar.jsx | 2 +- .../src/components/manage/Toolbar/Types.jsx | 2 +- .../components/manage/Widgets/ArrayWidget.jsx | 2 +- .../manage/Widgets/ColorPickerWidget.tsx | 2 +- .../manage/Widgets/DatetimeWidget.jsx | 4 +- .../components/manage/Widgets/FileWidget.jsx | 4 +- .../manage/Widgets/FormFieldWrapper.jsx | 2 +- .../components/manage/Widgets/IdWidget.jsx | 2 +- .../components/manage/Widgets/ImageWidget.jsx | 4 +- .../manage/Widgets/ObjectBrowserWidget.jsx | 2 +- .../Widgets/ObjectListWidget.stories.js | 2 +- .../manage/Widgets/ObjectWidget.stories.jsx | 2 +- .../manage/Widgets/QuerySortOnWidget.jsx | 2 +- .../components/manage/Widgets/QueryWidget.jsx | 2 +- .../RecurrenceWidget/MonthOfTheYearField.jsx | 2 +- .../RecurrenceWidget/RecurrenceWidget.jsx | 2 +- .../Widgets/RecurrenceWidget/SelectInput.jsx | 2 +- .../WeekdayOfTheMonthField.jsx | 2 +- .../WeekdayOfTheMonthIndexField.jsx | 2 +- .../manage/Widgets/ReferenceWidget.jsx | 2 +- .../manage/Widgets/RegistryImageWidget.jsx | 4 +- .../manage/Widgets/SchemaWidget.jsx | 10 +- .../components/manage/Widgets/SelectUtils.js | 2 +- .../manage/Widgets/SelectWidget.jsx | 2 +- .../manage/Widgets/VocabularyTermsWidget.jsx | 2 +- .../src/components/manage/Widgets/index.tsx | 68 +- .../components/manage/Workflow/Workflow.jsx | 2 +- .../src/components/theme/Comments/index.tsx | 4 +- .../src/components/theme/Footer/Footer.jsx | 2 +- .../LanguageSelector/LanguageSelector.jsx | 2 +- .../theme/Pagination/Pagination.jsx | 2 +- .../src/components/theme/View/DefaultView.jsx | 2 +- .../components/theme/View/RenderBlocks.jsx | 2 +- .../theme/Widgets/BooleanWidget.jsx | 2 +- packages/volto/src/config/Blocks.jsx | 2 +- packages/volto/src/config/Loadables.jsx | 2 +- packages/volto/src/config/Views.jsx | 4 +- packages/volto/src/config/index.js | 4 +- packages/volto/src/entry-server.tsx | 104 ++- packages/volto/src/helpers/Api/Api.js | 2 +- packages/volto/src/helpers/Blocks/Blocks.js | 10 +- .../src/helpers/Blocks/cloneBlocks.test.js | 2 +- packages/volto/src/helpers/Content/Content.js | 2 +- .../Extensions/withBlockSchemaEnhancer.jsx | 2 +- .../helpers/FormValidation/FormValidation.jsx | 2 +- packages/volto/src/helpers/Html/Html.jsx | 18 +- .../volto/src/helpers/Loadable/Loadable.jsx | 2 +- packages/volto/src/helpers/Sitemap/Sitemap.js | 2 +- packages/volto/src/helpers/Url/Url.js | 2 +- packages/volto/src/helpers/User/User.js | 2 +- packages/volto/src/helpers/Utils/Utils.jsx | 8 +- .../src/helpers/Utils/doesNodeContainClick.js | 59 ++ .../helpers/Utils/useDetectClickOutside.js | 2 +- .../volto/src/helpers/Workflows/Workflows.js | 2 +- packages/volto/src/middleware/api.js | 2 +- .../src/reducers/breadcrumbs/breadcrumbs.js | 2 +- .../volto/src/reducers/content/content.js | 2 +- .../volto/src/reducers/messages/messages.js | 2 +- .../src/reducers/navigation/navigation.js | 2 +- .../querystringsearch/querystringsearch.js | 2 +- packages/volto/src/reducers/schema/schema.js | 2 +- packages/volto/src/reducers/search/search.js | 2 +- .../volto/src/reducers/sidebar/sidebar.js | 2 +- packages/volto/src/reducers/users/users.js | 2 +- packages/volto/src/routes.js | 2 +- packages/volto/src/server.jsx | 4 +- packages/volto/src/store.js | 11 +- packages/volto/src/vite-server.js | 2 + packages/volto/tsconfig.json | 3 + packages/volto/vite.config.js | 19 +- pnpm-lock.yaml | 608 +++++++++++++++--- 167 files changed, 1009 insertions(+), 366 deletions(-) create mode 100644 packages/volto/src/helpers/Utils/doesNodeContainClick.js diff --git a/packages/registry/src/create-addons-loader.js b/packages/registry/src/create-addons-loader.js index 9cb1b3ffb9..b789906635 100644 --- a/packages/registry/src/create-addons-loader.js +++ b/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. */ -import projectConfigLoader from '@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; `; diff --git a/packages/volto-slate/package.json b/packages/volto-slate/package.json index 5e5b6118bd..b7ccc0b4f7 100644 --- a/packages/volto-slate/package.json +++ b/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", diff --git a/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx b/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx index 96a493e9aa..e99d168a50 100644 --- a/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx +++ b/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx @@ -5,7 +5,7 @@ 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'; diff --git a/packages/volto-slate/src/blocks/Table/TableBlockView.jsx b/packages/volto-slate/src/blocks/Table/TableBlockView.jsx index 4e10c84dcc..c17d13bdcd 100644 --- a/packages/volto-slate/src/blocks/Table/TableBlockView.jsx +++ b/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, diff --git a/packages/volto-slate/src/blocks/Text/SlashMenu.jsx b/packages/volto-slate/src/blocks/Text/SlashMenu.jsx index 2a26c39cfe..1437552449 100644 --- a/packages/volto-slate/src/blocks/Text/SlashMenu.jsx +++ b/packages/volto-slate/src/blocks/Text/SlashMenu.jsx @@ -1,6 +1,6 @@ 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'; diff --git a/packages/volto-slate/src/blocks/Text/TextBlockView.jsx b/packages/volto-slate/src/blocks/Text/TextBlockView.jsx index e25e603093..a4dbbc11a3 100644 --- a/packages/volto-slate/src/blocks/Text/TextBlockView.jsx +++ b/packages/volto-slate/src/blocks/Text/TextBlockView.jsx @@ -3,7 +3,7 @@ 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'; diff --git a/packages/volto-slate/src/blocks/Text/index.jsx b/packages/volto-slate/src/blocks/Text/index.jsx index 61ba8b500d..8cdb829811 100644 --- a/packages/volto-slate/src/blocks/Text/index.jsx +++ b/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, diff --git a/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js b/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js index 4dbf7bc03a..18691752e5 100644 --- a/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js +++ b/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js @@ -1,5 +1,5 @@ import ReactDOM from 'react-dom'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; import { serializeNodesToText } from '@plone/volto-slate/editor/render'; import { Editor } from 'slate'; import { diff --git a/packages/volto-slate/src/editor/SlateEditor.jsx b/packages/volto-slate/src/editor/SlateEditor.jsx index fe8457b191..19db3ab28e 100644 --- a/packages/volto-slate/src/editor/SlateEditor.jsx +++ b/packages/volto-slate/src/editor/SlateEditor.jsx @@ -1,6 +1,6 @@ import ReactDOM from 'react-dom'; import cx from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import { Transforms, Editor } from 'slate'; // , Transforms import { Slate, Editable, ReactEditor } from 'slate-react'; import React, { Component } from 'react'; // , useState @@ -377,6 +377,6 @@ SlateEditor.defaultProps = { }; // May be needed to wrap in React.memo(), it used to be wrapped in connect() -export default __CLIENT__ && window?.Cypress +export default !import.meta.env.SSR && window?.Cypress ? withTestingFeatures(SlateEditor) : SlateEditor; diff --git a/packages/volto-slate/src/editor/extensions/withTestingFeatures.jsx b/packages/volto-slate/src/editor/extensions/withTestingFeatures.jsx index 914092b788..79321144d5 100644 --- a/packages/volto-slate/src/editor/extensions/withTestingFeatures.jsx +++ b/packages/volto-slate/src/editor/extensions/withTestingFeatures.jsx @@ -1,6 +1,6 @@ import React, { useMemo } from 'react'; import { ReactEditor } from 'slate-react'; -import { omit } from 'lodash'; +import { omit } from 'lodash-es'; const withTestingFeatures = (WrappedComponent) => { return (props) => { diff --git a/packages/volto-slate/src/editor/plugins/AdvancedLink/deserialize.js b/packages/volto-slate/src/editor/plugins/AdvancedLink/deserialize.js index 2359e452c8..a3116d080b 100644 --- a/packages/volto-slate/src/editor/plugins/AdvancedLink/deserialize.js +++ b/packages/volto-slate/src/editor/plugins/AdvancedLink/deserialize.js @@ -1,7 +1,7 @@ import { jsx } from 'slate-hyperscript'; import { LINK } from '@plone/volto-slate/constants'; import { deserialize } from '@plone/volto-slate/editor/deserialize'; -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; // import { Editor } from 'slate'; /** diff --git a/packages/volto-slate/src/editor/plugins/Markdown/extensions.js b/packages/volto-slate/src/editor/plugins/Markdown/extensions.js index 0c40c05d11..b13acf82af 100644 --- a/packages/volto-slate/src/editor/plugins/Markdown/extensions.js +++ b/packages/volto-slate/src/editor/plugins/Markdown/extensions.js @@ -1,4 +1,4 @@ -import { castArray, map } from 'lodash'; +import { castArray, map } from 'lodash-es'; import { Editor, Path, Point, Range, Transforms } from 'slate'; /** diff --git a/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx b/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx index 2771759873..e62fe7aaf1 100644 --- a/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx +++ b/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx @@ -3,7 +3,7 @@ import { useSlate } from 'slate-react'; import { Dropdown } from 'semantic-ui-react'; import { useIntl, defineMessages } from 'react-intl'; import cx from 'classnames'; -import { omit } from 'lodash'; +import { omit } from 'lodash-es'; import { isBlockStyleActive, isInlineStyleActive, toggleStyle } from './utils'; import config from '@plone/volto/registry'; import { ToolbarButton } from '@plone/volto-slate/editor/ui'; diff --git a/packages/volto-slate/src/editor/render.jsx b/packages/volto-slate/src/editor/render.jsx index 2d3aad41ad..d5cfaf2980 100644 --- a/packages/volto-slate/src/editor/render.jsx +++ b/packages/volto-slate/src/editor/render.jsx @@ -6,7 +6,7 @@ import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; import { Node, Text } from 'slate'; import cx from 'classnames'; -import { isEmpty, omit } from 'lodash'; +import { isEmpty, omit } from 'lodash-es'; import { UniversalLink, Toast } from '@plone/volto/components'; import { messages, addAppURL } from '@plone/volto/helpers'; import useClipboard from '@plone/volto/hooks/clipboard/useClipboard'; diff --git a/packages/volto-slate/src/elementEditor/PluginEditor.jsx b/packages/volto-slate/src/elementEditor/PluginEditor.jsx index e33b87ec27..6b04c5ca16 100644 --- a/packages/volto-slate/src/elementEditor/PluginEditor.jsx +++ b/packages/volto-slate/src/elementEditor/PluginEditor.jsx @@ -1,5 +1,5 @@ /* eslint no-console: ["error", { allow: ["error"] }] */ -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React from 'react'; import { useDispatch } from 'react-redux'; import { ReactEditor } from 'slate-react'; diff --git a/packages/volto-slate/src/elementEditor/ToolbarButton.jsx b/packages/volto-slate/src/elementEditor/ToolbarButton.jsx index 3f26d6e73f..8fc88c5645 100644 --- a/packages/volto-slate/src/elementEditor/ToolbarButton.jsx +++ b/packages/volto-slate/src/elementEditor/ToolbarButton.jsx @@ -4,7 +4,7 @@ import React from 'react'; import { useSlate } from 'slate-react'; import { useDispatch } from 'react-redux'; -import { omit } from 'lodash'; +import { omit } from 'lodash-es'; import { ToolbarButton } from '@plone/volto-slate/editor/ui'; import { hasRangeSelection } from '@plone/volto-slate/utils'; diff --git a/packages/volto-slate/src/elementEditor/makeInlineElementPlugin.js b/packages/volto-slate/src/elementEditor/makeInlineElementPlugin.js index 0cf45e3d0e..ec43e6edd7 100644 --- a/packages/volto-slate/src/elementEditor/makeInlineElementPlugin.js +++ b/packages/volto-slate/src/elementEditor/makeInlineElementPlugin.js @@ -11,7 +11,7 @@ import { import messages from './messages'; import ToolbarButton from './ToolbarButton'; import SchemaProvider from './SchemaProvider'; -import { omit } from 'lodash'; +import { omit } from 'lodash-es'; import tagSVG from '@plone/volto/icons/tag.svg'; diff --git a/packages/volto-slate/src/i18n.js b/packages/volto-slate/src/i18n.js index 7f3a275591..3d0c588638 100644 --- a/packages/volto-slate/src/i18n.js +++ b/packages/volto-slate/src/i18n.js @@ -4,7 +4,7 @@ * @module scripts/i18n */ -const { find, keys, map, concat, reduce } = require('lodash'); +const { find, keys, map, concat, reduce } = require('lodash-es'); const glob = require('glob').sync; const fs = require('fs'); const Pofile = require('pofile'); diff --git a/packages/volto-slate/src/utils/blocks.js b/packages/volto-slate/src/utils/blocks.js index 4175ebeddb..d0e92f0998 100644 --- a/packages/volto-slate/src/utils/blocks.js +++ b/packages/volto-slate/src/utils/blocks.js @@ -5,7 +5,7 @@ import { getBlocksFieldname, getBlocksLayoutFieldname, } from '@plone/volto/helpers'; -import _ from 'lodash'; +import _ from 'lodash-es'; import { makeEditor } from './editor'; // case sensitive; first in an inner array is the default and preffered format diff --git a/packages/volto-slate/src/utils/selection.js b/packages/volto-slate/src/utils/selection.js index 71e78b262d..3d0ffd4e4d 100644 --- a/packages/volto-slate/src/utils/selection.js +++ b/packages/volto-slate/src/utils/selection.js @@ -1,4 +1,4 @@ -import { castArray, cloneDeep } from 'lodash'; +import { castArray, cloneDeep } from 'lodash-es'; import { Editor, Transforms, Range, Node } from 'slate'; import { ReactEditor } from 'slate-react'; import { isCursorInList, makeEditor } from '@plone/volto-slate/utils'; diff --git a/packages/volto-slate/src/utils/volto-blocks.js b/packages/volto-slate/src/utils/volto-blocks.js index 55367223e6..a571672252 100644 --- a/packages/volto-slate/src/utils/volto-blocks.js +++ b/packages/volto-slate/src/utils/volto-blocks.js @@ -10,7 +10,7 @@ import { } from '@plone/volto/helpers'; import { Transforms, Editor, Node, Text, Path } from 'slate'; import { serializeNodesToText } from '@plone/volto-slate/editor/render'; -import { omit } from 'lodash'; +import { omit } from 'lodash-es'; import config from '@plone/volto/registry'; function fromEntries(pairs) { diff --git a/packages/volto/package.json b/packages/volto/package.json index 6857c0a409..634f9b2283 100644 --- a/packages/volto/package.json +++ b/packages/volto/package.json @@ -190,7 +190,7 @@ "debug": "4.3.2", "decorate-component-with-props": "1.2.1", "dependency-graph": "0.10.0", - "detect-browser": "5.1.0", + "detect-browser": "5.3.0", "diff": "3.5.0", "express": "4.19.2", "filesize": "6", @@ -272,7 +272,7 @@ "url": "^0.11.3", "use-deep-compare-effect": "1.8.1", "uuid": "^8.3.2", - "vite-plugin-node-polyfills": "^0.22.0" + "vite-plugin-node-polyfills": "0.17.0" }, "devDependencies": { "@babel/core": "^7.0.0", @@ -394,7 +394,7 @@ "ts-loader": "9.4.4", "typescript": "^5.4.2", "use-trace-update": "1.3.2", - "vite": "^5.2.11", + "vite": "^5.4.5", "wait-on": "6.0.0", "webpack": "5.90.1", "webpack-bundle-analyzer": "4.10.1", diff --git a/packages/volto/src/actions/search/search.js b/packages/volto/src/actions/search/search.js index 443a9d823e..d116ca4ee0 100644 --- a/packages/volto/src/actions/search/search.js +++ b/packages/volto/src/actions/search/search.js @@ -3,7 +3,15 @@ * @module actions/search/search */ -import { compact, concat, isArray, join, map, pickBy, toPairs } from 'lodash'; +import { + compact, + concat, + isArray, + join, + map, + pickBy, + toPairs, +} from 'lodash-es'; import { RESET_SEARCH_CONTENT, diff --git a/packages/volto/src/components/index.js b/packages/volto/src/components/index.js index 11444c6a1f..a598b01c71 100644 --- a/packages/volto/src/components/index.js +++ b/packages/volto/src/components/index.js @@ -5,7 +5,7 @@ * undefined, check the order of imports in this file. * @module components */ -import loadable from '@loadable/component'; +import { lazy } from 'react'; // Do not lazy load them, since it has not much sense (they will live in the main chunk) // The App and View component are deliberatelly left out of this index.js file! @@ -63,7 +63,7 @@ export { default as FileView } from '@plone/volto/components/theme/View/FileView export { default as ImageView } from '@plone/volto/components/theme/View/ImageView'; export { default as NewsItemView } from '@plone/volto/components/theme/View/NewsItemView'; -export const EventView = loadable( +export const EventView = lazy( () => import('@plone/volto/components/theme/View/EventView'), ); @@ -103,13 +103,13 @@ export { export { default as Circle } from '@plone/volto/components/manage/Contents/circle'; export { default as Delete } from '@plone/volto/components/manage/Delete/Delete'; -export const Diff = loadable( +export const Diff = lazy( () => import( /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/Diff' ), ); -export const DiffField = loadable( +export const DiffField = lazy( () => import( /* webpackChunkName: "HistoryView" */ '@plone/volto/components/manage/Diff/DiffField' @@ -119,7 +119,7 @@ export { default as Display } from '@plone/volto/components/manage/Display/Displ export { default as Edit } from '@plone/volto/components/manage/Edit/Edit'; export { default as History } from '@plone/volto/components/manage/History/History'; export { default as Sharing } from '@plone/volto/components/manage/Sharing/Sharing'; -export const Rules = loadable( +export const Rules = lazy( () => import('@plone/volto/components/manage/Rules/Rules'), ); export { default as Aliases } from '@plone/volto/components/manage/Aliases/Aliases'; @@ -199,10 +199,10 @@ export { FormFieldWrapper, } from '@plone/volto/components/manage/Widgets'; -export const SchemaWidgetFieldset = loadable( +export const SchemaWidgetFieldset = lazy( () => import('@plone/volto/components/manage/Widgets/SchemaWidgetFieldset'), ); -export const ObjectBrowserWidgetMode = loadable( +export const ObjectBrowserWidgetMode = lazy( () => import('@plone/volto/components/manage/Widgets/ObjectBrowserWidget'), ); diff --git a/packages/volto/src/components/manage/Add/Add.jsx b/packages/volto/src/components/manage/Add/Add.jsx index d0bf804671..3e26e2b31a 100644 --- a/packages/volto/src/components/manage/Add/Add.jsx +++ b/packages/volto/src/components/manage/Add/Add.jsx @@ -12,7 +12,7 @@ import { } from '@plone/volto/helpers'; import { connect } from 'react-redux'; import { compose } from 'redux'; -import { keys, isEmpty } from 'lodash'; +import { keys, isEmpty } from 'lodash-es'; import { defineMessages, injectIntl } from 'react-intl'; import { Button, Grid, Menu } from 'semantic-ui-react'; import { createPortal } from 'react-dom'; diff --git a/packages/volto/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx b/packages/volto/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx index 306865b763..3cbe056819 100644 --- 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'; -import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib'; +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/BlockChooser.jsx b/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx index 80c5142e81..5dc6350495 100644 --- a/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx +++ b/packages/volto/src/components/manage/BlockChooser/BlockChooser.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; -import { filter, map, groupBy, isEmpty } from 'lodash'; +import { filter, map, groupBy, isEmpty } from 'lodash-es'; import { Accordion, Button } from 'semantic-ui-react'; import { useIntl, defineMessages } from 'react-intl'; import { Icon } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/BlockChooser/BlockChooserButton.jsx b/packages/volto/src/components/manage/BlockChooser/BlockChooserButton.jsx index 136b413b70..6827dd0344 100644 --- 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 'semantic-ui-react/dist/commonjs/lib'; +import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick'; import addSVG from '@plone/volto/icons/circle-plus.svg'; import { blockHasValue } from '@plone/volto/helpers'; import { Icon, BlockChooser } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index 65d3f6fb0d..93bbfbcb90 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; -import { cloneDeep, map } from 'lodash'; +import { cloneDeep, map } from 'lodash-es'; import EditBlock from './Edit'; import { DragDropList } from '@plone/volto/components'; import { diff --git a/packages/volto/src/components/manage/Blocks/Block/Order/Item.jsx b/packages/volto/src/components/manage/Blocks/Block/Order/Item.jsx index 5580fc416f..c5cd9633d0 100644 --- a/packages/volto/src/components/manage/Blocks/Block/Order/Item.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/Order/Item.jsx @@ -1,7 +1,7 @@ import React, { forwardRef } from 'react'; import classNames from 'classnames'; import { useDispatch, useSelector } from 'react-redux'; -import { includes } from 'lodash'; +import { includes } from 'lodash-es'; import cx from 'classnames'; import { Icon } from '@plone/volto/components'; import { setUIState } from '@plone/volto/actions'; diff --git a/packages/volto/src/components/manage/Blocks/Block/Order/Order.jsx b/packages/volto/src/components/manage/Blocks/Block/Order/Order.jsx index 7c17bba43a..3263b31b8e 100644 --- a/packages/volto/src/components/manage/Blocks/Block/Order/Order.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/Order/Order.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import { find, min } from 'lodash'; +import { find, min } from 'lodash-es'; import { flattenTree, getProjection, removeChildrenOf } from './utilities'; import SortableItem from './SortableItem'; diff --git a/packages/volto/src/components/manage/Blocks/Block/Order/utilities.js b/packages/volto/src/components/manage/Blocks/Block/Order/utilities.js index eaa802ca65..bdf5843726 100644 --- a/packages/volto/src/components/manage/Blocks/Block/Order/utilities.js +++ b/packages/volto/src/components/manage/Blocks/Block/Order/utilities.js @@ -1,4 +1,4 @@ -import { isArray } from 'lodash'; +import { isArray } from 'lodash-es'; import { getBlocksLayoutFieldname } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Blocks/Container/Edit.jsx b/packages/volto/src/components/manage/Blocks/Container/Edit.jsx index 7c1ce4d9d4..bec35fe352 100644 --- a/packages/volto/src/components/manage/Blocks/Container/Edit.jsx +++ b/packages/volto/src/components/manage/Blocks/Container/Edit.jsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { useIntl } from 'react-intl'; -import { pickBy } from 'lodash'; +import { pickBy } from 'lodash-es'; import { SidebarPortal } from '@plone/volto/components'; import { BlocksForm } from '@plone/volto/components/manage/Form'; import PropTypes from 'prop-types'; diff --git a/packages/volto/src/components/manage/Blocks/HTML/Edit.jsx b/packages/volto/src/components/manage/Blocks/HTML/Edit.jsx index 4cb63c3193..e0f3b28c19 100644 --- a/packages/volto/src/components/manage/Blocks/HTML/Edit.jsx +++ b/packages/volto/src/components/manage/Blocks/HTML/Edit.jsx @@ -8,8 +8,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Button, Popup } from 'semantic-ui-react'; import { defineMessages, injectIntl } from 'react-intl'; -import loadable from '@loadable/component'; -import { isEqual } from 'lodash'; +import { lazy } from 'react'; +import { isEqual } from 'lodash-es'; import { Icon } from '@plone/volto/components'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; @@ -18,7 +18,7 @@ import clearSVG from '@plone/volto/icons/clear.svg'; import codeSVG from '@plone/volto/icons/code.svg'; import indentSVG from '@plone/volto/icons/indent.svg'; -const Editor = loadable(() => import('react-simple-code-editor')); +const Editor = lazy(() => import('react-simple-code-editor')); const messages = defineMessages({ source: { diff --git a/packages/volto/src/components/manage/Blocks/Listing/Edit.jsx b/packages/volto/src/components/manage/Blocks/Listing/Edit.jsx index 29fefe54cc..b13877a481 100644 --- a/packages/volto/src/components/manage/Blocks/Listing/Edit.jsx +++ b/packages/volto/src/components/manage/Blocks/Listing/Edit.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import { withBlockExtensions } from '@plone/volto/helpers'; import { diff --git a/packages/volto/src/components/manage/Blocks/Listing/ImageGallery.jsx b/packages/volto/src/components/manage/Blocks/Listing/ImageGallery.jsx index 60dd7cb36f..f14d95d421 100644 --- a/packages/volto/src/components/manage/Blocks/Listing/ImageGallery.jsx +++ b/packages/volto/src/components/manage/Blocks/Listing/ImageGallery.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import loadable from '@loadable/component'; +import { lazy } from 'react'; import 'react-image-gallery/styles/css/image-gallery.css'; import { Button } from 'semantic-ui-react'; import { Icon } from '@plone/volto/components'; @@ -14,7 +14,7 @@ import galleryPauseSVG from '@plone/volto/icons/pause.svg'; import galleryFullScreenSVG from '@plone/volto/icons/fullscreen.svg'; import galleryBackDownSVG from '@plone/volto/icons/back-down.svg'; -const ImageGallery = loadable(() => import('react-image-gallery')); +const ImageGallery = lazy(() => import('react-image-gallery')); const renderLeftNav = (onClick, disabled) => { return ( diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx index 56ac5769e4..dcedf358bb 100644 --- a/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx +++ b/packages/volto/src/components/manage/Blocks/Search/SearchBlockEdit.jsx @@ -11,7 +11,7 @@ import config from '@plone/volto/registry'; import { SearchBlockViewComponent } from './SearchBlockView'; import Schema from './schema'; import { withSearch, withQueryString } from './hocs'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; const messages = defineMessages({ template: { diff --git a/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx b/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx index 908342de8c..0a508c0057 100644 --- a/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx +++ b/packages/volto/src/components/manage/Blocks/Search/SearchBlockView.jsx @@ -8,7 +8,7 @@ import config from '@plone/volto/registry'; import { withSearch, withQueryString } from './hocs'; import { compose } from 'redux'; import { useSelector } from 'react-redux'; -import { isEqual, isFunction } from 'lodash'; +import { isEqual, isFunction } from 'lodash-es'; import cx from 'classnames'; const getListingBodyVariation = (data) => { diff --git a/packages/volto/src/components/manage/Blocks/Search/components/FilterList.jsx b/packages/volto/src/components/manage/Blocks/Search/components/FilterList.jsx index a10e49907d..1cd47eb169 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/FilterList.jsx +++ b/packages/volto/src/components/manage/Blocks/Search/components/FilterList.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Accordion, Button, Icon } from 'semantic-ui-react'; import { defineMessages, useIntl } from 'react-intl'; -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; import { Icon as VoltoIcon } from '@plone/volto/components'; import { resolveExtension } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Blocks/Search/components/base.js b/packages/volto/src/components/manage/Blocks/Search/components/base.js index c196e2fe02..a8f6c72ffa 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/base.js +++ b/packages/volto/src/components/manage/Blocks/Search/components/base.js @@ -1,4 +1,4 @@ -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; /** * Converts the state (extracted from URL) to options for the facet control diff --git a/packages/volto/src/components/manage/Blocks/Search/hocs/withSearch.jsx b/packages/volto/src/components/manage/Blocks/Search/hocs/withSearch.jsx index 6fa019b6b9..725b63e37c 100644 --- a/packages/volto/src/components/manage/Blocks/Search/hocs/withSearch.jsx +++ b/packages/volto/src/components/manage/Blocks/Search/hocs/withSearch.jsx @@ -6,7 +6,7 @@ import { useLocation, useHistory } from 'react-router-dom'; import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions'; import config from '@plone/volto/registry'; import { usePrevious } from '@plone/volto/helpers'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; function getDisplayName(WrappedComponent) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; diff --git a/packages/volto/src/components/manage/Blocks/Search/schema.js b/packages/volto/src/components/manage/Blocks/Search/schema.js index 5686a3a094..d6c67e0eef 100644 --- a/packages/volto/src/components/manage/Blocks/Search/schema.js +++ b/packages/volto/src/components/manage/Blocks/Search/schema.js @@ -1,6 +1,6 @@ import config from '@plone/volto/registry'; import { defineMessages } from 'react-intl'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; import { hasNonValueOperation, hasDateOperation } from './utils'; const messages = defineMessages({ diff --git a/packages/volto/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx b/packages/volto/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx index 1b4f9a6841..d8c509a8d0 100644 --- a/packages/volto/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx +++ b/packages/volto/src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx @@ -3,7 +3,7 @@ * @module components/manage/Widgets/SelectWidget */ -import { map, filter, toPairs, groupBy } from 'lodash'; +import { map, filter, toPairs, groupBy } from 'lodash-es'; import { useEffect } from 'react'; import PropTypes from 'prop-types'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; diff --git a/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx b/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx index 69bb3db42a..e89932045f 100644 --- a/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx +++ b/packages/volto/src/components/manage/Blocks/Teaser/Data.jsx @@ -10,7 +10,7 @@ import { messages as defaultMessages, } from '@plone/volto/helpers'; import { getContent } from '@plone/volto/actions'; -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; import reloadSVG from '@plone/volto/icons/reload.svg'; import trashSVG from '@plone/volto/icons/delete.svg'; diff --git a/packages/volto/src/components/manage/Blocks/Teaser/adapter.js b/packages/volto/src/components/manage/Blocks/Teaser/adapter.js index 4f01bad5ef..bfd0678842 100644 --- a/packages/volto/src/components/manage/Blocks/Teaser/adapter.js +++ b/packages/volto/src/components/manage/Blocks/Teaser/adapter.js @@ -1,4 +1,4 @@ -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; export const TeaserBlockDataAdapter = ({ block, diff --git a/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx b/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx index 9881a1dc38..04f3335700 100644 --- a/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx +++ b/packages/volto/src/components/manage/Blocks/ToC/variations/DefaultTocRenderer.jsx @@ -5,7 +5,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { List } from 'semantic-ui-react'; import { FormattedMessage, injectIntl } from 'react-intl'; import Slugger from 'github-slugger'; diff --git a/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx b/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx index 9db6de1f5a..d4e6928cf7 100644 --- a/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx +++ b/packages/volto/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { Menu, Dropdown } from 'semantic-ui-react'; import { FormattedMessage, injectIntl } from 'react-intl'; import AnchorLink from 'react-anchor-link-smooth-scroll'; diff --git a/packages/volto/src/components/manage/Contents/Contents.jsx b/packages/volto/src/components/manage/Contents/Contents.jsx index 58431e2dce..2776a8ab9a 100644 --- a/packages/volto/src/components/manage/Contents/Contents.jsx +++ b/packages/volto/src/components/manage/Contents/Contents.jsx @@ -31,7 +31,7 @@ import { map, mapValues, pull, -} from 'lodash'; +} from 'lodash-es'; import move from 'lodash-move'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { asyncConnect } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/ContentsItem.jsx b/packages/volto/src/components/manage/Contents/ContentsItem.jsx index 20a0277f9c..0f190f737e 100644 --- a/packages/volto/src/components/manage/Contents/ContentsItem.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsItem.jsx @@ -7,7 +7,7 @@ import React from 'react'; import { Button, Table, Menu, Divider } from 'semantic-ui-react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { Circle, FormattedDate, Icon, Popup } from '@plone/volto/components'; import { getContentIcon } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/ContentsPropertiesModal.jsx b/packages/volto/src/components/manage/Contents/ContentsPropertiesModal.jsx index 304e501e2f..2286606ab0 100644 --- a/packages/volto/src/components/manage/Contents/ContentsPropertiesModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsPropertiesModal.jsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { isEmpty, map } from 'lodash'; +import { isEmpty, map } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { usePrevious } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/ContentsRenameModal.jsx b/packages/volto/src/components/manage/Contents/ContentsRenameModal.jsx index 0719e13263..f528b490ef 100644 --- a/packages/volto/src/components/manage/Contents/ContentsRenameModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsRenameModal.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { concat, merge, map } from 'lodash'; +import { concat, merge, map } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { usePrevious } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/ContentsTagsModal.jsx b/packages/volto/src/components/manage/Contents/ContentsTagsModal.jsx index bc594a8dac..dca0c177c3 100644 --- a/packages/volto/src/components/manage/Contents/ContentsTagsModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsTagsModal.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { usePrevious } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx index 0d83026e2d..40191a1bf4 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx @@ -13,8 +13,8 @@ import { Input, Progress, } from 'semantic-ui-react'; -import loadable from '@loadable/component'; -import { concat, filter, map } from 'lodash'; +import { lazy } from 'react'; +import { concat, filter, map } from 'lodash-es'; import filesize from 'filesize'; import { readAsDataURL } from 'promise-file-reader'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; @@ -22,7 +22,7 @@ import { FormattedRelativeDate } from '@plone/volto/components'; import { createContent } from '@plone/volto/actions'; import { validateFileUploadSize, usePrevious } from '@plone/volto/helpers'; -const Dropzone = loadable(() => import('react-dropzone')); +const Dropzone = lazy(() => import('react-dropzone')); const messages = defineMessages({ cancel: { diff --git a/packages/volto/src/components/manage/Contents/ContentsWorkflowModal.jsx b/packages/volto/src/components/manage/Contents/ContentsWorkflowModal.jsx index 2f2b6fafe7..6980f45827 100644 --- a/packages/volto/src/components/manage/Contents/ContentsWorkflowModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsWorkflowModal.jsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; import { shallowEqual, useDispatch, useSelector } from 'react-redux'; -import { concat, filter, last, map, uniqBy } from 'lodash'; +import { concat, filter, last, map, uniqBy } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { usePrevious } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Contents/index.tsx b/packages/volto/src/components/manage/Contents/index.tsx index f3df663cd2..0c9d6954fb 100644 --- a/packages/volto/src/components/manage/Contents/index.tsx +++ b/packages/volto/src/components/manage/Contents/index.tsx @@ -1,62 +1,62 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; -export const Contents = loadable( +export const Contents = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/Contents' ), ); -export const ContentsRenameModal = loadable( +export const ContentsRenameModal = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsRenameModal' ), ); -export const ContentsBreadcrumbs = loadable( +export const ContentsBreadcrumbs = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsBreadcrumbs' ), ); -export const ContentsIndexHeader = loadable( +export const ContentsIndexHeader = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsIndexHeader' ), ); -export const ContentsItem = loadable( +export const ContentsItem = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsItem' ), ); -export const ContentsUploadModal = loadable( +export const ContentsUploadModal = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsUploadModal' ), ); -export const ContentsPropertiesModal = loadable( +export const ContentsPropertiesModal = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsPropertiesModal' ), ); -export const ContentsWorkflowModal = loadable( +export const ContentsWorkflowModal = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsWorkflowModal' ), ); -export const ContentsTagsModal = loadable( +export const ContentsTagsModal = lazy( () => import( /* webpackChunkName: "Contents" */ '@plone/volto/components/manage/Contents/ContentsTagsModal' diff --git a/packages/volto/src/components/manage/Controlpanels/Aliases.jsx b/packages/volto/src/components/manage/Controlpanels/Aliases.jsx index 1bc0dddd6d..dfd638fcb7 100644 --- a/packages/volto/src/components/manage/Controlpanels/Aliases.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Aliases.jsx @@ -29,7 +29,7 @@ import { Icon, Toolbar } from '@plone/volto/components'; import { useClient } from '@plone/volto/hooks'; import backSVG from '@plone/volto/icons/back.svg'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { toast } from 'react-toastify'; import { Toast } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Controlpanels/ContentType.jsx b/packages/volto/src/components/manage/Controlpanels/ContentType.jsx index 531389e5f1..4741696a6e 100644 --- a/packages/volto/src/components/manage/Controlpanels/ContentType.jsx +++ b/packages/volto/src/components/manage/Controlpanels/ContentType.jsx @@ -12,7 +12,7 @@ import { createPortal } from 'react-dom'; import { Button, Header } from 'semantic-ui-react'; import { defineMessages, injectIntl } from 'react-intl'; import { toast } from 'react-toastify'; -import { last, nth, join } from 'lodash'; +import { last, nth, join } from 'lodash-es'; import { Error, Icon, Toolbar, Toast } from '@plone/volto/components'; import { Form } from '@plone/volto/components/manage/Form'; import { getControlpanel, updateControlpanel } from '@plone/volto/actions'; diff --git a/packages/volto/src/components/manage/Controlpanels/ContentTypeLayout.jsx b/packages/volto/src/components/manage/Controlpanels/ContentTypeLayout.jsx index 7135562957..54bb6ed45f 100644 --- a/packages/volto/src/components/manage/Controlpanels/ContentTypeLayout.jsx +++ b/packages/volto/src/components/manage/Controlpanels/ContentTypeLayout.jsx @@ -18,7 +18,7 @@ import { createPortal } from 'react-dom'; import { Button, Segment } from 'semantic-ui-react'; import { toast } from 'react-toastify'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { nth, join } from 'lodash'; +import { nth, join } from 'lodash-es'; import { Error, Icon, Toolbar, Sidebar, Toast } from '@plone/volto/components'; import { Form } from '@plone/volto/components/manage/Form'; import { diff --git a/packages/volto/src/components/manage/Controlpanels/ContentTypeSchema.jsx b/packages/volto/src/components/manage/Controlpanels/ContentTypeSchema.jsx index 1215aaeb61..8182fcda4e 100644 --- a/packages/volto/src/components/manage/Controlpanels/ContentTypeSchema.jsx +++ b/packages/volto/src/components/manage/Controlpanels/ContentTypeSchema.jsx @@ -5,7 +5,7 @@ import { getSchema, putSchema } from '@plone/volto/actions'; import { getParentUrl } from '@plone/volto/helpers'; -import { nth } from 'lodash'; +import { nth } from 'lodash-es'; import { Error, Icon, Toast, Toolbar } from '@plone/volto/components'; import { Form } from '@plone/volto/components/manage/Form'; import clearSVG from '@plone/volto/icons/clear.svg'; diff --git a/packages/volto/src/components/manage/Controlpanels/ContentTypes.jsx b/packages/volto/src/components/manage/Controlpanels/ContentTypes.jsx index 45a8846ac1..2e2257f2a4 100644 --- a/packages/volto/src/components/manage/Controlpanels/ContentTypes.jsx +++ b/packages/volto/src/components/manage/Controlpanels/ContentTypes.jsx @@ -10,7 +10,7 @@ import { compose } from 'redux'; import { Link } from 'react-router-dom'; import { getParentUrl } from '@plone/volto/helpers'; import { createPortal } from 'react-dom'; -import { last } from 'lodash'; +import { last } from 'lodash-es'; import { Confirm, Container, Table, Button, Header } from 'semantic-ui-react'; import { toast } from 'react-toastify'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx index e5622d8d25..f41c3e3153 100644 --- a/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Controlpanels.jsx @@ -4,7 +4,7 @@ */ import { Helmet } from '@plone/volto/helpers'; -import { concat, filter, last, map, sortBy, uniqBy } from 'lodash'; +import { concat, filter, last, map, sortBy, uniqBy } from 'lodash-es'; import { useEffect, useState } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { createPortal } from 'react-dom'; diff --git a/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx b/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx index 831d0fb529..83089ce494 100644 --- a/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx @@ -33,7 +33,7 @@ import clearSVG from '@plone/volto/icons/clear.svg'; import addUserSvg from '@plone/volto/icons/add-user.svg'; import saveSVG from '@plone/volto/icons/save.svg'; import ploneSVG from '@plone/volto/icons/plone.svg'; -import { find, map, pull } from 'lodash'; +import { find, map, pull } from 'lodash-es'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx b/packages/volto/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx index ae9c8ba77b..6d9e1a19c1 100644 --- a/packages/volto/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Relations/BrokenRelations.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { uniqBy } from 'lodash'; +import { uniqBy } from 'lodash-es'; import { FormattedMessage } from 'react-intl'; import { useSelector, useDispatch } from 'react-redux'; import { Divider, Segment, Table } from 'semantic-ui-react'; diff --git a/packages/volto/src/components/manage/Controlpanels/Relations/Relations.jsx b/packages/volto/src/components/manage/Controlpanels/Relations/Relations.jsx index 73c56efa41..6465d8e107 100644 --- a/packages/volto/src/components/manage/Controlpanels/Relations/Relations.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Relations/Relations.jsx @@ -2,7 +2,7 @@ * Relations Control Panel */ import React, { useEffect, useState } from 'react'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { useSelector } from 'react-redux'; import { createPortal } from 'react-dom'; import { useHistory } from 'react-router'; diff --git a/packages/volto/src/components/manage/Controlpanels/Relations/RelationsListing.jsx b/packages/volto/src/components/manage/Controlpanels/Relations/RelationsListing.jsx index a46fc3cdbc..8759710981 100644 --- a/packages/volto/src/components/manage/Controlpanels/Relations/RelationsListing.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Relations/RelationsListing.jsx @@ -3,7 +3,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect'; import { FormattedMessage, useIntl } from 'react-intl'; import { useSelector, useDispatch } from 'react-redux'; import { toast } from 'react-toastify'; -import { uniqBy } from 'lodash'; +import { uniqBy } from 'lodash-es'; import { Checkbox, Message } from 'semantic-ui-react'; import { messages } from '@plone/volto/helpers'; import { Toast, UniversalLink } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx b/packages/volto/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx index 3bc8003b15..2d3b1bc4de 100644 --- a/packages/volto/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Relations/RelationsMatrix.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { capitalize, find } from 'lodash'; +import { capitalize, find } from 'lodash-es'; import { compose } from 'redux'; import { useSelector, useDispatch } from 'react-redux'; import { FormattedMessage, useIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Controlpanels/UndoControlpanel.jsx b/packages/volto/src/components/manage/Controlpanels/UndoControlpanel.jsx index fc38b92ad5..a77843f89b 100644 --- a/packages/volto/src/components/manage/Controlpanels/UndoControlpanel.jsx +++ b/packages/volto/src/components/manage/Controlpanels/UndoControlpanel.jsx @@ -13,7 +13,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Icon, Toolbar, Toast } from '@plone/volto/components'; import { Form } from '@plone/volto/components/manage/Form'; import backSVG from '@plone/volto/icons/back.svg'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { Helmet } from '@plone/volto/helpers'; import nextIcon from '@plone/volto/icons/right-key.svg'; import prevIcon from '@plone/volto/icons/left-key.svg'; diff --git a/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx b/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx index d616d4fad9..df10732992 100644 --- a/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx +++ b/packages/volto/src/components/manage/Controlpanels/UpgradeControlPanel.jsx @@ -17,7 +17,7 @@ import { Table, } from 'semantic-ui-react'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { getSystemInformation, diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx index 0acb553959..65af2ede28 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx @@ -3,7 +3,7 @@ * TODO Enrich with features of user control panel. Then replace user control panel. */ import React, { useEffect, useState } from 'react'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { createPortal } from 'react-dom'; import { useHistory } from 'react-router'; import { Link, useLocation } from 'react-router-dom'; diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx index 4530107479..55aa083b30 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipListing.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { cloneDeep, uniqBy, debounce } from 'lodash'; +import { cloneDeep, uniqBy, debounce } from 'lodash-es'; import { useIntl } from 'react-intl'; import { useSelector, useDispatch, shallowEqual } from 'react-redux'; import jwtDecode from 'jwt-decode'; diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx index 371acfd32c..44708d47e4 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UserGroupMembershipMatrix.jsx @@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'; import { useIntl } from 'react-intl'; import { Checkbox, Form, Input } from 'semantic-ui-react'; -import { isEqual, debounce } from 'lodash'; +import { isEqual, debounce } from 'lodash-es'; import { messages } from '@plone/volto/helpers'; import { listGroups } from '@plone/volto/actions'; // getRegistry diff --git a/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx b/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx index a24b1fda32..ee916113c5 100644 --- a/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx +++ b/packages/volto/src/components/manage/Controlpanels/Users/UsersControlpanel.jsx @@ -35,7 +35,7 @@ import clearSVG from '@plone/volto/icons/clear.svg'; import addUserSvg from '@plone/volto/icons/add-user.svg'; import saveSVG from '@plone/volto/icons/save.svg'; import ploneSVG from '@plone/volto/icons/plone.svg'; -import { find, map, pull, difference } from 'lodash'; +import { find, map, pull, difference } from 'lodash-es'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Controlpanels/VersionOverview.jsx b/packages/volto/src/components/manage/Controlpanels/VersionOverview.jsx index 458350f461..d71144a16e 100644 --- a/packages/volto/src/components/manage/Controlpanels/VersionOverview.jsx +++ b/packages/volto/src/components/manage/Controlpanels/VersionOverview.jsx @@ -5,7 +5,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; import voltoPackageJson from '../../../../package.json'; import projectPackageJson from '@root/../package.json'; diff --git a/packages/volto/src/components/manage/Controlpanels/index.tsx b/packages/volto/src/components/manage/Controlpanels/index.tsx index e545fe0722..672d4ca059 100644 --- a/packages/volto/src/components/manage/Controlpanels/index.tsx +++ b/packages/volto/src/components/manage/Controlpanels/index.tsx @@ -1,10 +1,10 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; import { getSystemInformation, listControlpanels } from '@plone/volto/actions'; import { asyncConnect } from '@plone/volto/helpers'; // CONTROLPANELS -const LoadableControlpanels = loadable( +const LoadableControlpanels = lazy( () => import( /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels' @@ -24,7 +24,7 @@ export const Controlpanels = asyncConnect([ }, ])(LoadableControlpanels); -export const Controlpanel = loadable( +export const Controlpanel = lazy( () => import( /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanel' @@ -33,28 +33,28 @@ export const Controlpanel = loadable( // RULES CONTROLPANELS -export const RulesControlpanel = loadable( +export const RulesControlpanel = lazy( () => import( /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/Rules' ), ); -export const AddRuleControlpanel = loadable( +export const AddRuleControlpanel = lazy( () => import( /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/AddRule' ), ); -export const EditRuleControlpanel = loadable( +export const EditRuleControlpanel = lazy( () => import( /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/EditRule' ), ); -export const ConfigureRuleControlpanel = loadable( +export const ConfigureRuleControlpanel = lazy( () => import( /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule' @@ -63,35 +63,35 @@ export const ConfigureRuleControlpanel = loadable( // USERS CONTROLPANELS -export const UsersControlpanel = loadable( +export const UsersControlpanel = lazy( () => import( /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel' ), ); -export const RenderUsers = loadable( +export const RenderUsers = lazy( () => import( /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/RenderUsers' ), ); -export const UserGroupMembershipControlPanel = loadable( +export const UserGroupMembershipControlPanel = lazy( () => import( '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel' ), ); -export const GroupsControlpanel = loadable( +export const GroupsControlpanel = lazy( () => import( /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel' ), ); -export const RenderGroups = loadable( +export const RenderGroups = lazy( () => import( /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups' @@ -100,54 +100,54 @@ export const RenderGroups = loadable( // RELATIONS CONTROLPANEL -export const RelationsControlpanel = loadable( +export const RelationsControlpanel = lazy( () => import('@plone/volto/components/manage/Controlpanels/Relations/Relations'), ); // ALIASES CONTROLPANEL -export const AliasesControlpanel = loadable( +export const AliasesControlpanel = lazy( () => import('@plone/volto/components/manage/Controlpanels/Aliases'), ); // UNDO CONTROLPANEL -export const UndoControlpanel = loadable( +export const UndoControlpanel = lazy( () => import('@plone/volto/components/manage/Controlpanels/UndoControlpanel'), ); // ADDONS CONTROLPANEL -export const AddonsControlpanel = loadable( +export const AddonsControlpanel = lazy( () => import('@plone/volto/components/manage/Controlpanels/AddonsControlpanel'), ); // CONTENT TYPES CONTROLPANEL -export const ContentType = loadable( +export const ContentType = lazy( () => import( /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentType' ), ); -export const ContentTypeLayout = loadable( +export const ContentTypeLayout = lazy( () => import( /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeLayout' ), ); -export const ContentTypeSchema = loadable( +export const ContentTypeSchema = lazy( () => import( /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeSchema' ), ); -export const ContentTypes = loadable( +export const ContentTypes = lazy( () => import( /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypes' @@ -156,26 +156,26 @@ export const ContentTypes = loadable( // VERSION OVERVIEW -export const VersionOverview = loadable( +export const VersionOverview = lazy( () => import('@plone/volto/components/manage/Controlpanels/VersionOverview'), ); // PLONE UPGRADES CONTROLPANELS -export const UpgradeControlPanel = loadable( +export const UpgradeControlPanel = lazy( () => import('@plone/volto/components/manage/Controlpanels/UpgradeControlPanel'), ); // MODERATE COMMENTS CONTROLPANEL -export const ModerateComments = loadable( +export const ModerateComments = lazy( () => import('@plone/volto/components/manage/Controlpanels/ModerateComments'), ); // DATABASE INFORMATION CONTROLPANELS -export const DatabaseInformation = loadable( +export const DatabaseInformation = lazy( () => import('@plone/volto/components/manage/Controlpanels/DatabaseInformation'), ); diff --git a/packages/volto/src/components/manage/Diff/Diff.jsx b/packages/volto/src/components/manage/Diff/Diff.jsx index 01ea0002ab..8ace58cd1e 100644 --- a/packages/volto/src/components/manage/Diff/Diff.jsx +++ b/packages/volto/src/components/manage/Diff/Diff.jsx @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import { Helmet } from '@plone/volto/helpers'; import { connect } from 'react-redux'; import { compose } from 'redux'; -import { filter, isEqual, map } from 'lodash'; +import { filter, isEqual, map } from 'lodash-es'; import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react'; import { Link, withRouter } from 'react-router-dom'; import { createPortal } from 'react-dom'; diff --git a/packages/volto/src/components/manage/Diff/DiffField.jsx b/packages/volto/src/components/manage/Diff/DiffField.jsx index 23582788d3..379a851653 100644 --- a/packages/volto/src/components/manage/Diff/DiffField.jsx +++ b/packages/volto/src/components/manage/Diff/DiffField.jsx @@ -5,7 +5,7 @@ import React from 'react'; // import { diffWords as dWords } from 'diff'; -import { join, map } from 'lodash'; +import { join, map } from 'lodash-es'; import PropTypes from 'prop-types'; import { Grid } from 'semantic-ui-react'; import ReactDOMServer from 'react-dom/server'; diff --git a/packages/volto/src/components/manage/DragDropList/DragDropList.jsx b/packages/volto/src/components/manage/DragDropList/DragDropList.jsx index d330239df4..00f3fd6759 100644 --- a/packages/volto/src/components/manage/DragDropList/DragDropList.jsx +++ b/packages/volto/src/components/manage/DragDropList/DragDropList.jsx @@ -1,5 +1,5 @@ import React, { useRef } from 'react'; -import { isEmpty } from 'lodash'; +import { isEmpty } from 'lodash-es'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; import { v4 as uuid } from 'uuid'; diff --git a/packages/volto/src/components/manage/Edit/Edit.jsx b/packages/volto/src/components/manage/Edit/Edit.jsx index 333f6cf651..28e8b4c8d5 100644 --- a/packages/volto/src/components/manage/Edit/Edit.jsx +++ b/packages/volto/src/components/manage/Edit/Edit.jsx @@ -13,7 +13,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import { Button, Grid, Menu } from 'semantic-ui-react'; import { createPortal } from 'react-dom'; import qs from 'query-string'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { toast } from 'react-toastify'; import { diff --git a/packages/volto/src/components/manage/Form/BlocksToolbar.jsx b/packages/volto/src/components/manage/Form/BlocksToolbar.jsx index 7e1fa15729..e8842221f1 100644 --- a/packages/volto/src/components/manage/Form/BlocksToolbar.jsx +++ b/packages/volto/src/components/manage/Form/BlocksToolbar.jsx @@ -11,7 +11,7 @@ import { Icon } from '@plone/volto/components'; import { Plug } from '@plone/volto/components/manage/Pluggable'; import { v4 as uuid } from 'uuid'; import { load } from 'redux-localstorage-simple'; -import { isEqual, omit, without } from 'lodash'; +import { isEqual, omit, without } from 'lodash-es'; import { setBlocksClipboard, resetBlocksClipboard } from '@plone/volto/actions'; import config from '@plone/volto/registry'; diff --git a/packages/volto/src/components/manage/Form/Form.jsx b/packages/volto/src/components/manage/Form/Form.jsx index 8b108d7dde..ef8a2668a4 100644 --- a/packages/volto/src/components/manage/Form/Form.jsx +++ b/packages/volto/src/components/manage/Form/Form.jsx @@ -30,7 +30,7 @@ import { without, cloneDeep, xor, -} from 'lodash'; +} from 'lodash-es'; import isBoolean from 'lodash/isBoolean'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; diff --git a/packages/volto/src/components/manage/Form/InlineForm.jsx b/packages/volto/src/components/manage/Form/InlineForm.jsx index f3998f434e..7d82381295 100644 --- a/packages/volto/src/components/manage/Form/InlineForm.jsx +++ b/packages/volto/src/components/manage/Form/InlineForm.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Accordion, Segment, Message } from 'semantic-ui-react'; import { defineMessages, injectIntl } from 'react-intl'; import AnimateHeight from 'react-animate-height'; -import { keys, map, isEqual } from 'lodash'; +import { keys, map, isEqual } from 'lodash-es'; import { useAtom } from 'jotai'; import { inlineFormFieldsetsState } from './InlineFormState'; import { diff --git a/packages/volto/src/components/manage/Form/InlineFormState.js b/packages/volto/src/components/manage/Form/InlineFormState.js index 2c41c4f99b..714fdce445 100644 --- a/packages/volto/src/components/manage/Form/InlineFormState.js +++ b/packages/volto/src/components/manage/Form/InlineFormState.js @@ -1,6 +1,6 @@ import { atom } from 'jotai'; import { atomFamily } from 'jotai/utils'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; export const inlineFormFieldsetsState = atomFamily( ({ name, initialState }) => atom(initialState), diff --git a/packages/volto/src/components/manage/Form/ModalForm.jsx b/packages/volto/src/components/manage/Form/ModalForm.jsx index ba2f5b0a30..101853170d 100644 --- a/packages/volto/src/components/manage/Form/ModalForm.jsx +++ b/packages/volto/src/components/manage/Form/ModalForm.jsx @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { keys, map } from 'lodash'; +import { keys, map } from 'lodash-es'; import { Button, Form as UiForm, diff --git a/packages/volto/src/components/manage/Form/index.tsx b/packages/volto/src/components/manage/Form/index.tsx index d784862389..527ce7327c 100644 --- a/packages/volto/src/components/manage/Form/index.tsx +++ b/packages/volto/src/components/manage/Form/index.tsx @@ -1,48 +1,48 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; -export const Field = loadable( +export const Field = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Field' ), ); -export const InlineForm = loadable( +export const InlineForm = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/InlineForm' ), ); -export const ModalForm = loadable( +export const ModalForm = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/ModalForm' ), ); -export const UndoToolbar = loadable( +export const UndoToolbar = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/UndoToolbar' ), ); -export const BlocksToolbar = loadable( +export const BlocksToolbar = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlocksToolbar' ), ); -export const BlockDataForm = loadable( +export const BlockDataForm = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/BlockDataForm' ), ); -export const BlocksForm = loadable( +export const BlocksForm = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Blocks/Block/BlocksForm' ), ); -export const Form = loadable( +export const Form = lazy( () => import( /* webpackChunkName: "Form" */ '@plone/volto/components/manage/Form/Form' diff --git a/packages/volto/src/components/manage/History/History.jsx b/packages/volto/src/components/manage/History/History.jsx index 5b45124ffb..9f88b50335 100644 --- a/packages/volto/src/components/manage/History/History.jsx +++ b/packages/volto/src/components/manage/History/History.jsx @@ -16,7 +16,7 @@ import { Segment, Table, } from 'semantic-ui-react'; -import { concat, map, reverse, find } from 'lodash'; +import { concat, map, reverse, find } from 'lodash-es'; import { createPortal } from 'react-dom'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { asyncConnect } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/LinksToItem/LinksToItem.jsx b/packages/volto/src/components/manage/LinksToItem/LinksToItem.jsx index 0884be01f7..4da866b81e 100644 --- a/packages/volto/src/components/manage/LinksToItem/LinksToItem.jsx +++ b/packages/volto/src/components/manage/LinksToItem/LinksToItem.jsx @@ -3,7 +3,7 @@ * @module components/manage/LinksToItem/LinksToItem */ import React, { useEffect, useState } from 'react'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { Helmet } from '@plone/volto/helpers'; import { Link } from 'react-router-dom'; import { createPortal } from 'react-dom'; diff --git a/packages/volto/src/components/manage/Messages/Messages.jsx b/packages/volto/src/components/manage/Messages/Messages.jsx index 9bc536b93b..ea59c75d2f 100644 --- a/packages/volto/src/components/manage/Messages/Messages.jsx +++ b/packages/volto/src/components/manage/Messages/Messages.jsx @@ -1,6 +1,6 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { Message, Container } from 'semantic-ui-react'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { removeMessage } from '@plone/volto/actions'; diff --git a/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx b/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx index 37fe9a11dc..9b78663efd 100644 --- a/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx +++ b/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { Button, Container, Segment, Table } from 'semantic-ui-react'; import { Helmet } from '@plone/volto/helpers'; import { flattenToAppURL, getBaseUrl, langmap } from '@plone/volto/helpers'; -import { reduce } from 'lodash'; +import { reduce } from 'lodash-es'; import { Link, useLocation } from 'react-router-dom'; import { Icon, Toast, Toolbar } from '@plone/volto/components'; import config from '@plone/volto/registry'; diff --git a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx index 38fd1bfeca..5c5a73d22c 100644 --- a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx +++ b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { Form as UiForm, Menu, Segment } from 'semantic-ui-react'; import { Provider } from 'react-intl-redux'; diff --git a/packages/volto/src/components/manage/Pluggable/index.js b/packages/volto/src/components/manage/Pluggable/index.js index cfc6bb241b..114fed7a0c 100644 --- a/packages/volto/src/components/manage/Pluggable/index.js +++ b/packages/volto/src/components/manage/Pluggable/index.js @@ -2,7 +2,7 @@ // We've renamed Slot => Pluggable, not to clash with Volto slots import React from 'react'; -import { sortBy } from 'lodash'; +import { sortBy } from 'lodash-es'; export const context = React.createContext(); diff --git a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx index 2941189d20..51a3221978 100644 --- a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx +++ b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import { useDispatch } from 'react-redux'; -import { map, keys } from 'lodash'; +import { map, keys } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { toast } from 'react-toastify'; import { compose } from 'redux'; diff --git a/packages/volto/src/components/manage/Rules/index.tsx b/packages/volto/src/components/manage/Rules/index.tsx index 1db608da66..9bda14adc6 100644 --- a/packages/volto/src/components/manage/Rules/index.tsx +++ b/packages/volto/src/components/manage/Rules/index.tsx @@ -1,5 +1,5 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; -export const Rules = loadable( +export const Rules = lazy( () => import('@plone/volto/components/manage/Rules/Rules'), ); diff --git a/packages/volto/src/components/manage/Sharing/Sharing.jsx b/packages/volto/src/components/manage/Sharing/Sharing.jsx index b50ece9658..c78f91f1c1 100644 --- a/packages/volto/src/components/manage/Sharing/Sharing.jsx +++ b/packages/volto/src/components/manage/Sharing/Sharing.jsx @@ -9,7 +9,7 @@ import { Helmet } from '@plone/volto/helpers'; import { connect } from 'react-redux'; import { compose } from 'redux'; import { Link, withRouter } from 'react-router-dom'; -import { find, isEqual, map } from 'lodash'; +import { find, isEqual, map } from 'lodash-es'; import { createPortal } from 'react-dom'; import { Button, diff --git a/packages/volto/src/components/manage/Sidebar/ObjectBrowserBody.jsx b/packages/volto/src/components/manage/Sidebar/ObjectBrowserBody.jsx index 7ce0d3d455..4dbe8b4208 100644 --- a/packages/volto/src/components/manage/Sidebar/ObjectBrowserBody.jsx +++ b/packages/volto/src/components/manage/Sidebar/ObjectBrowserBody.jsx @@ -5,7 +5,7 @@ import { connect } from 'react-redux'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { Input, Segment, Breadcrumb } from 'semantic-ui-react'; -import { join } from 'lodash'; +import { join } from 'lodash-es'; // These absolute imports (without using the corresponding centralized index.js) are required // to cut circular import problems, this file should never use them. This is because of diff --git a/packages/volto/src/components/manage/Sidebar/SidebarPopup.jsx b/packages/volto/src/components/manage/Sidebar/SidebarPopup.jsx index f963dfb1ff..63812181fe 100644 --- 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 'semantic-ui-react/dist/commonjs/lib'; +import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick'; const DEFAULT_TIMEOUT = 500; diff --git a/packages/volto/src/components/manage/Toolbar/More.jsx b/packages/volto/src/components/manage/Toolbar/More.jsx index a40a74fe9f..6a74c49f4e 100644 --- a/packages/volto/src/components/manage/Toolbar/More.jsx +++ b/packages/volto/src/components/manage/Toolbar/More.jsx @@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl'; import PropTypes from 'prop-types'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { Link, useHistory } from 'react-router-dom'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { toast } from 'react-toastify'; import { Toast } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Toolbar/Toolbar.jsx b/packages/volto/src/components/manage/Toolbar/Toolbar.jsx index 170eaabf7e..36f141bb86 100644 --- 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 'semantic-ui-react/dist/commonjs/lib'; +import doesNodeContainClick from '@plone/volto/helpers/Utils/doesNodeContainClick'; import { withCookies } from 'react-cookie'; import { filter, find } from 'lodash'; import cx from 'classnames'; diff --git a/packages/volto/src/components/manage/Toolbar/Types.jsx b/packages/volto/src/components/manage/Toolbar/Types.jsx index a47abd50c2..36cbb624ed 100644 --- a/packages/volto/src/components/manage/Toolbar/Types.jsx +++ b/packages/volto/src/components/manage/Toolbar/Types.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; -import { filter, find, isEmpty, map } from 'lodash'; +import { filter, find, isEmpty, map } from 'lodash-es'; import { FormattedMessage } from 'react-intl'; import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers'; import config from '@plone/volto/registry'; diff --git a/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx b/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx index 2670cc84bc..a1a16d0a7f 100644 --- a/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { find, isObject } from 'lodash'; +import { find, isObject } from 'lodash-es'; import { getVocabFromHint, diff --git a/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx b/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx index b8d44b1530..f678f2c561 100644 --- a/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx +++ b/packages/volto/src/components/manage/Widgets/ColorPickerWidget.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Form } from 'semantic-ui-react'; import { Grid, Button } from 'semantic-ui-react'; -import { isEmpty, isEqual } from 'lodash'; +import { isEmpty, isEqual } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; const messages = defineMessages({ diff --git a/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx b/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx index bfa4cfe6fb..cab96b4782 100644 --- a/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/DatetimeWidget.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, useIntl } from 'react-intl'; -import loadable from '@loadable/component'; +import { lazy } from 'react'; import cx from 'classnames'; import { Icon } from '@plone/volto/components'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; @@ -16,7 +16,7 @@ import 'rc-time-picker/assets/index.css'; import 'react-dates/initialize'; import 'react-dates/lib/css/_datepicker.css'; -const TimePicker = loadable(() => import('rc-time-picker')); +const TimePicker = lazy(() => import('rc-time-picker')); const messages = defineMessages({ date: { diff --git a/packages/volto/src/components/manage/Widgets/FileWidget.jsx b/packages/volto/src/components/manage/Widgets/FileWidget.jsx index e21cde8c60..254e772cb1 100644 --- a/packages/volto/src/components/manage/Widgets/FileWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/FileWidget.jsx @@ -11,7 +11,7 @@ import { injectIntl } from 'react-intl'; import deleteSVG from '@plone/volto/icons/delete.svg'; import { Icon, UniversalLink } from '@plone/volto/components'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; -import loadable from '@loadable/component'; +import { lazy } from 'react'; import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers'; import { defineMessages, useIntl } from 'react-intl'; @@ -23,7 +23,7 @@ const imageMimetypes = [ 'image/gif', 'image/svg+xml', ]; -const Dropzone = loadable(() => import('react-dropzone')); +const Dropzone = lazy(() => import('react-dropzone')); const messages = defineMessages({ releaseDrag: { diff --git a/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx b/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx index ee60438be4..b3fac79121 100644 --- a/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx +++ b/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx @@ -5,7 +5,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import cx from 'classnames'; import { defineMessages, injectIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Widgets/IdWidget.jsx b/packages/volto/src/components/manage/Widgets/IdWidget.jsx index 0841a6dd25..1e2f2c5091 100644 --- a/packages/volto/src/components/manage/Widgets/IdWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/IdWidget.jsx @@ -7,7 +7,7 @@ import { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { useSelector, useDispatch } from 'react-redux'; import { Input } from 'semantic-ui-react'; -import { compact, concat, keys, map, union, uniq } from 'lodash'; +import { compact, concat, keys, map, union, uniq } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { Icon } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Widgets/ImageWidget.jsx b/packages/volto/src/components/manage/Widgets/ImageWidget.jsx index b107e74307..a4c1e8737f 100644 --- a/packages/volto/src/components/manage/Widgets/ImageWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/ImageWidget.jsx @@ -3,7 +3,7 @@ import { Button, Dimmer, Loader, Message } from 'semantic-ui-react'; import { useIntl, defineMessages } from 'react-intl'; import { useDispatch } from 'react-redux'; import { useLocation } from 'react-router-dom'; -import loadable from '@loadable/component'; +import { lazy } from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor'; @@ -26,7 +26,7 @@ import navTreeSVG from '@plone/volto/icons/nav.svg'; import linkSVG from '@plone/volto/icons/link.svg'; import uploadSVG from '@plone/volto/icons/upload.svg'; -const Dropzone = loadable(() => import('react-dropzone')); +const Dropzone = lazy(() => import('react-dropzone')); export const ImageToolbar = ({ className, data, id, onChange, selected }) => (
diff --git a/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx b/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx index 566928561c..94abeb18c0 100644 --- a/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/ObjectBrowserWidget.jsx @@ -6,7 +6,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { compose } from 'redux'; -import { compact, includes, isArray, isEmpty, remove } from 'lodash'; +import { compact, includes, isArray, isEmpty, remove } from 'lodash-es'; import { connect } from 'react-redux'; import { Image, Label, Popup, Button } from 'semantic-ui-react'; import { diff --git a/packages/volto/src/components/manage/Widgets/ObjectListWidget.stories.js b/packages/volto/src/components/manage/Widgets/ObjectListWidget.stories.js index 72518ce27e..73c0b1e696 100644 --- a/packages/volto/src/components/manage/Widgets/ObjectListWidget.stories.js +++ b/packages/volto/src/components/manage/Widgets/ObjectListWidget.stories.js @@ -3,7 +3,7 @@ import { RealStoreWrapper, FormUndoWrapper } from '@plone/volto/storybook'; import React from 'react'; import { searchResults } from './ObjectBrowserWidget.stories'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; const defaultSchema = { title: 'Item', diff --git a/packages/volto/src/components/manage/Widgets/ObjectWidget.stories.jsx b/packages/volto/src/components/manage/Widgets/ObjectWidget.stories.jsx index 006d395995..cd6e348cfe 100644 --- a/packages/volto/src/components/manage/Widgets/ObjectWidget.stories.jsx +++ b/packages/volto/src/components/manage/Widgets/ObjectWidget.stories.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { searchResults } from './ObjectBrowserWidget.stories'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; import ObjectWidget from './ObjectWidget'; import WidgetStory from './story'; diff --git a/packages/volto/src/components/manage/Widgets/QuerySortOnWidget.jsx b/packages/volto/src/components/manage/Widgets/QuerySortOnWidget.jsx index 7255b88aba..549f229a0b 100644 --- a/packages/volto/src/components/manage/Widgets/QuerySortOnWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/QuerySortOnWidget.jsx @@ -1,6 +1,6 @@ import React from 'react'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; -import { toPairs, groupBy, map } from 'lodash'; +import { toPairs, groupBy, map } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; diff --git a/packages/volto/src/components/manage/Widgets/QueryWidget.jsx b/packages/volto/src/components/manage/Widgets/QueryWidget.jsx index 1c06d998cb..478fbe9d2e 100644 --- a/packages/volto/src/components/manage/Widgets/QueryWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/QueryWidget.jsx @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { Button, Form, Grid, Input, Label } from 'semantic-ui-react'; -import { filter, remove, toPairs, groupBy, isEmpty, map } from 'lodash'; +import { filter, remove, toPairs, groupBy, isEmpty, map } from 'lodash-es'; import { defineMessages, injectIntl } from 'react-intl'; import { getQuerystring } from '@plone/volto/actions'; import { Icon } from '@plone/volto/components'; diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx index 85d9e25cd7..e064d372a4 100644 --- a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx +++ b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx @@ -5,7 +5,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { Form } from 'semantic-ui-react'; import SelectInput from './SelectInput'; import { toBackendLang } from '@plone/volto/helpers'; diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx index e7c2f03f0f..74b7dfa2fe 100644 --- a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx @@ -9,7 +9,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import cx from 'classnames'; -import { isEqual, map, find, concat, remove } from 'lodash'; +import { isEqual, map, find, concat, remove } from 'lodash-es'; import { defineMessages, injectIntl } from 'react-intl'; import { Form, diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx index a3165c2280..07ffcfd04f 100644 --- a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx +++ b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/SelectInput.jsx @@ -5,7 +5,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { find } from 'lodash'; +import { find } from 'lodash-es'; import { Option, DropdownIndicator, diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx index 6d726a0292..b438f63c5b 100644 --- a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx +++ b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { Days } from './Utils'; import SelectInput from './SelectInput'; import { Form } from 'semantic-ui-react'; diff --git a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx index d75defb5a0..c6e5cda2d9 100644 --- a/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx +++ b/packages/volto/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx @@ -6,7 +6,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { Form } from 'semantic-ui-react'; import SelectInput from './SelectInput'; diff --git a/packages/volto/src/components/manage/Widgets/ReferenceWidget.jsx b/packages/volto/src/components/manage/Widgets/ReferenceWidget.jsx index 93f90c9f1c..dd2952c55d 100644 --- a/packages/volto/src/components/manage/Widgets/ReferenceWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/ReferenceWidget.jsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import { Label, Dropdown, Popup, Icon } from 'semantic-ui-react'; -import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash'; +import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; diff --git a/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx b/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx index b33aebac0c..aaaf56fcd9 100644 --- a/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx @@ -11,7 +11,7 @@ import { injectIntl } from 'react-intl'; import deleteSVG from '@plone/volto/icons/delete.svg'; import { Icon } from '@plone/volto/components'; import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper'; -import loadable from '@loadable/component'; +import { lazy } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { toPublicURL, validateFileUploadSize } from '@plone/volto/helpers'; @@ -23,7 +23,7 @@ const imageMimetypes = [ 'image/gif', 'image/svg+xml', ]; -const Dropzone = loadable(() => import('react-dropzone')); +const Dropzone = lazy(() => import('react-dropzone')); const messages = defineMessages({ releaseDrag: { diff --git a/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx b/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx index 0bf9c45d91..8a3f8e3e04 100644 --- a/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/SchemaWidget.jsx @@ -7,7 +7,15 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; import PropTypes from 'prop-types'; -import { concat, findIndex, isString, map, omit, slice, without } from 'lodash'; +import { + concat, + findIndex, + isString, + map, + omit, + slice, + without, +} from 'lodash-es'; import move from 'lodash-move'; import { Confirm, Form, Grid, Icon, Message, Segment } from 'semantic-ui-react'; import { defineMessages, injectIntl } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Widgets/SelectUtils.js b/packages/volto/src/components/manage/Widgets/SelectUtils.js index b5ad063c6c..48b3e5a46d 100644 --- a/packages/volto/src/components/manage/Widgets/SelectUtils.js +++ b/packages/volto/src/components/manage/Widgets/SelectUtils.js @@ -1,4 +1,4 @@ -import { isBoolean, isObject, isString } from 'lodash'; +import { isBoolean, isObject, isString } from 'lodash-es'; import { getBoolean } from '@plone/volto/helpers'; import { defineMessages } from 'react-intl'; diff --git a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx index 64b0cdea69..cf9963ac7d 100644 --- a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { compose } from 'redux'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { defineMessages, injectIntl } from 'react-intl'; import { getVocabFromHint, diff --git a/packages/volto/src/components/manage/Widgets/VocabularyTermsWidget.jsx b/packages/volto/src/components/manage/Widgets/VocabularyTermsWidget.jsx index cfefd80a67..1376604a4d 100644 --- a/packages/volto/src/components/manage/Widgets/VocabularyTermsWidget.jsx +++ b/packages/volto/src/components/manage/Widgets/VocabularyTermsWidget.jsx @@ -84,7 +84,7 @@ def TalkTypesVocabulary(context): import React from 'react'; import { useDispatch } from 'react-redux'; -import { find, findIndex, remove } from 'lodash'; +import { find, findIndex, remove } from 'lodash-es'; import { defineMessages, useIntl } from 'react-intl'; import { v4 as uuid } from 'uuid'; diff --git a/packages/volto/src/components/manage/Widgets/index.tsx b/packages/volto/src/components/manage/Widgets/index.tsx index 844847c602..5adaa65d65 100644 --- a/packages/volto/src/components/manage/Widgets/index.tsx +++ b/packages/volto/src/components/manage/Widgets/index.tsx @@ -1,230 +1,230 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; -export const AlignWidget = loadable( +export const AlignWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/AlignWidget' ), ); -export const ButtonsWidget = loadable( +export const ButtonsWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ButtonsWidget' ), ); -export const ArrayWidget = loadable( +export const ArrayWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ArrayWidget' ), ); -export const CheckboxWidget = loadable( +export const CheckboxWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/CheckboxWidget' ), ); -export const FileWidget = loadable( +export const FileWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FileWidget' ), ); -export const IdWidget = loadable( +export const IdWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/IdWidget' ), ); -export const PasswordWidget = loadable( +export const PasswordWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/PasswordWidget' ), ); -export const QueryWidget = loadable( +export const QueryWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QueryWidget' ), ); -export const QuerySortOnWidget = loadable( +export const QuerySortOnWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerySortOnWidget' ), ); -export const QuerystringWidget = loadable( +export const QuerystringWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/QuerystringWidget' ), ); -export const SchemaWidget = loadable( +export const SchemaWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SchemaWidget' ), ); -export const SelectWidget = loadable( +export const SelectWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectWidget' ), ); -export const TextareaWidget = loadable( +export const TextareaWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextareaWidget' ), ); -export const TextWidget = loadable( +export const TextWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TextWidget' ), ); -export const TokenWidget = loadable( +export const TokenWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TokenWidget' ), ); -export const WysiwygWidget = loadable( +export const WysiwygWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/WysiwygWidget' ), ); -export const UrlWidget = loadable( +export const UrlWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/UrlWidget' ), ); -export const InternalUrlWidget = loadable( +export const InternalUrlWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/InternalUrlWidget' ), ); -export const EmailWidget = loadable( +export const EmailWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/EmailWidget' ), ); -export const NumberWidget = loadable( +export const NumberWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/NumberWidget' ), ); -export const ImageSizeWidget = loadable( +export const ImageSizeWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ImageSizeWidget' ), ); -export const RegistryImageWidget = loadable( +export const RegistryImageWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RegistryImageWidget' ), ); -export const ReferenceWidget = loadable( +export const ReferenceWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ReferenceWidget' ), ); -export const ObjectBrowserWidget = loadable( +export const ObjectBrowserWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectBrowserWidget' ), ); -export const ObjectWidget = loadable( +export const ObjectWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectWidget' ), ); -export const ObjectListWidget = loadable( +export const ObjectListWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ObjectListWidget' ), ); -export const VocabularyTermsWidget = loadable( +export const VocabularyTermsWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/VocabularyTermsWidget' ), ); -export const SelectMetadataWidget = loadable( +export const SelectMetadataWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField' ), ); -export const SelectAutoComplete = loadable( +export const SelectAutoComplete = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/SelectAutoComplete' ), ); -export const ColorPickerWidget = loadable( +export const ColorPickerWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/ColorPickerWidget' ), ); -export const DatetimeWidget = loadable( +export const DatetimeWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/DatetimeWidget' ), ); -export const RecurrenceWidget = loadable( +export const RecurrenceWidget = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget' ), ); -export const FormFieldWrapper = loadable( +export const FormFieldWrapper = lazy( () => import( /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper' diff --git a/packages/volto/src/components/manage/Workflow/Workflow.jsx b/packages/volto/src/components/manage/Workflow/Workflow.jsx index 7185af3b58..0471b04546 100644 --- a/packages/volto/src/components/manage/Workflow/Workflow.jsx +++ b/packages/volto/src/components/manage/Workflow/Workflow.jsx @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import PropTypes from 'prop-types'; import { compose } from 'redux'; import { useDispatch, useSelector, shallowEqual } from 'react-redux'; -import { uniqBy } from 'lodash'; +import { uniqBy } from 'lodash-es'; import { toast } from 'react-toastify'; import { defineMessages, useIntl } from 'react-intl'; diff --git a/packages/volto/src/components/theme/Comments/index.tsx b/packages/volto/src/components/theme/Comments/index.tsx index ae38d87568..9fe705d6a2 100644 --- a/packages/volto/src/components/theme/Comments/index.tsx +++ b/packages/volto/src/components/theme/Comments/index.tsx @@ -1,5 +1,5 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; -export const CommentEditModal = loadable( +export const CommentEditModal = lazy( () => import('@plone/volto/components/theme/Comments/CommentEditModal'), ); diff --git a/packages/volto/src/components/theme/Footer/Footer.jsx b/packages/volto/src/components/theme/Footer/Footer.jsx index 6bbabbf87f..6779ee330e 100644 --- a/packages/volto/src/components/theme/Footer/Footer.jsx +++ b/packages/volto/src/components/theme/Footer/Footer.jsx @@ -5,7 +5,7 @@ import React from 'react'; import { Container, List, Segment } from 'semantic-ui-react'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { useSelector, shallowEqual } from 'react-redux'; import { UniversalLink } from '@plone/volto/components'; diff --git a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx index 460dec541d..81d9bf9a91 100644 --- a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx +++ b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.jsx @@ -9,7 +9,7 @@ import { Link } from 'react-router-dom'; import { useSelector } from 'react-redux'; import cx from 'classnames'; -import { find, map } from 'lodash'; +import { find, map } from 'lodash-es'; import { Helmet, diff --git a/packages/volto/src/components/theme/Pagination/Pagination.jsx b/packages/volto/src/components/theme/Pagination/Pagination.jsx index 77ae8160ea..337b319900 100644 --- a/packages/volto/src/components/theme/Pagination/Pagination.jsx +++ b/packages/volto/src/components/theme/Pagination/Pagination.jsx @@ -7,7 +7,7 @@ import React from 'react'; import { Menu } from 'semantic-ui-react'; import { Icon } from '@plone/volto/components'; import PropTypes from 'prop-types'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { FormattedMessage, injectIntl } from 'react-intl'; import leftChevron from '@plone/volto/icons/left-key.svg'; import rightChevron from '@plone/volto/icons/right-key.svg'; diff --git a/packages/volto/src/components/theme/View/DefaultView.jsx b/packages/volto/src/components/theme/View/DefaultView.jsx index 770dbd6e1a..ee563082ee 100644 --- a/packages/volto/src/components/theme/View/DefaultView.jsx +++ b/packages/volto/src/components/theme/View/DefaultView.jsx @@ -20,7 +20,7 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks'; import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers'; import { useDispatch, useSelector } from 'react-redux'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; /** * Component to display the default view. diff --git a/packages/volto/src/components/theme/View/RenderBlocks.jsx b/packages/volto/src/components/theme/View/RenderBlocks.jsx index 439bfb0dc9..585f878926 100644 --- a/packages/volto/src/components/theme/View/RenderBlocks.jsx +++ b/packages/volto/src/components/theme/View/RenderBlocks.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers'; import { defineMessages, useIntl } from 'react-intl'; -import { map } from 'lodash'; +import { map } from 'lodash-es'; import { MaybeWrap } from '@plone/volto/components'; import { getBlocksFieldname, diff --git a/packages/volto/src/components/theme/Widgets/BooleanWidget.jsx b/packages/volto/src/components/theme/Widgets/BooleanWidget.jsx index 6abb15db0c..ad976f148e 100644 --- a/packages/volto/src/components/theme/Widgets/BooleanWidget.jsx +++ b/packages/volto/src/components/theme/Widgets/BooleanWidget.jsx @@ -1,6 +1,6 @@ import React from 'react'; import cx from 'classnames'; -import { isBoolean } from 'lodash'; +import { isBoolean } from 'lodash-es'; import { defineMessages, injectIntl } from 'react-intl'; const messages = defineMessages({ diff --git a/packages/volto/src/config/Blocks.jsx b/packages/volto/src/config/Blocks.jsx index 9da497cdb0..916435637f 100644 --- a/packages/volto/src/config/Blocks.jsx +++ b/packages/volto/src/config/Blocks.jsx @@ -1,5 +1,5 @@ import { defineMessages } from 'react-intl'; -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; import ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View'; import ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View'; diff --git a/packages/volto/src/config/Loadables.jsx b/packages/volto/src/config/Loadables.jsx index ea2b57a546..e475166b09 100644 --- a/packages/volto/src/config/Loadables.jsx +++ b/packages/volto/src/config/Loadables.jsx @@ -1,4 +1,4 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; // This is to make happy the types declaration extractor (tsc) that is not able to // extract one private method the types from `@dnd-kit` library: diff --git a/packages/volto/src/config/Views.jsx b/packages/volto/src/config/Views.jsx index bb60818ece..e8be95bba6 100644 --- a/packages/volto/src/config/Views.jsx +++ b/packages/volto/src/config/Views.jsx @@ -1,4 +1,4 @@ -import loadable from '@loadable/component'; +import { lazy } from 'react'; import { defineMessages } from 'react-intl'; import DefaultView from '@plone/volto/components/theme/View/DefaultView'; @@ -18,7 +18,7 @@ import Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorize import Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden'; import ServerError from '@plone/volto/components/theme/Error/ServerError'; -const EventView = loadable( +const EventView = lazy( () => import('@plone/volto/components/theme/View/EventView'), ); diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js index 1da9b54b90..c35c648f0b 100644 --- a/packages/volto/src/config/index.js +++ b/packages/volto/src/config/index.js @@ -16,7 +16,7 @@ import { initialBlocksFocus, } from './Blocks'; import { components } from './Components'; -import { loadables } from './Loadables'; +// import { loadables } from './Loadables'; import { workflowMapping } from './Workflows'; import slots from './slots'; @@ -135,7 +135,7 @@ let config = { initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers contentIcons: contentIcons, - loadables, + // loadables, lazyBundles: { cms: [ 'prettierStandalone', diff --git a/packages/volto/src/entry-server.tsx b/packages/volto/src/entry-server.tsx index 7797c2557d..c10917288e 100644 --- a/packages/volto/src/entry-server.tsx +++ b/packages/volto/src/entry-server.tsx @@ -1,3 +1,4 @@ +import './config'; // This is the bootstrap for the global config - server side import * as React from 'react'; import ReactDOMServer from 'react-dom/server'; import { ServerResponse } from 'http'; @@ -8,9 +9,37 @@ import { TitleWidget, Moment } from './test_loadable'; // import { Provider } from 'react-intl-redux'; // import { StaticRouter } from 'react-router-dom'; // import { ReduxAsyncConnect, loadOnServer } from './helpers/AsyncConnect'; +import Html from './helpers/Html/Html'; +import { CookiesProvider } from 'react-cookie'; +import Api from '@plone/volto/helpers/Api/Api'; +import { + toReactIntlLang, + toGettextLang, +} from '@plone/volto/helpers/Utils/Utils'; +import { detect } from 'detect-browser'; +import locale from 'locale'; +import languages from '@plone/volto/constants/Languages.cjs'; +import { createMemoryHistory } from 'history'; +import configureStore from '@plone/volto/store'; + +import config from '@plone/volto/registry'; // index.js // import './fetch-polyfill'; +// console.log(config); + +let locales = {}; + +if (config.settings) { + config.settings.supportedLanguages.forEach((lang) => { + const langFileName = toGettextLang(lang); + import(/* @vite-ignore */ '../locales/' + langFileName + '.json').then( + (locale) => { + locales = { ...locales, [toReactIntlLang(lang)]: locale.default }; + }, + ); + }); +} export async function render(opts: { url: string; @@ -18,6 +47,40 @@ export async function render(opts: { req: express.Request; res: ServerResponse; }) { + const { req } = opts; + + // Setups Api instance + const api = new Api(req); + const browserdetect = detect(req.headers['user-agent']); + const supported = new locale.Locales(Object.keys(languages), 'en'); + + const lang = toReactIntlLang( + new locale.Locales( + req.universalCookies.get('I18N_LANGUAGE') || + config.settings.defaultLanguage || + req.headers['accept-language'], + ) + .best(supported) + .toString(), + ); + + // Minimum initial state for the fake Redux store instance + const initialState = { + intl: { + defaultLocale: 'en', + locale: lang, + messages: locales[lang], + }, + }; + + const history = createMemoryHistory({ + initialEntries: [req.url], + }); + + // Create a fake Redux store instance for the `errorHandler` to render + // and for being used by the rest of the middlewares, if required + const store = configureStore(initialState, history, api); + // const markup = ReactDOMServer.renderToString( // // @@ -28,23 +91,34 @@ export async function render(opts: { // , // ); const moment = (await Moment).default; + const markup = ReactDOMServer.renderToString( + +
+ HELLO from SSR! at {req.url} + + + + +
+ , + ); // Render the app const appHtml = ReactDOMServer.renderToString( -
- HELLO from SSR!{' '} - - - - -
, - // , + //
+ // HELLO from SSR!{' '} + // + // + // + // + //
, + , ); opts.res.statusCode = 200; diff --git a/packages/volto/src/helpers/Api/Api.js b/packages/volto/src/helpers/Api/Api.js index 57419e116a..39058ed21a 100644 --- a/packages/volto/src/helpers/Api/Api.js +++ b/packages/volto/src/helpers/Api/Api.js @@ -7,7 +7,7 @@ import superagent from 'superagent'; import Cookies from 'universal-cookie'; import config from '@plone/volto/registry'; import { addHeadersFactory } from '@plone/volto/helpers/Proxy/Proxy'; -import { stripQuerystring } from '@plone/volto/helpers'; +import { stripQuerystring } from '@plone/volto/helpers/Url/Url'; const methods = ['get', 'post', 'put', 'patch', 'del']; diff --git a/packages/volto/src/helpers/Blocks/Blocks.js b/packages/volto/src/helpers/Blocks/Blocks.js index 88f1a5ed15..86e6fe87e0 100644 --- a/packages/volto/src/helpers/Blocks/Blocks.js +++ b/packages/volto/src/helpers/Blocks/Blocks.js @@ -3,7 +3,15 @@ * @module helpers/Blocks */ -import { omit, without, endsWith, find, isObject, keys, merge } from 'lodash'; +import { + omit, + without, + endsWith, + find, + isObject, + keys, + merge, +} from 'lodash-es'; import move from 'lodash-move'; import { v4 as uuid } from 'uuid'; import config from '@plone/volto/registry'; diff --git a/packages/volto/src/helpers/Blocks/cloneBlocks.test.js b/packages/volto/src/helpers/Blocks/cloneBlocks.test.js index b50832f8de..a4fc994165 100644 --- a/packages/volto/src/helpers/Blocks/cloneBlocks.test.js +++ b/packages/volto/src/helpers/Blocks/cloneBlocks.test.js @@ -1,4 +1,4 @@ -import { cloneDeep } from 'lodash'; +import { cloneDeep } from 'lodash-es'; import { cloneBlocks } from './cloneBlocks'; describe('cloneBlocks', () => { diff --git a/packages/volto/src/helpers/Content/Content.js b/packages/volto/src/helpers/Content/Content.js index 84591b2f4a..53a57dffc2 100644 --- a/packages/volto/src/helpers/Content/Content.js +++ b/packages/volto/src/helpers/Content/Content.js @@ -3,7 +3,7 @@ * @module helpers/Content */ -import { omitBy, mapKeys, pickBy, map, keys, endsWith, find } from 'lodash'; +import { omitBy, mapKeys, pickBy, map, keys, endsWith, find } from 'lodash-es'; import config from '@plone/volto/registry'; /** diff --git a/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx b/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx index 5db6d15539..5dd937dc14 100644 --- a/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx +++ b/packages/volto/src/helpers/Extensions/withBlockSchemaEnhancer.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { defineMessages } from 'react-intl'; import { useIntl } from 'react-intl'; -import { find, isEmpty } from 'lodash'; +import { find, isEmpty } from 'lodash-es'; import config from '@plone/volto/registry'; import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils'; diff --git a/packages/volto/src/helpers/FormValidation/FormValidation.jsx b/packages/volto/src/helpers/FormValidation/FormValidation.jsx index 92dcdd7cee..12afb77345 100644 --- a/packages/volto/src/helpers/FormValidation/FormValidation.jsx +++ b/packages/volto/src/helpers/FormValidation/FormValidation.jsx @@ -1,4 +1,4 @@ -import { map, keys, intersection, isEmpty } from 'lodash'; +import { map, keys, intersection, isEmpty } from 'lodash-es'; import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels'; import config from '@plone/volto/registry'; import { toast } from 'react-toastify'; diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx index c0b5e5d634..9cd3cda447 100644 --- a/packages/volto/src/helpers/Html/Html.jsx +++ b/packages/volto/src/helpers/Html/Html.jsx @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Helmet from '@plone/volto/helpers/Helmet/Helmet'; import serialize from 'serialize-javascript'; -import { join } from 'lodash'; +import { join } from 'lodash-es'; import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass'; import { runtimeConfig } from '@plone/volto/runtime_config'; import config from '@plone/volto/registry'; @@ -136,7 +136,7 @@ class Html extends Component { /> )} {/* Add the crossorigin while in development */} - {extractor.getLinkElements().map((elem) => + {/* {extractor.getLinkElements().map((elem) => React.cloneElement(elem, { crossOrigin: process.env.NODE_ENV === 'production' ? undefined : 'true', @@ -146,10 +146,10 @@ class Html extends Component { ? 'prefetch' : elem.props.rel, }), - )} + )} */} {/* Styles in development are loaded with Webpack's style-loader, in production, they need to be static*/} - {process.env.NODE_ENV === 'production' ? ( + {/* {process.env.NODE_ENV === 'production' ? ( criticalCss ? ( <> + {/* Hydration error debugger overlay, to use in conjunction with */} + {/* https://github.com/BuilderIO/hydration-overlay/blob/main/README.md */} + {/* Uncomment to enable */} + + {/* Hydration error debugger overlay, to use in conjunction with */} {/* https://github.com/BuilderIO/hydration-overlay/blob/main/README.md */} {/* Uncomment to enable */} diff --git a/packages/volto/src/helpers/Site/index.js b/packages/volto/src/helpers/Site/index.js index 9cc76ab746..bb8dc951b3 100644 --- a/packages/volto/src/helpers/Site/index.js +++ b/packages/volto/src/helpers/Site/index.js @@ -11,7 +11,7 @@ const getSiteAsyncPropExtender = { dispatchActions.push({ key: GET_SITE, promise: ({ location, store: { dispatch } }) => - __SERVER__ && dispatch(getSite()), + import.meta.env.SSR && dispatch(getSite()), }); } return dispatchActions; diff --git a/packages/volto/src/helpers/Url/Url.js b/packages/volto/src/helpers/Url/Url.js index dd860cc328..7444a6b915 100644 --- a/packages/volto/src/helpers/Url/Url.js +++ b/packages/volto/src/helpers/Url/Url.js @@ -197,7 +197,7 @@ export function expandToBackendURL(path) { } let apiPath = ''; - if (settings.internalApiPath && __SERVER__) { + if (settings.internalApiPath && import.meta.env.SSR) { apiPath = settings.internalApiPath; } else if (settings.apiPath) { apiPath = settings.apiPath; diff --git a/packages/volto/src/init-store.js b/packages/volto/src/init-store.js deleted file mode 100644 index e3e72593fc..0000000000 --- a/packages/volto/src/init-store.js +++ /dev/null @@ -1,15 +0,0 @@ -import serialize from 'serialize-javascript'; - -const initialState = { - userSession: { - token: - 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTYwMDY1NTM1OSwiZnVsbG5hbWUiOm51bGx9.G7vqPxmRTQkJkLlRoUFZIJRJqdjjKcc9Ymacty9_h0g', - }, - intl: { - defaultLocale: 'en', - locale: 'en', - messages: {}, - }, -}; - -window.__data = serialize(initialState); diff --git a/packages/volto/src/middleware/api.js b/packages/volto/src/middleware/api.js index 0b02145f96..7d7ec4d36a 100644 --- a/packages/volto/src/middleware/api.js +++ b/packages/volto/src/middleware/api.js @@ -286,7 +286,7 @@ const apiMiddlewareFactory = }); // Rethrow the original exception on the client side only, // so it doesn't fall through to express on the server. - if (__CLIENT__) throw error; + if (!import.meta.env.SSR) throw error; } }, (error) => { diff --git a/packages/volto/src/middleware/userSessionReset.js b/packages/volto/src/middleware/userSessionReset.js index 34598d432c..a519afbee3 100644 --- a/packages/volto/src/middleware/userSessionReset.js +++ b/packages/volto/src/middleware/userSessionReset.js @@ -12,7 +12,7 @@ const userSessionReset = switch (action.type) { case LOCATION_CHANGE: - if (action.request?.subrequest || __SERVER__) { + if (action.request?.subrequest || import.meta.env.SSR) { return next(action); } From 4bec7e2cb45d07e2f4bb1e236fd0949014957934 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Thu, 19 Sep 2024 19:58:54 +0200 Subject: [PATCH 12/40] Middlewares working, addded a custom middleware for support seamless mode --- packages/registry/package.json | 4 +- packages/volto/src/config/networking.js | 50 +++++++++++++++++++ packages/volto/src/config/server.js | 1 + packages/volto/src/entry-server.tsx | 10 +++- .../volto/src/express-middleware/devproxy.js | 31 ++++++++---- .../volto/src/express-middleware/files.js | 2 +- .../volto/src/express-middleware/images.js | 2 +- .../volto/src/express-middleware/server.js | 41 +++++++++++++++ packages/volto/src/vite-server.js | 28 ++++++++++- packages/volto/vite.config.js | 13 ++--- 10 files changed, 160 insertions(+), 22 deletions(-) create mode 100644 packages/volto/src/config/networking.js create mode 100644 packages/volto/src/express-middleware/server.js diff --git a/packages/registry/package.json b/packages/registry/package.json index 9e08942bb6..521a1dc112 100644 --- a/packages/registry/package.json +++ b/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" } }, diff --git a/packages/volto/src/config/networking.js b/packages/volto/src/config/networking.js new file mode 100644 index 0000000000..03b0261c76 --- /dev/null +++ b/packages/volto/src/config/networking.js @@ -0,0 +1,50 @@ +import { parse as parseUrl } from 'url'; +const __DEVELOPMENT__ = true; + +const host = process.env.HOST || 'localhost'; +const port = process.env.PORT || '3000'; + +const apiPath = + process.env.VITE_API_PATH || + (__DEVELOPMENT__ ? `http://${host}:${port}` : ''); + +const getServerURL = (url) => { + if (!url) return; + const apiPathURL = parseUrl(url); + return `${apiPathURL.protocol}//${apiPathURL.hostname}${ + apiPathURL.port ? `:${apiPathURL.port}` : '' + }`; +}; + +// Sensible defaults for publicURL +// if VITE_PUBLIC_URL is present, use it +// if in DEV, use the host/port combination by default +// if in PROD, assume it's VITE_API_PATH server name (no /api or alikes) or fallback +// to DEV settings if VITE_API_PATH is not present +const publicURL = + process.env.VITE_PUBLIC_URL || + (__DEVELOPMENT__ + ? `http://${host}:${port}` + : getServerURL(process.env.VITE_API_PATH) || `http://${host}:${port}`); + +const networking = { + host, + port, + apiPath, + publicURL, + // Internal proxy to bypass CORS *while developing*. NOT intended for production use. + // In production is recommended you use a Seamless mode deployment using a web server in + // front of both the frontend and the backend so you can bypass CORS safely. + // https://6.docs.plone.org/volto/deploying/seamless-mode.html + devProxyToApiPath: + process.env.VITE_DEV_PROXY_API_PATH || + process.env.VITE_INTERNAL_API_PATH || + process.env.VITE_API_PATH || + 'http://localhost:8080/Plone', // Set it to '' for disabling the proxy + // proxyRewriteTarget Set it for set a custom target for the proxy or override the internal VHM rewrite + // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api' + // proxyRewriteTarget: 'https://myvoltositeinproduction.com' + proxyRewriteTarget: process.env.VITE_PROXY_REWRITE_TARGET || undefined, +}; + +export default networking; diff --git a/packages/volto/src/config/server.js b/packages/volto/src/config/server.js index 34fcd3dfe1..170a8f00bd 100644 --- a/packages/volto/src/config/server.js +++ b/packages/volto/src/config/server.js @@ -37,4 +37,5 @@ const settings = { ], }; +export { settings as serverSettings }; export default settings; diff --git a/packages/volto/src/entry-server.tsx b/packages/volto/src/entry-server.tsx index ce11094788..b73ff1e049 100644 --- a/packages/volto/src/entry-server.tsx +++ b/packages/volto/src/entry-server.tsx @@ -53,6 +53,10 @@ function reactIntlErrorHandler(error) { debug('i18n')(error); } +export async function getConfig() { + return config; +} + export async function render(opts: { url: string; head: string; @@ -61,6 +65,10 @@ export async function render(opts: { }) { const { req, res } = opts; + // Reconcile seamless mode apiPath with the config + config.settings.apiPath = res.locals.detectedHost; + config.settings.publicURL = res.locals.detectedHost; + function errorHandler(error) { const errorPage = ( @@ -124,7 +132,7 @@ export async function render(opts: { const url = req.originalUrl || req.url; // const location = new URL(url, `http://${req.headers.host}`); - const location = parseUrl(url); + const location = parseUrl(url); // TODO: improve the parsing with above? loadOnServer({ store, location, routes, api }) .then(() => { const initialLang = diff --git a/packages/volto/src/express-middleware/devproxy.js b/packages/volto/src/express-middleware/devproxy.js index 1f0a6273aa..4db337857f 100644 --- a/packages/volto/src/express-middleware/devproxy.js +++ b/packages/volto/src/express-middleware/devproxy.js @@ -1,7 +1,7 @@ // Internal proxy to bypass CORS while developing. import express from 'express'; -import config from '@plone/volto/registry'; +import networking from '../config/networking.js'; import { createProxyMiddleware, responseInterceptor, @@ -11,20 +11,21 @@ import { parse as parseUrl } from 'url'; const filter = function (pathname, req) { // This is the proxy to the API in case the accept header is 'application/json' - return config.settings.devProxyToApiPath && pathname.startsWith('/++api++'); + return networking.devProxyToApiPath && pathname.startsWith('/++api++'); }; let _env = null; // the config is not available at the middleware creation time, so it needs to // read/cache the global configuration on first request. +// TODO: remove since it's now obsolete function getEnv() { if (_env) { return _env; } - const apiPathURL = parseUrl(config.settings.apiPath); - const proxyURL = parseUrl(config.settings.devProxyToApiPath); + const apiPathURL = parseUrl(networking.apiPath); + const proxyURL = parseUrl(networking.devProxyToApiPath); const serverURL = `${proxyURL.protocol}//${proxyURL.host}`; const instancePath = proxyURL.pathname; @@ -37,8 +38,12 @@ function getEnv() { return _env; } -export default function devProxyMiddleware() { - const middleware = express.Router(); +function devProxyMiddlewareFn(req, res, next) { + const apiPathURL = parseUrl(res.locals.detectedHost || networking.apiPath); + const proxyURL = parseUrl(networking.devProxyToApiPath); + const serverURL = `${proxyURL.protocol}//${proxyURL.host}`; + const instancePath = proxyURL.pathname; + const devProxy = createProxyMiddleware(filter, { selfHandleResponse: true, onProxyRes: responseInterceptor( @@ -68,13 +73,13 @@ export default function devProxyMiddleware() { }, // target: serverURL, router: (req) => { - const { serverURL } = getEnv(); + // const { serverURL } = getEnv(); return serverURL; }, pathRewrite: (path, req) => { - const { apiPathURL, instancePath } = getEnv(); + // const { apiPathURL, instancePath } = getEnv(); const target = - config.settings.proxyRewriteTarget || + networking.proxyRewriteTarget || `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${ apiPathURL.hostname }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`; @@ -88,7 +93,13 @@ export default function devProxyMiddleware() { }), }); - middleware.all('*', devProxy); + return devProxy(req, res, next); +} + +export default function devProxyMiddleware() { + const middleware = express.Router(); + + middleware.all('*', devProxyMiddlewareFn); middleware.id = 'devProxy'; return middleware; diff --git a/packages/volto/src/express-middleware/files.js b/packages/volto/src/express-middleware/files.js index f13708a504..2698667dd9 100644 --- a/packages/volto/src/express-middleware/files.js +++ b/packages/volto/src/express-middleware/files.js @@ -1,5 +1,5 @@ import express from 'express'; -import { getAPIResourceWithAuth } from '@plone/volto/helpers'; +import { getAPIResourceWithAuth } from '../helpers/Api/APIResourceWithAuth'; const HEADERS = [ 'accept-ranges', diff --git a/packages/volto/src/express-middleware/images.js b/packages/volto/src/express-middleware/images.js index 85ab829341..be5e450b94 100644 --- a/packages/volto/src/express-middleware/images.js +++ b/packages/volto/src/express-middleware/images.js @@ -1,5 +1,5 @@ import express from 'express'; -import { getAPIResourceWithAuth } from '@plone/volto/helpers'; +import { getAPIResourceWithAuth } from '../helpers/Api/APIResourceWithAuth'; const HEADERS = [ 'content-type', diff --git a/packages/volto/src/express-middleware/server.js b/packages/volto/src/express-middleware/server.js new file mode 100644 index 0000000000..8150972a24 --- /dev/null +++ b/packages/volto/src/express-middleware/server.js @@ -0,0 +1,41 @@ +// import imagesMiddleware from './images.js'; +// import filesMiddleware from './files.js'; +// import robotstxtMiddleware from './robotstxt.js'; +// import okMiddleware from './ok.js'; +// import sitemapMiddleware from './sitemap.js'; +// import staticsMiddleware from './static.js'; +import devProxyMiddleware from './devproxy.js'; + +const settings = { + expressMiddleware: [ + devProxyMiddleware(), + // filesMiddleware(), + // imagesMiddleware(), + // robotstxtMiddleware(), + // okMiddleware(), + // sitemapMiddleware(), + // staticsMiddleware(), + ], + criticalCssPath: 'public/critical.css', + readCriticalCss: null, // so it will be defaultReadCriticalCss + staticFiles: [ + { + id: 'root_static', + match: /^\/static\/.*/, + headers: { + // stable resources never change. 31536000 seconds == 365 days + 'Cache-Control': 'public, max-age=31536000', + }, + }, + { + id: 'all', + match: /.*/, + headers: { + 'Cache-Control': 'public, max-age=60', + }, + }, + ], +}; + +export { settings as serverSettings }; +export default settings; diff --git a/packages/volto/src/vite-server.js b/packages/volto/src/vite-server.js index 7923f4cb18..e07b5664fe 100644 --- a/packages/volto/src/vite-server.js +++ b/packages/volto/src/vite-server.js @@ -3,6 +3,7 @@ import express from 'express'; import getPort, { portNumbers } from 'get-port'; import dns from 'dns'; import cookiesMiddleware from 'universal-cookie-express'; +import { serverSettings } from './express-middleware/server.js'; const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD; @@ -53,6 +54,26 @@ export async function createServer( app.use('/', sirv('./dist/client', { extensions: [] })); } + // This is the loader of the former "Seamless" mode parameters from the headers + app.all('*', function NetworkParamsDetection(req, res, next) { + if (!process.env.VITE_API_PATH && req.headers.host) { + res.locals.detectedHost = `${ + req.headers['x-forwarded-proto'] || req.protocol + }://${req.headers.host}`; + // config.settings.apiPath = res.locals.detectedHost; + // config.settings.publicURL = res.locals.detectedHost; + } + + next(); + }); + + // Loads the Express server middleware from the settings. + // We no longer load them in the server file, since it's an Express-only config + // we avoid to have to exclude it explicitly from the build (and all the deps do + // not get in the server build either) + const middleware = (serverSettings.expressMiddleware || []).filter((m) => m); + if (middleware.length) app.use('/', middleware); + app.use('*', async (req, res) => { try { const url = req.originalUrl; @@ -86,7 +107,12 @@ export async function createServer( })(); console.log('Rendering: ', url, '...'); - entry.render({ req, res, url, head: isProd ? viteHead : '' }); + entry.render({ + req, + res, + url, + head: isProd ? viteHead : '', + }); } catch (e) { !isProd && vite.ssrFixStacktrace(e); console.log(e.stack); diff --git a/packages/volto/vite.config.js b/packages/volto/vite.config.js index bfb401d6e6..1bf4ba9f46 100644 --- a/packages/volto/vite.config.js +++ b/packages/volto/vite.config.js @@ -39,12 +39,13 @@ export default defineConfig({ }), react(), ], - server: { - port: 3000, - proxy: { - '/++api++/': 'http://localhost:8080/Plone', - }, - }, + // server: { + // port: 3000, + // proxy: { + // '/++api++/': + // 'http://localhost:8080/VirtualHostBase/http/localhost:3000/Plone/++api++/VirtualHostRoot', + // }, + // }, resolve: { alias: [ { find: /^~/, replacement: '' }, From d7f580e79dd22a9f6ace2db91c275cb6f5493a3b Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Thu, 19 Sep 2024 20:15:32 +0200 Subject: [PATCH 13/40] Replace hot module with Vite counterparts --- .../volto/src/helpers/AuthToken/AuthToken.js | 17 ++++++++--------- packages/volto/src/index.js | 7 ------- .../{start-server.js => razzle-start-server.js} | 0 3 files changed, 8 insertions(+), 16 deletions(-) delete mode 100644 packages/volto/src/index.js rename packages/volto/src/{start-server.js => razzle-start-server.js} (100%) diff --git a/packages/volto/src/helpers/AuthToken/AuthToken.js b/packages/volto/src/helpers/AuthToken/AuthToken.js index 8af63bc368..111770c627 100644 --- a/packages/volto/src/helpers/AuthToken/AuthToken.js +++ b/packages/volto/src/helpers/AuthToken/AuthToken.js @@ -49,10 +49,9 @@ export function persistAuthToken(store, req) { if ( // TODO: how Vite handles the hotreload? - // module.hot && - // module.hot.data && - // module.hot.data.reloaded && - false && + import.meta.hot && + import.meta.hot.data && + import.meta.hot.data.reloaded && previousValue ) { currentValue = previousValue; @@ -104,8 +103,8 @@ export function persistAuthToken(store, req) { handleChange(true); } -// if (module?.hot) { -// module.hot.dispose((data) => { -// data.reloaded = true; -// }); -// } +if (import.meta.hot) { + import.meta.hot.dispose((data) => { + data.reloaded = true; + }); +} diff --git a/packages/volto/src/index.js b/packages/volto/src/index.js deleted file mode 100644 index e4ca8dae62..0000000000 --- a/packages/volto/src/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import start from './start-server'; - -const reloadServer = start(); - -if (module.hot) { - reloadServer(); -} diff --git a/packages/volto/src/start-server.js b/packages/volto/src/razzle-start-server.js similarity index 100% rename from packages/volto/src/start-server.js rename to packages/volto/src/razzle-start-server.js From f2d7ea454c51f970d0cdd74dd4a65575594c0302 Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Fri, 20 Sep 2024 14:29:42 +0200 Subject: [PATCH 14/40] Better implementation of the Express server Volto config load --- packages/volto/src/config/index.js | 20 +++----- packages/volto/src/config/server.js | 26 +++++----- packages/volto/src/entry-server.tsx | 9 ++-- .../volto/src/express-middleware/devproxy.js | 50 +++++++++---------- packages/volto/src/vite-server.js | 20 +++++--- 5 files changed, 63 insertions(+), 62 deletions(-) diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js index 226173efb1..dbdad7c2ee 100644 --- a/packages/volto/src/config/index.js +++ b/packages/volto/src/config/index.js @@ -62,12 +62,9 @@ const publicURL = ? `http://${host}:${port}` : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`); -const serverConfig = {}; -// Move this to the server build only -// const serverConfig = -// import.meta.env.SSR -// ? require('./server').default -// : {}; +const serverConfig = import.meta.env.SSR + ? (await import('./server')).default + : {}; let config = { settings: { @@ -262,11 +259,8 @@ Object.entries(slots).forEach(([slotName, components]) => { registerValidators(ConfigRegistry); -applyAddonConfiguration(ConfigRegistry); +const currentConfig = applyAddonConfiguration(ConfigRegistry); -// [Vite] This is needed to comply with the Volto add-on configuration. -// TODO: In Volto 18, projectless builds this won't be needed anymore. -// TODO: To deprecate in Volto 19. -export default function applyConfig(config) { - return config; -} +// [Vite] This is required to pass the evaluated config to the Express Server +// not as an import side-effect but as a return value. +export { currentConfig }; diff --git a/packages/volto/src/config/server.js b/packages/volto/src/config/server.js index 170a8f00bd..74019354ed 100644 --- a/packages/volto/src/config/server.js +++ b/packages/volto/src/config/server.js @@ -1,20 +1,20 @@ -import imagesMiddleware from '@plone/volto/express-middleware/images'; -import filesMiddleware from '@plone/volto/express-middleware/files'; -import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt'; -import okMiddleware from '@plone/volto/express-middleware/ok'; -import sitemapMiddleware from '@plone/volto/express-middleware/sitemap'; -import staticsMiddleware from '@plone/volto/express-middleware/static'; -import devProxyMiddleware from '@plone/volto/express-middleware/devproxy'; +// import imagesMiddleware from '@plone/volto/express-middleware/images'; +// import filesMiddleware from '@plone/volto/express-middleware/files'; +// import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt'; +// import okMiddleware from '@plone/volto/express-middleware/ok'; +// import sitemapMiddleware from '@plone/volto/express-middleware/sitemap'; +// import staticsMiddleware from '@plone/volto/express-middleware/static'; +import devProxyMiddleware from '../express-middleware/devproxy'; const settings = { expressMiddleware: [ devProxyMiddleware(), - filesMiddleware(), - imagesMiddleware(), - robotstxtMiddleware(), - okMiddleware(), - sitemapMiddleware(), - staticsMiddleware(), + // filesMiddleware(), + // imagesMiddleware(), + // robotstxtMiddleware(), + // okMiddleware(), + // sitemapMiddleware(), + // staticsMiddleware(), ], criticalCssPath: 'public/critical.css', readCriticalCss: null, // so it will be defaultReadCriticalCss diff --git a/packages/volto/src/entry-server.tsx b/packages/volto/src/entry-server.tsx index b73ff1e049..334578d20f 100644 --- a/packages/volto/src/entry-server.tsx +++ b/packages/volto/src/entry-server.tsx @@ -65,9 +65,12 @@ export async function render(opts: { }) { const { req, res } = opts; - // Reconcile seamless mode apiPath with the config - config.settings.apiPath = res.locals.detectedHost; - config.settings.publicURL = res.locals.detectedHost; + // Sync the config object with the values coming from the Express server + // detected host from headers + if (!process.env.VITE_API_PATH && req.headers.host) { + config.settings.apiPath = res.locals.detectedHost; + config.settings.publicURL = res.locals.detectedHost; + } function errorHandler(error) { const errorPage = ( diff --git a/packages/volto/src/express-middleware/devproxy.js b/packages/volto/src/express-middleware/devproxy.js index 4db337857f..8dcfe67cc1 100644 --- a/packages/volto/src/express-middleware/devproxy.js +++ b/packages/volto/src/express-middleware/devproxy.js @@ -1,49 +1,47 @@ // Internal proxy to bypass CORS while developing. import express from 'express'; -import networking from '../config/networking.js'; import { createProxyMiddleware, responseInterceptor, } from 'http-proxy-middleware'; import querystring from 'querystring'; -import { parse as parseUrl } from 'url'; -const filter = function (pathname, req) { - // This is the proxy to the API in case the accept header is 'application/json' - return networking.devProxyToApiPath && pathname.startsWith('/++api++'); -}; - -let _env = null; +// let _env = null; // the config is not available at the middleware creation time, so it needs to // read/cache the global configuration on first request. // TODO: remove since it's now obsolete -function getEnv() { - if (_env) { - return _env; - } +// function getEnv() { +// if (_env) { +// return _env; +// } - const apiPathURL = parseUrl(networking.apiPath); - const proxyURL = parseUrl(networking.devProxyToApiPath); - const serverURL = `${proxyURL.protocol}//${proxyURL.host}`; - const instancePath = proxyURL.pathname; +// const apiPathURL = parseUrl(networking.apiPath); +// const proxyURL = parseUrl(networking.devProxyToApiPath); +// const serverURL = `${proxyURL.protocol}//${proxyURL.host}`; +// const instancePath = proxyURL.pathname; - _env = { - apiPathURL, - serverURL, - instancePath, - }; +// _env = { +// apiPathURL, +// serverURL, +// instancePath, +// }; - return _env; -} +// return _env; +// } function devProxyMiddlewareFn(req, res, next) { - const apiPathURL = parseUrl(res.locals.detectedHost || networking.apiPath); - const proxyURL = parseUrl(networking.devProxyToApiPath); + const apiPathURL = new URL(res.locals.detectedHost || res.locals.apiPath); + const proxyURL = new URL(res.locals.devProxyToApiPath); const serverURL = `${proxyURL.protocol}//${proxyURL.host}`; const instancePath = proxyURL.pathname; + const filter = function (pathname, req) { + // This is the proxy to the API in case the accept header is 'application/json' + return res.locals.devProxyToApiPath && pathname.startsWith('/++api++'); + }; + const devProxy = createProxyMiddleware(filter, { selfHandleResponse: true, onProxyRes: responseInterceptor( @@ -79,7 +77,7 @@ function devProxyMiddlewareFn(req, res, next) { pathRewrite: (path, req) => { // const { apiPathURL, instancePath } = getEnv(); const target = - networking.proxyRewriteTarget || + res.locals.proxyRewriteTarget || `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${ apiPathURL.hostname }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`; diff --git a/packages/volto/src/vite-server.js b/packages/volto/src/vite-server.js index e07b5664fe..e4b4a1c0d5 100644 --- a/packages/volto/src/vite-server.js +++ b/packages/volto/src/vite-server.js @@ -54,24 +54,30 @@ export async function createServer( app.use('/', sirv('./dist/client', { extensions: [] })); } + // Load the current config for the Express server to consume it + const currentConfig = (await vite.ssrLoadModule('/src/config')).currentConfig; + // console.log(currentConfig); + // This is the loader of the former "Seamless" mode parameters from the headers - app.all('*', function NetworkParamsDetection(req, res, next) { + app.all('*', async function loadVoltoConfig(req, res, next) { + // const config = await vite.ssrLoadModule('/src/config'); + res.locals.apiPath = currentConfig.settings.apiPath; + res.locals.devProxyToApiPath = currentConfig.settings.devProxyToApiPath; + res.locals.proxyRewriteTarget = currentConfig.settings.proxyRewriteTarget; + if (!process.env.VITE_API_PATH && req.headers.host) { res.locals.detectedHost = `${ req.headers['x-forwarded-proto'] || req.protocol }://${req.headers.host}`; - // config.settings.apiPath = res.locals.detectedHost; - // config.settings.publicURL = res.locals.detectedHost; } next(); }); // Loads the Express server middleware from the settings. - // We no longer load them in the server file, since it's an Express-only config - // we avoid to have to exclude it explicitly from the build (and all the deps do - // not get in the server build either) - const middleware = (serverSettings.expressMiddleware || []).filter((m) => m); + const middleware = ( + currentConfig.settings.serverConfig.expressMiddleware || [] + ).filter((m) => m); if (middleware.length) app.use('/', middleware); app.use('*', async (req, res) => { From 02caa233c31742c7b733db5970cfde44c9e4f37c Mon Sep 17 00:00:00 2001 From: Victor Fernandez de Alba Date: Fri, 20 Sep 2024 18:04:25 +0200 Subject: [PATCH 15/40] Polish here and there --- .../volto/src/express-middleware/server.js | 41 ------------------- packages/volto/src/helpers/Html/Html.jsx | 2 +- packages/volto/src/vite-server.js | 1 - pnpm-lock.yaml | 2 +- 4 files changed, 2 insertions(+), 44 deletions(-) delete mode 100644 packages/volto/src/express-middleware/server.js diff --git a/packages/volto/src/express-middleware/server.js b/packages/volto/src/express-middleware/server.js deleted file mode 100644 index 8150972a24..0000000000 --- a/packages/volto/src/express-middleware/server.js +++ /dev/null @@ -1,41 +0,0 @@ -// import imagesMiddleware from './images.js'; -// import filesMiddleware from './files.js'; -// import robotstxtMiddleware from './robotstxt.js'; -// import okMiddleware from './ok.js'; -// import sitemapMiddleware from './sitemap.js'; -// import staticsMiddleware from './static.js'; -import devProxyMiddleware from './devproxy.js'; - -const settings = { - expressMiddleware: [ - devProxyMiddleware(), - // filesMiddleware(), - // imagesMiddleware(), - // robotstxtMiddleware(), - // okMiddleware(), - // sitemapMiddleware(), - // staticsMiddleware(), - ], - criticalCssPath: 'public/critical.css', - readCriticalCss: null, // so it will be defaultReadCriticalCss - staticFiles: [ - { - id: 'root_static', - match: /^\/static\/.*/, - headers: { - // stable resources never change. 31536000 seconds == 365 days - 'Cache-Control': 'public, max-age=31536000', - }, - }, - { - id: 'all', - match: /.*/, - headers: { - 'Cache-Control': 'public, max-age=60', - }, - }, - ], -}; - -export { settings as serverSettings }; -export default settings; diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx index e546df8d6d..ebccb9a980 100644 --- a/packages/volto/src/helpers/Html/Html.jsx +++ b/packages/volto/src/helpers/Html/Html.jsx @@ -206,7 +206,7 @@ class Html extends Component { {/* Hydration error debugger overlay, to use in conjunction with */} {/* https://github.com/BuilderIO/hydration-overlay/blob/main/README.md */} {/* Uncomment to enable */} - - + diff --git a/packages/volto/package.json b/packages/volto/package.json index cea6c8e0ba..be024e84ad 100644 --- a/packages/volto/package.json +++ b/packages/volto/package.json @@ -68,7 +68,8 @@ "dev:server:debug": "NODE_INSPECT_RESUME_ON_START=1 node inspect src/vite-server.js", "build:client": "vite build --ssrManifest --outDir dist/client", "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server", - "start:prod": "NODE_ENV=production node server.js" + "start:prod": "NODE_ENV=production node server.js", + "start:prod:debug": "NODE_INSPECT_RESUME_ON_START=1 NODE_ENV=production node --inspect-brk server.js" }, "bundlewatch": { "files": [ diff --git a/packages/volto/src/vite-server.js b/packages/volto/server.js similarity index 56% rename from packages/volto/src/vite-server.js rename to packages/volto/server.js index cad2e1fd42..876e45320e 100644 --- a/packages/volto/src/vite-server.js +++ b/packages/volto/server.js @@ -3,6 +3,7 @@ import express from 'express'; import getPort, { portNumbers } from 'get-port'; import dns from 'dns'; import cookiesMiddleware from 'universal-cookie-express'; +import { JSDOM } from 'jsdom'; const isTest = process.env.NODE_ENV === 'test' || !!process.env.VITE_TEST_BUILD; @@ -24,42 +25,51 @@ export async function createServer( * @type {import('vite').ViteDevServer} */ let vite; - if (!isProd) { - vite = await ( - await import('vite') - ).createServer({ - root, - logLevel: isTest ? 'error' : 'info', - server: { - middlewareMode: true, - watch: { - // During tests we edit the files too fast and sometimes chokidar - // misses change events, so enforce polling for consistency - usePolling: true, - interval: 100, - }, - hmr: { - port: hmrPort, - }, + vite = await ( + await import('vite') + ).createServer({ + root, + logLevel: isTest ? 'error' : 'info', + server: { + middlewareMode: true, + watch: { + // During tests we edit the files too fast and sometimes chokidar + // misses change events, so enforce polling for consistency + usePolling: true, + interval: 100, + }, + hmr: { + port: hmrPort, }, - appType: 'custom', - }); + }, + appType: 'custom', + }); + if (!isProd) { // use vite's connect instance as middleware app.use(vite.middlewares); - app.use(cookiesMiddleware()); } else { const sirv = (await import('sirv')).default; app.use((await import('compression')).default()); app.use('/', sirv('./dist/client', { extensions: [] })); } + app.use(cookiesMiddleware()); + // Load the current config for the Express server to consume it - const currentConfig = (await vite.ssrLoadModule('/src/config')).currentConfig; + // const currentConfig = (await vite.ssrLoadModule('/src/config')).currentConfig; // console.log(currentConfig); + const entry = await (async () => { + if (!isProd) { + return vite.ssrLoadModule('/src/entry-server.tsx'); + } else { + return import('./dist/server/entry-server.js'); + } + })(); + // Loads the Express server middleware from the settings. const middleware = ( - currentConfig.settings.serverConfig.expressMiddleware || [] + entry.getConfig().settings?.serverConfig?.expressMiddleware || [] ).filter((m) => m); if (middleware.length) app.use('/', middleware); @@ -74,7 +84,7 @@ export async function createServer( return; } - // Extract the head from vite's index transformation hook + // Extract the head from vite's index transformation hook (while in dev) let viteHead = !isProd ? await vite.transformIndexHtml( url, @@ -87,20 +97,40 @@ export async function createServer( viteHead.indexOf(''), ); - const entry = await (async () => { - if (!isProd) { - return vite.ssrLoadModule('/src/entry-server.tsx'); - } else { - return import('./dist/server/entry-server.js'); - } - })(); + // Parse the HTML string with jsdom + const dom = new JSDOM(viteHead); + const document = dom.window.document; + + // Extract script elements + const scripts = Array.from(document.querySelectorAll('script')).map( + (script) => ({ + type: script.getAttribute('type'), + crossorigin: script.getAttribute('crossorigin'), + src: script.getAttribute('src'), + }), + ); + + // Extract link elements + const links = Array.from(document.querySelectorAll('link')).map( + (link) => ({ + rel: link.getAttribute('rel'), + crossorigin: link.getAttribute('crossorigin'), + href: link.getAttribute('href'), + }), + ); + + // Combine the results into a single object + const headElements = { + scripts, + links, + }; console.log('Rendering: ', url, '...'); entry.render({ req, res, url, - head: isProd ? viteHead : '', + head: isProd ? headElements : '', }); } catch (e) { !isProd && vite.ssrFixStacktrace(e); diff --git a/packages/volto/src/components/theme/ConnectionRefused/ConnectionRefused.jsx b/packages/volto/src/components/theme/ConnectionRefused/ConnectionRefused.jsx index 9932362035..8441c744ad 100644 --- a/packages/volto/src/components/theme/ConnectionRefused/ConnectionRefused.jsx +++ b/packages/volto/src/components/theme/ConnectionRefused/ConnectionRefused.jsx @@ -42,8 +42,8 @@ const ConnectionRefused = () => ( }} >

)} diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js index 170637c569..3db198bbc3 100644 --- a/packages/volto/src/config/index.js +++ b/packages/volto/src/config/index.js @@ -39,7 +39,7 @@ const host = process.env.HOST || 'localhost'; const port = process.env.PORT || '3000'; const apiPath = - process.env.RAZZLE_API_PATH || + process.env.VITE_API_PATH || (__DEVELOPMENT__ ? `http://${host}:${port}` : ''); const getServerURL = (url) => { @@ -51,19 +51,15 @@ const getServerURL = (url) => { }; // Sensible defaults for publicURL -// if RAZZLE_PUBLIC_URL is present, use it +// if VITE_PUBLIC_URL is present, use it // if in DEV, use the host/port combination by default -// if in PROD, assume it's RAZZLE_API_PATH server name (no /api or alikes) or fallback -// to DEV settings if RAZZLE_API_PATH is not present +// if in PROD, assume it's VITE_API_PATH server name (no /api or alikes) or fallback +// to DEV settings if VITE_API_PATH is not present const publicURL = - process.env.RAZZLE_PUBLIC_URL || + process.env.VITE_PUBLIC_URL || (__DEVELOPMENT__ ? `http://${host}:${port}` - : getServerURL(process.env.RAZZLE_API_PATH) || `http://${host}:${port}`); - -const serverConfig = import.meta.env.SSR - ? (await import('./server')).default - : {}; + : getServerURL(process.env.VITE_API_PATH) || `http://${host}:${port}`); let config = { settings: { @@ -94,21 +90,21 @@ let config = { // front of both the frontend and the backend so you can bypass CORS safely. // https://6.docs.plone.org/volto/deploying/seamless-mode.html devProxyToApiPath: - process.env.RAZZLE_DEV_PROXY_API_PATH || - process.env.RAZZLE_INTERNAL_API_PATH || - process.env.RAZZLE_API_PATH || + process.env.VITE_DEV_PROXY_API_PATH || + process.env.VITE_INTERNAL_API_PATH || + process.env.VITE_API_PATH || 'http://localhost:8080/Plone', // Set it to '' for disabling the proxy // proxyRewriteTarget Set it for set a custom target for the proxy or override the internal VHM rewrite // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api' // proxyRewriteTarget: 'https://myvoltositeinproduction.com' - proxyRewriteTarget: process.env.RAZZLE_PROXY_REWRITE_TARGET || undefined, - // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8000', // for Volto reference - // apiPath: process.env.RAZZLE_API_PATH || 'http://localhost:8081/db/web', // for guillotina + proxyRewriteTarget: process.env.VITE_PROXY_REWRITE_TARGET || undefined, + // apiPath: process.env.VITE_API_PATH || 'http://localhost:8000', // for Volto reference + // apiPath: process.env.VITE_API_PATH || 'http://localhost:8081/db/web', // for guillotina actions_raising_api_errors: ['GET_CONTENT', 'UPDATE_CONTENT'], - internalApiPath: process.env.RAZZLE_INTERNAL_API_PATH || undefined, - websockets: process.env.RAZZLE_WEBSOCKETS || false, + internalApiPath: process.env.VITE_INTERNAL_API_PATH || undefined, + websockets: process.env.VITE_WEBSOCKETS || false, // TODO: legacyTraverse to be removed when the use of the legacy traverse is deprecated. - legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false, + legacyTraverse: process.env.VITE_LEGACY_TRAVERSE || false, cookieExpires: 15552000, //in seconds. Default is 6 month (15552000) nonContentRoutes, imageObjects: ['Image'], @@ -123,7 +119,6 @@ let config = { supportedLanguages: ['en'], defaultLanguage: 'en', navDepth: 1, - expressMiddleware: serverConfig.expressMiddleware, // BBB defaultBlockType: 'slate', verticalFormTabs: false, useEmailAsLogin: false, @@ -146,7 +141,6 @@ let config = { appExtras: [], maxResponseSize: 2000000000, // This is superagent default (200 mb) maxFileUploadSize: null, - serverConfig, storeExtenders: [], showTags: true, controlpanels: [], diff --git a/packages/volto/src/entry-client.tsx b/packages/volto/src/entry-client.tsx index 4356d65c05..8984f62ae2 100644 --- a/packages/volto/src/entry-client.tsx +++ b/packages/volto/src/entry-client.tsx @@ -53,11 +53,11 @@ if (window.env.publicURL) { // This is specially important when the hydration of the store coming from the first SSR // request happens, since there all the server URLs might be the internalApiPath ones, // and the client should be able to take care of them properly. -if (window.env.RAZZLE_INTERNAL_API_PATH) { - config.settings.internalApiPath = window.env.RAZZLE_INTERNAL_API_PATH; +if (window.env.VITE_INTERNAL_API_PATH) { + config.settings.internalApiPath = window.env.VITE_INTERNAL_API_PATH; } // TODO: To be removed when the use of the legacy traverse is deprecated. -if (window.env.RAZZLE_LEGACY_TRAVERSE) { +if (window.env.VITE_LEGACY_TRAVERSE) { config.settings.legacyTraverse = true; } diff --git a/packages/volto/src/entry-server.tsx b/packages/volto/src/entry-server.tsx index 334578d20f..4d341091dd 100644 --- a/packages/volto/src/entry-server.tsx +++ b/packages/volto/src/entry-server.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import ReactDOMServer from 'react-dom/server'; import { ServerResponse } from 'http'; import express from 'express'; -import { TitleWidget, Moment } from './test_loadable'; +// import { TitleWidget, Moment } from './test_loadable'; // import './config'; // import { CookiesProvider } from 'react-cookie'; import { parse as parseUrl } from 'url'; @@ -33,6 +33,7 @@ import debug from 'debug'; import userSession from '@plone/volto/reducers/userSession/userSession'; import config from '@plone/volto/registry'; +import serverConfig from './config/server'; // index.js // import './fetch-polyfill'; @@ -53,7 +54,8 @@ function reactIntlErrorHandler(error) { debug('i18n')(error); } -export async function getConfig() { +export function getConfig() { + config.settings.serverConfig = serverConfig; return config; } @@ -224,6 +226,7 @@ export async function render(opts: { // criticalCss={readCriticalCss(req)} apiPath={res.locals.detectedHost || config.settings.apiPath} publicURL={res.locals.detectedHost || config.settings.publicURL} + headElements={opts.head} />, )} `, diff --git a/packages/volto/src/helpers/Html/Html.jsx b/packages/volto/src/helpers/Html/Html.jsx index ebccb9a980..1f59dc0d98 100644 --- a/packages/volto/src/helpers/Html/Html.jsx +++ b/packages/volto/src/helpers/Html/Html.jsx @@ -83,7 +83,8 @@ class Html extends Component { * @returns {string} Markup for the component. */ render() { - const { markup, store, criticalCss, apiPath, publicURL } = this.props; + const { markup, store, criticalCss, apiPath, publicURL, headElements } = + this.props; const head = Helmet.rewind(); const bodyClass = join(BodyClass.rewind(), ' '); const htmlAttributes = head.htmlAttributes.toComponent(); @@ -168,6 +169,28 @@ class Html extends Component { extractor.getStyleElements() ) ) : undefined} */} + {import.meta.env.PROD ? ( + <> + {headElements.scripts.map((elem) => { + return ( + + ); + })} + {headElements.links.map((elem) => { + return ( + + ); + })} + + ) : undefined}