create-better-t-stack 2.9.1 → 2.9.3

package/templates/frontend/native/unistyles/app/_layout.tsx.hbs

@@ -7,7 +7,9 @@ import { queryClient } from "@/utils/orpc";
 {{#if (eq backend "convex")}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}
+  {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
+  {{/unless}}
 {{/if}}
 import { Stack } from "expo-router";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -51,6 +53,7 @@ export default function RootLayout() {
       </GestureHandlerRootView>
     </ConvexProvider>
     {{else}}
+      {{#unless (eq api "none")}}
     <QueryClientProvider client={queryClient}>
       <GestureHandlerRootView style=\{{ flex: 1 }}>
         <Stack
@@ -72,6 +75,27 @@ export default function RootLayout() {
         </Stack>
       </GestureHandlerRootView>
     </QueryClientProvider>
+      {{else}}
+      <GestureHandlerRootView style=\{{ flex: 1 }}>
+        <Stack
+          screenOptions=\{{
+            headerStyle: {
+              backgroundColor: theme.colors.background,
+            },
+            headerTitleStyle: {
+              color: theme.colors.typography,
+            },
+            headerTintColor: theme.colors.typography,
+          }}
+        >
+          <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+          <Stack.Screen
+            name="modal"
+            options=\{{ title: "Modal", presentation: "modal" }}
+          />
+        </Stack>
+      </GestureHandlerRootView>
+      {{/unless}}
     {{/if}}
   );
 }

package/templates/frontend/nuxt/app/pages/{index.vue → index.vue.hbs}

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+{{#unless (eq api "none")}}
 const { $orpc } = useNuxtApp()
 import { useQuery } from '@tanstack/vue-query'
+{{/unless}}
 
 const TITLE_TEXT = `
  ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -18,14 +20,16 @@ const TITLE_TEXT = `
     ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
  `;
 
+{{#unless (eq api "none")}}
 const healthCheck = useQuery($orpc.healthCheck.queryOptions())
-
+{{/unless}}
 </script>
 
 <template>
   <div class="container mx-auto max-w-3xl px-4 py-2">
     <pre class="overflow-x-auto font-mono text-sm whitespace-pre-wrap">{{ TITLE_TEXT }}</pre>
     <div class="grid gap-6 mt-4">
+      {{#unless (eq api "none")}}
       <section class="rounded-lg border p-4">
         <h2 class="mb-2 font-medium">API Status</h2>
         <div class="flex items-center gap-2">
@@ -58,6 +62,7 @@ const healthCheck = useQuery($orpc.healthCheck.queryOptions())
             </div>
           </div>
       </section>
+      {{/unless}}
     </div>
   </div>
 </template>

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>