feat: add router devtool

README.md

@@ -57,7 +57,7 @@ Config is loaded from `.tnfrc.ts` by default.
 - `devServer: { port?: number; host?: string; https?: { hosts?: string[] }; ip?: string }`: The development server configuration.
 - `externals: Record<string, string>`: An object that maps package names to their corresponding paths.
 - `less: { modifyVars?: Record<string, string>; globalVars?: Record<string, string>; math?: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy' | number; sourceMap?: any; plugins?: (string | [string, Record<string, any>])[];}`: The configuration passed to lessLoader.
-- `router: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number }`: The router configuration.
+- `router: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false }`: The router configuration.
 
 ## LICENSE
 

src/config.ts

@@ -32,6 +32,19 @@ const ConfigSchema = z.object({
     .object({
       defaultPreload: z.enum(['intent', 'render', 'viewport']).optional(),
       defaultPreloadDelay: z.number().optional(),
+      devtool: z
+        .union([
+          z.object({
+            options: z.object({
+              initialIsOpen: z.boolean().optional(),
+              position: z
+                .enum(['bottom-left', 'bottom-right', 'top-left', 'top-right'])
+                .optional(),
+            }),
+          }),
+          z.literal(false),
+        ])
+        .optional(),
     })
     .optional(),
 });

src/prepare.ts

@@ -65,8 +65,23 @@ declare module '@tanstack/react-router' {
     router: typeof router
   }
 }
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === 'production'
+    ? () => null
+    : React.lazy(() =>
+        import('@tanstack/router-devtools').then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      )
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <RouterProvider router={router} />
+  <>
+    <RouterProvider router={router} />
+    ${
+      config?.router?.devtool !== false
+        ? `<TanStackRouterDevtools router={router} initialIsOpen=${config?.router?.devtool?.options?.initialIsOpen || '{false}'} position=${config?.router?.devtool?.options?.position || '"bottom-left"'} />`
+        : ''
+    }
+  </>
 );
   `,
   );