Closest way to achieve something like querySelector('#a').append(<Component/>)?

[fregante]

I maintain a web extension that needs to inject multiple pieces of DOM across the page rather than a single monolithic <App/>

My code often would look like:

document.querySelector('.title').before(document.createElement('svg'), ' Icon')
document.querySelector('.avatar').prepend(document.createElement('img'))

How could I achieve that in Preact? This is the closest I get, I think:

render(<><svg/> Icon</>, document.querySelector('.title'));
render(<img/>, document.querySelector('.avatar'));

The issue is that render exclusively appends, so how would I go about using .before/.after/.prepend? Must I create a wrapper via document.createElement first?

const title = document.querySelector('.title');
const container = document.createElement('div');
title.before(container);
render(<><svg/> Icon</>, container);

const avatar = document.querySelector('.avatar');
const span = document.createElement('span');
avatar.prepend(span);
render(<img/>, span);

This gets unwieldy fast, especially considering having to deal with the positioning/sizing of the extra wrapper element outside Preact.

---

This is kind of discussed in #1718, but here I'm looking for alternative ways to do this altogether, like via single component + portals. Maybe someone has had the same issue.

[rschristian]

The issue is that render exclusively appends

Not necessarily, you can use the replaceNode argument (third param of render()) to specify what should be replaced:

// DOM tree before render:
// <div id="container">
//   <div>bar</div>
//   <div id="target">foo</div>
// </div>

import { render } from 'preact';

const Foo = () => <div id="target">BAR</div>;

render(
  <Foo />,
  document.getElementById('container'),
  document.getElementById('target')
);

// After render:
// <div id="container">
//   <div>bar</div>
//   <div id="target">BAR</div>
// </div>

Docs

As the docs say though, that's going away in v11, so you may want to use this instead (works with v10+). You'll still need to create the nodes you want to replace, but it gives a bit more control anyways.

[fregante]

That looks great, I hope it can be actually tested and published as a module so one doesn't have to maintain it individually. A comment mentions it's broken in v10.16 for example. It'd be good to have some generic module that has replace/before/prepend/append/after placements, accepting a single argument:

render(<C />, replace(widgetC));
render(<D />, append(sidebar));

[rschristian]

It'd be good to have some generic module that has replace/before/prepend/append/after placements, accepting a single argument:

Could also go the way of a third placement param to a render wrapper:

import { render as pRender } from 'preact';

function render(vnode, node, selector) {
    switch(selector) {
        case 'before':
            const div = document.createElement('div');
            node.before(div);
            pRender(vnode, node.parentNode, div);
            break;
        // ...
    }
}

render(<C />, widgetC, 'before');

Building out whichever selectors you need. Separate functions would be smaller so maybe they're the way to go though.

I suppose this hasn't been built yet (to my knowledge, anyhow) as the most common use cases for (p)react has devs fully in control of their apps -- usually you'd just add a better selector for yourself. Extensions are understandably a bit more limited in that you make do with what you're given.

[fregante]

Considering the niche-ness of this and the small-ness of Preact I would probably not expect this to be in the core, especially since Preact is even already dropping the third parameter.

I'd be happy enough if it was supported via published addon (rather than copy-pastable gist)

[marvinhagemeister]

But if we publish it as a proper addon instead of a gist, then people start relying on it and expect us to spend time maintaining that. Fwiw: I'm using a similar trick in Fresh to render into anything between markers. You could create invisible markers by inserting empty text nodes and do the same thing as in Fresh.

[fregante]

Yes, that's what I'm hoping for 🥹 🙏 especially since it's a relatively compact piece of code that you wrote.

[gpoitch]

Also interested in something more official. The gist works great but the __k is concerning as something that could break.

[rschristian]

__k is part of the plugin API -- it won't ever change outside of a major version.