@ohos-ports/redux-devtools-cli 5.0.0-beta.0

package/src/api/schema_def.graphql

@@ -0,0 +1,60 @@
+# A list of options for the type of the report
+enum ReportType {
+  STATE
+  ACTION
+  STATES
+  ACTIONS
+}
+
+type Report {
+  # Report ID
+  id: ID!
+  # Type of the report, can be: STATE, ACTION, STATES, ACTIONS
+  type: ReportType
+  # Briefly what happened
+  title: String
+  # Details supplied by the user
+  description: String
+  # The last dispatched action before the report was sent
+  action: String
+  # Stringified actions or the state or both, which should be loaded the application to reproduce the exact behavior
+  payload: String
+  # Stringified preloaded state object. Could be the initial state of the app or committed state (after dispatching COMMIT action or reaching maxAge)
+  preloadedState: String
+  # Screenshot url or blob as a string
+  screenshot: String
+  # User Agent String
+  userAgent: String
+  # Application version to group the reports and versioning
+  version: String
+  # Used to identify the user who sent the report
+  userId: String
+  # More detailed data about the user, usually it's a stringified object
+  user: String
+  # Everything else you want to send
+  meta: String
+  # Error message which invoked sending the report
+  exception: String
+  # Id to identify the store in case there are multiple stores
+  instanceId: String
+  # Timestamp when the report was added
+  added: String
+  # Id to identify the application (from apps table)
+  appId: ID
+}
+
+# Explore GraphQL query schema
+type Query {
+  # List all reports
+  reports: [Report]
+  # Get a report by ID
+  report(
+    # Report ID
+    id: ID!
+  ): Report
+}
+
+schema {
+  query: Query
+  #mutation: Mutation
+}

package/src/bin/injectServer.ts

@@ -0,0 +1,104 @@
+import fs from 'fs';
+import path from 'path';
+import semver from 'semver';
+import type { Options } from '../options.js';
+
+const name = '@redux-devtools/cli';
+const startFlag = '/* ' + name + ' start */';
+const endFlag = '/* ' + name + ' end */';
+const serverFlags: { [moduleName: string]: { [version: string]: string } } = {
+  'react-native': {
+    '0.0.1': '    _server(argv, config, resolve, reject);',
+    '0.31.0':
+      "  runServer(args, config, () => console.log('\\nReact packager ready.\\n'));",
+    '0.44.0-rc.0': '  runServer(args, config, startedCallback, readyCallback);',
+    '0.46.0-rc.0':
+      '  runServer(runServerArgs, configT, startedCallback, readyCallback);',
+    '0.57.0': '  runServer(args, configT);',
+  },
+  'react-native-desktop': {
+    '0.0.1': '    _server(argv, config, resolve, reject);',
+  },
+};
+
+function getModuleVersion(modulePath: string): string {
+  return JSON.parse(
+    fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8'),
+  ).version;
+}
+
+function getServerFlag(moduleName: string, version: string): string {
+  const flags = serverFlags[moduleName || 'react-native'];
+  const versions = Object.keys(flags);
+  let flag;
+  for (let i = 0; i < versions.length; i++) {
+    if (semver.gte(version, versions[i])) {
+      flag = flags[versions[i]];
+    }
+  }
+  return flag as string;
+}
+
+export const dir = 'local-cli/server';
+export const file = 'server.js';
+export const fullPath = path.join(dir, file);
+
+export function inject(
+  modulePath: string,
+  options: Options,
+  moduleName: string,
+) {
+  const filePath = path.join(modulePath, fullPath);
+  if (!fs.existsSync(filePath)) return false;
+
+  const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));
+  const code = [
+    startFlag,
+    '    require("' + name + '")(' + JSON.stringify(options) + ')',
+    '      .then(_remotedev =>',
+    '        _remotedev.ready.then(() => {',
+    '          if (!_remotedev.portAlreadyUsed) console.log("-".repeat(80));',
+    '      ' + serverFlag,
+    '        })',
+    '      );',
+    endFlag,
+  ].join('\n');
+
+  const serverCode = fs.readFileSync(filePath, 'utf-8');
+  let start = serverCode.indexOf(startFlag); // already injected ?
+  let end = serverCode.indexOf(endFlag) + endFlag.length;
+  if (start === -1) {
+    start = serverCode.indexOf(serverFlag);
+    end = start + serverFlag.length;
+  }
+  fs.writeFileSync(
+    filePath,
+    serverCode.substr(0, start) +
+      code +
+      serverCode.substr(end, serverCode.length),
+  );
+  return true;
+}
+
+export function revert(
+  modulePath: string,
+  options: Options,
+  moduleName: string,
+) {
+  const filePath = path.join(modulePath, fullPath);
+  if (!fs.existsSync(filePath)) return false;
+
+  const serverFlag = getServerFlag(moduleName, getModuleVersion(modulePath));
+  const serverCode = fs.readFileSync(filePath, 'utf-8');
+  const start = serverCode.indexOf(startFlag); // already injected ?
+  const end = serverCode.indexOf(endFlag) + endFlag.length;
+  if (start !== -1) {
+    fs.writeFileSync(
+      filePath,
+      serverCode.substr(0, start) +
+        serverFlag +
+        serverCode.substr(end, serverCode.length),
+    );
+  }
+  return true;
+}

