Skip to content

Commit a7f4da0

Browse files
committed
chore: fix issues with bundler
This PR breaks the abiltiy to run tests thanks to Testing Library seemingly not supporting Angular 20
1 parent 6c0c300 commit a7f4da0

File tree

11 files changed

+3774
-4049
lines changed

11 files changed

+3774
-4049
lines changed

examples/angular/array/package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
"test": "ng test"
1111
},
1212
"dependencies": {
13-
"@angular/animations": "^19.2.11",
14-
"@angular/common": "^19.2.11",
15-
"@angular/compiler": "^19.2.11",
16-
"@angular/core": "^19.2.11",
17-
"@angular/forms": "^19.2.11",
18-
"@angular/platform-browser": "^19.2.11",
19-
"@angular/platform-browser-dynamic": "^19.2.11",
20-
"@angular/router": "^19.2.11",
13+
"@angular/animations": "^20.0.0",
14+
"@angular/common": "^20.0.0",
15+
"@angular/compiler": "^20.0.0",
16+
"@angular/core": "^20.0.0",
17+
"@angular/forms": "^20.0.0",
18+
"@angular/platform-browser": "^20.0.0",
19+
"@angular/platform-browser-dynamic": "^20.0.0",
20+
"@angular/router": "^20.0.0",
2121
"@tanstack/angular-form": "^1.12.0",
2222
"rxjs": "^7.8.2",
2323
"tslib": "^2.8.1",
24-
"zone.js": "^0.15.0"
24+
"zone.js": "0.15.1"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "^19.2.12",
28-
"@angular/cli": "^19.2.12",
29-
"@angular/compiler-cli": "^19.2.11",
27+
"@angular-devkit/build-angular": "^20.0.0",
28+
"@angular/cli": "^20.0.0",
29+
"@angular/compiler-cli": "^20.0.0",
3030
"typescript": "5.8.2"
3131
}
3232
}
Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@tanstack/form-example-angular-simple",
2+
"name": "@tanstack/form-example-angular-large-form",
33
"private": true,
44
"type": "module",
55
"scripts": {
@@ -10,23 +10,23 @@
1010
"test": "ng test"
1111
},
1212
"dependencies": {
13-
"@angular/animations": "^19.2.11",
14-
"@angular/common": "^19.2.11",
15-
"@angular/compiler": "^19.2.11",
16-
"@angular/core": "^19.2.11",
17-
"@angular/forms": "^19.2.11",
18-
"@angular/platform-browser": "^19.2.11",
19-
"@angular/platform-browser-dynamic": "^19.2.11",
20-
"@angular/router": "^19.2.11",
13+
"@angular/animations": "^20.0.0",
14+
"@angular/common": "^20.0.0",
15+
"@angular/compiler": "^20.0.0",
16+
"@angular/core": "^20.0.0",
17+
"@angular/forms": "^20.0.0",
18+
"@angular/platform-browser": "^20.0.0",
19+
"@angular/platform-browser-dynamic": "^20.0.0",
20+
"@angular/router": "^20.0.0",
2121
"@tanstack/angular-form": "^1.12.0",
2222
"rxjs": "^7.8.2",
2323
"tslib": "^2.8.1",
24-
"zone.js": "^0.15.0"
24+
"zone.js": "0.15.1"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "^19.2.12",
28-
"@angular/cli": "^19.2.12",
29-
"@angular/compiler-cli": "^19.2.11",
27+
"@angular-devkit/build-angular": "^20.0.0",
28+
"@angular/cli": "^20.0.0",
29+
"@angular/compiler-cli": "^20.0.0",
3030
"typescript": "5.8.2"
3131
}
3232
}

