Implement TypeScript support

README.md

@@ -39,6 +39,7 @@ for linting, testing, building, and more.
 - [Usage](#usage)
   - [Overriding Config](#overriding-config)
   - [Flow support](#flow-support)
+  - [TypeScript Support](#typescript-support)
 - [Inspiration](#inspiration)
 - [Other Solutions](#other-solutions)
 - [Issues](#issues)
@@ -122,6 +123,17 @@ automatically get loaded when you use the default babel config that comes with
 `kcd-scripts`. If you customised your `.babelrc`-file you might need to manually
 add `@babel/preset-flow` to the `presets`-section.
 
+### TypeScript Support
+
+If the `tsconfig.json`-file is present in the project root directory and the
+`typescript` is a dependency the `@babel/preset-typescript` will automatically
+get loaded when you use the default babel config that comes with `kcd-scripts`.
+If you customised your `.babelrc`-file you might need to manually add
+`@babel/preset-typescript` to the `presets`-section.
+
+`kcd-scripts` will automatically load any `.ts` and `.tsx` files, including the
+default entry point, so you don't have to worry about any rollup configuration.
+
 ## Inspiration
 
 This is inspired by `react-scripts`.

package.json

@@ -39,6 +39,7 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.1",
+    "@babel/preset-typescript": "^7.9.0",
     "@babel/runtime": "^7.9.2",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-json": "^4.0.2",

src/config/babelrc.js

@@ -1,7 +1,13 @@
 const browserslist = require('browserslist')
 const semver = require('semver')
 
-const {ifAnyDep, parseEnv, appDirectory, pkg} = require('../utils')
+const {
+  ifAnyDep,
+  ifTypescript,
+  parseEnv,
+  appDirectory,
+  pkg,
+} = require('../utils')
 
 const {BABEL_ENV, NODE_ENV, BUILD_FORMAT} = process.env
 const isTest = (BABEL_ENV || NODE_ENV) === 'test'
@@ -53,6 +59,7 @@ module.exports = () => ({
       ],
     ),
     ifAnyDep(['flow-bin'], [require.resolve('@babel/preset-flow')]),
+    ifTypescript([require.resolve('@babel/preset-typescript')]),
   ].filter(Boolean),
   plugins: [
     [

src/config/rollup.config.js

@@ -15,6 +15,8 @@ const {
   pkg,
   hasFile,
   hasPkgProp,
+  hasAnyDep,
+  hasTypescript,
   parseEnv,
   fromRoot,
   uniq,
@@ -46,7 +48,12 @@ const deps = Object.keys(pkg.dependencies || {})
 const peerDeps = Object.keys(pkg.peerDependencies || {})
 const defaultExternal = umd ? peerDeps : deps.concat(peerDeps)
 
-const input = glob.sync(fromRoot(process.env.BUILD_INPUT || 'src/index.js'))
+const input = glob.sync(
+  fromRoot(
+    process.env.BUILD_INPUT ||
+      (hasTypescript ? 'src/index.{js,ts,tsx}' : 'src/index.js'),
+  ),
+)
 const codeSplitting = input.length > 1
 
 if (
@@ -136,6 +143,12 @@ const replacements = Object.entries(
   return acc
 }, {})
 
+// TODO: reuse `defaults` from `node-resolve` plugin when this issue is resolved https://github.com/rollup/plugins/issues/299
+const defaultExtensions = ['.mjs', '.js', '.json', '.node']
+const extensions = hasTypescript
+  ? defaultExtensions.concat(['.ts', '.tsx'])
+  : defaultExtensions
+
 module.exports = {
   input: codeSplitting ? input : input[0],
   output,
@@ -146,13 +159,15 @@ module.exports = {
     nodeResolve({
       preferBuiltins: isNode,
       mainFields: ['module', 'main', 'jsnext', 'browser'],
+      extensions,
     }),
     commonjs({include: 'node_modules/**'}),
     json(),
     rollupBabel({
       presets: babelPresets,
       babelrc: !useBuiltinConfig,
-      runtimeHelpers: useBuiltinConfig,
+      runtimeHelpers: hasAnyDep('@babel/runtime'),
+      extensions,
     }),
     replace(replacements),
     useSizeSnapshot ? sizeSnapshot({printInfo: false}) : null,

src/utils.js

@@ -72,6 +72,9 @@ const ifDevDep = ifPkgSubProp('devDependencies')
 const ifAnyDep = (deps, t, f) => (hasAnyDep(arrify(deps)) ? t : f)
 const ifScript = ifPkgSubProp('scripts')
 
+const hasTypescript = hasAnyDep('typescript') && hasFile('tsconfig.json')
+const ifTypescript = (t, f) => (hasTypescript ? t : f)
+
 function parseEnv(name, def) {
   if (envIsSet(name)) {
     try {
@@ -168,12 +171,15 @@ module.exports = {
   hasLocalConfig,
   hasPkgProp,
   hasScript,
+  hasAnyDep,
   ifAnyDep,
   ifDep,
   ifDevDep,
   ifFile,
   ifPeerDep,
   ifScript,
+  hasTypescript,
+  ifTypescript,
   parseEnv,
   pkg,
   resolveBin,