Merge pull request #424 from preactjs/fix-signals-support

Detect and unwrap signal properties

Author: marvinhagemeister

.changeset/mean-dragons-ring.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Fix support for signals, we need to detect and unwrap the signal

package-lock.json

@@ -113,6 +113,7 @@
 		"@babel/register": "^7.12.10",
 		"@changesets/changelog-github": "^0.4.1",
 		"@changesets/cli": "^2.18.0",
+		"@preact/signals-core": "^1.11.0",
 		"baseline-rts": "npm:preact-render-to-string@latest",
 		"benchmarkjs-pretty": "^2.0.1",
 		"check-export-map": "^1.3.1",

package.json

@@ -11,6 +11,7 @@ import {
 	unsetDirty,
 	isDirty
 } from './lib/util.js';
+import { Signal } from '@preact/signals-core';
 import { options, h, Fragment } from 'preact';
 import {
 	CHILDREN,
@@ -563,6 +564,7 @@ function _renderToString(
 
 	for (let name in props) {
 		let v = props[name];
+		v = isSignal(v) ? v.value : v;
 
 		if (typeof v == 'function' && name !== 'class' && name !== 'className') {
 			continue;
@@ -744,3 +746,12 @@ const SELF_CLOSING = new Set([
 export default renderToString;
 export const render = renderToString;
 export const renderToStaticMarkup = renderToString;
+
+function isSignal(x) {
+	return (
+		x !== null &&
+		typeof x === 'object' &&
+		typeof x.peek === 'function' &&
+		'value' in x
+	);
+}

src/index.js

@@ -144,6 +144,13 @@ describe('render', () => {
 			expect(rendered).to.equal(expected);
 		});
 
+		it('should include boolean disabled attribute', () => {
+			let rendered = render(<input disabled={false} />),
+				expected = `<input/>`;
+
+			expect(rendered).to.equal(expected);
+		});
+
 		it('should support false aria-* attributes', () => {
 			let rendered = render(<div aria-checked={false} />);
 			expect(rendered).to.equal(`<div aria-checked="false"></div>`);

test/render.test.jsx

@@ -0,0 +1,16 @@
+import render from '../../src/index.js';
+import { signal } from '@preact/signals-core';
+import { h } from 'preact';
+import { expect, describe, it } from 'vitest';
+
+/** @jsx h */
+
+describe('signals', () => {
+	it('should render signals', () => {
+		const disabled = signal(false);
+
+		const vdom = <input draggable={false} disabled={disabled} />;
+
+		expect(render(vdom)).to.equal('<input draggable="false"/>');
+	});
+});