From 562ceffa63fb5d9de829b0252bfcb51563dd511c Mon Sep 17 00:00:00 2001 From: Jhen Date: Thu, 2 Jun 2016 20:19:39 +0800 Subject: [PATCH] Add react-native-debugger-patch --- electron/main.js | 10 +++++ electron/open-url.js | 0 patch/README.md | 35 ++++++++++++++++ patch/bin/rndebugger-patch.js | 11 ++++++ patch/lib/injectDevToolsMiddleware.js | 57 +++++++++++++++++++++++++++ patch/lib/main.js | 34 ++++++++++++++++ patch/package.json | 27 +++++++++++++ scripts/package.sh | 2 + 8 files changed, 176 insertions(+) create mode 100644 electron/open-url.js create mode 100644 patch/README.md create mode 100755 patch/bin/rndebugger-patch.js create mode 100644 patch/lib/injectDevToolsMiddleware.js create mode 100644 patch/lib/main.js create mode 100644 patch/package.json diff --git a/electron/main.js b/electron/main.js index 9b6c32f56..169156a9b 100644 --- a/electron/main.js +++ b/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 }); diff --git a/electron/open-url.js b/electron/open-url.js new file mode 100644 index 000000000..e69de29bb diff --git a/patch/README.md b/patch/README.md new file mode 100644 index 000000000..a0f7defa0 --- /dev/null +++ b/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) diff --git a/patch/bin/rndebugger-patch.js b/patch/bin/rndebugger-patch.js new file mode 100755 index 000000000..d7068d227 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/patch/lib/injectDevToolsMiddleware.js b/patch/lib/injectDevToolsMiddleware.js new file mode 100644 index 000000000..08a971c69 --- /dev/null +++ b/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; +}; diff --git a/patch/lib/main.js b/patch/lib/main.js new file mode 100644 index 000000000..f31b40c5c --- /dev/null +++ b/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; +}; diff --git a/patch/package.json b/patch/package.json new file mode 100644 index 000000000..a4392e441 --- /dev/null +++ b/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 ", + "license": "MIT", + "dependencies": { + "chalk": "^1.1.3", + "minimist": "^1.2.0" + } +} diff --git a/scripts/package.sh b/scripts/package.sh index 1a2b21a5f..a77613d8a 100755 --- a/scripts/package.sh +++ b/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