Generators.{now,width} (#324)

src/client/main.js

@@ -1,13 +1,13 @@
 import {Runtime} from "observablehq:runtime";
 import {registerDatabase, registerFile} from "observablehq:stdlib";
-import {DatabaseClient, FileAttachment, Generators, Mutable, now, width} from "observablehq:stdlib";
+import {DatabaseClient, FileAttachment, Generators, Mutable} from "observablehq:stdlib";
 import {inspect, inspectError} from "./inspect.js";
 import * as recommendedLibraries from "./stdlib/recommendedLibraries.js";
 import * as sampleDatasets from "./stdlib/sampleDatasets.js";
 
 const library = {
-  now,
-  width,
+  now: () => Generators.now(),
+  width: () => Generators.width(document.querySelector("main")),
   DatabaseClient: () => DatabaseClient,
   FileAttachment: () => FileAttachment,
   Generators: () => Generators,

src/client/stdlib.js

@@ -2,5 +2,3 @@ export {DatabaseClient, registerDatabase} from "./stdlib/databaseClient.js";
 export {FileAttachment, registerFile} from "./stdlib/fileAttachment.js";
 export * as Generators from "./stdlib/generators/index.js";
 export {Mutable} from "./stdlib/mutable.js";
-export {now} from "./stdlib/now.js";
-export {width} from "./stdlib/width.js";

src/client/stdlib/generators/index.js → src/client/stdlib/generators/index.ts

@@ -1,3 +1,5 @@
 export {input} from "./input.js";
+export {now} from "./now.js";
 export {observe} from "./observe.js";
 export {queue} from "./queue.js";
+export {width} from "./width.js";

src/client/stdlib/generators/width.ts

@@ -0,0 +1,13 @@
+import {observe} from "./observe.js";
+
+export function width(target: Element, options?: ResizeObserverOptions) {
+  return observe((notify: (width: number) => void) => {
+    let width: number;
+    const observer = new ResizeObserver(([entry]) => {
+      const w = entry.contentRect.width;
+      if (w !== width) notify((width = w));
+    });
+    observer.observe(target, options);
+    return () => observer.disconnect();
+  });
+}