Merge pull request #320 from share/update-examples

Update dependencies in examples and bring them up to date

Author: nateps

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;

examples/leaderboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "sharedb-example-leaderboard",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "React Leaderboard backed by ShareDB",
   "main": "server.js",
   "scripts": {
-    "build": "mkdir -p dist/ && ./node_modules/.bin/browserify -t [ babelify --presets [ react ] ] client/index.jsx -o dist/bundle.js",
+    "build": "mkdir -p static/dist/ && ./node_modules/.bin/browserify -t [ babelify --presets [ react ] ] client/index.jsx -o static/dist/bundle.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node server/index.js"
   },
@@ -15,21 +15,21 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@teamwork/websocket-json-stream": "^2.0.0",
     "classnames": "^2.2.5",
-    "connect": "^3.4.1",
-    "react": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "serve-static": "^1.11.1",
+    "express": "^4.17.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "reconnecting-websocket": "^4.2.0",
     "sharedb": "^1.0.0-beta",
     "sharedb-mingo-memory": "^1.0.0-beta",
-    "through2": "^2.0.1",
     "underscore": "^1.8.3",
-    "@teamwork/websocket-json-stream": "^2.0.0",
-    "ws": "^1.1.0"
+    "ws": "^7.2.0"
   },
   "devDependencies": {
     "babel-preset-react": "^6.5.0",
     "babelify": "^7.3.0",
-    "browserify": "^13.0.1"
+    "browserify": "^16.5.0"
   }
 }

examples/leaderboard/server/index.js

@@ -1,7 +1,6 @@
 var http = require('http');
 var ShareDB = require('sharedb');
-var connect = require('connect');
-var serveStatic = require('serve-static');
+var express = require('express');
 var ShareDBMingoMemory = require('sharedb-mingo-memory');
 var WebSocketJSONStream = require('@teamwork/websocket-json-stream');
 var WebSocket = require('ws');
@@ -10,8 +9,8 @@ var WebSocket = require('ws');
 var share = new ShareDB({db: new ShareDBMingoMemory()});
 
 // Create a WebSocket server
-var app = connect();
-app.use(serveStatic('.'));
+var app = express();
+app.use(express.static('static'));
 var server = http.createServer(app);
 var wss = new WebSocket.Server({server: server});
 server.listen(8080);