admin ファイル分割

a01sa01to · a01sa01to · commit 3ad492325de1 · 2024-03-23T23:20:58.000+09:00
diff --git a/workspaces/client/src/index.admin.tsx b/workspaces/client/src/index.admin.tsx
@@ -0,0 +1,26 @@
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { SWRConfig } from 'swr';
+
+import { AdminApp } from '@wsh-2024/admin/src/index';
+import { ClientApp } from '@wsh-2024/app/src/index';
+
+import { preloadImages } from './utils/preloadImages';
+import { registerServiceWorker } from './utils/registerServiceWorker';
+
+const main = async () => {
+  await registerServiceWorker();
+  // await preloadImages();
+
+  const fn = () => {
+    ReactDOM.createRoot(document.getElementById('root')!).render(<AdminApp />);
+  };
+
+  if (document.readyState !== 'loading') {
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+};
+
+main().catch(console.error);
diff --git a/workspaces/client/src/index.tsx b/workspaces/client/src/index.tsx
@@ -13,18 +13,14 @@ const main = async () => {
   // await preloadImages();
 
   const fn = () => {
-    if (window.location.pathname.startsWith('/admin')) {
-      ReactDOM.createRoot(document.getElementById('root')!).render(<AdminApp />);
-    } else {
-      ReactDOM.hydrateRoot(
-        document.getElementById('root')!,
-        <SWRConfig value={{ revalidateIfStale: true, revalidateOnFocus: false, revalidateOnReconnect: false }}>
-          <BrowserRouter>
-            <ClientApp />
-          </BrowserRouter>
-        </SWRConfig>,
-      );
-    }
+    ReactDOM.hydrateRoot(
+      document.getElementById('root')!,
+      <SWRConfig value={{ revalidateIfStale: true, revalidateOnFocus: false, revalidateOnReconnect: false }}>
+        <BrowserRouter>
+          <ClientApp />
+        </BrowserRouter>
+      </SWRConfig>,
+    );
   };
 
   if (document.readyState !== 'loading') {
diff --git a/workspaces/client/tsup.config.ts b/workspaces/client/tsup.config.ts
@@ -21,6 +21,7 @@ export default defineConfig(async (): Promise<Options[]> => {
       bundle: true,
       clean: true,
       entry: {
+        admin: path.resolve(PACKAGE_DIR, './src/index.admin.tsx'),
         client: path.resolve(PACKAGE_DIR, './src/index.tsx'),
         serviceworker: path.resolve(PACKAGE_DIR, './src/serviceworker/index.ts'),
       },
diff --git a/workspaces/server/src/constants/paths.ts b/workspaces/server/src/constants/paths.ts
@@ -14,7 +14,7 @@ export const IMAGES_PATH = path.resolve(PACKAGE_DIR, './dist/images');
 
 export const CLIENT_STATIC_PATH = path.resolve(WORKSPACE_DIR, './workspaces/client/dist');
 
-export const INDEX_HTML = `<!doctype html>
+export const INDEX_HTML = (isAdmin: boolean) => `<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
@@ -26,7 +26,7 @@ export const INDEX_HTML = `<!doctype html>
       type="image/x-icon"
     />
     <title>WSH 2024</title>
-    <script type="text/javascript" src="/client.global.js" defer></script>
+    <script type="text/javascript" src="/${isAdmin ? 'admin' : 'client'}.global.js" defer></script>
     <style id="tag"></style>
   </head>
   <body>
diff --git a/workspaces/server/src/routes/admin/index.ts b/workspaces/server/src/routes/admin/index.ts
@@ -5,11 +5,11 @@ import { INDEX_HTML } from '../../constants/paths';
 const app = new Hono();
 
 app.get('/admin', async (c) => {
-  return c.html(INDEX_HTML);
+  return c.html(INDEX_HTML(true));
 });
 
 app.get('/admin/*', async (c) => {
-  return c.html(INDEX_HTML);
+  return c.html(INDEX_HTML(true));
 });
 
 export { app as adminApp };
diff --git a/workspaces/server/src/routes/ssr/index.tsx b/workspaces/server/src/routes/ssr/index.tsx
@@ -11,10 +11,9 @@ import { INDEX_HTML } from '../../constants/paths';
 const app = new Hono();
 
 async function createHTML({ body, styleTags }: { body: string; styleTags: string }): Promise<string> {
-  const content = INDEX_HTML.replaceAll('<div id="root"></div>', `<div id="root">${body}</div>`).replaceAll(
-    '<style id="tag"></style>',
-    styleTags,
-  );
+  const content = INDEX_HTML(false)
+    .replaceAll('<div id="root"></div>', `<div id="root">${body}</div>`)
+    .replaceAll('<style id="tag"></style>', styleTags);
 
   return content;
 }
