Merge pull request mic159#12 from mic159/react_16

React 16

Author: mic159

.travis.yml

@@ -2,21 +2,19 @@ language: python
 
 python:
   - "2.7"
-  - "3.4"
+  - "3.5"
+  - "3.6"
 
 env:
-  - DJANGO_VERSION=1.6.10
-  - DJANGO_VERSION=1.7.6
-  - DJANGO_VERSION=1.8a1
-
-matrix:
-  exclude:
-    - python: "3.4"
-      env: DJANGO_VERSION=1.6.10
+  - DJANGO_VERSION=1.8.18
+  - DJANGO_VERSION=1.11.6
 
 install:
   - "npm install -g npm"
   - "pip install Django==$DJANGO_VERSION"
   - "pip install ."
+  - "npm install"
+  - "npm install --prefix=tests"
+  - "npm run build --prefix=tests"
 
 script: python runtests.py

README.md

@@ -126,6 +126,6 @@ cd tests
 npm install
 npm run build
 cd ..
-node renderer.js &
+node render.js &
 python runtests.py
 ```

example/djangosite/settings.py

@@ -7,8 +7,6 @@
 
 DEBUG = True
 
-TEMPLATE_DEBUG = DEBUG
-
 SECRET_KEY = '_'
 
 INSTALLED_APPS = (
@@ -28,6 +26,17 @@
 
 STATIC_ROOT = os.path.join(BASE_DIR, 'static')
 
+TEMPLATES = [{
+    'BACKEND': 'django.template.backends.django.DjangoTemplates',
+    'DIRS': [os.path.join(BASE_DIR, 'templates')],
+    'APP_DIRS': True,
+    'OPTIONS': {
+        'context_processors': [
+            'django.template.context_processors.debug',
+            'django.template.context_processors.request',
+        ],
+    },
+}]
 
 # EXAMPLE APP
 # ===========

example/djangosite/urls.py

@@ -1,5 +1,5 @@
-from django.conf.urls import patterns, include, url
+from django.conf.urls import include, url
 
-urlpatterns = patterns('',
+urlpatterns = [
     url(r'^', include('example_app.urls')),
-)
+]

example/example_app/static/jsx/components/Comment.jsx

@@ -1,9 +1,10 @@
-var React = require('react');
-var marked = require('marked');
+import React, {Component} from 'react';
+import marked from 'marked';
 
-module.exports = React.createClass({
-  render: function() {
-    var rawMarkup = marked(this.props.text);
+
+export default class Comment extends Component {
+  render() {
+    const rawMarkup = marked(this.props.text);
     return (
       <div>
         <h3>
@@ -13,4 +14,4 @@ module.exports = React.createClass({
       </div>
     );
   }
-});
+}

example/example_app/static/jsx/components/CommentBox.jsx

@@ -1,20 +1,25 @@
-var React = require('react');
-var $ = require('jquery');
-var CommentList = require('./CommentList.jsx');
-var CommentForm = require('./CommentForm.jsx');
+import React, {Component} from 'react';
+import $ from 'jquery';
+import CommentList from './CommentList.jsx';
+import CommentForm from './CommentForm.jsx';
 
-module.exports = React.createClass({
-  getInitialState: function() {
-    return {comments: this.props.comments};
-  },
-  handleCommentSubmit: function(comment) {
+export default class CommentBox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      comments: props.comments,
+    };
+  }
+
+  handleCommentSubmit = comment => {
     var comments = this.state.comments;
     comments.push(comment);
     this.setState({comments: comments}, function() {
       this.postComment(comment);
     });
-  },
-  postComment: function(comment) {
+  };
+
+  postComment = comment => {
     $.ajax({
       url: this.props.url,
       type: 'POST',
@@ -27,8 +32,9 @@ module.exports = React.createClass({
         console.error(this.props.url, status, err.toString());
       }.bind(this)
     });
-  },
-  getComments: function() {
+  };
+
+  getComments = () => {
     $.ajax({
       url: this.props.url,
       dataType: 'json',
@@ -38,21 +44,24 @@ module.exports = React.createClass({
       error: function(xhr, status, err) {
         console.error(this.props.url, status, err.toString());
       }.bind(this),
-      complete: this.pollForNewComments
+      complete: this.pollForNewComments.bind(this)
     });
-  },
-  pollForNewComments: function() {
+  };
+
+  pollForNewComments() {
     setTimeout(this.getComments, this.props.pollInterval);
-  },
-  componentDidMount: function() {
+  }
+
+  componentDidMount() {
     this.pollForNewComments();
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <div>
         <CommentList comments={this.state.comments} />
         <CommentForm url={this.props.url} onCommentSubmit={this.handleCommentSubmit} />
       </div>
     );
   }
-});
+}

example/example_app/static/jsx/components/CommentForm.jsx

@@ -1,7 +1,12 @@
-var React = require('react');
+import React, {Component} from 'react';
 
-module.exports = React.createClass({
-  handleSubmit: function(e) {
+export default class CommentForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {author: '', text: ''};
+  }
+
+  handleSubmit = e => {
     e.preventDefault();
     var author = this.state.author.trim();
     var text = this.state.text.trim();
@@ -10,17 +15,17 @@ module.exports = React.createClass({
     }
     this.props.onCommentSubmit({author: author, text: text});
     this.setState({author: '', text: ''});
-  },
-  getInitialState: function() {
-    return {author: '', text: ''};
-  },
-  handleAuthorChange: function(e) {
+  };
+
+  handleAuthorChange = e => {
     this.setState({author: e.target.value});
-  },
-  handleTextChange: function(e) {
+  };
+
+  handleTextChange = e => {
     this.setState({text: e.target.value});
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <form method="POST" action={this.props.url} onSubmit={this.handleSubmit}>
         <h2>Submit a comment</h2>
@@ -45,10 +50,9 @@ module.exports = React.createClass({
           </label>
         </div>
         <div className="text-right">
-          <button type="reset" className="btn btn-default">Reset</button>
           <button type="submit" className="btn btn-primary">Submit</button>
         </div>
       </form>
     );
   }
-});
+}

example/example_app/static/jsx/components/CommentList.jsx

@@ -1,8 +1,9 @@
-var React = require('react');
-var Comment = require('./Comment.jsx');
+import React, {Component} from 'react';
+import Comment from './Comment.jsx';
 
-module.exports = React.createClass({
-  render: function() {
+
+export default class CommentList extends Component {
+  render() {
     if (!this.props.comments.length) {
       return null;
     }
@@ -16,4 +17,4 @@ module.exports = React.createClass({
       </div>
     );
   }
-});
+}

example/example_app/templates/example_app/index.html

@@ -16,7 +16,7 @@ <h1>Django + React + Webpack demo</h1>
 			{% if no_js %}
 				<a href="{% url 'index' %}">View this page with JavaScript</a>
 			{% else %}
-				<a href="{% url 'index-no-js' %}">View this page without JavaScript</a>
+				<a href="{% url 'index' %}?no-js">View this page without JavaScript</a>
 			{% endif %}
 		</p>
 		<!-- Insert the CommentBox's rendered markup -->
@@ -35,4 +35,4 @@ <h1>Django + React + Webpack demo</h1>
 		</script>
 	{% endif %}
 </body>
-</html>
+</html>

example/example_app/urls.py

@@ -1,7 +1,7 @@
-from django.conf.urls import patterns, url
+from django.conf.urls import url
+from .views import index, comment
 
-urlpatterns = patterns('example_app.views',
-    url(r'^$', 'index', name='index'),
-    url(r'^\?no-js$', 'index', name='index-no-js'),
-    url(r'^comment/$', 'comment', name='comment'),
-)
+urlpatterns = [
+    url(r'^$', index, name='index'),
+    url(r'^comment/$', comment, name='comment'),
+]

example/example_app/views.py

@@ -45,7 +45,7 @@ def comment(request):
             'text': request.POST.get('text', None),
         })
         if not request.is_ajax():
-            return redirect('index-no-js')
+            return redirect('/?no-js')
     return HttpResponse(
         json.dumps(comments),
         content_type='application/json'

example/package.json

@@ -12,8 +12,8 @@
     "babel-preset-react": "^6.5.0",
     "jquery": "^2.1.3",
     "marked": "^0.3.3",
-    "react": "^15.2",
-    "react-dom": "^15.2",
+    "react": "16.0",
+    "react-dom": "16.0",
     "webpack": "^1.13.1",
     "react-render-service": "^1.0.0"
   }

example/requirements.txt

@@ -1 +1,2 @@
-react-render-client==1.0.0
+react-render-client==1.0.0
+django==1.11.6

package.json

@@ -10,13 +10,13 @@
     "body-parser": "^1.15.2",
     "express": "^4.14.0",
     "morgan": "^1.7.0",
-    "react-dom": "^15.2",
-    "react": "^15.2",
+    "react-dom": "16.0.0",
+    "react": "16.0.0",
     "yargs": "^3.29.0"
   },
   "peerDependencies": {
-    "react": "^0.14 || ^15.0",
-    "react-dom": "^0.14 || ^15.0"
+    "react": "^15.0 || ^16.0",
+    "react-dom": "^145.0|| ^16.0"
   },
   "author": "Michael Cooper",
   "repository": {

render.js

@@ -59,12 +59,12 @@ var Component = function Component(pathToSource) {
   }
 };
 
-Component.prototype.render = function render(props, toStaticMarkup, callback) {
+Component.prototype.render = function render(props, toStaticMarkup) {
   var element = this.factory(props);
   if (toStaticMarkup) {
-    callback(ReactDOMServer.renderToStaticMarkup(element));
+    return ReactDOMServer.renderToStaticNodeStream(element);
   } else {
-    callback(ReactDOMServer.renderToString(element));
+    return ReactDOMServer.renderToNodeStream(element);
   }
 };
 
@@ -89,15 +89,16 @@ app.post('/render', function service(request, response) {
   }
   var component = cache[pathToSource];
 
-  component.render(props, toStaticMarkup, function(output) {
-    response.send(output);
-  });
+  var stream = component.render(props, toStaticMarkup);
+  stream.on('error', function(err) {errorHandler(err, request, response)});
+  stream.pipe(response);
 });
 
-app.use(function errorHandler(err, request, response, next) {
+function errorHandler(err, request, response, next) {
   console.log('[' + new Date().toISOString() + '] ' + err.stack);
   response.status(500).send(argv.debug ? err.stack : err.toString());
-});
+}
+app.use(errorHandler);
 
 var server = app.listen(argv.port || 63578, argv.host || 'localhost', function() {
   console.log('Started server at http://%s:%s', server.address().address, server.address().port);

runtests.py

@@ -1,5 +1,7 @@
 import os
 import sys
+import time
+import subprocess
 
 import django
 
@@ -13,7 +15,14 @@
     from django.conf import settings
     from django.test.utils import get_runner
 
+    node = subprocess.Popen(['node', 'render.js'])
+    # Wait for service to start
+    time.sleep(1)
+
     TestRunner = get_runner(settings)
     test_runner = TestRunner()
     failures = test_runner.run_tests(['tests'])
-    sys.exit(bool(failures))
+
+    node.kill()
+
+    sys.exit(bool(failures))