How I can pass my event handler as $$restProps to child component

Question

I have an input component like this:

<script lang="ts"></script>

<div class="wrap-input">
  <input
    class='input'
    type="text"
    {...$$restProps}
  />
</div>

<style lang="scss">
  // some styles
</style>

I used input component on the parent:

<script lang="ts">

  // function event handler
  const onKeyUp = (event) => {
    console.log(event)
  }
</script>

<main>
  <Input
    on:keyup={onKeyUp} // How I can send this event to input component as $$restProps
    className="input-todo"
    placeholder="What needs to be done ?"
  />
</main>

<style lang="scss">
  // some styles
</style>

Answer 1

Based on the event-forwarding tutorial,
on:keyup event directive without a value means 'forward all keyup events', so you can change your Input component to:

<div class="wrap-input">
  <input
    class='input'
    type="text"
    on:keyup
    {...$$restProps}
  />
</div>

Example