Lay initial foundation fo app routes instead of browser router

packages/react-generators/src/generators/core/react-router/extractor.json

@@ -1,6 +1,21 @@
 {
   "name": "core/react-router",
   "templates": {
+    "src/app/app-routes.tsx": {
+      "name": "app-routes",
+      "type": "ts",
+      "fileOptions": { "kind": "singleton" },
+      "generator": "@baseplate-dev/react-generators#core/react-router",
+      "importMapProviders": {
+        "reactComponentsImportsProvider": {
+          "importName": "reactComponentsImportsProvider",
+          "packagePathSpecifier": "@baseplate-dev/react-generators:src/generators/core/react-components/generated/ts-import-providers.ts"
+        }
+      },
+      "pathRootRelativePath": "{src-root}/app/app-routes.tsx",
+      "projectExports": { "AppRoutes": {}, "router": {} },
+      "variables": {}
+    },
     "src/pages/index.tsx": {
       "name": "index",
       "type": "ts",
@@ -9,6 +24,14 @@
       "importMapProviders": {},
       "pathRootRelativePath": "{src-root}/pages/index.tsx",
       "variables": { "TPL_RENDER_HEADER": {}, "TPL_ROUTES": {} }
+    },
+    "src/route-tree.gen.ts": {
+      "name": "route-tree",
+      "type": "ts",
+      "fileOptions": { "kind": "singleton" },
+      "generator": "@baseplate-dev/react-generators#core/react-router",
+      "pathRootRelativePath": "{src-root}/route-tree.gen.ts",
+      "projectExportsOnly": true
     }
   }
 }

packages/react-generators/src/generators/core/react-router/generated/index.ts

@@ -1,8 +1,10 @@
 import { CORE_REACT_ROUTER_PATHS } from './template-paths.js';
 import { CORE_REACT_ROUTER_RENDERERS } from './template-renderers.js';
