@bpmn-io/properties-panel 2.2.1 → 3.0.0

package/preact/src/clone-element.js

@@ -1,4 +1,4 @@
-import { assign } from './util';
+import { assign, slice } from './util';
 import { createVNode } from './create-element';
 
 /**
@@ -13,20 +13,26 @@ export function cloneElement(vnode, props, children) {
 		key,
 		ref,
 		i;
+
+	let defaultProps;
+
+	if (vnode.type && vnode.type.defaultProps) {
+		defaultProps = vnode.type.defaultProps;
+	}
+
 	for (i in props) {
 		if (i == 'key') key = props[i];
 		else if (i == 'ref') ref = props[i];
-		else normalizedProps[i] = props[i];
-	}
-
-	if (arguments.length > 3) {
-		children = [children];
-		for (i = 3; i < arguments.length; i++) {
-			children.push(arguments[i]);
+		else if (props[i] === undefined && defaultProps !== undefined) {
+			normalizedProps[i] = defaultProps[i];
+		} else {
+			normalizedProps[i] = props[i];
 		}
 	}
-	if (children != null) {
-		normalizedProps.children = children;
+
+	if (arguments.length > 2) {
+		normalizedProps.children =
+			arguments.length > 3 ? slice.call(arguments, 2) : children;
 	}
 
 	return createVNode(

package/preact/src/component.js

@@ -24,7 +24,7 @@ export function Component(props, context) {
  * @param {() => void} [callback] A function to be called once component state is
  * updated
  */
