Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork4.6k
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
$snippetUse snippets programatically by wrapping them inside another snippet via The ability to compose logic related to the snippet and creating adapters for snippets. IntroductionSnippets are extremely versatile, ergo why they're a strong pattern. However, a caveat is that you can only provide the snippet with props when you're in control of the <scriptlang='ts'>import {chevron }from'Icons.svelte'importButtonfrom'Button.svelte'</script><Button> {#snippeticon()} {@renderchevron({ rotate:90 })} {/snippet} {#snippetchildren()} Some text {/snippet}</Button> That's a lot of extra work to provide these parameters. Today, we can "technically" create snippet adapters via code, however, it's not pretty and messes with Svelte internals. <scriptlang='ts'module>declareconst tooltip: (_internal:CommentNode,text: ()=>string)const createTooltip:Snippet= (text:string)=> {// Additional optional logic here.return (...args)=>tooltip(args[0], ()=>text) }export {createTooltip }</script>{#snippettooltip(text:string)} ...{/snippet}<!---------><scriptlang='ts'>importComponentfrom'./Component.svelte'import {createTooltip,tooltip }from'./Tooltip.svelte'</script><Componentsnippet={createTooltip(`Here's a tooltip!`)}> Hello there</Component> ProposalMy proposal here, is to formalize the process of adapting snippets. <scriptlang='ts'>import {chevron }from'Icons.svelte'importButtonfrom'Button.svelte'</script><Buttonicon={$snippet(()=>chevron({ rotate:90 }))}> Some text</Button> Or by code <scriptlang='ts'module>const createTooltip= (text:string)=>$snippet(()=>tooltip(text))</script>{#snippettooltip(text:string)} ...{/snippet} We could adapt parameters, to fit other ones; <scriptlang='ts'module>// nameDisplay: Snippet<[firstName: string, lastName: string]>importNamefrom'./Name.svelte'// Snippet<[name: string]>import {name }from'./DisplaySnippets.svelte'</script><PersonnameDisplay={$snippet((firstName,lastName)=>name(`${firstName} ${lastName}`))}> This person is magnificant.</Person> And so. Tip Additionally, we could also provide a way to get the $snippet(()=>{constnode=$snippet.node// e.g. the `comment` node snippet representing the snippet ...crawlTree}) as this could be used for tree-crawling Alternatively, we could allow calling Snippet's outside of the {#snippetchevron({...})} ... {/snippet}<Buttonicon={chevron({ rotate:90 })}>Now all said and done, this is clearly a nice-to-have, and just an idea. I do personally think it would fit into the Svelte 5 environment. |
BetaWas this translation helpful?Give feedback.