question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

What is the base class for Svelte components?

See original GitHub issue

I’m using Svelte with TypeScript, and I’ve got a function that should only accept a Svelte component as its argument. I want to be able to do something like this:

import Button from './Button.svelte';

myFunction(Button)
// or perhaps a generic version:
myFunction<Button>()

Needless to say, I want to enforce that the parameter must be a Svelte component, so that if anything else is passed, I get an error:

myFunction(123) // <= Should give an error
myFunction("Hello") // <= Should give an error

I initially intuitively thought it must be the SvelteComponent class, but unfortunately, when I do the following:

import { SvelteComponent } from 'svelte';
import Button from './Button.svelte';
let foo: SvelteComponent = Button;

I get the following error:

Type 'typeof Button__SvelteComponent_' is missing the following properties from type 'SvelteComponentTyped<any, any, any>': $set, $on, $destroy, $$prop_def, and 5 more

image

SvelteComponentTyped doesn’t seem to work either, same error:

import { SvelteComponentTyped } from 'svelte';
import Button from './Button.svelte';
let foo: SvelteComponentTyped = Button;

image

Imported from svelte/internal, still doesn’t work; again, same error:

image

I’ve also created a simple GitHub repo that reproduces the error, in case you need it: https://github.com/AradAral/SvelteBaseClass

Is this intentional or a bug? If it’s intentional I think it can be misleading; and is there, therefore, no way to achieve what I just described in Svelte? Isn’t there any type one would use to enforce a Svelte component?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
aradalvandcommented, Mar 6, 2021

Turns out I was importing SvelteComponent from svelte/internal when I was trying typeof SvelteComponent. Thanks @dummdidumm, @PatrickG.

1reaction
jasonlyu123commented, Mar 6, 2021

For future reference, one is the type of an instance and the other is a function. The example only works because it is basically an empty object.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow to specify custom base class for Svelte Components
Svelte may compiles to Web Component, by producing custom subclass of web browser HTMLElement. New Web Component specs includes new form- ...
Read more >
Special elements / <svelte:component> • Svelte Tutorial
A component can change its category altogether with <svelte:component> . Instead of a sequence of if blocks... The this value can be any...
Read more >
Componentizing our Svelte app - Learn web development
In Svelte, an application is composed from one or more components. A component is a reusable, self-contained block of code that encapsulates ...
Read more >
Build your own component library with Svelte - LogRocket Blog
Svelte is an open source JavaScript component framework for building web applications. Svelte takes a different approach than all the existing ...
Read more >
Svelte strongly type class of components - Stack Overflow
You have to extend the known type to add the additional properties. Since they are static I would try something like this:
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found