feat!: ts path alias support

Author: infodusha

examples/general/src/app/Inner.jsx

@@ -1,3 +1,5 @@
+import { Inner2 } from './Inner2'
+
 export function Inner() {
-  return <div>Inner</div>;
+  return <div>Inner <Inner2 /> </div>;
 }

examples/general/src/app/Inner2.jsx

@@ -0,0 +1,4 @@
+
+export function Inner2() {
+  return <div>Inner 2</div>;
+}

examples/general/src/app/error.jsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Inner } from "./Inner";
+
+export default function Error() {
+
+    return <Inner/>
+}

package-lock.json

@@ -28,6 +28,7 @@
     "@babel/traverse": "^7.24.5",
     "@babel/types": "^7.24.5",
     "client-only": "^0.0.1",
-    "server-only": "^0.0.1"
+    "server-only": "^0.0.1",
+    "typescript": "~5.4.5"
   }
 }

packages/next-rsc-error-handler/package.json

@@ -2,7 +2,6 @@ import parser from "@babel/parser";
 import traverse from "@babel/traverse";
 import generate from "@babel/generator";
 import * as t from "@babel/types";
-import path from "node:path";
 
 import {
   getRelativePath,
@@ -11,6 +10,7 @@ import {
   wrapArrowFunction,
   getOptionsExpressionLiteral,
 } from "./utils.js";
+import { resolveTsAlias } from "./ts-path-alias.js";
 
 const WRAPPER_NAME = "__rscWrapper";
 const WRAPPER_PATH = "next-rsc-error-handler/inserted/wrapper";
@@ -37,9 +37,14 @@ export default function (source) {
 
     let hasComponents = false;
 
+    const getImportRelativePath = (p) => {
+      const val = resolveTsAlias(p.node.source.value);
+      return getRelativePath(this.utils.absolutify(this.context, val));
+    };
+
     traverse.default(ast, {
       ImportDeclaration(p) {
-        clientComponents.add(getImportRelativePath(resourcePath, p));
+        clientComponents.add(getImportRelativePath(p));
       },
       // TODO add FunctionExpression
       FunctionDeclaration(p) {
@@ -148,13 +153,5 @@ function addClientOnlyImport(ast) {
 }
 
 function dropExtension(relativePath) {
-  return relativePath.replace(/\.[^/.]+$/, "");
-}
-
-function getImportRelativePath(resourcePath, p) {
-  return dropExtension(
-    getRelativePath(
-      path.resolve(path.dirname(resourcePath), p.node.source.value)
-    )
-  );
+  return relativePath.replace(/\.[^\/.]+$/, "");
 }

packages/next-rsc-error-handler/src/loader.js

@@ -0,0 +1,51 @@
+import { dirname, resolve, relative } from "node:path";
+import typescript from "typescript";
+
+const { findConfigFile, parseJsonConfigFileContent, readConfigFile, sys } =
+  typescript;
+
+function loadTSConfig() {
+  const configFileName = findConfigFile(process.cwd(), sys.fileExists);
+  if (!configFileName) {
+    return null;
+  }
+  const configFile = readConfigFile(configFileName, sys.readFile);
+  const directory = dirname(configFileName);
+  const options = parseJsonConfigFileContent(configFile.config, sys, directory);
+  return options;
+}
+
+const tsConfig = loadTSConfig();
+
+const fns = tsConfig
+  ? Object.entries(tsConfig.options.paths).map(prepareRegex)
+  : [];
+
+function prepareRegex(paths) {
+  const [key, [value]] = paths;
+  const from = new RegExp(escapeRegExp(key).replace("*", "(.*)"));
+  const to = relative(
+    process.cwd(),
+    resolve(tsConfig.options.baseUrl, value.replace("*", "$$1"))
+  );
+  return (x) => {
+    if (from.test(x)) {
+      return x.replace(from, to);
+    }
+    return null;
+  };
+}
+
+function escapeRegExp(text) {
+  return text.replace(/[-[\]{}()+?.,\\^$|#\s]/g, "\\$&");
+}
+
+export function resolveTsAlias(value) {
+  for (const fn of fns) {
+    const result = fn(value);
+    if (result) {
+      return result;
+    }
+  }
+  return value;
+}