react-lenis improve TS

Myphz · Apr 9, 2024 · df39004 · df39004
1 parent bb87dfd
commit df39004
Show file tree

Hide file tree

Showing 13 changed files with 121 additions and 55 deletions.
diff --git a/packages/react-lenis/README.md b/packages/react-lenis/README.md
@@ -6,24 +6,17 @@
 react-lenis provides a `<ReactLenis>` component that creates a [Lenis](https://github.com/darkroomengineering/lenis) instance and provides it to its children via context. This allows you to use Lenis in your React app without worrying about passing the instance down through props. It also provides a `useLenis` hook that allows you to access the Lenis instance from any component in your app.
 
 
-<br/>
-
 ## Installation
 
-For npm users:
-```
+```bash
 npm i @studio-freight/react-lenis
 ```
 
-For yarn users:
-```
-yarn add @studio-freight/react-lenis
-```
-
-
 ## Usage
 
-```js
+### Basic
+
+```jsx
 import { ReactLenis, useLenis } from '@studio-freight/react-lenis'
 
 function Layout() {
@@ -38,15 +31,28 @@ function Layout() {
  )
 }
 ```
-<br/>
+
+### RSC
+```jsx
+// libs/react-lenis.js
+
+'use client'
+
+export * from '@studio-freight/react-lenis'
+```
+
+```jsx
+import { ReactLenis, useLenis } from 'libs/react-lenis'
+```
 
 ## Props
 - `options`: [Lenis options](https://github.com/darkroomengineering/lenis#instance-settings).
 - `root`: Lenis will be instanciate using `<html>` scroll. Default: `false`.
 - `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
 Once the Lenis context is set (components mounted inside `<ReactLenis>`) you can use these handy hooks:
@@ -62,7 +68,7 @@ The hook takes three argument:
 
 GSAP integration
 
-```js
+```jsx
 function Component() {
  const lenisRef = useRef()
 
@@ -87,7 +93,6 @@ function Component() {
 ```
 
 
-<br/>
 
 ## @studio-freight/react-lenis in use
 

diff --git a/packages/react-lenis/dist/react-lenis.cjs.js b/packages/react-lenis/dist/react-lenis.cjs.js
diff --git a/packages/react-lenis/dist/react-lenis.cjs.js.map b/packages/react-lenis/dist/react-lenis.cjs.js.map
diff --git a/packages/react-lenis/dist/react-lenis.mjs b/packages/react-lenis/dist/react-lenis.mjs
@@ -1,2 +1,2 @@
-import{useFrame as r}from"@studio-freight/hamo";import e from"@studio-freight/lenis";import t from"clsx";import n,{createContext as o,useEffect as l,forwardRef as a,useRef as c,useState as s,useCallback as i,useImperativeHandle as u,useContext as f}from"react";import{create as p}from"zustand";"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.46");const m=o(),d=p((()=>({})));function b(r,e=[],t=0){const{lenis:n,addCallback:o,removeCallback:a}=function(){const r=f(m),e=d();return null!=r?r:e}();return l((()=>{if(r&&o&&a&&n)return o(r,t),r(n),()=>{a(r)}}),[n,o,a,t,...e]),n}const y=a(((o,a)=>{var{children:f,root:p=!1,options:b={},autoRaf:y=!0,rafPriority:v=0,className:O}=o,g=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t}(o,["children","root","options","autoRaf","rafPriority","className"]);const h=c(),w=c(),[k,N]=s(),j=c([]),C=i(((r,e)=>{j.current.push({callback:r,priority:e}),j.current.sort(((r,e)=>r.priority-e.priority))}),[]),E=i((r=>{j.current=j.current.filter((e=>e.callback!==r))}),[]);u(a,(()=>({wrapper:h.current,content:w.current,lenis:k})),[k]),l((()=>{const r=new e(Object.assign(Object.assign({},b),!p&&{wrapper:h.current,content:w.current}));return N(r),()=>{r.destroy(),N(void 0)}}),[p,JSON.stringify(b)]),r((r=>{y&&(null==k||k.raf(r))}),v),l((()=>{p&&k&&d.setState({lenis:k,addCallback:C,removeCallback:E})}),[p,k,C,E]);const P=i((r=>{for(let e=0;e<j.current.length;e++)j.current[e].callback(r)}),[]);l((()=>(null==k||k.on("scroll",P),()=>{null==k||k.off("scroll",P)})),[k,P]);const S=i((()=>{h.current&&(h.current.className=t(null==k?void 0:k.className,O))}),[k,O]);return l((()=>(S(),null==k||k.on("className change",S),()=>{null==k||k.off("className change",S)})),[k,S]),n.createElement(m.Provider,{value:{lenis:k,addCallback:C,removeCallback:E}},p?f:n.createElement("div",Object.assign({ref:h,className:t(null==k?void 0:k.className,O)},g),n.createElement("div",{ref:w},f)))}));export{y as Lenis,m as LenisContext,y as ReactLenis,y as default,b as useLenis};
+import{useFrame as r}from"@studio-freight/hamo";import e from"@studio-freight/lenis";import t from"clsx";import n,{createContext as o,useEffect as l,forwardRef as a,useRef as c,useState as s,useCallback as i,useImperativeHandle as u,useContext as f}from"react";import{create as p}from"zustand";"function"==typeof SuppressedError&&SuppressedError;"undefined"!=typeof window&&(window.reactLenisVersion="0.0.46");const d=o(null),m=p((()=>({})));function b(r,e=[],t=0){const{lenis:n,addCallback:o,removeCallback:a}=function(){const r=f(d),e=m();return null!=r?r:e}();return l((()=>{if(r&&o&&a&&n)return o(r,t),r(n),()=>{a(r)}}),[n,o,a,t,...e]),n}const y=a(((o,a)=>{var{children:f,root:p=!1,options:b={},autoRaf:y=!0,rafPriority:v=0,className:O}=o,g=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t}(o,["children","root","options","autoRaf","rafPriority","className"]);const h=c(null),w=c(null),[k,N]=s(void 0),j=c([]),C=i(((r,e)=>{j.current.push({callback:r,priority:e}),j.current.sort(((r,e)=>r.priority-e.priority))}),[]),E=i((r=>{j.current=j.current.filter((e=>e.callback!==r))}),[]);u(a,(()=>({wrapper:h.current,content:w.current,lenis:k})),[k]),l((()=>{const r=new e(Object.assign(Object.assign({},b),!p&&{wrapper:h.current,content:w.current}));return N(r),()=>{r.destroy(),N(void 0)}}),[p,JSON.stringify(b)]),r((r=>{y&&(null==k||k.raf(r))}),v),l((()=>{p&&k&&m.setState({lenis:k,addCallback:C,removeCallback:E})}),[p,k,C,E]);const P=i((r=>{for(let e=0;e<j.current.length;e++)j.current[e].callback(r)}),[]);l((()=>(null==k||k.on("scroll",P),()=>{null==k||k.off("scroll",P)})),[k,P]);const S=i((()=>{h.current&&(h.current.className=t(null==k?void 0:k.className,O))}),[k,O]);return l((()=>(S(),null==k||k.on("className change",S),()=>{null==k||k.off("className change",S)})),[k,S]),n.createElement(d.Provider,{value:{lenis:k,addCallback:C,removeCallback:E}},p?f:n.createElement("div",Object.assign({ref:h,className:t(null==k?void 0:k.className,O)},g),n.createElement("div",{ref:w},f)))}));export{y as Lenis,d as LenisContext,y as ReactLenis,y as default,b as useLenis};
 //# sourceMappingURL=react-lenis.mjs.map
