optimize build

soenkekluth · Sep 16, 2016 · 108901f · 108901f
1 parent 89da9bb
commit 108901f
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ npm-debug.log
 # Project folders to ignore
 node_modules
 TODO
+.tern-port
+*.js.map
diff --git a/dist/react-sticky-state.js b/dist/react-sticky-state.js
@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Sticky = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -105,6 +104,7 @@ var initialState = {
     height: null,
     width: null
   },
+  scrollClass: null,
   initialStyle: null,
   style: {
     top: null,
@@ -313,7 +313,7 @@ var ReactStickyState = function (_Component) {
       if (values.sticky !== this.state.sticky || values.absolute !== this.state.absolute) {
         this._updatingState = true;
         if (bounds) {
-          values = (0, _objectAssign2.default)(values, this.getBounds());
+          values = (0, _objectAssign2.default)(values, this.getBounds(), { scrollClass: this.getScrollClass() });
         }
         this.setState(values, function () {
           _this3._updatingState = false;
@@ -409,7 +409,7 @@ var ReactStickyState = function (_Component) {
           this.scroll.on('scroll:up', this.onScrollDirection);
           this.scroll.on('scroll:down', this.onScrollDirection);
           if (!this.props.scrollClass.persist) {
-            this.scroll.on('scroll:stop', this.render.bind(this));
+            this.scroll.on('scroll:stop', this.onScrollDirection);
           }
         }
       }
@@ -449,21 +449,26 @@ var ReactStickyState = function (_Component) {
       }
     }
   }, {
-    key: 'getScrollClassObj',
-    value: function getScrollClassObj(obj) {
-      obj = obj || {};
-      var direction = this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight ? 0 : this.scroll.directionY;
-      obj[this.props.scrollClass.up] = direction < 0;
-      obj[this.props.scrollClass.down] = direction > 0;
-      return obj;
+    key: 'getScrollClass',
+    value: function getScrollClass() {
+      if (this.props.scrollClass.up || this.props.scrollClass.down) {
+
+        var direction = this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight ? 0 : this.scroll.directionY;
+        var scrollClass = direction < 0 ? this.props.scrollClass.up : this.props.scrollClass.down;
+        scrollClass = direction === 0 ? null : scrollClass;
+        return scrollClass;
+      }
+      return null;
     }
   }, {
     key: 'onScrollDirection',
     value: function onScrollDirection(e) {
-      console.log(e, this.scroll.directionY);
-      if (this.state.sticky || e.type === _scrollEvents2.default.EVENT_SCROLL_STOP) {
 
-        this.refs.el.className = (0, _classnames2.default)(this.refs.el.className, this.getScrollClassObj());
+      if (this.state.sticky || e && e.type === _scrollEvents2.default.EVENT_SCROLL_STOP) {
+        this.setState({
+          scrollClass: this.getScrollClass()
+        });
+        // this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj());
       }
     }
   }, {
@@ -539,7 +544,6 @@ var ReactStickyState = function (_Component) {
       var _props = this.props;
       var stickyWrapperClass = _props.stickyWrapperClass;
       var stickyClass = _props.stickyClass;
-      var scrollClass = _props.scrollClass;
       var fixedClass = _props.fixedClass;
       var stateClass = _props.stateClass;
       var disabledClass = _props.disabledClass;
@@ -548,11 +552,11 @@ var ReactStickyState = function (_Component) {
       var debug = _props.debug;
       var tagName = _props.tagName;
 
-      var props = _objectWithoutProperties(_props, ['stickyWrapperClass', 'stickyClass', 'scrollClass', 'fixedClass', 'stateClass', 'disabledClass', 'absoluteClass', 'disabled', 'debug', 'tagName']);
+      var props = _objectWithoutProperties(_props, ['stickyWrapperClass', 'stickyClass', 'fixedClass', 'stateClass', 'disabledClass', 'absoluteClass', 'disabled', 'debug', 'tagName']);
 
       var style;
       var refName = 'el';
-      var className = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, stickyClass, !this.state.disabled), _defineProperty(_classNames, disabledClass, this.state.disabled), _classNames), _defineProperty({}, fixedClass, !Can.sticky), _defineProperty({}, stateClass, this.state.sticky && !this.state.disabled), _defineProperty({}, scrollClass.up, this.state.sticky && this.scroll.directionY > 0), _defineProperty({}, scrollClass.down, this.state.sticky && this.scroll.directionY > 0), _defineProperty({}, absoluteClass, this.state.absolute));
+      var className = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, stickyClass, !this.state.disabled), _defineProperty(_classNames, disabledClass, this.state.disabled), _classNames), _defineProperty({}, fixedClass, !Can.sticky), _defineProperty({}, stateClass, this.state.sticky && !this.state.disabled), _defineProperty({}, absoluteClass, this.state.absolute), this.state.scrollClass);
 
       if (!Can.sticky) {
         if (this.state.absolute) {
@@ -578,9 +582,7 @@ var ReactStickyState = function (_Component) {
             key: this._key,
             style: style,
             className: className }, props),
-          ' ',
-          this.props.children,
-          ' '
+          this.props.children
         );
       }
 
