create-better-t-stack 1.0.10 → 1.2.0

package/template/with-auth/apps/client/src/components/sign-up-form.tsx

@@ -9,156 +9,156 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 
 export default function SignUpForm({
-  onSwitchToSignIn,
+	onSwitchToSignIn,
 }: {
-  onSwitchToSignIn: () => void;
+	onSwitchToSignIn: () => void;
 }) {
-  const navigate = useNavigate({
-    from: "/",
-  });
-  const { isPending } = authClient.useSession();
+	const navigate = useNavigate({
+		from: "/",
+	});
+	const { isPending } = authClient.useSession();
 
-  const form = useForm({
-    defaultValues: {
-      email: "",
-      password: "",
-      name: "",
-    },
-    onSubmit: async ({ value }) => {
-      await authClient.signUp.email(
-        {
-          email: value.email,
-          password: value.password,
-          name: value.name,
-        },
-        {
-          onSuccess: () => {
-            toast.success("Sign up successful");
-            navigate({
-              to: "/dashboard",
-            });
-          },
-          onError: (error) => {
-            toast.error(error.error.message);
-          },
-        },
-      );
-    },
-    validators: {
-      onSubmit: z.object({
-        name: z.string().min(2, "Name must be at least 2 characters"),
-        email: z.string().email("Invalid email address"),
-        password: z.string().min(6, "Password must be at least 6 characters"),
-      }),
-    },
-  });
+	const form = useForm({
+		defaultValues: {
+			email: "",
+			password: "",
+			name: "",
+		},
+		onSubmit: async ({ value }) => {
+			await authClient.signUp.email(
+				{
+					email: value.email,
+					password: value.password,
+					name: value.name,
+				},
+				{
+					onSuccess: () => {
+						navigate({
+							to: "/dashboard",
+						});
+						toast.success("Sign up successful");
+					},
+					onError: (error) => {
+						toast.error(error.error.message);
+					},
+				},
+			);
+		},
+		validators: {
+			onSubmit: z.object({
+				name: z.string().min(2, "Name must be at least 2 characters"),
+				email: z.string().email("Invalid email address"),
+				password: z.string().min(6, "Password must be at least 6 characters"),
+			}),
+		},
+	});
 
-  if (isPending) {
-    return <Loader />;
-  }
+	if (isPending) {
+		return <Loader />;
+	}
 
-  return (
-    <div className="mx-auto mt-10 max-w-md p-6">
-      <h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
+	return (
+		<div className="mx-auto mt-10 max-w-md p-6">
+			<h1 className="mb-6 text-center text-3xl font-bold">Create Account</h1>
 
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          void form.handleSubmit();
-        }}
-        className="space-y-4"
-      >
-        <div>
-          <form.Field name="name">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Name</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					void form.handleSubmit();
+				}}
+				className="space-y-4"
+			>
+				<div>
+					<form.Field name="name">
+						{(field) => (
+							<div className="space-y-2">
+								<Label htmlFor={field.name}>Name</Label>
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+								/>
+								{field.state.meta.errors.map((error) => (
+									<p key={error?.message} className="text-red-500">
+										{error?.message}
+									</p>
+								))}
+							</div>
+						)}
+					</form.Field>
+				</div>
 
-        <div>
-          <form.Field name="email">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Email</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="email"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
+				<div>
+					<form.Field name="email">
+						{(field) => (
+							<div className="space-y-2">
+								<Label htmlFor={field.name}>Email</Label>
+								<Input
+									id={field.name}
+									name={field.name}
+									type="email"
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+								/>
+								{field.state.meta.errors.map((error) => (
+									<p key={error?.message} className="text-red-500">
+										{error?.message}
+									</p>
+								))}
+							</div>
+						)}
+					</form.Field>
+				</div>
 
-        <div>
-          <form.Field name="password">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Password</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
+				<div>
+					<form.Field name="password">
+						{(field) => (
+							<div className="space-y-2">
+								<Label htmlFor={field.name}>Password</Label>
+								<Input
+									id={field.name}
+									name={field.name}
+									type="password"
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+								/>
+								{field.state.meta.errors.map((error) => (
+									<p key={error?.message} className="text-red-500">
+										{error?.message}
+									</p>
+								))}
+							</div>
+						)}
+					</form.Field>
+				</div>
 
-        <form.Subscribe>
-          {(state) => (
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={!state.canSubmit || state.isSubmitting}
-            >
-              {state.isSubmitting ? "Submitting..." : "Sign Up"}
-            </Button>
-          )}
-        </form.Subscribe>
-      </form>
+				<form.Subscribe>
+					{(state) => (
+						<Button
+							type="submit"
+							className="w-full"
+							disabled={!state.canSubmit || state.isSubmitting}
+						>
+							{state.isSubmitting ? "Submitting..." : "Sign Up"}
+						</Button>
+					)}
+				</form.Subscribe>
+			</form>
 
