@react-spring/parallax - npm Package Compare versions

Comparing version 9.7.1 to 9.7.2

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var H=Object.create;var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(t,o)=>{for(var i in o)T(t,i,{get:o[i],enumerable:!0})},E=(t,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of M(o))!O.call(t,s)&&s!==i&&T(t,s,{get:()=>o[s],enumerable:!(l=F(o,s))||l.enumerable});return t};var _=(t,o,i)=>(i=t!=null?H(N(t)):{},E(o||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),$=t=>E(T({},"__esModule",{value:!0}),t);var Y={};V(Y,{Parallax:()=>X,ParallaxLayer:()=>j});module.exports=$(Y);var r=_(require("react")),u=require("react"),d=require("@react-spring/shared"),m=require("@react-spring/web"),I=r.createContext(null);function L(t){return t?"scrollLeft":"scrollTop"}function A(t,o){let i=l=>l.type?l.type===r.Fragment:l===r.Fragment;return r.Children.map(t,l=>i(l)?A(l.props.children,o):o(l))}var W="translate3d(0px,0px,0px)",k="translate(0px,0px)",j=r.memo(r.forwardRef(({horizontal:t,factor:o=1,offset:i=0,speed:l=0,sticky:s,...z},P)=>{let a=(0,u.useContext)(I),c=(0,d.useMemoOne)(()=>{let e;if(s)e=(s.start||0)*a.space;else{let f=Math.floor(i)*a.space,y=a.space*i+f*l;e=-(a.current*l)+y}return new m.Controller({space:s?a.space:a.space*o,translate:e})},[]),p=(0,d.useMemoOne)(()=>({horizontal:t===void 0||s?a.horizontal:t,sticky:void 0,isSticky:!1,setPosition(e,f,y=!1){if(s)R(e,f);else{let S=Math.floor(i)*e,b=e*i+S*l;c.start({translate:-(f*l)+b,config:a.config,immediate:y})}},setHeight(e,f=!1){c.start({space:s?e:e*o,config:a.config,immediate:f})}}),[]);(0,d.useOnce)(()=>{if(s){let e=s.start||0,f=s.end||e+1;p.sticky={start:e,end:f}}}),r.useImperativeHandle(P,()=>p);let x=(0,u.useRef)(),R=(e,f)=>{let y=p.sticky.start*e,S=p.sticky.end*e,b=f>=y&&f<=S;if(b===p.isSticky)return;p.isSticky=b;let n=x.current;n.style.position=b?"sticky":"absolute",c.set({translate:b?0:f<y?y:S})};(0,d.useOnce)(()=>{if(a)return a.layers.add(p),a.update(),()=>{a.layers.delete(p),a.update()}});let h=c.springs.translate.to(p.horizontal?e=>`translate3d(${e}px,0,0)`:e=>`translate3d(0,${e}px,0)`);return r.createElement(m.a.div,{...z,ref:x,style:{position:"absolute",top:0,bottom:0,left:0,right:0,backgroundSize:"auto",backgroundRepeat:"no-repeat",willChange:"transform",[p.horizontal?"height":"width"]:"100%",[p.horizontal?"width":"height"]:c.springs.space,WebkitTransform:h,msTransform:h,transform:h,...z.style}})})),X=r.memo(r.forwardRef((t,o)=>{let[i,l]=(0,u.useState)(!1),{pages:s,innerStyle:z,config:P=m.config.slow,enabled:a=!0,horizontal:c=!1,children:p,...x}=t,R=(0,u.useRef)(),h=(0,u.useRef)(),e=(0,d.useMemoOne)(()=>({config:P,horizontal:c,busy:!1,space:0,current:0,offset:0,controller:new m.Controller({scroll:0}),layers:new Set,container:R,content:h,update:()=>f(),scrollTo:n=>y(n),stop:()=>e.controller.stop()}),[]);(0,u.useEffect)(()=>{e.config=P},[P]),r.useImperativeHandle(o,()=>e);let f=()=>{let n=R.current;if(!n)return;let g=c?"clientWidth":"clientHeight";e.space=n[g];let v=L(c);a?e.current=n[v]:n[v]=e.current=e.offset*e.space;let w=h.current;if(w){let C=c?"width":"height";w.style[C]=`${e.space*s}px`}e.layers.forEach(C=>{C.setHeight(e.space,!0),C.setPosition(e.space,e.current,!0)})},y=n=>{let g=R.current,v=L(c);e.offset=n,e.controller.set({scroll:e.current}),e.controller.stop().start({scroll:n*e.space,config:P,onChange({value:{scroll:w}}){g[v]=w}})},S=n=>{e.busy||(e.busy=!0,e.current=n.target[L(c)],d.raf.onStart(()=>{e.layers.forEach(g=>g.setPosition(e.space,e.current)),e.busy=!1}))};(0,u.useEffect)(()=>e.update()),(0,d.useOnce)(()=>{l(!0);let n=()=>{let g=()=>e.update();d.raf.onFrame(g),setTimeout(g,150)};return window.addEventListener("resize",n,!1),()=>window.removeEventListener("resize",n,!1)});let b=a?{overflowY:c?"hidden":"scroll",overflowX:c?"scroll":"hidden"}:{overflowY:"hidden",overflowX:"hidden"};return r.createElement(m.a.div,{...x,ref:R,onScroll:S,onWheel:a?e.stop:void 0,onTouchStart:a?e.stop:void 0,style:{position:"absolute",width:"100%",height:"100%",...b,WebkitOverflowScrolling:"touch",WebkitTransform:k,msTransform:k,transform:W,...x.style}},i&&r.createElement(r.Fragment,null,r.createElement(m.a.div,{ref:h,style:{overflow:"hidden",position:"absolute",[c?"height":"width"]:"100%",[c?"width":"height"]:e.space*s,WebkitTransform:k,msTransform:k,transform:W,...t.innerStyle}},r.createElement(I.Provider,{value:e},A(p,n=>!n.props.sticky&&n))),r.createElement(I.Provider,{value:e},A(p,n=>n.props.sticky&&n))))}));0&&(module.exports={Parallax,ParallaxLayer});
+"use strict";var H=Object.create;var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var _=(t,o)=>{for(var i in o)T(t,i,{get:o[i],enumerable:!0})},E=(t,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of M(o))!O.call(t,s)&&s!==i&&T(t,s,{get:()=>o[s],enumerable:!(l=F(o,s))||l.enumerable});return t};var V=(t,o,i)=>(i=t!=null?H(N(t)):{},E(o||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),$=t=>E(T({},"__esModule",{value:!0}),t);var Y={};_(Y,{Parallax:()=>X,ParallaxLayer:()=>j});module.exports=$(Y);var r=V(require("react")),u=require("react"),d=require("@react-spring/shared"),m=require("@react-spring/web"),I=r.createContext(null);function L(t){return t?"scrollLeft":"scrollTop"}function A(t,o){let i=l=>l.type?l.type===r.Fragment:l===r.Fragment;return r.Children.map(t,l=>i(l)?A(l.props.children,o):o(l))}var W="translate3d(0px,0px,0px)",k="translate(0px,0px)",j=r.memo(r.forwardRef(({horizontal:t,factor:o=1,offset:i=0,speed:l=0,sticky:s,...z},P)=>{let a=(0,u.useContext)(I),c=(0,d.useMemoOne)(()=>{let e;if(s)e=(s.start||0)*a.space;else{let f=Math.floor(i)*a.space,y=a.space*i+f*l;e=-(a.current*l)+y}return new m.Controller({space:s?a.space:a.space*o,translate:e})},[]),p=(0,d.useMemoOne)(()=>({horizontal:t===void 0||s?a.horizontal:t,sticky:void 0,isSticky:!1,setPosition(e,f,y=!1){if(s)R(e,f);else{let S=Math.floor(i)*e,b=e*i+S*l;c.start({translate:-(f*l)+b,config:a.config,immediate:y})}},setHeight(e,f=!1){c.start({space:s?e:e*o,config:a.config,immediate:f})}}),[]);(0,d.useOnce)(()=>{if(s){let e=s.start||0,f=s.end||e+1;p.sticky={start:e,end:f}}}),r.useImperativeHandle(P,()=>p);let x=(0,u.useRef)(),R=(e,f)=>{let y=p.sticky.start*e,S=p.sticky.end*e,b=f>=y&&f<=S;if(b===p.isSticky)return;p.isSticky=b;let n=x.current;n.style.position=b?"sticky":"absolute",c.set({translate:b?0:f<y?y:S})};(0,d.useOnce)(()=>{if(a)return a.layers.add(p),a.update(),()=>{a.layers.delete(p),a.update()}});let h=c.springs.translate.to(p.horizontal?e=>`translate3d(${e}px,0,0)`:e=>`translate3d(0,${e}px,0)`);return r.createElement(m.a.div,{...z,ref:x,style:{position:"absolute",top:0,bottom:0,left:0,right:0,backgroundSize:"auto",backgroundRepeat:"no-repeat",willChange:"transform",[p.horizontal?"height":"width"]:"100%",[p.horizontal?"width":"height"]:c.springs.space,WebkitTransform:h,msTransform:h,transform:h,...z.style}})})),X=r.memo(r.forwardRef((t,o)=>{let[i,l]=(0,u.useState)(!1),{pages:s,innerStyle:z,config:P=m.config.slow,enabled:a=!0,horizontal:c=!1,children:p,...x}=t,R=(0,u.useRef)(),h=(0,u.useRef)(),e=(0,d.useMemoOne)(()=>({config:P,horizontal:c,busy:!1,space:0,current:0,offset:0,controller:new m.Controller({scroll:0}),layers:new Set,container:R,content:h,update:()=>f(),scrollTo:n=>y(n),stop:()=>e.controller.stop()}),[]);(0,u.useEffect)(()=>{e.config=P},[P]),r.useImperativeHandle(o,()=>e);let f=()=>{let n=R.current;if(!n)return;let g=c?"clientWidth":"clientHeight";e.space=n[g];let v=L(c);a?e.current=n[v]:n[v]=e.current=e.offset*e.space;let w=h.current;if(w){let C=c?"width":"height";w.style[C]=`${e.space*s}px`}e.layers.forEach(C=>{C.setHeight(e.space,!0),C.setPosition(e.space,e.current,!0)})},y=n=>{let g=R.current,v=L(c);e.offset=n,e.controller.set({scroll:e.current}),e.controller.stop().start({scroll:n*e.space,config:P,onChange({value:{scroll:w}}){g[v]=w}})},S=n=>{e.busy||(e.busy=!0,e.current=n.target[L(c)],d.raf.onStart(()=>{e.layers.forEach(g=>g.setPosition(e.space,e.current)),e.busy=!1}))};(0,u.useEffect)(()=>e.update()),(0,d.useOnce)(()=>{l(!0);let n=()=>{let g=()=>e.update();d.raf.onFrame(g),setTimeout(g,150)};return window.addEventListener("resize",n,!1),()=>window.removeEventListener("resize",n,!1)});let b=a?{overflowY:c?"hidden":"scroll",overflowX:c?"scroll":"hidden"}:{overflowY:"hidden",overflowX:"hidden"};return r.createElement(m.a.div,{...x,ref:R,onScroll:S,onWheel:a?e.stop:void 0,onTouchStart:a?e.stop:void 0,style:{position:"absolute",width:"100%",height:"100%",...b,WebkitOverflowScrolling:"touch",WebkitTransform:k,msTransform:k,transform:W,...x.style}},i&&r.createElement(r.Fragment,null,r.createElement(m.a.div,{ref:h,style:{overflow:"hidden",position:"absolute",[c?"height":"width"]:"100%",[c?"width":"height"]:e.space*s,WebkitTransform:k,msTransform:k,transform:W,...t.innerStyle}},r.createElement(I.Provider,{value:e},A(p,n=>!n.props.sticky&&n))),r.createElement(I.Provider,{value:e},A(p,n=>n.props.sticky&&n))))}));0&&(module.exports={Parallax,ParallaxLayer});

package.json

 {
   "name": "@react-spring/parallax",
-  "version": "9.7.1",
+  "version": "9.7.2",
   "main": "dist/index.js",
@@ -41,8 +41,10 @@ "module": "dist/esm/index.js",
     "build": "tsup --legacy-output",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "dev": "tsup",
+    "lint": "TIMING=1 eslint \"src/**/*.ts*\"",
     "test": "vite serve ./test"
   },
   "dependencies": {
-    "@react-spring/shared": "~9.7.1",
-    "@react-spring/web": "~9.7.1"
+    "@react-spring/shared": "~9.7.2",
+    "@react-spring/web": "~9.7.2"
   },
@@ -49,0 +51,0 @@ "peerDependencies": {

README.md

@@ -91,4 +91,4 @@ # @react-spring/parallax
 
-- [Parallax - vertical](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax-vert)
-- [Parallax - horizontal](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax)
-- [Parallax - sticky](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/parallax-sticky)
+- [Parallax - vertical](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax-vert)
+- [Parallax - horizontal](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax)
+- [Parallax - sticky](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/parallax-sticky)

No alert changes

Improved metrics

Total package byte prevSize

17904

increased by0.62%

Dependency changes

• Updated@react-spring/shared@~9.7.2

• Updated@react-spring/web@~9.7.2