fix(*): check for window and document to allow ssr loading

Fixes gh-499

Author: timmywil

README.md

@@ -6,7 +6,7 @@
 
 ---
 
-Panzoom is a small library (~3.6kb gzipped) to add panning and zooming functionality to an element.
+Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element.
 Rather than using absolute positioning or setting width and height, Panzoom uses CSS transforms to take advantage of hardware/GPU acceleration in the browser, which means the element can be _anything_: an image, a video, an iframe, a canvas, text, WHATEVER.
 
 For common support questions, see [the FAQ](https://github.com/timmywil/panzoom#faq).

package.json

@@ -18,8 +18,9 @@
     "release": "cross-env HUSKY_SKIP_HOOKS=1 semantic-release",
     "sizeup": "echo \"gzipped size: \" && gzip-size dist/panzoom.min.js",
     "start": "webpack-dev-server",
-    "test": "npm run lint && npm run test:unit",
+    "test": "npm run lint && npm run test:unit && npm run test:node",
     "test:unit": "karma start",
+    "test:node": "npm run build && node test/test-node.js",
     "test:watch": "karma start --singleRun=false --autoWatch",
     "type-check": "tsc -p tsconfig.json --noEmit"
   },

src/css.ts

@@ -1,17 +1,28 @@
 import { CurrentValues, PanzoomOptions } from './types'
 
-const isIE = !!(document as any).documentMode
+const isIE = typeof document !== 'undefined' && !!(document as any).documentMode
+
+/**
+ * Lazy creation of a CSS style declaration
+ */
+let divStyle: CSSStyleDeclaration
+function createStyle() {
+  if (divStyle) {
+    return divStyle
+  }
+  return (divStyle = document.createElement('div').style)
+}
 
 /**
  * Proper prefixing for cross-browser compatibility
  */
-const divStyle = document.createElement('div').style
 const prefixes = ['webkit', 'moz', 'ms']
 const prefixCache: { [key: string]: string } = {}
 function getPrefixedName(name: string) {
   if (prefixCache[name]) {
     return prefixCache[name]
   }
+  const divStyle = createStyle()
   if (name in divStyle) {
     return (prefixCache[name] = name)
   }

src/events.ts

@@ -1,21 +1,22 @@
-let events: { down: string; move: string; up: string }
-if (typeof window.PointerEvent === 'function') {
-  events = {
-    down: 'pointerdown',
-    move: 'pointermove',
-    up: 'pointerup pointerleave pointercancel'
-  }
-} else if (typeof window.TouchEvent === 'function') {
-  events = {
-    down: 'touchstart',
-    move: 'touchmove',
-    up: 'touchend touchcancel'
-  }
-} else {
-  events = {
-    down: 'mousedown',
-    move: 'mousemove',
-    up: 'mouseup mouseleave'
+let events = {
+  down: 'mousedown',
+  move: 'mousemove',
+  up: 'mouseup mouseleave'
+}
+
+if (typeof window !== 'undefined') {
+  if (typeof window.PointerEvent === 'function') {
+    events = {
+      down: 'pointerdown',
+      move: 'pointermove',
+      up: 'pointerup pointerleave pointercancel'
+    }
+  } else if (typeof window.TouchEvent === 'function') {
+    events = {
+      down: 'touchstart',
+      move: 'touchmove',
+      up: 'touchend touchcancel'
+    }
   }
 }
 

src/polyfills.js

@@ -1,15 +1,17 @@
 /* eslint-disable no-var */
-// Support: IE11 only
-if (window.NodeList && !NodeList.prototype.forEach) {
-  NodeList.prototype.forEach = Array.prototype.forEach
-}
-// Support: IE11 only
-// CustomEvent is an object instead of a constructor
-if (typeof window.CustomEvent !== 'function') {
-  window.CustomEvent = function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: null }
-    var evt = document.createEvent('CustomEvent')
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-    return evt
+if (typeof window !== 'undefined') {
+  // Support: IE11 only
+  if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach
+  }
+  // Support: IE11 only
+  // CustomEvent is an object instead of a constructor
+  if (typeof window.CustomEvent !== 'function') {
+    window.CustomEvent = function CustomEvent(event, params) {
+      params = params || { bubbles: false, cancelable: false, detail: null }
+      var evt = document.createEvent('CustomEvent')
+      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
+      return evt
+    }
   }
 }

test/test-node.js

@@ -0,0 +1,7 @@
+/**
+ * Ensures panzoom can be loaded in node,
+ * where there is no window.
+ * This allows loading in SSR, but Panzoom
+ * should still only be initialized on the front-end.
+ */
+require('../dist/panzoom')