From 5aa5e7a875d3c0ceff783d4deee8d4904f47873d Mon Sep 17 00:00:00 2001 From: Amjad Masad Date: Wed, 11 Feb 2015 16:37:51 -0800 Subject: [PATCH] 2015-02-09 updates [react-packager] Update other instances of projectRoot to projectRoots | Amjad Masad [react-packager] Debug page | Amjad Masad --- README.md | 27 ++++++-------- packager/packager.js | 12 ++++-- .../haste/DependencyGraph/index.js | 24 +++++++++++- .../src/DependencyResolver/haste/index.js | 5 +++ .../react-packager/src/Packager/Package.js | 22 +++++++++++ packager/react-packager/src/Packager/index.js | 6 +++ .../src/Server/__tests__/Server-test.js | 1 + packager/react-packager/src/Server/index.js | 37 +++++++++++++++++++ 8 files changed, 113 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index ab659bc3b0472e..86b4520511f41c 100644 --- a/README.md +++ b/README.md @@ -34,12 +34,9 @@ products with no compromises in quality or capability. Get up and running with our Movies sample app: 1. Once you have the repo cloned and met all the requirements above, start the -packager that will transform your JS code on-the-fly: - - ``` - npm install - npm start - ``` +packager that will transform your JS code on-the-fly: + `npm install` + `npm start` 2. Open the `Examples/Movies/Movies.xcodeproj` project in Xcode. 3. Make sure the target is set to `Movies` and that you have an iOS simulator selected to run the app. @@ -96,27 +93,27 @@ the responder system. # FAQ -##### Q. How does debugging work? Can I set breakpoints in my JS? +Q. How does debugging work? Can I set breakpoints in my JS? A. We are going to add the ability to use the Chrome developer tools soon. We are very passionate about building the best possible developer experience. -##### Q. When is this coming to Android/Windows/OS X/etc? +Q. When is this coming to Android/Windows/OS X/etc? A. We're working on Android, and we are excited to release it as soon as we can. We are looking forward to the community helping us target other platforms as well :) -##### Q. How do I create my own app? +Q. How do I create my own app? A. Copy the entire `Examples/TicTacToe` folder, rename stuff in Xcode, and replace the `TicTacToeApp.js` with your own. Then, in `AppDelegate.m`, update `moduleName` to match your call to `Bundler.registerComponent(, )` at the bottom of your JS file, and update `jsCodeLocation` to match your JS file name and location. -##### Q. Can I submit my own React Native app to the App Store? +Q. Can I submit my own React Native app to the App Store? A. Not yet, but you will be able to soon. If you build something you want to submit to the App Store, come talk to us ASAP. -##### Q. How do I deploy to my device? +Q. How do I deploy to my device? A. You can change `localhost` in `AppDelegate.m` to your laptop's IP address and grab the bundle over the same Wi-Fi network. You can also download the bundle that the React packager generates, save it to the file `main.jsbundle`, and add it @@ -124,20 +121,20 @@ as a static resource in your Xcode project. Then set the `jsCodeLocation` in `AppDelegate.m` to point to that file and deploy to your device like you would any other app. -##### Q. What's up with this private repo? Why aren't you just open sourcing it now? +Q. What's up with this private repo? Why aren't you just open sourcing it now? A. We want input from the React community before we open the floodgates so we can incorporate your feedback, and we also have a bunch more features we want to add to make a more complete offering before we open source. -##### Q. Do you have to ship a JS runtime with your apps? +Q. Do you have to ship a JS runtime with your apps? A. No, we just use the JavaScriptCore public API that is part of iOS 7 and later. -##### Q. How do I add more native capabilities? +Q. How do I add more native capabilities? A. React Native is designed to be extensible - come talk to us, we would love to work with you. -##### Q. Can I reuse existing iOS code? +Q. Can I reuse existing iOS code? A. Yes, React Native is designed to be extensible and allow integration of all sorts of native components, such as `UINavigationController` (available as ``), `MKMapView` (not available yet), or your own custom diff --git a/packager/packager.js b/packager/packager.js index e20bb99dc73384..58f93a587237b8 100644 --- a/packager/packager.js +++ b/packager/packager.js @@ -81,7 +81,7 @@ function openStackFrameInEditor(req, res, next) { function getAppMiddleware(options) { return ReactPackager.middleware({ dev: true, - projectRoot: options.projectRoot, + projectRoots: options.projectRoots, blacklistRE: blacklist(false), cacheVersion: '2', polyfillModuleNames: [ @@ -98,9 +98,13 @@ function runServer( var app = connect() .use(loadRawBody) .use(openStackFrameInEditor) - .use(getAppMiddleware(options)) - .use(connect.static(options.projectRoot)) - .use(connect.logger()) + .use(getAppMiddleware(options)); + + options.projectRoots.forEach(function(root) { + app.use(connect.static(root)); + }); + + app.use(connect.logger()) .use(connect.compress()) .use(connect.errorHandler()); diff --git a/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js b/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js index 0cf05411d04064..9a939620fe7fa4 100644 --- a/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js +++ b/packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js @@ -7,6 +7,7 @@ var docblock = require('./docblock'); var path = require('path'); var isAbsolutePath = require('absolute-path'); var debug = require('debug')('DependecyGraph'); +var util = require('util'); var readFile = q.nfbind(fs.readFile); var readDir = q.nfbind(fs.readdir); @@ -22,6 +23,7 @@ function DependecyGraph(options) { this._packageByRoot = Object.create(null); this._packagesById = Object.create(null); this._moduleById = Object.create(null); + this._debugUpdateEvents = []; this._fileWatcher = options.fileWatcher; // Kick off the search process to precompute the dependency graph. @@ -196,16 +198,20 @@ DependecyGraph.prototype._search = function() { return readDir(dir) .then(function(files){ return q.all(files.map(function(filePath) { - return realpath(path.join(dir, filePath)); + return realpath(path.join(dir, filePath)).catch(handleBrokenLink); })); }) .then(function(filePaths) { filePaths = filePaths.filter(function(filePath) { + if (filePath == null) { + return false + } + return !self._ignoreFilePath(filePath); }); var statsP = filePaths.map(function(filePath) { - return lstat(filePath); + return lstat(filePath).catch(handleBrokenLink); }); return [ @@ -397,6 +403,8 @@ DependecyGraph.prototype._processFileChange = function(eventType, filePath, root return; } + this._debugUpdateEvents.push({event: eventType, path: filePath}); + if (eventType === 'delete') { var module = this._graph[absPath]; if (module == null) { @@ -412,6 +420,13 @@ DependecyGraph.prototype._processFileChange = function(eventType, filePath, root } }; +DependecyGraph.prototype.getDebugInfo = function() { + return '

