Skip to content

Commit c051eb9

Browse files
syranidesyranide
committed
Introduce ReactSWFCompat to support IE8-9
1 parent c12cd18 commit c051eb9

File tree

11 files changed

+185
-8
lines changed

11 files changed

+185
-8
lines changed

‎README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Shockwave Flash Player component for React. GCC `ADVANCED` optimizations compatible.
44

5-
Supports all browsers supported by React except for IE8-9 (due to a React/DOM incompatibility).
5+
Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9.
66

77
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)
88

@@ -65,8 +65,28 @@ class MyExternalInterfaceExample extends React.Component {
6565
}
6666
```
6767

68+
## ReactSWFCompat
69+
70+
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.
71+
72+
```jsx
73+
<ReactSWFCompat
74+
container={<div style={{background: '#cccccc'}} />}
75+
src="example.swf"
76+
id="guid_001"
77+
width="300"
78+
height="200"
79+
wmode="transparent"
80+
flashVars={{foo: 'A', bar: 1}}
81+
/>
82+
```
83+
6884
## Breaking changes
6985

86+
#### 1.0.0
87+
88+
* 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.
89+
7090
#### 0.13.0
7191

7292
* `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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-swf",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"license": "MIT",
55
"description": "Shockwave Flash Player component for React",
66
"authors": ["Andreas Svensson <[email protected]>"],

‎npm-react-swf/README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Shockwave Flash Player component for React. GCC `ADVANCED` optimizations compatible.
44

5-
Supports all browsers supported by React.
5+
Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9.
66

77
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)
88

@@ -65,8 +65,28 @@ class MyExternalInterfaceExample extends React.Component {
6565
}
6666
```
6767

68+
## ReactSWFCompat
69+
70+
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.
71+
72+
```jsx
73+
<ReactSWFCompat
74+
container={<div style={{background: '#cccccc'}} />}
75+
src="example.swf"
76+
id="guid_001"
77+
width="300"
78+
height="200"
79+
wmode="transparent"
80+
flashVars={{foo: 'A', bar: 1}}
81+
/>
82+
```
83+
6884
## Breaking changes
6985

86+
#### 1.0.0
87+
88+
* 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.
89+
7090
#### 0.13.0
7191

7292
* `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‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*! react-swf v1.0.3 | @syranide | MIT license */
2+
3+
'use strict';
4+
5+
var React = require('react');
6+
var ReactDOM = require('react-dom');
7+
var ReactDOMServer = require('react-dom/server');
8+
var ReactSWF = require('react-swf');
9+
var PropTypes = React.PropTypes;
10+
11+
function ReactSWFCompat(props) {
12+
React.Component.call(this, props);
13+
14+
var that = this;
15+
this._containerRefCallback = function(c) {
16+
that._container = c;
17+
};
18+
this._swfRefCallback = function(c) {
19+
that._swf = c;
20+
};
21+
}
22+
23+
ReactSWFCompat.prototype = Object.create(React.Component.prototype);
24+
ReactSWFCompat.prototype.constructor = ReactSWFCompat;
25+
Object.assign(ReactSWFCompat, React.Component);
26+
27+
ReactSWFCompat.propTypes = {
28+
container: PropTypes.element.isRequired
29+
};
30+
31+
ReactSWFCompat.prototype._createSWFElement = function() {
32+
var swfProps = Object.assign({}, this.props);
33+
swfProps.container = undefined;
34+
swfProps.movie = swfProps.src;
35+
swfProps.ref = this._swfRefCallback;
36+
37+
return React.createElement(ReactSWF, swfProps);
38+
};
39+
40+
ReactSWFCompat.prototype.getFPDOMNode = function() {
41+
return this._swf.getFPDOMNode();
42+
};
43+
44+
ReactSWFCompat.prototype.componentDidMount = function() {
45+
var swfElement = this._createSWFElement();
46+
this._container.innerHTML = ReactDOMServer.renderToString(swfElement);
47+
ReactDOM.render(swfElement, this._container);
48+
};
49+
50+
ReactSWFCompat.prototype.componentDidUpdate = function() {
51+
var swfElement = this._createSWFElement();
52+
ReactDOM.render(swfElement, this._container);
53+
};
54+
55+
ReactSWFCompat.prototype.render = function() {
56+
var containerProps = {
57+
ref: this._containerRefCallback
58+
};
59+
60+
return React.cloneElement(this.props.container, containerProps, null);
61+
};
62+
63+
module.exports = ReactSWFCompat;

