Force svelte components to adhere to a particular shape

[Jojoshua]

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>

[brunnerh]

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>

[Jojoshua]

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?

[brunnerh]

No

[Jojoshua]

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

[Jojoshua]

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.

[Jojoshua]

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

The gist..

• Create a Component wrapper type - https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/specialty-types.ts
• Add Abstract component using that type (component) and add any extra's as desired (doSomething) https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/AbstractComponentFull.svelte
• Pull a reference to "self" and apply https://github.com/Jojoshua/svelte5-issue1/blob/db7c7d12fe0321eae17e1c1a0054ab87c9c13a01/src/Specialty/S1.svelte#L19

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

[Jojoshua]

Moving to Ideas