Exam: improve examples for Asynchronous Signals

.eslintrc.json

@@ -11,6 +11,14 @@
   "globals": {
     "BigInt": true
   },
+  "overrides": [
+    {
+      "files": ["*.mjs"],
+      "parserOptions": {
+        "sourceType": "module"
+      }
+    }
+  ],
   "rules": {
     "indent": [
       "error",

JavaScript/1-angular.mjs

@@ -13,6 +13,14 @@ count.update((prev) => prev + 50);
 console.log(`Count 3: ${count()}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num()}`);
 
 const total = computed(() => num() + count());
-console.log(`Total: ${total()}`);
+console.log(`Total 1: ${total()}`);
+
+// Display reactivity
+
+num.update((prev) => prev * 2);
+console.log(`Num 2: ${num()}`);
+
+console.log(`Total 2: ${total()}`);

JavaScript/2-preact.js

@@ -13,6 +13,14 @@ count.value += 50;
 console.log(`Count 3: ${count.value}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num.value}`);
 
 const total = computed(() => num.value + count.value);
-console.log(`Total: ${total.value}`);
+console.log(`Total 1: ${total.value}`);
+
+// Display reactivity
+
+num.value *= 2;
+console.log(`Num 2: ${num.value}`);
+
+console.log(`Total 2: ${total.value}`);

JavaScript/3-naïve.js → JavaScript/3-naïve-closure.js

@@ -25,6 +25,14 @@ count.update((prev) => prev + 50);
 console.log(`Count 3: ${count()}`);
 
 const num = signal(1000);
+console.log(`Num 1: ${num()}`);
 
 const total = computed(() => num() + count());
-console.log(`Total: ${total()}`);
+console.log(`Total 1: ${total()}`);
+
+// Display reactivity
+
+num.update((prev) => prev * 2);
+console.log(`Num 2: ${num()}`);
+
+console.log(`Total 2: ${total()}`);

JavaScript/4-naïve-classes.js

@@ -0,0 +1,46 @@
+'use strict';
+
+class Signal {
+  constructor(value) {
+    this._value = value;
+  }
+
+  get value() {
+    return typeof this._value === 'function' ? this._value() : this._value;
+  }
+
+  set value(newValue) {
+    this._value = newValue;
+  }
+
+  update(fn) {
+    this._value = fn(this._value);
+  }
+}
+
+class Computed extends Signal {
+  constructor(fn) {
+    super(fn);
+  }
+}
+
+// Usage
+
+const count = new Signal(100);
+console.log(`Count 1: ${count.value}`);
+
+count.value = 200;
+console.log(`Count 2: ${count.value}`);
+
+count.update((prev) => prev + 50);
+console.log(`Count 3: ${count.value}`);
+
+const num = new Signal(1000);
+console.log(`Num 1: ${num.value}`);
+
+const total = new Computed(() => num.value + count.value);
+console.log(`Total 1: ${total.value}`);
+
+num.value *= 2;
+console.log(`Num 2: ${num.value}`);
+console.log(`Total 2: ${total.value}`);