@neovici/cosmoz-utils 3.29.0 → 4.0.0-beta.1

package/lib/directives/lazy-until.js

@@ -1,87 +1,163 @@
-/* eslint-disable max-statements */
 /**
  * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
-import { isPrimitive } from 'lit-html/lib/parts';
-import { directive } from 'lit-html';
-const _state = new WeakMap(),
+/* eslint-disable import/group-exports */
+import { noChange } from 'lit-html';
+import { directive } from 'lit-html/directive.js';
+import { isPrimitive } from 'lit-html/directive-helpers.js';
+import { AsyncDirective } from 'lit-html/async-directive.js';
+
+class PseudoWeakRef {
+  constructor(ref) {
+    this._ref = ref;
+  }
+  disconnect() {
+    this._ref = undefined;
+  }
+  reconnect(ref) {
+    this._ref = ref;
+  }
+  deref() {
+    return this._ref;
+  }
+}
+
+class Pauser {
+   _promise = undefined;
+   _resolve = undefined;
+  get() {
+    return this._promise;
+  }
+  pause() {
+    this._promise ??= new Promise((resolve) => (this._resolve = resolve));
+  }
+  resume() {
+    this._resolve?.();
+    this._promise = this._resolve = undefined;
+  }
+}
+
+const isPromise = (x) => {
+		return !isPrimitive(x) && typeof x.then === 'function';
+	},
 	// Effectively infinity, but a SMI.
