feat(TS): auto-generate TypeScript definitions and add typecheck script (#176)

* feat(TS): auto-generate TypeScript definitions and add typecheck script

* add include

* configure a few more things

Author: kentcdodds

README.md

@@ -35,7 +35,6 @@ for linting, testing, building, and more.
 - [Installation](#installation)
 - [Usage](#usage)
   - [Overriding Config](#overriding-config)
-  - [Flow support](#flow-support)
   - [TypeScript Support](#typescript-support)
 - [Inspiration](#inspiration)
 - [Other Solutions](#other-solutions)
@@ -113,27 +112,23 @@ module.exports = Object.assign(jestConfig, {
 > configuring things to make it less magical and more straightforward. Extending
 > can take place on your terms. I think this is actually a great way to do this.
 
-### Flow support
-
-If the `flow-bin` is a dependency on the project the `@babel/preset-flow` 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-flow` to the `presets`-section.
-
 ### TypeScript Support
 
 If the `tsconfig.json`-file is present in the project root directory and
 `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
+If you customized 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.
 
-`tsc --build tsconfig.json` will run during before committing to verify that
-files will compile. So make sure to add the `noEmit` flag to the
-`tsconfig.json`'s `compilerOptions`.
+If you have a `typecheck` script (normally set to `kcd-scripts typecheck`) that
+will be run as part of the `validate` script (which is run as part of the
+`pre-commit` script as well).
+
+TypeScript definition files will also automatically be generated during the
+`build` script.
 
 ## Inspiration
 

package.json

@@ -25,7 +25,8 @@
     "eslint.js",
     "husky.js",
     "jest.js",
-    "prettier.js"
+    "prettier.js",
+    "shared-tsconfig.json"
   ],
   "keywords": [],
   "author": "Kent C. Dodds <[email protected]> (https://kentcdodds.com)",

shared-tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["../../src/**/*"],
+  "compilerOptions": {
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "../../src",
+    "paths": {
+      "*": ["*", "../tests/*"]
+    },
+    "preserveWatchOutput": true,
+    "incremental": true,
+    "tsBuildInfoFile": "../.cache/kcd-scripts/.tsbuildinfo"
+  }
+}

src/__tests__/__snapshots__/index.js.snap

@@ -34,6 +34,7 @@ Available Scripts:
   lint
   pre-commit
   test
+  typecheck
   validate
 
 Options:

src/run-script.js

@@ -56,7 +56,15 @@ function spawnScript() {
   // get all the arguments of the script and find the position of our script commands
   const args = process.argv.slice(2)
   const scriptIndex = args.findIndex(x =>
-    ['build', 'format', 'lint', 'pre-commit', 'test', 'validate'].includes(x),
+    [
+      'build',
+      'format',
+      'lint',
+      'pre-commit',
+      'test',
+      'validate',
+      'typecheck',
+    ].includes(x),
   )
 
   // Extract the node arguments so we can pass them to node later on

src/scripts/build/babel.js

@@ -4,7 +4,14 @@ const spawn = require('cross-spawn')
 const yargsParser = require('yargs-parser')
 const rimraf = require('rimraf')
 const glob = require('glob')
-const {hasPkgProp, fromRoot, resolveBin, hasFile} = require('../../utils')
+const {
+  hasPkgProp,
+  fromRoot,
+  resolveBin,
+  hasFile,
+  hasTypescript,
+  generateTypeDefs,
+} = require('../../utils')
 
 let args = process.argv.slice(2)
 const here = p => path.join(__dirname, p)
@@ -42,25 +49,42 @@ if (!useSpecifiedOutDir && !args.includes('--no-clean')) {
   args = args.filter(a => a !== '--no-clean')
 }
 
-const result = spawn.sync(
-  resolveBin('@babel/cli', {executable: 'babel'}),
-  [...outDir, ...copyFiles, ...ignore, ...extensions, ...config, 'src'].concat(
-    args,
-  ),
-  {stdio: 'inherit'},
-)
+function go() {
+  let result = spawn.sync(
+    resolveBin('@babel/cli', {executable: 'babel'}),
+    [
+      ...outDir,
+      ...copyFiles,
+      ...ignore,
+      ...extensions,
+      ...config,
+      'src',
+    ].concat(args),
+    {stdio: 'inherit'},
+  )
+  if (result.status !== 0) return result.status
 
-// because babel will copy even ignored files, we need to remove the ignored files
-const pathToOutDir = fromRoot(parsedArgs.outDir || builtInOutDir)
-const ignoredPatterns = (parsedArgs.ignore || builtInIgnore)
-  .split(',')
-  .map(pattern => path.join(pathToOutDir, pattern))
-const ignoredFiles = ignoredPatterns.reduce(
-  (all, pattern) => [...all, ...glob.sync(pattern)],
-  [],
-)
-ignoredFiles.forEach(ignoredFile => {
-  rimraf.sync(ignoredFile)
-})
+  if (hasTypescript && !args.includes('--no-ts-defs')) {
+    console.log('Generating TypeScript definitions')
+    result = generateTypeDefs()
+    console.log('TypeScript definitions generated')
+    if (result.status !== 0) return result.status
+  }
 
-process.exit(result.status)
+  // because babel will copy even ignored files, we need to remove the ignored files
+  const pathToOutDir = fromRoot(parsedArgs.outDir || builtInOutDir)
+  const ignoredPatterns = (parsedArgs.ignore || builtInIgnore)
+    .split(',')
+    .map(pattern => path.join(pathToOutDir, pattern))
+  const ignoredFiles = ignoredPatterns.reduce(
+    (all, pattern) => [...all, ...glob.sync(pattern)],
+    [],
+  )
+  ignoredFiles.forEach(ignoredFile => {
+    rimraf.sync(ignoredFile)
+  })
+
+  return result.status
+}
+
+process.exit(go())

src/scripts/build/rollup.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const fs = require('fs')
 const spawn = require('cross-spawn')
 const glob = require('glob')
 const rimraf = require('rimraf')
@@ -9,6 +10,8 @@ const {
   fromRoot,
   getConcurrentlyArgs,
   writeExtraEntry,
+  hasTypescript,
+  generateTypeDefs,
 } = require('../../utils')
 
 const crossEnv = resolveBin('cross-env')
@@ -46,9 +49,9 @@ const getCommand = (env, ...flags) =>
     .join(' ')
 
 const buildPreact = args.includes('--p-react')
-const scripts = buildPreact
-  ? getPReactScripts()
-  : getConcurrentlyArgs(getCommands())
+const scripts = getConcurrentlyArgs(
+  buildPreact ? getPReactCommands() : getCommands(),
+)
 
 const cleanBuildDirs = !args.includes('--no-clean')
 
@@ -60,25 +63,56 @@ if (cleanBuildDirs) {
   }
 }
 
-const result = spawn.sync(resolveBin('concurrently'), scripts, {
-  stdio: 'inherit',
-})
-
-if (result.status === 0 && buildPreact && !args.includes('--no-package-json')) {
-  writeExtraEntry(
-    'preact',
-    {
-      cjs: glob.sync(fromRoot('preact/**/*.cjs.js'))[0],
-      esm: glob.sync(fromRoot('preact/**/*.esm.js'))[0],
-    },
-    false,
-  )
+function go() {
+  let result = spawn.sync(resolveBin('concurrently'), scripts, {
+    stdio: 'inherit',
+  })
+
+  if (result.status !== 0) return result.status
+
+  if (buildPreact && !args.includes('--no-package-json')) {
+    writeExtraEntry(
+      'preact',
+      {
+        cjs: glob.sync(fromRoot('preact/**/*.cjs.js'))[0],
+        esm: glob.sync(fromRoot('preact/**/*.esm.js'))[0],
+      },
+      false,
+    )
+  }
+
+  if (hasTypescript && !args.includes('--no-ts-defs')) {
+    console.log('Generating TypeScript definitions')
+    result = generateTypeDefs()
+    if (result.status !== 0) return result.status
+
+    for (const format of formats) {
+      const [formatFile] = glob.sync(fromRoot(`dist/*.${format}.js`))
+      const {name} = path.parse(formatFile)
+      // make a .d.ts file for every generated file that re-exports index.d.ts
+      fs.writeFileSync(fromRoot('dist', `${name}.d.ts`), 'export * from ".";\n')
+    }
+
+    // because typescript generates type defs for ignored files, we need to
+    // remove the ignored files
+    const ignoredFiles = [
+      ...glob.sync(fromRoot('dist', '**/__tests__/**')),
+      ...glob.sync(fromRoot('dist', '**/__mocks__/**')),
+    ]
+    ignoredFiles.forEach(ignoredFile => {
+      rimraf.sync(ignoredFile)
+    })
+    console.log('TypeScript definitions generated')
+  }
+
+  return result.status
 }
 
-function getPReactScripts() {
-  const reactCommands = prefixKeys('react.', getCommands())
-  const preactCommands = prefixKeys('preact.', getCommands({preact: true}))
-  return getConcurrentlyArgs(Object.assign(reactCommands, preactCommands))
+function getPReactCommands() {
+  return {
+    ...prefixKeys('react.', getCommands()),
+    ...prefixKeys('preact.', getCommands({preact: true})),
+  }
 }
 
 function prefixKeys(prefix, object) {
@@ -111,4 +145,4 @@ function getCommands({preact = false} = {}) {
   }, {})
 }
 
-process.exit(result.status)
+process.exit(go())

src/scripts/pre-commit.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const spawn = require('cross-spawn')
-const {hasPkgProp, hasFile, resolveBin, hasTypescript} = require('../utils')
+const {hasPkgProp, hasFile, resolveBin} = require('../utils')
 
 const here = p => path.join(__dirname, p)
 const hereRelative = p => here(p).replace(process.cwd(), '.')
@@ -17,30 +17,20 @@ const config = useBuiltInConfig
   ? ['--config', hereRelative('../config/lintstagedrc.js')]
   : []
 
-const lintStagedResult = spawn.sync(
-  resolveBin('lint-staged'),
-  [...config, ...args],
-  {stdio: 'inherit'},
-)
+function go() {
+  let result
 
-if (lintStagedResult.status !== 0) {
-  process.exit(lintStagedResult.status)
-}
+  result = spawn.sync(resolveBin('lint-staged'), [...config, ...args], {
+    stdio: 'inherit',
+  })
 
-if (hasTypescript) {
-  const tscResult = spawn.sync(
-    resolveBin('typescript', {executable: 'tsc'}),
-    ['--build', 'tsconfig.json'],
-    {stdio: 'inherit'},
-  )
+  if (result.status !== 0) return result.status
 
-  if (tscResult.status !== 0) {
-    process.exit(tscResult.status)
-  }
-}
+  result = spawn.sync('npm', ['run', 'validate'], {
+    stdio: 'inherit',
+  })
 
-const validateResult = spawn.sync('npm', ['run', 'validate'], {
-  stdio: 'inherit',
-})
+  return result.status
+}
 
-process.exit(validateResult.status)
+process.exit(go())

src/scripts/typecheck.js

@@ -0,0 +1,24 @@
+const spawn = require('cross-spawn')
+const {hasAnyDep, resolveBin, hasFile} = require('../utils')
+
+const args = process.argv.slice(2)
+
+if (!hasAnyDep('typescript')) {
+  throw new Error(
+    'Cannot use the "typecheck" script in a project that does not have typescript listed as a dependency (or devDependency).',
+  )
+}
+
+if (!hasFile('tsconfig.json')) {
+  throw new Error(
+    'Cannot use the "typecheck" script in a project that does not have a tsconfig.json file.',
+  )
+}
+
+const result = spawn.sync(
+  resolveBin('typescript', {executable: 'tsc'}),
+  ['--build', ...args],
+  {stdio: 'inherit'},
+)
+
+process.exit(result.status)