init 3

deno.lock

@@ -295,6 +295,7 @@
     "https://deno.land/x/importmap@0.2.1/mod.ts": "ae3d1cd7eabd18c01a4960d57db471126b020f23b37ef14e1359bbb949227ade",
     "https://deno.land/x/marked@1.0.1/mod.ts": "25a04e7c3512622293d84b7287711b990562ce41e44f7fb55af9ca1586e57b15",
     "https://deno.land/x/rutt@0.0.13/mod.ts": "af981cfb95131152bf50fc9140fc00cb3efb6563df2eded1d408361d8577df20",
+    "https://deno.land/x/rutt@0.0.14/mod.ts": "5027b8e8b12acca48b396a25aee74ad7ee94a25c24cda75571d7839cbd41113c",
     "https://deno.land/x/sqlite@v3.7.0/build/sqlite.d.ts": "12908ced1670f96d5dc39aebb0d659630136fa6523881e4712cfb20b122dd324",
     "https://deno.land/x/sqlite@v3.7.0/build/sqlite.js": "cc55fef9cd124b2acb624899a5fad413834f4701bcfc21ac275844b822466292",
     "https://deno.land/x/sqlite@v3.7.0/build/vfs.js": "08533cc78fb29b9d9bd62f6bb93e5ef333407013fed185776808f11223ba0e70",

dev.ts

@@ -1,5 +1,18 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
-import dev from "$fresh/dev.ts";
+import { connectDB } from "./src/user/db.ts";
+import * as users from "./src/user/user.ts";
 
+import dev from "$fresh/dev.ts";
+await devUserAdd();
 await dev(import.meta.url, "./main.ts");
+
+async function devUserAdd() {
+    if(Deno.env.get("DB_PATH") === ":memory:") {
+        const db = await connectDB();
+        const username = "admin";
+        const password = "admin";
+        const new_user = await users.createUser(username, password);
+        await users.addUser(db, new_user);
+    }
+}

fresh-main/.gitignore

@@ -0,0 +1 @@
+deno.lock

fresh-main/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "sastan.twind-intellisense"
+  ]
+}

fresh-main/.vscode/import_map.json

@@ -0,0 +1,19 @@
+{
+  "scopes": {
+    "THIS FILE EXISTS ONLY FOR VSCODE! IT IS NOT USED AT RUNTIME": {}
+  },
+  "imports": {
+    "$fresh/": "../",
+
+    "twind": "https://esm.sh/twind@0.16.17",
+    "twind/": "https://esm.sh/twind@0.16.17/",
+
+    "preact": "https://esm.sh/preact@10.11.0",
+    "preact/": "https://esm.sh/preact@10.11.0/",
+    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
+    "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.0.1",
+
+    "$std/": "https://deno.land/std@0.150.0/"
+  }
+}

fresh-main/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "deno.enable": true,
+  "deno.lint": true,
+  "deno.importMap": "./.vscode/import_map.json",
+  "deno.codeLens.test": true,
+  "editor.defaultFormatter": "denoland.vscode-deno"
+}

fresh-main/CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at hello@lcas.dev.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

fresh-main/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Luca Casonato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

fresh-main/README.md

