create-croissant 0.1.24 → 0.1.25

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Scaffold a new project using the Croissant Stack",
   "repository": {
     "type": "git",

package/template/apps/web/src/components/app-sidebar.tsx

@@ -163,25 +163,25 @@ export function AppSidebar({ items = authNavItems, ...props }: AppSidebarProps)
                       <span className="truncate text-xs">{user.email}</span>
                     </div>
                     <div className="flex items-center gap-1 ml-auto">
-                      <Link
-                        to="/account"
-                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                      <SidebarMenuButton
+                        render={<Link to="/account" />}
+                        className="p-1 h-auto w-auto rounded hover:bg-sidebar-accent-foreground/10"
                         title="Account Settings"
                       >
                         <Settings className="h-4 w-4" />
-                      </Link>
-                      <button
+                      </SidebarMenuButton>
+                      <SidebarMenuButton
                         onClick={async (e) => {
                           e.preventDefault()
                           e.stopPropagation()
                           await authClient.signOut()
                           window.location.reload()
                         }}
-                        className="p-1 rounded hover:bg-sidebar-accent-foreground/10"
+                        className="p-1 h-auto w-auto rounded hover:bg-sidebar-accent-foreground/10"
                         title="Sign Out"
                       >
                         <LogOut className="h-4 w-4" />
-                      </button>
+                      </SidebarMenuButton>
                     </div>
                   </div>
                 </SidebarMenuButton>

package/template/apps/web/src/routes/_auth/examples/ssr-orpc-auth.tsx

@@ -1,7 +1,17 @@
 import { createFileRoute, redirect } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { getSessionFn } from "@/lib/auth-utils"
 import { orpc } from "@/lib/orpc"
 
+const getSecretData = createServerFn({ method: "GET" }).handler(async () => {
+  try {
+    const secretData = await orpc.getSecretData()
+    return { secretData }
+  } catch (err) {
+    return { secretData: null, error: "Failed to fetch secret data" }
+  }
+})
+
 export const Route = createFileRoute("/_auth/examples/ssr-orpc-auth")({
   beforeLoad: async () => {
     const session = await getSessionFn()
@@ -15,14 +25,7 @@ export const Route = createFileRoute("/_auth/examples/ssr-orpc-auth")({
     }
     return { session }
   },
-  loader: async () => {
-    try {
-      const secretData = await orpc.getSecretData()
-      return { secretData }
-    } catch (err) {
-      return { secretData: null, error: "Failed to fetch secret data" }
-    }
-  },
+  loader: () => getSecretData(),
   component: SSRORPCAuth,
 })
 

package/template/apps/web/src/routes/_public/examples/isr.tsx

@@ -1,6 +1,20 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { orpc } from "@/lib/orpc"
 
+const getISRData = createServerFn({ method: "GET" }).handler(async () => {
+  // In a real ISR scenario, this would be cached on the server
+  // For this example, we'll fetch planets via oRPC
+  const planets = await orpc.planets.getPlanets()
+
+  return {
+    generatedAt: new Date().toISOString(),
+    planets,
+    message:
+      "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
+  }
+})
+
 export const Route = createFileRoute("/_public/examples/isr")({
   head: () => ({
     meta: [
@@ -9,21 +23,12 @@ export const Route = createFileRoute("/_public/examples/isr")({
       },
       {
         name: "description",
-        content: "Experience high-performance page loads with ISR in Croissant Stack.",
+        content:
+          "Experience high-performance page loads with ISR in Croissant Stack.",
       },
     ],
   }),
-  loader: async () => {
-    // In a real ISR scenario, this would be cached on the server
-    // For this example, we'll fetch planets via oRPC
-    const planets = await orpc.planets.getPlanets()
-    
-    return {
-      generatedAt: new Date().toISOString(),
-      planets,
-      message: "This page is an example of ISR. In a production build with proper configuration, this data would be cached and updated in the background.",
-    }
-  },
+  loader: () => getISRData(),
   headers: () => ({
     // Cache at CDN for 10 seconds, allow stale content for up to 1 minute
     "Cache-Control": "public, max-age=10, s-maxage=10, stale-while-revalidate=60",

package/template/apps/web/src/routes/_public/examples/ssr-orpc.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { createFileRoute, useRouter } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { Check, Pencil, Plus, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { useForm } from "@tanstack/react-form"
@@ -27,6 +28,11 @@ const planetSchema = z.object({
   diameter: z.string().refine((val) => !isNaN(parseFloat(val)), "Must be a number"),
 })
 
+const getPlanets = createServerFn({ method: "GET" }).handler(async () => {
+  const planets = await orpc.planets.getPlanets()
+  return { planets }
+})
+
 export const Route = createFileRoute("/_public/examples/ssr-orpc")({
   head: () => ({
     meta: [
@@ -35,14 +41,12 @@ export const Route = createFileRoute("/_public/examples/ssr-orpc")({
       },
       {
         name: "description",
-        content: "Learn how to use Server-Side Rendering (SSR) with oRPC in Croissant Stack.",
+        content:
+          "Learn how to use Server-Side Rendering (SSR) with oRPC in Croissant Stack.",
       },
     ],
   }),
-  loader: async () => {
-    const planets = await orpc.planets.getPlanets()
-    return { planets }
-  },
+  loader: () => getPlanets(),
   component: SSRORPC,
 })
 

package/template/apps/web/src/routes/_public/index.tsx

@@ -1,4 +1,5 @@
 import { Link, createFileRoute } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
 import { Button } from "@workspace/ui/components/button"
 import type { router } from "@workspace/orpc/router"
 import type { InferRouterOutputs } from "@orpc/server"
@@ -7,6 +8,17 @@ import { orpc } from "@/lib/orpc"
 type Outputs = InferRouterOutputs<typeof router>
 type Planet = Outputs["planets"]["getPlanets"][number]
 
+const getHomeData = createServerFn({ method: "GET" }).handler(async () => {
+  const [helloRes, planets] = await Promise.all([
+    orpc.hello({ name: "Croissant Stack" }),
+    orpc.planets.getPlanets(),
+  ])
+  return {
+    message: helloRes.message,
+    planets,
+  }
+})
+
 export const Route = createFileRoute("/_public/")({
   head: () => ({
     meta: [
@@ -15,7 +27,8 @@ export const Route = createFileRoute("/_public/")({
       },
       {
         name: "description",
-        content: "Build full-stack applications faster with Croissant Stack. Featuring TanStack Start, oRPC, and Better Auth.",
+        content:
+          "Build full-stack applications faster with Croissant Stack. Featuring TanStack Start, oRPC, and Better Auth.",
       },
       {
         property: "og:title",
@@ -31,18 +44,10 @@ export const Route = createFileRoute("/_public/")({
       },
     ],
   }),
-  loader: async () => {
-    const [helloRes, planets] = await Promise.all([
-      orpc.hello({ name: "Croissant Stack" }),
-      orpc.planets.getPlanets(),
-    ])
-    return { 
-      message: helloRes.message,
-      planets,
-    }
-  },
+  loader: () => getHomeData(),
   headers: () => ({
-    "Cache-Control": "public, max-age=10, s-maxage=10, stale-while-revalidate=60",
+    "Cache-Control":
+      "public, max-age=10, s-maxage=10, stale-while-revalidate=60",
   }),
   component: App,
 })

package/template/packages/ui/src/components/sidebar.tsx

@@ -506,18 +506,28 @@ function SidebarMenuButton({
   size = "default",
   tooltip,
   className,
+  onClick,
   ...props
 }: useRender.ComponentProps<"button"> &
   React.ComponentProps<"button"> & {
     isActive?: boolean
     tooltip?: string | React.ComponentProps<typeof TooltipContent>
   } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const { isMobile, state } = useSidebar()
+  const { isMobile, state, setOpenMobile } = useSidebar()
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (isMobile) {
+      setOpenMobile(false)
+    }
+    onClick?.(event)
+  }
+
   const comp = useRender({
     defaultTagName: "button",
     props: mergeProps<"button">(
       {
         className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        onClick: handleClick,
       },
       props
     ),