FileWatcher Update Events

' + + '
' + util.inspect(this._debugUpdateEvents) + '
' + + '

Graph dump

' + + '
' + util.inspect(this._graph) + '
'; +}; + /** * Searches all roots for the file and returns the first one that has file of the same path. */ @@ -471,4 +486,9 @@ function withExtJs(file) { } } +function handleBrokenLink(e) { + debug('WARNING: error stating, possibly broken symlink', e.message); + return q(); +} + module.exports = DependecyGraph; diff --git a/packager/react-packager/src/DependencyResolver/haste/index.js b/packager/react-packager/src/DependencyResolver/haste/index.js index feb69cceaa23a0..211da3655703b7 100644 --- a/packager/react-packager/src/DependencyResolver/haste/index.js +++ b/packager/react-packager/src/DependencyResolver/haste/index.js @@ -119,8 +119,13 @@ HasteDependencyResolver.prototype.wrapModule = function(module, code) { }); }; + HasteDependencyResolver.prototype.end = function() { return this._fileWatcher.end(); }; +HasteDependencyResolver.prototype.getDebugInfo = function() { + return this._depGraph.getDebugInfo(); +}; + module.exports = HasteDependencyResolver; diff --git a/packager/react-packager/src/Packager/Package.js b/packager/react-packager/src/Packager/Package.js index f3f5d992c48f4a..787684bc2568b0 100644 --- a/packager/react-packager/src/Packager/Package.js +++ b/packager/react-packager/src/Packager/Package.js @@ -108,3 +108,25 @@ Package.prototype._getMappings = function() { } return mappings; }; + +Package.prototype.getDebugInfo = function() { + return [ + '

