diff --git a/.vscode/settings.json b/.vscode/settings.json index d7da94f..7a3a3fc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { "editor.defaultFormatter": "biomejs.biome", - "editor.formatOnSave": true -} \ No newline at end of file + "editor.formatOnSave": true, + "biome.configurationPath": "biome.json" +} diff --git a/biome.json b/biome.json index d03d259..8729783 100644 --- a/biome.json +++ b/biome.json @@ -9,7 +9,18 @@ "recommended": true } }, + "formatter": { + "enabled": true, + "indentWidth": 2, + "indentStyle": "space" + }, "files": { - "ignore": ["dist/**", "*.js", "*.cjs", "*.mjs", "*.spec.ts"] + "ignore": [ + "dist/**", + "*.js", + "*.cjs", + "*.mjs", + "*.spec.ts" + ] } -} +} \ No newline at end of file diff --git a/components/Link.tsx b/components/Link.tsx index e3b036c..ab0f598 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -4,6 +4,7 @@ import { NavLink } from "@mantine/core"; export function Link({ href, label }: { href: string; label: string }) { const pageContext = usePageContext(); const { urlPathname } = pageContext; - const isActive = href === "/" ? urlPathname === href : urlPathname.startsWith(href); + const isActive = + href === "/" ? urlPathname === href : urlPathname.startsWith(href); return ; } diff --git a/database/todoItems.ts b/database/todoItems.ts index 5404680..ef8bcf3 100644 --- a/database/todoItems.ts +++ b/database/todoItems.ts @@ -9,7 +9,9 @@ const database = // - We use globalThis so that the database isn't reset upon HMR. // - The database is reset when restarting the server, use a proper database (SQLite/PostgreSQL/...) if you want persistent data. // biome-ignore lint: - ((globalThis as unknown as { __database: { todos: TodoItem[] } }).__database ??= { todos: todosDefault }); + (( + globalThis as unknown as { __database: { todos: TodoItem[] } } + ).__database ??= { todos: todosDefault }); const { todos } = database; diff --git a/hono-entry.node.ts b/hono-entry.node.ts index e5927a7..c2a1688 100644 --- a/hono-entry.node.ts +++ b/hono-entry.node.ts @@ -5,7 +5,9 @@ import { env } from "hono/adapter"; import { compress } from "hono/compress"; import app from "./hono-entry.js"; -const envs = env<{ NODE_ENV?: string; PORT?: string }>({ env: {} } as unknown as Context<{ +const envs = env<{ NODE_ENV?: string; PORT?: string }>({ + env: {}, +} as unknown as Context<{ Bindings: { NODE_ENV?: string; PORT?: string }; }>); diff --git a/hono-entry.ts b/hono-entry.ts index 8274a07..ed7dd8d 100644 --- a/hono-entry.ts +++ b/hono-entry.ts @@ -1,4 +1,7 @@ -import { authjsHandler, authjsSessionMiddleware } from "./server/authjs-handler"; +import { + authjsHandler, + authjsSessionMiddleware, +} from "./server/authjs-handler"; import { vikeHandler } from "./server/vike-handler"; import { Hono } from "hono"; import { createHandler, createMiddleware } from "@universal-middleware/hono"; diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx index 6cf9415..b402756 100644 --- a/layouts/LayoutDefault.tsx +++ b/layouts/LayoutDefault.tsx @@ -6,18 +6,29 @@ import theme from "./theme.js"; import logoUrl from "../assets/logo.svg"; import { Link } from "../components/Link"; -export default function LayoutDefault({ children }: { children: React.ReactNode }) { +export default function LayoutDefault({ + children, +}: { children: React.ReactNode }) { const [opened, { toggle }] = useDisclosure(); return ( - + {" "} {" "} diff --git a/package.json b/package.json index fe39f74..6fe231e 100644 --- a/package.json +++ b/package.json @@ -44,4 +44,4 @@ "postcss-simple-vars": "^7.0.1" }, "type": "module" -} \ No newline at end of file +} diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx index 044f2f9..acc9b5b 100644 --- a/pages/index/+Page.tsx +++ b/pages/index/+Page.tsx @@ -3,7 +3,11 @@ import { Counter } from "./Counter.js"; export default function Page() { return ( <> -

My Vike app

+

+ My Vike app +

