📄 Page
1
Developing Web Components with Svelte Building a Library of Reusable UI Components — Second Edition — Alex Libby
📄 Page
2
Developing Web Components with Svelte Building a Library of Reusable UI Components Second Edition Alex Libby
📄 Page
3
Developing Web Components with Svelte: Building a Library of Reusable UI Components, Second Edition ISBN-13 (pbk): 979-8-8688-1179-1 ISBN-13 (electronic): 979-8-8688-1180-7 https://doi.org/10.1007/979-8-8688-1180-7 Copyright © 2025 by Alex Libby This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: James Robinson-Prior Development Editor: James Markham Coordinating Editor: Gryffin Winkler Cover designed by eStudioCalamar Cover image by Freepik.com Distributed to the book trade worldwide by Apress Media, LLC, 1 New York Plaza, New York, NY 10004, U.S.A. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail booktranslations@springernature.com; for reprint, paperback, or audio rights, please e-mail bookpermissions@springernature.com. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub (https://github.com/Apress). For more detailed information, please visit https://www.apress.com/gp/services/source-code. If disposing of this product, please recycle the paper Alex Libby Belper, Derbyshire, UK
📄 Page
4
This is dedicated to my family, with thanks for their love and support while writing this book.
📄 Page
5
v About the Author �������������������������������������������������������������������������������xiii About the Technical Reviewer ������������������������������������������������������������xv Acknowledgments ����������������������������������������������������������������������������xvii Introduction ���������������������������������������������������������������������������������������xix Changes in This Edition ���������������������������������������������������������������������xxi Chapter 1: Getting Started ��������������������������������������������������������������������1 What Are Web Components? ���������������������������������������������������������������������������������2 Taking First Steps �������������������������������������������������������������������������������������������������4 Breaking Apart the Code ����������������������������������������������������������������������������������6 Background to the Project ������������������������������������������������������������������������������������8 Our Approach and Strategy �����������������������������������������������������������������������������������9 Determining Our Needs ���������������������������������������������������������������������������������������11 Setting Up the Project �����������������������������������������������������������������������������������������12 Understanding What Happened ���������������������������������������������������������������������15 Integrating a Playground �������������������������������������������������������������������������������������15 Understanding What Happened ���������������������������������������������������������������������18 Summary�������������������������������������������������������������������������������������������������������������19 Chapter 2: Creating Basic Components ����������������������������������������������21 Creating the Input Component ����������������������������������������������������������������������������22 Breaking the Code Apart ��������������������������������������������������������������������������������24 Hooking the Component into Storybook ��������������������������������������������������������26 Table of Contents
📄 Page
6
vi Understanding What Happened ���������������������������������������������������������������������29 Adding Variants����������������������������������������������������������������������������������������������30 Building a Checkbox Component ������������������������������������������������������������������������34 Exploring the Code Changes ��������������������������������������������������������������������������38 Adding Variations in Storybook ����������������������������������������������������������������������39 Breaking the Code Apart ��������������������������������������������������������������������������������42 Adding a RadioButton Component ����������������������������������������������������������������������44 Exploring the Changes Made �������������������������������������������������������������������������50 Constructing the Slider Component ��������������������������������������������������������������������51 Adding the Component to Storybook �������������������������������������������������������������56 Exploring the Code ����������������������������������������������������������������������������������������59 Summary�������������������������������������������������������������������������������������������������������������59 Chapter 3: Building Action Components ���������������������������������������������61 Creating the SelectBox Component ��������������������������������������������������������������������61 Understanding What Happened ���������������������������������������������������������������������64 Adding the Component to Storybook �������������������������������������������������������������65 Exploring the Code in Detail ��������������������������������������������������������������������������70 Creating the Spinner Component ������������������������������������������������������������������������72 Understanding What Happened ���������������������������������������������������������������������75 Adding the Component to Storybook �������������������������������������������������������������76 Breaking Apart the Code ��������������������������������������������������������������������������������79 Creating Variants �������������������������������������������������������������������������������������������80 Creating the Accordion Component ��������������������������������������������������������������������85 Understanding What Happened ���������������������������������������������������������������������90 Adding the Component to Storybook �������������������������������������������������������������91 Reviewing the Code ���������������������������������������������������������������������������������������95 Summary�������������������������������������������������������������������������������������������������������������95 Table of ConTenTs
📄 Page
7
vii Chapter 4: Building Navigation Components ��������������������������������������97 Creating the Breadcrumbs Component ���������������������������������������������������������������98 Understanding What Happened �������������������������������������������������������������������102 Adding the Component to Storybook �����������������������������������������������������������103 Exploring the Code in Detail ������������������������������������������������������������������������107 Building a Chip Component �������������������������������������������������������������������������������108 Exploring the Code Changes ������������������������������������������������������������������������112 Hooking the Component into Storybook ������������������������������������������������������113 Building Two Variants ����������������������������������������������������������������������������������117 Constructing the Tabs Component ��������������������������������������������������������������������120 Exploring the Code Changes ������������������������������������������������������������������������123 Hooking the Component into Storybook ������������������������������������������������������124 Creating a Variant ����������������������������������������������������������������������������������������127 Summary�����������������������������������������������������������������������������������������������������������131 Chapter 5: Creating Notification Components ����������������������������������133 Creating the Alert Component ���������������������������������������������������������������������������133 Sourcing the Icons ���������������������������������������������������������������������������������������134 Building the Component ������������������������������������������������������������������������������135 Adding the Component to Storybook �����������������������������������������������������������142 Creating a Variant ����������������������������������������������������������������������������������������145 Creating the Dialog Component ������������������������������������������������������������������������150 Understanding What Happened �������������������������������������������������������������������154 Adding to Storybook ������������������������������������������������������������������������������������155 Creating Variants �����������������������������������������������������������������������������������������157 Creating the Tooltip Component ������������������������������������������������������������������������162 Understanding What Happened �������������������������������������������������������������������167 Adding the Component to Storybook �����������������������������������������������������������168 Table of ConTenTs
📄 Page
8
viii Exploring the Code Changes ������������������������������������������������������������������������170 Creating a Variant ����������������������������������������������������������������������������������������171 Summary�����������������������������������������������������������������������������������������������������������173 Chapter 6: Creating Grid Components ����������������������������������������������175 Determining the Approach ��������������������������������������������������������������������������������175 Building the Table Component ��������������������������������������������������������������������������176 Understanding What Happened �������������������������������������������������������������������178 Creating the Grid Component ����������������������������������������������������������������������������179 Breaking Apart the Code ������������������������������������������������������������������������������181 Creating the Cell Component ����������������������������������������������������������������������������182 Understanding What Happened �������������������������������������������������������������������184 Adding to Storybook ������������������������������������������������������������������������������������185 Exploring in Detail ���������������������������������������������������������������������������������������188 Adding a Variant ������������������������������������������������������������������������������������������189 Summary�����������������������������������������������������������������������������������������������������������192 Chapter 7: Creating Animation Components�������������������������������������195 Animating a Progress Bar Component ��������������������������������������������������������������196 Exploring the Code Changes ������������������������������������������������������������������������200 Adding to Storybook ������������������������������������������������������������������������������������201 Adding Variants��������������������������������������������������������������������������������������������204 Creating the Alarm Component �������������������������������������������������������������������������206 Breaking Apart the Code ������������������������������������������������������������������������������212 Adding to Storybook ������������������������������������������������������������������������������������213 Adding Variants��������������������������������������������������������������������������������������������216 Creating a Switch Component ��������������������������������������������������������������������������220 Breaking Apart the Code ������������������������������������������������������������������������������223 Table of ConTenTs
📄 Page
9
ix Adding to Storybook ������������������������������������������������������������������������������������224 Creating a Variant ����������������������������������������������������������������������������������������228 Summary�����������������������������������������������������������������������������������������������������������229 Chapter 8: Writing Documentation ���������������������������������������������������231 Setting the Scene ����������������������������������������������������������������������������������������������232 Adding Status Badges ���������������������������������������������������������������������������������������233 Understanding What Happened �������������������������������������������������������������������236 Customizing the Badges Plugin Configuration ��������������������������������������������236 Breaking Apart the Changes ������������������������������������������������������������������������239 Updating the Documentation ����������������������������������������������������������������������������241 Breaking Apart an Example �������������������������������������������������������������������������242 Making Improvements ���������������������������������������������������������������������������������245 Exploring the Changes in Detail �������������������������������������������������������������������250 Summary�����������������������������������������������������������������������������������������������������������252 Chapter 9: Testing Components ��������������������������������������������������������253 Setting Expectations �����������������������������������������������������������������������������������������253 Setting Up the Testing Environment ������������������������������������������������������������������254 Breaking Apart the Code Changes ���������������������������������������������������������������256 Testing the Components �����������������������������������������������������������������������������������256 Exploring the Changes in Detail �������������������������������������������������������������������260 Improving on the Tests ��������������������������������������������������������������������������������261 Testing the Components Visually �����������������������������������������������������������������263 Bundling the Components ���������������������������������������������������������������������������������266 Configuring the Build Process ���������������������������������������������������������������������266 Running the Build Process ��������������������������������������������������������������������������271 Updating Our Demo �������������������������������������������������������������������������������������������276 Breaking Apart the Code ������������������������������������������������������������������������������280 Table of ConTenTs
📄 Page
10
x Testing with Other Frameworks ������������������������������������������������������������������������281 Understanding What Happened �������������������������������������������������������������������284 Adding Test Coverage ����������������������������������������������������������������������������������������284 Refining the Results ������������������������������������������������������������������������������������288 Breaking Apart the Code Changes ���������������������������������������������������������������291 A Parting Thought ����������������������������������������������������������������������������������������293 Summary�����������������������������������������������������������������������������������������������������������294 Chapter 10: Accessibility ������������������������������������������������������������������295 A Quick Experiment �������������������������������������������������������������������������������������������296 Understanding What Happened �������������������������������������������������������������������297 Setting Expectations �����������������������������������������������������������������������������������������298 Testing with the Chrome Extension �������������������������������������������������������������������299 Understanding the Results ��������������������������������������������������������������������������301 Implementing Vitest-Axe �����������������������������������������������������������������������������������303 Exploring the Changes ���������������������������������������������������������������������������������308 Fixing the Issues ������������������������������������������������������������������������������������������309 Limits of Testing ������������������������������������������������������������������������������������������������314 Exploring Next Steps �����������������������������������������������������������������������������������317 Summary�����������������������������������������������������������������������������������������������������������319 Chapter 11: Deploying to Production ������������������������������������������������321 Performing Final Checks �����������������������������������������������������������������������������������321 Understanding the Deployment Process �����������������������������������������������������������323 Publishing to GitHub ������������������������������������������������������������������������������������������325 Setting Up a GitHub Repository �������������������������������������������������������������������326 Uploading Components to GitHub ����������������������������������������������������������������328 Exploring the Code in Detail ������������������������������������������������������������������������335 Releasing Components to npm �������������������������������������������������������������������������336 Table of ConTenTs
📄 Page
11
xi Building a Demo ������������������������������������������������������������������������������������������������343 Breaking Apart the Code Changes ���������������������������������������������������������������345 Publishing Storybook to Netlify �������������������������������������������������������������������������348 Setting Up Netlify �����������������������������������������������������������������������������������������349 Understanding the Changes Made ��������������������������������������������������������������352 Adding Polish to the Repository ������������������������������������������������������������������������352 Adding a Custom Domain Name ������������������������������������������������������������������353 Summary�����������������������������������������������������������������������������������������������������������360 Chapter 12: Taking Things Further ���������������������������������������������������363 Reviewing the Site ��������������������������������������������������������������������������������������������364 Setting a Road Map �������������������������������������������������������������������������������������365 Converting Our Next Component �����������������������������������������������������������������������366 Dissecting the Code �������������������������������������������������������������������������������������371 Adding to Storybook ������������������������������������������������������������������������������������372 Adding a Theme Manager ���������������������������������������������������������������������������������382 Determining the Approach ���������������������������������������������������������������������������382 Implementing the Changes ��������������������������������������������������������������������������383 Understanding What We Changed ���������������������������������������������������������������388 “And Now to Answer That Question…” �������������������������������������������������������389 Summary�����������������������������������������������������������������������������������������������������������390 Index �������������������������������������������������������������������������������������������������393 Table of ConTenTs
📄 Page
12
xiii About the Author Alex Libby is a front-end engineer and seasoned book author who hails from England. His passion for all things open source dates back to the days of his degree studies, where he first came across web development and has been hooked ever since. His daily work involves extensive use of React, Node.js, JavaScript, HTML, and CSS. Alex enjoys tinkering with different open source libraries to see how they work. He has spent a stint maintaining the jQuery Tools library and enjoys writing about open source technologies, principally for front-end UI development.
📄 Page
13
xv About the Technical Reviewer Vadim Atamanenko is an experienced software engineer with over 25 years of experience, a senior member of the IEEE and Harvard Square associations, and an active participant in the scientific community. He is the author of numerous scientific articles, an expert in international hackathons, a lecturer in software development courses, and currently serves as the Head of the Development Department at Freedom Life Insurance Company. Vadim also shares his knowledge and expertise through more than 40 articles published in online publications in two languages (English and Russian). He is always open to meeting new people and exchanging knowledge.
📄 Page
14
xvii Acknowledgments Writing a book can be a long but rewarding process; it is not possible to complete it without the help of other people. I would like to offer a huge vote of thanks to my editors, in particular, Nirmal Selvaraj and James Robinson-Prior; my thanks also to Vadim Atamanenko as my technical reviewer, James Markham for his help during the process, and others at Apress for getting this book into print. All have made writing this book a painless and enjoyable process, even with the edits! My thanks also to my family for being understanding and supporting me while writing. I frequently spend a lot of late nights writing alone or pass up times when I should be with them, so their words of encouragement and support have been a real help in getting past those bumps in the road and producing the finished book that you now hold in your hands.
📄 Page
15
xix Introduction Developing Web Components with Svelte, Second Edition is for people who want to learn how to quickly create web components that are efficient and fast using the upcoming Svelte framework and associated tools. This project-oriented book simplifies the setting up of a Svelte web component library as a starting point before beginning to explore the benefits of using Svelte to create components not only usable in this framework but equally reusable in others such as React, Vue, and Angular. We can use this as a basis for developing an offer that we can customize to our needs, across multiple frameworks. It will equip you with a starting toolset that you can use to create future component libraries, incorporate the processes into your workflow, and that will allow you to take your components to the next level. Throughout this book, I’ll take you on a journey through creating the base library, before adding a variety of components such as a select box, tabs, and the typical tooltip components. We will also touch on subjects such as writing documentation, testing components, and deploying into production – showing you how easy it is to develop simple components that we can augment later quickly. With the minimum of fuss and plenty of practical exercises, we’ll focus on topics such as building the functionality, styling, testing in a self-contained environment, and more – right through to producing the final result viewable from any browser! Developing Web Components with Svelte, Second Edition uses nothing more than standard JavaScript, CSS, and HTML, three of the most powerful tools available for developers: you can enhance, extend, and configure your components as requirements dictate. With Svelte, the art of possible is only limited by the extent of your imagination and the power of JavaScript, HTML, and Node.js.
📄 Page
16
xxi Changes in This Edition Below are some of the changes made for this edition of Developing Web Components with Svelte: • Updated Storybook to version 8 • Updated Svelte to version 4 • Refactored all Storybook stories to use a newer format, switching from default Svelte to JavaScript • Fixed issues in the RadioButton component • Included a new section on accessibility • Included a new Animation chapter and components: Alarm, Switch, and ProgressBar • Updated installation of Svelte project to use Vite as a replacement: this bypasses workarounds used when creating the original library project • Refreshed color scheme to new shade and named library GarnetUI (to avoid confusion) • Added coverage testing • Added a new Avatar component as conversion from React to Svelte • Updated documentation to use a new format as part of the update to Storybook 8
📄 Page
17
xxii • Switched to using Vitest from Svelte Testing Library • Removed the SideBar component (as this didn’t work well in Storybook) • Added a new Switch component Changes in This ediTion
📄 Page
18
1© Alex Libby 2025 A. Libby, Developing Web Components with Svelte, https://doi.org/10.1007/979-8-8688-1180-7_1 CHAPTER 1 Getting Started Let’s suppose for a moment that you’ve spent any time developing with frameworks such as React. In that case, I’m sure you will have come across the principle of creating web components. We can drop these self-contained, reusable packages of code into any number of projects, with only minor tweaks needed to configure the package for use in your project. Sound familiar? What if you found yourself creating multiple components and were beginning to reuse them across multiple projects? We could use them individually, but that wouldn’t be the most effective way – instead, why not create a component library? Creating such a library opens some real possibilities – we could build our library around standard components that everyone uses or focus on a select few that follow a theme, such as forms. At this point, you’re probably assuming that we’d do something in React, right? Wrong. Anyone who knows me knows that I like to keep things simple – while there is nothing technically wrong with React (it’s a great framework), I want to do something different. We will build such a component library for this book, but the framework I’ve elected to use is a relatively new kid on the block – Svelte. It, however, won’t just be another library, but one based around web components! Why, I hear you ask?
📄 Page
19
2 There are many reasons for doing this, but performance is the most important one – Svelte’s architecture is different from most frameworks, making it superfast than many of its rivals and one that suits web component architecture perfectly. It means we can create something in Svelte (easy to pick up) and use it in React, Angular, Vue, and so on. Any framework that uses JavaScript (and potentially npm packages) can effectively use this library. Throughout this book, we’ll explore how to write web components using Svelte, bring them together in a unified library, and explore the steps required to release them to the world at large with minimal effort. In time-honored tradition, we must start somewhere – there’s no better place than to start with a look at what we will create through this book, set some boundaries, and get some of the tools and resources ready for use. Let’s first answer this question before we do so (and get anyone up to speed who hasn’t used web components). What Are Web Components? To answer this question, we must go back ten years to the Fronteers Conference in 2011, where web components were first introduced to developers. There are many ways to describe what a web component is, but I like the definition given by Riccardo Canella in his article on the Medium website, where he states that …Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Chapter 1 GettinG Started
📄 Page
20
3 This definition is just a tiny part of what they are – in addition, it’s essential to know that they • Are based on web standards and will work across modern browsers • Can be used with any JavaScript-based framework Wow – that’s powerful stuff! Gone are the days when we had to use a React component in a React-based site or, likewise, for Angular. Just imagine: we could build a component in Svelte and then use it in different frameworks – as long as they are based on JavaScript. There is one question, though, that I bet some of you are asking: Why choose Svelte? It’s a valid question, as Svelte is not as well known as other frameworks such as React. However, there are three reasons for choosing this framework: • It’s a fair bet that many of you use React in some capacity; we could develop a web component in React, but we would be missing out on one key factor: interoperability. We need to build the component using a different framework, such as Svelte. • Svelte’s architecture pushes compilation into the build process, preventing the need for a runtime library when operating in a browser (unlike its competitors such as React). It means the end code is superfast – it doesn’t have the overhead of that library, plus compiled code is as close as you will get to pure HTML, CSS, and JavaScript. Chapter 1 GettinG Started