idek

package.json

@@ -33,6 +33,7 @@
     "drizzle-orm": "^0.28.6",
     "drizzle-typebox": "^0.1.1",
     "elysia": "^0.6.22",
+    "elysia-autoroutes": "^0.2.2",
     "lucia": "^2.6.0",
     "pino-pretty": "^10.2.0",
     "zod": "^3.22.2"

src/auth/index.ts

@@ -22,6 +22,12 @@ export const auth = lucia({
     key: "user_key",
     session: "user_session",
   }),
+
+  getUserAttributes: (data) => {
+    return {
+      username: data.username,
+    };
+  },
 });
 
 export type Auth = typeof auth;

src/components/todos.tsx

@@ -8,13 +8,13 @@ export function TodoItem({ content, completed, id }: Todo) {
       <input
         type="checkbox"
         checked={completed}
-        hx-post={`/todos/toggle/${id}`}
+        hx-post={`/api/todos/toggle/${id}`}
         hx-swap="outerHTML"
         hx-target="closest div"
       />
       <button
         class="text-red-500"
-        hx-delete={`/todos/${id}`}
+        hx-delete={`/api/todos/${id}`}
         hx-swap="outerHTML"
         hx-target="closest div"
       >
@@ -39,7 +39,7 @@ export function TodoForm() {
   return (
     <form
       class="flex flex-row space-x-3"
-      hx-post="/todos"
+      hx-post="/api/todos"
       hx-swap="beforebegin"
       _="on submit target.reset()"
     >

src/context/index.ts

@@ -38,3 +38,9 @@ export const ctx = new Elysia({
 //   );
 // });
 // .onError(({ log, error }) => log.error(error));
+
+export type ElysiaApp = typeof ctx;
+export type GetHandler = Parameters<typeof ctx.get>[1];
+export type PostHandler = Parameters<typeof ctx.post>[1];
+export type PutHandler = Parameters<typeof ctx.put>[1];
+export type DelHandler = Parameters<typeof ctx.delete>[1];

src/db/schemas/auth.ts

@@ -2,6 +2,7 @@ import { sqliteTable, text, blob } from "drizzle-orm/sqlite-core";
 
 export const user = sqliteTable("user", {
   id: text("id").primaryKey(),
+  username: text("username").notNull(),
   // other user attributes
 });
 

src/handlers/auth.tsx

@@ -0,0 +1 @@
+import Html from "@kitajs/html";

src/handlers/index.ts

@@ -0,0 +1,7 @@
+import Elysia from "elysia";
+import { todosService } from "./todos";
+
+export const api = new Elysia({
+  name: "@app/api",
+  prefix: "/api",
+}).use(todosService);

src/main.ts

@@ -1,8 +1,8 @@
 import { Elysia } from "elysia";
 import { swagger } from "@elysiajs/swagger";
 import { staticPlugin } from "@elysiajs/static";
-import { todosService } from "./handlers/todos";
+import { api } from "./handlers";
-import { pages } from "./pages";
+import { autoroutes } from "elysia-autoroutes";
 
 const app = new Elysia({
   name: "@app/main",
@@ -10,8 +10,12 @@ const app = new Elysia({
   // @ts-expect-error idk why this is broken
   .use(swagger())
   .use(staticPlugin())
-  .use(todosService)
+  .use(api)
-  .use(pages)
+  .use(
+    autoroutes({
+      routesDir: "./pages",
+    })
+  )
   .listen(3000);
 
 export type App = typeof app;

src/pages/index.tsx

@@ -1,21 +1,15 @@
-import { Elysia } from "elysia";
+import { GetHandler } from "../context";
-import { ctx } from "../context";
 import Html from "@kitajs/html";
 import { BaseHtml } from "../components/base";
 
-export const pages = new Elysia({
+export const get: GetHandler = ({ html }) =>
-  name: "@app/pages",
+  html(
-})
+    <BaseHtml>
-  .use(ctx)
+      <div
-  .get("/", ({ html }) =>
+        class="flex w-full h-screen justify-center items-center"
-    html(
+        hx-get="/api/todos"
-      <BaseHtml>
+        hx-swap="innerHTML"
-        <div
+        hx-trigger="load"
-          class="flex w-full h-screen justify-center items-center"
+      />
-          hx-get="/todos"
+    </BaseHtml>
-          hx-swap="innerHTML"
-          hx-trigger="load"
-        />
-      </BaseHtml>
-    )
   );

src/types/lucia.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="lucia" />
 declare namespace Lucia {
   type Auth = import("../auth/index").Auth;
-  type DatabaseUserAttributes = {};
+  type DatabaseUserAttributes = {
+    username: string;
+  };
   type DatabaseSessionAttributes = {};
 }