Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mean-dragons-ring.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'preact-render-to-string': patch
---

Fix support for signals, we need to detect and unwrap the signal
17 changes: 15 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -147,5 +147,8 @@
},
"publishConfig": {
"provenance": true
},
"dependencies": {
"@preact/signals-core": "^1.11.0"
}
}
6 changes: 6 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
SVG_CAMEL_CASE,
createComponent
} from './lib/util.js';
import { Signal } from '@preact/signals-core';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this was accidentally left around, will need to be removed but I gotta get to bed -- I can do it tomorrow but wanted to drop a mention at least so we don't release this.

import { options, h, Fragment } from 'preact';
import {
CHILDREN,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if we should use duck-typing here like https://github.com/denoland/fresh/blob/e65643c482de9b5afee5d52af3ccc88941c35b5c/src/runtime/server/preact_hooks.tsx#L355-L362 . That way we can keep rts dependency free and don't have to keep it in sync with major @preact/signals version increases.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might end up being a much larger perf hit in the critical path though

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if x !== null && typeof x === "object" is more or less expensive than an instanceof check. I let you decide on that one.

Copy link
Member

@rschristian rschristian Aug 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather avoid adding a dep for a singular instanceof check myself, and at least as of a few years ago, duck-typing with 1-2 properties usually outperformed instanceof in Chrome. No idea of what fully happens internally there, but naively, makes sense to me.

If you've measured it & it is a perf issue, fair enough of course. I'll have some time in a bit to check the benches (if you haven't already).

Edit: At least on my system, the check Marvin linked to above doesn't seem to perform any worse than instanceof. Ran the benches a few times and there wasn't any noticeable drop.

7 changes: 7 additions & 0 deletions test/render.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>`);
Expand Down
16 changes: 16 additions & 0 deletions test/signals/render.test.jsx
Original file line number Diff line number Diff line change
@@ -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"/>');
});
});