Change root imports to @plone/volto.

Replace all ``~`` root imports with the ``@plone/volto`` alias and remove related dev dependencies.
This change allows Volto to be defined as a importable module dependency in another library where the root is different.

.eslintrc

@@ -33,9 +33,6 @@
       "alias": {
         "map": [["@plone/volto", "./src"]],
         "extensions": [".js", ".jsx", ".json"]
-      },
-      "babel-plugin-root-import": {
-        "rootPathSuffix": "src"
       }
     },
     "import/core-modules": [ "load-volto-addons" ]

CHANGELOG.md

@@ -28,6 +28,10 @@
 ### Internal
 
 - Translations german: Unauthorized, Login/Register @ksuess
+- Explicitly define Volto as a ECMAScript module. @thet
+- Change root imports to ``@plone/volto``.
+  Replace all ``~`` root imports with the ``@plone/volto`` alias and remove related dev dependencies.
+  This change allows Volto to be defined as a importable module dependency in another library where the root is different. @thet
 
 ## 10.6.1 (2020-12-21)
 

babel.js

@@ -6,12 +6,6 @@ module.exports = function (api) {
     '@babel/plugin-proposal-export-default-from', // Stage 1
     '@babel/plugin-syntax-export-namespace-from', // Stage 4
     '@babel/plugin-proposal-throw-expressions', // Stage 2
-    [
-      'babel-plugin-root-import', // Required for the ~ imports to work
-      {
-        rootPathSuffix: 'src',
-      },
-    ],
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
       {

package.json

@@ -233,12 +233,10 @@
     "@testing-library/react": "11.2.2",
     "autoprefixer": "9.7.6",
     "axe-core": "3.5.3",
-    "babel-7-plugin-root-import": "5.4.0",
     "babel-eslint": "10.1.0",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-react-intl": "5.1.17",
-    "babel-plugin-root-import": "6.1.0",
     "bundlesize": "0.18.0",
     "bundlewatch": "0.2.7",
     "classnames": "2.2.6",
@@ -262,7 +260,6 @@
     "eslint-config-prettier": "6.11.0",
     "eslint-config-react-app": "5.2.1",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
     "eslint-plugin-flowtype": "4.7.0",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",

src/actions/content/content.js

@@ -13,7 +13,7 @@ import {
   UPDATECOLUMNS_CONTENT,
 } from '@plone/volto/constants/ActionTypes';
 import { nestContent } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * Create content function.

src/actions/content/content.multilingual.test.js

@@ -1,7 +1,7 @@
 import { getContent } from './content';
 import { GET_CONTENT } from '@plone/volto/constants/ActionTypes';
 
-jest.mock('~/config', () => ({
+jest.mock('@plone/volto/config', () => ({
   settings: {
     isMultilingual: true,
     supportedLanguages: ['de', 'es'],

src/actions/querystringsearch/querystringsearch.js

@@ -1,5 +1,5 @@
 import { GET_QUERYSTRING_RESULTS } from '@plone/volto/constants/ActionTypes';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * Get querystring results.

src/actions/vocabularies/vocabularies.js

@@ -3,7 +3,7 @@
  * @module actions/vocabularies/vocabularies
  */
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import {
   GET_VOCABULARY,
   GET_VOCABULARY_TOKEN_TITLE,

src/actions/workflow/workflow.js

@@ -9,7 +9,7 @@ import {
   TRANSITION_WORKFLOW,
 } from '@plone/volto/constants/ActionTypes';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * Get workflow function.

src/components/manage/Add/Add.jsx

@@ -16,7 +16,7 @@ import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { v4 as uuid } from 'uuid';
 import qs from 'query-string';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import { toast } from 'react-toastify';
 
 import { createContent, getSchema } from '@plone/volto/actions';
@@ -28,7 +28,7 @@ import {
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
 
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';

src/components/manage/Add/Add.test.jsx

@@ -7,7 +7,7 @@ import Add from './Add';
 
 const mockStore = configureStore();
 
-jest.mock('~/config', () => ({
+jest.mock('@plone/volto/config', () => ({
   settings: {
     isMultilingual: false,
     supportedLanguages: ['de'],

src/components/manage/BlockChooser/BlockChooser.jsx

@@ -5,7 +5,7 @@ import { Accordion, Button } from 'semantic-ui-react';
 import { injectIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import AnimateHeight from 'react-animate-height';
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';

src/components/manage/Blocks/Block/Edit.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 import { Button } from 'semantic-ui-react';
 import includes from 'lodash/includes';
 import isBoolean from 'lodash/isBoolean';

src/components/manage/Blocks/Description/Edit.jsx

@@ -10,7 +10,7 @@ import { stateFromHTML } from 'draft-js-import-html';
 import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 const messages = defineMessages({
   description: {

src/components/manage/Blocks/LeadImage/View.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import cx from 'classnames';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 import { flattenToAppURL } from '@plone/volto/helpers';
 

src/components/manage/Blocks/Listing/DefaultTemplate.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';

src/components/manage/Blocks/Listing/ImageGallery.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Button } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';

src/components/manage/Blocks/Listing/ListingBody.jsx

@@ -8,7 +8,7 @@ import { Icon } from '@plone/volto/components';
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 
-import { blocks, settings } from '~/config';
+import { blocks, settings } from '@plone/volto/config';
 
 const ListingBody = ({ data, properties, intl, path, isEditMode }) => {
   const [currentPage, setCurrentPage] = React.useState(1);

src/components/manage/Blocks/Listing/ListingStyle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 import TemplateWidget from '@plone/volto/components/manage/Blocks/Listing/TemplateWidget';
 
 const ListingStyle = ({ data, block, onChangeBlock, required = false }) => {

src/components/manage/Blocks/Listing/TemplateWidget.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Grid, Form } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import loadable from '@loadable/component';
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 
 import {
   Option,

src/components/manage/Blocks/Table/Cell.jsx

@@ -11,7 +11,7 @@ import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
 import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent';
 import { includes } from 'lodash';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * Edit text cell class.

src/components/manage/Blocks/Table/View.jsx

@@ -9,7 +9,7 @@ import { Table } from 'semantic-ui-react';
 import { map } from 'lodash';
 import redraft from 'redraft';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * View table block class.

src/components/manage/Blocks/Text/Edit.jsx

@@ -14,7 +14,7 @@ import isSoftNewlineEvent from 'draft-js/lib/isSoftNewlineEvent';
 import { defineMessages, injectIntl } from 'react-intl';
 import { includes, isEqual } from 'lodash';
 import { filterEditorState } from 'draftjs-filters';
-import { settings, blocks } from '~/config';
+import { settings, blocks } from '@plone/volto/config';
 
 import { Icon, BlockChooser } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';

src/components/manage/Blocks/Text/View.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import redraft from 'redraft';
 import React from 'react';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * View text block class.

src/components/manage/Blocks/Title/Edit.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { stateFromHTML } from 'draft-js-import-html';
 import { Editor, DefaultDraftBlockRenderMap, EditorState } from 'draft-js';
 import { defineMessages, injectIntl } from 'react-intl';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 const messages = defineMessages({
   title: {

src/components/manage/Blocks/Video/Edit.jsx

@@ -18,7 +18,7 @@ import {
   getParentUrl,
   flattenToAppURL,
 } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 const messages = defineMessages({
   VideoFormDescription: {

src/components/manage/Blocks/Video/View.jsx

@@ -12,7 +12,7 @@ import {
   getParentUrl,
   flattenToAppURL,
 } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * View video block class.

src/components/manage/Display/Display.jsx

@@ -8,7 +8,7 @@ import layouts from '@plone/volto/constants/Layouts';
 import { getLayoutFieldname } from '@plone/volto/helpers';
 import { Icon } from '@plone/volto/components';
 import { FormattedMessage } from 'react-intl';
-import { views } from '~/config';
+import { views } from '@plone/volto/config';
 
 import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';

src/components/manage/Form/BlocksToolbar.jsx

@@ -14,7 +14,7 @@ import { load } from 'redux-localstorage-simple';
 import { isEqual, omit, without } from 'lodash';
 
 import { setBlocksClipboard, resetBlocksClipboard } from '@plone/volto/actions';
-import { blocks } from '~/config';
+import { blocks } from '@plone/volto/config';
 
 import copySVG from '@plone/volto/icons/copy.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';

src/components/manage/Form/Field.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DragSource, DropTarget } from 'react-dnd';
-import { settings, widgets } from '~/config';
+import { settings, widgets } from '@plone/volto/config';
 import { injectIntl } from 'react-intl';
 
 const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered

src/components/manage/Form/Field.test.jsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import Field from './Field';
 
-jest.mock('~/config', () => ({
+jest.mock('@plone/volto/config', () => ({
   settings: {
     apiPath: 'http://localhost:8080/Plone',
   },

src/components/manage/Form/Form.jsx

@@ -44,7 +44,7 @@ import {
 import { v4 as uuid } from 'uuid';
 import { toast } from 'react-toastify';
 import { BlocksToolbar } from '@plone/volto/components';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 /**
  * Form container class.

src/components/manage/Multilingual/CreateTranslation.jsx

@@ -4,13 +4,13 @@ import { useDispatch } from 'react-redux';
 import { updateIntl } from 'react-intl-redux';
 import { getTranslationLocator } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 let locales = {};
 
 if (settings) {
   settings.supportedLanguages.forEach((lang) => {
-    import('~/../locales/' + lang + '.json').then((locale) => {
+    import('@plone/volto/../locales/' + lang + '.json').then((locale) => {
       locales = { ...locales, [lang]: locale.default };
     });
   });

src/components/manage/Multilingual/CreateTranslation.test.jsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import CreateTranslation from './CreateTranslation';
 
-jest.mock('~/config', () => ({
+jest.mock('@plone/volto/config', () => ({
   settings: {
     isMultilingual: true,
     supportedLanguages: ['de', 'es'],

src/components/manage/Multilingual/ManageTranslations.jsx

@@ -6,7 +6,7 @@ import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 import { reduce } from 'lodash';
 import { Link, useLocation } from 'react-router-dom';
 import { Icon, Toast, Toolbar } from '@plone/volto/components';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import {
   deleteLinkTranslation,

src/components/manage/Multilingual/ManageTranslations.test.jsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from 'react-router-dom';
 
 import ManageTranslations from './ManageTranslations';
 
-jest.mock('~/config', () => ({
+jest.mock('@plone/volto/config', () => ({
   settings: {
     isMultilingual: true,
     supportedLanguages: ['de', 'es'],

src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -15,7 +15,7 @@ import { searchContent } from '@plone/volto/actions/search/search';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import backSVG from '@plone/volto/icons/back.svg';
 import folderSVG from '@plone/volto/icons/folder.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';

src/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -3,7 +3,7 @@ import { Button, Segment, Popup } from 'semantic-ui-react';
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
 import { flattenToAppURL, getContentIcon } from '@plone/volto/helpers';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 import homeSVG from '@plone/volto/icons/home.svg';
 

src/components/manage/Toolbar/More.jsx

@@ -17,7 +17,7 @@ import { getBaseUrl } from '@plone/volto/helpers';
 import rightArrowSVG from '@plone/volto/icons/right-key.svg';
 import userSVG from '@plone/volto/icons/user.svg';
 
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 
 const messages = defineMessages({
   personalTools: {

src/components/manage/Toolbar/Toolbar.jsx

@@ -13,7 +13,7 @@ import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import cookie from 'react-cookie';
 import { filter, find } from 'lodash';
 import cx from 'classnames';
-import { settings } from '~/config';
+import { settings } from '@plone/volto/config';
 import More from '@plone/volto/components/manage/Toolbar/More';
 import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
 import Types from '@plone/volto/components/manage/Toolbar/Types';