Merge pull request #242 from tkskto/feature/support-vue3

Feature/support vue3

Author: tkskto

package-lock.json

@@ -9,7 +9,9 @@
     "vca": "bin/analyze.js"
   },
   "scripts": {
-    "dev": "tsc -p src/server/tsconfig.json -w",
+    "dev": "run-p dev:*",
+    "dev:typeScript": "tsc -p src/server/tsconfig.json -w",
+    "dev:rollup": "rollup --config -w",
     "build": "tsc -p src/server/tsconfig.json && rollup --config",
     "lint": "eslint -c .eslintrc.json src",
     "cover": "npm run cover:test && npm run cover:report",
@@ -46,6 +48,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@typescript-eslint/parser": "5.45.0",
     "commander": "9.4.1",
     "ejs": "3.1.8",
     "express": "4.18.2",
@@ -60,8 +63,8 @@
     "@rollup/plugin-commonjs": "24.0.0",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.0.1",
-    "@rollup/plugin-typescript": "10.0.1",
     "@rollup/plugin-terser": "0.2.1",
+    "@rollup/plugin-typescript": "10.0.1",
     "@types/ejs": "3.1.1",
     "@types/express": "4.17.15",
     "@types/jest": "29.2.4",
@@ -70,11 +73,11 @@
     "@types/opener": "1.4.0",
     "@types/ws": "8.5.3",
     "@typescript-eslint/eslint-plugin": "5.47.0",
-    "@typescript-eslint/parser": "5.47.0",
     "eslint": "8.30.0",
     "husky": "8.0.2",
     "jest": "29.3.1",
     "lint-staged": "13.1.0",
+    "npm-run-all": "^4.1.5",
     "nyc": "15.1.0",
     "rollup": "3.8.1",
     "rollup-plugin-license": "3.0.1",

package.json

@@ -29,7 +29,7 @@ export const getImportDeclarationTree = (fileName: string, parents: string[] = [
   }
 
   // increment count of this file.
-  fileCounter.add(shortFilename);
+  fileCounter.add(filename);
 
   // if this file is not Vue Component file, return only filename and stat.
   if (extname(filename) === '' || extname(filename) !== '.vue') {
@@ -44,6 +44,17 @@ export const getImportDeclarationTree = (fileName: string, parents: string[] = [
 
   const contents = readFileSync(filename, 'utf-8');
   const component = new VueComponent(shortFilename, contents, stat);
+  const getNextDeclaration = (source: string) => {
+    const nextFilename = resolveFile(source, filename);
+
+    if (nextFilename) {
+      if (parents.includes(nextFilename)) {
+        console.warn(`Circular dependency detected between ${nextFilename} and ${filename}`);
+      } else {
+        component.addChildReport(getImportDeclarationTree(nextFilename, ancestorList, isTest));
+      }
+    }
+  };
 
   try {
     // if we get, read imported file recursive.
@@ -52,17 +63,13 @@ export const getImportDeclarationTree = (fileName: string, parents: string[] = [
       const source = String(component.importDeclaration[i].source.value);
 
       if (source) {
-        const nextFilename = resolveFile(source, filename);
-
-        if (nextFilename) {
-          if (parents.includes(nextFilename)) {
-            console.warn(`Circular dependency detected between ${nextFilename} and ${filename}`);
-          } else {
-            component.addChildReport(getImportDeclarationTree(nextFilename, ancestorList, isTest));
-          }
-        }
+        getNextDeclaration(source);
       }
     }
+
+    if (component.srcAttribute) {
+      getNextDeclaration(component.srcAttribute);
+    }
   } catch (err) {
     console.error(`Something went wrong with reading ${filename}`);
     if (err instanceof Error) {

src/server/Analyzer.ts

@@ -1,15 +1,15 @@
-import {resolve} from 'path';
+const cwd = process.cwd();
 
 export class FileCounter {
   private _count: {[key: string]: number} = {};
 
   public add(_filename: string): void {
-    const filename = resolve(_filename);
+    const shortFilename = _filename.replace(cwd, '');
 
-    if (Object.prototype.hasOwnProperty.call(this._count, filename)) {
-      this._count[filename]++;
+    if (Object.prototype.hasOwnProperty.call(this._count, shortFilename)) {
+      this._count[shortFilename]++;
     } else {
-      this._count[filename] = 1;
+      this._count[shortFilename] = 1;
     }
   }
 

src/server/FileCounter.ts

@@ -8,6 +8,7 @@ import {Stats} from 'fs';
 const parserOption = {
   ecmaVersion: 'latest',
   sourceType: 'module',
+  parser: '@typescript-eslint/parser',
 };
 
 export class VueComponent {
@@ -27,30 +28,44 @@ export class VueComponent {
 
   private _importDeclaration: ESLintImportDeclaration[] = [];
 
+  private _srcAttribute: string;
+
   constructor(filename: string, contents: string, stats?: Stats) {
     this._filename = filename;
     this._lastModifiedTime = stats?.mtimeMs || 0;
     this._size = stats?.size || 0;
 
     // get each part from text of file.
     const templateBody = contents.match(/(?<template><template>[\s\S]*<\/template>)/u);
-    const scriptBody = contents.match(/(?<script><script>[\s\S]*<\/script>)/u);
+
+    // support src, lang, setup attribute.
+    const scriptBody = contents.match(/(?<script><script[\s\S]*>[\s\S]*<\/script>)/u);
     const styleBody = contents.match(/(?<style><style>[\s\S]*<\/style>)/u);
 
     this._template = templateBody?.groups?.template || '';
-    this._style = styleBody?.groups?.template || '';
+    this._style = styleBody?.groups?.style || '';
 
     const scriptString = scriptBody?.groups?.script || '';
 
-    // using vue-eslint-parser package.
-    const esLintProgram: ESLintProgram = parse(scriptString, parserOption);
+    try {
+      // using vue-eslint-parser package.
+      const esLintProgram: ESLintProgram = parse(scriptString, parserOption);
+
+      // get props from parser results.
+      if (esLintProgram.tokens) {
+        this._props = this.getProps(esLintProgram.tokens);
+      }
+
+      this._importDeclaration = getImportDeclaration(esLintProgram.body);
+    } catch (err: unknown) {
+      console.error('something went wrong at pars.');
 
-    // get props from parser results.
-    if (esLintProgram.tokens) {
-      this._props = this.getProps(esLintProgram.tokens);
+      throw err;
     }
 
-    this._importDeclaration = getImportDeclaration(esLintProgram.body);
+    const scriptSrc = scriptString.match(/<script src="(?<src>[\s\S]*)">/u);
+
+    this._srcAttribute = scriptSrc?.groups?.src || '';
   }
 
   private getProps(tokens: Token[]): string {
@@ -61,10 +76,22 @@ export class VueComponent {
         return propsDeclaration.props;
       }
 
+      const definePropsDeclaration = getDeclarationSyntax(tokens, 'defineProps');
+
+      const definePropsDeclarationJSON = JSON.parse(definePropsDeclaration);
+
+      if (definePropsDeclarationJSON && definePropsDeclarationJSON.defineProps) {
+        return definePropsDeclarationJSON.defineProps;
+      }
+
       return '';
     } catch (err) {
       console.warn('failed to analyze props.');
 
+      if (err instanceof Error) {
+        console.error(err.message);
+      }
+
       return '';
     }
   }
@@ -77,6 +104,10 @@ export class VueComponent {
     return this._importDeclaration;
   }
 
+  get srcAttribute(): string {
+    return this._srcAttribute;
+  }
+
   public getFileReport(isTest: boolean): FileReport {
     return {
       name: this._filename,

src/server/VueComponent.ts

@@ -28,7 +28,9 @@ const analyze = (entries: string[]): Promise<AnalyzeReport> => {
   return new Promise((resolve, reject) => {
     try {
       if (entries.length === 0) {
-        console.log('There is no entry file.');
+        reject(new Error('There is no entry file.'));
+
+        return;
       }
 
       const entriesData = [];
@@ -45,6 +47,7 @@ const analyze = (entries: string[]): Promise<AnalyzeReport> => {
         count: fileCounter.result,
       });
     } catch (err) {
+      console.error('something went to wrong at analyze.');
       reject(err);
     }
   });

src/server/index.ts

@@ -12,7 +12,7 @@ import {resolve, extname, dirname} from 'path';
  * get only Import Declaration syntax.
  * @param {Node[]} nodeArr
  */
-export const getImportDeclaration = (nodeArr: (ESLintStatement | ESLintModuleDeclaration)[]): ESLintImportDeclaration[] => { // eslint-disable-line
+export const getImportDeclaration = (nodeArr: (ESLintStatement | ESLintModuleDeclaration)[]): ESLintImportDeclaration[] => {
   return nodeArr.filter((node) => node.type === 'ImportDeclaration') as ESLintImportDeclaration[];
 };
 
@@ -22,7 +22,7 @@ export const getImportDeclaration = (nodeArr: (ESLintStatement | ESLintModuleDec
  * @param targetKeyName
  * @returns {string}
  */
-export const getDeclarationSyntax = (tokens: Token[], targetKeyName: 'data' | 'props'): string => {
+export const getDeclarationSyntax = (tokens: Token[], targetKeyName: 'data' | 'props' | 'defineProps'): string => {
   let isTargetToken = false;
   let result = '{'; // for JSON.parse
   let closedCount = 0;
@@ -36,6 +36,10 @@ export const getDeclarationSyntax = (tokens: Token[], targetKeyName: 'data' | 'p
       const needQuoting = needQuotingTypes.includes(type);
       isTargetToken = true;
 
+      if (['(', ')'].includes(value)) {
+        continue;
+      }
+
       if (type === 'Punctuator') {
         // count brace for finding end of the declaration.
         if (value === '{') {
@@ -61,12 +65,16 @@ export const getDeclarationSyntax = (tokens: Token[], targetKeyName: 'data' | 'p
       }
 
       // change quotation to double for JSON.
-      result += value.replace(/'/ug, '"');
+      result += value.replaceAll('\'', '"');
 
       // put right-hand quotation for JSON.
       if (needQuoting) {
         result += '"';
       }
+
+      if (value === 'defineProps') {
+        result += ':';
+      }
     }
   }
 

src/server/utils.ts

@@ -0,0 +1 @@
+export default {};

test/assets/tsModule.ts

@@ -0,0 +1,7 @@
+<template>
+  <div>nested2</div>
+</template>
+<script setup>
+  import child from './child.vue';
+  import child2 from './child2.vue';
+</script>

test/components/nested2Setup.vue

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