refactor!: switch to fresh@2

README.md

@@ -32,7 +32,7 @@ TODO
 echo 'cohabit.localhost' >> /etc/hosts # In sudo, one time
 mkcert -install # If mkcert is not installed in your root ca
 mkcert -ecdsa localhost # Only once to issue localhost certificates
-deno task start
+deno task dev
 ```
 
 ### Production run

components/Header.tsx

@@ -1,4 +1,4 @@
-import { asset } from '$fresh/runtime.ts'
+import { asset } from 'fresh/runtime'
 import AiChatBox from ':islands/AiChatBox.tsx'
 import MoreBox from ':islands/MoreBox.tsx'
 import SearchBox from ':islands/SearchBox.tsx'

components/Markdown.tsx

@@ -1,11 +1,11 @@
-import { SignalLike } from '$fresh/src/types.ts'
+import type { Signal } from '@preact/signals'
 import { render, RenderOptions } from '@deno/gfm'
 
 export type MarkdownTheme = 'light' | 'dark' | 'auto'
 export function Markdown(
 	{ children, theme, options }: {
-		children?: SignalLike<string> | string
-		theme?: SignalLike<MarkdownTheme> | MarkdownTheme
+		children?: Signal<string> | string
+		theme?: Signal<MarkdownTheme> | MarkdownTheme
 		options?: RenderOptions
 	},
 ) {

components/SponsorCards.tsx

@@ -1,4 +1,4 @@
-import { asset } from '$fresh/runtime.ts'
+import { asset } from 'fresh/runtime'
 import { Picture } from ':components/Picture.tsx'
 
 export function SponsorCards() {

deno.json

@@ -2,13 +2,10 @@
 	"lock": false,
 	"tasks": {
 		"check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
-		"cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
-		"manifest": "deno task cli manifest $(pwd)",
-		"start": "deno run -A --watch=static/,routes/ dev.ts",
+		"dev": "deno run -A --watch=static/,routes/ dev.ts",
 		"build": "deno run -A dev.ts build",
-		"preview": "deno run -A main.ts",
-		"update": "deno run -A -r https://fresh.deno.dev/update .",
-		"serve": "deno task preview",
+		"start": "deno run -A main.ts",
+		"update": "deno run -A -r jsr:@fresh/update .",
 		"dev:add_package": "deno run --allow-net=git.cohabit.fr --allow-read=. --allow-write=./deno.json,./packages --allow-run=git,deno ./scripts/add_package.ts"
 	},
 	"fmt": {
@@ -29,7 +26,7 @@
 		"packages/"
 	],
 	"imports": {
-		"$fresh/": "https://deno.land/x/fresh@1.6.8/",
+		"fresh": "jsr:@fresh/core@^2.0.0-alpha.25",
 		"$std/": "https://deno.land/std@0.208.0/",
 		":components/": "./components/",
 		":islands/": "./islands/",
@@ -40,8 +37,7 @@
 		"@deno/gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
 		"@jotsr/delayed": "jsr:@jotsr/delayed@^2.1.1",
 		"@jotsr/smart-css-bundler": "jsr:@jotsr/smart-css-bundler@^0.3.0",
-		"@preact/signals": "https://esm.sh/*@preact/signals@^1.2.3",
-		"@preact/signals-core": "npm:@preact/signals-core@^1.6.1",
+		"@preact/signals": "npm:@preact/signals@^1.3.0",
 		"@simplewebauthn/browser": "npm:@simplewebauthn/browser@^10.0.0",
 		"@simplewebauthn/server": "npm:@simplewebauthn/server@^10.0.0",
 		"@simplewebauthn/types": "npm:@simplewebauthn/types@^10.0.0",
@@ -51,13 +47,27 @@
 		"@std/json": "jsr:@std/json@^0.224.1",
 		"@std/streams": "jsr:@std/streams@^0.224.5",
 		"@univoq/": "https://deno.land/x/univoq@0.2.0/",
-		"preact": "npm:preact@10.22.0",
+		"preact": "npm:preact@^10.24.2",
 		"univoq": "https://deno.land/x/univoq@0.2.0/mod.ts",
 		"web-push": "npm:web-push@^3.6.7"
 	},
 	"compilerOptions": {
-		"jsx": "react-jsx",
-		"jsxImportSource": "preact"
+		"lib": [
+			"dom",
+			"dom.asynciterable",
+			"dom.iterable",
+			"deno.ns"
+		],
+		"jsx": "precompile",
+		"jsxImportSource": "preact",
+		"jsxPrecompileSkipElements": [
+			"a",
+			"img",
+			"source",
+			"body",
+			"html",
+			"head"
+		]
 	},
 	"unstable": [
 		"kv"

dev.ts

@@ -1,14 +1,15 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
-import dev from '$fresh/dev.ts'
-import config from './fresh.config.ts'
-
-import '$std/dotenv/load.ts'
+import { Builder } from 'fresh/dev'
+import { app } from './main.ts'
 
+const builder = new Builder()
 const hostname = 'cohabit.localhost'
-await dev(import.meta.url, './main.ts', {
-	...config,
-	server: {
+
+if (Deno.args.includes('build')) {
+	await builder.build(app)
+} else {
+	await builder.listen(app, {
 		cert: await Deno.readTextFile('./cert/cohabit.localhost.pem'),
 		key: await Deno.readTextFile('./cert/cohabit.localhost-key.pem'),
 		hostname,
@@ -20,5 +21,5 @@ await dev(import.meta.url, './main.ts', {
 				'color: blue; text-decoration: underline',
 			)
 		}),
-	},
-})
+	})
+}

islands/IsOnline.tsx

@@ -1,6 +1,6 @@
 import { type Signal, useComputed, useSignal } from '@preact/signals'
 import { useEffect } from 'preact/hooks'
-import { IS_BROWSER } from '$fresh/runtime.ts'
+import { IS_BROWSER } from 'fresh/runtime'
 
 type NetworkConnection = {
 	addEventListener: (

islands/ThemePicker.tsx

@@ -1,5 +1,5 @@
 import { useComputed, useSignal, useSignalEffect } from '@preact/signals'
-import { IS_BROWSER } from '$fresh/runtime.ts'
+import { IS_BROWSER } from 'fresh/runtime'
 
 export default function ThemePicker() {
 	const colorSchemeQuery = '(prefers-color-scheme: dark)'

main.ts

@@ -1,13 +1,32 @@
-/// <reference no-default-lib="true" />
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/// <reference lib="dom.asynciterable" />
-/// <reference lib="deno.ns" />
+import { App, fsRoutes, staticFiles } from 'fresh'
+import { type State } from './utils.ts'
+import { contentType } from 'jsr:@std/media-types@1/content-type'
 
-import '$std/dotenv/load.ts'
+export const app = new App<State>()
+app.use(staticFiles())
 
-import { start } from '$fresh/server.ts'
-import manifest from './fresh.gen.ts'
-import config from './fresh.config.ts'
+// temp fix before updating cssBundler middleware
+app.use(async (ctx) => {
+	const response = await ctx.next()
+	if (response.status === 404) {
+		const ext = ctx.url.pathname.split('.').at(-1) ?? '.bin'
+		const mime = contentType(ext) ?? 'application/octet-stream'
+		const file = await Deno.readFile(`./_fresh/static/${ctx.url.pathname}`)
+		return new Response(file, {
+			headers: {
+				'Content-Type': mime,
+			},
+		})
+	}
+	return response
+})
 
-await start(manifest, config)
+await fsRoutes(app, {
+	dir: './',
+	loadIsland: (path) => import(`./islands/${path}`),
+	loadRoute: (path) => import(`./routes/${path}`),
+})
+
+if (import.meta.main) {
+	await app.listen()
+}

routes/_404.tsx

@@ -1,18 +0,0 @@
-import { Head } from '$fresh/runtime.ts'
-
-export default function Error404() {
-	return (
-		<>
-			<Head>
-				<title>Page non trouvée</title>
-			</Head>
-			<div>
-				<h1>Erreur 404 - Page non trouvé</h1>
-				<p>
-					La page que vous recherché n'existe pas ou a été supprimée.
-				</p>
-				<a href='/'>Retourner à l'accueil</a>
-			</div>
-		</>
-	)
-}

routes/_app.tsx

@@ -1,14 +1,16 @@
-import { asset, Head, Partial } from '$fresh/runtime.ts'
-import { type PageProps } from '$fresh/server.ts'
+import { asset, Partial } from 'fresh/runtime'
+import { type PageProps } from 'fresh'
 import { Footer } from ':components/Footer.tsx'
 import { Header } from ':components/Header.tsx'
 import { ProgressiveWebApp } from ':components/ProgressiveWebApp.tsx'
 import IsOnline from ':islands/IsOnline.tsx'
 
-export default function App({ Component }: PageProps) {
+export default function App(
+	{ Component, data }: PageProps<{ title?: string } | undefined>,
+) {
 	return (
 		<html lang='fr'>
-			<Head>
+			<head>
 				<meta charset='utf-8' />
 				<meta
 					name='viewport'
@@ -40,7 +42,8 @@ export default function App({ Component }: PageProps) {
 				/>
 				<link rel='stylesheet' href={asset('/main.css')} />
 				<link rel='stylesheet' href={asset('/imports/markdown_css')} />
-			</Head>
+				<title>{data?.title ?? 'Fablab Coh@bit'}</title>
+			</head>
 			<body>
 				<Header />
 				<IsOnline

routes/_error.tsx

@@ -0,0 +1,40 @@
+import { HttpError } from 'fresh'
+import { define } from '../utils.ts'
+
+export const handler = define.handlers({
+	GET() {
+		return { data: { title: 'Page non trouvée' } }
+	},
+})
+
+export default define.page(function ErrorPage(ctx) {
+	if (!(ctx.error instanceof HttpError)) {
+		return (
+			<div>
+				<h1>Uknown server error</h1>
+			</div>
+		)
+	}
+
+	const status = ctx.error.status
+
+	if (status === 404) {
+		return (
+			<>
+				<div>
+					<h1>Erreur 404 - Page non trouvé</h1>
+					<p>
+						La page que vous recherché n'existe pas ou a été supprimée.
+					</p>
+					<a href='/'>Retourner à l'accueil</a>
+				</div>
+			</>
+		)
+	}
+
+	return (
+		<div>
+			<h1>Uknown http error</h1>
+		</div>
+	)
+})

routes/_middleware.ts

@@ -1,12 +1,14 @@
-import { FreshContext } from '$fresh/server.ts'
 import { useCache } from ':src/cache/middleware.ts'
 import { useCsp } from ':src/csp/middleware.ts'
 import { useSecurityHeaders } from ':src/security_headers/middleware.ts'
 import { useServiceworker } from ':src/serviceworker/middleware.ts'
 import { useSession } from ':src/session/middleware.ts'
 import { SessionStore } from ':src/session/mod.ts'
+import { define } from '../utils.ts'
+
+export default define.middleware(async (ctx) => {
+	const request = ctx.req
 
-export async function handler(request: Request, ctx: FreshContext) {
 	// Update fresh context state with session
 	ctx.state = { ...ctx.state, session: SessionStore.getFromRequest(request) }
 
@@ -25,4 +27,4 @@ export async function handler(request: Request, ctx: FreshContext) {
 	useCache(request, response, ctx)
 
 	return response
-}
+})

routes/api/_middleware.ts

@@ -1,9 +1,11 @@
-import { FreshContext } from '$fresh/server.ts'
 import { SessionStore } from ':src/session/mod.ts'
 import { respondApi } from ':src/utils.ts'
+import { define } from '../../utils.ts'
 
-export function handler(request: Request, ctx: FreshContext) {
+export const handler = define.handlers((ctx) => {
 	// Check CSRF token
+	const request = ctx.req
+
 	if (['POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'].includes(request.method)) {
 		const session = SessionStore.getFromRequest(request)
 		const csrf = session?.get('_csrf')
@@ -14,4 +16,4 @@ export function handler(request: Request, ctx: FreshContext) {
 	}
 
 	return ctx.next()
-}
+})

routes/api/magiclink/index.ts

@@ -1,7 +1,8 @@
 import 'npm:iterator-polyfill'
+import { define } from '../../../utils.ts'
 // Polyfill AsyncIterator
 
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 import { db } from ':src/db/mod.ts'
 import { SessionHandlers, SessionStore } from ':src/session/mod.ts'
 import { respondApi } from ':src/utils.ts'
@@ -24,9 +25,11 @@ export async function getUserByMail(email: string): Promise<User | undefined> {
 
 	return user
 }
-
-export const handler: SessionHandlers = {
-	async POST(request, ctx) {
+*/
+export const handler = define.handlers({})
+/*
+	async POST(ctx) {
+		const request = ctx.req
 		const { email } = await request.json() as { email: string }
 
 		// check email before continue
@@ -118,8 +121,8 @@ export const handler: SessionHandlers = {
 			401,
 		)
 	},
-}
-
+})
+/*
 function remoteId(
 	{ headers }: { headers: Headers },
 	{ remoteAddr }: { remoteAddr: FreshContext['remoteAddr'] },

routes/api/serviceworker/is-online.tsx

@@ -1,9 +1,9 @@
-import { SessionHandlers } from ':src/session/mod.ts'
+import { define } from '../../../utils.ts'
 
-export const handler: SessionHandlers = {
-	GET(req: Request, ctx) {
-		const { response } = Deno.upgradeWebSocket(req)
+export const handler = define.handlers({
+	GET(ctx) {
+		const { response } = Deno.upgradeWebSocket(ctx.req)
 		ctx.state.skipMiddlewares = true
 		return response
 	},
-}
+})

routes/api/webpush/vapid.ts

@@ -1,9 +1,10 @@
-import { Handlers } from '$fresh/server.ts'
 import { respondApi } from ':src/utils.ts'
 import { publicKey } from ':src/webpush/mod.ts'
+import { define } from '../../../utils.ts'
 
-export const handler: Handlers = {
+export const handler = define.handlers({
 	GET() {
+		console.log('VAPID', publicKey)
 		return respondApi('success', publicKey)
 	},
-}
+})

routes/blog/[name].tsx

@@ -1,8 +1,8 @@
-import { RouteContext } from '$fresh/server.ts'
+import { define } from '../../utils.ts'
 import { BlogPost } from ':components/BlogBlocks.tsx'
 import { fetchNews } from ':src/blog/mod.ts'
 
-export default async function Blog(_req: Request, { params }: RouteContext) {
+export default define.page(async ({ params }) => {
 	try {
 		const article = await fetchNews('cohabit', params.name)
 		return BlogPost(article)
@@ -14,4 +14,4 @@ export default async function Blog(_req: Request, { params }: RouteContext) {
 			</>
 		)
 	}
-}
+})

routes/carnet/[id].tsx

@@ -1,9 +1,9 @@
-import { PageProps } from '$fresh/server.ts'
 import { Markdown } from ':components/Markdown.tsx'
 import { db } from ':src/db/mod.ts'
 import { fetchCarnet } from ':src/members/mod.ts'
+import { define } from '../../utils.ts'
 
-export default async function Member(_: Request, { params }: PageProps) {
+export default define.page(async ({ params }) => {
 	const uuid = params.id as ReturnType<Crypto['randomUUID']>
 	const user = await db.resource.user.get({ uuid }).catch(() => undefined)
 
@@ -24,4 +24,4 @@ export default async function Member(_: Request, { params }: PageProps) {
 			{carnet}
 		</Markdown>
 	)
-}
+})

routes/imports/markdown_css.ts

@@ -1,7 +1,7 @@
-import { Handlers } from '$fresh/server.ts'
 import { CSS, KATEX_CSS } from '@deno/gfm'
+import { define } from '../../utils.ts'
 
-export const handler: Handlers = {
+export const handler = define.handlers({
 	GET() {
 		const styles = CSS + KATEX_CSS
 		return new Response(styles, {
@@ -11,4 +11,4 @@ export const handler: Handlers = {
 			},
 		})
 	},
-}
+})

routes/index.tsx

@@ -1,4 +1,3 @@
-import { Head } from '$fresh/runtime.ts'
 import { AutoGrid } from ':components/AutoGrid.tsx'
 import { CohabitInfoTable } from ':components/CohabitInfoTable.tsx'
 import { Heros } from ':components/Heros.tsx'
@@ -7,13 +6,17 @@ import { ProjectCard, projectMock } from ':components/ProjectCard.tsx'
 import { SponsorCards } from ':components/SponsorCards.tsx'
 import BlogCardList from ':islands/BlogCardList.tsx'
 import MemberCardList from ':islands/MemberCardList.tsx'
+import { define } from '../utils.ts'
+
+export const handler = define.handlers({
+	GET() {
+		return { data: { title: 'Fablab Coh@bit' } }
+	},
+})
 
 export default function Home() {
 	return (
 		<>
-			<Head>
-				<title>Fablab Coh@bit</title>
-			</Head>
 			<Heros />
 			<section id='first-section'>
 				<h2>Nos actus</h2>

routes/machines/[id].tsx

@@ -1,10 +1,10 @@
-import { PageProps } from '$fresh/server.ts'
+import { define } from '../../utils.ts'
 import { MachineCard, machineMock } from ':components/MachineCard.tsx'
 
-export default function Machine({ params }: PageProps) {
+export default define.page(({ params }) => {
 	const machine = machineMock.at(Number(params.id))
 
 	return (
 		machine ? MachineCard(machine) : <h3>Machine pas encore disponible</h3>
 	)
-}
+})

routes/membres/[id]/index.tsx

@@ -1,10 +1,10 @@
-import { PageProps } from '$fresh/server.ts'
 import { Markdown } from ':components/Markdown.tsx'
 import { MemberCard } from ':components/MemberCard.tsx'
 import { db } from ':src/db/mod.ts'
 import { fetchProfile, userToMemberCardProps } from ':src/members/mod.ts'
+import { define } from '../../../utils.ts'
 
-export default async function Member(_: Request, { params, url }: PageProps) {
+export default define.page(async ({ params, url }) => {
 	const uuid = params.id as ReturnType<Crypto['randomUUID']>
 	const user = await db.resource.user.get({ uuid }).catch(() => undefined)
 
@@ -56,4 +56,4 @@ export default async function Member(_: Request, { params, url }: PageProps) {
 			</Markdown>
 		</div>
 	)
-}
+})

routes/projets/[id].tsx

@@ -1,7 +1,7 @@
-import { PageProps } from '$fresh/server.ts'
 import { ProjectCard, projectMock } from ':components/ProjectCard.tsx'
+import { define } from '../../utils.ts'
 
-export default function Projets({ params }: PageProps) {
+export default define.page(({ params }) => {
 	const Projets = projectMock.at(Number(params.id))
 
 	return (
@@ -9,4 +9,4 @@ export default function Projets({ params }: PageProps) {
 			? ProjectCard(Projets)
 			: <h3>Projets inconnu, peut être un futur</h3>
 	)
-}
+})

src/cache/middleware.ts

@@ -1,11 +1,11 @@
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 
 export function useCache(
 	_request: Request,
 	response: Response,
 	ctx: FreshContext,
 ) {
-	if (ctx.config.dev) return
+	if (ctx.config.mode === 'development') return
 	if (
 		ctx.url.pathname.match(
 			/(.+\.|_)((css)|(ttf)|(woff2)|(png)|(svg)|(jpe?g)|(avif))/,

src/csp/middleware.ts

@@ -1,4 +1,4 @@
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 import { applyCspRulesWithNonce, CspRules } from ':src/csp/mod.ts'
 
 export function useCsp(

src/security_headers/middleware.ts

@@ -1,4 +1,4 @@
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 
 export function useSecurityHeaders(
 	_request: Request,

src/serviceworker/middleware.ts

@@ -1,4 +1,4 @@
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 
 export function useServiceworker(
 	_request: Request,

src/session/middleware.ts

@@ -1,4 +1,4 @@
-import { FreshContext } from '$fresh/server.ts'
+import { FreshContext } from 'fresh'
 import { SessionStore } from ':src/session/mod.ts'
 import { getCookies, setCookie } from 'jsr:@std/http@^0.224.4/cookie'
 

src/session/mod.ts

@@ -1,4 +1,4 @@
-import type { Handlers, PageProps } from '$fresh/server.ts'
+import type { PageProps, RouteHandler } from 'fresh'
 import { getCookies } from '@std/http/cookie'
 
 type SessionEntry<T = unknown> = {
@@ -15,7 +15,7 @@ export type SessionPageProps<T = unknown, S = Record<string, unknown>> =
 	PageProps<T, S & SessionState>
 
 export type SessionHandlers<T = unknown, S = Record<string, unknown>> =
-	Handlers<T, S & SessionState>
+	RouteHandler<T, S & SessionState>
 
 export class SessionStore {
 	static #store = new Map<string, Session>()

src/utils.ts

@@ -1,4 +1,4 @@
-import { SignalLike } from '$fresh/src/types.ts'
+import type { Signal } from '@preact/signals'
 import { JsonValue } from '$std/json/common.ts'
 import { decodeBase64 } from '@std/encoding/base64'
 import { JsonStringifyStream } from '@std/json'
@@ -173,7 +173,7 @@ export function base64ToString(base64: string): string {
 	return new TextDecoder().decode(bytes)
 }
 
-export function unwrapSignalOrValue<T>(valueOrSignal: T | SignalLike<T>): T {
+export function unwrapSignalOrValue<T>(valueOrSignal: T | Signal<T>): T {
 	if (typeof valueOrSignal !== 'object') {
 		return valueOrSignal
 	}

utils.ts

@@ -0,0 +1,8 @@
+import { createDefine } from 'fresh'
+
+// deno-lint-ignore no-empty-interface
+export interface State {
+	skipMiddlewares?: true
+}
+
+export const define = createDefine<State>()