-      <div className="mt-4 text-center">
-        <Button
-          variant="link"
-          onClick={onSwitchToSignIn}
-          className="text-indigo-600 hover:text-indigo-800"
-        >
-          Already have an account? Sign In
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="mt-4 text-center">
+				<Button
+					variant="link"
+					onClick={onSwitchToSignIn}
+					className="text-indigo-600 hover:text-indigo-800"
+				>
+					Already have an account? Sign In
+				</Button>
+			</div>
+		</div>
+	);
 }

package/template/{with-prisma-sqlite/apps/server/src/with-auth-lib/context.ts → with-auth/apps/server/src/lib/with-elysia-context.ts}

@@ -1,13 +1,13 @@
-import type { Context as HonoContext } from "hono";
+import type { Context as ElysiaContext } from "elysia";
 import { auth } from "./auth";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: ElysiaContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
+    headers: context.request.headers,
   });
 
   return {

package/template/{with-drizzle-sqlite/apps/server/src/with-auth-lib/context.ts → with-auth/apps/server/src/lib/with-hono-context.ts}

@@ -2,12 +2,12 @@ import type { Context as HonoContext } from "hono";
 import { auth } from "./auth";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: HonoContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   const session = await auth.api.getSession({
-    headers: hono.req.raw.headers,
+    headers: context.req.raw.headers,
   });
 
   return {

package/template/with-auth/apps/server/src/routers/index.ts

@@ -1,19 +1,17 @@
-
-import { router, publicProcedure, protectedProcedure } from "../lib/trpc";
+import { protectedProcedure, publicProcedure, router } from "../lib/trpc";
 import { todoRouter } from "./todo";
 
-
 export const appRouter = router({
-  healthCheck: publicProcedure.query(() => {
-    return "OK";
-  }),
-  privateData: protectedProcedure.query(({ ctx }) => {
-    return {
-      message: "This is private",
-      user: ctx.session.user,
-    };
-  }),
-  todo: todoRouter,
+	healthCheck: publicProcedure.query(() => {
+		return "OK";
+	}),
+	privateData: protectedProcedure.query(({ ctx }) => {
+		return {
+			message: "This is private",
+			user: ctx.session.user,
+		};
+	}),
+	todo: todoRouter,
 });
 
 export type AppRouter = typeof appRouter;

package/template/with-auth/apps/server/src/with-elysia-index.ts

@@ -0,0 +1,38 @@
+import "dotenv/config";
+import { Elysia } from "elysia";
+import { cors } from "@elysiajs/cors";
+import { auth } from "./lib/auth";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const app = new Elysia()
+  .use(
+    cors({
+      origin: process.env.CORS_ORIGIN || "",
+      methods: ["GET", "POST", "OPTIONS"],
+      allowedHeaders: ["Content-Type", "Authorization"],
+      credentials: true,
+    }),
+  )
+  .all("/api/auth/*", async (context) => {
+    const { request } = context;
+    if (["POST", "GET"].includes(request.method)) {
+      return auth.handler(request);
+    } else {
+      context.error(405);
+    }
+  })
+  .all("/trpc/*", async (context) => {
+    const res = await fetchRequestHandler({
+      endpoint: "/trpc",
+      router: appRouter,
+      req: context.request,
+      createContext: () => createContext({ context }),
+    });
+    return res;
+  })
+  .get("/", () => "OK")
+  .listen(3000, () => {
+    console.log(`Server is running on http://localhost:3000`);
+  });

package/template/with-auth/apps/server/src/with-hono-index.ts

@@ -0,0 +1,39 @@
+
+import { trpcServer } from "@hono/trpc-server";
+import "dotenv/config";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { auth } from "./lib/auth";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+
+const app = new Hono();
+
+app.use(logger());
+
+app.use(
+	"/*",
+	cors({
+		origin: process.env.CORS_ORIGIN || "",
+		allowMethods: ["GET", "POST", "OPTIONS"],
+		allowHeaders: ["Content-Type", "Authorization"],
+		credentials: true,
+	}),
+);
+
+app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
+
+app.use(
+	"/trpc/*",
+	trpcServer({
+		router: appRouter,
+		createContext: (_opts, context) => {
+			return createContext({ context });
+		},
+	}),
+);
+
+app.get("/", (c) => {
+	return c.text("OK");
+});

package/template/with-elysia/apps/server/src/index.ts

@@ -0,0 +1,27 @@
+import "dotenv/config";
+import { Elysia } from "elysia";
+import { cors } from "@elysiajs/cors";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+const app = new Elysia()
+  .use(
+    cors({
+      origin: process.env.CORS_ORIGIN || "",
+      methods: ["GET", "POST", "OPTIONS"],
+    }),
+  )
+  .all("/trpc/*", async (context) => {
+    const res = await fetchRequestHandler({
+      endpoint: "/trpc",
+      router: appRouter,
+      req: context.request,
+      createContext: () => createContext({ context }),
+    });
+    return res;
+  })
+  .get("/", () => "OK")
+  .listen(3000, () => {
+    console.log(`Server is running on http://localhost:3000`);
+  });

package/template/with-elysia/apps/server/src/lib/context.ts

@@ -0,0 +1,13 @@
+import type { Context as ElysiaContext } from "elysia";
+
+export type CreateContextOptions = {
+  context: ElysiaContext;
+};
+
+export async function createContext({ context }: CreateContextOptions) {
+  return {
+    session: null,
+  };
+}
+
+export type Context = Awaited<ReturnType<typeof createContext>>;

package/template/with-hono/apps/server/src/index.ts

@@ -0,0 +1,33 @@
+import { trpcServer } from "@hono/trpc-server";
+import "dotenv/config";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
+import { createContext } from "./lib/context";
+import { appRouter } from "./routers/index";
+
+const app = new Hono();
+
+app.use(logger());
+
+app.use(
+	"/*",
+	cors({
+		origin: process.env.CORS_ORIGIN || "",
+		allowMethods: ["GET", "POST", "OPTIONS"],
+	}),
+);
+
+app.use(
+	"/trpc/*",
+	trpcServer({
+		router: appRouter,
+		createContext: (_opts, context) => {
+			return createContext({ context });
+		},
+	}),
+);
+
+app.get("/", (c) => {
+	return c.text("OK");
+});

package/template/{base → with-hono}/apps/server/src/lib/context.ts

@@ -1,10 +1,10 @@
 import type { Context as HonoContext } from "hono";
 
 export type CreateContextOptions = {
-  hono: HonoContext;
+  context: HonoContext;
 };
 
-export async function createContext({ hono }: CreateContextOptions) {
+export async function createContext({ context }: CreateContextOptions) {
   return {
     session: null,
   };

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

@@ -1,41 +0,0 @@
-import { serve } from "@hono/node-server";
-import { trpcServer } from "@hono/trpc-server";
-import "dotenv/config";
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { logger } from "hono/logger";
-import { createContext } from "./lib/context";
-import { appRouter } from "./routers/index";
-
-const app = new Hono();
-
-app.use(logger());
-
-app.use(
-  "/*",
-  cors({
-    origin: process.env.CORS_ORIGIN || "",
-    allowMethods: ["GET", "POST", "OPTIONS"],
-  }),
-);
-
-app.use(
-  "/trpc/*",
-  trpcServer({
-    router: appRouter,
-    createContext: (_opts, hono) => {
-      return createContext({ hono });
-    },
-  }),
-);
-
-app.get("/", (c) => {
-  return c.text("OK");
-});
-
-serve({
-  fetch: app.fetch,
-  port: 3000,
-}, (info) => {
-  console.log(`Server is running on http://localhost:${info.port}`)
-});

package/template/with-auth/apps/server/src/index.ts

@@ -1,46 +0,0 @@
-import { serve } from "@hono/node-server";
-import { trpcServer } from "@hono/trpc-server";
-import "dotenv/config";
-import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { logger } from "hono/logger";
-import { auth } from "./lib/auth";
-import { createContext } from "./lib/context";
-import { appRouter } from "./routers/index";
-
-const app = new Hono();
-
-app.use(logger());
-
-app.use(
-  "/*",
-  cors({
-    origin: process.env.CORS_ORIGIN || "",
-    allowMethods: ["GET", "POST", "OPTIONS"],
-    allowHeaders: ["Content-Type", "Authorization"],
-    credentials: true,
-  }),
-);
-
-app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
-
-app.use(
-  "/trpc/*",
-  trpcServer({
-    router: appRouter,
-    createContext: (_opts, hono) => {
-      return createContext({ hono });
-    },
-  }),
-);
-
-app.get("/", (c) => {
-  return c.text("OK");
-});
-
-serve({
-  fetch: app.fetch,
-  port: 3000,
-}, (info) => {
-  console.log(`Server is running on http://localhost:${info.port}`)
-});

package/template/with-drizzle-postgres/apps/server/src/routers/todo.ts

@@ -1,44 +0,0 @@
-import { z } from "zod";
-import { router, publicProcedure } from "../lib/trpc";
-import { todo } from "../db/schema";
-import { eq } from "drizzle-orm";
-import { db } from "../db";
-
-export const todoRouter = router({
-  getAll: publicProcedure.query(async () => {
-    return await db.select().from(todo).all();
-  }),
-
-  create: publicProcedure
-    .input(z.object({ text: z.string().min(1) }))
-    .mutation(async ({ input }) => {
-      return await db
-        .insert(todo)
-        .values({
-          text: input.text,
-        })
-        .returning()
-        .get();
-    }),
-
-  toggle: publicProcedure
-    .input(z.object({ id: z.number(), completed: z.boolean() }))
-    .mutation(async ({ input }) => {
-      return await db
-        .update(todo)
-        .set({ completed: input.completed })
-        .where(eq(todo.id, input.id))
-        .returning()
-        .get();
-    }),
-
-  delete: publicProcedure
-    .input(z.object({ id: z.number() }))
-    .mutation(async ({ input }) => {
-      return await db
-        .delete(todo)
-        .where(eq(todo.id, input.id))
-        .returning()
-        .get();
-    }),
-});