diff --git a/adev-ja/src/app/features/home/home.component.en.html b/adev-ja/src/app/features/home/home.component.en.html index 4e55dce261..5d6445209c 100644 --- a/adev-ja/src/app/features/home/home.component.en.html +++ b/adev-ja/src/app/features/home/home.component.en.html @@ -13,7 +13,7 @@

Angular v22 is here!

- @if (!isUwu) { + @if (!uwu()) {

Productivity
Meets scalability

The framework for building scalable web apps with confidence

diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html index 94b2a79f6b..dd55dce334 100644 --- a/adev-ja/src/app/features/home/home.component.html +++ b/adev-ja/src/app/features/home/home.component.html @@ -13,7 +13,7 @@

Angular v22がリリースされました！

- @if (!isUwu) { + @if (!uwu()) {

Productivity
Meets scalability

スケーラブルなWebアプリを確信を持って構築できるフレームワーク

diff --git a/adev-ja/src/app/features/update/update.component.en.html b/adev-ja/src/app/features/update/update.component.en.html index 163a6ed63e..a9afd70f14 100644 --- a/adev-ja/src/app/features/update/update.component.en.html +++ b/adev-ja/src/app/features/update/update.component.en.html @@ -11,7 +11,7 @@

Angular versions

From v. @@ -19,7 +19,7 @@

Angular versions

- @if (from.number >= futureVersion || to.number >= futureVersion) { + @if (from().number >= futureVersion || to().number >= futureVersion) {

Warning: @@ -61,7 +61,7 @@

Angular versions

} - @if (from.number > to.number) { + @if (from().number > to().number) {

Warning: @@ -70,7 +70,7 @@

Angular versions

} - @if (to.number - from.number > 150 && from.number > 240) { + @if (to().number - from().number > 150 && from().number > 240) {

Warning: @@ -84,19 +84,19 @@

Angular versions

Application complexity

Basic Medium Advanced - @if (level === 1) { + @if (level() === 1) {

Shows information for all Angular developers.

- } @else if (level === 2) { + } @else if (level() === 2) {

Shows information that's of interest to more advanced Angular developers.

- } @else if (level === 3) { + } @else if (level() === 3) {

Shows all the information we have about this update.

} @@ -111,7 +111,7 @@

Other dependencies

} - @if (from.number < 600) { + @if (from().number < 600) {

Package Manager

Before you update - } - @if (beforeRecommendations.length <= 0) { + } @empty {
You don't need to do anything before moving between these versions.
@@ -187,8 +186,7 @@

Update to the new version

- } - @if (duringRecommendations.length <= 0) { + } @empty {
There aren't any recommendations for moving between these versions.
@@ -209,8 +207,7 @@

After you update

- } - @if (afterRecommendations.length <= 0) { + } @empty {
You don't need to do anything after moving between these versions.
diff --git a/adev-ja/src/app/features/update/update.component.en.ts b/adev-ja/src/app/features/update/update.component.en.ts index f0814b62d8..793ed71ce7 100644 --- a/adev-ja/src/app/features/update/update.component.en.ts +++ b/adev-ja/src/app/features/update/update.component.en.ts @@ -8,7 +8,7 @@ import {Clipboard} from '@angular/cdk/clipboard'; import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu'; -import {Component, inject, signal} from '@angular/core'; +import {afterNextRender, Component, inject, input, linkedSignal, signal} from '@angular/core'; import {IconComponent} from '@angular/docs'; import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle'; import {MatCheckbox} from '@angular/material/checkbox'; @@ -39,6 +39,10 @@ interface Option { const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.includes('Windows'); +/** Versions selected when the URL doesn't specify any. */ +const DEFAULT_FROM_VERSION = '21.0'; +const DEFAULT_TO_VERSION = '22.0'; + @Component({ selector: 'adev-update-guide', templateUrl: './update.component.html', @@ -61,7 +65,8 @@ export default class UpdateComponent { protected title = signal(''); - protected level = 1; + /** The application complexity level, initialized from the `l` query param. */ + protected readonly level = linkedSignal(() => parseInt(this.levelParam() ?? '', 10) || 1); protected options: Record = { ngUpgrade: false, material: false, @@ -120,8 +125,17 @@ export default class UpdateComponent { {name: '2.1', number: 201}, {name: '2.0', number: 200}, ]; - protected from = this.versions.find((version) => version.name === '21.0')!; - protected to = this.versions.find((version) => version.name === '22.0')!; + /** The versions to update from and to, initialized from the `v` query param. */ + protected readonly from = linkedSignal( + () => + this.findVersion(this.versionsParam()?.split('-')[0]) ?? + this.findVersion(DEFAULT_FROM_VERSION)!, + ); + protected readonly to = linkedSignal( + () => + this.findVersion(this.versionsParam()?.split('-')[1]) ?? + this.findVersion(DEFAULT_TO_VERSION)!, + ); protected futureVersion = 2300; protected readonly steps: Step[] = RECOMMENDATIONS; @@ -130,19 +144,22 @@ export default class UpdateComponent { private readonly router = inject(Router); private readonly activatedRoute = inject(ActivatedRoute); + /** Bound from the `v` query param, in the `-` format (e.g. `21.0-22.0`). */ + readonly versionsParam = input(undefined, {alias: 'v'}); + /** Bound from the `l` query param, the application complexity level. */ + readonly levelParam = input(undefined, {alias: 'l'}); + constructor() { - const queryMap = this.activatedRoute.snapshot.queryParamMap; - // Detect settings in URL - this.level = parseInt(queryMap.get('l')!, 10) || this.level; - - // Detect versions of from and to - const versions = queryMap.get('v'); - if (versions) { - const [from, to] = versions.split('-'); - this.from = this.versions.find((version) => version.name === from)!; - this.to = this.versions.find((version) => version.name === to)!; - this.showUpdatePath(); - } + // Show the update path right away when the versions are provided in the URL. + afterNextRender(() => { + if (this.versionsParam()) { + this.showUpdatePath(); + } + }); + } + + private findVersion(name: string | undefined) { + return this.versions.find((version) => version.name === name); } copyCode(event: Event) { @@ -172,7 +189,7 @@ export default class UpdateComponent { this.afterRecommendations = []; // Refuse to generate recommendations for downgrades - if (this.to.number < this.from.number) { + if (this.to().number < this.from().number) { alert('We do not support downgrading versions of Angular.'); return; } @@ -182,13 +199,13 @@ export default class UpdateComponent { const labelMedium = 'medium applications'; const labelAdvanced = 'advanced applications'; - this.title.set(`${labelTitle} v${this.from.name} -> v${this.to.name} + this.title.set(`${labelTitle} v${this.from().name} -> v${this.to().name} for - ${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}`); + ${this.level() < 2 ? labelBasic : this.level() < 3 ? labelMedium : labelAdvanced}`); // Find applicable steps and organize them into before, during, and after upgrade for (const step of this.steps) { - if (step.level <= this.level && step.necessaryAsOf > this.from.number) { + if (step.level <= this.level() && step.necessaryAsOf > this.from().number) { // Check Options // Only show steps that don't have a required option // Or when the user has a matching option selected @@ -213,12 +230,12 @@ export default class UpdateComponent { step.renderedStep = await marked(this.replaceVariables(step.action)); // If you could do it before now, but didn't have to finish it before now - if (step.possibleIn <= this.from.number && step.necessaryAsOf >= this.from.number) { + if (step.possibleIn <= this.from().number && step.necessaryAsOf >= this.from().number) { this.beforeRecommendations.push(step); // If you couldn't do it before now, and you must do it now - } else if (step.possibleIn > this.from.number && step.necessaryAsOf <= this.to.number) { + } else if (step.possibleIn > this.from().number && step.necessaryAsOf <= this.to().number) { this.duringRecommendations.push(step); - } else if (step.possibleIn <= this.to.number) { + } else if (step.possibleIn <= this.to().number) { this.afterRecommendations.push(step); } } @@ -227,7 +244,7 @@ export default class UpdateComponent { // Update the URL so users can link to this transition this.router.navigate([], { relativeTo: this.activatedRoute, - queryParams: {v: `${this.from.name}-${this.to.name}`, l: this.level}, + queryParams: {v: `${this.from().name}-${this.to().name}`, l: this.level()}, queryParamsHandling: 'merge', }); @@ -257,8 +274,8 @@ export default class UpdateComponent { private async renderPreV6Instructions(): Promise { let upgradeStep: Step; - const additionalDeps = this.getAdditionalDependencies(this.to.number); - const angularVersion = this.getAngularVersion(this.to.number); + const additionalDeps = this.getAdditionalDependencies(this.to().number); + const angularVersion = this.getAngularVersion(this.to().number); const angularPackages = [ 'animations', 'common', @@ -274,7 +291,7 @@ export default class UpdateComponent { ]; // Provide npm/yarn instructions for versions before 6 - if (this.to.number < 600) { + if (this.to().number < 600) { const actionMessage = `Update all of your dependencies to the latest Angular and the right version of TypeScript.`; if (isWindows) { @@ -305,7 +322,7 @@ export default class UpdateComponent { // Npm installs typescript wrong in v5, let's manually specify // https://github.com/npm/npm/issues/16813 - if (this.packageManager === 'npm install' && this.to.number === 500) { + if (this.packageManager === 'npm install' && this.to().number === 500) { upgradeStep.action += ` \`npm install typescript@2.4.2 --save-exact\``; diff --git a/adev-ja/src/app/features/update/update.component.html b/adev-ja/src/app/features/update/update.component.html index 1b8dca6b4d..e7bdc9a507 100644 --- a/adev-ja/src/app/features/update/update.component.html +++ b/adev-ja/src/app/features/update/update.component.html @@ -11,7 +11,7 @@

Angularバージョン

v. @@ -19,7 +19,7 @@

Angularバージョン