diff --git a/packages/react-lenis/dist/react-lenis.mjs.map b/packages/react-lenis/dist/react-lenis.mjs.map
diff --git a/packages/react-lenis/dist/react-lenis.umd.js b/packages/react-lenis/dist/react-lenis.umd.js
diff --git a/packages/react-lenis/dist/react-lenis.umd.js.map b/packages/react-lenis/dist/react-lenis.umd.js.map
diff --git a/packages/react-lenis/dist/types/index.d.ts b/packages/react-lenis/dist/types/index.d.ts
@@ -1,6 +1,17 @@
 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;
 type ForwardRefComponent<P, T> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 type Props = {

diff --git a/packages/react-lenis/dist/types/src/index.d.ts b/packages/react-lenis/dist/types/src/index.d.ts
@@ -0,0 +1,33 @@
+import Lenis, { LenisOptions } from '@studio-freight/lenis';
+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;
+type ForwardRefComponent<P, T> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+type Props = {
+ root?: boolean;
+ options?: LenisOptions;
+ autoRaf?: boolean;
+ rafPriority?: number;
+ className?: string;
+ children?: ReactNode;
+ props?: any;
+};
+type LenisRef = {
+ wrapper?: HTMLElement;
+ content?: HTMLElement;
+ lenis?: Lenis;
+};
+declare const ReactLenis: ForwardRefComponent<Props, LenisRef>;
+export { ReactLenis as Lenis, ReactLenis };
+export default ReactLenis;
diff --git a/packages/react-lenis/package.json b/packages/react-lenis/package.json
@@ -14,12 +14,8 @@
  "scripts": {
  "dev": "npm-run-all --parallel watch playground",
  "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\"",
  "git:tag": "cross-var git tag -a $npm_package_name@$npm_package_version -m \"$npm_package_name@$npm_package_version\"",
  "git:push": "git push && git push --tags",