grrr

Author: sharpchen

docs/.vitepress/theme/custom.css

@@ -1,7 +1,7 @@
 :root {
     --vp-home-hero-name-color: #fa5c15;
     --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #fa5c15, rgb(251, 70, 202));
-    --vp-font-family-mono: 'JetBrains Mono NL', 'Noto Sans Mono', 'SF Mono SC', 'SF Mono', 'Cascadia Code', Menlo, 'JetBrains Mono', Monaco,
+    --vp-font-family-mono: 'JetBrains Mono NL', 'JetBrains Mono', 'Fira Code', 'Noto Sans Mono', 'SF Mono SC', 'SF Mono', 'Cascadia Code', Menlo, Monaco,
         Consolas, 'Liberation Mono', 'Courier New', 'Nerd Font Symbols', ui-monospace, monospace;
     --vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
         system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,

docs/document/Avalonia/docs/1. Fundamentals/3. MVVM Essentials.md

@@ -0,0 +1,29 @@
+# Introduction
+
+```mermaid
+graph TD;
+    A[View] -->|binds to| B[ViewModel]
+    B -->|notifies| A
+    B -->|interacts with| C[Model]
+    C -->|updates| B
+    A -->|displays data from| C
+```
+
+This chapter introduces the common usage of MVVM pattern with `CommunityToolkit.Mvvm`.
+
+## Model
+
+Model is basically a data shape, it describes the entity.
+A model should pure with a bunch of properties only.(May include implicit conversion operators.)
+
+## ViewModel
+
+ViewModel is the mediator for Model and View.
+Isolates the two, making View completely ignorant to Model.(Model surely don't know about View, it's just a pure shape.)
+It represents the status of a Model instance as a Observable with extra logic for creating or manipulating itself.
+
+## View
+
+- defining properties to store necessary data for displaying on UI.
+- defining commands to be triggered when interacting with users.
+- every data type represented as observable should be a ViewModel.

docs/document/Avalonia/docs/MVVM Essentials/1. Introduction.md

@@ -0,0 +1,69 @@
+# Defining a ViewModel
+
+A ViewModel should be a `ObservableObject`
+
+## How Avalonia Do by Default
+
+Default template of `avalonia.mvvm` generates a class `ViewModelBase` as base observable type to share across the project.
+
+```cs
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace ToDoList.ViewModels;
+
+public class ViewModelBase : ObservableObject // nah I don't like it. // [!code highlight] 
+{
+}
+```
+
+But this is rather confusing for beginners. so manually inherit from `ObservableObject` is a good start.
+
+```cs
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace ToDoList.ViewModels;
+
+public partial class MainWindowViewModel : ObservableObject // [!code highlight] 
+{
+}
+```
+
+## What's behind `ObservableObject`
+
+`ObservableObject` is both `INotifyPropertyChanged` and `INotifyPropertyChanging`, implementing the two events.
+
+```cs
+public abstract class ObservableObject : INotifyPropertyChanged, INotifyPropertyChanging { /* ... */ }
+```
+
+There's also a `SetProperty` method for **performing the observer pattern.**
+Notice a `ref` modifier appears here, it's just for making sure we can bind a value type instance.
+
+```cs
+protected bool SetProperty<T>([NotNullIfNotNull(nameof(newValue))] ref T field, T newValue, [CallerMemberName] string? propertyName = null)
+{
+    // We duplicate the code here instead of calling the overload because we can't
+    // guarantee that the invoked SetProperty<T> will be inlined, and we need the JIT
+    // to be able to see the full EqualityComparer<T>.Default.Equals call, so that
+    // it'll use the intrinsics version of it and just replace the whole invocation
+    // with a direct comparison when possible (eg. for primitive numeric types).
+    // This is the fastest SetProperty<T> overload so we particularly care about
+    // the codegen quality here, and the code is small and simple enough so that
+    // duplicating it still doesn't make the whole class harder to maintain.
+    if (EqualityComparer<T>.Default.Equals(field, newValue)) // [!code highlight] 
+    { // [!code highlight] 
+        return false; // [!code highlight] 
+    } // [!code highlight] 
+
+    OnPropertyChanging(propertyName);
+
+    field = newValue;
+
+    OnPropertyChanged(propertyName);
+
+    return true;
+}
+```
+
+> [!NOTE]
+> There's multiple overloads of `SetProperty`, it's just one of the most commonly used.

docs/document/Avalonia/docs/MVVM Essentials/2. Defining a ViewModel.md

@@ -0,0 +1,60 @@
+# ObservableProperty
+
+Another useful attribute from `CommunityToolkit.Mvvm`, by using `ObservableProperty`, we can get rid of `ObservableObject.SetProperty` we mentioned earlier.
+
+## How is `ObservableObject.SetProperty` been used
+
+`SetProperty` saves us from the boilerplate for each observable property.
+
+```cs
+class Foo : ObservableObject
+{
+    private bool _isChecked;
+
+    public bool IsChecked
+    {
+        get => _isChecked;
+        set => SetProperty(ref _isChecked, value); // [!code highlight] 
+    }
+}
+```
+
+`ObservableProperty` saves even more. It's empowered by source generator, which needs an extra `partial` mark for emiting code at somewhere else.
+
+```cs
+partial class Foo : ObservableObject // requires partial to emit code // [!code highlight] 
+{
+    [ObservableProperty] private bool _isChecked; // [!code highlight] 
+}
+```
+
+The code generated is like the following, performs the similar logic as `SetProperty`.
+
+```cs
+partial class Foo
+{
+    /// <inheritdoc cref="_isChecked"/>
+    [global::System.CodeDom.Compiler.GeneratedCode("CommunityToolkit.Mvvm.SourceGenerators.ObservablePropertyGenerator", "8.3.0.0")]
+    [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage]
+    public bool IsChecked
+    {
+        get => _isChecked;
+        set
+        {
+            if (!global::System.Collections.Generic.EqualityComparer<bool>.Default.Equals(_isChecked, value)) // [!code highlight] 
+            {
+                // also generates a lot methods for the field only.
+                OnIsCheckedChanging(value);
+                OnIsCheckedChanging(default, value);
+                OnPropertyChanging(global::CommunityToolkit.Mvvm.ComponentModel.__Internals.__KnownINotifyPropertyChangingArgs.IsChecked);
+                _isChecked = value;
+                OnIsCheckedChanged(value);
+                OnIsCheckedChanged(default, value);
+                OnPropertyChanged(global::CommunityToolkit.Mvvm.ComponentModel.__Internals.__KnownINotifyPropertyChangedArgs.IsChecked);
+            }
+        }
+    }
+
+    // ...
+}
+```

docs/document/Avalonia/docs/MVVM Essentials/3. Let Property Observable.md

@@ -285,7 +285,8 @@ class Weather
 ## Property Observer
 
 Use `INotifyPropertyChanged` for watching properties.
-`PropertyChangedEventArgs` takes only `PropertyName`
+**`INotifyPropertyChanged` implies the object implementing this interface should have a ability to be informed when certain property changed.**
+The event handler generated takes `PropertyChangedEventArgs` which has only a property named as `PropertyName`.
 
 ```cs
 using System.ComponentModel;
@@ -451,3 +452,98 @@ class BidirectionalBinding<TFirst, TSecond>
     }
 }
 ```
+
+> [!NOTE]
+> `BidirectionalBinding` should actually be a `IDisposable`, but I failed to find a way to deleted the event handlers.
+
+## Property Dependencies (WIP)
+
+On problem of property observer is, multiple property tracking is possible unless they have dependencies among.
+
+Given a example of a property for conditional status `IsDying` which is dependent on  property `Health`.
+
+Once `Health` changed, `IsDying` might changed too, but would need a extra check to make sure it doesn't notify on each change of `Health`.
+**But this will explode when you have many many dependent properties.**
+
+```cs
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+
+Player p = new();
+p.Health -= 99; // [!code highlight] 
+// Property Health changed
+// Property IsDying changed
+
+class Player : INotifyPropertyChanged
+{
+    private int health = 100;
+
+    public int Health
+    {
+        get => health;
+        set
+        {
+            if (value == health) return;
+            var isDying = IsDying; // [!code highlight] 
+            health = value;
+            OnPropertyChanged();
+            if (isDying != IsDying) // [!code highlight] 
+                OnPropertyChanged(nameof(IsDying)); // [!code highlight] 
+        }
+    }
+
+    public bool IsDying => Health < 5; // [!code highlight] 
+
+    public Player()
+    {
+        PropertyChanged += (sender, args) =>
+            Console.WriteLine($"Property {args.PropertyName} changed.");
+    }
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
+    {
+        PropertyChanged?.Invoke(this, new(propertyName));
+    }
+}
+```
+
+We'll have to use a base class to handle the default behaviors.
+Each property might have multiple dependencies and each dependency should be unique since they're inside the same class.
+So a map as `Dictionary<string, HashSet<string>>` appears here and the `OnPropertyChanged` should walk each property recursively.
+
+```cs
+abstract class PropertyNotificationSupport : INotifyPropertyChanged
+{
+    private readonly Dictionary<string, HashSet<string>> _depedendcyMap = []; // stores property name and its dependent properties. // [!code highlight] 
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
+    {
+        PropertyChanged?.Invoke(this, new(propertyName));
+        foreach (var prop in _depedendcyMap.Keys)
+        {
+            // for props relied on the coming property
+            // notify them recursively
+            if (_depedendcyMap[propertyName].Contains(prop))
+                OnPropertyChanged(prop); // recursive call on other property dependencies // [!code highlight] 
+        }
+    }
+}
+```
+
+Yet another target is not only tracking the single property name but also sending with which property change causes the change of another property.
+Which means the literal property dependency graph.
+
+The solution is using `Expression`, to assign both evaluation logic and name of the property with one shot. We should have a method inside base class to do that.
+
+```cs
+private readonly Func<bool> _isDying; // [!code highlight] 
+public bool IsDying => _isDying();
+public Player()
+{
+    // implement `Property` method in the base class.
+    IsDying = Property(nameof(IsDying), () => Health < 5); // [!code highlight] 
+}
+```

docs/document/Avalonia/docs/MVVM Essentials/4. Trigger a Command.md

@@ -15,7 +15,6 @@ alt: sharpchen
 <VPFeatures :features="features" />
 
 <script lang="ts" setup>
-import Enumerable from 'linq';
 import VPFeatures, { type Feature } from 'vitepress/dist/client/theme-default/components/VPFeatures.vue';
 import VPHero from 'vitepress/dist/client/theme-default/components/VPHero.vue';
 import { ref } from 'vue';

docs/document/Csharp Design Patterns/docs/Behavioural/Observer.md

@@ -8,7 +8,7 @@ export type DocumentInfo = Record<string, { icon: string; description: string }>
 
 export const documentMap = {
   'Csharp Design Patterns': { icon: '👾', description: 'Design Patterns in C#' },
-  'Modern CSharp': { icon: '🦖', description: 'Modernized C# since 2015?' },
+  // 'Modern CSharp': { icon: '🦖', description: 'Modernized C# since 2015?' },
   Articles: { icon: '📰', description: 'Regular articles' },
   Avalonia: { icon: '😱', description: 'AvaloniaUI' },
   Docker: { icon: '🐳', description: 'Ultimate Docker' },
@@ -17,7 +17,7 @@ export const documentMap = {
   SQL: { icon: '🦭', description: '' },
   TypeScript: { icon: '🤯', description: '' },
   // VBA: { icon: '💩', description: 'VBA for excel' },
-  Vue3: { icon: '⚡', description: '' },
+  // Vue3: { icon: '⚡', description: '' },
   'Unsafe CSharp': { icon: '😎', description: 'Entering the danger zone...' },
   'NeoVim ColorScheme Development': {
     icon: '🎨',