@tkskto/vue-component-analyzer - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

dist/client.js

 /*!
-  @tkskto/vue-component-analyzer v0.0.6
+  @tkskto/vue-component-analyzer v0.1.0
   https://github.com/tkskto/
@@ -119,4 +119,3 @@ Released under the MIT License.
 class Seed {
-    constructor(name, level, index) {
-        this.name = name;
+    constructor(file, level, index) {
         this.level = level;
@@ -126,3 +125,4 @@ this.index = index;
         this._duplicate = false;
-        this._name = name;
+        this._name = file.name;
+        this._props = file.props;
         this._level = level;
@@ -140,3 +140,7 @@ this._index = index;
     }
+    renderWithProps() {
+        return `<details><summary>${this._name}</summary><pre>${JSON.stringify(this._props, null, '\t')}</pre></details>`;
+    }
     render() {
+        const contents = this._props ? this.renderWithProps() : this._name;
         let childHTML = '';
@@ -155,3 +159,3 @@ let seedClassName = '';
         return `<div class="seed${seedClassName}">
-      <span class="file"><span class="filename${fileClassName}">${this._name}</span></span>
+      <span class="file"><span class="filename${fileClassName}">${contents}</span></span>
       ${childHTML}
@@ -184,3 +188,3 @@ </div>`;
                 if (data) {
-                    const root = new Seed(entry.name, 0, 0);
+                    const root = new Seed(entry, 0, 0);
                     this._tree.push(this.generateSeed(entry, root, 0));
@@ -200,3 +204,3 @@ }
             const child = children[i];
-            const childSeed = new Seed(child.name, level + 1, i);
+            const childSeed = new Seed(child, level + 1, i);
             childSeeds.push(childSeed);
@@ -203,0 +207,0 @@ this.generateSeed(child, childSeed, level + 1);

dist/index.js

@@ -6,3 +6,3 @@ /**
 /*!
-  @tkskto/vue-component-analyzer v0.0.6
+  @tkskto/vue-component-analyzer v0.1.0
   https://github.com/tkskto/
@@ -41,2 +41,3 @@ Released under the MIT License.
         commander.option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "both")', 'out');
+        commander.option('-p, --port [number]', 'select a port number for the local server', '8888');
         const argv = commander.parse(process.argv);
@@ -61,7 +62,7 @@ if (argv.format !== FORMAT.BROWSER && argv.format !== FORMAT.JSON && argv.format !== FORMAT.BOTH) {
         if (argv.format === FORMAT.BOTH) {
-            server_1.startServer(result);
+            server_1.startServer(argv.port, result);
             writeFileExtra(path_1.default.resolve(process.cwd(), `${argv.out}/result.json`), JSON.stringify(result, null, 4));
         }
         else if (argv.format === FORMAT.BROWSER) {
-            server_1.startServer(result);
+            server_1.startServer(argv.port, result);
         }
@@ -68,0 +69,0 @@ else if (argv.format === FORMAT.JSON) {

dist/server.js

 /*!
-  @tkskto/vue-component-analyzer v0.0.6
+  @tkskto/vue-component-analyzer v0.1.0
   https://github.com/tkskto/
@@ -15,5 +15,4 @@ Released under the MIT License.
 const projectRoot = path_1.default.resolve(__dirname, '..');
-exports.startServer = (json) => {
+exports.startServer = (port, json) => {
     const HOST = '127.0.0.1';
-    const PORT = 8888;
     const app = express_1.default();
@@ -35,4 +34,4 @@ app.engine('ejs', require('ejs').renderFile);
     });
-    server.listen(PORT, HOST, () => {
-        const addressPort = server.address().port || PORT;
+    server.listen(port, HOST, () => {
+        const addressPort = server.address().port || port;
         const url = `http://${HOST}:${addressPort}/`;
@@ -39,0 +38,0 @@ console.log(`Vue Component Analyzer is started at ${url}`);

dist/utils.js

 /*!
-  @tkskto/vue-component-analyzer v0.0.6
+  @tkskto/vue-component-analyzer v0.1.0
   https://github.com/tkskto/
@@ -7,3 +7,3 @@ Released under the MIT License.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImportDeclarationTree = exports.resolveFile = exports.getImportDeclaration = void 0;
+exports.getImportDeclarationTree = exports.resolveFile = exports.getPropsDeclaration = exports.getImportDeclaration = void 0;
 const vue_eslint_parser_1 = require("vue-eslint-parser");
@@ -16,16 +16,55 @@ const fs_1 = require("fs");
 };
+exports.getPropsDeclaration = (tokens) => {
+    let isPropsToken = false;
+    let result = '{';
+    let closedCount = 0;
+    const needQuotingTypes = ['Identifier', 'Boolean', 'Keyword'];
+    for (const token of tokens) {
+        const { type, value } = token;
+        if (isPropsToken || (type === 'Identifier' && value === 'props')) {
+            const needQuoting = needQuotingTypes.includes(type);
+            isPropsToken = true;
+            if (type === 'Punctuator') {
+                if (value === '{') {
+                    closedCount++;
+                }
+                else if (value === '}') {
+                    closedCount--;
+                    if (result[result.length - 1] === ',') {
+                        result = result.slice(0, -1);
+                    }
+                    if (closedCount === 0) {
+                        result += '}';
+                        break;
+                    }
+                }
+            }
+            if (needQuoting) {
+                result += '"';
+            }
+            result += value.replace(/'/ug, '"');
+            if (needQuoting) {
+                result += '"';
+            }
+        }
+    }
+    return `${result}}`;
+};
 exports.resolveFile = (_filename, _currentFileName) => {
+    let filename = '';
     if (_filename.startsWith('../')) {
-        const filename = _filename.replace(/\.\.\//ug, '');
-        return path_1.extname(filename) === '.vue' ? filename : path_1.extname(filename) !== '' ? filename : `${filename}.vue`;
+        filename = _filename.replace(/\.\.\//ug, '');
     }
     else if (_filename.startsWith('./')) {
-        const filename = `${path_1.dirname(_currentFileName)}/${_filename.replace(/\.\/|/ug, '')}`;
-        return path_1.extname(filename) === '.vue' ? filename : path_1.extname(filename) !== '' ? filename : `${filename}.vue`;
+        filename = `${path_1.dirname(_currentFileName)}/${_filename.replace(/\.\/|/ug, '')}`;
     }
     else if (_filename.startsWith('~') || _filename.startsWith('@')) {
-        const filename = _filename.replace('~', '.').replace('@', '.');
-        return path_1.extname(filename) === '.vue' ? filename : path_1.extname(filename) !== '' ? filename : `${filename}.vue`;
+        filename = _filename.replace('~', '.').replace('@', '.');
     }
-    return '';
+    if (filename) {
+        if (path_1.extname(filename) === '') {
+            return `${filename}.vue`;
+        }
+    }
+    return filename;
 };
@@ -37,2 +76,3 @@ exports.getImportDeclarationTree = (fileName) => {
         name: filename.replace(cwd, ''),
+        props: '',
         children,
@@ -51,2 +91,8 @@ };
         const esLintProgram = vue_eslint_parser_1.parse(file, parserOption);
+        if (esLintProgram.tokens) {
+            const propsDeclaration = JSON.parse(exports.getPropsDeclaration(esLintProgram.tokens));
+            if (propsDeclaration && propsDeclaration.props) {
+                result.props = propsDeclaration.props;
+            }
+        }
         const body = exports.getImportDeclaration(esLintProgram.body);
@@ -53,0 +99,0 @@ for (let i = 0, len = body.length; i < len; i++) {

package.json

 {
   "name": "@tkskto/vue-component-analyzer",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Analyze dependency tree for Vue.js SFC (Single File Component)",
@@ -65,3 +65,3 @@ "main": "dist/index.js",
     "nyc": "15.1.0",
-    "rollup": "2.28.2",
+    "rollup": "2.29.0",
     "rollup-plugin-license": "2.2.0",
@@ -68,0 +68,0 @@ "typescript": "4.0.3"

README.md

@@ -23,3 +23,3 @@ # vue-component-analyzer
 
-Or you can use npx:
+Or you can use npx（after npm install）:
 
@@ -26,0 +26,0 @@ ```

types/index.d.ts

 declare namespace vueComponentAnalyzer {
+  interface FileReport {
+    name: string,
+    props: string,
+    children: FileReport[]
+  }
   export function getImportDeclarationTree(rootDir: string, file: string): FileReport;
@@ -6,6 +11,2 @@ interface AnalyzeReport {
   }
-  interface FileReport {
-    name: string,
-    children: FileReport[]
-  }
 }
@@ -12,0 +13,0 @@

No alert changes

Improved metrics

Total package byte prevSize

22969

increased by6.74%

Lines of code

509

increased by7.84%

Worsened metrics

Number of package files

12

decreased by-7.69%

No dependency changes