fix: move animation code to smooth package (#187)

* fix: move animation code to smooth package

* Typo

* prepare deploy

* tweak

* Sync with Prettier

* make TS happy

* fix: ci

* duration

* again

* just build

Author: stipsan

.circleci/config.yml

@@ -29,8 +29,17 @@ jobs:
       - restore-cache: *restore-cache
       - *install
       - run:
-          command: yarn typecheck
+          name: scroll-into-view-if-needed
+          command: yarn build:d.ts
+          working_directory: packages/scroll-into-view-if-needed
+      - run:
+          name: scroll-into-view-if-needed
+          command: yarn build
           working_directory: packages/scroll-into-view-if-needed
+      - run:
+          name: smooth-scroll-into-view-if-needed
+          command: yarn typecheck
+          working_directory: packages/smooth-scroll-into-view-if-needed
       - save-cache: *save-cache
 
   Build:

.gitignore

@@ -1 +1,2 @@
 node_modules
+lerna-debug.log

lerna.json

@@ -2,5 +2,6 @@
   "lerna": "2.10.2",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "independent"
+  "version": "independent",
+  "ignore": "scroll-into-view-if-needed-website"
 }

package.json

@@ -10,7 +10,7 @@
     "predeploy:website": "yarn build",
     "deploy:website": "cd website && yarn deploy",
     "publish:canary": "lerna publish --npm-tag=next --canary",
