Render children but without {@render children}

[NaviTheCoderboi]

Describe the problem

I am trying to implement react-spectrum's collections for svelte , I know that react is very different from svelte , but I am doing it my own way , I want to build up a collection(a list of items) from the children Snippet passed to a component , but I need to wait for it to be rendered and use dom APIs , but I want to build it beforehand if it's SSR, like get content of a children snippet in format of a string and a utility to transform it to a Dom tree/element. It would be useful for my usecase , and open up more usecase for it.

Describe the proposed solution

Svelte can allow users to render children the script , like a utility for it , something like ,

<script>
  const content = $render(children)
</script>

It can be a function/rune type from svelte. It can return a rendered string of the children , and svelte can either provide some utility to parse it to a Dom tree or leave it to user to handle it. And lator user can render it in template using {@html content}

If it it not possible, please let me know why , and a alternate solution to it.

Importance

nice to have

[seantiz]

I have no experience with react-spectrum so I may be off base with what you're looking for, but in terms of processing/formatting code and then injecting it as HTML, it sounds like writing a Rollup preprocessing plugin would be the fastest solution.

You could probably take inspiration from rollup-plugin-bundle-html and there are more Rollup plugins listed here.

[NaviTheCoderboi]

I have no experience with react-spectrum so I may be off base with what you're looking for, but in terms of processing/formatting code and then injecting it as HTML, it sounds like writing a Rollup preprocessing plugin would be the fastest solution.

You could probably take inspiration from rollup-plugin-bundle-html and there are more Rollup plugins listed here.

I not mean to format , I want a feature of svelte to render a snippet to string , that we then modify and render , i guess rollup plugin can't do that thing

[Ocean-OS]

Describe the proposed solution

Svelte can allow users to render children the script , like a utility for it , something like ,

<script>
  const content = $render(children)
</script>

It can be a function/rune type from svelte. It can return a rendered string of the children , and svelte can either provide some utility to parse it to a Dom tree or leave it to user to handle it. And lator user can render it in template using {@html content}

I could see this being a possible export from the svelte module (not everything needs to be a rune if it doesn't have to be).
However, reactivity in the snippet (interpolations, logic blocks, etc) would be lost, so at best you'd get a snapshot of the HTML the snippet first renders.
If you need a temporary solution, you could try using something like this:

function renderSnippet(snippet) {
    let target = document.createElement('span');
    let anchor = document.createComment('');
    target.appendChild(anchor);
    snippet(anchor);
    anchor.remove();
    return target.innerHTML; 
} 

This does make use of internal functionality, so I wouldn't recommend this in a production application. Additionally, this doesn't account for snippet arguments, but this could be implemented if necessary.
I could see this being a rune if it preserved the reactivity of the snippet, but I don't know how useful that would be to most people.

[david-plugge]

That still does not work on the server.
You can try using the render method which prints the HTML for a given svelte component. You can render a wrapping component and pass in the snippet. Havent tried that but i assume that would work

[NaviTheCoderboi]

Describe the proposed solution

Svelte can allow users to render children the script , like a utility for it , something like ,

<script>
  const content = $render(children)
</script>

It can be a function/rune type from svelte. It can return a rendered string of the children , and svelte can either provide some utility to parse it to a Dom tree or leave it to user to handle it. And lator user can render it in template using {@html content}

I could see this being a possible export from the svelte module (not everything needs to be a rune if it doesn't have to be). However, reactivity in the snippet (interpolations, logic blocks, etc) would be lost, so at best you'd get a snapshot of the HTML the snippet first renders. If you need a temporary solution, you could try using something like this:

function renderSnippet(snippet) {
    let target = document.createElement('span');
    let anchor = document.createComment('');
    target.appendChild(anchor);
    snippet(anchor);
    anchor.remove();
    return target.innerHTML; 
} 

This does make use of internal functionality, so I wouldn't recommend this in a production application. Additionally, this doesn't account for snippet arguments, but this could be implemented if necessary. I could see this being a rune if it preserved the reactivity of the snippet, but I don't know how useful that would be to most people.

I didn't mean it to be rune , I just gave an example, i think your example is good ,i can create a fake dom server to render snippet i guess

[shenshouer]

When I want to use React components in Svelte 5, I encounter the same problem.