Adapt to React api: add context argument to compat/Children map api

compat/src/Children.js

@@ -1,8 +1,8 @@
 import { toChildArray } from 'preact';
 
-const mapFn = (children, fn) => {
+const mapFn = (children, fn, context) => {
 	if (children == null) return null;
-	return toChildArray(toChildArray(children).map(fn));
+	return toChildArray(toChildArray(children).map(fn.bind(context)));
 };
 
 // This API is completely unnecessary for Preact, so it's basically passthrough.

compat/src/index.d.ts

@@ -135,26 +135,31 @@ declare namespace React {
 	interface MutableRefObject<T> {
 		current: T;
 	}
-
-	export type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;
+
+	export type ForwardedRef<T> =
+		| ((instance: T | null) => void)
+		| MutableRefObject<T | null>
+		| null;
 
 	export function unstable_batchedUpdates(
 		callback: (arg?: any) => void,
 		arg?: any
 	): void;
 
 	export type PropsWithChildren<P = unknown> = P & {
-		children?: preact.ComponentChild | undefined
+		children?: preact.ComponentChild | undefined;
 	};
-	
+
 	export const Children: {
 		map<T extends preact.ComponentChild, R>(
 			children: T | T[],
-			fn: (child: T, i: number) => R
+			fn: (child: T, i: number) => R,
+			context: any
 		): R[];
 		forEach<T extends preact.ComponentChild>(
 			children: T | T[],
-			fn: (child: T, i: number) => void
+			fn: (child: T, i: number) => void,
+			context: any
 		): void;
 		count: (children: preact.ComponentChildren) => number;
 		only: (children: preact.ComponentChildren) => preact.ComponentChild;

compat/test/browser/Children.test.js

@@ -5,6 +5,7 @@ import {
 } from '../../../test/_util/helpers';
 import { div, span } from '../../../test/_util/dom';
 import React, { createElement, Children, render } from 'preact/compat';
+import sinon from 'sinon';
 
 describe('Children', () => {
 	/** @type {HTMLDivElement} */
@@ -106,6 +107,17 @@ describe('Children', () => {
 			expect(serializeHtml(scratch)).to.equal('<div><span>0</span></div>');
 		});
 
+		it('should propagate "this" context', () => {
+			const context = {};
+			const spy = sinon.spy(child => child); // noop
+			const Foo = ({ children }) => {
+				return React.Children.map(children, spy, context);
+			};
+			render(<Foo>foo</Foo>, scratch);
+
+			expect(spy.thisValues[0]).to.equal(context);
+		});
+
 		it('should flatten result', () => {
 			const ProblemChild = ({ children }) => {
 				return React.Children.map(children, child => {