vite 초기 캐시 없을 때 generouted 패키지 오류 수정

Author: 2skydev

package.json

@@ -14,7 +14,6 @@
     "dayjs": "^1.11.4",
     "electron-store": "^8.1.0",
     "formik": "^2.2.9",
-    "generouted": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
@@ -64,4 +63,4 @@
       "./resources/**"
     ]
   }
-}
+}

src/components/Routes/Routes.tsx

@@ -0,0 +1,93 @@
+import {
+  LoaderFn,
+  Outlet,
+  ReactLocation,
+  Route,
+  Router,
+  RouterProps,
+} from '@tanstack/react-location';
+import { Fragment } from 'react';
+
+type Element = () => JSX.Element;
+type Module = { default: Element; Loader: LoaderFn; Pending: Element; Failure: Element };
+
+const PRESERVED = import.meta.glob<Module>('/src/pages/(_app|404).tsx', { eager: true });
+const ROUTES = import.meta.glob<Module>('/src/pages/**/[a-z[]*.tsx');
+
+const preservedRoutes: Partial<Record<string, () => JSX.Element>> = Object.keys(PRESERVED).reduce(
+  (routes, key) => {
+    const path = key.replace(/\/src\/pages\/|\.tsx$/g, '');
+    return { ...routes, [path]: PRESERVED[key]?.default };
+  },
+  {},
+);
+
+const regularRoutes = Object.keys(ROUTES).reduce<Route[]>((routes, key) => {
+  const module = ROUTES[key];
+  const route: Route = {
+    element: () => module().then(mod => (mod?.default ? <mod.default /> : <></>)),
+    loader: async (...args) => module().then(mod => mod?.Loader?.(...args)),
+    pendingElement: async () => module().then(mod => (mod?.Pending ? <mod.Pending /> : null)),
+    errorElement: async () => module().then(mod => (mod?.Failure ? <mod.Failure /> : null)),
+  };
+
+  const segments = key
+    .replace(/\/src\/pages|\.tsx$/g, '')
+    .replace(/\[\.{3}.+\]/, '*')
+    .replace(/\[([^\]]+)\]/g, ':$1')
+    .split('/')
+    .filter(Boolean);
+
+  segments.reduce((parent, segment, index) => {
+    const path = segment.replace(/index|\./g, '/');
+    const root = index === 0;
+    const leaf = index === segments.length - 1 && segments.length > 1;
+    const node = !root && !leaf;
+    const insert = /^\w|\//.test(path) ? 'unshift' : 'push';
+
+    if (root) {
+      const dynamic = path.startsWith(':') || path === '*';
+      if (dynamic) return parent;
+
+      const last = segments.length === 1;
+      if (last) {
+        routes.push({ path, ...route });
+        return parent;
+      }
+    }
+
+    if (root || node) {
+      const current = root ? routes : parent.children;
+      const found = current?.find(route => route.path === path);
+      if (found) found.children ??= [];
+      else current?.[insert]({ path, children: [] });
+      return found || (current?.[insert === 'unshift' ? 0 : current.length - 1] as Route);
+    }
+
+    if (leaf) {
+      parent?.children?.[insert]({ path, ...route });
+    }
+
+    return parent;
+  }, {} as Route);
+
+  return routes;
+}, []);
+
+const App = preservedRoutes?.['_app'] || Fragment;
+const NotFound = preservedRoutes?.['404'] || Fragment;
+
+const location = new ReactLocation();
+const routes = [...regularRoutes, { path: '*', element: <NotFound /> }];
+
+const Routes = (props: Omit<RouterProps, 'children' | 'location' | 'routes'> = {}) => {
+  return (
+    <Router {...props} location={location} routes={routes}>
+      <App>
+        <Outlet />
+      </App>
+    </Router>
+  );
+};
+
+export default Routes;

src/components/Routes/index.ts

@@ -0,0 +1,2 @@
+export * from './Routes';
+export { default } from './Routes';

src/index.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/client';
 
-import { Routes } from 'generouted';
 import { RecoilRoot } from 'recoil';
+import Routes from '~/components/Routes';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <RecoilRoot>

vite.config.ts

@@ -11,6 +11,9 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig({
   plugins: [
     react(),
+    checker({}),
+    tsconfigPaths(),
+    svgr(),
     electron({
       main: {
         entry: 'electron/index.ts',
@@ -21,9 +24,6 @@ export default defineConfig({
         },
       },
     }),
-    tsconfigPaths(),
-    svgr(),
-    checker({}),
   ],
   server: {
     port: 3000,

yarn.lock

@@ -2216,11 +2216,6 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-generouted@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/generouted/-/generouted-1.5.0.tgz#87a795de1f6558d96a95d2f4b46ce881cb631a82"
-  integrity sha512-6U2o6cpT98lUDObZc5Z/vyAemUVhbxMazv35tIIPzEMdYgmDRLg1zOYpihlzDZ+0RTaaW9K2ymLOpxTRS1YEPw==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"