feat: add typescript support

Author: satya164

README.md

@@ -9,14 +9,15 @@ The CLI can build code for following targets:
 - Generic CommonJS build
 - ES modules build for bundlers such as webpack
 - Flow definitions (copies .js files to .flow files)
+- TypeScript definitions (uses tsc to generate declaration files)
 
 ## Why?
 
 Metro handles compiling source code for React Native libraries, but it's possible to use them in other targets such as web. Currently, to handle this, we need to have multiple babel configs and write a long `babel-cli` command in our `package.json`. We also need to keep the configs in sync between our projects.
 
 Just as an example, this is a command we have in one of the packages: `babel --extensions '.js,.ts,.tsx' --no-babelrc --config-file=./babel.config.publish.js src --ignore '**/__tests__/**' --copy-files --source-maps --delete-dir-on-start --out-dir dist && del-cli 'dist/**/__tests__' && yarn tsc --emitDeclarationOnly`. This isn't all, there's even a separate `babel.config.publish.js` file. And this only works for webpack and Metro, and will fail on Node due to ESM usage.
 
-Bob wraps tools such as `babel-cli` and simplifies these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required.
+Bob wraps tools such as `babel` and `typescript` to simplify these common tasks across multiple projects. It's tailored specifically to React Native projects to minimize the configuration required.
 
 ## Installation
 
@@ -40,7 +41,8 @@ To configure your project manually, follow these steps:
      "output": "lib",
      "targets": [
        ["commonjs", {"flow": true}],
-       "module"
+       "module",
+       "typescript",
      ]
    }
    ```
@@ -59,6 +61,7 @@ To configure your project manually, follow these steps:
    "main": "lib/commonjs/index.js",
    "module": "lib/module/index.js",
    "react-native": "src/index.js",
+   "typescript": "lib/typescript/src/index.d.ts",
    "files": [
      "lib/",
      "src/"
@@ -74,10 +77,6 @@ To configure your project manually, follow these steps:
 
 And we're done 🎉
 
-## TODO
-
-- TypeScript support
-
 ## LICENSE
 
 MIT

src/cli.ts

@@ -7,6 +7,7 @@ import isGitDirty from 'is-git-dirty';
 import * as logger from './utils/logger';
 import buildCommonJS from './targets/commonjs';
 import buildModule from './targets/module';
+import buildTypescript from './targets/typescript';
 import { Options } from './types';
 
 const { name } = require('../package.json');
@@ -32,19 +33,31 @@ yargs
 
     if (!(await fs.pathExists(pak))) {
       logger.exit(
-        `Couldn't find a 'package.json' file in ${pak}. Are you in a project folder?`
+        `Couldn't find a 'package.json' file in '${root}'. Are you in a project folder?`
+      );
+    }
+    const { source } = await inquirer.prompt({
+      type: 'input',
+      name: 'source',
+      message: 'Where are your source files?',
+      default: 'src',
+      validate: input => Boolean(input),
+    });
+
+    if (
+      !(
+        (await fs.pathExists(path.join(root, source, 'index.js'))) ||
+        (await fs.pathExists(path.join(root, source, 'index.ts'))) ||
+        (await fs.pathExists(path.join(root, source, 'index.tsx')))
+      )
+    ) {
+      logger.exit(
+        `Couldn't find a 'index.js'. 'index.ts' or 'index.tsx' file under '${source}'. Please re-run the CLI after creating it.`
       );
     }
 
     const pkg = JSON.parse(await fs.readFile(pak, 'utf-8'));
-    const { source, output, targets, flow } = await inquirer.prompt([
-      {
-        type: 'input',
-        name: 'source',
-        message: 'Where are your source files?',
-        default: 'src',
-        validate: input => Boolean(input),
-      },
+    const { output, targets, flow } = await inquirer.prompt([
       {
         type: 'input',
         name: 'output',
@@ -56,7 +69,7 @@ yargs
         type: 'checkbox',
         name: 'targets',
         message: 'Which targets do you want to build?',
-        choices: ['commonjs', 'module'],
+        choices: ['commonjs', 'module', 'typescript'],
         validate: input => Boolean(input.length),
       },
       {
@@ -71,6 +84,7 @@ yargs
     const entries = {
       main: path.join(output, target, 'index.js'),
       module: path.join(output, 'module', 'index.js'),
+      types: path.join(output, 'typescript', source, 'index.d.ts'),
       'react-native': path.join(source, 'index.js'),
     };
 
@@ -226,6 +240,13 @@ yargs
             options: targetOptions,
           });
           break;
+        case 'typescript':
+          await buildTypescript({
+            root,
+            source: source as string,
+            output: path.resolve(root, output as string, 'typescript'),
+          });
+          break;
         default:
           logger.exit(`Invalid target '${target}'.`);
       }

src/targets/commonjs.ts

@@ -1,4 +1,4 @@
-import del from 'del'
+import del from 'del';
 import compile from '../utils/compile';
 import * as logger from '../utils/logger';
 import { Input } from '../types';
@@ -7,7 +7,12 @@ type Options = Input & {
   options?: { flow?: boolean };
 };
 
-export default async function build({ root, source, output, options }: Options) {
+export default async function build({
+  root,
+  source,
+  output,
+  options,
+}: Options) {
   logger.info('building files for commonjs target');
 
   await del([output]);

src/targets/module.ts

@@ -1,4 +1,4 @@
-import del from 'del'
+import del from 'del';
 import compile from '../utils/compile';
 import * as logger from '../utils/logger';
 import { Input } from '../types';

src/targets/typescript.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import child_process from 'child_process';
+import del from 'del';
+import * as logger from '../utils/logger';
+import { Input } from '../types';
+
+export default async function build({ root, output }: Input) {
+  logger.info('building files for typscript target');
+
+  await del([output]);
+
+  child_process.execFileSync(path.join(root, 'node_modules', '.bin', 'tsc'), [
+    '--declaration',
+    '--emitDeclarationOnly',
+    '--outDir',
+    output,
+  ]);
+}

src/types.ts

@@ -4,7 +4,7 @@ export type Input = {
   output: string,
 };
 
-export type Target = 'commonjs' | 'module';
+export type Target = 'commonjs' | 'module' | 'typescript';
 
 export type Options = {
   source?: string,

src/utils/compile.ts

@@ -20,27 +20,30 @@ export default async function compile({
   const files = glob.sync('**/*', {
     cwd: source,
     absolute: true,
+    nodir: true,
     ignore: '**/__tests__/**,**/__fixtures__/**',
   });
 
   await Promise.all(
     files.map(async filepath => {
       const outputFilename = path
         .join(output, path.relative(source, filepath))
-        .replace(/\.(js|tsx?)/, '.js');
+        .replace(/\.(js|tsx?)$/, '.js');
 
       await fs.mkdirp(path.dirname(outputFilename));
 
-      if (!/\.(js|tsx?)/.test(filepath)) {
+      if (!/\.(js|tsx?)$/.test(filepath)) {
         // Copy files which aren't source code
         fs.copy(filepath, outputFilename);
+        return;
       }
 
       const content = await fs.readFile(filepath, 'utf-8');
       const result = await babel.transformAsync(content, {
         babelrc: false,
         configFile: false,
         sourceMaps: true,
+        filename: filepath,
         ...options,
       });