‎npm-react-swf/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-swf",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"license": "MIT",
55
"description": "Shockwave Flash Player component for React",
66
"author": "Andreas Svensson <[email protected]>",

‎npm-react-swf/react-swf.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! react-swf v1.0.2 | @syranide | MIT license */
1+
/*! react-swf v1.0.3 | @syranide | MIT license */
22

33
'use strict';
44

@@ -29,6 +29,8 @@ var PropTypes = React.PropTypes;
2929
*/
3030

3131
var supportedFPParamNames = {
32+
movie: 'movie', // react-swf/compat for IE8
33+
3234
flashVars: 'flashvars',
3335

3436
allowFullScreen: 'allowfullscreen',
@@ -149,6 +151,7 @@ Object.assign(ReactSWF, React.Component);
149151

150152
ReactSWF.propTypes = {
151153
src: PropTypes.string.isRequired,
154+
movie: PropTypes.string, // react-swf/compat for IE8
152155

153156
flashVars: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
154157

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-swf",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"license": "MIT",
55
"description": "Shockwave Flash Player component for React",
66
"author": "Andreas Svensson <[email protected]>",

‎react-swf-compat.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*! react-swf v1.0.3 | @syranide | MIT license */
2+
3+
(function(root, factory) {
4+
if (typeof define === 'function' && define.amd) {
5+
define(['react', 'react-dom', 'react-dom/server', 'react-swf'], factory);
6+
} else if (typeof exports === 'object') {
7+
module.exports = factory(require('react'), require('react-dom'), require('react-dom-server'), require('react-swf'));
8+
} else {
9+
root.ReactSWFCompat = factory(root.React, root.ReactDOM, root.ReactDOMServer, root.ReactSWF);
10+
}
11+
}(this, function(React, ReactDOM, ReactDOMServer, ReactSWF) {
12+
'use strict';
13+
14+
var PropTypes = React.PropTypes;
15+
16+
function ReactSWFCompat(props) {
17+
React.Component.call(this, props);
18+
19+
var that = this;
20+
this._containerRefCallback = function(c) {
21+
that._container = c;
22+
};
23+
this._swfRefCallback = function(c) {
24+
that._swf = c;
25+
};
26+
}
27+
28+
ReactSWFCompat.prototype = Object.create(React.Component.prototype);
29+
ReactSWFCompat.prototype.constructor = ReactSWFCompat;
30+
Object.assign(ReactSWFCompat, React.Component);
31+
32+
ReactSWFCompat.propTypes = {
33+
container: PropTypes.element.isRequired
34+
};
35+
36+
ReactSWFCompat.prototype._createSWFElement = function() {
37+
var swfProps = Object.assign({}, this.props);
38+
swfProps.container = undefined;
39+
swfProps.movie = swfProps.src;
40+
swfProps.ref = this._swfRefCallback;
41+
42+
return React.createElement(ReactSWF, swfProps);
43+
};
44+
45+
ReactSWFCompat.prototype.getFPDOMNode = function() {
46+
return this._swf.getFPDOMNode();
47+
};
48+
49+
ReactSWFCompat.prototype.componentDidMount = function() {
50+
var swfElement = this._createSWFElement();
51+
this._container.innerHTML = ReactDOMServer.renderToString(swfElement);
52+
ReactDOM.render(swfElement, this._container);
53+
};
54+
55+
ReactSWFCompat.prototype.componentDidUpdate = function() {
56+
var swfElement = this._createSWFElement();
57+
ReactDOM.render(swfElement, this._container);
58+
};
59+
60+
ReactSWFCompat.prototype.render = function() {
61+
var containerProps = {
62+
ref: this._containerRefCallback
63+
};
64+
65+
return React.cloneElement(this.props.container, containerProps, null);
66+
};
67+
68+
return ReactSWFCompat;
69+
}));

‎react-swf-compat.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-swf.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! react-swf v1.0.2 | @syranide | MIT license */
1+
/*! react-swf v1.0.3 | @syranide | MIT license */
22

33
(function(root, factory) {
44
if (typeof define === 'function' && define.amd) {

0 commit comments

Comments
 (0)