.github/workflows/ci.yml

@@ -47,6 +47,7 @@ jobs:
           npm run test:unit
       - name: Coveralls GitHub Action
         uses: coverallsapp/github-action@v2.1.2
+        timeout-minutes: 2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Package

.github/workflows/saucelabs.yml

@@ -20,6 +20,7 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
       - name: test
+        timeout-minutes: 20
         env:
           CI: true
           COVERAGE: true

compat/src/PureComponent.js

@@ -4,8 +4,9 @@ import { shallowDiffers } from './util';
 /**
  * Component class with a predefined `shouldComponentUpdate` implementation
  */
-export function PureComponent(p) {
+export function PureComponent(p, c) {
 	this.props = p;
+	this.context = c;
 }
 PureComponent.prototype = new Component();
 // Some third-party libraries check if this property is present

compat/src/index.d.ts

@@ -46,6 +46,8 @@ declare namespace React {
 	export import RefObject = preact.RefObject;
 	export import Component = preact.Component;
 	export import FunctionComponent = preact.FunctionComponent;
+	export import ComponentType = preact.ComponentType;
+	export import ComponentClass = preact.ComponentClass;
 	export import FC = preact.FunctionComponent;
 	export import createContext = preact.createContext;
 	export import createRef = preact.createRef;
@@ -54,6 +56,8 @@ declare namespace React {
 	export import cloneElement = preact.cloneElement;
 	export import ComponentProps = preact.ComponentProps;
 	export import ReactNode = preact.ComponentChild;
+	export import ReactElement = preact.VNode;
+	export import Consumer = preact.Consumer;
 
 	// Suspense
 	export import Suspense = _Suspense.Suspense;
@@ -168,6 +172,12 @@ declare namespace React {
 		| MutableRefObject<T | null>
 		| null;
 
+	export type ComponentPropsWithRef<
+		C extends ComponentType<any> | keyof JSXInternal.IntrinsicElements
+	> = C extends (new(props: infer P) => Component<any, any>)
+	? PropsWithoutRef<P> & RefAttributes<InstanceType<C>>
+	: ComponentProps<C>;
+
 	export function flushSync<R>(fn: () => R): R;
 	export function flushSync<A, R>(fn: (a: A) => R, a: A): R;
 

compat/test/browser/PureComponent.test.js

@@ -37,6 +37,38 @@ describe('PureComponent', () => {
 		expect(spy).to.be.calledWithMatch(expected, expected);
 	});
 
+	it('should pass context in constructor', () => {
+		let instance;
+		// Not initializing state matches React behavior: https://codesandbox.io/s/rml19v8o2q
+		class Foo extends React.PureComponent {
+			constructor(props, context) {
+				super(props, context);
+				expect(this.props).to.equal(props);
+				expect(this.state).to.deep.equal(undefined);
+				expect(this.context).to.equal(context);
+
+				instance = this;
+			}
+			render(props) {
+				return <div {...props}>Hello</div>;
+			}
+		}
+
+		sinon.spy(Foo.prototype, 'render');
+
+		const PROPS = { foo: 'bar' };
+		React.render(<Foo {...PROPS} />, scratch);
+
+		expect(Foo.prototype.render)
+			.to.have.been.calledOnce.and.to.have.been.calledWithMatch(PROPS, {}, {})
+			.and.to.have.returned(sinon.match({ type: 'div', props: PROPS }));
+		expect(instance.props).to.deep.equal(PROPS);
+		expect(instance.state).to.deep.equal({});
+		expect(instance.context).to.deep.equal({});
+
+		expect(scratch.innerHTML).to.equal('<div foo="bar">Hello</div>');
+	});
+
 	it('should ignore the __source variable', () => {
 		const pureSpy = sinon.spy();
 		const appSpy = sinon.spy();

compat/test/browser/events.test.js

@@ -2,7 +2,8 @@ import { render } from 'preact';
 import {
 	setupScratch,
 	teardown,
-	createEvent
+	createEvent,
+	supportsPassiveEvents
 } from '../../../test/_util/helpers';
 
 import React, { createElement } from 'preact/compat';
@@ -309,4 +310,24 @@ describe('preact/compat events', () => {
 		scratch.firstChild.dispatchEvent(createEvent('focusout'));
 		expect(spy).to.be.calledOnce;
 	});
+
+	if (supportsPassiveEvents()) {
+		it('should use capturing for event props ending with *Capture', () => {
+			let click = sinon.spy();
+
+			render(
+				<div onTouchMoveCapture={click}>
+					<button type="button">Click me</button>
+				</div>,
+				scratch
+			);
+
+			expect(proto.addEventListener).to.have.been.calledOnce;
+			expect(proto.addEventListener).to.have.been.calledWithExactly(
+				'touchmove',
+				sinon.match.func,
+				true
+			);
+		});
+	}
 });

compat/test/browser/useSyncExternalStore.test.js

@@ -658,10 +658,7 @@ describe('useSyncExternalStore', () => {
 			await act(() => {
 				store.set(1);
 			});
-			// Preact logs differ from React here cuz of how we do rerendering. We
-			// rerender subtrees and then commit effects so Child2 never sees the
-			// update to 1 cuz Child1 rerenders and runs its layout effects first.
-			assertLog([1, /*1,*/ 'Reset back to 0', 0, 0]);
+			assertLog([1, 1, 'Reset back to 0', 0, 0]);
 			expect(container.textContent).to.equal('00');
 		});
 

devtools/src/devtools.js

@@ -2,7 +2,7 @@ import { options, Fragment, Component } from 'preact';
 
 export function initDevTools() {
 	if (typeof window != 'undefined' && window.__PREACT_DEVTOOLS__) {
-		window.__PREACT_DEVTOOLS__.attachPreact('10.19.3', options, {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.19.4', options, {
 			Fragment,
 			Component
 		});