migrated to vite and vite-plugin-ssr

2023-04-22 17:56:09 +07:00
parent c50e507c14
commit b9bafc851e
67 changed files with 911 additions and 1060 deletions
--- a/src/renderer/_default.page.client.tsx
+++ b/src/renderer/_default.page.client.tsx
@@ -0,0 +1,20 @@
+import '@renderer/index.css';
+import { Shell } from '@renderer/shell';
+import { PageContextClient } from '@renderer/types';
+
+import { hydrateRoot } from 'react-dom/client';
+
+export const clientRouting = true;
+
+export async function render(pageContext: PageContextClient) {
+  const { Page, pageProps } = pageContext;
+
+  if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined');
+
+  hydrateRoot(
+    document.getElementById('app')!,
+    <Shell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </Shell>
+  );
+}
--- a/src/renderer/_default.page.server.tsx
+++ b/src/renderer/_default.page.server.tsx
@@ -0,0 +1,30 @@
+import { Shell } from '@renderer/shell';
+import { PageContextServer } from '@renderer/types';
+
+import ReactDOMServer from 'react-dom/server';
+import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr/server';
+
+export const passToClient = ['pageProps'];
+
+export function render(pageContext: PageContextServer) {
+  const { Page, pageProps } = pageContext;
+
+  if (!Page) throw new Error('My render() hook expects pageContext.Page to be defined');
+
+  const pageHtml = ReactDOMServer.renderToString(
+    <Shell pageContext={pageContext}>
+      <Page {...pageProps} />
+    </Shell>
+  );
+
+  return escapeInject`<!DOCTYPE html>
+    <html lang="en" class="dark">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </head>
+      <body class="cursor-default select-none overflow-hidden font-sans antialiased">
+        <div id="app">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`;
+}
--- a/src/renderer/_error.page.tsx
+++ b/src/renderer/_error.page.tsx
@@ -0,0 +1,17 @@
+export function Page({ is404 }: { is404: boolean }) {
+  if (is404) {
+    return (
+      <>
+        <h1>404 Page Not Found</h1>
+        <p>This page could not be found.</p>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <h1>500 Internal Server Error</h1>
+        <p>Something went wrong.</p>
+      </>
+    );
+  }
+}
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  img[loading='lazy'] {
+    clip-path: inset(0.6px);
+  }
+}
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.border {
+  background-clip: padding-box;
+}
+
+@keyframes loop {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
--- a/src/renderer/shell.tsx
+++ b/src/renderer/shell.tsx
@@ -0,0 +1,17 @@
+import RelayProvider from '@components/relaysProvider';
+
+import { PageContextProvider } from '@utils/hooks/usePageContext';
+
+import { PageContext } from '@renderer/types';
+
+import { StrictMode } from 'react';
+
+export function Shell({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) {
+  return (
+    <StrictMode>
+      <PageContextProvider pageContext={pageContext}>
+        <RelayProvider>{children}</RelayProvider>
+      </PageContextProvider>
+    </StrictMode>
+  );
+}
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -0,0 +1,35 @@
+import type {
+  PageContextBuiltIn,
+  /*
+// When using Client Routing https://vite-plugin-ssr.com/clientRouting
+PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient
+/*/
+  // When using Server Routing
+  PageContextBuiltInClientWithServerRouting as PageContextBuiltInClient, //*/
+} from 'vite-plugin-ssr/types';
+
+export type { PageContextServer };
+export type { PageContextClient };
+export type { PageContext };
+export type { PageProps };
+
+type Page = (pageProps: PageProps) => React.ReactElement;
+type PageProps = Record<string, never>;
+
+export type PageContextCustom = {
+  Page: Page;
+  pageProps?: PageProps;
+  redirectTo?: string;
+  urlPathname: string;
+  exports: {
+    documentProps?: {
+      title?: string;
+      description?: string;
+    };
+  };
+};
+
+type PageContextServer = PageContextBuiltIn<Page> & PageContextCustom;
+type PageContextClient = PageContextBuiltInClient<Page> & PageContextCustom;
+
+type PageContext = PageContextClient | PageContextServer;