Append new Item to Div Container in svelte after addEventListener Message

Question

so as you can see I have created a component. And I am reporting to my script that I am listening for a window event listener(message). I actually want to make that every time this EventListnere is called, that I add a new Notification under gold notify box. How would I archive that in svelte. ?

<script>

    import Notification from './Components/Notification.svelte';
    let type,text,time,title,icon,position,top,progress
    let slideIn = true;
    let showNoti;
    $: if(!slideIn) {
        slideIn === false;
    } 

window.addEventListener('message', (event) => {
    showNoti = true;
    if(showNoti) {

        let data = event.data;
        type = data.type
        text = data.text
        time = data.time
        title = data.title
        icon = data.icons;
        top = data.top;
        progress = data.progress;
        position = data.position;
        if(type == "success") {
            type = "success"
        }else if(type == "error") {
            type = "error"
        }else if(type == "money") {
            type = "money"
        }
        setTimeout(() => {
            slideIn = false;
        }, time);
    }
});



</script>


<main> 
{#if showNoti}
    <div class="notif-container {position}" style="top: {top}">
        <div class="notify_box">
                <Notification text={text} type={type} time={time} title={title} icon={icon} position={position} top={top} progress={progress} slideIn={slideIn} />
          </div>
    </div>

{/if}

</main>

<style>
    
</style>

Answer 1

If you want to have a series of notification blocks, you need to use an array. Add the notifications to this array and simply loop over it to show them.

<script>
let notifications = []

window.addEventlistener() {
  // create here a new notifications object and add it to the array
  // make sure to have an assignment to 'notifications'
  notifciation = [...notifications, newNotification];
}
</script>

{#each notification as notification}
  <!-- add markup here -->
  <Notification {...notification} />
{/each}

The code here uses {...notification} to pass the props to the components, this works as long as the property on the component and the property in the object are exactly the same.