Merge branch 'master' into tests-scu-state

compat/src/index.js

@@ -105,24 +105,6 @@ let Children = {
 	toArray: toChildArray
 };
 
-/**
- * Upgrade all found vnodes recursively
- * @param {Array} arr
- * @param {number} offset
- */
-function upgradeToVNodes(arr, offset) {
-	for (let i=offset || 0; i<arr.length; i++) {
-		let obj = arr[i];
-		if (Array.isArray(obj)) {
-			upgradeToVNodes(obj);
-		}
-		else if (obj && typeof obj==='object' && !isValidElement(obj) && ((obj.props && obj.type) || obj.text!=null)) {
-			if (obj.text) continue;
-			arr[i] = createElement(obj.type, obj.props, obj.props.children);
-		}
-	}
-}
-
 /**
  * Wrap `createElement` to apply various vnode normalizations.
  * @param {import('./internal').VNode["type"]} type The node name or Component constructor
@@ -131,9 +113,7 @@ function upgradeToVNodes(arr, offset) {
  * @returns {import('./internal').VNode}
  */
 function createElement(...args) {
-	upgradeToVNodes(args, 2);
 	let vnode = h(...args);
-	vnode.$$typeof = REACT_ELEMENT_TYPE;
 
 	let type = vnode.type, props = vnode.props;
 	if (typeof type!='function') {
@@ -182,7 +162,7 @@ function cloneElement(element) {
  * @returns {boolean}
  */
 function isValidElement(element) {
-	return element && element.$$typeof===REACT_ELEMENT_TYPE;
+	return element!=null && element.$$typeof===REACT_ELEMENT_TYPE;
 }
 
 /**
@@ -199,6 +179,10 @@ function applyEventNormalization({ type, props }) {
 		props.ondblclick = props[newProps.ondoubleclick];
 		delete props[newProps.ondoubleclick];
 	}
+	if (newProps.onbeforeinput) {
+		props.onbeforeinput = props[newProps.onbeforeinput];
+		delete props[newProps.onbeforeinput];
+	}
 	// for *textual inputs* (incl textarea), normalize `onChange` -> `onInput`:
 	if (newProps.onchange && (type==='textarea' || (type.toLowerCase()==='input' && !/^fil|che|rad/i.test(props.type)))) {
 		let normalized = newProps.oninput || 'oninput';
@@ -334,6 +318,8 @@ function forwardRef(fn) {
 
 let oldVNodeHook = options.vnode;
 options.vnode = vnode => {
+	vnode.$$typeof = REACT_ELEMENT_TYPE;
+
 	let type = vnode.type;
 	if (type!=null && type._forwarded) {
 		vnode.props.ref = vnode.ref;

compat/test/browser/component.test.js

@@ -1,4 +1,5 @@
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupRerender } from 'preact/test-utils';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import React from '../../src';
 
 describe('components', () => {

compat/test/browser/index.test.js

@@ -7,6 +7,7 @@ import React, {
 	unmountComponentAtNode,
 	createFactory
 } from '../../src';
+import { createElement as preactH } from 'preact';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 
 let ce = type => document.createElement(type);
@@ -171,6 +172,13 @@ describe('preact-compat', () => {
 			expectToBeNormalized(<input {...props} type="text" />, '<input type="text">');
 
 		});
+
+		it('should normalize beforeinput event listener', () => {
+			let spy = sinon.spy();
+			render(<input onBeforeInput={spy} />, scratch);
+			scratch.firstChild.dispatchEvent(new Event('beforeinput'));
+			expect(spy).to.be.calledOnce;
+		});
 	});
 
 	describe('Component', () => {
@@ -229,6 +237,16 @@ describe('preact-compat', () => {
 			let clone = cloneElement(element);
 			expect(clone).to.eql(element);
 		});
+
+		it('should work with jsx constructor from core', () => {
+			function Foo(props) {
+				return <div>{props.value}</div>;
+			}
+
+			let clone = cloneElement(preactH(Foo), { value: 'foo' });
+			render(clone, scratch);
+			expect(scratch.textContent).to.equal('foo');
+		});
 	});
 
 	describe('findDOMNode()', () => {

compat/test/browser/jsx.test.js

@@ -1,5 +1,6 @@
 import { setupScratch, teardown } from '../../../test/_util/helpers';
-import React from '../../src';
+import React, { isValidElement } from '../../src';
+import { h as preactH } from 'preact';
 
 describe('jsx', () => {
 
@@ -27,4 +28,22 @@ describe('jsx', () => {
 		React.render(jsx, scratch);
 		expect(scratch.innerHTML).to.equal('<div class="foo bar" data-foo="bar"><span id="some_id">inner!</span>ab</div>');
 	});
+
+	describe('isValidElement', () => {
+		it('should check return false for invalid arguments', () => {
+			expect(isValidElement(null)).to.equal(false);
+			expect(isValidElement(false)).to.equal(false);
+			expect(isValidElement(true)).to.equal(false);
+			expect(isValidElement('foo')).to.equal(false);
+			expect(isValidElement(123)).to.equal(false);
+		});
+
+		it('should detect a preact vnode', () => {
+			expect(isValidElement(preactH('div'))).to.equal(true);
+		});
+
+		it('should detect a compat vnode', () => {
+			expect(isValidElement(React.createElement('div'))).to.equal(true);
+		});
+	});
 });

compat/test/browser/memo.test.js

@@ -1,4 +1,5 @@
-import { setupScratch, setupRerender, teardown } from '../../../test/_util/helpers';
+import { setupRerender } from 'preact/test-utils';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { Component, render, createElement as h, memo } from '../../src';
 
 /** @jsx h */

debug/test/browser/devtools.test.js

@@ -1,6 +1,7 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement, createElement as h, Fragment, options, Component, render } from 'preact';
 import { getDisplayName, setIn, isRoot, getData, shallowEqual, hasDataChanged, hasProfileDataChanged, getChildren } from '../../src/devtools/custom';
-import { setupScratch, setupRerender, teardown, clearOptions } from '../../../test/_util/helpers';
+import { setupScratch, teardown, clearOptions } from '../../../test/_util/helpers';
 import { initDevTools } from '../../src/devtools';
 import { Renderer } from '../../src/devtools/renderer';
 import { memo, forwardRef } from '../../../compat/src';

hooks/test/browser/combinations.test.js

@@ -1,6 +1,7 @@
-import { createElement as h, render, Component } from 'preact';
+import { setupRerender } from 'preact/test-utils';
+import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useState, useReducer, useEffect, useLayoutEffect, useRef } from '../../src';
 import { scheduleEffectAssert } from '../_util/useEffectUtil';
 
@@ -64,7 +65,7 @@ describe('combinations', () => {
 		function Comp() {
 			const [counter, setCounter] = useState(0);
 
-			useEffect(() => { if (counter === 0) setCounter(1) });
+			useEffect(() => { if (counter === 0) setCounter(1); });
 
 			didRender(counter);
 			return null;
@@ -74,7 +75,7 @@ describe('combinations', () => {
 
 		return scheduleEffectAssert(() => {
 			rerender();
-			expect(didRender).to.have.been.calledTwice.and.calledWith(1)
+			expect(didRender).to.have.been.calledTwice.and.calledWith(1);
 		});
 	});
 
@@ -84,7 +85,7 @@ describe('combinations', () => {
 		function Comp() {
 			const [counter, setCounter] = useState(0);
 
-			useLayoutEffect(() => { if (counter === 0) setCounter(1) });
+			useLayoutEffect(() => { if (counter === 0) setCounter(1); });
 
 			didRender(counter);
 			return null;
@@ -93,7 +94,7 @@ describe('combinations', () => {
 		render(<Comp />, scratch);
 		rerender();
 
-		expect(didRender).to.have.been.calledTwice.and.calledWith(1)
+		expect(didRender).to.have.been.calledTwice.and.calledWith(1);
 	});
 
 	it('can access refs from within a layout effect callback', () => {
@@ -172,6 +173,6 @@ describe('combinations', () => {
 
 		return scheduleEffectAssert(() => {
 			expect(effectCount).to.equal(1);
-		})
+		});
 	});
 });

hooks/test/browser/useCallback.test.js

@@ -1,6 +1,6 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
-import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useCallback } from '../../src';
 
 /** @jsx h */

hooks/test/browser/useEffect.test.js

@@ -1,6 +1,7 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useEffect } from '../../src';
 import { useEffectAssertions } from './useEffectAssertions.test';
 import { scheduleEffectAssert } from '../_util/useEffectUtil';

hooks/test/browser/useEffectAssertions.test.js

@@ -1,6 +1,7 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 
 
 /** @jsx h */
@@ -132,4 +133,4 @@ export function useEffectAssertions(useEffect, scheduleEffectAssert) {
 
 		return scheduleEffectAssert(() => expect(values).to.deep.equal([1, 2]));
 	});
-}
+}

