BirdView

Command-line utilities to gather statistics for the Angular projects.

Installing

Install Rust and Cargo
https://doc.rust-lang.org/cargo/getting-started/installation.html

```shell

with Cargo

cargo install birdview

and then

birdview --help ```

Basic Usage

The commands generate an HTML report and opens in the system default browser:

shell cd <path-to-project> birdview inspect . --all --open

You can also use GitHub repository URLs:

shell birdview inspect https://github.com/<account>/<repository> --all --open

In addition, you should get the console output similar to the one below:

text Packages ├── Files: 32 ├── Dependencies: 145 └── Dev dependencies: 104 Unit Tests ├── Cases: 5635 └── Files: 452 E2E Tests ├── Cases: 928 └── Files: 168 Angular ├── Module: 149 ├── Component: 415 (standalone: 0) ├── Directive: 58 ├── Service: 181 ├── Pipe: 23 └── Dialog: 8 Project Files ├── HTML: 379 ├── SCSS: 536 ├── CSS: 33 ├── TypeScript: 5125 ├── JavaScript: 301 ├── JSON: 548 └── Markdown: 497 Inspection complete

Code Inspection

shell birdview inspect --help

Available Inspectors

Examples:

```shell

run all available inspections

birdview inspect --all

inspect tests

birdview inspect --tests

inspect packages

birdview inspect --packages

inspect tests and packages

birdview inspect --tests --packages

```

Generating Reports

shell birdview inspect <dir> --all --format=<html|json>

You can generate reports using multiple templates:

  • html: single-page HTML report (default)
  • json: raw JSON report

Custom output folder

By default, the reports are placed in the working directory. You can change the report output folder using the -o or --output-dir parameter.

shell birdview inspect . --all --output-dir=reports --open

The output directory should exist prior to running the command

HTML Report

The HTML format is the default one.

```shell

generate HTML report and place to the working dir

birdview inspect

--all

generate HTML report and place it to the "reports" folder

birdview inspect

--all --output-dir=reports

generate HTML report and open with the default browser

birdview inspect

--all --open ```

Angular

Provides insights on the Angular elements.

  • Modules (*.module.ts)
  • Components / Standalone Components (*.component.ts)
  • Directives (*.directive.ts)
  • Services (*.service.ts)
  • Pipes (*.pipe.ts)
  • Dialogs (*.dialog.ts)
  • quick navigation to the corresponding files on GitHub

Overall statistics:

angular report

Standalone component detection:

angular standalone

Tests

Provides insights on the Unit and End-to-End testing.

  • stats on the unit tests and test cases (*.spec.ts)
  • stats on teh e2e tests and test cases (*.e2e.ts, *.test.ts)
  • quick navigation to the corresponding files on GitHub

tests report

Packages

Provides insights on the packages and project dependencies.

  • all package.json files within the workspace
  • all product dependencies
  • all development dependencies
  • quick navigation to the NPM for a given dependency
  • quick navigation for the corresponding files on GitHub

packages report

File Types

Provides insights on the file types used in the project

file types report

JSON Report

```shell

run all inspections and generate JSON report

birdview inspect

--all --format=json

generate JSON report and place it to the "reports" folder

birdview inspect

--all --format=json --output-dir=reports ```

The format of the output is similar to the following example:

```json { "report_date": "",

"project": { "name": "/name", "version": "/version",

"modules": [
  "packages",
  "angular-tests",
  "angular-entities",
  "file-types"
],

"git": {
  "remote": "<URL>",
  "branch": "<branch>",
  "target": "<SHA>"
}

},

"warnings": [ { "module": "", "path": "", "message": "" } ],

"stats": { "package": { "files": 32, "proddeps": 145, "devdeps": 104 },

"tests": {
  "unit_test": 452,
  "unit_test_case": 5635,
  "e2e_test": 168,
  "e2e_test_case": 928
},

"angular": {
  "module": 149,
  "component": 415,
  "component_standalone": 23,
  "directive": 58,
  "service": 181,
  "pipe": 23,
  "dialog": 8
},

"types": {
  "html": 379,
  "scss": 536,
  "css": 33,
  "ts": 5125,
  "js": 301,
  "md": 497,
  "json": 548
}

},

"angular": { "framework": "", "modules": [ { "path": "/.module.ts" } ], "components": [ { "path": "/.component.ts", "standalone": false } ], "directives": [ { "path": "/.directive.ts" } ], "services": [ { "path": "/.service.ts" } ], "pipes": [ { "path": "/.pipe.ts" } ], "dialogs": [ { "path": "/.dialog.ts" } ] },

"unit_tests": [ { "path": "/.spec.ts", "cases": [ "case name 1", "case name 2" ] } ],

"e2e_tests": [ { "path": "/.e2e.ts", "cases": [ "case name 1", "case name 2" ] } ],

"packages": [ { "path": "//package.json", "dependencies": [ { "name": "tslib", "version": "^2.0.0", "dev": false }, { "name": "typescript", "version": "4.7.4", "dev": true } ] } ] } ```