@tkskto/vue-component-analyzer
Advanced tools
Comparing version 0.1.4 to 0.2.0
@@ -9,4 +9,2 @@ #!/usr/bin/env node | ||
function onCatchError(error) { | ||
process.exit(1); | ||
const {version} = require('../package.json'); | ||
@@ -16,2 +14,4 @@ | ||
console.error(`${error.message}`); | ||
process.exit(1); | ||
} | ||
@@ -18,0 +18,0 @@ |
# Changelog | ||
## 0.1.5 | ||
### Updates | ||
- be able to change to Tree Style. | ||
- be able to change props visibility. | ||
- be able to change fileSize visibility. | ||
- be able to change lastUpdated visibility. | ||
- be able to change referenced count visibility. | ||
### Chores | ||
- \#31 update `ejs` | ||
- \#32 update `globby` | ||
- \#33 update `vue-eslint-parser` | ||
- \#34 update `ws` | ||
- \#42 update `commander` | ||
## 0.1.4 | ||
@@ -4,0 +22,0 @@ |
@@ -101,2 +101,8 @@ class MyCustomEvent { | ||
}; | ||
this._viewType = 'GRAPH'; | ||
this._visibleSettings = false; | ||
this._visibleProps = true; | ||
this._visibleFileSize = true; | ||
this._visibleLastUpdated = true; | ||
this._visibleReferenceCount = true; | ||
this.getHowManyDaysAgo = (date) => { | ||
@@ -117,5 +123,49 @@ const time = date.getTime(); | ||
} | ||
get viewType() { | ||
return this._viewType; | ||
} | ||
set viewType(value) { | ||
this._viewType = value; | ||
this.dispatchEvent(Model.EVENT.VIEW_CHANGED); | ||
} | ||
get visibleSettings() { | ||
return this._visibleSettings; | ||
} | ||
set visibleSettings(value) { | ||
this._visibleSettings = value; | ||
this.dispatchEvent(Model.EVENT.SETTING_CHANGED); | ||
} | ||
get visibleProps() { | ||
return this._visibleProps; | ||
} | ||
set visibleProps(value) { | ||
this._visibleProps = value; | ||
this.dispatchEvent(Model.EVENT.SETTING_CHANGED); | ||
} | ||
get visibleFileSize() { | ||
return this._visibleFileSize; | ||
} | ||
set visibleFileSize(value) { | ||
this._visibleFileSize = value; | ||
this.dispatchEvent(Model.EVENT.SETTING_CHANGED); | ||
} | ||
get visibleLastUpdated() { | ||
return this._visibleLastUpdated; | ||
} | ||
set visibleLastUpdated(value) { | ||
this._visibleLastUpdated = value; | ||
this.dispatchEvent(Model.EVENT.SETTING_CHANGED); | ||
} | ||
get visibleReferenceCount() { | ||
return this._visibleReferenceCount; | ||
} | ||
set visibleReferenceCount(value) { | ||
this._visibleReferenceCount = value; | ||
this.dispatchEvent(Model.EVENT.SETTING_CHANGED); | ||
} | ||
} | ||
Model.EVENT = { | ||
DATA_UPDATE: 'dataUpdate', | ||
VIEW_CHANGED: 'viewChanged', | ||
SETTING_CHANGED: 'settingChanged', | ||
}; | ||
@@ -150,4 +200,4 @@ | ||
return ` | ||
<span class="file__meta">FileSize: ${fileSize} KB</span> | ||
<span class="file__meta">LastUpdated: ${lastUpdated} days ago</span> | ||
<span class="file__meta meta__fileSize">FileSize: ${fileSize} KB</span> | ||
<span class="file__meta meta__lastUpdated">LastUpdated: ${lastUpdated} days ago</span> | ||
`; | ||
@@ -175,8 +225,8 @@ } | ||
return `<div class="seed${seedClassName}"> | ||
<span class="file"> | ||
<span class="filename"> | ||
<span class="file__text">${contents}</span> | ||
<div class="file"> | ||
<div class="filename"> | ||
<div class="file__text">${contents}</div> | ||
${this.getCountText()} | ||
</span> | ||
</span> | ||
</div> | ||
</div> | ||
${childHTML} | ||
@@ -207,9 +257,11 @@ </div>`; | ||
this.ready = () => { | ||
const { data } = this._model; | ||
const { entries } = data; | ||
for (let i = 0, len = entries.length; i < len; i++) { | ||
const entry = entries[i]; | ||
if (data) { | ||
const root = new Seed(entry, 0, this._model); | ||
this._tree.push(this.generateSeed(entry, root)); | ||
if ('GRAPH' === this._model.viewType) { | ||
const { data } = this._model; | ||
const { entries } = data; | ||
for (let i = 0, len = entries.length; i < len; i++) { | ||
const entry = entries[i]; | ||
if (data) { | ||
const root = new Seed(entry, 0, this._model); | ||
this._tree.push(this.generateSeed(entry, root)); | ||
} | ||
} | ||
@@ -237,10 +289,42 @@ } | ||
} | ||
renderLine(name, level, isLast) { | ||
let line = ' '; | ||
for (let i = 0; i < level; i++) { | ||
line += '│ '; | ||
} | ||
line += isLast ? '└─ ' : '├─ '; | ||
line += name; | ||
return `${line}\n`; | ||
} | ||
renderEntry(entry, level) { | ||
let result = ''; | ||
for (let i = 0, len = entry.children.length; i < len; i++) { | ||
const child = entry.children[i]; | ||
result += this.renderLine(child.name, level, i === (len - 1)); | ||
result += this.renderEntry(child, level + 1); | ||
} | ||
return result; | ||
} | ||
render() { | ||
let html = ''; | ||
for (let i = 0, len = this._tree.length; i < len; i++) { | ||
const [root] = this._tree[i]; | ||
html += root.render(); | ||
let result = ''; | ||
if ('GRAPH' === this._model.viewType) { | ||
for (let i = 0, len = this._tree.length; i < len; i++) { | ||
const [root] = this._tree[i]; | ||
result += root.render(); | ||
} | ||
} | ||
else if ('TEXT' === this._model.viewType) { | ||
const { entries } = this._model.data; | ||
for (let i = 0, len = entries.length; i < len; i++) { | ||
const entry = entries[i]; | ||
result += `${entry.name}\n`; | ||
result += this.renderEntry(entries[i], 0); | ||
if (i < len - 1) { | ||
result += '\n'; | ||
} | ||
} | ||
result = `<pre class="tree">${result}</pre>`; | ||
} | ||
const group = `<div class="root"> | ||
${html} | ||
${result} | ||
</div>`; | ||
@@ -253,2 +337,79 @@ if (this._app) { | ||
class VisibleSwitcher { | ||
constructor(_elm, _model) { | ||
this._elm = _elm; | ||
this._model = _model; | ||
this._type = _elm.dataset.settingName; | ||
_elm.addEventListener('change', this.onChange.bind(this)); | ||
} | ||
onChange() { | ||
switch (this._type) { | ||
case 'props': | ||
this._model.visibleProps = this._elm.checked; | ||
break; | ||
case 'fileSize': | ||
this._model.visibleFileSize = this._elm.checked; | ||
break; | ||
case 'lastUpdated': | ||
this._model.visibleLastUpdated = this._elm.checked; | ||
break; | ||
case 'referenceCount': | ||
this._model.visibleReferenceCount = this._elm.checked; | ||
break; | ||
default: | ||
throw new Error(`not supported type: ${this._type}`); | ||
} | ||
} | ||
} | ||
class ViewSwitcher { | ||
constructor(_elm, _type, _model) { | ||
this._elm = _elm; | ||
this._type = _type; | ||
this._model = _model; | ||
_elm.addEventListener('change', this.onChange.bind(this)); | ||
} | ||
onChange() { | ||
this._model.viewType = this._type; | ||
} | ||
} | ||
const setSettings = function (model) { | ||
const { body } = document; | ||
const btnSwitchSettings = document.getElementById('btn-settings'); | ||
const nodeListOfSwitch = body.querySelectorAll('.js-settings-toggle'); | ||
const switcherElmForGraph = document.getElementById('js-view-switch-graph'); | ||
const switcherElmForText = document.getElementById('js-view-switch-text'); | ||
new ViewSwitcher(switcherElmForGraph, 'GRAPH', model); | ||
new ViewSwitcher(switcherElmForText, 'TEXT', model); | ||
const onSettingsChanged = function () { | ||
body.className = ''; | ||
if (model.visibleSettings) { | ||
body.classList.add('show-settings'); | ||
} | ||
if (!model.visibleProps) { | ||
body.classList.add('no-props'); | ||
} | ||
if (!model.visibleFileSize) { | ||
body.classList.add('no-fileSize'); | ||
} | ||
if (!model.visibleLastUpdated) { | ||
body.classList.add('no-lastUpdated'); | ||
} | ||
if (!model.visibleReferenceCount) { | ||
body.classList.add('no-referenceCount'); | ||
} | ||
}; | ||
nodeListOfSwitch.forEach((node) => { | ||
new VisibleSwitcher(node, model); | ||
}); | ||
model.addEventListener(Model.EVENT.SETTING_CHANGED, onSettingsChanged); | ||
if (btnSwitchSettings) { | ||
btnSwitchSettings.addEventListener('click', () => { | ||
model.visibleSettings = !model.visibleSettings; | ||
}); | ||
} | ||
onSettingsChanged(); | ||
}; | ||
const model = new Model(); | ||
@@ -270,2 +431,3 @@ const renderer = new Renderer(model); | ||
model.data = msg; | ||
setSettings(model); | ||
}); | ||
@@ -277,1 +439,2 @@ } | ||
}); | ||
model.addEventListener(Model.EVENT.VIEW_CHANGED, () => renderer.render()); |
/*! | ||
@tkskto/vue-component-analyzer v0.1.4 | ||
@tkskto/vue-component-analyzer v0.2.0 | ||
https://github.com/tkskto/ | ||
Released under the MIT License. | ||
dependencies: | ||
commander -- 6.1.0 | ||
ejs -- 3.1.5 | ||
commander -- 7.1.0 | ||
ejs -- 3.1.6 | ||
express -- 4.17.1 | ||
globby -- 11.0.1 | ||
globby -- 11.0.2 | ||
mkdirp -- 1.0.4 | ||
opener -- 1.5.2 | ||
vue-eslint-parser -- 7.1.1 | ||
ws -- 7.3.1 | ||
vue-eslint-parser -- 7.6.0 | ||
ws -- 7.4.4 | ||
*/ | ||
@@ -26,3 +26,3 @@ 'use strict'; | ||
var mkdirp = require('mkdirp'); | ||
var commander = require('commander'); | ||
var require$$3 = require('commander'); | ||
var globby = require('globby'); | ||
@@ -41,3 +41,3 @@ | ||
var mkdirp__default = /*#__PURE__*/_interopDefaultLegacy(mkdirp); | ||
var commander__default = /*#__PURE__*/_interopDefaultLegacy(commander); | ||
var require$$3__default = /*#__PURE__*/_interopDefaultLegacy(require$$3); | ||
var globby__default = /*#__PURE__*/_interopDefaultLegacy(globby); | ||
@@ -47,16 +47,7 @@ | ||
function createCommonjsModule(fn, basedir, module) { | ||
return module = { | ||
path: basedir, | ||
exports: {}, | ||
require: function (path, base) { | ||
return commonjsRequire(path, (base === undefined || base === null) ? module.path : base); | ||
} | ||
}, fn(module, module.exports), module.exports; | ||
function createCommonjsModule(fn) { | ||
var module = { exports: {} }; | ||
return fn(module, module.exports), module.exports; | ||
} | ||
function commonjsRequire () { | ||
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs'); | ||
} | ||
var utils = createCommonjsModule(function (module, exports) { | ||
@@ -67,6 +58,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); | ||
const { resolve, extname, dirname } = path_1__default['default']; | ||
exports.getImportDeclaration = (nodeArr) => { | ||
const getImportDeclaration = (nodeArr) => { | ||
return nodeArr.filter((node) => node.type === 'ImportDeclaration'); | ||
}; | ||
exports.getDeclarationSyntax = (tokens, targetKeyName) => { | ||
exports.getImportDeclaration = getImportDeclaration; | ||
const getDeclarationSyntax = (tokens, targetKeyName) => { | ||
let isTargetToken = false; | ||
@@ -107,3 +99,4 @@ let result = '{'; | ||
}; | ||
exports.resolveFile = (_filename, _currentFileName) => { | ||
exports.getDeclarationSyntax = getDeclarationSyntax; | ||
const resolveFile = (_filename, _currentFileName) => { | ||
let filename = ''; | ||
@@ -134,2 +127,3 @@ if (_filename.startsWith('../')) { | ||
}; | ||
exports.resolveFile = resolveFile; | ||
}); | ||
@@ -282,6 +276,2 @@ | ||
var server = createCommonjsModule(function (module, exports) { | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
const { renderFile } = require$$0__default['default']; | ||
@@ -292,3 +282,3 @@ | ||
const projectRoot = path_1__default['default'].resolve(__dirname, '..'); | ||
const startServer = (port, json) => { | ||
const startServer$1 = (port, json) => { | ||
const HOST = '127.0.0.1'; | ||
@@ -327,5 +317,8 @@ const app = express__default['default'](); | ||
}; | ||
exports.startServer = startServer; | ||
}); | ||
var startServer_1 = startServer$1; | ||
var server = /*#__PURE__*/Object.defineProperty({ | ||
startServer: startServer_1 | ||
}, '__esModule', {value: true}); | ||
var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
@@ -345,4 +338,4 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
const { program } = require$$3__default['default']; | ||
const FORMAT = { | ||
@@ -363,8 +356,10 @@ BROWSER: 'browser', | ||
(() => __awaiter(void 0, void 0, void 0, function* () { | ||
console.log('start analyzing.'); | ||
try { | ||
commander__default['default'].option('--dir [dir]', 'root directory of src.', 'src'); | ||
commander__default['default'].option('-f, --format [type]', 'Add the specified type of report [browser, json or both]', FORMAT.BROWSER); | ||
commander__default['default'].option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "both")', 'out'); | ||
commander__default['default'].option('-p, --port [number]', 'select a port number for the local server', '8888'); | ||
const argv = commander__default['default'].parse(process.argv); | ||
program.option('--dir [dir]', 'root directory of src.', 'src'); | ||
program.option('-f, --format [type]', 'Add the specified type of report [browser, json or both]', FORMAT.BROWSER); | ||
program.option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "both")', 'out'); | ||
program.option('-p, --port [number]', 'select a port number for the local server', '8888'); | ||
program.parse(process.argv); | ||
const argv = program.opts(); | ||
if (argv.format !== FORMAT.BROWSER && argv.format !== FORMAT.JSON && argv.format !== FORMAT.BOTH) { | ||
@@ -371,0 +366,0 @@ console.error(`not support ${argv.format} format.`); |
{ | ||
"name": "@tkskto/vue-component-analyzer", | ||
"version": "0.1.4", | ||
"version": "0.2.0", | ||
"description": "Analyze dependency tree for Vue.js SFC (Single File Component)", | ||
@@ -48,33 +48,33 @@ "main": "dist/index.js", | ||
"dependencies": { | ||
"commander": "6.1.0", | ||
"ejs": "3.1.5", | ||
"commander": "7.1.0", | ||
"ejs": "3.1.6", | ||
"express": "4.17.1", | ||
"globby": "11.0.1", | ||
"globby": "11.0.2", | ||
"mkdirp": "1.0.4", | ||
"opener": "1.5.2", | ||
"vue-eslint-parser": "7.1.1", | ||
"ws": "7.3.1" | ||
"vue-eslint-parser": "7.6.0", | ||
"ws": "7.4.4" | ||
}, | ||
"devDependencies": { | ||
"@mitsue/eslint-config": "3.0.0", | ||
"@rollup/plugin-commonjs": "15.1.0", | ||
"@rollup/plugin-commonjs": "17.1.0", | ||
"@rollup/plugin-json": "4.1.0", | ||
"@rollup/plugin-node-resolve": "9.0.0", | ||
"@rollup/plugin-typescript": "6.0.0", | ||
"@types/express": "4.17.8", | ||
"@types/mocha": "8.0.3", | ||
"@types/node": "14.11.8", | ||
"@rollup/plugin-node-resolve": "11.2.0", | ||
"@rollup/plugin-typescript": "8.2.0", | ||
"@types/express": "4.17.11", | ||
"@types/mocha": "8.2.2", | ||
"@types/node": "14.14.35", | ||
"@types/opener": "1.4.0", | ||
"@types/ws": "7.2.7", | ||
"@typescript-eslint/eslint-plugin": "4.4.1", | ||
"@typescript-eslint/parser": "4.4.1", | ||
"eslint": "7.11.0", | ||
"husky": "4.3.0", | ||
"lint-staged": "10.4.0", | ||
"mocha": "8.1.3", | ||
"@types/ws": "7.4.0", | ||
"@typescript-eslint/eslint-plugin": "4.18.0", | ||
"@typescript-eslint/parser": "4.18.0", | ||
"eslint": "7.22.0", | ||
"husky": "4.3.8", | ||
"lint-staged": "10.5.4", | ||
"mocha": "8.3.2", | ||
"nyc": "15.1.0", | ||
"rollup": "2.30.0", | ||
"rollup-plugin-license": "2.2.0", | ||
"ts-mocha": "7.0.0", | ||
"typescript": "4.0.3" | ||
"rollup": "2.42.1", | ||
"rollup-plugin-license": "2.3.0", | ||
"ts-mocha": "8.0.0", | ||
"typescript": "4.2.3" | ||
}, | ||
@@ -81,0 +81,0 @@ "lint-staged": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
40221
1044
+ Addedcommander@7.1.0(transitive)
+ Addedejs@3.1.6(transitive)
+ Addedglobby@11.0.2(transitive)
+ Addedvue-eslint-parser@7.6.0(transitive)
+ Addedws@7.4.4(transitive)
- Removedcommander@6.1.0(transitive)
- Removedejs@3.1.5(transitive)
- Removedglobby@11.0.1(transitive)
- Removedvue-eslint-parser@7.1.1(transitive)
- Removedws@7.3.1(transitive)
Updatedcommander@7.1.0
Updatedejs@3.1.6
Updatedglobby@11.0.2
Updatedvue-eslint-parser@7.6.0
Updatedws@7.4.4