Svelte and Sapper in Action

Svelte and Sapper in Action
brief contents
contents
preface
acknowledgments
about this book
Who should read this book
How this book is organized: A roadmap
About the code
liveBook discussion forum
Other online resources
about the author
about the cover illustration
Part 1—Getting Started
1 Meet the players
1.1 Introducing Svelte
1.1.1 Why Svelte?
1.1.2 Rethinking reactivity
1.1.3 Current issues in Svelte
1.1.4 How does Svelte work?
1.1.5 Does Svelte disappear?
1.2 Introducing Sapper
1.2.1 Why consider Sapper?
1.2.2 How does Sapper work?
1.2.3 When should Sapper be used?
1.2.4 When should Sapper not be used?
1.3 Introducing Svelte Native
1.4 How does Svelte compare with other web frameworks?
1.4.1 Angular
1.4.2 React
1.4.3 Vue
1.5 What tools are needed to get started?
Summary
2 Your first Svelte app
2.1 The Svelte REPL
2.1.1 Using the Svelte REPL
2.1.2 Your first REPL app
2.1.3 Saving REPL apps
2.1.4 Sharing REPL apps
2.1.5 REPL URLs
2.1.6 Exporting REPL apps
2.1.7 Using npm packages
2.1.8 REPL limitations
2.1.9 CodeSandbox
2.2 Working outside the REPL
2.2.1 Starting with npx degit
2.2.2 Provided package.json
2.2.3 Important files
2.2.4 Your first non-REPL app
2.3 Bonus app
Summary
Part 2—Deeper into Svelte
3 Creating components
3.1 Content of .svelte files
3.2 Component markup
3.3 Component names
3.4 Component styles
3.5 CSS specificity
3.6 Scoped vs. global styles
3.7 Using CSS preprocessors
3.8 Component logic
3.9 Component state
3.10 Reactive statements
3.11 Module context
3.12 Building a custom component
3.13 Building the Travel Packing app
Summary
4 Block structures
4.1 Conditional logic with {#if}
4.2 Iteration with {#each}
4.3 Promises with {#await}
4.4 Building the Travel Packing app
4.4.1 Item component
4.4.2 Utility functions
4.4.3 Category component
4.4.4 Checklist component
4.4.5 App component
4.4.6 Try it
Summary
5 Component communication
5.1 Component communication options
5.2 Props
5.2.1 Props go in with export
5.2.2 Reacting to prop changes
5.2.3 Prop types
5.2.4 Directives
5.2.5 The bind directive on form elements
5.2.6 bind:this
5.2.7 Props go out with bind
5.3 Slots
5.4 Events
5.4.1 Event dispatching
5.4.2 Event forwarding
5.4.3 Event modifiers
5.5 Context
5.6 Building the Travel Packing app
Summary
6 Stores
6.1 Writable stores
6.2 Readable stores
6.3 Where to define stores
6.4 Using stores
6.5 Derived stores
6.6 Custom stores
6.7 Using stores with classes
6.8 Persisting stores
6.9 Building the Travel Packing app
Summary
7 DOM interactions
7.1 Inserting HTML
7.2 Actions
7.3 The tick function
7.4 Implementing a dialog component
7.5 Drag and drop
7.6 Building the Travel Packing app
Summary
8 Lifecycle functions
8.1 Setup
8.2 The onMount lifecycle function
8.2.1 Moving focus
8.2.2 Retrieving data from an API service
8.3 The onDestroy lifecycle function
8.4 The beforeUpdate lifecycle function
8.5 The afterUpdate lifecycle function
8.6 Using helper functions
8.7 Building the Travel Packing app
Summary
9 Client-side routing
9.1 Manual routing
9.2 Hash routing
9.3 Using the page.js library
9.4 Using path and query parameters with page.js
9.5 Building the Travel Packing app
Summary
10 Animation
10.1 Easing functions
10.2 The svelte/animate package
10.3 The svelte/motion package
10.4 The svelte/transition package
10.5 The fade transition and flip animation
10.6 The crossfade transition
10.7 The draw transition
10.8 Custom transitions
10.9 The transition vs. in and out props
10.10 Transition events
10.11 Building the Travel Packing app
Summary
11 Debugging
11.1 The @debug tag
11.2 Reactive statements
11.3 Svelte Devtools
Summary
12 Testing
12.1 Unit tests with Jest
12.1.1 Unit tests for the Todo app
12.1.2 Unit tests for the Travel Packing app
12.2 End-to-end tests with Cypress
12.2.1 End-to-end tests for the Todo app
12.2.2 End-to-end tests for the Travel Packing app
12.3 Accessibility tests
12.3.1 Svelte compiler
12.3.2 Lighthouse
12.3.3 axe
12.3.4 WAVE
12.4 Component demos and debugging with Storybook
12.4.1 Storybook for Travel Packing app
Summary
13 Deploying
13.1 Deploying to any HTTP server
13.2 Using Netlify
13.2.1 Netlify from the website
13.2.2 Netlify from the command line
13.2.3 Netlify plans
13.3 Using Vercel
13.3.1 Vercel from the website
13.3.2 Vercel from the command line
13.3.3 Vercel tiers
13.4 Using Docker
Summary
14 Advanced Svelte
14.1 Form validation
14.2 Using CSS libraries
14.3 Special elements
14.4 Importing JSON files
14.5 Creating component libraries
14.6 Web components
Summary
Part 3—Deeper into Sapper
15 Your first Sapper app
15.1 Creating a new Sapper app
15.2 Recreating the shopping app with Sapper
Summary
16 Sapper applications
16.1 Sapper file structure
16.2 Page routes
16.3 Page layouts
16.4 Handling errors
16.5 Running on both server and client
16.6 Fetch API wrapper
16.7 Preloading
16.8 Prefetching
16.9 Code splitting
16.10 Building the Travel Packing app
Summary
17 Sapper server routes
17.1 Server route source files
17.2 Server route functions
17.3 A create/retrieve/update/delete (CRUD) example
17.4 Switching to Express
17.5 Building the Travel Packing app
Summary
18 Exporting static sites with Sapper
18.1 Sapper details
18.2 When to export
18.3 Example app
Summary
19 Sapper offline support
19.1 Service worker overview
19.2 Caching strategies
19.3 Sapper service worker configuration
19.4 Service worker events
19.5 Managing service workers in Chrome
19.6 Enabling the use of HTTPS in the Sapper server
19.7 Verifying offline behavior
19.8 Building the Travel Packing app
Summary
Part 4—Beyond Svelte and Sapper
20 Preprocessors
20.1 Custom preprocessing
20.1.1 Using Webpack
20.2 The svelte-preprocess package
20.2.1 Auto-preprocessing mode
20.2.2 External files
20.2.3 Global styles
20.2.4 Using Sass
20.2.5 Using TypeScript
20.2.6 A VS Code tip
20.3 Using Markdown
20.4 Using multiple preprocessors
20.5 Image compression
Summary
21 Svelte Native
21.1 Provided components
21.1.1 Display components
21.1.2 Form components
21.1.3 Action components
21.1.4 Dialog components
21.1.5 Layout components
21.1.6 Navigation components
21.2 Getting started with Svelte Native
21.3 Developing Svelte Native apps locally
21.4 NativeScript styling
21.5 Predefined NativeScript CSS classes
21.6 NativeScript themes
21.7 Comprehensive example
21.8 NativeScript UI component library
21.9 Svelte Native issues
Summary
Appendix A—Resources
A.1 Svelte presentations
A.2 Svelte resources
A.3 Framework comparisons
A.4 Sapper resources
A.5 Svelte Native resources
A.6 Svelte GL resources
A.7 Svelte tools
A.8 Svelte libraries
A.9 VS Code resources
A.10 Learning resources not specific to Svelte
A.11 Tools not specific to Svelte
A.12 Libraries not specific to Svelte
A.13 Assets not specific to Svelte
Appendix B—Calling REST services
B.1 Headers
Appendix C—MongoDB
C.1 Installing MongoDB
C.1.1 Installing MongoDB on Windows
C.1.2 Installing MongoDB on Linux
C.1.3 Installing MongoDB on macOS
C.2 Starting the database server
C.3 Using MongoDB shell
C.4 Using MongoDB from JavaScript
Appendix D—ESLint for Svelte
Appendix E—Prettier for Svelte
Appendix F—VS Code
F.1 VS Code settings
F.2 The Svelte for VS Code extension
F.3 The Svelte 3 Snippets extension
F.4 The Svelte Intellisense extension
Appendix G—Snowpack
G.1 Using Snowpack with Svelte
index
A
B
C
D
E
F
G
H
I
J
L
M
N
O
P
Q
R
S
T
U
V
W
Z