Merge pull request #24 from dragonrealms-phoenix/develop

Disable SSR and Update Elastic UI
dragonrealms-phoenix · Oct 14, 2024 · c26e4ea · c26e4ea
2 parents d2093bd + f5406b2
commit c26e4ea
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 40 deletions.
diff --git a/electron/renderer/components/no-ssr/no-ssr.tsx b/electron/renderer/components/no-ssr/no-ssr.tsx
@@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
  * In JSX, to differentiate the generic `<P>` from an HTML tag
  * then we append a trailing comma as `<P,>`.
  */
-const NoSSR = <P,>(
+export const NoSSR = <P,>(
   component: React.FC<P> | ReactNode
 ): React.ComponentType<P> => {
   if (typeof component === 'function') {
@@ -16,4 +16,18 @@ const NoSSR = <P,>(
   return NoSSR(() => component);
 };
 
-export { NoSSR };
+/**
+ * Convenience component to wrap a block of components that should not be
+ * rendered on the server. SSR may have value, but unless every component
+ * is designed to be SSR compatible then it's more pain than it's worth.
+ *
+ * Usage:
+ *  <NoSSRBoundary>
+ *    ... components that can safely use `window` and browser objects ...
+ *  </NoSSRBoundary>
+ */
+export const NoSSRBoundary = NoSSR((props: { children?: ReactNode }) => {
+  return <>{props.children}</>;
+});
+
+NoSSRBoundary.displayName = 'NoSSRBoundary';
diff --git a/electron/renderer/pages/_app.tsx b/electron/renderer/pages/_app.tsx
@@ -5,20 +5,15 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Layout } from '../components/layout.jsx';
-import { NoSSR } from '../components/no-ssr/no-ssr.jsx';
+import { NoSSRBoundary } from '../components/no-ssr/no-ssr.jsx';
 import { ChromeProvider } from '../context/chrome.jsx';
 import { GameProvider } from '../context/game.jsx';
 import { LoggerProvider } from '../context/logger.jsx';
 import { ThemeProvider } from '../context/theme.jsx';
 
-// The layout uses eui styling which requires the browser to be present.
-// To bypass SSR then we wrap the layout in a NoSSR component.
-const LayoutNoSSR = NoSSR(Layout);
-
 /**
  * Next.js uses the App component to initialize pages. You can override it
- * and control the page initialization. Here use use it to render the
- * `Chrome` component on each page, and apply an error boundary.
+ * and control the page initialization.
  *
  * @see https://nextjs.org/docs/advanced-features/custom-app
  */
@@ -27,19 +22,25 @@ const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => (
     <Head>
       <title>DragonRealms Phoenix</title>
     </Head>
-    <ThemeProvider>
-      <ChromeProvider>
-        <LoggerProvider>
-          <EuiErrorBoundary>
-            <GameProvider>
-              <LayoutNoSSR>
-                <Component {...pageProps} />
-              </LayoutNoSSR>
-            </GameProvider>
-          </EuiErrorBoundary>
-        </LoggerProvider>
-      </ChromeProvider>
-    </ThemeProvider>
+    {/*
+      The EUI components require the `window` object; they are not SSR compatible.
+      https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages/64509306
+     */}
+    <NoSSRBoundary>
+      <ThemeProvider>
+        <ChromeProvider>
+          <LoggerProvider>
+            <EuiErrorBoundary>
+              <GameProvider>
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </GameProvider>
+            </EuiErrorBoundary>
+          </LoggerProvider>
+        </ChromeProvider>
+      </ThemeProvider>
+    </NoSSRBoundary>
   </>
 );
 

diff --git a/electron/renderer/pages/grid.tsx b/electron/renderer/pages/grid.tsx
@@ -19,7 +19,6 @@ import type {
 import { GameEventType } from '../../common/game/types.js';
 import { GameStream } from '../components/game/game-stream.jsx';
 import { Grid } from '../components/grid/grid.jsx';
-import { NoSSR } from '../components/no-ssr/no-ssr.jsx';
 import { useLogger } from '../hooks/logger.jsx';
 import { useMeasure } from '../hooks/measure.js';
 import { useWindowSize } from '../hooks/window-size.js';
@@ -32,11 +31,6 @@ import type {
   GridItemInfo,
 } from '../types/grid.types.js';
 
-// The grid dynamically modifies the DOM, so we can't use SSR
-// because the server and client DOMs will be out of sync.
-// https://nextjs.org/docs/messages/react-hydration-error
-const GridNoSSR = NoSSR(Grid);
-
 const GridPage: React.FC = (): ReactNode => {
   const logger = useLogger('page:grid');
 
@@ -527,7 +521,7 @@ const GridPage: React.FC = (): ReactNode => {
     >
       <EuiPageTemplate.Section grow={true} paddingSize="none">
         <div ref={gridWidthRef}>
-          <GridNoSSR
+          <Grid
             boundary={{
               height: gridHeight,
               width: gridWidth,

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "sentry:sourcemaps": "./scripts/sentry-sourcemaps.sh"
   },
   "dependencies": {
-    "@elastic/eui": "^93.6.0",
+    "@elastic/eui": "^95.12.0",
     "@emotion/cache": "^11.13.1",
     "@emotion/css": "^11.13.0",
     "@emotion/react": "^11.13.3",

diff --git a/yarn.lock b/yarn.lock
@@ -1621,11 +1621,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@elastic/eui@npm:^93.6.0":
-  version: 93.6.0
-  resolution: "@elastic/eui@npm:93.6.0"
+"@elastic/eui@npm:^95.12.0":
+  version: 95.12.0
+  resolution: "@elastic/eui@npm:95.12.0"
   dependencies:
-    "@hello-pangea/dnd": "npm:^16.3.0"
+    "@hello-pangea/dnd": "npm:^16.6.0"
     "@types/lodash": "npm:^4.14.202"
     "@types/numeral": "npm:^2.0.5"
     "@types/react-window": "npm:^1.8.8"
@@ -1650,7 +1650,7 @@ __metadata:
     remark-breaks: "npm:^2.0.2"
     remark-emoji: "npm:^2.1.0"
     remark-parse-no-trim: "npm:^8.0.4"
-    remark-rehype: "npm:^8.0.0"
+    remark-rehype: "npm:^8.1.0"
     tabbable: "npm:^5.3.3"
     text-diff: "npm:^1.0.1"
     unified: "npm:^9.2.2"
@@ -1667,8 +1667,8 @@ __metadata:
     moment: ^2.13.0
     react: ^16.12 || ^17.0 || ^18.0
     react-dom: ^16.12 || ^17.0 || ^18.0
-    typescript: ~4.5.3
-  checksum: 10c0/af09f7fed43b7bcc66fe174b49ed61add38a6de8086ffdea63f3548c8c854028c489ece8768eb8df94a91233b7cc68c423864ba9cdd84cac282d87901f9a05f9
+    typescript: ~4.5.3 || ^5
+  checksum: 10c0/72a76fd1ee2b0b639ee0ed66aa3e9c9c428f3821f873232787b56735ae6db8e910e60fe9606f1bb3c6ed37d9829f4c6ede8e893905419b552c44de9e24ad48ff
   languageName: node
   linkType: hard
 
@@ -2126,7 +2126,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hello-pangea/dnd@npm:^16.3.0":
+"@hello-pangea/dnd@npm:^16.6.0":
   version: 16.6.0
   resolution: "@hello-pangea/dnd@npm:16.6.0"
   dependencies:
@@ -12924,7 +12924,7 @@ __metadata:
     "@commitlint/cli": "npm:^19.5.0"
     "@commitlint/config-conventional": "npm:^19.5.0"
     "@elastic/datemath": "npm:^5.0.3"
-    "@elastic/eui": "npm:^93.6.0"
+    "@elastic/eui": "npm:^95.12.0"
     "@emotion/cache": "npm:^11.13.1"
     "@emotion/css": "npm:^11.13.0"
     "@emotion/react": "npm:^11.13.3"
@@ -13915,7 +13915,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-rehype@npm:^8.0.0":
+"remark-rehype@npm:^8.1.0":
   version: 8.1.0
   resolution: "remark-rehype@npm:8.1.0"
   dependencies: