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

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Mihail Diordiev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,162 @@
+# Redux DevTools Command Line Interface
+
+Bridge for remote debugging via [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev).
+
+### Usage
+
+#### Install the package globally
+
+with npm:
+
+```
+npm install -g @redux-devtools/cli
+```
+
+or with yarn:
+
+```
+yarn global add @redux-devtools/cli
+```
+
+and start as:
+
+```
+redux-devtools --hostname=localhost --port=8000
+```
+
+> Note the package is called `@redux-devtools/cli` not `redux-devtools` (the latter is a React component).
+
+#### Or add in your project
+
+with npm:
+
+```
+npm install --save-dev @redux-devtools/cli
+```
+
+or with yarn:
+
+```
+yarn add --dev @redux-devtools/cli
+```
+
+and add to `package.json`:
+
+```
+"scripts": {
+  "redux-devtools": "redux-devtools --hostname=localhost --port=8000"
+}
+```
+
+So, you can start redux-devtools server by running `npm run redux-devtools`.
+
+##### Import in your `server.js` script you use for starting a development server:
+
+```js
+var reduxDevTools = require('@redux-devtools/cli');
+reduxDevTools({ hostname: 'localhost', port: 8000 });
+```
+
+So, you can start redux-devtools server together with your dev server.
+
+### Open Redux DevTools
+
+You can add `--open` argument (or set it as `electron`) to open Redux DevTools as a standalone application:
+
+```
+redux-devtools --open
+```
+
+Set it as `browser` to open as a web app in the default browser instead:
+
+```
+redux-devtools --open=browser
+```
+
+To specify the browser:
+
+```
+redux-devtools --open=firefox
+```
+
+### Connection settings
+
+Set `hostname` and `port` to the values you want. `hostname` by default is `localhost` and `port` is `8000`.
+
+To use WSS, set `protocol` argument to `https` and provide `key`, `cert` and `passphrase` arguments.
+
+#### Available options
+
+| Console argument | description                                                                                                                                                                                                                                                   | default value |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `--hostname`     | hostname                                                                                                                                                                                                                                                      | localhost     |
+| `--port`         | port                                                                                                                                                                                                                                                          | 8000          |
+| `--protocol`     | protocol                                                                                                                                                                                                                                                      | http          |
+| `--key`          | the key file for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https')                                                                                                             | -             |
+| `--cert`         | the cert file for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https')                                                                                                            | -             |
+| `--passphrase`   | the key passphrase for [running an https server](https://github.com/SocketCluster/socketcluster#using-over-https) (`--protocol` must be set to 'https')                                                                                                       | -             |
+| `--dbOptions`    | database configuration, can be whether an object or a path (string) to json configuration file (by default it uses our `./defaultDbOptions.json` file. Set `migrate` key to `true` to use our migrations file. [More details bellow](#save-reports-and-logs). | -             |
+| `--logLevel`     | the socket server log level - 0=none, 1=error, 2=warn, 3=info                                                                                                                                                                                                 | 3             |
+| `--wsEngine`     | the socket server web socket engine - ws or uws (sc-uws)                                                                                                                                                                                                      | ws            |
+| `--open`         | open Redux DevTools as a standalone application or as web app. See [Open Redux DevTools](#open-redux-devtools) for details.                                                                                                                                   | false         |
+
+### Inject to React Native local server
+
+##### Add in your React Native app's `package.json`:
+
+```
+"scripts": {
+  "redux-devtools": "redux-devtools --hostname=localhost --port=8000 --injectserver=reactnative"
+}
+```
+
+The `injectserver` value can be `reactnative` or `macos` ([react-native-macos](https://github.com/ptmt/react-native-macos)), it used `reactnative` by default.
+
+Then, we can start React Native server and Redux DevTools server with one command (`npm start`).
+
+##### Revert the injection
+
+Add in your React Native app's `package.json`:
+
+```
+"scripts": {
+  "redux-devtools-revert": "redux-devtools --revert=reactnative"
+}
+```
+
+Or just run `$(npm bin)/redux-devtools --revert`.
+
+### Connect from Android device or emulator
+
+> Note that if you're using `injectserver` argument explained above, this step is not necessary.
+
+If you're running an Android 5.0+ device connected via USB or an Android emulator, use [adb command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer:
+
+```
+adb reverse tcp:8000 tcp:8000
+```
+
+If you're still use Android 4.0, you should use `10.0.2.2` (Genymotion: `10.0.3.2`) instead of `localhost` in [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools#storeconfigurestorejs) or [remotedev](https://github.com/zalmoxisus/remotedev#usage).
+
+### Save reports and logs
+
+You can store reports via [`redux-remotedev`](https://github.com/zalmoxisus/redux-remotedev) and get them replicated with [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension) or [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools). You can get action history right in the extension just by clicking the link from a report. Open `http://localhost:8000/graphql` (assuming you're using `localhost` as host and `8000`) to explore in GraphQL. Reports are posted to `http://localhost:8000/`. See examples in [tests](https://github.com/zalmoxisus/remotedev-server/blob/937cfa1f0ac9dc12ebf7068eeaa8b03022ec33bc/test/integration.spec.js#L110-L165).
+
+Redux DevTools server is database agnostic using `knex` schema. By default everything is stored in the memory using sqlite database. See [`defaultDbOptions.json`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-cli/defaultDbOptions.json) for example of sqlite. You can replace `"connection": { "filename": ":memory:" },` with your file name (instead of `:memory:`) to persist teh database. Here's an example for PostgreSQL:
+
+```
+{
+  "client": "pg",
+  "connection": { "user": "myuser", "password": "mypassword", "database": "mydb" },
+  "debug": false,
+  "migrate": true
+}
+```
+
+### Advanced
+
+- [Writing your integration for a native application](https://github.com/reduxjs/redux-devtools/blob/master/docs/Integrations/Remote.md)
+
+### License
+
+MIT

package/app/electron.cjs

@@ -0,0 +1,29 @@
+// Based on https://github.com/electron/electron-quick-start
+
+const { app, BrowserWindow } = require('electron');
+const argv = require('minimist')(process.argv.slice(2));
+
+function createWindow() {
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+  });
+
+  const port = argv.port ? argv.port : 8000;
+  const host = argv.host ? argv.host : 'localhost';
+  const protocol = argv.protocol ? argv.protocol : 'http';
+
+  mainWindow.loadURL(protocol + '://' + host + ':' + port);
+}
+
+app.whenReady().then(() => {
+  createWindow();
+
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit();
+});

package/app/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Redux DevTools</title>
+    <style>
+      html {
+        min-width: 350px;
+        min-height: 300px;
+      }
+      body {
+        position: fixed;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      #root {
+        height: 100%;
+      }
+      #root > div {
+        height: 100%;
+      }
+    </style>
+    <link href="/redux-devtools-app.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/react.production.min.js"></script>
+    <script src="/react-dom.production.min.js"></script>
+    <script src="/redux-devtools-app.min.js"></script>
+    <script src="/port.js"></script>
+    <script>
+      const container = document.querySelector('#root');
+      const element = React.createElement(ReduxDevToolsApp.Root, {
+        socketOptions: {
+          hostname: location.hostname,
+          port: reduxDevToolsPort,
+          autoReconnect: true,
+        },
+      });
+      ReactDOM.createRoot(container).render(element);
+    </script>
+  </body>
+</html>

package/app/package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "name": "@redux-devtools/cli",
+  "version": "0.0.1",
+  "main": "electron.cjs",
+  "description": "Remote Redux DevTools",
+  "authors": "Mihail Diordiev"
+}

package/bin/redux-devtools.js

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

package/defaultDbOptions.json

@@ -0,0 +1,7 @@
+{
+  "client": "sqlite3",
+  "connection": { "filename": ":memory:" },
+  "useNullAsDefault": true,
+  "debug": false,
+  "migrate": true
+}

package/dist/api/schema.d.ts

@@ -0,0 +1,16 @@
+import type { Store } from '../store.js';
+export declare const schema: string;
+export declare const resolvers: {
+    Query: {
+        reports: (source: unknown, args: unknown, context: {
+            store: Store;
+        }) => Promise<import("../store.js").Report[]>;
+        report: (source: unknown, args: {
+            id: string;
+        }, context: {
+            store: Store;
+        }) => Promise<import("../store.js").Report | {
+            error: string;
+        }>;
+    };
+};

package/dist/api/schema.js

@@ -0,0 +1,12 @@
+import fs from 'fs';
+export const schema = fs.readFileSync(new URL('./schema_def.graphql', import.meta.url), 'utf8');
+export const resolvers = {
+    Query: {
+        reports: function report(source, args, context) {
+            return context.store.listAll();
+        },
+        report: function report(source, args, context) {
+            return context.store.get(args.id);
+        },
+    },
+};

package/dist/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/dist/bin/injectServer.d.ts

@@ -0,0 +1,6 @@
+import type { Options } from '../options.js';
+export declare const dir = "local-cli/server";
+export declare const file = "server.js";
+export declare const fullPath: string;
+export declare function inject(modulePath: string, options: Options, moduleName: string): boolean;
+export declare function revert(modulePath: string, options: Options, moduleName: string): boolean;

package/dist/bin/injectServer.js

@@ -0,0 +1,78 @@
+import fs from 'fs';
+import path from 'path';
+import semver from 'semver';
+const name = '@redux-devtools/cli';
+const startFlag = '/* ' + name + ' start */';
+const endFlag = '/* ' + name + ' end */';
+const serverFlags = {
+    '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) {
+    return JSON.parse(fs.readFileSync(path.join(modulePath, 'package.json'), 'utf-8')).version;
+}
+function getServerFlag(moduleName, version) {
+    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;
+}
+export const dir = 'local-cli/server';
+export const file = 'server.js';
+export const fullPath = path.join(dir, file);
+export function inject(modulePath, options, moduleName) {
+    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, options, moduleName) {
+    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/dist/bin/openApp.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from '../options.js';
+export default function openApp(app: true | string, options: Options): Promise<void>;

package/dist/bin/openApp.js

@@ -0,0 +1,40 @@
+import open from 'open';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import spawn from 'cross-spawn';
+const require = createRequire(import.meta.url);
+export default async function openApp(app, 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'), [
+                path.join(path.dirname(fileURLToPath(import.meta.url)), '..', '..', 'app'),
+                port,
+                host,
+                protocol,
+            ]);
+        }
+        catch (error) {
+            /* eslint-disable no-console */
+            if (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/dist/bin/redux-devtools.d.ts

@@ -0,0 +1,2 @@
+#! /usr/bin/env node
+export {};

package/dist/bin/redux-devtools.js

@@ -0,0 +1,73 @@
+#! /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) {
+    return fs.readFileSync(path.resolve(process.cwd(), filePath), 'utf-8');
+}
+if (argv.protocol === 'https') {
+    argv.key = argv.key ? readFile(argv.key) : null;
+    argv.cert = argv.cert ? readFile(argv.cert) : null;
+}
+function log(pass, msg) {
+    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) {
+    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) {
+    return path.join(process.cwd(), 'node_modules', moduleName);
+}
+function getModule(type) {
+    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, msg) {
+    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, 'Revert injection of ReduxDevTools server from React Native local server');
+}
+if (argv.injectserver) {
+    injectRN(argv.injectserver, '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, options);
+}

package/dist/db/connector.d.ts

@@ -0,0 +1,3 @@
+import knex from 'knex';
+import { AGServer } from 'socketcluster-server';
+export default function connector(options: AGServer.AGServerOptions): knex.Knex<any, unknown[]>;

package/dist/db/connector.js

@@ -0,0 +1,49 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import knex from 'knex';
+// 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);
+const nodeModule = nodeRequire('module');
+const originalResolveFilename = nodeModule._resolveFilename;
+nodeModule._resolveFilename = function (request, ...args) {
+    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);
+};
+export default function connector(options) {
+    const dbOptions = options.dbOptions;
+    dbOptions.useNullAsDefault = true;
+    if (!dbOptions.migrate) {
+        return knex(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(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/dist/db/migrations/index.d.ts

@@ -0,0 +1,3 @@
+import { Knex } from 'knex';
+export declare function up(knex: Knex): Promise<[void, void, void, void, void]>;
+export declare function down(knex: Knex): Promise<[void, void]>;