From 6e4604d662f8ca353e38d26ab4378b6815109a42 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 28 Jul 2021 08:16:15 +0200 Subject: [PATCH 1/5] Init dynamic load of plugins Signed-off-by: soupette --- .../admin/src/pages/SettingsPage/index.js | 2 +- .../pages/SettingsPage/utils/defaultRoutes.js | 74 +++++++++++++++---- .../core/admin/admin/src/utils/createRoute.js | 42 ++++++++++- .../pages/SettingsPage/utils/customRoutes.js | 9 ++- packages/core/email/admin/src/index.js | 21 ++++-- .../email/admin/src/pages/Settings/index.js | 8 +- packages/core/upload/admin/src/index.js | 16 ++-- .../admin/src/pages/SettingsPage/index.js | 17 ++++- .../plugins/documentation/admin/src/index.js | 7 +- packages/plugins/i18n/admin/src/index.js | 10 ++- .../users-permissions/admin/src/index.js | 53 ++++++------- .../admin/src/pages/AdvancedSettings/index.js | 9 ++- .../admin/src/pages/EmailTemplates/index.js | 9 ++- .../admin/src/pages/Providers/index.js | 9 ++- .../admin/src/pages/Roles/index.js | 22 ++++-- 15 files changed, 226 insertions(+), 82 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/index.js index abbf2f6793..76cfd9e8d2 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/index.js @@ -45,7 +45,7 @@ function SettingsPage() { ); }, []); - const pluginsRoutes = useMemo(() => createSectionsRoutes(settings), [settings]); + const pluginsRoutes = createSectionsRoutes(settings); // Only display accessible sections const filteredMenu = useMemo(() => getSectionsToDisplay(menu), [menu]); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js b/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js index 0c370f781c..452fc02597 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js @@ -1,55 +1,99 @@ import RolesCreatePage from 'ee_else_ce/pages/Roles/CreatePage'; import ProtectedRolesListPage from 'ee_else_ce/pages/Roles/ProtectedListPage'; -import UsersEditPage from '../../Users/ProtectedEditPage'; -import UsersListPage from '../../Users/ProtectedListPage'; -import RolesEditPage from '../../Roles/ProtectedEditPage'; -import WebhooksCreateView from '../../Webhooks/ProtectedCreateView'; -import WebhooksEditView from '../../Webhooks/ProtectedEditView'; -import WebhooksListView from '../../Webhooks/ProtectedListView'; const defaultRoutes = [ { - Component: ProtectedRolesListPage, + Component: () => { + return { default: ProtectedRolesListPage }; + }, + to: '/settings/roles', exact: true, }, { - Component: RolesCreatePage, + Component: () => { + return { default: RolesCreatePage }; + }, to: '/settings/roles/duplicate/:id', exact: true, }, { - Component: RolesCreatePage, + // Component: RolesCreatePage, + Component: () => { + return { default: RolesCreatePage }; + }, to: '/settings/roles/new', exact: true, }, { - Component: RolesEditPage, + // Component: RolesEditPage, + Component: async () => { + const component = await import( + /* webpackChunkName: "admin-edit-roles-page" */ '../../Roles/ProtectedEditPage' + ); + + return component; + }, to: '/settings/roles/:id', exact: true, }, { - Component: UsersListPage, + // Component: UsersListPage, + Component: async () => { + const component = await import( + /* webpackChunkName: "admin-users" */ '../../Users/ProtectedListPage' + ); + + return component; + }, to: '/settings/users', exact: true, }, { - Component: UsersEditPage, + // Component: UsersEditPage, + Component: async () => { + const component = await import( + /* webpackChunkName: "admin-edit-users" */ '../../Users/ProtectedEditPage' + ); + + return component; + }, to: '/settings/users/:id', exact: true, }, { - Component: WebhooksCreateView, + // Component: WebhooksCreateView, + Component: async () => { + const component = await import( + /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedCreateView' + ); + + return component; + }, to: '/settings/webhooks/create', exact: true, }, { - Component: WebhooksEditView, + // Component: WebhooksEditView, + Component: async () => { + const component = await import( + /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedEditView' + ); + + return component; + }, to: '/settings/webhooks/:id', exact: true, }, { - Component: WebhooksListView, + // Component: WebhooksListView, + Component: async () => { + const component = await import( + /* webpackChunkName: "webhook-list-page" */ '../../Webhooks/ProtectedListView' + ); + + return component; + }, to: '/settings/webhooks', exact: true, }, diff --git a/packages/core/admin/admin/src/utils/createRoute.js b/packages/core/admin/admin/src/utils/createRoute.js index 841a9dc902..f440e28068 100644 --- a/packages/core/admin/admin/src/utils/createRoute.js +++ b/packages/core/admin/admin/src/utils/createRoute.js @@ -1,8 +1,46 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; import { Route } from 'react-router-dom'; +import { LoadingIndicatorPage } from '@strapi/helper-plugin'; + +const LazyCompo = ({ loadComponent }) => { + const [C, setCompo] = useState(null); + + useEffect(() => { + const loadCompo = async () => { + try { + const loadedCompo = await loadComponent(); + + setCompo(() => loadedCompo.default); + } catch (err) { + console.log(err); + } + }; + + loadCompo(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + if (C) { + return ; + } + + return ; +}; const createRoute = (Component, to, exact) => { - return ; + return ( + } + key={to} + path={to} + exact={exact || false} + /> + ); +}; + +LazyCompo.propTypes = { + loadComponent: PropTypes.func.isRequired, }; export default createRoute; diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js index 10ebd519a4..5863ba166c 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js @@ -1,9 +1,12 @@ -import SingleSignOn from '../SingleSignOn'; - const ssoRoutes = strapi.features.isEnabled(strapi.features.SSO) ? [ { - Component: SingleSignOn, + // Component: SingleSignOn, + Component: async () => { + const component = await import(/* webpackChunkName: "sso" */ '../SingleSignOn'); + + return component; + }, to: '/settings/single-sign-on', exact: true, }, diff --git a/packages/core/email/admin/src/index.js b/packages/core/email/admin/src/index.js index 2126c2eed1..6d45b04939 100644 --- a/packages/core/email/admin/src/index.js +++ b/packages/core/email/admin/src/index.js @@ -5,14 +5,12 @@ // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED -import React from 'react'; -import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin'; +import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginId from './pluginId'; import pluginLogo from './assets/images/logo.svg'; import pluginPermissions from './permissions'; import getTrad from './utils/getTrad'; -import SettingsPage from './pages/Settings'; const pluginDescription = pluginPkg.strapi.description || pluginPkg.description; const icon = pluginPkg.strapi.icon; @@ -34,11 +32,18 @@ export default { }, id: 'settings', to: `/settings/${pluginId}`, - Component: () => ( - - - - ), + Component: async () => { + const component = await import( + /* webpackChunkName: "email-settings" */ './pages/Settings' + ); + + return component; + }, + // Component: () => ( + // + // + // + // ), permissions: pluginPermissions.settings, }, diff --git a/packages/core/email/admin/src/pages/Settings/index.js b/packages/core/email/admin/src/pages/Settings/index.js index baedd23eae..d6d59214b8 100644 --- a/packages/core/email/admin/src/pages/Settings/index.js +++ b/packages/core/email/admin/src/pages/Settings/index.js @@ -20,6 +20,12 @@ import { AlignedButton, Text } from './components'; import schema from '../../utils/schema'; import pluginPermissions from '../../permissions'; +const ProtectedSettingsPage = () => ( + + + +); + const SettingsPage = () => { const toggleNotification = useNotification(); const { formatMessage } = useIntl(); @@ -205,4 +211,4 @@ const SettingsPage = () => { ); }; -export default SettingsPage; +export default ProtectedSettingsPage; diff --git a/packages/core/upload/admin/src/index.js b/packages/core/upload/admin/src/index.js index a48cba5720..f784d02912 100644 --- a/packages/core/upload/admin/src/index.js +++ b/packages/core/upload/admin/src/index.js @@ -4,15 +4,13 @@ // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED -import React from 'react'; -import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin'; +import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginLogo from './assets/images/logo.svg'; import pluginPermissions from './permissions'; import Initializer from './components/Initializer'; import InputMedia from './components/InputMedia'; import InputModalStepper from './components/InputModalStepper'; -import SettingsPage from './pages/SettingsPage'; import reducers from './reducers'; import pluginId from './pluginId'; import { getTrad } from './utils'; @@ -61,11 +59,13 @@ export default { defaultMessage: 'Media Library', }, to: '/settings/media-library', - Component: () => ( - - - - ), + Component: async () => { + const component = await import( + /* webpackChunkName: "upload-settings" */ './pages/SettingsPage' + ); + + return component; + }, permissions: pluginPermissions.settings, }); }, diff --git a/packages/core/upload/admin/src/pages/SettingsPage/index.js b/packages/core/upload/admin/src/pages/SettingsPage/index.js index 542a9a7b87..18ee77a6e2 100644 --- a/packages/core/upload/admin/src/pages/SettingsPage/index.js +++ b/packages/core/upload/admin/src/pages/SettingsPage/index.js @@ -4,13 +4,24 @@ import { Helmet } from 'react-helmet'; import { Text } from '@buffetjs/core'; import { isEqual } from 'lodash'; import { useIntl } from 'react-intl'; -import { LoadingIndicatorPage, useNotification, request } from '@strapi/helper-plugin'; - +import { + CheckPagePermissions, + LoadingIndicatorPage, + useNotification, + request, +} from '@strapi/helper-plugin'; import { getRequestUrl, getTrad } from '../../utils'; import SectionTitleWrapper from './SectionTitleWrapper'; import Wrapper from './Wrapper'; import init from './init'; import reducer, { initialState } from './reducer'; +import pluginPermissions from '../../permissions'; + +const ProtectedSettingsPage = () => ( + + + +); const SettingsPage = () => { const { formatMessage } = useIntl(); @@ -202,4 +213,4 @@ const SettingsPage = () => { ); }; -export default SettingsPage; +export default ProtectedSettingsPage; diff --git a/packages/plugins/documentation/admin/src/index.js b/packages/plugins/documentation/admin/src/index.js index b0c61fa15d..772a8916c1 100644 --- a/packages/plugins/documentation/admin/src/index.js +++ b/packages/plugins/documentation/admin/src/index.js @@ -9,7 +9,6 @@ import pluginPkg from '../../package.json'; import pluginPermissions from './permissions'; import pluginId from './pluginId'; import pluginLogo from './assets/images/logo.svg'; -import App from './pages/App'; const pluginDescription = pluginPkg.strapi.description || pluginPkg.description; const icon = pluginPkg.strapi.icon; @@ -25,7 +24,11 @@ export default { defaultMessage: 'Documentation', }, permissions: pluginPermissions.main, - Component: App, + Component: async () => { + const component = await import(/* webpackChunkName: "documentation" */ './pages/App'); + + return component; + }, }); app.registerPlugin({ diff --git a/packages/plugins/i18n/admin/src/index.js b/packages/plugins/i18n/admin/src/index.js index 016e9b211f..29e133de81 100644 --- a/packages/plugins/i18n/admin/src/index.js +++ b/packages/plugins/i18n/admin/src/index.js @@ -6,7 +6,6 @@ import pluginLogo from './assets/images/logo.svg'; import CheckboxConfirmation from './components/CheckboxConfirmation'; import CMEditViewInjectedComponents from './components/CMEditViewInjectedComponents'; import Initializer from './components/Initializer'; -import SettingsPage from './pages/SettingsPage'; import LocalePicker from './components/LocalePicker'; import middlewares from './middlewares'; import pluginPermissions from './permissions'; @@ -64,7 +63,14 @@ export default { }, id: 'internationalization', to: '/settings/internationalization', - Component: SettingsPage, + + Component: async () => { + const component = await import( + /* webpackChunkName: "i18n-settings" */ './pages/SettingsPage' + ); + + return component; + }, permissions: pluginPermissions.accessMain, }); diff --git a/packages/plugins/users-permissions/admin/src/index.js b/packages/plugins/users-permissions/admin/src/index.js index bfc8783470..6e7f92db50 100644 --- a/packages/plugins/users-permissions/admin/src/index.js +++ b/packages/plugins/users-permissions/admin/src/index.js @@ -4,16 +4,11 @@ // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED -import React from 'react'; -import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin'; +import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginLogo from './assets/images/logo.svg'; import pluginPermissions from './permissions'; import pluginId from './pluginId'; -import RolesPage from './pages/Roles'; -import ProvidersPage from './pages/Providers'; -import EmailTemplatesPage from './pages/EmailTemplates'; -import AdvancedSettingsPage from './pages/AdvancedSettings'; import getTrad from './utils/getTrad'; const pluginDescription = pluginPkg.strapi.description || pluginPkg.description; @@ -39,11 +34,11 @@ export default { }, id: 'roles', to: `/settings/${pluginId}/roles`, - Component: () => ( - - - - ), + Component: async () => { + const component = await import(/* webpackChunkName: "users-roles" */ './pages/Roles'); + + return component; + }, permissions: pluginPermissions.accessRoles, }, { @@ -53,11 +48,13 @@ export default { }, id: 'providers', to: `/settings/${pluginId}/providers`, - Component: () => ( - - - - ), + Component: async () => { + const component = await import( + /* webpackChunkName: "users-providers" */ './pages/Providers' + ); + + return component; + }, permissions: pluginPermissions.readProviders, }, { @@ -67,11 +64,13 @@ export default { }, id: 'email-templates', to: `/settings/${pluginId}/email-templates`, - Component: () => ( - - - - ), + Component: async () => { + const component = await import( + /* webpackChunkName: "users-email" */ './pages/EmailTemplates' + ); + + return component; + }, permissions: pluginPermissions.readEmailTemplates, }, { @@ -81,11 +80,13 @@ export default { }, id: 'advanced-settings', to: `/settings/${pluginId}/advanced-settings`, - Component: () => ( - - - - ), + Component: async () => { + const component = await import( + /* webpackChunkName: "users-advanced-settings" */ './pages/AdvancedSettings' + ); + + return component; + }, permissions: pluginPermissions.readAdvancedSettings, }, ] diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js index 2d10d7496b..b7de9a765d 100644 --- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js @@ -11,6 +11,7 @@ import { request, useNotification, useOverlayBlocker, + CheckPagePermissions, } from '@strapi/helper-plugin'; import pluginPermissions from '../../permissions'; import { getTrad, getRequestURL } from '../../utils'; @@ -18,6 +19,12 @@ import ListBaselineAlignment from '../../components/ListBaselineAlignment'; import form from './utils/form'; import reducer, { initialState } from './reducer'; +const Protected = () => ( + + + +); + const AdvancedSettingsPage = () => { const { formatMessage } = useIntl(); const toggleNotification = useNotification(); @@ -212,4 +219,4 @@ const AdvancedSettingsPage = () => { ); }; -export default AdvancedSettingsPage; +export default Protected; diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js index 8fb474b8cb..6aed9b4df0 100644 --- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js @@ -11,6 +11,7 @@ import { getYupInnerErrors, useNotification, useOverlayBlocker, + CheckPagePermissions, } from '@strapi/helper-plugin'; import { Row } from 'reactstrap'; import pluginPermissions from '../../permissions'; @@ -22,6 +23,12 @@ import { getRequestURL, getTrad } from '../../utils'; import forms from './utils/forms'; import schema from './utils/schema'; +const Protected = () => ( + + + +); + const EmailTemplatesPage = () => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); @@ -232,4 +239,4 @@ const EmailTemplatesPage = () => { ); }; -export default EmailTemplatesPage; +export default Protected; diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js index dd1d3f39d9..80ececb67c 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Providers/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/Providers/index.js @@ -11,6 +11,7 @@ import { request, useNotification, useOverlayBlocker, + CheckPagePermissions, } from '@strapi/helper-plugin'; import { get, upperFirst, has } from 'lodash'; import { Row } from 'reactstrap'; @@ -23,6 +24,12 @@ import ModalForm from '../../components/ModalForm'; import createProvidersArray from './utils/createProvidersArray'; import forms from './utils/forms'; +const ProtectedProvidersPage = () => ( + + + +); + const ProvidersPage = () => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); @@ -279,4 +286,4 @@ const ProvidersPage = () => { ); }; -export default ProvidersPage; +export default ProtectedProvidersPage; diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/index.js index 91bd1ddf70..9087ee2b7b 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/Roles/index.js @@ -1,20 +1,26 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import { NotFound } from '@strapi/helper-plugin'; +import { CheckPagePermissions, NotFound } from '@strapi/helper-plugin'; import pluginId from '../../pluginId'; - +import pluginPermissions from '../../permissions'; import ProtectedRolesListPage from './ProtectedListPage'; import ProtectedRolesEditPage from './ProtectedEditPage'; import ProtectedRolesCreatePage from './ProtectedCreatePage'; const Roles = () => { return ( - - - - - - + + + + + + + + ); }; From 55ad0c0181b148687fb27e982347b46969696a18 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 28 Jul 2021 08:22:59 +0200 Subject: [PATCH 2/5] Update plugin generators Signed-off-by: soupette --- .../getstarted/plugins/myplugin/admin/src/index.js | 9 +++++---- .../{containers => components}/Initializer/index.js | 0 packages/generators/plugin/files/admin/src/index.js | 10 ++++++---- .../files/admin/src/{containers => pages}/App/index.js | 0 .../admin/src/{containers => pages}/HomePage/index.js | 0 5 files changed, 11 insertions(+), 8 deletions(-) rename packages/generators/plugin/files/admin/src/{containers => components}/Initializer/index.js (100%) rename packages/generators/plugin/files/admin/src/{containers => pages}/App/index.js (100%) rename packages/generators/plugin/files/admin/src/{containers => pages}/HomePage/index.js (100%) diff --git a/examples/getstarted/plugins/myplugin/admin/src/index.js b/examples/getstarted/plugins/myplugin/admin/src/index.js index a55b7faab1..d544d01921 100644 --- a/examples/getstarted/plugins/myplugin/admin/src/index.js +++ b/examples/getstarted/plugins/myplugin/admin/src/index.js @@ -1,9 +1,6 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginId from './pluginId'; - -import App from './pages/App'; - const pluginDescription = pluginPkg.strapi.description || pluginPkg.description; const icon = pluginPkg.strapi.icon; const name = pluginPkg.strapi.name; @@ -17,7 +14,11 @@ export default { id: `${pluginId}.plugin.name`, defaultMessage: 'My plugin', }, - Component: App, + Component: async () => { + const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App'); + + return component; + }, permissions: [], }); app.registerPlugin({ diff --git a/packages/generators/plugin/files/admin/src/containers/Initializer/index.js b/packages/generators/plugin/files/admin/src/components/Initializer/index.js similarity index 100% rename from packages/generators/plugin/files/admin/src/containers/Initializer/index.js rename to packages/generators/plugin/files/admin/src/components/Initializer/index.js diff --git a/packages/generators/plugin/files/admin/src/index.js b/packages/generators/plugin/files/admin/src/index.js index ebacea2e5e..e673fe096f 100644 --- a/packages/generators/plugin/files/admin/src/index.js +++ b/packages/generators/plugin/files/admin/src/index.js @@ -1,9 +1,7 @@ import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginId from './pluginId'; -import App from './containers/App'; -import Initializer from './containers/Initializer'; - +import Initializer from './components/Initializer'; const pluginDescription = pluginPkg.strapi.description || pluginPkg.description; const icon = pluginPkg.strapi.icon; const name = pluginPkg.strapi.name; @@ -17,7 +15,11 @@ export default { id: `${pluginId}.plugin.name`, defaultMessage: name, }, - Component: App, + Component: async () => { + const component = await import(/* webpackChunkName: "[request]" */ './pages/App'); + + return component; + }, permissions: [ // Uncomment to set the permissions of the plugin here // { diff --git a/packages/generators/plugin/files/admin/src/containers/App/index.js b/packages/generators/plugin/files/admin/src/pages/App/index.js similarity index 100% rename from packages/generators/plugin/files/admin/src/containers/App/index.js rename to packages/generators/plugin/files/admin/src/pages/App/index.js diff --git a/packages/generators/plugin/files/admin/src/containers/HomePage/index.js b/packages/generators/plugin/files/admin/src/pages/HomePage/index.js similarity index 100% rename from packages/generators/plugin/files/admin/src/containers/HomePage/index.js rename to packages/generators/plugin/files/admin/src/pages/HomePage/index.js From ae0be0dbea0805f45616431bee5c36f3899ebcc6 Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 28 Jul 2021 09:37:12 +0200 Subject: [PATCH 3/5] Split css chunks Signed-off-by: soupette --- packages/core/admin/admin/src/StrapiApp.js | 2 +- .../admin/src/components/GlobalStyle/index.js | 18 ++++++++----- .../components/InputJSON/index.js | 27 ++++++++++++++----- .../PreviewWysiwyg/utils/mdRenderer.js | 7 ++++- .../admin/src/pages/Admin/tests/index.test.js | 2 +- .../pages/SettingsPage/tests/index.test.js | 20 ++++++++------ .../admin/src/utils/tests/createRoute.test.js | 3 +-- packages/core/admin/package.json | 2 +- 8 files changed, 54 insertions(+), 27 deletions(-) diff --git a/packages/core/admin/admin/src/StrapiApp.js b/packages/core/admin/admin/src/StrapiApp.js index 901740ca6d..de58139f6f 100644 --- a/packages/core/admin/admin/src/StrapiApp.js +++ b/packages/core/admin/admin/src/StrapiApp.js @@ -305,7 +305,7 @@ class StrapiApp { */ async loadAdminTrads() { const arrayOfPromises = this.configurations.locales.map(locale => { - return import(/* webpackChunkName: "[request]" */ `./translations/${locale}.json`) + return import(/* webpackChunkName: "ccc[request]" */ `./translations/${locale}.json`) .then(({ default: data }) => { return { data, locale }; }) diff --git a/packages/core/admin/admin/src/components/GlobalStyle/index.js b/packages/core/admin/admin/src/components/GlobalStyle/index.js index 6a588ba689..71333a911d 100644 --- a/packages/core/admin/admin/src/components/GlobalStyle/index.js +++ b/packages/core/admin/admin/src/components/GlobalStyle/index.js @@ -1,11 +1,17 @@ -import 'sanitize.css/sanitize.css'; -import 'bootstrap/dist/css/bootstrap.css'; -import 'font-awesome/css/font-awesome.min.css'; -import '@fortawesome/fontawesome-free/css/all.css'; -// eslint-disable-next-line import/extensions -import '@fortawesome/fontawesome-free/js/all.min.js'; import { createGlobalStyle } from 'styled-components'; +const loadCss = async () => { + await import(/* webpackChunkName: "sanitize-css" */ 'sanitize.css/sanitize.css'); + await import(/* webpackChunkName: "fontawesome-css" */ 'font-awesome/css/font-awesome.min.css'); + await import( + /* webpackChunkName: "fontawesome-css-all" */ '@fortawesome/fontawesome-free/css/all.css' + ); + await import(/* webpackChunkName: "fontawesome-js" */ '@fortawesome/fontawesome-free/js/all.min'); + await import(/* webpackChunkName: "bootstrap" */ 'bootstrap/dist/css/bootstrap.css'); +}; + +loadCss(); + const GlobalStyle = createGlobalStyle` html { font-size: 62.5%; diff --git a/packages/core/admin/admin/src/content-manager/components/InputJSON/index.js b/packages/core/admin/admin/src/content-manager/components/InputJSON/index.js index 5f492f2909..a3f849c2fd 100644 --- a/packages/core/admin/admin/src/content-manager/components/InputJSON/index.js +++ b/packages/core/admin/admin/src/content-manager/components/InputJSON/index.js @@ -7,13 +7,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import cm from 'codemirror'; -import 'codemirror/mode/javascript/javascript'; -import 'codemirror/addon/lint/lint'; -import 'codemirror/addon/lint/javascript-lint'; -import 'codemirror/addon/edit/closebrackets'; -import 'codemirror/addon/selection/mark-selection'; -import 'codemirror/lib/codemirror.css'; -import 'codemirror/theme/solarized.css'; import { trimStart } from 'lodash'; import jsonlint from './jsonlint'; @@ -23,6 +16,26 @@ const WAIT = 600; const stringify = JSON.stringify; const DEFAULT_THEME = 'solarized dark'; +const loadCss = async () => { + await import( + /* webpackChunkName: "codemirror-javacript" */ 'codemirror/mode/javascript/javascript' + ); + await import(/* webpackChunkName: "codemirror-addon-lint" */ 'codemirror/addon/lint/lint'); + await import( + /* webpackChunkName: "codemirror-addon-lint-js" */ 'codemirror/addon/lint/javascript-lint' + ); + await import( + /* webpackChunkName: "codemirror-addon-closebrackets" */ 'codemirror/addon/edit/closebrackets' + ); + await import( + /* webpackChunkName: "codemirror-addon-mark-selection" */ 'codemirror/addon/selection/mark-selection' + ); + await import(/* webpackChunkName: "codemirror-css" */ 'codemirror/lib/codemirror.css'); + await import(/* webpackChunkName: "codemirror-theme" */ 'codemirror/theme/solarized.css'); +}; + +loadCss(); + class InputJSON extends React.Component { timer = null; diff --git a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js index e78373284c..17bc08d492 100644 --- a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js +++ b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js @@ -1,6 +1,5 @@ /* eslint-disable prefer-template */ import Markdown from 'markdown-it'; -import 'highlight.js/styles/solarized-dark.css'; import { getLanguage, highlightAuto, highlight } from 'highlight.js'; import abbr from 'markdown-it-abbr'; import container from 'markdown-it-container'; @@ -12,6 +11,12 @@ import mark from 'markdown-it-mark'; import sub from 'markdown-it-sub'; import sup from 'markdown-it-sup'; +const loadCss = async () => { + await import(/* webpackChunkName: "highlight.js" */ 'highlight.js/styles/solarized-dark.css'); +}; + +loadCss(); + const md = new Markdown({ html: true, // Enable HTML tags in source xhtmlOut: false, diff --git a/packages/core/admin/admin/src/pages/Admin/tests/index.test.js b/packages/core/admin/admin/src/pages/Admin/tests/index.test.js index 680e172006..bfba9eaeb7 100644 --- a/packages/core/admin/admin/src/pages/Admin/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/Admin/tests/index.test.js @@ -59,7 +59,7 @@ describe('', () => { }, { to: '/plugins/documentation', - Component: () =>
DOCUMENTATION PLUGIN
, + Component: () => ({ default: () =>
DOCUMENTATION PLUGIN
}), }, ], })); diff --git a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js index 7e78d7b907..0eb1f9b931 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/tests/index.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { Router, Route } from 'react-router-dom'; import { ThemeProvider } from 'styled-components'; import { StrapiAppProvider, AppInfosContext } from '@strapi/helper-plugin'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { createMemoryHistory } from 'history'; import { SettingsPage } from '..'; @@ -248,7 +248,7 @@ describe('ADMIN | pages | SettingsPage', () => { expect(screen.getByText(/App infos/)).toBeInTheDocument(); }); - it('should create the plugins routes correctly', () => { + it('should create the plugins routes correctly', async () => { useSettingsMenu.mockImplementation(() => ({ isLoading: false, menu: [ @@ -265,7 +265,7 @@ describe('ADMIN | pages | SettingsPage', () => { isDisplayed: true, permissions: [], to: '/settings/internationalization', - Component: () =>
i18n settings
, + Component: () => ({ default: () =>
i18n settings
}), }, ], }, @@ -279,7 +279,7 @@ describe('ADMIN | pages | SettingsPage', () => { isDisplayed: true, permissions: [], to: '/settings/email-settings', - Component: () =>
email settings
, + Component: () => ({ default: () =>
email settings
}), }, ], }, @@ -301,7 +301,7 @@ describe('ADMIN | pages | SettingsPage', () => { isDisplayed: true, permissions: [], to: '/settings/internationalization', - Component: () =>
i18n settings
, + Component: () => ({ default: () =>
i18n settings
}), }, ], }, @@ -315,7 +315,7 @@ describe('ADMIN | pages | SettingsPage', () => { isDisplayed: true, permissions: [], to: '/settings/email-settings', - Component: () =>
email settings
, + Component: () => ({ default: () =>
email settings
}), }, ], }, @@ -329,10 +329,14 @@ describe('ADMIN | pages | SettingsPage', () => { userEvent.click(screen.getByText('i18n.plugin.name')); - expect(screen.getByText(/i18n settings/)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(/i18n settings/)).toBeInTheDocument(); + }); userEvent.click(screen.getByText('email')); - expect(screen.getByText(/email settings/)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(/email settings/)).toBeInTheDocument(); + }); }); }); diff --git a/packages/core/admin/admin/src/utils/tests/createRoute.test.js b/packages/core/admin/admin/src/utils/tests/createRoute.test.js index f4dc39ffdb..de58b514b6 100644 --- a/packages/core/admin/admin/src/utils/tests/createRoute.test.js +++ b/packages/core/admin/admin/src/utils/tests/createRoute.test.js @@ -5,12 +5,11 @@ describe('ADMIN | CONTAINER | SettingsPage | utils | createRoute', () => { const compo = () => 'test'; const { - props: { component, path, exact }, + props: { path, exact }, key, } = createRoute(compo, '/test', true); expect(key).toEqual('/test'); - expect(component()).toEqual('test'); expect(exact).toBeTruthy(); expect(path).toEqual('/test'); }); diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json index b38339aa5a..e4d2ddd3e1 100644 --- a/packages/core/admin/package.json +++ b/packages/core/admin/package.json @@ -38,8 +38,8 @@ "@fortawesome/free-brands-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", - "@strapi/helper-plugin": "3.6.5", "@strapi/babel-plugin-switch-ee-ce": "1.0.0", + "@strapi/helper-plugin": "3.6.5", "@strapi/utils": "3.6.5", "axios": "^0.21.1", "babel-loader": "8.2.2", From 94be562a5659b5b1a5bf9d22c6aa93660ca5c0fb Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 28 Jul 2021 09:52:32 +0200 Subject: [PATCH 4/5] Lint code Signed-off-by: soupette --- packages/core/admin/admin/src/StrapiApp.js | 2 +- .../admin/src/pages/SettingsPage/utils/defaultRoutes.js | 7 ------- packages/core/admin/admin/src/utils/createRoute.js | 6 +++--- .../ee/admin/pages/SettingsPage/utils/customRoutes.js | 1 - packages/core/email/admin/src/index.js | 6 ------ 5 files changed, 4 insertions(+), 18 deletions(-) diff --git a/packages/core/admin/admin/src/StrapiApp.js b/packages/core/admin/admin/src/StrapiApp.js index de58139f6f..901740ca6d 100644 --- a/packages/core/admin/admin/src/StrapiApp.js +++ b/packages/core/admin/admin/src/StrapiApp.js @@ -305,7 +305,7 @@ class StrapiApp { */ async loadAdminTrads() { const arrayOfPromises = this.configurations.locales.map(locale => { - return import(/* webpackChunkName: "ccc[request]" */ `./translations/${locale}.json`) + return import(/* webpackChunkName: "[request]" */ `./translations/${locale}.json`) .then(({ default: data }) => { return { data, locale }; }) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js b/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js index 452fc02597..194ad89be3 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/utils/defaultRoutes.js @@ -18,7 +18,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: RolesCreatePage, Component: () => { return { default: RolesCreatePage }; }, @@ -26,7 +25,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: RolesEditPage, Component: async () => { const component = await import( /* webpackChunkName: "admin-edit-roles-page" */ '../../Roles/ProtectedEditPage' @@ -38,7 +36,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: UsersListPage, Component: async () => { const component = await import( /* webpackChunkName: "admin-users" */ '../../Users/ProtectedListPage' @@ -50,7 +47,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: UsersEditPage, Component: async () => { const component = await import( /* webpackChunkName: "admin-edit-users" */ '../../Users/ProtectedEditPage' @@ -62,7 +58,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: WebhooksCreateView, Component: async () => { const component = await import( /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedCreateView' @@ -74,7 +69,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: WebhooksEditView, Component: async () => { const component = await import( /* webpackChunkName: "webhook-edit-page" */ '../../Webhooks/ProtectedEditView' @@ -86,7 +80,6 @@ const defaultRoutes = [ exact: true, }, { - // Component: WebhooksListView, Component: async () => { const component = await import( /* webpackChunkName: "webhook-list-page" */ '../../Webhooks/ProtectedListView' diff --git a/packages/core/admin/admin/src/utils/createRoute.js b/packages/core/admin/admin/src/utils/createRoute.js index f440e28068..3938c43fbb 100644 --- a/packages/core/admin/admin/src/utils/createRoute.js +++ b/packages/core/admin/admin/src/utils/createRoute.js @@ -4,7 +4,7 @@ import { Route } from 'react-router-dom'; import { LoadingIndicatorPage } from '@strapi/helper-plugin'; const LazyCompo = ({ loadComponent }) => { - const [C, setCompo] = useState(null); + const [Compo, setCompo] = useState(null); useEffect(() => { const loadCompo = async () => { @@ -21,8 +21,8 @@ const LazyCompo = ({ loadComponent }) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - if (C) { - return ; + if (Compo) { + return ; } return ; diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js index 5863ba166c..aa934a5ced 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js @@ -1,7 +1,6 @@ const ssoRoutes = strapi.features.isEnabled(strapi.features.SSO) ? [ { - // Component: SingleSignOn, Component: async () => { const component = await import(/* webpackChunkName: "sso" */ '../SingleSignOn'); diff --git a/packages/core/email/admin/src/index.js b/packages/core/email/admin/src/index.js index 6d45b04939..1d727fccb2 100644 --- a/packages/core/email/admin/src/index.js +++ b/packages/core/email/admin/src/index.js @@ -39,12 +39,6 @@ export default { return component; }, - // Component: () => ( - // - // - // - // ), - permissions: pluginPermissions.settings, }, ] From 393bf5f1befd6a15155e3140237df40f18e45aa5 Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 19 Aug 2021 09:42:19 +0200 Subject: [PATCH 5/5] Fix PR feedback Signed-off-by: soupette --- packages/core/admin/admin/src/utils/createRoute.js | 3 +-- .../ee/admin/pages/SettingsPage/utils/customRoutes.js | 4 +++- packages/core/email/admin/src/index.js | 2 +- packages/plugins/documentation/admin/src/index.js | 2 +- .../documentation/admin/src/pages/HomePage/index.js | 7 +++++++ packages/plugins/i18n/admin/src/index.js | 2 +- packages/plugins/users-permissions/admin/src/index.js | 10 ++++++---- .../admin/src/pages/AdvancedSettings/index.js | 4 ++-- .../admin/src/pages/EmailTemplates/index.js | 4 ++-- 9 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/core/admin/admin/src/utils/createRoute.js b/packages/core/admin/admin/src/utils/createRoute.js index 3938c43fbb..e39d819349 100644 --- a/packages/core/admin/admin/src/utils/createRoute.js +++ b/packages/core/admin/admin/src/utils/createRoute.js @@ -18,8 +18,7 @@ const LazyCompo = ({ loadComponent }) => { }; loadCompo(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [loadComponent]); if (Compo) { return ; diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js index aa934a5ced..a7f6485a9d 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/utils/customRoutes.js @@ -2,7 +2,9 @@ const ssoRoutes = strapi.features.isEnabled(strapi.features.SSO) ? [ { Component: async () => { - const component = await import(/* webpackChunkName: "sso" */ '../SingleSignOn'); + const component = await import( + /* webpackChunkName: "sso-settings-page" */ '../SingleSignOn' + ); return component; }, diff --git a/packages/core/email/admin/src/index.js b/packages/core/email/admin/src/index.js index 1d727fccb2..9bcfe7d1de 100644 --- a/packages/core/email/admin/src/index.js +++ b/packages/core/email/admin/src/index.js @@ -34,7 +34,7 @@ export default { to: `/settings/${pluginId}`, Component: async () => { const component = await import( - /* webpackChunkName: "email-settings" */ './pages/Settings' + /* webpackChunkName: "email-settings-page" */ './pages/Settings' ); return component; diff --git a/packages/plugins/documentation/admin/src/index.js b/packages/plugins/documentation/admin/src/index.js index 772a8916c1..66c12f66c2 100644 --- a/packages/plugins/documentation/admin/src/index.js +++ b/packages/plugins/documentation/admin/src/index.js @@ -25,7 +25,7 @@ export default { }, permissions: pluginPermissions.main, Component: async () => { - const component = await import(/* webpackChunkName: "documentation" */ './pages/App'); + const component = await import(/* webpackChunkName: "documentation-page" */ './pages/App'); return component; }, diff --git a/packages/plugins/documentation/admin/src/pages/HomePage/index.js b/packages/plugins/documentation/admin/src/pages/HomePage/index.js index 8816155fd2..1eedc0c039 100755 --- a/packages/plugins/documentation/admin/src/pages/HomePage/index.js +++ b/packages/plugins/documentation/admin/src/pages/HomePage/index.js @@ -90,10 +90,17 @@ const HomePage = () => { setVersionToDelete(null); }; + console.log(data); + if (isLoading) { return ; } + // FIXME + if (!data) { + return null; + } + return ( { const component = await import( - /* webpackChunkName: "i18n-settings" */ './pages/SettingsPage' + /* webpackChunkName: "i18n-settings-page" */ './pages/SettingsPage' ); return component; diff --git a/packages/plugins/users-permissions/admin/src/index.js b/packages/plugins/users-permissions/admin/src/index.js index 63686247d3..76bf874e7e 100644 --- a/packages/plugins/users-permissions/admin/src/index.js +++ b/packages/plugins/users-permissions/admin/src/index.js @@ -35,7 +35,9 @@ export default { id: 'roles', to: `/settings/${pluginId}/roles`, Component: async () => { - const component = await import(/* webpackChunkName: "users-roles" */ './pages/Roles'); + const component = await import( + /* webpackChunkName: "users-roles-settings-page" */ './pages/Roles' + ); return component; }, @@ -50,7 +52,7 @@ export default { to: `/settings/${pluginId}/providers`, Component: async () => { const component = await import( - /* webpackChunkName: "users-providers" */ './pages/Providers' + /* webpackChunkName: "users-providers-settings-page" */ './pages/Providers' ); return component; @@ -66,7 +68,7 @@ export default { to: `/settings/${pluginId}/email-templates`, Component: async () => { const component = await import( - /* webpackChunkName: "users-email" */ './pages/EmailTemplates' + /* webpackChunkName: "users-email-settings-page" */ './pages/EmailTemplates' ); return component; @@ -82,7 +84,7 @@ export default { to: `/settings/${pluginId}/advanced-settings`, Component: async () => { const component = await import( - /* webpackChunkName: "users-advanced-settings" */ './pages/AdvancedSettings' + /* webpackChunkName: "users-advanced-settings-page" */ './pages/AdvancedSettings' ); return component; diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js index db4a02a407..43f733a830 100644 --- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/index.js @@ -19,7 +19,7 @@ import ListBaselineAlignment from '../../components/ListBaselineAlignment'; import form from './utils/form'; import reducer, { initialState } from './reducer'; -const Protected = () => ( +const ProtectedAdvancedSettingsPage = () => ( @@ -224,4 +224,4 @@ const AdvancedSettingsPage = () => { ); }; -export default Protected; +export default ProtectedAdvancedSettingsPage; diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js index 6aed9b4df0..fc320b5245 100644 --- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/index.js @@ -23,7 +23,7 @@ import { getRequestURL, getTrad } from '../../utils'; import forms from './utils/forms'; import schema from './utils/schema'; -const Protected = () => ( +const ProtectedEmailTemplatesPage = () => ( @@ -239,4 +239,4 @@ const EmailTemplatesPage = () => { ); }; -export default Protected; +export default ProtectedEmailTemplatesPage;