Inject __ALEPH_MODULE_LOADERS in build command

Author: ije

server/build.ts

@@ -8,7 +8,7 @@ import { builtinModuleExts, toLocalPath } from "../lib/helpers.ts";
 import { parseHtmlLinks } from "./html.ts";
 import log from "../lib/log.ts";
 import util from "../lib/util.ts";
-import { getAlephPkgUri, loadImportMap, loadJSXConfig } from "../server/config.ts";
+import { getAlephPkgUri, initModuleLoaders, loadImportMap, loadJSXConfig } from "../server/config.ts";
 import { DependencyGraph } from "../server/graph.ts";
 import { initRoutes } from "../server/routing.ts";
 import type { AlephConfig, BuildPlatform, FetchHandler } from "../server/types.ts";
@@ -24,6 +24,7 @@ export async function build(serverEntry?: string) {
   const alephPkgUri = getAlephPkgUri();
   const importMap = await loadImportMap();
   const jsxCofig = await loadJSXConfig(importMap);
+  const moduleLoaders = await initModuleLoaders(importMap);
   const config: AlephConfig | undefined = Reflect.get(globalThis, "__ALEPH_CONFIG");
   const platform = config?.build?.platform ?? "deno";
   const outputDir = join(workingDir, config?.build?.outputDir ?? "dist");
@@ -56,6 +57,20 @@ export async function build(serverEntry?: string) {
     `import graph from "./server_dependency_graph.js";`,
     `globalThis.serverDependencyGraph = new DependencyGraph(graph.modules);`,
     routeFiles.length > 0 && `import { revive } from "${alephPkgUri}/server/routing.ts";`,
+    moduleLoaders.length > 0 &&
+    `import { globToRegExp } from "https://deno.land/[email protected]/path/mod.ts";const moduleLoaders = []; globalThis["__ALEPH_MODULE_LOADERS"] = moduleLoaders;`,
+    moduleLoaders.length > 0 &&
+    moduleLoaders.map(({ meta }, idx) => `
+      import loader_${idx} from ${JSON.stringify(meta.src)};
+      const reg = globToRegExp(${JSON.stringify(meta.glob)});
+      moduleLoaders.push({
+        meta: ${JSON.stringify(meta)},
+        test: (pathname) => {
+          return reg.test(pathname) && loader_${idx}.test(pathname);
+        },
+        load: (pathname, env) => loader_${idx}.load(pathname, env),
+      })
+    `).join("\n"),
     ...routeFiles.map(([filename, exportNames], idx) => {
       const hasDefaultExport = exportNames.includes("default");
       const hasDataExport = exportNames.includes("data");
@@ -77,11 +92,11 @@ export async function build(serverEntry?: string) {
           ].filter(Boolean).join(", ")
         } });`,
       ];
-    }).flat().filter(Boolean),
+    }),
     serverEntry && `import "http://localhost:${port}/${basename(serverEntry)}";`,
     !serverEntry && `import { serve } from "${alephPkgUri}/server/mode.ts";`,
     !serverEntry && `serve();`,
-  ].filter(Boolean).join("\n");
+  ].flat().filter(Boolean).join("\n");
 
   // since esbuild doesn't support jsx automic transform, we need to manually import jsx runtime
   let jsxShimFile: string | null = null;
@@ -130,13 +145,8 @@ export async function build(serverEntry?: string) {
       name: "aleph-esbuild-plugin",
       setup(build) {
         build.onResolve({ filter: /.*/ }, (args) => {
-          let importUrl = args.path;
-          if (importUrl in importMap.imports) {
-            importUrl = importMap.imports[importUrl];
-          }
-
-          const isRemote = util.isLikelyHttpURL(importUrl);
-          const [path] = util.splitBy(isRemote ? importUrl : util.trimPrefix(importUrl, "file://"), "#");
+          const isRemote = util.isLikelyHttpURL(args.path);
+          const [path] = util.splitBy(isRemote ? args.path : util.trimPrefix(args.path, "file://"), "#");
 
           if (args.kind === "dynamic-import") {
             return { path, external: true };
@@ -158,6 +168,12 @@ export async function build(serverEntry?: string) {
             return { path, external: true };
           }
 
+          if (path.startsWith("./") || path.startsWith("../")) {
+            return {
+              path: join(dirname(args.importer), path),
+            };
+          }
+
           return { path };
         });
         build.onLoad({ filter: /.*/, namespace: "http" }, async (args) => {

server/config.ts

@@ -159,7 +159,10 @@ export async function loadImportMap(): Promise<ImportMap> {
 }
 
 export async function initModuleLoaders(importMap: ImportMap): Promise<ModuleLoader[]> {
-  const loaders: ModuleLoader[] = [];
+  const loaders: ModuleLoader[] = Reflect.get(globalThis, "__ALEPH_MODULE_LOADERS") || [];
+  if (loaders.length > 0) {
+    return loaders;
+  }
   if (Deno.env.get("ALEPH_CLI")) {
     for (const key in importMap.imports) {
       if (/^\*\.[a-z0-9]+$/i.test(key)) {
@@ -177,8 +180,10 @@ export async function initModuleLoaders(importMap: ImportMap): Promise<ModuleLoa
             typeof loader === "object" && loader !== null &&
             typeof loader.test === "function" && typeof loader.load === "function"
           ) {
-            const reg = globToRegExp("/**/" + key);
+            const glob = "/**/" + key;
+            const reg = globToRegExp(glob);
             loaders.push({
+              meta: { src, glob },
               test: (pathname: string) => {
                 return reg.test(pathname) && loader.test(pathname);
               },
@@ -189,6 +194,7 @@ export async function initModuleLoaders(importMap: ImportMap): Promise<ModuleLoa
       }
     }
   }
+  Reflect.set(globalThis, "__ALEPH_MODULE_LOADERS", loaders);
   return loaders;
 }
 

server/mod.ts

@@ -1,6 +1,5 @@
 import { serve as stdServe, type ServeInit, serveTls } from "https://deno.land/[email protected]/http/server.ts";
 import { readableStreamFromReader } from "https://deno.land/[email protected]/streams/conversion.ts";
-import { builtinModuleExts } from "../lib/helpers.ts";
 import log, { LevelName } from "../lib/log.ts";
 import { getContentType } from "../lib/mime.ts";
 import type { Routes } from "../lib/route.ts";
@@ -50,38 +49,39 @@ export const serve = (options: ServerOptions = {}) => {
     }
 
     // transform client modules
-    if (
-      pathname.startsWith("/-/") ||
-      (builtinModuleExts.find((ext) => pathname.endsWith(`.${ext}`)) && !pathname.endsWith(".d.ts")) ||
-      pathname.endsWith(".css")
-    ) {
+    if (clientModuleTransformer.test(pathname)) {
       const [buildHash, jsxConfig, importMap] = await Promise.all([
         buildHashPromise,
         jsxConfigPromise,
         importMapPromise,
       ]);
       return clientModuleTransformer.fetch(req, {
-        isDev,
         importMap,
         jsxConfig,
         buildHash,
         buildTarget: config?.build?.target,
+        isDev,
       });
     }
 
     // use loader to load modules
     const moduleLoaders = await moduleLoadersPromise;
     const loader = moduleLoaders.find((loader) => loader.test(pathname));
     if (loader) {
-      const [buildHash, importMap] = await Promise.all([buildHashPromise, importMapPromise]);
+      const [buildHash, jsxConfig, importMap] = await Promise.all([
+        buildHashPromise,
+        jsxConfigPromise,
+        importMapPromise,
+      ]);
       try {
         const loaded = await loader.load(pathname, { isDev, importMap });
         return clientModuleTransformer.fetch(req, {
-          isDev,
-          importMap,
           loaded,
+          importMap,
+          jsxConfig,
           buildHash,
           buildTarget: config?.build?.target,
+          isDev,
         });
       } catch (err) {
         if (!(err instanceof Deno.errors.NotFound)) {

server/serve_dist.ts

@@ -1,8 +1,14 @@
 import { readableStreamFromReader } from "https://deno.land/[email protected]/streams/conversion.ts";
 import log from "../lib/log.ts";
+import { builtinModuleExts } from "../lib/helpers.ts";
 import type { AlephConfig } from "./types.ts";
 
 export default {
+  test: (pathname: string) => {
+    return pathname.startsWith("/-/") ||
+      (builtinModuleExts.find((ext) => pathname.endsWith(`.${ext}`)) && !pathname.endsWith(".d.ts")) ||
+      pathname.endsWith(".css");
+  },
   fetch: async (req: Request): Promise<Response> => {
     const config: AlephConfig | undefined = Reflect.get(globalThis, "__ALEPH_CONFIG");
     const outputDir = config?.build?.outputDir ?? "dist";

server/transformer.ts

@@ -2,7 +2,7 @@ import MagicString from "https://esm.sh/[email protected]";
 import { parseDeps, transform } from "../compiler/mod.ts";
 import type { TransformOptions, TransformResult } from "../compiler/types.ts";
 import { readCode } from "../lib/fs.ts";
-import { restoreUrl, toLocalPath } from "../lib/helpers.ts";
+import { builtinModuleExts, restoreUrl, toLocalPath } from "../lib/helpers.ts";
 import log from "../lib/log.ts";
 import util from "../lib/util.ts";
 import { bundleCSS } from "./bundle_css.ts";
@@ -21,6 +21,11 @@ export type TransformerOptions = {
 };
 
 export default {
+  test: (pathname: string) => {
+    return pathname.startsWith("/-/") ||
+      (builtinModuleExts.find((ext) => pathname.endsWith(`.${ext}`)) && !pathname.endsWith(".d.ts")) ||
+      pathname.endsWith(".css");
+  },
   fetch: async (req: Request, options: TransformerOptions): Promise<Response> => {
     const { isDev, buildHash, loaded } = options;
     const { pathname, searchParams, search } = new URL(req.url);

server/types.ts

@@ -48,6 +48,7 @@ export type ImportMap = {
 };
 
 export type ModuleLoader = {
+  readonly meta: { src: string; glob: string };
   test(pathname: string): boolean;
   load(pathname: string, env: ModuleLoaderEnv): Promise<ModuleLoaderContent> | ModuleLoaderContent;
 };