Don't depend on react-dom-server to prevent issues with React 15.4.

CHANGELOG.md

@@ -4,6 +4,7 @@ CHANGELOG
 ## 3.0.1
 
 - Fix #156: Don't crash when unsubscribing from non-subscribed event listener.
+- Don't rely on `react-dom-server` in React templates plugin to avoid issues with React 15.4.
 
 ## 3.0.0
 

README.md

@@ -61,7 +61,7 @@ The second line should reference the CSS file from the bundle you chose to use.
 
 The third line should reference jQuery, React or Zepto.js as appropriate. This line is optional if
 you use the VanillaJS bundle. *Note: If you want to use the React templates plugin, don't forget to
-also include `react-dom-server.js`.*
+also include `react-dom.js`.*
 
 Finally, the last line should reference the JavaScript file from the bundle you chose to use.
 
@@ -213,7 +213,7 @@ Module                          | Description
 **plugins/tokenizer**           | Default tokenizer implementation. This module adds support for the `tokenSeparators` option which is used by the default tokenizer. Support for tokenizers themselves is already included in the "multiple" module, so you can omit this module if you don't want to use any tokenizers or want to specify your own tokenizer.
 **plugins/jquery/ajax**         | Provides a fallback to use `$.ajax()` instead of the `fetch()` method for performing AJAX requests. *(Requires jQuery 3.0 or higher)*
 **plugins/jquery/traditional**  | This module allows you to convert an HTML5 `<select>` form element into a Selectivity instance. The items will be initialized from the `<option>` and `<optgroup>` elements. *(jQuery only)*
-**plugins/react/templates**     | Adds support for React (JSX) templates. Requires `react-dom/server` to be available.
+**plugins/react/templates**     | Adds support for React (JSX) templates. Requires `react-dom` to be available.
 **dropdown**                    | Module that implements the dropdown. You will most likely want to include this, unless you only want to use Selectivity without any dropdown or you provide a completely custom implementation instead.
 **locale**                      | Localizable content pulled in by the default templates. You may or may not decide to use these with your own templates. Also used for localizable messages by the ajax module.
 **templates**                   | Default templates to use with Selectivity. If you provide your own templates, you may want to skip this.

demos/custom-react.html

@@ -20,7 +20,6 @@
         </style>
         <script src="../vendor/react.js"></script>
         <script src="../vendor/react-dom.js"></script>
-        <script src="../vendor/react-dom-server.js"></script>
         <script src="../build/selectivity-custom.js"></script>
         <script src="./demos-react.js"></script>
     </head>

gulp/tasks/browserify.js

@@ -36,7 +36,7 @@ module.exports = function() {
 
     b.add('./src/selectivity-custom.js');
 
-    ['jquery', 'react', 'react-dom/server'].forEach(function(lib) {
+    ['jquery', 'react', 'react-dom'].forEach(function(lib) {
         b.external(lib);
     });
 
@@ -70,7 +70,7 @@ module.exports = function() {
 
     stream = stream.pipe(replace(/require\(['"]jquery['"]\)/g, '(window.jQuery || window.Zepto)'));
     stream = stream.pipe(replace(/require\(['"]react['"]\)/g, 'window.React'));
-    stream = stream.pipe(replace(/require\(['"]react-dom\/server['"]\)/g, 'window.ReactDOMServer'));
+    stream = stream.pipe(replace(/require\(['"]react-dom['"]\)/g, 'window.ReactDOM'));
 
     if (argv.commonJs || argv.derequire) {
         stream = stream.pipe(derequire());
@@ -79,7 +79,7 @@ module.exports = function() {
     if (argv.commonJs) {
         stream = stream.pipe(replace(/window\.jQuery \|\| window\.Zepto/g, 'require("jquery")'));
         stream = stream.pipe(replace(/window\._/g, 'require("lodash")'));
-        stream = stream.pipe(replace(/window\.ReactDOMServer/g, 'require("react-dom/server")'));
+        stream = stream.pipe(replace(/window\.ReactDOM/g, 'require("react-dom")'));
         stream = stream.pipe(replace(/window\.React/g, 'require("react")'));
     } else {
         stream = stream.pipe(replace(/var ReactDOMServer *= *window\.ReactDOMServer;/g, ''));

src/plugins/react/templates.js

@@ -1,10 +1,17 @@
 'use strict';
 
 var isValidElement = require('react').isValidElement;
-var ReactDOMServer = require('react-dom/server');
+var ReactDOM = require('react-dom');
 
 var Selectivity = require('../../selectivity');
 
+var div = null;
+function renderToString(element) {
+    div = div || document.createElement('div');
+    ReactDOM.render(element, div);
+    return div.innerHTML;
+}
+
 /**
  * Overrides the Selectivity template() method to support React templates.
  *
@@ -26,12 +33,12 @@ Selectivity.prototype.template = function(templateName, options) {
 
     var template = this.templates[templateName];
     if (isValidElement(template)) {
-        return ReactDOMServer.renderToStaticMarkup(template);
+        return renderToString(template);
     }
 
     var result = templateMethod.call(this, templateName, options);
     if (isValidElement(result)) {
-        return ReactDOMServer.renderToStaticMarkup(result);
+        return renderToString(result);
     } else {
         return result;
     }

tests/unit/react/templates.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var div = React.createFactory('div');
+var input = React.createFactory('input');
+var span = React.createFactory('span');
+
+var TestUtil = require('../../test-util');
+
+TestUtil.createReactTest(
+    'react/templates: test templates specified as React elements',
+    ['inputs/single', 'plugins/react/templates'],
+    {
+        defaultValue: 'Amsterdam <script>',
+        items: ['Amsterdam <script>', 'Antwerp', 'Athens'],
+        templates: {
+            singleSelectInput: function() {
+                return div({ className: 'selectivity-single-select react-template' },
+                    input({ type: 'text', className: 'selectivity-single-select-input' }),
+                    div({ className: 'selectivity-single-result-container' })
+                );
+            },
+            singleSelectedItem: function(options) {
+                return span({
+                    className: 'selectivity-single-selected-item',
+                    'data-item-id': options.id
+                }, options.text);
+            }
+        }
+    },
+    function(SelectivityReact, test, ref, container, $) {
+        test.equal($('.selectivity-single-select.react-template').length, 1);
+        test.equal($('.selectivity-single-result-container').length, 1);
+        test.equal($('.selectivity-single-selected-item').length, 1);
+        test.ok(
+            $('.selectivity-single-selected-item')[0].textContent.indexOf('Amsterdam <script>') > -1
+        );
+        test.equal(
+            $('.selectivity-single-selected-item')[0].getAttribute('data-item-id'),
+            'Amsterdam <script>'
+        );
+    }
+);