examples/angular/large-form/src/app/app.component.ts

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,14 @@ import type {
1515
selector: 'app-text-field',
1616
standalone: true,
1717
template: `
18-
@let api = lastName.api();
19-
@if (api) {
20-
<label [for]="api.name">{{ label() }}</label>
21-
<input
22-
[id]="api.name"
23-
[name]="api.name"
24-
[value]="api.state.value"
25-
(blur)="api.handleBlur()"
26-
(input)="api.handleChange($any($event).target.value)"
27-
/>
28-
}
18+
<label [for]="lastName.api().name">{{ label() }}</label>
19+
<input
20+
[id]="lastName.api().name"
21+
[name]="lastName.api().name"
22+
[value]="lastName.api().state.value"
23+
(blur)="lastName.api().handleBlur()"
24+
(input)="lastName.api().handleChange($any($event).target.value)"
25+
/>
2926
`,
3027
})
3128
export class AppTextField {

examples/angular/simple/package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
"test": "ng test"
1111
},
1212
"dependencies": {
13-
"@angular/animations": "^19.2.11",
14-
"@angular/common": "^19.2.11",
15-
"@angular/compiler": "^19.2.11",
16-
"@angular/core": "^19.2.11",
17-
"@angular/forms": "^19.2.11",
18-
"@angular/platform-browser": "^19.2.11",
19-
"@angular/platform-browser-dynamic": "^19.2.11",
20-
"@angular/router": "^19.2.11",
13+
"@angular/animations": "^20.0.0",
14+
"@angular/common": "^20.0.0",
15+
"@angular/compiler": "^20.0.0",
16+
"@angular/core": "^20.0.0",
17+
"@angular/forms": "^20.0.0",
18+
"@angular/platform-browser": "^20.0.0",
19+
"@angular/platform-browser-dynamic": "^20.0.0",
20+
"@angular/router": "^20.0.0",
2121
"@tanstack/angular-form": "^1.12.0",
2222
"rxjs": "^7.8.2",
2323
"tslib": "^2.8.1",
24-
"zone.js": "^0.15.0"
24+
"zone.js": "0.15.1"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "^19.2.12",
28-
"@angular/cli": "^19.2.12",
29-
"@angular/compiler-cli": "^19.2.11",
27+
"@angular-devkit/build-angular": "^20.0.0",
28+
"@angular/cli": "^20.0.0",
29+
"@angular/compiler-cli": "^20.0.0",
3030
"typescript": "5.8.2"
3131
}
3232
}

examples/angular/simple/src/app/app.component.ts

Lines changed: 21 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,18 @@
1-
import {
2-
Component,
3-
inject,
4-
Injectable,
5-
input,
6-
type OnChanges,
7-
type OnDestroy,
8-
type OnInit,
9-
signal,
10-
} from '@angular/core'
1+
import { Component } from '@angular/core'
112
import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
123
import type {
13-
AnyFormApi,
14-
FieldApi,
154
FieldValidateAsyncFn,
165
FieldValidateFn,
176
} from '@tanstack/angular-form'
187

