create-better-t-stack 2.9.2 → 2.9.3

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

@@ -1,5 +1,7 @@
 import { Toaster } from "@/components/ui/sonner";
+{{#unless (eq backend "convex")}} {{#unless (eq api "none")}}
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+{{/unless}} {{/unless}}
 import {
   HeadContent,
   Outlet,
@@ -10,7 +12,9 @@ import {
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../components/header";
 import appCss from "../index.css?url";
+{{#unless (and (eq api "none") (not (eq backend "convex"))}}
 import type { QueryClient } from "@tanstack/react-query";
+{{/unless}}
 import Loader from "@/components/loader";
 
 {{#if (eq backend "convex")}}
@@ -25,12 +29,14 @@ export interface RouterAppContext {
   trpc: TRPCOptionsProxy<AppRouter>;
   queryClient: QueryClient;
 }
-  {{/if}}
-  {{#if (eq api "orpc")}}
+  {{else if (eq api "orpc")}}
 import type { orpc } from "@/utils/orpc";
 export interface RouterAppContext {
   orpc: typeof orpc;
   queryClient: QueryClient;
+}
+  {{else}}
+export interface RouterAppContext {
 }
   {{/if}}
 {{/if}}
@@ -75,7 +81,11 @@ function RootDocument() {
         </div>
         <Toaster richColors />
         <TanStackRouterDevtools position="bottom-left" />
+        {{#unless (eq backend "convex")}}
+          {{#unless (eq api "none")}}
         <ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
+          {{/unless}}
+        {{/unless}}
         <Scripts />
       </body>
     </html>

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

@@ -3,14 +3,14 @@ import { createFileRoute } from "@tanstack/react-router";
 import { convexQuery } from "@convex-dev/react-query";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
-{{else}}
+{{else if (or (eq api "trpc") (eq api "orpc"))}}
+import { useQuery } from "@tanstack/react-query";
   {{#if (eq api "trpc")}}
 import { useTRPC } from "@/utils/trpc";
   {{/if}}
   {{#if (eq api "orpc")}}
 import { useORPC } from "@/utils/orpc";
   {{/if}}
-import { useQuery } from "@tanstack/react-query";
 {{/if}}
 
 export const Route = createFileRoute("/")({
@@ -36,15 +36,12 @@ const TITLE_TEXT = `
 function HomeComponent() {
   {{#if (eq backend "convex")}}
   const healthCheck = useSuspenseQuery(convexQuery(api.healthCheck.get, {}));
-  {{else}}
-    {{#if (eq api "trpc")}}
+  {{else if (eq api "trpc")}}
   const trpc = useTRPC();
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
-    {{/if}}
-    {{#if (eq api "orpc")}}
+  {{else if (eq api "orpc")}}
   const orpc = useORPC();
   const healthCheck = useQuery(orpc.healthCheck.queryOptions());
-    {{/if}}
   {{/if}}
 
   return (
@@ -53,8 +50,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 (eq backend "convex")}}
             <div
               className={`h-2 w-2 rounded-full ${healthCheck.data === "OK" ? "bg-green-500" : healthCheck.isLoading ? "bg-orange-400" : "bg-red-500"}`}
             />
@@ -65,19 +62,23 @@ function HomeComponent() {
                   ? "Connected"
                   : "Error"}
             </span>
-            {{else}}
-            <div
-              className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
-            />
-            <span className="text-muted-foreground text-sm">
-              {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-muted-foreground text-sm">
+                {healthCheck.isLoading
+                  ? "Checking..."
+                  : healthCheck.data
+                    ? "Connected"
+                    : "Disconnected"}
+              </span>
+            </div>
+            {{/unless}}
+          {{/if}}
         </section>
       </div>
     </div>

package/templates/frontend/solid/src/main.tsx.hbs

@@ -2,8 +2,10 @@ import { RouterProvider, createRouter } from "@tanstack/solid-router";
 import { render } from "solid-js/web";
 import { routeTree } from "./routeTree.gen";
 import "./styles.css";
+{{#if (eq api "orpc")}}
 import { QueryClientProvider } from "@tanstack/solid-query";
 import { queryClient } from "./utils/orpc";
+{{/if}}
 
 const router = createRouter({
   routeTree,
@@ -20,9 +22,13 @@ declare module "@tanstack/solid-router" {
 
 function App() {
   return (
+    {{#if (eq api "orpc")}}
     <QueryClientProvider client={queryClient}>
+    {{/if}}
       <RouterProvider router={router} />
+    {{#if (eq api "orpc")}}
     </QueryClientProvider>
+    {{/if}}
   );
 }
 

package/templates/frontend/solid/src/routes/__root.tsx.hbs

@@ -1,9 +1,20 @@
 import Header from "@/components/header";
 import { Outlet, createRootRouteWithContext } from "@tanstack/solid-router";
 import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
+{{#if (eq api "orpc")}}
 import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+import type { QueryClient } from "@tanstack/solid-query";
+import type { orpc } from "../utils/orpc";
 
-export const Route = createRootRouteWithContext()({
+export interface RouterContext {
+  orpc: typeof orpc;
+  queryClient: QueryClient;
+}
+{{else}}
+export interface RouterContext {}
+{{/if}}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
   component: RootComponent,
 });
 
@@ -14,7 +25,9 @@ function RootComponent() {
         <Header />
         <Outlet />
       </div>
+      {{#if (eq api "orpc")}}
       <SolidQueryDevtools />
+      {{/if}}
       <TanStackRouterDevtools />
     </>
   );

package/templates/frontend/solid/src/routes/index.tsx.hbs

@@ -1,7 +1,10 @@
 import { createFileRoute } from "@tanstack/solid-router";
+{{#if (eq api "orpc")}}
 import { useQuery } from "@tanstack/solid-query";
 import { orpc } from "../utils/orpc";
 import { Match, Switch } from "solid-js";
+{{else}}
+{{/if}}
 
 export const Route = createFileRoute("/")({
   component: App,
@@ -24,12 +27,15 @@ const TITLE_TEXT = `
  `;
 
 function App() {
+  {{#if (eq api "orpc")}}
   const healthCheck = useQuery(() => orpc.healthCheck.queryOptions());
+  {{/if}}
 
   return (
     <div class="container mx-auto max-w-3xl px-4 py-2">
       <pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
       <div class="grid gap-6">
+        {{#if (eq api "orpc")}}
         <section class="rounded-lg border p-4">
           <h2 class="mb-2 font-medium">API Status</h2>
           <Switch>
@@ -53,12 +59,13 @@ function App() {
                 <span class="text-sm text-muted-foreground">
                   {healthCheck.data
                     ? "Connected"
-                    : "Disconnected (Success but no data)"}
+                    : "Disconnected"}
                 </span>
               </div>
             </Match>
           </Switch>
         </section>
+        {{/if}}
       </div>
     </div>
   );

package/templates/frontend/svelte/src/routes/+layout.svelte.hbs

@@ -16,16 +16,12 @@
 	</main>
 </div>
 {{else}}
+  {{#if (eq api "orpc")}}
 <script lang="ts">
     import { QueryClientProvider } from '@tanstack/svelte-query';
     import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import '../app.css';
-    {{#if (eq api "orpc")}}
     import { queryClient } from '$lib/orpc';
-    {{/if}}
-    {{#if (eq api "trpc")}}
-    import { queryClient } from '$lib/trpc';
-    {{/if}}
     import Header from '../components/Header.svelte';
 
 	let { children } = $props();
@@ -40,4 +36,19 @@
     </div>
     <SvelteQueryDevtools />
 </QueryClientProvider>
+  {{else}}
+<script lang="ts">
+	import '../app.css';
+    import Header from '../components/Header.svelte';
+
+	let { children } = $props();
+</script>
+
+<div class="grid h-svh grid-rows-[auto_1fr]">
+	<Header />
+	<main class="overflow-y-auto">
+		{@render children()}
+	</main>
+</div>
+  {{/if}}
 {{/if}}

package/templates/frontend/svelte/src/routes/+page.svelte.hbs

@@ -3,10 +3,8 @@
 import { useQuery } from 'convex-svelte';
 import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
 
-
 const healthCheck = useQuery(api.healthCheck.get, {});
 
-
 const TITLE_TEXT = `
    ██████╗ ███████╗████████╗████████╗███████╗██████╗
    ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
@@ -28,7 +26,7 @@ const TITLE_TEXT = `
 	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
 	<div class="grid gap-6">
 		<section class="rounded-lg border p-4">
-			<h2 class="mb-2 font-medium">API Status (Convex)</h2>
+			<h2 class="mb-2 font-medium">API Status</h2>
 			<div class="flex items-center gap-2">
 				<div
 					class={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
@@ -48,19 +46,9 @@ const TITLE_TEXT = `
 <script lang="ts">
 {{#if (eq api "orpc")}}
 import { orpc } from "$lib/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
-import { trpc } from "$lib/trpc";
-{{/if}}
 import { createQuery } from "@tanstack/svelte-query";
-
-{{#if (eq api "orpc")}}
 const healthCheck = createQuery(orpc.healthCheck.queryOptions());
 {{/if}}
-{{#if (eq api "trpc")}}
-const healthCheck = createQuery(trpc.healthCheck.queryOptions());
-{{/if}}
-
 
 const TITLE_TEXT = `
    ██████╗ ███████╗████████╗████████╗███████╗██████╗
@@ -82,8 +70,9 @@ const TITLE_TEXT = `
 <div class="container mx-auto max-w-3xl px-4 py-2">
 	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
 	<div class="grid gap-6">
+	    {{#if (eq api "orpc")}}
 		<section class="rounded-lg border p-4">
-			<h2 class="mb-2 font-medium">API Status{{#if (eq api "trpc")}} (tRPC){{/if}}{{#if (eq api "orpc")}} (oRPC){{/if}}</h2>
+			<h2 class="mb-2 font-medium">API Status</h2>
 			<div class="flex items-center gap-2">
 				<div
 					class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
@@ -97,6 +86,7 @@ const TITLE_TEXT = `
 				</span>
 			</div>
 		</section>
+	    {{/if}}
 	</div>
 </div>
 {{/if}}