ng-form-devtools 0.1.1 → 0.1.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/README.md +82 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# ng-form-devtools
|
|
2
|
+
|
|
3
|
+
`ng-form-devtools` helps you inspect Angular forms during development.
|
|
4
|
+
It adds runtime form tracking to your app, creates structured snapshots, and provides the bridge for an upcoming Chrome DevTools experience focused on Angular forms.
|
|
5
|
+
|
|
6
|
+
## Current Status
|
|
7
|
+
|
|
8
|
+
`ng-form-devtools` is currently a work in progress. Feedback, ideas, and bug reports are very welcome.
|
|
9
|
+
The API and overall behavior are planned to be considered stable starting with `v1.0.0`.
|
|
10
|
+
|
|
11
|
+
The Chrome DevTools integration is also still evolving. A dedicated Chrome plugin is planned and this package already contains the foundation for that upcoming extension.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install ng-form-devtools
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Minimal Setup
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
|
|
23
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
24
|
+
import { provideFormDevtools } from 'ng-form-devtools';
|
|
25
|
+
|
|
26
|
+
bootstrapApplication(AppComponent, {
|
|
27
|
+
providers: [
|
|
28
|
+
provideExperimentalZonelessChangeDetection(),
|
|
29
|
+
provideFormDevtools({ bridge: 'window-message' })
|
|
30
|
+
]
|
|
31
|
+
});
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Track a form inside an injection context:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { Component } from '@angular/core';
|
|
38
|
+
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
39
|
+
import { track } from 'ng-form-devtools';
|
|
40
|
+
|
|
41
|
+
@Component({
|
|
42
|
+
standalone: true,
|
|
43
|
+
imports: [ReactiveFormsModule],
|
|
44
|
+
template: `<form [formGroup]="form"></form>`
|
|
45
|
+
})
|
|
46
|
+
export class ExampleFormComponent {
|
|
47
|
+
private readonly formBuilder = new FormBuilder();
|
|
48
|
+
|
|
49
|
+
readonly form = this.formBuilder.group({
|
|
50
|
+
firstName: [''],
|
|
51
|
+
lastName: ['']
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
private readonly _tracked = track(this.form, 'profileForm');
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Local Demo And Documentation
|
|
59
|
+
|
|
60
|
+
If you want to explore the project locally, clone the repository, install dependencies, and start the example app:
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install
|
|
64
|
+
npm run dev
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
The example app currently acts as the easiest hands-on documentation for the package.
|
|
68
|
+
|
|
69
|
+
To test the Chrome DevTools integration locally:
|
|
70
|
+
|
|
71
|
+
1. Run `npm run build:extension:chrome-devtools`.
|
|
72
|
+
2. Open `chrome://extensions`.
|
|
73
|
+
3. Enable Developer Mode.
|
|
74
|
+
4. Click `Load unpacked`.
|
|
75
|
+
5. Select `dist/extensions/chrome-devtools`.
|
|
76
|
+
6. Open the example app in Chrome.
|
|
77
|
+
7. Open Chrome DevTools and switch to the `Angular Forms` panel.
|
|
78
|
+
|
|
79
|
+
## More Information
|
|
80
|
+
|
|
81
|
+
- Repository: [github.com/timtilch/ng-form-devtools](https://github.com/timtilch/ng-form-devtools)
|
|
82
|
+
- Issues and feedback: [github.com/timtilch/ng-form-devtools/issues](https://github.com/timtilch/ng-form-devtools/issues)
|