A new reactive primitive: cell

text/1071-cell.md

@@ -84,7 +84,7 @@ interface Cell<Value> extends Reactive<Value> {
     /**
     * Utility to create a Cell without the caller using the `new` keyword.
     */
-    static create<T>(initialValue: T, equals?: (a: T, b: T) => boolean): Cell<T>;
+    static create<T>(initialValue: T, equals?: (a: T, b: T) => boolean, description?: string): Cell<T>;
 
     /**
     * The constructor takes an optional initial value and optional equals function.
@@ -113,25 +113,34 @@ interface Cell<Value> extends Reactive<Value> {
 Behaviorally, the `Cell` behaves almost the same as this function:
 ```js
 class CellPolyfill {
-    @tracked current;
     #isFrozen = false;
+    #value;
 
-    constructor(initialValue) {
-        this.current = initialValue;
+    constructor(initialValue, equals, description) {
+        this.#value = initialValue;
+        // ...
+    }
+
+    get current() {
+        // + consume
+        return this.#value;
     }
 
     read() {
-        return this.current;
+        // + consume
+        return this.#value;
     }
 
     set(value) {
         assert(`Cannot set a frozen Cell`, !this.#isFrozen);
-        this.current = value;
+        // + dirty
+        this.#value = value;
     }
 
     update(updater) {
         assert(`Cannot update a frozen Cell`, !this.#isFrozen);
-        this.set(updater(this.read()));
+        // #value is not tracked
+        this.set(updater(this.#value));
     }
 
     freeze() {
@@ -227,7 +236,7 @@ function tracked(target, key, { initializer }) {
     let cell = cells.get(obj);
 
     if (cell === undefined) {
-      cell = Cell.create(initializer.call(this), () => false);
+      cell = Cell.create(initializer.call(this), null, `tracked:${key}`);
       cells.set(this, cell);
     }
 
@@ -264,7 +273,7 @@ export function tracked(target, context) {
     },
 
     init(value) {
-      return Cell.create(value);
+      return Cell.create(value, null, `tracked:${key}`);
     },
   };
 }