Renderless Components

A renderless component is an advanced concept in Svelte that allows developers to create reusable components without rendering any HTML elements within the component itself.

This technique is particularly useful when leveraging Svelte to render on a canvas or in a 3D context, where the rendering of an HTML template by Svelte is not required. Instead, the canvas and Web Graphics Library (WebGL) offer an imperative API to produce graphics on the canvas. With the renderless component technique, it becomes possible to design components that enable users to describe the canvas declaratively, allowing the component to translate it into imperative instructions.

Another use case for a renderless component is to create components that only manage states and behaviors, leaving the parent component control over what should actually be rendered. This will come in handy when developing a component library and you want to make it easy for users to customize how your component...

Technical requirements

You can find the code used in this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter11.

What are renderless components?

A renderless component, as its name implies, is a type of component that does not render any HTML elements of its own.

You might wonder, what’s the purpose of a component that doesn’t render anything?

Well, despite not rendering HTML, there are still several useful things that a component can do, including the following:

• Accepting props, processing their values, and triggering side effects as their values change: Even though the prop values are not used directly in the template, they are still reactive. You can write reactive statements with props in the component and have them run whenever the prop values change. You can see this in the following example code snippet:

  <script>
    export let title;
    export let description;
    $: document.title = `${title} - ${description}`;
  </script>

  Even though the title and description props are not used in the template, both title and description are...

Exploring reusable renderless components

The first use case for renderless components involves creating components that solely focus on the logic of the component. These components are not your typical ones, such as buttons or text inputs. Instead, think of components with slightly complex logic, such as carousels, tabs, or drop-down menus. Although the logic of a carousel component is relatively standard, its appearance can vary significantly based on where and how it is used.

So, how can we create a reusable carousel component that can look different based on where it is used?

One solution is to create a carousel component that only contains the carousel logic, without any specific styling or HTML structure. Then, the consumer of the component can decide how the carousel should look by passing in their own styling and HTML structure. This allows for greater flexibility and customization, making the component more versatile and reusable in different contexts.

For example...

Turning a declarative description into imperative instructions

The second use case for a renderless component involves allowing users to describe their needs declaratively and then translating them into imperative instructions.

A good example of this use case is when working with a canvas or WebGL.

For example, in a canvas, to create a red rectangle with a green border, you would need to use imperative APIs to create and style the rectangle:

ctx.fillStyle = 'red';
ctx.strokeStyle = 'green';
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.fill();

Step by step, we instruct the canvas context to set fillStyle and strokeStyle and then draw a rectangle, based on the fill color and stroke color set.

When interacting with the canvas in an imperative manner, the code focuses on how to do things rather than what to do. This can result in code that is difficult to read and maintain, with a lot of low-level details that can make it hard to see the bigger picture...

Summary

Throughout this chapter, we have delved into the concept of renderless components in Svelte and explored their various use cases. Understanding renderless components equips you with a new toolset to create reusable components. A renderless component emphasizes reusability by focusing on the core logic, state, and behavior, leaving the visual presentation flexible for customization.

By using slot props, we demonstrated how to build a renderless component that is reusable and gives users control over its appearance, while maintaining the component logic and transforming imperative operations into declarative Svelte components.

We also presented practical examples of transforming imperative operations into declarative Svelte components. We demonstrated how to create <Canvas> and <Rectangle> components that draw a rectangle on a canvas, which can change in size dynamically.

In the next chapter, we will explore how Svelte stores and animations can be combined...