@stencil/types-output-target

Automate the creation of type definitions for your Stencil web components.

• React (v19+ natively supports custom elements)
• Vue (v3+)
• Solid
• Svelte
• Preact

Setup

In Your Stencil Component Library

Install the @stencil/types-output-target package in your Stencil project as a development dependency:

npm install @stencil/types-output-target --save-dev

Configure the output target in your stencil.config.ts file:

import { Config } from '@stencil/core';
import { typesOutputTarget } from '@stencil/types-output-target';

export const config: Config = {
  outputTargets: [
    typesOutputTarget({
      reactTypesPath: 'dist/types',
      vueTypesPath: 'dist/types',
      solidTypesPath: 'dist/types',
      svelteTypesPath: 'dist/types',
      preactTypesPath: 'dist/types',
    }),
  ],
};

Build your Stencil project to generate the framework-specific type definitions:

npm run build

The component wrappers will be generated in the specified output directory.

Peer Dependencies

Ensure that your Stencil component library's package.json includes the necessary peer dependencies for the frameworks you are targeting. For example, for React:

"peerDependencies": {
  "@types/react": ">=19"
},
"peerDependenciesMeta": {
  "@types/react": {
    "optional": true
  }
}

Using the Generated Types

With a directory path like dist/types, each framework gets its own file: react-native-types.d.ts, vue-native-types.d.ts, svelte-native-types.d.ts, solid-native-types.d.ts and preact-native-types.d.ts. Pass a full .d.ts path instead to choose the file name.

Expose each file through your library's package.json exports so consumers can import it:

"exports": {
  "./react-native-types": {
    "types": "./dist/types/react-native-types.d.ts"
  }
}

Your users can then import the generated type definitions to get type support for your Stencil web components in their framework. For example, in a React project:

import 'your-component-library/react-native-types';

Each generated file's header comment shows its import path and the exports entry it needs.