Modernisation - latest dependencies, re-indent JS, replace mobx decorators with non-decorator equivalents

.babelrc

@@ -1,8 +1,7 @@
 {
   "presets": [
-    "react",
-    "es2015",
-    "stage-1"
+    "@babel/preset-react",
+    "@babel/env"
   ],
-  "plugins": ["transform-decorators-legacy"]
-}
+  "plugins": [ ]
+}

bin/server.js

@@ -3,7 +3,7 @@ var path = require('path');
 var fs = require('fs');
 
 var babelrc = JSON.parse(fs.readFileSync('./.babelrc'));
-require('babel-register')(babelrc);
+require('@babel/register')(babelrc);
 
 global.__CLIENT__ = false;
 global.__SERVER__ = true;

package.json

@@ -27,41 +27,39 @@
   "homepage": "https://github.com/mobxjs/mobx/",
   "devDependencies": {
     "babel": "^6.23.0",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
-    "babel-register": "^6.24.1",
+    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
     "body-parser": "^1.17.2",
-    "cross-env": "^5.2.0",
-    "css-loader": "^0.28.4",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.3.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.1.0",
-    "file-loader": "^0.11.2",
+    "file-loader": "^6.2.0",
     "jquery": "^3.2.1",
-    "react-hot-loader": "^2.0.0-alpha-4",
-    "style-loader": "^0.18.2",
-    "ts-loader": "^2.2.1",
-    "typescript": "^2.4.1",
-    "webpack": "^3.0.0",
-    "webpack-dev-middleware": "^1.11.0",
-    "webpack-dev-server": "^2.5.0"
+    "react-hot-loader": "^4.13.0",
+    "style-loader": "^3.3.0",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.3",
+    "webpack": "^5.58.1",
+    "webpack-dev-middleware": "^5.2.1",
+    "webpack-dev-server": "^4.3.1"
   },
   "dependencies": {
     "classnames": "^2.2.5",
     "director": "^1.2.8",
     "express": "^4.15.3",
-    "jsesc": "^2.5.1",
-    "mobx": "^4.0.0",
-    "mobx-react": "^5.0.0",
-    "mobx-react-devtools": "^5.0.0",
+    "jsesc": "^3.0.2",
+    "mobx": "^6.3.3",
+    "mobx-react": "^7.2.0",
     "prop-types": "^15.5.10",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "todomvc-app-css": "^2.1.0",
     "todomvc-common": "^1.0.3",
-    "url-loader": "^0.5.9",
+    "url-loader": "^4.1.1",
     "webpack-hot-middleware": "^2.18.0"
   }
 }

src/client.js

@@ -13,8 +13,8 @@ var viewStore = new ViewStore();
 todoStore.subscribeServerToStore();
 
 ReactDOM.render(
-	<TodoApp todoStore={todoStore} viewStore={viewStore}/>,
-	document.getElementById('todoapp')
+  <TodoApp todoStore={todoStore} viewStore={viewStore}/>,
+  document.getElementById('todoapp')
 );
 
 if (module.hot) {
@@ -26,4 +26,3 @@ if (module.hot) {
     );
   });
 }
-

src/components/todoApp.js

@@ -7,40 +7,38 @@ import TodoOverview from './todoOverview';
 import TodoFooter from './todoFooter';
 import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
 