This page is:
  • Rendered to HTML.
    • diff --git a/pages/star-wars/@id/+data.ts b/pages/star-wars/@id/+data.ts index 3b5a342..bf226db 100644 --- a/pages/star-wars/@id/+data.ts +++ b/pages/star-wars/@id/+data.ts @@ -10,7 +10,9 @@ export const data = async (pageContext: PageContextServer) => { // https://vike.dev/useConfig const config = useConfig(); - const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`); + const response = await fetch( + `https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`, + ); let movie = (await response.json()) as MovieDetails; config({ diff --git a/pages/star-wars/index/+Page.tsx b/pages/star-wars/index/+Page.tsx index 5bd4bd4..118b178 100644 --- a/pages/star-wars/index/+Page.tsx +++ b/pages/star-wars/index/+Page.tsx @@ -14,7 +14,11 @@ export default function Page() { ))}

    - Source: brillout.github.io/star-wars. + Source:{" "} + + brillout.github.io/star-wars + + .

    ); diff --git a/pages/star-wars/index/+data.ts b/pages/star-wars/index/+data.ts index 73834ea..2366e2a 100644 --- a/pages/star-wars/index/+data.ts +++ b/pages/star-wars/index/+data.ts @@ -9,7 +9,9 @@ export const data = async () => { // https://vike.dev/useConfig const config = useConfig(); - const response = await fetch("https://brillout.github.io/star-wars/api/films.json"); + const response = await fetch( + "https://brillout.github.io/star-wars/api/films.json", + ); const moviesData = (await response.json()) as MovieDetails[]; config({ diff --git a/pages/todo/+data.ts b/pages/todo/+data.ts index 60954bf..00fb3ca 100644 --- a/pages/todo/+data.ts +++ b/pages/todo/+data.ts @@ -6,6 +6,8 @@ export type Data = { todo: { text: string }[]; }; -export default async function data(_pageContext: PageContextServer): Promise { +export default async function data( + _pageContext: PageContextServer, +): Promise { return { todo: todos }; } diff --git a/pages/todo/TodoList.tsx b/pages/todo/TodoList.tsx index e384e68..7440e73 100644 --- a/pages/todo/TodoList.tsx +++ b/pages/todo/TodoList.tsx @@ -1,7 +1,11 @@ import { trpc } from "../../trpc/client"; import { useState } from "react"; -export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) { +export function TodoList({ + initialTodoItems, +}: { + initialTodoItems: { text: string }[]; +}) { const [todoItems, setTodoItems] = useState(initialTodoItems); const [newTodo, setNewTodo] = useState(""); return ( @@ -16,6 +20,7 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
    { ev.preventDefault(); + if (newTodo.trim() === "") return; // Optimistic UI update setTodoItems((prev) => [...prev, { text: newTodo }]); @@ -29,7 +34,11 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin } }} > - setNewTodo(ev.target.value)} value={newTodo} /> + setNewTodo(ev.target.value)} + value={newTodo} + />
    diff --git a/server/authjs-handler.ts b/server/authjs-handler.ts index be8e45a..c6777fd 100644 --- a/server/authjs-handler.ts +++ b/server/authjs-handler.ts @@ -1,14 +1,27 @@ -import { Auth, type AuthConfig, createActionURL, setEnvDefaults } from "@auth/core"; +import { + Auth, + type AuthConfig, + createActionURL, + setEnvDefaults, +} from "@auth/core"; import CredentialsProvider from "@auth/core/providers/credentials"; import type { Session } from "@auth/core/types"; // TODO: stop using universal-middleware and directly integrate server middlewares instead and/or use vike-server https://vike.dev/server. (Bati generates boilerplates that use universal-middleware https://github.com/magne4000/universal-middleware to make Bati's internal logic easier. This is temporary and will be removed soon.) -import type { Get, UniversalHandler, UniversalMiddleware } from "@universal-middleware/core"; +import type { + Get, + UniversalHandler, + UniversalMiddleware, +} from "@universal-middleware/core"; const env: Record = typeof process?.env !== "undefined" ? process.env : import.meta && "env" in import.meta - ? (import.meta as ImportMeta & { env: Record }).env + ? ( + import.meta as ImportMeta & { + env: Record; + } + ).env : {}; if (!globalThis.crypto) { @@ -16,7 +29,9 @@ if (!globalThis.crypto) { * Polyfill needed if Auth.js code runs on node18 */ Object.defineProperty(globalThis, "crypto", { - value: await import("node:crypto").then((crypto) => crypto.webcrypto as Crypto), + value: await import("node:crypto").then( + (crypto) => crypto.webcrypto as Crypto, + ), writable: false, configurable: true, }); @@ -24,7 +39,9 @@ if (!globalThis.crypto) { const authjsConfig = { basePath: "/api/auth", - trustHost: Boolean(env.AUTH_TRUST_HOST ?? env.VERCEL ?? env.NODE_ENV !== "production"), + trustHost: Boolean( + env.AUTH_TRUST_HOST ?? env.VERCEL ?? env.NODE_ENV !== "production", + ), // TODO: Replace secret {@see https://authjs.dev/reference/core#secret} secret: "MY_SECRET", providers: [ @@ -51,12 +68,24 @@ const authjsConfig = { /** * Retrieve Auth.js session from Request */ -export async function getSession(req: Request, config: Omit): Promise { +export async function getSession( + req: Request, + config: Omit, +): Promise { setEnvDefaults(process.env, config); const requestURL = new URL(req.url); - const url = createActionURL("session", requestURL.protocol, req.headers, process.env, config); + const url = createActionURL( + "session", + requestURL.protocol, + req.headers, + process.env, + config, + ); - const response = await Auth(new Request(url, { headers: { cookie: req.headers.get("cookie") ?? "" } }), config); + const response = await Auth( + new Request(url, { headers: { cookie: req.headers.get("cookie") ?? "" } }), + config, + ); const { status = 200 } = response; @@ -71,20 +100,21 @@ export async function getSession(req: Request, config: Omit): * Add Auth.js session to context * @link {@see https://authjs.dev/getting-started/session-management/get-session} **/ -export const authjsSessionMiddleware: Get<[], UniversalMiddleware> = () => async (request, context) => { - try { - return { - ...context, - session: await getSession(request, authjsConfig), - }; - } catch (error) { - console.debug("authjsSessionMiddleware:", error); - return { - ...context, - session: null, - }; - } -}; +export const authjsSessionMiddleware: Get<[], UniversalMiddleware> = + () => async (request, context) => { + try { + return { + ...context, + session: await getSession(request, authjsConfig), + }; + } catch (error) { + console.debug("authjsSessionMiddleware:", error); + return { + ...context, + session: null, + }; + } + }; /** * Auth.js route diff --git a/server/vike-handler.ts b/server/vike-handler.ts index a0ff858..afbd04c 100644 --- a/server/vike-handler.ts +++ b/server/vike-handler.ts @@ -3,16 +3,22 @@ import { renderPage } from "vike/server"; // TODO: stop using universal-middleware and directly integrate server middlewares instead and/or use vike-server https://vike.dev/server. (Bati generates boilerplates that use universal-middleware https://github.com/magne4000/universal-middleware to make Bati's internal logic easier. This is temporary and will be removed soon.) import type { Get, UniversalHandler } from "@universal-middleware/core"; -export const vikeHandler: Get<[], UniversalHandler> = () => async (request, context, runtime) => { - const pageContextInit = { ...context, ...runtime, urlOriginal: request.url, headersOriginal: request.headers }; - const pageContext = await renderPage(pageContextInit); - const response = pageContext.httpResponse; +export const vikeHandler: Get<[], UniversalHandler> = + () => async (request, context, runtime) => { + const pageContextInit = { + ...context, + ...runtime, + urlOriginal: request.url, + headersOriginal: request.headers, + }; + const pageContext = await renderPage(pageContextInit); + const response = pageContext.httpResponse; - const { readable, writable } = new TransformStream(); - response.pipe(writable); + const { readable, writable } = new TransformStream(); + response.pipe(writable); - return new Response(readable, { - status: response.statusCode, - headers: response.headers, - }); -}; + return new Response(readable, { + status: response.statusCode, + headers: response.headers, + }); + }; diff --git a/trpc/server.ts b/trpc/server.ts index 68cef5d..c327a6b 100644 --- a/trpc/server.ts +++ b/trpc/server.ts @@ -1,4 +1,5 @@ import { initTRPC } from "@trpc/server"; +import { todos } from "../database/todoItems"; /** * Initialization of tRPC backend @@ -26,6 +27,7 @@ export const appRouter = router({ }) .mutation(async (opts) => { console.log("Received new todo", { text: opts.input }); + todos.push({ text: opts.input }); }), }); diff --git a/tsconfig.json b/tsconfig.json index fe7ca4a..52027ae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,20 +10,10 @@ "noEmit": true, "moduleResolution": "Bundler", "target": "ES2022", - "lib": [ - "DOM", - "DOM.Iterable", - "ESNext" - ], - "types": [ - "vite/client", - "vike-react", - "vike-cloudflare/types" - ], + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "types": ["vite/client", "vike-react", "vike-cloudflare/types"], "jsx": "react-jsx", "jsxImportSource": "react" }, - "exclude": [ - "dist" - ] -} \ No newline at end of file + "exclude": ["dist"] +}