Merge pull request #257 from preactjs/invalid-child-debug

Author: marvinhagemeister

.changeset/brown-boats-nail.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix `preact/debug` incorrectly throwing errors on text children

package.json

@@ -31,9 +31,10 @@
 		"transpile": "microbundle src/index.js -f es,umd --target web --external preact",
 		"transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external preact && microbundle dist/jsx.js -o dist/jsx.js -f cjs --external preact",
 		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
-		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run bench",
-		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/**/[!compat]*.test.js",
+		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
+		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/**/[!compat][!debug]*.test.js",
 		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/compat.test.js 'test/compat-*.test.js'",
+		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/debug.test.js 'test/debug-*.test.js'",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
 		"prepublishOnly": "npm run build",
 		"release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"

src/index.js

@@ -165,6 +165,23 @@ function renderClassComponent(vnode, context) {
 	return c.render(c.props, c.state, c.context);
 }
 
+/**
+ * @param {any} vnode
+ * @returns {VNode}
+ */
+function normalizeVNode(vnode) {
+	if (vnode == null || typeof vnode == 'boolean') {
+		return null;
+	} else if (
+		typeof vnode == 'string' ||
+		typeof vnode == 'number' ||
+		typeof vnode == 'bigint'
+	) {
+		return h(null, null, vnode);
+	}
+	return vnode;
+}
+
 /**
  * @param {string} name
  * @param {boolean} isSvgMode
@@ -237,6 +254,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			rendered =
 				rendered +
 				_renderToString(vnode[i], context, isSvgMode, selectValue, parent);
+
+			vnode[i] = normalizeVNode(vnode[i]);
 		}
 		return rendered;
 	}
@@ -372,6 +391,8 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 		vnode[CHILDREN] = children;
 		for (let i = 0; i < children.length; i++) {
 			let child = children[i];
+			children[i] = normalizeVNode(child);
+
 			if (child != null && child !== false) {
 				let childSvgMode =
 					type === 'svg' || (type !== 'foreignObject' && isSvgMode);
@@ -391,7 +412,7 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			}
 		}
 	} else if (children != null && children !== false && children !== true) {
-		vnode[CHILDREN] = [children];
+		vnode[CHILDREN] = [normalizeVNode(children)];
 		let childSvgMode =
 			type === 'svg' || (type !== 'foreignObject' && isSvgMode);
 		let ret = _renderToString(

test/debug.test.js

@@ -0,0 +1,26 @@
+import 'preact/debug';
+import { render } from '../src';
+import { h } from 'preact';
+import { expect } from 'chai';
+
+describe('debug', () => {
+	it('should not throw "Objects are not valid as a child" error', () => {
+		expect(() => render(<p>{'foo'}</p>)).not.to.throw();
+		expect(() => render(<p>{2}</p>)).not.to.throw();
+		expect(() => render(<p>{true}</p>)).not.to.throw();
+		expect(() => render(<p>{false}</p>)).not.to.throw();
+		expect(() => render(<p>{null}</p>)).not.to.throw();
+		expect(() => render(<p>{undefined}</p>)).not.to.throw();
+	});
+
+	it('should not throw "Objects are not valid as a child" error #2', () => {
+		function Str() {
+			return ['foo'];
+		}
+		expect(() => render(<Str />)).not.to.throw();
+	});
+
+	it('should not throw "Objects are not valid as a child" error #3', () => {
+		expect(() => render(<p>{'foo'}bar</p>)).not.to.throw();
+	});
+});