Svelte and Sapper in Action

456 Pages·2020·23.884 MB·English

by  Mark Volkmann

R. Mark Volkmann
M A N N I N G
Svelte and Sapper in Action

Svelte and Sapper
in Action
R. MARK VOLKMANN
MANNING
SHELTER ISLAND
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2020 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning Publications
was aware of a trademark claim, the designations have been printed in initial caps or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Recognizing also our responsibility to conserve the resources of our planet, Manning books
are printed on paper that is at least 15 percent recycled and processed without the use of
elemental chlorine.
Development editor: Jenny Stout
Technical development editor: Alain Couniot
Manning Publications Co. Review editor: Mihaela Batinic
20 Baldwin Road Production editor: Lori Weidert
PO Box 761 Copy editor: Andy Carroll
Shelter Island, NY 11964 Proofreader: Keri Hales
Technical proofreader: Erik Vullings
Typesetter: Dennis Dalinnik
Cover designer: Marija Tudor
ISBN: 9781617297946
Printed in the United States of America
brief contents
PART 1 GETTING STARTED. ......................................................1
1 ■ Meet the players 3
2 ■ Your first Svelte app 19
PART 2 DEEPER INTO SVELTE..................................................41
3 ■ Creating components 43
4 ■ Block structures 64
5 ■ Component communication 82
6 ■ Stores 106
7 ■ DOM interactions 124
8 ■ Lifecycle functions 141
9 ■ Client-side routing 152
10 ■ Animation 170
11 ■ Debugging 190
12 ■ Testing 198
13 ■ Deploying 235
14 ■ Advanced Svelte 242
v
vi BRIEF CONTENTS
PART 3 DEEPER INTO SAPPER ................................................261
15 ■ Your first Sapper app 263
16 ■ Sapper applications 271
17 ■ Sapper server routes 289
18 ■ Exporting static sites with Sapper 307
19 ■ Sapper offline support 321
PART 4 BEYOND SVELTE AND SAPPER.....................................341
20 ■ Preprocessors 343
21 ■ Svelte Native 356
appendix A ■ Resources 391
appendix B ■ Calling REST services 397
appendix C ■ MongoDB 400
appendix D ■ ESLint for Svelte 407
appendix E ■ Prettier for Svelte 409
appendix F ■ VS Code 411
appendix G ■ Snowpack 415
contents
preface xv
acknowledgments xvi
about this book xviii
about the author xxiii
about the cover illustration xxiv
PART 1 GETTING STARTED..............................................1
1 Meet the players 3
1.1 Introducing Svelte 4
Why Svelte? 4 ■ Rethinking reactivity 9 ■ Current issues in
Svelte 11 ■ How does Svelte work? 11 ■ Does Svelte
disappear? 13
1.2 Introducing Sapper 13
Why consider Sapper? 14 ■ How does Sapper work? 15 ■ When
should Sapper be used? 16 ■ When should Sapper not be used? 16
1.3 Introducing Svelte Native 16
1.4 How does Svelte compare with other web
frameworks? 17
Angular 17 ■ React 17 ■ Vue 17
1.5 What tools are needed to get started? 18
vii
viii CONTENTS
2 Your first Svelte app 19
2.1 The Svelte REPL 20
Using the Svelte REPL 20 ■ Your first REPL app 22
Saving REPL apps 26 ■ Sharing REPL apps 28
REPL URLs 28 ■ Exporting REPL apps 29 ■ Using npm
packages 29 ■ REPL limitations 30 ■ CodeSandbox 30
2.2 Working outside the REPL 31
Starting with npx degit 31 ■ Provided package.json 33
Important files 33 ■ Your first non-REPL app 35
2.3 Bonus app 37
PART 2 DEEPER INTO SVELTE........................................41
3 Creating components 43
3.1 Content of .svelte files 44
3.2 Component markup 45
3.3 Component names 47
3.4 Component styles 48
3.5 CSS specificity 49
3.6 Scoped vs. global styles 50
3.7 Using CSS preprocessors 53
3.8 Component logic 53
3.9 Component state 54
3.10 Reactive statements 55
3.11 Module context 57
3.12 Building a custom component 59
3.13 Building the Travel Packing app 60
4 Block structures 64
4.1 Conditional logic with {#if} 65
4.2 Iteration with {#each} 66
4.3 Promises with {#await} 67
4.4 Building the Travel Packing app 70
Item component 71 ■ Utility functions 73 ■ Category
component 73 ■ Checklist component 76 ■ App
component 79 ■ Try it 80
CONTENTS ix
5 Component communication 82
5.1 Component communication options 83
5.2 Props 83
Props go in with export 84 ■ Reacting to prop changes 86
Prop types 86 ■ Directives 87 ■ The bind directive on form
elements 88 ■ bind:this 90 ■ Props go out with bind 92
5.3 Slots 96
5.4 Events 97
Event dispatching 97 ■ Event forwarding 99 ■ Event
modifiers 99
5.5 Context 100
5.6 Building the Travel Packing app 101
6 Stores 106
6.1 Writable stores 107
6.2 Readable stores 108
6.3 Where to define stores 109
6.4 Using stores 109
6.5 Derived stores 116
6.6 Custom stores 117
6.7 Using stores with classes 118
6.8 Persisting stores 122
6.9 Building the Travel Packing app 123
7 DOM interactions 124
7.1 Inserting HTML 125
7.2 Actions 128
7.3 The tick function 129
7.4 Implementing a dialog component 132
7.5 Drag and drop 135
7.6 Building the Travel Packing app 137
8 Lifecycle functions 141
8.1 Setup 142
8.2 The onMount lifecycle function 143
Moving focus 143 ■ Retrieving data from an API service 144