Introduce ReactSWFCompat to support IE8-9

Author: syranide

README.md

@@ -2,7 +2,7 @@
 
 Shockwave Flash Player component for React. GCC `ADVANCED` optimizations compatible.
 
-Supports all browsers supported by React except for IE8-9 (due to a React/DOM incompatibility).
+Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9.
 
 Depends on [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Polyfill_for_non-ES6_browsers) and [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill)
 
@@ -65,8 +65,28 @@ class MyExternalInterfaceExample extends React.Component {
 }
 ```
 
+## ReactSWFCompat
+
+ReactSWFCompat (`require('react-swf/compat')`) also supports IE8-9, but should only be used if you must support these browsers. Internally it uses `ReactDOMServer.renderToString` to render to markup and then immediately `ReactDOM.render` on-top of that. There may be some behavioral differences in edge-cases but overall it should behave just the same. Due to the design of React you are required to provide a container element, the SWF-markup will be rendered inside.
+
+```jsx
+<ReactSWFCompat
+  container={<div style={{background: '#cccccc'}} />}
+  src="example.swf"
+  id="guid_001"
+  width="300"
+  height="200"
+  wmode="transparent"
+  flashVars={{foo: 'A', bar: 1}}
+/>
+```
+
 ## Breaking changes
 
+#### 1.0.0
+
+* IE8-9 is no longer supported due to issues with the new DOM renderer in React 15. `ReactSWFCompat` has been introduced as a workaround to this.
+
 #### 0.13.0
 
 * `getFPVersion` and `isFPVersionSupported` forked to [SWFPlayerVersion](https://github.com/syranide/swf-player-version) and dropped from ReactSWF. Replace `ReactSWF.getFPVersion => SWFPlayerVersion.get` and `ReactSWF.isFPVersionSupported => SWFPlayerVersion.isSupported`.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-swf",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "Shockwave Flash Player component for React",
   "authors": ["Andreas Svensson <[email protected]>"],

npm-react-swf/README.md

@@ -2,7 +2,7 @@
 
 Shockwave Flash Player component for React. GCC `ADVANCED` optimizations compatible.
 
-Supports all browsers supported by React.
+Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9.
 
 Depends on [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Polyfill_for_non-ES6_browsers) and [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill)
 
@@ -65,8 +65,28 @@ class MyExternalInterfaceExample extends React.Component {
 }
 ```
 
+## ReactSWFCompat
+
+ReactSWFCompat (`require('react-swf/compat')`) also supports IE8-9, but should only be used if you must support these browsers. Internally it uses `ReactDOMServer.renderToString` to render to markup and then immediately `ReactDOM.render` on-top of that. There may be some behavioral differences in edge-cases but overall it should behave just the same. Due to the design of React you are required to provide a container element, the SWF-markup will be rendered inside.
+
+```jsx
+<ReactSWFCompat
+  container={<div style={{background: '#cccccc'}} />}
+  src="example.swf"
+  id="guid_001"
+  width="300"
+  height="200"
+  wmode="transparent"
+  flashVars={{foo: 'A', bar: 1}}
+/>
+```
+
 ## Breaking changes
 
