Finalized API, added shouldComponentUpdate test

Author: syranide

README.md

@@ -1,8 +1,8 @@
-# ReactSWF 0.6.0
+# ReactSWF 0.7.0
 
 Shockwave Flash Player component for [React](https://github.com/facebook/react)
 
-Easy installation with `react-swf.min.js` or `npm install react-swf`.
+Easy installation with `react-swf.min.js`, `npm install react-swf` or `bower install --save react-swf`.
 
 * Browser bundle has optional CommonJS/AMD module loader support
 * Only ~1KB gzipped
@@ -37,29 +37,33 @@ ReactSWF({
 #### Flash Player detection
 
 ```
-if (utils.isFPVersionSupported('10.0')) {
+if (ReactSWF.isFPVersionSupported('10.0')) {
   // success, go ahead and render the ReactSWF-component
 } else {
   // not supported, use fallback or direct to Flash Player installer
-  console.log('Flash Player ' + utils.getFPVersion()) + ' is not supported');
+  console.log('Flash Player ' + ReactSWF.getFPVersion()) + ' is not supported');
 }
 ```
 
 ## Instructions
 
-#### NPM-package
-
-Simply install it with `npm install react-swf` and require it with `var ReactSWF = require('react-swf')`, utility functions are available through `require('react-swf/utils')`.
-
 #### Browser bundle (standalone)
 
 You are using `react-swf.min.js`
 
-Simply include it with `<script src="react-swf.min.js"></script>` and it is available through the global `ReactSWF`, utility functions are available through `ReactSWF.utils.*`.
+Simply include it with `<script src="react-swf.min.js"></script>`, it will be available through the global `ReactSWF`.
 
 #### Browser bundle (CommonJS/AMD)
 
-Simply include it with `<script src="react-swf.min.js"></script>` if necessary and require it with `var ReactSWF = require('react-swf')`, utility functions are available through `require('react-swf').utils.*`.
+Simply include it with `<script src="react-swf.min.js"></script>`, require it with `var ReactSWF = require('react-swf')`.
+
+#### Node, NPM-package
+
+Simply install it with `npm install react-swf`, require it with `var ReactSWF = require('react-swf')`.
+
+#### Bower-package
+
+Simply install it with `bower install --save react-swf`, use your preferred method above.
 
 ## Documentation
 
@@ -68,29 +72,26 @@ Simply include it with `<script src="react-swf.min.js"></script>` if necessary a
 Detailed explanation of each attribute is found on [Flash OBJECT and EMBED tag attributes](http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html).
 
 ```
-require('react-swf')
-
-  src {string} [required]
-  width {number}
-  height {number}
-  
-  wmode {enum}
-  flashVars {object|string}
-  
-  base {string}
-  menu {boolean}
-  play {boolean}
-  loop {boolean}
-  quality {enum}
-  scale {enum}
-  align {enum}
-  salign {enum}
-  bgColor {color}
-  fullScreenAspectRatio {enum}
-  
-  allowFullScreen {boolean}
-  allowScriptAccess {boolean}
-    
+src {string} [required]
+width {number}
+height {number}
+
+wmode {enum}
+flashVars {object|string}
+
+base {string}
+menu {boolean}
+play {boolean}
+loop {boolean}
+quality {enum}
+scale {enum}
+align {enum}
+salign {enum}
+bgColor {color}
+fullScreenAspectRatio {enum}
+
+allowFullScreen {boolean}
+allowScriptAccess {boolean}
 ```
 
 ##### wmode = transparent
@@ -109,18 +110,15 @@ Prevents untrusted Flash-content from accessing sensitive information through br
 
 #### Utility functions
 
-These functions are available through `ReactSWF.utils.*`, `require('react-swf').utils.*` or `require('react-swf/utils').*`, read the instructions at the top if you are unsure which is right for you.
+These functions are available statically through `ReactSWF.*`.
 
 ```
-require('react-swf/utils')
-
-  getFPVersion()
-    Detect installed Flash Player version. Result is cached.
-    {?string} return 'X.Y.Z'-version, or null.
-  
-  isFPVersionSupported(version)
-    Detect if installed Flash Player version meets requirements.
-    {string} version 'X.Y.Z' or 'X.Y' or 'X'-version.
-    {boolean} return True if version is supported.
-
+getFPVersion()
+  Detect installed Flash Player version. Result is cached.
+  {?string} return 'X.Y.Z'-version, or null.
+
+isFPVersionSupported(version)
+  Detect if installed Flash Player version meets requirements.
+  {string} version 'X.Y.Z' or 'X.Y' or 'X'-version.
+  {boolean} return True if version is supported.
 ```

build/react-swf.js

@@ -40,6 +40,8 @@
   }
 }(this, function (React) {
 
+  var cachedFPVersion;
+
   var encodeFlashKeyValueRegex = /[\r%&+]/g;
   var encodeFlashKeyValueLookup = {
     '\r': '%0D', '%': '%25', '&': '%26', '+': '%2B', '=': '%3D'
@@ -91,6 +93,9 @@
         id: nextUniqueObjectSwfId++
       };
     },
+    shouldComponentUpdate: function(nextProps) {
+      return this.props.src !== this.props.nextProps;
+    },
     componentWillUnmount: function() {
       // IE8: leaks memory if all ExternalInterface-callbacks have not been
       // removed. Only IE implements readyState, hasOwnProperty does not exist
@@ -164,7 +169,7 @@
   });
 
 
-  var cachedFPVersion;
+  
 
   /**
    * Detect installed Flash Player version. Result is cached.
@@ -232,10 +237,8 @@
   }
 
 
-  ReactSWF.utils = {
-    getFPVersion: getFPVersion,
-    isFPVersionSupported: isFPVersionSupported
-  };
+  ReactSWF.getFPVersion = getFPVersion;
+  ReactSWF.isFPVersionSupported = isFPVersionSupported;
 
 
   return ReactSWF;

build/react-swf.min.js

@@ -22,8 +22,7 @@
 'use strict';
 
 
-var React = require('react');
-
+var cachedFPVersion;
 
 var encodeFlashKeyValueRegex = /[\r%&+]/g;
 var encodeFlashKeyValueLookup = {
@@ -76,6 +75,9 @@ var ReactSWF = React.createClass({
       id: nextUniqueObjectSwfId++
     };
   },
+  shouldComponentUpdate: function(nextProps) {
+    return this.props.src !== this.props.nextProps;
+  },
   componentWillUnmount: function() {
     // IE8: leaks memory if all ExternalInterface-callbacks have not been
     // removed. Only IE implements readyState, hasOwnProperty does not exist
@@ -149,4 +151,74 @@ var ReactSWF = React.createClass({
 });
 
 
+/**
+ * Detect installed Flash Player version. Result is cached.
+ *
+ * @return {?string} 'X.Y.Z'-version, or null.
+ */
+function getFPVersion() {
+  if (cachedFPVersion === undefined) {
+    cachedFPVersion = null;
+    
+    if (navigator.plugins) {
+      var plugin = navigator.plugins['Shockwave Flash'];
+      if (plugin) {
+        var mimeType = navigator.mimeTypes['application/x-shockwave-flash'];
+        if (mimeType && mimeType.enabledPlugin) {
+          var matches = plugin.description
+            .match(/^Shockwave Flash (\d+)(?:\.(\d+))?(?: r(\d+))?/);
+          
+          cachedFPVersion =
+            matches[1] + '.' + (matches[2] || 0) + '.' + (matches[3] || 0);
+        }
+      }
+    }
+    if (window.ActiveXObject) {
+      try {
+        var axObject = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
+        if (axObject) {
+          cachedFPVersion = axObject.GetVariable('$version')
+            .match(/^WIN (\d+),(\d+),(\d+)/).slice(1).join('.');
+        }
+      }
+      catch (e) {}
+    }
+  }
+  
+  return cachedFPVersion;
+}
+
+/**
+ * Detect if installed Flash Player version meets requirements.
+ *
+ * @param {string} version 'X.Y.Z' or 'X.Y' or 'X'-version.
+ * @return {boolean} True if version is supported.
+ */
+function isFPVersionSupported(version) {
+  var supportedVersion = getFPVersion();
+  
+  if (supportedVersion === null) {
+    return false;
+  }
+  
+  var supportedVersionArray = supportedVersion.split('.');
+  var requiredVersionArray = version.split('.');
+  
+  for (var i = 0; i < requiredVersionArray.length; i++) {
+    if (+supportedVersionArray[i] > +requiredVersionArray[i]) {
+      return true;
+    }
+    if (+supportedVersionArray[i] < +requiredVersionArray[i]) {
+      return false;
+    }
+  }
+  
+  return true;
+}
+
+
+ReactSWF.getFPVersion = getFPVersion;
+ReactSWF.isFPVersionSupported = isFPVersionSupported;
+
+
 modules.exports = ReactSWF;

npm-react-swf/ReactSWF.js

@@ -1,7 +1,7 @@
 {
   "name": "react-swf",
   "title": "ReactSWF",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Andreas Svensson <[email protected]>",
   "description": "Shockwave Flash Player component for React",
   "homepage": "https://github.com/syranide/react-swf",

npm-react-swf/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-swf",
   "title": "ReactSWF",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "author": "Andreas Svensson <[email protected]>",
   "description": "Shockwave Flash Player component for React",
   "homepage": "https://github.com/syranide/react-swf",
@@ -37,5 +37,5 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "main": "src/react-swf.js"
+  "main": "src/ReactSWF.js"
 }