fix bundled file, add bundled installation guide

Contributing.md

@@ -50,18 +50,12 @@ Which will also compile the source files. Then run the tests with:
 npm test
 ```
 
-And to run the linter:
-
-```
-npm run lint
-```
-
 If you need to debug something, you can add a `debugger` line to the source, and then run `npm test debug`. Or, if you only want to run a specific test or tests, you can run `npm test -- --fgrep "match this string"` flag which will filter the tests being run.
 
 To keep the source rebuilding on every file change, you need to run an additional watching command:
 
 ```
-npm run dist:watch
+npm run watch
 ```
 
 

docs/guides/installing-slate.md

@@ -13,7 +13,7 @@ You'll also need to be sure to install Slate's peer dependencies for React:
 npm install react react-dom
 ```
 
-_Note, if you'd rather use a pre-bundled version of Slate, you can `npm install slate` and retrieve the bundled `dist/slate.js` file! It comes with React pre-bundled as well, so you can use it as a single file._
+_Note, if you'd rather use a pre-bundled version of Slate, you can `npm install slate` and retrieve the bundled `dist/slate.js` file! Check out the [Using the Bundled Source](./using-the-bundled-source.md) guide for more information._
 
 Once you've install it, you'll need to import it.
 

docs/guides/using-the-bundled-source.md