@@ -0,0 +1,106 @@
+[Documentation](#-documentation) | [Getting started](#-getting-started)
+
+# fresh
+
+<img align="right" src="https://fresh.deno.dev/logo.svg" height="150px" alt="the fresh logo: a sliced lemon dripping with juice">
+
+**Fresh** is a next generation web framework, built for speed, reliability, and
+simplicity.
+
+Some stand-out features:
+
+- Just-in-time rendering on the edge.
+- Island based client hydration for maximum interactivity.
+- Zero runtime overhead: no JS is shipped to the client by default.
+- No build step.
+- No configuration necessary.
+- TypeScript support out of the box.
+- File-system routing à la Next.js.
+
+## 📖 Documentation
+
+The [documentation](https://fresh.deno.dev/docs/) is available on
+[fresh.deno.dev](https://fresh.deno.dev/).
+
+## 🚀 Getting started
+
+Install [Deno CLI](https://deno.land/) version 1.25.0 or higher.
+
+You can scaffold a new project by running the Fresh init script. To scaffold a
+project in the `deno-fresh-demo` folder, run the following:
+
+```sh
+deno run -A -r https://fresh.deno.dev deno-fresh-demo
+```
+
+Then navigate to the newly created project folder:
+
+```
+cd deno-fresh-demo
+```
+
+From within your project folder, start the development server using the
+`deno task` command:
+
+```
+deno task start
+```
+
+Now open http://localhost:8000 in your browser to view the page. You make
+changes to the project source code and see them reflected in your browser.
+
+To deploy the project to the live internet, you can use
+[Deno Deploy](https://deno.com/deploy):
+
+1. Push your project to GitHub.
+2. [Create a Deno Deploy project](https://dash.deno.com/new).
+3. [Link](https://deno.com/deploy/docs/projects#enabling) the Deno Deploy
+   project to the **`main.ts`** file in the root of the created repository.
+4. The project will be deployed to a public $project.deno.dev subdomain.
+
+For a more in-depth getting started guide, visit the
+[Getting Started](https://fresh.deno.dev/docs/getting-started) page in the Fresh
+docs.
+
+## Adding your project to the showcase
+
+If you feel that your project would be helpful to other fresh users, please
+consider putting your project on the
+[showcase](https://fresh.deno.dev/showcase). However, websites that are just for
+promotional purposes may not be listed.
+
+To take a screenshot, run the following command.
+
+```sh
+deno task screenshot [url] [your-app-name]
+```
+
+Then add your site to
+[showcase.json](https://github.com/denoland/fresh/blob/main/www/data/showcase.json),
+preferably with source code on GitHub, but not required.
+
+## Badges
+
+![Made with Fresh](./www/static/fresh-badge.svg)
+
+```md
+[![Made with Fresh](https://fresh.deno.dev/fresh-badge.svg)](https://fresh.deno.dev)
+```
+
+```html
+<a href="https://fresh.deno.dev">
+   <img width="197" height="37" src="https://fresh.deno.dev/fresh-badge.svg" alt="Made with Fresh" />
+</a>
+```
+
+![Made with Fresh(dark)](./www/static/fresh-badge-dark.svg)
+
+```md
+[![Made with Fresh](https://fresh.deno.dev/fresh-badge-dark.svg)](https://fresh.deno.dev)
+```
+
+```html
+<a href="https://fresh.deno.dev">
+   <img width="197" height="37" src="https://fresh.deno.dev/fresh-badge-dark.svg" alt="Made with Fresh" />
+</a>
+```

fresh-main/deno.json

@@ -0,0 +1,18 @@
+{
+  "tasks": {
+    "test": "deno test -A && deno check --config=www/deno.json www/main.ts www/dev.ts && deno check init.ts",
+    "fixture": "deno run -A --watch=static/,routes/ tests/fixture/dev.ts",
+    "www": "deno run -A --watch=www/static/,www/routes/,docs/ www/dev.ts",
+    "screenshot": "deno run -A www/utils/screenshot.ts"
+  },
+  "importMap": "./.vscode/import_map.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "test": {
+    "files": {
+      "exclude": ["www/"]
+    }
+  }
+}

fresh-main/dev.ts

@@ -0,0 +1,2 @@
+import { dev } from "./src/dev/mod.ts";
+export default dev;

fresh-main/init.ts

@@ -0,0 +1,377 @@
+import { join, parse, resolve } from "./src/dev/deps.ts";
+import { error } from "./src/dev/error.ts";
+import { collect, ensureMinDenoVersion, generate } from "./src/dev/mod.ts";
+import { freshImports, twindImports } from "./src/dev/imports.ts";
+
+ensureMinDenoVersion();
+
+const help = `fresh-init
+
+Initialize a new Fresh project. This will create all the necessary files for a
+new project.
+
+To generate a project in the './foobar' subdirectory:
+  fresh-init ./foobar
+
+To generate a project in the current directory:
+  fresh-init .
+
+USAGE:
+    fresh-init <DIRECTORY>
+
+OPTIONS:
+    --force   Overwrite existing files
+    --twind   Setup project to use 'twind' for styling
+    --vscode  Setup project for VSCode
+`;
+
+const CONFIRM_EMPTY_MESSAGE =
+  "The target directory is not empty (files could get overwritten). Do you want to continue anyway?";
+
+const USE_TWIND_MESSAGE =
+  "Fresh has built in support for styling using Tailwind CSS. Do you want to use this?";
+
+const USE_VSCODE_MESSAGE = "Do you use VS Code?";
+
+const flags = parse(Deno.args, {
+  boolean: ["force", "twind", "vscode"],
+  default: { "force": null, "twind": null, "vscode": null },
+});
+
+if (flags._.length !== 1) {
+  error(help);
+}
+
+console.log(
+  `\n%c  🍋 Fresh: the next-gen web framework.  %c\n`,
+  "background-color: #86efac; color: black; font-weight: bold",
+  "",
+);
+
+const unresolvedDirectory = Deno.args[0];
+const resolvedDirectory = resolve(unresolvedDirectory);
+
+try {
+  const dir = [...Deno.readDirSync(resolvedDirectory)];
+  const isEmpty = dir.length === 0 ||
+    dir.length === 1 && dir[0].name === ".git";
+  if (
+    !isEmpty &&
+    !(flags.force === null ? confirm(CONFIRM_EMPTY_MESSAGE) : flags.force)
+  ) {
+    error("Directory is not empty.");
+  }
+} catch (err) {
+  if (!(err instanceof Deno.errors.NotFound)) {
+    throw err;
+  }
+}
+console.log("%cLet's set up your new Fresh project.\n", "font-weight: bold");
+
+const useTwind = flags.twind === null
+  ? confirm(USE_TWIND_MESSAGE)
+  : flags.twind;
+
+const useVSCode = flags.vscode === null
+  ? confirm(USE_VSCODE_MESSAGE)
+  : flags.vscode;
+
+await Deno.mkdir(join(resolvedDirectory, "routes", "api"), { recursive: true });
+await Deno.mkdir(join(resolvedDirectory, "islands"), { recursive: true });
+await Deno.mkdir(join(resolvedDirectory, "static"), { recursive: true });
+await Deno.mkdir(join(resolvedDirectory, "components"), { recursive: true });
+if (useVSCode) {
+  await Deno.mkdir(join(resolvedDirectory, ".vscode"), { recursive: true });
+}
+
+const importMap = { imports: {} as Record<string, string> };
+freshImports(importMap.imports);
+if (useTwind) twindImports(importMap.imports);
+const IMPORT_MAP_JSON = JSON.stringify(importMap, null, 2) + "\n";
+await Deno.writeTextFile(
+  join(resolvedDirectory, "import_map.json"),
+  IMPORT_MAP_JSON,
+);
+
+const ROUTES_INDEX_TSX = `import { Head } from "$fresh/runtime.ts";
+import Counter from "../islands/Counter.tsx";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Fresh App</title>
+      </Head>
+      <div${useTwind ? ` class="p-4 mx-auto max-w-screen-md"` : ""}>
+        <img
+          src="/logo.svg"
+          ${
+  useTwind ? `class="w-32 h-32"` : `width="128"\n          height="128"`
+}
+          alt="the fresh logo: a sliced lemon dripping with juice"
+        />
+        <p${useTwind ? ` class="my-6"` : ""}>
+          Welcome to \`fresh\`. Try updating this message in the ./routes/index.tsx
+          file, and refresh.
+        </p>
+        <Counter start={3} />
+      </div>
+    </>
+  );
+}
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "routes", "index.tsx"),
+  ROUTES_INDEX_TSX,
+);
+
+const COMPONENTS_BUTTON_TSX = `import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+${
+  useTwind
+    ? '      class="px-2 py-1 border(gray-100 2) hover:bg-gray-200"\n'
+    : ""
+}    />
+  );
+}
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "components", "Button.tsx"),
+  COMPONENTS_BUTTON_TSX,
+);
+
+const ISLANDS_COUNTER_TSX = `import { useState } from "preact/hooks";
+import { Button } from "../components/Button.tsx";
+
+interface CounterProps {
+  start: number;
+}
+
+export default function Counter(props: CounterProps) {
+  const [count, setCount] = useState(props.start);
+  return (
+    <div${useTwind ? ' class="flex gap-2 w-full"' : ""}>
+      <p${useTwind ? ' class="flex-grow-1 font-bold text-xl"' : ""}>{count}</p>
+      <Button onClick={() => setCount(count - 1)}>-1</Button>
+      <Button onClick={() => setCount(count + 1)}>+1</Button>
+    </div>
+  );
+}
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "islands", "Counter.tsx"),
+  ISLANDS_COUNTER_TSX,
+);
+
+const ROUTES_GREET_TSX = `import { PageProps } from "$fresh/server.ts";
+
+export default function Greet(props: PageProps) {
+  return <div>Hello {props.params.name}</div>;
+}
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "routes", "[name].tsx"),
+  ROUTES_GREET_TSX,
+);
+
+const ROUTES_API_JOKE_TS = `import { HandlerContext } from "$fresh/server.ts";
+
+// Jokes courtesy of https://punsandoneliners.com/randomness/programmer-jokes/
+const JOKES = [
+  "Why do Java developers often wear glasses? They can't C#.",
+  "A SQL query walks into a bar, goes up to two tables and says “can I join you?”",
+  "Wasn't hard to crack Forrest Gump's password. 1forrest1.",
+  "I love pressing the F5 key. It's refreshing.",
+  "Called IT support and a chap from Australia came to fix my network connection.  I asked “Do you come from a LAN down under?”",
+  "There are 10 types of people in the world. Those who understand binary and those who don't.",
+  "Why are assembly programmers often wet? They work below C level.",
+  "My favourite computer based band is the Black IPs.",
+  "What programme do you use to predict the music tastes of former US presidential candidates? An Al Gore Rhythm.",
+  "An SEO expert walked into a bar, pub, inn, tavern, hostelry, public house.",
+];
+
+export const handler = (_req: Request, _ctx: HandlerContext): Response => {
+  const randomIndex = Math.floor(Math.random() * JOKES.length);
+  const body = JOKES[randomIndex];
+  return new Response(body);
+};
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "routes", "api", "joke.ts"),
+  ROUTES_API_JOKE_TS,
+);
+
+const TWIND_CONFIG_TS = `import { Options } from "$fresh/plugins/twind.ts";
+
+export default {
+  selfURL: import.meta.url,
+} as Options;
+`;
+if (useTwind) {
+  await Deno.writeTextFile(
+    join(resolvedDirectory, "twind.config.ts"),
+    TWIND_CONFIG_TS,
+  );
+}
+
+const STATIC_LOGO =
+  `<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>`;
+
+await Deno.writeTextFile(
+  join(resolvedDirectory, "static", "logo.svg"),
+  STATIC_LOGO,
+);
+
+try {
+  const faviconArrayBuffer = await fetch("https://fresh.deno.dev/favicon.ico")
+    .then((d) => d.arrayBuffer());
+  await Deno.writeFile(
+    join(resolvedDirectory, "static", "favicon.ico"),
+    new Uint8Array(faviconArrayBuffer),
+  );
+} catch {
+  // Skip this and be silent if there is a nework issue.
+}
+
+let MAIN_TS = `/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+`;
+
+if (useTwind) {
+  MAIN_TS += `
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+`;
+}
+
+MAIN_TS += `
+await start(manifest${
+  useTwind ? ", { plugins: [twindPlugin(twindConfig)] }" : ""
+});\n`;
+const MAIN_TS_PATH = join(resolvedDirectory, "main.ts");
+await Deno.writeTextFile(MAIN_TS_PATH, MAIN_TS);
+
+const DEV_TS = `#!/usr/bin/env -S deno run -A --watch=static/,routes/
+
+import dev from "$fresh/dev.ts";
+
+await dev(import.meta.url, "./main.ts");
+`;
+const DEV_TS_PATH = join(resolvedDirectory, "dev.ts");
+await Deno.writeTextFile(DEV_TS_PATH, DEV_TS);
+try {
+  await Deno.chmod(DEV_TS_PATH, 0o777);
+} catch {
+  // this throws on windows
+}
+
+const config = {
+  tasks: {
+    start: "deno run -A --watch=static/,routes/ dev.ts",
+  },
+  importMap: "./import_map.json",
+  compilerOptions: {
+    jsx: "react-jsx",
+    jsxImportSource: "preact",
+  },
+};
+const DENO_CONFIG = JSON.stringify(config, null, 2) + "\n";
+
+await Deno.writeTextFile(join(resolvedDirectory, "deno.json"), DENO_CONFIG);
+
+const README_MD = `# fresh project
+
+### Usage
+
+Start the project:
+
+\`\`\`
+deno task start
+\`\`\`
+
+This will watch the project directory and restart as necessary.
+`;
+await Deno.writeTextFile(
+  join(resolvedDirectory, "README.md"),
+  README_MD,
+);
+
+const vscodeSettings = {
+  "deno.enable": true,
+  "deno.lint": true,
+  "editor.defaultFormatter": "denoland.vscode-deno",
+};
+
+const VSCODE_SETTINGS = JSON.stringify(vscodeSettings, null, 2) + "\n";
+
+if (useVSCode) {
+  await Deno.writeTextFile(
+    join(resolvedDirectory, ".vscode", "settings.json"),
+    VSCODE_SETTINGS,
+  );
+}
+
+const vscodeExtensions = {
+  recommendations: ["denoland.vscode-deno"],
+};
+
+if (useTwind) {
+  vscodeExtensions.recommendations.push("sastan.twind-intellisense");
+}
+
+const VSCODE_EXTENSIONS = JSON.stringify(vscodeExtensions, null, 2) + "\n";
+
+if (useVSCode) {
+  await Deno.writeTextFile(
+    join(resolvedDirectory, ".vscode", "extensions.json"),
+    VSCODE_EXTENSIONS,
+  );
+}
+
+const manifest = await collect(resolvedDirectory);
+await generate(resolvedDirectory, manifest);
+
+// Specifically print unresolvedDirectory, rather than resolvedDirectory in order to
+// not leak personal info (e.g. `/Users/MyName`)
+console.log("\n%cProject initialized!\n", "color: green; font-weight: bold");
+
+console.log(
+  `Enter your project directory using %ccd ${unresolvedDirectory}%c.`,
+  "color: cyan",
+  "",
+);
+console.log(
+  "Run %cdeno task start%c to start the project. %cCTRL-C%c to stop.",
+  "color: cyan",
+  "",
+  "color: cyan",
+  "",
+);
+console.log();
+console.log(
+  "Stuck? Join our Discord %chttps://discord.gg/deno",
+  "color: cyan",
+  "",
+);
+console.log();
+console.log(
+  "%cHappy hacking! 🦕",
+  "color: gray",
+);

fresh-main/plugins/twind.ts

@@ -0,0 +1,50 @@
+import { virtualSheet } from "twind/sheets";
+import { Plugin } from "../server.ts";
+
+import { Options, setup, STYLE_ELEMENT_ID } from "./twind/shared.ts";
+export type { Options };
+
+export default function twind(options: Options): Plugin {
+  const sheet = virtualSheet();
+  setup(options, sheet);
+  const main = `data:application/javascript,import hydrate from "${
+    new URL("./twind/main.ts", import.meta.url).href
+  }";
+import options from "${options.selfURL}";
+export default function(state) { hydrate(options, state); }`;
+  return {
+    name: "twind",
+    entrypoints: { "main": main },
+    render(ctx) {
+      sheet.reset(undefined);
+      const res = ctx.render();
+      const cssTexts = [...sheet.target];
+      const snapshot = sheet.reset();
+      const scripts = [];
+      let cssText: string;
+      if (res.requiresHydration) {
+        const precedences = snapshot[1] as number[];
+        cssText = cssTexts.map((cssText, i) =>
+          `${cssText}/*${precedences[i].toString(36)}*/`
+        ).join("\n");
+        const mappings: (string | [string, string])[] = [];
+        for (
+          const [key, value] of (snapshot[3] as Map<string, string>).entries()
+        ) {
+          if (key === value) {
+            mappings.push(key);
+          } else {
+            mappings.push([key, value]);
+          }
+        }
+        scripts.push({ entrypoint: "main", state: mappings });
+      } else {
+        cssText = cssTexts.join("\n");
+      }
+      return {
+        scripts,
+        styles: [{ cssText, id: STYLE_ELEMENT_ID }],
+      };
+    },
+  };
+}

fresh-main/plugins/twind/main.ts

@@ -0,0 +1,30 @@
+import { Sheet } from "twind";
+import { Options, setup, STYLE_ELEMENT_ID } from "./shared.ts";
+
+type State = [string, string][];
+
+export default function hydrate(options: Options, state: State) {
+  const el = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement;
+  const rules = new Set<string>();
+  const precedences: number[] = [];
+  const mappings = new Map(
+    state.map((v) => typeof v === "string" ? [v, v] : v),
+  );
+  // deno-lint-ignore no-explicit-any
+  const sheetState: any[] = [precedences, rules, mappings, true];
+  const target = el.sheet!;
+  const ruleText = Array.from(target.cssRules).map((r) => r.cssText);
+  for (const r of ruleText) {
+    const m = r.lastIndexOf("/*");
+    const precedence = parseInt(r.slice(m + 2, -2), 36);
+    const rule = r.slice(0, m);
+    rules.add(rule);
+    precedences.push(precedence);
+  }
+  const sheet: Sheet = {
+    target,
+    insert: (rule, index) => target.insertRule(rule, index),
+    init: (cb) => cb(sheetState.shift()),
+  };
+  setup(options, sheet);
+}

fresh-main/plugins/twind/shared.ts

@@ -0,0 +1,48 @@
+import { JSX, options as preactOptions, VNode } from "preact";
+import { Configuration, setup as twSetup, Sheet, tw } from "twind";
+
+export const STYLE_ELEMENT_ID = "__FRSH_TWIND";
+
+export interface Options extends Omit<Configuration, "mode" | "sheet"> {
+  /** The import.meta.url of the module defining these options. */
+  selfURL: string;
+}
+
+declare module "preact" {
+  namespace JSX {
+    interface DOMAttributes<Target extends EventTarget> {
+      class?: string;
+      className?: string;
+    }
+  }
+}
+
+export function setup(options: Options, sheet: Sheet) {
+  const config: Configuration = {
+    ...options,
+    mode: "silent",
+    sheet,
+  };
+  twSetup(config);
+
+  const originalHook = preactOptions.vnode;
+  // deno-lint-ignore no-explicit-any
+  preactOptions.vnode = (vnode: VNode<JSX.DOMAttributes<any>>) => {
+    if (typeof vnode.type === "string" && typeof vnode.props === "object") {
+      const { props } = vnode;
+      const classes: string[] = [];
+      if (props.class) {
+        classes.push(tw(props.class));
+        props.class = undefined;
+      }
+      if (props.className) {
+        classes.push(tw(props.className));
+      }
+      if (classes.length) {
+        props.class = classes.join(" ");
+      }
+    }
+
+    originalHook?.(vnode);
+  };
+}

fresh-main/runtime.ts

@@ -0,0 +1,3 @@
+export * from "./src/runtime/utils.ts";
+export * from "./src/runtime/head.ts";
+export * from "./src/runtime/csp.ts";

fresh-main/server.ts

@@ -0,0 +1 @@
+export * from "./src/server/mod.ts";

fresh-main/src/dev/deps.ts

@@ -0,0 +1,15 @@
+// std
+export {
+  dirname,
+  extname,
+  fromFileUrl,
+  join,
+  resolve,
+  toFileUrl,
+} from "https://deno.land/std@0.150.0/path/mod.ts";
+export { walk } from "https://deno.land/std@0.150.0/fs/walk.ts";
+export { parse } from "https://deno.land/std@0.150.0/flags/mod.ts";
+export { gte } from "https://deno.land/std@0.150.0/semver/mod.ts";
+
+// ts-morph
+export { Node, Project } from "https://deno.land/x/ts_morph@16.0.0/mod.ts";

fresh-main/src/dev/error.ts

@@ -0,0 +1,8 @@
+export function printError(message: string) {
+  console.error(`%cerror%c: ${message}`, "color: red; font-weight: bold", "");
+}
+
+export function error(message: string): never {
+  printError(message);
+  Deno.exit(1);
+}

fresh-main/src/dev/imports.ts

@@ -0,0 +1,22 @@
+export const RECOMMENDED_PREACT_VERSION = "10.11.0";
+export const RECOMMENDED_PREACT_RTS_VERSION = "5.2.4";
+export const RECOMMENDED_PREACT_SIGNALS_VERSION = "1.0.3";
+export const RECOMMENDED_PREACT_SIGNALS_CORE_VERSION = "1.0.1";
+export const RECOMMENDED_TWIND_VERSION = "0.16.17";
+
+export function freshImports(imports: Record<string, string>) {
+  imports["$fresh/"] = new URL("../../", import.meta.url).href;
+  imports["preact"] = `https://esm.sh/preact@${RECOMMENDED_PREACT_VERSION}`;
+  imports["preact/"] = `https://esm.sh/preact@${RECOMMENDED_PREACT_VERSION}/`;
+  imports["preact-render-to-string"] =
+    `https://esm.sh/*preact-render-to-string@${RECOMMENDED_PREACT_RTS_VERSION}`;
+  imports["@preact/signals"] =
+    `https://esm.sh/*@preact/signals@${RECOMMENDED_PREACT_SIGNALS_VERSION}`;
+  imports["@preact/signals-core"] =
+    `https://esm.sh/*@preact/signals-core@${RECOMMENDED_PREACT_SIGNALS_CORE_VERSION}`;
+}
+
+export function twindImports(imports: Record<string, string>) {
+  imports["twind"] = `https://esm.sh/twind@${RECOMMENDED_TWIND_VERSION}`;
+  imports["twind/"] = `https://esm.sh/twind@${RECOMMENDED_TWIND_VERSION}/`;
+}

fresh-main/src/dev/mod.ts

@@ -0,0 +1,196 @@
+import {
+  dirname,
+  extname,
+  fromFileUrl,
+  gte,
+  join,
+  toFileUrl,
+  walk,
+} from "./deps.ts";
+import { error } from "./error.ts";
+
+const MIN_DENO_VERSION = "1.25.0";
+
+export function ensureMinDenoVersion() {
+  // Check that the minimum supported Deno version is being used.
+  if (!gte(Deno.version.deno, MIN_DENO_VERSION)) {
+    let message =
+      `Deno version ${MIN_DENO_VERSION} or higher is required. Please update Deno.\n\n`;
+
+    if (Deno.execPath().includes("homebrew")) {
+      message +=
+        "You seem to have installed Deno via homebrew. To update, run: `brew upgrade deno`\n";
+    } else {
+      message += "To update, run: `deno upgrade`\n";
+    }
+
+    error(message);
+  }
+}
+
+interface Manifest {
+  routes: string[];
+  islands: string[];
+}
+
+export async function collect(directory: string): Promise<Manifest> {
+  const routesDir = join(directory, "./routes");
+  const islandsDir = join(directory, "./islands");
+
+  const routes = [];
+  try {
+    const routesUrl = toFileUrl(routesDir);
+    // TODO(lucacasonato): remove the extranious Deno.readDir when
+    // https://github.com/denoland/deno_std/issues/1310 is fixed.
+    for await (const _ of Deno.readDir(routesDir)) {
+      // do nothing
+    }
+    const routesFolder = walk(routesDir, {
+      includeDirs: false,
+      includeFiles: true,
+      exts: ["tsx", "jsx", "ts", "js"],
+    });
+    for await (const entry of routesFolder) {
+      if (entry.isFile) {
+        const file = toFileUrl(entry.path).href.substring(
+          routesUrl.href.length,
+        );
+        routes.push(file);
+      }
+    }
+  } catch (err) {
+    if (err instanceof Deno.errors.NotFound) {
+      // Do nothing.
+    } else {
+      throw err;
+    }
+  }
+  routes.sort();
+
+  const islands = [];
+  try {
+    const islandsUrl = toFileUrl(islandsDir);
+    for await (const entry of Deno.readDir(islandsDir)) {
+      if (entry.isDirectory) {
+        error(
+          `Found subdirectory '${entry.name}' in islands/. The islands/ folder must not contain any subdirectories.`,
+        );
+      }
+      if (entry.isFile) {
+        const ext = extname(entry.name);
+        if (![".tsx", ".jsx", ".ts", ".js"].includes(ext)) continue;
+        const path = join(islandsDir, entry.name);
+        const file = toFileUrl(path).href.substring(islandsUrl.href.length);
+        islands.push(file);
+      }
+    }
+  } catch (err) {
+    if (err instanceof Deno.errors.NotFound) {
+      // Do nothing.
+    } else {
+      throw err;
+    }
+  }
+  islands.sort();
+
+  return { routes, islands };
+}
+
+export async function generate(directory: string, manifest: Manifest) {
+  const { routes, islands } = manifest;
+
+  const output = `// DO NOT EDIT. This file is generated by fresh.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running \`dev.ts\`.
+
+import config from "./deno.json" assert { type: "json" };
+${
+    routes.map((file, i) => `import * as $${i} from "./routes${file}";`).join(
+      "\n",
+    )
+  }
+${
+    islands.map((file, i) => `import * as $$${i} from "./islands${file}";`)
+      .join("\n")
+  }
+
+const manifest = {
+  routes: {
+    ${
+    routes.map((file, i) => `${JSON.stringify(`./routes${file}`)}: $${i},`)
+      .join("\n    ")
+  }
+  },
+  islands: {
+    ${
+    islands.map((file, i) => `${JSON.stringify(`./islands${file}`)}: $$${i},`)
+      .join("\n    ")
+  }
+  },
+  baseUrl: import.meta.url,
+  config,
+};
+
+export default manifest;
+`;
+
+  const proc = Deno.run({
+    cmd: [Deno.execPath(), "fmt", "-"],
+    stdin: "piped",
+    stdout: "piped",
+    stderr: "null",
+  });
+  const raw = new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode(output));
+      controller.close();
+    },
+  });
+  await raw.pipeTo(proc.stdin.writable);
+  const out = await proc.output();
+  await proc.status();
+  proc.close();
+
+  const manifestStr = new TextDecoder().decode(out);
+  const manifestPath = join(directory, "./fresh.gen.ts");
+
+  await Deno.writeTextFile(manifestPath, manifestStr);
+  console.log(
+    `%cThe manifest has been generated for ${routes.length} routes and ${islands.length} islands.`,
+    "color: blue; font-weight: bold",
+  );
+}
+
+export async function dev(base: string, entrypoint: string) {
+  ensureMinDenoVersion();
+
+  entrypoint = new URL(entrypoint, base).href;
+
+  const dir = dirname(fromFileUrl(base));
+
+  let currentManifest: Manifest;
+  const prevManifest = Deno.env.get("FRSH_DEV_PREVIOUS_MANIFEST");
+  if (prevManifest) {
+    currentManifest = JSON.parse(prevManifest);
+  } else {
+    currentManifest = { islands: [], routes: [] };
+  }
+  const newManifest = await collect(dir);
+  Deno.env.set("FRSH_DEV_PREVIOUS_MANIFEST", JSON.stringify(newManifest));
+
+  const manifestChanged =
+    !arraysEqual(newManifest.routes, currentManifest.routes) ||
+    !arraysEqual(newManifest.islands, currentManifest.islands);
+
+  if (manifestChanged) await generate(dir, newManifest);
+
+  await import(entrypoint);
+}
+
+function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}

fresh-main/src/runtime/csp.ts