-Component.prototype.setState = function(update, callback) {
+Component.prototype.setState = function (update, callback) {
 	// only clone state when copying to nextState the first time.
 	let s;
 	if (this._nextState != null && this._nextState !== this.state) {
@@ -47,7 +47,9 @@ Component.prototype.setState = function(update, callback) {
 	if (update == null) return;
 
 	if (this._vnode) {
-		if (callback) this._renderCallbacks.push(callback);
+		if (callback) {
+			this._stateCallbacks.push(callback);
+		}
 		enqueueRender(this);
 	}
 };
@@ -58,7 +60,7 @@ Component.prototype.setState = function(update, callback) {
  * @param {() => void} [callback] A function to be called after component is
  * re-rendered
  */
-Component.prototype.forceUpdate = function(callback) {
+Component.prototype.forceUpdate = function (callback) {
 	if (this._vnode) {
 		// Set render mode so that we can differentiate where the render request
 		// is coming from. We need this because forceUpdate should never call
@@ -170,17 +172,6 @@ function updateParentDomPointers(vnode) {
  */
 let rerenderQueue = [];
 
-/**
- * Asynchronously schedule a callback
- * @type {(cb: () => void) => void}
- */
-/* istanbul ignore next */
-// Note the following line isn't tree-shaken by rollup cuz of rollup/rollup#2566
-const defer =
-	typeof Promise == 'function'
-		? Promise.prototype.then.bind(Promise.resolve())
-		: setTimeout;
-
 /*
  * The value of `Component.debounce` must asynchronously invoke the passed in callback. It is
  * important that contributors to Preact can consistently reason about what calls to `setState`, etc.
@@ -192,6 +183,11 @@ const defer =
 
 let prevDebounce;
 
+const defer =
+	typeof Promise == 'function'
+		? Promise.prototype.then.bind(Promise.resolve())
+		: setTimeout;
+
 /**
  * Enqueue a rerender of a component
  * @param {import('./internal').Component} c The component to rerender
@@ -209,17 +205,31 @@ export function enqueueRender(c) {
 	}
 }
 
+/**
+ * @param {import('./internal').Component} a
+ * @param {import('./internal').Component} b
+ */
+const depthSort = (a, b) => a._vnode._depth - b._vnode._depth;
+
 /** Flush the render queue by rerendering all queued components */
 function process() {
-	let queue;
-	while ((process._rerenderCount = rerenderQueue.length)) {
-		queue = rerenderQueue.sort((a, b) => a._vnode._depth - b._vnode._depth);
-		rerenderQueue = [];
-		// Don't update `renderCount` yet. Keep its value non-zero to prevent unnecessary
-		// process() calls from getting scheduled while `queue` is still being consumed.
-		queue.some(c => {
-			if (c._dirty) renderComponent(c);
-		});
+	let c;
+	rerenderQueue.sort(depthSort);
+	// Don't update `renderCount` yet. Keep its value non-zero to prevent unnecessary
+	// process() calls from getting scheduled while `queue` is still being consumed.
+	while ((c = rerenderQueue.shift())) {
+		if (c._dirty) {
+			let renderQueueLength = rerenderQueue.length;
+			renderComponent(c);
+			if (rerenderQueue.length > renderQueueLength) {
+				// When i.e. rerendering a provider additional new items can be injected, we want to
+				// keep the order from top to bottom with those new items so we can handle them in a
+				// single pass
+				rerenderQueue.sort(depthSort);
+			}
+		}
 	}
+	process._rerenderCount = 0;
 }
+
 process._rerenderCount = 0;

package/preact/src/constants.js

@@ -1,3 +1,4 @@
 export const EMPTY_OBJ = {};
 export const EMPTY_ARR = [];
-export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+export const IS_NON_DIMENSIONAL =
+	/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;

package/preact/src/create-context.js

@@ -18,13 +18,14 @@ export function createContext(defaultValue, contextId) {
 		/** @type {import('./internal').FunctionComponent} */
 		Provider(props) {
 			if (!this.getChildContext) {
+				/** @type {import('./internal').Component[]} */
 				let subs = [];
 				let ctx = {};
 				ctx[contextId] = this;
 
 				this.getChildContext = () => ctx;
 
-				this.shouldComponentUpdate = function(_props) {
+				this.shouldComponentUpdate = function (_props) {
 					if (this.props.value !== _props.value) {
 						// I think the forced value propagation here was only needed when `options.debounceRendering` was being bypassed:
 						// https://github.com/preactjs/preact/commit/4d339fb803bea09e9f198abf38ca1bf8ea4b7771#diff-54682ce380935a717e41b8bfc54737f6R358
@@ -40,7 +41,10 @@ export function createContext(defaultValue, contextId) {
 						// 	c.context[contextId] = _props.value;
 						// 	enqueueRender(c);
 						// });
-						subs.some(enqueueRender);
+						subs.some(c => {
+							c._force = true;
+							enqueueRender(c);
+						});
 					}
 				};
 
@@ -64,5 +68,6 @@ export function createContext(defaultValue, contextId) {
 	// of on the component itself. See:
 	// https://reactjs.org/docs/context.html#contextdisplayname
 
-	return (context.Provider._contextRef = context.Consumer.contextType = context);
+	return (context.Provider._contextRef = context.Consumer.contextType =
+		context);
 }

package/preact/src/create-element.js

@@ -1,5 +1,8 @@
+import { slice } from './util';
 import options from './options';
 
+let vnodeId = 0;
+
 /**
  * Create an virtual node (used for JSX)
  * @param {import('./internal').VNode["type"]} type The node name or Component
@@ -19,15 +22,9 @@ export function createElement(type, props, children) {
 		else normalizedProps[i] = props[i];
 	}
 
-	if (arguments.length > 3) {
-		children = [children];
-		// https://github.com/preactjs/preact/issues/1916
-		for (i = 3; i < arguments.length; i++) {
-			children.push(arguments[i]);
-		}
-	}
-	if (children != null) {
-		normalizedProps.children = children;
+	if (arguments.length > 2) {
+		normalizedProps.children =
+			arguments.length > 3 ? slice.call(arguments, 2) : children;
 	}
 
 	// If a Component VNode, check for and apply defaultProps
@@ -75,10 +72,11 @@ export function createVNode(type, props, key, ref, original) {
 		_component: null,
 		_hydrating: null,
 		constructor: undefined,
-		_original: original == null ? ++options._vnodeId : original
+		_original: original == null ? ++vnodeId : original
 	};
 
-	if (options.vnode != null) options.vnode(vnode);
+	// Only invoke the vnode hook if this was *not* a direct copy:
+	if (original == null && options.vnode != null) options.vnode(vnode);
 
 	return vnode;
 }

package/preact/src/diff/catch-error.js

@@ -4,8 +4,10 @@
  * @param {import('../internal').VNode} vnode The vnode that threw
  * the error that was caught (except for unmounting when this parameter
  * is the highest parent that was being unmounted)
+ * @param {import('../internal').VNode} [oldVNode]
+ * @param {import('../internal').ErrorInfo} [errorInfo]
  */
-export function _catchError(error, vnode) {
+export function _catchError(error, vnode, oldVNode, errorInfo) {
 	/** @type {import('../internal').Component} */
 	let component, ctor, handled;
 
@@ -20,7 +22,7 @@ export function _catchError(error, vnode) {
 				}
 
 				if (component.componentDidCatch != null) {
-					component.componentDidCatch(error);
+					component.componentDidCatch(error, errorInfo || {});
 					handled = component._dirty;
 				}
 

package/preact/src/diff/children.js

@@ -2,6 +2,7 @@ import { diff, unmount, applyRef } from './index';
 import { createVNode, Fragment } from '../create-element';
 import { EMPTY_OBJ, EMPTY_ARR } from '../constants';
 import { getDomSibling } from '../component';
+import { isArray } from '../util';
 
 /**
  * Diff the children of a virtual node
@@ -47,7 +48,11 @@ export function diffChildren(
 	for (i = 0; i < renderResult.length; i++) {
 		childVNode = renderResult[i];
 
-		if (childVNode == null || typeof childVNode == 'boolean') {
+		if (
+			childVNode == null ||
+			typeof childVNode == 'boolean' ||
+			typeof childVNode == 'function'
+		) {
 			childVNode = newParentVNode._children[i] = null;
 		}
 		// If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
@@ -66,7 +71,7 @@ export function diffChildren(
 				null,
 				childVNode
 			);
-		} else if (Array.isArray(childVNode)) {
+		} else if (isArray(childVNode)) {
 			childVNode = newParentVNode._children[i] = createVNode(
 				Fragment,
 				{ children: childVNode },
@@ -83,7 +88,7 @@ export function diffChildren(
 				childVNode.type,
 				childVNode.props,
 				childVNode.key,
-				null,
+				childVNode.ref ? childVNode.ref : null,
 				childVNode._original
 			);
 		} else {
@@ -161,7 +166,6 @@ export function diffChildren(
 
 			if (
 				typeof childVNode.type == 'function' &&
-				childVNode._children != null && // Can be null if childVNode suspended
 				childVNode._children === oldVNode._children
 			) {
 				childVNode._nextDom = oldDom = reorderChildren(
@@ -180,21 +184,7 @@ export function diffChildren(
 				);
 			}
 
-			// Browsers will infer an option's `value` from `textContent` when
-			// no value is present. This essentially bypasses our code to set it
-			// later in `diff()`. It works fine in all browsers except for IE11
-			// where it breaks setting `select.value`. There it will be always set
-			// to an empty string. Re-applying an options value will fix that, so
-			// there are probably some internal data structures that aren't
-			// updated properly.
-			//
-			// To fix it we make sure to reset the inferred value, so that our own
-			// value check in `diff()` won't be skipped.
-			if (!isHydrating && newParentVNode.type === 'option') {
-				// @ts-ignore We have validated that the type of parentDOM is 'option'
-				// in the above check
-				parentDom.value = '';
-			} else if (typeof newParentVNode.type == 'function') {
+			if (typeof newParentVNode.type == 'function') {
 				// Because the newParentVNode is Fragment-like, we need to set it's
 				// _nextDom property to the nextSibling of its last child DOM node.
 				//
@@ -228,7 +218,7 @@ export function diffChildren(
 				// If the newParentVNode.__nextDom points to a dom node that is about to
 				// be unmounted, then get the next sibling of that vnode and set
 				// _nextDom to it
-				newParentVNode._nextDom = getDomSibling(oldParentVNode, i + 1);
+				newParentVNode._nextDom = getLastDom(oldParentVNode).nextSibling;
 			}
 
 			unmount(oldChildren[i], oldChildren[i]);
@@ -244,8 +234,11 @@ export function diffChildren(
 }
 
 function reorderChildren(childVNode, oldDom, parentDom) {
-	for (let tmp = 0; tmp < childVNode._children.length; tmp++) {
-		let vnode = childVNode._children[tmp];
+	// Note: VNodes in nested suspended trees may be missing _children.
+	let c = childVNode._children;
+	let tmp = 0;
+	for (; c && tmp < c.length; tmp++) {
+		let vnode = c[tmp];
 		if (vnode) {
 			// We typically enter this code path on sCU bailout, where we copy
 			// oldVNode._children to newVNode._children. If that is the case, we need
@@ -256,14 +249,7 @@ function reorderChildren(childVNode, oldDom, parentDom) {
 			if (typeof vnode.type == 'function') {
 				oldDom = reorderChildren(vnode, oldDom, parentDom);
 			} else {
-				oldDom = placeChild(
-					parentDom,
-					vnode,
-					vnode,
-					childVNode._children,
-					vnode._dom,
-					oldDom
-				);
+				oldDom = placeChild(parentDom, vnode, vnode, c, vnode._dom, oldDom);
 			}
 		}
 	}
@@ -280,7 +266,7 @@ function reorderChildren(childVNode, oldDom, parentDom) {
 export function toChildArray(children, out) {
 	out = out || [];
 	if (children == null || typeof children == 'boolean') {
-	} else if (Array.isArray(children)) {
+	} else if (isArray(children)) {
 		children.some(child => {
 			toChildArray(child, out);
 		});
@@ -323,7 +309,7 @@ function placeChild(
 			for (
 				let sibDom = oldDom, j = 0;
 				(sibDom = sibDom.nextSibling) && j < oldChildren.length;
-				j += 2
+				j += 1
 			) {
 				if (sibDom == newDom) {
 					break outer;
@@ -345,3 +331,26 @@ function placeChild(
 
 	return oldDom;
 }
+
+/**
+ * @param {import('../internal').VNode} vnode
+ */
+function getLastDom(vnode) {
+	if (vnode.type == null || typeof vnode.type === 'string') {
+		return vnode._dom;
+	}
+
+	if (vnode._children) {
+		for (let i = vnode._children.length - 1; i >= 0; i--) {
+			let child = vnode._children[i];
+			if (child) {
+				let lastDom = getLastDom(child);
+				if (lastDom) {
+					return lastDom;
+				}
+			}
+		}
+	}
+
+	return null;
+}

package/preact/src/diff/index.js

@@ -1,9 +1,9 @@
-import { EMPTY_OBJ, EMPTY_ARR } from '../constants';
-import { Component } from '../component';
+import { EMPTY_OBJ } from '../constants';
+import { Component, getDomSibling } from '../component';
 import { Fragment } from '../create-element';
 import { diffChildren } from './children';
 import { diffProps, setProperty } from './props';
-import { assign, removeNode } from '../util';
+import { assign, isArray, removeNode, slice } from '../util';
 import options from '../options';
 
 /**
@@ -89,12 +89,14 @@ export function diff(
 				c._globalContext = globalContext;
 				isNew = c._dirty = true;
 				c._renderCallbacks = [];
+				c._stateCallbacks = [];
 			}
 
 			// Invoke getDerivedStateFromProps
 			if (c._nextState == null) {
 				c._nextState = c.state;
 			}
+
 			if (newType.getDerivedStateFromProps != null) {
 				if (c._nextState == c.state) {
 					c._nextState = assign({}, c._nextState);
@@ -108,6 +110,7 @@ export function diff(
 
 			oldProps = c.props;
 			oldState = c.state;
+			c._vnode = newVNode;
 
 			// Invoke pre-render lifecycle methods
 			if (isNew) {
@@ -140,16 +143,30 @@ export function diff(
 						) === false) ||
 					newVNode._original === oldVNode._original
 				) {
-					c.props = newProps;
-					c.state = c._nextState;
 					// More info about this here: https://gist.github.com/JoviDeCroock/bec5f2ce93544d2e6070ef8e0036e4e8
-					if (newVNode._original !== oldVNode._original) c._dirty = false;
-					c._vnode = newVNode;
+					if (newVNode._original !== oldVNode._original) {
+						// When we are dealing with a bail because of sCU we have to update
+						// the props, state and dirty-state.
+						// when we are dealing with strict-equality we don't as the child could still
+						// be dirtied see #3883
+						c.props = newProps;
+						c.state = c._nextState;
+						c._dirty = false;
+					}
+
+					// In cases of bailing due to strict-equality we have to reset force as well
+					c._force = false;
 					newVNode._dom = oldVNode._dom;
 					newVNode._children = oldVNode._children;
 					newVNode._children.forEach(vnode => {
 						if (vnode) vnode._parent = newVNode;
 					});
+
+					for (let i = 0; i < c._stateCallbacks.length; i++) {
+						c._renderCallbacks.push(c._stateCallbacks[i]);
+					}
+					c._stateCallbacks = [];
+
 					if (c._renderCallbacks.length) {
 						commitQueue.push(c);
 					}
@@ -170,15 +187,33 @@ export function diff(
 
 			c.context = componentContext;
 			c.props = newProps;
-			c.state = c._nextState;
+			c._parentDom = parentDom;
 
-			if ((tmp = options._render)) tmp(newVNode);
+			let renderHook = options._render,
+				count = 0;
+			if ('prototype' in newType && newType.prototype.render) {
+				c.state = c._nextState;
+				c._dirty = false;
 
-			c._dirty = false;
-			c._vnode = newVNode;
-			c._parentDom = parentDom;
+				if (renderHook) renderHook(newVNode);
+
+				tmp = c.render(c.props, c.state, c.context);
+
+				for (let i = 0; i < c._stateCallbacks.length; i++) {
+					c._renderCallbacks.push(c._stateCallbacks[i]);
+				}
+				c._stateCallbacks = [];
+			} else {
+				do {
+					c._dirty = false;
+					if (renderHook) renderHook(newVNode);
 
-			tmp = c.render(c.props, c.state, c.context);
+					tmp = c.render(c.props, c.state, c.context);
+
+					// Handle setState called in render, see #2553
+					c.state = c._nextState;
+				} while (c._dirty && ++count < 25);
+			}
 
 			// Handle setState called in render, see #2553
 			c.state = c._nextState;
@@ -197,7 +232,7 @@ export function diff(
 
 			diffChildren(
 				parentDom,
-				Array.isArray(renderResult) ? renderResult : [renderResult],
+				isArray(renderResult) ? renderResult : [renderResult],
 				newVNode,
 				oldVNode,
 				globalContext,
@@ -320,8 +355,8 @@ function diffElementNodes(
 			// excessDomChildren so it isn't later removed in diffChildren
 			if (
 				child &&
-				(child === dom ||
-					(nodeType ? child.localName == nodeType : child.nodeType == 3))
+				'setAttribute' in child === !!nodeType &&
+				(nodeType ? child.localName === nodeType : child.nodeType === 3)
 			) {
 				dom = child;
 				excessDomChildren[i] = null;
@@ -363,8 +398,7 @@ function diffElementNodes(
 		}
 	} else {
 		// If excessDomChildren was not null, repopulate it with the current element's children:
-		excessDomChildren =
-			excessDomChildren && EMPTY_ARR.slice.call(dom.childNodes);
+		excessDomChildren = excessDomChildren && slice.call(dom.childNodes);
 
 		oldProps = oldVNode.props || EMPTY_OBJ;
 
@@ -378,7 +412,7 @@ function diffElementNodes(
 			// we should read the existing DOM attributes to diff them
 			if (excessDomChildren != null) {
 				oldProps = {};
-				for (let i = 0; i < dom.attributes.length; i++) {
+				for (i = 0; i < dom.attributes.length; i++) {
 					oldProps[dom.attributes[i].name] = dom.attributes[i].value;
 				}
 			}
@@ -404,14 +438,16 @@ function diffElementNodes(
 			i = newVNode.props.children;
 			diffChildren(
 				dom,
-				Array.isArray(i) ? i : [i],
+				isArray(i) ? i : [i],
 				newVNode,
 				oldVNode,
 				globalContext,
 				isSvg && nodeType !== 'foreignObject',
 				excessDomChildren,
 				commitQueue,
-				dom.firstChild,
+				excessDomChildren
+					? excessDomChildren[0]
+					: oldVNode._children && getDomSibling(oldVNode, 0),
 				isHydrating
 			);
 
@@ -432,7 +468,12 @@ function diffElementNodes(
 				// despite the attribute not being present. When the attribute
 				// is missing the progress bar is treated as indeterminate.
 				// To fix that we'll always update it when it is 0 for progress elements
-				(i !== dom.value || (nodeType === 'progress' && !i))
+				(i !== dom.value ||
+					(nodeType === 'progress' && !i) ||
+					// This is only for IE 11 to fix <select> value not being updated.
+					// To avoid a stale select value we need to set the option.value
+					// again, which triggers IE11 to re-evaluate the select value
+					(nodeType === 'option' && i !== oldProps.value))
 			) {
 				setProperty(dom, 'value', i, oldProps.value, false);
 			}
@@ -477,18 +518,11 @@ export function unmount(vnode, parentVNode, skipRemove) {
 	if (options.unmount) options.unmount(vnode);
 
 	if ((r = vnode.ref)) {
-		if (!r.current || r.current === vnode._dom) applyRef(r, null, parentVNode);
-	}
-
-	let dom;
-	if (!skipRemove && typeof vnode.type != 'function') {
-		skipRemove = (dom = vnode._dom) != null;
+		if (!r.current || r.current === vnode._dom) {
+			applyRef(r, null, parentVNode);
+		}
 	}
 
-	// Must be set to `undefined` to properly clean up `_nextDom`
-	// for which `null` is a valid value. See comment in `create-element.js`
-	vnode._dom = vnode._nextDom = undefined;
-
 	if ((r = vnode._component) != null) {
 		if (r.componentWillUnmount) {
 			try {
@@ -499,15 +533,28 @@ export function unmount(vnode, parentVNode, skipRemove) {
 		}
 
 		r.base = r._parentDom = null;
+		vnode._component = undefined;
 	}
 
 	if ((r = vnode._children)) {
 		for (let i = 0; i < r.length; i++) {
-			if (r[i]) unmount(r[i], parentVNode, skipRemove);
+			if (r[i]) {
+				unmount(
+					r[i],
+					parentVNode,
+					skipRemove || typeof vnode.type !== 'function'
+				);
+			}
 		}
 	}
 
-	if (dom != null) removeNode(dom);
+	if (!skipRemove && vnode._dom != null) {
+		removeNode(vnode._dom);
+	}
+
+	// Must be set to `undefined` to properly clean up `_nextDom`
+	// for which `null` is a valid value. See comment in `create-element.js`
+	vnode._parent = vnode._dom = vnode._nextDom = undefined;
 }
 
 /** The `.render()` method for a PFC backing instance. */