fix: backend none templates (#241)

apps/cli/templates/frontend/react/tanstack-router/src/main.tsx.hbs

@@ -2,57 +2,51 @@ import { RouterProvider, createRouter } from "@tanstack/react-router";
 import ReactDOM from "react-dom/client";
 import Loader from "./components/loader";
 import { routeTree } from "./routeTree.gen";
+
 {{#if (eq api "orpc")}}
-import { QueryClientProvider } from "@tanstack/react-query";
-import { orpc, queryClient } from "./utils/orpc";
+  import { QueryClientProvider } from "@tanstack/react-query";
+  import { orpc, queryClient } from "./utils/orpc";
 {{/if}}
 {{#if (eq api "trpc")}}
-import { QueryClientProvider } from "@tanstack/react-query";
-import { queryClient, trpc } from "./utils/trpc";
+  import { QueryClientProvider } from "@tanstack/react-query";
+  import { queryClient, trpc } from "./utils/trpc";
 {{/if}}
 {{#if (eq backend "convex")}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
-
-const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
+  import { ConvexProvider, ConvexReactClient } from "convex/react";
+  const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
 {{/if}}
 
-{{#if (eq api "orpc")}}
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
   defaultPendingComponent: () => <Loader />,
+  {{#if (eq api "orpc")}}
   context: { orpc, queryClient },
-  Wrap: function WrapComponent({ children }) {
+  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
     return (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
     );
   },
-});
-{{/if}}
-{{#if (eq api "trpc")}}
-const router = createRouter({
-  routeTree,
-  defaultPreload: "intent",
-  defaultPendingComponent: () => <Loader />,
+  {{else if (eq api "trpc")}}
   context: { trpc, queryClient },
-  Wrap: function WrapComponent({ children }) {
+  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
     return (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
     );
   },
-});
-{{/if}}
-{{#if (eq backend "convex")}}
-const router = createRouter({
-  routeTree,
-  defaultPreload: "intent",
-  defaultPendingComponent: () => <Loader />,
+  {{else if (eq backend "convex")}}
   context: {},
-  Wrap: function WrapComponent({ children }) {
+  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
     return <ConvexProvider client={convex}>{children}</ConvexProvider>;
   },
+  {{else}}
+  context: {},
+  {{/if}}
 });
-{{/if}}
 
 declare module "@tanstack/react-router" {
   interface Register {
@@ -61,7 +55,10 @@ declare module "@tanstack/react-router" {
 }
 
 const rootElement = document.getElementById("app");
-if (!rootElement) throw new Error("Root element not found");
+
+if (!rootElement) {
+  throw new Error("Root element not found");
+}
 
 if (!rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);

apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs

@@ -31,14 +31,12 @@ export interface RouterAppContext {
   orpc: typeof orpc;
   queryClient: QueryClient;
 }
-{{/if}}
-{{#if (eq api "trpc")}}
+{{else if (eq api "trpc")}}
 export interface RouterAppContext {
   trpc: typeof trpc;
   queryClient: QueryClient;
 }
-{{/if}}
-{{#if (eq backend "convex")}}
+{{else}}
 export interface RouterAppContext {}
 {{/if}}
 
@@ -63,18 +61,21 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   }),
 });
 
-{{#if (eq api "orpc")}}
 function RootComponent() {
-  const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link))
-  const [orpc] = useState(() => createORPCReactQueryUtils(client))
-
   const isFetching = useRouterState({
     select: (s) => s.isLoading,
   });
+
+  {{#if (eq api "orpc")}}
+  const [client] = useState<RouterClient<typeof appRouter>>(() => createORPCClient(link));
+  const [orpcUtils] = useState(() => createORPCReactQueryUtils(client));
+  {{/if}}
+
   return (
     <>
       <HeadContent />
-      <ORPCContext.Provider value={orpc}>
+      {{#if (eq api "orpc")}}
+      <ORPCContext.Provider value={orpcUtils}>
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
           <div className="grid grid-rows-[auto_1fr] h-svh">
             <Header />
@@ -83,20 +84,7 @@ function RootComponent() {
           <Toaster richColors />
         </ThemeProvider>
       </ORPCContext.Provider>
-      <TanStackRouterDevtools position="bottom-left" />
-      <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
-    </>
-  );
-}
-{{/if}}
-{{#if (eq api "trpc")}}
-function RootComponent() {
-  const isFetching = useRouterState({
-    select: (s) => s.isLoading,
-  });
-  return (
-    <>
-      <HeadContent />
+      {{else}}
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
@@ -104,29 +92,11 @@ function RootComponent() {
         </div>
         <Toaster richColors />
       </ThemeProvider>
+      {{/if}}
       <TanStackRouterDevtools position="bottom-left" />
+      {{#if (or (eq api "orpc") (eq api "trpc"))}}
       <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+      {{/if}}
     </>
   );
 }
-{{/if}}
-{{#if (eq backend "convex")}}
-function RootComponent() {
-  const isFetching = useRouterState({
-    select: (s) => s.isLoading,
-  });
-  return (
-    <>
-      <HeadContent />
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        <div className="grid grid-rows-[auto_1fr] h-svh">
-          <Header />
-          {isFetching ? <Loader /> : <Outlet />}
-        </div>
-        <Toaster richColors />
-      </ThemeProvider>
-      <TanStackRouterDevtools position="bottom-left" />
-    </>
-  );
-}
-{{/if}}

apps/cli/templates/frontend/react/tanstack-router/src/routes/index.tsx.hbs

@@ -49,20 +49,8 @@ function HomeComponent() {
       <div className="grid gap-6">
         <section className="rounded-lg border p-4">
           <h2 className="mb-2 font-medium">API Status</h2>
+          {{#if (eq backend "convex")}}
           <div className="flex items-center gap-2">
-            {{#if (or (eq api "orpc") (eq api "trpc"))}}
-            <div
-              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-            />
-            <span className="text-sm text-muted-foreground">
-              {healthCheck.isLoading
-                ? "Checking..."
-                : healthCheck.data
-                  ? "Connected"
-                  : "Disconnected"}
-            </span>
-            {{/if}}
-            {{#if (eq backend "convex")}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
             />
@@ -73,8 +61,23 @@ function HomeComponent() {
                   ? "Connected"
                   : "Error"}
             </span>
-            {{/if}}
           </div>
+          {{else}}
+            {{#unless (eq api "none")}}
+            <div className="flex items-center gap-2">
+              <div
+                className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+              />
+              <span className="text-sm text-muted-foreground">
+                {healthCheck.isLoading
+                  ? "Checking..."
+                  : healthCheck.data
+                    ? "Connected"
+                    : "Disconnected"}
+              </span>
+            </div>
+            {{/unless}}
+          {{/if}}
         </section>
       </div>
     </div>