diff --git a/README.md b/README.md index aac4678b..8ca808e5 100644 --- a/README.md +++ b/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`. diff --git a/package.json b/package.json index d0f54a98..a2d38067 100644 --- a/package.json +++ b/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", diff --git a/src/config/babelrc.js b/src/config/babelrc.js index c2220294..a6cdc5a8 100644 --- a/src/config/babelrc.js +++ b/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: [ [ diff --git a/src/config/rollup.config.js b/src/config/rollup.config.js index c293de6e..7a5424ca 100644 --- a/src/config/rollup.config.js +++ b/src/config/rollup.config.js @@ -15,6 +15,8 @@ const { pkg, hasFile, hasPkgProp, + hasDep, + 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: hasDep('@babel/runtime'), + extensions, }), replace(replacements), useSizeSnapshot ? sizeSnapshot({printInfo: false}) : null, diff --git a/src/utils.js b/src/utils.js index 0fcdd46b..46c7b232 100644 --- a/src/utils.js +++ b/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, + hasDep, ifAnyDep, ifDep, ifDevDep, ifFile, ifPeerDep, ifScript, + hasTypescript, + ifTypescript, parseEnv, pkg, resolveBin,