Merge branch 'main' into feature/support-is-fragment

.github/workflows/benchmarks.yml

@@ -9,7 +9,7 @@ on:
       - 'src/**.js'
   push:
     branches:
-      - master
+      - main
       - restructure
     paths:
       - 'src/**.js'
@@ -41,12 +41,12 @@ jobs:
           artifact: npm-package
           workflow: ci.yml
           required: false
-      - run: mv preact.tgz preact-master.tgz
+      - run: mv preact.tgz preact-main.tgz
       - name: Upload base preact package
         uses: actions/upload-artifact@v3
         with:
           name: bench-environment
-          path: preact-master.tgz
+          path: preact-main.tgz
 
   bench_todo:
     name: Bench todo

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ on:
       - '**'
   push:
     branches:
-      - master
+      - main
       - restructure
 
 jobs:

.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'

.github/workflows/release.yml

@@ -4,7 +4,7 @@ on: create
 jobs:
   build:
     if: github.ref_type == 'tag'
-    uses: preactjs/preact/.github/workflows/ci.yml@master
+    uses: preactjs/preact/.github/workflows/ci.yml@main
 
   release:
     runs-on: ubuntu-latest

.github/workflows/saucelabs.yml

@@ -3,7 +3,7 @@ name: Saucelabs
 on:
   push:
     branches:
-      - master
+      - main
       - restructure
 
 jobs:

CONTRIBUTING.md

@@ -74,23 +74,23 @@ Unique to Preact we do support several ways to hook into our renderer. All our a
 
 ## Important Branches
 
-We merge every PR into the `master` branch which is the one that we'll use to publish code to npm. For the previous Preact release line we have a branch called `8` which is in maintenance mode. As a new contributor you won't have to deal with that ;)
+We merge every PR into the `main` branch which is the one that we'll use to publish code to npm. For the previous Preact release line we have a branch called `8` which is in maintenance mode. As a new contributor you won't have to deal with that ;)
 
 ## Creating your first Pull-Request
 
 We try to make it as easy as possible to contribute to Preact and make heavy use of GitHub's "Draft PR" feature which tags Pull-Requests (short = PR) as work in progress. PRs tend to be published as soon as there is an idea that the developer deems worthwhile to include into Preact and has written some rough code. The PR doesn't have to be perfect or anything really ;)
 
 Once a PR or a Draft PR has been created our community typically joins the discussion about the proposed change. Sometimes that includes ideas for test cases or even different ways to go about implementing a feature. Often this also includes ideas on how to make the code smaller. We usually refer to the latter as "code-golfing" or just "golfing".
 
-When everything is good to go someone will approve the PR and the changes will be merged into the `master` branch and we usually cut a release a few days/ a week later.
+When everything is good to go someone will approve the PR and the changes will be merged into the `main` branch and we usually cut a release a few days/ a week later.
 
 _The big takeaway for you here is, that we will guide you along the way. We're here to help to make a PR ready for approval!_
 
 The short summary is:
 
 1. Make changes and submit a PR
 2. Modify change according to feedback (if there is any)
-3. PR will be merged into `master`
+3. PR will be merged into `main`
 4. A new release will be cut (every 2-3 weeks).
 
 ## Commonly used scripts for contributions
@@ -172,7 +172,7 @@ rights to publish new releases on npm.
 
 1. Make a PR where **only** the version number is incremented in `package.json` and everywhere else. A simple search and replace works. (note: We follow `SemVer` conventions)
 2. Wait until the PR is approved and merged.
-3. Switch back to the `master` branch and pull the merged PR
+3. Switch back to the `main` branch and pull the merged PR
 4. Create and push a tag for the new version you want to publish:
    1. `git tag 10.0.0`
    2. `git push --tags`
@@ -195,7 +195,7 @@ rights to publish new releases on npm.
    1. I'd recommend writing them in an offline editor because each edit to a draft will change the URL in GitHub.
 2. Make a PR where **only** the version number is incremented in `package.json` (note: We follow `SemVer` conventions)
 3. Wait until the PR is approved and merged.
-4. Switch back to the `master` branch and pull the merged PR
+4. Switch back to the `main` branch and pull the merged PR
 5. Run `npm run build && npm publish`
    1. Make sure you have 2FA enabled in npm, otherwise the above command will fail.
    2. If you're doing a pre-release add `--tag next` to the `npm publish` command to publish it under a different tag (default is `latest`)

README.md

