rollup-plugin-dts leaves leftover d.ts files

Question

Very trivial problem it seems. I have a rollup typescript config using rollup-plugin-typescript and rollup-plugin-dts. I want to bundle all my d.ts files into one d.ts file instead of having it mirroring my project structure. I followed some tutorials and ended up with the configs below.

The problem: dts() bundles the file correctly but leaves the original build structure as is. None of my resources addresses this. Shouldn't the now obsolete input files be deleted? Am I handling the plugin badly?

Where I start:

dist/
├── index.js 
├─ dts //I compile my types into here, below is my mirrored project structure
    ├── components
    │   ├── Button.d.ts
    │   ├── index.d.ts
    ├── index.d.ts

What I want:

dist/
├── index.js 
├── index.d.ts //everything bundled here

Unfortunately what I get:

dist/
├── index.js 
├─ dts //All of this is still here, it shouldn't be
    ├── components
    │   ├── Button.d.ts
    │   ├── index.d.ts
    ├── index.d.ts
├── index.d.ts //It bundled correctly to this additional file though

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationDir": "dts",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "strictFunctionTypes": true
  },
  "include": ["src/"],
  "exclude": ["node_modules", "build", "dist", "src/stories/**", "**/*.stories.ts", "**/*.test.ts", "**/*.test.tsx"]
}

rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';
import typescript from '@rollup/plugin-typescript';

export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            },
        ],
        plugins: [
            typescript({
                tsconfig: './tsconfig.json',
            }),
            babel({
                exclude: 'node_modules/**',
                presets: ['@babel/preset-react'],
            }),
            resolve(),
            commonjs(),
            external(),
            terser(),
        ],
    },
    {
        input: './dist/dts/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'es' }],
        plugins: [dts()],
    },
];

Bourgeon

Answer 1

I also recently faced a similar issue and was able to come up with a nifty solution with a few additions to the config file. I'm adding stuff to your file only. For the solution, I used rollup-plugin-delete package. Basically we have to remove the dts folder once the build is complete.

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';
import typescript from '@rollup/plugin-typescript';

// Added this
import del from "rollup-plugin-delete";


export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            },
        ],
        plugins: [
            typescript({
                tsconfig: './tsconfig.json',
            }),
            babel({
                exclude: 'node_modules/**',
                presets: ['@babel/preset-react'],
            }),
            resolve(),
            commonjs(),
            external(),
            terser(),
        ],
    },
    {
        input: './dist/dts/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'es' }],
        plugins: [
            dts(),
            del({ hook: "buildEnd", targets: "./dist/dts" }), //<------ New Addition
        ],
    },
];

In the tsconfig.json file, its mentioned that the declaration typefiles should be outputted to dts folder. Depending on how one export types from index.ts file, types will be declared and exported in dts/index.d.ts via the typescript transpilation process. This folder may have other files as well. Using rollup-plugin-dts, it combines all the exported and needed types from dts/index.d.ts to a single file definition file index.d.ts in dist folder. Once this process is complete, we want to delete the dts file. For that, we use rollup-plugin-delete plugin, which gives us access to rollup build hooks. Here we want to delete dts folder once the build process is complete; for that we use buildEnd hook, along with target folder name. This will ensure that dts folder is deleted once rollup has finished bundling.

Rope

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Terryn

@AbhishekDutt I've added more context to the solution. – Rope

@ShubhamSingh This fixed the same problem I had and I can confirm it works! Thanks – Dickey