3e:null 3f:["$","title",null,{"children":"obview | Riley | Observable"}] 45:T1c4c,/* A MapSet is a Map that represents a one-to-many cardinality. Internally, this is structured as a Map that has entries where each set of values is stored in a Set. If a Set ever becomes empty, its key is removed from the Map. warning: Some instance methods return Set instances. For efficiency, these are the actual instances stored in the data structure. Please do not modify them directly, or you will get undefined behavior. */ class MapSet extends Map { static change; /* This constructs a new MapSet, optionally initialising it with the iterable `entries` which must produce iterables of size two, each holding a key and an iterable of values. */ constructor(entries) { super(); if (entries) { for (let [k, v] of entries) { this.add(k, ...v); } } } static { Object.defineProperties(this, { change: { enumerable: true, value: Object.create(null, Object.fromEntries([...["none", "value", "entry"].entries()].map(([value, name]) => [name, { enumerable: true, value }]))) } }); } /* This is a convenience factory method, returning a new MapSet. Every argument must be an iterable such that the first element is the key and the remaining elements are the values. */ static collect(...entries) { return new this(entries.map(([k, ...v]) => [k, v])); } /* This returns the Set that corresponds with the key. If the key is not in this Map, then an empty Set is returned. warning: While the Set instances are technically mutable, they should never be modified directly. For a safer option, see MapSet.prototype.values. */ get(key) { return super.get(key) ?? new Set(); } /* With zero arguments, this is the same as Map.prototype.values (returning a MapIterator of the entries). With one argument, the key, this behaves the same as MapSet.prototype.get, except that it returns an iterable rather than the Set instance. */ values(...key) { return key.length ? this.#values(key.shift()) : super.values(); } /* This is a helper function for MapSet.prototype.values, used when a key is supplied. */ *#values(key) { yield* this.get(key); } /* This finds and returns the corresponding key of any Set that has any of the provided values. */ find(...values) { for (let [k, v] of this.entries()) { for (let t of values) { if (v.has(t)) { return k; } } } } /* This finds and returns the corresponding keys of each Set that has any of the provided values. */ *findEach(...values) { for (let [k, v] of this.entries()) { for (let t of values) { if (v.has(t)) { yield k; } } } } /* This adds the values to the Set that corresponds with `key`. return values: MapSet.change.none: Nothing changed. MapSet.change.value: The Set’s size increased. MapSet.change.entry: An entry was added to the Map. Each listed return value takes precedence over the ones before it. */ add(key, ...values) { let s; if (s = super.get(key)) { let size = s.size; for (let value of values) { s.add(value); } return s.size > size ? MapSet.change.value : MapSet.change.none; } else { values.length && super.set(key, new Set(values)); return MapSet.change.entry; } } /* This iterates through all of the entries and adds every provided value to each Set. Return values are the same as in MapSet.prototype.add. */ addEach(...values) { // return Math.max(...[...this.keys()].map(k => this.delete(k, ...values))); let r = MapSet.change.none; for (let k of this.keys()) { switch (this.add(k, ...values)) { case MapSet.change.none: break; case MapSet.change.value: (r === MapSet.change.entry) || (r = MapSet.change.value); break; case MapSet.change.entry: r = MapSet.change.entry; } } return r; } /* This replaces the values in the corresponding entry with the supplied values and returns whether the entry was already present. */ set(key, ...values) { let s = super.get(key); if (s) { s.clear(); if (values.length) { for (let value of values) { s.add(value); } } else { super.delete(key); } return true; } values.length && super.set(key, new Set(values)); return false; } /* This deletes the values from the Set that corresponds with `key`. return values: MapSet.change.none: Nothing changed. MapSet.change.value: The Set’s size decreased. MapSet.change.entry: An entry was removed from the Map. Each listed return value takes precedence over the ones before it. */ delete(key, ...values) { let s = super.get(key); if (!s) { return 0; } if (values.length) { let size = s.size; for (let value of values) { s.delete(value); } if (!s.size) { super.delete(key); return MapSet.change.entry; } return s.size < size ? MapSet.change.value : MapSet.change.none; } return MapSet.change.none; super.delete(key); return MapSet.change.entry; } /* This iterates through all of the entries and deletes every provided value from each Set. Return values are the same as in MapSet.prototype.delete. */ deleteEach(...values) { // return Math.max(...[...this.keys()].map(k => this.delete(k, ...values))); let r = MapSet.change.none; for (let k of this.keys()) { switch (this.delete(k, ...values)) { case MapSet.change.none: break; case MapSet.change.value: (r === MapSet.change.entry) || (r = MapSet.change.value); break; case MapSet.change.entry: r = MapSet.change.entry; } } return r; } /* With one argument – the key – this function returns whether the key is in the Map. With two arguments – the key and a value – this function returns whether the key is in the Map and the corresponding Set has the value. */ has(...args) { if (args.length > 1) { return super.get(args[0])?.has(args[1]) ?? false; } return super.has(args[0]); } /* With no arguments, this removes all entries in the Map. With one argument, the key, this removes the entry associated with the key. In either case, the function returns whether anything was removed. To help with garbage collection, each removed entry has its Set cleared as well; clone it, if you need that data. */ clear(...key) { if (key.length) { let s; if (s = super.get(key = key[0])) { s.clear(); super.delete(key); return true; } return false; } if (super.size) { super.clear(); return true; } return false; } /* This is the total number of stored values across all entries. */ get total() { let n = 0; for (let {size = 0} of super.values()) { n += size; } return n; } /* This is the sameValueZero equality algorithm. */ static #equiv(a, b) { return a === b || (typeof a === "number" && a !== a && typeof b === "number" && b !== b); } }46:T312a,class ObView { static registry; // { objects: Map, primitives: Map, nullObject: function } static listeners; // { types: MapSet, kinds: MapSet } static symView = Symbol(ObView.name); static symKind = Symbol(`${ObView.name} kind ID`); static attrKind = `data-${this.name.toLowerCase()}-kind`; static className = this.name.toLowerCase(); static #nextKindID = 0; static #elmValues = new WeakMap(); // Map static get elmValues() { return this.#elmValues; } static render(value, opts = {}) { opts.depth ??= 0; let r = this.findRenderer(value); return r.call(value, opts); } static listen(func, kindID, ...eventTypes) { const kinds = this.listeners.kinds; const types = this.listeners.types; if (typeof func === "function") { // if function provided // add that function kinds.add(func, kindID); for (let e of eventTypes) { if (types.add(e, func) === MapSet.change.entry) { // new event type document.body.addEventListener(e, this.#handler, this.#handler.capture); } } } else { // remove that kind from the listeners for (let f of kinds.keys()) { // if a listener gets fully removed if (kinds.remove(f, kindID) === MapSet.change.entry) { // remove that function from listeners.types for (let t of types.keys()) { types.remove(t, f); } } } } for (let eventType of eventTypes) { if (typeof func === "function") { if (types.add(eventType, func) == MapSet.change.entry) { // new event type document.body.addEventListener(eventType, this.#handler, this.#handler.capture); } } else { kinds.delete(func, kindID); if (types.delete(eventType, func) == MapSet.change.entry) { // new event type document.body.addEventListener(eventType, this.#handler, this.#handler.capture); } } } } static findRenderer(value) { const {primitives: prims, objects: objs, nullObject: nullObj} = this.registry; let r; if (this.#isObj(value)) { // if null object, check for monkey patch & fall back to null object renderer this.#isNullObj(value) && (r = value[this.symView] ?? nullObj); // check registry & fall back to monkey patch r ??= objs.get(value) ?? value[this.symView]; if (!r) { if (this.#typeOf(r = Object.getPrototypeOf(value)) === "object") { r = this.findRenderer(r); } else { r = undefined; } } } else { r = prims.get(this.#typeOf(value)) ?? value[this.symView]; // check registry & fall back to monkey patch r ??= this.findRenderer(Object.getPrototypeOf(value)); // try rendering as an object } return r ?? this.registry.fallback; } /* This takes a render value and returns a function that will render a new obview for each call. If `render` is a function, then it is called for each call of the returned function, accepting only an options object (with `this` being the value to render). Any other value of `render` is just provided the same every time by the returned function. The returned function always returns an Element that matches the CSS selector `span.obview[data-obview-kind]`. The function has the symbolic property [ObView.symKind] with the `kindID` provided, and this same ID is always in the returned element’s `data-obview-kind` attribute. */ static deliver(render, kindID = "") { kindID === null && (kindID = ""); if (typeof render === "function") { return Object.defineProperty(function view(opts) { let o = render.call(this, opts); if (!(ObView.#isObj(o) && o instanceof Element)) { let e = document.createElement("span"); e.append(o); o = e; } o.classList.add(ObView.className); o.setAttribute(ObView.attrKind, view[ObView.symKind]); ObView.#elmValues.set(o, this ?? NaN); return o; }, this.symKind, { enumerable: true, value: kindID }); } if (!(this.#isObj(render) && render instanceof Element)) { let e = document.createElement("span"); e.append(render); e.classList.add(ObView.className); e.setAttribute(ObView.attrKind, kindID); render = e; } return Object.defineProperty(function view() { let e = render.cloneNode(Infinity); ObView.#elmValues.set(e, this ?? NaN); return e; }, this.symKind, { enumerable: true, value: kindID }); } /* This attempts to patch an obview into the provided object or primitive. If `value` is a primitive, then the obview for that type of primitive is overwritten. Otherwise, the obview usually becomes an own property of the provided `value`; if it cannot do so because of a non-configurable property, then the override is stored in the registry. `cls` is the object or primitive for which the obview is to be defined. `render` is the function for generating the Element or is the value or Element to be cloned. See ObView.deliver for more info. If `render === null`, then the patch is removed along with its listeners. `listeners` is a heterogeneous list of event types (strings) followed by their corresponding listeners. For example, `ObView.patch(cls, render, "click", function a() {}, "keydown", "keyup", function b() {})` registers one event listener for function ‘a’ and two for function ‘b.’ */ static patch(cls, render, ...listeners) { let kindID; render === null || (kindID = this.#nextKindID++); if (render !== null && listeners.length) { let eventTypes = new Set(); for (let thing of listeners) { if (typeof thing === "function") { if (!eventTypes.size) { throw new RangeError("no event types provided for listener"); } this.listen(thing, kindID, ...eventTypes); eventTypes.clear(); } else { eventTypes.add(thing); } } if (eventTypes.size) { throw new RangeError(eventTypes.size == 1 ? `extra event type: ${[...eventTypes].shift()}` : `extra event types: ${[...eventTypes].join(", ")}` ); } } else if (render === null) { if (render = this.findRenderer(cls) ?? null) { this.listen(null, render[this.symKind]); } } if (!this.#isObj(cls)) { // not an object render === null ? this.registry.primitives.delete(this.#typeOf(cls)) : this.registry.primitives.set(this.#typeOf(cls), this.deliver(render, )); } else if (!Object.isExtensible(cls) || !(Object.getOwnPropertyDescriptor(cls, this.symView)?.configurable ?? true)) { // not extensible or not configurable render === null ? this.registry.objects.delete(cls) : this.registry.objects.set(cls, render); } else if (render === null) { if (Object.hasOwn(cls, this.symView)) { render = cls[this.symView]; if (delete cls[this.symView]) { this.listen(null, render[this.symKind]); } } } else { Object.defineProperty(cls, this.symView, (typeof render === "function") ? { enumerable: false, configurable: true, get(opts = {}) { return render.call(this, opts); } } : { enumerable: false, configurable: true, writable: false, value: render }); } return cls; } static #handler(e) { let elm, kind; let handlers = this.listeners.types.get(e.type); if (handlers.size) { while (elm = e.target.closest(`.${ObView.className}[${ObView.attrKind}]`)) { kind = Number(elm.getAttribute(ObView.attrKind)); for (let f of handlers) { if (this.listeners.kinds.has(f, kind)) { // if that listener is registered for that kind f.call(elm, ) } } } } } /* This is a convenience method for adding obview classes to an element. Pass in individual class names or a single string with whitespace-separated class names. Each class name is prefixed with `obview-`. The class `obview` is always included. This method returns an iterable of class names; calling its `toString` method returns space-separated class names. */ static classes(...cls) { const prefix = `${this.className}-`; let o = []; for (let c of cls) { if (this.#isStr(c)) { o.push(...c.valueOf().trim().split(/\s+/)); } else if (this.#typeOf(c) === "object") { if (c instanceof String) { o.push(...c.valueOf().trim().split(/\s+/)); } else if (c instanceof Element) { o.push(...c.classList); } } else if (Symbol.iterator in c) { for (let s of c) { o.push(...String(s).trim().split(/\s+/)); } } else { o.push(...String(c).trim().split(/\s+/)); } } o = new Set([this.className, ...o.map(c => c.startsWith(prefix) ? c : `${prefix}${c}`)]); o.toString = this.#classSetToString; return o; } static #classSetToString() { return [...this].join(" "); } static #isObj(v) { return v !== null && typeof v === "object"; } static #isNullObj(v) { return this.#isObj(v) && v !== Object && v !== Object.prototype && Object.getPrototypeOf(v) === null; } static #isStr(v) { return typeof v === "string" || (typeof v === "object" && v !== null && v instanceof String); } static #typeOf(v) { return v === null ? "null" : typeof v; } static #tristate(v) { return (v === null || v === undefined || (this.#isStr(v) && !v.length)) ? undefined : Boolean(v); } static #cleanup() { for (let type of this.listeners.types.keys()) { document.removeEventListener(type, this.#handler, this.#handler.capture); document.removeEventListener(type, this.#handler, this.#handler.bubble); } this.listeners.types.clear(); this.listeners.kinds.clear(); this.registry.primitives.clear(); this.registry.objects.clear(); } static { Object.defineProperties(this.#handler, { capture: { enumerable: true, value: Object.freeze({passive: true, capture: true}) }, bubble: { enumerable: true, value: Object.freeze({passive: true, capture: false}) } }); Object.defineProperties(this, { registry: { enumerable: true, value: Object.create(null, { objects: { enumerable: true, value: new Map() }, primitives: { enumerable: true, value: new Map() }, nullObject: { enumerable: true, writable: true } }) }, listeners: { enumerable: true, value: Object.create(null, { types: { enumerable: true, value: new MapSet() }, kinds: { enumerable: true, value: new MapSet() } }) }, symKind: { enumerable: true, configurable: false, writable: false }, symView: { enumerable: true, configurable: false, writable: false }, attrKind: { enumerable: true, configurable: false, writable: false }, className: { enumerable: true, configurable: false, writable: false } }); invalidation.then(this.#cleanup); for (let [primitive, render] of Object.entries({ undefined: html`undefined`, null: html`null`, number({numberFormat: nF}) { return html`${ (nF === undefined && globalThis.Intl?.NumberFormat) ? Intl.NumberFormat().format(this.valueOf()) : typeof nF === "number" ? this.toFixed(nF) : typeof nF === "function" ? nF(this.valueOf()) : this.toString() }`; }, boolean() { return html`${this.toString()}`; } })) { this.registry.primitives.set(primitive, render); } } }47:[] 43:{"id":"9d3c736b6e019b43","slug":null,"title":"obview","thumbnail":"f933ebd4b7b082ee97868bb3cf3d6aa3d7413f86bbd22cb8c380bb48852b4202","access_level":"public","create_time":"$D2023-03-23T20:26:31.879Z","update_time":"$D2023-03-24T22:50:54.533Z","view_time":null,"first_public_time":"$D2023-03-23T20:26:31.879Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d2b7afa3a61febdf","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":"starter_2024","bio":"I enjoy spreadsheets and JavaScript way too much.","following":false},"version":181,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"bio":"I enjoy spreadsheets and JavaScript way too much.\n\ntrust://Riley.science!","following":false}],"members":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"obview","cells":[{"id":0,"value":"

obview

\n\n

This is hopefully a framework for making lightweight HTML components that can visualise objects. Custom views are made via monkey patches on classes & instances.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"ObView.registry","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"ObView.elmValues.has(ObView.render(4))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"ObView.classes(\"test goodbye\").toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"