refactor: improve how esm is handled in bob (#799)

Author: satya164

docs/pages/build.md

@@ -4,10 +4,10 @@ When code is in non-standard syntaxes such as JSX, TypeScript etc, it needs to b
 
 Supported targets are:
 
-- Generic CommonJS build
-- ES modules build for bundlers such as [webpack](https://webpack.js.org)
+- [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) build for modern tools
+- [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) build for legacy tools
 - [TypeScript](https://www.typescriptlang.org/) definitions
-- Flow definitions (copies .js files to .flow files)
+- [Flow](https://flow.org/) definitions (copies .js files to .flow files)
 - [Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen) generated scaffold code
 
 If you created a project with [`create-react-native-library`](./create.md), `react-native-builder-bob` is **already pre-configured to build your project**. You don't need to configure it again.
@@ -24,7 +24,7 @@ npx react-native-builder-bob@latest init
 
 This will ask you a few questions and add the required configuration and scripts for building the code. The code will be compiled automatically when the package is published.
 
-> Note: the `init` command doesn't add the `codegen` target yet. You can either add it manually or create a new library with `create-react-native-library`.
+> Note: the `init` command doesn't add the [`codegen` target](#codegen) yet. You can either add it manually or create a new library with `create-react-native-library`.
 
 You can find details on what exactly it adds in the [Manual configuration](#manual-configuration) section.
 
@@ -34,28 +34,28 @@ To configure your project manually, follow these steps:
 
 1. First, install `react-native-builder-bob` in your project. Open a Terminal in your project, and run:
 
-```sh
-yarn add --dev react-native-builder-bob
-```
+   ```sh
+   yarn add --dev react-native-builder-bob
+   ```
 
-1. In your `package.json`, specify the targets to build for:
+2. In your `package.json`, specify the targets to build for:
 
    ```json
    "react-native-builder-bob": {
      "source": "src",
      "output": "lib",
      "targets": [
-       "codegen",
        ["commonjs", { "esm": true }],
        ["module", { "esm": true }],
-       ["typescript", { "esm": true }]
+       "typescript",
+       "codegen",
      ]
    }
    ```
 
    See the [Options](#options) section for more details.
 
-1. Add `bob` to your `prepare` or `prepack` step:
+3. Add `bob` to your `prepare` or `prepack` step:
 
    ```js
    "scripts": {
@@ -74,7 +74,7 @@ yarn add --dev react-native-builder-bob
 
    If you are not sure which one to use, we recommend going with `prepare` as it works during both publishing and installing from GIT with more package managers.
 
-1. Configure the appropriate entry points:
+4. Configure the appropriate entry points:
 
    ```json
    "source": "./src/index.tsx",
@@ -112,7 +112,7 @@ yarn add --dev react-native-builder-bob
 
    > If you're building TypeScript definition files, also make sure that the `types` field points to a correct path. Depending on the project configuration, the path can be different for you than the example snippet (e.g. `lib/typescript/index.d.ts` if you have only the `src` directory and `rootDir` is not set).
 
-1. Add the output directory to `.gitignore` and `.eslintignore`
+5. Add the output directory to `.gitignore` and `.eslintignore`
 
    ```gitignore
    # generated files by bob
@@ -121,15 +121,15 @@ yarn add --dev react-native-builder-bob
 
    This makes sure that you don't accidentally commit the generated files to git or get lint errors for them.
 
-1. Add the output directory to `jest.modulePathIgnorePatterns` if you use [Jest](https://jestjs.io)
+6. Add the output directory to `jest.modulePathIgnorePatterns` if you use [Jest](https://jestjs.io)
 
    ```json
    "modulePathIgnorePatterns": ["<rootDir>/lib/"]
    ```
 
    This makes sure that Jest doesn't try to run the tests in the generated files.
 
-1. Configure [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)
+7. Configure [React Native Codegen](https://reactnative.dev/docs/the-new-architecture/what-is-codegen)
 
    If your library supports the [New React Native Architecture](https://reactnative.dev/architecture/landing-page), you should also configure Codegen. This is not required for libraries that only support the old architecture.
 
@@ -262,6 +262,8 @@ Example:
 
 Enable generating type definitions with `tsc` if your source code is written in [TypeScript](http://www.typescriptlang.org/).
 
+When both `module` and `commonjs` targets are enabled, and `esm` is set to `true` for the `module` target, this will output 2 sets of type definitions: one for the CommonJS build and one for the ES module build.
+
 The following options are supported:
 
 ##### `project`

docs/pages/esm.md

@@ -11,25 +11,25 @@ You can verify whether ESM support is enabled by checking the configuration for
   "targets": [
     ["commonjs", { "esm": true }],
     ["module", { "esm": true }],
-    ["typescript", { "esm": true }]
+    "typescript"
   ]
 }
 ```
 
 The `"esm": true` option enables ESM-compatible output by adding the `.js` extension to the import statements in the generated files. For TypeScript, it also generates 2 sets of type definitions: one for the CommonJS build and one for the ES module build.
 
-It's recommended to specify `"moduleResolution": "Bundler"` and `"resolvePackageJsonImports": false` in your `tsconfig.json` file to match [Metro's behavior](https://reactnative.dev/blog/2023/06/21/package-exports-support#enabling-package-exports-beta):
+It's recommended to specify `"moduleResolution": "bundler"` and `"resolvePackageJsonImports": false` in your `tsconfig.json` file to match [Metro's behavior](https://reactnative.dev/blog/2023/06/21/package-exports-support#enabling-package-exports-beta):
 
 ```json
 {
   "compilerOptions": {
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "resolvePackageJsonImports": false
   }
 }
 ```
 
-Specifying `"moduleResolution": "Bundler"` means that you don't need to use file extensions in the import statements. Bob automatically adds them when possible during the build process.
+Specifying `"moduleResolution": "bundler"` means that you don't need to use file extensions in the import statements. Bob automatically adds them when possible during the build process.
 
 To make use of the output files, ensure that your `package.json` file contains the following fields:
 
@@ -80,7 +80,7 @@ There are still a few things to keep in mind if you want your library to be ESM-
   ```
 
 - Avoid using `.cjs`, `.mjs`, `.cts` or `.mts` extensions. Metro always requires file extensions in import statements when using `.cjs` or `.mjs` which breaks platform-specific extension resolution.
-- Avoid using `"moduleResolution": "Node16"` or `"moduleResolution": "NodeNext"` in your `tsconfig.json` file. They require file extensions in import statements which breaks platform-specific extension resolution.
+- Avoid using `"moduleResolution": "node16"` or `"moduleResolution": "nodenext"` in your `tsconfig.json` file. They require file extensions in import statements which breaks platform-specific extension resolution.
 - If you specify a `react-native` condition in `exports`, make sure that it comes before `import` or `require`. The conditions should be ordered from the most specific to the least specific:
 
   ```json

packages/create-react-native-library/templates/common/$package.json

@@ -217,8 +217,7 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json",
-          "esm": true
+          "project": "tsconfig.build.json"
         }
       ]
     ]

packages/create-react-native-library/templates/common/tsconfig.json

@@ -11,7 +11,7 @@
     "jsx": "react-jsx",
     "lib": ["ESNext"],
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "bundler",
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,

packages/react-native-builder-bob/package.json

@@ -85,6 +85,7 @@
     "@types/yargs": "^17.0.10",
     "concurrently": "^7.2.2",
     "jest": "^29.7.0",
-    "mock-fs": "^5.2.0"
+    "mock-fs": "^5.2.0",
+    "mock-stdin": "^1.0.0"
   }
 }

packages/react-native-builder-bob/src/__tests__/__snapshots__/init.test.ts.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`initializes the configuration 1`] = `
+"{
+  "name": "library",
+  "version": "1.0.0",
+  "devDependencies": {
+    "react-native-builder-bob": "^0.38.1"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "source": "./src/index.ts",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "scripts": {
+    "prepare": "bob build"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
+}
+"
+`;
+
+exports[`initializes the configuration 2`] = `
+"{
+  "compilerOptions": {
+    "rootDir": ".",
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ESNext",
+    "verbatimModuleSyntax": true
+  }
+}
+"
+`;

