WIP

Author: marvinhagemeister

deno.lock

@@ -1,12 +1,11 @@
-import * as mime from "mime-db";
+import mime from "mime-db";
 import { useEffect, useState } from "preact/hooks";
 
 export function MimeIsland() {
-  // deno-lint-ignore no-console
-  console.log(mime);
-
   const [ready, setReady] = useState(false);
   useEffect(() => {
+    // deno-lint-ignore no-console
+    console.log(mime.default);
     setReady(true);
   }, []);
 

packages/plugin-vite/demo/islands/tests/Mime.tsx

@@ -20,6 +20,7 @@
   },
   "imports": {
     "@babel/core": "npm:@babel/core@^7.28.0",
+    "@babel/preset-react": "npm:@babel/preset-react@^7.27.1",
     "@deno/loader": "jsr:@deno/loader@^0.3.2",
     "@prefresh/vite": "npm:@prefresh/vite@^2.4.8",
     "@types/babel__core": "npm:@types/babel__core@^7.20.5",

packages/plugin-vite/deno.json

@@ -42,12 +42,6 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
           optimizeDeps: {
             include: [
               "preact",
-              "preact/compat",
-              "preact/debug",
-              "preact/devtools",
-              "preact/hooks",
-              "preact/jsx-runtime",
-              "preact/jsx-dev-runtime",
               "@preact/signals",
               "@preact/signals-core",
             ],

packages/plugin-vite/src/mod.ts

@@ -8,24 +8,38 @@ import {
 import * as path from "@std/path";
 import * as babel from "@babel/core";
 import { npmWorkaround } from "./patches/npm_workaround.ts";
+import babelReact from "@babel/preset-react";
 
 interface DenoState {
   type: RequestedModuleType;
 }
 
 export function deno(): Plugin {
-  let loader: Loader;
+  let ssrLoader: Loader;
+  let browserLoader: Loader;
+
+  let isDev = false;
+
+  let optimizeDeps: string[] | undefined;
 
   return {
     name: "deno",
-    async configResolved() {
+    config(_, env) {
+      isDev = env.command === "serve";
+    },
+    async configResolved(cfg) {
+      optimizeDeps = cfg.optimizeDeps.include;
       // TODO: Pass conditions
-      loader = await new Workspace({}).createLoader();
+      ssrLoader = await new Workspace({}).createLoader();
+      browserLoader = await new Workspace({ preserveJsx: true })
+        .createLoader();
     },
     applyToEnvironment() {
       return true;
     },
     async resolveId(id, importer, options) {
+      const loader = options?.ssr ? ssrLoader : browserLoader;
+
       // Workaround until upstream PR is merged and released,
       // see: https://github.com/vitejs/vite/pull/20558
       if (id.startsWith("deno-npm:")) {
@@ -36,6 +50,18 @@ export function deno(): Plugin {
         ? parseDenoSpecifier(importer).specifier
         : importer;
 
+      if (optimizeDeps) {
+        const match = id.match(/^npm:(@[^/]+\/[^/@]+|[^/@]+)/);
+        if (match !== null) {
+          if (optimizeDeps.includes(match[1])) {
+            return await this.resolve(match[1], importer, options);
+          }
+        }
+      }
+      if (id.includes("@preact/signals")) {
+        return this.resolve(`@preact/signals`, importer, options);
+      }
+
       try {
         // Ensure we're passing a valid importer that Deno understands
         const denoImporter = importer && !importer.startsWith("\0")
@@ -78,7 +104,9 @@ export function deno(): Plugin {
         // ignore
       }
     },
-    async load(id) {
+    async load(id, options) {
+      const loader = options?.ssr ? ssrLoader : browserLoader;
+
       if (isDenoSpecifier(id)) {
         const { type, specifier } = parseDenoSpecifier(id);
 
@@ -110,8 +138,36 @@ export function deno(): Plugin {
         return null;
       }
 
+      const code = new TextDecoder().decode(result.code);
+
+      if (!options?.ssr) {
+        if (url.pathname.endsWith(".jsx") || url.pathname.endsWith(".tsx")) {
+          const result = babel.transform(code, {
+            sourceMaps: "inline",
+            filename: id,
+            presets: [
+              [
+                babelReact,
+                {
+                  runtime: "automatic",
+                  importSource: "preact",
+                  development: isDev,
+                },
+              ],
+            ],
+          });
+
+          if (result !== null && result.code) {
+            return {
+              code: result.code,
+              map: result.map,
+            };
+          }
+        }
+      }
+
       return {
-        code: new TextDecoder().decode(result.code),
+        code,
       };
     },
     async transform(_, id, options) {
@@ -130,12 +186,15 @@ export function deno(): Plugin {
         actualId = path.toFileUrl(actualId).href;
       }
 
-      const resolved = await loader.resolve(
+      const resolved = await ssrLoader.resolve(
         actualId,
         undefined,
         ResolutionMode.Import,
       );
-      const result = await loader.load(resolved, RequestedModuleType.Default);
+      const result = await ssrLoader.load(
+        resolved,
+        RequestedModuleType.Default,
+      );
       if (result.kind === "external") {
         return;
       }

packages/plugin-vite/src/plugins/deno.ts

@@ -3,18 +3,36 @@ import * as babel from "@babel/core";
 import { npmWorkaround } from "./patches/npm_workaround.ts";
 import { cjsPlugin } from "./patches/commonjs.ts";
 import { jsxComments } from "./patches/jsx_comment.ts";
+import babelReact from "@babel/preset-react";
 
 export function patches(): Plugin {
+  let isDev = false;
+
   return {
     name: "fresh:patches",
+    config(_, env) {
+      isDev = env.command === "serve";
+    },
     applyToEnvironment() {
       return true;
     },
-    transform(code, id) {
+    transform(code, id, options) {
+      if (code.includes("__commonJS")) return;
+
+      const presets = [];
+      if (!options?.ssr) {
+        presets.push([babelReact, {
+          runtime: "automatic",
+          importSource: "preact",
+          development: isDev,
+        }]);
+      }
+
       const res = babel.transformSync(code, {
         filename: id,
         babelrc: false,
         plugins: [npmWorkaround, cjsPlugin, jsxComments],
+        presets,
       });
 
       if (res?.code) {