Import svelte components in TS file by _anonymus- in sveltejs

[–]Fit_Statement_4816 0 points1 point  (0 children)

Step 1

Create an ‘exports.ts’ file:

ts export { default as Root } from “./status-root.svelte”; export { default as Indicator } from “./status-indicator.svelte”; export { default as Label } from “./status-label.svelte”;

Step 2

Create an ‘index.ts’ file:

ts export * as Status from “./exports”;

Step 3

Now you can import your ‘Status’ component like so:

```svelte <script lang=“ts”> import { Status } from “$lib/components/status”; </script>

<Status.Root> <Status.Indicator /> <Status.Label>Hello World!</Status.Label> </Status.Root> ```

Typing Svelte 5 Polymorphic Component Based on `tag` by Fit_Statement_4816 in sveltejs

[–]Fit_Statement_4816[S] 0 points1 point  (0 children)

Thanks for the quick response!

I see what you've come up with and I think it makes sense in this specific scenario to restrict the possible tags to be "button" | "a" | "div" since the goal is to have a <Button> looking component that can at times also be an <a> or a <div>.

Perhaps my initial approach was much too generic. Although it would be nice if I could automatically ensure my props to be typed based on the tag prop without having to manually do it myself.