Various performance improvements

Various performance improvements

Author: compulim

.babelrc

@@ -1,38 +1,37 @@
 language: node_js
+
 node_js:
-  - "10"
-before_script:
-  - npm run bootstrap
-  - npm run build
-before_deploy:
-  - npx version-from-git --travis --no-git-tag-version
-  - cp -r packages/component/lib .
+- "10"
+
+before_install:
+- npm install
+- sudo apt-get install jq
+- npx version-from-git --travis --no-git-tag-version
+- git checkout -b temp-ci
+- lerna version --force-publish --no-git-tag-version --no-push --yes `cat package.json | jq -r .version`
+
+install:
+- npm run bootstrap
+- npm run build
+
 deploy:
-  - provider: npm
-    api_key:
-      secure: "TmSsQrb7ujvlLd6K04nW7BSaKbFu2QtuEGQguhpYQ2hKDhZrfWizFP7De3Zdwvg+CVWDjTPMXkdrhOd7gpPwKOCoGTl/k6oVLpGUu640GbZmTqik22MIGdS8gb9etFpzRNQiJuKYVzMZtDeClA4GvhGra3L5JZKJthPOdLVX7GNsRqtjhrLMsV/Zdpl4YfPfwQqYP9Nvm+gdwJni9qFTdCdn558kOitAde1/cuG2awBmvDKd//2vI0RE/DNrMZRBOWRtdWr4dZAuAdpA0v4qWtFqxPn9k6FxkW7UF5pJXQKWugworsPo6aNOz2KTQlfhWcX6Rz45j8IVWXgrnyO3WEM/oWSpo7I3oBGdH6TXO5IcZ1PBIeo9rvdCpByrk8Z38PMWrcbx3RMR1rQlE7fAuzAh7TD89R3vBrMUyElbQnjlgjNrvC3zdNLDVVFFFTRbEwwOBG7VdkUXuXW4NpHmv2fe49Sw0RvAmvaOFAB0ogUXIhkzPilpkr5CLEFzwyYvRup9/q0Y7jwNwHClHUecsFJDIPygaV8z3WDmev+bnKi9+DhygPlwTFQJCHs486+dj9MCYnUkCak+pgKesQSQ/R7kM9g9oOD77wyTMlwtj5KwSnCuwaD9GuvNwplBSKJpM6tYqqfGNd8GJAUHqR0aIx4DUbXUKAM4P5wbfTMyVbo="
-    email: "[email protected]"
-    on:
-      branch: master
-    skip_cleanup: true
-    tag: master
-  - provider: npm
-    api_key:
-      secure: "TmSsQrb7ujvlLd6K04nW7BSaKbFu2QtuEGQguhpYQ2hKDhZrfWizFP7De3Zdwvg+CVWDjTPMXkdrhOd7gpPwKOCoGTl/k6oVLpGUu640GbZmTqik22MIGdS8gb9etFpzRNQiJuKYVzMZtDeClA4GvhGra3L5JZKJthPOdLVX7GNsRqtjhrLMsV/Zdpl4YfPfwQqYP9Nvm+gdwJni9qFTdCdn558kOitAde1/cuG2awBmvDKd//2vI0RE/DNrMZRBOWRtdWr4dZAuAdpA0v4qWtFqxPn9k6FxkW7UF5pJXQKWugworsPo6aNOz2KTQlfhWcX6Rz45j8IVWXgrnyO3WEM/oWSpo7I3oBGdH6TXO5IcZ1PBIeo9rvdCpByrk8Z38PMWrcbx3RMR1rQlE7fAuzAh7TD89R3vBrMUyElbQnjlgjNrvC3zdNLDVVFFFTRbEwwOBG7VdkUXuXW4NpHmv2fe49Sw0RvAmvaOFAB0ogUXIhkzPilpkr5CLEFzwyYvRup9/q0Y7jwNwHClHUecsFJDIPygaV8z3WDmev+bnKi9+DhygPlwTFQJCHs486+dj9MCYnUkCak+pgKesQSQ/R7kM9g9oOD77wyTMlwtj5KwSnCuwaD9GuvNwplBSKJpM6tYqqfGNd8GJAUHqR0aIx4DUbXUKAM4P5wbfTMyVbo="
-    email: "[email protected]"
-    on:
-      tags: true
-    skip_cleanup: true
-  - provider: pages
-    skip-cleanup: true
-    github-token:
-      secure: "NlS8bKqgC9ocfB5S4EsE1n+lq1H1Kyf83pWoQFuZIy33wILcyhTl+ypsSPQ2rgOMw9di+DeJrlGEddioKLvvKr11suWigNJ54pD5yFft3TkrytbFDM3974WkHiQKFSim11nwmueHqJdOfvfKyNajRBj0XkVHYiLsZilugC+ClWqs3BtL4thu90ZXVjsnDBz1z6FOQHDaM51tVEzsxkxEakbRT9ASLWGGP6UPvHGzmbgjRViGu5NOUHougZfJep0pRvQHFCDMolRfGh48yhOR5moyDbD3Rg71dmF39Q/SY5eKYEImiOpnryuEY8Cf0LPQq8rlkJ+ZOfmnbaO3oQxQlnFlsk9O0I58lZ7G+6cF/fzOi1Y1XsDNFGSrH7T9wtoTyErWh6V/tvDNCmQHNu1XzWbqGl9xGYXafNtE871fvtkGizuIxvtKYmCIfrmlZyE00SLM+ScnR0aEudXUSN+1CLjei23NgXmOEn+mhwcsBymnFfB34fz5DzkyHj6FE0uWTBV/7J8Pt7TawKxNh02bJ1eUzYWnGcsSPCIFdu0VZ3TcIdjrP0VyuB8TvJuwtb3YI0sK+NmgFiRD+ajBMasokzK+rG+ydlYhzqpdNf2z4G3UfKLPxlbQn3TExigncr7TVm4eWqmI6+E0knTW70dZGs8lCuQ3DMgW9/hUGLGD+bg="
-    on:
-      branch: master
-    local-dir: packages/playground/build
-  - provider: releases
-    api_key:
-      secure: "NlS8bKqgC9ocfB5S4EsE1n+lq1H1Kyf83pWoQFuZIy33wILcyhTl+ypsSPQ2rgOMw9di+DeJrlGEddioKLvvKr11suWigNJ54pD5yFft3TkrytbFDM3974WkHiQKFSim11nwmueHqJdOfvfKyNajRBj0XkVHYiLsZilugC+ClWqs3BtL4thu90ZXVjsnDBz1z6FOQHDaM51tVEzsxkxEakbRT9ASLWGGP6UPvHGzmbgjRViGu5NOUHougZfJep0pRvQHFCDMolRfGh48yhOR5moyDbD3Rg71dmF39Q/SY5eKYEImiOpnryuEY8Cf0LPQq8rlkJ+ZOfmnbaO3oQxQlnFlsk9O0I58lZ7G+6cF/fzOi1Y1XsDNFGSrH7T9wtoTyErWh6V/tvDNCmQHNu1XzWbqGl9xGYXafNtE871fvtkGizuIxvtKYmCIfrmlZyE00SLM+ScnR0aEudXUSN+1CLjei23NgXmOEn+mhwcsBymnFfB34fz5DzkyHj6FE0uWTBV/7J8Pt7TawKxNh02bJ1eUzYWnGcsSPCIFdu0VZ3TcIdjrP0VyuB8TvJuwtb3YI0sK+NmgFiRD+ajBMasokzK+rG+ydlYhzqpdNf2z4G3UfKLPxlbQn3TExigncr7TVm4eWqmI6+E0knTW70dZGs8lCuQ3DMgW9/hUGLGD+bg="
-    on:
-      tags: true
-    skip_cleanup: true
+- provider: scripts
+  script: bash scripts/lerna_publish
+  on:
+    branch: master
+  skip_cleanup: true
+
+- provider: pages
+  skip-cleanup: true
+  github-token:
+    secure: "NlS8bKqgC9ocfB5S4EsE1n+lq1H1Kyf83pWoQFuZIy33wILcyhTl+ypsSPQ2rgOMw9di+DeJrlGEddioKLvvKr11suWigNJ54pD5yFft3TkrytbFDM3974WkHiQKFSim11nwmueHqJdOfvfKyNajRBj0XkVHYiLsZilugC+ClWqs3BtL4thu90ZXVjsnDBz1z6FOQHDaM51tVEzsxkxEakbRT9ASLWGGP6UPvHGzmbgjRViGu5NOUHougZfJep0pRvQHFCDMolRfGh48yhOR5moyDbD3Rg71dmF39Q/SY5eKYEImiOpnryuEY8Cf0LPQq8rlkJ+ZOfmnbaO3oQxQlnFlsk9O0I58lZ7G+6cF/fzOi1Y1XsDNFGSrH7T9wtoTyErWh6V/tvDNCmQHNu1XzWbqGl9xGYXafNtE871fvtkGizuIxvtKYmCIfrmlZyE00SLM+ScnR0aEudXUSN+1CLjei23NgXmOEn+mhwcsBymnFfB34fz5DzkyHj6FE0uWTBV/7J8Pt7TawKxNh02bJ1eUzYWnGcsSPCIFdu0VZ3TcIdjrP0VyuB8TvJuwtb3YI0sK+NmgFiRD+ajBMasokzK+rG+ydlYhzqpdNf2z4G3UfKLPxlbQn3TExigncr7TVm4eWqmI6+E0knTW70dZGs8lCuQ3DMgW9/hUGLGD+bg="
+  on:
+    branch: master
+  local-dir: packages/playground/build
+
+- provider: releases
+  api_key:
+    secure: "NlS8bKqgC9ocfB5S4EsE1n+lq1H1Kyf83pWoQFuZIy33wILcyhTl+ypsSPQ2rgOMw9di+DeJrlGEddioKLvvKr11suWigNJ54pD5yFft3TkrytbFDM3974WkHiQKFSim11nwmueHqJdOfvfKyNajRBj0XkVHYiLsZilugC+ClWqs3BtL4thu90ZXVjsnDBz1z6FOQHDaM51tVEzsxkxEakbRT9ASLWGGP6UPvHGzmbgjRViGu5NOUHougZfJep0pRvQHFCDMolRfGh48yhOR5moyDbD3Rg71dmF39Q/SY5eKYEImiOpnryuEY8Cf0LPQq8rlkJ+ZOfmnbaO3oQxQlnFlsk9O0I58lZ7G+6cF/fzOi1Y1XsDNFGSrH7T9wtoTyErWh6V/tvDNCmQHNu1XzWbqGl9xGYXafNtE871fvtkGizuIxvtKYmCIfrmlZyE00SLM+ScnR0aEudXUSN+1CLjei23NgXmOEn+mhwcsBymnFfB34fz5DzkyHj6FE0uWTBV/7J8Pt7TawKxNh02bJ1eUzYWnGcsSPCIFdu0VZ3TcIdjrP0VyuB8TvJuwtb3YI0sK+NmgFiRD+ajBMasokzK+rG+ydlYhzqpdNf2z4G3UfKLPxlbQn3TExigncr7TVm4eWqmI6+E0knTW70dZGs8lCuQ3DMgW9/hUGLGD+bg="
+  on:
+    tags: true
+  skip_cleanup: true

