Merge pull request #342 from tkskto/feat/tsconfig-support

Feat/tsconfig support

Author: tkskto

package.json

@@ -53,6 +53,7 @@
     "commander": "10.0.1",
     "ejs": "3.1.9",
     "express": "4.19.2",
+    "get-tsconfig": "4.7.3",
     "globby": "13.2.2",
     "mkdirp": "3.0.1",
     "opener": "1.5.2",

rollup.config.mjs

@@ -49,6 +49,7 @@ export default [
       'ws',
       'express',
       'ejs',
+      'get-tsconfig',
     ],
     plugins: [
       json(),

src/server/Model.ts

@@ -11,6 +11,8 @@ class Model {
 
   private _isSilentMode = false;
 
+  private _tsconfigPathMapping = new Map<string, string>();
+
   get resourceRoot(): string {
     return this._resourceRoot;
   }
@@ -50,6 +52,14 @@ class Model {
   set isSilentMode(value: boolean) {
     this._isSilentMode = value;
   }
+
+  get tsconfigPathMapping(): Map<string, string> {
+    return this._tsconfigPathMapping;
+  }
+
+  set tsconfigPathMapping(paths: Map<string, string>) {
+    this._tsconfigPathMapping = paths;
+  }
 }
 
 export const model = new Model();

src/server/index.ts

@@ -9,6 +9,8 @@ import {fileCounter} from './FileCounter';
 import {writeFileExtra, writeHTML} from './Output';
 import {globby} from 'globby';
 import path from 'path';
+import {getTsconfig} from 'get-tsconfig';
+import {getTsConfigPathMapping} from './utils';
 
 // TODO: add log system
 // TODO: add error system
@@ -53,6 +55,14 @@ export const analyzeFromCLI = async (): Promise<void> => {
   model.port = argv.port;
   model.isSilentMode = argv.silent || false;
 
+  const tsconfig = getTsconfig(argv.dir);
+
+  if (tsconfig !== null && tsconfig.config.compilerOptions) {
+    const pathMaps = getTsConfigPathMapping(tsconfig.config.compilerOptions);
+
+    model.tsconfigPathMapping = pathMaps;
+  }
+
   if (argv.format !== FORMAT.BROWSER && argv.format !== FORMAT.JSON && argv.format !== FORMAT.BOTH) {
     console.error(`not support ${argv.format} format.`);
   }

src/server/utils.ts

@@ -6,7 +6,8 @@ import {
 import {Token} from 'vue-eslint-parser/ast/tokens';
 import {model} from './Model';
 import {existsSync} from 'fs';
-import {resolve, extname, dirname} from 'path';
+import {resolve, extname, dirname, normalize} from 'path';
+import {type TsConfigJson} from 'get-tsconfig';
 
 /**
  * get only Import Declaration syntax.
@@ -94,11 +95,28 @@ export const resolveFile = (_filename: string, _currentFileName: string): string
     filename = resolve(dirnameOfCurrentFile, _filename);
   } else if (_filename.startsWith('./')) {
     filename = `${dirnameOfCurrentFile}/${_filename.replace(/\.\/|/ug, '')}`;
+  } else if (model.tsconfigPathMapping.size > 0) {
+    // `@@` should be processed before `@`
+    const keys = Array.from(model.tsconfigPathMapping.keys()).sort().reverse();
+
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      const replaceTo = model.tsconfigPathMapping.get(key);
+
+      if (_filename.startsWith(key) && replaceTo) {
+        filename = _filename.replace(key, replaceTo);
+
+        break;
+      }
+    }
   } else if (_filename.startsWith('~') || _filename.startsWith('@')) {
     filename = _filename.replace('~', model.resourceRoot).replace('@', model.resourceRoot);
   }
 
+  // filename is empty when import third-party script
   if (filename) {
+    filename = normalize(filename);
+
     if (extname(filename) === '') {
       if (existsSync(`${filename}.vue`)) {
         return `${filename}.vue`;
@@ -112,3 +130,21 @@ export const resolveFile = (_filename: string, _currentFileName: string): string
 
   return filename;
 };
+
+export const getTsConfigPathMapping = (compilerOptions: TsConfigJson.CompilerOptions): Map<string, string> => {
+  const {paths, baseUrl} = compilerOptions;
+  const pathMaps = new Map<string, string>();
+
+  if (!baseUrl || !paths) {
+    return pathMaps;
+  }
+
+  for (const key in paths) {
+    if (Object.hasOwn(paths, key)) {
+      // only use the first path for now.
+      pathMaps.set(key.replace('/*', ''), resolve(model.resourceRoot, baseUrl, paths[key][0].replace('/*', '')));
+    }
+  }
+
+  return pathMaps;
+};

test/fixture/declarationTest/importOneWithDoubleAtSign.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+<script setup>
+  import child from '@@/test/components/child.vue';
+</script>

test/fixture/declarationTest/importOneWithDoubleTilde.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+<script setup>
+  import child from '~~/test/components/child.vue';
+</script>

test/fixture/declarationTest/importOneWithTilde.vue

@@ -0,0 +1,6 @@
+<template>
+  <div></div>
+</template>
+<script setup>
+  import child from '~/test/components/child.vue';
+</script>

test/specs/resolveFile.test.ts

@@ -0,0 +1,32 @@
+import {resolveFile} from '../../src/server/utils';
+import {model} from '../../src/server/Model';
+
+describe('resolveFile', () => {
+  beforeAll(() => {
+    const pathMaps = new Map<string, string>();
+
+    pathMaps.set('@', process.cwd());
+    pathMaps.set('@@', process.cwd());
+    pathMaps.set('~', `${process.cwd()}/`);
+
+    model.tsconfigPathMapping = pathMaps;
+  });
+
+  it('start with @', () => {
+    const result = resolveFile('@/test/components/child.vue', '/test/fixture/declarationTest/importOneWithTypeScript.vue');
+
+    expect(result).toBe(`${process.cwd()}/test/components/child.vue`);
+  });
+
+  it('start with @@', () => {
+    const result = resolveFile('@@/test/components/child.vue', '/test/fixture/declarationTest/importOneWithTypeScript.vue');
+
+    expect(result).toBe(`${process.cwd()}/test/components/child.vue`);
+  });
+
+  it('start with ~', () => {
+    const result = resolveFile('~/test/components/child.vue', '/test/fixture/declarationTest/importOneWithTypeScript.vue');
+
+    expect(result).toBe(`${process.cwd()}/test/components/child.vue`);
+  });
+});

test/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "..",
+    "paths": {
+      "@@/*": ["./*"],
+      "@/*": ["./*"],
+      "~/*": ["./*"],
+      "~~/*": ["./*"],
+    }
+  }
+}