deps: migrate to fresh v2

.deno-version

@@ -1 +1 @@
-v1.37.2
+2.1.4

.github/workflows/ci.yml

@@ -32,11 +32,11 @@ jobs:
           deno task check
       - name: Build
         run: |
-          deno cache fresh.gen.ts main.ts
+          deno cache main.ts dev.ts
           deno task build
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         if: ${{ github.event_name == 'push' }}
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
+          publish_dir: ./build/static

app.ts

@@ -0,0 +1,19 @@
+import { App, fsRoutes, staticFiles } from "fresh";
+import type { State } from "$/server.ts";
+
+export async function createApp() {
+  const app = new App<State>({
+    build: {
+      outDir: "./build",
+    },
+  });
+  app.use(staticFiles());
+
+  await fsRoutes(app, {
+    dir: "./",
+    loadIsland: (path) => import(`./islands/${path}`),
+    loadRoute: (path) => import(`./routes/${path}`),
+  });
+
+  return app;
+}

deno.json

@@ -1,27 +1,47 @@
 {
   "tasks": {
-    "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update .",
-    "build": "deno run --allow-run --allow-env --allow-read --allow-net --allow-write=build tools/build.ts",
-    "awesome-lint": "deno run --allow-read --allow-env tools/awesome-lint.js",
+    "dev": "deno run -A --watch=static/,routes/ dev.ts",
+    "start": "deno run -A main.ts",
+    "update": "deno run -A -r jsr:@fresh/update .",
+    "build": "deno run -A dev.ts build",
+    "awesome-lint": "deno run --allow-read --allow-env --allow-sys=cpus tools/awesome-lint.js",
     "lint": "deno fmt --check && deno lint",
     "check": "deno task lint && deno task awesome-lint",
-    "preview": "deno run -A main.ts"
+    "clean": "rm -rf ./build",
+    "preview": {
+      "command": "deno run -A jsr:@std/http@1.0.12/file-server ./build/static",
+      "dependencies": ["build"]
+    }
   },
   "lock": false,
-  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.asynciterable",
+      "dom.iterable",
+      "deno.ns"
+    ],
+    "jsx": "precompile",
+    "jsxImportSource": "preact",
+    "jsxPrecompileSkipElements": [
+      "a",
+      "img",
+      "source",
+      "body",
+      "html",
+      "head"
+    ]
+  },
   "fmt": { "exclude": ["fresh.gen.ts", "README.md"] },
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.6.0/",
-    "preact": "https://esm.sh/preact@10.19.2",
-    "preact/": "https://esm.sh/preact@10.19.2/",
-    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
-    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
-    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
-    "@twind/core": "https://esm.sh/@twind/core@1.1.3",
-    "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.3",
-    "$gfm": "https://deno.land/x/gfm@0.2.3/mod.ts",
-    "awesome-lint": "npm:awesome-lint@1.0.0"
+    "fresh": "jsr:@fresh/core@^2.0.0-alpha.27",
+    "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7",
+    "preact": "npm:preact@^10.25.2",
+    "@preact/signals": "npm:@preact/signals@^1.3.1",
+    "tailwindcss": "npm:tailwindcss@^3.4.3",
+    "@deno/gfm": "jsr:@deno/gfm@0.10.0",
+    "awesome-lint": "npm:awesome-lint@1.0.0",
+    "$/": "./"
   },
   "lint": { "rules": { "tags": ["fresh", "recommended"] } },
   "exclude": ["**/_fresh/*"]

dev.ts

@@ -1,6 +1,21 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
+import { tailwind } from "@fresh/plugin-tailwind";
 
-import dev from "$fresh/dev.ts";
-import config from "./fresh.config.ts";
+import { Builder } from "fresh/dev";
+import { createApp } from "$/app.ts";
 
-await dev(import.meta.url, "./main.ts", config);
+const app = await createApp();
+const builder = new Builder();
+tailwind(builder, app, {});
+if (Deno.args.includes("build")) {
+  await builder.build(app);
+
+  {
+    // Additional custom build logic here.
+    // TODO: Extract this process as a plugin.
+    const { buildHTML } = await import("./tools/build.ts");
+    await buildHTML(app, builder);
+  }
+} else {
+  await builder.listen(app);
+}

