The goal:
The end goal is to simply get TabItem's title and icon to update based on the (in this example) Dashboard.svelte's title and icon from within itself, rather than the state for these properties being managed within TabItem, this makes each display component like Dashboard responsible for it's own information which makes sense to me. Here is the code I currently have:
TabsContainer.svelte
Note that this is just the snippet that really matters from here:
<div class="outer-tab-container"><div class="tab-items-container"> {#each tabItems as tabItem, i}<TabItem active={activeTabIndex === i} component={tabItem.component} onSelected={() => onTabSelected(i)} onClose={() => onTabClose(i)} /> {/each}</div><div class="tab-content-container"><!-- Render all components, but only show the active one based on index comparison --> {#each tabItems as tabItem, i}<div style="display: {activeTabIndex === i ? 'block' : 'none'};"><tabItem.component this={tabItem.component} bind:this={tabItem.instance} /></div> {/each}</div></div>TabItem.svelte
This holds the component... not the instance (I wish I could get it to hold the instance but after trying many things this didn't seem to work out):
<script> import { onMount } from "svelte"; let { component, active = false, onSelected = () => {}, onClose = () => {}, } = $props(); let instance = $derived(component.instance); let title = $derived(instance?.title); // let icon = $derived(instance.icon);</script><button class="tab-item" class:active={active} onclick={onSelected} role="tab" aria-selected={active}><!-- <i class={icon}></i> --><span> {title}</span><div class="close" onclick={onClose} title="Close tab" tabindex="0" role="button" aria-label="Close tab" aria-hidden="true" aria-controls="tab-content" aria-describedby="tab-content"> x</div></button>Dashboard.svelte
This is a simple example of what a tab item should be.
<script> import { onMount } from "svelte"; let { title = "Dashboard", icon = "fa fa-home", instance = null } = $props();</script><div><h1><i class={icon}></i> {title}</h1></div>Note that I'm very aware I'm not using TS, I am just trying to understand Svelte 5's way of handling this kind of thing. Also note that I have achieved this with Svelte 4 but after trying literally 20-30 different ways of doing this I can't get it to work atall so you're seeing v31 of my attempts to get this to work so I apologise in advance if I'm barking up the completely wrong tree 😂 I've been going around in circles for 3 days now.
Any help is greatly appreciated but as I say, I would really like the Dashboard component here to be responsible for it's own information such as title and icon, I do not want the TabItem to have to maintain a seperate state for it, if that makes sense.
Thanks In advance for any help atall!😀