fix(TS): correctly generate type defs for scoped pacakges

Author: kentcdodds

src/config/rollup.config.js

@@ -7,7 +7,6 @@ const {
   nodeResolve,
 } = require('@rollup/plugin-node-resolve')
 const replace = require('@rollup/plugin-replace')
-const glob = require('glob')
 const camelcase = require('lodash.camelcase')
 const {terser} = require('rollup-plugin-terser')
 const nodeBuiltIns = require('rollup-plugin-node-builtins')
@@ -21,7 +20,8 @@ const {
   hasDep,
   hasTypescript,
   parseEnv,
-  fromRoot,
+  getRollupInputs,
+  getRollupOutput,
   uniq,
   writeExtraEntry,
 } = require('../utils')
@@ -51,27 +51,6 @@ 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 ||
-      (hasTypescript ? 'src/index.{js,ts,tsx}' : 'src/index.js'),
-  ),
-)
-const codeSplitting = input.length > 1
-
-if (
-  codeSplitting &&
-  uniq(input.map(single => path.basename(single))).length !== input.length
-) {
-  throw new Error(
-    'Filenames of code-splitted entries should be unique to get deterministic output filenames.' +
-      `\nReceived those: ${input}.`,
-  )
-}
-
-const filenameSuffix = process.env.BUILD_FILENAME_SUFFIX || ''
-const filenamePrefix =
-  process.env.BUILD_FILENAME_PREFIX || (isPreact ? 'preact/' : '')
 const globals = parseEnv(
   'BUILD_GLOBALS',
   isPreact ? Object.assign(defaultGlobals, {preact: 'preact'}) : defaultGlobals,
@@ -102,30 +81,6 @@ function externalPredicate(id) {
   return isDep || (!isRelative && !path.isAbsolute(id)) || isNodeModule
 }
 
-const filename = [
-  pkg.name,
-  filenameSuffix,
-  `.${format}`,
-  minify ? '.min' : null,
-  '.js',
-]
-  .filter(Boolean)
-  .join('')
-
-const dirpath = path.join(...[filenamePrefix, 'dist'].filter(Boolean))
-
-const output = [
-  {
-    name,
-    ...(codeSplitting
-      ? {dir: path.join(dirpath, format)}
-      : {file: path.join(dirpath, filename)}),
-    format: esm ? 'es' : format,
-    exports: esm ? 'named' : 'auto',
-    globals,
-  },
-]
-
 const useBuiltinConfig =
   !hasFile('.babelrc') &&
   !hasFile('.babelrc.js') &&
@@ -150,6 +105,33 @@ const extensions = hasTypescript
   ? [...nodeResolveDefaults.extensions, '.ts', '.tsx']
   : nodeResolveDefaults.extensions
 
+const input = getRollupInputs()
+const codeSplitting = input.length > 1
+
+if (
+  codeSplitting &&
+  uniq(input.map(single => path.basename(single))).length !== input.length
+) {
+  throw new Error(
+    'Filenames of code-splitted entries should be unique to get deterministic output filenames.' +
+      `\nReceived those: ${input}.`,
+  )
+}
+
+const {dirpath, filename} = getRollupOutput()
+
+const output = [
+  {
+    name,
+    ...(codeSplitting
+      ? {dir: path.join(dirpath, format)}
+      : {file: path.join(dirpath, filename)}),
+    format: esm ? 'es' : format,
+    exports: esm ? 'named' : 'auto',
+    globals,
+  },
+]
+
 module.exports = {
   input: codeSplitting ? input : input[0],
   output,

src/scripts/build/rollup.js

@@ -12,6 +12,8 @@ const {
   writeExtraEntry,
   hasTypescript,
   generateTypeDefs,
+  getRollupInputs,
+  getRollupOutput,
 } = require('../../utils')
 
 const crossEnv = resolveBin('cross-env')
@@ -86,11 +88,36 @@ function go() {
     result = generateTypeDefs(fromRoot('dist'))
     if (result.status !== 0) return result.status
 
+    const rollupInputs = getRollupInputs()
+    const typeDefFiles = rollupInputs.map(input => {
+      return input
+        .replace(path.join(process.cwd(), 'src'), 'dist')
+        .replace(/\.(t|j)sx?$/, '.d.ts')
+    })
+
     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')
+      const {dirpath, filename} = getRollupOutput(format)
+
+      const isCodesplitting = rollupInputs.length > 1
+
+      const outputs = isCodesplitting
+        ? glob.sync(fromRoot(path.join(dirpath, format, '*.js')))
+        : [fromRoot(path.join(dirpath, filename))]
+
+      for (const output of outputs) {
+        const {name, dir} = path.parse(output)
+        const typeDef = isCodesplitting
+          ? typeDefFiles.find(f => path.basename(f) === `${name}.d.ts`)
+          : 'dist/index.d.ts'
+        const relativePath = path
+          .join(path.relative(dir, process.cwd()), typeDef)
+          .replace(/\.d\.ts$/, '')
+        // make a .d.ts file for every generated file that re-exports index.d.ts
+        fs.writeFileSync(
+          path.join(dir, `${name}.d.ts`),
+          `export * from "${relativePath}";\n`,
+        )
+      }
     }
 
     // because typescript generates type defs for ignored files, we need to

src/utils.js

@@ -5,6 +5,7 @@ const rimraf = require('rimraf')
 const mkdirp = require('mkdirp')
 const arrify = require('arrify')
 const has = require('lodash.has')
+const glob = require('glob')
 const readPkgUp = require('read-pkg-up')
 const which = require('which')
 const {cosmiconfigSync} = require('cosmiconfig')
@@ -182,6 +183,37 @@ function generateTypeDefs(outputDir) {
   )
 }
 
+function getRollupInputs() {
+  const buildInputGlob =
+    process.env.BUILD_INPUT ||
+    (hasTypescript ? 'src/index.{js,ts,tsx}' : 'src/index.js')
+  const input = glob.sync(fromRoot(buildInputGlob))
+  if (!input.length) {
+    throw new Error(`Unable to find files with this glob: ${buildInputGlob}`)
+  }
+  return input
+}
+
+function getRollupOutput(format = process.env.BUILD_FORMAT) {
+  const minify = parseEnv('BUILD_MINIFY', false)
+  const filenameSuffix = process.env.BUILD_FILENAME_SUFFIX || ''
+  const filename = [
+    pkg.name,
+    filenameSuffix,
+    `.${format}`,
+    minify ? '.min' : null,
+    '.js',
+  ]
+    .filter(Boolean)
+    .join('')
+
+  const isPreact = parseEnv('BUILD_PREACT', false)
+  const filenamePrefix =
+    process.env.BUILD_FILENAME_PREFIX || (isPreact ? 'preact/' : '')
+  const dirpath = path.join(...[filenamePrefix, 'dist'].filter(Boolean))
+  return {dirpath, filename}
+}
+
 module.exports = {
   appDirectory,
   fromRoot,
@@ -207,4 +239,6 @@ module.exports = {
   uniq,
   writeExtraEntry,
   generateTypeDefs,
+  getRollupInputs,
+  getRollupOutput,
 }