@@ -0,0 +1,140 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export const SELF = "'self'";
+export const UNSAFE_INLINE = "'unsafe-inline'";
+export const UNSAFE_EVAL = "'unsafe-eval'";
+export const UNSAFE_HASHES = "'unsafe-hashes'";
+export const NONE = "'none'";
+export const STRICT_DYNAMIC = "'strict-dynamic'";
+
+export function nonce(val: string) {
+  return `'nonce-${val}'`;
+}
+
+export interface ContentSecurityPolicy {
+  directives: ContentSecurityPolicyDirectives;
+  reportOnly: boolean;
+}
+
+export interface ContentSecurityPolicyDirectives {
+  // Fetch directives
+  /**
+   * Defines the valid sources for web workers and nested browsing contexts
+   * loaded using elements such as <frame> and <iframe>.
+   */
+  childSrc?: string[];
+  /**
+   * Restricts the URLs which can be loaded using script interfaces.
+   */
+  connectSrc?: string[];
+  /**
+   * Serves as a fallback for the other fetch directives.
+   */
+  defaultSrc?: string[];
+  /**
+   * Specifies valid sources for fonts loaded using @font-face.
+   */
+  fontSrc?: string[];
+  /**
+   * Specifies valid sources for nested browsing contexts loading using elements
+   * such as <frame> and <iframe>.
+   */
+  frameSrc?: string[];
+  /**
+   * Specifies valid sources of images and favicons.
+   */
+  imgSrc?: string[];
+  /**
+   * Specifies valid sources of application manifest files.
+   */
+  manifestSrc?: string[];
+  /**
+   * Specifies valid sources for loading media using the <audio> , <video> and
+   * <track> elements.
+   */
+  mediaSrc?: string[];
+  /**
+   * Specifies valid sources for the <object>, <embed>, and <applet> elements.
+   */
+  objectSrc?: string[];
+  /**
+   * Specifies valid sources to be prefetched or prerendered.
+   */
+  prefetchSrc?: string[];
+  /**
+   * Specifies valid sources for JavaScript.
+   */
+  scriptSrc?: string[];
+  /**
+   * Specifies valid sources for JavaScript <script> elements.
+   */
+  scriptSrcElem?: string[];
+  /**
+   * Specifies valid sources for JavaScript inline event handlers.
+   */
+  scriptSrcAttr?: string[];
+  /**
+   * Specifies valid sources for stylesheets.
+   */
+  styleSrc?: string[];
+  /**
+   * Specifies valid sources for stylesheets <style> elements and <link>
+   * elements with rel="stylesheet".
+   */
+  styleSrcElem?: string[];
+  /**
+   * Specifies valid sources for inline styles applied to individual DOM
+   * elements.
+   */
+  styleSrcAttr?: string[];
+  /**
+   * Specifies valid sources for Worker, SharedWorker, or ServiceWorker scripts.
+   */
+  workerSrc?: string[];
+
+  // Document directives
+  /**
+   * Restricts the URLs which can be used in a document's <base> element.
+   */
+  baseUri?: string[];
+  /**
+   * Enables a sandbox for the requested resource similar to the <iframe>
+   * sandbox attribute.
+   */
+  sandbox?: string[];
+
+  // Navigation directives
+  /**
+   * Restricts the URLs which can be used as the target of a form submissions
+   * from a given context.
+   */
+  formAction?: string[];
+  /**
+   * Specifies valid parents that may embed a page using <frame>, <iframe>,
+   * <object>, <embed>, or <applet>.
+   */
+  frameAncestors?: string[];
+  /**
+   * Restricts the URLs to which a document can initiate navigation by any
+   * means, including <form> (if form-action is not specified), <a>,
+   * window.location, window.open, etc.
+   */
+  navigateTo?: string[];
+
+  /**
+   * The URI to report CSP violations to.
+   */
+  reportUri?: string;
+}
+
+export const CSP_CONTEXT = createContext<ContentSecurityPolicy | undefined>(
+  undefined,
+);
+
+export function useCSP(mutator: (csp: ContentSecurityPolicy) => void) {
+  const csp = useContext(CSP_CONTEXT);
+  if (csp) {
+    mutator(csp);
+  }
+}

fresh-main/src/runtime/head.ts

