Merge branch 'main' into plugins_static_files

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
         uses: crate-ci/typos@master
 
       - name: Cache dependencies and Chrome
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ${{ matrix.cache_path }}deps

.vscode/import_map.json

@@ -17,8 +17,8 @@
     "$marked-mangle": "https://esm.sh/[email protected]",
     "$fresh-testing-library": "https://deno.land/x/[email protected]/mod.ts",
     "$fresh-testing-library/": "https://deno.land/x/[email protected]/",
-    "tailwindcss": "npm:tailwindcss@3.3.5",
-    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
-    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
+    "tailwindcss": "npm:tailwindcss@3.4.1",
+    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"
   }
 }

deno.json

@@ -19,5 +19,8 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
+  },
+  "lint": {
+    "rules": { "exclude": ["no-window"] }
   }
 }

docs/latest/concepts/ahead-of-time-builds.md

@@ -81,7 +81,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Deno
         uses: denoland/setup-deno@v1

docs/latest/examples/migrating-to-tailwind.md

@@ -87,9 +87,9 @@ export default {
       "preact/": "https://esm.sh/[email protected]/",
 -     "twind": "https://esm.sh/[email protected]",
 -     "twind/": "https://esm.sh/[email protected]/",
-+     "tailwindcss": "npm:tailwindcss@3.3.5",
-+     "tailwindcss/": "npm:/tailwindcss@3.3.5/",
-+     "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
++     "tailwindcss": "npm:tailwindcss@3.4.1",
++     "tailwindcss/": "npm:/tailwindcss@3.4.1/",
++     "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"
     }
   }
 ```

docs/latest/introduction/index.md

@@ -24,9 +24,9 @@ necessary transpilation of TypeScript or JSX to plain JavaScript is done on the
 fly, just when it is needed. This allows for insanely fast iteration loops and
 very very fast deployments.
 
-Fresh projects can be deployed manually to any platform with `deno`, but it is
-intended to be deployed to an edge runtime like [Deno Deploy][deno-deploy] for
-the best experience.
+Fresh projects can be deployed manually to any platform with [Deno][deno], but
+it is intended to be deployed to an edge runtime like [Deno Deploy][deno-deploy]
+for the best experience.
 
 Some stand out features:
 
@@ -41,4 +41,5 @@ Some stand out features:
 - File-system routing à la Next.js
 
 [preact]: https://preactjs.com
+[deno]: https://deno.com
 [deno-deploy]: https://deno.com/deploy

init.ts

@@ -6,6 +6,7 @@ import {
   dotenvImports,
   freshImports,
   tailwindImports,
+  twindImports,
 } from "./src/dev/imports.ts";
 
 ensureMinDenoVersion();
@@ -26,22 +27,26 @@ USAGE:
 
 OPTIONS:
     --force   Overwrite existing files
-    --tailwind   Setup project to use 'tailwind' for styling
-    --vscode  Setup project for VSCode
+    --tailwind   Use Tailwind for styling
+    --twind   Use Twind for styling
+    --vscode  Setup project for VS Code
     --docker  Setup Project to use Docker
 `;
 
 const CONFIRM_EMPTY_MESSAGE =
   "The target directory is not empty (files could get overwritten). Do you want to continue anyway?";
 
-const USE_TAILWIND_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", "tailwind", "vscode", "docker", "help"],
-  default: { "force": null, "tailwind": null, "vscode": null, "docker": null },
+  boolean: ["force", "tailwind", "twind", "vscode", "docker", "help"],
+  default: {
+    force: null,
+    tailwind: null,
+    twind: null,
+    vscode: null,
+    docker: null,
+  },
   alias: {
     help: "h",
   },
@@ -52,6 +57,10 @@ if (flags.help) {
   Deno.exit(0);
 }
 
