Feat(core): react optimizations and devx fixes (#12)

Author: noahehall

.eslintrc.js .eslintrc.cjs

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -10,12 +10,9 @@ export default {
   },
   ignorePatterns: ["**/lib", "**/dist", "**/*.json"],
   extends: [
-    "react-app",
+    "react-app", // provides @typescript-eslint DO NOT added it twice
     "react-app/jest",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "plugin:jsx-a11y/recommended",
     "prettier",
   ],
   // @see https://eslint.org/docs/latest/user-guide/configuring/rules

.gitignore

@@ -20,3 +20,4 @@ yarn-debug.log*
 yarn-error.log*
 
 _crea
+tsconfig.tsbuildinfo

bun.lockb

@@ -9377,12 +9377,15 @@ var FPContainer = ({
   onHide,
   onShow,
   outerStyle = {},
+  scrollDebounceMs = 125,
   style = {},
   transitionTiming = 700
 }) => {
+  const FPContainerInnerRef = import_react19.useRef(null);
+  const scrollTimer = import_react19.useRef(null);
+  const scrollY = import_react19.useRef(isSsr ? 0 : window.scrollY);
   const throttled = import_react19.useRef(false);
   const ticking = import_react19.useRef(false);
-  const scrollY = import_react19.useRef(isSsr ? 0 : window.scrollY);
   const useOuterStyle = import_react19.useMemo(() => ({
     left: 0,
     position: "fixed",
@@ -9396,8 +9399,8 @@ var FPContainer = ({
     right: 0,
     ...style
   }), [style]);
-  const FPContainerInnerRef = import_react19.useRef(null);
-  const { ReactFPRef, slides } = import_react19.useContext(FPContext);
+  const { ReactFPRef, slides, isFullscreen } = import_react19.useContext(FPContext);
+  const [, startTransition] = import_react19.useTransition();
   const [pageState, setPageState] = import_react19.useState({
     fullpageHeight: 0,
     offsetHeight: 0,
@@ -9407,32 +9410,41 @@ var FPContainer = ({
     translateY: 0,
     viewportHeight: 0
   });
-  const handleScroll = (e) => {
+  const handleScroll = () => {
     if (throttled.current || isSsr)
       return;
     throttled.current = true;
-    e.stopPropagation();
-    setTimeout(() => {
-      throttled.current = false;
-    }, transitionTiming);
     if (!ticking.current) {
       window.requestAnimationFrame(() => {
         const newScrollY = window.scrollY;
         const prevScrollY = scrollY.current;
-        if (prevScrollY < newScrollY)
+        if (newScrollY === 0)
+          first();
+        else if (window.innerHeight + Math.round(newScrollY) >= document.body.offsetHeight)
+          last();
+        else if (prevScrollY < newScrollY)
           forward();
         else if (prevScrollY > newScrollY)
           back3();
         if (pageState.resetScroll || transitionTiming !== pageState.transitionTiming)
-          setPageState((prevState) => ({
-            ...prevState,
-            resetScroll: false,
-            transitionTiming
-          }));
+          startTransition(() => {
+            setPageState((prevState) => ({
+              ...prevState,
+              resetScroll: false,
+              transitionTiming
+            }));
+          });
         ticking.current = false;
       });
       ticking.current = true;
     }
+    setTimeout(() => {
+      throttled.current = false;
+    }, transitionTiming);
+  };
+  const bouncedHandleScroll = () => {
+    clearTimeout(scrollTimer.current);
+    scrollTimer.current = setTimeout(() => handleScroll(), scrollDebounceMs);
   };
   const handleResize = () => {
     if (!FPContainerInnerRef.current || isSsr)
@@ -9443,11 +9455,13 @@ var FPContainer = ({
     if (!ticking.current) {
       requestAnimationFrame(() => {
         const fullpageHeight = FPContainerInnerRef.current.clientHeight;
-        setPageState((prevState) => ({
-          ...prevState,
-          fullpageHeight,
-          viewportHeight: Math.max(document.documentElement.clientHeight, window.innerHeight)
-        }));
+        startTransition(() => {
+          setPageState((prevState) => ({
+            ...prevState,
+            fullpageHeight,
+            viewportHeight: Math.max(document.documentElement.clientHeight, window.innerHeight)
+          }));
+        });
         ReactFPRef.current.style.height = `${fullpageHeight}px`;
         ticking.current = false;
       });
@@ -9496,7 +9510,9 @@ var FPContainer = ({
       slideIndex,
       translateY
     };
-    setPageState((prevState) => ({ ...prevState, ...newPageState }));
+    startTransition(() => {
+      setPageState((prevState) => ({ ...prevState, ...newPageState }));
+    });
     setTimeout(() => {
       throttled.current = false;
       scrollY.current = window.scrollY;
@@ -9541,18 +9557,19 @@ var FPContainer = ({
   import_react19.useEffect(() => {
     if (isSsr)
       return;
-    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("scroll", bouncedHandleScroll, { passive: true });
     window.addEventListener("resize", handleResize, { passive: true });
     document.addEventListener("keydown", handleKeys, { passive: true });
     return () => {
-      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", bouncedHandleScroll);
       window.removeEventListener("resize", handleResize);
       document.removeEventListener("keydown", handleKeys);
     };
   });
-  import_react19.useEffect(() => {
+  import_react19.useLayoutEffect(() => {
     handleResize();
-  });
+    handleScroll();
+  }, [isFullscreen]);
   return jsx_runtime.jsx("div", {
     style: useOuterStyle,
     children: jsx_runtime.jsx(motion2.div, {
@@ -9573,6 +9590,7 @@ var import_react20 = __toESM(require_react());
 var observeFn = (el) => el;
 var FPContext = import_react20.createContext({
   getIndex: (el) => 0,
+  isFullscreen: false,
   ReactFPRef: null,
   slides: [],
   subscribe: observeFn,
@@ -9588,7 +9606,11 @@ var FPItem = ({
   style = {},
   motionProps = {}
 }) => {
-  const { subscribe, unsubscribe, getIndex } = import_react21.useContext(FPContext);
+  const useStyle2 = import_react21.useMemo(() => ({
+    height,
+    ...style
+  }), [style]);
+  const { subscribe, unsubscribe } = import_react21.useContext(FPContext);
   const FPItemRef2 = import_react21.useRef(null);
   import_react21.useEffect(() => {
     subscribe(FPItemRef2);
@@ -9598,10 +9620,7 @@ var FPItem = ({
   }, []);
   return jsx_runtime2.jsx(motion2.div, {
     className,
-    style: {
-      height,
-      ...style
-    },
+    style: useStyle2,
     ref: FPItemRef2,
     ...motionProps,
     children
@@ -9784,19 +9803,32 @@ var FullScreen = function FullScreen2(_ref) {
 
 // src/ReactFP.tsx
 var jsx_runtime4 = __toESM(require_jsx_runtime());
+var ImLoading = () => jsx_runtime4.jsx("div", {
+  style: { backgroundColor: "black", height: "100vh" },
+  children: "Loading"
+});
 var ReactFP = ({
   children,
   Button = FSButton,
   buttonStyle = {},
   className = "",
+  Fallback = ImLoading,
   motionProps = {},
   style = {}
 }) => {
   const useStyle2 = import_react23.useMemo(() => ({
     position: "relative",
     ...style
   }), [style]);
+  const useButtonStyle = import_react23.useMemo(() => ({
+    position: "fixed",
+    left: 10,
+    top: 10,
+    zIndex: 9999,
+    ...buttonStyle
+  }), [buttonStyle]);
   const [slides, setSlides] = import_react23.useState([]);
+  const deferredSlides = import_react23.useDeferredValue(slides);
   const fullscreen = import_react23.useRef(false);
   const ReactFPRef = import_react23.useRef(null);
   const getIndex = (slide) => {
@@ -9819,19 +9851,14 @@ var ReactFP = ({
           }
           return void (fullscreen.current = !fullscreen.current);
         },
-        style: {
-          position: "fixed",
-          left: 10,
-          top: 10,
-          zIndex: 9999,
-          ...buttonStyle
-        }
+        style: useButtonStyle
       }),
       jsx_runtime4.jsx(FPContext.Provider, {
         value: {
           getIndex,
+          isFullscreen: !!fullscreen.current,
           ReactFPRef,
-          slides,
+          slides: deferredSlides,
           subscribe,
           unsubscribe
         },
@@ -9840,7 +9867,10 @@ var ReactFP = ({
           ref: ReactFPRef,
           className,
           ...motionProps,
-          children
+          children: jsx_runtime4.jsx(import_react23.Suspense, {
+            fallback: jsx_runtime4.jsx(Fallback, {}),
+            children
+          })
         })
       })
     ]

dist/index.js

@@ -9,8 +9,9 @@
   "scripts": {
     "barrels": "bunx barrelsby --config ./barrels.json",
     "build": "rm -rf ./dist/* && bun build src/index.ts --outdir ./dist",
-    "lint": "bunx eslint src -- --fix",
+    "lint": "bunx eslint src --fix --resolve-plugins-relative-to .",
     "pretty": "bunx prettier --write 'src/**/*.(ts|tsx)'",
+    "test:types": "bunx tsc",
     "upgrade:deps": "bunx ncu -u && bun install"
   },
   "peerDependencies": {
@@ -22,25 +23,21 @@
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "5.59.7",
-    "@typescript-eslint/parser": "5.59.7",
-    "barrels": "^1.6.6",
+    "barrels": "1.6.6",
     "bun-types": "canary",
     "eslint": "8.41.0",
     "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "npm-check-updates": "^16.10.12",
-    "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "framer-motion": "^10.12.16",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
+    "npm-check-updates": "16.10.12",
+    "prettier": "2.8.8",
     "typescript": "beta"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "react-full-screen": "^1.1.1"
+    "react-full-screen": "1.1.1"
   }
 }