Main Module:

' + this._mainModuleId + '
', + '', + '

Module paths and transformed code:

', + this._modules.map(function(m) { + return '

Path:

' + m.sourcePath + '

Source:

' + + '
'; + }).join('\n'), + ].join('\n'); +}; diff --git a/packager/react-packager/src/Packager/index.js b/packager/react-packager/src/Packager/index.js index 0bf3e7d83de3cc..3aef649d89844a 100644 --- a/packager/react-packager/src/Packager/index.js +++ b/packager/react-packager/src/Packager/index.js @@ -117,9 +117,15 @@ Packager.prototype._transformModule = function(module) { }); }; + function verifyRootExists(root) { // Verify that the root exists. assert(fs.statSync(root).isDirectory(), 'Root has to be a valid directory'); } +Packager.prototype.getGraphDebugInfo = function() { + return this._resolver.getDebugInfo(); +}; + + module.exports = Packager; diff --git a/packager/react-packager/src/Server/__tests__/Server-test.js b/packager/react-packager/src/Server/__tests__/Server-test.js index 3b37c76e9a1254..511ec8a363422b 100644 --- a/packager/react-packager/src/Server/__tests__/Server-test.js +++ b/packager/react-packager/src/Server/__tests__/Server-test.js @@ -144,6 +144,7 @@ describe('processRequest', function(){ expect(response).toEqual("this is the first source"); expect(packageFunc.mock.calls.length).toBe(1); triggerFileChange('all','path/file.js', options.projectRoots[0]); + jest.runAllTimers(); }) .then(function(){ expect(packageFunc.mock.calls.length).toBe(2); diff --git a/packager/react-packager/src/Server/index.js b/packager/react-packager/src/Server/index.js index 36681d63a61e09..e71572ed30a660 100644 --- a/packager/react-packager/src/Server/index.js +++ b/packager/react-packager/src/Server/index.js @@ -67,12 +67,49 @@ Server.prototype.buildPackageFromUrl = function(reqUrl) { return this._buildPackage(options); }; +Server.prototype._processDebugRequest = function(reqUrl, res) { + var ret = ''; + var pathname = url.parse(reqUrl).pathname; + var parts = pathname.split('/').filter(Boolean); + if (parts.length === 1) { + ret += '
Cached Packages
'; + ret += '
Dependency Graph
'; + res.end(ret); + } else if (parts[1] === 'packages') { + ret += '

Cached Packages

'; + q.all(Object.keys(this._packages).map(function(url) { + return this._packages[url].then(function(p) { + ret += '

' + url + '

'; + ret += p.getDebugInfo(); + }); + }, this)).then( + function() { res.end(ret); }, + function(e) { + res.wrteHead(500); + res.end('Internal Error'); + console.log(e.stack); + } + ); + } else if (parts[1] === 'graph'){ + ret += '

Dependency Graph

'; + ret += this._packager.getGraphDebugInfo(); + res.end(ret); + } else { + res.writeHead('404'); + res.end('Invalid debug request'); + return; + } +}; + Server.prototype.processRequest = function(req, res, next) { var requestType; if (req.url.match(/\.bundle$/)) { requestType = 'bundle'; } else if (req.url.match(/\.map$/)) { requestType = 'map'; + } else if (req.url.match(/^\/debug/)) { + this._processDebugRequest(req.url, res); + return; } else { return next(); }