create-better-t-stack 2.9.2 → 2.9.4

package/templates/frontend/react/next/src/app/page.tsx.hbs

@@ -2,14 +2,14 @@
 {{#if (eq backend "convex")}}
 import { useQuery } from "convex/react";
 import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
-{{else}}
+{{else if (or (eq api "orpc") (eq api "trpc"))}}
+import { useQuery } from "@tanstack/react-query";
   {{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
   {{/if}}
   {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
   {{/if}}
-import { useQuery } from "@tanstack/react-query";
 {{/if}}
 
 const TITLE_TEXT = `
@@ -43,8 +43,8 @@ export default function Home() {
       <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 (eq backend "convex")}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
             />
@@ -55,19 +55,23 @@ export default function Home() {
                   ? "Connected"
                   : "Error"}
             </span>
-            {{else}}
-            <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}}
           </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>

package/templates/frontend/react/next/src/components/providers.tsx.hbs

@@ -1,49 +1,50 @@
 "use client"
 {{#if (eq backend "convex")}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
+  import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}
-import { QueryClientProvider } from "@tanstack/react-query";
-  {{#if (eq api "orpc")}}
-import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
-  {{/if}}
-  {{#if (eq api "trpc")}}
-import { queryClient } from "@/utils/trpc";
-  {{/if}}
+  {{#unless (eq api "none")}}
+    import { QueryClientProvider } from "@tanstack/react-query";
+    {{#if (eq api "orpc")}}
+      import { orpc, ORPCContext, queryClient } from "@/utils/orpc";
+    {{/if}}
+    {{#if (eq api "trpc")}}
+      import { queryClient } from "@/utils/trpc";
+    {{/if}}
+  {{/unless}}
 {{/if}}
 import { ThemeProvider } from "./theme-provider";
 import { Toaster } from "./ui/sonner";
 
 {{#if (eq backend "convex")}}
-const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+  const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 {{/if}}
 
-export default function Providers({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      {{#if (eq backend "convex")}}
-      <ConvexProvider client={convex}>{children}</ConvexProvider>
-      {{else}}
+export default function Providers({ children, }: { children: React.ReactNode })
+{ return (
+<ThemeProvider
+  attribute="class"
+  defaultTheme="system"
+  enableSystem
+  disableTransitionOnChange
+>
+  {{#if (eq backend "convex")}}
+    <ConvexProvider client={convex}>{children}</ConvexProvider>
+  {{else}}
+    {{#unless (eq api "none")}}
       <QueryClientProvider client={queryClient}>
         {{#if (eq api "orpc")}}
-        <ORPCContext.Provider value={orpc}>
-          {children}
-        </ORPCContext.Provider>
+          <ORPCContext.Provider value={orpc}>
+            {children}
+          </ORPCContext.Provider>
         {{/if}}
         {{#if (eq api "trpc")}}
-        {children}
+          {children}
         {{/if}}
       </QueryClientProvider>
-      {{/if}}
-      <Toaster richColors />
-    </ThemeProvider>
-  )
-}
+    {{else}}
+      {children}
+    {{/unless}}
+  {{/if}}
+  <Toaster richColors />
+</ThemeProvider>
+) }

package/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -13,20 +13,25 @@ import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 
 {{#if (eq backend "convex")}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
+  import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}
-import { QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-  {{#if (eq api "orpc")}}
-  import { orpc, ORPCContext, queryClient } from "./utils/orpc";
-  {{/if}}
-  {{#if (eq api "trpc")}}
-  import { queryClient } from "./utils/trpc";
-  {{/if}}
+  {{#unless (eq api "none")}}
+    import { QueryClientProvider } from "@tanstack/react-query";
+    import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+    {{#if (eq api "orpc")}}
+      import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+    {{/if}}
+    {{#if (eq api "trpc")}}
+      import { queryClient } from "./utils/trpc";
+    {{/if}}
+  {{/unless}}
 {{/if}}
 
 export const links: Route.LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.googleapis.com",
+  },
   {
     rel: "preconnect",
     href: "https://fonts.gstatic.com",
@@ -57,28 +62,12 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 {{#if (eq backend "convex")}}
-export default function App() {
-  const convex = new ConvexReactClient(
-    import.meta.env.VITE_CONVEX_URL as string,
-  );
-
-  return (
-    <ConvexProvider client={convex}>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        <div className="grid grid-rows-[auto_1fr] h-svh">
-          <Header />
-          <Outlet />
-        </div>
-        <Toaster richColors />
-      </ThemeProvider>
-    </ConvexProvider>
-  );
-}
-{{else if (eq api "orpc")}}
-export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ORPCContext.Provider value={orpc}>
+  export default function App() {
+    const convex = new ConvexReactClient(
+      import.meta.env.VITE_CONVEX_URL as string,
+    );
+    return (
+      <ConvexProvider client={convex}>
         <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
           <div className="grid grid-rows-[auto_1fr] h-svh">
             <Header />
@@ -86,15 +75,44 @@ export default function App() {
           </div>
           <Toaster richColors />
         </ThemeProvider>
-      </ORPCContext.Provider>
-      <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
-    </QueryClientProvider>
-  );
-}
+      </ConvexProvider>
+    );
+  }
+{{else if (eq api "orpc")}}
+  export default function App() {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ORPCContext.Provider value={orpc}>
+          <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+            <div className="grid grid-rows-[auto_1fr] h-svh">
+              <Header />
+              <Outlet />
+            </div>
+            <Toaster richColors />
+          </ThemeProvider>
+        </ORPCContext.Provider>
+        <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+      </QueryClientProvider>
+    );
+  }
 {{else if (eq api "trpc")}}
-export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
+  export default function App() {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+        </ThemeProvider>
+        <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+      </QueryClientProvider>
+    );
+  }
+{{else}}
+  export default function App() {
+    return (
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
@@ -102,10 +120,8 @@ export default function App() {
         </div>
         <Toaster richColors />
       </ThemeProvider>
-      <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
-    </QueryClientProvider>
-  );
-}
+    );
+  }
 {{/if}}
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

package/templates/frontend/react/react-router/src/routes/_index.tsx.hbs

@@ -2,14 +2,14 @@ import type { Route } from "./+types/_index";
 {{#if (eq backend "convex")}}
 import { useQuery } from "convex/react";
 import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
-{{else}}
+{{else if (or (eq api "orpc") (eq api "trpc"))}}
+import { useQuery } from "@tanstack/react-query";
   {{#if (eq api "orpc")}}
   import { orpc } from "@/utils/orpc";
   {{/if}}
   {{#if (eq api "trpc")}}
   import { trpc } from "@/utils/trpc";
   {{/if}}
-import { useQuery } from "@tanstack/react-query";
 {{/if}}
 
 const TITLE_TEXT = `
@@ -47,8 +47,8 @@ export default function Home() {
       <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 (eq backend "convex")}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck === "OK" ? "bg-green-500" : healthCheck === undefined ? "bg-orange-400" : "bg-red-500"}`}
             />
@@ -59,21 +59,25 @@ export default function Home() {
                   ? "Connected"
                   : "Error"}
             </span>
-            {{else}}
-            <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}}
           </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>

package/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);

package/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}}

package/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>

package/templates/frontend/react/tanstack-start/src/router.tsx.hbs

@@ -8,24 +8,20 @@ import { routeTree } from "./routeTree.gen";
 import Loader from "./components/loader";
 import "./index.css";
 {{else}}
-import {
-  QueryCache,
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
 import { createRouter as createTanstackRouter } from "@tanstack/react-router";
 import Loader from "./components/loader";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";
   {{#if (eq api "trpc")}}
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 import type { AppRouter } from "../../server/src/routers";
 import { TRPCProvider } from "./utils/trpc";
-  {{/if}}
-  {{#if (eq api "orpc")}}
-import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+  {{else if (eq api "orpc")}}
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { orpc, ORPCContext, queryClient as orpcQueryClient } from "./utils/orpc";
   {{/if}}
 {{/if}}
 
@@ -62,7 +58,6 @@ export function createRouter() {
     }),
     queryClient,
   );
-
   return router;
 }
 {{else}}
@@ -103,6 +98,8 @@ const trpc = createTRPCOptionsProxy({
   client: trpcClient,
   queryClient: queryClient,
 });
+  {{else if (eq api "orpc")}}
+  const queryClient = orpcQueryClient;
   {{/if}}
 
 export const createRouter = () => {
@@ -112,33 +109,37 @@ export const createRouter = () => {
     defaultPreloadStaleTime: 0,
     {{#if (eq api "trpc")}}
     context: { trpc, queryClient },
-    {{/if}}
-    {{#if (eq api "orpc")}}
+    {{else if (eq api "orpc")}}
     context: { orpc, queryClient },
+    {{else}}
+    context: { },
     {{/if}}
     defaultPendingComponent: () => <Loader />,
     defaultNotFoundComponent: () => <div>Not Found</div>,
+    {{#if (eq api "trpc")}}
     Wrap: ({ children }) => (
       <QueryClientProvider client={queryClient}>
-        {{#if (eq api "trpc")}}
         <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
           {children}
         </TRPCProvider>
-        {{/if}}
-        {{#if (eq api "orpc")}}
+      </QueryClientProvider>
+    ),
+    {{else if (eq api "orpc")}}
+    Wrap: ({ children }) => (
+      <QueryClientProvider client={queryClient}>
         <ORPCContext.Provider value={orpc}>
           {children}
         </ORPCContext.Provider>
-        {{/if}}
       </QueryClientProvider>
     ),
+    {{else}}
+    Wrap: ({ children }) => <>{children}</>,
+    {{/if}}
   });
-
   return router;
 };
 {{/if}}
 
-// Register the router instance for type safety
 declare module "@tanstack/react-router" {
   interface Register {
     router: ReturnType<typeof createRouter>;