To generate TypeScript declaration files (.d.ts) for a Svelte component library bundled with Rollup, you can use the rollup-plugin-dts plugin. This plugin allows you to generate declaration files from your TypeScript source files during the Rollup build process.

Here's a step-by-step guide on how to set up .d.ts generation for a Svelte component library using Rollup:

  1. Install Dependencies: First, make sure you have the necessary dependencies installed in your project:

    npm install rollup rollup-plugin-svelte svelte typescript rollup-plugin-dts --save-dev
  2. Create a Rollup Configuration File: Create a rollup.config.js file in the root of your project. This file will contain the Rollup configuration settings.

    // rollup.config.js import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import typescript from 'rollup-plugin-typescript2'; import dts from 'rollup-plugin-dts'; export default [ // Bundle your Svelte components to JavaScript { input: 'src/index.ts', output: [ { file: 'dist/bundle.js', format: 'es', sourcemap: true, }, ], plugins: [ svelte(), resolve(), commonjs(), typescript(), ], }, // Generate TypeScript declaration files (.d.ts) { input: 'src/index.ts', // Entry point of your TypeScript source files output: { file: 'dist/index.d.ts', format: 'es', }, plugins: [dts()], }, ];
  3. Set Up Your Project Structure: Organize your project with the following structure:

    ├── src/ | ├── index.ts // Entry point of your TypeScript source files | └── YourComponent.svelte // Your Svelte component files ├── rollup.config.js └── package.json
  4. Configure TypeScript: Make sure you have a tsconfig.json file in the root of your project. Ensure that the declaration and declarationDir options are set to true in the tsconfig.json to enable TypeScript declaration generation.

    { "compilerOptions": { "declaration": true, "declarationDir": "dist", "outDir": "dist" // Other TypeScript compiler options... }, "include": ["src"] }
  5. Run the Build: Run the Rollup build to generate the JavaScript bundle and the TypeScript declaration file.

    rollup -c

    This will generate the dist/bundle.js and dist/index.d.ts files.

Now you have a Svelte component library bundled with Rollup, and the TypeScript declaration file (index.d.ts) is automatically generated in the dist directory during the build process. Consumers of your library will be able to benefit from TypeScript type checking when using your components.

Have questions or queries?
Get in Touch