refactor: move to ES modules

.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/bin/create-react-native-library

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

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

@@ -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/src/exampleApp/dependencies.ts

@@ -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/generateExampleApp.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/index.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

packages/create-react-native-library/src/inform.ts

@@ -1,7 +1,7 @@
-import path from 'path';
+import path from 'node:path';
 import dedent from 'dedent';
-import type { TemplateConfiguration } from './template';
 import kleur from 'kleur';
+import type { TemplateConfiguration } from './template.ts';
 
 export function printNonLocalLibNextSteps(config: TemplateConfiguration) {
   const platforms = {

packages/create-react-native-library/src/prompt.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import githubUsername from 'github-username';
 import { create } from 'pigment';
 import validateNpmPackage from 'validate-npm-package-name';
-import { spawn } from './utils/spawn';
-import githubUsername from 'github-username';
-import { AVAILABLE_TOOLS } from './utils/configureTools';
+import { AVAILABLE_TOOLS } from './utils/configureTools.ts';
+import { spawn } from './utils/spawn.ts';
 
 export type Answers = NonNullable<Awaited<ReturnType<typeof prompt.show>>>;
 

packages/create-react-native-library/src/template.ts

@@ -1,7 +1,7 @@
-import path from 'path';
-import fs from 'fs-extra';
+import path from 'node:path';
 import ejs from 'ejs';
-import type { Answers, ExampleApp, ProjectType } from './prompt';
+import fs from 'fs-extra';
+import type { Answers, ExampleApp, ProjectType } from './prompt.ts';
 
 export type TemplateVersions = {
   bob: string;
@@ -51,48 +51,93 @@ const BINARIES = [
   /\$\.yarn(?![a-z])/,
 ];
 
-const COMMON_FILES = path.resolve(__dirname, '../templates/common');
-const COMMON_LOCAL_FILES = path.resolve(__dirname, '../templates/common-local');
+const COMMON_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/common'
+);
+const COMMON_LOCAL_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/common-local'
+);
 const EXAMPLE_COMMON_FILES = path.resolve(
-  __dirname,
-  '../templates/example-common'
+  import.meta.dirname,
+  '../../templates/example-common'
+);
+const EXAMPLE_BARE_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/example-bare'
 );
-const EXAMPLE_BARE_FILES = path.resolve(__dirname, '../templates/example-bare');
 const EXAMPLE_MODULE_NEW_FILES = path.resolve(
-  __dirname,
-  '../templates/example-module-new'
+  import.meta.dirname,
+  '../../templates/example-module-new'
+);
+const EXAMPLE_VIEW_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/example-view'
+);
+const EXAMPLE_EXPO_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/example-expo'
 );
-const EXAMPLE_VIEW_FILES = path.resolve(__dirname, '../templates/example-view');
-const EXAMPLE_EXPO_FILES = path.resolve(__dirname, '../templates/example-expo');
 
-const JS_FILES = path.resolve(__dirname, '../templates/js-library');
-const JS_VIEW_FILES = path.resolve(__dirname, '../templates/js-view');
+const JS_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/js-library'
+);
+const JS_VIEW_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/js-view'
+);
 const NATIVE_COMMON_FILES = path.resolve(
-  __dirname,
-  '../templates/native-common'
+  import.meta.dirname,
+  '../../templates/native-common'
 );
 const EXAMPLE_NATIVE_COMMON_FILES = path.resolve(
-  __dirname,
-  '../templates/example-native-common'
+  import.meta.dirname,
+  '../../templates/example-native-common'
+);
+const NITRO_COMMON_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/nitro-common'
+);
+const CPP_FILES = path.resolve(
+  import.meta.dirname,
+  '../../templates/cpp-library'
 );
-const NITRO_COMMON_FILES = path.resolve(__dirname, '../templates/nitro-common');
-const CPP_FILES = path.resolve(__dirname, '../templates/cpp-library');
 
 const NATIVE_FILES = {
-  module_new: path.resolve(__dirname, '../templates/native-library-new'),
-  view_new: path.resolve(__dirname, '../templates/native-view-new'),
-  module_nitro: path.resolve(__dirname, '../templates/nitro-module'),
-  view_nitro: path.resolve(__dirname, '../templates/nitro-view'),
+  module_new: path.resolve(
+    import.meta.dirname,
+    '../../templates/native-library-new'
+  ),
+  view_new: path.resolve(
+    import.meta.dirname,
+    '../../templates/native-view-new'
+  ),
+  module_nitro: path.resolve(
+    import.meta.dirname,
+    '../../templates/nitro-module'
+  ),
+  view_nitro: path.resolve(import.meta.dirname, '../../templates/nitro-view'),
 } as const;
 
 const OBJC_FILES = {
-  module_common: path.resolve(__dirname, '../templates/objc-library'),
-  view_new: path.resolve(__dirname, '../templates/objc-view-new'),
+  module_common: path.resolve(
+    import.meta.dirname,
+    '../../templates/objc-library'
+  ),
+  view_new: path.resolve(import.meta.dirname, '../../templates/objc-view-new'),
 } as const;
 
 const KOTLIN_FILES = {
-  module_new: path.resolve(__dirname, '../templates/kotlin-library-new'),
-  view_new: path.resolve(__dirname, '../templates/kotlin-view-new'),
+  module_new: path.resolve(
+    import.meta.dirname,
+    '../../templates/kotlin-library-new'
+  ),
+  view_new: path.resolve(
+    import.meta.dirname,
+    '../../templates/kotlin-view-new'
+  ),
 } as const;
 
 export function generateTemplateConfiguration({

packages/create-react-native-library/src/utils/assert.ts

@@ -1,5 +1,5 @@
 import kleur from 'kleur';
-import { spawn } from './spawn';
+import { spawn } from './spawn.ts';
 
 export async function assertNpxExists() {
   try {

packages/create-react-native-library/src/utils/configureTools.ts

@@ -1,7 +1,7 @@
-import fs from 'fs-extra';
 import path from 'node:path';
-import { applyTemplate, type TemplateConfiguration } from '../template';
-import sortObjectKeys from './sortObjectKeys';
+import fs from 'fs-extra';
+import { applyTemplate, type TemplateConfiguration } from '../template.ts';
+import sortObjectKeys from './sortObjectKeys.ts';
 
 type PackageJson = {
   dependencies?: Record<string, string>;
@@ -128,7 +128,10 @@ export async function configureTools({
       continue;
     }
 
-    const toolDir = path.resolve(__dirname, `../../templates/tools/${key}`);
+    const toolDir = path.resolve(
+      import.meta.dirname,
+      `../../../templates/tools/${key}`
+    );
 
     if (fs.existsSync(toolDir)) {
       await applyTemplate(config, toolDir, root);

packages/create-react-native-library/src/utils/createMetadata.ts

@@ -1,5 +1,5 @@
-import { version } from '../../package.json';
-import type { Answers } from '../prompt';
+import pack from '../../package.json' with { type: 'json' };
+import type { Answers } from '../prompt.ts';
 
 export function createMetadata(answers: Partial<Answers>) {
   // Some of the passed args can already be derived from the generated package.json file.
@@ -27,7 +27,7 @@ export function createMetadata(answers: Partial<Answers>) {
     )
   );
 
-  libraryMetadata.version = version;
+  libraryMetadata.version = pack.version;
 
   return libraryMetadata;
 }