Merge branch 'master' into remove-deprecated-middleware

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 node_js:
+  - "12"
   - "10"
   - "8"
-  - "6"
 script: "npm run lint && npm run test-cover"
 # Send coverage data to Coveralls
 after_script: "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"

README.md

@@ -152,7 +152,7 @@ Register a new middleware.
     before being committed to the database
   * `'commit'`: An operation was applied to a snapshot; The operation
     and new snapshot are about to be written to the database.
-  * `'afterSubmit'`: An operation was successfully submitted to
+  * `'afterWrite'`: An operation was successfully written to
     the database.
   * `'receive'`: Received a message from a client
   * `'reply'`: About to send a non-error reply to a client message
@@ -321,7 +321,7 @@ Populate the fields on `doc` with a snapshot of the document from the server.
 Populate the fields on `doc` with a snapshot of the document from the server, and
 fire events on subsequent changes.
 
-`doc.unsubscribe(function (err) {...})`	
+`doc.unsubscribe(function (err) {...})`
 Stop listening for document updates. The document data at the time of unsubscribing remains in memory, but no longer stays up-to-date. Resubscribe with `doc.subscribe`.
 
 `doc.ingestSnapshot(snapshot, callback)`

examples/counter/client.js

@@ -1,7 +1,8 @@
+var ReconnectingWebSocket = require('reconnecting-websocket');
 var sharedb = require('sharedb/lib/client');
 
 // Open WebSocket connection to ShareDB server
-var socket = new WebSocket('ws://' + window.location.host);
+var socket = new ReconnectingWebSocket('ws://' + window.location.host);
 var connection = new sharedb.Connection(socket);
 
 // Create local Doc instance mapped to 'examples' collection document with id 'counter'

examples/counter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sharedb-example-counter",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "A simple client/server app using ShareDB and WebSockets",
   "main": "server.js",
   "scripts": {
@@ -15,12 +15,13 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@teamwork/websocket-json-stream": "^2.0.0",
     "express": "^4.14.0",
+    "reconnecting-websocket": "^4.2.0",
     "sharedb": "^1.0.0-beta",
-    "@teamwork/websocket-json-stream": "^2.0.0",
-    "ws": "^1.1.0"
+    "ws": "^7.2.0"
   },
   "devDependencies": {
-    "browserify": "^13.0.1"
+    "browserify": "^16.5.0"
   }
 }

examples/leaderboard/README.md

