preface
acknowledgments
about this book
about the author
about the cover illustration
Part 1 Getting Started
1 Meet the players
Introducing Svelte
Why Svelte?
Rethinking reactivity
Current issues in Svelte
How does Svelte work?
Does Svelte disappear?
Introducing Sapper
Why consider Sapper?
How does Sapper work?
When should Sapper be used?
When should Sapper not be used?
Introducing Svelte Native
How does Svelte compare with other web frameworks?
Angular
React
Vue
What tools are needed to get started?
2 Your first Svelte app
The Svelte REPL
Using the Svelte REPL
Your first REPL app
Saving REPL apps
Sharing REPL apps
REPL URLs
Exporting REPL apps
Using npm packages
REPL limitations
CodeSandbox
Working outside the REPL
Starting with npx degit
Provided package.json
Important files
Your first non-REPL app
Bonus app
Part 2 Deeper into Svelte
3 Creating components
Content of .svelte files
Component markup
Component names
Component styles
CSS specificity
Scoped vs. global styles
Using CSS preprocessors
Component logic
Component state
Reactive statements
Module context
Building a custom component
Building the Travel Packing app
4 Block structures
Conditional logic with {#if}
Iteration with {#each}
Promises with {#await}
Building the Travel Packing app
Item component
Utility functions
Category component
Checklist component
App component
Try it
5 Component communication
Component communication options
Props
Props go in with export
Reacting to prop changes
Prop types
Directives
The bind directive on form elements
bind:this
Props go out with bind
Slots
Events
Event dispatching
Event forwarding
Event modifiers
Context 1
Building the Travel Packing app
6 Stores
Writable stores
Readable stores
Where to define stores
Using stores
Derived stores
Custom stores
Using stores with classes
Persisting stores
Building the Travel Packing app
7 DOM interactions
Inserting HTML
Actions
The tick function
Implementing a dialog component
Drag and drop
Building the Travel Packing app
8 Lifecycle functions
Setup
The onMount lifecycle function
Moving focus
Retrieving data from an API service
The onDestroy lifecycle function
The beforeUpdate lifecycle function
The afterUpdate lifecycle function
Using helper functions
Building the Travel Packing app
9 Client-side routing
Manual routing
Hash routing
Using the page.js library
Using path and query parameters with page.js
Building the Travel Packing app
10 Animation
Easing functions
The svelte/animate package
The svelte/motion package
The svelte/transition package
The fade transition and flip animation
The crossfade transition
The draw transition
Custom transitions
The transition vs. in and out props
Transition events
Building the Travel Packing app
11 Debugging
The @debug tag
Reactive statements
Svelte Devtools
12 Testing
Unit tests with Jest
Unit tests for the Todo app
Unit tests for the Travel Packing app
End-to-end tests with Cypress
End-to-end tests for the Todo app
End-to-end tests for the Travel Packing app
Accessibility tests
Svelte compiler
Lighthouse
axe
WAVE
Component demos and debugging with Storybook
Storybook for Travel Packing app
13 Deploying
Deploying to any HTTP server
Using Netlify
Netlify from the website
Netlify from the command line
Netlify plans
Using Vercel
Vercel from the website
Vercel from the command line
Vercel tiers
Using Docker
14 Advanced Svelte
Form validation
Using CSS libraries
Special elements
Importing JSON files
Creating component libraries
Web components
Part 3 Deeper into Sapper
15 Your first Sapper app
Creating a new Sapper app
Recreating the shopping app with Sapper
16 Sapper applications
Sapper file structure
Page routes
Page layouts
Handling errors
Running on both server and client
Fetch API wrapper
Preloading
Prefetching
Code splitting
Building the Travel Packing app
17 Sapper server routes
Server route source files
Server route functions
A create/retrieve/update/delete (CRUD) example
Switching to Express
Building the Travel Packing app
18 Exporting static sites with Sapper
Sapper details
When to export
Example app
19 Sapper offline support
Service worker overview
Caching strategies
Sapper service worker configuration
Service worker events
Managing service workers in Chrome
Enabling the use of HTTPS in the Sapper server
Verifying offline behavior
Building the Travel Packing app
Part 4 Beyond Svelte and Sapper
20 Preprocessors
Custom preprocessing
Using Webpack
The svelte-preprocess package
Auto-preprocessing mode
External files
Global styles
Using Sass
Using TypeScript
A VS Code tip
Using Markdown
Using multiple preprocessors
Image compression
21 Svelte Native
Provided components
Display components
Form components
Action components
Dialog components
Layout components
Navigation components
Getting started with Svelte Native
Developing Svelte Native apps locally
NativeScript styling
Predefined NativeScript CSS classes
NativeScript themes
Comprehensive example
NativeScript UI component library
Svelte Native issues
Appendixes:
A Resources
B Calling REST services
C MongoDB
D ESLint for Svelte
E Prettier for Svelte
F VS Code
G Snowpack
index