Skip to content

Commit e4a75a1

Browse files
mofojedmofojed
authored
fix: Fix the style guide (#1119)
- Styleguide index wasn't updated to use JS API as a module correctly
1 parent 970a575 commit e4a75a1

4 files changed

Lines changed: 52 additions & 62 deletions

File tree

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react';
1+
import React from 'react';
22
import { Provider } from 'react-redux';
33
import { MonacoUtils } from '@deephaven/console';
44
import { store } from '@deephaven/redux';
@@ -8,16 +8,14 @@ import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
88
import { unregister } from './serviceWorker';
99

1010
export function AppRoot() {
11-
useEffect(() => {
12-
unregister();
13-
DownloadServiceWorkerUtils.registerOnLoaded();
14-
MonacoUtils.init({ getWorker: () => new MonacoWorker() });
11+
unregister();
12+
DownloadServiceWorkerUtils.registerOnLoaded();
13+
MonacoUtils.init({ getWorker: () => new MonacoWorker() });
1514

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-
}, []);
15+
// disable annoying dnd-react warnings
16+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
17+
// @ts-ignore
18+
window['__react-beautiful-dnd-disable-dev-warnings'] = true;
2119

2220
return (
2321
<Provider store={store}>

‎packages/code-studio/src/styleguide/StyleGuideRoot.tsx‎

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

‎packages/code-studio/src/styleguide/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 Styleguide</title>
5118
</head>
5219
<body>

‎packages/code-studio/src/styleguide/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 DownloadServiceWorkerUtils from '../DownloadServiceWorkerUtils';
5+
import { LoadingOverlay } from '@deephaven/components';
6+
import { ApiBootstrap } from '@deephaven/jsapi-bootstrap';
107
import logInit from '../log/LogInit';
11-
import { unregister } from '../serviceWorker';
12-
import StyleGuideInit from './StyleGuideInit';
138

149
logInit();
1510

11+
const StyleGuideRoot = React.lazy(() => import('./StyleGuideRoot'));
12+
1613
ReactDOM.render(
17-
<Provider store={store}>
18-
<StyleGuideInit />
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+
<StyleGuideRoot />
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;

0 commit comments

Comments
 (0)
⚡