@studio-freight/react-lenis - npm Package Compare versions

Comparing version 0.0.46 to 0.0.47

dist/react-lenis.cjs.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@studio-freight/hamo"),r=require("@studio-freight/lenis"),t=require("clsx"),n=require("react"),s=require("zustand");"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.46");const a=n.createContext(),l=s.create((()=>({})));const c=n.forwardRef(((s,c)=>{var{children:o,root:u=!1,options:i={},autoRaf:f=!0,rafPriority:p=0,className:d}=s,b=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)r.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(t[n[s]]=e[n[s]])}return t}(s,["children","root","options","autoRaf","rafPriority","className"]);const m=n.useRef(),y=n.useRef(),[v,O]=n.useState(),k=n.useRef([]),C=n.useCallback(((e,r)=>{k.current.push({callback:e,priority:r}),k.current.sort(((e,r)=>e.priority-r.priority))}),[]),g=n.useCallback((e=>{k.current=k.current.filter((r=>r.callback!==e))}),[]);n.useImperativeHandle(c,(()=>({wrapper:m.current,content:y.current,lenis:v})),[v]),n.useEffect((()=>{const e=new r(Object.assign(Object.assign({},i),!u&&{wrapper:m.current,content:y.current}));return O(e),()=>{e.destroy(),O(void 0)}}),[u,JSON.stringify(i)]),e.useFrame((e=>{f&&(null==v||v.raf(e))}),p),n.useEffect((()=>{u&&v&&l.setState({lenis:v,addCallback:C,removeCallback:g})}),[u,v,C,g]);const x=n.useCallback((e=>{for(let r=0;r<k.current.length;r++)k.current[r].callback(e)}),[]);n.useEffect((()=>(null==v||v.on("scroll",x),()=>{null==v||v.off("scroll",x)})),[v,x]);const h=n.useCallback((()=>{m.current&&(m.current.className=t(null==v?void 0:v.className,d))}),[v,d]);return n.useEffect((()=>(h(),null==v||v.on("className change",h),()=>{null==v||v.off("className change",h)})),[v,h]),n.createElement(a.Provider,{value:{lenis:v,addCallback:C,removeCallback:g}},u?o:n.createElement("div",Object.assign({ref:m,className:t(null==v?void 0:v.className,d)},b),n.createElement("div",{ref:y},o)))}));exports.Lenis=c,exports.LenisContext=a,exports.ReactLenis=c,exports.default=c,exports.useLenis=function(e,r=[],t=0){const{lenis:s,addCallback:c,removeCallback:o}=function(){const e=n.useContext(a),r=l();return null!=e?e:r}();return n.useEffect((()=>{if(e&&c&&o&&s)return c(e,t),e(s),()=>{o(e)}}),[s,c,o,t,...r]),s};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@studio-freight/hamo"),r=require("@studio-freight/lenis"),t=require("clsx"),n=require("react"),l=require("zustand");"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.47");const s=n.createContext(null),a=l.create((()=>({})));const c=n.forwardRef(((l,c)=>{var{children:o,root:u=!1,options:i={},autoRaf:f=!0,rafPriority:p=0,className:d}=l,b=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++)r.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(t[n[l]]=e[n[l]])}return t}(l,["children","root","options","autoRaf","rafPriority","className"]);const m=n.useRef(null),y=n.useRef(null),[v,O]=n.useState(void 0),k=n.useRef([]),C=n.useCallback(((e,r)=>{k.current.push({callback:e,priority:r}),k.current.sort(((e,r)=>e.priority-r.priority))}),[]),g=n.useCallback((e=>{k.current=k.current.filter((r=>r.callback!==e))}),[]);n.useImperativeHandle(c,(()=>({wrapper:m.current,content:y.current,lenis:v})),[v]),n.useEffect((()=>{const e=new r(Object.assign(Object.assign({},i),!u&&{wrapper:m.current,content:y.current}));return O(e),()=>{e.destroy(),O(void 0)}}),[u,JSON.stringify(i)]),e.useFrame((e=>{f&&(null==v||v.raf(e))}),p),n.useEffect((()=>{u&&v&&a.setState({lenis:v,addCallback:C,removeCallback:g})}),[u,v,C,g]);const x=n.useCallback((e=>{for(let r=0;r<k.current.length;r++)k.current[r].callback(e)}),[]);n.useEffect((()=>(null==v||v.on("scroll",x),()=>{null==v||v.off("scroll",x)})),[v,x]);const h=n.useCallback((()=>{m.current&&(m.current.className=t(null==v?void 0:v.className,d))}),[v,d]);return n.useEffect((()=>(h(),null==v||v.on("className change",h),()=>{null==v||v.off("className change",h)})),[v,h]),n.createElement(s.Provider,{value:{lenis:v,addCallback:C,removeCallback:g}},u?o:n.createElement("div",Object.assign({ref:m,className:t(null==v?void 0:v.className,d)},b),n.createElement("div",{ref:y},o)))}));exports.Lenis=c,exports.LenisContext=s,exports.ReactLenis=c,exports.default=c,exports.useLenis=function(e,r=[],t=0){const{lenis:l,addCallback:c,removeCallback:o}=function(){const e=n.useContext(s),r=a();return null!=e?e:r}();return n.useEffect((()=>{if(e&&c&&o&&l)return c(e,t),e(l),()=>{o(e)}}),[l,c,o,t,...r]),l};
 //# sourceMappingURL=react-lenis.cjs.js.map

