fix imports harder: avoid dynamic imports and bundle all themes, localization and ace-editor files with the app

.babelrc

@@ -1,12 +1,14 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env", {"modules": "commonjs"}
+    ],
     "@babel/preset-react",
     "@lingui/babel-preset-react"
   ],
   "plugins": [
-    "@babel/transform-runtime",
-    "@babel/syntax-dynamic-import",
-    "macros"
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-syntax-dynamic-import",
+    "babel-plugin-macros"
   ]
 }

locales/en/messages.po

@@ -1302,7 +1302,6 @@ msgstr "Names"
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
-#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98
@@ -1316,6 +1315,7 @@ msgid "Namespace: {0}"
 msgstr "Namespace: {0}"
 
 #: src/renderer/components/+namespaces/namespaces.tsx:30
+#: src/renderer/components/app.tsx:36
 #: src/renderer/components/layout/sidebar.tsx:85
 msgid "Namespaces"
 msgstr "Namespaces"

locales/fi/messages.po

@@ -1293,7 +1293,6 @@ msgstr ""
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
-#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98
@@ -1307,6 +1306,7 @@ msgid "Namespace: {0}"
 msgstr ""
 
 #: src/renderer/components/+namespaces/namespaces.tsx:30
+#: src/renderer/components/app.tsx:36
 #: src/renderer/components/layout/sidebar.tsx:85
 msgid "Namespaces"
 msgstr ""

locales/ru/messages.po

@@ -1303,7 +1303,6 @@ msgstr ""
 #: src/renderer/components/+workloads-jobs/jobs.tsx:38
 #: src/renderer/components/+workloads-pods/pods.tsx:75
 #: src/renderer/components/+workloads-statefulsets/statefulsets.tsx:41
-#: src/renderer/components/app.tsx:37
 #: src/renderer/components/dock/edit-resource.tsx:91
 #: src/renderer/components/dock/install-chart.tsx:122
 #: src/renderer/components/dock/upgrade-chart.tsx:98
@@ -1317,6 +1316,7 @@ msgid "Namespace: {0}"
 msgstr "Namespace: {0}"
 
 #: src/renderer/components/+namespaces/namespaces.tsx:30
+#: src/renderer/components/app.tsx:36
 #: src/renderer/components/layout/sidebar.tsx:85
 msgid "Namespaces"
 msgstr "Namespaces"

src/renderer/components/ace-editor/ace-editor.tsx

@@ -3,11 +3,9 @@
 import "./ace-editor.scss"
 
 import React from "react"
-import { observable } from "mobx";
 import { observer } from "mobx-react";
-import { Ace } from "ace-builds"
+import AceBuild, { Ace } from "ace-builds"
 import { autobind, cssNames } from "../../utils";
