angular-scan 0.2.0 → 0.2.1
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/README.md +13 -13
- package/package.json +25 -1
package/README.md
CHANGED
|
@@ -13,6 +13,8 @@ Works with both **zone.js** and **zoneless** Angular applications.
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
+
👉 **[Live Demo](https://husseinabdelaziz.github.io/angular-scan)**
|
|
17
|
+
|
|
16
18
|
---
|
|
17
19
|
|
|
18
20
|
## Installation
|
|
@@ -35,9 +37,7 @@ import { ApplicationConfig } from '@angular/core';
|
|
|
35
37
|
import { provideAngularScan } from 'angular-scan';
|
|
36
38
|
|
|
37
39
|
export const appConfig: ApplicationConfig = {
|
|
38
|
-
providers: [
|
|
39
|
-
provideAngularScan(),
|
|
40
|
-
],
|
|
40
|
+
providers: [provideAngularScan()],
|
|
41
41
|
};
|
|
42
42
|
```
|
|
43
43
|
|
|
@@ -70,10 +70,10 @@ stop(); // removes overlay and stops tracking
|
|
|
70
70
|
|
|
71
71
|
```ts
|
|
72
72
|
provideAngularScan({
|
|
73
|
-
enabled: true,
|
|
74
|
-
flashDurationMs: 500,
|
|
75
|
-
showBadges: true,
|
|
76
|
-
showToolbar: true,
|
|
73
|
+
enabled: true, // set false to disable entirely (default: true)
|
|
74
|
+
flashDurationMs: 500, // how long the flash animation lasts in ms (default: 500)
|
|
75
|
+
showBadges: true, // show render count badges on host elements (default: true)
|
|
76
|
+
showToolbar: true, // show the floating toolbar HUD (default: true)
|
|
77
77
|
});
|
|
78
78
|
```
|
|
79
79
|
|
|
@@ -98,12 +98,12 @@ The canvas overlay (`position: fixed`, full viewport, `pointer-events: none`) us
|
|
|
98
98
|
|
|
99
99
|
## Interpreting the output
|
|
100
100
|
|
|
101
|
-
| Signal
|
|
102
|
-
|
|
103
|
-
| Yellow flash
|
|
104
|
-
| Red flash
|
|
105
|
-
| High wasted count on a component | It's being checked unnecessarily on every tick | Wrap it in `OnPush`; ensure parent isn't `Default` CD
|
|
106
|
-
| Counter badge turns red
|
|
101
|
+
| Signal | Meaning | Common cause |
|
|
102
|
+
| -------------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
|
|
103
|
+
| Yellow flash | Component re-rendered (DOM changed) | Normal update — signal/input changed |
|
|
104
|
+
| Red flash | Component checked but DOM unchanged | Parent uses `Default` CD strategy; child is `OnPush` with no changed inputs |
|
|
105
|
+
| High wasted count on a component | It's being checked unnecessarily on every tick | Wrap it in `OnPush`; ensure parent isn't `Default` CD |
|
|
106
|
+
| Counter badge turns red | More unnecessary than necessary renders | Same as above — component is `OnPush` but still gets walked |
|
|
107
107
|
|
|
108
108
|
---
|
|
109
109
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "angular-scan",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Automatically detects and highlights Angular components that are re-rendering — the Angular equivalent of react-scan.",
|
|
5
|
+
"author": "Hussein AbdElAziz",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/husseinAbdElaziz/angular-scan.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://husseinabdelaziz.github.io/angular-scan",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/husseinAbdElaziz/angular-scan/issues"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"angular",
|
|
17
|
+
"devtools",
|
|
18
|
+
"performance",
|
|
19
|
+
"change-detection",
|
|
20
|
+
"re-render",
|
|
21
|
+
"debug",
|
|
22
|
+
"profiler",
|
|
23
|
+
"react-scan",
|
|
24
|
+
"angular-scan",
|
|
25
|
+
"signals",
|
|
26
|
+
"onpush"
|
|
27
|
+
],
|
|
4
28
|
"peerDependencies": {
|
|
5
29
|
"@angular/common": ">=20.0.0",
|
|
6
30
|
"@angular/core": ">=20.0.0"
|