+import { CORE_REACT_ROUTER_IMPORTS } from './ts-import-providers.js';
 import { CORE_REACT_ROUTER_TEMPLATES } from './typed-templates.js';
 
 export const CORE_REACT_ROUTER_GENERATED = {
+  imports: CORE_REACT_ROUTER_IMPORTS,
   paths: CORE_REACT_ROUTER_PATHS,
   renderers: CORE_REACT_ROUTER_RENDERERS,
   templates: CORE_REACT_ROUTER_TEMPLATES,

packages/react-generators/src/generators/core/react-router/generated/template-paths.ts

@@ -2,7 +2,9 @@ import { packageInfoProvider } from '@baseplate-dev/core-generators';
 import { createGeneratorTask, createProviderType } from '@baseplate-dev/sync';
 
 export interface CoreReactRouterPaths {
+  appRoutes: string;
   index: string;
+  routeTree: string;
 }
 
 const coreReactRouterPaths = createProviderType<CoreReactRouterPaths>(
@@ -17,7 +19,11 @@ const coreReactRouterPathsTask = createGeneratorTask({
 
     return {
       providers: {
-        coreReactRouterPaths: { index: `${srcRoot}/pages/index.tsx` },
+        coreReactRouterPaths: {
+          appRoutes: `${srcRoot}/app/app-routes.tsx`,
+          index: `${srcRoot}/pages/index.tsx`,
+          routeTree: `${srcRoot}/route-tree.gen.ts`,
+        },
       },
     };
   },

packages/react-generators/src/generators/core/react-router/generated/template-renderers.ts

@@ -4,10 +4,22 @@ import type { BuilderAction } from '@baseplate-dev/sync';
 import { typescriptFileProvider } from '@baseplate-dev/core-generators';
 import { createGeneratorTask, createProviderType } from '@baseplate-dev/sync';
 
+import { reactComponentsImportsProvider } from '#src/generators/core/react-components/generated/ts-import-providers.js';
+
 import { CORE_REACT_ROUTER_PATHS } from './template-paths.js';
 import { CORE_REACT_ROUTER_TEMPLATES } from './typed-templates.js';
 
 export interface CoreReactRouterRenderers {
+  appRoutes: {
+    render: (
+      options: Omit<
+        RenderTsTemplateFileActionInput<
+          typeof CORE_REACT_ROUTER_TEMPLATES.appRoutes
+        >,
+        'destination' | 'importMapProviders' | 'template'
+      >,
+    ) => BuilderAction;
+  };
   index: {
     render: (
       options: Omit<
@@ -18,6 +30,16 @@ export interface CoreReactRouterRenderers {
       >,
     ) => BuilderAction;
   };
+  routeTree: {
+    render: (
+      options: Omit<
+        RenderTsTemplateFileActionInput<
+          typeof CORE_REACT_ROUTER_TEMPLATES.routeTree
+        >,
+        'destination' | 'importMapProviders' | 'template'
+      >,
+    ) => BuilderAction;
+  };
 }
 
 const coreReactRouterRenderers = createProviderType<CoreReactRouterRenderers>(
@@ -27,13 +49,25 @@ const coreReactRouterRenderers = createProviderType<CoreReactRouterRenderers>(
 const coreReactRouterRenderersTask = createGeneratorTask({
   dependencies: {
     paths: CORE_REACT_ROUTER_PATHS.provider,
+    reactComponentsImports: reactComponentsImportsProvider,
     typescriptFile: typescriptFileProvider,
   },
   exports: { coreReactRouterRenderers: coreReactRouterRenderers.export() },
-  run({ paths, typescriptFile }) {
+  run({ paths, reactComponentsImports, typescriptFile }) {
     return {
       providers: {
         coreReactRouterRenderers: {
+          appRoutes: {
+            render: (options) =>
+              typescriptFile.renderTemplateFile({
+                template: CORE_REACT_ROUTER_TEMPLATES.appRoutes,
+                destination: paths.appRoutes,
+                importMapProviders: {
+                  reactComponentsImports,
+                },
+                ...options,
+              }),
+          },
           index: {
             render: (options) =>
               typescriptFile.renderTemplateFile({
@@ -42,6 +76,14 @@ const coreReactRouterRenderersTask = createGeneratorTask({
                 ...options,
               }),
           },
+          routeTree: {
+            render: (options) =>
+              typescriptFile.renderTemplateFile({
+                template: CORE_REACT_ROUTER_TEMPLATES.routeTree,
+                destination: paths.routeTree,
+                ...options,
+              }),
+          },
         },
       },
     };

packages/react-generators/src/generators/core/react-router/generated/ts-import-providers.ts

@@ -0,0 +1,50 @@
+import type { TsImportMapProviderFromSchema } from '@baseplate-dev/core-generators';
+
+import {
+  createTsImportMap,
+  createTsImportMapSchema,
+  packageScope,
+} from '@baseplate-dev/core-generators';
+import {
+  createGeneratorTask,
+  createReadOnlyProviderType,
+} from '@baseplate-dev/sync';
+
+import { CORE_REACT_ROUTER_PATHS } from './template-paths.js';
+
+const reactRouterImportsSchema = createTsImportMapSchema({
+  AppRoutes: {},
+  router: {},
+});
+
+export type ReactRouterImportsProvider = TsImportMapProviderFromSchema<
+  typeof reactRouterImportsSchema
+>;
+
+export const reactRouterImportsProvider =
+  createReadOnlyProviderType<ReactRouterImportsProvider>(
+    'react-router-imports',
+  );
+
+const coreReactRouterImportsTask = createGeneratorTask({
+  dependencies: {
+    paths: CORE_REACT_ROUTER_PATHS.provider,
+  },
+  exports: {
+    reactRouterImports: reactRouterImportsProvider.export(packageScope),
+  },
+  run({ paths }) {
+    return {
+      providers: {
+        reactRouterImports: createTsImportMap(reactRouterImportsSchema, {
+          AppRoutes: paths.appRoutes,
+          router: paths.appRoutes,
+        }),
+      },
+    };
+  },
+});
+
+export const CORE_REACT_ROUTER_IMPORTS = {
+  task: coreReactRouterImportsTask,
+};

packages/react-generators/src/generators/core/react-router/generated/typed-templates.ts

@@ -1,6 +1,21 @@
 import { createTsTemplateFile } from '@baseplate-dev/core-generators';
 import path from 'node:path';
 
+import { reactComponentsImportsProvider } from '#src/generators/core/react-components/generated/ts-import-providers.js';
+
+const appRoutes = createTsTemplateFile({
+  fileOptions: { kind: 'singleton' },
+  importMapProviders: {
+    reactComponentsImports: reactComponentsImportsProvider,
+  },
+  name: 'app-routes',
+  projectExports: { AppRoutes: {}, router: {} },
+  source: {
+    path: path.join(import.meta.dirname, '../templates/src/app/app-routes.tsx'),
+  },
+  variables: {},
+});
+
 const index = createTsTemplateFile({
   fileOptions: { kind: 'singleton' },
   importMapProviders: {},
@@ -11,4 +26,13 @@ const index = createTsTemplateFile({
   variables: { TPL_RENDER_HEADER: {}, TPL_ROUTES: {} },
 });
 
-export const CORE_REACT_ROUTER_TEMPLATES = { index };
+const routeTree = createTsTemplateFile({
+  fileOptions: { kind: 'singleton' },
+  name: 'route-tree',
+  source: {
+    path: path.join(import.meta.dirname, '../templates/src/route-tree.gen.ts'),
+  },
+  variables: {},
+});
+
+export const CORE_REACT_ROUTER_TEMPLATES = { appRoutes, index, routeTree };

packages/react-generators/src/generators/core/react-router/index.ts

@@ -1 +1,3 @@
+export type { ReactRouterImportsProvider } from './generated/ts-import-providers.js';
+export { reactRouterImportsProvider } from './generated/ts-import-providers.js';
 export * from './react-router.generator.js';

packages/react-generators/src/generators/core/react-router/react-router.generator.ts

@@ -1,4 +1,7 @@
-import type { TsCodeFragment } from '@baseplate-dev/core-generators';
+import type {
+  TsCodeFragment,
+  TsTemplateOutputTemplateMetadata,
+} from '@baseplate-dev/core-generators';
 
 import {
   createNodePackagesTask,
@@ -64,6 +67,8 @@ export const reactRouterGenerator = createGenerator({
       dev: extractPackageVersions(REACT_PACKAGES, ['@tanstack/router-plugin']),
     }),
     paths: CORE_REACT_ROUTER_GENERATED.paths.task,
+    imports: CORE_REACT_ROUTER_GENERATED.imports.task,
+    renderers: CORE_REACT_ROUTER_GENERATED.renderers.task,
     vite: createProviderTask(reactBaseConfigProvider, (reactBaseConfig) => {
       // TODO [2025-07-03]: Re-enable logging once migration is complete
       reactBaseConfig.vitePlugins.set(
@@ -86,18 +91,10 @@ export const reactRouterGenerator = createGenerator({
         paths: CORE_REACT_ROUTER_GENERATED.paths.provider,
       },
       run({ reactAppConfig, paths }) {
-        reactAppConfig.renderWrappers.set('react-router', {
-          wrap: (contents) =>
-            TsCodeUtils.templateWithImports(
-              tsImportBuilder(['BrowserRouter']).from('react-router-dom'),
-            )`<BrowserRouter>${contents}</BrowserRouter>`,
-          type: 'router',
-        });
-
         reactAppConfig.renderRoot.set(
           tsCodeFragment(
-            '<PagesRoot />',
-            tsImportBuilder().default('PagesRoot').from(paths.index),
+            '<AppRoutes />',
+            tsImportBuilder(['AppRoutes']).from(paths.appRoutes),
           ),
         );
       },
@@ -145,6 +142,7 @@ export const reactRouterGenerator = createGenerator({
         reactRouteValues: reactRouteValuesProvider,
         typescriptFile: typescriptFileProvider,
         paths: CORE_REACT_ROUTER_GENERATED.paths.provider,
+        renderers: CORE_REACT_ROUTER_GENERATED.renderers.provider,
       },
       run({
         reactRouterConfigValues: {
@@ -157,6 +155,7 @@ export const reactRouterGenerator = createGenerator({
         reactRouteValues: { routes, layouts },
         typescriptFile,
         paths,
+        renderers,
       }) {
         return {
           build: async (builder) => {
@@ -165,6 +164,24 @@ export const reactRouterGenerator = createGenerator({
             // group routes by layout key
             const renderedRoutes = renderRoutes(routes, layouts);
 
+            await builder.apply(renderers.appRoutes.render({}));
+
+            // Write a pseudo-file so that the template extractor can infer metadata for the
+            // generated route tree file
+            builder.writeFile({
+              id: 'route-tree',
+              destination: '@/src/route-tree.gen.ts',
+              contents: '',
+              options: { skipWriting: true },
+              templateMetadata: {
+                generator: builder.generatorInfo.name,
+                name: 'route-tree',
+                projectExportsOnly: true,
+                type: 'ts',
+                fileOptions: { kind: 'singleton' },
+              } satisfies TsTemplateOutputTemplateMetadata,
+            });
+
             await builder.apply(
               typescriptFile.renderTemplateFile({
                 template: CORE_REACT_ROUTER_GENERATED.templates.index,

packages/react-generators/src/generators/core/react-router/templates/src/app/app-routes.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+
+import type { ErrorRouteComponent } from '@tanstack/react-router';
+
+import { Button, ErrorDisplay, NotFoundCard } from '%reactComponentsImports';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+
+import { routeTree } from '../route-tree.gen.js';
+
+const ErrorComponent: ErrorRouteComponent = ({
+  error,
+  reset,
+}: React.ComponentProps<ErrorRouteComponent>) => (
+  <ErrorDisplay
+    error={error}
+    actions={<Button onClick={reset}>Reset</Button>}
+  />
+);
+
+export const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: NotFoundCard,
+  defaultErrorComponent: ErrorComponent,
+});
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export function AppRoutes(): React.ReactElement {
+  return <RouterProvider router={router} />;
+}