…-builder-bob/src/__tests__/index.test.ts …-builder-bob/src/__tests__/babel.test.tspackages/react-native-builder-bob/src/__tests__/index.test.ts renamed to packages/react-native-builder-bob/src/__tests__/babel.test.ts packages/react-native-builder-bob/src/__tests__/index.test.ts renamed to packages/react-native-builder-bob/src/__tests__/babel.test.ts

@@ -0,0 +1,121 @@
+import { afterEach, beforeEach, expect, it, jest } from '@jest/globals';
+import { readFile } from 'fs-extra';
+import mockFs from 'mock-fs';
+import { stdin } from 'mock-stdin';
+import { join } from 'path';
+import { init } from '../init';
+
+let io: ReturnType<typeof stdin> | undefined;
+
+const root = '/path/to/library';
+
+const enter = '\x0D';
+
+const waitFor = async (callback: () => void) => {
+  const interval = 10;
+
+  let timeout = 50;
+
+  return new Promise((resolve, reject) => {
+    const intervalId = setInterval(() => {
+      try {
+        callback();
+        clearInterval(intervalId);
+        resolve(undefined);
+      } catch (error) {
+        if (timeout <= 0) {
+          clearInterval(intervalId);
+          reject(error);
+        }
+
+        timeout -= interval;
+      }
+    }, interval);
+  });
+};
+
+beforeEach(() => {
+  io = stdin();
+
+  mockFs({
+    [root]: {
+      'package.json': JSON.stringify({
+        name: 'library',
+        version: '1.0.0',
+      }),
+      'src': {
+        'index.ts': "export default 'hello world';",
+      },
+    },
+  });
+});
+
+afterEach(() => {
+  io?.restore();
+  mockFs.restore();
+  jest.restoreAllMocks();
+});
+
+it('initializes the configuration', async () => {
+  jest.spyOn(process.stdout, 'write').mockImplementation(() => true);
+
+  process.chdir(root);
+
+  const run = async () => {
+    await waitFor(() => {
+      const lastCall = (process.stdout.write as jest.Mock).mock.lastCall;
+
+      if (lastCall == null) {
+        throw new Error('No output');
+      }
+
+      if (/The working directory is not clean/.test(String(lastCall[0]))) {
+        io?.send('y');
+      }
+    });
+
+    await waitFor(() =>
+      expect(process.stdout.write).toHaveBeenLastCalledWith(
+        expect.stringMatching('Where are your source files?')
+      )
+    );
+
+    io?.send(enter);
+
+    await waitFor(() =>
+      expect(process.stdout.write).toHaveBeenLastCalledWith(
+        expect.stringMatching('Where do you want to generate the output files?')
+      )
+    );
+
+    io?.send(enter);
+
+    await waitFor(() =>
+      expect(process.stdout.write).toHaveBeenLastCalledWith(
+        expect.stringMatching('Which targets do you want to build?')
+      )
+    );
+
+    io?.send(enter);
+
+    await waitFor(() =>
+      expect(process.stdout.write).toHaveBeenLastCalledWith(
+        expect.stringMatching(
+          "You have enabled 'typescript' compilation, but we couldn't find a 'tsconfig.json' in project root"
+        )
+      )
+    );
+
+    io?.send(enter);
+  };
+
+  await Promise.all([run(), init()]);
+
+  expect(process.stdout.write).toHaveBeenLastCalledWith(
+    expect.stringMatching('configured successfully!')
+  );
+
+  expect(await readFile(join(root, 'package.json'), 'utf8')).toMatchSnapshot();
+
+  expect(await readFile(join(root, 'tsconfig.json'), 'utf8')).toMatchSnapshot();
+});