Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Force svelte components to adhere to a particular shape #15552

Jojoshua started this conversation in Ideas
Discussion options

Scenario: You have multiple components that should all have the same set of methods.

I want to set the props interface over all the components such that it forces each component to implement certain methods I say are required. In other languages this would be something like an abstract class. Can I do this in svelte?

<script lang="ts">
 export interface Props {
 name?: string;
 }
 let { name = "world" }: Props = $props();
 //Require this function be defined in all components
 function GetArea(){
 }
 //Require this function be defined in all components
 function Save(){
 }
 </script>
You must be logged in to vote

Replies: 6 comments 1 reply

Comment options

Functions that are not exported have no effect on a component's API, so there should not be much of a point in enforcing this from a component interaction standpoint.

Though even if you do export them, the types of exports are inferred and cannot be set collectively with the exception of the part that is governed by the props.

You could collect the various functions into an object, type and export that.

// api.ts
export interface Api {
 doThing(value: number): void;
 log(): void;
}
<!-- A.svelte -->
<script lang="ts">
 import type { Api } from './api';

 function doThing(value: number) {
 // ...
 }

 function log() {
 console.log('hello from A');
 }

 export const api: Api = { doThing, log };
</script>
You must be logged in to vote
0 replies
Comment options

If there was a way for the component to force typings on its exports like it can its props I think we'd be in business....is there a concept for that?

You must be logged in to vote
1 reply
Comment options

No

Comment options

What do you think about this as a workaround...basically create another Svelte component which acts as behalf of an abstract class. Then for each component, it would add a reference to this component to enforce the type checking on it's abstract methods

sveltejs/language-tools#2720 -- this is a bug report but the concept should apply regardless of the bug https://github.com/Jojoshua/svelte5-issue1/tree/master/src/Specialty

You must be logged in to vote
0 replies
Comment options

I'm going to refer to this pattern as an AbstractComponent https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/AbstractComponent.svelte , it seems to fit my needs so far. Would be nice if Svelte had an official concept for this though.

You must be logged in to vote
0 replies
Comment options

Here's an idea to force the entire component including the exports.

The gist..

This allows the component to force itself to have all the props, exports, and non-exports as desired.

You must be logged in to vote
0 replies
Comment options

Moving to Ideas

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Ideas
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /