svelte-tutorial-notes

Notes taken from a svelte tutorial. No actual code.

I took this Svelte.js - The Complete Guide (incl. Sapper.js) tutorial on Udemy and these are my cheatsheet notes.

1. $: variable = something relying on some other variable is essentially a memoize function

2. class:className={bool} optional class

3. arrays: never mutate, always recreate

4. export let is for external props

5. {#if}...{:else if}...{:else}...{/if}

6. on:event event forwarding, for using an event passed down from above OR for getting dispatched events from below

7. dispatch('eventName', data) from createEventDispatcher() for passing data up

8. slots can be default unnamed, or named, filled with default html, or empty.

9. <h1 slot="title"/> targets <slot name="title"/>

10. <Component let:myVar> gets myVar from <Component><slot myVar={myVar}/></Component>

11. Lifecycle onMount beforeUpdate afterUpdate tick(promise) onDestroy

12. <input bind:value> varies by input type. bind:group is cool.

13. <Component bind:myVar={localVar}/> IF and ONLY IF type is not set on downstream <input/> its binding to

14. bind:this={myRef} is ref to html element. For read.

15. Use store when data shared outside of parent/child relationship

       store = writeable(defaultValue)
       unsubscribe = store.subscribe(storeData => {}) //must unsubscribe on destroy!
       store.set(newVal)
       store.update(storeData => {})
       {#each $store as item} //auto handles subscriptions
       <p>{$store}</p>` //auto handles subscriptions
    

16.  readableStore = readable(storeData, set => { 
       do some repeatable/automatic stuff; 
       set(newStoreData); 
       return unsubscribe fn
     })    
     unsubscibe = readableStore.subscribe(storeData => {})
    

17. animatedValue = tweened(value, {delay, duration, easing}) from motion

18. physicsAnimatedValue = spring(value, {siffness, damping, precision}) from motion

19. <div transition:fade={{delay, duration, easing, ...etc}} /> etc from transition or <div in:fade out:fly /> if you want different

20. {#await fn}...{:then data}...{:catch err}...{/await}

21. <svelte:component this={Component}/>

22. <script context="module"> runs once when first instance of component is loaded

23. [slug].svelte for dynamic routing, then {slug} = page.params

24. export function preload(page){ reutrn this.fetch('')} fetches data serverside on first page. clientside thereafter

25. Preloads as you hover over a link before you even click it for super speeds

26. Lots of deploy options. take time to think.