[mount] Svelte 5, create .svelte component **with content** from JS (programatically)

[Neah-Ko]

Hello,

Recent svelte adopter (and so far mostly enjoyer), I'm trying to find a way to create svelte components from javascript code.

Note that I'm using it in SPA mode, so I do not have access to render()

The feature I'm trying to achieve, is on some user action (in this case a large file upload) create a card displaying progress

Here a very simple case using pure html:

<script lang="ts">
   function btnClick(){
       let card = document.createElement('div');
       let cardcontent = document.createElement('p');
       cardcontent.innerText = "Pending Action ...";
       card.appendChild(cardcontent);      
       let cardbar = document.getElementById("mycards")!;
       cardbar.appendChild(card);   
  }
</script>


<button type"button" onclick={btnClick()}>
click me
</button>

<div id="mycards"></div>

In my case I'm using flowbite-svelte, so the idea would be to create a svelte component. Which doesn't work with document.createElement

Browsing the docs, using mount seem to be the most up to date syntax

import { Card } from 'flowbite-svelte';

function btnClick(){
   let cardbar = document.getElementById("mycards")!;
   let new_card = mount(Card, {target: cardbar});
}

It works for the card, but now it's not obvious to me how to set the content, I've tried a few things

Idea 1:

I thought about using mount all the way down. however it only accepts svelte components as input so elements created with document.createElement wont work here

Idea 2:

Given my understanding on how svelte works. The content is actually a snippet labelled children from the component point of view, so If I create a snippet from js and pass it as children prop I should be able to set the content of that component. Moreover there exist a createRawSnippet function

function btnClick(){
   let cardbar = document.getElementById("mycards")!;
    const content = `<p>Pending Action ...</p>`
    const cardcontent = createRawSnippet(() => {
        return {
            render: () => content,
            setup: (node) => {
                $effect(() => {
                  node.textContent = content;
                });
             }
        }}
    );

    let new_card = mount(Card, {
        target: cardbar,
        props: {
            class: "action-card",
            children: cardcontent,
        },
    })
}

Which appears to be correct for my JS linters, but does not display the content inside the card. I'm not sure this setup argument should be set for static content but I've also tried for good measure.

Idea 3 (aka 0'):

That card is just a div with a few tailwind classes behind the hood so I'm going to go with a pure JS approach for time being however next time I'm encountering the use case I would like to know if there exist a way to achieve this with svelte primitives.

Best,

[brunnerh]

It depends on what the content is and where it is supposed to come from. You can e.g. reference snippets defined in the markup and snippets that don't use local state can also be exported from the module script. That may be easier than working with createRawSnippet which is not really meant for general use.

One can also import components and pass those as props & add them in the receiving component's markup.

Regarding the approach using createRawSnippet, that works if the Card actually renders children.
If that is not the case, the library may still be using <slot />.
You could create a wrapper component as a workaround (so you have <Card {...rest}>{@render children()}</Card>).

Though if you create a wrapper, you could also add an element inside the card and expose that; this way you can add DOM elements directly to the component.
Example:

<!-- CardWrapper.svelte -->
<script>
	import Card from './Card.svelte';

	const { ...rest } = $props();

	let contents;

	export { contents }
</script>

<Card {...rest}>
	<div bind:this={contents}></div>
</Card>

<script>
	import { mount } from 'svelte';
	import CardWrapper from './CardWrapper.svelte';

	let cards;

	async function btnClick() {
		const content = document.createElement('p');
		content.textContent = 'Pending Action...';
	
		const card = await mount(CardWrapper, {
			target: cards,
			props: { class: "action-card" },
		});
		card.contents.append(content);
	}
</script>

<button onclick={btnClick}>Add</button>
<div bind:this={cards} ></div>

[Neah-Ko]

Oh I see, that's a bit convoluted but certainly not as bad as working with createRawSnippet indeed.

Thanks a lot for the pattern, I'll be using it !

[Neah-Ko]

So I'm actually testing this today and while this works in the playground, I'm getting errors when putting it in practice in my local dev environment.

While using svelte 5.1.16, this was causing errors when using mount.

I've upgraded to the latest version, but now getting that contents is undefined.

The first pattern where CardWrapper is rendering children in conjunction with createRawSnippet did worked, but allow for less flexible editing.

[brunnerh]

Did you actually await the mount?

[Neah-Ko]

Oh, no that must've been my mistake. I did not see that mount is async.

This still gave me inspiration, and instead of going for a generic Card wrapper I went for a specialized one, with fixed content and exposing the progress of file upload instead which works neatly:

<!-- UploadCard.svelte -->
<script>
    import { Card, Progressbar } from 'flowbite-svelte';

    let {progress, filename, ...rest } = $props();
    export {progress};
</script>

<Card {...rest}>
    <h5>Upload -- {filename}</h5>
    <Progressbar bind:progress/>
</Card>

Then later:

let up_card = mount(UploadCard, {
                    target: action_bar!,
                    props: {
                        class: "action-card w-fit",
                        filename: ...,
                        progress: "0"
                  }
 }

// up_card.progress can be edited from "0" to "100" during large file upload
...

Thanks for your help !