{
  "name": "fb-flo",
  "version": "0.2.1",
  "description": "Modify running web apps without reloading",
  "main": "index.js",
  "scripts": {
    "test": "mocha test/**/*_test.js --bail"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "websocket": "~1.0.8",
    "sane": "~0.5.1"
  },
  "devDependencies": {
    "mocha": "~1.17.1"
  },
  "bin": {
    "fb-flo": "./bin/flo"
  },
  "readme": "fb-flo\n---\n\nfb-flo is a Chrome extension that lets you modify running apps without reloading. It's easy to integrate with your build system, dev environment, and can be used with your favorite editor.\n\n## Usage\n\nfb-flo is made up of a server and client component. This will guide through configuring your server for your project and installing the Chrome extension.\n\n### 1. Configure fb-flo server\n\n```\n$ npm install fb-flo\n```\n\nfb-flo exports a single `fb-flo` function to start the server. Here is an example where you have your source JavaScript and CSS files in the root directory and your build step involves bundling both into a respective `bundle.js`, `bundle.css`.\n\n```js\nvar flo = require('fb-flo'),\n    path = require('path'),\n    fs = require('fs');\n\nvar server = flo(\n  sourceDirToWatch,\n  {\n    port: 8888,\n    host: 'localhost',\n    verbose: false,\n    glob: [\n       // All JS files in `sourceDirToWatch` and subdirectories\n      '**/*.js',\n       // All CSS files in `sourceDirToWatch` and subdirectories\n      '**/*.css'\n    ]\n  },\n  function resolver(filepath, callback) {\n    // 1. Call into your compiler / bundler.\n    // 2. Assuming that `bundle.js` is your output file, update `bundle.js`\n    //    and `bundle.css` when a JS or CSS file changes.\n    callback({\n      resourceURL: 'bundle.js' + path.extname(filepath),\n      // any string-ish value is acceptable. i.e. strings, Buffers etc.\n      contents: fs.readFileSync(filepath)\n    });\n  }\n);\n```\n\n`flo` takes the following arguments.\n\n* `sourceDirToWatch`: absolute or relative path to the directory to watch that contains the source code that will be built.\n* `options` hash of options:\n    * `port` port to start the server on (defaults to 8888).\n    * `host` to listen on.\n    * `verbose` `true` or `false` value indicating if flo should be noisy.\n    * `glob` a glob string or array of globs to match against the files to watch.\n    * `useFilePolling` some platforms that do not support native file watching, you can force the file watcher to work in polling mode.\n    * `pollingInterval` if in polling mode (useFilePolling) then you can set the interval at which to poll for file changes.\n* `resolver` a function to map between files and resources.\n\nThe resolver callback is called with two arguments:\n\n* `filepath` path to the file that changed relative to the watched directory.\n* `callback` called to update a resource file in the browser. Should be called with an object with the following properties:\n  * `resourceURL` used as the resource identifier in the browser.\n  * `contents` any string-ish value representing the source of the updated file. i.e. strings, Buffers etc.\n  * `reload` (optional) forces a full page reload. Use this if you're sure the changed code cannot be hotswapped.\n  * `match` (optional, defaults to: indexOf) identifies the matching function to be performed on the resource URL in the browser. Could be one of the following:\n    * `\"equal\"` test the updated resource `resourceURL` against existing browser resources using an equality check.\n    * `\"indexOf\"` use `String.prototype.indexOf` check\n    * `/regexp/` a regexp object to exec.\n\n### 2. Install the Chrome Extension\n\nGrab the [fb-flo Chrome extension](https://chrome.google.com/webstore/detail/ahkfhobdidabddlalamkkiafpipdfchp). This will add a new tab in your Chrome DevTools called 'flo'.\n\n### 3. Activate fb-flo\n\nTo activate fb-flo from the browser:\n\n* Open Chrome DevTools.\n* Click on the new 'fb-flo' pane.\n* Click on 'Activate for this site'\n\nSee screenshot:\n\n![](http://i.imgur.com/SamY32i.png)\n\n### Example\n\nSay you have a Makefile program that builds your JavaScript and CSS into `build/build.js` and `build/build.css` respectively, this how you'd configure your fb-flo server:\n\n```js\nvar flo = require('fb-flo');\nvar fs = require('fs');\nvar exec = require('child_process').exec;\n\nvar server = flo('./lib/', {\n  port: 8888,\n  dir: './lib/',\n  glob: ['./lib/**/*.js', './lib/**/*.css']\n}, resolver);\n\nserver.once('ready', function() {\n  console.log('Ready!');\n});\n\nfunction resolver(filepath, callback) {\n    exec('make', function (err) {\n      if (err) throw err;\n      if (filepath.match(/\\.js$/)) {\n        callback({\n          resourceURL: 'build/build.js',\n          contents: fs.readFileSync('build/build.js').toString()\n        })\n      } else {\n        callback({\n          resourceURL: 'build/build.css',\n          contents: fs.readFileSync('build/build.css').toString()\n        })\n      }\n    });\n}\n```\n",
  "readmeFilename": "README.md",
  "_id": "fb-flo@0.2.1",
  "_from": "fb-flo@"
}