feat(build): add build config for optional typescript support

.gitignore

@@ -8,6 +8,7 @@ coverage
 package-lock.json
 
 build
+*.tsbuildinfo
 
 /packages/*/dist
 

Makefile

@@ -54,7 +54,7 @@ init: ##@0 global cleanup/install/bootstrap
 
 fmt: ##@0 global format code using prettier (js, css, md)
 	@./node_modules/.bin/prettier --color --write \
-		"packages/*/{src,stories,tests}/**/*.{js,ts}" \
+		"packages/*/{src,stories,tests}/**/*.{js,ts,tsx}" \
 		"packages/*/index.d.ts" \
 		"packages/*/README.md" \
 		"website/src/**/*.{js,css}" \
@@ -138,7 +138,8 @@ packages-tslint: ##@1 packages run tslint on all packages
         ./packages/legends/index.d.ts \
         ./packages/line/index.d.ts \
         ./packages/network/index.d.ts \
-        ./packages/pie/index.d.ts \
+        ./packages/pie/**/*.ts \
+        ./packages/pie/**/*.tsx \
         ./packages/radar/index.d.ts \
         ./packages/sankey/index.d.ts \
         ./packages/scales/index.d.ts \
@@ -165,15 +166,25 @@ packages-test-cover: ##@1 packages run tests for all packages with code coverage
 	@echo "${YELLOW}Running test suites for all packages${RESET}"
 	@yarn jest -c ./packages/jest.config.js --rootDir . --coverage ./packages/*/tests
 
-packages-build: ##@1 packages build all packages
+packages-types: ##@1 packages build all package types
+	@echo "${YELLOW}Building TypeScript types for all packages${RESET}"
+	@yarn tsc -b ./tsconfig.monorepo.json
+
+packages-build: packages-types ##@1 packages build all packages
 	@echo "${YELLOW}Building all packages${RESET}"
-	@find ./packages -type d -maxdepth 1 ! -path ./packages ! -path ./packages/babel-preset \
+	@find ./packages -type d -maxdepth 1 ! -path ./packages \
         | sed 's|^./packages/||' \
         | xargs -I '{}' sh -c '$(MAKE) package-build-{}'
 
+package-types-%: ##@1 packages build a package types
+	@echo "${YELLOW}Building TypeScript types for package ${WHITE}@nivo/${*}${RESET}"
+	@-rm -rf ./packages/${*}/dist/types
+	@-rm -rf ./packages/${*}/dist/tsconfig.tsbuildinfo
+	@yarn tsc -b ./packages/${*}
+
 package-build-%: ##@1 packages build a package
 	@echo "${YELLOW}Building package ${WHITE}@nivo/${*}${RESET}"
-	@rm -rf ./packages/${*}/dist
+	@-rm -rf ./packages/${*}/dist
 	@export PACKAGE=${*}; NODE_ENV=production BABEL_ENV=production ./node_modules/.bin/rollup -c conf/rollup.config.js
 
 packages-screenshots: ##@1 packages generate screenshots for packages readme (website dev server must be running)

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['react-app']
+    presets: [['react-app', { typescript: true }]]
 }

conf/rollup.config.js

@@ -1,3 +1,4 @@
+import fs from 'fs'
 import { camelCase, upperFirst } from 'lodash'
 import babel from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
@@ -9,6 +10,14 @@ import visualizer from 'rollup-plugin-visualizer'
 const pkg = process.env.PACKAGE
 const isWatching = process.env.ROLLUP_WATCH === 'TRUE'
 
+const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
+const babelConfig = {
+    extensions,
+    exclude: 'node_modules/**',
+    babelHelpers: 'runtime',
+    plugins: ['lodash'],
+}
+
 const externals = [
     'prop-types',
 ]
@@ -23,8 +32,15 @@ const mapGlobal = name => {
     return name
 }
 
+let input = `./packages/${pkg}/src/index.js`
+
+// detect TS entry index file
+if (fs.existsSync(`./packages/${pkg}/src/index.ts`)) {
+    input = `./packages/${pkg}/src/index.ts`
+}
+
 const common = {
-    input: `./packages/${pkg}/src/index.js`,
+    input,
     external: id => externals.includes(id)
         || id.indexOf('react') === 0
         || id.indexOf('d3') === 0
@@ -42,15 +58,10 @@ const commonPlugins = [
         jsnext: true,
         main: true,
         browser: true,
-        extensions: ['.js'],
+        extensions,
         modulesOnly: true,
     }),
-    babel({
-        exclude: 'node_modules/**',
-        babelHelpers: 'runtime',
-        plugins: ['lodash'],
-        presets: ['react-app']
-    }),
+    babel(babelConfig),
     cleanup()
 ]
 

package.json

@@ -62,11 +62,10 @@
     "rollup-plugin-prettier": "^2.1.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-strip-banner": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.27.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "serve": "^11.2.0",
-    "tslint": "^6.1.2",
-    "typescript": "^3.9.5"
+    "tslint": "^6.1.3",
+    "typescript": "^4.0.5"
   },
   "resolutions": {
     "react": "16.8.6",

tsconfig.json

@@ -1,14 +1,22 @@
 {
   "compilerOptions": {
-    "outDir": "./build",
-    "allowJs": true,
-    "target": "es2017",
-    "alwaysStrict": true,
-    "sourceMap": true,
-    "jsx": "react",
-    "moduleResolution": "node",
     "esModuleInterop": true,
-    "noImplicitAny": true
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["ESNext", "dom"],
+    "target": "es5",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": false,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "allowJs": true,
+    "composite": true,
+    "declarationMap": true,
+    "moduleResolution": "node"
   },
   "include": ["./packages/*/index.d.ts"]
 }

tsconfig.monorepo.json

@@ -0,0 +1,20 @@
+{
+    "files": [],
+    "references": [
+        // Core first because everything needs it
+        // { "path": "./packages/core" },
+
+        // Shared next because charts need them
+        // { "path": "./packages/axes" },
+        // { "path": "./packages/colors" },
+        // { "path": "./packages/legends" },
+        // { "path": "./packages/scales" },
+        // { "path": "./packages/tooltip" },
+
+        // Utility package
+        // { "path": "./packages/generators" },
+
+        // Charts now
+        { "path": "./packages/pie" },
+    ]
+}

tsconfig.types.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "noEmit": false
+  }
+}