<h1>Simple Component</h1>

<h1>Simple Component</h1>

<h1>Simple Component</h1>

import { SvelteComponent, detach, element, init,
         insert, noop, safe_not_equal } from "svelte/internal";

function create_fragment(ctx) {
  let h1;

  return {
    c() {
      h1 = element("h1");
      h1.textContent = "Simple Component";
    },
    m(target, anchor) {
      insert(target, h1, anchor);
    },
    p: noop,
    i: noop,
    o: noop,
    d(detaching) {
      if (detaching) detach(h1);
    },
  };
}

class SimpleComponent extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default SimpleComponent;

<h1>Simple Component</h1>

/* Component.svelte generated by Svelte v3.57.0 */
import { SvelteComponent, detach, element, init, insert, noop,
         safe_not_equal } from "svelte/internal";

function create_fragment(ctx) {
  let h1;
  
  return {
    c() {
      h1 = element("h1");
      h1.textContent = "Simple Component";
    },
    m(target, anchor) {
      insert(target, h1, anchor);
    },
    p: noop,
    i: noop,
    o: noop,
    d(detaching) {
      if (detaching) detach(h1);
    },
  };
}

class Component extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default Component;

<script>
  // STATE & BEHAVIOR
</script>

<!-- DECLARATIVE MARKUP -->
<h1>Hello JSDays!</h1>
<p>{"Put your JS expressions in curly braces."}</p>

<style>
  /* PRESENTATION */
</style>

<script>
    const str = "a string";
    const num = 12345;
    const bool = true;
    const obj = {key: "value"};
    const arr = [1, 2, 3, 4, 5];
    
    function callback() {
        console.log("callback");
    }
</script>

<AnyComponent 
    stringProp={str}
    numberProp={num}
    booleanProp={bool}
    objectProp={obj}
    arrayProp={arr}
    {callback} 
/>

<script>
  export let stringProp = "";
  export let numberProp = 0;
  export let booleanProp = true;
  export let objectProp = {key: "value"};
  export let arrayProp = [1, 2, 3];
  export let callback = () => undefined;
</script>

<p>{stringProp}</p>
<p>{numberProp}</p>
<p>{booleanProp}</p>

{#each Object.entries(objectProp) as [key, value]}
  <p>{key}: {value}</p>
{/each}

{#each arrayProp as value}
  <p>{value}</p>
{/each}

<button on:click={callback}>Call back</button>

<script>
  import Form from './Form.svelte';
  
  function handleSubmit(event) {
    
    /* here the shared information can be found, 
     * as Svelte events are just instances of 
     * CustomEvent */
    const { detail } = event;
    console.log({detail});
  }
</script>

<Form on:submit={handleSubmit} />

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  async function submitForm() {
    await postForm();
    dispatch("submit", { /* any information to share */ }
  }
</script>

<form on:submit={submitForm}>
  <!-- form content -->
</form>

<script>
  import Form from './Form.svelte';
  
  function handleSubmit(event) {    
    /* here the shared information can be found, 
     * as Svelte events are just instances of 
     * CustomEvent */
    const { detail } = event;
    console.log({detail});
  }
</script>

<Form on:submit={handleSubmit} />

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  async function submitForm() {
    await postForm();
    dispatch("submit", { /* any information to share */ }
  }
</script>

<form on:submit={submitForm}>
  <!-- form content -->
</form>

<script>
  import Form from './Form.svelte';
  
  function handleSubmit(event) {    
    /* here the shared information can be found, 
     * as Svelte events are just instances of 
     * CustomEvent */
    const { detail } = event;
    console.log({detail});
  }
</script>

<Form on:submit={handleSubmit} />

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  async function submitForm() {
    await postForm();
    dispatch("submit", { /* any information to share */ }
  }
</script>

<form on:submit={submitForm}>
  <!-- form content -->
</form>

<script>
  import Form from './Form.svelte';
  
  function handleSubmit(event) {    
    /* here the shared information can be found, 
     * as Svelte events are just instances of 
     * CustomEvent */
    const { detail } = event;
    console.log({detail});
  }
</script>

<Form on:submit={handleSubmit} />

<form on:submit>
  <!-- form content -->
</form>

<script>
  import Form from './Form.svelte';
  
  async function handleSubmit(event) {
    const data = FormData(event.target);
    await postData(data);
  }
</script>

<Form on:submit={handleSubmit} />

<script>
  import AnotherComponent from './AnotherComponent.svelte';
  
  function callback() {
    console.log("I am a callback. Arguments: ", ...arguments);
  }
</script>

<AnotherComponent {callback} />

<script>
  export let callback;
</script>

<button on:click={callback}>
  Click me!
</button>

<script>
  import Button from './Button.svelte';
  
  function handleButtonElementClick() {
    console.log("Button element clicked.");
  }
  
  function handleButtonComponentClick() {
    console.log("Button component clicked.");
  }
</script>

<button on:click={handleButtonElementClick}>Button element</button>
<Button onClick={handleButtonComponentClick}>Button Component</Button>