Merge branch 'master' into types/compat-memo-exotic-component

compat/src/render.js

@@ -240,6 +240,8 @@ options.diffed = function(vnode) {
 	) {
 		dom.value = props.value == null ? '' : props.value;
 	}
+
+	currentComponent = null;
 };
 
 // This is a very very private internal function for React it

compat/test/browser/hooks.test.js

@@ -1,3 +1,4 @@
+import { createContext } from 'preact';
 import React, {
 	createElement,
 	useDeferredValue,
@@ -6,7 +7,9 @@ import React, {
 	useTransition,
 	render,
 	useState,
-	useCallback
+	useCallback,
+	useContext,
+	useEffect
 } from 'preact/compat';
 import { setupRerender, act } from 'preact/test-utils';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
@@ -251,4 +254,78 @@ describe('React-18-hooks', () => {
 			expect(scratch.innerHTML).to.equal('<p>nope</p>');
 		});
 	});
+
+	it('should release ._force on context-consumers', () => {
+		let sequence, setSubmitting;
+		const Ctx = createContext({
+			isSubmitting: false,
+			setIsSubmitting: () => {}
+		});
+		const FormWrapper = props => {
+			const [isSubmitting, setIsSubmitting] = useState(false);
+			setSubmitting = setIsSubmitting;
+			return (
+				<Ctx.Provider value={{ isSubmitting, setIsSubmitting }}>
+					{props.children}
+				</Ctx.Provider>
+			);
+		};
+
+		const Form = () => {
+			const { isSubmitting, setIsSubmitting } = useContext(Ctx);
+			const [shouldSubmit, setShouldSubmit] = useState(false);
+
+			sequence = () => {
+				setShouldSubmit(true);
+			};
+
+			const submit = () => {
+				setIsSubmitting(true);
+				setShouldSubmit(false);
+			};
+
+			useEffect(() => {
+				if (shouldSubmit) {
+					submit();
+				}
+			}, [shouldSubmit]);
+
+			return (
+				<p>
+					isSubmitting: {'' + isSubmitting} | shouldSubmit: {'' + shouldSubmit}
+				</p>
+			);
+		};
+
+		const App = () => {
+			return (
+				<FormWrapper>
+					<Form />
+				</FormWrapper>
+			);
+		};
+
+		render(<App />, scratch);
+
+		act(() => {
+			sequence();
+		});
+		expect(scratch.innerHTML).to.equal(
+			'<p>isSubmitting: true | shouldSubmit: false</p>'
+		);
+
+		act(() => {
+			setSubmitting(false);
+		});
+		expect(scratch.innerHTML).to.equal(
+			'<p>isSubmitting: false | shouldSubmit: false</p>'
+		);
+
+		act(() => {
+			sequence();
+		});
+		expect(scratch.innerHTML).to.equal(
+			'<p>isSubmitting: true | shouldSubmit: false</p>'
+		);
+	});
 });

src/component.js

@@ -209,7 +209,7 @@ export function enqueueRender(c) {
 		prevDebounce !== options.debounceRendering
 	) {
 		prevDebounce = options.debounceRendering;
-		(prevDebounce || defer)(process);
+		(prevDebounce || defer)(process, inEvent);
 	}
 }
 

src/diff/index.js

