Browse Source

ref(ui): Refactor frontend webpack entrypoints (#26546)

This is a small refactor for our frontend webpack entrypoints in preparation for async loading of frontend bundles. There should be no changes in behavior, but will cut down on the diff in a future PR.
Billy Vong 3 years ago
parent
commit
59b702163a

+ 31 - 0
static/app/bootstrap/index.tsx

@@ -0,0 +1,31 @@
+import {Config} from 'app/types';
+
+const BOOTSTRAP_URL = '/api/client-config/';
+
+const bootApplication = (data: Config) => {
+  window.csrfCookieName = data.csrfCookieName;
+
+  return data;
+};
+
+async function bootWithHydration() {
+  const response = await fetch(BOOTSTRAP_URL);
+  const data: Config = await response.json();
+
+  window.__initialData = data;
+
+  return bootApplication(data);
+}
+
+export async function bootstrap() {
+  const bootstrapData = window.__initialData;
+
+  // If __initialData is not already set on the window, we are likely running in
+  // pure SPA mode, meaning django is not serving our frontend application and we
+  // need to make an API request to hydrate the bootstrap data to boot the app.
+  if (bootstrapData === undefined) {
+    return await bootWithHydration();
+  }
+
+  return bootApplication(bootstrapData);
+}

+ 5 - 27
static/app/index.tsx

@@ -1,31 +1,9 @@
-import {Config} from 'app/types';
+import {bootstrap} from 'app/bootstrap';
+import {initializeMain} from 'app/bootstrap/initializeMain';
 
-const BOOTSTRAP_URL = '/api/client-config/';
-
-const bootApplication = (data: Config) => {
-  window.csrfCookieName = data.csrfCookieName;
-
-  // Once data hydration is done we can initialize the app
-  const {initializeMain} = require('./bootstrap/initializeMain');
+async function app() {
+  const data = await bootstrap();
   initializeMain(data);
-};
-
-async function bootWithHydration() {
-  const response = await fetch(BOOTSTRAP_URL);
-  const data: Config = await response.json();
-
-  window.__initialData = data;
-
-  bootApplication(data);
 }
 
-const bootstrapData = window.__initialData;
-
-// If __initialData is not already set on the window, we are likely running in
-// pure SPA mode, meaning django is not serving our frontend application and we
-// need to make an API request to hydrate the bootstrap data to boot the app.
-if (bootstrapData === undefined) {
-  bootWithHydration();
-} else {
-  bootApplication(bootstrapData);
-}
+app();

+ 5 - 3
static/app/views/integrationPipeline/index.tsx

@@ -1,5 +1,7 @@
-import 'focus-visible';
+import {init} from './init';
 
-import {initializePipelineView} from 'app/bootstrap/initializePipelineView';
+async function integrationPipeline() {
+  init();
+}
 
-initializePipelineView(window.__initialData);
+integrationPipeline();

+ 7 - 0
static/app/views/integrationPipeline/init.tsx

@@ -0,0 +1,7 @@
+import 'focus-visible';
+
+import {initializePipelineView} from 'app/bootstrap/initializePipelineView';
+
+export function init() {
+  initializePipelineView(window.__initialData);
+}