.travis.yml

@@ -5,6 +5,25 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `AutoHideFollowButton`: will now hide when it start animating scroll position
+- `BasicScrollToBottom`: will now pass `debounce` and `threshold` to `Composer`, fix [#2](https://github.com/compulim/react-scroll-to-bottom/issues/2)
+- `Composer`: `debounce` prop to control debouncing on `onScroll` event, default to `17`
+- `FunctionContext`: `scrollTo` now support `"bottom"`, in addition to a `number`, fix [#1](https://github.com/compulim/react-scroll-to-bottom/issues/1)
+   - This will help when animating scroll position while new content was added to the panel
+- `FunctionContext`: `scrollToStart` function to scroll to the start, depends on `mode`
+- `StateContext`: `animating` returns `true` if the scroll position is being animated
+- `StateContext`: `atStart` indicates if the scroll position is at the start or not, depend on `mode`
+
+### Changed
+- Performance improvements
+   - `Context` is now separated into `FunctionContext`, `InternalContext` and `StateContext` for better performance and reduce exposure
+      - `FunctionContext` is static and only hold functions for manipulating the panel
+      - `InternalContext` is static and for internal use (to overcome shortcomings of `React.createRef`)
+      - `StateContext` is dynamic and change when scroll position change
+   - `StateContext` will now only update if there are any meaningful changes
+- Added `displayName` to context
+- [`lerna`](https://npmjs.com/package/lerna) bumped from `2.11.0` to `3.4.3`
 
 ## [1.1.0] - 2018-06-22
 ### Added

CHANGELOG.md

@@ -36,27 +36,45 @@ export default props =>
 | Name | Default | Description |
 | - | - | - |
 | `className` | | Set the class name for the root element |
+| `debounce` | `17` | Set the debounce for tracking the `onScroll` event |
 | `followButtonClassName` | | Set the class name for the follow button |
 | `mode` | `"bottom"` | Set it to `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
 | `scrollViewClassName` | | Set the class name for the container element that house all `props.children` |
 
 ## Context
 
+We use 2 different contexts with different performance characteristics to provide better overall performance. [Function context](#function-context) contains immutable functions. [State context](#state-context) may change when the user scroll the panel.
+
+### Function context
+
+This context contains functions used to manipulate the container. And will not update throughout the lifetime of the composer.
+
+| Name | Type | Description |
+| - | - | - |
+| `scrollTo` | `(scrollTop: number | 'bottom') => void` | Scroll panel to specified position |
+| `scrollToBottom` | `() => void` | Scroll panel to bottom |
+| `scrollToEnd` | `() => void` | Scroll panel to end (depends on `mode`) |
+| `scrollToStart` | `() => void` | Scroll panel to start (depends on `mode`) |
+| `scrollToTop` | `() => void` | Scroll panel to top |
+
+### State context
+
+This context contains state of the container.
+
 | Name | Type | Description |
 | - | - | - |
+| `animating` | `boolean` | `true` if the panel is animating scroll effect |
 | `atBottom` | `boolean` | `true` if the panel is currently near bottom (see `threshold`) |
-| `atEnd` | `boolean` | `true` if the panel is currently near the end (see `mode` and `threshold` |
+| `atEnd` | `boolean` | `true` if the panel is currently near the end (depends on `mode`, see `mode` and `threshold` |
+| `atStart` | `boolean` | `true` if the panel is currently near the start (depends on `mode`, see `threshold`) |
 | `atTop` | `boolean` | `true` if the panel is currently near top (see `threshold`) |
 | `mode` | `string` | `"bottom"` for scroll-to-bottom, `"top"` for scroll-to-top |
-| `scrollTo` | `(scrollTop: number) => void` | Scroll panel to specified position |
-| `scrollToBottom` | `() => void` | Scroll panel to bottom |
-| `scrollToEnd` | `() => void` | Scroll panel to end |
-| `scrollToTop` | `() => void` | Scroll panel to top |
 | `threshold` | `number` | Threshold in pixels to consider the panel is near top/bottom, read-only and only set thru `props` |
 
 # Road map
 
-* Easier customization for "scroll to bottom" button
+- [x] Easier customization for "scroll to bottom" button
+- [ ] Debounce on showing "scroll to bottom" button
 
 # Contributions
 

README.md

@@ -1,5 +1,5 @@
 {
-  "lerna": "2.11.0",
+  "lerna": "3.4.3",
   "packages": [
     "packages/*"
   ],