@@ -0,0 +1,22 @@
+import { ComponentChildren, createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+export interface HeadProps {
+  children: ComponentChildren;
+}
+
+export const HEAD_CONTEXT = createContext<ComponentChildren[]>([]);
+
+export function Head(props: HeadProps) {
+  let context: ComponentChildren[];
+  try {
+    context = useContext(HEAD_CONTEXT);
+  } catch (err) {
+    throw new Error(
+      "<Head> component is not supported in the browser, or during suspense renders.",
+      { cause: err },
+    );
+  }
+  context.push(props.children);
+  return null;
+}

fresh-main/src/runtime/main.ts

@@ -0,0 +1,71 @@
+import { ComponentType, h, options, render } from "preact";
+import { assetHashingHook } from "./utils.ts";
+
+function createRootFragment(
+  parent: Element,
+  replaceNode: Node | Node[],
+) {
+  replaceNode = ([] as Node[]).concat(replaceNode);
+  const s = replaceNode[replaceNode.length - 1].nextSibling;
+  function insert(c: Node, r: Node) {
+    parent.insertBefore(c, r || s);
+  }
+  // @ts-ignore this is fine
+  return parent.__k = {
+    nodeType: 1,
+    parentNode: parent,
+    firstChild: replaceNode[0],
+    childNodes: replaceNode,
+    insertBefore: insert,
+    appendChild: insert,
+    removeChild: function (c: Node) {
+      parent.removeChild(c);
+    },
+  };
+}
+
+// deno-lint-ignore no-explicit-any
+export function revive(islands: Record<string, ComponentType>, props: any[]) {
+  function walk(node: Node | null) {
+    const tag = node!.nodeType === 8 &&
+      ((node as Comment).data.match(/^\s*frsh-(.*)\s*$/) || [])[1];
+    let endNode: Node | null = null;
+    if (tag) {
+      const startNode = node!;
+      const children = [];
+      const parent = node!.parentNode;
+      // collect all children of the island
+      while ((node = node!.nextSibling) && node.nodeType !== 8) {
+        children.push(node);
+      }
+      startNode.parentNode!.removeChild(startNode); // remove start tag node
+
+      const [id, n] = tag.split(":");
+      render(
+        h(islands[id], props[Number(n)]),
+        createRootFragment(
+          parent! as HTMLElement,
+          children,
+          // deno-lint-ignore no-explicit-any
+        ) as any as HTMLElement,
+      );
+      endNode = node;
+    }
+
+    const sib = node!.nextSibling;
+    const fc = node!.firstChild;
+    if (endNode) {
+      endNode.parentNode?.removeChild(endNode); // remove end tag node
+    }
+
+    if (sib) walk(sib);
+    if (fc) walk(fc);
+  }
+  walk(document.body);
+}
+
+const originalHook = options.vnode;
+options.vnode = (vnode) => {
+  assetHashingHook(vnode);
+  if (originalHook) originalHook(vnode);
+};

fresh-main/src/runtime/main_dev.ts

@@ -0,0 +1,2 @@
+import "preact/debug";
+export { revive } from "./main.ts";

fresh-main/src/runtime/utils.ts

@@ -0,0 +1,70 @@
+import { VNode } from "preact";
+
+export const INTERNAL_PREFIX = "/_frsh";
+export const ASSET_CACHE_BUST_KEY = "__frsh_c";
+
+export const IS_BROWSER = typeof document !== "undefined";
+
+/**
+ * Create a "locked" asset path. This differs from a plain path in that it is
+ * specific to the current version of the application, and as such can be safely
+ * served with a very long cache lifetime (1 year).
+ */
+export function asset(path: string) {
+  if (!path.startsWith("/") || path.startsWith("//")) return path;
+  try {
+    const url = new URL(path, "https://freshassetcache.local");
+    if (
+      url.protocol !== "https:" || url.host !== "freshassetcache.local" ||
+      url.searchParams.has(ASSET_CACHE_BUST_KEY)
+    ) {
+      return path;
+    }
+    url.searchParams.set(ASSET_CACHE_BUST_KEY, __FRSH_BUILD_ID);
+    return url.pathname + url.search + url.hash;
+  } catch (err) {
+    console.warn(
+      `Failed to create asset() URL, falling back to regular path ('${path}'):`,
+      err,
+    );
+    return path;
+  }
+}
+
+/** Apply the `asset` function to urls in a `srcset` attribute. */
+export function assetSrcSet(srcset: string): string {
+  if (srcset.includes("(")) return srcset; // Bail if the srcset contains complicated syntax.
+  const parts = srcset.split(",");
+  const constructed = [];
+  for (const part of parts) {
+    const trimmed = part.trimStart();
+    const leadingWhitespace = part.length - trimmed.length;
+    if (trimmed === "") return srcset; // Bail if the srcset is malformed.
+    let urlEnd = trimmed.indexOf(" ");
+    if (urlEnd === -1) urlEnd = trimmed.length;
+    const leading = part.substring(0, leadingWhitespace);
+    const url = trimmed.substring(0, urlEnd);
+    const trailing = trimmed.substring(urlEnd);
+    constructed.push(leading + asset(url) + trailing);
+  }
+  return constructed.join(",");
+}
+
+export function assetHashingHook(
+  vnode: VNode<{
+    src?: string;
+    srcset?: string;
+    ["data-fresh-disable-lock"]?: boolean;
+  }>,
+) {
+  if (vnode.type === "img" || vnode.type === "source") {
+    const { props } = vnode;
+    if (props["data-fresh-disable-lock"]) return;
+    if (typeof props.src === "string") {
+      props.src = asset(props.src);
+    }
+    if (typeof props.srcset === "string") {
+      props.srcset = assetSrcSet(props.srcset);
+    }
+  }
+}

fresh-main/src/runtime/utils_test.ts

@@ -0,0 +1,60 @@
+import { assertEquals } from "../../tests/deps.ts";
+import { asset, assetSrcSet } from "./utils.ts";
+
+globalThis.__FRSH_BUILD_ID = "ID123";
+
+Deno.test("asset", () => {
+  assertEquals(asset("/test.png"), "/test.png?__frsh_c=ID123");
+  assertEquals(asset("/test?f=1"), "/test?f=1&__frsh_c=ID123");
+  assertEquals(asset("/test#foo"), "/test?__frsh_c=ID123#foo");
+  assertEquals(asset("/test?f=1#foo"), "/test?f=1&__frsh_c=ID123#foo");
+
+  assertEquals(asset("./test.png"), "./test.png");
+  assertEquals(asset("//example.com/logo.png"), "//example.com/logo.png");
+  assertEquals(asset("/test.png?__frsh_c=1"), "/test.png?__frsh_c=1");
+  assertEquals(
+    asset("https://example.com/logo.png"),
+    "https://example.com/logo.png",
+  );
+});
+
+Deno.test("assetSrcSet", () => {
+  assertEquals(assetSrcSet("/img.png"), "/img.png?__frsh_c=ID123");
+  assertEquals(
+    assetSrcSet("/img.png, /img.png 2x"),
+    "/img.png?__frsh_c=ID123, /img.png?__frsh_c=ID123 2x",
+  );
+  assertEquals(assetSrcSet("/img.png 1x"), "/img.png?__frsh_c=ID123 1x");
+  assertEquals(
+    assetSrcSet("/img.png 1x, /img.png 2x"),
+    "/img.png?__frsh_c=ID123 1x, /img.png?__frsh_c=ID123 2x",
+  );
+  assertEquals(
+    assetSrcSet("/img.png 1.5x, /img.png 3x"),
+    "/img.png?__frsh_c=ID123 1.5x, /img.png?__frsh_c=ID123 3x",
+  );
+
+  //test with queries
+  assertEquals(
+    assetSrcSet("/img.png?w=140, /img.png?w=200 2x"),
+    "/img.png?w=140&__frsh_c=ID123, /img.png?w=200&__frsh_c=ID123 2x",
+  );
+
+  // test with extra spaces
+  assertEquals(
+    assetSrcSet("/img-s.png 300w,  /img-l.png  600w , /img-xl.png  900w"),
+    "/img-s.png?__frsh_c=ID123 300w,  /img-l.png?__frsh_c=ID123  600w , /img-xl.png?__frsh_c=ID123  900w",
+  );
+
+  // test with ( syntax
+  assertEquals(
+    assetSrcSet("/img.png ( 140,0w)"),
+    "/img.png ( 140,0w)",
+  );
+
+  // test with invalid parts
+  assertEquals(
+    assetSrcSet("/img.png,, /img-s.png 300w"),
+    "/img.png,, /img-s.png 300w",
+  );
+});

fresh-main/src/server/bundle.ts

@@ -0,0 +1,150 @@
+import { BuildOptions } from "https://deno.land/x/esbuild@v0.14.51/mod.js";
+import { BUILD_ID } from "./constants.ts";
+import { denoPlugin, esbuild, toFileUrl } from "./deps.ts";
+import { Island, Plugin } from "./types.ts";
+
+export interface JSXConfig {
+  jsx: "react" | "react-jsx";
+  jsxImportSource?: string;
+}
+
+let esbuildInitialized: boolean | Promise<void> = false;
+async function ensureEsbuildInitialized() {
+  if (esbuildInitialized === false) {
+    if (Deno.run === undefined) {
+      const wasmURL = new URL("./esbuild_v0.14.51.wasm", import.meta.url).href;
+      esbuildInitialized = fetch(wasmURL).then(async (r) => {
+        const resp = new Response(r.body, {
+          headers: { "Content-Type": "application/wasm" },
+        });
+        const wasmModule = await WebAssembly.compileStreaming(resp);
+        await esbuild.initialize({
+          wasmModule,
+          worker: false,
+        });
+      });
+    } else {
+      esbuild.initialize({});
+    }
+    await esbuildInitialized;
+    esbuildInitialized = true;
+  } else if (esbuildInitialized instanceof Promise) {
+    await esbuildInitialized;
+  }
+}
+
+const JSX_RUNTIME_MODE = {
+  "react": "transform",
+  "react-jsx": "automatic",
+} as const;
+
+export class Bundler {
+  #importMapURL: URL;
+  #jsxConfig: JSXConfig;
+  #islands: Island[];
+  #plugins: Plugin[];
+  #cache: Map<string, Uint8Array> | Promise<void> | undefined = undefined;
+  #dev: boolean;
+
+  constructor(
+    islands: Island[],
+    plugins: Plugin[],
+    importMapURL: URL,
+    jsxConfig: JSXConfig,
+    dev: boolean,
+  ) {
+    this.#islands = islands;
+    this.#plugins = plugins;
+    this.#importMapURL = importMapURL;
+    this.#jsxConfig = jsxConfig;
+    this.#dev = dev;
+  }
+
+  async bundle() {
+    const entryPoints: Record<string, string> = {
+      main: this.#dev
+        ? new URL("../../src/runtime/main_dev.ts", import.meta.url).href
+        : new URL("../../src/runtime/main.ts", import.meta.url).href,
+    };
+
+    for (const island of this.#islands) {
+      entryPoints[`island-${island.id}`] = island.url;
+    }
+
+    for (const plugin of this.#plugins) {
+      for (const [name, url] of Object.entries(plugin.entrypoints ?? {})) {
+        entryPoints[`plugin-${plugin.name}-${name}`] = url;
+      }
+    }
+
+    const absWorkingDir = Deno.cwd();
+    await ensureEsbuildInitialized();
+    // In dev-mode we skip identifier minification to be able to show proper
+    // component names in Preact DevTools instead of single characters.
+    const minifyOptions: Partial<BuildOptions> = this.#dev
+      ? { minifyIdentifiers: false, minifySyntax: true, minifyWhitespace: true }
+      : { minify: true };
+    const bundle = await esbuild.build({
+      bundle: true,
+      define: { __FRSH_BUILD_ID: `"${BUILD_ID}"` },
+      entryPoints,
+      format: "esm",
+      metafile: true,
+      ...minifyOptions,
+      outdir: ".",
+      // This is requried to ensure the format of the outputFiles path is the same
+      // between windows and linux
+      absWorkingDir,
+      outfile: "",
+      platform: "neutral",
+      plugins: [denoPlugin({ importMapURL: this.#importMapURL })],
+      sourcemap: this.#dev ? "linked" : false,
+      splitting: true,
+      target: ["chrome99", "firefox99", "safari15"],
+      treeShaking: true,
+      write: false,
+      jsx: JSX_RUNTIME_MODE[this.#jsxConfig.jsx],
+      jsxImportSource: this.#jsxConfig.jsxImportSource,
+    });
+    // const metafileOutputs = bundle.metafile!.outputs;
+
+    // for (const path in metafileOutputs) {
+    //   const meta = metafileOutputs[path];
+    //   const imports = meta.imports
+    //     .filter(({ kind }) => kind === "import-statement")
+    //     .map(({ path }) => `/${path}`);
+    //   this.#preloads.set(`/${path}`, imports);
+    // }
+
+    const cache = new Map<string, Uint8Array>();
+    const absDirUrlLength = toFileUrl(absWorkingDir).href.length;
+    for (const file of bundle.outputFiles) {
+      cache.set(
+        toFileUrl(file.path).href.substring(absDirUrlLength),
+        file.contents,
+      );
+    }
+    this.#cache = cache;
+
+    return;
+  }
+
+  async cache(): Promise<Map<string, Uint8Array>> {
+    if (this.#cache === undefined) {
+      this.#cache = this.bundle();
+    }
+    if (this.#cache instanceof Promise) {
+      await this.#cache;
+    }
+    return this.#cache as Map<string, Uint8Array>;
+  }
+
+  async get(path: string): Promise<Uint8Array | null> {
+    const cache = await this.cache();
+    return cache.get(path) ?? null;
+  }
+
+  // getPreloads(path: string): string[] {
+  //   return this.#preloads.get(path) ?? [];
+  // }
+}

fresh-main/src/server/constants.ts

@@ -0,0 +1,23 @@
+import { INTERNAL_PREFIX } from "../runtime/utils.ts";
+
+export const REFRESH_JS_URL = `${INTERNAL_PREFIX}/refresh.js`;
+export const ALIVE_URL = `${INTERNAL_PREFIX}/alive`;
+export const BUILD_ID = Deno.env.get("DENO_DEPLOYMENT_ID") ||
+  crypto.randomUUID();
+export const JS_PREFIX = `/js`;
+export const DEBUG = !Deno.env.get("DENO_DEPLOYMENT_ID");
+
+export function bundleAssetUrl(path: string) {
+  return `${INTERNAL_PREFIX}${JS_PREFIX}/${BUILD_ID}${path}`;
+}
+
+globalThis.__FRSH_BUILD_ID = BUILD_ID;
+
+declare global {
+  interface Crypto {
+    randomUUID(): string;
+  }
+
+  // deno-lint-ignore no-var
+  var __FRSH_BUILD_ID: string;
+}

fresh-main/src/server/context.ts

@@ -0,0 +1,776 @@
+import {
+  ConnInfo,
+  extname,
+  fromFileUrl,
+  RequestHandler,
+  rutt,
+  Status,
+  toFileUrl,
+  typeByExtension,
+  walk,
+} from "./deps.ts";
+import { h } from "preact";
+import { Manifest } from "./mod.ts";
+import { Bundler, JSXConfig } from "./bundle.ts";
+import { ALIVE_URL, BUILD_ID, JS_PREFIX, REFRESH_JS_URL } from "./constants.ts";
+import DefaultErrorHandler from "./default_error_page.ts";
+import {
+  AppModule,
+  ErrorPage,
+  ErrorPageModule,
+  FreshOptions,
+  Handler,
+  Island,
+  Middleware,
+  MiddlewareModule,
+  MiddlewareRoute,
+  Plugin,
+  RenderFunction,
+  Route,
+  RouteModule,
+  UnknownPage,
+  UnknownPageModule,
+} from "./types.ts";
+import { render as internalRender } from "./render.ts";
+import { ContentSecurityPolicyDirectives, SELF } from "../runtime/csp.ts";
+import { ASSET_CACHE_BUST_KEY, INTERNAL_PREFIX } from "../runtime/utils.ts";
+interface RouterState {
+  state: Record<string, unknown>;
+}
+
+interface StaticFile {
+  /** The URL to the static file on disk. */
+  localUrl: URL;
+  /** The path to the file as it would be in the incoming request. */
+  path: string;
+  /** The size of the file. */
+  size: number;
+  /** The content-type of the file. */
+  contentType: string;
+  /** Hash of the file contents. */
+  etag: string;
+}
+
+export class ServerContext {
+  #dev: boolean;
+  #routes: Route[];
+  #islands: Island[];
+  #staticFiles: StaticFile[];
+  #bundler: Bundler;
+  #renderFn: RenderFunction;
+  #middlewares: MiddlewareRoute[];
+  #app: AppModule;
+  #notFound: UnknownPage;
+  #error: ErrorPage;
+  #plugins: Plugin[];
+
+  constructor(
+    routes: Route[],
+    islands: Island[],
+    staticFiles: StaticFile[],
+    renderfn: RenderFunction,
+    middlewares: MiddlewareRoute[],
+    app: AppModule,
+    notFound: UnknownPage,
+    error: ErrorPage,
+    plugins: Plugin[],
+    importMapURL: URL,
+    jsxConfig: JSXConfig,
+  ) {
+    this.#routes = routes;
+    this.#islands = islands;
+    this.#staticFiles = staticFiles;
+    this.#renderFn = renderfn;
+    this.#middlewares = middlewares;
+    this.#app = app;
+    this.#notFound = notFound;
+    this.#error = error;
+    this.#plugins = plugins;
+    this.#dev = typeof Deno.env.get("DENO_DEPLOYMENT_ID") !== "string"; // Env var is only set in prod (on Deploy).
+    this.#bundler = new Bundler(
+      this.#islands,
+      this.#plugins,
+      importMapURL,
+      jsxConfig,
+      this.#dev,
+    );
+  }
+
+  /**
+   * Process the manifest into individual components and pages.
+   */
+  static async fromManifest(
+    manifest: Manifest,
+    opts: FreshOptions,
+  ): Promise<ServerContext> {
+    // Get the manifest' base URL.
+    const baseUrl = new URL("./", manifest.baseUrl).href;
+
+    const config = manifest.config || { importMap: "./import_map.json" };
+    if (typeof config.importMap !== "string") {
+      throw new Error("deno.json must contain an 'importMap' property.");
+    }
+    const importMapURL = new URL(config.importMap, manifest.baseUrl);
+
+    config.compilerOptions ??= {};
+
+    let jsx: "react" | "react-jsx";
+    switch (config.compilerOptions.jsx) {
+      case "react":
+      case undefined:
+        jsx = "react";
+        break;
+      case "react-jsx":
+        jsx = "react-jsx";
+        break;
+      default:
+        throw new Error("Unknown jsx option: " + config.compilerOptions.jsx);
+    }
+
+    const jsxConfig: JSXConfig = {
+      jsx,
+      jsxImportSource: config.compilerOptions.jsxImportSource,
+    };
+
+    // Extract all routes, and prepare them into the `Page` structure.
+    const routes: Route[] = [];
+    const islands: Island[] = [];
+    const middlewares: MiddlewareRoute[] = [];
+    let app: AppModule = DEFAULT_APP;
+    let notFound: UnknownPage = DEFAULT_NOT_FOUND;
+    let error: ErrorPage = DEFAULT_ERROR;
+    for (const [self, module] of Object.entries(manifest.routes)) {
+      const url = new URL(self, baseUrl).href;
+      if (!url.startsWith(baseUrl + "routes")) {
+        throw new TypeError("Page is not a child of the basepath.");
+      }
+      const path = url.substring(baseUrl.length).substring("routes".length);
+      const baseRoute = path.substring(1, path.length - extname(path).length);
+      const name = baseRoute.replace("/", "-");
+      const isMiddleware = path.endsWith("/_middleware.tsx") ||
+        path.endsWith("/_middleware.ts") || path.endsWith("/_middleware.jsx") ||
+        path.endsWith("/_middleware.js");
+      if (!path.startsWith("/_") && !isMiddleware) {
+        const { default: component, config } = module as RouteModule;
+        let pattern = pathToPattern(baseRoute) + "{/}?";
+        if (config?.routeOverride) {
+          pattern = String(config.routeOverride);
+        }
+        let { handler } = module as RouteModule;
+        handler ??= {};
+        if (
+          component &&
+          typeof handler === "object" && handler.GET === undefined
+        ) {
+          handler.GET = (_req, { render }) => render();
+        }
+        const route: Route = {
+          pattern,
+          url,
+          name,
+          component,
+          handler,
+          csp: Boolean(config?.csp ?? false),
+        };
+        routes.push(route);
+      } else if (isMiddleware) {
+        middlewares.push({
+          ...middlewarePathToPattern(baseRoute),
+          ...module as MiddlewareModule,
+        });
+      } else if (
+        path === "/_app.tsx" || path === "/_app.ts" ||
+        path === "/_app.jsx" || path === "/_app.js"
+      ) {
+        app = module as AppModule;
+      } else if (
+        path === "/_404.tsx" || path === "/_404.ts" ||
+        path === "/_404.jsx" || path === "/_404.js"
+      ) {
+        const { default: component, config } = module as UnknownPageModule;
+        let { handler } = module as UnknownPageModule;
+        if (component && handler === undefined) {
+          handler = (_req, { render }) => render();
+        }
+
+        notFound = {
+          pattern: pathToPattern(baseRoute),
+          url,
+          name,
+          component,
+          handler: handler ?? ((req) => rutt.defaultOtherHandler(req)),
+          csp: Boolean(config?.csp ?? false),
+        };
+      } else if (
+        path === "/_500.tsx" || path === "/_500.ts" ||
+        path === "/_500.jsx" || path === "/_500.js"
+      ) {
+        const { default: component, config } = module as ErrorPageModule;
+        let { handler } = module as ErrorPageModule;
+        if (component && handler === undefined) {
+          handler = (_req, { render }) => render();
+        }
+
+        error = {
+          pattern: pathToPattern(baseRoute),
+          url,
+          name,
+          component,
+          handler: handler ??
+            ((req, ctx) => rutt.defaultErrorHandler(req, ctx, ctx.error)),
+          csp: Boolean(config?.csp ?? false),
+        };
+      }
+    }
+    sortRoutes(routes);
+    sortRoutes(middlewares);
+
+    for (const [self, module] of Object.entries(manifest.islands)) {
+      const url = new URL(self, baseUrl).href;
+      if (!url.startsWith(baseUrl)) {
+        throw new TypeError("Island is not a child of the basepath.");
+      }
+      const path = url.substring(baseUrl.length).substring("islands".length);
+      const baseRoute = path.substring(1, path.length - extname(path).length);
+      const name = sanitizeIslandName(baseRoute);
+      const id = name.toLowerCase();
+      if (typeof module.default !== "function") {
+        throw new TypeError(
+          `Islands must default export a component ('${self}').`,
+        );
+      }
+      islands.push({ id, name, url, component: module.default });
+    }
+
+    const staticFiles: StaticFile[] = [];
+    try {
+      const staticFolder = new URL(
+        opts.staticDir ?? "./static",
+        manifest.baseUrl,
+      );
+      // TODO(lucacasonato): remove the extranious Deno.readDir when
+      // https://github.com/denoland/deno_std/issues/1310 is fixed.
+      for await (const _ of Deno.readDir(fromFileUrl(staticFolder))) {
+        // do nothing
+      }
+      const entires = walk(fromFileUrl(staticFolder), {
+        includeFiles: true,
+        includeDirs: false,
+        followSymlinks: false,
+      });
+      const encoder = new TextEncoder();
+      for await (const entry of entires) {
+        const localUrl = toFileUrl(entry.path);
+        const path = localUrl.href.substring(staticFolder.href.length);
+        const stat = await Deno.stat(localUrl);
+        const contentType = typeByExtension(extname(path)) ??
+          "application/octet-stream";
+        const etag = await crypto.subtle.digest(
+          "SHA-1",
+          encoder.encode(BUILD_ID + path),
+        ).then((hash) =>
+          Array.from(new Uint8Array(hash))
+            .map((byte) => byte.toString(16).padStart(2, "0"))
+            .join("")
+        );
+        const staticFile: StaticFile = {
+          localUrl,
+          path,
+          size: stat.size,
+          contentType,
+          etag,
+        };
+        staticFiles.push(staticFile);
+      }
+    } catch (err) {
+      if (err instanceof Deno.errors.NotFound) {
+        // Do nothing.
+      } else {
+        throw err;
+      }
+    }
+
+    return new ServerContext(
+      routes,
+      islands,
+      staticFiles,
+      opts.render ?? DEFAULT_RENDER_FN,
+      middlewares,
+      app,
+      notFound,
+      error,
+      opts.plugins ?? [],
+      importMapURL,
+      jsxConfig,
+    );
+  }
+
+  /**
+   * This functions returns a request handler that handles all routes required
+   * by fresh, including static files.
+   */
+  handler(): RequestHandler {
+    const inner = rutt.router<RouterState>(...this.#handlers());
+    const withMiddlewares = this.#composeMiddlewares(this.#middlewares);
+    return function handler(req: Request, connInfo: ConnInfo) {
+      // Redirect requests that end with a trailing slash
+      // to their non-trailing slash counterpart.
+      // Ex: /about/ -> /about
+      //const url = new URL(req.url);
+      //if (url.pathname.length > 1 && url.pathname.endsWith("/")) {
+      //  url.pathname = url.pathname.slice(0, -1);
+      //  return Response.redirect(url.href, Status.TemporaryRedirect);
+      //}
+      return withMiddlewares(req, connInfo, inner);
+    };
+  }
+
+  /**
+   * Identify which middlewares should be applied for a request,
+   * chain them and return a handler response
+   */
+  #composeMiddlewares(middlewares: MiddlewareRoute[]) {
+    return (
+      req: Request,
+      connInfo: ConnInfo,
+      inner: rutt.Handler<RouterState>,
+    ) => {
+      // identify middlewares to apply, if any.
+      // middlewares should be already sorted from deepest to shallow layer
+      const mws = selectMiddlewares(req.url, middlewares);
+
+      const handlers: (() => Response | Promise<Response>)[] = [];
+
+      const ctx = {
+        next() {
+          const handler = handlers.shift()!;
+          return Promise.resolve(handler());
+        },
+        ...connInfo,
+        state: {},
+      };
+
+      for (const mw of mws) {
+        if (mw.handler instanceof Array) {
+          for (const handler of mw.handler) {
+            handlers.push(() => handler(req, ctx));
+          }
+        } else {
+          const handler = mw.handler;
+          handlers.push(() => handler(req, ctx));
+        }
+      }
+
+      handlers.push(() => inner(req, ctx));
+
+      const handler = handlers.shift()!;
+      return handler();
+    };
+  }
+
+  /**
+   * This function returns all routes required by fresh as an extended
+   * path-to-regex, to handler mapping.
+   */
+  #handlers(): [
+    rutt.Routes<RouterState>,
+    rutt.Handler<RouterState>,
+    rutt.ErrorHandler<RouterState>,
+  ] {
+    const routes: rutt.Routes<RouterState> = {};
+
+    routes[`${INTERNAL_PREFIX}${JS_PREFIX}/${BUILD_ID}/:path*`] = this
+      .#bundleAssetRoute();
+
+    if (this.#dev) {
+      routes[REFRESH_JS_URL] = () => {
+        const js =
+          `new EventSource("${ALIVE_URL}").addEventListener("message", function listener(e) { if (e.data !== "${BUILD_ID}") { this.removeEventListener('message', listener); location.reload(); } });`;
+        return new Response(js, {
+          headers: {
+            "content-type": "application/javascript; charset=utf-8",
+          },
+        });
+      };
+      routes[ALIVE_URL] = () => {
+        let timerId: number | undefined = undefined;
+        const body = new ReadableStream({
+          start(controller) {
+            controller.enqueue(`data: ${BUILD_ID}\nretry: 100\n\n`);
+            timerId = setInterval(() => {
+              controller.enqueue(`data: ${BUILD_ID}\n\n`);
+            }, 1000);
+          },
+          cancel() {
+            if (timerId !== undefined) {
+              clearInterval(timerId);
+            }
+          },
+        });
+        return new Response(body.pipeThrough(new TextEncoderStream()), {
+          headers: {
+            "content-type": "text/event-stream",
+          },
+        });
+      };
+    }
+
+    // Add the static file routes.
+    // each files has 2 static routes:
+    // - one serving the file at its location without a "cache bursting" mechanism
+    // - one containing the BUILD_ID in the path that can be cached
+    for (
+      const { localUrl, path, size, contentType, etag } of this.#staticFiles
+    ) {
+      const route = sanitizePathToRegex(path);
+      routes[`GET@${route}`] = this.#staticFileHandler(
+        localUrl,
+        size,
+        contentType,
+        etag,
+      );
+    }
+
+    const genRender = <Data = undefined>(
+      route: Route<Data> | UnknownPage | ErrorPage,
+      status: number,
+    ) => {
+      const imports: string[] = [];
+      if (this.#dev) {
+        imports.push(REFRESH_JS_URL);
+      }
+      return (
+        req: Request,
+        params: Record<string, string>,
+        error?: unknown,
+      ) => {
+        return async (data?: Data) => {
+          if (route.component === undefined) {
+            throw new Error("This page does not have a component to render.");
+          }
+
+          if (
+            typeof route.component === "function" &&
+            route.component.constructor.name === "AsyncFunction"
+          ) {
+            throw new Error(
+              "Async components are not supported. Fetch data inside of a route handler, as described in the docs: https://fresh.deno.dev/docs/getting-started/fetching-data",
+            );
+          }
+
+          const preloads: string[] = [];
+          const resp = await internalRender({
+            route,
+            islands: this.#islands,
+            plugins: this.#plugins,
+            app: this.#app,
+            imports,
+            preloads,
+            renderFn: this.#renderFn,
+            url: new URL(req.url),
+            params,
+            data,
+            error,
+          });
+
+          const headers: Record<string, string> = {
+            "content-type": "text/html; charset=utf-8",
+          };
+
+          const [body, csp] = resp;
+          if (csp) {
+            if (this.#dev) {
+              csp.directives.connectSrc = [
+                ...(csp.directives.connectSrc ?? []),
+                SELF,
+              ];
+            }
+            const directive = serializeCSPDirectives(csp.directives);
+            if (csp.reportOnly) {
+              headers["content-security-policy-report-only"] = directive;
+            } else {
+              headers["content-security-policy"] = directive;
+            }
+          }
+          return new Response(body, { status, headers });
+        };
+      };
+    };
+
+    const createUnknownRender = genRender(this.#notFound, Status.NotFound);
+
+    for (const route of this.#routes) {
+      const createRender = genRender(route, Status.OK);
+      if (typeof route.handler === "function") {
+        routes[route.pattern] = (req, ctx, params) =>
+          (route.handler as Handler)(req, {
+            ...ctx,
+            params,
+            render: createRender(req, params),
+            renderNotFound: createUnknownRender(req, {}),
+          });
+      } else {
+        for (const [method, handler] of Object.entries(route.handler)) {
+          routes[`${method}@${route.pattern}`] = (req, ctx, params) =>
+            handler(req, {
+              ...ctx,
+              params,
+              render: createRender(req, params),
+              renderNotFound: createUnknownRender(req, {}),
+            });
+        }
+      }
+    }
+
+    const unknownHandler: rutt.Handler<RouterState> = (
+      req,
+      ctx,
+    ) =>
+      this.#notFound.handler(
+        req,
+        {
+          ...ctx,
+          render: createUnknownRender(req, {}),
+        },
+      );
+
+    const errorHandlerRender = genRender(
+      this.#error,
+      Status.InternalServerError,
+    );
+    const errorHandler: rutt.ErrorHandler<RouterState> = (
+      req,
+      ctx,
+      error,
+    ) => {
+      console.error(
+        "%cAn error occurred during route handling or page rendering.",
+        "color:red",
+        error,
+      );
+      return this.#error.handler(
+        req,
+        {
+          ...ctx,
+          error,
+          render: errorHandlerRender(req, {}, error),
+        },
+      );
+    };
+
+    return [routes, unknownHandler, errorHandler];
+  }
+
+  #staticFileHandler(
+    localUrl: URL,
+    size: number,
+    contentType: string,
+    etag: string,
+  ): rutt.MatchHandler {
+    return async (req: Request) => {
+      const url = new URL(req.url);
+      const key = url.searchParams.get(ASSET_CACHE_BUST_KEY);
+      if (key !== null && BUILD_ID !== key) {
+        url.searchParams.delete(ASSET_CACHE_BUST_KEY);
+        const location = url.pathname + url.search;
+        return new Response("", {
+          status: 307,
+          headers: {
+            "content-type": "text/plain",
+            location,
+          },
+        });
+      }
+      const headers = new Headers({
+        "content-type": contentType,
+        etag,
+        vary: "If-None-Match",
+      });
+      if (key !== null) {
+        headers.set("Cache-Control", "public, max-age=31536000, immutable");
+      }
+      const ifNoneMatch = req.headers.get("if-none-match");
+      if (ifNoneMatch === etag || ifNoneMatch === "W/" + etag) {
+        return new Response(null, { status: 304, headers });
+      } else {
+        const file = await Deno.open(localUrl);
+        headers.set("content-length", String(size));
+        return new Response(file.readable, { headers });
+      }
+    };
+  }
+
+  /**
+   * Returns a router that contains all fresh routes. Should be mounted at
+   * constants.INTERNAL_PREFIX
+   */
+  #bundleAssetRoute = (): rutt.MatchHandler => {
+    return async (_req, _ctx, params) => {
+      const path = `/${params.path}`;
+      const file = await this.#bundler.get(path);
+      let res;
+      if (file) {
+        const headers = new Headers({
+          "Cache-Control": "public, max-age=604800, immutable",
+        });
+
+        const contentType = typeByExtension(extname(path));
+        if (contentType) {
+          headers.set("Content-Type", contentType);
+        }
+
+        res = new Response(file, {
+          status: 200,
+          headers,
+        });
+      }
+
+      return res ?? new Response(null, {
+        status: 404,
+      });
+    };
+  };
+}
+
+const DEFAULT_RENDER_FN: RenderFunction = (_ctx, render) => {
+  render();
+};
+
+const DEFAULT_APP: AppModule = {
+  default: ({ Component }) => h(Component, {}),
+};
+
+const DEFAULT_NOT_FOUND: UnknownPage = {
+  pattern: "",
+  url: "",
+  name: "_404",
+  handler: (req) => rutt.defaultOtherHandler(req),
+  csp: false,
+};
+
+const DEFAULT_ERROR: ErrorPage = {
+  pattern: "",
+  url: "",
+  name: "_500",
+  component: DefaultErrorHandler,
+  handler: (_req, ctx) => ctx.render(),
+  csp: false,
+};
+
+/**
+ * Return a list of middlewares that needs to be applied for request url
+ * @param url the request url
+ * @param middlewares Array of middlewares handlers and their routes as path-to-regexp style
+ */
+export function selectMiddlewares(url: string, middlewares: MiddlewareRoute[]) {
+  const selectedMws: Middleware[] = [];
+  const reqURL = new URL(url);
+
+  for (const { compiledPattern, handler } of middlewares) {
+    const res = compiledPattern.exec(reqURL);
+    if (res) {
+      selectedMws.push({ handler });
+    }
+  }
+
+  return selectedMws;
+}
+
+/**
+ * Sort pages by their relative routing priority, based on the parts in the
+ * route matcher
+ */
+function sortRoutes<T extends { pattern: string }>(routes: T[]) {
+  routes.sort((a, b) => {
+    const partsA = a.pattern.split("/");
+    const partsB = b.pattern.split("/");
+    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+      const partA = partsA[i];
+      const partB = partsB[i];
+      if (partA === undefined) return -1;
+      if (partB === undefined) return 1;
+      if (partA === partB) continue;
+      const priorityA = partA.startsWith(":") ? partA.endsWith("*") ? 0 : 1 : 2;
+      const priorityB = partB.startsWith(":") ? partB.endsWith("*") ? 0 : 1 : 2;
+      return Math.max(Math.min(priorityB - priorityA, 1), -1);
+    }
+    return 0;
+  });
+}
+
+/** Transform a filesystem URL path to a `path-to-regex` style matcher. */
+function pathToPattern(path: string): string {
+  const parts = path.split("/");
+  if (parts[parts.length - 1] === "index") {
+    parts.pop();
+  }
+  const route = "/" + parts
+    .map((part) => {
+      if (part.startsWith("[...") && part.endsWith("]")) {
+        return `:${part.slice(4, part.length - 1)}**`;
+      }
+      if (part.startsWith("[") && part.endsWith("]")) {
+        return `:${part.slice(1, part.length - 1)}`;
+      }
+      return part;
+    })
+    .join("/");
+  return route;
+}
+
+// Normalize a path for use in a URL. Returns null if the path is unparsable.
+export function normalizeURLPath(path: string): string | null {
+  try {
+    const pathUrl = new URL("file:///");
+    pathUrl.pathname = path;
+    return pathUrl.pathname;
+  } catch {
+    return null;
+  }
+}
+
+function sanitizePathToRegex(path: string): string {
+  return path
+    .replaceAll("\*", "\\*")
+    .replaceAll("\+", "\\+")
+    .replaceAll("\?", "\\?")
+    .replaceAll("\{", "\\{")
+    .replaceAll("\}", "\\}")
+    .replaceAll("\(", "\\(")
+    .replaceAll("\)", "\\)")
+    .replaceAll("\:", "\\:");
+}
+
+function toPascalCase(text: string): string {
+  return text.replace(
+    /(^\w|-\w)/g,
+    (substring) => substring.replace(/-/, "").toUpperCase(),
+  );
+}
+
+function sanitizeIslandName(name: string): string {
+  const fileName = name.replace("/", "");
+  return toPascalCase(fileName);
+}
+
+function serializeCSPDirectives(csp: ContentSecurityPolicyDirectives): string {
+  return Object.entries(csp)
+    .filter(([_key, value]) => value !== undefined)
+    .map(([k, v]: [string, string | string[]]) => {
+      // Turn camel case into snake case.
+      const key = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+      const value = Array.isArray(v) ? v.join(" ") : v;
+      return `${key} ${value}`;
+    })
+    .join("; ");
+}
+
+export function middlewarePathToPattern(baseRoute: string) {
+  baseRoute = baseRoute.slice(0, -"_middleware".length);
+  let pattern = pathToPattern(baseRoute);
+  if (pattern.endsWith("/")) {
+    pattern = pattern.slice(0, -1) + "{/*}?";
+  }
+  const compiledPattern = new URLPattern({ pathname: pattern });
+  return { pattern, compiledPattern };
+}

