Init dynamic load of plugins

Signed-off-by: soupette <cyril.lpz@gmail.com>

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]);

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,
   },

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 <C />;
+  }
+
+  return <LoadingIndicatorPage />;
+};
 
 const createRoute = (Component, to, exact) => {
-  return <Route component={Component} key={to} path={to} exact={exact || false} />;
+  return (
+    <Route
+      render={() => <LazyCompo loadComponent={Component} />}
+      key={to}
+      path={to}
+      exact={exact || false}
+    />
+  );
+};
+
+LazyCompo.propTypes = {
+  loadComponent: PropTypes.func.isRequired,
 };
 
 export default createRoute;

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,
       },

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 { prefixPluginTranslations } from '@strapi/helper-plugin';
-import { CheckPagePermissions, 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 () => {
-            <CheckPagePermissions permissions={pluginPermissions.settings}>
+            const component = await import(
-              <SettingsPage />
+              /* webpackChunkName: "email-settings" */ './pages/Settings'
-            </CheckPagePermissions>
+            );
-          ),
+
+            return component;
+          },
+          // Component: () => (
+          //   <CheckPagePermissions permissions={pluginPermissions.settings}>
+          //     <SettingsPage />
+          //   </CheckPagePermissions>
+          // ),
 
           permissions: pluginPermissions.settings,
         },

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 = () => (
+  <CheckPagePermissions permissions={pluginPermissions.settings}>
+    <SettingsPage />
+  </CheckPagePermissions>
+);
+
 const SettingsPage = () => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
@@ -205,4 +211,4 @@ const SettingsPage = () => {
   );
 };
 
-export default SettingsPage;
+export default ProtectedSettingsPage;

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 { prefixPluginTranslations } from '@strapi/helper-plugin';
-import { CheckPagePermissions, 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 () => {
-        <CheckPagePermissions permissions={pluginPermissions.settings}>
+        const component = await import(
-          <SettingsPage />
+          /* webpackChunkName: "upload-settings" */ './pages/SettingsPage'
-        </CheckPagePermissions>
+        );
-      ),
+
+        return component;
+      },
       permissions: pluginPermissions.settings,
     });
   },

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 = () => (
+  <CheckPagePermissions permissions={pluginPermissions.settings}>
+    <SettingsPage />
+  </CheckPagePermissions>
+);
 
 const SettingsPage = () => {
   const { formatMessage } = useIntl();
@@ -202,4 +213,4 @@ const SettingsPage = () => {
   );
 };
 
-export default SettingsPage;
+export default ProtectedSettingsPage;

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({

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,
     });
 

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 { prefixPluginTranslations } from '@strapi/helper-plugin';
-import { CheckPagePermissions, 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 () => {
-            <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+            const component = await import(/* webpackChunkName: "users-roles" */ './pages/Roles');
-              <RolesPage />
+
-            </CheckPagePermissions>
+            return component;
-          ),
+          },
           permissions: pluginPermissions.accessRoles,
         },
         {
@@ -53,11 +48,13 @@ export default {
           },
           id: 'providers',
           to: `/settings/${pluginId}/providers`,
-          Component: () => (
+          Component: async () => {
-            <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+            const component = await import(
-              <ProvidersPage />
+              /* webpackChunkName: "users-providers" */ './pages/Providers'
-            </CheckPagePermissions>
+            );
-          ),
+
+            return component;
+          },
           permissions: pluginPermissions.readProviders,
         },
         {
@@ -67,11 +64,13 @@ export default {
           },
           id: 'email-templates',
           to: `/settings/${pluginId}/email-templates`,
-          Component: () => (
+          Component: async () => {
-            <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+            const component = await import(
-              <EmailTemplatesPage />
+              /* webpackChunkName: "users-email" */ './pages/EmailTemplates'
-            </CheckPagePermissions>
+            );
-          ),
+
+            return component;
+          },
           permissions: pluginPermissions.readEmailTemplates,
         },
         {
@@ -81,11 +80,13 @@ export default {
           },
           id: 'advanced-settings',
           to: `/settings/${pluginId}/advanced-settings`,
-          Component: () => (
+          Component: async () => {
-            <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+            const component = await import(
-              <AdvancedSettingsPage />
+              /* webpackChunkName: "users-advanced-settings" */ './pages/AdvancedSettings'
-            </CheckPagePermissions>
+            );
-          ),
+
+            return component;
+          },
           permissions: pluginPermissions.readAdvancedSettings,
         },
       ]

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 = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
+    <AdvancedSettingsPage />
+  </CheckPagePermissions>
+);
+
 const AdvancedSettingsPage = () => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
@@ -212,4 +219,4 @@ const AdvancedSettingsPage = () => {
   );
 };
 
-export default AdvancedSettingsPage;
+export default Protected;

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 = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
+    <EmailTemplatesPage />
+  </CheckPagePermissions>
+);
+
 const EmailTemplatesPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -232,4 +239,4 @@ const EmailTemplatesPage = () => {
   );
 };
 
-export default EmailTemplatesPage;
+export default Protected;

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 = () => (
+  <CheckPagePermissions permissions={pluginPermissions.readProviders}>
+    <ProvidersPage />
+  </CheckPagePermissions>
+);
+
 const ProvidersPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -279,4 +286,4 @@ const ProvidersPage = () => {
   );
 };
 
-export default ProvidersPage;
+export default ProtectedProvidersPage;

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 (
-    <Switch>
+    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
-      <Route path={`/settings/${pluginId}/roles/new`} component={ProtectedRolesCreatePage} exact />
+      <Switch>
-      <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
+        <Route
-      <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
+          path={`/settings/${pluginId}/roles/new`}
-      <Route path="" component={NotFound} />
+          component={ProtectedRolesCreatePage}
-    </Switch>
+          exact
+        />
+        <Route path={`/settings/${pluginId}/roles/:id`} component={ProtectedRolesEditPage} exact />
+        <Route path={`/settings/${pluginId}/roles`} component={ProtectedRolesListPage} exact />
+        <Route path="" component={NotFound} />
+      </Switch>
+    </CheckPagePermissions>
   );
 };