Skip to content

Commit 9aab657

Browse files
mofojedmofojed
authored
feat: Import JS API as a module (#1084)
- Pulled the types out of `jsapi-shim` into a separate pacakge `jsapi-types` - Now other packages can import just the types without the shim possibly failing because the API isn't loaded yet - Will be deprecated/replaced with the automatically published TS definitions when @niloc132 has finished that - Added `jsapi-bootstrap` package to load the API and display an error if it can't load - Can set the API globally, or use it from a React context object - Displays an error if the API cannot be loaded - Use code-splitting to bootstrap the API globally to keep existing code running until we port everything over - We should now look at completing #444 , and get rid of the `embed-grid` and `embed-chart` packages. We can now code-split at the top level. - Enabled proxy in both embed-grid and embed-chart, keeping the loading similar between all three apps - Requires change deephaven/deephaven-core#2733 Breaking Change: The JS API packaged as a module is now required for the `code-studio`, `embed-grid`, and `embed-chart` applications. Existing (Enterprise) applications should be able to use `jsapi-shim` still and load the JS API using the old method.
1 parent 805bb37 commit 9aab657

45 files changed

Lines changed: 1671 additions & 1224 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/e2e.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ jobs:
4343
run: npm ci --no-audit
4444

4545
- name: Build
46-
run: VITE_CORE_API_URL=http://localhost:10000/jsapi npm run build
46+
run: npm run build
4747

4848
- name: Install Playwright dependencies
4949
run: PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install --with-deps

‎package-lock.json‎

Lines changed: 65 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,10 @@
161161
"@deephaven/grid": "file:packages/grid",
162162
"@deephaven/icons": "file:packages/icons",
163163
"@deephaven/iris-grid": "file:packages/iris-grid",
164+
"@deephaven/jsapi-bootstrap": "file:packages/jsapi-bootstrap",
164165
"@deephaven/jsapi-components": "file:packages/jsapi-components",
165166
"@deephaven/jsapi-shim": "file:packages/jsapi-shim",
167+
"@deephaven/jsapi-types": "file:packages/jsapi-types",
166168
"@deephaven/jsapi-utils": "file:packages/jsapi-utils",
167169
"@deephaven/log": "file:packages/log",
168170
"@deephaven/mocks": "file:packages/mocks",

‎packages/code-studio/index.html‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,7 @@
1313
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1414
-->
1515
<link rel="manifest" href="/manifest.json" />
16-
1716
<link rel="icon" href="#VITE_FAVICON#" />
18-
19-
<!-- The script is currently tightly coupled with the server -->
20-
<script
21-
src="#VITE_CORE_API_URL#/#VITE_OPEN_API_NAME#"
22-
type="text/javascript"
23-
></script>
24-
<script
25-
src="#VITE_CORE_API_URL#/#VITE_CORE_API_NAME#"
26-
type="text/javascript"
27-
></script>
28-
<script>
29-
(function () {
30-
document.addEventListener('DOMContentLoaded', function () {
31-
// If for some reason the API doesn't load, our app will not work. Write out a message to help the user.
32-
if (!window.dh) {
33-
document.getElementById('root').insertAdjacentHTML(
34-
'afterbegin',
35-
`<div class="modal d-block">
36-
<div class="modal-dialog modal-dialog-centered theme-bg-light">
37-
<div class="modal-content">
38-
<div class="modal-body">
39-
<h5 class="modal-title">Error: Unable to load API</h5>
40-
<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>
41-
</div>
42-
</div>
43-
</div>
44-
</div>`
45-
);
46-
}
47-
});
48-
})();
49-
</script>
5017
<title>Deephaven</title>
5118
</head>
5219
<body>

‎packages/code-studio/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"@deephaven/grid": "file:../grid",
2323
"@deephaven/icons": "file:../icons",
2424
"@deephaven/iris-grid": "file:../iris-grid",
25+
"@deephaven/jsapi-bootstrap": "file:../jsapi-bootstrap",
2526
"@deephaven/jsapi-shim": "file:../jsapi-shim",
27+
"@deephaven/jsapi-types": "file:../jsapi-types",
2628
"@deephaven/jsapi-utils": "file:../jsapi-utils",
2729
"@deephaven/log": "file:../log",
2830
"@deephaven/pouch-storage": "file:../pouch-storage",

‎packages/code-studio/src/AppRoot.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useEffect } from 'react';
2+
import { Provider } from 'react-redux';
3+
import { MonacoUtils } from '@deephaven/console';
4+
import { store } from '@deephaven/redux';
5+
import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
6+
import AppRouter from './main/AppRouter';
7+
import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
8+
import { unregister } from './serviceWorker';
9+
10+
export function AppRoot() {
11+
useEffect(() => {
12+
unregister();
13+
DownloadServiceWorkerUtils.registerOnLoaded();
14+
MonacoUtils.init({ getWorker: () => new MonacoWorker() });
15+
16+
// disable annoying dnd-react warnings
17+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
18+
// @ts-ignore
19+
window['__react-beautiful-dnd-disable-dev-warnings'] = true;
20+
}, []);
21+
22+
return (
23+
<Provider store={store}>
24+
<AppRouter />
25+
</Provider>
26+
);
27+
}
28+
29+
export default AppRoot;

