From 6c02a5d6417a177de57b86275179b30ffff5cce6 Mon Sep 17 00:00:00 2001 From: Chau Tran Date: Thu, 2 Mar 2023 10:06:59 -0600 Subject: [PATCH 01/19] fix: add info about equality fn and fix some snippets (#34) --- .../snippets/signal-reactivity-cheatsheet.mdx | 71 ++++++++++++------- 1 file changed, 47 insertions(+), 24 deletions(-) diff --git a/src/pages/snippets/signal-reactivity-cheatsheet.mdx b/src/pages/snippets/signal-reactivity-cheatsheet.mdx index ba5d27e..74b08c3 100644 --- a/src/pages/snippets/signal-reactivity-cheatsheet.mdx +++ b/src/pages/snippets/signal-reactivity-cheatsheet.mdx @@ -12,68 +12,91 @@ Change detection works by detecting common browser events like mouse clicks, HTT By default, Angular uses the _ChangeDetectionStrategy.Default_ change detection strategy which checks every component in the component tree from the top to the bottom every time a common browser event is emitted. This way of checking don't take into account the components' dependencies and is called dirty checking. This can negatively influence your application performance specially for large application with many components. -With the release of Angular version 16, a new system of primitive reactivity will be created: Signal Reactivity which don't need zone js to trigger a refresh of a view. +With the release of Angular version 16, a new system of primitive reactivity will be created: Signal Reactivity which don't need zone js to trigger a refresh of a view. The goal of this snippet is to give you a cheat sheet about signal reactivity and give you keys to be ready to work with them. -#### Create a signal +### Create a signal Create a signal is very easy, it's just calling a function ```typescript -const counter = signal(0) // create a signal with initial value to 0; +const counter = signal(0); // create a signal with initial value to 0; ``` -#### Update a signal +#### Equality Function + +By default, `signal()` uses a default `ValueEqualityFn`. + +- For primitive values, `Object.is()` is utilized +- For reference values (object and array), they are always considered _unequal_ + +We can also provide a custom `ValueEqualityFn` to `signal()` for custom compare logic on Signal's update + +```ts +const users = signal([], (a, b) => userCompareFn(a, b)); +``` + +### Update a signal The signal function return a SettableSignal. This gives you some amazing possibilities ```typescript const todos = signal([]); -todos.set(['Make My dinner']) // directly set the signal to a new value and notify all the dependents +todos.set(["Make My dinner"]); // directly set the signal to a new value and notify all the dependents -todos.update(currentTodos => ([...currentTodos, 'Create a new Angular Snippet']) ) // update the value of the signal based on its current value and notify all dependents +todos.update((currentTodos) => [ + ...currentTodos, + "Create a new Angular Snippet", +]); // update the value of the signal based on its current value and notify all dependents -todos.mutate(currentTodos => { - currentTodos.push('Participate to Open Source'); -}) // update the currentValue by mutating it in-place and notify all the dependents +// NOTE: `mutate` will by-pass equality check and will always notify change +todos.mutate((currentTodos) => { + currentTodos.push("Participate to Open Source"); +}); // update the currentValue by mutating it in-place and notify all the dependents ``` -#### Get the value of a signal +### Get the value of a signal The way to get the value of a signal will be the same in the template as in the component. ```typescript -const counter = signal(0) // create a signal with initial value -console.log(counter()) // print the value of the signal which is 0 +const counter = signal(0); // create a signal with initial value +console.log(counter()); // print the value of the signal which is 0 ``` -#### Computed +### Computed `computed()` creates a memoizing signal, which calculates its value from the values of some number of input signals. ```typescript -const person = signal<{ firstname: string; lastname: string}>({ firstname: 'John', lastname: 'Doe'}) +const person = signal<{ firstname: string; lastname: string }>({ + firstname: "John", + lastname: "Doe", +}); // Automatically updates when person() change; -const presentation = computed(() => console.log(`${person().firstname} ${person().lastname}`)); +const presentation = computed(() => { + const fullName = `${person().firstname} ${person().lastname}`; + console.log(fullName); + return fullName; +}); -person.update(person => ({ firstname: 'Angular', lastname: 'Snippet'})); +person.update((person) => ({ firstname: "Angular", lastname: "Snippet" })); ``` -#### Effect +### Effect `effect()` schedules and runs a side-effectful function inside a reactive context. Signal dependencies of this function are captured, and the side effect is re-executed whenever any of its dependencies produces a new value. ```typescript const idTodo = signal(12); -effect(() => - fetch(`https://awesome-todo.com/todos/${idTodo()}`) - .then(response => response.json()) - .then(console.log) // will sent the request with idTodo() = 12 -) +effect( + () => + fetch(`https://awesome-todo.com/todos/${idTodo()}`) + .then((response) => response.json()) + .then(console.log) // will sent the request with idTodo() = 12 +); ``` - - From ab76b3776d9dc94c4c799bb2dbf84cff3f85d468 Mon Sep 17 00:00:00 2001 From: Chau Tran Date: Thu, 2 Mar 2023 10:07:14 -0600 Subject: [PATCH 02/19] fix: add more information about --minimal and --defaults to minimal angular project snippet (#33) --- .../create-minimal-angular-project-for-research-purpose.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/snippets/create-minimal-angular-project-for-research-purpose.mdx b/src/pages/snippets/create-minimal-angular-project-for-research-purpose.mdx index 3a7e8b2..9c0d994 100644 --- a/src/pages/snippets/create-minimal-angular-project-for-research-purpose.mdx +++ b/src/pages/snippets/create-minimal-angular-project-for-research-purpose.mdx @@ -16,4 +16,7 @@ Just use this command line and you are good to go. ng new learn-pipe --minimal --defaults ``` +- `--minimal` is the short-hand for `--inline-template --inline-style --skip-tests` +- `--defaults` is the short-hand for `--style=css --router=false` + From 6801afa0232dfc90ccff4e68b0c6c7ff6334ef04 Mon Sep 17 00:00:00 2001 From: Robin Goetz <35136007+goetzrobin@users.noreply.github.com> Date: Thu, 2 Mar 2023 11:12:26 -0500 Subject: [PATCH 03/19] feat: fine tune the design of the website (#31) this fine-tuning includes mostly changes to the tailwind classes applied. I also added a footer giving credit to Santosh for creating this awesome project! --- src/components/BlogCard.astro | 6 +++--- src/components/Footer.astro | 3 +++ src/components/Header.astro | 22 +++++++++++----------- src/components/TagsLine.astro | 2 +- src/layouts/BlogLayout.astro | 22 ++++++++++++---------- src/layouts/Layout.astro | 4 +++- src/pages/index.astro | 20 ++++++++++---------- src/pages/snippets.astro | 4 ++-- 8 files changed, 45 insertions(+), 38 deletions(-) create mode 100644 src/components/Footer.astro diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro index acb4dab..b577bcd 100644 --- a/src/components/BlogCard.astro +++ b/src/components/BlogCard.astro @@ -17,15 +17,15 @@ url = url + "/"; ---
  • -

    {title}

    +

    {title}

     diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..ebba91d --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,3 @@ +
    +An open source project created by Santhosh Yadav. +
    \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 86bedb7..f28dba7 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -14,26 +14,26 @@ const navItems = [ --- -
    +
    Angular Snippets
    -