Skip to content

Commit 781db3c

Browse files
cyongvertoclaude
authored and
abodurri-verto
committed
fix: make Cypress e2e and lint pass under Angular 22 / TypeScript 6.0
- cypress/tsconfig.json: Cypress' bundled webpack preprocessor forces downlevelIteration into ts-loader and emits per-file. Under TS 6.0 the root config dragged in two fatal diagnostics — TS5101 (downlevelIteration deprecated) and TS5011 (outDir set without explicit rootDir). Made the Cypress config self-contained (no outDir) and added ignoreDeprecations 6.0. Verified: all 3 e2e specs (13 tests) pass locally. - Prettier-format the 10 component files rewritten by the ChangeDetectionStrategy.Eager migration so the lint (prettier --check) job passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 0f5bf3a commit 781db3c

11 files changed

Lines changed: 97 additions & 78 deletions

‎cypress/tsconfig.json‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
{
2-
"extends": "../tsconfig.json",
2+
// Self-contained (does NOT extend ../tsconfig.json) on purpose: Cypress' bundled
3+
// webpack preprocessor runs ts-loader with a forced `downlevelIteration` and emits
4+
// per-file. Under TypeScript 6.0 that surfaces two fatal config diagnostics that the
5+
// root config would drag in — TS5101 (downlevelIteration deprecated) and TS5011
6+
// ("rootDir must be explicitly set", triggered by the root's `outDir`). Keeping this
7+
// config free of `outDir` and silencing the deprecation here avoids both. The e2e
8+
// specs don't use the `astral-accessibility` path alias, so no `paths` mapping is needed.
39
"compilerOptions": {
10+
"target": "ES2022",
11+
"module": "es2020",
12+
"moduleResolution": "bundler",
13+
"lib": ["ES2022", "dom"],
14+
"types": ["cypress", "node"],
415
"sourceMap": false,
5-
"inlineSourceMap": true
16+
"inlineSourceMap": true,
17+
"inlineSources": true,
18+
"experimentalDecorators": true,
19+
"allowSyntheticDefaultImports": true,
20+
"skipLibCheck": true,
21+
"ignoreDeprecations": "6.0"
622
},
723
"include": ["**/*.ts"]
824
}

‎projects/astral-accessibility/src/lib/astral-accessibility.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ import { LineHeightComponent } from "./controls/line-height.component";
1919
import { AstralTranslationService } from "./astral-translation.service";
2020

2121
export type AstralPosition =
22-
"bottom-right" | "bottom-left" | "top-right" | "top-left";
22+
| "bottom-right"
23+
| "bottom-left"
24+
| "top-right"
25+
| "top-left";
2326

2427
@Component({
2528
selector: "astral-accessibility",

‎projects/astral-accessibility/src/lib/controls/contrast.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { AstralStateService } from "../astral-state.service";
3030
class="icon action-icon "
3131
[ngClass]="{
3232
inactive: states[currentState()] == base,
33-
active: states[currentState()] != base,
33+
active: states[currentState()] != base
3434
}"
3535
>
3636
<svg
@@ -66,13 +66,13 @@ import { AstralStateService } from "../astral-state.service";
6666
<div
6767
class="dot"
6868
[ngClass]="{
69-
active: states[currentState()] === 'Dark High Contrast',
69+
active: states[currentState()] === 'Dark High Contrast'
7070
}"
7171
></div>
7272
<div
7373
class="dot"
7474
[ngClass]="{
75-
active: states[currentState()] === 'High Contrast',
75+
active: states[currentState()] === 'High Contrast'
7676
}"
7777
></div>
7878
<div

