Skip to content

Commit 8a1102f

Browse files
joanisejoanise
committed
Merge pull request #450 from 418-angular-20-deprecates-ngif-attribute
2 parents 7db2838 + 9a79dd9 commit 8a1102f

43 files changed

Lines changed: 762 additions & 720 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/studio-web/src/app/app-routing.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StudioComponent } from "./studio/studio.component";
44
import { ErrorPageComponent } from "./error-page/error-page.component";
55
import { EditorComponent } from "./editor/editor.component";
66

7-
const routes: Routes = [
7+
export const routes: Routes = [
88
{
99
path: "",
1010
pathMatch: "full",

‎packages/studio-web/src/app/app.component.spec.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,38 @@
11
import { ToastrModule } from "ngx-toastr";
22

3-
import { HttpClient } from "@angular/common/http";
3+
import { HttpClient, provideHttpClient } from "@angular/common/http";
44
import {
5-
HttpClientTestingModule,
65
HttpTestingController,
6+
provideHttpClientTesting,
77
} from "@angular/common/http/testing";
88
import { TestBed } from "@angular/core/testing";
99
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
1010
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
11-
import { RouterTestingModule } from "@angular/router/testing";
1211

1312
import { AppComponent } from "./app.component";
1413
import { DemoComponent } from "./demo/demo.component";
1514
import { MaterialModule } from "./material.module";
1615
import { UploadComponent } from "./upload/upload.component";
16+
import { provideRouter } from "@angular/router";
17+
import { AppRoutingModule, routes } from "./app-routing.module";
1718

1819
describe("AppComponent", () => {
1920
let httpClient: HttpClient;
2021
let httpTestingController: HttpTestingController;
2122
beforeEach(async () => {
2223
await TestBed.configureTestingModule({
2324
imports: [
24-
RouterTestingModule,
2525
ReactiveFormsModule,
2626
FormsModule,
2727
BrowserAnimationsModule,
2828
MaterialModule,
2929
ToastrModule.forRoot(),
30-
HttpClientTestingModule,
30+
AppRoutingModule,
31+
],
32+
providers: [
33+
provideHttpClient(),
34+
provideHttpClientTesting(),
35+
provideRouter(routes),
3136
],
3237
declarations: [AppComponent, UploadComponent, DemoComponent],
3338
}).compileComponents();

‎packages/studio-web/src/app/app.component.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { MatDialogRef, MatDialog } from "@angular/material/dialog";
22
import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
33
import { environment } from "../environments/environment";
4-
import { Router } from "@angular/router";
4+
import { EventType, Router, Event as RouterEvent } from "@angular/router";
55
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
66

77
@Component({
@@ -12,14 +12,13 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
1212
})
1313
export class AppComponent implements OnInit {
1414
private destroyRef$ = inject(DestroyRef);
15-
version = environment.packageJson.singleFileBundleVersion;
16-
currentURL = signal("/");
17-
languages: (typeof environment)["languages"];
15+
protected version = environment.packageJson.singleFileBundleVersion;
16+
protected currentURL = signal("/");
17+
protected languages: (typeof environment)["languages"];
18+
protected router = inject(Router);
19+
private dialog = inject(MatDialog);
1820

19-
constructor(
20-
private dialog: MatDialog,
21-
public router: Router,
22-
) {
21+
constructor() {
2322
const currentLanguage = $localize.locale ?? "en";
2423
this.languages = environment.languages.filter(
2524
(l) => l.code != currentLanguage,
@@ -29,8 +28,8 @@ export class AppComponent implements OnInit {
2928
ngOnInit(): void {
3029
this.router.events
3130
.pipe(takeUntilDestroyed(this.destroyRef$))
32-
.subscribe((event) => {
33-
if (event.type === 1) {
31+
.subscribe((event: RouterEvent) => {
32+
if (event.type === EventType.NavigationEnd) {
3433
this.currentURL.set(event.url);
3534
}
3635
});
@@ -56,20 +55,21 @@ export class AppComponent implements OnInit {
5655
standalone: false,
5756
})
5857
export class PrivacyDialog {
59-
analyticsExcluded =
58+
private dialogRef = inject(MatDialogRef<PrivacyDialog>);
59+
protected analyticsExcluded =
6060
window.localStorage.getItem("plausible_ignore") === "true";
61-
constructor(public dialogRef: MatDialogRef<PrivacyDialog>) {}
61+
6262
ngOnInit() {
6363
this.dialogRef.updateSize("100%");
6464
}
6565

6666
toggleAnalytics() {
6767
if (this.analyticsExcluded) {
6868
window.localStorage.removeItem("plausible_ignore");
69+
this.analyticsExcluded = false;
6970
} else {
7071
window.localStorage.setItem("plausible_ignore", "true");
72+
this.analyticsExcluded = true;
7173
}
72-
this.analyticsExcluded =
73-
window.localStorage.getItem("plausible_ignore") === "true";
7474
}
7575
}

‎packages/studio-web/src/app/app.module.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ToastrModule } from "ngx-toastr";
22

3-
import { HttpClientModule } from "@angular/common/http";
3+
import { provideHttpClient } from "@angular/common/http";
44
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
55
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
66
import { BrowserModule } from "@angular/platform-browser";
@@ -34,7 +34,6 @@ defineCustomElements();
3434
StudioComponent,
3535
ErrorPageComponent,
3636
EditorComponent,
37-
// ShepherdComponent
3837
WcStylingComponent,
3938
],
4039
imports: [
@@ -43,14 +42,13 @@ defineCustomElements();
4342
BrowserAnimationsModule,
4443
ToastrModule.forRoot(),
4544
ReactiveFormsModule,
46-
HttpClientModule,
4745
MaterialModule,
4846
MatToolbarModule,
4947
FormsModule,
5048
NgxRAWebComponentModule,
5149
SharedModule,
5250
],
53-
providers: [],
51+
providers: [provideHttpClient()],
5452
bootstrap: [AppComponent],
5553
schemas: [CUSTOM_ELEMENTS_SCHEMA],
5654
})

‎packages/studio-web/src/app/b64.service.spec.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { HttpClient, HttpEventType } from "@angular/common/http";
1+
import { HttpClient, provideHttpClient } from "@angular/common/http";
22
import { ToastrModule } from "ngx-toastr";
33
import {
4-
HttpClientTestingModule,
54
HttpTestingController,
5+
provideHttpClientTesting,
66
} from "@angular/common/http/testing";
77
import { TestBed } from "@angular/core/testing";
88

@@ -15,7 +15,8 @@ describe("B64Service", () => {
1515
let httpTestingController: HttpTestingController;
1616
beforeEach(() => {
1717
TestBed.configureTestingModule({
18-
imports: [HttpClientTestingModule, ToastrModule.forRoot()],
18+
imports: [ToastrModule.forRoot()],
19+
providers: [provideHttpClient(), provideHttpClientTesting()],
1920
});
2021
httpClient = TestBed.inject(HttpClient);
2122
httpTestingController = TestBed.inject(HttpTestingController);

‎packages/studio-web/src/app/demo/demo.component.html‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,69 @@
11
<section>
2-
<div class="container" *ngIf="studioService.render$ | async">
3-
<div class="row">
4-
<div class="col col-md-6 col-lg-9">
5-
<h2
6-
id="readalong-congratulations"
7-
i18n="Congratulations message"
8-
class="subtitle"
9-
>
10-
Congratulations! Here's your ReadAlong!
11-
</h2>
2+
@if (studioService.render$ | async) {
3+
<div class="container">
4+
<div class="row">
5+
<div class="col col-md-6 col-lg-9">
6+
<h2
7+
id="readalong-congratulations"
8+
i18n="Congratulations message"
9+
class="subtitle"
10+
>
11+
Congratulations! Here's your ReadAlong!
12+
</h2>
13+
</div>
14+
<div class="col col-md-6 col-lg-3">
15+
<ras-shared-download
16+
(downloadButtonClicked)="download($event)"
17+
></ras-shared-download>
18+
</div>
1219
</div>
13-
<div class="col col-md-6 col-lg-3">
14-
<ras-shared-download
15-
(downloadButtonClicked)="download($event)"
16-
></ras-shared-download>
17-
</div>
18-
</div>
1920

20-
<div class="row"></div>
21+
<div class="row"></div>
2122

22-
<div class="row" *ngIf="studioService.b64Inputs$ | async as b64Inputs">
23-
<div *ngIf="b64Inputs[0] && b64Inputs[1] && rasAsDataURL()">
24-
<read-along
25-
id="readalong"
26-
[language]="language"
27-
#readalong
28-
*ngIf="studioService.render$ | async"
29-
mode="EDIT"
30-
href="{{ rasAsDataURL() }}"
31-
audio="{{ b64Inputs[0] }}"
32-
class="hydrated"
33-
>
34-
<input
35-
#title
36-
[(ngModel)]="studioService.slots.title"
37-
[ngStyle]="{
38-
'width.ch': studioService.slots.title.length,
39-
'min-width.ch': 20,
40-
}"
41-
style="border: none"
42-
placeholder="Enter your title here"
43-
slot="read-along-header"
44-
data-test-id="ra-header"
45-
/>
46-
<input
47-
#subtitle
48-
[(ngModel)]="studioService.slots.subtitle"
49-
[ngStyle]="{
50-
'width.ch': studioService.slots.subtitle.length,
51-
'min-width.ch': 20,
52-
}"
53-
style="border: none"
54-
placeholder="Enter your subtitle here"
55-
slot="read-along-subheader"
56-
data-test-id="ra-subheader"
57-
/>
58-
</read-along>
59-
</div>
23+
@if (studioService.b64Inputs$ | async; as b64Inputs) {
24+
<div class="row">
25+
@if (b64Inputs[0] && b64Inputs[1] && rasAsDataURL()) {
26+
<div>
27+
@if (studioService.render$ | async) {
28+
<read-along
29+
id="readalong"
30+
[language]="language"
31+
#readalong
32+
mode="EDIT"
33+
href="{{ rasAsDataURL() }}"
34+
audio="{{ b64Inputs[0] }}"
35+
class="hydrated"
36+
>
37+
<input
38+
#title
39+
[(ngModel)]="studioService.slots.title"
40+
[ngStyle]="{
41+
'width.ch': studioService.slots.title.length,
42+
'min-width.ch': 20,
43+
}"
44+
style="border: none"
45+
placeholder="Enter your title here"
46+
slot="read-along-header"
47+
data-test-id="ra-header"
48+
/>
49+
<input
50+
#subtitle
51+
[(ngModel)]="studioService.slots.subtitle"
52+
[ngStyle]="{
53+
'width.ch': studioService.slots.subtitle.length,
54+
'min-width.ch': 20,
55+
}"
56+
style="border: none"
57+
placeholder="Enter your subtitle here"
58+
slot="read-along-subheader"
59+
data-test-id="ra-subheader"
60+
/>
61+
</read-along>
62+
}
63+
</div>
64+
}
65+
</div>
66+
}
6067
</div>
61-
</div>
68+
}
6269
</section>

‎packages/studio-web/src/app/demo/demo.component.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
22
import { ComponentFixture, TestBed } from "@angular/core/testing";
33
import { ToastrModule } from "ngx-toastr";
4-
import { HttpClientTestingModule } from "@angular/common/http/testing";
4+
import { provideHttpClientTesting } from "@angular/common/http/testing";
55
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
66

77
import { MaterialModule } from "../material.module";
88
import { DemoComponent } from "./demo.component";
99
import { FormsModule } from "@angular/forms";
1010
import { SharedModule } from "../shared/shared.module";
11+
import { provideHttpClient } from "@angular/common/http";
1112

1213
// ==== check create or not and default value =====
1314
describe("DemoComponent", () => {
@@ -17,7 +18,6 @@ describe("DemoComponent", () => {
1718
beforeEach(async () => {
1819
await TestBed.configureTestingModule({
1920
imports: [
20-
HttpClientTestingModule,
2121
SharedModule,
2222
BrowserAnimationsModule,
2323
FormsModule,
@@ -26,6 +26,7 @@ describe("DemoComponent", () => {
2626
],
2727
declarations: [DemoComponent],
2828
schemas: [CUSTOM_ELEMENTS_SCHEMA],
29+
providers: [provideHttpClient(), provideHttpClientTesting()],
2930
}).compileComponents();
3031

3132
fixture = TestBed.createComponent(DemoComponent);

‎packages/studio-web/src/app/demo/demo.component.ts‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
1-
import { Component, OnDestroy, OnInit, signal, ViewChild } from "@angular/core";
1+
import { Component, inject, OnDestroy, ViewChild, signal } from "@angular/core";
22
import { Components } from "@readalongs/web-component/loader";
33

44
import { B64Service } from "../b64.service";
55
import { StudioService } from "../studio/studio.service";
66
import { DownloadService } from "../shared/download/download.service";
77
import { SupportedOutputs } from "../ras.service";
88
import { ToastrService } from "ngx-toastr";
9+
import { type InterfaceLanguage } from "@readalongs/web-component";
10+
11+
const localizationToRASLanguage: Record<string, InterfaceLanguage> = {
12+
en: "eng",
13+
fr: "fra",
14+
es: "spa",
15+
};
916

1017
@Component({
1118
selector: "app-demo",
1219
templateUrl: "./demo.component.html",
1320
styleUrls: ["./demo.component.sass"],
1421
standalone: false,
1522
})
16-
export class DemoComponent implements OnDestroy, OnInit {
17-
@ViewChild("readalong") readalong!: Components.ReadAlong;
18-
language: "eng" | "fra" | "spa" = "eng";
23+
export class DemoComponent implements OnDestroy {
24+
@ViewChild("readalong") private readalong!: Components.ReadAlong;
25+
26+
protected language: InterfaceLanguage = "eng";
27+
protected b64Service = inject(B64Service);
1928
protected rasAsDataURL = signal<string>("");
20-
constructor(
21-
public b64Service: B64Service,
22-
public studioService: StudioService,
23-
private downloadService: DownloadService,
24-
private toastr: ToastrService,
25-
) {
26-
// If we do more languages, this should be a lookup table
27-
if ($localize.locale == "fr") {
28-
this.language = "fra";
29-
} else if ($localize.locale == "es") {
30-
this.language = "spa";
29+
public studioService = inject(StudioService);
30+
private downloadService = inject(DownloadService);
31+
private toastr = inject(ToastrService);
32+
33+
constructor() {
34+
const curLocale = $localize.locale ?? "en";
35+
if (curLocale in localizationToRASLanguage) {
36+
this.language = localizationToRASLanguage[curLocale];
3137
}
3238

3339
this.studioService.b64Inputs$.subscribe(async (b64Input) => {
@@ -37,9 +43,6 @@ export class DemoComponent implements OnDestroy, OnInit {
3743
});
3844
}
3945

40-
ngOnInit(): void {}
41-
42-
ngAfterViewInit(): void {}
4346
download(download_type: SupportedOutputs) {
4447
if (
4548
this.studioService.b64Inputs$.value &&

0 commit comments

Comments
 (0)