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

* stash

* Updates

* Fix lint

* Create lovely-boats-happen.md

* Update package.json

* Update lovely-boats-happen.md

.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/bin/redux-devtools.js

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

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

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

packages/redux-devtools-cli/package.json

@@ -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/src/api/schema.ts

@@ -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/bin/injectServer.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/openApp.ts

@@ -1,7 +1,11 @@
 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') {
@@ -9,7 +13,12 @@ export default async function openApp(app: true | string, options: Options) {
       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/redux-devtools.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/db/connector.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;
 }

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

@@ -2,9 +2,9 @@ import express from 'express';
 import http from 'http';
 import getPort from 'get-port';
 import socketClusterServer from 'socketcluster-server';
-import getOptions from './options';
-import routes from './routes';
-import createStore from './store';
+import getOptions from './options.js';
+import routes from './routes.js';
+import createStore from './store.js';
 
 // const LOG_LEVEL_NONE = 0;
 // const LOG_LEVEL_ERROR = 1;

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

@@ -1,4 +1,4 @@
-import path from 'path';
+import fs from 'fs';
 
 interface ProtocolOptions {
   key: string | undefined;
@@ -31,9 +31,14 @@ export interface Options {
 export default function getOptions(argv: { [arg: string]: any }): Options {
   let dbOptions = argv.dbOptions;
   if (typeof dbOptions === 'string') {
-    dbOptions = require(path.resolve(process.cwd(), argv.dbOptions as string));
+    dbOptions = JSON.parse(fs.readFileSync(dbOptions, 'utf8'));
   } else if (typeof dbOptions === 'undefined') {
-    dbOptions = require('../defaultDbOptions.json');
+    dbOptions = JSON.parse(
+      fs.readFileSync(
+        new URL('../defaultDbOptions.json', import.meta.url),
+        'utf8'
+      )
+    );
   }
 
   return {

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

@@ -1,4 +1,6 @@
 import path from 'path';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
 import express from 'express';
 import type { Router } from 'express';
 import morgan from 'morgan';
@@ -8,11 +10,13 @@ import cors from 'cors';
 import { AGServer } from 'socketcluster-server';
 import { ApolloServer } from '@apollo/server';
 import { expressMiddleware } from '@apollo/server/express4';
-import { AddData, ReportBaseFields, Store } from './store';
-import { resolvers, schema } from './api/schema';
+import type { AddData, ReportBaseFields, Store } from './store.js';
+import { resolvers, schema } from './api/schema.js';
 
 const app = express.Router();
 
+const require = createRequire(import.meta.url);
+
 function serveUmdModule(name: string) {
   app.use(
     express.static(
@@ -74,7 +78,12 @@ function routes(
     res.send(`reduxDevToolsPort = ${options.port}`);
   });
   app.get('*', function (req, res) {
-    res.sendFile(path.join(__dirname, '../app/index.html'));
+    res.sendFile(
+      path.join(
+        path.dirname(fileURLToPath(import.meta.url)),
+        '../app/index.html'
+      )
+    );
   });
 
   app.use(cors({ methods: 'POST' }));

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

@@ -1,8 +1,8 @@
 import { v4 as uuidV4 } from 'uuid';
-import pick from 'lodash/pick';
+import { pick } from 'lodash-es';
 import { AGServer } from 'socketcluster-server';
 import { Knex } from 'knex';
-import connector from './db/connector';
+import connector from './db/connector.js';
 
 const reports = 'remotedev_reports';
 // var payloads = 'remotedev_payloads';

packages/redux-devtools-cli/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "CommonJS",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "outDir": "dist"
   },
   "include": ["src"]

pnpm-lock.yaml

@@ -929,7 +929,7 @@ importers:
       '@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
@@ -943,7 +943,7 @@ importers:
       '@typescript-eslint/eslint-plugin': ^5.47.0
       '@typescript-eslint/parser': ^5.47.0
       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
@@ -951,11 +951,11 @@ importers:
       eslint-config-prettier: ^8.5.0
       eslint-plugin-jest: ^27.1.7
       express: ^4.18.2
-      get-port: ^5.1.1
+      get-port: ^6.1.2
       graphql: ^16.6.0
       jest: ^29.3.1
       knex: ^2.3.0
-      lodash: ^4.17.21
+      lodash-es: ^4.17.21
       minimist: ^1.2.7
       morgan: ^1.10.0
       ncp: ^2.0.0
@@ -978,15 +978,15 @@ importers:
       '@redux-devtools/app': link:../redux-devtools-app
       '@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_sqlite3@5.1.4
-      lodash: 4.17.21
+      lodash-es: 4.17.21
       minimist: 1.2.7
       morgan: 1.10.0
       open: 8.4.0
@@ -1004,7 +1004,7 @@ importers:
       '@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
@@ -8517,6 +8517,12 @@ packages:
     dependencies:
       '@types/node': 18.11.17
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: true
+
   /@types/lodash.curry/4.1.7:
     resolution: {integrity: sha512-R+IkSvh7CI8klh7FkQuTAiAR+aPFqYrNEjw/hMxjCSO7TsAqBAxpR99PxxJN1lgE6YuvpHEoktqbh6V5VLzxZA==}
     dependencies:
@@ -10856,6 +10862,11 @@ packages:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  /chalk/5.2.0:
+    resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: false
+
   /char-regex/1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
@@ -13892,9 +13903,9 @@ packages:
     resolution: {integrity: sha512-41eOxtlGgHQRbFyA8KTH+w+32Em3cRdfBud7j67ulzmIfmaHX9doq47s0fa4P5o9H64BZX9nrYI6sJvk46Op+Q==}
     dev: false
 
-  /get-port/5.1.1:
-    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
-    engines: {node: '>=8'}
+  /get-port/6.1.2:
+    resolution: {integrity: sha512-BrGGraKm2uPqurfGVj/z97/zv8dPleC6x9JBNRTrDNtCkkRF4rPwrQXFgL7+I+q8QSdU4ntLQX2D7KIxSy8nGw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
   /get-stdin/4.0.1:
@@ -14744,7 +14755,7 @@ packages:
     engines: {node: '>=12.0.0'}
     dependencies:
       ansi-escapes: 4.3.2
-      chalk: 4.1.1
+      chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-width: 3.0.0
       external-editor: 3.1.0
@@ -17915,7 +17926,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       bl: 4.1.0
-      chalk: 4.1.1
+      chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.7.0
       is-interactive: 1.0.0