deephaven · mofojed · Feb 12, 2023 · Feb 10, 2023 · Feb 10, 2023 · Feb 10, 2023
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -43,7 +43,7 @@ jobs:
         run: npm ci --no-audit
 
       - name: Build
-        run: VITE_CORE_API_URL=http://localhost:10000/jsapi npm run build
+        run: npm run build
 
       - name: Install Playwright dependencies
         run: PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install --with-deps

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -161,8 +161,10 @@
     "@deephaven/grid": "file:packages/grid",
     "@deephaven/icons": "file:packages/icons",
     "@deephaven/iris-grid": "file:packages/iris-grid",
+    "@deephaven/jsapi-bootstrap": "file:packages/jsapi-bootstrap",
     "@deephaven/jsapi-components": "file:packages/jsapi-components",
     "@deephaven/jsapi-shim": "file:packages/jsapi-shim",
+    "@deephaven/jsapi-types": "file:packages/jsapi-types",
     "@deephaven/jsapi-utils": "file:packages/jsapi-utils",
     "@deephaven/log": "file:packages/log",
     "@deephaven/mocks": "file:packages/mocks",

diff --git a/packages/code-studio/index.html b/packages/code-studio/index.html
@@ -13,40 +13,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="/manifest.json" />
-
     <link rel="icon" href="#VITE_FAVICON#" />
-
-    <!-- The script is currently tightly coupled with the server -->
-    <script
-      src="#VITE_CORE_API_URL#/#VITE_OPEN_API_NAME#"
-      type="text/javascript"
-    ></script>
-    <script
-      src="#VITE_CORE_API_URL#/#VITE_CORE_API_NAME#"
-      type="text/javascript"
-    ></script>
-    <script>
-      (function () {
-        document.addEventListener('DOMContentLoaded', function () {
-          // If for some reason the API doesn't load, our app will not work. Write out a message to help the user.
-          if (!window.dh) {
-            document.getElementById('root').insertAdjacentHTML(
-              'afterbegin',
-              `<div class="modal  d-block">
-                <div class="modal-dialog modal-dialog-centered theme-bg-light">
-                  <div class="modal-content">
-                    <div class="modal-body">
-                      <h5 class="modal-title">Error: Unable to load API</h5>
-                      <p class="text-break">Ensure the server is running and you are able to reach #VITE_CORE_API_URL#/#VITE_CORE_API_NAME#, then refresh the page.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>`
-            );
-          }
-        });
-      })();
-    </script>
     <title>Deephaven</title>
   </head>
   <body>

diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json
@@ -22,7 +22,9 @@
     "@deephaven/grid": "file:../grid",
     "@deephaven/icons": "file:../icons",
     "@deephaven/iris-grid": "file:../iris-grid",
+    "@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
     "@deephaven/jsapi-shim": "file:../jsapi-shim",
+    "@deephaven/jsapi-types": "file:../jsapi-types",
     "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",
     "@deephaven/pouch-storage": "file:../pouch-storage",

diff --git a/packages/code-studio/src/AppRoot.tsx b/packages/code-studio/src/AppRoot.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { Provider } from 'react-redux';
+import { MonacoUtils } from '@deephaven/console';
+import { store } from '@deephaven/redux';
+import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import AppRouter from './main/AppRouter';
+import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
+import { unregister } from './serviceWorker';
+
+export function AppRoot() {
+  useEffect(() => {
+    unregister();
+    DownloadServiceWorkerUtils.registerOnLoaded();
+    MonacoUtils.init({ getWorker: () => new MonacoWorker() });
+
+    // disable annoying dnd-react warnings
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+  }, []);
+
+  return (
+    <Provider store={store}>
+      <AppRouter />
+    </Provider>
+  );
+}
+
+export default AppRoot;
diff --git a/packages/code-studio/src/index.tsx b/packages/code-studio/src/index.tsx
@@ -1,29 +1,25 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
 import 'fira';
 import '@deephaven/components/scss/BaseStyleSheet.scss';
-import { MonacoUtils } from '@deephaven/console';
-import { store } from '@deephaven/redux';
-import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import AppRouter from './main/AppRouter';
-import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
+import { LoadingOverlay } from '@deephaven/components';
+import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
 import logInit from './log/LogInit';
-import { unregister } from './serviceWorker';
 
 logInit();
 
+const AppRoot = React.lazy(() => import('./AppRoot'));
+
 ReactDOM.render(
-  <Provider store={store}>
-    <AppRouter />
-  </Provider>,
+  <ApiBootstrap
+    apiUrl={`${import.meta.env.VITE_CORE_API_URL}/${
+      import.meta.env.VITE_CORE_API_NAME
+    }`}
+    setGlobally
+  >
+    <Suspense fallback={<LoadingOverlay />}>
+      <AppRoot />
+    </Suspense>
+  </ApiBootstrap>,
   document.getElementById('root')
 );
-unregister();
-DownloadServiceWorkerUtils.registerOnLoaded();
-MonacoUtils.init({ getWorker: () => new MonacoWorker() });
-
-// disable annoying dnd-react warnings
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-window['__react-beautiful-dnd-disable-dev-warnings'] = true;
diff --git a/packages/code-studio/tsconfig.json b/packages/code-studio/tsconfig.json
@@ -6,17 +6,8 @@
     "noEmit": true,
     "emitDeclarationOnly": false
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.js",
-    "src/**/*.jsx"
-  ],
-  "exclude": [
-    "node_modules",
-    "src/**/*.test.*",
-    "src/**/__mocks__/*"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+  "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"],
   "references": [
     {
       "path": "../chart"
@@ -45,9 +36,18 @@
     {
       "path": "../iris-grid"
     },
+    {
+      "path": "../jsapi-bootstrap"
+    },
     {
       "path": "../jsapi-shim"
     },
+    {
+      "path": "../jsapi-types"
+    },
+    {
+      "path": "../jsapi-utils"
+    },
     {
       "path": "../log"
     },
@@ -70,4 +70,4 @@
       "path": "../filters"
     }
   ]
-}
+}
diff --git a/packages/code-studio/vite.config.ts b/packages/code-studio/vite.config.ts
@@ -107,6 +107,7 @@ export default defineConfig(({ mode }) => {
       outDir: path.resolve(__dirname, env.VITE_BUILD_PATH),
       emptyOutDir: true,
       sourcemap: true,
+      target: 'esnext',
       rollupOptions: {
         output: {
           manualChunks: id => {

diff --git a/packages/components/src/LoadingOverlay.tsx b/packages/components/src/LoadingOverlay.tsx
@@ -8,9 +8,9 @@ import LoadingSpinner from './LoadingSpinner';
 import './LoadingOverlay.scss';
 
 type LoadingOverlayProps = {
-  isLoaded: boolean;
-  isLoading: boolean;
-  errorMessage: string | null;
+  isLoaded?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string | null;
   'data-testid'?: string;
 };
 

diff --git a/packages/embed-chart/.env b/packages/embed-chart/.env
@@ -2,7 +2,6 @@
 # Set this value to __mocks__ to use mock server instead
 VITE_CORE_API_URL=/jsapi
 VITE_CORE_API_NAME=dh-core.js
-VITE_OPEN_API_NAME=dh-internal.js
 VITE_BUILD_PATH=./build
 VITE_LOG_LEVEL=2
 VITE_FAVICON=./favicon-cc-app.svg