Detect and unwrap signal properties

Author: JoviDeCroock

.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

@@ -147,5 +147,8 @@
 	},
 	"publishConfig": {
 		"provenance": true
+	},
+	"dependencies": {
+		"@preact/signals-core": "^1.11.0"
 	}
 }

package.json

@@ -8,6 +8,7 @@ import {
 	SVG_CAMEL_CASE,
 	createComponent
 } from './lib/util.js';
+import { Signal } from '@preact/signals-core';
 import { options, h, Fragment } from 'preact';
 import {
 	CHILDREN,
@@ -559,6 +560,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;
@@ -740,3 +742,7 @@ const SELF_CLOSING = new Set([
 export default renderToString;
 export const render = renderToString;
 export const renderToStaticMarkup = renderToString;
+
+function isSignal(x) {
+	return x instanceof Signal;
+}

src/index.js

@@ -143,6 +143,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"/>');
+	});
+});