Create a separate bundle for settings

[MAILPOET-2676]

assets/js/src/settings/index.tsx

@@ -1,37 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  HashRouter, Switch, Route, Redirect,
-} from 'react-router-dom';
-import Notices from 'notices/notices.jsx';
+import { HashRouter } from 'react-router-dom';
 import { GlobalContext, useGlobalContextValue } from 'context';
-import MailPoet from 'mailpoet';
-import {
-  Advanced,
-  Basics,
-  KeyActivation,
-  SendWith,
-  SignupConfirmation,
-  WooCommerce,
-} from './pages';
 import { initStore } from './store';
-import Tabs from './components/tabs';
+import Settings from './settings';
 
-const App = () => (
+const Entry = () => (
   <GlobalContext.Provider value={useGlobalContextValue(window)}>
     <HashRouter>
-      <Notices />
-      <h1 className="title">{MailPoet.I18n.t('settings')}</h1>
-      <Tabs />
-      <Switch>
-        <Route path="/basics" component={Basics} />
-        <Route path="/signup" component={SignupConfirmation} />
-        <Route path="/mta" component={SendWith} />
-        <Route path="/woocommerce" component={WooCommerce} />
-        <Route path="/advanced" component={Advanced} />
-        <Route path="/premium" component={KeyActivation} />
-        <Redirect to="/basics" />
-      </Switch>
+      <Settings />
     </HashRouter>
   </GlobalContext.Provider>
 );
@@ -39,5 +16,5 @@ const App = () => (
 const container = document.getElementById('settings_container');
 if (container) {
   initStore(window);
-  ReactDOM.render(<App />, container);
+  ReactDOM.render(<Entry />, container);
 }

assets/js/src/settings/settings.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import Notices from 'notices/notices.jsx';
+import MailPoet from 'mailpoet';
+import {
+  Advanced,
+  Basics,
+  KeyActivation,
+  SendWith,
+  SignupConfirmation,
+  WooCommerce,
+} from './pages';
+import Tabs from './components/tabs';
+
+export default function Settings() {
+  return (
+    <>
+      <Notices />
+      <h1 className="title">{MailPoet.I18n.t('settings')}</h1>
+      <Tabs />
+      <Switch>
+        <Route path="/basics" component={Basics} />
+        <Route path="/signup" component={SignupConfirmation} />
+        <Route path="/mta" component={SendWith} />
+        <Route path="/woocommerce" component={WooCommerce} />
+        <Route path="/advanced" component={Advanced} />
+        <Route path="/premium" component={KeyActivation} />
+        <Redirect to="/basics" />
+      </Switch>
+    </>
+  );
+}

assets/js/src/webpack_admin_index.jsx

@@ -15,7 +15,6 @@ import 'old_settings/tabs.js'; // side effect - assigns to MailPoet.Router, exec
 import 'old_settings/premium_tab/premium_tab.jsx'; // side effect - renders ReactDOM to document
 import 'help/help.jsx'; // side effect - renders ReactDOM to document
 import 'old_settings/reinstall_from_scratch.js'; // side effect - adds event handler to document
-import 'settings/index.tsx'; // side effect - renders Settings to document
 import 'subscribers/importExport/import.jsx'; // side effect - executes on doc ready, adds events
 import 'subscribers/importExport/export.js'; // side effect - executes on doc ready
 import 'wizard/wizard.jsx'; // side effect - renders ReactDOM to document

views/settings.html

@@ -58,3 +58,7 @@
     'premiumTabMssKeyNotValidMessage': __('Your key is not valid for the MailPoet Sending Service', 'mailpoet'),
   }) %>
 <% endblock %>
+
+<% block after_javascript %>
+<%= javascript('settings.js')%>
+<% endblock %>

webpack.config.js

@@ -379,7 +379,18 @@ const postEditorBlock = {
   },
 };
 
-module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig, postEditorBlock].map((config) => {
+// Settings config
+const settingsConfig = {
+  name: 'settings',
+  entry: {
+    settings: 'settings/index.tsx',
+  },
+  externals: {
+    'mailpoet': 'MailPoet',
+  },
+};
+
+module.exports = [adminConfig, publicConfig, migratorConfig, formEditorConfig, testConfig, postEditorBlock, settingsConfig].map((config) => {
   if (config.name !== 'test') {
     config.plugins = config.plugins || [];
     config.plugins.push(