@@ -0,0 +1,56 @@
+
+# Using the Bundled Source
+
+For most folks, you'll want to install Slate via `npm`, in which case you can follow the regular [Installing Slate](./installing-slate.md) guide. 
+
+But, if you'd rather install Slate by simply adding a `<script>` tag to your application, this guide will help you. To make the "bundled" use case simpler, each version of Slate ships with a bundled source file called `slate.js`.
+
+To get a copy of `slate.js`, download the version of slate you want from npm:
+
+```
+npm install slate @0.11.12
+```
+
+And then look in the `node_modules` folder for the bundled `slate.js` file:
+
+```
+node_modules/
+  slate/
+    dist/
+      slate.js
+      slate.min.js
+```
+
+A minified version called `slate.min.js` is also included for convenience.
+
+Before you can add `slate.js` to your page, you need to bring your own copy of `immutable`, `react` and `react-dom`, like so:
+
+```html
+<script src="./vendor/react.js"></script>
+<script src="./vendor/react-dom.js"></script>
+<script src="./vendor/immutable.js"></script>
+```
+
+This ensures that Slate isn't bundling its own copy of Immutable and React, which would greatly increase the file size of your application.
+
+Then you can add `slate.js` after those includes:
+
+```html
+<script src="./vendor/slate.js"></script>
+```
+
+To make things easier, for quick prototyping, you can also use the [`npmcdn.com`](https://npmcdn.com/#/) delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:
+
+```html
+<script src="https://npmcdn.com/react/dist/react.js"></script>
+<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
+<script src="https://npmcdn.com/immutable/dist/immutable.js"></script>
+<script src="https://npmcdn.com/slate/dist/slate.js"></script>
+```
+
+That's it, you're ready to go!
+
+<br/>
+<p align="center"><strong>Next:</strong><br/><a href="./adding-event-handlers.md">Adding Event Handlers</a></p>
+<br/>
+

examples/Readme.md

@@ -40,13 +40,10 @@ npm start
 
 Now you can open up `http://localhost:8080` in your browser and you'll see the examples site.
 
-If you want to edit the source while running the examples and have those changes immediately reflected, you need to run two additional watching commands in your terminal:
+If you want to edit the source while running the examples and have those changes immediately reflected, you can use the `watch` command instead, which will watch the source files for changes while running the server:
 
 ```
-npm run dist:watch
+npm run watch
-```
-```
-npm run examples:watch
 ```
 
 

lib/serializers/html.js

@@ -5,7 +5,7 @@ import Inline from '../models/inline'
 import Mark from '../models/mark'
 import Raw from './raw'
 import React from 'react'
-import ReactDOM from 'react-dom/server'
+import ReactDOMServer from 'react-dom/server'
 import State from '../models/state'
 import Text from '../models/text'
 import cheerio from 'cheerio'
@@ -221,7 +221,7 @@ class Html {
   serialize = (state) => {
     const { document } = state
     const elements = document.nodes.map(this.serializeNode)
-    const html = ReactDOM.renderToStaticMarkup(<body>{elements}</body>)
+    const html = ReactDOMServer.renderToStaticMarkup(<body>{elements}</body>)
     const inner = html.slice(6, -7)
     return inner
   }

package.json

@@ -10,14 +10,12 @@
     "debug": "^2.2.0",
     "detect-browser": "^1.3.3",
     "direction": "^0.1.5",
-    "element-scroll-to": "^1.1.0",
     "esrever": "^0.2.0",
     "get-window": "^1.1.1",
-    "immutable": "^3.8.1",
     "is-empty": "^1.0.0",
+    "immutable": "^3.8.1",
     "keycode": "^2.1.2",
     "lodash": "^4.13.1",
-    "react-portal": "^2.2.0",
     "type-of": "^2.0.1",
     "ua-parser-js": "^0.7.10",
     "uid": "0.0.2"
@@ -35,6 +33,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babelify": "^7.3.0",
     "browserify": "^13.0.1",
+    "browserify-global-shim": "^1.0.3",
     "browserify-shim": "^3.8.12",
     "disc": "^1.3.2",
     "envify": "^3.4.1",
@@ -47,12 +46,14 @@
     "is-image": "^1.0.1",
     "is-url": "^1.2.2",
     "mocha": "^2.5.3",
+    "npm-run-all": "^2.3.0",
     "prismjs": "^1.5.1",
     "react": "^15.2.0",
     "react-addons-perf": "^15.2.1",
     "react-dom": "^15.1.0",
     "react-frame-aware-selection-plugin": "0.0.1",
     "react-frame-component": "^0.6.2",
+    "react-portal": "^2.2.0",
     "react-router": "^2.5.1",
     "read-metadata": "^1.0.0",
     "selection-position": "^1.0.0",
@@ -68,31 +69,32 @@
   },
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./examples/build.js",
-    "disc": "npm run dist && npm run disc:build && npm run disc:open",
+    "disc": "npm-run-all dist disc:build disc:open",
-    "disc:build": "mkdir -p ./tmp && browserify ./dist/index.js --full-paths --outfile ./tmp/build.js",
+    "disc:build": "mkdir -p ./tmp && browserify ./dist/index.js --full-paths > ./tmp/build.js",
     "disc:open": "discify ./tmp/build.js --open",
-    "dist": "npm run dist:npm && npm run dist:bundle",
+    "dist": "npm-run-all dist:npm dist:max dist:min",
-    "dist:bundle": "npm run dist:bundle:max && npm run dist:bundle:min",
+    "dist:max": "browserify ./lib/index.js --transform babelify --transform [ browserify-global-shim --global ] > ./dist/slate.js",
-    "dist:bundle:max": "NODE_ENV=production browserify ./dist/index.js --transform envify --transform browserify-shim --standalone Slate --outfile ./dist/slate.js",
+    "dist:min": "NODE_ENV=production browserify ./lib/index.js --transform babelify --transform envify --transform [ browserify-global-shim --global ] --transform uglifyify --standalone Slate | uglifyjs > ./dist/slate.min.js",
-    "dist:bundle:min": "NODE_ENV=production browserify ./dist/index.js --transform envify --transform uglifyify --transform browserify-shim --standalone Slate | uglifyjs --output ./dist/slate.min.js",
     "dist:npm": "babel --out-dir ./dist ./lib",
-    "dist:watch": "babel --watch --out-dir ./dist ./lib",
+    "examples": "npm-run-all examples:dev examples:prod",
-    "examples": "npm run examples:dev && npm run examples:prod",
+    "examples:dev": "browserify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js",
-    "examples:dev": "browserify --debug --transform babelify ./examples/index.js --outfile ./examples/build.dev.js",
+    "examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js > ./examples/build.prod.js",
-    "examples:open": "open http://localhost:8080/dev.html",
-    "examples:prod": "NODE_ENV=production browserify --transform babelify ./examples/index.js --outfile ./examples/build.prod.js",
-    "examples:start": "http-server ./examples",
-    "examples:watch": "watchify --debug --transform babelify ./examples/index.js --outfile ./examples/build.dev.js",
     "gh-pages": "npm run dist && npm run examples && gh-pages --dist ./examples",
     "lint": "eslint --ignore-pattern 'build.dev.js' --ignore-pattern 'build.prod.js' '{examples,lib}/**/*.js'",
+    "open": "open http://localhost:8080/dev.html",
     "prepublish": "npm run dist",
-    "start": "npm run examples:start",
+    "start": "http-server ./examples",
-    "test": "npm run dist && npm run lint && npm run test:server",
+    "test": "npm-run-all lint dist:npm test:server",
-    "test:server": "mocha --compilers js:babel-core/register --reporter spec ./test/server.js"
+    "test:server": "mocha --compilers js:babel-core/register --reporter spec ./test/server.js",
+    "watch": "npm-run-all --parallel --print-label watch:dist watch:examples start",
+    "watch:dist": "babel --watch --out-dir ./dist ./lib",
+    "watch:examples": "watchify --debug --transform babelify ./examples/index.js > ./examples/build.dev.js"
   },
-  "browserify-shim": {
+  "browserify-global-shim": {
-    "react": "global:React",
+    "immutable": "Immutable",
-    "react-dom": "global:ReactDOM"
+    "react": "React",
+    "react-dom": "ReactDOM",
+    "react-dom/server": "ReactDOMServer"
   },
   "keywords": [
     "canvas",