From dcf80b54db679313a4ee6627b74dc98ba4418fb0 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 09:06:25 +0100 Subject: [PATCH 01/10] docs(pipes): update pipe challenge texts --- .../challenges/angular/10-pipe-utility.md | 19 +++++++++++++++---- .../docs/challenges/angular/8-pipe-pure.md | 19 +++++++++++++++---- .../docs/challenges/angular/9-pipe-wrapFn.md | 19 +++++++++++++++---- 3 files changed, 45 insertions(+), 12 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index f8688ddfb..6e137337f 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -8,14 +8,25 @@ sidebar: order: 202 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the third of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. +Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. + +Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance. + +By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. + +:::note +A **pure** pipe is only called mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). ## Information: -In this third exercice, you want to access utils functions. Currently you cannot access them directly from your template. The goal is to create a specific pipe for this utils file where you will need to pass the name of the function you want to call and the needed arguments. +In this exercise, you want to access utils functions. Currently you cannot access them directly from your template. The goal is to create a specific pipe for this utils file, where you will need to pass the name of the function you want to call and the needed arguments. ## Constraints: -- must be strongly typed +- Must be strongly typed diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 58620cba0..6e5b11a36 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -9,14 +9,25 @@ sidebar: order: 3 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. +Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. + +Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance. + +By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. + +:::note +A **pure** pipe is only called mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). ## Information -In this first exercice, you call a simple function inside your template. The goal is to convert it to a pipe. +In this exercise, you need to refactor a transform function inside a component, which is called inside your template. The goal is to convert this function to a pipe. ## Constraints -- must be strongly typed +- Must be strongly typed diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index a50aa09a9..9c97bcdc1 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -9,15 +9,26 @@ sidebar: order: 103 --- -The goal of this series of 3 pipe challenges is to master **pipe** in Angular. +This is the second of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. -Pure pipes are a very useful way to transform data from your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. +Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. + +Pipes are designed to be efficient and optimized for performance. They use change detection mechanisms to only recalculate the value if the input changes, to minimize unnecessary calculations and improving rendering performance. + +By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. + +:::note +A **pure** pipe is only called mwhen the value changes. +A **impure** pipe is called for every change detection cycle no matter whether the value changes. +::: + +There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). ## Information: -In this second exercice, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome. +In this exercise, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome. The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. **`WrapFn` must be highly reusable.** ## Constraints: -- must be strongly typed +- Must be strongly typed From 2f18c6dcde864e41e07c04c5242a0b47a45695a3 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 09:08:20 +0100 Subject: [PATCH 02/10] refactor(pipe-easy): update component & comments --- apps/angular/pipe-easy/src/app/app.component.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/angular/pipe-easy/src/app/app.component.ts b/apps/angular/pipe-easy/src/app/app.component.ts index 3c19fa169..73fef0474 100644 --- a/apps/angular/pipe-easy/src/app/app.component.ts +++ b/apps/angular/pipe-easy/src/app/app.component.ts @@ -7,15 +7,16 @@ import { Component } from '@angular/core'; selector: 'app-root', template: `
- {{ heavyComputation(person, index) }} + {{ numberedPerson(person, index) }}
`, }) export class AppComponent { - persons = ['toto', 'jack']; + // TODO: untyped array? + persons = ['toto', 'jack', 'samuel', 'steve']; - heavyComputation(name: string, index: number) { - // very heavy computation - return `${name} - ${index}`; + // TODO: very heavy computation, replace this function with a pipe + numberedPerson(name: string, index: number) { + return `${index + 1}. ${name}`; } } From bf45d4bb0f6807d0ef391559d35dfd0ce7942e6b Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 14:33:51 +0100 Subject: [PATCH 03/10] revert: pipe challenge changes --- apps/angular/pipe-easy/src/app/app.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/angular/pipe-easy/src/app/app.component.ts b/apps/angular/pipe-easy/src/app/app.component.ts index 73fef0474..e7bd6b500 100644 --- a/apps/angular/pipe-easy/src/app/app.component.ts +++ b/apps/angular/pipe-easy/src/app/app.component.ts @@ -7,16 +7,15 @@ import { Component } from '@angular/core'; selector: 'app-root', template: `
- {{ numberedPerson(person, index) }} + {{ heavyComputation(person, index) }}
`, }) export class AppComponent { - // TODO: untyped array? persons = ['toto', 'jack', 'samuel', 'steve']; - // TODO: very heavy computation, replace this function with a pipe - numberedPerson(name: string, index: number) { - return `${index + 1}. ${name}`; + // TODO: very heavy computation + heavyComputation(name: string, index: number) { + return `${name} - ${index}`; } } From f13cd8a9546e00f7521c795b4d001f2d78031c95 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 14:41:52 +0100 Subject: [PATCH 04/10] revert: pipe challenge changes (2) --- apps/angular/pipe-easy/src/app/app.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/angular/pipe-easy/src/app/app.component.ts b/apps/angular/pipe-easy/src/app/app.component.ts index e7bd6b500..efa51d525 100644 --- a/apps/angular/pipe-easy/src/app/app.component.ts +++ b/apps/angular/pipe-easy/src/app/app.component.ts @@ -12,9 +12,9 @@ import { Component } from '@angular/core'; `, }) export class AppComponent { - persons = ['toto', 'jack', 'samuel', 'steve']; + persons = ['toto', 'jack']; - // TODO: very heavy computation + // very heavy computation heavyComputation(name: string, index: number) { return `${name} - ${index}`; } From 4da002730be6f25b3ec725775892c963a2c58188 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 14:48:56 +0100 Subject: [PATCH 05/10] revert: pipe challenge changes (3) --- apps/angular/pipe-easy/src/app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/angular/pipe-easy/src/app/app.component.ts b/apps/angular/pipe-easy/src/app/app.component.ts index efa51d525..3c19fa169 100644 --- a/apps/angular/pipe-easy/src/app/app.component.ts +++ b/apps/angular/pipe-easy/src/app/app.component.ts @@ -14,8 +14,8 @@ import { Component } from '@angular/core'; export class AppComponent { persons = ['toto', 'jack']; - // very heavy computation heavyComputation(name: string, index: number) { + // very heavy computation return `${name} - ${index}`; } } From 549c283f882ccfe283ff9bfdf98e4efcc163bdf2 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 22:15:49 +0100 Subject: [PATCH 06/10] docs(pipes): fix typo & add linebreak --- docs/src/content/docs/challenges/angular/10-pipe-utility.md | 2 +- docs/src/content/docs/challenges/angular/8-pipe-pure.md | 2 +- docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index 6e137337f..f356ec0f1 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -17,7 +17,7 @@ Pipes are designed to be efficient and optimized for performance. They use chang By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. :::note -A **pure** pipe is only called mwhen the value changes. +A **pure** pipe is only called when the value changes.\ A **impure** pipe is called for every change detection cycle no matter whether the value changes. ::: diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 6e5b11a36..529ff1f04 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -18,7 +18,7 @@ Pipes are designed to be efficient and optimized for performance. They use chang By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. :::note -A **pure** pipe is only called mwhen the value changes. +A **pure** pipe is only called when the value changes.\ A **impure** pipe is called for every change detection cycle no matter whether the value changes. ::: diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 9c97bcdc1..350a6d271 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -18,7 +18,7 @@ Pipes are designed to be efficient and optimized for performance. They use chang By default a pipe is pure, you should be aware that setting `pure` to false is prone to be inefficient, because it increases the amount of rerenders. :::note -A **pure** pipe is only called mwhen the value changes. +A **pure** pipe is only called when the value changes.\ A **impure** pipe is called for every change detection cycle no matter whether the value changes. ::: From 890f5cc430e0a43b14ea2dd77f7620751150baa9 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 22:23:32 +0100 Subject: [PATCH 07/10] docs(pipe-utility): change impure pipe description --- docs/src/content/docs/challenges/angular/10-pipe-utility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index f356ec0f1..24e469da5 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -18,7 +18,7 @@ By default a pipe is pure, you should be aware that setting `pure` to false is p :::note A **pure** pipe is only called when the value changes.\ -A **impure** pipe is called for every change detection cycle no matter whether the value changes. +A **impure** pipe is called every change detection cycle. ::: There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). From ee5fae726e766137c5e008495f4a5a4b7ce7a537 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 22:25:56 +0100 Subject: [PATCH 08/10] docs(pipes): change impure pipe description --- docs/src/content/docs/challenges/angular/8-pipe-pure.md | 2 +- docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 529ff1f04..e69f833a7 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -19,7 +19,7 @@ By default a pipe is pure, you should be aware that setting `pure` to false is p :::note A **pure** pipe is only called when the value changes.\ -A **impure** pipe is called for every change detection cycle no matter whether the value changes. +A **impure** pipe is called every change detection cycle. ::: There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 350a6d271..6f457669c 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -19,7 +19,7 @@ By default a pipe is pure, you should be aware that setting `pure` to false is p :::note A **pure** pipe is only called when the value changes.\ -A **impure** pipe is called for every change detection cycle no matter whether the value changes. +A **impure** pipe is called every change detection cycle. ::: There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). From 5886a0f0c914e03e757772fcbe1ed598d574aa7a Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 22:30:46 +0100 Subject: [PATCH 09/10] docs(pipes): add information and statement titles --- docs/src/content/docs/challenges/angular/10-pipe-utility.md | 6 ++++-- docs/src/content/docs/challenges/angular/8-pipe-pure.md | 2 +- docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md | 4 +++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/challenges/angular/10-pipe-utility.md index 24e469da5..f10d9f3d7 100644 --- a/docs/src/content/docs/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/challenges/angular/10-pipe-utility.md @@ -8,6 +8,8 @@ sidebar: order: 202 --- +## Information + This is the third of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. @@ -23,10 +25,10 @@ A **impure** pipe is called every change detection cycle. There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). -## Information: +## Statement In this exercise, you want to access utils functions. Currently you cannot access them directly from your template. The goal is to create a specific pipe for this utils file, where you will need to pass the name of the function you want to call and the needed arguments. -## Constraints: +## Constraints - Must be strongly typed diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index e69f833a7..79b58a873 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -24,7 +24,7 @@ A **impure** pipe is called every change detection cycle. There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). -## Information +## Statement In this exercise, you need to refactor a transform function inside a component, which is called inside your template. The goal is to convert this function to a pipe. diff --git a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md index 6f457669c..4d75ef188 100644 --- a/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/challenges/angular/9-pipe-wrapFn.md @@ -9,6 +9,8 @@ sidebar: order: 103 --- +## Information + This is the second of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed. @@ -24,7 +26,7 @@ A **impure** pipe is called every change detection cycle. There are some useful predefined pipes like the DatePipe, UpperCasePipe and CurrencyPipe. To learn more about pipes in Angular, check the API documentation [here](https://angular.io/guide/pipes). -## Information: +## Statement In this exercise, you are calling multiple functions inside your template. You can create a specific pipe for each of the functions but this will be too cumbersome. The goal is to create a `wrapFn` pipe to wrap your callback function though a pipe. Your function MUST remain inside your component. **`WrapFn` must be highly reusable.** From d8ed81be36d6a7f5c69ff65b06cf74b16fd4d1e6 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Fri, 16 Feb 2024 22:31:36 +0100 Subject: [PATCH 10/10] docs(pipes): add information and statement titles (2) --- docs/src/content/docs/challenges/angular/8-pipe-pure.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/content/docs/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/challenges/angular/8-pipe-pure.md index 79b58a873..e6871a466 100644 --- a/docs/src/content/docs/challenges/angular/8-pipe-pure.md +++ b/docs/src/content/docs/challenges/angular/8-pipe-pure.md @@ -9,6 +9,8 @@ sidebar: order: 3 --- +## Information + This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. Pipes are a very powerful way to transform data in your template. The difference between calling a function and a pipe is that pure pipes are memoized. So they won't be recalculated every change detection cycle if their inputs haven't changed.