19-
@Injectable()
20-
class TanStackFieldInjectable<T> {
21-
field = signal<
22-
FieldApi<
23-
any,
24-
any,
25-
T,
26-
any,
27-
any,
28-
any,
29-
any,
30-
any,
31-
any,
32-
any,
33-
any,
34-
any,
35-
any,
36-
any,
37-
any,
38-
any,
39-
any,
40-
any,
41-
any
42-
>
43-
>(null as never)
44-
}
45-
46-
function injectProvideField(form: AnyFormApi) {
47-
const base = inject(TanStackFieldInjectable)
48-
base.field.set(form)
49-
}
50-
51-
@Component({
52-
selector: 'tanstack-app-field',
53-
standalone: true,
54-
template: ` <ng-content></ng-content> `,
55-
providers: [TanStackFieldInjectable],
56-
})
57-
class TanStackFieldComponent extends TanStackField<
58-
// TODO: Infer this, don't make it `any`
59-
any,
60-
any,
61-
any,
62-
any,
63-
any,
64-
any,
65-
any,
66-
any,
67-
any,
68-
any,
69-
any,
70-
any,
71-
any,
72-
any,
73-
any,
74-
any,
75-
any,
76-
any,
77-
any
78-
> {
79-
_ = injectProvideField(this.tanstackField)
80-
}
81-
828
@Component({
839
selector: 'app-root',
8410
standalone: true,
8511
imports: [TanStackField],
8612
template: `
8713
<form (submit)="handleSubmit($event)">
8814
<div>
89-
<tanstack-app-field
15+
<ng-container
9016
[tanstackField]="form"
9117
name="firstName"
9218
[validators]="{
@@ -96,8 +22,25 @@ class TanStackFieldComponent extends TanStackField<
9622
}"
9723
#firstName="field"
9824
>
99-
<app-text-field />
100-
</tanstack-app-field>
25+
<label [for]="firstName.api.name">First Name:</label>
26+
<input
27+
[id]="firstName.api.name"
28+
[name]="firstName.api.name"
29+
[value]="firstName.api.state.value"
30+
(blur)="firstName.api.handleBlur()"
31+
(input)="firstName.api.handleChange($any($event).target.value)"
32+
/>
33+
@if (firstName.api.state.meta.isTouched) {
34+
@for (error of firstName.api.state.meta.errors; track $index) {
35+
<div style="color: red">
36+
{{ error }}
37+
</div>
38+
}
39+
}
40+
@if (firstName.api.state.meta.isValidating) {
41+
<p>Validating...</p>
42+
}
43+
</ng-container>
10144
</div>
10245
<div>
10346
<ng-container [tanstackField]="form" name="lastName" #lastName="field">

package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,17 @@
7171
"//": "https://github.com/jsdom/cssstyle/issues/182",
7272
"overrides": {
7373
"cssstyle": "4.3.1"
74-
}
74+
},
75+
"onlyBuiltDependencies": [
76+
"@parcel/watcher",
77+
"@swc/core",
78+
"esbuild",
79+
"lmdb",
80+
"msgpackr-extract",
81+
"nx",
82+
"sharp",
83+
"unrs-resolver",
84+
"vue-demi"
85+
]
7586
}
7687
}

packages/angular-form/package.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,17 @@
4747
"tslib": "^2.8.1"
4848
},
4949
"devDependencies": {
50-
"@analogjs/vite-plugin-angular": "^1.16.1",
51-
"@angular/common": "^19.2.11",
52-
"@angular/compiler": "^19.2.11",
53-
"@angular/compiler-cli": "^19.2.11",
54-
"@angular/core": "^19.2.11",
55-
"@angular/platform-browser": "^19.2.11",
56-
"@angular/platform-browser-dynamic": "^19.2.11",
50+
"@analogjs/vite-plugin-angular": "^1.17.1",
51+
"@angular/common": "^20.0.0",
52+
"@angular/compiler": "^20.0.0",
53+
"@angular/compiler-cli": "^20.0.0",
54+
"@angular/core": "^20.0.0",
55+
"@angular/platform-browser": "^20.0.0",
56+
"@angular/platform-browser-dynamic": "^20.0.0",
5757
"@testing-library/angular": "^17.3.7",
58-
"ng-packagr": "^19.2.2",
58+
"ng-packagr": "^20.0.0",
5959
"typescript": "5.8.2",
60-
"zone.js": "^0.15.0"
60+
"zone.js": "0.15.1"
6161
},
6262
"peerDependencies": {
6363
"@angular/core": ">=19.0.0"

packages/angular-form/src/injectable.ts

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,29 @@ import { FieldApi } from '@tanstack/form-core'
33

44
@Injectable({ providedIn: null })
55
export class TanStackFieldInjectable<T> {
6-
api = signal<FieldApi<
7-
any,
8-
any,
9-
T,
10-
any,
11-
any,
12-
any,
13-
any,
14-
any,
15-
any,
16-
any,
17-
any,
18-
any,
19-
any,
20-
any,
21-
any,
22-
any,
23-
any,
24-
any,
25-
any
26-
> | null>(null)
6+
api = signal<
7+
FieldApi<
8+
any,
9+
any,
10+
T,
11+
any,
12+
any,
13+
any,
14+
any,
15+
any,
16+
any,
17+
any,
18+
any,
19+
any,
20+
any,
21+
any,
22+
any,
23+
any,
24+
any,
25+
any,
26+
any
27+
>
28+
>(null as never)
2729
}
2830

2931
export function injectField<T>(): TanStackFieldInjectable<T> {

0 commit comments

Comments
 (0)