Move Registration to application editor

app/client/package.json

@@ -107,6 +107,7 @@
     "start": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=DEVELOPMENT HOST=dev.appsmith.com craco start",
     "build": "./build.sh",
     "build-local": "craco --max-old-space-size=4096 build --config craco.build.config.js",
+    "build-staging": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=STAGING craco --max-old-space-size=4096 build --config craco.build.config.js",
     "test": "cypress/test.sh",
     "eject": "react-scripts eject",
     "start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",

app/client/src/components/utils/AppsmithLoader.tsx

@@ -0,0 +1 @@
+export default null;

app/client/src/index.tsx

@@ -4,12 +4,10 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import Loader from "pages/common/Loader";
 import "./index.css";
-import * as serviceWorker from "./serviceWorker";
+// import * as serviceWorker from "./serviceWorker";
 import { Router, Switch, Redirect } from "react-router-dom";
 import history from "./utils/history";
 import { ThemeProvider, theme } from "constants/DefaultTheme";
-import { DndProvider } from "react-dnd";
-import TouchBackend from "react-dnd-touch-backend";
 
 import { appInitializer } from "utils/AppsmithUtils";
 import AppRoute from "./pages/common/AppRoute";
@@ -31,22 +29,26 @@ import {
 
 const loadingIndicator = <Loader />;
 const App = lazy(() => import("./App"));
-const UserAuth = lazy(() => import("./pages/UserAuth"));
+const UserAuth = lazy(() =>
-const Editor = lazy(() => import("./pages/Editor"));
+  import(/* webpackPrefetch: 5 */ "./pages/UserAuth"),
-const Applications = lazy(() => import("./pages/Applications"));
+);
-const PageNotFound = lazy(() => import("./pages/common/PageNotFound"));
+const Editor = lazy(() => import(/* webpackPrefetch: 3 */ "./pages/Editor"));
-const AppViewer = lazy(() => import("./pages/AppViewer"));
+const Applications = lazy(() =>
-const Organization = lazy(() => import("./pages/organization"));
+  import(/* webpackPrefetch: 4 */ "./pages/Applications"),
-const Users = lazy(() => import("./pages/users"));
+);
+const PageNotFound = lazy(() =>
+  import(/* webpackPrefetch: true */ "./pages/common/PageNotFound"),
+);
+const AppViewer = lazy(() =>
+  import(/* webpackPrefetch: 2 */ "./pages/AppViewer"),
+);
+const Organization = lazy(() =>
+  import(/* webpackPrefetch: 1 */ "./pages/organization"),
+);
+const Users = lazy(() => import(/* webpackPrefetch: true */ "./pages/users"));
 appInitializer();
 
 ReactDOM.render(
-  <DndProvider
-    backend={TouchBackend}
-    options={{
-      enableMouseEvents: true,
-    }}
-  >
   <Provider store={store}>
     <ThemeProvider theme={theme}>
       <ToastContainer
@@ -115,12 +117,11 @@ ReactDOM.render(
         </Suspense>
       </Router>
     </ThemeProvider>
-    </Provider>
+  </Provider>,
-  </DndProvider>,
   document.getElementById("root"),
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();

app/client/src/pages/Editor/index.tsx

@@ -12,6 +12,8 @@ import { UserApplication } from "constants/userConstants";
 import { AppState } from "reducers";
 import EditorHeader from "./EditorHeader";
 import MainContainer from "./MainContainer";
+import { DndProvider } from "react-dnd";
+import TouchBackend from "react-dnd-touch-backend";
 import {
   getCurrentApplicationId,
   getCurrentLayoutId,
@@ -35,6 +37,7 @@ import { RenderModes } from "constants/WidgetConstants";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { fetchPage } from "actions/pageActions";
+import { editorInitializer } from "utils/EditorUtils";
 
 type EditorProps = {
   currentPageName?: string;
@@ -62,9 +65,13 @@ type EditorProps = {
 class Editor extends Component<EditorProps> {
   public state = {
     isDialogOpen: false,
+    registered: false,
   };
 
   componentDidMount() {
+    editorInitializer().then(() => {
+      this.setState({ registered: true });
+    });
     const { applicationId, pageId } = this.props.match.params;
     if (applicationId && pageId) {
       this.props.initEditor(applicationId, pageId);
@@ -116,8 +123,14 @@ class Editor extends Component<EditorProps> {
     if (!this.props.match.params.applicationId) {
       return <Redirect to="/applications" />;
     }
-    if (!this.props.isEditorInitialized) return null;
+    if (!this.props.isEditorInitialized || !this.state.registered) return null;
     return (
+      <DndProvider
+        backend={TouchBackend}
+        options={{
+          enableMouseEvents: true,
+        }}
+      >
         <div>
           <Helmet>
             <meta charSet="utf-8" />
@@ -165,6 +178,7 @@ class Editor extends Component<EditorProps> {
             </div>
           </Dialog>
         </div>
+      </DndProvider>
     );
   }
 }

app/client/src/utils/AppsmithUtils.tsx

@@ -3,12 +3,8 @@ import { getAppsmithConfigs } from "configs";
 import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
 import FontFaceObserver from "fontfaceobserver";
-import PropertyControlRegistry from "./PropertyControlRegistry";
-import WidgetBuilderRegistry from "./WidgetRegistry";
 import { Property } from "api/ActionAPI";
 import _ from "lodash";
-import moment from "moment-timezone";
-import ValidationRegistry from "./ValidationRegistry";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import * as log from "loglevel";
 import { LogLevelDesc } from "loglevel";
@@ -27,10 +23,6 @@ export const createReducer = (
 };
 
 export const appInitializer = () => {
-  WidgetBuilderRegistry.registerWidgetBuilders();
-  PropertyControlRegistry.registerPropertyControlBuilders();
-  ValidationRegistry.registerInternalValidators();
-  moment.tz.setDefault(moment.tz.guess());
   const appsmithConfigs = getAppsmithConfigs();
   if (appsmithConfigs.sentry.enabled && appsmithConfigs.sentry.config) {
     Sentry.init(appsmithConfigs.sentry.config);

app/client/src/utils/EditorUtils.ts

@@ -0,0 +1,11 @@
+import WidgetBuilderRegistry from "./WidgetRegistry";
+import PropertyControlRegistry from "./PropertyControlRegistry";
+import ValidationRegistry from "./ValidationRegistry";
+export const editorInitializer = async () => {
+  WidgetBuilderRegistry.registerWidgetBuilders();
+  PropertyControlRegistry.registerPropertyControlBuilders();
+  ValidationRegistry.registerInternalValidators();
+
+  const moment = await import("moment-timezone");
+  moment.tz.setDefault(moment.tz.guess());
+};

app/client/src/utils/WidgetRegistry.tsx

@@ -37,8 +37,7 @@ import FormButtonWidget, {
 import IconWidget, { IconWidgetProps } from "widgets/IconWidget";
 
 import CanvasWidget from "widgets/CanvasWidget";
-
+export default class WidgetBuilderRegistry {
-class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder(
       "CONTAINER_WIDGET",
@@ -281,5 +280,3 @@ class WidgetBuilderRegistry {
     );
   }
 }
-
-export default WidgetBuilderRegistry;

app/client/src/widgets/ChartWidget.tsx

@@ -7,7 +7,9 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import Skeleton from "components/utils/Skeleton";
 
 const ChartComponent = lazy(() =>
-  import("components/designSystems/appsmith/ChartComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/appsmith/ChartComponent"
+  ),
 );
 
 class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {

app/client/src/widgets/TableWidget.tsx

@@ -16,7 +16,9 @@ import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 
 const TableComponent = lazy(() =>
-  import("components/designSystems/syncfusion/TableComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/syncfusion/TableComponent"
+  ),
 );
 
 function constructColumns(