typescriptsveltecarbon-componentscarbon-components-svelte

How can I use a component as a variable when using Svelte and Carbon Components?


When using Carbon Component for Svelte, is it possible to assign a component as a variable, and then pass that variable to a prop?

For example, I'm using the <Modal /> component, whose primary button exposes a primaryButtonIcon prop; I want to assign different icons depending on the state.

Something like this:

let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: WHAT? = <InlineLoading status={uploadStatus} />;

<Modal primaryButtonIcon={primaryButtonIcon} />

But what should I declare the primaryButtonIcon as?


UPDATE:
When I use ...

let uploadStatus: "active" | "inactive" | "finished" | "error" | undefined = "active";
let primaryButtonIcon: typeof SvelteComponent<any> = <InlineLoading status={uploadStatus} />;

... there are errors ...

enter image description here

The error relating to uploadStatus is ...

Cannot redeclare block-scoped variable 'uploadStatus'. ts(2451)

The error relating to primaryButtonIcon is ...

Property 'prototype' is missing in type 'SvelteComponentTyped<InlineLoadingProps, { click: MouseEvent; mouseover: MouseEvent; mouseenter: MouseEvent; mouseleave: MouseEvent; success: CustomEvent<...>; }, {}>' but required in type 'typeof SvelteComponent'. ts(2741)

And the error relating to <InlineLoading /> is ...

Conversion of type 'string' to type 'InlineLoading' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. ts(2352)

Have I declared something wrongly?


Solution

  • The type is shown right in the docs in the "Type" column, it's the base component type from svelte, so:

    import { type SvelteComponent } from 'svelte';
    let primaryButtonIcon: typeof SvelteComponent<any> = ...
    

    (Though one should generally use ComponentType instead.)

    But, you cannot define markup inline in Svelte. It has to be extracted to a self-contained component file.

    (In Svelte 5 snippets allow referencing pieces of markup in the script.)