add removeInactiveUnframerHiddenElements

Author: remorses

unframer/CHANGELOG.md

@@ -1,5 +1,15 @@
 # unframer
 
+## 2.27.0
+
+### Minor Changes
+
+- Make .Responsive components much faster, delete them before React hydration
+
+### Patch Changes
+
+- 3661c24: Update to latest Framer runtime, [email protected], framer-motion@
+
 ## 2.26.0
 
 ### Minor Changes

unframer/package.json

@@ -1,6 +1,6 @@
 {
     "name": "unframer",
-    "version": "2.26.0",
+    "version": "2.27.0",
     "description": "Import Framer components directly in your React app, type safe and customizable",
     "sideEffects": false,
     "repository": "https://github.com/remorses/unframer",

unframer/src/css.ts

@@ -188,44 +188,45 @@ export const breakpointsStylesLegacy = (breakpointSizes?: BreakpointSizes) => {
 export const breakpointsStyles = (breakpointSizes?: BreakpointSizes) => {
     breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes }
     return /* css */ `
+
 /* Base */
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
-    .unframer:not(.unframer-base) {
+    .unframer-hidden:not(.unframer-base) {
         display: none !important;
     }
 }
 
 /* Small */
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
-    .unframer:not(.unframer-sm) {
+    .unframer-hidden:not(.unframer-sm) {
         display: none !important;
     }
 }
 
 /* Medium */
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
-    .unframer:not(.unframer-md) {
+    .unframer-hidden:not(.unframer-md) {
         display: none !important;
     }
 }
 
 /* Large */
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
-    .unframer:not(.unframer-lg) {
+    .unframer-hidden:not(.unframer-lg) {
         display: none !important;
     }
 }
 
 /* Extra Large */
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
-    .unframer:not(.unframer-xl) {
+    .unframer-hidden:not(.unframer-xl) {
         display: none !important;
     }
 }
 
 /* 2 Extra Large */
 @media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer:not(.unframer-2xl) {
+    .unframer-hidden:not(.unframer-2xl) {
         display: none !important;
     }
 }

unframer/src/exporter.ts

@@ -468,7 +468,6 @@ export async function bundle({
             resetCssStyles +
             getStyleTokensCss(tokens || []) +
             breakpointsStyles(breakpoints) +
-            breakpointsStylesLegacy(breakpoints) +
             '\n\n' +
             combinedCSSRules
                 .map((x) => (x?.startsWith('  ') ? dedent(x) : x))

unframer/src/framer.js

@@ -11214,14 +11214,15 @@ function stagger(duration = 0.1, {
   };
 }
 
-// /:https://app.framerstatic.com/framer.QUUNUZCV.mjs
+// /:https://app.framerstatic.com/framer.6RBAH774.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
 import { memo as memo2, } from 'react';
 import ReactDOM from 'react-dom';
 import { createRef, } from 'react';
+import { useTransition, } from 'react';
 import { cloneElement as cloneElement32, } from 'react';
 var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = __commonJS({
@@ -42299,62 +42300,44 @@ function getWhereExpressionFromPathVariables(pathVariables, collection,) {
   }));
 }
 function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspendedLoadingState = false,) {
+  var _a, _b, _c, _d;
+  const [isPending, startLoadingTransition,] = useTransition();
   const totalPages = Math.ceil(totalSize / pageSize,);
-  const [paginationInfo, setPaginationInfo,] = useState(() => {
-    var _a, _b, _c, _d;
-    const currentPage = ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
+  const [currentPage, setCurrentPage,] = useState(
+    ((_d = (_c = (_b = (_a = globalThis == null ? void 0 : globalThis.history) == null ? void 0 : _a.state) == null
           ? void 0
           : _b.paginationInfo) == null
         ? void 0
         : _c[hash2]) == null
       ? void 0
-      : _d.currentPage) ?? 1;
+      : _d.currentPage) ?? 1,
+  );
+  const paginationInfo = useMemo2(() => {
     return {
       currentPage,
       totalPages,
-      isLoading: false,
+      isLoading: isPending,
     };
-  },);
-  useEffect(() => {
-    startTransition2(() => {
-      setPaginationInfo((current2) => {
-        if (current2.totalPages === totalPages) return current2;
-        return {
-          ...current2,
-          totalPages,
-        };
-      },);
-    },);
-  }, [totalPages,],);
+  }, [currentPage, totalPages, isPending,],);
   useEffect(() => {
     pushLoadMoreHistory(hash2, paginationInfo,);
   }, [hash2, paginationInfo,],);
   const onCanvas = useIsOnFramerCanvas();
-  const loadMore = useCallback(() => {
+  const loadMore = useCallback(async () => {
     if (onCanvas) return;
-    if (paginationInfo.currentPage >= paginationInfo.totalPages) return;
-    if (!paginateWithSuspendedLoadingState) {
-      startTransition2(() => {
-        setPaginationInfo((info) => ({
-          ...info,
-          currentPage: Math.min(info.currentPage + 1, info.totalPages,),
-          isLoading: false,
-        }));
-      },);
-      return;
-    }
-    setPaginationInfo((info) => ({
-      ...info,
-      isLoading: true,
-    }));
-    requestAnimationFrame(() => {
-      setPaginationInfo((info) => ({
-        ...info,
-        currentPage: Math.min(info.currentPage + 1, info.totalPages,),
-        isLoading: false,
-      }));
+    if (currentPage >= totalPages) return;
+    await yieldToMain({
+      priority: 'user-blocking',
+      continueAfter: 'paint',
     },);
-  }, [onCanvas, paginationInfo.currentPage, paginationInfo.totalPages, paginateWithSuspendedLoadingState,],);
+    const renderNextPage = (startTransition14) => {
+      startTransition14(() => {
+        setCurrentPage((_currentPage) => Math.min(_currentPage + 1, totalPages,));
+      },);
+    };
+    if (!paginateWithSuspendedLoadingState) return renderNextPage(startTransition2,);
+    return renderNextPage(startLoadingTransition,);
+  }, [currentPage, totalPages, paginateWithSuspendedLoadingState,],);
   return {
     paginationInfo,
     loadMore,
@@ -42845,6 +42828,11 @@ function tryToApplyOverride(Component17, override,) {
 function valueWithMirroring(value, mirror,) {
   return mirror ? wrap(0, 2, value,) : value;
 }
+function singleFrame() {
+  return new Promise((resolve) => {
+    frame.postRender(() => resolve());
+  },);
+}
 var withV1StrokeFX = (Component17) =>
   forwardRef((props, forwardedRef,) => {
     const {
@@ -42876,7 +42864,7 @@ var withV1StrokeFX = (Component17) =>
           const mirror = strokeEffectLoop && strokeEffectLoopType === 'mirror';
           const from = valueWithMirroring(index, mirror,);
           const to = valueWithMirroring(index + 1, mirror,);
-          await animate(offset, [from, to,], pathLengthTransition,);
+          await Promise.all([animate(offset, [from, to,], pathLengthTransition,), singleFrame(),],);
           if (!strokeEffectLoop) break;
           if (strokeEffectLoop && strokeEffectLoopType === 'repeat') continue;
           index++;

unframer/src/react.tsx

@@ -21,6 +21,7 @@ import { version } from './version.js'
 function classNames(...args) {
     return args.filter(Boolean).join(' ')
 }
+
 function Hints() {
     prefetchDNS('https://fonts.gstatic.com')
     preconnect('https://fonts.gstatic.com')
@@ -118,6 +119,29 @@ export function FramerStyles({ Components = [] as any[] }): any {
         </>
     )
 }
+function removeInactiveUnframerHiddenElements() {
+    // Remove all elements with the 'unframer-hidden' class that are not for the current breakpoint
+    const windowWidth = window.innerWidth
+    const activeBreakpoint = getBreakpointNameFromWindowWidth(windowWidth)
+    const activeClass = activeBreakpoint ? `unframer-${activeBreakpoint}` : null
+
+    console.log('Active unframer breakpoint class:', activeClass)
+
+    document.querySelectorAll('.unframer-hidden').forEach((el) => {
+        // Merge: Only remove the element itself if it has 'unframer-hidden' and does not match the current breakpoint's class.
+        if (
+            el.classList.contains('unframer-hidden') &&
+            activeClass &&
+            !el.classList.contains(activeClass)
+        ) {
+            el.parentNode?.removeChild(el)
+        }
+    })
+}
+
+if (typeof window !== 'undefined') {
+    removeInactiveUnframerHiddenElements()
+}
 
 export const WithFramerBreakpoints = <
     T extends ComponentType<{ variant?: any; className?: string }>,

unframer/src/version.ts

@@ -1 +1 @@
-export const version = '2.26.0'
+export const version = '2.27.0'