Merge pull request #228 from tkskto/feature/add-api-support

add API support

Author: tkskto

.eslintrc.json

@@ -16,6 +16,7 @@
     "multiline-comment-style": 0,
     "@typescript-eslint/no-var-requires": 0,
     "no-console": 0,
-    "no-new": 0
+    "no-new": 0,
+    "arrow-body-style": 0
   }
 }

README.md

@@ -46,8 +46,22 @@ npm exec vca -- --dir .
 *   `-o` or `--out` : output directory. JSON file will output here.
 *   `-p` or `--port` : select a port number for the local server.
 
-## License
+## API
 
-MIT License.
+vue-component-analyzer is also available as an API from v0.6.0.
+
+This API is intended to be used for testing.
+
+```javascript
+import {getImportDeclarationTree} from '@tkskto/vue-component-analyzer';
+
+const jsonOfTree = getImportDeclarationTree('entryFile.vue');
+```
+
+See [index.d.ts](./types/index.d.ts) for details of types.
 
+(`lastModifiedTime` can be noise. If you don't need it remove explicitly.)
 
+## License
+
+MIT License.

bin/analyze.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import {vueComponentAnalyze} from '../dist/index.mjs';
+import {analyzeFromCLI} from '../dist/index.mjs';
 
 /**
  * Catch and report unexpected error.
@@ -14,12 +14,12 @@ function onCatchError(error) {
   process.exit(1);
 }
 
-(function main() {
+(async function main() {
   process.on('uncaughtException', onCatchError);
   process.on('unhandledRejection', onCatchError);
 
   try {
-    vueComponentAnalyze();
+    await analyzeFromCLI();
   } catch (err) {
     onCatchError(err);
   }

package.json

@@ -3,6 +3,8 @@
   "version": "0.5.2",
   "description": "Analyze dependency tree for Vue.js SFC (Single File Component)",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./types/index.d.ts",
   "bin": {
     "vca": "bin/analyze.js"
   },

src/client/Seed.ts

@@ -1,7 +1,7 @@
 /**
  * Data Type of one of Vue File.
  */
-import FileReport = vueComponentAnalyzer.FileReport;
+import {FileReport} from '../../types';
 import {Model} from './model';
 
 export class Seed {

src/client/model.ts

@@ -1,5 +1,5 @@
+import {AnalyzeReport} from '../../types';
 import {CustomEventDispatcher} from './eventDispatcher';
-import AnalyzeReport = vueComponentAnalyzer.AnalyzeReport;
 
 export type INFORMATION_TYPE = 'settings' | 'props' | 'fileSize' | 'lastUpdated' | 'referenceCount';
 export type VIEW_TYPE = 'GRAPH' | 'TEXT';
@@ -38,11 +38,11 @@ export class Model extends CustomEventDispatcher {
     this._todayTime = this._today.getTime();
   }
 
-  get data(): vueComponentAnalyzer.AnalyzeReport {
+  get data(): AnalyzeReport {
     return this._data;
   }
 
-  set data(value: vueComponentAnalyzer.AnalyzeReport) {
+  set data(value: AnalyzeReport) {
     this._data = value;
     this.dispatchEvent(Model.EVENT.DATA_UPDATE);
   }

src/client/renderer.ts

@@ -1,8 +1,8 @@
 // for execute from browser.
 
+import {FileReport} from '../../types';
 import {Seed} from './Seed';
 import {Model} from './model';
-import FileReport = vueComponentAnalyzer.FileReport;
 
 export class Renderer {
   private readonly _app: HTMLElement | null;

src/server/Analyzer.ts

@@ -1,88 +1,74 @@
-import FileReport = vueComponentAnalyzer.FileReport;
+import {FileReport} from '../../types';
 import {resolveFile} from './utils';
 import {readFileSync, statSync} from 'fs';
 import {resolve, extname} from 'path';
-import {FileCounter} from './FileCounter';
+import {fileCounter} from './FileCounter';
 import {VueComponent} from './VueComponent';
 import {model} from './Model';
 const cwd = process.cwd();
 
-class Analyzer {
-  private readonly _counter: FileCounter;
+/**
+ * get import tree.
+ * @param {string} fileName entry file name
+ * @param {string[]} parents entries of file name
+ * @param {boolean} isTest whether it through the test. if this doesn't exist lastModifiedTime will always fail on the GitHub Actions.
+ */
+export const getImportDeclarationTree = (fileName: string, parents: string[] = [], isTest = false): FileReport => {
+  const filename = resolve(cwd, fileName);
+  // get filename without current working directory.
+  const shortFilename = filename.replace(cwd, '');
+  // get file statistic
+  const stat = statSync(filename);
+  // make a filename list for detecting circular dependency.
+  const ancestorList: string[] = parents.concat();
 
-  constructor() {
-    this._counter = new FileCounter();
-  }
-
-  /**
-   * get import tree.
-   * @param {string} fileName entry file name
-   * @param {string[]} parents entries of file name
-   * @param {boolean} isTest whether it through the test. if this doesn't exist lastModifiedTime will always fail on the GitHub Actions.
-   */
-  public getImportDeclarationTree = (fileName: string, parents: string[], isTest = false): FileReport => {
-    const filename = resolve(cwd, fileName);
-    // get filename without current working directory.
-    const shortFilename = filename.replace(cwd, '');
-    // get file statistic
-    const stat = statSync(filename);
-    // make a filename list for detecting circular dependency.
-    const ancestorList: string[] = parents.concat();
-
-    ancestorList.push(fileName);
+  ancestorList.push(fileName);
 
-    if (!model.isSilentMode) {
-      console.log(`read ${filename}`);
-    }
+  if (!model.isSilentMode) {
+    console.log(`read ${filename}`);
+  }
 
-    // increment count of this file.
-    this._counter.add(shortFilename);
+  // increment count of this file.
+  fileCounter.add(shortFilename);
 
-    // if this file is not Vue Component file, return only filename and stat.
-    if (extname(filename) === '' || extname(filename) !== '.vue') {
-      return {
-        name: shortFilename,
-        props: '',
-        size: stat.size,
-        lastModifiedTime: isTest ? 0 : Number(stat.mtimeMs.toFixed(0)),
-        children: [],
-      };
-    }
+  // if this file is not Vue Component file, return only filename and stat.
+  if (extname(filename) === '' || extname(filename) !== '.vue') {
+    return {
+      name: shortFilename,
+      props: '',
+      size: stat.size,
+      lastModifiedTime: isTest ? 0 : Number(stat.mtimeMs.toFixed(0)),
+      children: [],
+    };
+  }
 
-    const contents = readFileSync(filename, 'utf-8');
-    const component = new VueComponent(shortFilename, contents, stat);
+  const contents = readFileSync(filename, 'utf-8');
+  const component = new VueComponent(shortFilename, contents, stat);
 
-    try {
-      // if we get, read imported file recursive.
-      for (let i = 0, len = component.importDeclaration.length; i < len; i++) {
-        // TODO: support other types? (value might be RegExp, or number, boolean.)
-        const source = String(component.importDeclaration[i].source.value);
+  try {
+    // if we get, read imported file recursive.
+    for (let i = 0, len = component.importDeclaration.length; i < len; i++) {
+      // TODO: support other types? (value might be RegExp, or number, boolean.)
+      const source = String(component.importDeclaration[i].source.value);
 
-        if (source) {
-          const nextFilename = resolveFile(source, filename);
+      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(this.getImportDeclarationTree(nextFilename, ancestorList, isTest));
-            }
+        if (nextFilename) {
+          if (parents.includes(nextFilename)) {
+            console.warn(`Circular dependency detected between ${nextFilename} and ${filename}`);
+          } else {
+            component.addChildReport(getImportDeclarationTree(nextFilename, ancestorList, isTest));
           }
         }
       }
-    } catch (err) {
-      console.error(`Something went wrong with reading ${filename}`);
-      if (err instanceof Error) {
-        console.error(err.message);
-      }
     }
-
-    return component.getFileReport(isTest);
-  };
-
-  get counter(): FileCounter {
-    return this._counter;
+  } catch (err) {
+    console.error(`Something went wrong with reading ${filename}`);
+    if (err instanceof Error) {
+      console.error(err.message);
+    }
   }
-}
 
-export const analyzer = new Analyzer();
+  return component.getFileReport(isTest);
+};

src/server/FileCounter.ts

@@ -13,7 +13,13 @@ export class FileCounter {
     }
   }
 
-  public get count(): {[key: string]: number} {
+  public clear(): void {
+    this._count = {};
+  }
+
+  public get result(): {[key: string]: number} {
     return this._count;
   }
 }
+
+export const fileCounter = new FileCounter();

src/server/VueComponent.ts

@@ -1,8 +1,8 @@
+import {FileReport} from '../../types';
 import {parse} from 'vue-eslint-parser';
 import {ESLintImportDeclaration, ESLintProgram} from 'vue-eslint-parser/ast/nodes';
 import {Token} from 'vue-eslint-parser/ast/tokens';
 import {getImportDeclaration, getDeclarationSyntax} from './utils';
-import FileReport = vueComponentAnalyzer.FileReport;
 import {Stats} from 'fs';
 
 const parserOption = {