@@ -153,6 +153,9 @@ export function diff(
 						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 => {

src/index.d.ts

@@ -282,13 +282,10 @@ interface ContainerNode {
 	insertBefore: Node['insertBefore'];
 	appendChild: Node['appendChild'];
 	removeChild: Node['removeChild'];
-	childNodes: ArrayLike<Node>
+	childNodes: ArrayLike<Node>;
 }
 
-export function render(
-	vnode: ComponentChild,
-	parent: ContainerNode
-): void;
+export function render(vnode: ComponentChild, parent: ContainerNode): void;
 /**
  * @deprecated Will be removed in v11.
  *
@@ -299,10 +296,7 @@ export function render(
 	parent: ContainerNode,
 	replaceNode?: Element | Text
 ): void;
-export function hydrate(
-	vnode: ComponentChild,
-	parent: ContainerNode
-): void;
+export function hydrate(vnode: ComponentChild, parent: ContainerNode): void;
 export function cloneElement(
 	vnode: VNode<any>,
 	props?: any,
@@ -337,7 +331,7 @@ export interface Options {
 	diffed?(vnode: VNode): void;
 	event?(e: Event): any;
 	requestAnimationFrame?(callback: () => void): void;
-	debounceRendering?(cb: () => void): void;
+	debounceRendering?(cb: () => void, inEvent: boolean): void;
 	useDebugValue?(value: string | number): void;
 	_addHookName?(name: string | number): void;
 	__suspenseDidResolve?(vnode: VNode, cb: () => void): void;

src/jsx.d.ts

@@ -1499,7 +1499,149 @@ export namespace JSXInternal {
 		rel?: string | undefined | SignalLike<string | undefined>;
 		required?: boolean | undefined | SignalLike<boolean | undefined>;
 		reversed?: boolean | undefined | SignalLike<boolean | undefined>;
-		role?: string | undefined | SignalLike<string | undefined>;
+		role?:
+			| 'alert'
+			| 'alertdialog'
+			| 'application'
+			| 'article'
+			| 'banner'
+			| 'button'
+			| 'cell'
+			| 'checkbox'
+			| 'columnheader'
+			| 'combobox'
+			| 'complementary'
+			| 'contentinfo'
+			| 'definition'
+			| 'dialog'
+			| 'directory'
+			| 'document'
+			| 'feed'
+			| 'figure'
+			| 'form'
+			| 'grid'
+			| 'gridcell'
+			| 'group'
+			| 'heading'
+			| 'img'
+			| 'link'
+			| 'list'
+			| 'listbox'
+			| 'listitem'
+			| 'log'
+			| 'main'
+			| 'marquee'
+			| 'math'
+			| 'menu'
+			| 'menubar'
+			| 'menuitem'
+			| 'menuitemcheckbox'
+			| 'menuitemradio'
+			| 'navigation'
+			| 'none'
+			| 'note'
+			| 'option'
+			| 'presentation'
+			| 'progressbar'
+			| 'radio'
+			| 'radiogroup'
+			| 'region'
+			| 'row'
+			| 'rowgroup'
+			| 'rowheader'
+			| 'scrollbar'
+			| 'search'
+			| 'searchbox'
+			| 'separator'
+			| 'slider'
+			| 'spinbutton'
+			| 'status'
+			| 'switch'
+			| 'tab'
+			| 'table'
+			| 'tablist'
+			| 'tabpanel'
+			| 'term'
+			| 'textbox'
+			| 'timer'
+			| 'toolbar'
+			| 'tooltip'
+			| 'tree'
+			| 'treegrid'
+			| 'treeitem'
+			| undefined
+			| SignalLike<
+				| 'alert'
+				| 'alertdialog'
+				| 'application'
+				| 'article'
+				| 'banner'
+				| 'button'
+				| 'cell'
+				| 'checkbox'
+				| 'columnheader'
+				| 'combobox'
+				| 'complementary'
+				| 'contentinfo'
+				| 'definition'
+				| 'dialog'
+				| 'directory'
+				| 'document'
+				| 'feed'
+				| 'figure'
+				| 'form'
+				| 'grid'
+				| 'gridcell'
+				| 'group'
+				| 'heading'
+				| 'img'
+				| 'link'
+				| 'list'
+				| 'listbox'
+				| 'listitem'
+				| 'log'
+				| 'main'
+				| 'marquee'
+				| 'math'
+				| 'menu'
+				| 'menubar'
+				| 'menuitem'
+				| 'menuitemcheckbox'
+				| 'menuitemradio'
+				| 'navigation'
+				| 'none'
+				| 'note'
+				| 'option'
+				| 'presentation'
+				| 'progressbar'
+				| 'radio'
+				| 'radiogroup'
+				| 'region'
+				| 'row'
+				| 'rowgroup'
+				| 'rowheader'
+				| 'scrollbar'
+				| 'search'
+				| 'searchbox'
+				| 'separator'
+				| 'slider'
+				| 'spinbutton'
+				| 'status'
+				| 'switch'
+				| 'tab'
+				| 'table'
+				| 'tablist'
+				| 'tabpanel'
+				| 'term'
+				| 'textbox'
+				| 'timer'
+				| 'toolbar'
+				| 'tooltip'
+				| 'tree'
+				| 'treegrid'
+				| 'treeitem'
+				| undefined
+			>;
 		rows?: number | undefined | SignalLike<number | undefined>;
 		rowSpan?: number | undefined | SignalLike<number | undefined>;
 		sandbox?: string | undefined | SignalLike<string | undefined>;
@@ -1796,6 +1938,7 @@ export namespace JSXInternal {
 		svg: SVGAttributes<SVGSVGElement>;
 		animate: SVGAttributes<SVGAnimateElement>;
 		circle: SVGAttributes<SVGCircleElement>;
+		animateMotion: SVGAttributes<SVGAnimateMotionElement>;
 		animateTransform: SVGAttributes<SVGAnimateElement>;
 		clipPath: SVGAttributes<SVGClipPathElement>;
 		defs: SVGAttributes<SVGDefsElement>;
@@ -1808,6 +1951,7 @@ export namespace JSXInternal {
 		feConvolveMatrix: SVGAttributes<SVGFEConvolveMatrixElement>;
 		feDiffuseLighting: SVGAttributes<SVGFEDiffuseLightingElement>;
 		feDisplacementMap: SVGAttributes<SVGFEDisplacementMapElement>;
+		feDistantLight: SVGAttributes<SVGFEDistantLightElement>;
 		feDropShadow: SVGAttributes<SVGFEDropShadowElement>;
 		feFlood: SVGAttributes<SVGFEFloodElement>;
 		feFuncA: SVGAttributes<SVGFEFuncAElement>;
@@ -1820,7 +1964,9 @@ export namespace JSXInternal {
 		feMergeNode: SVGAttributes<SVGFEMergeNodeElement>;
 		feMorphology: SVGAttributes<SVGFEMorphologyElement>;
 		feOffset: SVGAttributes<SVGFEOffsetElement>;
+		fePointLight: SVGAttributes<SVGFEPointLightElement>;
 		feSpecularLighting: SVGAttributes<SVGFESpecularLightingElement>;
+		feSpotLight: SVGAttributes<SVGFESpotLightElement>;
 		feTile: SVGAttributes<SVGFETileElement>;
 		feTurbulence: SVGAttributes<SVGFETurbulenceElement>;
 		filter: SVGAttributes<SVGFilterElement>;
@@ -1831,17 +1977,22 @@ export namespace JSXInternal {
 		linearGradient: SVGAttributes<SVGLinearGradientElement>;
 		marker: SVGAttributes<SVGMarkerElement>;
 		mask: SVGAttributes<SVGMaskElement>;
+		metadata: SVGAttributes<SVGMetadataElement>;
+		mpath: SVGAttributes<SVGMPathElement>;
 		path: SVGAttributes<SVGPathElement>;
 		pattern: SVGAttributes<SVGPatternElement>;
 		polygon: SVGAttributes<SVGPolygonElement>;
 		polyline: SVGAttributes<SVGPolylineElement>;
 		radialGradient: SVGAttributes<SVGRadialGradientElement>;
 		rect: SVGAttributes<SVGRectElement>;
+		set: SVGAttributes<SVGSetElement>;
 		stop: SVGAttributes<SVGStopElement>;
+		switch: SVGAttributes<SVGSwitchElement>;
 		symbol: SVGAttributes<SVGSymbolElement>;
 		text: SVGAttributes<SVGTextElement>;
 		textPath: SVGAttributes<SVGTextPathElement>;
 		tspan: SVGAttributes<SVGTSpanElement>;
 		use: SVGAttributes<SVGUseElement>;
+		view: SVGAttributes<SVGViewElement>;
 	}
 }