package/src/bin/openApp.ts

@@ -0,0 +1,53 @@
+import open from 'open';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import spawn from 'cross-spawn';
+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}` : '';
+      const host = options.host ? `--host=${options.host}` : '';
+      const protocol = options.protocol ? `--protocol=${options.protocol}` : '';
+
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      spawn(require('electron') as string, [
+        path.join(
+          path.dirname(fileURLToPath(import.meta.url)),
+          '..',
+          '..',
+          'app',
+        ),
+        port,
+        host,
+        protocol,
+      ]);
+    } catch (error) {
+      /* eslint-disable no-console */
+      if ((error as Error).message === "Cannot find module 'electron'") {
+        // TODO: Move electron to dev-dependences to make our package installation faster when not needed.
+        console.log(
+          '   \x1b[1;31m[Warn]\x1b[0m Electron module not installed.\n',
+        );
+        /*
+        We will use "npm" to install Electron via "npm install -D".
+        Do you want to install 'electron' (yes/no): yes
+        Installing 'electron' (running 'npm install -D webpack-cli')...
+        */
+      } else {
+        console.log(error);
+      }
+      /* eslint-enable no-console */
+    }
+    return;
+  }
+
+  await open(
+    `${options.protocol}://${options.host ?? 'localhost'}:${options.port}/`,
+    app !== 'browser' ? { app: { name: app } } : undefined,
+  );
+}

package/src/bin/redux-devtools.ts

@@ -0,0 +1,94 @@
+#! /usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import parseArgs from 'minimist';
+import chalk from 'chalk';
+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));
+
+const options = getOptions(argv);
+
+function readFile(filePath: string) {
+  return fs.readFileSync(path.resolve(process.cwd(), filePath), 'utf-8');
+}
+
+if (argv.protocol === 'https') {
+  argv.key = argv.key ? readFile(argv.key as string) : null;
+  argv.cert = argv.cert ? readFile(argv.cert as string) : null;
+}
+
+function log(pass: boolean, msg: string) {
+  const prefix = pass ? chalk.green.bgBlack('PASS') : chalk.red.bgBlack('FAIL');
+  const color = pass ? chalk.blue : chalk.red;
+  console.log(prefix, color(msg)); // eslint-disable-line no-console
+}
+
+function getModuleName(type: string) {
+  switch (type) {
+    case 'macos':
+      return 'react-native-macos';
+    // react-native-macos is renamed from react-native-desktop
+    case 'desktop':
+      return 'react-native-desktop';
+    case 'reactnative':
+    default:
+      return 'react-native';
+  }
+}
+
+function getModulePath(moduleName: string) {
+  return path.join(process.cwd(), 'node_modules', moduleName);
+}
+
+function getModule(type: string) {
+  let moduleName = getModuleName(type);
+  let modulePath = getModulePath(moduleName);
+  if (type === 'desktop' && !fs.existsSync(modulePath)) {
+    moduleName = getModuleName('macos');
+    modulePath = getModulePath(moduleName);
+  }
+  return {
+    name: moduleName,
+    path: modulePath,
+  };
+}
+
+function injectRN(type: string, msg: string) {
+  const module = getModule(type);
+  const fn = type === 'revert' ? injectServer.revert : injectServer.inject;
+  const pass = fn(module.path, options, module.name);
+  log(
+    pass,
+    msg +
+      (pass
+        ? '.'
+        : ', the file `' +
+          path.join(module.name, injectServer.fullPath) +
+          '` not found.'),
+  );
+
+  process.exit(pass ? 0 : 1);
+}
+
+if (argv.revert) {
+  injectRN(
+    argv.revert as string,
+    'Revert injection of ReduxDevTools server from React Native local server',
+  );
+}
+if (argv.injectserver) {
+  injectRN(
+    argv.injectserver as string,
+    'Inject ReduxDevTools server into React Native local server',
+  );
+}
+
+const response = await server(argv);
+if (argv.open && argv.open !== 'false') {
+  await response.ready;
+  await openApp(argv.open as string, options);
+}

