Merge branch 'main' into rename-FreshContext-req-to-request

timreichen · web-flow · commit a6496a70a0ba · 2025-08-28T23:09:04.000+02:00
diff --git a/packages/init/src/init.ts b/packages/init/src/init.ts
@@ -66,6 +66,7 @@ export async function initProject(
     force?: boolean | null;
     tailwind?: boolean | null;
     vscode?: boolean | null;
+    vite?: boolean | null;
   } = {},
 ): Promise<void> {
   console.log();
@@ -108,6 +109,8 @@ export async function initProject(
     }
   }
 
+  const useVite = flags.vite ?? false;
+
   const useDocker = flags.docker;
   let useTailwind = flags.tailwind || false;
   if (flags.tailwind == null) {
@@ -320,7 +323,13 @@ ${GRADIENT_CSS}`;
 ${GRADIENT_CSS}`;
 
   const cssStyles = useTailwind ? TAILWIND_CSS : NO_TAILWIND_STYLES;
-  await writeFile("static/styles.css", cssStyles);
+
+  if (useVite) {
+    await writeFile("assets/styles.css", cssStyles);
+    await writeFile("client.ts", `import "./assets/styles.css";`);
+  } else {
+    await writeFile("static/styles.css", cssStyles);
+  }
   // deno-fmt-ignore
   const STATIC_LOGO =
     `<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -458,8 +467,9 @@ export default define.page(function App({ Component }) {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>${path.basename(projectDir)}</title>
-        <link rel="stylesheet" href="/styles.css" />
+        <title>${path.basename(projectDir)}</title>${
+    useVite ? "" : `\n        <link rel="stylesheet" href="/styles.css" />`
+  }
       </head>
       <body>
         <Component />
@@ -510,7 +520,9 @@ if (Deno.args.includes("build")) {
 } else {
   await builder.listen(() => import("./main.ts"));
 }`;
-  await writeFile("dev.ts", DEV_TS);
+  if (!useVite) {
+    await writeFile("dev.ts", DEV_TS);
+  }
 
   const denoJson = {
     nodeModulesDir: "auto",
@@ -555,7 +567,19 @@ if (Deno.args.includes("build")) {
     },
   };
 
-  if (useTailwind) {
+  if (useVite) {
+    denoJson.tasks.dev = "vite";
+    denoJson.tasks.build = "vite build";
+
+    denoJson.imports["@fresh/plugin-vite"] = "jsr:@fresh/plugin-vite@^0.9.5";
+    denoJson.imports["vite"] = "npm:vite@^7.1.3";
+
+    if (useTailwind) {
+      denoJson.imports["tailwindcss"] =
+        `npm:tailwindcss@^${TAILWINDCSS_VERSION}`;
+      denoJson.imports["@tailwindcss/vite"] = `npm:@tailwindcss/vite@^4.1.12`;
+    }
+  } else if (useTailwind) {
     denoJson.imports["tailwindcss"] = `npm:tailwindcss@^${TAILWINDCSS_VERSION}`;
     denoJson.imports["@fresh/plugin-tailwind"] =
       `jsr:@fresh/plugin-tailwind@^${FRESH_TAILWIND_VERSION}`;
@@ -566,6 +590,21 @@ if (Deno.args.includes("build")) {
 
   await writeFile("deno.json", denoJson);
 
+  if (useVite) {
+    let viteConfig = `import { defineConfig } from "vite";
+import { fresh } from "@fresh/plugin-vite";\n`;
+
+    if (useTailwind) {
+      viteConfig += `import tailwindcss from "@tailwindcss/vite";\n`;
+    }
+
+    viteConfig += `\nexport default defineConfig({
+  plugins: [fresh()${useTailwind ? ", tailwindcss()" : ""}],
+});`;
+
+    await writeFile("vite.config.ts", viteConfig);
+  }
+
   const README_MD = `# Fresh project
 
 Your new Fresh project is ready to go. You can follow the Fresh "Getting
diff --git a/packages/init/src/init_test.ts b/packages/init/src/init_test.ts
@@ -51,6 +51,20 @@ async function expectProjectFile(dir: string, pathname: string) {
   }
 }
 
+async function expectNotProjectFile(dir: string, pathname: string) {
+  const filePath = path.join(dir, ...pathname.split("/").filter(Boolean));
+  try {
+    const stat = await Deno.stat(filePath);
+    if (stat.isFile) {
+      throw new Error(`A project file but expected it not to be: ${filePath}`);
+    }
+  } catch (err) {
+    if (!(err instanceof Deno.errors.NotFound)) {
+      throw err;
+    }
+  }
+}
+
 async function readProjectFile(dir: string, pathname: string): Promise<string> {
   const filePath = path.join(dir, ...pathname.split("/").filter(Boolean));
   const content = await Deno.readTextFile(filePath);
@@ -247,3 +261,61 @@ Deno.test("init - errors on missing build cache in prod", async () => {
 
   expect(stderr).toMatch(/Module not found/);
 });
+
+// There is a peerDependency issue with links
+Deno.test.ignore("init - vite dev server", async () => {
+  await using tmp = await withTmpDir();
+  const dir = tmp.dir;
+  using _promptStub = stubPrompt(".");
+  using _confirmStub = stubConfirm();
+  await initProject(dir, [], { vite: true });
+
+  await expectProjectFile(dir, "vite.config.ts");
+  await expectNotProjectFile(dir, "dev.ts");
+
+  await patchProject(dir);
+
+  await withChildProcessServer(
+    { cwd: dir, args: ["task", "dev"] },
+    async (address) => {
+      await withBrowser(async (page) => {
+        await page.goto(address);
+        await page.locator("#decrement").click();
+        await waitForText(page, "button + p", "2");
+      });
+    },
+  );
+});
+
+// There is a peerDependency issue with links
+Deno.test.ignore("init - vite build", async () => {
+  await using tmp = await withTmpDir();
+  const dir = tmp.dir;
+  using _promptStub = stubPrompt(".");
+  using _confirmStub = stubConfirm();
+  await initProject(dir, [], { vite: true });
+
+  await expectProjectFile(dir, "vite.config.ts");
+
+  await patchProject(dir);
+
+  // Build
+  await new Deno.Command(Deno.execPath(), {
+    args: ["task", "build"],
+    stdin: "null",
+    stdout: "piped",
+    stderr: "piped",
+    cwd: dir,
+  }).output();
+
+  await withChildProcessServer(
+    { cwd: dir, env: { PORT: "0" }, args: ["task", "start"] },
+    async (address) => {
+      await withBrowser(async (page) => {
+        await page.goto(address);
+        await page.locator("button").click();
+        await waitForText(page, "button + p", "2");
+      });
+    },
+  );
+});
diff --git a/packages/init/src/mod.ts b/packages/init/src/mod.ts
@@ -3,12 +3,13 @@ import { initProject } from "./init.ts";
 import { InitError } from "./init.ts";
 
 const flags = parseArgs(Deno.args, {
-  boolean: ["force", "tailwind", "vscode", "docker", "help"],
+  boolean: ["force", "tailwind", "vscode", "docker", "help", "vite"],
   default: {
     force: null,
     tailwind: null,
     vscode: null,
     docker: null,
+    vite: null,
   },
   alias: {
     help: "h",
diff --git a/packages/plugin-vite/src/plugins/server_snapshot.ts b/packages/plugin-vite/src/plugins/server_snapshot.ts
@@ -14,7 +14,11 @@ import {
   specToName,
   UniqueNamer,
 } from "fresh/internal-dev";
-import { pathWithRoot, type ResolvedFreshViteConfig } from "../utils.ts";
+import {
+  JS_REG,
+  pathWithRoot,
+  type ResolvedFreshViteConfig,
+} from "../utils.ts";
 import * as path from "@std/path";
 import { getBuildId } from "./build_id.ts";
 
@@ -268,7 +272,12 @@ export function serverSnapshot(options: ResolvedFreshViteConfig): Plugin[] {
     name: "fresh:island-resolver",
     resolveId(id) {
       if (id.startsWith("fresh-island::")) {
-        const name = id.slice("fresh-island::".length);
+        let name = id.slice("fresh-island::".length);
+
+        if (JS_REG.test(name)) {
+          name = name.slice(0, name.lastIndexOf("."));
+        }
+
         const spec = islandSpecByName.get(name);
         if (spec !== undefined) return spec;
       }
