Merge pull request #4549 from preactjs/v11-2

(major) - Tracking PR for v11

Author: JoviDeCroock

README.md

@@ -5,15 +5,15 @@
 
 </a>
 </p>
-<p align="center">Fast <b>3kB</b> alternative to React with the same modern API.</p>
+<p align="center">Fast <b>4kB</b> alternative to React with the same modern API.</p>
 
 **All the power of Virtual DOM components, without the overhead:**
 
 - Familiar React API & patterns: ES6 Class, hooks, and Functional Components
 - Extensive React compatibility via a simple [preact/compat] alias
 - Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, [DevTools], <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>.
 - Highly optimized diff algorithm and seamless hydration from Server Side Rendering
-- Supports all modern browsers and IE11
+- Supports all modern browsers
 - Transparent asynchronous rendering with a pluggable scheduler
 
 ### 💁 More information at the [Preact Website ➞](https://preactjs.com)

babel.config.js

@@ -24,7 +24,13 @@ module.exports = function (api) {
 					modules: noModules ? false : 'auto',
 					exclude: ['@babel/plugin-transform-typeof-symbol'],
 					targets: {
-						browsers: ['last 2 versions', 'IE >= 9']
+						browsers: [
+							'chrome >= 40',
+							'safari >= 9',
+							'firefox >= 36',
+							'edge >= 12',
+							'not dead'
+						]
 					}
 				}
 			]

compat/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "description": "A React compatibility layer for Preact",
   "main": "dist/compat.js",
-  "module": "dist/compat.module.js",
+  "module": "dist/compat.mjs",
   "umd:main": "dist/compat.umd.js",
   "source": "src/index.js",
   "types": "src/index.d.ts",
@@ -19,7 +19,7 @@
   "exports": {
     ".": {
       "types": "./src/index.d.ts",
-      "browser": "./dist/compat.module.js",
+      "module": "./dist/compat.mjs",
       "umd": "./dist/compat.umd.js",
       "import": "./dist/compat.mjs",
       "require": "./dist/compat.js"

compat/src/forwardRef.js

@@ -1,26 +1,12 @@
-import { options } from 'preact';
 import { assign } from './util';
 
-let oldDiffHook = options._diff;
-options._diff = vnode => {
-	if (vnode.type && vnode.type._forwarded && vnode.ref) {
-		vnode.props.ref = vnode.ref;
-		vnode.ref = null;
-	}
-	if (oldDiffHook) oldDiffHook(vnode);
-};
-
-export const REACT_FORWARD_SYMBOL =
-	(typeof Symbol != 'undefined' &&
-		Symbol.for &&
-		Symbol.for('react.forward_ref')) ||
-	0xf47;
+export const REACT_FORWARD_SYMBOL = Symbol.for('react.forward_ref');
 
 /**
  * Pass ref down to a child. This is mainly used in libraries with HOCs that
  * wrap components. Using `forwardRef` there is an easy way to get a reference
  * of the wrapped component instead of one of the wrapper itself.
- * @param {import('./index').ForwardFn} fn
+ * @param {import('./index').ForwardRefRenderFunction} fn
  * @returns {import('./internal').FunctionComponent}
  */
 export function forwardRef(fn) {
@@ -38,7 +24,7 @@ export function forwardRef(fn) {
 	// mobx-react throws.
 	Forwarded.render = Forwarded;
 
-	Forwarded.prototype.isReactComponent = Forwarded._forwarded = true;
+	Forwarded.prototype.isReactComponent = true;
 	Forwarded.displayName = 'ForwardRef(' + (fn.displayName || fn.name) + ')';
 	return Forwarded;
 }

compat/src/hooks.js

@@ -1,5 +1,4 @@
 import { useState, useLayoutEffect, useEffect } from 'preact/hooks';
-import { is } from './util';
 
 /**
  * This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
@@ -47,7 +46,7 @@ function didSnapshotChange(inst) {
 	const prevValue = inst._value;
 	try {
 		const nextValue = latestGetSnapshot();
-		return !is(prevValue, nextValue);
+		return !Object.is(prevValue, nextValue);
 	} catch (error) {
 		return true;
 	}