main.ts

@@ -1,11 +1,6 @@
-/// <reference no-default-lib="true" />
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/// <reference lib="dom.asynciterable" />
-/// <reference lib="deno.ns" />
+import { createApp } from "$/app.ts";
 
-import { start } from "$fresh/server.ts";
-import manifest from "./fresh.gen.ts";
-import config from "./fresh.config.ts";
-
-await start(manifest, config);
+const app = await createApp();
+if (import.meta.main) {
+  await app.listen();
+}

routes/_app.tsx

@@ -1,12 +1,14 @@
-import { AppProps } from "$fresh/server.ts";
+import { asset } from "fresh/runtime";
+import type { PageProps } from "fresh";
 
-export default function App({ Component }: AppProps) {
+export default function App({ Component }: PageProps) {
   return (
     <html>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Awesome Fresh</title>
+        <link rel="stylesheet" href={asset("/styles.css")} />
       </head>
       <body>
         <Component />

routes/index.tsx

@@ -1,22 +1,21 @@
-import { Head } from "$fresh/runtime.ts";
-import { defineRoute } from "$fresh/server.ts";
-import { CSS, render as renderGFM } from "$gfm";
+import { define } from "$/server.ts";
+import { CSS, render as renderGFM } from "@deno/gfm";
 
 const gfmStyle = `
 .markdown-body ul { list-style: disc }
 .markdown-body a { color: teal }
 ${CSS}`;
 
-export default defineRoute(async (req, ctx) => {
+export default define.page(async () => {
   const url = new URL("../README.md", import.meta.url);
   const markdown = await Deno.readTextFile(url);
   const content = renderGFM(markdown, {});
 
   return (
     <>
-      <Head>
+      <head>
         <style id="gfm">{gfmStyle}</style>
-      </Head>
+      </head>
       <main
         data-color-mode="auto"
         data-dark-theme="dark"

server.ts

@@ -0,0 +1,6 @@
+import { createDefine } from "fresh";
+
+// deno-lint-ignore no-empty-interface
+export interface State {}
+
+export const define = createDefine<State>();

static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+} satisfies Config;

tools/build.ts

@@ -1,25 +1,35 @@
-const { stdout: gitOutput } = await new Deno.Command("git", {
-  args: ["rev-parse", "HEAD"],
-}).output();
-const revision = new TextDecoder().decode(gitOutput).trim();
-Deno.env.set("DENO_DEPLOYMENT_ID", revision);
-Deno.env.set("PORT", "8000");
+import type { App } from "fresh";
+import type { FreshBuilder } from "fresh/core";
+import type { State } from "$/server.ts";
 
-import(import.meta.resolve("../main.ts"));
+export async function buildHTML(
+  app: App<State>,
+  builder: FreshBuilder,
+): Promise<void> {
+  const { stdout: gitOutput } = await new Deno.Command("git", {
+    args: ["rev-parse", "HEAD"],
+  }).output();
+  const revision = new TextDecoder().decode(gitOutput).trim();
+  Deno.env.set("DENO_DEPLOYMENT_ID", revision);
 
-await new Promise((ok) => {
-  setTimeout(ok, 10000);
-});
+  const abortController = new AbortController();
+  const listenPromise = builder.listen(app, {
+    port: 8000,
+    signal: abortController.signal,
+  });
 
-const res = await fetch("http://localhost:8000");
-if (!res.ok) {
-  console.error("Failed to fetch `/`");
-  Deno.exit(1);
-}
-
-const html = await res.text();
-const buildDir = new URL("../build", import.meta.url).pathname;
-await Deno.mkdir(buildDir, { recursive: true });
-await Deno.writeTextFile(`${buildDir}/index.html`, html);
+  try {
+    await listenPromise;
+    const res = await fetch("http://localhost:8000");
+    if (!res.ok) {
+      throw new Error("Failed to fetch `/`");
+    }
 
-Deno.exit(0);
+    const html = await res.text();
+    const buildDir = new URL("../build", import.meta.url).pathname;
+    await Deno.mkdir(buildDir, { recursive: true });
+    await Deno.writeTextFile(`${buildDir}/static/index.html`, html);
+  } finally {
+    abortController.abort();
+  }
+}