scrollable - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

package.json

 {
   "name": "scrollable",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "Components for layer composition and scrolling with React.js",
   "main": "src/scrollable.js",
   "peerDependencies": {
-    "react": "~0.13.0"
+    "react": "~0.14.3"
   },
@@ -19,4 +19,11 @@ "files": [
   },
+  "babel": {
+    "presets": [
+      "react"
+    ]
+  },
   "dependencies": {},
   "devDependencies": {
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
     "beefy": "^2.1.3",
@@ -40,12 +47,12 @@ "browserify": "^10.2.4",
     "phantomjs-polyfill": "0.0.1",
-    "react": "^0.13.0",
-    "react-hammerjs": "^0.2.2",
-    "react-tools": ">=0.13.0",
-    "reactify": "^1.0.0",
+    "react": "^0.14.3",
+    "react-addons-test-utils": "^0.14.7",
+    "react-dom": "~0.14.6",
+    "react-hammerjs": "^0.4.5",
     "watchify": "^3.2.3"
   },
   "scripts": {
-    "build": "browserify src/scrollable.js -o dist/scrollable.js --transform reactify --exclude react --bare",
-    "build-examples": "browserify examples/main.js -o examples/build/bundle.js --transform reactify --insert-global-vars React",
-    "dev": "beefy examples/main.js:examples/build/bundle.js 8080 --live -- --transform reactify --insert-global-vars React --debug --verbose",
+    "build": "browserify src/scrollable.js -o dist/scrollable.js --transform babelify --exclude react --exclude react-dom --bare --insert-global-vars React,ReactDOM",
+    "build-examples": "browserify examples/main.js -o examples/build/bundle.js --transform babelify --insert-global-vars React,ReactDOM",
+    "dev": "beefy examples/main.js:examples/build/bundle.js 8080 --live -- --transform babelify --insert-global-vars React,ReactDOM --debug --verbose",
     "test": "karma start karma.headless.js && istanbul report && echo 'Details at ./coverage/index.html'"
@@ -52,0 +59,0 @@ },

src/__tests__/rect-cache-test.js

@@ -7,4 +7,5 @@ /* Copyright 2015, Yahoo Inc.
 var RectCache = require('../rect-cache');
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TestUtils = require('react-addons-test-utils');
 
@@ -39,3 +40,3 @@
     it("updated rect after mounting", function () {
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer />,
@@ -50,3 +51,3 @@ div
     it("updated rect after DOM changes", function () {
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer />,
@@ -64,3 +65,3 @@ div
       var resizeCallback = jasmine.createSpy();
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer onResize={resizeCallback} />,
@@ -81,3 +82,3 @@ div
       var resizeCallback = jasmine.createSpy();
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer onResize={resizeCallback} />,
@@ -94,3 +95,3 @@ div
 
-      var container = sut.refs.imgHere.getDOMNode();
+      var container = sut.refs.imgHere;
       var img = document.createElement('img');
@@ -109,7 +110,7 @@ img.addEventListener('load', function() {
     it("Inserting text nodes", function () {
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer />,
         div
       );
-      sut.getDOMNode().appendChild(document.createTextNode(' text test node '));
+      ReactDOM.findDOMNode(sut).appendChild(document.createTextNode(' text test node '));
 
@@ -125,3 +126,3 @@ expect(true, "make sure inserting the element won't throw");
       // requests accepted =)
-      sut = React.render(
+      sut = ReactDOM.render(
         <RectCacheConsumer viewport onResize={resizeCallback} />,
@@ -128,0 +129,0 @@ div

src/__tests__/scroll-item-test.js

@@ -6,6 +6,8 @@ /* Copyright 2015, Yahoo Inc.
 
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TestUtils = require('react-addons-test-utils');
 var ScrollItem = require('../scroll-item');
 var StyleHelper = require('../style-helper');
+var ReactDOMServer = require('react-dom/server');
 
@@ -22,11 +24,11 @@ describe('<ScrollItem>', function() {
     it("required props", function () {
-      spyOn(console, 'warn');
+      spyOn(console, 'error');
       TestUtils.renderIntoDocument(
         <ScrollItem serverStyles={true} />
       );
-      expect(console.warn).toHaveBeenCalled();
-      expect(console.warn.calls.count()).toEqual(3);
-      expect(console.warn.calls.argsFor(0)).toMatch('was not specified');
-      expect(console.warn.calls.argsFor(1)).toMatch('was not specified');
-      expect(console.warn.calls.argsFor(2)).toMatch('expected `function`');
+      expect(console.error).toHaveBeenCalled();
+      expect(console.error.calls.count()).toEqual(3);
+      expect(console.error.calls.argsFor(0)).toMatch('was not specified');
+      expect(console.error.calls.argsFor(1)).toMatch('was not specified');
+      expect(console.error.calls.argsFor(2)).toMatch('expected `function`');
     });
@@ -43,21 +45,5 @@
 
-    it("warns about owner and parent context", function () {
-      // TODO: remove this when React 0.14 arrives
-      spyOn(console, 'warn');
-      var Scroller = MockScroller('without console spy');
-      TestUtils.renderIntoDocument(
-        <Scroller>
-          <ScrollItem name="foo" scrollHandler={function(){}}>
-            foo
-          </ScrollItem>
-        </Scroller>
-      );
-      expect(console.warn).toHaveBeenCalled();
-      expect(console.warn.calls.count()).toEqual(1);
-      expect(console.warn.calls.mostRecent().args[0]).toMatch('owner-based and parent-based');
-    });
-
     it("implements RectCache mixin", function () {
       var Scroller = MockScroller();
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -82,3 +68,3 @@ <style>{".scrollable-item {float:left;} /* this will force it not to have width: auto; */ "}</style>
       var Scroller = MockScroller();
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -96,3 +82,4 @@ <ScrollItem name="foo" scrollHandler={function(){}} serverStyles={function(){
       var sut = TestUtils.findRenderedDOMComponentWithClass(wrapper, 'scrollable-item');
-      expect(sut.props.style.height).toBe('50px');
+      var sutDOM = ReactDOM.findDOMNode(sut);
+      expect(sutDOM.style.height).toBe('50px');
     });
@@ -102,3 +89,3 @@
       var Scroller = MockScroller();
-      var finalString = React.renderToString(
+      var finalString = ReactDOMServer.renderToString(
         <Scroller>
@@ -121,3 +108,3 @@ <ScrollItem name="foo" scrollHandler={function(){}} serverStyles={function(){
       function go() {
-        React.render(
+        ReactDOM.render(
           <Scroller>
@@ -139,3 +126,3 @@ <ScrollItem name="foo" scrollHandler={function(){}} serverStyles={function(){
       function go() {
-        React.render(
+        ReactDOM.render(
           <Scroller>
@@ -154,3 +141,3 @@ <ScrollItem name="foo" scrollHandler={function(){}} serverStyles={true}>
       var Scroller = MockScroller();
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -170,9 +157,9 @@ <ScrollItem name="foo" scrollHandler={function(){
       var sut = TestUtils.findRenderedDOMComponentWithClass(wrapper, 'scrollable-item');
-      var node = sut.getDOMNode();
+      var sutDOM = ReactDOM.findDOMNode(sut);
       var clientStyles = StyleHelper.scrollStyles({y:10});
       setTimeout(function(){
         for(var prop in clientStyles) {
-          expect(node.style[prop]).toEqual(clientStyles[prop]);
+          expect(sutDOM.style[prop]).toEqual(clientStyles[prop]);
         }
-        expect(node.getAttribute('style')).toEqual(node.style.cssText); // this fails if there is prefixes leftovers
+        expect(sutDOM.getAttribute('style')).toEqual(sutDOM.style.cssText); // this fails if there is prefixes leftovers
         done();
@@ -184,3 +171,3 @@ },1);
       var Scroller = MockScroller();
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -203,9 +190,8 @@ <ScrollItem name="foo" scrollHandler={function(){
       var sut = TestUtils.findRenderedDOMComponentWithClass(wrapper, 'scrollable-item');
-      var node = sut.getDOMNode();
       var clientStyles = StyleHelper.scrollStyles({y:10});
       setTimeout(function(){
         for(var prop in clientStyles) {
-          expect(node.style[prop]).toEqual(clientStyles[prop]);
+          expect(sut.style[prop]).toEqual(clientStyles[prop]);
         }
-        expect(node.style.height).toEqual('10px');
+        expect(sut.style.height).toEqual('10px');
         done();
@@ -233,3 +219,3 @@ },1);
 
-      var consumer = React.render(
+      var consumer = ReactDOM.render(
         <SuposedConsumer />,
@@ -240,3 +226,3 @@ div
       var sut = TestUtils.findRenderedComponentWithType(consumer, ScrollItem);
-      var node = sut.getDOMNode();
+      var sutDOM = ReactDOM.findDOMNode(sut);
 
@@ -249,5 +235,5 @@ // update state
           for(var prop in clientStyles) {
-            expect(node.style[prop]).toEqual(clientStyles[prop]);
+            expect(sutDOM.style[prop]).toEqual(clientStyles[prop]);
           }
-          expect(node.getAttribute('style')).toEqual(node.style.cssText);
+          expect(sutDOM.getAttribute('style')).toEqual(sutDOM.style.cssText);
           done();
@@ -267,3 +253,3 @@ done();
       var Scroller = MockScroller();
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -297,3 +283,3 @@ <ScrollItem name="foo" scrollHandler={function(){}}>
 
-      var consumer = React.render(
+      var consumer = ReactDOM.render(
         <SuposedConsumer />,
@@ -327,3 +313,3 @@ div
 
-      var consumer = React.render(
+      var consumer = ReactDOM.render(
         <SuposedConsumer />,
@@ -333,3 +319,4 @@ div
       var sut = TestUtils.findRenderedComponentWithType(consumer, ScrollItem);
-      expect(sut._node).toEqual(sut.getDOMNode());
+      var sutDOM = ReactDOM.findDOMNode(sut);
+      expect(sut._node).toEqual(sutDOM);
 
@@ -356,3 +343,3 @@ consumer.setState({remove: true});
 
-      var consumer = React.render(
+      var consumer = ReactDOM.render(
         <SuposedConsumer />,
@@ -386,3 +373,3 @@ div
 
-      var consumer = React.render(
+      var consumer = ReactDOM.render(
         <SuposedConsumer />,
@@ -389,0 +376,0 @@ div

src/__tests__/scroller-test.js

@@ -6,4 +6,5 @@ /* Copyright 2015, Yahoo Inc.
 
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TestUtils = require('react-addons-test-utils');
 var StyleHelper = require('../style-helper');
@@ -24,15 +25,15 @@ var Scroller = require('../scroller');
     it("required props", function () {
-      spyOn(console, 'warn');
+      spyOn(console, 'error');
       TestUtils.renderIntoDocument(
         <Scroller serverStyles={true} />
       );
-      expect(console.warn).toHaveBeenCalled();
-      expect(console.warn.calls.count()).toEqual(3);
-      expect(console.warn.calls.argsFor(0)).toMatch('was not specified');
-      expect(console.warn.calls.argsFor(1)).toMatch('was not specified');
-      expect(console.warn.calls.argsFor(2)).toMatch('was not specified');
+      expect(console.error).toHaveBeenCalled();
+      expect(console.error.calls.count()).toEqual(3);
+      expect(console.error.calls.argsFor(0)).toMatch('was not specified');
+      expect(console.error.calls.argsFor(1)).toMatch('was not specified');
+      expect(console.error.calls.argsFor(2)).toMatch('was not specified');
     });
 
     it("implements RectCache mixin", function () {
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller>
@@ -50,3 +51,3 @@ <style>{".scrollable {float:left;} /* this will force it not to have width: auto; */ "}</style>
     it("_resetScroll after mounting nextTick", function (done) {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -60,3 +61,3 @@ </Scroller>,
     it("_resetScroll after mounting nextTick (cover edge case)", function (done) {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -86,3 +87,3 @@ </Scroller>,
       });
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <SuposedConsumer />,
@@ -92,3 +93,3 @@ div
       var scroller = TestUtils.findRenderedComponentWithType(wrapper, Scroller);
-      var node = scroller.getDOMNode();
+      var node = ReactDOM.findDOMNode(scroller);
       setTimeout(function() {
@@ -107,3 +108,3 @@ expect(node.scrollable).toBe(scroller);
     it("register and unregister items", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -126,3 +127,3 @@ </Scroller>,
     it("warnings about bad register and unregister", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -157,3 +158,3 @@ </Scroller>,
     it("Set style props based on item scrollHandler", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -180,3 +181,3 @@ </Scroller>,
     it("Schedule styles when not ready to render", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -205,3 +206,3 @@ </Scroller>,
     it("Uses StyleHelper", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller>
@@ -234,3 +235,3 @@ </Scroller>,
     it("self, items and scroller params passed properly", function () {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller thatCustomProp="13px">
@@ -276,3 +277,3 @@ </Scroller>,
     it("ScrollTo, enable and disable APIs", function (done) {
-      var sut = React.render(
+      var sut = ReactDOM.render(
         <Scroller getContentSize={function(){return {width:20, height:500};}} style={{height:'200px', width:'20px'}}>
@@ -312,3 +313,3 @@ </Scroller>,
     it("Should merge className, pass other props", function  () {
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller className="foo" data-foo="bar">
@@ -320,8 +321,9 @@ </Scroller>,
       var sut = TestUtils.findRenderedDOMComponentWithClass(wrapper, 'scrollable');
-      expect(sut.props.className).toBe('scrollable foo');
-      expect(sut.props['data-foo']).toBe('bar');
+      var sutDOM = ReactDOM.findDOMNode(sut);
+      expect(sutDOM.className).toBe('scrollable foo');
+      expect(sutDOM.getAttribute('data-foo')).toBe('bar');
     });
 
     it("merges viewport class", function  () {
-      var wrapper = React.render(
+      var wrapper = ReactDOM.render(
         <Scroller viewport>
@@ -333,3 +335,4 @@ </Scroller>,
       var sut = TestUtils.findRenderedDOMComponentWithClass(wrapper, 'scrollable-viewport');
-      expect(sut.props.className).toBe('scrollable-viewport');
+      var sutDOM = ReactDOM.findDOMNode(sut);
+      expect(sutDOM.className).toBe('scrollable-viewport');
     });
@@ -336,0 +339,0 @@

src/rect-cache.js

@@ -82,2 +82,3 @@ /* exported RectCache */
 
+var ReactDOM = window.ReactDOM || require('react-dom');
 var initialRect = { left : 0, right : 0, top : 0, height : 0, bottom : 0, width : 0 };
@@ -109,3 +110,3 @@
   componentDidMount: function(){
-    var node = this.getDOMNode();
+    var node = ReactDOM.findDOMNode(this);
     var update = this._updateRectCache;
@@ -112,0 +113,0 @@ this._node = node;

src/scroll-item.js

@@ -7,2 +7,3 @@ /* Copyright 2015, Yahoo Inc.
 var React = (typeof window !== 'undefined' && window.React) || require('react');
+var ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) || require('react-dom');
 var RectCache = require('./rect-cache');
@@ -26,4 +27,3 @@ var StyleHelper = require('./style-helper');
   onResize: function() {
-    var parentContext = this._reactInternalInstance._context;
-    var parent = parentContext.scrollingParent;
+    var parent = this.context.scrollingParent;
     parent && parent.onResize && parent.onResize();
@@ -33,4 +33,3 @@ },
   componentWillMount: function () {
-    var parentContext = this._reactInternalInstance._context;
-    var parent = parentContext.scrollingParent;
+    var parent = this.context.scrollingParent;
     if (parent) {
@@ -44,3 +43,3 @@ this._scrollingParent = parent;
     var self = this;
-    self._node = self.getDOMNode();
+    self._node = ReactDOM.findDOMNode(self);
     self.props.serverStyles && cleanupStyles(self);
@@ -56,4 +55,3 @@ self._pendingOperation && self._pendingOperation();
     this._node = null;
-    var parentContext = this._reactInternalInstance._context;
-    var parent = parentContext.scrollingParent;
+    var parent = this.context.scrollingParent;
     parent && parent._unRegisterItem(this);
@@ -60,0 +58,0 @@ },

src/scroller.js

@@ -8,2 +8,3 @@ /* Copyright 2015, Yahoo Inc.
 var React = (inBrowser && window.React) || require('react');
+var ReactDOM = (inBrowser && window.ReactDOM) || require('react-dom');
 var StyleHelper = require('./style-helper');
@@ -309,3 +310,3 @@ var prefixed = require('./prefixed');
     var self = this;
-    var container = self.getDOMNode();
+    var container = ReactDOM.findDOMNode(self);
     container.scrollable = this;
@@ -337,3 +338,3 @@
   componentWillUnmount: function() {
-    delete this.getDOMNode().scrollable;
+    delete ReactDOM.findDOMNode(this).scrollable;
   },
@@ -340,0 +341,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1940364

increased by0.01%

Worsened metrics

Dev dependency count

25

increased by8.7%

Lines of code

3055

decreased by-0.26%

No dependency changes