chore: migrate from CJS to ESM (#12)

* chore: migrate from CJS to ESM

* chore: change from `dist/test-helpers` to `test-helpers/dist`

* fix: use `bin.ts` instead of `index.ts`

* fix: replace `__dirname` with `import.meta.url`

* chore: bump `gradient-string` and remove leftovers

* fix: remove dependency check rule

* fix: migrate from `esbuild` to `tsc`

* fix: adapt `test-helpers` package for ESM

* refactor: fix template path

* fix: set `NodeNext` for `moduleResolution` and `module`

---------

Co-authored-by: Maciej Jastrzębski <[email protected]>

Author: szymonrybczak

eslint.config.js

@@ -1,6 +1,6 @@
-const nx = require('@nx/eslint-plugin');
+import nx from '@nx/eslint-plugin';
 
-module.exports = [
+export default [
   ...nx.configs['flat/base'],
   ...nx.configs['flat/typescript'],
   ...nx.configs['flat/javascript'],

nx.json

@@ -14,7 +14,19 @@
     "@nx/js:tsc": {
       "cache": true,
       "dependsOn": ["^build"],
-      "inputs": ["default", "^default"]
+      "inputs": ["default", "^default"],
+      "options": {
+        "outputPath": "{projectRoot}/dist",
+        "main": "{projectRoot}/src/index.ts",
+        "tsConfig": "{projectRoot}/tsconfig.lib.json",
+        "assets": ["packages/{projectRoot}/*.md"],
+        "buildableProjectDepsInPackageJsonType": "dependencies",
+        "generateExportsField": true,
+        "compilerOptions": {
+          "module": "NodeNext",
+          "outDir": "packages/{projectRoot}/dist"
+        }
+      }
     }
   },
   "release": {

package.json

@@ -2,8 +2,9 @@
   "name": "rnef",
   "version": "0.0.0",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "build": "nx build create-app",
+    "build": "nx run-many -t build",
     "test": "nx run-many --target=test --watch=false",
     "lint": "nx run-many --target=lint"
   },

packages/create-app/eslint.config.js

@@ -1,19 +1,12 @@
-const baseConfig = require('../../eslint.config.js');
+import baseConfig from '../../eslint.config.js';
+import jsoncParser from 'jsonc-eslint-parser';
 
-module.exports = [
+export default [
   ...baseConfig,
   {
     files: ['**/*.json'],
-    rules: {
-      '@nx/dependency-checks': [
-        'error',
-        {
-          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
-        },
-      ],
-    },
     languageOptions: {
-      parser: require('jsonc-eslint-parser'),
+      parser: jsoncParser,
     },
   },
 ];

packages/create-app/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@callstack/create-rnef-app",
   "version": "0.0.1",
-  "type": "commonjs",
+  "type": "module",
   "main": "./src/index.js",
   "typings": "./src/index.d.ts",
   "bin": {
     "create-rnef-app": "./src/bin.js"
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "gradient-string": "^2.0.2",
+    "gradient-string": "^3.0.0",
     "minimist": "^1.2.8",
     "tslib": "^2.3.0"
   },

packages/create-app/project.json

@@ -15,12 +15,10 @@
   "targets": {
     "build": {
       "executor": "@nx/js:tsc",
-      "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "packages/create-app/dist",
-        "main": "packages/create-app/src/index.ts",
-        "tsConfig": "packages/create-app/tsconfig.lib.json",
-        "assets": ["packages/create-app/*.md"]
+        "main": "packages/create-app/src/bin.ts",
+        "tsConfig": "packages/create-app/tsconfig.lib.json"
       }
     },
     "lint": {

packages/create-app/src/bin.ts

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-export * from './lib/create-app';
+export * from './lib/create-app.js';

packages/create-app/src/index.ts

@@ -1 +1 @@
-export * from './lib/create-app';
+export * from './lib/create-app.js';

packages/create-app/src/lib/create-app.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
-import path from 'node:path';
-import editTemplate from './edit-template';
-import { parsePackageInfo } from './parsers';
+import path, { dirname } from 'node:path';
+import editTemplate from './edit-template.js';
+import { parsePackageInfo } from './parsers.js';
 import {
   cancelAndExit,
   printHelpMessage,
@@ -11,10 +11,11 @@ import {
   printWelcomeMessage,
   printByeMessage,
   promptTemplate,
-} from './prompts';
-import { copyDir, isEmptyDir, removeDir, resolveAbsolutePath } from './fs';
-import { printLogo } from './logo';
-import { parseCliOptions } from './parse-cli-options';
+} from './prompts.js';
+import { copyDir, isEmptyDir, removeDir, resolveAbsolutePath } from './fs.js';
+import { printLogo } from './logo.js';
+import { parseCliOptions } from './parse-cli-options.js';
+import { fileURLToPath } from 'node:url';
 
 const TEMPLATES = ['default'];
 
@@ -53,6 +54,9 @@ async function create() {
   removeDir(absoluteTargetDir);
 
   const templateName = options.template ?? (await promptTemplate(TEMPLATES));
+
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   const srcDir = path.join(
     __dirname,
     // Workaround for getting the template from within the monorepo

packages/create-app/src/lib/prompts.ts

@@ -8,9 +8,10 @@ import {
   text,
 } from '@clack/prompts';
 import fs from 'node:fs';
-import path from 'node:path';
-import { parsePackageManagerFromUserAgent } from './parsers';
-import { validateProjectName } from './validate-project-name';
+import { dirname, join } from 'node:path';
+import { parsePackageManagerFromUserAgent } from './parsers.js';
+import { validateProjectName } from './validate-project-name.js';
+import { fileURLToPath } from 'node:url';
 
 export function printHelpMessage(templates: string[]) {
   console.log(`
@@ -30,7 +31,9 @@ export function printHelpMessage(templates: string[]) {
 }
 
 export function printVersionMessage() {
-  const packageJsonPath = path.join(__dirname, '..', '..', 'package.json');
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
+  const packageJsonPath = join(__dirname, '..', '..', 'package.json');
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
   console.log(`${packageJson.version}`);
 }