tz-clean 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.dependency-cruiser.cjs +94 -94
- package/.github/workflows/ci.yml +42 -42
- package/.husky/commit-msg +1 -1
- package/.husky/pre-commit +1 -1
- package/.husky/pre-push +3 -3
- package/.prettierrc +9 -9
- package/README-DEV.md +123 -123
- package/README-USER.md +56 -56
- package/README.md +16 -16
- package/__tests__/cli.test.js +8 -8
- package/commitlint.config.js +1 -1
- package/cspell.json +33 -33
- package/eslint.config.mjs +52 -52
- package/index.js +262 -261
- package/knip.json +5 -5
- package/package.json +67 -67
- package/report-template.html +357 -357
- package/tsconfig.json +16 -16
- package/.tz-clean-report.html +0 -413
package/.dependency-cruiser.cjs
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
/** @type {import('dependency-cruiser').IConfiguration} */
|
|
2
|
-
module.exports = {
|
|
3
|
-
forbidden: [
|
|
4
|
-
{
|
|
5
|
-
comment: 'This dependency is part of a circular relationship.',
|
|
6
|
-
from: {},
|
|
7
|
-
name: 'no-circular',
|
|
8
|
-
severity: 'error',
|
|
9
|
-
to: { circular: true },
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
comment: "This is an orphan module - it's likely not used.",
|
|
13
|
-
from: { orphan: true },
|
|
14
|
-
name: 'no-orphans',
|
|
15
|
-
severity: 'info',
|
|
16
|
-
to: {},
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
comment: 'A module depends on a node core module that has been deprecated.',
|
|
20
|
-
from: {},
|
|
21
|
-
name: 'no-deprecated-core',
|
|
22
|
-
severity: 'warn',
|
|
23
|
-
to: {
|
|
24
|
-
dependencyTypes: ['core'],
|
|
25
|
-
path: [
|
|
26
|
-
'^v8/tools/codemap$',
|
|
27
|
-
'^v8/tools/consarray$',
|
|
28
|
-
'^v8/tools/csvparser$',
|
|
29
|
-
'^v8/tools/logreader$',
|
|
30
|
-
'^v8/tools/profile_view$',
|
|
31
|
-
'^v8/tools/profile$',
|
|
32
|
-
'^v8/tools/SourceMap$',
|
|
33
|
-
'^v8/tools/splaytree$',
|
|
34
|
-
'^v8/tools/tickprocessor-driver$',
|
|
35
|
-
'^v8/tools/tickprocessor$',
|
|
36
|
-
'^node-inspect/lib/_inspect$',
|
|
37
|
-
'^node-inspect/lib/internal/inspect_client$',
|
|
38
|
-
'^node-inspect/lib/internal/inspect_repl$',
|
|
39
|
-
'^async_hooks$',
|
|
40
|
-
'^assert$',
|
|
41
|
-
'^punycode$',
|
|
42
|
-
'^domain$',
|
|
43
|
-
'^constants$',
|
|
44
|
-
'^sys$',
|
|
45
|
-
'^_linklist$',
|
|
46
|
-
'^_stream_wrap$',
|
|
47
|
-
],
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
comment: 'This module depends on a module that cannot be found.',
|
|
52
|
-
from: {},
|
|
53
|
-
name: 'not-to-unresolvable',
|
|
54
|
-
severity: 'error',
|
|
55
|
-
to: { couldNotResolve: true },
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
comment:
|
|
59
|
-
'Likely this module depends on an external npm package that occurs more than once in your package.json i.e. bot as a devDependencies and in dependencies.',
|
|
60
|
-
from: {},
|
|
61
|
-
name: 'no-duplicate-dep-types',
|
|
62
|
-
severity: 'warn',
|
|
63
|
-
to: { dependencyTypesNot: ['type-only'], moreThanOneDependencyType: true },
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
comment:
|
|
67
|
-
"This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. If there's something in a spec that's of use to other modules, it doesn't belong in that spec. Please move it to a safe utility module elsewhere.",
|
|
68
|
-
from: {},
|
|
69
|
-
name: 'not-to-spec',
|
|
70
|
-
severity: 'error',
|
|
71
|
-
to: { path: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$' },
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
comment:
|
|
75
|
-
'This module depends on an npm package from the "devDependencies" section of your package.json. It looks like something that ships to production, though.',
|
|
76
|
-
from: { path: '^(src|index\\.js)' },
|
|
77
|
-
name: 'not-to-dev-dep',
|
|
78
|
-
severity: 'error',
|
|
79
|
-
to: { dependencyTypes: ['npm-dev'] },
|
|
80
|
-
},
|
|
81
|
-
],
|
|
82
|
-
options: {
|
|
83
|
-
doNotFollow: { path: 'node_modules' },
|
|
84
|
-
enhancedResolveOptions: {
|
|
85
|
-
conditionNames: ['import', 'require', 'node', 'default'],
|
|
86
|
-
exportsFields: ['exports'],
|
|
87
|
-
},
|
|
88
|
-
reporterOptions: {
|
|
89
|
-
archi: { collapsePattern: '^(packages|src|lib|app|bin|test(s?)|__tests__|__mocks__)/[^/]+' },
|
|
90
|
-
dot: { collapsePattern: 'node_modules/[^/]+' },
|
|
91
|
-
},
|
|
92
|
-
tsPreCompilationDeps: true,
|
|
93
|
-
},
|
|
94
|
-
};
|
|
1
|
+
/** @type {import('dependency-cruiser').IConfiguration} */
|
|
2
|
+
module.exports = {
|
|
3
|
+
forbidden: [
|
|
4
|
+
{
|
|
5
|
+
comment: 'This dependency is part of a circular relationship.',
|
|
6
|
+
from: {},
|
|
7
|
+
name: 'no-circular',
|
|
8
|
+
severity: 'error',
|
|
9
|
+
to: { circular: true },
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
comment: "This is an orphan module - it's likely not used.",
|
|
13
|
+
from: { orphan: true },
|
|
14
|
+
name: 'no-orphans',
|
|
15
|
+
severity: 'info',
|
|
16
|
+
to: {},
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
comment: 'A module depends on a node core module that has been deprecated.',
|
|
20
|
+
from: {},
|
|
21
|
+
name: 'no-deprecated-core',
|
|
22
|
+
severity: 'warn',
|
|
23
|
+
to: {
|
|
24
|
+
dependencyTypes: ['core'],
|
|
25
|
+
path: [
|
|
26
|
+
'^v8/tools/codemap$',
|
|
27
|
+
'^v8/tools/consarray$',
|
|
28
|
+
'^v8/tools/csvparser$',
|
|
29
|
+
'^v8/tools/logreader$',
|
|
30
|
+
'^v8/tools/profile_view$',
|
|
31
|
+
'^v8/tools/profile$',
|
|
32
|
+
'^v8/tools/SourceMap$',
|
|
33
|
+
'^v8/tools/splaytree$',
|
|
34
|
+
'^v8/tools/tickprocessor-driver$',
|
|
35
|
+
'^v8/tools/tickprocessor$',
|
|
36
|
+
'^node-inspect/lib/_inspect$',
|
|
37
|
+
'^node-inspect/lib/internal/inspect_client$',
|
|
38
|
+
'^node-inspect/lib/internal/inspect_repl$',
|
|
39
|
+
'^async_hooks$',
|
|
40
|
+
'^assert$',
|
|
41
|
+
'^punycode$',
|
|
42
|
+
'^domain$',
|
|
43
|
+
'^constants$',
|
|
44
|
+
'^sys$',
|
|
45
|
+
'^_linklist$',
|
|
46
|
+
'^_stream_wrap$',
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
comment: 'This module depends on a module that cannot be found.',
|
|
52
|
+
from: {},
|
|
53
|
+
name: 'not-to-unresolvable',
|
|
54
|
+
severity: 'error',
|
|
55
|
+
to: { couldNotResolve: true },
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
comment:
|
|
59
|
+
'Likely this module depends on an external npm package that occurs more than once in your package.json i.e. bot as a devDependencies and in dependencies.',
|
|
60
|
+
from: {},
|
|
61
|
+
name: 'no-duplicate-dep-types',
|
|
62
|
+
severity: 'warn',
|
|
63
|
+
to: { dependencyTypesNot: ['type-only'], moreThanOneDependencyType: true },
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
comment:
|
|
67
|
+
"This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. If there's something in a spec that's of use to other modules, it doesn't belong in that spec. Please move it to a safe utility module elsewhere.",
|
|
68
|
+
from: {},
|
|
69
|
+
name: 'not-to-spec',
|
|
70
|
+
severity: 'error',
|
|
71
|
+
to: { path: '\\.(spec|test)\\.(js|mjs|cjs|ts|ls|coffee|litcoffee|coffee\\.md)$' },
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
comment:
|
|
75
|
+
'This module depends on an npm package from the "devDependencies" section of your package.json. It looks like something that ships to production, though.',
|
|
76
|
+
from: { path: '^(src|index\\.js)' },
|
|
77
|
+
name: 'not-to-dev-dep',
|
|
78
|
+
severity: 'error',
|
|
79
|
+
to: { dependencyTypes: ['npm-dev'] },
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
options: {
|
|
83
|
+
doNotFollow: { path: 'node_modules' },
|
|
84
|
+
enhancedResolveOptions: {
|
|
85
|
+
conditionNames: ['import', 'require', 'node', 'default'],
|
|
86
|
+
exportsFields: ['exports'],
|
|
87
|
+
},
|
|
88
|
+
reporterOptions: {
|
|
89
|
+
archi: { collapsePattern: '^(packages|src|lib|app|bin|test(s?)|__tests__|__mocks__)/[^/]+' },
|
|
90
|
+
dot: { collapsePattern: 'node_modules/[^/]+' },
|
|
91
|
+
},
|
|
92
|
+
tsPreCompilationDeps: true,
|
|
93
|
+
},
|
|
94
|
+
};
|
package/.github/workflows/ci.yml
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
name: CI
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
branches: ['main']
|
|
6
|
-
pull_request:
|
|
7
|
-
branches: ['main']
|
|
8
|
-
|
|
9
|
-
jobs:
|
|
10
|
-
build:
|
|
11
|
-
runs-on: ubuntu-latest
|
|
12
|
-
|
|
13
|
-
strategy:
|
|
14
|
-
matrix:
|
|
15
|
-
node-version: [18.x, 20.x, 22.x]
|
|
16
|
-
|
|
17
|
-
steps:
|
|
18
|
-
- uses: actions/checkout@v4
|
|
19
|
-
|
|
20
|
-
- name: Use Node.js ${{ matrix.node-version }}
|
|
21
|
-
uses: actions/setup-node@v4
|
|
22
|
-
with:
|
|
23
|
-
node-version: ${{ matrix.node-version }}
|
|
24
|
-
cache: 'npm'
|
|
25
|
-
|
|
26
|
-
- name: Install dependencies
|
|
27
|
-
run: npm ci
|
|
28
|
-
|
|
29
|
-
- name: Run Typecheck
|
|
30
|
-
run: npm run typecheck
|
|
31
|
-
|
|
32
|
-
- name: Run Linter
|
|
33
|
-
run: npm run lint
|
|
34
|
-
|
|
35
|
-
- name: Run Architecture Validation (Dependency Cruiser)
|
|
36
|
-
run: npm run cruise
|
|
37
|
-
|
|
38
|
-
- name: Run Code Spell Checker
|
|
39
|
-
run: npm run spellcheck
|
|
40
|
-
|
|
41
|
-
- name: Run Tests
|
|
42
|
-
run: npm run test
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: ['main']
|
|
6
|
+
pull_request:
|
|
7
|
+
branches: ['main']
|
|
8
|
+
|
|
9
|
+
jobs:
|
|
10
|
+
build:
|
|
11
|
+
runs-on: ubuntu-latest
|
|
12
|
+
|
|
13
|
+
strategy:
|
|
14
|
+
matrix:
|
|
15
|
+
node-version: [18.x, 20.x, 22.x]
|
|
16
|
+
|
|
17
|
+
steps:
|
|
18
|
+
- uses: actions/checkout@v4
|
|
19
|
+
|
|
20
|
+
- name: Use Node.js ${{ matrix.node-version }}
|
|
21
|
+
uses: actions/setup-node@v4
|
|
22
|
+
with:
|
|
23
|
+
node-version: ${{ matrix.node-version }}
|
|
24
|
+
cache: 'npm'
|
|
25
|
+
|
|
26
|
+
- name: Install dependencies
|
|
27
|
+
run: npm ci
|
|
28
|
+
|
|
29
|
+
- name: Run Typecheck
|
|
30
|
+
run: npm run typecheck
|
|
31
|
+
|
|
32
|
+
- name: Run Linter
|
|
33
|
+
run: npm run lint
|
|
34
|
+
|
|
35
|
+
- name: Run Architecture Validation (Dependency Cruiser)
|
|
36
|
+
run: npm run cruise
|
|
37
|
+
|
|
38
|
+
- name: Run Code Spell Checker
|
|
39
|
+
run: npm run spellcheck
|
|
40
|
+
|
|
41
|
+
- name: Run Tests
|
|
42
|
+
run: npm run test
|
package/.husky/commit-msg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
npx --no-install commitlint --edit "$1"
|
|
1
|
+
npx --no-install commitlint --edit "$1"
|
package/.husky/pre-commit
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
npx lint-staged
|
|
1
|
+
npx lint-staged
|
package/.husky/pre-push
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
npm run test
|
|
2
|
-
npm run cruise
|
|
3
|
-
npm run spellcheck
|
|
1
|
+
npm run test
|
|
2
|
+
npm run cruise
|
|
3
|
+
npm run spellcheck
|
package/.prettierrc
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
{
|
|
2
|
-
"semi": true,
|
|
3
|
-
"trailingComma": "all",
|
|
4
|
-
"singleQuote": true,
|
|
5
|
-
"printWidth": 120,
|
|
6
|
-
"tabWidth": 2,
|
|
7
|
-
"bracketSameLine": true,
|
|
8
|
-
"htmlWhitespaceSensitivity": "ignore"
|
|
9
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"semi": true,
|
|
3
|
+
"trailingComma": "all",
|
|
4
|
+
"singleQuote": true,
|
|
5
|
+
"printWidth": 120,
|
|
6
|
+
"tabWidth": 2,
|
|
7
|
+
"bracketSameLine": true,
|
|
8
|
+
"htmlWhitespaceSensitivity": "ignore"
|
|
9
|
+
}
|
package/README-DEV.md
CHANGED
|
@@ -1,123 +1,123 @@
|
|
|
1
|
-
# Developer Guide: tz-clean 🛠️
|
|
2
|
-
|
|
3
|
-
This guide is for developers who want to contribute to the `tz-clean` project, test it locally, or publish it to the npm registry.
|
|
4
|
-
|
|
5
|
-
## Local Development (For Contributors)
|
|
6
|
-
|
|
7
|
-
If you are modifying this tool and want to test it locally, clone the repository and install dependencies:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
### Available Scripts
|
|
14
|
-
|
|
15
|
-
You can run the individual scripts locally within this repository:
|
|
16
|
-
|
|
17
|
-
- `npm run format`: Runs Prettier.
|
|
18
|
-
- `npm run lint`: Runs ESLint without auto-fixing.
|
|
19
|
-
- `npm run lint:fix`: Runs ESLint with auto-fixing.
|
|
20
|
-
- `npm run typecheck`: Runs TypeScript type validation.
|
|
21
|
-
- `npm run fix`: Runs format, lint:fix, and typecheck sequentially.
|
|
22
|
-
|
|
23
|
-
## Testing the CLI Locally
|
|
24
|
-
|
|
25
|
-
Before publishing, you should test the global CLI command locally on your computer.
|
|
26
|
-
|
|
27
|
-
1. Open a terminal inside this project folder (`tz-clean`).
|
|
28
|
-
2. Run this command to install your package globally from the local folder:
|
|
29
|
-
```bash
|
|
30
|
-
npm install -g .
|
|
31
|
-
```
|
|
32
|
-
_(Alternatively, you can use `npm link`)_
|
|
33
|
-
3. Open another folder/repo in your terminal, and type the command:
|
|
34
|
-
```bash
|
|
35
|
-
tz-clean
|
|
36
|
-
```
|
|
37
|
-
If it runs successfully, your configuration is correct.
|
|
38
|
-
|
|
39
|
-
## Publishing to the NPM Registry
|
|
40
|
-
|
|
41
|
-
To make the package available via `npm install -g tz-clean` on any computer, you must publish it to the NPM Registry.
|
|
42
|
-
|
|
43
|
-
1. **Create an NPM account**: If you don't have one, register at [npmjs.com](https://www.npmjs.com/).
|
|
44
|
-
2. **Login via Terminal**: Run `npm login` and enter your account credentials.
|
|
45
|
-
3. **Publish**: Run the `npm publish` command inside your project folder.
|
|
46
|
-
|
|
47
|
-
### Important Note on Package Names
|
|
48
|
-
|
|
49
|
-
The package name `tz-clean` is very common and likely already taken in the NPM registry. If it is, `npm publish` will fail with a `403 Forbidden` or `Conflict` error.
|
|
50
|
-
|
|
51
|
-
If this happens, use a **Scoped Package**:
|
|
52
|
-
|
|
53
|
-
1. Change `"name"` in `package.json` to `@your-npm-username/tz-clean` (example: `@terzogenito/tz-clean`).
|
|
54
|
-
2. Run `npm publish --access public`.
|
|
55
|
-
3. The install command will become `npm install -g @your-username/tz-clean`.
|
|
56
|
-
4. The executable command in the terminal will remain `tz-clean`, as defined in the `"bin"` property of `package.json`.
|
|
57
|
-
|
|
58
|
-
## Future Development / Roadmap
|
|
59
|
-
|
|
60
|
-
To further improve code quality and the development workflow, the following features are planned for future integration into this tool or as recommendations for target projects:
|
|
61
|
-
|
|
62
|
-
1. **Git Hooks & `lint-staged` (Husky)**: Automating `tz-clean` to run only on staged files before every `git commit`, preventing dirty code from entering the repository.
|
|
63
|
-
2. **Testing Framework (Vitest / Jest)**: Adding unit and integration tests to ensure the CLI itself and target applications function correctly.
|
|
64
|
-
3. **Commitlint**: Enforcing _Conventional Commits_ to standardize git history and enable automated `CHANGELOG.md` generation.
|
|
65
|
-
4. **CI/CD Pipelines (GitHub Actions)**: Setting up automated workflows to run linting, formatting, and tests on every Push or Pull Request.
|
|
66
|
-
5. **CSpell**: Integrating a code spelling checker to catch typos in variables, comments, and strings.
|
|
67
|
-
6. **Security & Dependency Audit**: Incorporating automated security checks (like `npm audit` or Dependabot) to keep dependencies secure and up-to-date.
|
|
68
|
-
|
|
69
|
-
### Advanced Static Code Analysis (Code Smells & Architecture)
|
|
70
|
-
|
|
71
|
-
Untuk mendeteksi _spaghetti code_, fungsi berulang, dan pelanggaran prinsip _clean code_ (seperti SOLID), fitur berikut dapat ditambahkan di masa depan:
|
|
72
|
-
|
|
73
|
-
1. **SonarJS (`eslint-plugin-sonarjs`)**: Mendeteksi kode yang terlalu kompleks (_spaghetti code_), _bug_ tersembunyi, dan logika yang tidak efisien berdasarkan standar SonarQube.
|
|
74
|
-
2. **Knip**: Alat khusus untuk mendeteksi _unused files_, _unused exports_, dan _unused dependencies_. Sangat ampuh untuk membersihkan _boilerplate_ dan definisi yang tidak pernah dipakai.
|
|
75
|
-
3. **Copy/Paste Detector (`jscpd`)**: Secara programatis mendeteksi blok kode atau fungsi yang diduplikasi/di- _copy-paste_ di berbagai file (mencegah _un-reusable function_).
|
|
76
|
-
4. **Cyclomatic Complexity Limits**: Menerapkan batasan kompleksitas maksimum pada fungsi (via ESLint `complexity` rule) untuk memastikan penerapan _Single Responsibility Principle_ (SRP) dari SOLID.
|
|
77
|
-
|
|
78
|
-
### The "Ultimate Perfection" (Architecture & Reliability)
|
|
79
|
-
|
|
80
|
-
Untuk mencapai level "sempurna" secara rekayasa perangkat lunak (Software Engineering), beberapa lapisan validasi tingkat lanjut ini dapat diterapkan:
|
|
81
|
-
|
|
82
|
-
1. **Dependency Cruiser**: Mengamankan arsitektur proyek (seperti _Clean Architecture_). Mencegah pelanggaran aturan dependensi (contoh: _UI layer_ dilarang _import_ langsung dari _Database layer_) dan mendeteksi dependensi melingkar (_circular dependencies_).
|
|
83
|
-
2. **Mutation Testing (Stryker)**: "Menguji unit test Anda". Tool ini secara sengaja menyuntikkan _bug_ kecil ke dalam kode (mutasi). Jika _unit test_ Anda tetap berstatus "Lulus" (Pass) padahal ada _bug_, berarti test Anda lemah. Ini menjamin kualitas _test suite_ yang absolut.
|
|
84
|
-
3. **Bundle Size Limit (`size-limit`)**: Terutama untuk aplikasi Frontend atau Library, ini akan membatalkan _commit/build_ jika perubahan kode membuat ukuran aplikasi melebihi batas performa kilobyte yang diizinkan.
|
|
85
|
-
4. **Documentation Enforcement (`eslint-plugin-jsdoc`)**: Memaksa agar setiap _function_, parameter, dan tipe data memiliki komentar penjelasan (JSDoc/TSDoc) yang standar, sehingga kode 100% terdokumentasi dengan baik.
|
|
86
|
-
|
|
87
|
-
### Micro-level Formatting & Strict Conventions
|
|
88
|
-
|
|
89
|
-
Untuk mencapai keteraturan tingkat mikroskopis (penamaan, pengurutan, dan struktur file), fitur-fitur ini sangat direkomendasikan:
|
|
90
|
-
|
|
91
|
-
1. **Strict Naming Conventions (`@typescript-eslint/naming-convention`)**: Memaksa aturan penamaan yang mutlak. Contoh: _Class_ wajib `PascalCase`, variabel `camelCase`, konstanta `UPPER_CASE`. Juga dapat digunakan untuk melarang penggunaan nama variabel yang tidak jelas seperti `data`, `temp`, `info`, atau `val`.
|
|
92
|
-
2. **Absolute Sorting (`eslint-plugin-perfectionist` / `simple-import-sort`)**: Alat ini akan secara otomatis (via `--fix`) mengurutkan semua baris kode Anda sesuai abjad atau logika:
|
|
93
|
-
- Mengurutkan dan mengelompokkan `import` di bagian atas file.
|
|
94
|
-
- Mengurutkan _keys_ (kunci) di dalam suatu _Object_ atau _Interface_.
|
|
95
|
-
- Mengurutkan urutan _method/function_ di dalam sebuah _Class_ (misal: _constructor_ di atas, fungsi _public_ di tengah, _private_ di bawah).
|
|
96
|
-
3. **File Structure & Boundaries (`eslint-plugin-project-structure`)**: Memaksa konsistensi struktur folder proyek. Misalnya, memaksa agar semua file test (`*.test.js`) wajib berada di folder `__tests__`, atau komponen _frontend_ dilarang berada di luar folder `components/`. Ini membuat proses _refactoring_ file menjadi sangat tertib.
|
|
97
|
-
|
|
98
|
-
### Dependency Management & Security Monitoring
|
|
99
|
-
|
|
100
|
-
Untuk memastikan paket (_packages/libraries_) yang Anda gunakan selalu stabil, aman dari _hacker_ (bebas _vulnerability_), dan mutakhir (_up-to-date_):
|
|
101
|
-
|
|
102
|
-
1. **`npm-check-updates` (ncu)**: Alat CLI interaktif untuk mengecek secara spesifik mana saja _library_ di `package.json` yang sudah usang (_outdated_), lalu membantu Anda meng-upgrade versinya ke versi stabil terbaru tanpa merusak proyek.
|
|
103
|
-
2. **Dependabot / Renovate Bot**: Bot otomatis (biasanya di GitHub/GitLab) yang bekerja 24/7 di latar belakang. Jika ada versi _library_ baru atau jika ada _bug_ keamanan yang baru ditemukan pada versi yang Anda gunakan, bot ini akan langsung membuatkan _Pull Request_ otomatis untuk memperbaruinya.
|
|
104
|
-
3. **Snyk**: Standar industri tingkat _Enterprise_ untuk keamanan _open-source_. Snyk akan memindai seluruh rantai _dependencies_ Anda (bahkan _library_ di dalam _library_), menemukan kerentanan (_vulnerabilities_), dan mendeteksi apakah lisensi _library_ tersebut legal untuk digunakan.
|
|
105
|
-
4. **`npm audit`**: Fitur bawaan NPM yang akan memberikan peringatan (dan solusi `npm audit fix`) apabila terdapat _library_ yang terjangkit laporan cacat keamanan (CVE - _Common Vulnerabilities and Exposures_).
|
|
106
|
-
|
|
107
|
-
### UI Dashboards & Visual Reports
|
|
108
|
-
|
|
109
|
-
Jika Anda ingin alat CLI Anda tidak hanya mencetak teks di terminal, tetapi juga menghasilkan laporan visual berbasis web (UI) yang indah mengenai kesehatan kode:
|
|
110
|
-
|
|
111
|
-
1. **Plato (Code Complexity Dashboard)**: Tool ini membaca kode JavaScript/TypeScript Anda dan menghasilkan laporan HTML statis yang indah. Anda bisa melihat grafik _maintainability_ (skor kemudahan _maintenance_), ukuran file, dan kompleksitas per file dalam bentuk grafik interaktif.
|
|
112
|
-
2. **SonarQube / SonarCloud Dashboard**: Jika Anda menghubungkan proyek Anda ke SonarCloud, Anda akan mendapatkan sebuah _Dashboard UI_ profesional yang melacak _Technical Debt_ (Berapa hari/jam yang dibutuhkan untuk memperbaiki semua kode buruk), jumlah _code smells_, dan tingkat keandalan kode dari waktu ke waktu.
|
|
113
|
-
3. **Istanbul / NYC (Test Coverage UI)**: Menghasilkan sebuah _website_ HTML mini di komputer pengguna yang menampilkan secara persis baris kode mana saja yang berwarna merah (belum dites) dan baris mana yang berwarna hijau (sudah dilewati oleh _Unit Test_).
|
|
114
|
-
4. **Webpack Bundle Analyzer / Statoscope**: Menghasilkan UI berupa peta interaktif (TreeMap) yang memperlihatkan _library_ mana saja yang menyedot kapasitas memori aplikasi Anda paling besar, sehingga memudahkan pengguna untuk memangkas _library_ yang berat.
|
|
115
|
-
|
|
116
|
-
### Custom UI Reporting Architecture (No 3rd Party UI Modules)
|
|
117
|
-
|
|
118
|
-
Jika Anda ingin membangun UI analisis kode 100% buatan sendiri (tanpa modul pihak ketiga seperti Plato/SonarQube), CLI `tz-clean` dapat merakit laporannya sendiri dengan arsitektur berikut:
|
|
119
|
-
|
|
120
|
-
1. **Data Extraction (Node.js API)**: CLI mengeksekusi ESLint API dan TypeScript Compiler API secara internal (_programmatically_), lalu menangkap _output error/warnings/complexity_ dalam format JSON asli, bukan teks string ke terminal.
|
|
121
|
-
2. **Template Injector**: Anda membuat template `index.html`, `style.css`, dan `app.js` mentah di dalam _source code_ CLI Anda.
|
|
122
|
-
3. **HTML Generation**: CLI akan membaca file JSON hasil analisis, lalu "menyuntikkannya" (inject) ke dalam tag `<script> const reportData = {...} </script>` di dalam template HTML buatan Anda.
|
|
123
|
-
4. **Auto-Launch Browser**: CLI kemudian menyimpan `report.html` tersebut di folder sementara (sementara/lokal) pengguna, lalu menggunakan modul Node.js (misal: eksekusi command `start` di Windows atau `open` di Mac) untuk otomatis membuka _file_ HTML tersebut di browser bawaan pengguna.
|
|
1
|
+
# Developer Guide: tz-clean 🛠️
|
|
2
|
+
|
|
3
|
+
This guide is for developers who want to contribute to the `tz-clean` project, test it locally, or publish it to the npm registry.
|
|
4
|
+
|
|
5
|
+
## Local Development (For Contributors)
|
|
6
|
+
|
|
7
|
+
If you are modifying this tool and want to test it locally, clone the repository and install dependencies:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Available Scripts
|
|
14
|
+
|
|
15
|
+
You can run the individual scripts locally within this repository:
|
|
16
|
+
|
|
17
|
+
- `npm run format`: Runs Prettier.
|
|
18
|
+
- `npm run lint`: Runs ESLint without auto-fixing.
|
|
19
|
+
- `npm run lint:fix`: Runs ESLint with auto-fixing.
|
|
20
|
+
- `npm run typecheck`: Runs TypeScript type validation.
|
|
21
|
+
- `npm run fix`: Runs format, lint:fix, and typecheck sequentially.
|
|
22
|
+
|
|
23
|
+
## Testing the CLI Locally
|
|
24
|
+
|
|
25
|
+
Before publishing, you should test the global CLI command locally on your computer.
|
|
26
|
+
|
|
27
|
+
1. Open a terminal inside this project folder (`tz-clean`).
|
|
28
|
+
2. Run this command to install your package globally from the local folder:
|
|
29
|
+
```bash
|
|
30
|
+
npm install -g .
|
|
31
|
+
```
|
|
32
|
+
_(Alternatively, you can use `npm link`)_
|
|
33
|
+
3. Open another folder/repo in your terminal, and type the command:
|
|
34
|
+
```bash
|
|
35
|
+
tz-clean
|
|
36
|
+
```
|
|
37
|
+
If it runs successfully, your configuration is correct.
|
|
38
|
+
|
|
39
|
+
## Publishing to the NPM Registry
|
|
40
|
+
|
|
41
|
+
To make the package available via `npm install -g tz-clean` on any computer, you must publish it to the NPM Registry.
|
|
42
|
+
|
|
43
|
+
1. **Create an NPM account**: If you don't have one, register at [npmjs.com](https://www.npmjs.com/).
|
|
44
|
+
2. **Login via Terminal**: Run `npm login` and enter your account credentials.
|
|
45
|
+
3. **Publish**: Run the `npm publish` command inside your project folder.
|
|
46
|
+
|
|
47
|
+
### Important Note on Package Names
|
|
48
|
+
|
|
49
|
+
The package name `tz-clean` is very common and likely already taken in the NPM registry. If it is, `npm publish` will fail with a `403 Forbidden` or `Conflict` error.
|
|
50
|
+
|
|
51
|
+
If this happens, use a **Scoped Package**:
|
|
52
|
+
|
|
53
|
+
1. Change `"name"` in `package.json` to `@your-npm-username/tz-clean` (example: `@terzogenito/tz-clean`).
|
|
54
|
+
2. Run `npm publish --access public`.
|
|
55
|
+
3. The install command will become `npm install -g @your-username/tz-clean`.
|
|
56
|
+
4. The executable command in the terminal will remain `tz-clean`, as defined in the `"bin"` property of `package.json`.
|
|
57
|
+
|
|
58
|
+
## Future Development / Roadmap
|
|
59
|
+
|
|
60
|
+
To further improve code quality and the development workflow, the following features are planned for future integration into this tool or as recommendations for target projects:
|
|
61
|
+
|
|
62
|
+
1. **Git Hooks & `lint-staged` (Husky)**: Automating `tz-clean` to run only on staged files before every `git commit`, preventing dirty code from entering the repository.
|
|
63
|
+
2. **Testing Framework (Vitest / Jest)**: Adding unit and integration tests to ensure the CLI itself and target applications function correctly.
|
|
64
|
+
3. **Commitlint**: Enforcing _Conventional Commits_ to standardize git history and enable automated `CHANGELOG.md` generation.
|
|
65
|
+
4. **CI/CD Pipelines (GitHub Actions)**: Setting up automated workflows to run linting, formatting, and tests on every Push or Pull Request.
|
|
66
|
+
5. **CSpell**: Integrating a code spelling checker to catch typos in variables, comments, and strings.
|
|
67
|
+
6. **Security & Dependency Audit**: Incorporating automated security checks (like `npm audit` or Dependabot) to keep dependencies secure and up-to-date.
|
|
68
|
+
|
|
69
|
+
### Advanced Static Code Analysis (Code Smells & Architecture)
|
|
70
|
+
|
|
71
|
+
Untuk mendeteksi _spaghetti code_, fungsi berulang, dan pelanggaran prinsip _clean code_ (seperti SOLID), fitur berikut dapat ditambahkan di masa depan:
|
|
72
|
+
|
|
73
|
+
1. **SonarJS (`eslint-plugin-sonarjs`)**: Mendeteksi kode yang terlalu kompleks (_spaghetti code_), _bug_ tersembunyi, dan logika yang tidak efisien berdasarkan standar SonarQube.
|
|
74
|
+
2. **Knip**: Alat khusus untuk mendeteksi _unused files_, _unused exports_, dan _unused dependencies_. Sangat ampuh untuk membersihkan _boilerplate_ dan definisi yang tidak pernah dipakai.
|
|
75
|
+
3. **Copy/Paste Detector (`jscpd`)**: Secara programatis mendeteksi blok kode atau fungsi yang diduplikasi/di- _copy-paste_ di berbagai file (mencegah _un-reusable function_).
|
|
76
|
+
4. **Cyclomatic Complexity Limits**: Menerapkan batasan kompleksitas maksimum pada fungsi (via ESLint `complexity` rule) untuk memastikan penerapan _Single Responsibility Principle_ (SRP) dari SOLID.
|
|
77
|
+
|
|
78
|
+
### The "Ultimate Perfection" (Architecture & Reliability)
|
|
79
|
+
|
|
80
|
+
Untuk mencapai level "sempurna" secara rekayasa perangkat lunak (Software Engineering), beberapa lapisan validasi tingkat lanjut ini dapat diterapkan:
|
|
81
|
+
|
|
82
|
+
1. **Dependency Cruiser**: Mengamankan arsitektur proyek (seperti _Clean Architecture_). Mencegah pelanggaran aturan dependensi (contoh: _UI layer_ dilarang _import_ langsung dari _Database layer_) dan mendeteksi dependensi melingkar (_circular dependencies_).
|
|
83
|
+
2. **Mutation Testing (Stryker)**: "Menguji unit test Anda". Tool ini secara sengaja menyuntikkan _bug_ kecil ke dalam kode (mutasi). Jika _unit test_ Anda tetap berstatus "Lulus" (Pass) padahal ada _bug_, berarti test Anda lemah. Ini menjamin kualitas _test suite_ yang absolut.
|
|
84
|
+
3. **Bundle Size Limit (`size-limit`)**: Terutama untuk aplikasi Frontend atau Library, ini akan membatalkan _commit/build_ jika perubahan kode membuat ukuran aplikasi melebihi batas performa kilobyte yang diizinkan.
|
|
85
|
+
4. **Documentation Enforcement (`eslint-plugin-jsdoc`)**: Memaksa agar setiap _function_, parameter, dan tipe data memiliki komentar penjelasan (JSDoc/TSDoc) yang standar, sehingga kode 100% terdokumentasi dengan baik.
|
|
86
|
+
|
|
87
|
+
### Micro-level Formatting & Strict Conventions
|
|
88
|
+
|
|
89
|
+
Untuk mencapai keteraturan tingkat mikroskopis (penamaan, pengurutan, dan struktur file), fitur-fitur ini sangat direkomendasikan:
|
|
90
|
+
|
|
91
|
+
1. **Strict Naming Conventions (`@typescript-eslint/naming-convention`)**: Memaksa aturan penamaan yang mutlak. Contoh: _Class_ wajib `PascalCase`, variabel `camelCase`, konstanta `UPPER_CASE`. Juga dapat digunakan untuk melarang penggunaan nama variabel yang tidak jelas seperti `data`, `temp`, `info`, atau `val`.
|
|
92
|
+
2. **Absolute Sorting (`eslint-plugin-perfectionist` / `simple-import-sort`)**: Alat ini akan secara otomatis (via `--fix`) mengurutkan semua baris kode Anda sesuai abjad atau logika:
|
|
93
|
+
- Mengurutkan dan mengelompokkan `import` di bagian atas file.
|
|
94
|
+
- Mengurutkan _keys_ (kunci) di dalam suatu _Object_ atau _Interface_.
|
|
95
|
+
- Mengurutkan urutan _method/function_ di dalam sebuah _Class_ (misal: _constructor_ di atas, fungsi _public_ di tengah, _private_ di bawah).
|
|
96
|
+
3. **File Structure & Boundaries (`eslint-plugin-project-structure`)**: Memaksa konsistensi struktur folder proyek. Misalnya, memaksa agar semua file test (`*.test.js`) wajib berada di folder `__tests__`, atau komponen _frontend_ dilarang berada di luar folder `components/`. Ini membuat proses _refactoring_ file menjadi sangat tertib.
|
|
97
|
+
|
|
98
|
+
### Dependency Management & Security Monitoring
|
|
99
|
+
|
|
100
|
+
Untuk memastikan paket (_packages/libraries_) yang Anda gunakan selalu stabil, aman dari _hacker_ (bebas _vulnerability_), dan mutakhir (_up-to-date_):
|
|
101
|
+
|
|
102
|
+
1. **`npm-check-updates` (ncu)**: Alat CLI interaktif untuk mengecek secara spesifik mana saja _library_ di `package.json` yang sudah usang (_outdated_), lalu membantu Anda meng-upgrade versinya ke versi stabil terbaru tanpa merusak proyek.
|
|
103
|
+
2. **Dependabot / Renovate Bot**: Bot otomatis (biasanya di GitHub/GitLab) yang bekerja 24/7 di latar belakang. Jika ada versi _library_ baru atau jika ada _bug_ keamanan yang baru ditemukan pada versi yang Anda gunakan, bot ini akan langsung membuatkan _Pull Request_ otomatis untuk memperbaruinya.
|
|
104
|
+
3. **Snyk**: Standar industri tingkat _Enterprise_ untuk keamanan _open-source_. Snyk akan memindai seluruh rantai _dependencies_ Anda (bahkan _library_ di dalam _library_), menemukan kerentanan (_vulnerabilities_), dan mendeteksi apakah lisensi _library_ tersebut legal untuk digunakan.
|
|
105
|
+
4. **`npm audit`**: Fitur bawaan NPM yang akan memberikan peringatan (dan solusi `npm audit fix`) apabila terdapat _library_ yang terjangkit laporan cacat keamanan (CVE - _Common Vulnerabilities and Exposures_).
|
|
106
|
+
|
|
107
|
+
### UI Dashboards & Visual Reports
|
|
108
|
+
|
|
109
|
+
Jika Anda ingin alat CLI Anda tidak hanya mencetak teks di terminal, tetapi juga menghasilkan laporan visual berbasis web (UI) yang indah mengenai kesehatan kode:
|
|
110
|
+
|
|
111
|
+
1. **Plato (Code Complexity Dashboard)**: Tool ini membaca kode JavaScript/TypeScript Anda dan menghasilkan laporan HTML statis yang indah. Anda bisa melihat grafik _maintainability_ (skor kemudahan _maintenance_), ukuran file, dan kompleksitas per file dalam bentuk grafik interaktif.
|
|
112
|
+
2. **SonarQube / SonarCloud Dashboard**: Jika Anda menghubungkan proyek Anda ke SonarCloud, Anda akan mendapatkan sebuah _Dashboard UI_ profesional yang melacak _Technical Debt_ (Berapa hari/jam yang dibutuhkan untuk memperbaiki semua kode buruk), jumlah _code smells_, dan tingkat keandalan kode dari waktu ke waktu.
|
|
113
|
+
3. **Istanbul / NYC (Test Coverage UI)**: Menghasilkan sebuah _website_ HTML mini di komputer pengguna yang menampilkan secara persis baris kode mana saja yang berwarna merah (belum dites) dan baris mana yang berwarna hijau (sudah dilewati oleh _Unit Test_).
|
|
114
|
+
4. **Webpack Bundle Analyzer / Statoscope**: Menghasilkan UI berupa peta interaktif (TreeMap) yang memperlihatkan _library_ mana saja yang menyedot kapasitas memori aplikasi Anda paling besar, sehingga memudahkan pengguna untuk memangkas _library_ yang berat.
|
|
115
|
+
|
|
116
|
+
### Custom UI Reporting Architecture (No 3rd Party UI Modules)
|
|
117
|
+
|
|
118
|
+
Jika Anda ingin membangun UI analisis kode 100% buatan sendiri (tanpa modul pihak ketiga seperti Plato/SonarQube), CLI `tz-clean` dapat merakit laporannya sendiri dengan arsitektur berikut:
|
|
119
|
+
|
|
120
|
+
1. **Data Extraction (Node.js API)**: CLI mengeksekusi ESLint API dan TypeScript Compiler API secara internal (_programmatically_), lalu menangkap _output error/warnings/complexity_ dalam format JSON asli, bukan teks string ke terminal.
|
|
121
|
+
2. **Template Injector**: Anda membuat template `index.html`, `style.css`, dan `app.js` mentah di dalam _source code_ CLI Anda.
|
|
122
|
+
3. **HTML Generation**: CLI akan membaca file JSON hasil analisis, lalu "menyuntikkannya" (inject) ke dalam tag `<script> const reportData = {...} </script>` di dalam template HTML buatan Anda.
|
|
123
|
+
4. **Auto-Launch Browser**: CLI kemudian menyimpan `report.html` tersebut di folder sementara (sementara/lokal) pengguna, lalu menggunakan modul Node.js (misal: eksekusi command `start` di Windows atau `open` di Mac) untuk otomatis membuka _file_ HTML tersebut di browser bawaan pengguna.
|