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