@react-spring/parallax - npm Package Compare versions

Comparing version 9.0.0-rc.3 to 9.0.0

index.cjs.js

@@ -5,38 +5,17 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
 var React = require('react');
-var web = require('@react-spring/web/index.cjs.js');
-var useMemoOne = require('use-memo-one');
-var globals = require('@react-spring/shared/globals');
 var shared = require('@react-spring/shared');
+var web = require('@react-spring/web');
 
-var ParentContext = React.createContext(null);
-
+const ParentContext = React.createContext(null);
 function getScrollType(horizontal) {
-  return horizontal ? 'scrollLeft' : 'scrollTop';
+  return horizontal ? "scrollLeft" : "scrollTop";
 }
-
-var START_TRANSLATE_3D = 'translate3d(0px,0px,0px)';
-var START_TRANSLATE = 'translate(0px,0px)';
-var ParallaxLayer = React.memo(React.forwardRef(function (_ref, ref) {
-  var _extends2;
-
-  var horizontal = _ref.horizontal,
-      _ref$factor = _ref.factor,
-      factor = _ref$factor === void 0 ? 1 : _ref$factor,
-      _ref$offset = _ref.offset,
-      offset = _ref$offset === void 0 ? 0 : _ref$offset,
-      _ref$speed = _ref.speed,
-      speed = _ref$speed === void 0 ? 0 : _ref$speed,
-      rest = _objectWithoutPropertiesLoose(_ref, ["horizontal", "factor", "offset", "speed"]);
-
-  // Our parent controls our height and position.
-  var parent = React.useContext(ParentContext); // This is how we animate.
-
-  var ctrl = useMemoOne.useMemoOne(function () {
-    var targetScroll = Math.floor(offset) * parent.space;
-    var distance = parent.space * offset + targetScroll * speed;
+const START_TRANSLATE_3D = "translate3d(0px,0px,0px)";
+const START_TRANSLATE = "translate(0px,0px)";
+const ParallaxLayer = React.memo(React.forwardRef(({horizontal, factor = 1, offset = 0, speed = 0, ...rest}, ref) => {
+  const parent = React.useContext(ParentContext);
+  const ctrl = shared.useMemoOne(() => {
+    const targetScroll = Math.floor(offset) * parent.space;
+    const distance = parent.space * offset + targetScroll * speed;
     return new web.Controller({
@@ -46,42 +25,27 @@ space: parent.space * factor,
     });
-  }, []); // Create the layer.
-
-  var layer = useMemoOne.useMemoOne(function () {
-    return {
-      setPosition: function setPosition(height, scrollTop, immediate) {
-        if (immediate === void 0) {
-          immediate = false;
-        }
-
-        var targetScroll = Math.floor(offset) * height;
-        var distance = height * offset + targetScroll * speed;
-        ctrl.start({
-          translate: -(scrollTop * speed) + distance,
-          config: parent.config,
-          immediate: immediate
-        });
-      },
-      setHeight: function setHeight(height, immediate) {
-        if (immediate === void 0) {
-          immediate = false;
-        }
-
-        ctrl.start({
-          space: height * factor,
-          config: parent.config,
-          immediate: immediate
-        });
-      }
-    };
   }, []);
-  React.useImperativeHandle(ref, function () {
-    return layer;
-  }); // Register the layer with our parent.
-
-  shared.useOnce(function () {
+  const layer = shared.useMemoOne(() => ({
+    setPosition(height, scrollTop, immediate = false) {
+      const distance = height * offset;
+      ctrl.start({
+        translate: -(scrollTop * speed) + distance,
+        config: parent.config,
+        immediate
+      });
+    },
+    setHeight(height, immediate = false) {
+      ctrl.start({
+        space: height * factor,
+        config: parent.config,
+        immediate
+      });
+    }
+  }), []);
+  React.useImperativeHandle(ref, () => layer);
+  shared.useOnce(() => {
     if (parent) {
       parent.layers.add(layer);
       parent.update();
-      return function () {
-        parent.layers["delete"](layer);
+      return () => {
+        parent.layers.delete(layer);
         parent.update();
@@ -91,91 +55,54 @@ };
   });
-  var translate3d = ctrl.springs.translate.to(horizontal ? function (x) {
-    return "translate3d(" + x + "px,0,0)";
-  } : function (y) {
-    return "translate3d(0," + y + "px,0)";
+  const translate3d = ctrl.springs.translate.to(horizontal ? (x) => `translate3d(${x}px,0,0)` : (y) => `translate3d(0,${y}px,0)`);
+  return /* @__PURE__ */ React.createElement(web.a.div, {
+    ...rest,
+    style: {
+      position: "absolute",
+      backgroundSize: "auto",
+      backgroundRepeat: "no-repeat",
+      willChange: "transform",
+      [horizontal ? "height" : "width"]: "100%",
+      [horizontal ? "width" : "height"]: ctrl.springs.space,
+      WebkitTransform: translate3d,
+      msTransform: translate3d,
+      transform: translate3d,
+      ...rest.style
+    }
   });
-  return /*#__PURE__*/React.createElement(web.a.div, _extends({}, rest, {
-    style: _extends((_extends2 = {
-      position: 'absolute',
-      backgroundSize: 'auto',
-      backgroundRepeat: 'no-repeat',
-      willChange: 'transform'
-    }, _extends2[horizontal ? 'height' : 'width'] = '100%', _extends2[horizontal ? 'width' : 'height'] = ctrl.springs.space, _extends2.WebkitTransform = translate3d, _extends2.msTransform = translate3d, _extends2.transform = translate3d, _extends2), rest.style)
-  }));
 }));
-var Parallax = React.memo(React.forwardRef(function (props, ref) {
-  var _extends3;
-
-  var _useState = React.useState(false),
-      ready = _useState[0],
-      setReady = _useState[1];
-
-  var pages = props.pages,
-      innerStyle = props.innerStyle,
-      _props$config = props.config,
-      config = _props$config === void 0 ? web.config.slow : _props$config,
-      _props$enabled = props.enabled,
-      enabled = _props$enabled === void 0 ? true : _props$enabled,
-      _props$horizontal = props.horizontal,
-      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
-      rest = _objectWithoutPropertiesLoose(props, ["pages", "innerStyle", "config", "enabled", "horizontal"]);
-
-  var state = useMemoOne.useMemoOne(function () {
-    return {
-      config: config,
-      busy: false,
-      space: 0,
-      current: 0,
-      offset: 0,
-      controller: new web.Controller({
-        scroll: 0
-      }),
-      layers: new Set(),
-      update: function (_update) {
-        function update() {
-          return _update.apply(this, arguments);
-        }
-
-        update.toString = function () {
-          return _update.toString();
-        };
-
-        return update;
-      }(function () {
-        return update();
-      }),
-      scrollTo: function (_scrollTo) {
-        function scrollTo(_x) {
-          return _scrollTo.apply(this, arguments);
-        }
-
-        scrollTo.toString = function () {
-          return _scrollTo.toString();
-        };
-
-        return scrollTo;
-      }(function (offset) {
-        return scrollTo(offset);
-      }),
-      stop: function stop() {
-        return state.controller.stop();
-      }
-    };
-  }, []);
-  React.useEffect(function () {
+const Parallax = React.memo(React.forwardRef((props, ref) => {
+  const [ready, setReady] = React.useState(false);
+  const {
+    pages,
+    innerStyle,
+    config = web.config.slow,
+    enabled = true,
+    horizontal = false,
+    ...rest
+  } = props;
+  const state = shared.useMemoOne(() => ({
+    config,
+    busy: false,
+    space: 0,
+    current: 0,
+    offset: 0,
+    controller: new web.Controller({scroll: 0}),
+    layers: new Set(),
+    update: () => update(),
+    scrollTo: (offset) => scrollTo(offset),
+    stop: () => state.controller.stop()
+  }), []);
+  React.useEffect(() => {
     state.config = config;
   }, [config]);
-  React.useImperativeHandle(ref, function () {
-    return state;
-  });
-  var containerRef = React.useRef();
-  var contentRef = React.useRef();
-
-  var update = function update() {
-    var container = containerRef.current;
-    if (!container) return;
-    var spaceProp = horizontal ? 'clientWidth' : 'clientHeight';
+  React.useImperativeHandle(ref, () => state);
+  const containerRef = React.useRef();
+  const contentRef = React.useRef();
+  const update = () => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const spaceProp = horizontal ? "clientWidth" : "clientHeight";
     state.space = container[spaceProp];
-    var scrollType = getScrollType(horizontal);
-
+    const scrollType = getScrollType(horizontal);
     if (enabled) {
@@ -186,11 +113,8 @@ state.current = container[scrollType];
     }
-
-    var content = contentRef.current;
-
+    const content = contentRef.current;
     if (content) {
-      var sizeProp = horizontal ? 'width' : 'height';
-      content.style[sizeProp] = state.space * pages + "px";
+      const sizeProp = horizontal ? "width" : "height";
+      content.style[sizeProp] = `${state.space * pages}px`;
     }
-
-    state.layers.forEach(function (layer) {
+    state.layers.forEach((layer) => {
       layer.setHeight(state.space, true);
@@ -200,12 +124,10 @@ layer.setPosition(state.space, state.current, true);
   };
-
-  var scrollTo = function scrollTo(offset) {
-    var container = containerRef.current;
-    var scrollType = getScrollType(horizontal);
+  const scrollTo = (offset) => {
+    const container = containerRef.current;
+    const scrollType = getScrollType(horizontal);
     state.offset = offset;
     state.controller.stop().start({
       scroll: offset * state.space,
-      config: config,
-      onChange: function onChange(_ref2) {
-        var scroll = _ref2.scroll;
+      config,
+      onChange({scroll}) {
         container[scrollType] = scroll;
@@ -215,11 +137,8 @@ }
   };
-
-  var onScroll = function onScroll(event) {
+  const onScroll = (event) => {
     if (!state.busy) {
       state.busy = true;
       state.current = event.target[getScrollType(horizontal)];
-      globals.frameLoop.onFrame(function () {
-        state.layers.forEach(function (layer) {
-          return layer.setPosition(state.space, state.current);
-        });
+      shared.raf.onStart(() => {
+        state.layers.forEach((layer) => layer.setPosition(state.space, state.current));
         state.busy = false;
@@ -229,48 +148,46 @@ });
   };
-
-  React.useEffect(function () {
-    return state.update();
-  });
-  shared.useOnce(function () {
+  React.useEffect(() => state.update());
+  shared.useOnce(() => {
     setReady(true);
-
-    var onResize = function onResize() {
-      var update = function update() {
-        return state.update();
-      };
-
-      globals.frameLoop.onFrame(update);
-      setTimeout(update, 150); // Some browsers don't fire on maximize!
+    const onResize = () => {
+      const update2 = () => state.update();
+      shared.raf.onFrame(update2);
+      setTimeout(update2, 150);
     };
-
-    window.addEventListener('resize', onResize, false);
-    return function () {
-      return window.removeEventListener('resize', onResize, false);
-    };
+    window.addEventListener("resize", onResize, false);
+    return () => window.removeEventListener("resize", onResize, false);
   });
-  var overflow = enabled ? 'scroll' : 'hidden';
-  return /*#__PURE__*/React.createElement(web.a.div, _extends({}, rest, {
+  const overflow = enabled ? "scroll" : "hidden";
+  return /* @__PURE__ */ React.createElement(web.a.div, {
+    ...rest,
     ref: containerRef,
-    onScroll: onScroll,
-    onWheel: enabled ? state.stop : undefined,
-    onTouchStart: enabled ? state.stop : undefined,
-    style: _extends({
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      overflow: overflow,
-      overflowY: horizontal ? 'hidden' : overflow,
-      overflowX: horizontal ? overflow : 'hidden',
-      WebkitOverflowScrolling: 'touch',
+    onScroll,
+    onWheel: enabled ? state.stop : void 0,
+    onTouchStart: enabled ? state.stop : void 0,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      overflow,
+      overflowY: horizontal ? "hidden" : overflow,
+      overflowX: horizontal ? overflow : "hidden",
+      WebkitOverflowScrolling: "touch",
       WebkitTransform: START_TRANSLATE,
       msTransform: START_TRANSLATE,
-      transform: START_TRANSLATE_3D
-    }, rest.style)
-  }), ready && /*#__PURE__*/React.createElement(web.a.div, {
+      transform: START_TRANSLATE_3D,
+      ...rest.style
+    }
+  }, ready && /* @__PURE__ */ React.createElement(web.a.div, {
     ref: contentRef,
-    style: _extends((_extends3 = {
-      overflow: 'hidden',
-      position: 'absolute'
-    }, _extends3[horizontal ? 'height' : 'width'] = '100%', _extends3[horizontal ? 'width' : 'height'] = state.space * pages, _extends3.WebkitTransform = START_TRANSLATE, _extends3.msTransform = START_TRANSLATE, _extends3.transform = START_TRANSLATE_3D, _extends3), props.innerStyle)
-  }, /*#__PURE__*/React.createElement(ParentContext.Provider, {
+    style: {
+      overflow: "hidden",
+      position: "absolute",
+      [horizontal ? "height" : "width"]: "100%",
+      [horizontal ? "width" : "height"]: state.space * pages,
+      WebkitTransform: START_TRANSLATE,
+      msTransform: START_TRANSLATE,
+      transform: START_TRANSLATE_3D,
+      ...props.innerStyle
+    }
+  }, /* @__PURE__ */ React.createElement(ParentContext.Provider, {
     value: state
@@ -277,0 +194,0 @@ }, rest.children)));

index.js

@@ -1,29 +0,13 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import { createContext, memo, forwardRef, useContext, useImperativeHandle, createElement, useState, useEffect, useRef } from 'react';
+import { useMemoOne, useOnce, raf } from '@react-spring/shared';
 import { Controller, a, config } from '@react-spring/web';
-import { useMemoOne } from 'use-memo-one';
-import { frameLoop } from '@react-spring/shared/globals';
-import { useOnce } from '@react-spring/shared';
 
 const ParentContext = createContext(null);
-
 function getScrollType(horizontal) {
-  return horizontal ? 'scrollLeft' : 'scrollTop';
+  return horizontal ? "scrollLeft" : "scrollTop";
 }
-
-const START_TRANSLATE_3D = 'translate3d(0px,0px,0px)';
-const START_TRANSLATE = 'translate(0px,0px)';
-const ParallaxLayer = memo(forwardRef((_ref, ref) => {
-  let {
-    horizontal,
-    factor = 1,
-    offset = 0,
-    speed = 0
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, ["horizontal", "factor", "offset", "speed"]);
-
-  // Our parent controls our height and position.
-  const parent = useContext(ParentContext); // This is how we animate.
-
+const START_TRANSLATE_3D = "translate3d(0px,0px,0px)";
+const START_TRANSLATE = "translate(0px,0px)";
+const ParallaxLayer = memo(forwardRef(({horizontal, factor = 1, offset = 0, speed = 0, ...rest}, ref) => {
+  const parent = useContext(ParentContext);
   const ctrl = useMemoOne(() => {
@@ -36,8 +20,6 @@ const targetScroll = Math.floor(offset) * parent.space;
     });
-  }, []); // Create the layer.
-
+  }, []);
   const layer = useMemoOne(() => ({
     setPosition(height, scrollTop, immediate = false) {
-      const targetScroll = Math.floor(offset) * height;
-      const distance = height * offset + targetScroll * speed;
+      const distance = height * offset;
       ctrl.start({
@@ -49,3 +31,2 @@ translate: -(scrollTop * speed) + distance,
     },
-
     setHeight(height, immediate = false) {
@@ -58,6 +39,4 @@ ctrl.start({
     }
-
   }), []);
-  useImperativeHandle(ref, () => layer); // Register the layer with our parent.
-
+  useImperativeHandle(ref, () => layer);
   useOnce(() => {
@@ -73,28 +52,29 @@ if (parent) {
   });
-  const translate3d = ctrl.springs.translate.to(horizontal ? x => "translate3d(" + x + "px,0,0)" : y => "translate3d(0," + y + "px,0)");
-  return /*#__PURE__*/createElement(a.div, _extends({}, rest, {
-    style: _extends({
-      position: 'absolute',
-      backgroundSize: 'auto',
-      backgroundRepeat: 'no-repeat',
-      willChange: 'transform',
-      [horizontal ? 'height' : 'width']: '100%',
-      [horizontal ? 'width' : 'height']: ctrl.springs.space,
+  const translate3d = ctrl.springs.translate.to(horizontal ? (x) => `translate3d(${x}px,0,0)` : (y) => `translate3d(0,${y}px,0)`);
+  return /* @__PURE__ */ createElement(a.div, {
+    ...rest,
+    style: {
+      position: "absolute",
+      backgroundSize: "auto",
+      backgroundRepeat: "no-repeat",
+      willChange: "transform",
+      [horizontal ? "height" : "width"]: "100%",
+      [horizontal ? "width" : "height"]: ctrl.springs.space,
       WebkitTransform: translate3d,
       msTransform: translate3d,
-      transform: translate3d
-    }, rest.style)
-  }));
+      transform: translate3d,
+      ...rest.style
+    }
+  });
 }));
 const Parallax = memo(forwardRef((props, ref) => {
   const [ready, setReady] = useState(false);
-
   const {
     pages,
+    innerStyle,
     config: config$1 = config.slow,
     enabled = true,
-    horizontal = false
-  } = props,
-        rest = _objectWithoutPropertiesLoose(props, ["pages", "innerStyle", "config", "enabled", "horizontal"]);
-
+    horizontal = false,
+    ...rest
+  } = props;
   const state = useMemoOne(() => ({
@@ -106,28 +86,6 @@ config: config$1,
     offset: 0,
-    controller: new Controller({
-      scroll: 0
-    }),
+    controller: new Controller({scroll: 0}),
     layers: new Set(),
-    update: function (_update) {
-      function update() {
-        return _update.apply(this, arguments);
-      }
-
-      update.toString = function () {
-        return _update.toString();
-      };
-
-      return update;
-    }(() => update()),
-    scrollTo: function (_scrollTo) {
-      function scrollTo(_x) {
-        return _scrollTo.apply(this, arguments);
-      }
-
-      scrollTo.toString = function () {
-        return _scrollTo.toString();
-      };
-
-      return scrollTo;
-    }(offset => scrollTo(offset)),
+    update: () => update(),
+    scrollTo: (offset) => scrollTo(offset),
     stop: () => state.controller.stop()
@@ -141,10 +99,9 @@ }), []);
   const contentRef = useRef();
-
   const update = () => {
     const container = containerRef.current;
-    if (!container) return;
-    const spaceProp = horizontal ? 'clientWidth' : 'clientHeight';
+    if (!container)
+      return;
+    const spaceProp = horizontal ? "clientWidth" : "clientHeight";
     state.space = container[spaceProp];
     const scrollType = getScrollType(horizontal);
-
     if (enabled) {
@@ -155,11 +112,8 @@ state.current = container[scrollType];
     }
-
     const content = contentRef.current;
-
     if (content) {
-      const sizeProp = horizontal ? 'width' : 'height';
-      content.style[sizeProp] = state.space * pages + "px";
+      const sizeProp = horizontal ? "width" : "height";
+      content.style[sizeProp] = `${state.space * pages}px`;
     }
-
-    state.layers.forEach(layer => {
+    state.layers.forEach((layer) => {
       layer.setHeight(state.space, true);
@@ -169,4 +123,3 @@ layer.setPosition(state.space, state.current, true);
   };
-
-  const scrollTo = offset => {
+  const scrollTo = (offset) => {
     const container = containerRef.current;
@@ -178,18 +131,13 @@ const scrollType = getScrollType(horizontal);
       config: config$1,
-
-      onChange({
-        scroll
-      }) {
+      onChange({scroll}) {
         container[scrollType] = scroll;
       }
-
     });
   };
-
-  const onScroll = event => {
+  const onScroll = (event) => {
     if (!state.busy) {
       state.busy = true;
       state.current = event.target[getScrollType(horizontal)];
-      frameLoop.onFrame(() => {
-        state.layers.forEach(layer => layer.setPosition(state.space, state.current));
+      raf.onStart(() => {
+        state.layers.forEach((layer) => layer.setPosition(state.space, state.current));
         state.busy = false;
@@ -199,47 +147,46 @@ });
   };
-
   useEffect(() => state.update());
   useOnce(() => {
     setReady(true);
-
     const onResize = () => {
-      const update = () => state.update();
-
-      frameLoop.onFrame(update);
-      setTimeout(update, 150); // Some browsers don't fire on maximize!
+      const update2 = () => state.update();
+      raf.onFrame(update2);
+      setTimeout(update2, 150);
     };
-
-    window.addEventListener('resize', onResize, false);
-    return () => window.removeEventListener('resize', onResize, false);
+    window.addEventListener("resize", onResize, false);
+    return () => window.removeEventListener("resize", onResize, false);
   });
-  const overflow = enabled ? 'scroll' : 'hidden';
-  return /*#__PURE__*/createElement(a.div, _extends({}, rest, {
+  const overflow = enabled ? "scroll" : "hidden";
+  return /* @__PURE__ */ createElement(a.div, {
+    ...rest,
     ref: containerRef,
-    onScroll: onScroll,
-    onWheel: enabled ? state.stop : undefined,
-    onTouchStart: enabled ? state.stop : undefined,
-    style: _extends({
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
+    onScroll,
+    onWheel: enabled ? state.stop : void 0,
+    onTouchStart: enabled ? state.stop : void 0,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
       overflow,
-      overflowY: horizontal ? 'hidden' : overflow,
-      overflowX: horizontal ? overflow : 'hidden',
-      WebkitOverflowScrolling: 'touch',
+      overflowY: horizontal ? "hidden" : overflow,
+      overflowX: horizontal ? overflow : "hidden",
+      WebkitOverflowScrolling: "touch",
       WebkitTransform: START_TRANSLATE,
       msTransform: START_TRANSLATE,
-      transform: START_TRANSLATE_3D
-    }, rest.style)
-  }), ready && /*#__PURE__*/createElement(a.div, {
+      transform: START_TRANSLATE_3D,
+      ...rest.style
+    }
+  }, ready && /* @__PURE__ */ createElement(a.div, {
     ref: contentRef,
-    style: _extends({
-      overflow: 'hidden',
-      position: 'absolute',
-      [horizontal ? 'height' : 'width']: '100%',
-      [horizontal ? 'width' : 'height']: state.space * pages,
+    style: {
+      overflow: "hidden",
+      position: "absolute",
+      [horizontal ? "height" : "width"]: "100%",
+      [horizontal ? "width" : "height"]: state.space * pages,
       WebkitTransform: START_TRANSLATE,
       msTransform: START_TRANSLATE,
-      transform: START_TRANSLATE_3D
-    }, props.innerStyle)
-  }, /*#__PURE__*/createElement(ParentContext.Provider, {
+      transform: START_TRANSLATE_3D,
+      ...props.innerStyle
+    }
+  }, /* @__PURE__ */ createElement(ParentContext.Provider, {
     value: state
@@ -246,0 +193,0 @@ }, rest.children)));

package.json

 {
   "name": "@react-spring/parallax",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0",
   "description": "Cross-platform animation engine for React",
@@ -16,12 +16,6 @@ "keywords": [
   ],
-  "homepage": "https://github.com/react-spring/react-spring/tree/master/packages/parallax#readme",
-  "bugs": {
-    "url": "https://github.com/react-spring/react-spring/issues"
-  },
+  "homepage": "https://github.com/pmndrs/react-spring/tree/v9/packages/parallax#readme",
+  "repository": "pmndrs/react-spring",
   "license": "MIT",
   "author": "Paul Henschel",
-  "contributors": [
-    "Alec Larson (https://github.com/aleclarson)"
-  ],
-  "sideEffects": false,
   "main": "index.cjs.js",
@@ -31,9 +25,7 @@ "module": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
-    "@react-spring/shared": "9.0.0-rc.3",
-    "@react-spring/web": "9.0.0-rc.3",
-    "use-memo-one": "^1.1.0"
+    "@react-spring/shared": "^9.0.0",
+    "@react-spring/web": "^9.0.0"
   },
   "devDependencies": {
-    "typescript": "3.8.3"
+    "typescript": "^4.0.0"
   },
@@ -45,3 +37,4 @@ "peerDependencies": {
     "access": "public"
-  }
+  },
+  "maintainers": []
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-40%

Worsened metrics

Total package byte prevSize

31769

decreased by-34.06%

Number of package files

9

decreased by-10%

Lines of code

670

decreased by-15.83%

Number of low maintenance alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@react-spring/animated@9.7.5(transitive)

• + Added@react-spring/core@9.7.5(transitive)

• + Added@react-spring/rafz@9.7.5(transitive)

• + Added@react-spring/shared@9.7.5(transitive)

• + Added@react-spring/types@9.7.5(transitive)

• + Added@react-spring/web@9.7.5(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@babel/runtime@^7.3.1

• - Removeduse-memo-one@^1.1.0

• - Removed@alloc/types@1.3.0(transitive)

• - Removed@babel/runtime@7.26.9(transitive)

• - Removed@react-spring/animated@9.0.0-rc.3(transitive)

• - Removed@react-spring/core@9.0.0-rc.3(transitive)

• - Removed@react-spring/shared@9.0.0-rc.3(transitive)

• - Removed@react-spring/web@9.0.0-rc.3(transitive)

• - Removedfluids@0.1.10(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedreact-layout-effect@1.0.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedscheduler@0.25.0(transitive)

• - Removedtslib@1.14.1(transitive)

• - Removeduse-memo-one@1.1.3(transitive)

• Updated@react-spring/shared@^9.0.0

• Updated@react-spring/web@^9.0.0