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

Question

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 ...

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?

brunnerh · Accepted Answer · 2024-02-14 18:54:21Z

1

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.)

answered Feb 14, 2024 at 18:54

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

awj Over a year ago

I had already tried this, and it produces errors. I've updated the OP with more information.

brunnerh Over a year ago

As I said, that is invalid, you cannot just have markup in the script. You only can reference a component class, nothing else. E.g. let primaryButtonIcon: typeof SvelteComponent<any> = MyLoadingComponent. You could potentially define a function that wraps the component instantiation, returning a new component constructor, see e.g. this question.

awj Over a year ago

When you wrote that "you cannot define markup inline in Svelte" I didn't appreciate that you were referring to props.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related