+#### 1.0.0
+
+* IE8-9 is no longer supported due to issues with the new DOM renderer in React 15. `ReactSWFCompat` has been introduced as a workaround to this.
+
 #### 0.13.0
 
 * `getFPVersion` and `isFPVersionSupported` forked to [SWFPlayerVersion](https://github.com/syranide/swf-player-version) and dropped from ReactSWF. Replace `ReactSWF.getFPVersion => SWFPlayerVersion.get` and `ReactSWF.isFPVersionSupported => SWFPlayerVersion.isSupported`.

npm-react-swf/compat.js

@@ -0,0 +1,63 @@
+/*! react-swf v1.0.3 | @syranide | MIT license */
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var ReactDOMServer = require('react-dom/server');
+var ReactSWF = require('react-swf');
+var PropTypes = React.PropTypes;
+
+function ReactSWFCompat(props) {
+  React.Component.call(this, props);
+
+  var that = this;
+  this._containerRefCallback = function(c) {
+    that._container = c;
+  };
+  this._swfRefCallback = function(c) {
+    that._swf = c;
+  };
+}
+
+ReactSWFCompat.prototype = Object.create(React.Component.prototype);
+ReactSWFCompat.prototype.constructor = ReactSWFCompat;
+Object.assign(ReactSWFCompat, React.Component);
+
+ReactSWFCompat.propTypes = {
+  container: PropTypes.element.isRequired
+};
+
+ReactSWFCompat.prototype._createSWFElement = function() {
+  var swfProps = Object.assign({}, this.props);
+  swfProps.container = undefined;
+  swfProps.movie = swfProps.src;
+  swfProps.ref = this._swfRefCallback;
+
+  return React.createElement(ReactSWF, swfProps);
+};
+
+ReactSWFCompat.prototype.getFPDOMNode = function() {
+  return this._swf.getFPDOMNode();
+};
+
+ReactSWFCompat.prototype.componentDidMount = function() {
+  var swfElement = this._createSWFElement();
+  this._container.innerHTML = ReactDOMServer.renderToString(swfElement);
+  ReactDOM.render(swfElement, this._container);
+};
+
+ReactSWFCompat.prototype.componentDidUpdate = function() {
+  var swfElement = this._createSWFElement();
+  ReactDOM.render(swfElement, this._container);
+};
+
+ReactSWFCompat.prototype.render = function() {
+  var containerProps = {
+    ref: this._containerRefCallback
+  };
+
+  return React.cloneElement(this.props.container, containerProps, null);
+};
+
+module.exports = ReactSWFCompat;

npm-react-swf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-swf",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "Shockwave Flash Player component for React",
   "author": "Andreas Svensson <[email protected]>",

npm-react-swf/react-swf.js

@@ -1,4 +1,4 @@
-/*! react-swf v1.0.2 | @syranide | MIT license */
+/*! react-swf v1.0.3 | @syranide | MIT license */
 
 'use strict';
 
@@ -29,6 +29,8 @@ var PropTypes = React.PropTypes;
 */
 
 var supportedFPParamNames = {
+  movie: 'movie', // react-swf/compat for IE8
+
   flashVars: 'flashvars',
 
   allowFullScreen: 'allowfullscreen',
@@ -149,6 +151,7 @@ Object.assign(ReactSWF, React.Component);
 
 ReactSWF.propTypes = {
   src: PropTypes.string.isRequired,
+  movie: PropTypes.string, // react-swf/compat for IE8
 
   flashVars: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-swf",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "MIT",
   "description": "Shockwave Flash Player component for React",
   "author": "Andreas Svensson <[email protected]>",

react-swf-compat.js

@@ -0,0 +1,69 @@
+/*! react-swf v1.0.3 | @syranide | MIT license */
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['react', 'react-dom', 'react-dom/server', 'react-swf'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('react'), require('react-dom'), require('react-dom-server'), require('react-swf'));
+  } else {
+    root.ReactSWFCompat = factory(root.React, root.ReactDOM, root.ReactDOMServer, root.ReactSWF);
+  }
+}(this, function(React, ReactDOM, ReactDOMServer, ReactSWF) {
+  'use strict';
+
+  var PropTypes = React.PropTypes;
+
+  function ReactSWFCompat(props) {
+    React.Component.call(this, props);
+
+    var that = this;
+    this._containerRefCallback = function(c) {
+      that._container = c;
+    };
+    this._swfRefCallback = function(c) {
+      that._swf = c;
+    };
+  }
+
+  ReactSWFCompat.prototype = Object.create(React.Component.prototype);
+  ReactSWFCompat.prototype.constructor = ReactSWFCompat;
+  Object.assign(ReactSWFCompat, React.Component);
+
+  ReactSWFCompat.propTypes = {
+    container: PropTypes.element.isRequired
+  };
+
+  ReactSWFCompat.prototype._createSWFElement = function() {
+    var swfProps = Object.assign({}, this.props);
+    swfProps.container = undefined;
+    swfProps.movie = swfProps.src;
+    swfProps.ref = this._swfRefCallback;
+
+    return React.createElement(ReactSWF, swfProps);
+  };
+
+  ReactSWFCompat.prototype.getFPDOMNode = function() {
+    return this._swf.getFPDOMNode();
+  };
+
+  ReactSWFCompat.prototype.componentDidMount = function() {
+    var swfElement = this._createSWFElement();
+    this._container.innerHTML = ReactDOMServer.renderToString(swfElement);
+    ReactDOM.render(swfElement, this._container);
+  };
+
+  ReactSWFCompat.prototype.componentDidUpdate = function() {
+    var swfElement = this._createSWFElement();
+    ReactDOM.render(swfElement, this._container);
+  };
+
+  ReactSWFCompat.prototype.render = function() {
+    var containerProps = {
+      ref: this._containerRefCallback
+    };
+
+    return React.cloneElement(this.props.container, containerProps, null);
+  };
+
+  return ReactSWFCompat;
+}));

react-swf-compat.min.js

@@ -1,4 +1,4 @@
-/*! react-swf v1.0.2 | @syranide | MIT license */
+/*! react-swf v1.0.3 | @syranide | MIT license */
 
 (function(root, factory) {
   if (typeof define === 'function' && define.amd) {