Merge a5a767c into e206b07

debug/src/devtools/custom.js

@@ -82,13 +82,13 @@ export function getData(vnode) {
 		ref: vnode.ref || null,
 		key: vnode.key || null,
 		updater,
-		text: vnode.text,
+		text: vnode.type===null ? vnode.props : null,
 		state: c!=null && c instanceof Component ? c.state : null,
 		props: vnode.props,
 		// The devtools inline text children if they are the only child
-		children: vnode.text==null
-			? children!=null && children.length==1 && children[0].text!=null
-				? children[0].text
+		children: vnode.type!==null
+			? children!=null && children.length==1 && children[0].type===null
+				? children[0].props
 				: children
 			: null,
 		publicInstance: getInstance(vnode),

debug/test/browser/devtools.test.js

@@ -18,9 +18,9 @@ import { memo, forwardRef, createPortal } from '../../../compat/src';
 function serialize(events) {
 	return events.filter(x => x.type!='updateProfileTimes').map(x => ({
 		type: x.type,
-		component: x.internalInstance.type!=null
+		component: x.internalInstance.type!==null
 			? getDisplayName(x.internalInstance)
-			: '#text: ' + x.internalInstance.text
+			: '#text: ' + x.internalInstance.props
 	}));
 }
 

src/clone-element.js

@@ -11,5 +11,5 @@ import { createVNode } from './create-element';
 export function cloneElement(vnode, props) {
 	props = assign(assign({}, vnode.props), props);
 	if (arguments.length>2) props.children = EMPTY_ARR.slice.call(arguments, 2);
-	return createVNode(vnode.type, props, null, props.key || vnode.key, props.ref || vnode.ref);
+	return createVNode(vnode.type, props, props.key || vnode.key, props.ref || vnode.ref);
 }

src/create-element.js

@@ -34,29 +34,27 @@ export function createElement(type, props, children) {
 	let key = props.key;
 	if (key) delete props.key;
 
-	return createVNode(type, props, null, key, ref);
+	return createVNode(type, props, key, ref);
 }
 
 /**
  * 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 | null} props The properites of this virtual node
- * @param {string | number} text If this virtual node represents a text node,
- * this is the text of the node
- * @param {string |number | null} key The key for this virtual node, used when
+ * @param {object | string | number | null} props The properites 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, text, key, ref) {
+export function createVNode(type, props, key, ref) {
 	// 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,
-		text,
 		key,
 		ref,
 		_children: null,
@@ -87,7 +85,7 @@ export /* istanbul ignore next */ function Fragment() { }
 export function coerceToVNode(possibleVNode) {
 	if (possibleVNode == null || typeof possibleVNode === 'boolean') return null;
 	if (typeof possibleVNode === 'string' || typeof possibleVNode === 'number') {
-		return createVNode(null, null, possibleVNode, null, null);
+		return createVNode(null, possibleVNode, null, null);
 	}
 
 	if (Array.isArray(possibleVNode)) {
@@ -96,7 +94,7 @@ export function coerceToVNode(possibleVNode) {
 
 	// Clone vnode if it has already been used. ceviche/#57
 	if (possibleVNode._dom!=null || possibleVNode._component!=null) {
-		let vnode = createVNode(possibleVNode.type, possibleVNode.props, possibleVNode.text, possibleVNode.key, null);
+		let vnode = createVNode(possibleVNode.type, possibleVNode.props, possibleVNode.key, null);
 		vnode._dom = possibleVNode._dom;
 		return vnode;
 	}

src/diff/index.js

@@ -223,13 +223,15 @@ export function commitRoot(mounts, root) {
  * @returns {import('../internal').PreactElement}
  */
 function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChildren, mounts, ancestorComponent) {
-	let originalDom = dom;
+	let i;
+	let oldProps = oldVNode.props;
+	let newProps = newVNode.props;
 
 	// Tracks entering and exiting SVG namespace when descending through the tree.
 	isSvg = newVNode.type==='svg' || isSvg;
 
 	if (dom==null && excessDomChildren!=null) {
-		for (let i=0; i<excessDomChildren.length; i++) {
+		for (i=0; i<excessDomChildren.length; i++) {
 			const child = excessDomChildren[i];
 			if (child!=null && (newVNode.type===null ? child.nodeType===3 : child.localName===newVNode.type)) {
 				dom = child;
@@ -240,31 +242,30 @@ function diffElementNodes(dom, newVNode, oldVNode, context, isSvg, excessDomChil
 	}
 
 	if (dom==null) {
-		dom = newVNode.type===null ? document.createTextNode(newVNode.text) : isSvg ? document.createElementNS('http://www.w3.org/2000/svg', newVNode.type) : document.createElement(newVNode.type);
-
+		if (newVNode.type===null) {
+			return document.createTextNode(newProps);
+		}
+		dom = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', newVNode.type) : document.createElement(newVNode.type);
 		// we created a new parent, so none of the previously attached children can be reused:
 		excessDomChildren = null;
 	}
 
 	if (newVNode.type===null) {
-		if ((originalDom==null || dom===originalDom) && newVNode.text!==oldVNode.text) {
-			dom.data = newVNode.text;
+		if (oldProps !== newProps) {
+			dom.data = newProps;
 		}
 	}
 	else {
 		if (excessDomChildren!=null && dom.childNodes!=null) {
 			excessDomChildren = EMPTY_ARR.slice.call(dom.childNodes);
 		}
 		if (newVNode!==oldVNode) {
-			let oldProps = oldVNode.props;
-			let newProps = newVNode.props;
-
 			// if we're hydrating, use the element's attributes as its current props:
 			if (oldProps==null) {
 				oldProps = {};
 				if (excessDomChildren!=null) {
 					let name;
-					for (let i=0; i<dom.attributes.length; i++) {
+					for (i=0; i<dom.attributes.length; i++) {
 						name = dom.attributes[i].name;
 						oldProps[name=='class' && newProps.className ? 'className' : name] = dom.attributes[i].value;
 					}

src/index.d.ts

@@ -12,8 +12,7 @@ declare namespace preact {
 
 	interface VNode<P = {}> {
 		type: ComponentType<P> | string | null;
-		props: P & { children: ComponentChildren } | null;
-		text: string | number | null;
+		props: P & { children: ComponentChildren } | string | number | null;
 		key: Key;
 		ref: Ref<any> | null;
 		/**

test/shared/createElement.test.js

@@ -42,10 +42,6 @@ describe('createElement(jsx)', () => {
 		expect(h('div', props).props).to.deep.equal(props);
 	});
 
-	it('should set VNode#text property', () => {
-		expect(<div />).to.have.property('text', null);
-	});
-
 	it('should set VNode#key property', () => {
 		expect(<div />).to.have.property('key').that.is.undefined;
 		expect(<div a="a" />).to.have.property('key').that.is.undefined;
@@ -60,7 +56,7 @@ describe('createElement(jsx)', () => {
 	});
 
 	it('should have ordered VNode properties', () => {
-		expect(Object.keys(<div />).filter(key => !/^_/.test(key))).to.deep.equal(['type', 'props', 'text', 'key', 'ref']);
+		expect(Object.keys(<div />).filter(key => !/^_/.test(key))).to.deep.equal(['type', 'props', 'key', 'ref']);
 	});
 
 	it('should preserve raw props', () => {

test/ts/VNode-test.tsx

@@ -25,7 +25,7 @@ describe("VNode", () => {
 	it("is returned by h", () => {
 		const actual = <div className="wow"/>;
 		expect(actual).to.include.all.keys(
-			"type", "props", "text", "key"
+			"type", "props", "key"
 		);
 	});