-	_infinity = 0x7fffffff;
-/**
-  * Renders one of a series of values, including Promises, to a Part.
-  *
-  * This is a variant of until, which never falls back to lower priority values.
-  * Already rendered content is re-used, even when called with new Promises.
-  *
-  * Values are rendered in priority order, with the first argument having the
-  * highest priority and the last argument having the lowest priority. If a
-  * value is a Promise, low-priority values will be rendered until it resolves.
-  *
-  * The priority of values can be used to create placeholder content for async
-  * data. For example, a Promise with pending content can be the first,
-  * highest-priority, argument, and a non_promise loading indicator template can
-  * be used as the second, lower-priority, argument. The loading indicator will
-  * render immediately, and the primary content will render when the Promise
-  * resolves.
-  *
-  * Example:
-  *
-  *     const content = fetch('./content.txt').then(r => r.text());
-  *     html`${until(content, html`<span>Loading...</span>`)}`
-  */
-export const lazyUntil = directive((...args) => part => {
-	let state = _state.get(part);
-	if (state === undefined) {
-		state = {
-			lastRenderedIndex: _infinity,
-			values: []
-		};
-		_state.set(part, state);
+	_infinity = 0x3fffffff;
+
+export class UntilDirective extends AsyncDirective {
+	__lastRenderedIndex = _infinity;
+	__values = [];
+	__weakThis = new PseudoWeakRef(this);
+	__pauser = new Pauser();
+
+	render(...args) {
+		return args.find((x) => !isPromise(x)) ?? noChange;
 	}
-	const previousValues = state.values,
-		previousLength = previousValues.length;
-	state.values = args;
-	for (let i = 0; i < args.length; i++) {
-		// If we've rendered a higher-priority value already, stop.
-		if (i > state.lastRenderedIndex) {
-			break;
-		}
 
-		const value = args[i];
-		// Render non-Promise values immediately
-		if (isPrimitive(value) || typeof value.then !== 'function') {
-			part.setValue(value);
-			state.lastRenderedIndex = i;
-			// Since a lower-priority value will never overwrite a higher-priority
-			// synchronous value, we can stop processing now.
-			break;
-		}
-		// If this is a Promise we've already handled, skip it.
-		if (i < previousLength && value === previousValues[i]) {
-			continue;
+	// eslint-disable-next-line max-statements
+	update(_part, args) {
+		const previousValues = this.__values,
+			previousLength = previousValues.length;
+		this.__values = args;
+
+		const weakThis = this.__weakThis,
+			pauser = this.__pauser;
+
+		// If our initial render occurs while disconnected, ensure that the pauser
+		// and weakThis are in the disconnected state
+		if (!this.isConnected) {
+			this.disconnected();
 		}
 
-		Promise.resolve(value).then(resolvedValue => {
-			const index = state.values.indexOf(value);
-			// If state.values doesn't contain the value, we've re-rendered without
-			// the value, so don't render it. Then, only render if the value is
-			// higher-priority than what's already been rendered.
-			if (index > -1 && index <= state.lastRenderedIndex) {
-				state.lastRenderedIndex = index;
-				part.setValue(resolvedValue);
-				part.commit();
+		for (let i = 0; i < args.length; i++) {
+			// If we've rendered a higher-priority value already, stop.
+			if (i > this.__lastRenderedIndex) {
+				break;
 			}
-		});
+
+			const value = args[i];
+
+			// Render non-Promise values immediately
+			if (!isPromise(value)) {
+				this.__lastRenderedIndex = i;
+				// Since a lower-priority value will never overwrite a higher-priority
+				// synchronous value, we can stop processing now.
+				return value;
+			}
+
+			// If this is a Promise we've already handled, skip it.
+			if (i < previousLength && value === previousValues[i]) {
+				continue;
+			}
+
+			// Note, the callback avoids closing over `this` so that the directive
+			// can be gc'ed before the promise resolves; instead `this` is retrieved
+			// from `weakThis`, which can break the hard reference in the closure when
+			// the directive disconnects
+			Promise.resolve(value).then(async (result) => {
+				// If we're disconnected, wait until we're (maybe) reconnected
+				// The while loop here handles the case that the connection state
+				// thrashes, causing the pauser to resume and then get re-paused
+				while (pauser.get()) {
+					await pauser.get();
+				}
+				// If the callback gets here and there is no `this`, it means that the
+				// directive has been disconnected and garbage collected and we don't
+				// need to do anything else
+				const _this = weakThis.deref();
+				if (_this !== undefined) {
+					const index = _this.__values.indexOf(value);
+					// If state.values doesn't contain the value, we've re-rendered without
+					// the value, so don't render it. Then, only render if the value is
+					// higher-priority than what's already been rendered.
+					if (index > -1 && index <= _this.__lastRenderedIndex) {
+						_this.__lastRenderedIndex = index;
+						_this.setValue(result);
+					}
+				}
+			});
+		}
+
+		return noChange;
 	}
-});
 
+	disconnected() {
+		this.__weakThis.disconnect();
+		this.__pauser.pause();
+	}
+
+	reconnected() {
+		this.__weakThis.reconnect(this);
+		this.__pauser.resume();
+	}
+}
+
+/**
+ * Renders one of a series of values, including Promises, to a Part.
+ *
+ * Values are rendered in priority order, with the first argument having the
+ * highest priority and the last argument having the lowest priority. If a
+ * value is a Promise, low-priority values will be rendered until it resolves.
+ *
+ * The priority of values can be used to create placeholder content for async
+ * data. For example, a Promise with pending content can be the first,
+ * highest-priority, argument, and a non_promise loading indicator template can
+ * be used as the second, lower-priority, argument. The loading indicator will
+ * render immediately, and the primary content will render when the Promise
+ * resolves.
+ *
+ * Example:
+ *
+ * ```js
+ * const content = fetch('./content.txt').then(r => r.text());
+ * html`${until(content, html`<span>Loading...</span>`)}`
+ * ```
+ */
+export const lazyUntil = directive(UntilDirective);
+
+/**
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
+ */
+// export type {UntilDirective};

package/lib/directives/measure.js

@@ -1,38 +1,32 @@
-import { directive } from 'lit-html';
+import { nothing } from 'lit-html';
+import { Directive, directive } from 'lit-html/directive.js';
 import { array } from '../array';
 
-export const measure = directive((select, onMeasure) => part => {
-	// Set up the resize observer.
-	if (!part._resizeObserver) {
-		part._resizeObserver = new ResizeObserver(entries => {
-			// Ensure that the onMeasure callback is called with *all* selected elements dimensions.
-			// NOTE: `entries` can be a subset of the observed elements, i.e. the ones that actually changed dimensions.
-			entries.forEach(entry => {
-				part._measurements[part._observedElements.indexOf(entry.target)] = entry.contentRect;
-			});
-
-			onMeasure(part._measurements);
-		});
+class MeasureDirective extends Directive {
+	render() {
+		return nothing;
 	}
 
-	// Observe the same elements, if the selection function did not change,
-	if (part._select === select) {
-		return;
+	update(part, [select, onMeasure]) {
+		this.measure(part.element, select, onMeasure);
+		return nothing;
 	}
 
-	// Stop observing previously selected elements.
-	if (part._observedElements) {
-		part._observedElements.forEach(element => part._resizeObserver.unobserve(element));
+	measure(element, select, onMeasure) {
+		this._observer?.disconnect();
+		const elements = array(select(element)),
+			observer = (this._observer = new ResizeObserver((entries) => {
+				onMeasure(
+					entries
+						.sort(
+							(a, b) => elements.indexOf(a.target) - elements.indexOf(b.target)
+						)
+						.map((e) => e.contentRect)
+				);
+			}));
+		elements.forEach((el) => observer.observe(el));
+		return nothing;
 	}
+}
 
-	// Reset measurements.
-	part._measurements = [];
-	part._select = select;
-
-	// Postpone the selection until the DOM has been updated.
-	requestAnimationFrame(() => {
-		// Start observing selected elements.
-		part._observedElements = array(part._select(part.committer.element));
-		part._observedElements.forEach(element => part._resizeObserver.observe(element));
-	});
-});
+export const measure = directive(MeasureDirective);

package/lib/directives/portal.js

@@ -1,19 +1,12 @@
+import { html, nothing, render } from 'lit-html';
+import { AsyncDirective, directive } from 'lit-html/async-directive.js';
 import {
-	directive, NodePart, html
-} from 'lit-html';
-
-const destroyOutlet = part => {
-	if (!part._outletPart) {
-		return;
-	}
-
-	part._outletPart.clear();
-
-	const parent = part._outletPart.startNode.parentNode;
-	parent.removeChild(part._outletPart.startNode);
-	parent.removeChild(part._outletPart.endNode);
-	part._outletPart = undefined;
-};
+	setChildPartValue,
+	clearPart,
+	removePart,
+} from 'lit-html/directive-helpers.js';
+const createMarker = () => document.createComment(''),
+	ChildPart = render(nothing, new DocumentFragment()).constructor;
 
 /**
  * Helper element with a customizable disconnect behavior.
@@ -23,51 +16,50 @@ class DisconnectObserver extends HTMLElement {
 		this.onDisconnect();
 	}
 }
-
 customElements.define('disconnect-observer', DisconnectObserver);
 
-export const
-	// eslint-disable-next-line max-statements
-	portal = directive((content, outlet = document.body) => sourcePart => {
-		// Initialize a disconnect-observer element that cleans up the outletPart when the sourcePart is removed from DOM.
-		if (!sourcePart._portalCleanerSetUp) {
-			sourcePart._portalCleanerSetUp = true;
-			sourcePart.setValue(html`<disconnect-observer .onDisconnect="${ () => {
-				destroyOutlet(sourcePart);
-				sourcePart._portalCleanerSetUp = undefined;
-			} }">`);
-		}
+class PortalDirective extends AsyncDirective {
+	render() {
+		return html`<disconnect-observer
+			.onDisconnect=${() => {
+				this.isConnected = false;
+				this.disconnected();
+			}}
+		></disconnect-observer>`;
+	}
+	update(part, [content, outlet = document.body]) {
+		this.updateOutlet(outlet, content);
+		return this.render();
+	}
 
-		// Clean up a previously set up outletPart if the outlet target has changed
-		if (sourcePart._outletPart && sourcePart._outlet !== outlet) {
-			destroyOutlet(sourcePart);
+	updateOutlet(outlet, content) {
+		if (this._outlet !== outlet) {
+			this.clearOutlet();
 		}
+		this._outlet = outlet;
+		const part = (this._op ??= new ChildPart(
+			outlet.appendChild(createMarker()),
+			outlet.appendChild(createMarker())
+		));
+		setChildPartValue(part, (this.content = content));
+	}
 
-		// Create a new sourcePart to be used as output of this directive.
-		if (!sourcePart._outletPart) {
-			// Use a microtask so the disconnect-observer has time to initialize.
-			queueMicrotask(() => {
-				// Don't create the outletPart if the sourcePart is not connected.
-				if (!sourcePart.startNode.isConnected) {
-					return;
-				}
-
-				// Due to use of microtask, we have to make sure the outlet isn't initialized twice.
-				if (sourcePart._outletPart) {
-					return;
-				}
-
-				sourcePart._outletPart = new NodePart(sourcePart.options);
-				sourcePart._outletPart.appendInto(outlet);
-				sourcePart._outletPart.setValue(content);
-				sourcePart._outletPart.commit();
-				sourcePart._outlet = outlet;
-			});
-
+	clearOutlet() {
+		const part = this._op;
+		if (!part) {
 			return;
 		}
+		clearPart(part);
+		removePart(part);
+		this._op = undefined;
+	}
+
+	disconnected() {
+		this.clearOutlet();
+	}
+	reconnected() {
+		this.updateOutlet(this._outlet, this._content);
+	}
+}
 
-		// Update the outlet's content.
-		sourcePart._outletPart.setValue(content);
-		sourcePart._outletPart.commit();
-	});
+export const portal = directive(PortalDirective);

package/lib/object.js

@@ -3,7 +3,7 @@ import { identity } from './function';
 export const prop = key => key && (object => object[key]) || identity,
 	strProp = key => {
 		const p = prop(key);
-		return o => p(o)?.toString() || '';
+		return o => typeof o === 'string' ? o : p(o)?.toString() || '';
 	},
 	isObject = obj => Object.prototype.toString.call(obj) === '[object Object]',
 	merge = (...objs) => objs.reduce((acc, obj) => {

package/lib/tag.js

@@ -1,4 +1,10 @@
-import { html } from 'haunted';
+import { html as htm } from 'haunted';
+
+const html = (arr, ...thru) =>
+	htm(
+		Object.assign(arr, { raw: true }),
+		...thru
+	);
 
 export const
 	/**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-utils",
-	"version": "3.29.0",
+	"version": "4.0.0-beta.1",
 	"description": "Date, money and template management functions commonly needed in Cosmoz views.",
 	"keywords": [
 		"polymer",
@@ -50,21 +50,20 @@
 		]
 	},
 	"dependencies": {
-		"haunted": "^4.8.0"
+		"haunted": "^5.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^16.0.0",
-		"@commitlint/config-conventional": "^16.0.0",
-		"@neovici/eslint-config": "^1.3.0",
-		"@open-wc/testing": "^2.5.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
+		"@neovici/cfg": "^1.15.1",
+		"@open-wc/testing": "^3.1.0",
 		"@polymer/polymer": "^3.3.1",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@web/test-runner": "^0.13.0",
-		"@web/test-runner-selenium": "^0.5.0",
-		"husky": "^7.0.0",
-		"lit-html": "^1.0.0",
-		"semantic-release": "^18.0.0",
-		"sinon": "^12.0.0"
+		"husky": "^8.0.0",
+		"lit-html": "^2.0.0",
+		"semantic-release": "^19.0.0",
+		"sinon": "^14.0.0"
 	}
 }

package/lib/directives/ref.js

@@ -1,6 +0,0 @@
-import { directive } from 'lit-html';
-
-export const ref = directive(ref => part => {
-	// support both AttributePart and NodePart
-	ref.current = part?.committer?.element || part?.startNode?.parentNode;
-});