-import { Spinner } from "../spinner";
 import { themeStore } from "../../theme.store";
 
 interface Props extends Partial<Ace.EditorOptions> {
@@ -40,39 +38,21 @@ export class AceEditor extends React.Component<Props, State> {
   private editor: Ace.Editor;
   private elem: HTMLElement;
 
-  @observable ready = false;
-
-  async loadEditor() {
-    return await import(
-      /* webpackChunkName: "ace" */
-      "ace-builds"
-    );
-  }
-
-  loadTheme(theme: string) {
-    return import(
-      /* webpackChunkName: "ace/[request]" */
-      `ace-builds/src-min-noconflict/theme-${theme}`
-    );
-  }
-
-  loadExtension(ext: string) {
-    return import(
-      /* webpackChunkName: "ace/[request]" */
-      `ace-builds/src-min-noconflict/ext-${ext}`
-    );
-  }
-
-  loadMode(mode: string) {
-    return import(
-      /* webpackChunkName: "ace/[request]" */
-      `ace-builds/src-min-noconflict/mode-${mode}`
-    )
+  constructor(props: Props) {
+    super(props);
+    require("ace-builds/src-noconflict/mode-yaml")
+    require("ace-builds/src-noconflict/theme-dreamweaver")
+    require("ace-builds/src-noconflict/theme-terminal")
+    require("ace-builds/src-noconflict/ext-searchbox")
   }
 
   get theme() {
-    return themeStore.activeTheme.type == "light"
-      ? "dreamweaver" : "terminal";
+    switch (themeStore.activeTheme.type) {
+      case "light":
+        return "dreamweaver"
+      case "dark":
+        return "terminal";
+    }
   }
 
   async componentDidMount() {
@@ -82,15 +62,8 @@ export class AceEditor extends React.Component<Props, State> {
       ...options
     } = this.props;
 
-    // load ace-editor, theme and mode
-    const ace = await this.loadEditor();
-    await Promise.all([
-      this.loadTheme(this.theme),
-      this.loadMode(mode)
-    ]);
-
     // setup editor
-    this.editor = ace.edit(this.elem, options);
+    this.editor = AceBuild.edit(this.elem, options);
     this.setTheme(this.theme);
     this.setMode(mode);
     this.setCursorPos(cursorPos);
@@ -99,11 +72,9 @@ export class AceEditor extends React.Component<Props, State> {
     this.editor.on("change", this.onChange);
     this.editor.selection.on("changeCursor", this.onCursorPosChange);
 
-    // load extensions
-    this.loadExtension("searchbox");
-
-    if (autoFocus) this.focus();
-    this.ready = true;
+    if (autoFocus) {
+      this.focus();
+    }
   }
 
   componentDidUpdate() {
@@ -143,12 +114,10 @@ export class AceEditor extends React.Component<Props, State> {
   }
 
   async setMode(mode: string) {
-    await this.loadMode(mode);
     this.editor.session.setMode(`ace/mode/${mode}`);
   }
 
   async setTheme(theme: string) {
-    await this.loadTheme(theme);
     this.editor.setTheme(`ace/theme/${theme}`);
   }
 
@@ -183,7 +152,6 @@ export class AceEditor extends React.Component<Props, State> {
     return (
       <div className={cssNames("AceEditor", className, { hidden }, themeType)}>
         <div className="editor" ref={e => this.elem = e}/>
-        {!this.ready && <Spinner center/>}
       </div>
     )
   }

src/renderer/i18n.ts

@@ -41,17 +41,10 @@ export class LocalizationStore {
     await this.setLocale(this.activeLang);
   }
 
-  async load(locale: string) {
-    const { messages } = await import(
-      /* webpackChunkName: "i18n-[request]" */
-      `@lingui/loader!../../locales/${locale}/messages.po`
-      );
-    _i18n.loadLocaleData(locale, { plurals: plurals[locale] });
-    _i18n.load(locale, messages);
-  }
-
   async setLocale(locale: string) {
-    await this.load(locale);
+    const catalog = require(`@lingui/loader!../../locales/${locale}/messages.po`);
+    _i18n.loadLocaleData(locale, { plurals: plurals[locale] });
+    _i18n.load(locale, catalog.messages);
 
     // set moment's locale before activeLang for proper next render() in app
     moment.locale(locale);

src/renderer/theme.store.ts

@@ -167,7 +167,7 @@ export class ThemeStore {
       return this.themes.get(themeId);
     }
     try {
-      const theme: ITheme = await import(
+      const theme: ITheme = require(
         /* webpackMode: "lazy", webpackChunkName: "theme/[request]" */
         `./themes/${themeId}.json`
       );

src/renderer/webpack.renderer.js

@@ -12,7 +12,6 @@ module.exports = function (config, env) {
       compilerOptions: {
         jsx: "preserve", // @lingui/babel-preset-react
         target: "es2016", // @lingui/babel-preset-react
-        module: "esnext", // https://webpack.js.org/guides/code-splitting/#dynamic-imports
       }
     })
     return ["babel-loader", loader]