feat: use lazy loading for custom ui extensions

splunk · May 20, 2021 · 7b3f349 · 7b3f349
1 parent 066b6a0
commit 7b3f349
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 32 deletions.
diff --git a/ui/src/main/webapp/components/BaseFormView.jsx b/ui/src/main/webapp/components/BaseFormView.jsx
@@ -14,6 +14,7 @@ import { MODE_CLONE, MODE_CREATE, MODE_EDIT, MODE_CONFIG } from '../constants/mo
 import { PAGE_INPUT, PAGE_CONF } from '../constants/pages';
 import { axiosCallWrapper } from '../util/axiosCallWrapper';
 import { parseErrorMsg, getFormattedMessage } from '../util/messageUtil';
+import { getBuildDirPath } from '../util/script';
 
 import {
     ERROR_REQUEST_TIMEOUT_TRY_AGAIN,
@@ -734,17 +735,20 @@ class BaseFormView extends PureComponent {
 
     // generatesubmitMessage
     loadHook = (module, globalConfig) => {
-        const myPromise = new Promise((myResolve) => {
-            __non_webpack_require__([`app/${this.appName}/js/build/custom/${module}`], (Hook) => {
-                this.hook = new Hook(
-                    globalConfig,
-                    this.props.serviceName,
-                    this.state,
-                    this.props.mode,
-                    this.util
-                );
-                myResolve(Hook);
-            });
+        const myPromise = new Promise((resolve) => {
+            import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
+                (external) => {
+                    const Hook = external.default;
+                    this.hook = new Hook(
+                        globalConfig,
+                        this.props.serviceName,
+                        this.state,
+                        this.props.mode,
+                        this.util
+                    );
+                    resolve(Hook);
+                }
+            );
         });
         return myPromise;
     };

diff --git a/ui/src/main/webapp/components/CustomControl.jsx b/ui/src/main/webapp/components/CustomControl.jsx
@@ -3,21 +3,21 @@ import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
 
 import { getUnifiedConfigs } from '../util/util';
+import { getBuildDirPath } from '../util/script';
 
 class CustomControl extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            loading: true
+            loading: true,
         };
         this.shouldRender = true;
     }
 
     componentDidMount() {
         const globalConfig = getUnifiedConfigs();
-        const appName = globalConfig.meta.name;
 
-        this.loadCustomControl(this.props.controlOptions.src, appName).then((Control) => {
+        this.loadCustomControl(this.props.controlOptions.src).then((Control) => {
             const customControl = new Control(
                 globalConfig,
                 this.el,
@@ -30,7 +30,7 @@ class CustomControl extends Component {
             if (typeof customControl.validation === 'function') {
                 this.props.addCustomValidator(this.props.field, customControl.validation);
             }
-            this.setState({loading: false});
+            this.setState({ loading: false });
         });
     }
 
@@ -42,11 +42,14 @@ class CustomControl extends Component {
         return false;
     }
 
-    loadCustomControl = (module, appName) => {
-        const myPromise = new Promise((myResolve) => {
-            __non_webpack_require__([`app/${appName}/js/build/custom/${module}`], (Control) => {
-                myResolve(Control);
-            });
+    loadCustomControl = (module) => {
+        const myPromise = new Promise((resolve) => {
+            import(/* webpackIgnore: true */ `${getBuildDirPath()}/custom/${module}.js`).then(
+                (external) => {
+                    const Control = external.default;
+                    resolve(Control);
+                }
+            );
         });
         return myPromise;
     };
@@ -58,8 +61,15 @@ class CustomControl extends Component {
     render() {
         return (
             <>
-                {this.state.loading && _("Loading...")}
-                {<span ref={(el) => { this.el = el; }} style={{visibility: this.state.loading ? 'hidden': 'visible'}} />}
+                {this.state.loading && _('Loading...')}
+                {
+                    <span
+                        ref={(el) => {
+                            this.el = el;
+                        }}
+                        style={{ visibility: this.state.loading ? 'hidden' : 'visible' }}
+                    />
+                }
             </>
         );
     }

diff --git a/ui/src/main/webapp/components/CustomMenu.jsx b/ui/src/main/webapp/components/CustomMenu.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
 import { getUnifiedConfigs } from '../util/util';
+import { getBuildDirPath } from '../util/script';
 
 class CustomMenu extends Component {
     constructor(props) {
@@ -38,10 +39,12 @@ class CustomMenu extends Component {
         const globalConfig = getUnifiedConfigs();
         const appName = globalConfig.meta.name;
         return new Promise((resolve) => {
-            __non_webpack_require__(
-                [`app/${appName}/js/build/custom/${this.props.fileName}`],
-                (Control) => resolve(Control)
-            );
+            import(
+                /* webpackIgnore: true */ `${getBuildDirPath()}/custom/${this.props.fileName}.js`
+            ).then((external) => {
+                const Control = external.default;
+                resolve(Control);
+            });
         });
     };
 

diff --git a/ui/src/main/webapp/components/table/CustomTableControl.jsx b/ui/src/main/webapp/components/table/CustomTableControl.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { _ } from '@splunk/ui-utils/i18n';
 
 import { getUnifiedConfigs } from '../../util/util';
+import { getBuildDirPath } from '../../util/script';
 
 class CustomTableControl extends Component {
     constructor(props) {
@@ -40,13 +41,13 @@ class CustomTableControl extends Component {
     }
 
     loadCustomControl = () => {
-        const globalConfig = getUnifiedConfigs();
-        const appName = globalConfig.meta.name;
         return new Promise((resolve) => {
-            __non_webpack_require__(
-                [`app/${appName}/js/build/custom/${this.props.fileName}`],
-                (Control) => resolve(Control)
-            );
+            import(
+                /* webpackIgnore: true */ `${getBuildDirPath()}/custom/${this.props.fileName}.js`
+            ).then((external) => {
+                const Control = external.default;
+                resolve(Control);
+            });
         });
     };