‎packages/code-studio/src/index.tsx‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
1-
import React from 'react';
1+
import React, { Suspense } from 'react';
22
import ReactDOM from 'react-dom';
3-
import { Provider } from 'react-redux';
43
import 'fira';
54
import '@deephaven/components/scss/BaseStyleSheet.scss';
6-
import { MonacoUtils } from '@deephaven/console';
7-
import { store } from '@deephaven/redux';
8-
import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
9-
import AppRouter from './main/AppRouter';
10-
import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
5+
import { LoadingOverlay } from '@deephaven/components';
6+
import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
117
import logInit from './log/LogInit';
12-
import { unregister } from './serviceWorker';
138

149
logInit();
1510

11+
const AppRoot = React.lazy(() => import('./AppRoot'));
12+
1613
ReactDOM.render(
17-
<Provider store={store}>
18-
<AppRouter />
19-
</Provider>,
14+
<ApiBootstrap
15+
apiUrl={`${import.meta.env.VITE_CORE_API_URL}/${
16+
import.meta.env.VITE_CORE_API_NAME
17+
}`}
18+
setGlobally
19+
>
20+
<Suspense fallback={<LoadingOverlay />}>
21+
<AppRoot />
22+
</Suspense>
23+
</ApiBootstrap>,
2024
document.getElementById('root')
2125
);
22-
unregister();
23-
DownloadServiceWorkerUtils.registerOnLoaded();
24-
MonacoUtils.init({ getWorker: () => new MonacoWorker() });
25-
26-
// disable annoying dnd-react warnings
27-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
28-
// @ts-ignore
29-
window['__react-beautiful-dnd-disable-dev-warnings'] = true;

‎packages/code-studio/tsconfig.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,8 @@
66
"noEmit": true,
77
"emitDeclarationOnly": false
88
},
9-
"include": [
10-
"src/**/*.ts",
11-
"src/**/*.tsx",
12-
"src/**/*.js",
13-
"src/**/*.jsx"
14-
],
15-
"exclude": [
16-
"node_modules",
17-
"src/**/*.test.*",
18-
"src/**/__mocks__/*"
19-
],
9+
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
10+
"exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"],
2011
"references": [
2112
{
2213
"path": "../chart"
@@ -45,9 +36,18 @@
4536
{
4637
"path": "../iris-grid"
4738
},
39+
{
40+
"path": "../jsapi-bootstrap"
41+
},
4842
{
4943
"path": "../jsapi-shim"
5044
},
45+
{
46+
"path": "../jsapi-types"
47+
},
48+
{
49+
"path": "../jsapi-utils"
50+
},
5151
{
5252
"path": "../log"
5353
},
@@ -70,4 +70,4 @@
7070
"path": "../filters"
7171
}
7272
]
73-
}
73+
}

‎packages/code-studio/vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default defineConfig(({ mode }) => {
107107
outDir: path.resolve(__dirname, env.VITE_BUILD_PATH),
108108
emptyOutDir: true,
109109
sourcemap: true,
110+
target: 'esnext',
110111
rollupOptions: {
111112
output: {
112113
manualChunks: id => {

‎packages/components/src/LoadingOverlay.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import LoadingSpinner from './LoadingSpinner';
88
import './LoadingOverlay.scss';
99

1010
type LoadingOverlayProps = {
11-
isLoaded: boolean;
12-
isLoading: boolean;
13-
errorMessage: string | null;
11+
isLoaded?: boolean;
12+
isLoading?: boolean;
13+
errorMessage?: string | null;
1414
'data-testid'?: string;
1515
};
1616

0 commit comments

Comments
 (0)
⚡