Consumer types

svebcomponents writes framework-neutral declarations beside each browser entry. In addition, template augmentation for Svelte projects is provided out of the box, while React and Vue projects manually compose the exported interfaces in one project declaration file.

Generated interfaces

A component declaration can contain five public interfaces.

Interface	Surface
SimpleComponentElement	DOM properties and typed addEventListener overloads
SimpleComponentEventMap	Event names mapped to CustomEvent<Detail>
SimpleComponentAttributes	Markup attribute names and values
SimpleComponentProps	Property names that need their JavaScript values
SimpleComponentEventHandlers	onchange-style handler properties

DOM

The main declaration augments HTMLElementTagNameMap. Import the component entry, then use standard DOM APIs:

import "my-components";

const element = document.querySelector("simple-component");
element?.count; // number | undefined

element?.addEventListener("change", (event) => {
  event.detail; // generated detail type
});

document.createElement("simple-component") returns the correct element type.

Svelte

svebcomponents outputs a svelte/elements augmentation beside the main declaration:

dist/client/SimpleComponent.svelte-types.d.ts

svebcomponents references this file from the main declaration if your package lists Svelte as a dependency or required peer dependency. Svelte consumers need no project setup in that case.

A framework-neutral package can expose the augmentation as a type-only export:

{
  "exports": {
    "./svelte": {
      "types": "./dist/client/SimpleComponent.svelte-types.d.ts"
    }
  }
}

The consuming Svelte project imports it from a declaration file:

src/app.d.ts

import "my-components/svelte";

React

React 19 assigns rich values to matching custom-element properties and handles custom events. Add this augmentation to the consuming project:

import type { DetailedHTMLProps, HTMLAttributes } from "react";
import type {
  SimpleComponentElement,
  SimpleComponentAttributes,
  SimpleComponentProps,
  SimpleComponentEventHandlers,
} from "my-components";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "simple-component": DetailedHTMLProps<
        HTMLAttributes<SimpleComponentElement>,
        SimpleComponentElement
      > &
        SimpleComponentAttributes &
        SimpleComponentProps &
        SimpleComponentEventHandlers;
    }
  }
}

Vue

Vue’s template checker reads $props and $emit from a component-like type:

import type { HTMLAttributes, PublicProps } from "vue";
import type {
  SimpleComponentElement,
  SimpleComponentAttributes,
  SimpleComponentProps,
  SimpleComponentEventMap,
} from "my-components";

type DefineCustomElement<
  ElementType extends HTMLElement,
  Events extends Record<string, Event>,
  Attributes,
  Props,
> = new () => ElementType & {
  $props: HTMLAttributes & Partial<Attributes> & Partial<Props> & PublicProps;
  $emit: <K extends keyof Events>(event: K, payload: Events[K]) => void;
};

declare module "vue" {
  interface GlobalComponents {
    "simple-component": DefineCustomElement<
      SimpleComponentElement,
      SimpleComponentEventMap,
      SimpleComponentAttributes,
      SimpleComponentProps
    >;
  }
}

Important limitations

• HTML attributes carry strings. Pass arrays and objects through their camel-case property names instead of kebab-case attributes.
• Function and Snippet props are property-only. Assign them through a DOM reference when template syntax treats the prop name as an event handler.
• React custom-element properties and events require React 19.