Learn Svelte in a gist

11_svelte-file.svelte

<script>
  let x
</script>

<p>markup</p>

<style>
  body {
    background: white;
  }
</style>

12_state.svelte

<script>
  let x = 42
</script>

<p>x is {x}</p>

13_events.svelte

<script>
  let x = 1
  let onClick = () => x = 2
</script>

<button on:click={onClick}>change 1 to 2</button>

14_two-way-binding.svelte

<script>
  let x = '';
</script>

<input type="text" bind:value={x}>

15_attrs.svelte

<script>
  let x = 'green';
</script>

<p style="color: {x}">hi</p>
<button disabled={x !== 'green'}>hi</button>

15_computed-values.svelte

<script>
  let x = 1
  let y = 2
  let z = x + y
</script>

<p>{z}</p>

16_iterate.svelte

<script>
  let xs = ['one', 'two']
</script>

<div>
  {#each xs as x}
    <p>{x}</p>
   {/each}
</div>

17_empty.svelte

<script>
  let xs = []
</script>

<div>
  {#each xs as x}
    <p>{x}</p>
  {:else}
    <p>no xs in state</p>
  {/each}
</div>

18_conditionals.svelte

<script>
  let x = 10
</script>

<div>
  {#if x > 10}
    <p>gt 10</p>
  {:else if x < 10}
    <p>lt 10</p>
  {:else}
    <p>eq 10</p>
  {/if}
</div>

19_components.svelte

<script>
  import Child from './Child.svelte'
</script>

<div>
  <Child />
</div>

20_slots.svelte

<script>
  import X from './X.svelte'
</script>

<X>
  <p>hi</p>
</X>


//X.svelte
<div>
  <p>let's say hi:</p>
  <slot></slot>
</div>

21_named-slots.svelte

<script>
  import X from './X.svelte'
</script>

<div>
  <X>
    <p slot="greet">hi</p>
    <p>unnamed slot</p>
  </X>
</div>



<!-- X.svelte -->
<div>
  <slot name="greet"></slot>
  <p>we just said hello</p>
  <!-- the unnamed slot -->
  <slot></slot>
</div>

// more slot api features https://svelte.dev/docs#slots_object

22_css-classes.svelte

<script>
  let isRed = true
</script>

<p class:red={isRed}>hi</p>

<style>
  .red {
    background: red;
  }
</style>

23_props.svelte

<!-- Child.svelte -->
<script>
  export let x = 'default value'
</script>

<p>{x}</p>

<!-- Parent.svelte -->
<script>
  let x = 'displayed value'
</script>

<Child x={x} />

24_.props2.svelte

<!-- Parent.svelte can pass as -->
<Child {x} />

25_emit-events.svelte

<!-- Parent.svelte -->
<script>
  let isShowing = false
  let showThing = () => isShowing = true
</script>

<div>
  <Child on:click={showThing} />
  {#if isShowing}
    <p>hi</p>
  {/if}
</div>


<!-- Child.svelte -->
<button on:click>show thing</button>

26_event-modifiers.svelte

<button on:click|preventDefault>hi</button>
<!-- https://svelte.dev/docs#on_element_event -->