dist/react-lenis.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@studio-freight/hamo"),require("@studio-freight/lenis"),require("clsx"),require("react"),require("zustand")):"function"==typeof define&&define.amd?define(["exports","@studio-freight/hamo","@studio-freight/lenis","clsx","react","zustand"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactLenis={},e.hamo,e.Lenis,e.cn,e.React,e.zustand)}(this,(function(e,t,r,n,s,a){"use strict";"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.46");const o=s.createContext(),c=a.create((()=>({})));const l=s.forwardRef(((e,a)=>{var{children:l,root:i=!1,options:u={},autoRaf:f=!0,rafPriority:d=0,className:p}=e,b=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(e,["children","root","options","autoRaf","rafPriority","className"]);const m=s.useRef(),y=s.useRef(),[h,g]=s.useState(),v=s.useRef([]),O=s.useCallback(((e,t)=>{v.current.push({callback:e,priority:t}),v.current.sort(((e,t)=>e.priority-t.priority))}),[]),k=s.useCallback((e=>{v.current=v.current.filter((t=>t.callback!==e))}),[]);s.useImperativeHandle(a,(()=>({wrapper:m.current,content:y.current,lenis:h})),[h]),s.useEffect((()=>{const e=new r(Object.assign(Object.assign({},u),!i&&{wrapper:m.current,content:y.current}));return g(e),()=>{e.destroy(),g(void 0)}}),[i,JSON.stringify(u)]),t.useFrame((e=>{f&&(null==h||h.raf(e))}),d),s.useEffect((()=>{i&&h&&c.setState({lenis:h,addCallback:O,removeCallback:k})}),[i,h,O,k]);const C=s.useCallback((e=>{for(let t=0;t<v.current.length;t++)v.current[t].callback(e)}),[]);s.useEffect((()=>(null==h||h.on("scroll",C),()=>{null==h||h.off("scroll",C)})),[h,C]);const w=s.useCallback((()=>{m.current&&(m.current.className=n(null==h?void 0:h.className,p))}),[h,p]);return s.useEffect((()=>(w(),null==h||h.on("className change",w),()=>{null==h||h.off("className change",w)})),[h,w]),s.createElement(o.Provider,{value:{lenis:h,addCallback:O,removeCallback:k}},i?l:s.createElement("div",Object.assign({ref:m,className:n(null==h?void 0:h.className,p)},b),s.createElement("div",{ref:y},l)))}));e.Lenis=l,e.LenisContext=o,e.ReactLenis=l,e.default=l,e.useLenis=function(e,t=[],r=0){const{lenis:n,addCallback:a,removeCallback:l}=function(){const e=s.useContext(o),t=c();return null!=e?e:t}();return s.useEffect((()=>{if(e&&a&&l&&n)return a(e,r),e(n),()=>{l(e)}}),[n,a,l,r,...t]),n},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@studio-freight/hamo"),require("@studio-freight/lenis"),require("clsx"),require("react"),require("zustand")):"function"==typeof define&&define.amd?define(["exports","@studio-freight/hamo","@studio-freight/lenis","clsx","react","zustand"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactLenis={},e.hamo,e.Lenis,e.cn,e.React,e.zustand)}(this,(function(e,t,r,n,l,s){"use strict";"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.47");const a=l.createContext(null),o=s.create((()=>({})));const c=l.forwardRef(((e,s)=>{var{children:c,root:u=!1,options:i={},autoRaf:f=!0,rafPriority:d=0,className:p}=e,b=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++)t.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(r[n[l]]=e[n[l]])}return r}(e,["children","root","options","autoRaf","rafPriority","className"]);const m=l.useRef(null),y=l.useRef(null),[h,v]=l.useState(void 0),g=l.useRef([]),O=l.useCallback(((e,t)=>{g.current.push({callback:e,priority:t}),g.current.sort(((e,t)=>e.priority-t.priority))}),[]),k=l.useCallback((e=>{g.current=g.current.filter((t=>t.callback!==e))}),[]);l.useImperativeHandle(s,(()=>({wrapper:m.current,content:y.current,lenis:h})),[h]),l.useEffect((()=>{const e=new r(Object.assign(Object.assign({},i),!u&&{wrapper:m.current,content:y.current}));return v(e),()=>{e.destroy(),v(void 0)}}),[u,JSON.stringify(i)]),t.useFrame((e=>{f&&(null==h||h.raf(e))}),d),l.useEffect((()=>{u&&h&&o.setState({lenis:h,addCallback:O,removeCallback:k})}),[u,h,O,k]);const C=l.useCallback((e=>{for(let t=0;t<g.current.length;t++)g.current[t].callback(e)}),[]);l.useEffect((()=>(null==h||h.on("scroll",C),()=>{null==h||h.off("scroll",C)})),[h,C]);const w=l.useCallback((()=>{m.current&&(m.current.className=n(null==h?void 0:h.className,p))}),[h,p]);return l.useEffect((()=>(w(),null==h||h.on("className change",w),()=>{null==h||h.off("className change",w)})),[h,w]),l.createElement(a.Provider,{value:{lenis:h,addCallback:O,removeCallback:k}},u?c:l.createElement("div",Object.assign({ref:m,className:n(null==h?void 0:h.className,p)},b),l.createElement("div",{ref:y},c)))}));e.Lenis=c,e.LenisContext=a,e.ReactLenis=c,e.default=c,e.useLenis=function(e,t=[],r=0){const{lenis:n,addCallback:s,removeCallback:c}=function(){const e=l.useContext(a),t=o();return null!=e?e:t}();return l.useEffect((()=>{if(e&&s&&c&&n)return s(e,r),e(n),()=>{c(e)}}),[n,s,c,r,...t]),n},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-lenis.umd.js.map

