{"id":3341,"date":"2024-08-07T08:03:50","date_gmt":"2024-08-07T13:03:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3341"},"modified":"2024-08-11T17:15:25","modified_gmt":"2024-08-11T22:15:25","slug":"snippets-in-svelte-5","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/snippets-in-svelte-5\/","title":{"rendered":"Snippets in Svelte 5"},"content":{"rendered":"\n

This post is the second in a 3-part series on Svelte 5. Part one<\/a> was a basic introduction, covering nuts and bolts features like state, props, and effects. This post is all about snippets, an exciting new feature that allows for content reuse, and more importantly, injecting content into components you render.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Introducing Svelte 5<\/a>\n <\/li>\n
  2. \n Snippets in Svelte 5<\/a>\n <\/li>\n
  3. \n Fine-Grained Reactivity in Svelte 5<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    If you’d like to see and experiment with the code in this post, see the GitHub repo<\/a>.<\/p>\n\n\n\n

    What are snippets?<\/h2>\n\n\n\n

    Snippets are a new feature in Svelte 5. They allow you to define, well… snippets of content. They’re almost<\/em> lightweight components that you can find inside of a component file. Before you get too excited: they do not, as of now, allow you to define multiple components in one file. Snippets cannot be exported from anywhere, and even if they could, they do not allow you to define state. They are limited to props.<\/p>\n\n\n\n

    They seem initially similar to React’s minimally useful Stateless Functional Components from back before hooks were a thing. But snippets also have a second use: they allow you to inject content into other components, and in so doing replace one of Svelte’s most awkward features: slots.<\/p>\n\n\n\n

    Let’s see how.<\/p>\n\n\n\n

    Defining snippets<\/h2>\n\n\n\n

    We define snippets with the #snippet<\/code> directive. The simplest snippet imaginable looks like this:<\/p>\n\n\n

    {#snippet helloWorld()}\n  <span<\/span>><\/span>Hello World<\/span<\/span>><\/span>\n{\/snippet}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    That defines the snippet. To render the snippet, we use the @render<\/code> directive, like this:<\/p>\n\n\n
    {@render helloWorld()}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    As you might have guessed, snippets can also receive props, or really, parameters, since snippets are more of a function, than a component. Parameters are listed in the parens, with types if you’re using TypeScript.<\/p>\n\n\n
    {#snippet productDisplay(p: Product)}\n<div<\/span>><\/span>\n  <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"product url\"<\/span> \/><\/span>\n  <div<\/span>><\/span>\n    <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n    <span<\/span>><\/span>${p.price.toFixed(2)}<\/span<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Snippets can render other snippets<\/h3>\n\n\n\n
    For example, this simple snippet…<\/p>\n\n\n
    {#snippet productReview(review: Review)}\n<div<\/span>><\/span>\n  <span<\/span>><\/span>{review.date}<\/span<\/span>><\/span>\n  <span<\/span>><\/span>{review.content}<\/span<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    … can be used in this bigger snippet:<\/p>\n\n\n
    {#snippet productDisplay(p: Product)}\n<div<\/span>><\/span>\n  <div<\/span>><\/span>\n    <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"product url\"<\/span>><\/span>\n    <div<\/span>><\/span>\n      <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n      <span<\/span>><\/span>${p.price.toFixed(2)}<\/span<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <h3<\/span>><\/span>Reviews:<\/h3<\/span>><\/span>\n  <div<\/span>><\/span>\n    {#each p.reviews ?? [] as review}\n      {@render productReview(review)}\n    {\/each}\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then you can reuse that productDisplay<\/code> snippet with different products in your component. Let’s see a minimal, full example:<\/p>\n\n\n
    <script<\/span> lang<\/span>=\"ts\"<\/span>><\/span>\n  type Review = {\n    date<\/span>: string;\n    content: string;\n  };\n  type Product = {\n    name<\/span>: string;\n    url: string;\n    price: number;\n    reviews?: Review[];\n  };\n\n  let<\/span> searchedBook = $state<Product>({\n    name<\/span>: \"Effective TypeScript: 83 Specific Ways to Improve Your TypeScript, 2nd Edition\"<\/span>,\n    url<\/span>: \"https:\/\/m.media-amazon.com\/images\/I\/71eWL4AqPqL._SL1500_.jpg\"<\/span>,\n    price<\/span>: 44.99<\/span>,\n    reviews<\/span>: [\n      { date<\/span>: \"2\/14\/2024\"<\/span>, content<\/span>: \"Absolutely loved this book\"<\/span> },\n      { date<\/span>: \"6\/2\/2024\"<\/span>, content<\/span>: \"Even better than the first edition\"<\/span> },\n    ],\n  });\n  let<\/span> relatedProduct = $state<Product>({\n    name<\/span>: \"Modern C++ Design: Generic Programming and Design Patterns Applied\"<\/span>,\n    url<\/span>: \"https:\/\/m.media-amazon.com\/images\/I\/914ncVx1hxL._SL1413_.jpg\"<\/span>,\n    price<\/span>: 55.49<\/span>,\n  });\n<\/span><\/script<\/span>><\/span>\n\n{#snippet productReview(review: Review)}\n<div<\/span>><\/span>\n  <span<\/span>><\/span>{review.date}<\/span<\/span>><\/span>\n  <span<\/span>><\/span>{review.content}<\/span<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}\n\n{#snippet productDisplay(p: Product)}\n<div<\/span>><\/span>\n  <div<\/span>><\/span>\n    <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"product url\"<\/span> \/><\/span>\n    <div<\/span>><\/span>\n      <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n      <span<\/span>><\/span>${p.price.toFixed(2)}<\/span<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  <h3<\/span>><\/span>Reviews:<\/h3<\/span>><\/span>\n  <div<\/span>><\/span>{#each p.reviews ?? [] as review} {@render productReview(review)} {\/each}<\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}\n\n<section<\/span>><\/span>\n  <h1<\/span>><\/span>Product Display Page<\/h1<\/span>><\/span>\n\n  {@render productDisplay(searchedBook)}\n\n  <aside<\/span>><\/span>You might also be interested in:<\/aside<\/span>><\/span>\n\n  {@render productDisplay(relatedProduct)}\n<\/section<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    If that was the extent of Snippets they’d be a marginally useful convenience for re-using small bits of markup within a single component.<\/p>\n\n\n\n
    But the main benefit of snippets is for injecting content into components<\/strong>. Previously, if you wanted to pass content into a component you’d use slots. Slots were always an awkward feature of Svelte, but they’re now deprecated in Svelte 5. We won’t cover them here, so check out the docs<\/a> if you’re curious.<\/p>\n\n\n\n
    Passing snippets to components<\/h2>\n\n\n\n
    Snippets shine brightest when we pass them into other components. Let’s imagine a (grossly simplified) DisplayProduct<\/code> page. It takes in a product, an optional related product, and a snippet to display a single product. This component will also render content in the header, which we’ll also pass in as a snippet.<\/p>\n\n\n
    <script<\/span> lang<\/span>=\"ts\"<\/span>><\/span>\n  import<\/span> type { Snippet } from<\/span> \"svelte\"<\/span>;\n  import<\/span> type { Product } from<\/span> \".\/types\"<\/span>;\n\n  type Props = {\n    product<\/span>: Product;\n    relatedProduct?: Product;\n    productDisplay: Snippet<[Product]>;\n    children: Snippet;\n  };\n\n  let<\/span> { product, relatedProduct, productDisplay, children }: Props = $props();\n<\/span><\/script<\/span>><\/span>\n\n<section<\/span>><\/span>\n  {@render children()}\n  {@render productDisplay(product)}\n  \n  {#if relatedProduct}\n    <aside<\/span>><\/span>You might also be interested in:<\/aside<\/span>><\/span>\n    {@render productDisplay(relatedProduct)}\n  {\/if}\n<\/section<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    There’s a Snippet<\/code> type that Svelte exports for us, so we can type the snippets we’re receiving. Specifying the parameters that a snippet receives is a little weird, because of how TypeScript is: we list the argumentes as a Tuple. So our productDisplay<\/code> snippet will take a single argument that’s a Product<\/code>.<\/p>\n\n\n\n
    The snippet for showing the header I decided to name “children” which has some significance as we’ll see in a moment.<\/p>\n\n\n\n
    Let’s put this component to use:<\/p>\n\n\n
    {#snippet productDisplay(p: Product)}\n<div<\/span>><\/span>\n  <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"Image of product\"<\/span>><\/span>\n  <div<\/span>><\/span>\n    <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n    <span<\/span>><\/span>${p.price.toFixed(2)}<\/span<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}\n\n<DisplayProduct<\/span> product<\/span>=\"{searchedBook}\"<\/span> relatedProduct<\/span>=\"{recommendedBook}\"<\/span> {productDisplay<\/span>}><\/span>\n  <h1<\/span>><\/span>Product Display Page<\/h1<\/span>><\/span>\n<\/DisplayProduct<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    We’re passing the productDisplay<\/code> snippet in for the productDisplay<\/code> prop. Little note: Svelte allows you to write {a}<\/code> instead of a={a}<\/code> as a convenient shortcut.<\/p>\n\n\n\n
    But notice the content we put directly inside of the DisplayProduct<\/code> tags. If the component has a prop called children<\/code> that’s a snippet, this content will be passed as that snippet. This is a special case just for props called children (similar to the children prop in React). You don’t have<\/em> to do this; you’re free to manually pass a children<\/code> prop, just like we did for productDisplay<\/code> if you really want to.<\/p>\n\n\n\n
    Let’s take a look at one more authoring convenience Svelte 5 gives us. If we’re just defining a snippet to be passed one time, to one component, Svelte lets us clean the syntax up a bit, like so:<\/p>\n\n\n
    <DisplayProduct<\/span> product<\/span>=\"{searchedBook}\"<\/span> relatedProduct<\/span>=\"{recommendedBook}\"<\/span>><\/span>\n  <h1<\/span>><\/span>Product Display Page<\/h1<\/span>><\/span>\n  {#snippet productDisplay(p: Product)}\n  <div<\/span>><\/span>\n    <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"product url\"<\/span> \/><\/span>\n    <div<\/span>><\/span>\n      <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n      <span<\/span>><\/span>${p.price.toFixed(2)}<\/span<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n  {\/snippet}\n<\/DisplayProduct<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    As before, we have our <h1><\/code> content directly inside of the tags, as children. But we’ve also defined a snippet inside of those tags. This is a nice shorthand for passing a snippet as a prop (with the same name) to our component. Don’t worry, if the name you give this inline snippet doesn’t match a prop, TypeScript will tell you.<\/p>\n\n\n\n
    Default Content with Snippets<\/h2>\n\n\n\n
    One nice feature with slots is that you could define default content pretty easily.<\/p>\n\n\n
    <slot<\/span> name<\/span>=\"header-content\"<\/span>><\/span>\n  <span<\/span>><\/span>Default content<\/span<\/span>><\/span>\n<\/slot<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Snippets don’t quite have anything like this built in, but they’re a flexible enough primitive that you really don’t need it.<\/p>\n\n\n\n
    Let’s see how we can provide our own default content for when a Snippet is not<\/em> passed in. As before let’s say we have our DisplayProduct<\/code> component, except now our productDisplay<\/code> and children<\/code> snippets are optional<\/p>\n\n\n
    type Props = {\n  product: Product;\n  relatedProduct?: Product;\n  productDisplay?: Snippet<[Product]<\/span>><\/span>;\n  children?: Snippet;\n};\n\nlet { product, relatedProduct, productDisplay, children }: Props = $props();<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    We have a few straightforward options for falling back to our own default content. We can simply test if we have a value for the snippet right in our template, and render the fallback if not.<\/p>\n\n\n
    {#if children}\n  {@render children()} \n{:else}\n  <h1<\/span>><\/span>Fallback content<\/h1<\/span>><\/span>\n{\/if}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Or, we can set up our fallback right in our script:<\/p>\n\n\n
    let<\/span> productDisplaySnippetToUse: Snippet<[Product]> = productDisplay ?? productDisplayFallback;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
    {#snippet productDisplayFallback(p: Product)}\n<div<\/span>><\/span>\n  <img<\/span> src<\/span>=\"{p.url}\"<\/span> alt<\/span>=\"product url\"<\/span> \/><\/span>\n  <div<\/span>><\/span>\n    <h2<\/span>><\/span>{p.name}<\/h2<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n{\/snippet}<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then we render that:<\/p>\n\n\n
    {@render productDisplaySnippetToUse(product)}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Parting thoughts<\/h2>\n\n\n\n
    Svelte 5 is an exciting release. This post turned to one of the more interesting new features: snippets, useful for injecting content into components, and for re-using small bits of content within a single component.<\/p>\n\n\n\n
    Out with slots, in with snippets.<\/p>\n\n\n
    \n  
    \n    
    Article Series<\/h3>\n  <\/header>\n  
    \n            
      \n                      
    1. \n              Introducing Svelte 5<\/a>\n            <\/li>\n                      
    2. \n              Snippets in Svelte 5<\/a>\n            <\/li>\n                      
    3. \n              Fine-Grained Reactivity in Svelte 5<\/a>\n            <\/li>\n                  <\/ol>\n        <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
      Out with slots, in with snippets.<\/p>\n","protected":false},"author":21,"featured_media":3091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[161],"class_list":["post-3341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-svelte"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-18-at-3.03.18%E2%80%AFPM.png?fit=1890%2C1122&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3341"}],"version-history":[{"count":16,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3341\/revisions"}],"predecessor-version":[{"id":3443,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3341\/revisions\/3443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3091"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}