refactor: move to ES modules (#941)

Author: satya164

.gitignore

@@ -89,3 +89,4 @@ typings/
 lib/
 typescript/
 doc_build/
+*.tsbuildinfo

docs/pages/build.md

@@ -62,7 +62,6 @@ To configure your project manually, follow these steps:
    ```
 
    Note that there is a difference between `prepare` and `prepack` scripts:
-
    - `prepare` is run when:
      - The package is published with Yarn 1 (`yarn publish`), npm (`npm publish`) or pnpm (`pnpm publish`)
      - The package is installed from a GIT URL with Yarn 1 (`yarn add <git-url>`), npm (`npm install <git-url>`) or pnpm (`pnpm add <git-url>`)
@@ -92,7 +91,6 @@ To configure your project manually, follow these steps:
    ```
 
    Here is what each of these fields mean:
-
    - `main`: The entry point for legacy setups that don't support the `exports` field. See [Compatibility](./esm.md#compatibility) for more details.
    - `types`: The entry point for the TypeScript definitions for legacy setups with `moduleResolution: node10` or `moduleResolution: node`.
    - `exports`: The entry points for tools that support the `exports` field in `package.json` - such as Node.js 12+, modern browsers and tools. See [the ESM support guide](./esm.md) for more details.
@@ -171,7 +169,7 @@ See the [ESM support](./esm.md) guide for more details.
 
 To customize the babel config used, you can pass the [`configFile`](https://babeljs.io/docs/en/options#configfile) option as `true` if you have a `babel.config.js` or a path to a custom config file. This will override the default configuration.
 
-It is recommended that you extend the default configuration by using the [`react-native-builder-bob/babel-preset`](https://github.com/callstack/react-native-builder-bob/blob/main/packages/react-native-builder-bob/babel-preset.js) preset in your custom config file:
+It is recommended that you extend the default configuration by using the [`react-native-builder-bob/babel-preset`](https://github.com/callstack/react-native-builder-bob/blob/main/packages/react-native-builder-bob/src/configs/babel-preset.cjs) preset in your custom config file:
 
 ```js
 module.exports = {
@@ -310,7 +308,6 @@ If you want to ship codegen generated code with your library, you can do the fol
    ```
 
 4. Update imports in your ios code to use the new paths for the generated code:
-
    - If you have a Turbo Module, replace `YourProjectNameSpec.h` with `YourProjectName/YourProjectNameSpec.h`:
 
      ```diff

docs/tsconfig.json

@@ -1,9 +1,13 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": ".tsbuildinfo",
+    "module": "preserve",
     "moduleResolution": "bundler"
   },
   "include": ["**/*"],
+  "exclude": ["doc_build", "node_modules"],
   "mdx": {
     "checkMdx": true
   }

eslint.config.mjs

@@ -22,6 +22,8 @@ export default defineConfig(
       '@typescript-eslint/no-unsafe-member-access': 'off',
       '@typescript-eslint/no-unnecessary-condition': 'off',
       '@typescript-eslint/strict-boolean-expressions': 'off',
+
+      'import-x/extensions': ['error', 'ignorePackages'],
     },
   },
 

packages/create-react-native-library/babel.config.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../lib/index');
+import '../lib/src/index.js';

packages/create-react-native-library/bin/create-react-native-library

@@ -23,7 +23,10 @@
     "url": "https://github.com/callstack/react-native-builder-bob/issues"
   },
   "homepage": "https://oss.callstack.com/react-native-builder-bob/create",
-  "main": "lib/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./lib/src/index.js"
+  },
   "bin": "bin/create-react-native-library",
   "files": [
     "lib",
@@ -37,7 +40,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prepare": "babel --extensions .ts,.tsx src --out-dir lib --ignore '**/__tests__/**' --source-maps --delete-dir-on-start"
+    "prepare": "del-cli lib .tsbuildinfo && tsc"
   },
   "dependencies": {
     "cross-spawn": "^7.0.6",
@@ -48,19 +51,17 @@
     "github-username": "^9.0.0",
     "kleur": "^4.1.5",
     "ora": "^9.3.0",
-    "pigment": "^0.4.3",
+    "pigment": "^0.4.4",
+    "typescript": "^5.8.3",
     "validate-npm-package-name": "^7.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.6",
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
-    "@babel/preset-typescript": "^7.28.5",
     "@commitlint/config-conventional": "^20.5.0",
     "@types/cross-spawn": "^6.0.6",
     "@types/dedent": "^0.7.2",
     "@types/ejs": "^3.1.5",
     "@types/fs-extra": "^11.0.4",
-    "@types/validate-npm-package-name": "^4.0.2"
+    "@types/validate-npm-package-name": "^4.0.2",
+    "del-cli": "^7.0.0"
   }
 }

packages/create-react-native-library/package.json

@@ -1,6 +1,6 @@
-import path from 'path';
+import path from 'node:path';
 import fs from 'fs-extra';
-import sortObjectKeys from '../utils/sortObjectKeys';
+import sortObjectKeys from '../utils/sortObjectKeys.ts';
 
 type PackageJson = {
   devDependencies?: Record<string, string>;

packages/create-react-native-library/src/exampleApp/dependencies.ts

@@ -1,16 +1,16 @@
+import path from 'node:path';
 import dedent from 'dedent';
 import fs from 'fs-extra';
 import { getLatestVersion } from 'get-latest-version';
 import kleur from 'kleur';
-import path from 'path';
 import {
   SUPPORTED_EXPO_SDK_VERSION,
   SUPPORTED_MONOREPO_CONFIG_VERSION,
   SUPPORTED_REACT_NATIVE_VERSION,
-} from '../constants';
-import type { TemplateConfiguration } from '../template';
-import sortObjectKeys from '../utils/sortObjectKeys';
-import { spawn } from '../utils/spawn';
+} from '../constants.ts';
+import type { TemplateConfiguration } from '../template.ts';
+import sortObjectKeys from '../utils/sortObjectKeys.ts';
+import { spawn } from '../utils/spawn.ts';
 
 const FILES_TO_DELETE = [
   '__tests__',

packages/create-react-native-library/src/exampleApp/generateExampleApp.ts

@@ -1,27 +1,27 @@
-import pak from '../package.json';
+import path from 'node:path';
 import fs from 'fs-extra';
 import kleur from 'kleur';
 import ora from 'ora';
-import path from 'path';
+import pak from '../package.json' with { type: 'json' };
 import {
   FALLBACK_BOB_VERSION,
   FALLBACK_NITRO_MODULES_VERSION,
-} from './constants';
-import { alignDependencyVersionsWithExampleApp } from './exampleApp/dependencies';
-import generateExampleApp from './exampleApp/generateExampleApp';
-import { printLocalLibNextSteps, printNonLocalLibNextSteps } from './inform';
-import { prompt } from './prompt';
-import { applyTemplates, generateTemplateConfiguration } from './template';
-import { assertNpxExists } from './utils/assert';
-import { configureTools } from './utils/configureTools';
-import { createInitialGitCommit } from './utils/initialCommit';
+} from './constants.ts';
+import { alignDependencyVersionsWithExampleApp } from './exampleApp/dependencies.ts';
+import generateExampleApp from './exampleApp/generateExampleApp.ts';
+import { printLocalLibNextSteps, printNonLocalLibNextSteps } from './inform.ts';
+import { prompt } from './prompt.ts';
+import { applyTemplates, generateTemplateConfiguration } from './template.ts';
+import { assertNpxExists } from './utils/assert.ts';
+import { configureTools } from './utils/configureTools.ts';
+import { createMetadata } from './utils/createMetadata.ts';
+import { createInitialGitCommit } from './utils/initialCommit.ts';
 import {
   addNitroDependencyToLocalLibrary,
   linkLocalLibrary,
-} from './utils/local';
-import { determinePackageManager } from './utils/packageManager';
-import { resolveNpmPackageVersion } from './utils/resolveNpmPackageVersion';
-import { createMetadata } from './utils/createMetadata';
+} from './utils/local.ts';
+import { determinePackageManager } from './utils/packageManager.ts';
+import { resolveNpmPackageVersion } from './utils/resolveNpmPackageVersion.ts';
 
 async function create() {
   // Prefetch bob version in background while asking questions