Refactor code into more sensible modules (atomiks#369)

build/bundle.js

@@ -1,4 +1,4 @@
 import '../src/scss/tippy.scss'
-import tippy from '../src/js/tippy.js'
+import tippy from '../src/js/index'
 
 export default tippy

build/main.js

@@ -1,6 +1,6 @@
 import styles from '../dist/tippy.css'
-import tippy from '../src/js/tippy'
-import { injectCSS } from '../src/js/utils'
+import tippy from '../src/js/index'
+import { injectCSS } from '../src/js/css'
 
 injectCSS(styles)
 

package.json

@@ -22,15 +22,14 @@
     "build:docs": "node website/clean.js && parcel build website/index.html -d docs/ --public-url ./ && node website/prerender.js",
     "dev": "parcel tests/visual/index.html -d tests/visual/dist --open",
     "build": "node ./scripts/build.js && npm run build:docs",
-    "test": "eslint \"src/**/*.js\" && jest --coverage",
+    "test": "jest --coverage",
+    "lint": "eslint \"src/**/*.js\"",
     "prettier": "prettier --write \"./**/*{js,scss}\"",
     "release": "npm test && npm run build && git add . && git commit -am $npm_package_version && git tag v$npm_package_version && git push origin master && git push --tags && npm publish"
   },
   "jest": {
     "setupFiles": [
-      "./tests/polyfills/createRange.js",
-      "./tests/polyfills/MutationObserver.js",
-      "./tests/polyfills/window.js"
+      "./tests/polyfills.js"
     ],
     "coveragePathIgnorePatterns": [
       "tests"
@@ -43,9 +42,6 @@
   "browserslist": [
     "> 0.5%"
   ],
-  "alias": {
-    "~": "src"
-  },
   "devDependencies": {
     "@hyperapp/render": "^2.0.0",
     "autoprefixer": "^6.7.7",

src/js/bindGlobalEventListeners.js

@@ -1,10 +1,11 @@
-import { Selectors } from './selectors'
 import { supportsTouch, isIOS } from './browser'
-import { hideAllPoppers, closest, closestCallback, toArray } from './utils'
+import Selectors from './selectors'
+import { hideAllPoppers } from './popper'
+import { closest, closestCallback, arrayFrom } from './ponyfills'
 
 export let isUsingTouch = false
 
-export const onDocumentTouch = () => {
+export function onDocumentTouch() {
   if (isUsingTouch) {
     return
   }
@@ -21,7 +22,7 @@ export const onDocumentTouch = () => {
 }
 
 let lastMouseMoveTime = 0
-export const onDocumentMouseMove = () => {
+export function onDocumentMouseMove() {
   const now = performance.now()
 
   // Chrome 60+ is 1 mousemove per animation frame, use 20ms time difference
@@ -36,7 +37,7 @@ export const onDocumentMouseMove = () => {
   lastMouseMoveTime = now
 }
 
-export const onDocumentClick = ({ target }) => {
+export function onDocumentClick({ target }) {
   // Simulated events dispatched on the document
   if (!(target instanceof Element)) {
     return hideAllPoppers()
@@ -71,15 +72,15 @@ export const onDocumentClick = ({ target }) => {
   hideAllPoppers()
 }
 
-export const onWindowBlur = () => {
+export function onWindowBlur() {
   const { activeElement } = document
   if (activeElement && activeElement.blur && activeElement._tippy) {
     activeElement.blur()
   }
 }
 
-export const onWindowResize = () => {
-  toArray(document.querySelectorAll(Selectors.POPPER)).forEach(popper => {
+export function onWindowResize() {
+  arrayFrom(document.querySelectorAll(Selectors.POPPER)).forEach(popper => {
     const tippyInstance = popper._tippy
     if (!tippyInstance.props.livePlacement) {
       tippyInstance.popperInstance.scheduleUpdate()
@@ -90,7 +91,7 @@ export const onWindowResize = () => {
 /**
  * Adds the needed global event listeners
  */
-export default function bindEventListeners() {
+export default function bindGlobalEventListeners() {
   document.addEventListener('click', onDocumentClick, true)
   // Old browsers will use capture phase but the phase does not matter anyway
   document.addEventListener('touchstart', onDocumentTouch, { passive: true })

src/js/createTippy.js

@@ -1,32 +1,25 @@
 import Popper from 'popper.js'
-import { Defaults, POPPER_INSTANCE_RELATED_PROPS } from './defaults'
-import { Selectors } from './selectors'
-import { isUsingTouch } from './bindGlobalEventListeners'
 import { supportsTouch, isIE } from './browser'
+import { isUsingTouch } from './bindGlobalEventListeners'
+import Defaults, { POPPER_INSTANCE_RELATED_PROPS } from './defaults'
+import Selectors from './selectors'
 import {
   createPopperElement,
-  elementCanReceiveFocus,
-  getChildren,
-  computeArrowTransform,
+  updatePopperElement,
   afterPopperPositionUpdates,
+  getChildren,
   getPopperPlacement,
-  getOffsetDistanceInPx,
-  getValue,
-  closest,
-  closestCallback,
-  isCursorOutsideInteractiveBorder,
   applyTransitionDuration,
-  setVisibilityState,
-  updatePopperElement,
-  evaluateProps,
-  defer,
-  toArray,
-  focus,
   toggleTransitionEndListener,
-  debounce,
-  validateOptions,
-  hasOwnProperty
-} from './utils'
+  setVisibilityState,
+  isCursorOutsideInteractiveBorder,
+  getOffsetDistanceInPx
+} from './popper'
+import { canReceiveFocus } from './reference'
+import { validateOptions, evaluateProps } from './props'
+import computeArrowTransform from './deprecated_computeArrowTransform'
+import { closest, closestCallback, arrayFrom } from './ponyfills'
+import { defer, focus, hasOwnProperty, debounce, getValue } from './utils'
 
 let idCounter = 1
 
@@ -166,7 +159,7 @@ export default function createTippy(reference, collectionProps) {
   }
 
   // Ensure the reference element can receive focus (and is not a delegate)
-  if (props.a11y && !props.target && !elementCanReceiveFocus(reference)) {
+  if (props.a11y && !props.target && !canReceiveFocus(reference)) {
     reference.setAttribute('tabindex', '0')
   }
 
@@ -1007,7 +1000,7 @@ export default function createTippy(reference, collectionProps) {
     delete tip.reference._tippy
 
     if (tip.props.target && destroyTargetInstances) {
-      toArray(tip.reference.querySelectorAll(tip.props.target)).forEach(
+      arrayFrom(tip.reference.querySelectorAll(tip.props.target)).forEach(
         child => child._tippy && child._tippy.destroy()
       )
     }

src/js/css.js

@@ -0,0 +1,14 @@
+import { isBrowserSupported } from './browser'
+
+/**
+ * Injects a string of CSS styles to a style node in <head>
+ * @param {String} css
+ */
+export function injectCSS(css) {
+  if (isBrowserSupported) {
+    const style = document.createElement('style')
+    style.type = 'text/css'
+    style.textContent = css
+    document.head.insertBefore(style, document.head.firstChild)
+  }
+}

src/js/defaults.js

@@ -1,4 +1,4 @@
-export let Defaults = {
+export default {
   a11y: true,
   allowHTML: true,
   animateFill: true,
@@ -46,10 +46,6 @@ export let Defaults = {
   zIndex: 9999
 }
 
-export const setDefaults = partialDefaults => {
-  Defaults = { ...Defaults, ...partialDefaults }
-}
-
 /**
  * If the set() method encounters one of these, the popperInstance must be
  * recreated

src/js/deprecated_computeArrowTransform.js

@@ -0,0 +1,143 @@
+import Selectors from './selectors'
+import { getPopperPlacement } from './popper'
+import { closest } from './ponyfills'
+
+// =============================================================================
+// DEPRECATED
+// All of this code (for the `arrowTransform` option) will be removed in v4
+// =============================================================================
+export const TRANSFORM_NUMBER_RE = {
+  translate: /translateX?Y?\(([^)]+)\)/,
+  scale: /scaleX?Y?\(([^)]+)\)/
+}
+
+/**
+ * Transforms the x/y axis based on the placement
+ */
+export function transformAxisBasedOnPlacement(axis, isVertical) {
+  return (
+    (isVertical
+      ? axis
+      : {
+          X: 'Y',
+          Y: 'X'
+        }[axis]) || ''
+  )
+}
+
+/**
+ * Transforms the scale/translate numbers based on the placement
+ */
+export function transformNumbersBasedOnPlacement(
+  type,
+  numbers,
+  isVertical,
+  isReverse
+) {
+  /**
+   * Avoid destructuring because a large boilerplate function is generated
+   * by Babel
+   */
+  const a = numbers[0]
+  const b = numbers[1]
+
+  if (!a && !b) {
+    return ''
+  }
+
+  const transforms = {
+    scale: (() => {
+      if (!b) {
+        return `${a}`
+      } else {
+        return isVertical ? `${a}, ${b}` : `${b}, ${a}`
+      }
+    })(),
+    translate: (() => {
+      if (!b) {
+        return isReverse ? `${-a}px` : `${a}px`
+      } else {
+        if (isVertical) {
+          return isReverse ? `${a}px, ${-b}px` : `${a}px, ${b}px`
+        } else {
+          return isReverse ? `${-b}px, ${a}px` : `${b}px, ${a}px`
+        }
+      }
+    })()
+  }
+
+  return transforms[type]
+}
+
+/**
+ * Returns the axis for a CSS function (translate or scale)
+ */
+export function getTransformAxis(str, cssFunction) {
+  const match = str.match(new RegExp(cssFunction + '([XY])'))
+  return match ? match[1] : ''
+}
+
+/**
+ * Returns the numbers given to the CSS function
+ */
+export function getTransformNumbers(str, regex) {
+  const match = str.match(regex)
+  return match ? match[1].split(',').map(n => parseFloat(n, 10)) : []
+}
+
+/**
+ * Computes the arrow's transform so that it is correct for any placement
+ */
+function computeArrowTransform(arrow, arrowTransform) {
+  const placement = getPopperPlacement(closest(arrow, Selectors.POPPER))
+  const isVertical = placement === 'top' || placement === 'bottom'
+  const isReverse = placement === 'right' || placement === 'bottom'
+
+  const matches = {
+    translate: {
+      axis: getTransformAxis(arrowTransform, 'translate'),
+      numbers: getTransformNumbers(
+        arrowTransform,
+        TRANSFORM_NUMBER_RE.translate
+      )
+    },
+    scale: {
+      axis: getTransformAxis(arrowTransform, 'scale'),
+      numbers: getTransformNumbers(arrowTransform, TRANSFORM_NUMBER_RE.scale)
+    }
+  }
+
+  const computedTransform = arrowTransform
+    .replace(
+      TRANSFORM_NUMBER_RE.translate,
+      `translate${transformAxisBasedOnPlacement(
+        matches.translate.axis,
+        isVertical
+      )}(${transformNumbersBasedOnPlacement(
+        'translate',
+        matches.translate.numbers,
+        isVertical,
+        isReverse
+      )})`
+    )
+    .replace(
+      TRANSFORM_NUMBER_RE.scale,
+      `scale${transformAxisBasedOnPlacement(
+        matches.scale.axis,
+        isVertical
+      )}(${transformNumbersBasedOnPlacement(
+        'scale',
+        matches.scale.numbers,
+        isVertical,
+        isReverse
+      )})`
+    )
+
+  arrow.style[
+    typeof document.body.style.transform !== 'undefined'
+      ? 'transform'
+      : 'webkitTransform'
+  ] = computedTransform
+}
+
+export default computeArrowTransform