hooks/test/browser/useLayoutEffect.test.js

@@ -1,6 +1,7 @@
-import { createElement as h, render, options } from 'preact';
+import { setupRerender } from 'preact/test-utils';
+import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useEffectAssertions } from './useEffectAssertions.test';
 import { useLayoutEffect } from '../../src';
 

hooks/test/browser/useMemo.test.js

@@ -1,6 +1,7 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useMemo } from '../../src';
 
 /** @jsx h */

hooks/test/browser/useReducer.test.js

@@ -1,5 +1,6 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useReducer } from '../../src';
 
 /** @jsx h */
@@ -27,7 +28,7 @@ describe('useReducer', () => {
 		const states = [];
 		let _dispatch;
 
-		const initState = { count: 0 }
+		const initState = { count: 0 };
 
 		function reducer(state, action) {
 			switch (action.type) {
@@ -51,7 +52,7 @@ describe('useReducer', () => {
 	});
 
 	it('can be dispatched by another component', () => {
-		const initState = { count: 0 }
+		const initState = { count: 0 };
 
 		function reducer(state, action) {
 			switch (action.type) {
@@ -61,14 +62,14 @@ describe('useReducer', () => {
 
 		function ReducerComponent() {
 			const [state, dispatch] = useReducer(reducer, initState);
-			return <div>
+			return (<div>
 				<p>Count: {state.count}</p>
 				<DispatchComponent dispatch={dispatch} />
-			</div>;
+			</div>);
 		}
 
 		function DispatchComponent(props) {
-			return <button onClick={() => props.dispatch({ type: 'increment', by: 10 })}>Increment</button>
+			return <button onClick={() => props.dispatch({ type: 'increment', by: 10 })}>Increment</button>;
 		}
 
 		render(<ReducerComponent />, scratch);

hooks/test/browser/useRef.test.js

@@ -1,5 +1,6 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useRef } from '../../src';
 
 /** @jsx h */

hooks/test/browser/useState.test.js

@@ -1,6 +1,7 @@
+import { setupRerender } from 'preact/test-utils';
 import { createElement as h, render } from 'preact';
 import { spy } from 'sinon';
-import { setupScratch, teardown, setupRerender } from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { useState } from '../../src';
 
 /** @jsx h */
@@ -41,7 +42,7 @@ describe('useState', () => {
 	});
 
 	it('can initialize the state via a function', () => {
-		const initState = spy(() => { a: 1 })
+		const initState = spy(() => { 1; });
 
 		function Comp() {
 			useState(initState);
@@ -82,18 +83,18 @@ describe('useState', () => {
 	});
 
 	it('can be set by another component', () => {
-		const initState = { count: 0 }
+		const initState = { count: 0 };
 
 		function StateContainer() {
 			const [count, setCount] = useState(0);
-			return <div>
+			return (<div>
 				<p>Count: {count}</p>
 				<Increment increment={() => setCount(c => c + 10)} />
-			</div>;
+			</div>);
 		}
 
 		function Increment(props) {
-			return <button onClick={props.increment}>Increment</button>
+			return <button onClick={props.increment}>Increment</button>;
 		}
 
 		render(<StateContainer />, scratch);

karma.conf.js

@@ -152,6 +152,7 @@ module.exports = function(config) {
 				// directly
 				alias: {
 					'preact/hooks': path.join(__dirname, './hooks/src'),
+					'preact/test-utils': path.join(__dirname, './test-utils/src'),
 					preact: path.join(__dirname, './src')
 				}
 			},

src/diff/props.js

@@ -54,12 +54,11 @@ function setProperty(dom, name, value, oldValue, isSvg) {
 			for (let i in oldValue) {
 				if (value==null || !(i in value)) s.setProperty(i.replace(CAMEL_REG, '-'), '');
 			}
-		}
-
-		for (let i in value) {
-			v = value[i];
-			if (oldValue==null || v!==oldValue[i]) {
-				s.setProperty(i.replace(CAMEL_REG, '-'), typeof v==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (v + 'px') : v);
+			for (let i in value) {
+				v = value[i];
+				if (oldValue==null || v!==oldValue[i]) {
+					s.setProperty(i.replace(CAMEL_REG, '-'), typeof v==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (v + 'px') : v);
+				}
 			}
 		}
 	}

src/jsx.d.ts

@@ -494,6 +494,8 @@ declare namespace JSX {
 		async?: boolean;
 		autocomplete?: string;
 		autoComplete?: string;
+		autocorrect?: string;
+		autoCorrect?: string;
 		autofocus?: boolean;
 		autoFocus?: boolean;
 		autoPlay?: boolean;

test-utils/src/index.d.ts

@@ -1,2 +1,2 @@
-export function setupRerender(): void;
+export function setupRerender(): () => void;
 export function act(callback: () => void): void;