feat: optimize marko deps

src/esbuild-plugin.ts

@@ -0,0 +1,96 @@
+import fs from "fs";
+import path from "path";
+import type * as esbuild from "esbuild";
+import type * as Compiler from "@marko/compiler";
+
+const markoErrorRegExp = /^(.+?)(?:\((\d+)(?:\s*,\s*(\d+))?\))?: (.*)$/gm;
+
+export default function esbuildPlugin(
+  compiler: typeof Compiler,
+  config: Compiler.Config
+): esbuild.Plugin {
+  return {
+    name: "marko",
+    async setup(build) {
+      const { platform = "browser" } = build.initialOptions;
+      const virtualFiles = new Map<string, { code: string; map?: unknown }>();
+      const finalConfig: Compiler.Config = {
+        ...config,
+        output: platform === "browser" ? "dom" : "html",
+        resolveVirtualDependency(from, dep) {
+          virtualFiles.set(path.join(from, "..", dep.virtualPath), dep);
+          return dep.virtualPath;
+        },
+      };
+
+      if (platform === "browser") {
+        build.onResolve({ filter: /\.marko\./ }, (args) => {
+          return {
+            namespace: "marko:virtual",
+            path: path.resolve(args.resolveDir, args.path),
+          };
+        });
+
+        build.onLoad(
+          { filter: /\.marko\./, namespace: "marko:virtual" },
+          (args) => ({
+            contents: virtualFiles.get(args.path)!.code,
+            loader: path.extname(args.path).slice(1) as esbuild.Loader,
+          })
+        );
+
+        build.onResolve({ filter: /\.marko$/ }, async (args) => ({
+          namespace: "file",
+          path: path.resolve(args.resolveDir, args.path),
+        }));
+      }
+
+      build.onLoad({ filter: /\.marko$/, namespace: "file" }, async (args) => {
+        try {
+          const { code, meta } = await compiler.compileFile(
+            args.path,
+            finalConfig
+          );
+
+          return {
+            loader: "js",
+            contents: code,
+            watchFiles: meta.watchFiles,
+            resolveDir: path.dirname(args.path),
+          };
+        } catch (e) {
+          const text = (e as Error).message;
+          const errors: esbuild.PartialMessage[] = [];
+          let match: RegExpExecArray | null;
+          let lines: string[] | undefined;
+
+          while ((match = markoErrorRegExp.exec(text))) {
+            const [, file, rawLine, rawCol, text] = match;
+            const line = parseInt(rawLine, 10) || 1;
+            const column = parseInt(rawCol, 10) || 1;
+            lines ||= (await fs.promises.readFile(args.path, "utf-8")).split(
+              /\n/g
+            );
+            errors.push({
+              text,
+              location: {
+                file,
+                line,
+                column,
+                lineText: ` ${lines[line - 1]}`,
+              },
+            });
+          }
+
+          if (!errors.length) {
+            errors.push({ text });
+          }
+
+          return {
+            errors,
+          };
+        }
+      });
+    },
+  };
+}

src/index.ts

@@ -7,12 +7,14 @@ import path from "path";
 import crypto from "crypto";
 import anyMatch from "anymatch";
 import { pathToFileURL, fileURLToPath } from "url";
+
 import getServerEntryTemplate from "./server-entry-template";
 import {
   generateInputDoc,
   generateDocManifest,
   DocManifest,
 } from "./manifest-generator";
