100% found this document useful (5 votes)
42 views53 pages

Full Developing Web Components With Svelte: Building A Library of Reusable UI Components 1st Edition Alex Libby Ebook All Chapters

Building

Uploaded by

januliasmoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (5 votes)
42 views53 pages

Full Developing Web Components With Svelte: Building A Library of Reusable UI Components 1st Edition Alex Libby Ebook All Chapters

Building

Uploaded by

januliasmoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

Download Full Version ebookmass - Visit ebookmass.

com

Developing Web Components with Svelte: Building a


Library of Reusable UI Components 1st Edition Alex
Libby

https://ebookmass.com/product/developing-web-components-
with-svelte-building-a-library-of-reusable-ui-
components-1st-edition-alex-libby/

OR CLICK HERE

DOWLOAD NOW

Discover More Ebook - Explore Now at ebookmass.com


Instant digital products (PDF, ePub, MOBI) ready for you
Download now and discover formats that fit your needs...

Developing Web Components with Svelte: Building a Library


of Reusable UI Components 2nd Edition Alex Libby

https://ebookmass.com/product/developing-web-components-with-svelte-
building-a-library-of-reusable-ui-components-2nd-edition-alex-libby/

ebookmass.com

Bioactive Food Components Activity in Mechanistic Approach


1st Edition Cinthia Bau Betim Cazarin

https://ebookmass.com/product/bioactive-food-components-activity-in-
mechanistic-approach-1st-edition-cinthia-bau-betim-cazarin/

ebookmass.com

Additive and Traditionally Manufactured Components: A


Comparative Analysis of Mechanical Properties (Additive
Manufacturing Materials and Technologies) 1st Edition
Joshua Pelleg Phd
https://ebookmass.com/product/additive-and-traditionally-manufactured-
components-a-comparative-analysis-of-mechanical-properties-additive-
manufacturing-materials-and-technologies-1st-edition-joshua-pelleg-
phd/
ebookmass.com

The Knowledge: How to Rebuild Civilization in the


Aftermath of a Cataclysm (Ebook PDF)

https://ebookmass.com/product/the-knowledge-how-to-rebuild-
civilization-in-the-aftermath-of-a-cataclysm-ebook-pdf/

ebookmass.com
Advances of Artificial Intelligence in a Green Energy
Environment Pandian Vasant

https://ebookmass.com/product/advances-of-artificial-intelligence-in-
a-green-energy-environment-pandian-vasant/

ebookmass.com

The Best of Me Sharon Sala

https://ebookmass.com/product/the-best-of-me-sharon-sala-2/

ebookmass.com

Wolf Under Fire Paige Tyler

https://ebookmass.com/product/wolf-under-fire-paige-tyler-2/

ebookmass.com

