Hot swap Svelte components
<script lang="ts">
import cssText from "data-text:./Insights.scss";
import { getGlobalElStyle } from "~cs-helpers/yttm-utils";
function injectStyle() {
const elStyle = getGlobalElStyle();
elStyle.textContent += cssText;
}
injectStyle();
const tabs = {
watchTime: {
title: "Watch Time",
component: import("~popup/components/Insights/tabs/InsightWatchTime.svelte")
}
};
let activeTab = Object.keys(tabs)[0];
</script>
<div class="insights">
<div class="insights__tabs">
{#each Object.keys(tabs) as tab}
<button
class="insights__tab"
class:active={activeTab === tab}
on:click={() => activeTab = tab}
>
{tabs[tab].title}
</button>
{/each}
</div>
<div class="insights__content">
{#await tabs[activeTab].component then component}
<svelte:component this={component.default} />
{/await}
</div>
</div>
<script lang="ts">
import cssText from "data-text:./Insights.scss";
import { getGlobalElStyle } from "~cs-helpers/yttm-utils";
function injectStyle() {
const elStyle = getGlobalElStyle();
elStyle.textContent += cssText;
}
injectStyle();
const tabs = {
watchTime: {
title: "Watch Time",
component: import("~popup/components/Insights/tabs/InsightWatchTime.svelte")
}
};
let activeTab = Object.keys(tabs)[0];
</script>
<div class="insights">
<div class="insights__tabs">
{#each Object.keys(tabs) as tab}
<button
class="insights__tab"
class:active={activeTab === tab}
on:click={() => activeTab = tab}
>
{tabs[tab].title}
</button>
{/each}
</div>
<div class="insights__content">
{#await tabs[activeTab].component then component}
<svelte:component this={component.default} />
{/await}
</div>
</div>
3 Replies
I was able to bypass it by statically importing the component:
<script lang="ts">
import cssText from "data-text:./Insights.scss";
import { getGlobalElStyle } from "~cs-helpers/yttm-utils";
import InsightCategory from "~popup/components/Insights/tabs/InsightCategory/InsightCategory.svelte";
import InsightWatchTime from "~popup/components/Insights/tabs/InsightWatchTIme/InsightWatchTime.svelte";
function injectStyle() {
const elStyle = getGlobalElStyle();
elStyle.textContent += cssText;
}
injectStyle();
const tabs = {
watchTime: {
title: "Watch Time",
component: InsightWatchTime
},
category: {
title: "Category",
component: InsightCategory
}
};
let activeTab = Object.keys(tabs)[0];
</script>
<div class="insights">
<div class="insights__tabs">
{#each Object.keys(tabs) as tab}
<button class="insights__tab" class:active={activeTab === tab} on:click={() => activeTab = tab}>
{tabs[tab].title}
</button>
{/each}
</div>
<div class="insights__content">
<svelte:component this={tabs[activeTab].component} />
</div>
</div>
<script lang="ts">
import cssText from "data-text:./Insights.scss";
import { getGlobalElStyle } from "~cs-helpers/yttm-utils";
import InsightCategory from "~popup/components/Insights/tabs/InsightCategory/InsightCategory.svelte";
import InsightWatchTime from "~popup/components/Insights/tabs/InsightWatchTIme/InsightWatchTime.svelte";
function injectStyle() {
const elStyle = getGlobalElStyle();
elStyle.textContent += cssText;
}
injectStyle();
const tabs = {
watchTime: {
title: "Watch Time",
component: InsightWatchTime
},
category: {
title: "Category",
component: InsightCategory
}
};
let activeTab = Object.keys(tabs)[0];
</script>
<div class="insights">
<div class="insights__tabs">
{#each Object.keys(tabs) as tab}
<button class="insights__tab" class:active={activeTab === tab} on:click={() => activeTab = tab}>
{tabs[tab].title}
</button>
{/each}
</div>
<div class="insights__content">
<svelte:component this={tabs[activeTab].component} />
</div>
</div>
hmm.. it seems the await might be the culprit?
Since that's the only place where a promise error might be thrown
Tho I'm not sure how svelte compiler mount its stuff xd..
No, if I statically load the components and cycle through them, I don't get this error