Add react-native-debugger-patch

electron/main.js

@@ -1,4 +1,6 @@
 const { app, BrowserWindow, Menu, shell } = require('electron');
+const url = require('url');
+const qs = require('querystring');
 
 let menu;
 let template;
@@ -8,6 +10,14 @@ app.on('window-all-closed', () => {
   app.quit();
 });
 
+app.on('open-url', (e, path) => {
+  const route = url.parse(path);
+  if (route !== 'set-debugger-loc') return;
+
+  const { host, port } = qs.parse(path);
+  // TODO: set debugger hot, port in renderer process
+});
+
 app.on('ready', () => {
   mainWindow = new BrowserWindow({ width: 1024, height: 750, show: false });
 

patch/README.md

@@ -0,0 +1,35 @@
+# react-native-debugger-patch
+
+> Replace `open debugger-ui with Chrome` to `open React Native Debugger` from react-native packager
+
+__*NOTE*__ This patch is only work with `react-native-debugger@^0.2.0`.
+
+## Installation
+
+First, install [React Native Debugger](https://github.com/jhen0409/react-native-debugger#usage).
+
+In your React Native project:
+
+```bash
+$ npm i --save-dev react-native-debugger-patch
+```
+
+## Usage
+
+```bash
+$ rndebugger-patch --inject
+
+# If you want to revert injection
+$ rndebugger-patch --revert
+```
+
+You can also use following command instead of this patch:
+
+```bash
+# OS X
+$ open rndebugger://set-debugger-loc?host=localhost&port=8082
+```
+
+## LICENSE
+
+[MIT](https://github.com/jhen0409/react-native-debugger/blob/master/LICENSE.md)

patch/bin/rndebugger-patch.js

@@ -0,0 +1,11 @@
+#! /usr/bin/env node
+
+const argv = require('minimist')(process.argv.slice(2), {
+  boolean: ['inject', 'revert', 'desktop'],
+  default: {
+    inject: true,
+  },
+});
+
+const result = require('../lib/main')(argv);
+if (!result) process.exit(1);

patch/lib/injectDevToolsMiddleware.js

@@ -0,0 +1,57 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const name = 'react-native-debugger-patch';
+const startFlag = `/* ${name} start */`;
+const endFlag = `/* ${name} end */`;
+const funcFlag = 'function launchChromeDevTools(port) {';
+
+exports.dir = 'local-cli/server/middleware';
+exports.file = 'getDevToolsMiddleware.js';
+exports.fullPath = path.join(exports.dir, exports.file);
+
+exports.inject = modulePath => {
+  const filePath = path.join(modulePath, exports.fullPath);
+  if (!fs.existsSync(filePath)) return false;
+
+  const code = [
+    startFlag,
+    funcFlag,
+    '  if (process.platform === "darwin") {',
+    '    opn("rndebugger://set-debugger-loc?host=localhost&port=" + port);',
+    '    return;',
+    '  }',
+    endFlag,
+  ].join('\n');
+
+  const middlewareCode = fs.readFileSync(filePath, 'utf-8');
+  let start = middlewareCode.indexOf(startFlag);  // already injected ?
+  let end = middlewareCode.indexOf(endFlag) + endFlag.length;
+  if (start === -1) {
+    start = middlewareCode.indexOf(funcFlag);
+    end = start + funcFlag.length;
+  }
+  fs.writeFileSync(
+    filePath,
+    middlewareCode.substr(0, start) + code + middlewareCode.substr(end, middlewareCode.length)
+  );
+  return true;
+};
+
+exports.revert = modulePath => {
+  const filePath = path.join(modulePath, exports.fullPath);
+  if (!fs.existsSync(filePath)) return false;
+
+  const middlewareCode = fs.readFileSync(filePath, 'utf-8');
+  const start = middlewareCode.indexOf(startFlag); // already injected ?
+  const end = middlewareCode.indexOf(endFlag) + endFlag.length;
+  if (start !== -1) {
+    fs.writeFileSync(
+      filePath,
+      middlewareCode.substr(0, start) + funcFlag + middlewareCode.substr(end, middlewareCode.length)
+    );
+  }
+  return true;
+};

patch/lib/main.js

@@ -0,0 +1,34 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const injectDevToolsMiddleware = require('./injectDevToolsMiddleware');
+
+const name = 'react-native';
+
+const getModulePath = moduleName =>
+  path.join(process.cwd(), 'node_modules', moduleName);
+
+const 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));
+};
+
+const getFullPath = filePath => path.resolve(process.cwd(), filePath);
+
+module.exports = argv => {
+  const modulePath = getModulePath(argv.desktop ? 'react-native-desktop' : name);
+
+  // Revert injection
+  if (argv.revert) {
+    const passMiddleware = injectDevToolsMiddleware.revert(modulePath);
+    const msg = 'Revert injection of React Native Debugger from React Native packager';
+    log(passMiddleware, msg + (!passMiddleware ? `, the file '${injectDevToolsMiddleware.path}' not found.` : '.'));
+    return passMiddleware;
+  }
+
+  const pass = injectDevToolsMiddleware.inject(modulePath);
+  const msg = 'Replace `open debugger-ui with Chrome` to `open React Native Debugger`';
+  log(pass, msg + (pass ? '.' : `, the file '${injectDevToolsMiddleware.path}' not found.`));
+  return pass;
+};

patch/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-native-debugger-patch",
+  "version": "0.2.0",
+  "description": "Replace `open debugger-ui with Chrome` to `open React Native Debugger` from react-native packager",
+  "bin": {
+    "rndebugger-patch": "bin/rndebugger-patch.js"
+  },
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jhen0409/react-native-debugger.git"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "debugger",
+    "react-devtools",
+    "redux-devtools",
+    "electron"
+  ],
+  "author": "Jhen <developer@jhen.me>",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^1.1.3",
+    "minimist": "^1.2.0"
+  }
+}

scripts/package.sh

@@ -9,6 +9,8 @@ electron-packager dist/ \
   --asar \
   --prune \
   --out release \
+  --protocol-name "React Native Debugger" \
+  --protocol "rndebugger" \
   --app-version $(node -p -e "require('./package.json').version") \
   --app-copyright "This software is included following project: https://github.com/facebook/react-devtools, https://github.com/zalmoxisus/remotedev-app" \
   --icon electron/logo.icns