react-stick - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

demo/src/AutoAlignment.js

 import React from 'react'
 
-import Stick from '../../src'
+import Stick from '../../es'
 
@@ -5,0 +5,0 @@ function AutoAlignment() {

demo/src/index.js

@@ -0,1 +1,4 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
 import React from 'react'
@@ -2,0 +5,0 @@ import { render } from 'react-dom'

demo/src/PositionAlignOverview.js

 import { compact } from 'lodash'
-import React, { Component, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 
-import Stick from '../../src'
+import Stick from '../../es'
+import { useWatcher } from './hooks'
 
@@ -45,40 +46,24 @@ const formPairs = (listA: Array<string>, listB: Array<string>) =>
 
-class FramesPerSecond extends Component {
-  state = {
-    fps: 0,
-  }
+function FramesPerSecond({ updateOnAnimationFrame }) {
+  const [fps, setFps] = useState(0)
+  const lastUpdated = useRef(Date.now())
+  const framesSinceLastUpdate = useRef(0)
 
-  lastUpdated = Date.now()
-  framesSinceLastUpdate = 0
+  const measure = useCallback(() => {
+    framesSinceLastUpdate.current += 1
 
-  startTracking() {
-    const requestCallback = this.props.updateOnAnimationFrame
-      ? requestAnimationFrame
-      : requestIdleCallback
-    this.lastCallbackAsAnimationFrame = this.props.updateOnAnimationFrame
+    const duration = Date.now() - lastUpdated.current
+    if (duration >= 1000) {
+      setFps(framesSinceLastUpdate.current)
 
-    this.animationId = requestCallback(() => this.startTracking())
-    this.measure()
-  }
-
-  measure() {
-    this.framesSinceLastUpdate += 1
-    let duration = Date.now() - this.lastUpdated
-    if (duration >= 1000) {
-      this.setState({
-        fps: this.framesSinceLastUpdate,
-      })
-      this.framesSinceLastUpdate = 0
-      this.lastUpdated = Date.now()
+      framesSinceLastUpdate.current = 0
+      lastUpdated.current = Date.now()
     }
-  }
+  }, [])
 
-  componentDidMount() {
-    this.startTracking()
-  }
+  useWatcher(measure, { updateOnAnimationFrame })
 
-  render() {
-    return <div>FPS: {this.state.fps}</div>
-  }
+  return <div>FPS: {fps}</div>
 }
+
 function PositionAlignOverview() {
@@ -85,0 +70,0 @@ const [updateOnAnimationFrame, setUpdateOnAnimationFrame] = useState(false)

demo/src/regressions/ButtonOverlay.js

 import React from 'react'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -6,0 +5,0 @@

demo/src/regressions/FitOnPage.js

@@ -0,5 +1,5 @@
+import { times } from 'lodash'
 import React from 'react'
-import { times } from 'lodash'
-import Stick from '../../../src'
 
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -6,0 +6,0 @@

demo/src/regressions/Regressions.js

 import React from 'react'
 
 import ButtonOverlay from './ButtonOverlay'
+import FitOnPage from './FitOnPage'
 import SameWidth from './SameWidth'
+import StickInSvg from './StickInSvg'
 import StickNodeWidth from './StickNodeWidth'
-import FitOnPage from './FitOnPage'
-import StickInSvg from './StickInSvg'
+import StickOnHover from './StickOnHover'
 import StyledWithDataAttributes from './StyledWithDataAttributes'
@@ -23,4 +24,5 @@ import TransportToFixedContainer from './TransportToFixedContainer'
       <TransportToFixedContainer />
+      <StickOnHover />
     </div>
   )
 }

demo/src/regressions/SameWidth.js

 import React from 'react'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -6,0 +5,0 @@

demo/src/regressions/StickInSvg.js

 import React from 'react'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -6,0 +5,0 @@

demo/src/regressions/StickNodeWidth.js

 import React from 'react'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -6,0 +5,0 @@

demo/src/regressions/StyledWithDataAttributes.js

 import React from 'react'
 import { StylesAsDataAttributes } from 'substyle-glamor'
 
-import Stick from '../../../src'
-
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -7,0 +6,0 @@

demo/src/regressions/TransportToFixedContainer.js

 import React, { useState } from 'react'
 
-import Stick from '../../../src'
+import Stick from '../../../es'
 import Regression from './Regression'
@@ -36,7 +36,5 @@
         >
-          {container != null && (
-            <Stick transportTo={container} node="Yes, here it is!">
-              <div>There should be a line of text below me</div>
-            </Stick>
-          )}
+          <Stick transportTo={container} node="Yes, here it is!">
+            <div>There should be a line of text below me</div>
+          </Stick>
         </div>
@@ -43,0 +41,0 @@ )}

lib/Stick.js

@@ -135,9 +135,2 @@ "use strict";
 
-  if (!node) {
-    var Component = component || 'div';
-    return _react.default.createElement(_StickContext.StickContext.Provider, {
-      value: nestingKey
-    }, _react.default.createElement(Component, _extends({}, resolvedStyle, rest), children));
-  }
-
   if (inline) {
@@ -150,3 +143,3 @@ return _react.default.createElement(_StickContext.StickContext.Provider, {
       style: resolvedStyle,
-      node: _react.default.createElement(_StickNode.default, {
+      node: node && _react.default.createElement(_StickNode.default, {
         width: width,
@@ -178,3 +171,3 @@ position: resolvedPosition,
     position: resolvedPosition,
-    node: _react.default.createElement(_StickNode.default, {
+    node: node && _react.default.createElement(_StickNode.default, {
       width: width,
@@ -181,0 +174,0 @@ position: resolvedPosition,

lib/StickPortal.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _invariant = _interopRequireDefault(require("invariant"));
+
 var _react = _interopRequireWildcard(require("react"));
@@ -21,4 +23,12 @@
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -49,3 +59,6 @@
 
-  var host = useHost(transportTo);
+  var _useHost = useHost(transportTo),
+      host = _useHost[0],
+      hostParent = _useHost[1];
+
   (0, _react.useEffect)(function () {
@@ -56,2 +69,10 @@ if (nodeRef.current) {
   }, [onReposition, top, left]);
+  (0, _react.useLayoutEffect)(function () {
+    if (node) {
+      hostParent.appendChild(host);
+      return function () {
+        hostParent.removeChild(host);
+      };
+    }
+  }, [host, hostParent, node]);
   var measure = (0, _react.useCallback)(function () {
@@ -98,3 +119,3 @@ if (!nodeRef.current) {
     "data-sticknestingkey": nestingKey,
-    style: _extends({
+    style: _objectSpread({
       position: 'absolute'
@@ -121,16 +142,5 @@ }, nodeStyle, {
   var portalHost = (0, _react.useContext)(PortalContext);
-  (0, _react.useEffect)(function () {
-    var hostParent = transportTo || portalHost || document.body;
-
-    if (hostParent) {
-      hostParent.appendChild(host);
-    }
-
-    return function () {
-      if (hostParent) {
-        hostParent.removeChild(host);
-      }
-    };
-  }, [host, portalHost, transportTo]);
-  return host;
+  var hostParent = transportTo || portalHost || document.body;
+  (0, _invariant.default)(hostParent, 'Could not determine a parent for the host node.');
+  return [host, hostParent];
 }
@@ -137,0 +147,0 @@

package.json

 {
   "name": "react-stick",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "React component to stick a portaled node to an anchor node",
@@ -14,3 +14,3 @@ "main": "lib/index.js",
     "postbuild": "flow-copy-source -v src lib && flow-copy-source -v src es",
-    "build-demo": "nwb build-react-component",
+    "build-demo": "webpack",
     "clean": "nwb clean-module && nwb clean-demo",
@@ -21,3 +21,3 @@ "flow": "flow check",
     "publish-demo": "node scripts/gh-pages-publish.js $CIRCLE_BRANCH",
-    "start": "nwb serve-react-demo",
+    "start": "NODE_ENV=development webpack-dev-server",
     "semantic-release": "semantic-release",
@@ -32,5 +32,5 @@ "semantic-release-preview": "semantic-release-github-pr",
     "lodash": "^4.17.4",
+    "recompose": "0.30.0",
     "requestidlecallback": "^0.3.0",
-    "substyle": "^7.1.3",
-    "recompose": "0.30.0"
+    "substyle": "^7.1.3"
   },
@@ -41,10 +41,13 @@ "devDependencies": {
     "babel-eslint": "10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-syntax-dynamic-import": "6.18.0",
     "condition-circle": "2.0.2",
+    "core-js": "3.6.4",
     "eslint": "6.8.0",
     "eslint-config-react-app": "5.2.0",
     "eslint-plugin-flowtype": "4.6.0",
-    "eslint-plugin-react-hooks": "2.5.1",
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "2.5.1",
     "flow-bin": "^0.121.0",
@@ -54,2 +57,4 @@ "flow-copy-source": "^1.3.0",
     "glamor": "^2.20.40",
+    "html-webpack-harddisk-plugin": "^1.0.1",
+    "html-webpack-plugin": "^4.0.4",
     "inferno": "7.4.2",
@@ -60,9 +65,19 @@ "nwb": "0.24.3",
     "react-dom": "^16.13.1",
+    "regenerator-runtime": "0.13.5",
     "semantic-release": "17.0.4",
-    "substyle-glamor": "^2.1.3"
+    "substyle-glamor": "^2.1.3",
+    "webpack": "4.42.1",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
+  "browserslist": [
+    "chrome >= 50",
+    "firefox >= 52",
+    "safari >= 10",
+    "ie >= 11"
+  ],
   "release": {
@@ -69,0 +84,0 @@ "branch": "master",

scripts/gh-pages-publish.js

@@ -7,3 +7,3 @@ const ghpages = require('gh-pages')
 const branchName = process.argv[2]
-const dir = path.resolve(__dirname, '..', 'demo', 'dist')
+const dir = path.resolve(__dirname, '..', 'build')
 const demoUrl = `https://signavio.github.io/react-stick/${branchName}`
@@ -10,0 +10,0 @@

src/Stick.js

@@ -11,3 +11,3 @@ // @flow
   useRef,
-  useState,
+  useState
 } from 'react'
@@ -29,3 +29,3 @@ import { type HOC } from 'recompose'
 
-  style: Substyle,
+  style: Substyle
 |}
@@ -137,14 +137,2 @@
 
-  if (!node) {
-    const Component = component || 'div'
-
-    return (
-      <StickContext.Provider value={nestingKey}>
-        <Component {...resolvedStyle} {...rest}>
-          {children}
-        </Component>
-      </StickContext.Provider>
-    )
-  }
-
   if (inline) {
@@ -159,11 +147,13 @@ return (
           node={
-            <StickNode
-              width={width}
-              position={resolvedPosition}
-              align={resolvedAlign}
-              sameWidth={!!sameWidth}
-              nodeRef={nodeRef}
-            >
-              {node}
-            </StickNode>
+            node && (
+              <StickNode
+                width={width}
+                position={resolvedPosition}
+                align={resolvedAlign}
+                sameWidth={!!sameWidth}
+                nodeRef={nodeRef}
+              >
+                {node}
+              </StickNode>
+            )
           }
@@ -200,11 +190,13 @@ nestingKey={nestingKey}
         node={
-          <StickNode
-            width={width}
-            position={resolvedPosition}
-            align={resolvedAlign}
-            sameWidth={!!sameWidth}
-            nodeRef={nodeRef}
-          >
-            {node}
-          </StickNode>
+          node && (
+            <StickNode
+              width={width}
+              position={resolvedPosition}
+              align={resolvedAlign}
+              sameWidth={!!sameWidth}
+              nodeRef={nodeRef}
+            >
+              {node}
+            </StickNode>
+          )
         }
@@ -269,3 +261,3 @@ style={resolvedStyle}
     center: left + width / 2,
-    right,
+    right
   }
@@ -295,4 +287,4 @@
       zIndex: 99,
-      textAlign: 'left',
-    },
+      textAlign: 'left'
+    }
   },
@@ -299,0 +291,0 @@ getModifiers

src/StickPortal.js

 // @flow
 import 'requestidlecallback'
 
+import invariant from 'invariant'
 import React, {
@@ -10,4 +11,5 @@ createContext,
   useEffect,
+  useLayoutEffect,
   useRef,
-  useState,
+  useState
 } from 'react'
@@ -40,3 +42,3 @@ import { createPortal } from 'react-dom'
 
-  const host = useHost(transportTo)
+  const [host, hostParent] = useHost(transportTo)
 
@@ -49,2 +51,12 @@ useEffect(() => {
 
+  useLayoutEffect(() => {
+    if (node) {
+      hostParent.appendChild(host)
+
+      return () => {
+        hostParent.removeChild(host)
+      }
+    }
+  }, [host, hostParent, node])
+
   const measure = useCallback(() => {
@@ -107,3 +119,3 @@ if (!nodeRef.current) {
               top,
-              left,
+              left
             }}
@@ -129,17 +141,7 @@ >
 
-  useEffect(() => {
-    const hostParent = transportTo || portalHost || document.body
+  const hostParent = transportTo || portalHost || document.body
 
-    if (hostParent) {
-      hostParent.appendChild(host)
-    }
+  invariant(hostParent, 'Could not determine a parent for the host node.')
 
-    return () => {
-      if (hostParent) {
-        hostParent.removeChild(host)
-      }
-    }
-  }, [host, portalHost, transportTo])
-
-  return host
+  return [host, hostParent]
 }
@@ -146,0 +148,0 @@

No alert changes

Improved metrics

Total package byte prevSize

363725

increased by1.58%

Number of package files

93

increased by6.9%

Lines of code

9146

increased by1.61%

Worsened metrics

Dev dependency count

31

increased by40.91%

Number of low supply chain risk alerts

4

increased by33.33%

No dependency changes