Real-World Svelte: Supercharge your apps with Svelte 4 by mastering advanced web development concepts [1 ed.] 9781804616031

Table of contents :
Real-World Svelte
Foreword
Contributors
About the author
About the reviewer
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Share Your Thoughts
Download a free PDF copy of this book
Part 1: Writing Svelte Components
1
Lifecycles in Svelte
Technical requirements
Understanding the Svelte lifecycle functions
Initializing the component
Mounting the component
Updating the component
Destroying the component
The one rule for calling lifecycle functions
Refactoring lifecycle functions
Which component to register?
Reusing lifecycle functions in Svelte components
Exercise 1 – Update counter
Composing lifecycle functions into reusable hooks
Coordinating lifecycle functions across components
Exercise 2 – Scroll blocker
Summary
2
Implementing Styling and Theming
Technical requirements
Styling Svelte components in six different ways
Styling with the style attribute
Using style: directives
Adding the block
Adding the class attribute
Simplifying the class attribute with the class: directive
Applying styles from external CSS files
Choosing which method to style Svelte components
Styling Svelte with Tailwind CSS
Setting up Tailwind CSS
Theming Svelte components with CSS custom properties
Defining CSS custom properties
Example – implementing a dark/light theme mode
Allowing users to change the styles of a component
Aligning the fallback value
Summary
3
Managing Props and State
Technical requirements
Defining props and state
Defining props
Defining state
Props versus state
Understanding bindings
One-way versus two-way data flow
Deriving states from props with a reactive declaration
Managing complex derived states
Updating props using derived states
Summary
4
Composing Components
Technical requirements
Manipulating how a child component looks
Passing dynamic content through slots
Providing default slot content
Having multiple slots with named slots
Passing data through slot props
Rendering different HTML element or component types
Creating recursive components for recursive data
Example – a JSON tree viewer
The Container/Presentational pattern
Summary
Part 2: Actions
5
Custom Events with Actions
Technical requirements
Defining actions
Reusing DOM event logic with custom events
Encapsulating logic into a component
Encapsulating logic into an action
Passing parameters to an action
Example – validating form inputs with custom events
Exercise – creating a drag-and-drop event
Summary
6
Integrating Libraries with Actions
Technical requirements
Integrating vanilla JavaScript UI libraries into Svelte
Why use Svelte actions to integrate a UI library?
Using Svelte actions
Adding data to Svelte actions
An alternative to Svelte actions
Choosing between Svelte actions and Svelte components
Example – integrating Tippy.js
Example – integrating CodeMirror
Using UI libraries written in other frameworks
Creating components in various frameworks
Cleaning up the components in various frameworks
Updating the component in various frameworks
Integrating react-calendar into Svelte
Summary
7
Progressive Enhancement with Actions
Technical requirements
What is progressive enhancement?
Progressively enhancing the web experience
Building web pages in layers
Svelte actions for progressive enhancements
Example – previewing a link with a element
Example – progressively enhancing a form
The default form behavior
Implementing the enhance action
Summary
Part 3: Context and Stores
8
Context versus Stores
Defining Svelte context
Using an object as a context key
Changing the context value
Defining the Svelte store
Using the observer pattern
Defining the subscribe function
Defining a Svelte store
Creating Svelte stores with built-in functions
Auto-subscribing to a Svelte store
Choosing between a Svelte context and a Svelte store
Passing dynamic context using a Svelte store
Summary
9
Implementing Custom Stores
Technical requirements
Creating a Svelte store from user events
Ensuring the event listener is only added once
Exercise
Creating an undo/redo store
Implementing the undo/redo logic
Exercise
Creating a debounced higher-order Svelte store
Debouncing store value changes
Subscribing and unsubscribing original store on demand
Deriving a new Svelte store with the derived() function
Using the derived method
Exercise
Summary
10
State Management with Svelte Stores
Technical requirements
Managing states with Svelte stores
Tip 1 – simplify complex state updates with unidirectional data flow
Tip 2 – prefer smaller self-contained state objects over one big state object
Tip 3 – derive a smaller state object from a bigger state object
Using state management libraries with Svelte
Example – using Valtio as a Svelte store
Exercise – transforming an XState state machine into a Svelte store
Summary
11
Renderless Components
Technical requirements
What are renderless components?
Exploring reusable renderless components
Example – building a renderless carousel component
Writing a renderless carousel component
Exercise 1 – a renderless autocomplete component
Turning a declarative description into imperative instructions
Writing declarative Canvas components
Exercise 2 – expanding shape components
Summary
12
Stores and Animations
Technical requirements
Introducing the tweened and spring stores
Using the tweened and spring stores
Using tweened and spring stores with arrays and objects
Examples – creating an animated graph with the tweened and spring stores
Exercise – creating an animating line graph
Creating custom tweened interpolators
Examples – creating an animated image preview
Summary
Part 4: Transitions
13
Using Transitions
Technical requirements
Adding transitions to elements
Svelte’s built-in transitions
Customizing a transition
When are the transitions played?
Handling mixed transition and static elements
Other Svelte logical blocks for transitions
The global modifier
How Svelte transition works under the hood
Creating animations with CSS
Creating animations with JavaScript
Animating transitions in Svelte
Summary
14
Exploring Custom Transitions
Technical requirements
The transition contract
The css function
The tick function
Writing a custom CSS transition using the css function
Writing a custom JavaScript transition using the tick function
Summary
15
Accessibility with Transitions
Technical requirements
What is web accessibility?
Understanding user preference with prefers-reduced-motion
Reducing motion for Svelte transition
Having alternative transitions for inaccessible users
Summary
Index
Why subscribe?
Other Books You May Enjoy
Packt is searching for authors like you
Download a free PDF copy of this book