Integrating Libraries with Actions

There are a lot of JavaScript UI libraries out there on the internet. However, at the time of writing this book, Svelte is relatively new. Not all the UI libraries out there are written using Svelte and written specifically for Svelte. But that does not mean that we can’t use them in our Svelte component.

There are many ways to integrate third-party JavaScript UI libraries into Svelte. In this chapter, we are going to explore how we can do it using Svelte actions.

We will start by integrating an imaginary UI library, slowly building up our case for why Svelte actions are suitable for the job. Along the way, I will explain how to use Svelte actions for different scenarios and show you where Svelte actions fall short. I’ll discuss my reasonings and personal opinions on when to choose Svelte actions and when to choose otherwise.

Following that, I will show you some real-world UI library examples. After that, we will explore integrating...

Technical requirements

You can find the examples and code for this chapter here: https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter06.

Integrating vanilla JavaScript UI libraries into Svelte

First, we will explore UI libraries that are written in vanilla JavaScript. When we use the phrase vanilla JavaScript, we’re referring to plain JavaScript, or JavaScript in the absence of frameworks or libraries.

There are many reasons a UI library is written in vanilla JavaScript:

• Performance reasons – it would be much easier to optimize without the abstractions from the web framework
• The library author’s personal preference to be framework-agnostic
• The library was created predating any modern web frameworks

For us, vanilla JavaScript UI libraries are great because they do not depend on any specific framework runtime, which is an extra overhead on top of the UI library itself.

For example, if we use a calendar component library that is implemented in React, then besides installing the calendar component library, we would need to install React’s framework as well.

This...

Example – integrating Tippy.js

Tippy.js is a tooltip, popover, dropdown, and menu library.

I do not have any affiliation with the Tippy.js library, and the reason I chose Tippy.js as an example is purely by chance. Nonetheless, Tippy.js has a nice and simple API, making it a good candidate for an example.

First, let’s look at the Tippy.js documentation: https://atomiks.github.io/tippyjs/.

After installing the tippy.js library using a package manager of our choice, we can then import Tippy.js into our code:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

Now, we can initialize tippy with the following constructor function:

tippy('#id');
tippy(document.getElementById('my-element'));

Here, we pass in the element where Tippy.js should provide a tooltip.

You can specify any customizations of the tooltip's content through the data attributes of the element, which Tippy.js will pick up as it initializes...

Example – integrating CodeMirror

CodeMirror is a code editor component that has many great features for editing, such as syntax highlighting, code folding, and more.

You can find the CodeMirror documentation at https://codemirror.net/.

At the time of writing, CodeMirror is currently at version 5.65.9.

After installing the codemirror library using the package manager of our choice, we can import codemirror into our code:

import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';

Now, we can initialize CodeMirror with the following constructor function:

const myCodeMirror = CodeMirror(document.body);

Here, we pass in the element where we want the CodeMirror code editor to be.

Before I continue, at this point, note that we are looking for the same set of things from CodeMirror:

• Methods to initialize CodeMirror
• Any method needed to clean up a CodeMirror instance
• Any method to update a CodeMirror instance...

Using UI libraries written in other frameworks

It is not impossible to use components from other frameworks in Svelte.

However, doing so will introduce the framework’s runtime and other overheads that come along with the framework. The runtime usually includes code to handle reactivity and normalize browser APIs and events. Each framework usually ships its own code for this logic and does not share it with other frameworks. The runtime for React version 18.2.0 weighs 6.4 kB when minified, which is additional code you need to include when you want to use a React component within Svelte.

So, this is not recommended unless it is necessary.

The reason this section has been included in this book is more for educational purposes and to demonstrate that this is possible, as well as what needs to be done to make it happen.

Creating components in various frameworks

Each framework usually provides an API that takes in a container element and the framework component as the...

Integrating react-calendar into Svelte

The react-calendar library is a calendar component library written in React.

You can read more about it here: https://projects.wojtekmaj.pl/react-calendar/.

The react-calendar library takes in various props for customization purposes. But for demonstration purposes, we are only going to focus on two props, value and onChange, which allow us to control the selected date of the library.

We pass the selected date through a prop named value. The onChange prop, on the other hand, is used to pass in an event handler that will be called when the value changes from within the calendar component. We saw how we could handle event handlers in a UI library in the previous section when we discussed CodeMirror.

So, here is what I think using the calendar action would look like:

<div
  use:calendar={selectedDate}
  on:change={(event) => selectedDate = event.detail}
/>

Here, event.detail is the data attached to the...

Summary

In this chapter, we learned how to use actions to integrate UI libraries, either written in vanilla JavaScript or any other frameworks into Svelte. We went through two real-world examples – integrating Tippy.js and react-calendar into Svelte using Svelte actions. In both examples, we went through a step-by-step process of writing out a Svelte action. We started by creating the structure of a Svelte action and then filled up the steps within the action for when the Svelte action is initialized as the element is created, when the data changes, and when the element is removed from the DOM. We also discussed why we choose to use Svelte actions, as well as the other alternatives and considerations when it comes to integrating UI libraries.

In the next chapter, we will look at the next common pattern of actions, which is to progressively enhance your elements.