document custom loader

Author: avivkeller

apps/site/tests/loader.mjs

@@ -1,33 +1,34 @@
-const mockBaseUrl = new URL('mocks/', import.meta.url);
-
+// Map of module specifier prefixes to their corresponding mock files
 const mockEntries = [
-  ['next-intl', 'next-intl.jsx'],
-  ['next-router', 'next-router.mjs'],
+  ['next-intl', new URL('mocks/next-intl.jsx', import.meta.url).href],
+  ['next-router', new URL('mocks/next-intl.jsx', import.meta.url).href],
 ];
 
+/**
+ * Returns the corresponding mock file for a given module specifier, if matched.
+ *
+ * @param {string} specifier - Module name or path being imported.
+ * @returns {string|null} - File name of the mock module or null if no match.
+ */
 function getMockFile(specifier) {
-  for (let i = 0; i < mockEntries.length; i++) {
-    const [prefix, file] = mockEntries[i];
-    const len = prefix.length;
-    if (
-      specifier === prefix ||
-      (specifier.startsWith(prefix) && specifier[len] === '/')
-    ) {
-      return file;
-    }
-  }
-  return null;
+  const entry = mockEntries.find(
+    ([prefix]) => specifier === prefix || specifier.startsWith(prefix + '/')
+  );
+  return entry?.[1] ?? null;
 }
 
 /**
+ * Node.js custom module resolution hook to inject mock modules.
+ *
  * @type {import('node:module').ResolveHook}
  */
 export async function resolve(specifier, ctx, nextResolve) {
   const mockFile = getMockFile(specifier);
+
   if (mockFile) {
     return {
       format: 'module',
-      url: new URL(mockFile, mockBaseUrl).href,
+      url: mockFile,
       shortCircuit: true,
     };
   }

tests/loader.mjs

@@ -1,16 +1,23 @@
 import { extname } from 'path';
 
 const requiredCode = `import * as React from 'react';`;
-const mockBaseUrl = new URL('mocks/', import.meta.url);
+const css = new URL('mocks/css.mjs', import.meta.url).href;
 
 /**
+ *
+ * This hook intercepts module resolution, allowing us to handle
+ * CSS/SCSS files in a custom way. Instead of actually loading the CSS,
+ * we short-circuit the resolution and return a mock module.
+ *
  * @type {import('node:module').ResolveHook}
  */
 export async function resolve(specifier, ctx, nextResolve) {
-  if (specifier.endsWith('.css')) {
+  const ext = extname(specifier);
+  if (ext === '.css' || ext === '.scss') {
+    // For CSS/SCSS, return the mock CSS module and skip default resolution.
     return {
       format: 'module',
-      url: new URL('css.mjs', mockBaseUrl).href,
+      url: css,
       shortCircuit: true,
     };
   }
@@ -19,12 +26,21 @@ export async function resolve(specifier, ctx, nextResolve) {
 }
 
 /**
+ *
+ * This hook is used to modify the source of JSX/TSX files on the fly.
+ * We prepend the necessary React import to ensure React is available,
+ * which is required for JSX to work without explicitly importing React.
+ *
  * @type {import('node:module').LoadHook}
  */
 export async function load(url, ctx, nextLoad) {
   const ext = extname(url);
-  if (ext[ext.length - 1] !== 'x') return nextLoad(url);
   const result = await nextLoad(url, ctx);
-  result.source = requiredCode + result.source;
+
+  if (ext === '.jsx' || ext === '.tsx') {
+    // Ensure React is in scope for JSX transforms.
+    result.source = requiredCode + result.source;
+  }
+
   return result;
 }