dist/types/index.d.ts

 import Lenis, { LenisOptions } from '@studio-freight/lenis';
-import { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-export declare const LenisContext: Lenis | null;
+import React, { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+type LenisEventHandler = (lenis: Lenis) => void;
+interface LenisContextValue {
+    lenis: Lenis;
+    addCallback: (handler: LenisEventHandler, priority: number) => void;
+    removeCallback: (handler: LenisEventHandler) => void;
+}
+declare global {
+    interface Window {
+        reactLenisVersion: string;
+    }
+}
+export declare const LenisContext: React.Context<LenisContextValue | null>;
 export declare function useLenis(callback?: (lenis: Lenis) => void, deps?: Array<any>, priority?: number): Lenis | undefined;
@@ -5,0 +16,0 @@ type ForwardRefComponent<P, T> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package.json

 {
   "name": "@studio-freight/react-lenis",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "repository": {
@@ -17,8 +17,4 @@ "type": "git",
     "playground": "npm run dev --prefix ./playground",
-    "build": "npm-run-all --parallel build:dist",
-    "build:dist": "rollup --bundleConfigAsCjs -c",
-    "build:types": "tsc --target esnext --allowJs -d --emitDeclarationOnly --declarationDir ./dist/types --removeComments ./src/index.jsx",
-    "watch:dist": "rollup --bundleConfigAsCjs -c -w",
-    "watch:types": "tsc --target esnext --allowJs -d --emitDeclarationOnly --declarationDir ./dist/types --removeComments --watch ./src/index.jsx --jsx react",
-    "watch": "npm-run-all --parallel watch:dist",
+    "build": "rollup --bundleConfigAsCjs -c",
+    "watch": "rollup --bundleConfigAsCjs -c -w",
     "git:commit": "git add -A && cross-var git commit -m \"$npm_package_name@$npm_package_version\"",
@@ -28,4 +24,4 @@ "git:tag": "cross-var git tag -a $npm_package_name@$npm_package_version -m \"$npm_package_name@$npm_package_version\"",
     "postversion": "npm-run-all build git:commit git:tag git:push",
-    "version:latest": "yarn version --no-git-tag-version --patch",
-    "version:dev": "yarn version --no-git-tag-version --prerelease --preid dev"
+    "patch:latest": "yarn version --no-git-tag-version --patch",
+    "patch:dev": "yarn version --no-git-tag-version --prerelease --preid dev"
   },
@@ -55,9 +51,11 @@ "sideEffects": false,
     "@studio-freight/lenis": "^1.0.40",
+    "@types/react": "^18.0.0",
     "clsx": "^2.0.0",
+    "react": "^18.0.0",
     "zustand": "^4.4.7"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   }
 }

README.md

@@ -9,20 +9,13 @@ ![NPM Version](https://img.shields.io/npm/v/%40studio-freight%2Freact-lenis?colorA=000000&colorB=ff98a2)
 
-<br/>
-
 ## Installation
 
-For npm users:
-```
+```bash
 npm i @studio-freight/react-lenis
 ```
 
-For yarn users:
-```
-yarn add @studio-freight/react-lenis
-```
+## Usage
 
+### Basic
 
-## Usage
-
-```js
+```jsx
 import { ReactLenis, useLenis } from '@studio-freight/react-lenis'
@@ -42,4 +35,16 @@
 ```
-<br/>
 
+### RSC
+```jsx
+// libs/react-lenis.js
+
+'use client'
+
+export * from '@studio-freight/react-lenis'
+```
+
+```jsx
+import { ReactLenis, useLenis } from 'libs/react-lenis'
+```
+
 ## Props
@@ -49,6 +54,7 @@ - `options`: [Lenis options](https://github.com/darkroomengineering/lenis#instance-settings).
 - `autoRaf`: if `false`, `lenis.raf` needs to be called manually. Default: `true`.
-- `rAFpriority`: [Tempus](https://github.com/studio-freight/tempus#readme) execution priority. Default: `0`.
+- `rafPriority`: [Tempus](https://github.com/studio-freight/tempus#readme) execution priority. Default: `0`.
+- `className`: Class name for the wrapper div. Default: `''`.
 
-<br/>
 
+
 ## Hooks
@@ -68,3 +74,3 @@ Once the Lenis context is set (components mounted inside `<ReactLenis>`) you can use these handy hooks:
 
-```js
+```jsx
 function Component() {
@@ -94,3 +100,2 @@ const lenisRef = useRef()
 
-<br/>
 
@@ -97,0 +102,0 @@ ## @studio-freight/react-lenis in use

No alert changes

Improved metrics

Total package byte prevSize

98746

increased by5.57%

Number of package files

10

increased by11.11%

Lines of code

99

increased by80%

Number of lines in readme file

118

increased by4.42%

Worsened metrics

Dependency count

8

increased by33.33%

Dependency changes

• + Added@types/react@^18.0.0

• + Addedreact@^18.0.0

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@18.3.12(transitive)

• + Addedcsstype@3.1.3(transitive)