Creating raw snippets that accept parameters

[mihaipoenaru]

Describe the problem

The createRawSnippet function could reduce a lot of duplicated code in my company's project if it could create snippets that accept parameters.

Example scenario, let's say we have a table with some columns, including sex, employed, isContractor, etc. The point being, lots of boolean columns. Obviously I don't want to display the table component having true and false but rather yes and no

Right now I kind of have to do it like this (because the table component accepts snippets if you want to do special column rendering and transformations)

<script>
let data = ......

const renderers = {
     active: employedYN,
     contractor: contractorYN,
     otherCol: null
}

</script>
{#snippet employedYN(row: EmployeeItem)}
	<p class="text-blue">{row.active ? 'Yes' : 'No'}</p>
{/snippet}

{#snippet contractorYN(row: EmployeeItem)}
	<p class="text-blue">{row.contractor ? 'Yes' : 'No'}</p>
{/snippet}

<MyTable {data} {renderers}/>

The true/false issue is not the only one that repeats, this is just the one that is easiest to make an example with

Describe the proposed solution

I would love it if I could create a raw snippet that accepts a parameter, so my code would be like this:

<script>
let data = ......

function createYNSnippetForKey(key: keyof EmployeeItem): Snippet<[EmployeeItem]> {
		return createRawSnippet(() => {
			return {
				render: (row) => `{${row[key]} ? 'Yes' : 'No'}			`
			};
		});
	}

const renderers = {
     active: createYNSnippetForKey('active'),
     contractor: createYNSnippetForKey('contractor'),
     otherCol: null
}

</script>


<MyTable {data} {renderers}/>

### Importance

would make my life easier

[adiguba]

Hello,

Raw snippets already support parameters, but :

• The parameters are passed to the top function passed to createRawSnippet().
• The parameters are not value but reactive function that return the value.
• You have to use setup() function to handle reactivity.
• You have to return a unique HTML node.

	function createYNSnippetForKey(key: keyof EmployeeItem): Snippet<[EmployeeItem]> {
		return createRawSnippet((row: () => EmployeeItem) => {
			return {
				render: () => `<span>${row()[key] ? 'Yes' : 'No'}</span>`,
				setup: (node) => {
					$effect(() => node.innerText = row()[key] ? 'Yes' : 'No')
				}
			};
		});
	}

Demo : https://svelte.dev/playground/hello-world?version=5.1.2#H4sIAAAAAAAACo1TXWvbMBT9KxetYBtC--447kbpYAz6sD2VOFDFuV5NZclIN-2M0X-fJH_E6bLRPISre885OjqSe1bVAg1Ltz2jrkWWhgZbMckbv_rSttfmFQX53p4bvNQvlSSU5GRYZkpdtwSCy1-bgpEpWF7IguqmVZqgh1IjJ_zB337Kum2RwEKlVQPRoBatHdrhvRm4b1qhOsRvhA1soPeDgnhJ9SumsFdKIJfroes9aDdS-nxiwzhoVkfpqEqOHh4fRgtflf6OXfyCXQruT1VnGycpjLhsu-zv8smQRjpq-dfJ4lirtxTiBDb5uaJvjNyZPa99Rx5QT8ynzLRc5le9U4uTrTO4g1uIHtFEkEL0oCKb3QTI0yRhx0xsMkcgQ0KGoHYGjAtzO0B6mOKsuDC4gmWOoQV29R5K-vhB5AVRT_6Q5gK4Wy-PMOSD2kxvAvxvErp8udEwjpLVTFju9Q_SCbIkKnpGfadECvIoxJywu4Xw9vOwIL4XmPtirw6dK_pPyMvnMX9uQhEeZ0Y6H9LI6JD3n4fjnU55PViPPSFxd-1A_4WfTL-nuMJv1d94J9Y7nsy5Kvh1HzPhb2KpD9_u7B8qwdmQIAQAAA==

Otherwise, I don't known how your MyTable component works, but it may be simplier to use toString() function...

[mihaipoenaru]

Wow, yup, it definitely works, just tested, thanks @adiguba. I'll close this issue but I definitely did not see anything like this in the docs. There was only the signature which didn't make clear what exactly was supposed to go where. It's obvious now, looking at it, but a couple of examples would go a long way in this chapter: https://svelte.dev/docs/svelte/snippet#Programmatic-snippets

[brunnerh]

This could probably be re-opened as a documentation issue.

[mihaipoenaru]

Or create a separate issue and reference to this, either way I'll leave it up to you, I'm just happy my +page.svelte files look a lot less cluttered now.

[duncanelliot]

Any idea how you would render a Lucide icon using createRawSnippet? The docs dont make it clear.

[temich]

setup: (node) => {
$effect(() => node.innerText = row()[key] ? 'Yes' : 'No')
}

how to implement this outside of .svelte files?
thank you

[brunnerh]

https://svelte.dev/docs/svelte/svelte-js-files