these don’t have to be well kept

• svelte uses in components in .svelte files

• reactive declarations redefine the thing every time a certain value changes (reactive values, reactive statements)

• you can nest components

  • create props in a nested component to be set by the outer one via export let your-var

• logic blocks in the HTML: if/else, each (iterator, can be keyed), await

  • key block: recreates contents every time a certain value is changed, so the transition runs when a value is changed (not just at the start and end)

• use events to make things happen, create component events, add modifiers, and forward them when they’re nested

• bind inputs so that they are updated automatically throughout

• components have lifecycles, so you can do specific stuff at key points: onMount(), onDestroy(), beforeUpdate(), afterUpdate(), and tick()

• stores have global values that can be accessed by any component that subscribes to it

  • lots of different types of these

• motion: making things move (tweening, where you can set things like duration and easing), and spring for when things are changing often (with stiffness and damping)

• add transitions directly to DOM elements

  • set properties for transitions like fly
  • specify in and out
  • create custom CSS ones, and JS ones
  • svelte dispatches events for the start/end of the intro/outro

• also animate, but the tutorial doesn’t say much about this

• actions are element-level lifecycle functions (?)

• set a class based on another value (shorthand)

  <button
  	class:selected="{current === 'foo'}"
  	on:click="{() => current = 'foo'}"
  >foo</button>
  

  • if the class name is the same as the value it depends on you can just say class:name

• components can have children if you specify where it should go with <slot>

  • for no content, provide a fallback by putting elements inside <slot>
  • use the $$slots variable to check for content in slots (i.e. {#if $$slots.comments} to only render if there are comments)
  • set props for slots

• <svelte:self/> can reference itself recursively as a component (have a Folder in Folder.svelte)

• <svelte:component this={}/> changes components based on the component constructor specified by this

  • if it’s a falsy value, no component is rendered

• add event listeners to the window with <svelte:window/>

  • bind stuff to the window, like scrollY and scrollX
  • similarly, <svelte:body/> (helpful for mouseenter and mouseleave)

• <svelte:head/> is for elements inside the head

• use module context to share code and run it when not attached to the initialization of any component