{
  c() {
    h1 = element("h1");
    t0 = text("Hello ");
    t1 = text(name);
    t4 = space();
    img = element("img");
  },
  m(target, anchor) {
    insert(target, h1, anchor);
    append(h1, t0);
    append(h1, t1);
    insert(target, t4, anchor);
    insert(target, img, anchor);
  }
};

App.svelte

// only 1 script
<script>
	
</script>

// only 1 style
<style>
	
	
</style>

// the rest is view
<p>Text</p>
<Test />

// App.svelte

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

<h1>Some title</h1>
<Button>Click me</Button>

<h1>HTML Tags</h1>

<a href="/pages/{nextPage}">Next</a>

<a href={nextPageURL}>Next</a>

<CustomComponent {...props} />

<p>Page is {currentPage}</p>

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

{#each expression as name}...{:else}...{/each}

{#await promise}

  <!-- promise is pending -->
  <p>waiting for the promise to resolve...</p>
  
{:then value}

  <!-- promise was fulfilled -->
  <p>The value is {value}</p>
  
{:catch error}

  <!-- promise was rejected -->
  <p>Something went wrong: {error.message}</p>
  
{/await}

p {
  color: tomato; // p.svelte-1fj21zt{ color:tomato }
}

:global(.text) {
  color: teal; // .text{ color:teal }
}

:global(div > strong) {
  color: blue; // div > strong{ color:blue }
}

:global(body) {
  margin: 0; // body{ margin:0 }
}

div :global(strong) {
  color: goldenrod; // div.svelte-1fj21zt strong{ color:goldenrod }
}

<script>
  // props
  export searchQuery = ""
  export initialPageItems = []
  
  // state
  let fetchState = "pending"
  let allItems = [].concat(initialPageItems);
  
  // Normal variable
  const PER_PAGE = 10
</script>

<script>
  import {onMount, onDestroy, beforeUpdate, afterUpdate} from "svelte"
  
  onMount(() => {
    // code
    
    return () => {
      // cleanup
    }
  })
  
  onDestroy(() => {
    // cleanup
  })
</script>

import {writable} from "svelte/store"

export const userStore = writable({username: '', repos: []})

/*
  const unsub = userStore.subscribe(value => {
    // do something with updated value
  })
    
  userStore.update(currentState => newState)
    
  userStore.set(newState)
*/

<script>
  import {timerStore} from './timerStore.js'
  
  let timer
  let id
  
  id = timerStore.subscribe(newTime => {
    timer = newTime
  })
  
  onDestory(() => {
    clearInterval(id)
  })
</script>

<p>Timer: {timer}</p>

<script>
  import {timerStore} from './timerStore.js'
</script>

<p>Timer: {$timerStore.value}</p>

import {readable} from "svelte/store"

export const userStore = readable(defaultValue, (setState) => {
  setState(...)
  
  return () => {
   // unsubscribe
  }
})

import {readable} from "svelte/store"

export const userStore = readable(defaultValue, (setState) => {
  setState(...)
  
  return () => {
   // unsubscribe
  }
})

const start = new Date();

export const elapsed = derived(
  time,
  $time => Math.round(($time - start) / 1000)
);

// recurive components
<svelte.self />

// bind to window events
// attach event handlers
<svelte.window />

// Same as Helmet in React
<svelte.head />

// attach to body events
// bind to body values
<svelte.body />

// Button.svelte

<button>

  <slot></slot>
  
  <slot>
    <strong>Fallback of no children</strong>
  </slot>
  
</button>

// Button.svelte

<button>

  <slot name="icon"></slot>
  <slot name="text"></slot>
  
</button>


// App.svelte

<Button>
  <slot name="icon">
    <svg />
  </slot>
  
  <slot name="text">
    <em>Italic button text</em>
  </slot>
</Button>