Developing Web Components with Svelte: Building a Library of Reusable UI Components

✍ Scribed by Alex Libby

• Publisher: Apress
• Tongue: English
• Leaves: 350
• Category: Library

✦ Synopsis

Leverage the power of Svelte to quickly produce the foundations of a framework-agnostic component library that can extend and develop over time. This is a project-oriented book that simplifies setting up the skeleton of the library and adding components, using little more than a text editor or free software. 

You'll gain a starting baseline that can be used to develop future projects or incorporated into an existing workflow. You'll take development to the next level and can use this knowledge to create components with any framework, such as React, Angular or Vue.js, not just Svelte. Developing Web Components with Svelte is an excellent resource for getting acquainted with creating and maintaining a component library using a phased approach. It takes the view that you don't have to create something complex and unwieldy. Instead, you can start building something quickly, then extend it as needs dictate over time, without sacrificing speed or features.

You'll see how to develop cleaner components in a quick, clear and straightforward way. The components you create in this project can be made available in one of the world's most extensive component ecosystems to be usable by other frameworks, making them genuinely reusable. In short, Svelte offers plenty of opportunities as it is based on Node.js and JavaScript making Svelte a powerful package to work from.

What You'll Learn

• Use the Svelte framework to rapidly create and deploy the foundation of a component library that is versatile and performant
• Review developing and customizing components based on our needs
• Work through a real-world project to help solidify skills learned from the book and put them into practice

Who This Book Is For

• Website developers, familiar with JavaScript, who are keen to learn how to leverage the Svelte framework fast
• Agile development teams, where time is of the essence, and the pressure is on to deliver results quickly
• Developers who want to focus on simplicity, to produce efficient and optimized content in modern browsers using tools readily available

✦ Table of Contents

Table of Contents
About the Author
Acknowledgments
Introduction
Chapter 1: Getting Started
What Are Web Components?
Taking First Steps
Breaking Apart the Code
Background to the Project
Our Approach and Strategy
Determining Our Needs
Setting Up the Project
Understanding What Happened
Integrating a Playground
Understanding What Happened
Summary
Chapter 2: Creating Basic Components
Creating the Input Field Component
Breaking the Code Apart
Hooking the Component into Storybook
Understanding What Happened
Adding Variants
Constructing the Checkbox Component
Exploring the Code
Adding Variations in Storybook
Breaking the Code Apart
Adapting for Radio Buttons
Constructing the Slider Component
Adding the Component to Storybook
Exploring the Code
Summary
Chapter 3: Building Action Components
Creating the SelectBox Component
Understanding What Happened
Adding the Component to Storybook
Exploring the Code in Detail
Creating the Spinner Component
Understanding What Happened
Adding the Component to Storybook
Breaking Apart the Code
Creating Variants
Breaking Apart the Code
Creating the Accordion Component
Understanding What Happened
Adding the Component to Storybook
Reviewing the Code
Summary
Chapter 4: Building the Navigation Components
Creating the Breadcrumb Component
Understanding What Happened
Adding the Component to Storybook
Exploring the Code in Detail
Building a SideBar Component
Breaking Apart the Code
Using a Style Library – A Postscript
Adding the Component to Storybook
Understanding the Changes Made
Constructing the Tabs Component
Exploring the Code Changes
Accessibility – A Note
Hooking the Component into Storybook
Understanding the Changes Made
Creating a Variant
Summary
Chapter 5: Creating Notification Components
Creating the Alert Component
Sourcing the Icons
Building the Component
Understanding What Happened
Adding the Component to Storybook
Exploring the Code Changes
Creating a Variant
Breaking Apart the Code
Creating the Dialog Component
Understanding What Happened
Adding to Storybook
Creating the Tooltip Component
Understanding What Happened
Adding the Component to Storybook
Exploring the Code Changes
Creating a Variant
Summary
Chapter 6: Creating Grid Components
Determining the Approach
Building the Table Component
Understanding What Happened
Creating the Grid Component
Breaking Apart the Code
Creating the Cell Component
Understanding What Happened
Adding to Storybook
Exploring in Detail
Adding a Variant
Understanding How It Works
Summary
Chapter 7: Writing Documentation
Setting the Scene
Adding Status Badges
Understanding What Happened
Customizing the Badges Plug-in Configuration
Updating Our Documentation – Our Approach
Writing Documentation for Basic Components
Breaking Apart the Changes
Updating Documentation for Action Components
Exploring the Changes Made
Summary
Chapter 8: Documenting More Components
Adding the Remaining Documentation
Adding Documentation for Notification Components
Exploring the Code Changes in Detail
Updating Documentation for Navigation Components
Breaking Apart the Code Changes
Updating Documentation for Grid Components
Understanding What Changed
A Final Tidy-Up
Summary
Chapter 9: Testing Components
Setting Up the Testing Environment
Breaking Apart the Code Changes
Testing the Components
Writing Tests for Our Library
Exploring the Changes in Detail
Bundling the Components
Configuring the Build Process
Exploring the Changes in Detail
Running the Build Process
Breaking Apart the Code
Creating Demos in a Test Environment
Breaking Apart the Code
Testing with Other Frameworks
Understanding What Happened
Summary
Chapter 10: Deploying to Production
Performing Final Checks
Understanding the Deployment Process
Publishing to GitHub
Setting Up a GitHub Pages Repository
Uploading Components to GitHub
Exploring the Code in Detail
Releasing Components to npm
Building a Demo
Breaking Apart the Code Changes
Publishing Storybook to Netlify
Setting Up Netlify
Understanding the Changes Made
Adding Polish to the Repository
Adding a Custom Domain Name
Breaking Apart the Code
Summary
Chapter 11: Taking Things Further
Reviewing the Site
Taking the Next Steps – Setting a Road Map
Converting Our Next Component
Dissecting the Code
Adding to Storybook
Understanding the Changes Made
Remember That RadioButton Component?
Adding to Storybook
Breaking Apart the Code
Summary
Index