create-better-t-stack 1.13.2 → 2.0.0

package/{template/base/apps/web-react-router/src/root.tsx → templates/frontend/react-router/src/root.tsx.hbs}

@@ -12,9 +12,15 @@ import type { Route } from "./+types/root";
 import "./index.css";
 import Header from "./components/header";
 import { ThemeProvider } from "./components/theme-provider";
-import { queryClient } from "./utils/trpc";
 import { Toaster } from "./components/ui/sonner";
 
+{{#if (eq api "orpc")}}
+import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { queryClient } from "./utils/trpc";
+{{/if}}
+
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
@@ -46,6 +52,26 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
+{{#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>
+  );
+}
+{{/if}}
+
+{{#if (eq api "trpc")}}
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
@@ -60,6 +86,7 @@ export default function App() {
     </QueryClientProvider>
   );
 }
+{{/if}}
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   let message = "Oops!";

package/{template/base/apps/web-react-router/src/routes/_index.tsx → templates/frontend/react-router/src/routes/_index.tsx.hbs}

@@ -1,5 +1,10 @@
 import type { Route } from "./+types/_index";
+{{#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";
 
 const TITLE_TEXT = `
@@ -23,7 +28,13 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
+  
+  {{#if (eq api "orpc")}}
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">

package/templates/frontend/react-router/vite.config.ts.hbs

@@ -0,0 +1,37 @@
+{{! Import VitePWA only if 'pwa' addon is selected }}
+{{#if (includes addons "pwa")}}
+import { VitePWA } from "vite-plugin-pwa";
+{{/if}}
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    reactRouter(),
+    tsconfigPaths(),
+    {{! Add VitePWA plugin config only if 'pwa' addon is selected }}
+    {{#if (includes addons "pwa")}}
+    VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        // Use context variables for better naming
+        name: "{{projectName}}",
+        short_name: "{{projectName}}",
+        description: "{{projectName}} - PWA Application",
+        theme_color: "#0c0c0c",
+        // Add more manifest options as needed
+      },
+      pwaAssets: {
+        disabled: false, // Set to false to enable asset generation
+        config: true,    // Use pwa-assets.config.ts
+      },
+      devOptions: {
+        enabled: true, // Enable PWA features in dev mode
+      },
+    }),
+    {{/if}}
+  ],
+});

package/{template/base/apps/web-tanstack-router → templates/frontend/tanstack-router}/package.json

@@ -32,10 +32,6 @@
 		"@tailwindcss/vite": "^4.0.15",
 		"@tanstack/react-query": "^5.69.0",
 		"@tanstack/react-router": "^1.114.25",
-		"@trpc/client": "^11.0.0",
-		"@trpc/react-query": "^11.0.0",
-    "@trpc/tanstack-react-query": "^11.0.0",
-		"@trpc/server": "^11.0.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.473.0",

package/{template/base/apps/web-tanstack-router/src/main.tsx → templates/frontend/tanstack-router/src/main.tsx.hbs}

@@ -3,8 +3,27 @@ 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 { orpc, queryClient } from "./utils/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
 import { queryClient, trpc } from "./utils/trpc";
+{{/if}}
 
+{{#if (eq api "orpc")}}
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  defaultPendingComponent: () => <Loader />,
+  context: { orpc, queryClient },
+  Wrap: function WrapComponent({ children }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  },
+});
+{{/if}}
+{{#if (eq api "trpc")}}
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
@@ -16,6 +35,7 @@ const router = createRouter({
     );
   },
 });
+{{/if}}
 
 // Register things for typesafety
 declare module "@tanstack/react-router" {

package/{template/base/apps/web-tanstack-router/src/routes/__root.tsx → templates/frontend/tanstack-router/src/routes/__root.tsx.hbs}

@@ -2,9 +2,21 @@ import Header from "@/components/header";
 import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
+{{#if (eq api "orpc")}}
+import { link, orpc, ORPCContext } from "@/utils/orpc";
+import type { QueryClient } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+import type { RouterClient } from "@orpc/server";
+import { createORPCReactQueryUtils } from "@orpc/react-query";
+import type { appRouter } from "../../../server/src/routers";
+import { createORPCClient } from "@orpc/client";
+{{/if}}
+{{#if (eq api "trpc")}}
 import type { trpc } from "@/utils/trpc";
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+{{/if}}
 import {
   HeadContent,
   Outlet,
@@ -14,10 +26,18 @@ import {
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
 
+{{#if (eq api "orpc")}}
+export interface RouterAppContext {
+  orpc: typeof orpc;
+  queryClient: QueryClient;
+}
+{{/if}}
+{{#if (eq api "trpc")}}
 export interface RouterAppContext {
   trpc: typeof trpc;
   queryClient: QueryClient;
 }
+{{/if}}
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({
   component: RootComponent,
@@ -40,6 +60,33 @@ 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,
+  });
+  return (
+    <>
+      <HeadContent />
+      <ORPCContext.Provider value={orpc}>
+        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            {isFetching ? <Loader /> : <Outlet />}
+          </div>
+          <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,
@@ -59,3 +106,4 @@ function RootComponent() {
     </>
   );
 }
+{{/if}}

package/{template/base/apps/web-tanstack-router/src/routes/index.tsx → templates/frontend/tanstack-router/src/routes/index.tsx.hbs}

@@ -1,4 +1,9 @@
+{{#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";
 import { createFileRoute } from "@tanstack/react-router";
 
@@ -23,7 +28,12 @@ const TITLE_TEXT = `
  `;
 
 function HomeComponent() {
+  {{#if (eq api "orpc")}}
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "trpc")}}
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">

package/templates/frontend/tanstack-router/vite.config.ts.hbs

@@ -0,0 +1,43 @@
+{{! Import VitePWA only if 'pwa' addon is selected }}
+{{#if (includes addons "pwa")}}
+import { VitePWA } from "vite-plugin-pwa";
+{{/if}}
+import tailwindcss from "@tailwindcss/vite";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    TanStackRouterVite({}),
+    react(),
+    {{! Add VitePWA plugin config only if 'pwa' addon is selected }}
+    {{#if (includes addons "pwa")}}
+    VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        // Use context variables for better naming
+        name: "{{projectName}}",
+        short_name: "{{projectName}}",
+        description: "{{projectName}} - PWA Application",
+        theme_color: "#0c0c0c",
+        // Add more manifest options as needed
+      },
+      pwaAssets: {
+        disabled: false, // Set to false to enable asset generation
+        config: true,    // Use pwa-assets.config.ts
+      },
+      devOptions: {
+        enabled: true, // Enable PWA features in dev mode
+      },
+    }),
+    {{/if}}
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/{template/base/apps/web-tanstack-start → templates/frontend/tanstack-start}/package.json

@@ -20,9 +20,6 @@
     "@tanstack/react-router-with-query": "^1.114.3",
     "@tanstack/react-start": "^1.114.3",
     "@tanstack/router-plugin": "^1.114.3",
-    "@trpc/client": "^11.0.2",
-    "@trpc/server": "^11.0.2",
-    "@trpc/tanstack-react-query": "^11.0.2",
     "class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
     "lucide-react": "^0.473.0",

package/{template/with-auth/apps/web-tanstack-start/src/router.tsx → templates/frontend/tanstack-start/src/router.tsx.hbs}

@@ -4,15 +4,21 @@ import {
   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 { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import { toast } from "sonner";
 import type { AppRouter } from "../../server/src/routers";
-import Loader from "./components/loader";
-import "./index.css";
-import { routeTree } from "./routeTree.gen";
 import { TRPCProvider } from "./utils/trpc";
+{{/if}}
+{{#if (eq api "orpc")}}
+import { orpc, ORPCContext, queryClient } from "./utils/orpc";
+{{/if}}
 
+{{#if (eq api "trpc")}}
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
@@ -32,13 +38,19 @@ export const queryClient = new QueryClient({
 const trpcClient = createTRPCClient<AppRouter>({
   links: [
     httpBatchLink({
+      {{#if (includes frontend 'next')}}
+      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/trpc`,
+      {{else}}
       url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+      {{/if}}
+      {{#if auth}}
       fetch(url, options) {
         return fetch(url, {
           ...options,
           credentials: "include",
         });
       },
+      {{/if}}
     }),
   ],
 });
@@ -47,20 +59,34 @@ const trpc = createTRPCOptionsProxy({
   client: trpcClient,
   queryClient: queryClient,
 });
+{{/if}}
+
 
 export const createRouter = () => {
   const router = createTanstackRouter({
     routeTree,
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
+    {{#if (eq api "trpc")}}
     context: { trpc, queryClient },
+{{/if}}
+{{#if (eq api "orpc")}}
+    context: { orpc, queryClient },
+{{/if}}
     defaultPendingComponent: () => <Loader />,
     defaultNotFoundComponent: () => <div>Not Found</div>,
     Wrap: ({ children }) => (
       <QueryClientProvider client={queryClient}>
+        {{#if (eq api "trpc")}}
         <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
           {children}
         </TRPCProvider>
+        {{/if}}
+        {{#if (eq api "orpc")}}
+        <ORPCContext.Provider value={orpc}>
+          {children}
+        </ORPCContext.Provider>
+        {{/if}}
       </QueryClientProvider>
     ),
   });

package/{template/base/apps/web-tanstack-start/src/routes/__root.tsx → templates/frontend/tanstack-start/src/routes/__root.tsx.hbs}

@@ -11,14 +11,27 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../components/header";
 import appCss from "../index.css?url";
 import type { QueryClient } from "@tanstack/react-query";
+{{#if (eq api "trpc")}}
 import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
 import type { AppRouter } from "../../../server/src/routers";
+{{/if}}
+{{#if (eq api "orpc")}}
+import type { orpc } from "@/utils/orpc";
+{{/if}}
 import Loader from "@/components/loader";
 
+{{#if (eq api "trpc")}}
 export interface RouterAppContext {
   trpc: TRPCOptionsProxy<AppRouter>;
   queryClient: QueryClient;
 }
+{{/if}}
+{{#if (eq api "orpc")}}
+export interface RouterAppContext {
+  orpc: typeof orpc;
+  queryClient: QueryClient;
+}
+{{/if}}
 
 export const Route = createRootRouteWithContext<RouterAppContext>()({
   head: () => ({

package/{template/base/apps/web-tanstack-start/src/routes/index.tsx → templates/frontend/tanstack-start/src/routes/index.tsx.hbs}

@@ -1,4 +1,9 @@
+{{#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";
 import { createFileRoute } from "@tanstack/react-router";
 
@@ -23,8 +28,14 @@ const TITLE_TEXT = `
  `;
 
 function HomeComponent() {
+  {{#if (eq api "trpc")}}
   const trpc = useTRPC();
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
+  {{/if}}
+  {{#if (eq api "orpc")}}
+  const orpc = useORPC();
+  const healthCheck = useQuery(orpc.healthCheck.queryOptions());
+  {{/if}}
 
   return (
     <div className="container mx-auto max-w-3xl px-4 py-2">

package/templates/frontend/web-base/src/components/header.tsx.hbs

@@ -0,0 +1,80 @@
+{{#if (includes frontend "next")}}
+"use client";
+import Link from "next/link";
+{{else if (includes frontend "react-router")}}
+import { NavLink } from "react-router";
+{{else if (or (includes frontend "tanstack-router") (includes frontend "tanstack-start"))}}
+import { Link } from "@tanstack/react-router";
+{{/if}}
+
+{{#unless (includes frontend "tanstack-start")}}
+import { ModeToggle } from "./mode-toggle";
+{{/unless}}
+{{#if auth}}
+import UserMenu from "./user-menu";
+{{/if}}
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    {{#if auth}}
+      { to: "/dashboard", label: "Dashboard" },
+    {{/if}}
+    {{#if (includes examples "todo")}}
+    { to: "/todos", label: "Todos" },
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    { to: "/ai", label: "AI Chat" },
+    {{/if}}
+  ];
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <nav className="flex gap-4 text-lg">
+          {links.map(({ to, label }) => {
+            {{#if (includes frontend "next")}}
+            return (
+              <Link key={to} href={to}>
+                {label}
+              </Link>
+            );
+            {{else if (includes frontend "react-router")}}
+            return (
+              <NavLink 
+                key={to} 
+                to={to} 
+                className={({ isActive }) => isActive ? "font-bold" : ""} 
+                end
+              >
+                {label}
+              </NavLink>
+            );
+            {{else if (or (includes frontend "tanstack-router") (includes frontend "tanstack-start"))}}
+            return (
+              <Link
+                key={to}
+                to={to}
+              >
+                {label}
+              </Link>
+            );
+            {{else}}
+            // Fallback case (shouldn't happen with valid frontend selection)
+            return null;
+            {{/if}}
+          })}
+        </nav>
+        <div className="flex items-center gap-2">
+          {{#unless (includes frontend "tanstack-start")}}
+          <ModeToggle />
+          {{/unless}}
+          {{#if auth}}
+          <UserMenu />
+          {{/if}}
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

package/template/base/apps/server/src/lib/trpc.ts

@@ -1,8 +0,0 @@
-import { initTRPC, TRPCError } from "@trpc/server";
-import type { Context } from "./context";
-
-export const t = initTRPC.context<Context>().create();
-
-export const router = t.router;
-
-export const publicProcedure = t.procedure;

package/template/base/apps/server/src/routers/index.ts

@@ -1,11 +0,0 @@
-import { router, publicProcedure } from "../lib/trpc";
-import { todoRouter } from "./todo";
-
-export const appRouter = router({
-  healthCheck: publicProcedure.query(() => {
-    return "OK";
-  }),
-  todo: todoRouter,
-});
-
-export type AppRouter = typeof appRouter;

package/template/base/apps/web-base/src/utils/trpc.ts

@@ -1,33 +0,0 @@
-import type { AppRouter } from "../../../server/src/routers";
-import { QueryCache, QueryClient } from "@tanstack/react-query";
-import { createTRPCClient, httpBatchLink } from "@trpc/client";
-import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
-import { toast } from "sonner";
-
-export const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error) => {
-      toast.error(error.message, {
-        action: {
-          label: "retry",
-          onClick: () => {
-            queryClient.invalidateQueries();
-          },
-        },
-      });
-    },
-  }),
-});
-
-export const trpcClient = createTRPCClient<AppRouter>({
-  links: [
-    httpBatchLink({
-      url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-    }),
-  ],
-});
-
-export const trpc = createTRPCOptionsProxy<AppRouter>({
-  client: trpcClient,
-  queryClient,
-});

package/template/base/apps/web-next/src/components/header.tsx

@@ -1,30 +0,0 @@
-"use client"
-import Link from "next/link";
-import { ModeToggle } from "./mode-toggle";
-
-export default function Header() {
-  const links = [
-    { to: "/", label: "Home" },
-  ];
-
-  return (
-    <div>
-      <div className="flex flex-row items-center justify-between px-2 py-1">
-        <nav className="flex gap-4 text-lg">
-          {links.map(({ to, label }) => (
-            <Link
-              key={to}
-              href={to}
-            >
-              {label}
-            </Link>
-          ))}
-        </nav>
-        <div className="flex items-center gap-2">
-          <ModeToggle />
-        </div>
-      </div>
-      <hr />
-    </div>
-  );
-}

package/template/base/apps/web-next/src/utils/trpc.ts

@@ -1,33 +0,0 @@
-import { QueryCache, QueryClient } from '@tanstack/react-query';
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
-import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
-import type { AppRouter } from '../../../server/src/routers';
-import { toast } from 'sonner';
-
-export const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    onError: (error) => {
-      toast.error(error.message, {
-        action: {
-          label: "retry",
-          onClick: () => {
-            queryClient.invalidateQueries();
-          },
-        },
-      });
-    },
-  }),
-});
-
-const trpcClient = createTRPCClient<AppRouter>({
-  links: [
-    httpBatchLink({
-      url: `${process.env.NEXT_PUBLIC_SERVER_URL}/trpc`,
-    }),
-  ],
-})
-
-export const trpc = createTRPCOptionsProxy<AppRouter>({
-  client: trpcClient,
-  queryClient,
-});