Add mutable

Author: pearmini

runtime/index.js

@@ -6,11 +6,13 @@ import {group} from "d3-array";
 import {dispatch as d3Dispatch} from "d3-dispatch";
 import * as stdlib from "./stdlib.js";
 import {OUTPUT_MARK} from "./constant.js";
+import {Mutable} from "./mutable.js";
 
 const PREFIX = `//${OUTPUT_MARK}`;
 
 const BUILTINS = {
   recho: () => stdlib,
+  Mutable: () => Mutable,
 };
 
 function uid() {

runtime/mutable.js

@@ -0,0 +1,33 @@
+//  https://github.com/observablehq/notebook-kit/blob/main/src/runtime/stdlib/mutable.ts
+import {observe} from "./observe.js";
+
+// Mutable returns a generator with a value getter/setting that allows the
+// generated value to be mutated. Therefore, direct mutation is only allowed
+// within the defining cell, but the cell can also export functions that allows
+// other cells to mutate the value as desired.
+export function Mutable(value) {
+  let change = undefined;
+  const mutable = observe((_) => {
+    change = _;
+    if (value !== undefined) change(value);
+  });
+  return Object.defineProperty(mutable, "value", {
+    get: () => value,
+    set: (x) => ((value = x), void change?.(value)),
+  });
+}
+
+export function Mutator(value) {
+  const mutable = Mutable(value);
+  return [
+    mutable,
+    {
+      get value() {
+        return mutable.value;
+      },
+      set value(v) {
+        mutable.value = v;
+      },
+    },
+  ];
+}

runtime/observe.js

@@ -0,0 +1,36 @@
+// https://github.com/observablehq/notebook-kit/blob/main/src/runtime/stdlib/generators/observe.ts
+
+export async function* observe(initialize) {
+  let resolve = undefined;
+  let value = undefined;
+  let stale = false;
+
+  const dispose = initialize((x) => {
+    value = x;
+    if (resolve) {
+      resolve(x);
+      resolve = undefined;
+    } else {
+      stale = true;
+    }
+    return x;
+  });
+
+  if (dispose != null && typeof dispose !== "function") {
+    throw new Error(
+      typeof dispose === "object" && "then" in dispose && typeof dispose.then === "function"
+        ? "async initializers are not supported"
+        : "initializer returned something, but not a dispose function",
+    );
+  }
+
+  try {
+    while (true) {
+      yield stale ? ((stale = false), value) : new Promise((_) => (resolve = _));
+    }
+  } finally {
+    if (dispose != null) {
+      dispose();
+    }
+  }
+}

test/js/index.js

@@ -14,3 +14,4 @@ export {mandelbrotSet} from "./mandelbrot-set.js";
 export {matrixRain} from "./matrix-rain.js";
 export {jsDocString} from "./js-doc-string.js";
 export {commentLink} from "./comment-link.js";
+export {mutable} from "./mutable.js";

test/js/mutable.js

@@ -0,0 +1,17 @@
+export const mutable = `const {a, getA, setA} = (() => {
+  const a = Mutable(0);
+  return {a, getA: () => a.value, setA: (value) => a.value = value};
+})();
+
+setA(a + 1);
+
+echo(a);`;
+
+// export const mutable = `const {a, getA, setA} = (() => {
+//   const a = Mutable(0);
+//   return {a, getA: () => a.value, setA: (value) => a.value = value};
+// })();
+
+// setA(getA() + 1);
+
+// echo(a);`;