Merge pull request #401 from missive/nolan/test-ssr

fix: remove rAF polyfill, add SSR test

.travis.yml

@@ -6,6 +6,7 @@ script: yarn test
 before_script:
 - yarn prettier:check
 - yarn test:size
+- yarn test:ssr
 branches:
   only:
   - master

package.json

@@ -73,11 +73,12 @@
     "react:15": "npm run react:clean && npm i react@^15 react-dom@^15 react-addons-test-utils@^15 --save-dev",
     "test": "npm run clean && jest",
     "test:size": "size-limit",
+    "test:ssr": "node test/ssr.js",
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prettier": "prettier --write \"{src,scripts}/**/*.js\"",
-    "prettier:check": "prettier --check \"{src,scripts}/**/*.js\"",
+    "prettier": "prettier --write \"{src,scripts,test}/**/*.js\"",
+    "prettier:check": "prettier --check \"{src,scripts,test}/**/*.js\"",
     "prepare": "npm run build:dist"
   },
   "size-limit": [

src/components/picker/nimble-picker.js

@@ -1,5 +1,3 @@
-import '../../vendor/raf-polyfill'
-
 import React from 'react'
 import PropTypes from 'prop-types'
 
@@ -293,7 +291,7 @@ export default class NimblePicker extends React.PureComponent {
       let maxMargin = component.maxMargin
       component.forceUpdate()
 
-      window.requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
         if (!this.scroll) return
         component.memoizeSize()
         if (maxMargin == component.maxMargin) return
@@ -311,7 +309,7 @@ export default class NimblePicker extends React.PureComponent {
   handleScroll() {
     if (!this.waitingForPaint) {
       this.waitingForPaint = true
-      window.requestAnimationFrame(this.handleScrollPaint)
+      requestAnimationFrame(this.handleScrollPaint)
     }
   }
 
@@ -415,7 +413,7 @@ export default class NimblePicker extends React.PureComponent {
       this.handleSearch(null)
       this.search.clear()
 
-      window.requestAnimationFrame(scrollToComponent)
+      requestAnimationFrame(scrollToComponent)
     } else {
       scrollToComponent()
     }

src/vendor/raf-polyfill.js

@@ -1,39 +0,0 @@
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
-
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
-
-// MIT license
-
-var isWindowAvailable = typeof window !== 'undefined'
-
-isWindowAvailable &&
-  (function() {
-    var lastTime = 0
-    var vendors = ['ms', 'moz', 'webkit', 'o']
-
-    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-      window.requestAnimationFrame =
-        window[vendors[x] + 'RequestAnimationFrame']
-      window.cancelAnimationFrame =
-        window[vendors[x] + 'CancelAnimationFrame'] ||
-        window[vendors[x] + 'CancelRequestAnimationFrame']
-    }
-
-    if (!window.requestAnimationFrame)
-      window.requestAnimationFrame = function(callback, element) {
-        var currTime = new Date().getTime()
-        var timeToCall = Math.max(0, 16 - (currTime - lastTime))
-        var id = window.setTimeout(function() {
-          callback(currTime + timeToCall)
-        }, timeToCall)
-
-        lastTime = currTime + timeToCall
-        return id
-      }
-
-    if (!window.cancelAnimationFrame)
-      window.cancelAnimationFrame = function(id) {
-        clearTimeout(id)
-      }
-  })()

test/ssr.js

@@ -0,0 +1,26 @@
+// Simple smoke-test to make sure that SSR is working correctly
+const ReactDOMServer = require('react-dom/server')
+const React = require('react')
+const { Picker, NimblePicker } = require('../dist/index.js')
+const data = require('../data/all.json')
+
+function testPicker() {
+  const element = React.createElement(Picker)
+  const string = ReactDOMServer.renderToString(element)
+
+  if (typeof string !== 'string') {
+    throw new Error('expected a string')
+  }
+}
+
+function testNimblePicker() {
+  const element = React.createElement(NimblePicker, { data })
+  const string = ReactDOMServer.renderToString(element)
+
+  if (typeof string !== 'string') {
+    throw new Error('expected a string')
+  }
+}
+
+testPicker()
+testNimblePicker()