A Danger to Herself and Others Alyssa Sheinmel [Sheinmel

https://ebookmass.com/product/a-danger-to-herself-and-others-alyssa-
sheinmel-sheinmel/

ebookmass.com

Drugs and Drug Policy: The Control of Consciousness


Alteration (NULL)

https://ebookmass.com/product/drugs-and-drug-policy-the-control-of-
consciousness-alteration-null/

ebookmass.com
Regenerated Organs: Future Perspectives 1st Edition
Chandra P. Sharma

https://ebookmass.com/product/regenerated-organs-future-
perspectives-1st-edition-chandra-p-sharma/

ebookmass.com
Developing Web
Components
with Svelte
Building a Library of Reusable
UI Components

Alex Libby
Developing
Web Components
with Svelte
Building a Library of
Reusable UI Components

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

Alex Libby
Belper, Derbyshire, UK

ISBN-13 (pbk): 978-1-4842-9038-5 ISBN-13 (electronic): 978-1-4842-9039-2


https://doi.org/10.1007/978-1-4842-9039-2

Copyright © 2023 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 image designed by eStudioCalamar
Distributed to the book trade worldwide by Springer Science+Business Media New York, 1
New York Plaza, Suite 4600, New York, NY 10004-1562, USA. Phone 1-800-SPRINGER, fax (201)
348-4505, e-mail [email protected], 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 [email protected]; for reprint,
paperback, or audio rights, please e-mail [email protected].
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 via the book’s product page, located at www.apress.com/.
For more detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
This is dedicated to my family, with thanks for their
love and support while writing this book.
Table of Contents
About the Author���������������������������������������������������������������������������������xi

Acknowledgments�����������������������������������������������������������������������������xiii
Introduction����������������������������������������������������������������������������������������xv

Chapter 1: Getting Started��������������������������������������������������������������������1


What Are Web Components?���������������������������������������������������������������������������������2
Taking First Steps�������������������������������������������������������������������������������������������������4
Breaking Apart the Code����������������������������������������������������������������������������������5
Background to the Project������������������������������������������������������������������������������������7
Our Approach and Strategy�����������������������������������������������������������������������������������8
Determining Our Needs���������������������������������������������������������������������������������������10
Setting Up the Project�����������������������������������������������������������������������������������������11
Understanding What Happened���������������������������������������������������������������������13
Integrating a Playground�������������������������������������������������������������������������������������14
Understanding What Happened���������������������������������������������������������������������17
Summary������������������������������������������������������������������������������������������������������������18

Chapter 2: Creating Basic Components����������������������������������������������19


Creating the Input Field Component�������������������������������������������������������������������20
Breaking the Code Apart��������������������������������������������������������������������������������22
Hooking the Component into Storybook��������������������������������������������������������23
Understanding What Happened���������������������������������������������������������������������27
Adding Variants���������������������������������������������������������������������������������������������29

v
Table of Contents

Constructing the Checkbox Component��������������������������������������������������������������31


Exploring the Code����������������������������������������������������������������������������������������34
Adding Variations in Storybook����������������������������������������������������������������������35
Breaking the Code Apart��������������������������������������������������������������������������������39
Adapting for Radio Buttons����������������������������������������������������������������������������40
Constructing the Slider Component��������������������������������������������������������������������43
Adding the Component to Storybook�������������������������������������������������������������47
Exploring the Code����������������������������������������������������������������������������������������50
Summary������������������������������������������������������������������������������������������������������������51

Chapter 3: Building Action Components���������������������������������������������53


Creating the SelectBox Component��������������������������������������������������������������������53
Understanding What Happened���������������������������������������������������������������������56
Adding the Component to Storybook�������������������������������������������������������������57
Exploring the Code in Detail��������������������������������������������������������������������������60
Creating the Spinner Component������������������������������������������������������������������������62
Understanding What Happened���������������������������������������������������������������������64
Adding the Component to Storybook�������������������������������������������������������������65
Breaking Apart the Code��������������������������������������������������������������������������������68
Creating Variants�������������������������������������������������������������������������������������������68
Creating the Accordion Component��������������������������������������������������������������������74
Understanding What Happened���������������������������������������������������������������������78
Adding the Component to Storybook�������������������������������������������������������������79
Reviewing the Code���������������������������������������������������������������������������������������82
Summary������������������������������������������������������������������������������������������������������������83

vi
Table of Contents

Chapter 4: Building the Navigation Components��������������������������������85


Creating the Breadcrumb Component�����������������������������������������������������������������86
Understanding What Happened���������������������������������������������������������������������89
Adding the Component to Storybook�������������������������������������������������������������90
Exploring the Code in Detail��������������������������������������������������������������������������95
Building a SideBar Component���������������������������������������������������������������������������95
Breaking Apart the Code������������������������������������������������������������������������������100
Adding the Component to Storybook�����������������������������������������������������������101
Understanding the Changes Made��������������������������������������������������������������106
Constructing the Tabs Component��������������������������������������������������������������������107
Exploring the Code Changes������������������������������������������������������������������������110
Accessibility – A Note����������������������������������������������������������������������������������111
Hooking the Component into Storybook������������������������������������������������������111
Understanding the Changes Made��������������������������������������������������������������114
Creating a Variant����������������������������������������������������������������������������������������115
Summary����������������������������������������������������������������������������������������������������������119

Chapter 5: Creating Notification Components����������������������������������121


Creating the Alert Component���������������������������������������������������������������������������122
Sourcing the Icons���������������������������������������������������������������������������������������122
Building the Component������������������������������������������������������������������������������123
Adding the Component to Storybook�����������������������������������������������������������130
Creating a Variant����������������������������������������������������������������������������������������133
Creating the Dialog Component������������������������������������������������������������������������136
Understanding What Happened�������������������������������������������������������������������139
Adding to Storybook������������������������������������������������������������������������������������139
Creating the Tooltip Component������������������������������������������������������������������������143
Understanding What Happened�������������������������������������������������������������������147

vii
Table of Contents

Adding the Component to Storybook�����������������������������������������������������������148


Creating a Variant����������������������������������������������������������������������������������������152
Summary����������������������������������������������������������������������������������������������������������154

Chapter 6: Creating Grid Components����������������������������������������������157


Determining the Approach��������������������������������������������������������������������������������157
Building the Table Component��������������������������������������������������������������������������159
Understanding What Happened�������������������������������������������������������������������160
Creating the Grid Component����������������������������������������������������������������������������161
Breaking Apart the Code������������������������������������������������������������������������������163
Creating the Cell Component����������������������������������������������������������������������������164
Understanding What Happened�������������������������������������������������������������������166
Adding to Storybook������������������������������������������������������������������������������������167
Adding a Variant������������������������������������������������������������������������������������������������170
Understanding How It Works�����������������������������������������������������������������������172
Summary����������������������������������������������������������������������������������������������������������173

Chapter 7: Writing Documentation���������������������������������������������������175


Setting the Scene����������������������������������������������������������������������������������������������176
Adding Status Badges���������������������������������������������������������������������������������������178
Understanding What Happened�������������������������������������������������������������������181
Updating Our Documentation – Our Approach��������������������������������������������������183
Writing Documentation for Basic Components�������������������������������������������������184
Breaking Apart the Changes������������������������������������������������������������������������195
Updating Documentation for Action Components���������������������������������������������196
Exploring the Changes Made�����������������������������������������������������������������������206
Summary����������������������������������������������������������������������������������������������������������207

viii
Table of Contents

Chapter 8: Documenting More Components�������������������������������������209


Adding the Remaining Documentation�������������������������������������������������������������209
Adding Documentation for Notification Components����������������������������������������210
Exploring the Code Changes in Detail���������������������������������������������������������219
Updating Documentation for Navigation Components��������������������������������������220
Breaking Apart the Code Changes���������������������������������������������������������������228
Updating Documentation for Grid Components�������������������������������������������������230
Understanding What Changed���������������������������������������������������������������������233
A Final Tidy-Up��������������������������������������������������������������������������������������������������234
Summary����������������������������������������������������������������������������������������������������������235

Chapter 9: Testing Components��������������������������������������������������������237


Setting Up the Testing Environment������������������������������������������������������������������237
Breaking Apart the Code Changes���������������������������������������������������������������240
Testing the Components�����������������������������������������������������������������������������������241
Writing Tests for Our Library������������������������������������������������������������������������241
Exploring the Changes in Detail�������������������������������������������������������������������249
Bundling the Components���������������������������������������������������������������������������������250
Configuring the Build Process���������������������������������������������������������������������250
Running the Build Process��������������������������������������������������������������������������255
Creating Demos in a Test Environment�������������������������������������������������������������261
Breaking Apart the Code������������������������������������������������������������������������������264
Testing with Other Frameworks������������������������������������������������������������������������265
Understanding What Happened�������������������������������������������������������������������267
Summary����������������������������������������������������������������������������������������������������������268

ix
Table of Contents

Chapter 10: Deploying to Production������������������������������������������������271


Performing Final Checks�����������������������������������������������������������������������������������271
Understanding the Deployment Process�����������������������������������������������������������273
Publishing to GitHub������������������������������������������������������������������������������������������274
Setting Up a GitHub Pages Repository��������������������������������������������������������275
Uploading Components to GitHub����������������������������������������������������������������278
Releasing Components to npm�������������������������������������������������������������������������284
Building a Demo������������������������������������������������������������������������������������������290
Publishing Storybook to Netlify�������������������������������������������������������������������������294
Setting Up Netlify�����������������������������������������������������������������������������������������296
Adding Polish to the Repository������������������������������������������������������������������������300
Adding a Custom Domain Name������������������������������������������������������������������300
Breaking Apart the Code������������������������������������������������������������������������������307
Summary����������������������������������������������������������������������������������������������������������308

Chapter 11: Taking Things Further���������������������������������������������������309


Reviewing the Site��������������������������������������������������������������������������������������������309
Taking the Next Steps – Setting a Road Map����������������������������������������������������311
Converting Our Next Component�����������������������������������������������������������������������312
Dissecting the Code�������������������������������������������������������������������������������������316
Adding to Storybook������������������������������������������������������������������������������������317
Understanding the Changes Made��������������������������������������������������������������323
Remember That RadioButton Component?�������������������������������������������������������325
Adding to Storybook������������������������������������������������������������������������������������329
Breaking Apart the Code������������������������������������������������������������������������������332
Summary����������������������������������������������������������������������������������������������������������334

Index�������������������������������������������������������������������������������������������������337

x
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.

xi
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, Shobana Srinivasan, Rami
Morrar, Gryffin Winkler, and James Robinson-Prior; my thanks also to
Tanner Dolby 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.
Lastly, it is particularly poignant that the book was written at a time
when the world is emerging from events of an unprecedented nature,
where memories are still too raw. It was too easy to think about those
who lost the greatest thing we as humans could ever have; life hasn’t
been easy for anyone. Having a project to work on, no matter how
simple or complex it might be, has helped me get through those tough
times and with the hope that we face a new, improved, and hopefully
better future.

xiii
Introduction
Developing Web Components with Svelte 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
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 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.

xv
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 – these self-contained, reusable
packages of code that we can drop 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 up 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’re going to 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.
There are many reasons for doing this, but performance is the most
important one – Svelte’s architecture is different from most frameworks,
making it super-fast than many of its rivals. Throughout this book, we’ll

© Alex Libby 2023 1


A. Libby, Developing Web Components with Svelte,
https://doi.org/10.1007/978-1-4842-9039-2_1
Chapter 1 Getting Started

explore how to write web components using Svelte, learn how to 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 kick off 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. Before we do so (and get anyone up to speed, who hasn’t used web
components), let’s first answer this question.

What Are Web Components?


To answer this question, we have to go back ten years to 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.”

This definition is just a small 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.

2
Chapter 1 Getting Started

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 so 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 in a
different framework, such as Svelte.

• Svelte’s architecture pushes the compilation into the


build process, avoiding the need for a runtime library
when operated in a browser (unlike its competitors
such as React). It means the end code is super-fast –
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. It helps that Svelte’s developers
decided not to try to reinvent the wheel – if JavaScript
already has a perfectly adequate solution, then Svelte
uses this instead of trying to add a custom equivalent!

• This lightweight architecture also means that any


core dependencies will be minimal compared to
frameworks such as React. Any that we need will be just
those required to operate the framework – it does not
include any extra dependencies for operations such as
manipulating date or time.

Okay – enough talk: let’s crack on with something a little more


practical! Before we get into the nuts and bolts of building our library, let’s
first have a quick peek at a small example I’ve put together to see how a
Svelte-based web component works in more detail.

3
Chapter 1 Getting Started

Taking First Steps


For the first demo, I’ve reworked an example by Simon O. available
from GitHub – you can see the original version at https://github.com/
FroyoNom/Svelte-Weather-Forecast. My version is cut down to only
display the current weather, hardcodes the location to New York (Apress’
office!), and uses the luxon date library instead to provide the current date.

RUNNING A DEMO COMPONENT

To run the weather component demo, follow these steps:

1. First, we need to get a key from OpenWeatherMap.org – head


over to https://home.openweathermap.org/users/
sign_up, and sign up with the correct details (it’s a free
service, although I would recommend a webmail address such
as Gmail!). Make sure you store the key in a safe place, as we
will need it later in this exercise.

2. Next, go ahead and download the archive file from the code
download that accompanies this book – extract the contents to
a new folder, not your project folder.

3. Once extracted, open the .env file at the root of the folder
you created in step 2, then add your API key from step 1, as
indicated in the file.

4. Fire up a Node.js terminal session, then change the working


folder to that separate folder from the previous step.

5. At the prompt, enter npm install to install the demo,


and press Enter.

4
Chapter 1 Getting Started

6. Once done, enter npm run dev at the prompt, and press Enter
to run the application. We should see a weather component
displayed on the page if all is well, as shown in Figure 1-1.

Figure 1-1. The OpenWeatherMap component demo

I designed that demo to be a quick and easy start, although, in reality,


it hides a lot of code under the covers. At face value, it would be difficult to
tell if this had been written using Svelte – don’t worry, it has!
To prove this is the case, crack open a copy of the weather-app folder
from the code download, then look at the contents in your text editor.
Don’t worry if you don’t understand it all – it’s more important at this stage
to get a feel for how a Svelte component is structured. We’ll go through it in
more detail when we start creating components in the next chapter.
Spend a few moments reviewing it, then let’s dive into a more detailed
breakdown of the code before continuing with the rest of this chapter.

Breaking Apart the Code


At first glance, you might be a little bewildered by some of the code in the
example – what does it all do? There is quite a bit of code used, but we only
need to be concerned with what’s in the src folder at this stage.
We went through the usual steps of downloading, extracting, and firing
up the demo in localhost, using standard Node commands to get the demo
running.

5
Chapter 1 Getting Started

What makes our demo tick, though, is the code within the src folder –
there are other files and folders present, but we will come back to these
later in the book. The src folder is where we store all of the core component
code – ours has lib and assets folders, as well as vite-env.d.ts and
App.svelte. The lib folder holds the code for each component – in this
example, we have two, Date.svelte and Current.svelte.
Although Svelte comes with two files that act as a starting page for
a Svelte site (main.js, in the \src folder, and the index.html file
at root), it’s only the former we will really need to use. The plan for our
library is to display each component using Markdown files in a Storybook
installation, but to also use the index.html file to demonstrate how we
might reference each component outside of a Svelte environment. Don’t
worry too much about the specifics of how we will do this – we will go
through everything in detail over the course of this book! For now, it’s
important to know where our components will be stored, and that we have
two ways to display them in our environment.

There are other files and folders that we will use throughout this
book – some you will recognize, such as package.json. Others may
not be so familiar; we will go through examples throughout this book.

Okay – let’s move on: now that we’ve created a demo component, it’s time
we got stuck into the star attraction for this book: our component library!
Throughout this book, we’ll create the basis for our component and
then flesh it out with a selection of components. There is plenty we could
choose from – indeed, space constraints mean we can’t add them all! The
key is that we’ll learn how to structure our library, add components, test
them, and generally make sure we have something worthwhile toward the
end of the book.
Let’s start first with the background to this project, so we can set the
scene and understand what’s coming up later in the book.

6
Chapter 1 Getting Started

Background to the Project


So – where do we begin? Let me introduce you to what we will be creating:
the Cobalt UI library.
This UI library will contain a mix of components – all of these you will
find in use on many websites, particularly e-commerce ones! The great
thing about creating a component library is that you can pick and choose
which components to add; if people don’t like one or are not using it, we
can always deprecate and remove it from the library.
Hopefully, that won’t be the case with the ones I’ve chosen – I’ve listed
them in Table 1-1.

Table 1-1. List of components for our Cobalt UI library


Category Components

Basic Components Input box and variations, such as email or


password fields
Checkbox
Radio (we’ll cover this one as an adaptation
of the Checkbox component)
Slider
Action Components SelectBox
Accordion
Spinner
Navigation Components Breadcrumbs
SideBar (and Hamburger)
Tabs
Notification Components Dialog boxes (such as error, info, warn)
Alert
Tooltip
Grid Components Grid (Row and Column)

7
Chapter 1 Getting Started

If you’re wondering about the name – it came from an interest I have


in precious stones and a trip to a gemstone museum in Prague a few
years ago. They had an incredible array of garnets on display (which
is the national gemstone for the Czech Republic), but as a name, I’m
not sure it works so well, hence using Cobalt instead!

Okay – let’s crack on: now that we’ve decided what we will include in
our library, let’s turn our attention to strategy. What approach will we take?
It’s time to decide on some of the tools we will use and our approach for
each component.

Our Approach and Strategy


As with any project, it’s crucial to have a strategy – we need to decide
where (and how) to take the project. Otherwise, it could quickly become a
disorganized mess!
We could take this project in many different directions; for now, we will
focus on simplicity (mainly as space constraints mean creating something
feature rich and complex in the space of a book would be difficult). With
this in mind, I’ve outlined the approach we will take for this project:

• We’ll be creating a minimum viable product or MVP


approach – this will be enough to get something started
and published, but we can then add to it later.

• I’ve elected to use GitHub and GitHub Pages for


hosting; this is primarily as I already have several
repositories, so using GitHub will help keep things
simple. Feel free to use an alternative such as Bitbucket
or GitLab – both operate similarly to GitHub.

8
Chapter 1 Getting Started

• An essential theme for this project will be to keep


things simple, at least for now – I would love to create
something complex and full of features, but I won’t
be able to do it justice in this book! For us, it’s more
important to get the groundwork in place and running
first; it will mean that some features we might want are
not present initially (such as using vanilla JavaScript
rather than TypeScript or excluding some properties for
a component). We can always develop and refine the
library later, once the basis is operational.

• For each component, we’ll work on developing code


first. Once done, we’ll then style it before hooking it
into an instance of Storybook as our demonstration
tool. Tests for each component will come later, once we
have built all of the components, in Chapter 8.

• For this library, I’ve elected to use the Cypress testing


suite as a personal choice – there are others out there,
such as testing-library or Jest, which work equally well.
You may have a testing tool you already use, so feel free
to use that instead; the critical point is testing our new
components, not which tool to use!

Okay – I think that’s enough for now: let’s move on! The next task is
to determine what we need in terms of accounts, tools, and the like. As a
developer, you may already have some of these tools installed; feel free to
use them, or use alternatives if you prefer! That aside, let’s take a look at the
list in more detail.

9
Chapter 1 Getting Started

Determining Our Needs


Before we can get stuck in setting up Svelte and begin building our library,
we need to determine which tools we will use for our project. In a sense,
we need to do a little housekeeping – I loathe housekeeping, but hey:
needs must, as they say!
This list will cover everything needed: I will assume that you will use
the tools outlined in the list for this book. If you already have something
installed, feel free to skip the requirement or use an alternative solution.
Leaving that aside, let’s cover which tools we need to have, alongside
the usual requirements such as Internet access and a decent text editor:

• The first requirement is Node.js (and NPM) – we will


use this to structure our Svelte project and turn code
into components. Please download and install the
version appropriate for your platform: default settings
will suffice for this project.

• We also need an account at GitHub and a valid


email address – we use the latter to validate your
account. Once registered, we will use it to set up
two repositories – one for the code and another for
documentation.

• To publish the component on NPM, we will also need


an account – you can sign up for one at www.npmjs.
com/signup if you don’t already have one.

• A project folder on your PC or laptop – for this book, I


will assume you are using one called cobalt, and it is at
the root of your C: drive. If you want to use something
different, please adjust it to suit as you work through
each exercise.

10
Chapter 1 Getting Started

This list should be enough to get us started – anything else we can


download, or I will give you directions at the appropriate time. Let’s crack
on now with the bit I know you’re waiting for: installing Svelte and getting
our library set up.

Setting Up the Project


The first task in building our library is to get Svelte installed – assuming
you have Node.js installed, we can use NPM to download and install the
framework. Let’s look at the steps involved in more detail as part of the
next exercise.

INSTALLING SVELTE

To get the basis for our library set up, follow these steps:

1. First, crack open a Node.js terminal session, then change to the


root of your C: drive.

2. At the prompt, go ahead and enter npm create vite@


latest cobalt -- --template svelte, then press Enter.
3. You will first see this question – when prompted, press y to
respond:

Need to install the following packages:


  vite@latest
Ok to proceed? (y)

4. Svelte will now install – after a few moments, it will prompt


us to run these commands; go ahead and enter each in turn,
pressing Enter after each:

11
Chapter 1 Getting Started

cd cobalt
npm install
npm run dev

5. When prompted, fire up your browser and navigate to


http://localhost:5173 – if all is well, we should see the
demo site running in our browser, as shown in Figure 1-2.

Figure 1-2. Our Svelte demo site running

6. Browse to the cobalt folder in your file manager – if all is well,


we should see something akin to the (partial) extract shown in
Figure 1-3.

12
Chapter 1 Getting Started

Figure 1-3. The initial file listing for our component library

Excellent – we now have a basis for building our component library!

Although installing Svelte is pretty straightforward in itself, it’s worth exploring


what we achieved in the last demo. With that in mind, let’s take a moment to
review the changes we made in more detail.

Understanding What Happened


One of the great things about using Svelte is how easy it is to set up a
starting site – everything is done using NPM, a tool many developers will
have already used in their projects, so many commands will look familiar.
The only oddity is that while we created a Svelte site, we downloaded
Vite – what is all that about?

13
Chapter 1 Getting Started

Vite is the bundling tool used by Svelte to package code ready for
deployment – we ran the npm create command to create what is effectively
a Vite site, but we use a template to format it as a Svelte site. It’s worth
noting that as part of running this command, we had to download Vite –
this is a one-off; we won’t be prompted if we create more Svelte sites.
Once the download had been completed, we then changed into
the cobalt folder and ran a typical npm install command to set up
dependencies. With that done, we then fired up the Svelte development
server, before browsing the results in our browser. We still have a long way
to go, but this last step helps confirm we at least have a solid basis in place,
ready for building our project!
Okay – let’s move on to our next task. We will, of course, be building
components throughout this book, but – how are we going to display
them? We need the means to show them off to potential users to see how
they look and assess if they will suit their requirements.
The best way to do this is to use a tool called Storybook – it’s available
for download from https://storybook.js.org/ and works with various
frameworks, including Svelte. Let’s set up an instance as part of our
next demo.

Integrating a Playground
If you’ve spent any time developing code – particularly with frameworks
such as React – you may well have come across Storybook.
For the uninitiated, it’s an excellent tool for showcasing any
components we developers write – the tool supports a wide range of
frameworks, including Svelte. We’ll be using it in our project to showcase
the components we create for our library – let’s dive in and explore how to
set it up as part of our next exercise.

14
Chapter 1 Getting Started

SETTING UP STORYBOOK

To set up Storybook for our Svelte project, follow these steps:

1. First, crack open a Node.js terminal session, then change the


working folder to our project area.

2. At the prompt, enter npx sb init --builder


@storybook/builder-vite and press Enter to install
Storybook.

3. If prompted, press y to proceed (we’re using npx to download


and install, so it needs confirmation to proceed with the
download).

4. Once installed, Storybook will preconfigure support


automatically.

If Storybook fails to detect Svelte, choose yes and use the arrow
keys to go down to svelte, then press Enter to select. Storybook will
manually add support for Svelte.

5. Although we have installed Storybook, if we try to run it, it will


fail with an ugly error:

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module


C:\cobalt\.storybook\main.js from
C:\cobalt\node_modules\@storybook\core-common\dist\cjs\
utils\interpret-require.js not supported.

To fix it, we have to make a change – first, change the line "type":
"module", to "type": "commonjs", in package.json.

15
Chapter 1 Getting Started

6. There are a couple more changes we have to make – the first


is to tell Svelte that we’re creating custom web components.
Crack open vite.config.js at the root of our project folder,
then update the code within as highlighted:

export default defineConfig({


  plugins: [svelte()],
  compilerOptions: {
    customElement: true
  }
})

7. Next, we need to make one more change to the main.js file.


Go ahead and rename it to main.cjs – this turns it into a
CommonJS module, as Storybook has issues running the ESM
modules used by Svelte.

8. With those updates out of the way, we can now execute npm run
storybook to launch our instance of Storybook. If all is well, we
should see it appear, as shown in the extract in Figure 1-4.

Figure 1-4. Storybook successfully launched

We have one last update to do: delete the ./stories folder. This folder is the
Storybook examples folder, which we don’t need for our project.

16
Chapter 1 Getting Started

Great – we now have Storybook in place, ready for us to start adding


components! It is a perfect medium to show off the components we create
throughout this book; while installing Storybook is effectively a one-liner,
it’s essential to make sure it installs the proper support for your project!
With that in mind, let’s dive in and explore the changes we made in the
last exercise in more detail to see how Storybook fits into the bigger picture
of our component library.

Understanding What Happened


So – what did we achieve in the last demo?
We started by running the npx sb init command to download and
set up Storybook; this set up both the application and support for Svelte
automatically. While Storybook supports a wide range of frameworks,
the developers have focused on automating detection for the chosen
framework as part of the installation.
The key to making that automation work lies in detecting the presence
of the correct configuration file – in our case, vite.config.js. To make sure
it works, it’s best to let Storybook install itself into a folder at the root level –
if you browse the file structure, you will see it has created a folder called
.storybook. If we hadn’t, then the automated step could fail, and we might
end up installing Storybook manually into the wrong folder, or not at all!
The next part was a little more complex – Svelte is still a relatively new
framework, so we may encounter a hiccup or two. The error message we
had back in step 5 was caused by Svelte set to use ESM-required syntax,
which is not supported in Storybook.
In this instance, it was easy to fix the problem – we had to alter the
property type in our package.json file. Once we fixed that incompatibility
issue, we removed the demo stories that come with Storybook. We don’t
need these files for the final library, so removing them keeps the setup
tidy. We then rounded out the demo by running the command to launch
Storybook, so we could confirm it launched without issue.

17
Chapter 1 Getting Started

Summary
We can see creating components and a library as something of a
rollercoaster – there will be highs and lows, successes, and challenges to
deal with, as we begin to develop what will become our final library. Over
these last few pages, we’ve started to look at our project’s background
and get ourselves ready to create the component library – let’s take
a moment to review what we have learned before beginning the real
development work.
We started with a quick demo of a Svelte component that I had
adapted – this was to get a feel for typical code and how one would run.
We then moved on to discussing the background of our project, before
defining the approach and strategy we would take, along with what we
would need.
We finished by setting up the initial framework ready for use, before
finishing with integrating an instance of Storybook, ready for displaying
our components.
Excellent – we have our initial structure in place, along with confirmed
requirements: it’s time we began the real development! We’ll start with
something simple first: creating the basic components, which we will do in
the next chapter.

18
CHAPTER 2

Creating
Basic Components
With our initial project set up, it’s time to start creating and adding
components!
For this (and the next few chapters), we will build some sample
components ready for inclusion in our library. We could have chosen to
include any one of dozens of different components, but to keep things
simple, I’ve decided to pick three to start with: Input box, Checkbox,
and Slider.
For each component, I’ve made a few assumptions in terms of how we
will develop these components:

• Use HTML5 tags where possible.


• Aim to use an MVP approach: features will be missing,
but that will come later.

• Take the approach of developing components, then


adding styles, and finally linking into Storybook.

• Add variants where possible and start documentation


(which we can improve over time).

Keeping this approach in mind, let’s start with the first addition to our
library, which is creating the Input field component.

© Alex Libby 2023 19


A. Libby, Developing Web Components with Svelte,
https://doi.org/10.1007/978-1-4842-9039-2_2
Chapter 2 Creating Basic Components

Creating the Input Field Component


We will start with something simple for our first component – the
ubiquitous input field! You will, of course, see this versatile component
anywhere: it might be as a text box on one website but configured to accept
only email addresses or telephone numbers on other sites.
We’ll keep things simple and start with implementing a plain text field
for now but talk about more ideas later when we hook the component into
Storybook.

BUILDING THE INPUT COMPONENT

To build our Input component, follow these steps:

1. First, go ahead and create a new folder called lib under the
src folder.

2. Next, crack open a new file in your text editor, then add this
code – there is a good chunk, so we’ll add it section by
section, starting with a Svelte directive to convert it into a web
component:

<svelte:options tag="cobalt-input" />

3. Leave the next line blank, then add this script block – this
sets up some export declarations, along with an onInput event
handler:

<script>

  export let label = "Label:";


  export let placeholder = "";
  export let fieldType = "text";
  export let disabled = false;
  export let inputName = "";
  export let fieldID = "";

20
Chapter 2 Creating Basic Components

  function onInput(event) {
    event.target.dispatchEvent(new CustomEvent("oninput",
{ composed: true }));
  }
</script>

4. Once added, skip a line, then add in this markup – this will form
the basis of our component:

<div class="cobalt">
  {#if label}
    <label for={fieldID}>{label}</label>
  {/if}
  <input type={fieldType}
     id={fieldID}
     name={inputName}
     placeholder={placeholder}
     disabled={disabled}
     on:input = {onInput}
     {...$$props}
  >
</div>

5. Miss a line after the closing </div> tag, then add this
styling code:

<style>
  .cobalt { display: flex; flex-direction: row;
    font-family: Arial, Helvetica, sans-serif;
  }

  input[type="text"] { width: 200px; border-radius: 4px;


border-color: #19247c; height: 30px; outline: none; }

  input[type="email"] { width: 200px; border-radius: 4px;


border-color: #19247c; height: 30px; outline: none; }

21
Chapter 2 Creating Basic Components

  label { padding-right: 10px; display: flex; align-self:


center; }
</style>

6. Save the file as Input.svelte in the Input folder.

We now have an Input component in place – most of it will look


familiar as it is (in the main) standard HTML markup. However, there are
a few exciting features in this code we should cover, so before we get stuck
into testing our new component, let’s look at the code in more detail.

Breaking the Code Apart


For this exercise, our first task was to create the initial folder structure – it
might seem a little convoluted, but this is so we can take advantage of a
feature unique to Svelte. We touched on this back in Chapter 1 – if we ever
need to reference the lib folder, we can use a special $lib path alias, and
Svelte will automatically find the folder.
Next up, we switched to creating the core component – we started
with adding exports for various values such as fieldType or onInput. This
export keyword makes each value available elsewhere, which will be ideal
for when we test each component later in Storybook.

In the declarations at the top of Input.svelte, you will see that


we’ve provided some values – Svelte will use these by default if no
values are passed into the component when calling it in code.

The final task for this exercise was to add the markup that will form
the basis for the Input component (plus the styles we will use for our
component) – we based it on typical markup for a text input field but
adapted it to reference each exported field. There are two exceptions:
on:input and the {...$$props} spread operator.

22
Chapter 2 Creating Basic Components

The former (on:input) is Svelte’s equivalent of a standard oninput


change handler; it works in the same way as plain JavaScript, but the
syntax looks slightly different!

It’s worth noting that you don’t always need to put the callback for
the on:input; changing on:input={on:input} may also work
just as well. If you use this route here, you should also remove the
export declaration for onInput too. The same principle applies for
other components we create later in the book, such as Checkbox.

We also have the {...$$props} operator – this tells Svelte to pass all
remaining prop values into the component. If you’ve worked with the likes
of React, then you will likely be familiar with {...props} – it works in the
same manner.
Okay – let’s move on: next up, we need to test our component. We will
use the Storybook instance we set up in the previous chapter, and it’s a
perfect way to test the original component and add variants – let’s dive in
and take a look in more detail.

Hooking the Component into Storybook


As tools go, Storybook is an immensely versatile piece of kit. It supports
various frameworks, such as React or Angular, and can also accept content
in several formats (e.g., JavaScript or Markdown).
We should be aware of one thing, though, which is our use of Svelte.
Although we are strictly speaking using SvelteKit (and not Svelte itself ),
Storybook support is not quite as mature as other frameworks! Therefore,
it’s important to note that although Svelte itself is supported, you may
find documentation for SvelteKit to not be quite as complete. Some of the
options available for the former don’t work so well for SvelteKit.

23
Chapter 2 Creating Basic Components

Don’t worry, though – Storybook is still perfectly stable and usable for
our needs: we will use Svelte-formatted files to create the Storybook effect
and Markdown content for documentation. It might seem a little confusing
for now, but bear with me – it will all become apparent in the next exercise.

ADDING TO STORYBOOK

To set up the component in the Storybook instance, follow these steps:

1. First, crack open a new file in your text editor – save it as


Input.stories.mdx in the Input folder from the previous
exercise.

2. Next, go ahead and add this code – we’ll break it into sections,
starting with three import statements:

  import Input from "./Input.svelte";


  import InputDocs from "./InputDocs.mdx";
  import {
    Meta, Story } from '@storybook/addon-docs';

3. We can now add a page title, so Storybook knows how to


display our component – for this, leave a line blank, then add
this Meta tag:

<Meta
  title = "Cobalt UI Library/Basic Components/Input"
  component={Input}
  parameters={{page: null}}
/>

The parameters entry here hides the default page that shows,
ready for us to add a custom one later in this demo.

24
Chapter 2 Creating Basic Components

4. In order to render any component in Storybook, we need


to specify a template. We could use different versions for
each component, but for now, we’ll use this one to keep
things simple:

export const Template = (args) => ({


  Component: Input,
  props: args,
});

5. With a template in place, we can now display our component.


Go ahead and add this Story block:

<Story name="Default"
  args = {{
    placeholder: "example text",
    label: "Text:",
  }}
  parameters={{
    docs: {
      page: InputDocs,
    },
  }}>
  {Template.bind({})}
</Story>

6. We have one more part to add before viewing the results –


documentation. Go ahead and create a folder at the root of the
lib folder – call this new folder storybook.

7. You will notice in the previous step, we call InputDocs,


having imported it at the top of the file – extract a copy of
InputDocs.mdx from the code download and drop it into the
storybook folder.

25
Chapter 2 Creating Basic Components

It contains some rudimentary documentation in Markdown format –


we’ll talk more about this when we review the code.

8. Save and close the file. Next, switch to your Node.js terminal
session, then set the working folder to our cobalt project area.

9. At the prompt, enter npm run storybook and hit Enter – if


all is well, we should see Storybook launch and display in our
browser at http://localhost:6006/. Click on the Input
link on the left to display the Default variant we just created, as
shown in Figure 2-1.

Figure 2-1. Displaying the Input component in Storybook

Just a heads-up – you will notice that although I’ve specified


http://localhost:6006 as the URL, it does redirect on loading –
this is perfectly normal; it’s easier to use the short form in text!

26
Chapter 2 Creating Basic Components

10. Now click on the Docs link at the top of the page, just above
our component – if all is well, we should see an extract of the
documentation appear, as in Figure 2-2.

Figure 2-2. An extract of documentation for the Input component

Excellent – things are starting to take shape now! We now have the first
of many components set up in Storybook: it might be a simple one, but
that doesn’t matter! The critical point here is that we have a sound basis for
building and developing our components.
In the meantime, now would be an excellent opportunity to review the
code changes we have made so far. We’ve already talked about the core
component, but we’ve covered some valuable features in the Storybook
implementation, so let’s take some time to review the code in more detail.

Understanding What Happened


Cast your mind back to the beginning of the previous exercise, where I
mentioned that we would use Markdown for our documentation.

27
Random documents with unrelated
content Scribd suggests to you:
This eBook is for the use of anyone anywhere in the United
States and most other parts of the world at no cost and with
almost no restrictions whatsoever. You may copy it, give it away
or re-use it under the terms of the Project Gutenberg License
included with this eBook or online at www.gutenberg.org. If you
are not located in the United States, you will have to check the
laws of the country where you are located before using this
eBook.

1.E.2. If an individual Project Gutenberg™ electronic work is derived


from texts not protected by U.S. copyright law (does not contain a
notice indicating that it is posted with permission of the copyright
holder), the work can be copied and distributed to anyone in the
United States without paying any fees or charges. If you are
redistributing or providing access to a work with the phrase “Project
Gutenberg” associated with or appearing on the work, you must
comply either with the requirements of paragraphs 1.E.1 through
1.E.7 or obtain permission for the use of the work and the Project
Gutenberg™ trademark as set forth in paragraphs 1.E.8 or 1.E.9.

1.E.3. If an individual Project Gutenberg™ electronic work is posted


with the permission of the copyright holder, your use and distribution
must comply with both paragraphs 1.E.1 through 1.E.7 and any
additional terms imposed by the copyright holder. Additional terms
will be linked to the Project Gutenberg™ License for all works posted
with the permission of the copyright holder found at the beginning of
this work.

1.E.4. Do not unlink or detach or remove the full Project


Gutenberg™ License terms from this work, or any files containing a
part of this work or any other work associated with Project
Gutenberg™.

1.E.5. Do not copy, display, perform, distribute or redistribute this


electronic work, or any part of this electronic work, without
prominently displaying the sentence set forth in paragraph 1.E.1 with
active links or immediate access to the full terms of the Project
Gutenberg™ License.
1.E.6. You may convert to and distribute this work in any binary,
compressed, marked up, nonproprietary or proprietary form,
including any word processing or hypertext form. However, if you
provide access to or distribute copies of a Project Gutenberg™ work
in a format other than “Plain Vanilla ASCII” or other format used in
the official version posted on the official Project Gutenberg™ website
(www.gutenberg.org), you must, at no additional cost, fee or expense
to the user, provide a copy, a means of exporting a copy, or a means
of obtaining a copy upon request, of the work in its original “Plain
Vanilla ASCII” or other form. Any alternate format must include the
full Project Gutenberg™ License as specified in paragraph 1.E.1.

1.E.7. Do not charge a fee for access to, viewing, displaying,


performing, copying or distributing any Project Gutenberg™ works
unless you comply with paragraph 1.E.8 or 1.E.9.

1.E.8. You may charge a reasonable fee for copies of or providing


access to or distributing Project Gutenberg™ electronic works
provided that:

• You pay a royalty fee of 20% of the gross profits you derive from
the use of Project Gutenberg™ works calculated using the
method you already use to calculate your applicable taxes. The
fee is owed to the owner of the Project Gutenberg™ trademark,
but he has agreed to donate royalties under this paragraph to
the Project Gutenberg Literary Archive Foundation. Royalty
payments must be paid within 60 days following each date on
which you prepare (or are legally required to prepare) your
periodic tax returns. Royalty payments should be clearly marked
as such and sent to the Project Gutenberg Literary Archive
Foundation at the address specified in Section 4, “Information
about donations to the Project Gutenberg Literary Archive
Foundation.”

• You provide a full refund of any money paid by a user who


notifies you in writing (or by e-mail) within 30 days of receipt that
s/he does not agree to the terms of the full Project Gutenberg™
License. You must require such a user to return or destroy all
copies of the works possessed in a physical medium and
discontinue all use of and all access to other copies of Project
Gutenberg™ works.

• You provide, in accordance with paragraph 1.F.3, a full refund of


any money paid for a work or a replacement copy, if a defect in
the electronic work is discovered and reported to you within 90
days of receipt of the work.

• You comply with all other terms of this agreement for free
distribution of Project Gutenberg™ works.

1.E.9. If you wish to charge a fee or distribute a Project Gutenberg™


electronic work or group of works on different terms than are set
forth in this agreement, you must obtain permission in writing from
the Project Gutenberg Literary Archive Foundation, the manager of
the Project Gutenberg™ trademark. Contact the Foundation as set
forth in Section 3 below.

1.F.

1.F.1. Project Gutenberg volunteers and employees expend


considerable effort to identify, do copyright research on, transcribe
and proofread works not protected by U.S. copyright law in creating
the Project Gutenberg™ collection. Despite these efforts, Project
Gutenberg™ electronic works, and the medium on which they may
be stored, may contain “Defects,” such as, but not limited to,
incomplete, inaccurate or corrupt data, transcription errors, a
copyright or other intellectual property infringement, a defective or
damaged disk or other medium, a computer virus, or computer
codes that damage or cannot be read by your equipment.

1.F.2. LIMITED WARRANTY, DISCLAIMER OF DAMAGES - Except


for the “Right of Replacement or Refund” described in paragraph
1.F.3, the Project Gutenberg Literary Archive Foundation, the owner
of the Project Gutenberg™ trademark, and any other party
distributing a Project Gutenberg™ electronic work under this
agreement, disclaim all liability to you for damages, costs and
expenses, including legal fees. YOU AGREE THAT YOU HAVE NO
REMEDIES FOR NEGLIGENCE, STRICT LIABILITY, BREACH OF
WARRANTY OR BREACH OF CONTRACT EXCEPT THOSE
PROVIDED IN PARAGRAPH 1.F.3. YOU AGREE THAT THE
FOUNDATION, THE TRADEMARK OWNER, AND ANY
DISTRIBUTOR UNDER THIS AGREEMENT WILL NOT BE LIABLE
TO YOU FOR ACTUAL, DIRECT, INDIRECT, CONSEQUENTIAL,
PUNITIVE OR INCIDENTAL DAMAGES EVEN IF YOU GIVE
NOTICE OF THE POSSIBILITY OF SUCH DAMAGE.

1.F.3. LIMITED RIGHT OF REPLACEMENT OR REFUND - If you


discover a defect in this electronic work within 90 days of receiving it,
you can receive a refund of the money (if any) you paid for it by
sending a written explanation to the person you received the work
from. If you received the work on a physical medium, you must
return the medium with your written explanation. The person or entity
that provided you with the defective work may elect to provide a
replacement copy in lieu of a refund. If you received the work
electronically, the person or entity providing it to you may choose to
give you a second opportunity to receive the work electronically in
lieu of a refund. If the second copy is also defective, you may
demand a refund in writing without further opportunities to fix the
problem.

1.F.4. Except for the limited right of replacement or refund set forth in
paragraph 1.F.3, this work is provided to you ‘AS-IS’, WITH NO
OTHER WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.

1.F.5. Some states do not allow disclaimers of certain implied


warranties or the exclusion or limitation of certain types of damages.
If any disclaimer or limitation set forth in this agreement violates the
law of the state applicable to this agreement, the agreement shall be
interpreted to make the maximum disclaimer or limitation permitted
by the applicable state law. The invalidity or unenforceability of any
provision of this agreement shall not void the remaining provisions.
1.F.6. INDEMNITY - You agree to indemnify and hold the
Foundation, the trademark owner, any agent or employee of the
Foundation, anyone providing copies of Project Gutenberg™
electronic works in accordance with this agreement, and any
volunteers associated with the production, promotion and distribution
of Project Gutenberg™ electronic works, harmless from all liability,
costs and expenses, including legal fees, that arise directly or
indirectly from any of the following which you do or cause to occur:
(a) distribution of this or any Project Gutenberg™ work, (b)
alteration, modification, or additions or deletions to any Project
Gutenberg™ work, and (c) any Defect you cause.

Section 2. Information about the Mission of


Project Gutenberg™
Project Gutenberg™ is synonymous with the free distribution of
electronic works in formats readable by the widest variety of
computers including obsolete, old, middle-aged and new computers.
It exists because of the efforts of hundreds of volunteers and
donations from people in all walks of life.

Volunteers and financial support to provide volunteers with the


assistance they need are critical to reaching Project Gutenberg™’s
goals and ensuring that the Project Gutenberg™ collection will
remain freely available for generations to come. In 2001, the Project
Gutenberg Literary Archive Foundation was created to provide a
secure and permanent future for Project Gutenberg™ and future
generations. To learn more about the Project Gutenberg Literary
Archive Foundation and how your efforts and donations can help,
see Sections 3 and 4 and the Foundation information page at
www.gutenberg.org.

Section 3. Information about the Project


Gutenberg Literary Archive Foundation
The Project Gutenberg Literary Archive Foundation is a non-profit
501(c)(3) educational corporation organized under the laws of the
state of Mississippi and granted tax exempt status by the Internal
Revenue Service. The Foundation’s EIN or federal tax identification
number is 64-6221541. Contributions to the Project Gutenberg
Literary Archive Foundation are tax deductible to the full extent
permitted by U.S. federal laws and your state’s laws.

The Foundation’s business office is located at 809 North 1500 West,


Salt Lake City, UT 84116, (801) 596-1887. Email contact links and up
to date contact information can be found at the Foundation’s website
and official page at www.gutenberg.org/contact

Section 4. Information about Donations to


the Project Gutenberg Literary Archive
Foundation
Project Gutenberg™ depends upon and cannot survive without
widespread public support and donations to carry out its mission of
increasing the number of public domain and licensed works that can
be freely distributed in machine-readable form accessible by the
widest array of equipment including outdated equipment. Many small
donations ($1 to $5,000) are particularly important to maintaining tax
exempt status with the IRS.

The Foundation is committed to complying with the laws regulating


charities and charitable donations in all 50 states of the United
States. Compliance requirements are not uniform and it takes a
considerable effort, much paperwork and many fees to meet and
keep up with these requirements. We do not solicit donations in
locations where we have not received written confirmation of
compliance. To SEND DONATIONS or determine the status of
compliance for any particular state visit www.gutenberg.org/donate.

While we cannot and do not solicit contributions from states where


we have not met the solicitation requirements, we know of no
prohibition against accepting unsolicited donations from donors in
such states who approach us with offers to donate.

International donations are gratefully accepted, but we cannot make


any statements concerning tax treatment of donations received from
outside the United States. U.S. laws alone swamp our small staff.

Please check the Project Gutenberg web pages for current donation
methods and addresses. Donations are accepted in a number of
other ways including checks, online payments and credit card
donations. To donate, please visit: www.gutenberg.org/donate.

Section 5. General Information About Project


Gutenberg™ electronic works
Professor Michael S. Hart was the originator of the Project
Gutenberg™ concept of a library of electronic works that could be
freely shared with anyone. For forty years, he produced and
distributed Project Gutenberg™ eBooks with only a loose network of
volunteer support.

Project Gutenberg™ eBooks are often created from several printed


editions, all of which are confirmed as not protected by copyright in
the U.S. unless a copyright notice is included. Thus, we do not
necessarily keep eBooks in compliance with any particular paper
edition.

Most people start at our website which has the main PG search
facility: www.gutenberg.org.

This website includes information about Project Gutenberg™,


including how to make donations to the Project Gutenberg Literary
Archive Foundation, how to help produce our new eBooks, and how
to subscribe to our email newsletter to hear about new eBooks.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and


personal growth!

ebookmass.com

You might also like