+import esbuildPlugin from "./esbuild-plugin";
 
 export interface Options {
   // Defaults to true, set to false to disable automatic component discovery and hydration.
@@ -50,6 +52,7 @@ const virtualFileQuery = "?marko-virtual";
 const markoExt = ".marko";
 const htmlExt = ".html";
 const resolveOpts = { skipSelf: true };
+const cache = new Map<string, Compiler.CompileResult>();
 const thisFile =
   typeof __filename === "string" ? __filename : fileURLToPath(import.meta.url);
 let tempDir: Promise<string> | undefined;
@@ -59,10 +62,10 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
   const { runtimeId, linked = true } = opts;
 
   const baseConfig: Compiler.Config = {
+    cache,
     runtimeId,
     sourceMaps: true,
     writeVersionComment: false,
-    cache: new Map<string, Compiler.CompileResult>(),
     babelConfig: {
       ...opts.babelConfig,
       caller: {
@@ -74,38 +77,45 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
         ...opts.babelConfig?.caller,
       },
     },
-    resolveVirtualDependency(from, dep) {
-      const query = `${virtualFileQuery}&id=${encodeURIComponent(
-        dep.virtualPath
-      )}`;
-      const id = normalizePath(from) + query;
-
-      if (devServer) {
-        const prev = virtualFiles.get(id);
-        if (prev && prev.code !== dep.code) {
-          devServer.moduleGraph.invalidateModule(
-            devServer.moduleGraph.getModuleById(id)!
-          );
-        }
+  };
+
+  const resolveViteVirtualDep: Compiler.Config["resolveVirtualDependency"] = (
+    from,
+    dep
+  ) => {
+    const query = `${virtualFileQuery}&id=${encodeURIComponent(
+      dep.virtualPath
+    )}`;
+    const id = normalizePath(from) + query;
+
+    if (devServer) {
+      const prev = virtualFiles.get(id);
+      if (prev && prev.code !== dep.code) {
+        devServer.moduleGraph.invalidateModule(
+          devServer.moduleGraph.getModuleById(id)!
+        );
       }
+    }
 
-      virtualFiles.set(id, dep);
-      return `./${path.basename(from) + query}`;
-    },
+    virtualFiles.set(id, dep);
+    return `./${path.basename(from) + query}`;
   };
 
   const ssrConfig: Compiler.Config = {
     ...baseConfig,
+    resolveVirtualDependency: resolveViteVirtualDep,
     output: "html",
   };
 
   const domConfig: Compiler.Config = {
     ...baseConfig,
+    resolveVirtualDependency: resolveViteVirtualDep,
     output: "dom",
   };
 
   const hydrateConfig: Compiler.Config = {
-    ...domConfig,
+    ...baseConfig,
+    resolveVirtualDependency: resolveViteVirtualDep,
     output: "hydrate",
   };
 
@@ -170,7 +180,6 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
             }
           }
         }
-
         const domDeps = Array.from(
           new Set(
             compiler
@@ -181,36 +190,32 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
 
         const optimizeDeps = (config.optimizeDeps ??= {});
         optimizeDeps.include ??= [];
-        optimizeDeps.include = optimizeDeps.include.concat(
-          domDeps.filter((dep) => path.extname(dep) !== markoExt)
-        );
-
-        optimizeDeps.exclude ??= [];
-        optimizeDeps.exclude = optimizeDeps.exclude.concat(
-          domDeps.filter((dep) => path.extname(dep) === markoExt)
-        );
+        optimizeDeps.include = optimizeDeps.include.concat(domDeps);
 
         if (!isBuild) {
           const serverDeps = Array.from(
-            new Set(
-              compiler
-                .getRuntimeEntryFiles("html", opts.translator)
-                .concat(taglibDeps)
-            )
+            new Set(compiler.getRuntimeEntryFiles("html", opts.translator))
           );
           const ssr = ((config as any).ssr ??= {});
           ssr.external ??= [];
           ssr.external = ssr.external.concat(serverDeps);
-          // Vite cannot handle commonjs modules, which many Marko component libraries
-          // use in conjunction with the `.marko` files. To support this
-          // we tell Vite to ignore all `.marko` files in node_modules for the server.
-          // and instead use the require hook.
-          (await import("@marko/compiler/register.js")).default({
-            ...ssrConfig,
-            sourceMaps: "inline",
-            modules: "cjs",
-          });
         }
+        return {
+          ...config,
+          optimizeDeps: {
+            ...config.optimizeDeps,
+            extensions: [
+              ".marko",
+              ...((config.optimizeDeps as any)?.extensions || []),
+            ],
+            esbuildOptions: {
+              plugins: [
+                esbuildPlugin(compiler, baseConfig),
+                ...(config.optimizeDeps?.esbuildOptions?.plugins || []),
+              ],
+            },
+          },
+        };
       },
       configureServer(_server) {
         ssrConfig.hot = domConfig.hot = true;
@@ -415,7 +420,6 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
 
           transformWatchFiles.set(id, meta.watchFiles!);
         }
-
         return { code, map };
       },
     },