backport 10.17

.github/workflows/pr-reporter.yml

@@ -46,6 +46,6 @@ jobs:
         uses: andrewiggins/tachometer-reporter-action@v2
         with:
           path: results/*.json
-          base-bench-name: preact-master
+          base-bench-name: preact-main
           pr-bench-name: preact-local
           summarize: 'duration, usedJSHeapSize'

benches/scripts/bench.js

@@ -21,7 +21,7 @@ export const defaultBenchOptions = {
 	// GitHub Action minutes
 	timeout: 1,
 	'window-size': '1024,768',
-	framework: IS_CI ? ['preact-master', 'preact-local'] : null,
+	framework: IS_CI ? ['preact-main', 'preact-local'] : null,
 	memory: true,
 	trace: false
 };

benches/scripts/config.js

@@ -46,10 +46,9 @@ export const frameworks = [
 		}
 	},
 	{
-		label: 'preact-master',
+		label: 'preact-main',
 		dependencies: {
-			framework:
-				'file:' + repoRoot('benches/proxy-packages/preact-master-proxy')
+			framework: 'file:' + repoRoot('benches/proxy-packages/preact-main-proxy')
 		},
 		async isValid() {
 			try {

benches/scripts/index.js

@@ -30,7 +30,7 @@ prog
 	.example('bench text*')
 	.example('bench *.html')
 	.example('bench all')
-	.example('bench many* -f preact-local -f preact-master')
+	.example('bench many* -f preact-local -f preact-main')
 	.option(
 		'--browser, -b',
 		'Which browsers to launch in automatic mode, comma-delimited (chrome, chrome-headless, firefox, firefox-headless, safari, edge, ie)',
@@ -77,7 +77,7 @@ prog
 // Tests:
 // - (no args)
 // - many*
-// - many* -f preact-local -f preact-master
+// - many* -f preact-local -f preact-main
 prog
 	.command('deopts [benchmark]')
 	.describe(
@@ -86,7 +86,7 @@ prog
 	.example('deopts many_updates.html')
 	.example('deopts many*')
 	.example('deopts many* -f preact-local')
-	.example('deopts many* -f preact-local -f preact-master')
+	.example('deopts many* -f preact-local -f preact-main')
 	.option(
 		'--framework, -f',
 		'The framework to run the benchmark with.',

src/jsx.d.ts

@@ -1075,9 +1075,9 @@ export namespace JSXInternal {
 	export type TargetedPictureInPictureEvent<Target extends EventTarget> =
 		TargetedEvent<Target, PictureInPictureEvent>;
 
-	export interface EventHandler<E extends TargetedEvent> {
-		(this: void, event: E): void;
-	}
+	export type EventHandler<E extends TargetedEvent> = {
+		bivarianceHack(event: E): void;
+	}['bivarianceHack'];
 
 	export type AnimationEventHandler<Target extends EventTarget> = EventHandler<
 		TargetedAnimationEvent<Target>

test/browser/keys.test.js

@@ -754,4 +754,70 @@
 			done();
 		});
 	});
+
+	// TODO: #4088
+	it.skip('should handle full reorders', () => {
+		const keys = {
+			Apple: `Apple_1`,
+			Orange: `Orange_1`,
+			Banana: `Banana_1`,
+			Grape: `Grape_1`,
+			Kiwi: `Kiwi_1`,
+			Cherry: `Cherry_1`
+		};
+
+		let sort;
+
+		class App extends Component {
+			order;
+
+			state = { items: ['Apple', 'Grape', 'Cherry', 'Orange', 'Banana'] };
+
+			sort() {
+				this.order = this.order === 'ASC' ? 'DESC' : 'ASC';
+				const items = [...this.state.items].sort((a, b) =>
+					this.order === 'ASC' ? a.localeCompare(b) : b.localeCompare(a)
+				);
+				this.setState({ items });
+			}
+
+			render(_, { items }) {
+				sort = this.sort.bind(this);
+				return (
+					<div>
+						{items.map(item => (
+							<div key={keys[item]}>{item}</div>
+						))}
+					</div>
+				);
+			}
+		}
+
+		const expected = values => {
+			return values.map(key => `<div>${key}</div>`).join('');
+		};
+
+		render(<App />, scratch);
+		expect(scratch.innerHTML).to.eq(
+			`<div>${expected(['Apple', 'Grape', 'Cherry', 'Orange', 'Banana'])}</div>`
+		);
+
+		console.log('--------');
+		let sorted = ['Apple', 'Grape', 'Cherry', 'Orange', 'Banana'].sort((a, b) =>
+			a.localeCompare(b)
+		);
+		sort();
+		rerender();
+
+		expect(scratch.innerHTML).to.eq(`<div>${expected(sorted)}</div>`);
+
+		console.log('--------');
+		sorted = ['Apple', 'Grape', 'Cherry', 'Orange', 'Banana'].sort((a, b) =>
+			b.localeCompare(a)
+		);
+		sort();
+		rerender();
+
+		expect(scratch.innerHTML).to.eq(`<div>${expected(sorted)}</div>`);
+	});
 });

test/browser/placeholders.test.js

@@ -1,4 +1,4 @@
-import { createElement, Component, render, createRef } from 'preact';
+import { createElement, Component, render, createRef, Fragment } from 'preact';
 import { setupRerender } from 'preact/test-utils';
 import { setupScratch, teardown } from '../_util/helpers';
 import { logCall, clearLog, getLog } from '../_util/logCall';
@@ -304,4 +304,116 @@ describe('null placeholders', () => {
 		expect(scratch.innerHTML).to.equal(div([div('false'), div('the middle')]));
 		expect(getLog()).to.deep.equal(['#text.remove()', '#text.remove()']);
 	});
+
+	it('when set through the children prop (#4074)', () => {
+		/** @type {(state: { value: boolean }) => void} */
+		let setState;
+		const Iframe = () => {
+			// Using a div here to make debugging tests in devtools a little less
+			// noisy. The dom ops still assert that the iframe isn't moved.
+			//
+			// return <iframe src="https://codesandbox.io/s/runtime-silence-no4zx" />;
+			return <div>Iframe</div>;
+		};
+
+		const Test2 = () => <div>Test2</div>;
+		const Test3 = () => <div>Test3</div>;
+
+		class App extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { value: true };
+				setState = this.setState.bind(this);
+			}
+
+			render(props, state) {
+				return (
+					<div>
+						<Test2 />
+						{state.value && <Test3 />}
+						{props.children}
+					</div>
+				);
+			}
+		}
+
+		render(
+			<App>
+				<Iframe />
+			</App>,
+			scratch
+		);
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Test2</div><div>Test3</div><div>Iframe</div></div>'
+		);
+		clearLog();
+		setState({ value: false });
+		rerender();
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Test2</div><div>Iframe</div></div>'
+		);
+		expect(getLog()).to.deep.equal(['<div>Test3.remove()']);
+	});
+
+	it('when set through the children prop when removing a Fragment with multiple DOM children (#4074)', () => {
+		/** @type {(state: { value: boolean }) => void} */
+		let setState;
+		const Iframe = () => {
+			// Using a div here to make debugging tests in devtools a little less
+			// noisy. The dom ops still assert that the iframe isn't moved.
+			//
+			// return <iframe src="https://codesandbox.io/s/runtime-silence-no4zx" />;
+			return <div>Iframe</div>;
+		};
+
+		const Test2 = () => <div>Test2</div>;
+		const Test34 = () => (
+			<Fragment>
+				<div>Test3</div>
+				<div>Test4</div>
+			</Fragment>
+		);
+
+		class App extends Component {
+			constructor(props) {
+				super(props);
+				this.state = { value: true };
+				setState = this.setState.bind(this);
+			}
+
+			render(props, state) {
+				return (
+					<div>
+						<Test2 />
+						{state.value && <Test34 />}
+						{props.children}
+					</div>
+				);
+			}
+		}
+
+		render(
+			<App>
+				<Iframe />
+			</App>,
+			scratch
+		);
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Test2</div><div>Test3</div><div>Test4</div><div>Iframe</div></div>'
+		);
+		clearLog();
+		setState({ value: false });
+		rerender();
+
+		expect(scratch.innerHTML).to.equal(
+			'<div><div>Test2</div><div>Iframe</div></div>'
+		);
+		expect(getLog()).to.deep.equal([
+			'<div>Test3.remove()',
+			'<div>Test4.remove()'
+		]);
+	});
 });

test/ts/Component-test.tsx

@@ -171,3 +171,16 @@ describe('Component', () => {
 		});
 	});
 });
+
+class Button extends Component {
+	handleClick(this: HTMLButtonElement, event: MouseEvent) {
+		event.preventDefault();
+		if (event.target instanceof HTMLElement) {
+			console.log(event.target.localName);
+		}
+	}
+
+	render() {
+		return <button onClick={this.handleClick}>{this.props.children}</button>;
+	}
+}