Table Of Content

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