Convert @redux-devtools/cli to ESM (#1316)

* stash

* Updates

* Fix lint

* Create lovely-boats-happen.md

* Update package.json

* Update lovely-boats-happen.md

Author: Methuselah96

.changeset/lovely-boats-happen.md

@@ -0,0 +1,6 @@
+---
+'@redux-devtools/cli': major
+---
+
+Convert @redux-devtools/cli to ESM. Please [read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) for more info about ESM.
+Update supported Node versions from `>=14.15.0` to `^14.13.1 || ^16.13.0 || >=18.12.0`.

packages/redux-devtools-cli/.eslintrc.js packages/redux-devtools-cli/.eslintrc.cjspackages/redux-devtools-cli/.eslintrc.js renamed to packages/redux-devtools-cli/.eslintrc.cjs

@@ -1,3 +1,3 @@
 #! /usr/bin/env node
 
-require('../dist/bin/redux-devtools.js');
+import '../dist/bin/redux-devtools.js';

packages/redux-devtools-cli/bin/redux-devtools.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   preset: 'ts-jest',
   transform: {
     '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json' }],

packages/redux-devtools-cli/jest.config.js

@@ -16,6 +16,7 @@
     "index.js",
     "defaultDbOptions.json"
   ],
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
@@ -37,22 +38,22 @@
     "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
   },
   "engines": {
-    "node": ">=14.15.0"
+    "node": "^14.13.1 || ^16.13.0 || >= 18.12.0"
   },
   "dependencies": {
     "@apollo/server": "^4.3.0",
     "@redux-devtools/app": "^2.1.3",
     "@types/react": "^18.0.26",
     "body-parser": "^1.20.1",
-    "chalk": "^4.1.2",
+    "chalk": "^5.2.0",
     "cors": "^2.8.5",
     "cross-spawn": "^7.0.3",
     "electron": "^22.0.0",
     "express": "^4.18.2",
-    "get-port": "^5.1.1",
+    "get-port": "^6.1.2",
     "graphql": "^16.6.0",
     "knex": "^2.3.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "minimist": "^1.2.7",
     "morgan": "^1.10.0",
     "open": "^8.4.0",
@@ -71,7 +72,7 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/express": "^4.17.15",
     "@types/jest": "^29.2.4",
-    "@types/lodash": "^4.14.191",
+    "@types/lodash-es": "^4.17.6",
     "@types/minimist": "^1.2.2",
     "@types/morgan": "^1.9.3",
     "@types/node": "^18.11.17",

packages/redux-devtools-cli/package.json

@@ -1,9 +1,10 @@
 import fs from 'fs';
-import { Store } from '../store';
+import type { Store } from '../store.js';
 
-export const schema = fs
-  .readFileSync(require.resolve('./schema_def.graphql'))
-  .toString();
+export const schema = fs.readFileSync(
+  new URL('./schema_def.graphql', import.meta.url),
+  'utf8'
+);
 
 export const resolvers = {
   Query: {

packages/redux-devtools-cli/src/api/schema.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import semver from 'semver';
-import { Options } from '../options';
+import type { Options } from '../options.js';
 
 const name = '@redux-devtools/cli';
 const startFlag = '/* ' + name + ' start */';

packages/redux-devtools-cli/src/bin/injectServer.ts

@@ -1,15 +1,24 @@
 import open from 'open';
 import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
 import spawn from 'cross-spawn';
-import { Options } from '../options';
+import type { Options } from '../options.js';
+
+const require = createRequire(import.meta.url);
 
 export default async function openApp(app: true | string, options: Options) {
   if (app === true || app === 'electron') {
     try {
       const port = options.port ? `--port=${options.port}` : '';
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       spawn.sync(require('electron') as string, [
-        path.join(__dirname, '..', '..', 'app'),
+        path.join(
+          path.dirname(fileURLToPath(import.meta.url)),
+          '..',
+          '..',
+          'app'
+        ),
         port,
       ]);
     } catch (error) {

packages/redux-devtools-cli/src/bin/openApp.ts

@@ -3,10 +3,10 @@ import fs from 'fs';
 import path from 'path';
 import parseArgs from 'minimist';
 import chalk from 'chalk';
-import * as injectServer from './injectServer';
-import getOptions from '../options';
-import server from '../index';
-import openApp from './openApp';
+import * as injectServer from './injectServer.js';
+import getOptions from '../options.js';
+import server from '../index.js';
+import openApp from './openApp.js';
 
 const argv = parseArgs(process.argv.slice(2));
 

packages/redux-devtools-cli/src/bin/redux-devtools.ts

@@ -1,23 +1,37 @@
 import path from 'path';
-import knexModule, { Knex } from 'knex';
+import { fileURLToPath } from 'url';
+import knex from 'knex';
+import type { Knex } from 'knex';
 import { AGServer } from 'socketcluster-server';
 
+// eslint-disable-next-line @typescript-eslint/ban-types
+type KnexFunction = <TRecord extends {} = any, TResult = unknown[]>(
+  config: Knex.Config | string
+) => Knex<TRecord, TResult>;
+
 export default function connector(options: AGServer.AGServerOptions) {
   const dbOptions = options.dbOptions as Knex.Config;
   dbOptions.useNullAsDefault = true;
   if (!(dbOptions as any).migrate) {
-    return knexModule(dbOptions);
+    return (knex as unknown as KnexFunction)(dbOptions);
   }
 
-  dbOptions.migrations = { directory: path.resolve(__dirname, 'migrations') };
-  dbOptions.seeds = { directory: path.resolve(__dirname, 'seeds') };
-  const knex = knexModule(dbOptions);
+  dbOptions.migrations = {
+    directory: path.join(
+      path.dirname(fileURLToPath(import.meta.url)),
+      'migrations'
+    ),
+  };
+  dbOptions.seeds = {
+    directory: path.join(path.dirname(fileURLToPath(import.meta.url)), 'seeds'),
+  };
+  const knexInstance = (knex as unknown as KnexFunction)(dbOptions);
 
   /* eslint-disable no-console */
-  knex.migrate
+  knexInstance.migrate
     .latest({ loadExtensions: ['.js'] })
     .then(function () {
-      return knex.seed.run({ loadExtensions: ['.js'] });
+      return knexInstance.seed.run({ loadExtensions: ['.js'] });
     })
     .then(function () {
       console.log('   \x1b[0;32m[Done]\x1b[0m Migrations are finished\n');
@@ -27,5 +41,5 @@ export default function connector(options: AGServer.AGServerOptions) {
     });
   /* eslint-enable no-console */
 
-  return knex;
+  return knexInstance;
 }