Use exenv to bail on browser-specifics

While rendering on the server, we cannot access browser specific features. Use `exenv` to check if the browser environment is available.
FormidableLabs · May 14, 2015 · e6a4cf4 · e6a4cf4
1 parent f28d28e
commit e6a4cf4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/modules/keyframes.js b/modules/keyframes.js
@@ -2,14 +2,15 @@
 
 var prefix = require('./prefix');
 
+var ExecutionEnvironment = require('exenv');
 var kebabCase = require('lodash/string/kebabCase');
 
 var msPrefix = /^ms-/;
 var animationIndex = 1;
 var animationStyleSheet = null;
 var keyframesPrefixed = null;
 
-if (document) {
+if (ExecutionEnvironment.canUseDOM) {
   animationStyleSheet = document.createElement('style');
   document.head.appendChild(animationStyleSheet);
 
@@ -34,7 +35,7 @@ var keyframes = function (keyframeRules) {
   var name = 'Animation' + animationIndex;
   animationIndex += 1;
 
-  if (!document) {
+  if (!ExecutionEnvironment.canUseDOM) {
     return name;
   }
 

diff --git a/modules/prefix.js b/modules/prefix.js
@@ -5,6 +5,7 @@
 
 'use strict';
 
+var ExecutionEnvironment = require('exenv');
 var kebabCase = require('lodash/string/kebabCase');
 
 var jsCssMap = {
@@ -16,17 +17,21 @@ var jsCssMap = {
 };
 var testProp = 'Transform';
 
-var domStyle = document.createElement('p').style;
+var domStyle;
 var prefixedPropertyCache = {};
 var prefixedValueCache = {};
 var jsVendorPrefix = '';
 var cssVendorPrefix = '';
 
-for (var js in jsCssMap) {
-  if ((js + testProp) in domStyle) {
-    jsVendorPrefix = js;
-    cssVendorPrefix = jsCssMap[js];
-    break;
+if (ExecutionEnvironment.canUseDOM) {
+  domStyle = document.createElement('p').style;
+
+  for (var js in jsCssMap) {
+    if ((js + testProp) in domStyle) {
+      jsVendorPrefix = js;
+      cssVendorPrefix = jsCssMap[js];
+      break;
+    }
   }
 }
 
@@ -104,6 +109,10 @@ var _getPrefixedValue = function (property, value) {
 // and values.
 /*eslint-disable no-console */
 var prefix = function (style, mode /* 'css' or 'js' */) {
+  if (!ExecutionEnvironment.canUseDOM) {
+    return style;
+  }
+
   mode = mode || 'js';
   var newStyle = {};
   Object.keys(style).forEach(function (property) {

diff --git a/modules/resolve-styles.js b/modules/resolve-styles.js
@@ -4,6 +4,7 @@ var MouseUpListener = require('./mouse-up-listener');
 var getState = require('./get-state');
 var prefix = require('./prefix');
 
+var ExecutionEnvironment = require('exenv');
 var React = require('react/addons');
 var clone = require('lodash/lang/clone');
 var isArray = require('lodash/lang/isArray');
@@ -56,6 +57,10 @@ var _onMediaQueryChange = function (component, query, mediaQueryList) {
 };
 
 var _resolveMediaQueryStyles = function (component, style) {
+  if (!ExecutionEnvironment.canUseDOM) {
+    return style;
+  }
+
   Object.keys(style)
   .filter(function (name) { return name[0] === '@'; })
   .map(function (query) {
@@ -235,7 +240,11 @@ var resolveStyles = function (component, renderedElement, existingKeyMap) {
     }
   });
 
-  if (style[':active'] && !component._radiumMouseUpListener) {
+  if (
+    style[':active'] &&
+    !component._radiumMouseUpListener &&
+    ExecutionEnvironment.canUseEventListeners
+  ) {
     component._radiumMouseUpListener = MouseUpListener.subscribe(
       _mouseUp.bind(null, component)
     );

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react": ">=0.12.0 <0.14.0"
   },
   "dependencies": {
+    "exenv": "^1.1.0",
     "lodash": "^3.2.0"
   },
   "devDependencies": {
@@ -50,6 +51,7 @@
       "modules/wrap.js": true
     },
     "unmockedModulePathPatterns": [
+      "exenv",
       "lodash",
       "react"
     ]