feat: replace routes and integrations with customProperties

[timoconnellaus]

replaces the hard coded routes and integrations with a generic implementation of customProperties defined at for a framework

e.g.
frameworks/react-cra/src/index.ts

const customProperties = {
    routes: z
      .array(
        z.object({
          url: z.string().optional(),
          name: z.string().optional(),
          path: z.string(),
          jsName: z.string(),
        }),
      )
      .optional(),
    integrations: z
      .array(
        z.object({
          type: z.enum(['provider', 'root-provider', 'layout', 'header-user']),
          path: z.string(),
          jsName: z.string(),
        }),
      )
      .optional(),
  } as Record<string, ZodTypeAny>
  
  const addOns = scanAddOnDirectories(
    [
      join(baseDirectory, 'add-ons'),
      join(baseDirectory, 'toolchains'),
      join(baseDirectory, 'examples'),
    ],
    { customProperties }, // to validate custom properties in addons
  )
  
  const framework = {
    id: 'react-cra',
    name: 'React',
    description: 'Templates for React CRA',
    version: '0.1.0',
    customProperties, // pass custom properties to framework
    base: files,
    addOns,
    basePackageJSON,
    optionalPackages,
    supportedModes: {
      'code-router': {
        displayName: 'Code Router',
        description: 'TanStack Router using code to define routes',
        forceTypescript: false,
      },
      'file-router': {
        displayName: 'File Router',
        description: 'TanStack Router using files to define routes',
        forceTypescript: true,
      },
    },
  }

Usage in info.json

{
  "name": "Query",
  "description": "Integrate TanStack Query into your application.",
  "phase": "add-on",
  "modes": ["file-router", "code-router"],
  "type": "add-on",
  "link": "https://tanstack.com/query/latest",
  "customProperties": {
    "routes": [
      {
        "url": "/demo/tanstack-query",
        "name": "TanStack Query",
        "path": "src/routes/demo.tanstack-query.tsx",
        "jsName": "TanStackQueryDemo"
      }
    ],
    "integrations": [
      {
        "type": "root-provider",
        "path": "src/integrations/tanstack-query/root-provider.tsx",
        "jsName": "TanStackQueryProvider"
      },
      {
        "type": "layout",
        "path": "src/integrations/tanstack-query/layout.tsx",
        "jsName": "TanStackQueryLayout"
      }
    ]
  }
}

Usage in ejs

const rootRoute = createRootRoute({
  component: () => (
    <>
    <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
      <<%= integration.jsName %>>
    <% } %>
    <% if (routes.length > 0) { %><Header /><% } %>
      <Outlet />
      <TanStackRouterDevtools />
      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
        <<%= integration.jsName %> />
      <% } %>
    <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
      </<%= integration.jsName %>>
    <% } %>
    </>
  ),
});

[jherr]

Seems like this is repeat of the schema above.

[timoconnellaus]

@jherr this more like it?