<div>{ new String('hi') }</div> renders blank

[appsforartists]

• Check if updating to the latest Preact version resolves the issue

Describe the bug

render(
  <div>
    { new String('this should work') }
  </div>,
  root
);

doesn't render the string. This works in React.

To Reproduce

React and Preact are both shown here

Note

Normally I would just render a string primitive; however, some of the strings I want to render may have metadata attached to them (not relevant to the render, but useful in the app).

const thing = 'thing';
thing.metadata = 123;

is illegal; however,

const thing = new String('thing');
thing.metadata = 123;

works. Thus, I'm trying to figure out how I can have an object that is treated like a string e.g. by Preact, but can have metadata attached when needed.

[JoviDeCroock]

I think you would have to call .toString() on your new String() constructed object as essentially this is an object in the VDom which will run into a security measure of Preact to block injected nodes https://github.com/preactjs/preact/blob/main/src/diff/index.js#L41-L43

[appsforartists]

Can you please explain that attack?

As I showed in the Colab, React supports the String constructor. Do they mitigate against it?

Seems like you could do something like change:

if (newVNode.constructor !== undefined) return null;

to

if (newVNode.toString) // or newVNode.constructor === String
  newVNode = newVNode.toString();
else if (newVNode.constructor !== undefined) return null;

[appsforartists]

That's not it.

`abc`.constructor === String

[appsforartists]

I updated the Colab to include an example after #4152 is applied.