Rollup distribute TypeScript definitions for Javascript library

Question

I've been asked to add TypeScript type definitions for exported modules inside a JavaScript library built with Rollup.

I've written the .d.ts files along side and now I think I need to configure rollup (or some plugin) to take those definitions and bring them (eventually merged?) into the dist directory.

The library is organised as follows:

MyLib
|_/dist
| |_ index.js
| |_ index.js.map
|
|_/src
| |_/componentA
| | |_ index.js
| | |_ index.d.ts
| |
| |_/componentB # this is not exported, thus no use of TS.
| | |_ index.js
| |
| |_/componentC
|   |_ index.js
|   |_ index.d.ts  
|_ index.js
|_ package.json
|_ rollup.config.js
|
|_ etc...

I've searched for issues, read Rollup documentations and searched for issues in the Rollup repo but couldn't find anything helpful.

An example of file is

import * as React from 'react'

declare class Launcher extends React.Component<LauncherProps, any> {}

export interface LauncherProps {
  brandSvg: string;
  documentationUrl?: string;
  // ...
}

export default Launcher

The package.json is:

{
  "name": "MyLib",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "engines": {
    "node": ">=8",
    "npm": ">=5"
  },
  "scripts": {
    "build": "rollup -c",
    "ci": "env CI=true yarn lint && yarn coverage",
    "coverage": "yarn test --coverage --watchAll=false",
    "dev": "rollup -c -w",
    "dev:start-example": "cd ./example && npm run start",
    "lint": "eslint src --ext .js",
    "prepare": "yarn run build",
    "predeploy": "cd example && yarn install && yarn run build",
    "test": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom"
  },
  "files": [
    "dist"
  ],
  "dependencies": {
    "fast-levenshtein": "^2.0.6",
    "prop-types": "^15.7.2",
    "ramda": "^0.26.1"
  }
  "peerDependencies": {
    "antd": "^3.18.2",
    "prop-types": "^15.5.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-external-helpers": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@svgr/rollup": "^2.4.1",
    "antd": "^3.18.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.6.0",
    "babel-plugin-import": "^1.11.2",
    "babel-plugin-react-docgen": "^3.1.0",
    "cross-env": "^5.1.4",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.13.1",
    "enzyme-react-intl": "^2.0.4",
    "eslint": "5.12.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-standard-react": "^7.0.2",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jest": "^22.6.4",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-standard": "^4.0.0",
    "npm-run-all": "^4.1.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-intl": "^2.8.0",
    "react-scripts": "^2.1.8",
    "rollup": "^0.64.1",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^9.1.3",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
    "rollup-plugin-postcss": "^2.0.3",
    "rollup-plugin-url": "^2.2.1"
  },
}

The Rollup configuration file, rollup.config.js, is as follows:

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import builtins from 'rollup-plugin-node-builtins'
import url from 'rollup-plugin-url'
import svgr from '@svgr/rollup'
import typescript from 'rollup-plugin-typescrip2'

import pkg from './package.json'

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
      external: ['path']
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    postcss({
      modules: false
    }),
    url(),
    svgr(),
    babel({
      exclude: 'node_modules/**',
      plugins: [ '@babel/external-helpers' ]
    }),
    builtins(),
    resolve(),
    commonjs(),
    typescript() // <-- added later
  ]
}

UPDATE

As suggested by @darklightcode in the answer I've updated package.json adding:

  "typings": "dist/index.d.ts",
  "typescript": {
    "definition": "dist/index.d.ts"
  },

and created the tsconfig.json file accordingly:

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "dist"
  }
}

Running the build script still does nothing.

Using rollup-plugin-typescript2 (configuration above) gives the following error:

[!] Error: Unknown object type "asyncfunction"
Error: Unknown object type "asyncfunction"
    at Object._object (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:218:17)
    at Object._function (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:319:14)
    at Object.dispatch (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:246:18
    at Array.forEach (<anonymous>)
    at Object._object (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:242:21)
    at Object.dispatch (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:260:23
    at Array.forEach (<anonymous>)
    at Object._array (/home/fredmaggiowski/Development/mylib/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:259:20)

Please post package.json and tsconfig.json. Is your library on npmjs ? — darklightcode
– darklightcode, Commented Jun 4, 2019 at 13:07
@darklightcode I've added the package.json, I've no tsconfig.json. No the library is not on npmjs. — fredmaggiowski
– fredmaggiowski, Commented Jun 4, 2019 at 13:12

darklightcode · Accepted Answer · 2019-06-04 13:51:17Z

2

In your package.json, use the following keys to point to your .d.ts files:

{
   ...
  "typings": "definitions/index", // change the path to your main .d.ts
  "typescript": {
    "definition": "definitions/index" // change the path to your main .d.ts
  }
  ...
}

PS: Below is a tsconfig.json, so you can make an idea on where tsconfig.json exports the definition files, and what package.json is pointing to. Paths can be changed as you wish.

  {
  "compilerOptions": {
    "listEmittedFiles": false,
    "outDir": "lib",
    "declaration": true, 
    "declarationDir": "definitions",
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "removeComments": false,
    "suppressImplicitAnyIndexErrors": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "pretty": true,
    "allowJs": true,
    "jsx": "react",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./node_modules/**/*"
  ]
}

PSS: Make sure your typings won't create conflicts with other types, wrap them up under a namespace.

edited Jun 4, 2019 at 13:51

answered Jun 4, 2019 at 13:19

darklightcode

2,7721 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

fredmaggiowski Over a year ago

All right, I'm going to try it right now, just one question. You said to change the path to my main .d.ts. What should this main do? As of now I only have different .d.ts files relative to the modules, not a main.

darklightcode Over a year ago

As of main .d.ts i meant , some index.d.ts, sorry for that. here is an image with my .d.ts folder structure, currently it has an index.d.ts in the root of the folder definitions. The files from the image are generated on-save by typescript while i'm writing code, the types i write are exported by typescript to definitions folder, so i can keep my code clean, and prevent certain conflicts such as including .ts files (which means *.d.ts files will be included also, it's a small mistake, but a common one).

fredmaggiowski Over a year ago

I've updated package.json and tsconfig.json but nothing is happening.. I've tried to add the following plugin rollup-plugin-typescript2 to the rollup.config.js but it returns different errors depending where I place the plugin

darklightcode Over a year ago

I have updated the tsconfig.json in my answer, give it a try. And about those errors, are those typescript errors ?

darklightcode Over a year ago

Since you're using react don't forget about ` "jsx": "react", ` in tsconfig.json, I've just added it now in the sample.

|

Collectives™ on Stack Overflow

Rollup distribute TypeScript definitions for Javascript library

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related