-import DevTool from 'mobx-react-devtools';
+class TodoApp extends React.Component {
+  render() {
+    const {todoStore, viewStore} = this.props;
+    return (
+      <div>
+	<header className="header">
+	  <h1>todos</h1>
+	  <TodoEntry todoStore={todoStore} />
+	</header>
+	<TodoOverview todoStore={todoStore} viewStore={viewStore} />
+	<TodoFooter todoStore={todoStore} viewStore={viewStore} />
+      </div>
+    );
+  }
 
-@observer
-export default class TodoApp extends React.Component {
-	render() {
-		const {todoStore, viewStore} = this.props;
-		return (
-			<div>
-				<DevTool />
-				<header className="header">
-					<h1>todos</h1>
-					<TodoEntry todoStore={todoStore} />
-				</header>
-				<TodoOverview todoStore={todoStore} viewStore={viewStore} />
-				<TodoFooter todoStore={todoStore} viewStore={viewStore} />
-			</div>
-		);
-	}
-
-	componentDidMount() {
-		if (__CLIENT__) {
-			var { Router } = require('director/build/director');
-			var viewStore = this.props.viewStore;
-			var router = Router({
-				'/': function() { viewStore.todoFilter = ALL_TODOS; },
-				'/active': function() { viewStore.todoFilter = ACTIVE_TODOS; },
-				'/completed': function() { viewStore.todoFilter = COMPLETED_TODOS; }
-			});
-		router.init('/');
-		}
-	}
+  componentDidMount() {
+    if (__CLIENT__) {
+      var { Router } = require('director/build/director');
+      var viewStore = this.props.viewStore;
+      var router = Router({
+	'/': function() { viewStore.setTodoFilter(ALL_TODOS); },
+	'/active': function() { viewStore.setTodoFilter(ACTIVE_TODOS); },
+	'/completed': function() { viewStore.setTodoFilter(COMPLETED_TODOS); }
+      });
+      router.init('/');
+    }
+  }
 }
 
 TodoApp.propTypes = {
-	viewStore: PropTypes.object.isRequired,
-	todoStore: PropTypes.object.isRequired
+  viewStore: PropTypes.object.isRequired,
+  todoStore: PropTypes.object.isRequired
 };
+
+export default observer(TodoApp);

src/components/todoEntry.js

@@ -2,39 +2,47 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
-import {action} from 'mobx';
+import {makeObservable, action} from 'mobx';
 
 const ENTER_KEY = 13;
 
-@observer
-export default class TodoEntry extends React.Component {
-	render() {
-		return (<input
-			ref="newField"
-			className="new-todo"
-			placeholder="What needs to be done?"
-			onKeyDown={this.handleNewTodoKeyDown}
-			autoFocus={true}
-		/>);
-	}
-
-	@action
-	handleNewTodoKeyDown = (event) => {
-		if (event.keyCode !== ENTER_KEY) {
-			return;
-		}
-
-		event.preventDefault();
-
-		var val = ReactDOM.findDOMNode(this.refs.newField).value.trim();
-
-		if (val) {
-			this.props.todoStore.addTodo(val);
-			ReactDOM.findDOMNode(this.refs.newField).value = '';
-		}
-	};
-}
+class TodoEntry extends React.Component {
+
+  constructor(props) {
+    super(props);
+    makeObservable(this, {
+      handleNewTodoKeyDown: action.bound
+    });
+  }
+
+  render() {
+    return (<input
+	      ref="newField"
+	      className="new-todo"
+	      placeholder="What needs to be done?"
+	      onKeyDown={this.handleNewTodoKeyDown}
+	      autoFocus={true}
+	    />);
+  }
+
+  handleNewTodoKeyDown = (event) => {
+    if (event.keyCode !== ENTER_KEY) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var val = ReactDOM.findDOMNode(this.refs.newField).value.trim();
+
+    if (val) {
+      this.props.todoStore.addTodo(val);
+      ReactDOM.findDOMNode(this.refs.newField).value = '';
+    }
+  };
+};
 
 TodoEntry.propTypes = {
-	todoStore: PropTypes.object.isRequired
+  todoStore: PropTypes.object.isRequired
 };
+
+export default observer(TodoEntry);

src/components/todoFooter.js

@@ -1,58 +1,65 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {observer} from 'mobx-react';
-import {action} from 'mobx';
+import {makeObservable, action} from 'mobx';
 import {pluralize} from '../utils';
 import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from '../constants';
 
-@observer
-export default class TodoFooter extends React.Component {
-	render() {
-		const todoStore = this.props.todoStore;
-		if (!todoStore.activeTodoCount && !todoStore.completedCount)
-			return null;
-
-		const activeTodoWord = pluralize(todoStore.activeTodoCount, 'item');
-
-		return (
-			<footer className="footer">
-				<span className="todo-count">
-					<strong>{todoStore.activeTodoCount}</strong> {activeTodoWord} left
-				</span>
-				<ul className="filters">
-					{this.renderFilterLink(ALL_TODOS, "", "All")}
-					{this.renderFilterLink(ACTIVE_TODOS, "active", "Active")}
-					{this.renderFilterLink(COMPLETED_TODOS, "completed", "Completed")}
-				</ul>
-				{ todoStore.completedCount === 0
-					? null
-					: 	<button
-							className="clear-completed"
-							onClick={this.clearCompleted}>
-							Clear completed
-						</button>
-				}
-			</footer>
-		);
-	}
+class TodoFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this, {
+      clearCompleted: action.bound
+    });
+  }
+
+  render() {
+    const todoStore = this.props.todoStore;
+    if (!todoStore.activeTodoCount && !todoStore.completedCount)
+      return null;
+
+    const activeTodoWord = pluralize(todoStore.activeTodoCount, 'item');
 
-	renderFilterLink(filterName, url, caption) {
-		return (<li>
-			<a href={"#/" + url}
-				className={filterName ===  this.props.viewStore.todoFilter ? "selected" : ""}>
-				{caption}
-			</a>
-			{' '}
-		</li>)
+    return (
+      <footer className="footer">
+	<span className="todo-count">
+	  <strong>{todoStore.activeTodoCount}</strong> {activeTodoWord} left
+	</span>
+	<ul className="filters">
+	  {this.renderFilterLink(ALL_TODOS, "", "All")}
+	  {this.renderFilterLink(ACTIVE_TODOS, "active", "Active")}
+	  {this.renderFilterLink(COMPLETED_TODOS, "completed", "Completed")}
+	</ul>
+	{ todoStore.completedCount === 0
+	  ? null
+	  : 	<button
+		  className="clear-completed"
+		  onClick={this.clearCompleted}>
+		  Clear completed
+		</button>
 	}
+      </footer>
+    );
+  }
 
-	@action
-	clearCompleted = () => {
-		this.props.todoStore.clearCompleted();
-	};
+  renderFilterLink(filterName, url, caption) {
+    return (<li>
+	      <a href={"#/" + url}
+		 className={filterName ===  this.props.viewStore.todoFilter ? "selected" : ""}>
+		{caption}
+	      </a>
+	      {' '}
+	    </li>)
+  }
+
+  clearCompleted = () => {
+    this.props.todoStore.clearCompleted();
+  };
 }
 
 TodoFooter.propTypes = {
-	viewStore: PropTypes.object.isRequired,
-	todoStore: PropTypes.object.isRequired
+  viewStore: PropTypes.object.isRequired,
+  todoStore: PropTypes.object.isRequired
 }
+
+export default observer(TodoFooter);