@@ -28,7 +28,7 @@
 [![OpenCollective Backers](https://opencollective.com/preact/backers/badge.svg)](#backers)
 [![OpenCollective Sponsors](https://opencollective.com/preact/sponsors/badge.svg)](#sponsors)
 
-[![coveralls](https://img.shields.io/coveralls/preactjs/preact/master.svg)](https://coveralls.io/github/preactjs/preact)
+[![coveralls](https://img.shields.io/coveralls/preactjs/preact/main.svg)](https://coveralls.io/github/preactjs/preact)
 [![gzip size](http://img.badgesize.io/https://unpkg.com/preact/dist/preact.min.js?compression=gzip&label=gzip)](https://unpkg.com/preact/dist/preact.min.js)
 [![brotli size](http://img.badgesize.io/https://unpkg.com/preact/dist/preact.min.js?compression=brotli&label=brotli)](https://unpkg.com/preact/dist/preact.min.js)
 
@@ -185,6 +185,6 @@ MIT
 
 [![Preact](https://i.imgur.com/YqCHvEW.gif)](https://preactjs.com)
 
-[preact/compat]: https://github.com/preactjs/preact/tree/master/compat
+[preact/compat]: https://github.com/preactjs/preact/tree/main/compat
 [hyperscript]: https://github.com/dominictarr/hyperscript
 [DevTools]: https://github.com/preactjs/preact-devtools

benches/proxy-packages/preact-master-proxy/package.json → benches/proxy-packages/preact-main-proxy/package.json

@@ -5,6 +5,6 @@
   "type": "module",
   "main": "index.js",
   "dependencies": {
-    "preact": "file:../../../preact-master.tgz"
+    "preact": "file:../../../preact-main.tgz"
   }
 }

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', 'preact-hooks'] : null,
+	framework: IS_CI ? ['preact-main', 'preact-local', 'preact-hooks'] : null,
 	trace: false
 };
 

benches/scripts/config.js

@@ -49,14 +49,13 @@ 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 {
-				await stat(repoRoot('preact-master.tgz'));
+				await stat(repoRoot('preact-main.tgz'));
 				return validateFileDep(this.dependencies.framework);
 			} catch (e) {
 				return false;

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)',
@@ -72,7 +72,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(
@@ -81,7 +81,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.',

compat/src/index.d.ts

@@ -53,6 +53,7 @@ declare namespace React {
 	export import createElement = preact.createElement;
 	export import cloneElement = preact.cloneElement;
 	export import ComponentProps = preact.ComponentProps;
+	export import ReactNode = preact.ComponentChild;
 
 	// Suspense
 	export import Suspense = _Suspense.Suspense;
@@ -65,9 +66,13 @@ declare namespace React {
 	export function startTransition(cb: () => void): void;
 
 	// HTML
-	export import HTMLAttributes = JSXInternal.HTMLAttributes;
+	export interface HTMLAttributes<T extends EventTarget>
+		extends JSXInternal.HTMLAttributes<T> {}
 	export import DetailedHTMLProps = JSXInternal.DetailedHTMLProps;
 	export import CSSProperties = JSXInternal.CSSProperties;
+	export interface SVGProps<T extends EventTarget>
+		extends JSXInternal.SVGAttributes<T>,
+			preact.ClassAttributes<T> {}
 
 	// Events
 	export import TargetedEvent = JSXInternal.TargetedEvent;

compat/src/portals.js

@@ -31,43 +31,34 @@ function Portal(props) {
 		_this.componentWillUnmount();
 	}
 
-	// When props.vnode is undefined/false/null we are dealing with some kind of
-	// conditional vnode. This should not trigger a render.
-	if (props._vnode) {
-		if (!_this._temp) {
-			_this._container = container;
+	if (!_this._temp) {
+		_this._container = container;
 
-			// Create a fake DOM parent node that manages a subset of `container`'s children:
-			_this._temp = {
-				nodeType: 1,
-				parentNode: container,
-				childNodes: [],
-				appendChild(child) {
-					this.childNodes.push(child);
-					_this._container.appendChild(child);
-				},
-				insertBefore(child, before) {
-					this.childNodes.push(child);
-					_this._container.appendChild(child);
-				},
-				removeChild(child) {
-					this.childNodes.splice(this.childNodes.indexOf(child) >>> 1, 1);
-					_this._container.removeChild(child);
-				}
-			};
-		}
-
-		// Render our wrapping element into temp.
-		render(
-			createElement(ContextProvider, { context: _this.context }, props._vnode),
-			_this._temp
-		);
-	}
-	// When we come from a conditional render, on a mounted
-	// portal we should clear the DOM.
-	else if (_this._temp) {
-		_this.componentWillUnmount();
+		// Create a fake DOM parent node that manages a subset of `container`'s children:
+		_this._temp = {
+			nodeType: 1,
+			parentNode: container,
+			childNodes: [],
+			appendChild(child) {
+				this.childNodes.push(child);
+				_this._container.appendChild(child);
+			},
+			insertBefore(child, before) {
+				this.childNodes.push(child);
+				_this._container.appendChild(child);
+			},
+			removeChild(child) {
+				this.childNodes.splice(this.childNodes.indexOf(child) >>> 1, 1);
+				_this._container.removeChild(child);
+			}
+		};
 	}
+
+	// Render our wrapping element into temp.
+	render(
+		createElement(ContextProvider, { context: _this.context }, props._vnode),
+		_this._temp
+	);
 }
 
 /**

compat/test/browser/render.test.js

@@ -10,7 +10,8 @@ import {
 	setupScratch,
 	teardown,
 	serializeHtml,
-	createEvent
+	createEvent,
+	sortAttributes
 } from '../../../test/_util/helpers';
 
 describe('compat render', () => {
@@ -252,7 +253,7 @@ describe('compat render', () => {
 		);
 	});
 
-	it('shouldnot transform imageSrcSet', () => {
+	it('should not transform imageSrcSet', () => {
 		render(
 			<link
 				rel="preload"
@@ -262,8 +263,8 @@ describe('compat render', () => {
 			/>,
 			scratch
 		);
-		expect(scratch.innerHTML).to.equal(
-			'<link rel="preload" as="image" href="preact.jpg" imagesrcset="preact_400px.jpg 400w">'
+		expect(sortAttributes(scratch.innerHTML)).to.equal(
+			'<link as="image" href="preact.jpg" imagesrcset="preact_400px.jpg 400w" rel="preload">'
 		);
 	});
 

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.15.1', options, {
+		window.__PREACT_DEVTOOLS__.attachPreact('10.16.0', options, {
 			Fragment,
 			Component
 		});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "preact",
   "amdName": "preact",
-  "version": "10.15.1",
+  "version": "10.16.0",
   "private": false,
   "description": "Fast 3kb React-compatible Virtual DOM library.",
   "main": "dist/preact.js",

sizereport.config.js

@@ -1,5 +1,5 @@
 module.exports = {
 	repo: 'preactjs/preact',
 	path: ['./{compat,debug,hooks,}/dist/**/!(*.map)'],
-	branch: 'master'
+	branch: 'main'
 };

src/diff/children.js

@@ -144,7 +144,6 @@ export function diffChildren(
 		);
 
 		newDom = childVNode._dom;
-
 		if ((j = childVNode.ref) && oldVNode.ref != j) {
 			if (oldVNode.ref) {
 				applyRef(oldVNode.ref, null, childVNode);
@@ -158,19 +157,16 @@ export function diffChildren(
 			}
 
 			let isMounting = oldVNode === EMPTY_OBJ || oldVNode._original === null;
-			let hasMatchingIndex = !isMounting && matchingIndex === skewedIndex;
 			if (isMounting) {
 				if (matchingIndex == -1) {
 					skew--;
 				}
 			} else if (matchingIndex !== skewedIndex) {
 				if (matchingIndex === skewedIndex + 1) {
 					skew++;
-					hasMatchingIndex = true;
 				} else if (matchingIndex > skewedIndex) {
 					if (remainingOldChildren > newChildrenLength - skewedIndex) {
 						skew += matchingIndex - skewedIndex;
-						hasMatchingIndex = true;
 					} else {
 						// ### Change from keyed: I think this was missing from the algo...
 						skew--;
@@ -187,16 +183,17 @@ export function diffChildren(
 			}
 
 			skewedIndex = i + skew;
-			hasMatchingIndex =
-				hasMatchingIndex || (matchingIndex == i && !isMounting);
 
 			if (
 				typeof childVNode.type == 'function' &&
 				(matchingIndex !== skewedIndex ||
 					oldVNode._children === childVNode._children)
 			) {
 				oldDom = reorderChildren(childVNode, oldDom, parentDom);
-			} else if (typeof childVNode.type != 'function' && !hasMatchingIndex) {
+			} else if (
+				typeof childVNode.type != 'function' &&
+				(matchingIndex !== skewedIndex || isMounting)
+			) {
 				oldDom = placeChild(parentDom, newDom, oldDom);
 			} else if (childVNode._nextDom !== undefined) {
 				// Only Fragments or components that return Fragment like VNodes will