‎projects/astral-accessibility/src/lib/controls/invert.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ import { AstralStateService } from "../astral-state.service";
2323
<span>Invert Colours</span>
2424
</div>
2525
@if (inverted) {
26-
<i
27-
class="pi pi-check icon active active-check"
28-
style="font-weight: 900"
29-
></i>
26+
<i
27+
class="pi pi-check icon active active-check"
28+
style="font-weight: 900"
29+
></i>
3030
}
3131
</button>
3232
`,

‎projects/astral-accessibility/src/lib/controls/line-height.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { AstralStateService } from "../astral-state.service";
2424
class="icon action-icon"
2525
[ngClass]="{
2626
inactive: states[currentState()] == base,
27-
active: states[currentState()] != base,
27+
active: states[currentState()] != base
2828
}"
2929
>
3030
<svg
@@ -53,19 +53,19 @@ import { AstralStateService } from "../astral-state.service";
5353
<div
5454
class="dot"
5555
[ngClass]="{
56-
active: states[currentState()] === 'Light Height',
56+
active: states[currentState()] === 'Light Height'
5757
}"
5858
></div>
5959
<div
6060
class="dot"
6161
[ngClass]="{
62-
active: states[currentState()] === 'Moderate Height',
62+
active: states[currentState()] === 'Moderate Height'
6363
}"
6464
></div>
6565
<div
6666
class="dot"
6767
[ngClass]="{
68-
active: states[currentState()] === 'Heavy Height',
68+
active: states[currentState()] === 'Heavy Height'
6969
}"
7070
></div>
7171
</div>

‎projects/astral-accessibility/src/lib/controls/saturate.component.ts‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { AstralStateService } from "../astral-state.service";
2323
class="icon action-icon "
2424
[ngClass]="{
2525
inactive: states[currentState()] == base,
26-
active: states[currentState()] != base,
26+
active: states[currentState()] != base
2727
}"
2828
>
2929
<svg
@@ -65,26 +65,26 @@ import { AstralStateService } from "../astral-state.service";
6565
<div class="state-dots-wrap">
6666
<span>{{ labels[currentState()] }}</span>
6767
@if (states[currentState()] != base) {
68-
<div class="dots">
69-
<div
70-
class="dot"
71-
[ngClass]="{
72-
active: states[currentState()] === 'Low Saturation',
73-
}"
74-
></div>
75-
<div
76-
class="dot"
77-
[ngClass]="{
78-
active: states[currentState()] === 'High Saturation',
79-
}"
80-
></div>
81-
<div
82-
class="dot"
83-
[ngClass]="{
84-
active: states[currentState()] === 'Desaturated',
85-
}"
86-
></div>
87-
</div>
68+
<div class="dots">
69+
<div
70+
class="dot"
71+
[ngClass]="{
72+
active: states[currentState()] === 'Low Saturation'
73+
}"
74+
></div>
75+
<div
76+
class="dot"
77+
[ngClass]="{
78+
active: states[currentState()] === 'High Saturation'
79+
}"
80+
></div>
81+
<div
82+
class="dot"
83+
[ngClass]="{
84+
active: states[currentState()] === 'Desaturated'
85+
}"
86+
></div>
87+
</div>
8888
}
8989
</div>
9090
</div>

‎projects/astral-accessibility/src/lib/controls/screen-mask.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { AstralStateService } from "../astral-state.service";
2424
class="icon action-icon"
2525
[ngClass]="{
2626
inactive: states[currentState()] == base,
27-
active: states[currentState()] != base,
27+
active: states[currentState()] != base
2828
}"
2929
>
3030
<svg
@@ -58,13 +58,13 @@ import { AstralStateService } from "../astral-state.service";
5858
<div
5959
class="dot"
6060
[ngClass]="{
61-
active: states[currentState()] === 'Large Cursor',
61+
active: states[currentState()] === 'Large Cursor'
6262
}"
6363
></div>
6464
<div
6565
class="dot"
6666
[ngClass]="{
67-
active: states[currentState()] === 'Reading Mask',
67+
active: states[currentState()] === 'Reading Mask'
6868
}"
6969
></div>
7070
</div>

‎projects/astral-accessibility/src/lib/controls/screen-reader.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { AstralStateService } from "../astral-state.service";
2222
(click)="nextState()"
2323
[ngClass]="{
2424
'in-use': states[currentState()] != base,
25-
'disabled-button': !synthesisAvailable,
25+
'disabled-button': !synthesisAvailable
2626
}"
2727
>
2828
<div class="title">
@@ -32,7 +32,7 @@ import { AstralStateService } from "../astral-state.service";
3232
[ngClass]="{
3333
inactive: states[currentState()] == base,
3434
active: states[currentState()] != base,
35-
disabled: !synthesisAvailable,
35+
disabled: !synthesisAvailable
3636
}"
3737
>
3838
<svg

‎projects/astral-accessibility/src/lib/controls/text-size.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { AstralStateService } from "../astral-state.service";
2323
class="icon action-icon "
2424
[ngClass]="{
2525
inactive: states[currentState()] == base,
26-
active: states[currentState()] != base,
26+
active: states[currentState()] != base
2727
}"
2828
>
2929
<svg
@@ -67,7 +67,7 @@ import { AstralStateService } from "../astral-state.service";
6767
<div
6868
class="dot"
6969
[ngClass]="{
70-
active: states[currentState()] === 'Extra Large Text',
70+
active: states[currentState()] === 'Extra Large Text'
7171
}"
7272
></div>
7373
</div>

‎projects/astral-accessibility/src/lib/controls/text-spacing.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { AstralStateService } from "../astral-state.service";
2323
class="icon action-icon"
2424
[ngClass]="{
2525
inactive: states[currentState()] == base,
26-
active: states[currentState()] != base,
26+
active: states[currentState()] != base
2727
}"
2828
>
2929
<svg
@@ -59,19 +59,19 @@ import { AstralStateService } from "../astral-state.service";
5959
<div
6060
class="dot"
6161
[ngClass]="{
62-
active: states[currentState()] === 'Light Spacing',
62+
active: states[currentState()] === 'Light Spacing'
6363
}"
6464
></div>
6565
<div
6666
class="dot"
6767
[ngClass]="{
68-
active: states[currentState()] === 'Moderate Spacing',
68+
active: states[currentState()] === 'Moderate Spacing'
6969
}"
7070
></div>
7171
<div
7272
class="dot"
7373
[ngClass]="{
74-
active: states[currentState()] === 'Heavy Spacing',
74+
active: states[currentState()] === 'Heavy Spacing'
7575
}"
7676
></div>
7777
</div>

0 commit comments

Comments
 (0)