npm - create-better-t-stack - Versions diffs - 2.36.3 → 2.37.0-canary.6846bd90 - Mend

create-better-t-stack 2.36.3 → 2.37.0-canary.6846bd90

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/templates/frontend/react/next/src/app/layout.tsx.hbs CHANGED Viewed

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "../index.css";
-import Providers from "@/components/providers";
+{{#if (eq auth "clerk")}}{{#if (eq backend "convex")}}import { ClerkProvider } from "@clerk/nextjs";
+{{/if}}{{/if}}import Providers from "@/components/providers";
 import Header from "@/components/header";
 const geistSans = Geist({
@@ -24,18 +25,25 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <Providers>
-          <div className="grid grid-rows-[auto_1fr] h-svh">
-            <Header />
-            {children}
-          </div>
-        </Providers>
-      </body>
-    </html>
-  );
+  	return (
+		<html lang="en" suppressHydrationWarning>
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+			>
+				{{#if (and (eq auth "clerk") (eq backend "convex"))}}<ClerkProvider>
+					<Providers>
+						<div className="grid grid-rows-[auto_1fr] h-svh">
+							<Header />
+							{children}
+						</div>
+					</Providers>
+				</ClerkProvider>{{else}}<Providers>
+					<div className="grid grid-rows-[auto_1fr] h-svh">
+						<Header />
+						{children}
+					</div>
+				</Providers>{{/if}}
+			</body>
+		</html>
+	);
 }

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

@@ -1,7 +1,13 @@
 "use client";
 {{#if (eq backend "convex")}}
+{{#if (eq auth "clerk")}}
+import { useAuth } from "@clerk/nextjs";
+import { ConvexReactClient } from "convex/react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+{{else}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{/if}}
 {{else}}
 {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -34,7 +40,13 @@ export default function Providers({
       disableTransitionOnChange
     >
       {{#if (eq backend "convex")}}
+      {{#if (eq auth "clerk")}}
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        {children}
+      </ConvexProviderWithClerk>
+      {{else}}
       <ConvexProvider client={convex}>{children}</ConvexProvider>
+      {{/if}}
       {{else}}
       {{#unless (eq api "none")}}
       <QueryClientProvider client={queryClient}>

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

@@ -13,7 +13,13 @@ import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 {{#if (eq backend "convex")}}
-import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ConvexReactClient } from "convex/react";
+{{#if (eq auth "clerk")}}
+import { ClerkProvider, useAuth } from "@clerk/clerk-react";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+{{else}}
+import { ConvexProvider } from "convex/react";
+{{/if}}
 {{else}}
   {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -60,6 +66,26 @@ export default function App() {
   const convex = new ConvexReactClient(
     import.meta.env.VITE_CONVEX_URL as string,
   );
+  {{#if (eq auth "clerk")}}
+  return (
+    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+          storageKey="vite-ui-theme"
+        >
+          <div className="grid grid-rows-[auto_1fr] h-svh">
+            <Header />
+            <Outlet />
+          </div>
+          <Toaster richColors />
+        </ThemeProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+  {{else}}
   return (
     <ConvexProvider client={convex}>
       <ThemeProvider
@@ -76,6 +102,7 @@ export default function App() {
       </ThemeProvider>
     </ConvexProvider>
   );
+  {{/if}}
 }
 {{else if (eq api "orpc")}}
 export default function App() {

package/templates/frontend/react/tanstack-router/src/main.tsx.hbs CHANGED Viewed

@@ -12,7 +12,13 @@ import { routeTree } from "./routeTree.gen";
   import { queryClient, trpc } from "./utils/trpc";
 {{/if}}
 {{#if (eq backend "convex")}}
-  import { ConvexProvider, ConvexReactClient } from "convex/react";
+  import { ConvexReactClient } from "convex/react";
+  {{#if (eq auth "clerk")}}
+  import { ClerkProvider, useAuth } from "@clerk/clerk-react";
+  import { ConvexProviderWithClerk } from "convex/react-clerk";
+  {{else}}
+  import { ConvexProvider } from "convex/react";
+  {{/if}}
   const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
 {{/if}}
@@ -41,7 +47,19 @@ const router = createRouter({
   {{else if (eq backend "convex")}}
   context: {},
   Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
+    {{#if (eq auth "clerk")}}
+    return (
+      <ClerkProvider
+        publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
+      >
+        <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+          {children}
+        </ConvexProviderWithClerk>
+      </ClerkProvider>
+    );
+    {{else}}
     return <ConvexProvider client={convex}>{children}</ConvexProvider>;
+    {{/if}}
   },
   {{else}}
   context: {},

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

@@ -3,7 +3,7 @@ import { createRouter as createTanStackRouter } from "@tanstack/react-router";
 import { QueryClient } from "@tanstack/react-query";
 import { routerWithQueryClient } from "@tanstack/react-router-with-query";
 import { ConvexQueryClient } from "@convex-dev/react-query";
-import { ConvexProvider } from "convex/react";
+import { ConvexProvider, ConvexReactClient } from "convex/react";
 import { routeTree } from "./routeTree.gen";
 import Loader from "./components/loader";
 import "./index.css";
@@ -31,7 +31,11 @@ export function createRouter() {
   if (!CONVEX_URL) {
     console.error("missing envar VITE_CONVEX_URL");
   }
-  const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
+  const convex = new ConvexReactClient(CONVEX_URL, {
+    unsavedChangesWarning: false,
+  });
+  const convexQueryClient = new ConvexQueryClient(convex);
   const queryClient: QueryClient = new QueryClient({
     defaultOptions: {
@@ -49,7 +53,7 @@ export function createRouter() {
       defaultPreload: "intent",
       defaultPendingComponent: () => <Loader />,
       defaultNotFoundComponent: () => <div>Not Found</div>,
-      context: { queryClient },
+      context: { queryClient, convexClient: convex, convexQueryClient },
       Wrap: ({ children }) => (
         <ConvexProvider client={convexQueryClient.convexClient}>
           {children}
@@ -82,7 +86,7 @@ const trpcClient = createTRPCClient<AppRouter>({
   links: [
     httpBatchLink({
       url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
-      {{#if auth}}
+      {{#if (eq auth "better-auth")}}
       fetch(url, options) {
         return fetch(url, {
           ...options,

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

@@ -8,22 +8,37 @@ import {
   Scripts,
   createRootRouteWithContext,
   useRouterState,
+  useRouteContext,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "../components/header";
 import appCss from "../index.css?url";
 {{#if (eq backend "convex")}}
 import type { QueryClient } from "@tanstack/react-query";
-{{else}}
-  {{#unless (eq api "none")}}
-import type { QueryClient } from "@tanstack/react-query";
-  {{/unless}}
+import type { ConvexQueryClient } from "@convex-dev/react-query";
+import type { ConvexReactClient } from "convex/react";
 {{/if}}
 import Loader from "@/components/loader";
+{{#if (and (eq backend "convex") (eq auth "clerk"))}}
+import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
+import { getAuth } from "@clerk/tanstack-react-start/server";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
+  const auth = await getAuth(getWebRequest());
+  const token = await auth.getToken({ template: "convex" });
+  return { userId: auth.userId, token };
+});
+{{/if}}
 {{#if (eq backend "convex")}}
 export interface RouterAppContext {
   queryClient: QueryClient;
+  convexClient: ConvexReactClient;
+  convexQueryClient: ConvexQueryClient;
 }
 {{else}}
   {{#if (eq api "trpc")}}
@@ -68,11 +83,42 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   }),
   component: RootDocument,
+  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+  beforeLoad: async (ctx) => {
+    const { userId, token } = await fetchClerkAuth();
+    if (token) {
+      ctx.context.convexQueryClient.serverHttpClient?.setAuth(token);
+    }
+    return { userId, token };
+  },
+  {{/if}}
 });
 function RootDocument() {
   const isFetching = useRouterState({ select: (s) => s.isLoading });
+  {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+  const context = useRouteContext({ from: Route.id });
+  return (
+    <ClerkProvider>
+      <ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
+        <html lang="en" className="dark">
+          <head>
+            <HeadContent />
+          </head>
+          <body>
+            <div className="grid h-svh grid-rows-[auto_1fr]">
+              <Header />
+              {isFetching ? <Loader /> : <Outlet />}
+            </div>
+            <Toaster richColors />
+            <TanStackRouterDevtools position="bottom-left" />
+            <Scripts />
+          </body>
+        </html>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+  {{else}}
   return (
     <html lang="en" className="dark">
       <head>
@@ -94,4 +140,5 @@ function RootDocument() {
       </body>
     </html>
   );
+  {{/if}}
 }

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

@@ -9,14 +9,14 @@ import { Link } from "@tanstack/react-router";
 {{#unless (includes frontend "tanstack-start")}}
 import { ModeToggle } from "./mode-toggle";
 {{/unless}}
-{{#if auth}}
+{{#if (eq auth "better-auth")}}
 import UserMenu from "./user-menu";
 {{/if}}
 export default function Header() {
   const links = [
     { to: "/", label: "Home" },
-    {{#if auth}}
+    {{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
       { to: "/dashboard", label: "Dashboard" },
     {{/if}}
     {{#if (includes examples "todo")}}
@@ -67,7 +67,7 @@ export default function Header() {
           {{#unless (includes frontend "tanstack-start")}}
           <ModeToggle />
           {{/unless}}
-          {{#if auth}}
+          {{#if (eq auth "better-auth")}}
           <UserMenu />
           {{/if}}
         </div>

package/templates/frontend/solid/src/components/header.tsx.hbs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/solid-router";
-{{#if auth}}
+{{#if (eq auth "better-auth")}}
 import UserMenu from "./user-menu";
 {{/if}}
 import { For } from "solid-js";
@@ -7,7 +7,7 @@ import { For } from "solid-js";
 export default function Header() {
   const links = [
     { to: "/", label: "Home" },
-    {{#if auth}}
+    {{#if (eq auth "better-auth")}}
     { to: "/dashboard", label: "Dashboard" },
     {{/if}}
     {{#if (includes examples "todo")}}
@@ -27,7 +27,7 @@ export default function Header() {
           </For>
         </nav>
         <div class="flex items-center gap-2">
-          {{#if auth}}
+          {{#if (eq auth "better-auth")}}
           <UserMenu />
           {{/if}}
         </div>

package/templates/frontend/svelte/src/components/Header.svelte.hbs CHANGED Viewed

@@ -1,11 +1,11 @@
 <script lang="ts">
-    {{#if auth}}
+    {{#if (eq auth "better-auth")}}
 	import UserMenu from './UserMenu.svelte';
     {{/if}}
     const links = [
         { to: "/", label: "Home" },
-        {{#if auth}}
+        {{#if (eq auth "better-auth")}}
         { to: "/dashboard", label: "Dashboard" },
         {{/if}}
         {{#if (includes examples "todo")}}
@@ -31,7 +31,7 @@
 			{/each}
 		</nav>
 		<div class="flex items-center gap-2">
-		    {{#if auth}}
+		    {{#if (eq auth "better-auth")}}
             <UserMenu />
              {{/if}}
 		</div>

package/templates/deploy/alchemy/wrangler.jsonc.hbs DELETED Viewed

@@ -1,11 +0,0 @@
-// This is a temporary wrangler.jsonc file that will be overwritten by alchemy
-// It's only here so that `wrangler dev` can work or use alchemy dev instead
-{
-  "name": "{{projectName}}",
-  "main": "src/index.ts",
-  "compatibility_date": "2025-08-16",
-  "compatibility_flags": [
-    "nodejs_compat",
-    "nodejs_compat_populate_process_env"
-  ]
-}