+if (flags.tailwind && flags.twind) {
+  error("Cannot use Tailwind and Twind at the same time.");
+}
+
 console.log();
 console.log(
   colors.bgRgb8(
@@ -90,9 +99,25 @@ try {
 }
 console.log("%cLet's set up your new Fresh project.\n", "font-weight: bold");
 
-const useTailwind = flags.tailwind === null
-  ? confirm(USE_TAILWIND_MESSAGE)
-  : flags.tailwind;
+let useTailwind = flags.tailwind || false;
+let useTwind = flags.twind || false;
+
+if (flags.tailwind == null && flags.twind == null) {
+  if (confirm("Do you want to use a styling library?")) {
+    console.log();
+    console.log("1. Tailwind");
+    console.log("2. Twind");
+    switch (
+      (prompt("Which styling library do you want to use? [1]") || "1").trim()
+    ) {
+      case "2":
+        useTwind = true;
+        break;
+      default:
+        useTailwind = true;
+    }
+  }
+}
 
 const useVSCode = flags.vscode === null
   ? confirm(USE_VSCODE_MESSAGE)
@@ -322,6 +347,24 @@ if (useTailwind) {
   );
 }
 
+const TWIND_CONFIG_TS = `import { defineConfig, Preset } from "@twind/core";
+import presetTailwind from "@twind/preset-tailwind";
+import presetAutoprefix from "@twind/preset-autoprefix";
+
+export default {
+  ...defineConfig({
+    presets: [presetTailwind() as Preset, presetAutoprefix() as Preset],
+  }),
+  selfURL: import.meta.url,
+};
+`;
+if (useTwind) {
+  await Deno.writeTextFile(
+    join(resolvedDirectory, "twind.config.ts"),
+    TWIND_CONFIG_TS,
+  );
+}
+
 const NO_TAILWIND_STYLES = `
 *,
 *::before,
@@ -461,7 +504,7 @@ export default function App({ Component }: PageProps) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>${basename(resolvedDirectory)}</title>
-        <link rel="stylesheet" href="/styles.css" />
+        ${useTwind ? "" : `<link rel="stylesheet" href="/styles.css" />`}
       </head>
       <body>
         <Component />
@@ -481,10 +524,12 @@ const TAILWIND_CSS = `@tailwind base;
 @tailwind utilities;`;
 
 const cssStyles = useTailwind ? TAILWIND_CSS : NO_TAILWIND_STYLES;
-await Deno.writeTextFile(
-  join(resolvedDirectory, "static", "styles.css"),
-  cssStyles,
-);
+if (!useTwind) {
+  await Deno.writeTextFile(
+    join(resolvedDirectory, "static", "styles.css"),
+    cssStyles,
+  );
+}
 
 const STATIC_LOGO =
   `<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -515,10 +560,19 @@ if (useTailwind) {
   FRESH_CONFIG_TS += `import tailwind from "$fresh/plugins/tailwind.ts";
 `;
 }
+if (useTwind) {
+  FRESH_CONFIG_TS += `import twind from "$fresh/plugins/twindv1.ts";
+import twindConfig from "./twind.config.ts";
+`;
+}
 
 FRESH_CONFIG_TS += `
 export default defineConfig({${
-  useTailwind ? `\n  plugins: [tailwind()],\n` : ""
+  useTailwind
+    ? `\n  plugins: [tailwind()],\n`
+    : useTwind
+    ? `\n  plugins: [twind(twindConfig)],\n`
+    : ""
 }});
 `;
 const CONFIG_TS_PATH = join(resolvedDirectory, "fresh.config.ts");
@@ -592,6 +646,9 @@ if (useTailwind) {
   // deno-lint-ignore no-explicit-any
   (config as any).nodeModulesDir = true;
 }
+if (useTwind) {
+  twindImports(config.imports);
+}
 dotenvImports(config.imports);
 
 const DENO_CONFIG = JSON.stringify(config, null, 2) + "\n";

plugins/tailwind.ts

@@ -1,5 +1,5 @@
 import { Plugin, PluginMiddleware, ResolvedFreshConfig } from "../server.ts";
-import type postcss from "npm:[email protected].31";
+import type postcss from "npm:[email protected].33";
 import * as path from "https://deno.land/[email protected]/path/mod.ts";
 import { walk } from "https://deno.land/[email protected]/fs/walk.ts";
 import { TailwindPluginOptions } from "./tailwind/types.ts";

plugins/tailwind/compiler.ts

@@ -1,8 +1,8 @@
 import { ResolvedFreshConfig } from "../../server.ts";
 import tailwindCss, { Config } from "tailwindcss";
-import postcss from "npm:[email protected].31";
-import cssnano from "npm:[email protected].1";
-import autoprefixer from "npm:[email protected].16";
+import postcss from "npm:[email protected].33";
+import cssnano from "npm:[email protected].3";
+import autoprefixer from "npm:[email protected].17";
 import * as path from "https://deno.land/[email protected]/path/mod.ts";
 import { TailwindPluginOptions } from "./types.ts";
 

src/build/deps.ts

@@ -6,5 +6,5 @@ export {
   toFileUrl,
 } from "https://deno.land/[email protected]/path/mod.ts";
 export { escape as regexpEscape } from "https://deno.land/[email protected]/regexp/escape.ts";
-export { denoPlugins } from "https://deno.land/x/[email protected].3/mod.ts";
+export { denoPlugins } from "https://deno.land/x/[email protected].5/mod.ts";
 export { assertEquals } from "https://deno.land/[email protected]/assert/mod.ts";

src/dev/imports.ts

@@ -1,9 +1,11 @@
 export const RECOMMENDED_PREACT_VERSION = "10.19.2";
 export const RECOMMENDED_PREACT_SIGNALS_VERSION = "1.2.1";
 export const RECOMMENDED_PREACT_SIGNALS_CORE_VERSION = "1.5.0";
-export const RECOMMENDED_TWIND_VERSION = "0.16.19";
+export const RECOMMENDED_TWIND_CORE_VERSION = "1.1.3";
+export const RECOMMENDED_TWIND_PRESET_AUTOPREFIX_VERSION = "1.0.7";
+export const RECOMMENDED_TWIND_PRESET_TAILWIND_VERSION = "1.1.4";
 export const RECOMMENDED_STD_VERSION = "0.211.0";
-export const RECOMMENDED_TAILIWIND_VERSION = "3.3.5";
+export const RECOMMENDED_TAILIWIND_VERSION = "3.4.1";
 
 export function freshImports(imports: Record<string, string>) {
   imports["$fresh/"] = new URL("../../", import.meta.url).href;
@@ -16,8 +18,12 @@ export function freshImports(imports: Record<string, string>) {
 }
 
 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}/`;
+  imports["@twind/core"] =
+    `https://esm.sh/@twind/core@${RECOMMENDED_TWIND_CORE_VERSION}`;
+  imports["@twind/preset-tailwind"] =
+    `https://esm.sh/@twind/preset-tailwind@${RECOMMENDED_TWIND_PRESET_TAILWIND_VERSION}/`;
+  imports["@twind/preset-autoprefix"] =
+    `https://esm.sh/@twind/preset-autoprefix@${RECOMMENDED_TWIND_PRESET_AUTOPREFIX_VERSION}/`;
 }
 
 export function tailwindImports(imports: Record<string, string>) {
@@ -50,7 +56,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Deno
         uses: denoland/setup-deno@v1

src/runtime/deserializer.ts

@@ -1,6 +1,3 @@
-// Run `deno run -A npm:esbuild --minify src/runtime/deserializer.ts` to minify
-// this file. It is embedded into src/server/deserializer_code.ts.
-
 export const KEY = "_f";
 
 interface Signal<T> {
@@ -18,6 +15,20 @@ function b64decode(b64: string): Uint8Array {
   return bytes;
 }
 
+const INVALID_REFERENCE_ERROR = "Invalid reference";
+
+function getPropertyFromPath(o: object, path: string[]): object {
+  for (const key of path) {
+    if (key === null) continue;
+    if (key !== "value" && !Object.hasOwn(o, key)) {
+      throw new Error(INVALID_REFERENCE_ERROR);
+    }
+    // deno-lint-ignore no-explicit-any
+    o = (o as any)[key];
+  }
+  return o;
+}
+
 export function deserialize(
   str: string,
   signal?: <T>(a: T) => Signal<T>,
@@ -44,19 +55,20 @@ export function deserialize(
     }
     return value;
   }
-
   const { v, r } = JSON.parse(str, reviver);
   const references = (r ?? []) as [string[], ...string[][]][];
   for (const [targetPath, ...refPaths] of references) {
-    const target = targetPath.reduce((o, k) => k === null ? o : o[k], v);
+    const target = getPropertyFromPath(v, targetPath);
     for (const refPath of refPaths) {
-      if (refPath.length === 0) throw new Error("Invalid reference");
+      if (refPath.length === 0) throw new Error(INVALID_REFERENCE_ERROR);
       // set the reference to the target object
-      const parent = refPath.slice(0, -1).reduce(
-        (o, k) => k === null ? o : o[k],
-        v,
-      );
-      parent[refPath[refPath.length - 1]!] = target;
+      const parent = getPropertyFromPath(v, refPath.slice(0, -1));
+      const key = refPath[refPath.length - 1]!;
+      if (key !== "value" && !Object.hasOwn(parent, key)) {
+        throw new Error(INVALID_REFERENCE_ERROR);
+      }
+      // deno-lint-ignore no-explicit-any
+      (parent as any)[key] = target;
     }
   }
   return v;