Categories
svelte

Svelte: the missing manual

  • By default, the css specified in one file does not leak to other pages or files, even when that component is nested
  • By default, it is cross site script protected, but you can undo with the @html tag
  • $: at the beginning of a line signifies you are subscribing the variables in that line to react when the values change, and to update the UI accordingly
  • Statements like {#await promise}<p>…waiting</p>{:then number}<p>The number is {number}</p>{:catch error}<p>{error.message}</p>{/await} show you how you can have async promises embeded in the display code itself.
  • Directives allow you to listen to events:
    • <div on:pointermove={handleMove}>The pointer is at {m.x} x {m.y}</div>
    • <script> let m = {x:0, y:0} function handleMove(event){m.x=event.clientX; m.y=event.clientY}</script>

Leave a Reply

Your email address will not be published. Required fields are marked *