merge master

Author: developit

.changeset/famous-days-invite.md

@@ -1,5 +1,35 @@
 # preact-render-to-string
 
+## 5.2.6
+
+### Patch Changes
+
+- [#257](https://github.com/preactjs/preact-render-to-string/pull/257) [`8b944b2`](https://github.com/preactjs/preact-render-to-string/commit/8b944b28be64d470a947f999153c9b64b078f7a8) Thanks [@marvinhagemeister](https://github.com/marvinhagemeister)! - Fix `preact/debug` incorrectly throwing errors on text children
+
+## 5.2.5
+
+### Patch Changes
+
+- [#246](https://github.com/preactjs/preact-render-to-string/pull/246) [`ad35c4c`](https://github.com/preactjs/preact-render-to-string/commit/ad35c4c931db37837761038d33ae71fa31ebc9e3) Thanks [@developit](https://github.com/developit) and [@marvinhagemeister](https://github.com/marvinhagemeister)! - Fix object and function children being rendered as `undefined`
+
+* [#248](https://github.com/preactjs/preact-render-to-string/pull/248) [`aa12b3c`](https://github.com/preactjs/preact-render-to-string/commit/aa12b3c61528813c7a3978410d1d551afbdb08ba) Thanks [@marvinhagemeister](https://github.com/marvinhagemeister)! - Fix vnode masks not matching with core due to top level component Fragments
+
+## 5.2.4
+
+### Patch Changes
+
+- [#242](https://github.com/preactjs/preact-render-to-string/pull/242) [`bd5e5eb`](https://github.com/preactjs/preact-render-to-string/commit/bd5e5eb1c97355d81710c17a10208b1cb3b439a0) Thanks [@JoviDeCroock](https://github.com/JoviDeCroock)! - correctly unmount vnodes
+
+* [#237](https://github.com/preactjs/preact-render-to-string/pull/237) [`dec7a7a`](https://github.com/preactjs/preact-render-to-string/commit/dec7a7a575149187942adb92f644c302db4b0599) Thanks [@JoviDeCroock](https://github.com/JoviDeCroock)! - add parent and children for useId
+
+## 5.2.3
+
+### Patch Changes
+
+- [#232](https://github.com/preactjs/preact-render-to-string/pull/232) [`2d5ca74`](https://github.com/preactjs/preact-render-to-string/commit/2d5ca74646f2f9f2e9ddeb20ed9c3fc47171c264) Thanks [@JoviDeCroock](https://github.com/JoviDeCroock)! - Performance enhancements
+
+* [#238](https://github.com/preactjs/preact-render-to-string/pull/238) [`7cdf4d6`](https://github.com/preactjs/preact-render-to-string/commit/7cdf4d67abba622124902e53e016affbbebc647e) Thanks [@developit](https://github.com/developit)! - Fix the order of invocation for the "before diff" (`__b`) and "diffed" [options hooks](https://preactjs.com/guide/v10/options/).
+
 ## 5.2.2
 
 ### Patch Changes

.changeset/honest-kangaroos-mix.md

@@ -3,20 +3,18 @@
 [![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string)
 [![Build status](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml/badge.svg)](https://github.com/preactjs/preact-render-to-string/actions/workflows/ci.yml)
 
-Render JSX and [Preact] components to an HTML string.
+Render JSX and [Preact](https://github.com/preactjs/preact) components to an HTML string.
 
 Works in Node & the browser, making it useful for universal/isomorphic rendering.
 
 \>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ <<
 
-
 ---
 
-
 ### Render JSX/VDOM to HTML
 
 ```js
-import render from 'preact-render-to-string';
+import { render } from 'preact-render-to-string';
 import { h } from 'preact';
 /** @jsx h */
 
@@ -27,24 +25,23 @@ console.log(html);
 // <div class="foo">content</div>
 ```
 
-
 ### Render Preact Components to HTML
 
 ```js
-import render from 'preact-render-to-string';
+import { render } from 'preact-render-to-string';
 import { h, Component } from 'preact';
 /** @jsx h */
 
 // Classical components work
 class Fox extends Component {
 	render({ name }) {
-		return <span class="fox">{ name }</span>;
+		return <span class="fox">{name}</span>;
 	}
 }
 
 // ... and so do pure functional components:
 const Box = ({ type, children }) => (
-	<div class={`box box-${type}`}>{ children }</div>
+	<div class={`box box-${type}`}>{children}</div>
 );
 
 let html = render(
@@ -57,22 +54,20 @@ console.log(html);
 // <div class="box box-open"><span class="fox">Finn</span></div>
 ```
 
-
 ---
 
-
 ### Render JSX / Preact / Whatever via Express!
 
 ```js
 import express from 'express';
 import { h } from 'preact';
-import render from 'preact-render-to-string';
+import { render } from 'preact-render-to-string';
 /** @jsx h */
 
 // silly example component:
 const Fox = ({ name }) => (
 	<div class="fox">
-		<h5>{ name }</h5>
+		<h5>{name}</h5>
 		<p>This page is all about {name}.</p>
 	</div>
 );
@@ -89,14 +84,8 @@ app.get('/:fox', (req, res) => {
 });
 ```
 
-
 ---
 
-
 ### License
 
-[MIT]
-
-
-[Preact]: https://github.com/developit/preact
-[MIT]: http://choosealicense.com/licenses/mit/
+[MIT](http://choosealicense.com/licenses/mit/)

CHANGELOG.md

@@ -1,7 +1,7 @@
 {
 	"name": "preact-render-to-string",
 	"amdName": "preactRenderToString",
-	"version": "5.2.2",
+	"version": "5.2.6",
 	"description": "Render JSX to an HTML string, with support for Preact components.",
 	"main": "dist/index.js",
 	"umd:main": "dist/index.js",
@@ -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 bench",
-		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/**/[!compat]*.test.js && npm run test:mocha:compat",
-		"test:mocha:compat": "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"
@@ -120,7 +121,7 @@
 		"lint-staged": "^10.5.3",
 		"microbundle": "^0.15.1",
 		"mocha": "^8.2.1",
-		"preact": "^10.5.7",
+		"preact": "^10.11.1",
 		"prettier": "^2.2.1",
 		"sinon": "^9.2.2",
 		"sinon-chai": "^3.5.0",

README.md

@@ -64,10 +64,10 @@ function markAsDirty() {
 
 /**
  * @param {VNode} vnode
- * @param {any} context
+ * @param {Record<string, unknown>} context
  */
 function renderClassComponent(vnode, context) {
-	let type = vnode.type;
+	let type = /** @type {import("preact").ComponentClass<typeof vnode.props>} */ (vnode.type);
 
 	let c = new type(vnode.props, context);
 
@@ -123,6 +123,7 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 
 	// Text VNodes: escape as HTML
 	if (typeof vnode !== 'object') {
+		if (typeof vnode === 'function') return '';
 		return encodeEntities(vnode + '');
 	}
 
@@ -131,13 +132,28 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 		let rendered = '';
 		parent[CHILDREN] = vnode;
 		for (let i = 0; i < vnode.length; i++) {
+			let child = vnode[i];
+			if (child == null || typeof child === 'boolean') continue;
+
 			rendered =
 				rendered +
-				_renderToString(vnode[i], context, isSvgMode, selectValue, parent);
+				_renderToString(child, context, isSvgMode, selectValue, parent);
+
+			if (
+				typeof child === 'string' ||
+				typeof child === 'number' ||
+				typeof child === 'bigint'
+			) {
+				// @ts-ignore manually constructing a Text vnode
+				vnode[i] = h(null, null, child);
+			}
 		}
 		return rendered;
 	}
 
+	// VNodes have {constructor:undefined} to prevent JSON injection:
+	if (vnode.constructor !== undefined) return '';
+
 	vnode[PARENT] = parent;
 	if (beforeDiff) beforeDiff(vnode);
 
@@ -198,6 +214,12 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 			}
 		}
 
+		// When a component returns a Fragment node we flatten it in core, so we
+		// need to mirror that logic here too
+		let isTopLevelFragment =
+			rendered != null && rendered.type === Fragment && rendered.key == null;
+		rendered = isTopLevelFragment ? rendered.props.children : rendered;
+
 		// Recurse into children before invoking the after-diff hook
 		const str = _renderToString(
 			rendered,
@@ -208,6 +230,9 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) {
 		);
 		if (afterDiff) afterDiff(vnode);
 		vnode[PARENT] = undefined;
+
+		if (options.unmount) options.unmount(vnode);
+
 		return str;
 	}
 

package-lock.json

@@ -65,6 +65,7 @@ function _renderToStringPretty(
 
 	// #text nodes
 	if (typeof vnode !== 'object') {
+		if (typeof vnode === 'function') return '';
 		return encodeEntities(vnode + '');
 	}
 
@@ -91,6 +92,9 @@ function _renderToStringPretty(
 
 	if (options[DIFF]) options[DIFF](vnode);
 
+	// VNodes have {constructor:undefined} to prevent JSON injection:
+	if (vnode.constructor !== undefined) return '';
+
 	let nodeName = vnode.type,
 		props = vnode.props,
 		isComponent = false;

package.json

@@ -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();
+	});
+});

src/index.js

@@ -163,4 +163,12 @@ describe('jsx', () => {
 			<meta charset="utf-8" />
 		`);
 	});
+
+	it('should prevent JSON injection', () => {
+		expect(renderJsx(<div>{{ hello: 'world' }}</div>)).to.equal('<div></div>');
+	});
+
+	it('should not render function children', () => {
+		expect(renderJsx(<div>{() => {}}</div>)).to.equal('<div></div>');
+	});
 });