-    "tyecheck": "lerna exec --concurrency 1 -- yarn typecheck"
+    "typecheck": "lerna exec --concurrency 1 -- yarn typecheck"
   },
   "devDependencies": {
     "husky": "0.14.3",

packages/scroll-into-view-if-needed/package.json

@@ -11,23 +11,22 @@
   "version": "2.0.0",
   "main": "index.js",
   "files": [
-    "auto.js",
     "compute.js",
     "es",
-    "ponyfill.js",
     "umd"
   ],
   "scripts": {
     "prebuild": "yarn clean",
-    "build": "yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min",
+    "build": "yarn build:d.ts && yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min",
     "build:cjs": "BABEL_ENV=cjs babel src -d . --extensions '.ts'",
+    "build:d.ts": "tsc --emitDeclarationOnly",
     "build:es": "BABEL_ENV=es babel src -d es --extensions '.ts'",
     "build:umd": "BABEL_ENV=umd NODE_ENV=development rollup -c -f umd -o umd/scroll-into-view-if-needed.js",
     "build:umd.min": "BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/scroll-into-view-if-needed.min.js",
-    "clean": "rimraf 'umd' 'es'",
+    "clean": "rimraf 'umd' 'es' 'typings'",
     "dev": "concurrently 'tsc --watch' 'yarn build:cjs --watch'",
     "prepublishOnly": "unset npm_config_cafile && yarn build",
-    "typecheck": "tsc"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "invariant": "^2.2.4",

packages/scroll-into-view-if-needed/src/auto.ts

@@ -14,10 +14,6 @@ export interface Options extends ScrollIntoViewOptions {
 }
 
 const isElement = el => el != null && typeof el == 'object' && el.nodeType === 1
-
-/**
- * indicates if an element has scrollable space in the provided axis
- */
 function hasScrollableSpace(el, axis: 'Y' | 'X') {
   if (axis === 'Y') {
     return el.clientHeight < el.scrollHeight
@@ -30,13 +26,6 @@ function hasScrollableSpace(el, axis: 'Y' | 'X') {
   return false
 }
 
-/**
- * indicates if an element can be scrolled in either axis
- * @method isScrollable
- * @param {Node} el
- * @param {String} axis
- * @returns {Boolean}
- */
 function isScrollable(el) {
   var isScrollableY = hasScrollableSpace(el, 'Y')
   var isScrollableX = hasScrollableSpace(el, 'X')
@@ -48,7 +37,7 @@ function isScrollable(el) {
 const alignNearestBlock = (
   targetStart: number,
   targetSize: number,
-  frame: HTMLElement,
+  frame: Element,
   frameRect: ClientRect | DOMRect
 ) => {
   // targetSize is either targetRect.height or targetRect.width depending on if it's `block` or `inline`
@@ -95,17 +84,6 @@ const alignNearestBlock = (
     return targetStart - frameRect.top
   }
 
-  console.log(
-    'alignToNearest',
-    'targetStart',
-    targetStart,
-    'should be 33 if clicking on 1',
-    Math.min(
-      targetStart,
-      Math.max(targetEnd - frame.clientHeight, frame.scrollTop)
-    )
-  )
-
   // start
   // Math.min(targetStart - frameRect.top, frame.scrollHeight - frame.clientHeight - frame.scrollTop)
 
@@ -123,7 +101,7 @@ const alignNearestBlock = (
 const alignNearestInline = (
   targetStart: number,
   targetSize: number,
-  frame: HTMLElement,
+  frame: Element,
   frameRect: ClientRect | DOMRect
 ) => {
   // targetSize is either targetRect.height or targetRect.width depending on if it's `block` or `inline`
@@ -170,17 +148,6 @@ const alignNearestInline = (
     return targetStart - frameRect.left
   }
 
-  console.log(
-    'alignToNearest',
-    'targetStart',
-    targetStart,
-    'should be 33 if clicking on 1',
-    Math.min(
-      targetStart,
-      Math.max(targetEnd - frame.clientWidth, frame.scrollTop)
-    )
-  )
-
   // start
   // Math.min(targetStart - frameRect.left, frame.scrollHeight - frame.clientWidth - frame.scrollTop)
 
@@ -195,19 +162,21 @@ const alignNearestInline = (
   return 0
 }
 
-export const compute = (maybeElement: Element, options: Options = {}) => {
+export const compute = (
+  target: Element,
+  options: Options = {}
+): [Element, number, number][] => {
   const {
     scrollMode = 'always',
     block = 'center',
     inline = 'nearest',
     boundary,
   } = options
 
-  if (!isElement(maybeElement)) {
+  if (!isElement(target)) {
     throw new Error('Element is required in scrollIntoViewIfNeeded')
   }
 
-  let target = maybeElement
   let targetRect = target.getBoundingClientRect()
   console.error(
     'scrollMode',
@@ -222,7 +191,7 @@ export const compute = (maybeElement: Element, options: Options = {}) => {
     target
   )
   // Collect parents
-  const frames: HTMLElement[] = []
+  const frames: Element[] = []
   let parent
   while (isElement((parent = target.parentNode)) && target !== boundary) {
     if (isScrollable(parent)) {
@@ -238,7 +207,7 @@ export const compute = (maybeElement: Element, options: Options = {}) => {
   let targetInline
 
   // Collect new scroll positions
-  const computations = frames.map(frame => {
+  const computations = frames.map((frame): [Element, number, number] => {
     const frameRect = frame.getBoundingClientRect()
     // @TODO fix hardcoding of block => top/Y
     /*
@@ -429,5 +398,5 @@ export const compute = (maybeElement: Element, options: Options = {}) => {
     return [frame, blockScroll, inlineScroll]
   })
 
-  return computations as [[Element, number, number]]
+  return computations
 }

packages/scroll-into-view-if-needed/src/compute.ts

@@ -1,15 +1,32 @@
-import { auto } from './auto'
+import { compute, Options as ComputeOptions } from './compute'
+
+export interface Options {
+  behavior?: 'auto' | 'smooth' | 'instant' | Function
+  scrollMode?: ComputeOptions['scrollMode']
+  boundary?: ComputeOptions['boundary']
+  block?: ComputeOptions['block']
+  inline?: ComputeOptions['inline']
+}
 
-// The "essentials-only" mode that is only as large as it needs to be, and supports native smooth scrolling which is potentially more performant
-export default auto
 // Some people might use both "auto" and "ponyfill" modes in the same file, so we also provide a named export so
 // that imports in userland code (like if they use native smooth scrolling on some browsers, and the ponyfill for everything else)
 // the named export allows this `import {auto as autoScrollIntoView, ponyfill as smoothScrollIntoView} from ...`
-export { auto }
+export default (target: Element, options: Options = {}) => {
+  const { behavior = 'auto', ...computeOptions } = options
+  //return target.scrollIntoView(options)
+  const instructions = compute(target, computeOptions)
 
-// The ponyfill variant that provide the same smooth scrolling experience for every browser
-export { ponyfill } from './ponyfill'
+  if (typeof behavior == 'function') {
+    return behavior(instructions)
+  }
 
-// This is for people who only need the code that computes scrolling instructions, but roll their own
-// code for doing the actual scrolling and want the smallest possible bundle size.
-export { compute } from './compute'
+  instructions.forEach(([el, top, left]) => {
+    // browser implements the new Element.prototype.scroll API that supports `behavior`
+    if (el.scroll) {
+      el.scroll({ top, left, behavior })
+    } else {
+      el.scrollTop = top
+      el.scrollLeft = left
+    }
+  })
+}

packages/scroll-into-view-if-needed/src/index.ts

@@ -4,7 +4,6 @@
     "module": "es2015",
     "moduleResolution": "node",
     "declaration": true,
-    "emitDeclarationOnly": true,
     "rootDir": "src",
     "declarationDir": "typings",
     "noImplicitReturns": true,