Merge pull request #3797 from preactjs/v11-optimizations-1

V11 optimizations 1

Author: developit

compat/src/index.js

@@ -91,7 +91,7 @@ function findDOMNode(component) {
 		return component;
 	}
 
-	return getChildDom(component._internal);
+	return getChildDom(component._internal, 0);
 }
 
 /**

compat/test/browser/jsx-runtime.js

@@ -0,0 +1,72 @@
+import { Component } from 'preact/compat';
+import { jsx } from 'preact/compat/jsx-runtime';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
+import { getSymbol } from './testUtils';
+
+describe('compat createElement()', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+
+	beforeEach(() => {
+		scratch = setupScratch();
+	});
+
+	afterEach(() => {
+		teardown(scratch);
+	});
+
+	it('should normalize vnodes', () => {
+		let vnode = jsx('div', {
+			a: 'b',
+			children: jsx('a', { children: 't' })
+		});
+
+		const $$typeof = getSymbol('react.element', 0xeac7);
+		expect(vnode).to.have.property('$$typeof', $$typeof);
+		expect(vnode).to.have.property('type', 'div');
+		expect(vnode)
+			.to.have.property('props')
+			.that.is.an('object');
+		expect(vnode.props).to.have.property('children');
+		expect(vnode.props.children).to.have.property('$$typeof', $$typeof);
+		expect(vnode.props.children).to.have.property('type', 'a');
+		expect(vnode.props.children)
+			.to.have.property('props')
+			.that.is.an('object');
+		expect(vnode.props.children.props).to.eql({ children: 't' });
+	});
+
+	it('should apply defaultProps', () => {
+		class Foo extends Component {
+			render() {
+				return jsx('div', {});
+			}
+		}
+
+		Foo.defaultProps = {
+			foo: 'bar'
+		};
+
+		const vnode = jsx(Foo, {});
+		expect(vnode.props).to.deep.equal({
+			foo: 'bar'
+		});
+	});
+
+	it('should keep props over defaultProps', () => {
+		class Foo extends Component {
+			render() {
+				return jsx('div', {});
+			}
+		}
+
+		Foo.defaultProps = {
+			foo: 'bar'
+		};
+
+		const vnode = jsx(Foo, { foo: 'baz' });
+		expect(vnode.props).to.deep.equal({
+			foo: 'baz'
+		});
+	});
+});

jsx-runtime/src/index.js

@@ -27,9 +27,12 @@ function createVNode(type, props, key, __source, __self) {
 	// We'll want to preserve `ref` in props to get rid of the need for
 	// forwardRef components in the future, but that should happen via
 	// a separate PR.
+	let ref;
 	let normalizedProps = {};
 	for (let i in props) {
-		if (i != 'ref') {
+		if (i === 'ref') {
+			ref = props[i];
+		} else {
 			normalizedProps[i] = props[i];
 		}
 	}
@@ -38,23 +41,13 @@ function createVNode(type, props, key, __source, __self) {
 		type,
 		props: normalizedProps,
 		key,
-		ref: props && props.ref,
+		ref,
 		constructor: undefined,
 		_vnodeId: --vnodeId,
 		__source,
 		__self
 	};
 
-	// If a Component VNode, check for and apply defaultProps.
-	// Note: `type` is often a String, and can be `undefined` in development.
-	let defaults, i;
-	if (typeof type === 'function' && (defaults = type.defaultProps)) {
-		for (i in defaults)
-			if (normalizedProps[i] === undefined) {
-				normalizedProps[i] = defaults[i];
-			}
-	}
-
 	if (options.vnode) options.vnode(vnode);
 	return vnode;
 }

jsx-runtime/test/browser/jsx-runtime.test.js

@@ -31,40 +31,6 @@ describe('Babel jsx/jsxDEV', () => {
 		expect(vnode.key).to.equal('foo');
 	});
 
-	it('should apply defaultProps', () => {
-		class Foo extends Component {
-			render() {
-				return <div />;
-			}
-		}
-
-		Foo.defaultProps = {
-			foo: 'bar'
-		};
-
-		const vnode = jsx(Foo, {}, null);
-		expect(vnode.props).to.deep.equal({
-			foo: 'bar'
-		});
-	});
-
-	it('should keep props over defaultProps', () => {
-		class Foo extends Component {
-			render() {
-				return <div />;
-			}
-		}
-
-		Foo.defaultProps = {
-			foo: 'bar'
-		};
-
-		const vnode = jsx(Foo, { foo: 'baz' }, null);
-		expect(vnode.props).to.deep.equal({
-			foo: 'baz'
-		});
-	});
-
 	it('should set __source and __self', () => {
 		const vnode = jsx('div', { class: 'foo' }, 'key', 'source', 'self');
 		expect(vnode.__source).to.equal('source');

src/clone-element.js

@@ -1,4 +1,5 @@
-import { createVNode } from './create-element';
+import { EMPTY_ARR } from './constants';
+import { createElement } from './create-element';
 
 /**
  * Clones the given VNode, optionally adding attributes/props and replacing its children.
@@ -8,33 +9,15 @@ import { createVNode } from './create-element';
  * @returns {import('./internal').VNode}
  */
 export function cloneElement(vnode, props, children) {
-	let normalizedProps = Object.assign({}, vnode.props),
-		key,
-		ref,
-		i;
-
-	for (i in props) {
-		if (i == 'key') key = props[i];
-		else if (i == 'ref') ref = props[i];
-		else normalizedProps[i] = props[i];
-	}
-
 	if (arguments.length > 3) {
-		children = [children];
-		for (i = 3; i < arguments.length; i++) {
-			children.push(arguments[i]);
-		}
+		children = EMPTY_ARR.slice.call(arguments, 2);
 	}
 
-	if (children !== undefined) {
-		normalizedProps.children = children;
-	}
-
-	return createVNode(
-		vnode.type,
-		normalizedProps,
-		key || vnode.key,
-		ref || vnode.ref,
-		0
+	const clonedProps = Object.assign(
+		{ key: vnode.key, ref: vnode.ref },
+		vnode.props,
+		props
 	);
+
+	return createElement(vnode.type, clonedProps, children);
 }

src/component.js

@@ -1,6 +1,6 @@
 import { commitRoot } from './diff/commit';
 import options from './options';
-import { createVNode, Fragment } from './create-element';
+import { createElement, Fragment } from './create-element';
 import { patch } from './diff/patch';
 import { DIRTY_BIT, FORCE_UPDATE, MODE_UNMOUNTING } from './constants';
 import { getParentDom } from './tree';
@@ -91,26 +91,25 @@ Component.prototype.render = Fragment;
 /**
  * @param {import('./internal').Internal} internal The internal to rerender
  */
-function rerender(internal) {
-	if (~internal.flags & MODE_UNMOUNTING && internal.flags & DIRTY_BIT) {
-		const vnode = createVNode(
-			internal.type,
-			internal.props,
-			internal.key, // @TODO we shouldn't need to actually pass these
-			internal.ref, // since the mode flag should bypass key/ref handling
-			0
-		);
-
-		patch(internal, vnode, getParentDom(internal));
-		commitRoot(internal);
-	}
+function renderQueuedInternal(internal) {
+	// Don't render unmounting/unmounted trees:
+	if (internal.flags & MODE_UNMOUNTING) return;
+
+	// Don't render trees already rendered in this pass:
+	if (!(internal.flags & DIRTY_BIT)) return;
+
+	const vnode = createElement(internal.type, internal.props);
+	vnode.props = internal.props;
+
+	patch(internal, vnode, getParentDom(internal));
+	commitRoot(internal);
 }
 
 /**
  * The render queue
  * @type {Array<import('./internal').Internal>}
  */
-let rerenderQueue = [];
+let renderQueue = [];
 
 /*
  * The value of `Component.debounce` must asynchronously invoke the passed in callback. It is
@@ -131,22 +130,22 @@ export function enqueueRender(internal) {
 	if (
 		(!(internal.flags & DIRTY_BIT) &&
 			(internal.flags |= DIRTY_BIT) &&
-			rerenderQueue.push(internal) &&
-			!process._rerenderCount++) ||
+			renderQueue.push(internal) &&
+			!processRenderQueue._rerenderCount++) ||
 		prevDebounce !== options.debounceRendering
 	) {
 		prevDebounce = options.debounceRendering;
-		(prevDebounce || setTimeout)(process);
+		(prevDebounce || setTimeout)(processRenderQueue);
 	}
 }
 
 /** Flush the render queue by rerendering all queued components */
-function process() {
-	while ((len = process._rerenderCount = rerenderQueue.length)) {
-		rerenderQueue.sort((a, b) => a._depth - b._depth);
+function processRenderQueue() {
+	while ((len = processRenderQueue._rerenderCount = renderQueue.length)) {
+		renderQueue.sort((a, b) => a._depth - b._depth);
 		while (len--) {
-			rerender(rerenderQueue.shift());
+			renderQueuedInternal(renderQueue.shift());
 		}
 	}
 }
-let len = (process._rerenderCount = 0);
+let len = (processRenderQueue._rerenderCount = 0);

src/create-context.js

@@ -4,6 +4,7 @@ let nextContextId = 0;
 
 const providers = new Set();
 
+/** @param {import('./internal').Internal} internal */
 export const unsubscribeFromContext = internal => {
 	// if this was a context provider, delete() returns true and we exit:
 	if (providers.delete(internal)) return;

src/create-element.js

@@ -34,31 +34,15 @@ export function createElement(type, props, children) {
 		normalizedProps.children = children;
 	}
 
-	return createVNode(type, normalizedProps, key, ref, 0);
-}
-
-/**
- * Create a VNode (used internally by Preact)
- * @param {import('./internal').VNode["type"]} type The node name or Component
- * Constructor for this virtual node
- * @param {object | string | number | null} props The properties of this virtual node.
- * If this virtual node represents a text node, this is the text of the node (string or number).
- * @param {string | number | null} key The key for this virtual node, used when
- * diffing it against its children
- * @param {import('./internal').VNode["ref"]} ref The ref property that will
- * receive a reference to its created child
- * @returns {import('./internal').VNode}
- */
-export function createVNode(type, props, key, ref, original) {
 	// V8 seems to be better at detecting type shapes if the object is allocated from the same call site
 	// Do not inline into createElement and coerceToVNode!
 	const vnode = {
 		type,
-		props,
+		props: normalizedProps,
 		key,
 		ref,
 		constructor: undefined,
-		_vnodeId: original || ++vnodeId
+		_vnodeId: ++vnodeId
 	};
 
 	if (options.vnode != null) options.vnode(vnode);
@@ -77,7 +61,7 @@ export function normalizeToVNode(childVNode) {
 	}
 	if (type === 'object') {
 		if (Array.isArray(childVNode)) {
-			return createVNode(Fragment, { children: childVNode }, null, null, 0);
+			return createElement(Fragment, null, childVNode);
 		}
 	} else if (type !== 'string' && type !== 'function') {
 		return String(childVNode);

src/tree.js

@@ -143,23 +143,23 @@ export function getDomSibling(internal, childIndex) {
 
 /**
  * @param {import('./internal').Internal} internal
- * @param {number} [i]
+ * @param {number} offset
  * @returns {import('./internal').PreactElement}
  */
-export function getChildDom(internal, i) {
+export function getChildDom(internal, offset) {
 	if (internal._children == null) {
 		return null;
 	}
 
-	for (i = i || 0; i < internal._children.length; i++) {
-		let child = internal._children[i];
+	for (; offset < internal._children.length; offset++) {
+		let child = internal._children[offset];
 		if (child != null) {
 			if (child.flags & TYPE_DOM) {
 				return child._dom;
 			}
 
 			if (shouldSearchComponent(child)) {
-				let childDom = getChildDom(child);
+				let childDom = getChildDom(child, 0);
 				if (childDom) {
 					return childDom;
 				}