fresh-main/src/server/context_test.ts

@@ -0,0 +1,24 @@
+import { assert } from "../../tests/deps.ts";
+import { middlewarePathToPattern, selectMiddlewares } from "./context.ts";
+import { MiddlewareRoute } from "./types.ts";
+
+Deno.test("selectMiddlewares", () => {
+  const url = "https://fresh.deno.dev/api/abc/def";
+  const middlewaresPath = [
+    // should select
+    "_middleware",
+    "api/_middleware",
+    "api/[id]/_middleware",
+    "api/[id]/[path]/_middleware",
+
+    // should not select
+    "api/xyz/_middleware",
+    "api/[id]/xyz/_middleware",
+    "api/[id]/[path]/foo/_middleware",
+  ];
+  const mwRoutes = middlewaresPath.map((path) =>
+    middlewarePathToPattern(path)
+  ) as MiddlewareRoute[];
+  const mws = selectMiddlewares(url, mwRoutes);
+  assert(mws.length === 4);
+});

fresh-main/src/server/default_error_page.ts

@@ -0,0 +1,58 @@
+import { h } from "preact";
+import { DEBUG } from "./constants.ts";
+import type { ErrorPageProps } from "./types.ts";
+
+export default function DefaultErrorPage(props: ErrorPageProps) {
+  const { error } = props;
+
+  let message = undefined;
+  if (DEBUG) {
+    if (error instanceof Error) {
+      message = error.stack;
+    } else {
+      message = String(error);
+    }
+  }
+
+  return h(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      },
+    },
+    h(
+      "div",
+      {
+        style: {
+          border: "#f3f4f6 2px solid",
+          borderTop: "red 4px solid",
+          background: "#f9fafb",
+          margin: 16,
+          minWidth: "300px",
+          width: "50%",
+        },
+      },
+      h("p", {
+        style: {
+          margin: 0,
+          fontSize: "12pt",
+          padding: 16,
+          fontFamily: "sans-serif",
+        },
+      }, "An error occurred during route handling or page rendering."),
+      message && h("pre", {
+        style: {
+          margin: 0,
+          fontSize: "12pt",
+          overflowY: "auto",
+          padding: 16,
+          paddingTop: 0,
+          fontFamily: "monospace",
+        },
+      }, message),
+    ),
+  );
+}

fresh-main/src/server/deps.ts

@@ -0,0 +1,31 @@
+// -- std --
+export {
+  extname,
+  fromFileUrl,
+  toFileUrl,
+} from "https://deno.land/std@0.150.0/path/mod.ts";
+export { walk } from "https://deno.land/std@0.150.0/fs/walk.ts";
+export { serve } from "https://deno.land/std@0.150.0/http/server.ts";
+export type {
+  ConnInfo,
+  Handler as RequestHandler,
+  ServeInit,
+} from "https://deno.land/std@0.150.0/http/server.ts";
+export { Status } from "https://deno.land/std@0.150.0/http/http_status.ts";
+export {
+  typeByExtension,
+} from "https://deno.land/std@0.150.0/media_types/mod.ts";
+
+// -- rutt --
+export * as rutt from "https://deno.land/x/rutt@0.0.14/mod.ts";
+
+// -- esbuild --
+// @deno-types="https://deno.land/x/esbuild@v0.14.51/mod.d.ts"
+import * as esbuildWasm from "https://deno.land/x/esbuild@v0.14.51/wasm.js";
+import * as esbuildNative from "https://deno.land/x/esbuild@v0.14.51/mod.js";
+// @ts-ignore trust me
+const esbuild: typeof esbuildWasm = Deno.run === undefined
+  ? esbuildWasm
+  : esbuildNative;
+export { esbuild, esbuildWasm as esbuildTypes };
+export { denoPlugin } from "https://deno.land/x/esbuild_deno_loader@0.5.2/mod.ts";

fresh-main/src/server/htmlescape.ts

