Svelte and Sapper in Action by Volkmann, Mark -- Read -- Imperial Library of Trantor

Index

Svelte and Sapper in Action Copyright brief contents contents front matter

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

appendixes 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

← Prev
Back
Next →

← Prev
Back
Next →