@@ -645,7 +647,6 @@ ReactStickyState.defaultProps = {
   }
 };
 exports.default = ReactStickyState;
-exports.Sticky = ReactStickyState;
 
 
 var _canSticky = null;
@@ -688,4 +689,6 @@ var Can = function () {
   }]);
 
   return Can;
-}();
+}();
+
+module.exports = exports['default'];
diff --git a/dist/react-sticky-state.min.js b/dist/react-sticky-state.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -26,7 +26,9 @@
 
   <script type="text/babel">
 
-    const {Sticky} = ReactStickyState;
+    var Sticky = window.ReactStickyState;
+
+
 
 
     const scrollClass = {

diff --git a/package.json b/package.json
@@ -6,12 +6,14 @@
   "jsnext:main": "src/react-sticky-state.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-debug": "browserify -t [ babelify --presets [ es2015 react stage-0] --plugins [ transform-class-properties ] ] -t browserify-shim ./src/react-sticky-state.js --standalone ReactStickyState -o dist/react-sticky-state.min.js",
-    "build": "npm run build-debug && uglifyjs dist/react-sticky-state.js -o dist/react-sticky-state.min.js",
-    "dist": "npm run babel && npm run build",
-    "babel": "babel ./src -d ./dist",
-    "start": "npm run build-debug && concurrently --kill-others \"watchify -d -t [ babelify --presets [ es2015 react stage-0] --plugins [ transform-class-properties ] ] -t browserify-shim ./src/react-sticky-state.js --s ReactStickyState -o dist/react-sticky-state.min.js -v\" \"npm run server\"",
-    "server": "browser-sync start --server --no-ghost-mode --directory --files 'examples/**/**, dist/*.js' --startPath examples/index.html"
+    "build-js": "browserify --fast -e src/react-sticky-state.js -d --standalone ReactStickyState -t babelify -t browserify-shim | derequire | exorcist dist/react-sticky-state.min.js.map > dist/react-sticky-state.min.js",
+    "dist-js": "BABEL_ENV=production NODE_ENV=production browserify -e src/react-sticky-state.js --standalone ReactStickyState -t babelify -t browserify-shim | derequire > dist/react-sticky-state.min.js",
+    "dist-js-min": "uglifyjs -cmv dist/react-sticky-state.min.js -o dist/react-sticky-state.min.js",
+    "dist": "cp src/sticky-state.css dist/ && npm run dist-js && npm run dist-js-min && npm run build-lib",
+    "start": "run-p watch-js server",
+    "build-lib": "BABEL_ENV=production babel src -d dist",
+    "watch-js": "watchify -d --poll=100 --fast --standalone ReactStickyState -e src/react-sticky-state.js -t babelify -t browserify-shim -o 'exorcist dist/react-sticky-state.min.js.map > dist/react-sticky-state.min.js' -v",
+    "server": "browser-sync start --no-ghost-mode --server --directory --files 'examples/**/**, dist/*.js' --startPath examples/index.html"
   },
   "repository": {
     "type": "git",
@@ -47,7 +49,9 @@
     "browser-sync": "2.16.0",
     "browserify": "13.1.0",
     "browserify-shim": "3.8.12",
-    "concurrently": "2.2.0",
+    "derequire": "2.0.3",
+    "exorcist": "0.4.0",
+    "npm-run-all": "3.1.0",
     "react": "15.3.1",
     "uglifyjs": "2.4.10",
     "watchify": "3.7.0"

diff --git a/src/.tern-port b/src/.tern-port
@@ -1 +1 @@
-59783
+64013
diff --git a/src/react-sticky-state.js b/src/react-sticky-state.js
@@ -76,6 +76,7 @@ const initialState = {
     height: null,
     width: null
   },
+  scrollClass: null,
   initialStyle: null,
   style: {
     top: null,
@@ -296,7 +297,7 @@ export default class ReactStickyState extends Component {
     if (values.sticky !== this.state.sticky || values.absolute !== this.state.absolute) {
       this._updatingState = true;
       if (bounds) {
-        values = assign(values, this.getBounds());
+        values = assign(values, this.getBounds(), {scrollClass : this.getScrollClass()});
       }
       this.setState(values, () => {
         this._updatingState = false;
@@ -383,7 +384,7 @@ export default class ReactStickyState extends Component {
         this.scroll.on('scroll:up', this.onScrollDirection);
         this.scroll.on('scroll:down', this.onScrollDirection);
         if (!this.props.scrollClass.persist) {
-          this.scroll.on('scroll:stop', ::this.render);
+          this.scroll.on('scroll:stop', this.onScrollDirection);
         }
       }
     }
@@ -421,22 +422,24 @@ export default class ReactStickyState extends Component {
   }
 
 
-  getScrollClassObj(obj) {
-    obj = obj || {};
-    var direction = (this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight) ? 0 : this.scroll.directionY;
-    obj[this.props.scrollClass.up] = direction < 0;
-    obj[this.props.scrollClass.down] = direction > 0;
-    return obj;
-  }
+  getScrollClass(){
+    if(this.props.scrollClass.up || this.props.scrollClass.down){
 
+      var direction = (this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight) ? 0 : this.scroll.directionY;
+      var scrollClass = direction < 0 ? this.props.scrollClass.up : this.props.scrollClass.down;
+      scrollClass = direction === 0 ? null : scrollClass;
+      return scrollClass;
+    }
+    return null;
+  }
 
   onScrollDirection(e) {
-    console.log(e, this.scroll.directionY)
-    if (this.state.sticky || e.type === Scroll.EVENT_SCROLL_STOP) {
-
-
-        this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj());
 
+    if (this.state.sticky ||  e && e.type === Scroll.EVENT_SCROLL_STOP) {
+      this.setState({
+        scrollClass : this.getScrollClass()
+      })
+        // this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj());
     }
   }
 
@@ -496,17 +499,15 @@ export default class ReactStickyState extends Component {
   render() {
     let element = React.Children.only(this.props.children);
 
-    const { stickyWrapperClass, stickyClass, scrollClass, fixedClass, stateClass, disabledClass, absoluteClass, disabled, debug, tagName, ...props } = this.props;
+    const { stickyWrapperClass, stickyClass, fixedClass, stateClass, disabledClass, absoluteClass, disabled, debug, tagName, ...props } = this.props;
 
     var style;
     const refName = 'el';
     const className = classNames(
       {[stickyClass]: !this.state.disabled, [disabledClass]: this.state.disabled },
       {[fixedClass]: !Can.sticky },
       {[stateClass]: this.state.sticky && !this.state.disabled },
-      {[scrollClass.up]: this.state.sticky && this.scroll.directionY > 0 },
-      {[scrollClass.down]: this.state.sticky && this.scroll.directionY > 0 },
-      {[absoluteClass]: this.state.absolute });
+      {[absoluteClass]: this.state.absolute }, this.state.scrollClass);
 
 
 
@@ -528,10 +529,12 @@ export default class ReactStickyState extends Component {
       element = React.cloneElement(element, { ref: refName, key: this._key, style: style, className: classNames(element.props.className, className) });
     } else {
       const Comp = this.props.tagName;
-      element = < Comp ref = { refName }
+      element = <Comp ref = { refName }
       key = { this._key }
       style = { style }
-      className = { className } {...props } > { this.props.children } < /Comp>;
+      className = { className } {...props }>
+        { this.props.children }
+      </Comp>;
     }
 
     if (Can.sticky) {
@@ -550,17 +553,14 @@ export default class ReactStickyState extends Component {
     if (this.state.absolute) {
       style.position = 'relative';
     }
-    return ( < div ref = 'wrapper'
+    return ( <div ref = 'wrapper'
       className = { stickyWrapperClass }
-      style = { style } > { element } < /div>
+      style = { style }> { element } </div>
     );
   }
 }
 
 
-export { ReactStickyState as Sticky };
-
-
 var _canSticky = null;
 
 class Can {

diff --git a/sticky.css b/sticky.css
diff --git a/test/index.js b/test/index.js
@@ -0,0 +1,3 @@
+var hans = require('../dist/react-sticky-state').Sticky;
+
+console.log(hans);