@@ -9,24 +9,16 @@ In this demo, data is not persisted. To persist data, run a Mongo
 server and initialize ShareDB with the
 [ShareDBMongo](https://github.com/share/sharedb-mongo) database adapter.
 
-## Run this example
-
-First, install dependencies.
-
-Note: Make sure you're in the `examples/leaderboard` folder so that it uses the `package.json` located here).
+## Install dependencies
 
+Make sure you're in the `examples/leaderboard` folder so that it uses the `package.json` located here).
 ```
 npm install
 ```
 
-Then build the client JavaScript file.
-```
-npm run build
-```
-
-Get the server running.
+## Build JavaScript bundle and run server
 ```
-npm start
+npm run build && npm start
 ```
 
 Finally, open the example app in the browser. It runs on port 8080 by default:

examples/leaderboard/client/Body.jsx

@@ -1,19 +1,17 @@
 var React = require('react');
 var Leaderboard = require('./Leaderboard.jsx');
 
-var Body = React.createClass({
-  render: function() {
-    return (
-      <div className="app">
-        <div className="outer">
-          <div className="logo"></div>
-          <h1 className="title">Leaderboard</h1>
-          <div className="subtitle">Select a scientist to give them points</div>
-          <Leaderboard />
-        </div>
+function Body() {
+  return (
+    <div className="app">
+      <div className="outer">
+        <div className="logo"></div>
+        <h1 className="title">Leaderboard</h1>
+        <div className="subtitle">Select a scientist to give them points</div>
+        <Leaderboard />
       </div>
-    );
-  }
-});
+    </div>
+  );
+}
 
 module.exports = Body;

examples/leaderboard/client/Leaderboard.jsx

@@ -4,15 +4,18 @@ var React = require('react');
 var _ = require('underscore');
 var connection = require('./connection');
 
-var Leaderboard = React.createClass({
-  getInitialState: function() {
-    return {
+class Leaderboard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       selectedPlayerId: null,
       players: []
     };
-  },
+    this.handlePlayerSelected = this.handlePlayerSelected.bind(this);
+    this.handleAddPoints = this.handleAddPoints.bind(this);
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     var comp = this;
     var query = connection.createSubscribeQuery('players', {$sort: {score: -1}});
     query.on('ready', update);
@@ -21,30 +24,30 @@ var Leaderboard = React.createClass({
     function update() {
       comp.setState({players: query.results});
     }
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     query.destroy();
-  },
+  }
 
-  selectedPlayer: function() {
+  selectedPlayer() {
     return _.find(this.state.players, function(x) {
       return x.id === this.state.selectedPlayerId;
     }.bind(this));
-  },
+  }
 
-  handlePlayerSelected: function(id) {
+  handlePlayerSelected(id) {
     this.setState({selectedPlayerId: id});
-  },
+  }
 
-  handleAddPoints: function() {
+  handleAddPoints() {
     var op = [{p: ['score'], na: 5}];
     connection.get('players', this.state.selectedPlayerId).submitOp(op, function(err) {
       if (err) { console.error(err); return; }
     });
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         <div className="leaderboard">
@@ -54,7 +57,7 @@ var Leaderboard = React.createClass({
       </div>
     );
   }
-});
+}
 
 module.exports = Leaderboard;
 

examples/leaderboard/client/Player.jsx

@@ -1,18 +1,18 @@
+var PropTypes = require('prop-types');
 var React = require('react');
 var classNames = require('classnames');
 
-var Player = React.createClass({
-  propTypes: {
-    doc: React.PropTypes.object.isRequired,
-    onPlayerSelected: React.PropTypes.func.isRequired,
-    selected: React.PropTypes.bool.isRequired
-  },
+class Player extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
 
-  handleClick: function(event) {
+  handleClick(event) {
     this.props.onPlayerSelected(this.props.doc.id);
-  },
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     var comp = this;
     var doc = comp.props.doc;
     doc.subscribe();
@@ -22,13 +22,13 @@ var Player = React.createClass({
       // `comp.props.doc.data` is now updated. re-render component.
       comp.forceUpdate();
     }
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.doc.unsubscribe();
-  },
+  }
 
-  render: function() {
+  render() {
     var classes = {
       'player': true,
       'selected': this.props.selected
@@ -41,6 +41,12 @@ var Player = React.createClass({
       </li>
     );
   }
-});
+}
+
+Player.propTypes = {
+  doc: PropTypes.object.isRequired,
+  onPlayerSelected: PropTypes.func.isRequired,
+  selected: PropTypes.bool.isRequired
+};
 
 module.exports = Player;

examples/leaderboard/client/PlayerList.jsx

@@ -1,30 +1,29 @@
+var PropTypes = require('prop-types');
 var React = require('react');
 var Player = require('./Player.jsx');
 var _ = require('underscore');
 
-var PlayerList = React.createClass({
-  propTypes: {
-    players: React.PropTypes.array.isRequired,
-    selectedPlayerId: React.PropTypes.string
-  },
+function PlayerList(props) {
+  var { players, selectedPlayerId } = props;
+  var other = _.omit(props, 'players', 'selectedPlayerId');
 
-  render: function() {
-    var { players, selectedPlayerId } = this.props;
-    var other = _.omit(this.props, 'players', 'selectedPlayerId');
+  var playerNodes = players.map(function(player, index) {
+    var selected = selectedPlayerId === player.id;
 
-    var playerNodes = players.map(function(player, index) {
-      var selected = selectedPlayerId === player.id;
-
-      return (
-        <Player {...other} doc={player} key={player.id} selected={selected} />
-      );
-    });
     return (
-      <div className="playerList">
-        {playerNodes}
-      </div>
+      <Player {...other} doc={player} key={player.id} selected={selected} />
     );
-  }
-});
+  });
+  return (
+    <div className="playerList">
+      {playerNodes}
+    </div>
+  );
+}
+
+PlayerList.propTypes = {
+  players: PropTypes.array.isRequired,
+  selectedPlayerId: PropTypes.string
+};
 
-module.exports = PlayerList;
+module.exports = PlayerList;

examples/leaderboard/client/PlayerSelector.jsx

@@ -1,24 +1,23 @@
+var PropTypes = require('prop-types');
 var React = require('react');
 
-var PlayerSelector = React.createClass({
-  propTypes: {
-    selectedPlayer: React.PropTypes.object
-  },
+function PlayerSelector({ selectedPlayer, onAddPoints }) {
+  var node;
 
-  render: function() {
-    var node;
+  if (selectedPlayer) {
+    node = <div className="details">
+      <div className="name">{selectedPlayer.data.name}</div>
+      <button className="inc" onClick={onAddPoints}>Add 5 points</button>
+    </div>;
+  } else {
+    node = <div className="message">Click a player to select</div>;
+  }
 
-    if (this.props.selectedPlayer) {
-      node = <div className="details">
-        <div className="name">{this.props.selectedPlayer.data.name}</div>
-        <button className="inc" onClick={this.props.onAddPoints}>Add 5 points</button>
-      </div>;
-    } else {
-      node = <div className="message">Click a player to select</div>;
-    }
+  return node;
+}
 
-    return node;
-  }
-});
+PlayerSelector.propTypes = {
+  selectedPlayer: PropTypes.object
+};
 
 module.exports = PlayerSelector;

examples/leaderboard/client/connection.js

@@ -1,6 +1,7 @@
+var ReconnectingWebSocket = require('reconnecting-websocket');
 var sharedb = require('sharedb/lib/client');
 
 // Expose a singleton WebSocket connection to ShareDB server
-var socket = new WebSocket('ws://' + window.location.host);
+var socket = new ReconnectingWebSocket('ws://' + window.location.host);
 var connection = new sharedb.Connection(socket);
 module.exports = connection;