Publish to my blog (weekly)

• Events / Event forwarding • Svelte Tutorial

  • But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an on:message event directive without a value means 'forward all message events'.

• Events / Component events • Svelte Tutorial

  • createEventDispatcher must be called when the component is first instantiated — you can't do it later inside e.g. a setTimeout callback.
  • createEventDispatcher must be called when the component is first instantiated — you can't do it later inside e.g. a setTimeout callback

• Events / Event modifiers • Svelte Tutorial

  • improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
  • Useful for client-side form handling,
  • only trigger handler if event.target is the element itself
  • if the event is triggered by a user action.

• Logic / Keyed each blocks • Svelte Tutorial

  • Here, (thing.id) is the key, which tells Svelte how to figure out which DOM node to change when the component updates.

• Reactivity / Updating arrays and objects • Svelte Tutorial

  • Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.
  • A simple rule of thumb: the updated variable must directly appear on the left hand side of the assignment.

• Reactivity / Declarations • Svelte Tutorial

  • which Svelte interprets to mean 're-run this code whenever any of the referenced values change'.

• Svelte Lifecycle Method - onMount -- newline

  • this can be accomplished with an {#await } block!
  • Since async functions always return a Promise, onMount cannot return an unmount function since it must synchronously return a value.

• A comprehensive guide to Svelte components with slots - LogRocket Blog

  • pass data from the child to parent
  • let:names
    • names is coming from the child component Card.

Posted from Diigo. The rest of my favorite links are here.