@@ -0,0 +1,15 @@
+// This utility is based on https://github.com/zertosh/htmlescape
+// License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
+
+const ESCAPE_LOOKUP: { [match: string]: string } = {
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+
+const ESCAPE_REGEX = /[><\u2028\u2029]/g;
+
+export function htmlEscapeJsonString(str: string): string {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}

fresh-main/src/server/htmlescape_test.ts

@@ -0,0 +1,18 @@
+import { htmlEscapeJsonString } from "./htmlescape.ts";
+import { assertEquals } from "../../tests/deps.ts";
+
+Deno.test("with angle brackets should escape", () => {
+  const evilObj = { evil: "<script></script>" };
+  assertEquals(
+    htmlEscapeJsonString(JSON.stringify(evilObj)),
+    '{"evil":"\\u003cscript\\u003e\\u003c/script\\u003e"}',
+  );
+});
+
+Deno.test("with angle brackets should parse back", () => {
+  const evilObj = { evil: "<script></script>" };
+  assertEquals(
+    JSON.parse(htmlEscapeJsonString(JSON.stringify(evilObj))),
+    evilObj,
+  );
+});

fresh-main/src/server/mod.ts

@@ -0,0 +1,72 @@
+import { ServerContext } from "./context.ts";
+import { serve } from "./deps.ts";
+export { Status } from "./deps.ts";
+import {
+  AppModule,
+  ErrorPageModule,
+  IslandModule,
+  MiddlewareModule,
+  RouteModule,
+  StartOptions,
+  UnknownPageModule,
+} from "./types.ts";
+export type {
+  AppProps,
+  ErrorHandler,
+  ErrorHandlerContext,
+  ErrorPageProps,
+  FreshOptions,
+  Handler,
+  HandlerContext,
+  Handlers,
+  MiddlewareHandler,
+  MiddlewareHandlerContext,
+  PageProps,
+  Plugin,
+  PluginRenderResult,
+  PluginRenderScripts,
+  PluginRenderStyleTag,
+  RenderFunction,
+  RouteConfig,
+  StartOptions,
+  UnknownHandler,
+  UnknownHandlerContext,
+  UnknownPageProps,
+} from "./types.ts";
+export { RenderContext } from "./render.ts";
+export type { InnerRenderFunction } from "./render.ts";
+
+export interface Manifest {
+  routes: Record<
+    string,
+    | RouteModule
+    | MiddlewareModule
+    | AppModule
+    | ErrorPageModule
+    | UnknownPageModule
+  >;
+  islands: Record<string, IslandModule>;
+  baseUrl: string;
+  config?: DenoConfig;
+}
+
+export interface DenoConfig {
+  importMap: string;
+  compilerOptions?: {
+    jsx?: string;
+    jsxImportSource?: string;
+  };
+}
+
+export { ServerContext };
+
+export async function start(routes: Manifest, opts: StartOptions = {}) {
+  const ctx = await ServerContext.fromManifest(routes, opts);
+  opts.port ??= 8000;
+  if (opts.experimentalDenoServe === true) {
+    // @ts-ignore as `Deno.serve` is still unstable.
+    await Deno.serve(ctx.handler() as Deno.ServeHandler, opts);
+  } else {
+    await serve(ctx.handler(), opts);
+  }
+}

fresh-main/src/server/render.ts

@@ -0,0 +1,387 @@
+import { renderToString } from "preact-render-to-string";
+import { ComponentChildren, ComponentType, h, options } from "preact";
+import {
+  AppModule,
+  ErrorPage,
+  Island,
+  Plugin,
+  PluginRenderFunctionResult,
+  PluginRenderResult,
+  PluginRenderStyleTag,
+  RenderFunction,
+  Route,
+  UnknownPage,
+} from "./types.ts";
+import { HEAD_CONTEXT } from "../runtime/head.ts";
+import { CSP_CONTEXT, nonce, NONE, UNSAFE_INLINE } from "../runtime/csp.ts";
+import { ContentSecurityPolicy } from "../runtime/csp.ts";
+import { bundleAssetUrl } from "./constants.ts";
+import { assetHashingHook } from "../runtime/utils.ts";
+import { htmlEscapeJsonString } from "./htmlescape.ts";
+
+export interface RenderOptions<Data> {
+  route: Route<Data> | UnknownPage | ErrorPage;
+  islands: Island[];
+  plugins: Plugin[];
+  app: AppModule;
+  imports: string[];
+  preloads: string[];
+  url: URL;
+  params: Record<string, string | string[]>;
+  renderFn: RenderFunction;
+  data?: Data;
+  error?: unknown;
+  lang?: string;
+}
+
+export type InnerRenderFunction = () => string;
+
+export class RenderContext {
+  #id: string;
+  #state: Map<string, unknown> = new Map();
+  #styles: string[] = [];
+  #url: URL;
+  #route: string;
+  #lang: string;
+
+  constructor(id: string, url: URL, route: string, lang: string) {
+    this.#id = id;
+    this.#url = url;
+    this.#route = route;
+    this.#lang = lang;
+  }
+
+  /** A unique ID for this logical JIT render. */
+  get id(): string {
+    return this.#id;
+  }
+
+  /**
+   * State that is persisted between multiple renders with the same render
+   * context. This is useful because one logical JIT render could have multiple
+   * preact render passes due to suspense.
+   */
+  get state(): Map<string, unknown> {
+    return this.#state;
+  }
+
+  /**
+   * All of the CSS style rules that should be inlined into the document.
+   * Adding to this list across multiple renders is supported (even across
+   * suspense!). The CSS rules will always be inserted on the client in the
+   * order specified here.
+   */
+  get styles(): string[] {
+    return this.#styles;
+  }
+
+  /** The URL of the page being rendered. */
+  get url(): URL {
+    return this.#url;
+  }
+
+  /** The route matcher (e.g. /blog/:id) that the request matched for this page
+   * to be rendered. */
+  get route(): string {
+    return this.#route;
+  }
+
+  /** The language of the page being rendered. Defaults to "en". */
+  get lang(): string {
+    return this.#lang;
+  }
+  set lang(lang: string) {
+    this.#lang = lang;
+  }
+}
+
+function defaultCsp() {
+  return {
+    directives: { defaultSrc: [NONE], styleSrc: [UNSAFE_INLINE] },
+    reportOnly: false,
+  };
+}
+
+/**
+ * This function renders out a page. Rendering is synchronous and non streaming.
+ * Suspense boundaries are not supported.
+ */
+export async function render<Data>(
+  opts: RenderOptions<Data>,
+): Promise<[string, ContentSecurityPolicy | undefined]> {
+  const props: Record<string, unknown> = {
+    params: opts.params,
+    url: opts.url,
+    route: opts.route.pattern,
+    data: opts.data,
+  };
+  if (opts.error) {
+    props.error = opts.error;
+  }
+
+  const csp: ContentSecurityPolicy | undefined = opts.route.csp
+    ? defaultCsp()
+    : undefined;
+  const headComponents: ComponentChildren[] = [];
+
+  const vnode = h(CSP_CONTEXT.Provider, {
+    value: csp,
+    children: h(HEAD_CONTEXT.Provider, {
+      value: headComponents,
+      children: h(opts.app.default, {
+        Component() {
+          return h(opts.route.component! as ComponentType<unknown>, props);
+        },
+      }),
+    }),
+  });
+
+  const ctx = new RenderContext(
+    crypto.randomUUID(),
+    opts.url,
+    opts.route.pattern,
+    opts.lang ?? "en",
+  );
+
+  if (csp) {
+    // Clear the csp
+    const newCsp = defaultCsp();
+    csp.directives = newCsp.directives;
+    csp.reportOnly = newCsp.reportOnly;
+  }
+  // Clear the head components
+  headComponents.splice(0, headComponents.length);
+
+  // Setup the interesting VNode types
+  ISLANDS.splice(0, ISLANDS.length, ...opts.islands);
+
+  // Clear the encountered vnodes
+  ENCOUNTERED_ISLANDS.clear();
+
+  // Clear the island props
+  ISLAND_PROPS = [];
+
+  let bodyHtml: string | null = null;
+
+  function realRender(): string {
+    bodyHtml = renderToString(vnode);
+    return bodyHtml;
+  }
+
+  const plugins = opts.plugins.filter((p) => p.render !== null);
+  const renderResults: [Plugin, PluginRenderResult][] = [];
+
+  function render(): PluginRenderFunctionResult {
+    const plugin = plugins.shift();
+    if (plugin) {
+      const res = plugin.render!({ render });
+      if (res === undefined) {
+        throw new Error(
+          `${plugin?.name}'s render hook did not return a PluginRenderResult object.`,
+        );
+      }
+      renderResults.push([plugin, res]);
+    } else {
+      realRender();
+    }
+    if (bodyHtml === null) {
+      throw new Error(
+        `The 'render' function was not called by ${plugin?.name}'s render hook.`,
+      );
+    }
+    return {
+      htmlText: bodyHtml,
+      requiresHydration: ENCOUNTERED_ISLANDS.size > 0,
+    };
+  }
+
+  await opts.renderFn(ctx, () => render().htmlText);
+
+  if (bodyHtml === null) {
+    throw new Error("The `render` function was not called by the renderer.");
+  }
+
+  bodyHtml = bodyHtml as string;
+
+  const imports = opts.imports.map((url) => {
+    const randomNonce = crypto.randomUUID().replace(/-/g, "");
+    if (csp) {
+      csp.directives.scriptSrc = [
+        ...csp.directives.scriptSrc ?? [],
+        nonce(randomNonce),
+      ];
+    }
+    return [url, randomNonce] as const;
+  });
+
+  const state: [islands: unknown[], plugins: unknown[]] = [ISLAND_PROPS, []];
+  const styleTags: PluginRenderStyleTag[] = [];
+
+  let script =
+    `const STATE_COMPONENT = document.getElementById("__FRSH_STATE");const STATE = JSON.parse(STATE_COMPONENT?.textContent ?? "[[],[]]");`;
+
+  for (const [plugin, res] of renderResults) {
+    for (const hydrate of res.scripts ?? []) {
+      const i = state[1].push(hydrate.state) - 1;
+      const randomNonce = crypto.randomUUID().replace(/-/g, "");
+      if (csp) {
+        csp.directives.scriptSrc = [
+          ...csp.directives.scriptSrc ?? [],
+          nonce(randomNonce),
+        ];
+      }
+      const url = bundleAssetUrl(
+        `/plugin-${plugin.name}-${hydrate.entrypoint}.js`,
+      );
+      imports.push([url, randomNonce] as const);
+
+      script += `import p${i} from "${url}";p${i}(STATE[1][${i}]);`;
+    }
+    styleTags.splice(styleTags.length, 0, ...res.styles ?? []);
+  }
+
+  if (ENCOUNTERED_ISLANDS.size > 0) {
+    // Load the main.js script
+    {
+      const randomNonce = crypto.randomUUID().replace(/-/g, "");
+      if (csp) {
+        csp.directives.scriptSrc = [
+          ...csp.directives.scriptSrc ?? [],
+          nonce(randomNonce),
+        ];
+      }
+      const url = bundleAssetUrl("/main.js");
+      imports.push([url, randomNonce] as const);
+    }
+
+    script += `import { revive } from "${bundleAssetUrl("/main.js")}";`;
+
+    // Prepare the inline script that loads and revives the islands
+    let islandRegistry = "";
+    for (const island of ENCOUNTERED_ISLANDS) {
+      const randomNonce = crypto.randomUUID().replace(/-/g, "");
+      if (csp) {
+        csp.directives.scriptSrc = [
+          ...csp.directives.scriptSrc ?? [],
+          nonce(randomNonce),
+        ];
+      }
+      const url = bundleAssetUrl(`/island-${island.id}.js`);
+      imports.push([url, randomNonce] as const);
+      script += `import ${island.name} from "${url}";`;
+      islandRegistry += `${island.id}:${island.name},`;
+    }
+    script += `revive({${islandRegistry}}, STATE[0]);`;
+  }
+
+  if (state[0].length > 0 || state[1].length > 0) {
+    // Append state to the body
+    bodyHtml += `<script id="__FRSH_STATE" type="application/json">${
+      htmlEscapeJsonString(JSON.stringify(state))
+    }</script>`;
+
+    // Append the inline script to the body
+    const randomNonce = crypto.randomUUID().replace(/-/g, "");
+    if (csp) {
+      csp.directives.scriptSrc = [
+        ...csp.directives.scriptSrc ?? [],
+        nonce(randomNonce),
+      ];
+    }
+    bodyHtml +=
+      `<script type="module" nonce="${randomNonce}">${script}</script>`;
+  }
+
+  if (ctx.styles.length > 0) {
+    const node = h("style", {
+      id: "__FRSH_STYLE",
+      dangerouslySetInnerHTML: { __html: ctx.styles.join("\n") },
+    });
+    headComponents.splice(0, 0, node);
+  }
+
+  for (const style of styleTags) {
+    const node = h("style", {
+      id: style.id,
+      dangerouslySetInnerHTML: { __html: style.cssText },
+      media: style.media,
+    });
+    headComponents.splice(0, 0, node);
+  }
+
+  const html = template({
+    bodyHtml,
+    headComponents,
+    imports,
+    preloads: opts.preloads,
+    lang: ctx.lang,
+  });
+
+  return [html, csp];
+}
+
+export interface TemplateOptions {
+  bodyHtml: string;
+  headComponents: ComponentChildren[];
+  imports: (readonly [string, string])[];
+  preloads: string[];
+  lang: string;
+}
+
+export function template(opts: TemplateOptions): string {
+  const page = h(
+    "html",
+    { lang: opts.lang },
+    h(
+      "head",
+      null,
+      h("meta", { charSet: "UTF-8" }),
+      h("meta", {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1.0",
+      }),
+      opts.preloads.map((src) =>
+        h("link", { rel: "modulepreload", href: src })
+      ),
+      opts.imports.map(([src, nonce]) =>
+        h("script", { src: src, nonce: nonce, type: "module" })
+      ),
+      opts.headComponents,
+    ),
+    h("body", { dangerouslySetInnerHTML: { __html: opts.bodyHtml } }),
+  );
+  return "<!DOCTYPE html>" + renderToString(page);
+}
+
+// Set up a preact option hook to track when vnode with custom functions are
+// created.
+const ISLANDS: Island[] = [];
+const ENCOUNTERED_ISLANDS: Set<Island> = new Set([]);
+let ISLAND_PROPS: unknown[] = [];
+const originalHook = options.vnode;
+let ignoreNext = false;
+options.vnode = (vnode) => {
+  assetHashingHook(vnode);
+  const originalType = vnode.type as ComponentType<unknown>;
+  if (typeof vnode.type === "function") {
+    const island = ISLANDS.find((island) => island.component === originalType);
+    if (island) {
+      if (ignoreNext) {
+        ignoreNext = false;
+        return;
+      }
+      ENCOUNTERED_ISLANDS.add(island);
+      vnode.type = (props) => {
+        ignoreNext = true;
+        const child = h(originalType, props);
+        ISLAND_PROPS.push(props);
+        return h(
+          `!--frsh-${island.id}:${ISLAND_PROPS.length - 1}--`,
+          null,
+          child,
+        );
+      };
+    }
+  }
+  if (originalHook) originalHook(vnode);
+};

fresh-main/src/server/render_test.ts

@@ -0,0 +1,14 @@
+import { template } from "./render.ts";
+import { assertStringIncludes } from "../../tests/deps.ts";
+
+Deno.test("check lang", () => {
+  const lang = "fr";
+  const body = template({
+    bodyHtml: "",
+    headComponents: [],
+    imports: [],
+    preloads: [],
+    lang,
+  });
+  assertStringIncludes(body, `<html lang="${lang}">`);
+});

fresh-main/src/server/types.ts

@@ -0,0 +1,306 @@
+import { ComponentType } from "preact";
+import { ConnInfo, rutt, ServeInit } from "./deps.ts";
+import { InnerRenderFunction, RenderContext } from "./render.ts";
+
+// --- APPLICATION CONFIGURATION ---
+
+export type StartOptions = ServeInit & FreshOptions & {
+  /**
+   * UNSTABLE: use the `Deno.serve` API as the underlying HTTP server instead of
+   * the `std/http` API. Do not use this in production.
+   *
+   * This option is experimental and may be removed in a future Fresh release.
+   */
+  experimentalDenoServe?: boolean;
+};
+
+export interface FreshOptions {
+  render?: RenderFunction;
+  plugins?: Plugin[];
+  staticDir?: string;
+}
+
+export type RenderFunction = (
+  ctx: RenderContext,
+  render: InnerRenderFunction,
+) => void | Promise<void>;
+
+/// --- ROUTES ---
+
+// deno-lint-ignore no-explicit-any
+export interface PageProps<T = any> {
+  /** The URL of the request that resulted in this page being rendered. */
+  url: URL;
+
+  /** The route matcher (e.g. /blog/:id) that the request matched for this page
+   * to be rendered. */
+  route: string;
+
+  /**
+   * The parameters that were matched from the route.
+   *
+   * For the `/foo/:bar` route with url `/foo/123`, `params` would be
+   * `{ bar: '123' }`. For a route with no matchers, `params` would be `{}`. For
+   * a wildcard route, like `/foo/:path*` with url `/foo/bar/baz`, `params` would
+   * be `{ path: 'bar/baz' }`.
+   */
+  params: Record<string, string>;
+
+  /**
+   * Additional data passed into `HandlerContext.render`. Defaults to
+   * `undefined`.
+   */
+  data: T;
+}
+
+export interface RouteConfig {
+  /**
+   * A route override for the page. This is useful for pages where the route
+   * can not be expressed through the filesystem routing capabilities.
+   *
+   * The route override must be a path-to-regexp compatible route matcher.
+   */
+  routeOverride?: string;
+
+  /**
+   * If Content-Security-Policy should be enabled for this page. If 'true', a
+   * locked down policy will be used that allows only the scripts and styles
+   * that are generated by fresh. Additional scripts and styles can be added
+   * using the `useCSP` hook.
+   */
+  csp?: boolean;
+}
+
+export interface HandlerContext<Data = unknown, State = Record<string, unknown>>
+  extends ConnInfo {
+  params: Record<string, string>;
+  render: (data?: Data) => Response | Promise<Response>;
+  renderNotFound: () => Response | Promise<Response>;
+  state: State;
+}
+
+// deno-lint-ignore no-explicit-any
+export type Handler<T = any, State = Record<string, unknown>> = (
+  req: Request,
+  ctx: HandlerContext<T, State>,
+) => Response | Promise<Response>;
+
+// deno-lint-ignore no-explicit-any
+export type Handlers<T = any, State = Record<string, unknown>> = {
+  [K in typeof rutt.METHODS[number]]?: Handler<T, State>;
+};
+
+export interface RouteModule {
+  default?: ComponentType<PageProps>;
+  // deno-lint-ignore no-explicit-any
+  handler?: Handler<any, any> | Handlers<any, any>;
+  config?: RouteConfig;
+}
+
+// deno-lint-ignore no-explicit-any
+export interface Route<Data = any> {
+  pattern: string;
+  url: string;
+  name: string;
+  component?: ComponentType<PageProps<Data>>;
+  handler: Handler<Data> | Handlers<Data>;
+  csp: boolean;
+}
+
+// --- APP ---
+
+export interface AppProps {
+  Component: ComponentType<Record<never, never>>;
+}
+
+export interface AppModule {
+  default: ComponentType<AppProps>;
+}
+
+// --- UNKNOWN PAGE ---
+
+export interface UnknownPageProps {
+  /** The URL of the request that resulted in this page being rendered. */
+  url: URL;
+
+  /** The route matcher (e.g. /blog/:id) that the request matched for this page
+   * to be rendered. */
+  route: string;
+}
+
+export interface UnknownHandlerContext<State = Record<string, unknown>>
+  extends ConnInfo {
+  render: () => Response | Promise<Response>;
+  state: State;
+}
+
+export type UnknownHandler = (
+  req: Request,
+  ctx: UnknownHandlerContext,
+) => Response | Promise<Response>;
+
+export interface UnknownPageModule {
+  default?: ComponentType<UnknownPageProps>;
+  handler?: UnknownHandler;
+  config?: RouteConfig;
+}
+
+export interface UnknownPage {
+  pattern: string;
+  url: string;
+  name: string;
+  component?: ComponentType<UnknownPageProps>;
+  handler: UnknownHandler;
+  csp: boolean;
+}
+
+// --- ERROR PAGE ---
+
+export interface ErrorPageProps {
+  /** The URL of the request that resulted in this page being rendered. */
+  url: URL;
+
+  /** The route matcher (e.g. /blog/:id) that the request matched for this page
+   * to be rendered. */
+  pattern: string;
+
+  /** The error that caused the error page to be loaded. */
+  error: unknown;
+}
+
+export interface ErrorHandlerContext<State = Record<string, unknown>>
+  extends ConnInfo {
+  error: unknown;
+  render: () => Response | Promise<Response>;
+  state: State;
+}
+export type ErrorHandler = (
+  req: Request,
+  ctx: ErrorHandlerContext,
+) => Response | Promise<Response>;
+
+export interface ErrorPageModule {
+  default?: ComponentType<ErrorPageProps>;
+  handler?: ErrorHandler;
+  config?: RouteConfig;
+}
+
+export interface ErrorPage {
+  pattern: string;
+  url: string;
+  name: string;
+  component?: ComponentType<ErrorPageProps>;
+  handler: ErrorHandler;
+  csp: boolean;
+}
+
+// --- MIDDLEWARES ---
+
+export interface MiddlewareHandlerContext<State = Record<string, unknown>>
+  extends ConnInfo {
+  next: () => Promise<Response>;
+  state: State;
+}
+
+export interface MiddlewareRoute extends Middleware {
+  /**
+   * path-to-regexp style url path
+   */
+  pattern: string;
+  /**
+   * URLPattern of the route
+   */
+  compiledPattern: URLPattern;
+}
+
+export type MiddlewareHandler<State = Record<string, unknown>> = (
+  req: Request,
+  ctx: MiddlewareHandlerContext<State>,
+) => Response | Promise<Response>;
+
+// deno-lint-ignore no-explicit-any
+export interface MiddlewareModule<State = any> {
+  handler: MiddlewareHandler<State> | MiddlewareHandler<State>[];
+}
+
+export interface Middleware<State = Record<string, unknown>> {
+  handler: MiddlewareHandler<State> | MiddlewareHandler<State>[];
+}
+
+// --- ISLANDS ---
+
+export interface IslandModule {
+  // deno-lint-ignore no-explicit-any
+  default: ComponentType<any>;
+}
+
+export interface Island {
+  id: string;
+  name: string;
+  url: string;
+  component: ComponentType<unknown>;
+}
+
+// --- PLUGINS ---
+
+export interface Plugin {
+  /** The name of the plugin. Must be snake-case. */
+  name: string;
+
+  /** A map of a snake-case names to a import specifiers. The entrypoints
+   * declared here can later be used in the "scripts" option of
+   * `PluginRenderResult` to load the entrypoint's code on the client.
+   */
+  entrypoints?: Record<string, string>;
+
+  /** The render hook is called on the server every time some JSX needs to
+   * be turned into HTML. The render hook needs to call the `ctx.render`
+   * function exactly once.
+   *
+   * The hook can return a `PluginRenderResult` object that can do things like
+   * inject CSS into the page, or load additional JS files on the client.
+   */
+  render?(ctx: PluginRenderContext): PluginRenderResult;
+}
+
+export interface PluginRenderContext {
+  render: PluginRenderFunction;
+}
+
+export interface PluginRenderResult {
+  /** CSS styles to be injected into the page. */
+  styles?: PluginRenderStyleTag[];
+  /** JS scripts to ship to the client. */
+  scripts?: PluginRenderScripts[];
+}
+
+export interface PluginRenderStyleTag {
+  cssText: string;
+  media?: string;
+  id?: string;
+}
+
+export interface PluginRenderScripts {
+  /** The "key" of the entrypoint (as specified in `Plugin.entrypoints`) for the
+   * script that should be loaded. The script must be an ES module that exports
+   * a default function.
+   *
+   * The default function is invoked with the `state` argument specified below.
+   */
+  entrypoint: string;
+  /** The state argument that is passed to the default export invocation of the
+   * entrypoint's default export. The state must be JSON-serializable.
+   */
+  state: unknown;
+}
+
+export type PluginRenderFunction = () => PluginRenderFunctionResult;
+
+export interface PluginRenderFunctionResult {
+  /** The HTML text that was rendered. */
+  htmlText: string;
+  /** If the renderer encountered any islands that require hydration on the
+   * client.
+   */
+  requiresHydration: boolean;
+}

fresh-main/update.ts

@@ -0,0 +1,180 @@
+import { join, Node, parse, Project, resolve } from "./src/dev/deps.ts";
+import { error } from "./src/dev/error.ts";
+import { freshImports, twindImports } from "./src/dev/imports.ts";
+import { collect, ensureMinDenoVersion, generate } from "./src/dev/mod.ts";
+
+ensureMinDenoVersion();
+
+const help = `fresh-update
+
+Update a Fresh project. This updates dependencies and optionally performs code
+mods to update a project's source code to the latest recommended patterns.
+
+To upgrade a projecct in the current directory, run:
+  fresh-update .
+
+USAGE:
+    fresh-update <DIRECTORY>
+`;
+
+const flags = parse(Deno.args, {});
+
+if (flags._.length !== 1) {
+  error(help);
+}
+
+const unresolvedDirectory = Deno.args[0];
+const resolvedDirectory = resolve(unresolvedDirectory);
+
+// Update dependencies in the import map.
+const IMPORT_MAP_PATH = join(resolvedDirectory, "import_map.json");
+let importMapText = await Deno.readTextFile(IMPORT_MAP_PATH);
+const importMap = JSON.parse(importMapText);
+freshImports(importMap.imports);
+if (importMap.imports["twind"]) {
+  twindImports(importMap.imports);
+}
+importMapText = JSON.stringify(importMap, null, 2);
+await Deno.writeTextFile(IMPORT_MAP_PATH, importMapText);
+
+// Code mod for classic JSX -> automatic JSX.
+const JSX_CODEMOD =
+  `This project is using the classic JSX transform. Would you like to update to the
+automatic JSX transform? This will remove the /** @jsx h */ pragma from your
+source code and add the jsx: "react-jsx" compiler option to your deno.json file.`;
+const DENO_JSON_PATH = join(resolvedDirectory, "deno.json");
+let denoJsonText = await Deno.readTextFile(DENO_JSON_PATH);
+const denoJson = JSON.parse(denoJsonText);
+if (denoJson.compilerOptions?.jsx !== "react-jsx" && confirm(JSX_CODEMOD)) {
+  console.log("Updating config file...");
+  denoJson.compilerOptions = denoJson.compilerOptions || {};
+  denoJson.compilerOptions.jsx = "react-jsx";
+  denoJson.compilerOptions.jsxImportSource = "preact";
+  denoJsonText = JSON.stringify(denoJson, null, 2);
+  await Deno.writeTextFile(DENO_JSON_PATH, denoJsonText);
+
+  const project = new Project();
+  const sfs = project.addSourceFilesAtPaths(
+    join(resolvedDirectory, "**", "*.{js,jsx,ts,tsx}"),
+  );
+
+  for (const sf of sfs) {
+    for (const d of sf.getImportDeclarations()) {
+      if (d.getModuleSpecifierValue() !== "preact") continue;
+      for (const n of d.getNamedImports()) {
+        const name = n.getName();
+        if (name === "h" || name === "Fragment") n.remove();
+      }
+      if (
+        d.getNamedImports().length === 0 &&
+        d.getNamespaceImport() === undefined &&
+        d.getDefaultImport() === undefined
+      ) {
+        d.remove();
+      }
+    }
+
+    let text = sf.getFullText();
+    text = text.replaceAll("/** @jsx h */\n", "");
+    text = text.replaceAll("/** @jsxFrag Fragment */\n", "");
+    sf.replaceWithText(text);
+
+    await sf.save();
+  }
+}
+
+// Code mod for class={tw`border`} to class="border".
+const TWIND_CODEMOD =
+  `This project is using an old version of the twind integration. Would you like to
+update to the new twind plugin? This will remove the 'class={tw\`border\`}'
+boilerplate from your source code replace it with the simpler 'class="border"'.`;
+if (importMap.imports["@twind"] && confirm(TWIND_CODEMOD)) {
+  await Deno.remove(join(resolvedDirectory, importMap.imports["@twind"]));
+
+  delete importMap.imports["@twind"];
+  importMapText = JSON.stringify(importMap, null, 2);
+  await Deno.writeTextFile(IMPORT_MAP_PATH, importMapText);
+
+  const MAIN_TS = `/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import { start } from "$fresh/server.ts";
+import manifest from "./fresh.gen.ts";
+
+import twindPlugin from "$fresh/plugins/twind.ts";
+import twindConfig from "./twind.config.ts";
+
+await start(manifest, { plugins: [twindPlugin(twindConfig)] });\n`;
+  const MAIN_TS_PATH = join(resolvedDirectory, "main.ts");
+  await Deno.writeTextFile(MAIN_TS_PATH, MAIN_TS);
+
+  const TWIND_CONFIG_TS = `import { Options } from "$fresh/plugins/twind.ts";
+
+  export default {
+    selfURL: import.meta.url,
+  } as Options;
+  `;
+  await Deno.writeTextFile(
+    join(resolvedDirectory, "twind.config.ts"),
+    TWIND_CONFIG_TS,
+  );
+
+  const project = new Project();
+  const sfs = project.addSourceFilesAtPaths(
+    join(resolvedDirectory, "**", "*.{js,jsx,ts,tsx}"),
+  );
+
+  for (const sf of sfs) {
+    const nodes = sf.forEachDescendantAsArray();
+    for (const n of nodes) {
+      if (!n.wasForgotten() && Node.isJsxAttribute(n)) {
+        const init = n.getInitializer();
+        const name = n.getName();
+        if (
+          Node.isJsxExpression(init) &&
+          (name === "class" || name === "className")
+        ) {
+          const expr = init.getExpression();
+          if (Node.isTaggedTemplateExpression(expr)) {
+            const tag = expr.getTag();
+            if (Node.isIdentifier(tag) && tag.getText() === "tw") {
+              const template = expr.getTemplate();
+              if (Node.isNoSubstitutionTemplateLiteral(template)) {
+                n.setInitializer(`"${template.getLiteralValue()}"`);
+              }
+            }
+          } else if (expr?.getFullText() === `tw(props.class ?? "")`) {
+            n.setInitializer(`{props.class}`);
+          }
+        }
+      }
+    }
+
+    const text = sf.getFullText();
+    const removeTw = [...text.matchAll(/tw[,\s`(]/g)].length === 1;
+
+    for (const d of sf.getImportDeclarations()) {
+      if (d.getModuleSpecifierValue() !== "@twind") continue;
+      for (const n of d.getNamedImports()) {
+        const name = n.getName();
+        if (name === "tw" && removeTw) n.remove();
+      }
+      d.setModuleSpecifier("twind");
+      if (
+        d.getNamedImports().length === 0 &&
+        d.getNamespaceImport() === undefined &&
+        d.getDefaultImport() === undefined
+      ) {
+        d.remove();
+      }
+    }
+
+    await sf.save();
+  }
+}
+
+const manifest = await collect(resolvedDirectory);
+await generate(resolvedDirectory, manifest);

fresh-main/versions.json

@@ -0,0 +1,14 @@
+[
+  "1.1.2",
+  "1.1.1",
+  "1.1.0",
+  "1.0.2",
+  "1.0.1",
+  "1.0.0",
+  "1.0.0-rc.6",
+  "1.0.0-rc.5",
+  "1.0.0-rc.4",
+  "1.0.0-rc.3",
+  "1.0.0-rc.2",
+  "1.0.0-rc.1"
+]

fresh.gen.ts

@@ -5,29 +5,32 @@
 import config from "./deno.json" assert { type: "json" };
 import * as $0 from "./routes/_404.tsx";
 import * as $1 from "./routes/_middleware.ts";
-import * as $2 from "./routes/api/login.ts";
+import * as $2 from "./routes/api/logout.ts";
-import * as $3 from "./routes/api/logout.ts";
+import * as $3 from "./routes/dir/[...path].tsx";
-import * as $4 from "./routes/dir/[...path].tsx";
+import * as $4 from "./routes/dir/_middleware.ts";
-import * as $5 from "./routes/doc/index.tsx";
+import * as $5 from "./routes/doc/_middleware.ts";
-import * as $6 from "./routes/index.tsx";
+import * as $6 from "./routes/doc/index.tsx";
-import * as $7 from "./routes/login.tsx";
+import * as $7 from "./routes/index.tsx";
+import * as $8 from "./routes/login.tsx";
 import * as $$0 from "./islands/ContentRenderer.tsx";
 import * as $$1 from "./islands/Counter.tsx";
 import * as $$2 from "./islands/DirList.tsx";
 import * as $$3 from "./islands/DocSearch.tsx";
 import * as $$4 from "./islands/FileViewer.tsx";
-import * as $$5 from "./islands/UpList.tsx";
+import * as $$5 from "./islands/Login.tsx";
+import * as $$6 from "./islands/UpList.tsx";
 
 const manifest = {
   routes: {
     "./routes/_404.tsx": $0,
     "./routes/_middleware.ts": $1,
-    "./routes/api/login.ts": $2,
+    "./routes/api/logout.ts": $2,
-    "./routes/api/logout.ts": $3,
+    "./routes/dir/[...path].tsx": $3,
-    "./routes/dir/[...path].tsx": $4,
+    "./routes/dir/_middleware.ts": $4,
-    "./routes/doc/index.tsx": $5,
+    "./routes/doc/_middleware.ts": $5,
-    "./routes/index.tsx": $6,
+    "./routes/doc/index.tsx": $6,
-    "./routes/login.tsx": $7,
+    "./routes/index.tsx": $7,
+    "./routes/login.tsx": $8,
   },
   islands: {
     "./islands/ContentRenderer.tsx": $$0,
@@ -35,7 +38,8 @@ const manifest = {
     "./islands/DirList.tsx": $$2,
     "./islands/DocSearch.tsx": $$3,
     "./islands/FileViewer.tsx": $$4,
-    "./islands/UpList.tsx": $$5,
+    "./islands/Login.tsx": $$5,
+    "./islands/UpList.tsx": $$6,
   },
   baseUrl: import.meta.url,
   config,

import_map.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "$fresh/": "https://deno.land/x/fresh@1.1.2/",
+    "$fresh/": "./fresh-main/",
     "preact": "https://esm.sh/preact@10.11.0",
     "preact/": "https://esm.sh/preact@10.11.0/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",

islands/DirList.tsx

@@ -53,7 +53,7 @@ export function DirList(props: DirListProps) {
         </li>
         <ListItem
           key=".."
-          href={`/dir/${encodePath(join(data.path, ".."))}?pretty`}
+          href={`/dir/${encodePath(join(data.path, ".."))}/?pretty`}
           icon="/icon/back.svg"
         >
           ...
@@ -61,7 +61,7 @@ export function DirList(props: DirListProps) {
         {files.map((file) => (
           <ListItem
             key={file.name}
-            href={`/dir/${encodePath(join(data.path, file.name))}?pretty`}
+            href={`/dir/${encodePath(join(data.path, file.name))}${(file.isDirectory ? "/" : "")}?pretty`}
             icon={file.isDirectory
               ? "/icon/folder.svg"
               : extToIcon(extname(file.name))}

islands/Login.tsx

@@ -0,0 +1,52 @@
+export default function LoginForm({
+    redirect = "/",
+    failed = false,
+}: { redirect?: string
+    failed?: boolean }
+) {
+
+    return <div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] 
+    flex flex-col items-center border-gray-500 border-2 rounded-md
+    sm:max-w-screen-sm max-w-screen-md">
+        <img
+            src="/logo.svg"
+            class="w-32 h-32"
+            alt="the fresh logo: a sliced lemon dripping with juice"
+        />
+        <h1 class="text-2xl font-bold">Login</h1>
+        {failed ? <p class="text-red-500">Login failed</p> : null}
+        <form
+            action={"/login?redirect=" + redirect}
+            method="POST"
+            class="flex flex-col gap-2 items-stretch"
+        >
+            <div class="flex gap-2 flex-wrap">
+                <div class="basis-40 flex items-center flex-1">
+                    <label for="username" class="w-20">Username</label>
+                    <input
+                        type="text"
+                        name="username"
+                        id="username"
+                        class="border-b-2 focus:border-green-500 transition-colors flex-1"
+                    />
+                </div>
+                <div class="flex items-center flex-1">
+                    <label for="password" class="w-20">Password</label>
+                    <input
+                        type="password"
+                        name="password"
+                        id="password"
+                        class="border-b-2 focus:border-green-500 transition-colors flex-1"
+                    />
+                </div>
+            </div>
+            <button
+                type="submit"
+                class="bg-gray-400 p-2 rounded
+                            m-auto"
+            >
+                Login
+            </button>
+        </form>
+    </div>
+}

islands/UpList.tsx

@@ -5,7 +5,7 @@ import { encodePath } from "../util/util.ts";
 
 function stairs(path: string) {
   if (path === ".") return [];
-  const uplist = path.split("/");
+  const uplist = path.split("/").filter(x=> x.length > 0);
   let current = ".";
   const stairs = [];
   for (const up of uplist) {
@@ -34,7 +34,7 @@ export default function UpList(props: { path: string }) {
             <span class="p-2">/</span>
             <a
               class="flex flex-wrap p-2 hover:bg-gray-400 rounded-sm"
-              href={`/dir/${encodePath(cur)}?pretty`}
+              href={`/dir/${encodePath(cur)}/?pretty`}
             >
               <img src={asset("/icon/folder.svg")} />
               <span class="ml-1">{up}</span>

routes/_middleware.ts

@@ -1,4 +1,4 @@
-import { MiddlewareHandlerContext } from "$fresh/server.ts";
+import { HandlerContext, MiddlewareHandlerContext, Status } from "$fresh/server.ts";
 import { getCookies } from "http/cookie.ts";
 import { verify } from "djwt";
 import { prepareSecretKey } from "../util/secret.ts";
@@ -7,15 +7,14 @@ export const handler = async (
   req: Request,
   ctx: MiddlewareHandlerContext<Record<string, unknown>>,
 ) => {
-  
   const secret_key = await prepareSecretKey();
   const cookies = getCookies(req.headers);
   const jwt = cookies["auth"];
   try {
     const payload = await verify(jwt, secret_key);
     ctx.state["login"] = payload;
-  } catch (e) {
+  } catch (_) {
     ctx.state["login"] = null;
   }
   return await ctx.next();
-};
+}

routes/api/login.ts

@@ -1,66 +0,0 @@
-import { HandlerContext } from "$fresh/server.ts";
-import { setCookie } from "http/cookie.ts";
-import { Status } from "http/http_status.ts";
-import { connectDB } from "../../src/user/db.ts";
-import { getUser, verifyUser } from "../../src/user/user.ts";
-import { create as createJWT } from "djwt";
-import { prepareSecretKey } from "../../util/secret.ts";
-
-async function POST(req: Request, _ctx: HandlerContext): Promise<Response> {
-  const url = new URL(req.url);
-  const form = await req.formData();
-  const username = form.get("username");
-  const password = form.get("password");
-  if (username && password) {
-    const DB = await connectDB();
-    const user = await getUser(DB, username.toString());
-    if (user) {
-      const SECRET_KEY = await prepareSecretKey();
-      if (await verifyUser(user, password.toString())) {
-        const headers = new Headers();
-        const jwt = await createJWT({ alg: "HS512", typ: "JWT" }, {
-          username: user.name,
-        }, SECRET_KEY);
-        setCookie(headers, {
-          name: "auth",
-          value: jwt,
-          httpOnly: true,
-          sameSite: "Strict",
-          maxAge: 60 * 60 * 24 * 7,
-          domain: url.hostname,
-          path: "/",
-          secure: url.protocol === "https:",
-        });
-
-        headers.set("Location", "/");
-        return new Response(null, {
-          status: Status.SeeOther, // See Other
-          headers: headers,
-        });
-      }
-    }
-  }
-
-  return new Response(
-    `<!DOCTYPE html><html>
-<head> <title> Login Failed </title> </head>
-<body>
-    <h1> Login Failed </h1>
-    <p> <a href="/"> Back to Home </a> </p>
-    <script>
-        document.location.href = "/login";
-    </script>
-</body>
-</html>`,
-    {
-      headers: {
-        "Content-Type": "text/html",
-      },
-      status: Status.Forbidden,
-    },
-  );
-}
-
-export const handler = {
-  POST,
-};

routes/dir/[...path].tsx

@@ -10,6 +10,7 @@ import DirList, { EntryInfo } from "../../islands/DirList.tsx";
 import FileViewer from "../../islands/FileViewer.tsx";
 import RenderView from "../../islands/ContentRenderer.tsx";
 import { serveFile } from "http/file_server.ts";
+import { Status } from "http/http_status.ts";
 
 type DirProps = {
   type: "dir";
@@ -23,11 +24,17 @@ type FileProps = {
   stat: Deno.FileInfo;
 };
 
-type DirOrFileProps = DirProps | FileProps;
+export type DirOrFileProps = DirProps | FileProps;
 
-async function renderFile(req: Request, path: string) {
+type RenderOption = {
+  fileInfo?: Deno.FileInfo;
+}
+
+async function renderFile(req: Request, path: string, { fileInfo }: RenderOption = {}) {
   try {
-    const fileInfo = await Deno.stat(path);
+    if (!fileInfo) {
+      fileInfo = await Deno.stat(path);
+    }
     if (fileInfo.isDirectory) {
       // if index.html exists, serve it.
       // otherwise, serve a directory listing.
@@ -61,7 +68,6 @@ async function renderFile(req: Request, path: string) {
         }
       }
     }
-
     const res = await serveFile(req, path, {
       fileInfo,
     });
@@ -76,11 +82,13 @@ async function renderFile(req: Request, path: string) {
   }
 }
 
-async function renderPage(_req: Request, path: string, ctx: HandlerContext) {
+async function renderPage(_req: Request, path: string, ctx: HandlerContext, { fileInfo }: RenderOption = {}) {
   try {
-    const stat = await Deno.stat(path);
+    if (!fileInfo) {
+      fileInfo = await Deno.stat(path);
+    }
 
-    if (stat.isDirectory) {
+    if (fileInfo.isDirectory) {
       const filesIter = await Deno.readDir(path);
       const files: EntryInfo[] = [];
       for await (const file of filesIter) {
@@ -93,14 +101,14 @@ async function renderPage(_req: Request, path: string, ctx: HandlerContext) {
       }
       return await ctx.render({
         type: "dir",
-        stat,
+        fileInfo,
         files,
         path,
       });
     } else {
       return await ctx.render({
         type: "file",
-        stat,
+        fileInfo,
         path,
       });
     }
@@ -113,31 +121,22 @@ async function renderPage(_req: Request, path: string, ctx: HandlerContext) {
 }
 
 async function GET(req: Request, ctx: HandlerContext): Promise<Response> {
-  
-  const authRequired = Deno.env.get("AUTH_REQUIRED") === "true";
-  if (authRequired) {
-    const login = ctx.state["login"];
-    //console.log("login", login);
-    if (!login) {
-      return new Response(null, {
-        status: 302,
-        headers: {
-          "Location": "/login",
-          "content-type": "text/plain",
-          "Access-Control-Allow-Origin": "*",
-          "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
-          "Access-Control-Allow-Headers":
-            "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
-        },
-      });
-    }
-  }
   const url = new URL(req.url);
   const path = removePrefixFromPathname(decodePath(url.pathname), "/dir");
+  const fileInfo = await Deno.stat(path);
+  if (fileInfo.isFile && url.pathname.endsWith("/")) {
+    url.pathname = url.pathname.slice(0, -1);
+    return Response.redirect(url, Status.TemporaryRedirect);
+  }
+  if ((!fileInfo.isFile) && (!url.pathname.endsWith("/"))) {
+    url.pathname += "/";
+    return Response.redirect(url, Status.TemporaryRedirect);
+  }
+
   if (url.searchParams.has("pretty")) {
-    return await renderPage(req, path, ctx);
+    return await renderPage(req, path, ctx, { fileInfo });
   } else {
-    return await renderFile(req, path);
+    return await renderFile(req, path, { fileInfo });
   }
 }
 

routes/dir/_middleware.ts

@@ -0,0 +1 @@
+export { handler } from "../../src/login_middleware.ts";

routes/doc/_middleware.ts

@@ -0,0 +1 @@
+export { handler } from "../../src/login_middleware.ts";

routes/doc/index.tsx

@@ -1,26 +1,14 @@
 import { Head } from "$fresh/runtime.ts";
-import { HandlerContext, Handlers, PageProps } from "$fresh/server.ts";
+import { HandlerContext, Handlers, PageProps, Status } from "$fresh/server.ts";
 import DocSearch from "../../islands/DocSearch.tsx";
 import { Doc } from "../../src/collect.ts";
 import { docCollector } from "../../src/store/doc.ts";
 
 async function GET(req: Request, ctx: HandlerContext): Promise<Response> {
-  const authRequired = Deno.env.get("AUTH_REQUIRED") === "true";
+  const url = new URL(req.url);
-  if (authRequired) {
+  if (url.pathname.endsWith("/")) {
-    const login = ctx.state["login"];
+    url.pathname = url.pathname.slice(0, -1);
-    if (!login) {
+    return Response.redirect(url, Status.TemporaryRedirect);
-      return new Response(null, {
-        status: 302,
-        headers: {
-          "Location": "/login",
-          "content-type": "text/plain",
-          "Access-Control-Allow-Origin": "*",
-          "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
-          "Access-Control-Allow-Headers":
-            "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
-        },
-      });
-    }
   }
   const docs = docCollector.getDocs();
   return await ctx.render({ docs });

routes/login.tsx

@@ -1,54 +1,91 @@
 import { Head } from "$fresh/runtime.ts";
+import { HandlerContext, PageProps } from "$fresh/server.ts";
+import { setCookie } from "http/cookie.ts";
+import { Status } from "http/http_status.ts";
+import { connectDB } from "../src/user/db.ts";
+import { getUser, verifyUser } from "../src/user/user.ts";
+import { create as createJWT } from "djwt";
+import { prepareSecretKey } from "../util/secret.ts";
+import LoginForm from "../islands/Login.tsx";
 
-export default function Login() {
+async function GET(_req: Request, ctx: HandlerContext){
+  return await ctx.render();
+}
+
+async function POST(req: Request, _ctx: HandlerContext): Promise<Response> {
+  const url = new URL(req.url);
+  const form = await req.formData();
+  const username = form.get("username");
+  const password = form.get("password");
+  if (username && password) {
+    const DB = await connectDB();
+    const user = await getUser(DB, username.toString());
+    if (user) {
+      const SECRET_KEY = await prepareSecretKey();
+      if (await verifyUser(user, password.toString())) {
+        const headers = new Headers();
+        const jwt = await createJWT({ alg: "HS512", typ: "JWT" }, {
+          username: user.name,
+        }, SECRET_KEY);
+        setCookie(headers, {
+          name: "auth",
+          value: jwt,
+          httpOnly: true,
+          sameSite: "Strict",
+          maxAge: 60 * 60 * 24 * 7,
+          domain: url.hostname,
+          path: "/",
+          secure: url.protocol === "https:",
+        });
+        
+        let redirect = "/";
+        if (url.searchParams.has("redirect")) {
+          redirect = url.searchParams.get("redirect")!;
+        }
+        headers.set("Location", redirect);
+        return new Response(null, {
+          status: Status.SeeOther, // See Other
+          headers: headers,
+        });
+      }
+    }
+  }
+
+  return new Response(
+    `<!DOCTYPE html><html>
+<head> <title> Login Failed </title> </head>
+<body>
+    <h1> Login Failed </h1>
+    <p> <a href="/"> Back to Home </a> </p>
+    <script>
+        document.location.href = "/login?failed=true&redirect=${url.searchParams.get("redirect")}";
+    </script>
+</body>
+</html>`,
+    {
+      headers: {
+        "Content-Type": "text/html",
+      },
+      status: Status.Unauthorized,
+    },
+  );
+}
+
+export const handler = {
+  GET,
+  POST,
+};
+
+export default function Login(props: PageProps) {
+  const redirect = props.url.searchParams.get("redirect");
+  const failed = props.url.searchParams.get("failed") === "true";
   return (
     <>
       <Head>
         <title>Simple file server - Login</title>
       </Head>
       <div class="">
-        <div class="p-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] 
+          <LoginForm redirect={redirect ?? "/"} failed={failed}/>
-                    flex flex-col items-center border-gray-500 border-2 rounded-md
-                    sm:max-w-screen-sm max-w-screen-md">
-          <img
-            src="/logo.svg"
-            class="w-32 h-32"
-            alt="the fresh logo: a sliced lemon dripping with juice"
-          />
-          <form
-            action="/api/login"
-            method="POST"
-            class="flex flex-col gap-2 items-stretch"
-          >
-            <div class="flex gap-2 flex-wrap">
-              <div class="basis-40 flex items-center flex-1">
-                <label for="username" class="w-20">Username</label>
-                <input
-                  type="text"
-                  name="username"
-                  id="username"
-                  class="border-b-2 focus:border-green-500 transition-colors flex-1"
-                />
-              </div>
-              <div class="flex items-center flex-1">
-                <label for="password" class="w-20">Password</label>
-                <input
-                  type="password"
-                  name="password"
-                  id="password"
-                  class="border-b-2 focus:border-green-500 transition-colors flex-1"
-                />
-              </div>
-            </div>
-            <button
-              type="submit"
-              class="bg-gray-400 p-2 rounded
-                            m-auto"
-            >
-              Login
-            </button>
-          </form>
-        </div>
       </div>
     </>
   );

src/login_middleware.ts

@@ -0,0 +1,20 @@
+import { MiddlewareHandlerContext, Status } from "$fresh/server.ts";
+
+export const handler = async (
+    req: Request,
+    ctx: MiddlewareHandlerContext<Record<string, unknown>>,
+  ) => {
+    const authRequired = Deno.env.get("AUTH_REQUIRED") === "true";
+    if (authRequired) {
+        const login = ctx.state["login"];
+        if (!login) {
+            return new Response(null, {
+                status: Status.Found,
+                headers: {
+                  Location: `/login?redirect=${encodeURIComponent(req.url)}`,
+                }
+            });
+        }
+    }
+    return await ctx.next();
+}