package/src/db/connector.ts

@@ -0,0 +1,67 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import knex from 'knex';
+import type { Knex } from 'knex';
+import { AGServer } from 'socketcluster-server';
+
+// HarmonyOS compatibility: knex's sqlite3 dialect hardcodes require('sqlite3'),
+// but on HarmonyOS the driver is published as '@ohos-ports/sqlite3'. Install a
+// module resolver alias so knex resolves 'sqlite3' to the HarmonyOS driver.
+import { createRequire } from 'module';
+const nodeRequire = createRequire(import.meta.url);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nodeModule = nodeRequire('module') as any;
+const originalResolveFilename = nodeModule._resolveFilename as (
+  request: string,
+  ...args: unknown[]
+) => string;
+nodeModule._resolveFilename = function (request: string, ...args: unknown[]) {
+  if (request === 'sqlite3') {
+    try {
+      request = nodeRequire.resolve('@ohos-ports/sqlite3');
+    } catch {
+      // driver unavailable; fall through to the original resolver
+    }
+  }
+  return originalResolveFilename.call(this, request, ...args);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+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 (knex as unknown as KnexFunction)(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 */
+  knexInstance.migrate
+    .latest({ loadExtensions: ['.js'] })
+    .then(function () {
+      return knexInstance.seed.run({ loadExtensions: ['.js'] });
+    })
+    .then(function () {
+      console.log('   \x1b[0;32m[Done]\x1b[0m Migrations are finished\n');
+    })
+    .catch(function (error) {
+      console.error(error);
+    });
+  /* eslint-enable no-console */
+
+  return knexInstance;
+}

package/src/db/migrations/index.ts

@@ -0,0 +1,87 @@
+import { Knex } from 'knex';
+
+export function up(knex: Knex) {
+  return Promise.all([
+    knex.schema.createTable('remotedev_reports', function (table) {
+      table.uuid('id').primary();
+      table.string('type');
+      table.string('title');
+      table.string('description');
+      table.string('action');
+      table.text('payload', 'longtext');
+      table.text('preloadedState', 'longtext');
+      table.text('screenshot', 'longtext');
+      table.string('userAgent');
+      table.string('version');
+      table.string('user');
+      table.string('userId');
+      table.string('instanceId');
+      table.string('meta');
+      table.string('exception');
+      table.timestamp('added').defaultTo(knex.fn.now());
+      table
+        .uuid('appId')
+        .references('id')
+        .inTable('remotedev_apps')
+        .onDelete('CASCADE')
+        .onUpdate('CASCADE')
+        .defaultTo('78626c31-e16b-4528-b8e5-f81301b627f4');
+    }),
+    knex.schema.createTable('remotedev_payloads', function (table) {
+      table.uuid('id').primary();
+      table.text('state');
+      table.text('action');
+      table.timestamp('added').defaultTo(knex.fn.now());
+      table
+        .uuid('reportId')
+        .references('id')
+        .inTable('remotedev_reports')
+        .onDelete('CASCADE')
+        .onUpdate('CASCADE');
+    }),
+    knex.schema.createTable('remotedev_apps', function (table) {
+      table.uuid('id').primary();
+      table.string('title');
+      table.string('description');
+      table.string('url');
+      table.timestamps(false, true);
+    }),
+    knex.schema.createTable('remotedev_users', function (table) {
+      table.uuid('id').primary();
+      table.string('name');
+      table.string('login');
+      table.string('email');
+      table.string('avatarUrl');
+      table.string('profileUrl');
+      table.string('oauthId');
+      table.string('oauthType');
+      table.string('token');
+      table.timestamps(false, true);
+    }),
+    knex.schema.createTable('remotedev_users_apps', function (table) {
+      table.boolean('readOnly').defaultTo(false);
+      table.uuid('userId');
+      table.uuid('appId');
+      table.primary(['userId', 'appId']);
+      table
+        .foreign('userId')
+        .references('id')
+        .inTable('remotedev_users')
+        .onDelete('CASCADE')
+        .onUpdate('CASCADE');
+      table
+        .foreign('appId')
+        .references('id')
+        .inTable('remotedev_apps')
+        .onDelete('CASCADE')
+        .onUpdate('CASCADE');
+    }),
+  ]);
+}
+
+export function down(knex: Knex) {
+  return Promise.all([
+    knex.schema.dropTable('remotedev_reports'),
+    knex.schema.dropTable('remotedev_apps'),
+  ]);
+}

package/src/db/seeds/index.ts

@@ -0,0 +1,12 @@
+import { Knex } from 'knex';
+
+export function seed(knex: Knex) {
+  return Promise.all([knex('remotedev_apps').del()]).then(function () {
+    return Promise.all([
+      knex('remotedev_apps').insert({
+        id: '78626c31-e16b-4528-b8e5-f81301b627f4',
+        title: 'Default',
+      }),
+    ]);
+  });
+}

package/src/index.ts

@@ -0,0 +1,137 @@
+import express from 'express';
+import http from 'http';
+import getPort from 'get-port';
+import socketClusterServer from 'socketcluster-server';
+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;
+const LOG_LEVEL_WARN = 2;
+const LOG_LEVEL_INFO = 3;
+
+export default async function (argv: { [arg: string]: any }): Promise<{
+  portAlreadyUsed?: boolean;
+  ready: Promise<void>;
+}> {
+  const options = Object.assign(getOptions(argv), {
+    allowClientPublish: false,
+  });
+  const port = options.port;
+  const logLevel =
+    options.logLevel === undefined ? LOG_LEVEL_INFO : options.logLevel;
+  // Check port already used
+  const p = await getPort({ port });
+  if (port !== p) {
+    if (logLevel >= LOG_LEVEL_WARN) {
+      console.log(`[ReduxDevTools] Server port ${port} is already used.`);
+    }
+    return {
+      portAlreadyUsed: true,
+      ready: Promise.resolve(),
+    };
+  }
+
+  if (logLevel >= LOG_LEVEL_INFO) {
+    console.log('[ReduxDevTools] Start server...');
+    console.log('-'.repeat(80) + '\n');
+  }
+  const httpServer = http.createServer();
+  const agServer = socketClusterServer.attach(httpServer, options);
+
+  const app = express();
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  httpServer.on('request', app);
+  const store = createStore(options);
+  app.use(routes(options, store, agServer));
+
+  agServer.setMiddleware(
+    agServer.MIDDLEWARE_INBOUND,
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    async (middlewareStream) => {
+      for await (const action of middlewareStream) {
+        if (action.type === action.TRANSMIT) {
+          const channel = action.receiver;
+          const data = action.data;
+          if (
+            channel.substring(0, 3) === 'sc-' ||
+            channel === 'respond' ||
+            channel === 'log'
+          ) {
+            void agServer.exchange.transmitPublish(channel, data);
+          } else if (channel === 'log-noid') {
+            void agServer.exchange.transmitPublish('log', {
+              id: action.socket.id,
+              data: data,
+            });
+          }
+        } else if (action.type === action.SUBSCRIBE) {
+          if (action.channel === 'report') {
+            store
+              .list()
+              .then(function (data) {
+                void agServer.exchange.transmitPublish('report', {
+                  type: 'list',
+                  data: data,
+                });
+              })
+              .catch(function (error) {
+                console.error(error);
+              });
+          }
+        }
+        action.allow();
+      }
+    },
+  );
+
+  void (async () => {
+    for await (const { socket } of agServer.listener('connection')) {
+      let channelToWatch: string, channelToEmit: string;
+      void (async () => {
+        for await (const request of socket.procedure('login')) {
+          const credentials = request.data;
+          if (credentials === 'master') {
+            channelToWatch = 'respond';
+            channelToEmit = 'log';
+          } else {
+            channelToWatch = 'log';
+            channelToEmit = 'respond';
+          }
+          request.end(channelToWatch);
+        }
+      })();
+      void (async () => {
+        for await (const request of socket.procedure('getReport')) {
+          const id = request.data as string;
+          store
+            .get(id)
+            .then(function (data) {
+              request.end(data);
+            })
+            .catch(function (error) {
+              console.error(error);
+            });
+        }
+      })();
+      void (async () => {
+        for await (const data of socket.listener('disconnect')) {
+          const channel = agServer.exchange.channel('sc-' + socket.id);
+          channel.unsubscribe();
+          void agServer.exchange.transmitPublish(channelToEmit!, {
+            id: socket.id,
+            type: 'DISCONNECTED',
+          });
+        }
+      })();
+    }
+  })();
+
+  httpServer.listen(options.port);
+  return {
+    ready: (async () => {
+      await agServer.listener('ready' as 'error').once();
+    })(),
+  };
+}

package/src/options.ts

@@ -0,0 +1,68 @@
+import fs from 'fs';
+
+interface ProtocolOptions {
+  key: string | undefined;
+  cert: string | undefined;
+  passphrase: string | undefined;
+}
+
+interface DbOptions {
+  client: string;
+  connection: {
+    filename: string;
+  };
+  useNullAsDefault: boolean;
+  debug: boolean;
+  migrate: boolean;
+}
+
+export interface Options {
+  host: string | undefined;
+  port: number;
+  protocol: 'http' | 'https';
+  protocolOptions: ProtocolOptions | undefined;
+  dbOptions: DbOptions;
+  maxRequestBody: string;
+  logHTTPRequests?: boolean;
+  logLevel: 0 | 1 | 3 | 2;
+  wsEngine: string;
+}
+
+export default function getOptions(argv: { [arg: string]: any }): Options {
+  let dbOptions = argv.dbOptions;
+  if (typeof dbOptions === 'string') {
+    dbOptions = JSON.parse(fs.readFileSync(dbOptions, 'utf8'));
+  } else if (typeof dbOptions === 'undefined') {
+    dbOptions = JSON.parse(
+      fs.readFileSync(
+        new URL('../defaultDbOptions.json', import.meta.url),
+        'utf8',
+      ),
+    );
+  }
+
+  return {
+    host:
+      argv.hostname || process.env.npm_package_remotedev_hostname || undefined,
+    port: Number(argv.port || process.env.npm_package_remotedev_port) || 8000,
+    protocol:
+      argv.protocol || process.env.npm_package_remotedev_protocol || 'http',
+    protocolOptions: !(argv.protocol === 'https')
+      ? undefined
+      : {
+          key: argv.key || process.env.npm_package_remotedev_key || undefined,
+          cert:
+            argv.cert || process.env.npm_package_remotedev_cert || undefined,
+          passphrase:
+            argv.passphrase ||
+            process.env.npm_package_remotedev_passphrase ||
+            undefined,
+        },
+    dbOptions: dbOptions,
+    maxRequestBody: argv.passphrase || '16mb',
+    logHTTPRequests: argv.logHTTPRequests,
+    logLevel: argv.logLevel || 3,
+    wsEngine:
+      argv.wsEngine || process.env.npm_package_remotedev_wsengine || 'ws',
+  };
+}