From 40a043109d470651acb99c31470604b1a9d2f899 Mon Sep 17 00:00:00 2001 From: James Ide Date: Fri, 10 Jul 2015 00:23:58 -0700 Subject: [PATCH] [io.js] Print a warning message if the user is not on io.js 2.x Summary: Detects if the user is on Node or io.js 1.x and prints a banner explaining how to upgrade. We probably should link to more detailed upgrade docs so this is just a start. I also added a function to format banners that is kind of useful. Addresses part of #1737 ![packager-banner](https://cloud.githubusercontent.com/assets/379606/8447050/ad615402-1f67-11e5-8c02-ece5f7488135.png) Closes https://github.com/facebook/react-native/pull/1824 Github Author: James Ide --- package.json | 2 + packager/checkNodeVersion.js | 40 +++++++++++++ packager/formatBanner.js | 108 +++++++++++++++++++++++++++++++++++ packager/package.json | 4 +- packager/packager.js | 25 ++++---- 5 files changed, 168 insertions(+), 11 deletions(-) create mode 100644 packager/checkNodeVersion.js create mode 100644 packager/formatBanner.js diff --git a/package.json b/package.json index c75ea62bf..cfc1367ec 100644 --- a/package.json +++ b/package.json @@ -64,10 +64,12 @@ "react-tools": "0.13.2", "rebound": "^0.0.12", "sane": "^1.1.2", + "semver": "^4.3.6", "source-map": "0.1.31", "stacktrace-parser": "frantic/stacktrace-parser#493c5e5638", "uglify-js": "~2.4.16", "underscore": "1.7.0", + "wordwrap": "^1.0.0", "worker-farm": "^1.3.1", "ws": "0.4.31", "yargs": "1.3.2" diff --git a/packager/checkNodeVersion.js b/packager/checkNodeVersion.js new file mode 100644 index 000000000..f1a07c030 --- /dev/null +++ b/packager/checkNodeVersion.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +var chalk = require('chalk'); +var semver = require('semver'); + +var formatBanner = require('./formatBanner'); + +function checkNodeVersion() { + if (!semver.satisfies(process.version, '>=2.0.0')) { + var engine = semver.lt(process.version, '1.0.0') ? 'Node' : 'io.js'; + var message = 'You are currently running ' + engine + ' ' + + process.version + '.\n' + + '\n' + + 'React Native is moving to io.js 2.x. There are several ways to upgrade' + + 'to io.js depending on your preference.\n' + + '\n' + + 'nvm: nvm install iojs && nvm alias default iojs\n' + + 'Homebrew: brew unlink node; brew install iojs && brew ln iojs --force\n' + + 'Installer: download the Mac .pkg from https://iojs.org/\n' + + '\n' + + 'About io.js: https://iojs.org\n' + + 'Follow along at: https://github.com/facebook/react-native/issues/1737'; + console.log(formatBanner(message, { + chalkFunction: chalk.green, + marginLeft: 1, + marginRight: 1, + paddingBottom: 1, + })); + } +} + +module.exports = checkNodeVersion; diff --git a/packager/formatBanner.js b/packager/formatBanner.js new file mode 100644 index 000000000..f54095b05 --- /dev/null +++ b/packager/formatBanner.js @@ -0,0 +1,108 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +var _ = require('underscore'); +var wordwrap = require('wordwrap'); + +var HORIZONTAL_LINE = '\u2500'; +var VERTICAL_LINE = '\u2502'; +var TOP_LEFT = '\u250c'; +var TOP_RIGHT = '\u2510'; +var BOTTOM_LEFT = '\u2514'; +var BOTTOM_RIGHT = '\u2518'; + +/** + * Prints a banner with a border around it containing the given message. The + * following options are supported: + * + * type Options = { + * // A function to apply to each line of text to decorate it + * chalkFunction: (string: message) => string; + * // The total width (max line length) of the banner, including margin and + * // padding (default = 80) + * width: number; + * // How much leading space to prepend to each line (default = 0) + * marginLeft: number; + * // How much trailing space to append to each line (default = 0) + * marginRight: number; + * // Space between the top banner border and the text (default = 0) + * paddingTop: number; + * // Space between the bottom banner border and the text (default = 0) + * paddingBottom: number; + * // Space between the left banner border and the text (default = 2) + * paddingLeft: number; + * // Space between the right banner border and the text (default = 2) + * paddingRight: number; + * }; + */ +function formatBanner(message, options) { + options = options || {}; + _.defaults(options, { + chalkFunction: _.identity, + width: 80, + marginLeft: 0, + marginRight: 0, + paddingTop: 0, + paddingBottom: 0, + paddingLeft: 2, + paddingRight: 2, + }); + + var width = options.width; + var marginLeft = options.marginLeft; + var marginRight = options.marginRight; + var paddingTop = options.paddingTop; + var paddingBottom = options.paddingBottom; + var paddingLeft = options.paddingLeft; + var paddingRight = options.paddingRight; + + var horizSpacing = marginLeft + paddingLeft + paddingRight + marginRight; + // 2 for the banner borders + var maxLineWidth = width - horizSpacing - 2; + var wrap = wordwrap(maxLineWidth); + var body = wrap(message); + + var left = spaces(marginLeft) + VERTICAL_LINE + spaces(paddingLeft); + var right = spaces(paddingRight) + VERTICAL_LINE + spaces(marginRight); + var bodyLines = _.flatten([ + arrayOf('', paddingTop), + body.split('\n'), + arrayOf('', paddingBottom), + ]).map(function(line) { + var padding = spaces(Math.max(0, maxLineWidth - line.length)); + return left + options.chalkFunction(line) + padding + right; + }); + + var horizontalBorderLine = repeatString( + HORIZONTAL_LINE, + width - marginLeft - marginRight - 2 + ); + var top = spaces(marginLeft) + TOP_LEFT + horizontalBorderLine + TOP_RIGHT + + spaces(marginRight); + var bottom = spaces(marginLeft) + BOTTOM_LEFT + horizontalBorderLine + + BOTTOM_RIGHT + spaces(marginRight); + return _.flatten([top, bodyLines, bottom]).join('\n'); +} + +function spaces(number) { + return repeatString(' ', number); +} + +function repeatString(string, number) { + return new Array(number + 1).join(string); +} + +function arrayOf(value, number) { + return _.range(number).map(function() { + return value; + }); +} + +module.exports = formatBanner; diff --git a/packager/package.json b/packager/package.json index cc3f4fc6f..f9927a87c 100644 --- a/packager/package.json +++ b/packager/package.json @@ -23,7 +23,9 @@ "lint": "node linter.js Examples/", "start": "./packager/packager.sh" }, - "dependencies": {}, + "dependencies": { + "wordwrap": "^1.0.0" + }, "devDependencies": { "jest-cli": "git://github.com/facebook/jest#0.5.x", "eslint": "0.9.2" diff --git a/packager/packager.js b/packager/packager.js index ff0faa315..fcff7e58f 100644 --- a/packager/packager.js +++ b/packager/packager.js @@ -30,6 +30,8 @@ var chalk = require('chalk'); var connect = require('connect'); var ReactPackager = require('./react-packager'); var blacklist = require('./blacklist.js'); +var checkNodeVersion = require('./checkNodeVersion'); +var formatBanner = require('./formatBanner'); var launchEditor = require('./launchEditor.js'); var parseCommandLine = require('./parseCommandLine.js'); var webSocketProxy = require('./webSocketProxy.js'); @@ -108,16 +110,19 @@ if (options.assetRoots) { } } -console.log('\n' + -' ===============================================================\n' + -' | Running packager on port ' + options.port + '. \n' + -' | Keep this packager running while developing on any JS \n' + -' | projects. Feel free to close this tab and run your own \n' + -' | packager instance if you prefer. \n' + -' | \n' + -' | https://github.com/facebook/react-native \n' + -' | \n' + -' ===============================================================\n' +checkNodeVersion(); + +console.log(formatBanner( + 'Running packager on port ' + options.port + '.\n'+ + '\n' + + 'Keep this packager running while developing on any JS projects. Feel free ' + + 'to close this tab and run your own packager instance if you prefer.\n' + + '\n' + + 'https://github.com/facebook/react-native', { + marginLeft: 1, + marginRight: 1, + paddingBottom: 1, + }) ); console.log(