administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-10 18:43:09 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
65e5c7f86a
frigate/web/patches/@radix-ui+react-slot+1.2.4.patch

47 lines
2.4 KiB
Diff
Raw Normal View History

Update frontend to React 19 (#22275) * remove unused RecoilRoot and fix implicit ref callback Remove the vestigial recoil dependency (zero consumers) and convert the implicit-return ref callback in SearchView to block form to prevent React 19 interpreting it as a cleanup function. * replace react-transition-group with framer-motion in Chip Replace CSSTransition with framer-motion AnimatePresence + motion.div for React 19 compatibility (react-transition-group uses findDOMNode). framer-motion is already a project dependency. * migrate react-grid-layout v1 to v2 - Replace WidthProvider(Responsive) HOC with useContainerWidth hook - Update types: Layout (single item) → LayoutItem, Layout[] → Layout - Replace isDraggable/isResizable/resizeHandles with dragConfig/resizeConfig - Update EventCallback signature for v2 API - Remove @types/react-grid-layout (v2 includes its own types) * upgrade vaul, next-themes, framer-motion, react-zoom-pan-pinch - vaul: ^0.9.1 → ^1.1.2 - next-themes: ^0.3.0 → ^0.4.6 - framer-motion: ^11.5.4 → ^12.35.0 (React 19 native support) - react-zoom-pan-pinch: 3.4.4 → latest * upgrade to React 19, react-konva v19, eslint-plugin-react-hooks v5 Core React 19 upgrade with all necessary type fixes: - Update RefObject types to accept T | null (React 19 refs always nullable) - Add JSX namespace imports (no longer global in React 19) - Add initial values to useRef calls (required in React 19) - Fix ReactElement.props unknown type in config-form components - Fix IconWrapper interface to use HTMLAttributes instead of index signature - Add monaco-editor as dev dependency for type declarations - Upgrade react-konva to v19, eslint-plugin-react-hooks to v5 * upgrade typescript to 5.9.3 * modernize Context.Provider to React 19 shorthand Replace <Context.Provider value={...}> with <Context value={...}> across all project-owned context providers. External library contexts (react-icons IconContext, radix TooltipPrimitive) left unchanged. * add runtime patches for React 19 compatibility - Patch @radix-ui/react-compose-refs@1.1.2: stabilize useComposedRefs to prevent infinite render loops from unstable ref callbacks https://github.com/radix-ui/primitives/issues/3799 - Patch @radix-ui/react-slot@1.2.4: use useComposedRefs hook in SlotClone instead of inline composeRefs to prevent re-render cycles https://github.com/radix-ui/primitives/pull/3804 - Patch react-use-websocket@4.8.1: remove flushSync wrappers that cause "Maximum update depth exceeded" with React 19 auto-batching https://github.com/facebook/react/issues/27613 - Add npm overrides to ensure single hoisted copies of compose-refs and react-slot across all Radix packages - Add postinstall script for patch-package - Remove leftover react-transition-group dependency * formatting * use availableWidth instead of useContainerWidth for grid layout The useContainerWidth hook from react-grid-layout v2 returns raw container width without accounting for scrollbar width, causing the grid to not fill the full available space. Use the existing availableWidth value from useResizeObserver which already compensates for scrollbar width, matching the working implementation. * remove unused carousel component and fix React 19 peer deps Remove embla-carousel-react and its unused Carousel UI component. Upgrade sonner v1 → v2 for native React 19 support. Remove @types/react-icons stub (react-icons bundles its own types). These changes eliminate all peer dependency conflicts, so npm install works without --legacy-peer-deps. * fix React 19 infinite re-render loop on live dashboard The "Maximum update depth exceeded" error was caused by two issues: 1. useDeferredStreamMetadata returned a new `{}` default on every render when SWR data was undefined, creating an unstable reference that triggered the useEffect in useCameraLiveMode on every render cycle. Fixed by using a stable module-level EMPTY_METADATA constant. 2. useResizeObserver's rest parameter `...refs` created a new array on every render, causing its useEffect to re-run and re-observe elements continuously. Fixed by stabilizing refs with useRef and only reconnecting the observer when actual DOM elements change.
2026-03-05 17:42:38 +03:00
diff --git a/node_modules/@radix-ui/react-slot/dist/index.js b/node_modules/@radix-ui/react-slot/dist/index.js
index 3691205..3b62ea8 100644
--- a/node_modules/@radix-ui/react-slot/dist/index.js
+++ b/node_modules/@radix-ui/react-slot/dist/index.js
@@ -85,11 +85,12 @@ function createSlotClone(ownerName) {
if (isLazyComponent(children) && typeof use === "function") {
children = use(children._payload);
}
+ const childrenRef = React.isValidElement(children) ? getElementRef(children) : null;
+ const composedRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, childrenRef);
if (React.isValidElement(children)) {
- const childrenRef = getElementRef(children);
const props2 = mergeProps(slotProps, children.props);
if (children.type !== React.Fragment) {
- props2.ref = forwardedRef ? (0, import_react_compose_refs.composeRefs)(forwardedRef, childrenRef) : childrenRef;
+ props2.ref = forwardedRef ? composedRef : childrenRef;
}
return React.cloneElement(children, props2);
}
diff --git a/node_modules/@radix-ui/react-slot/dist/index.mjs b/node_modules/@radix-ui/react-slot/dist/index.mjs
index d7ea374..a990150 100644
--- a/node_modules/@radix-ui/react-slot/dist/index.mjs
+++ b/node_modules/@radix-ui/react-slot/dist/index.mjs
@@ -1,6 +1,6 @@
// src/slot.tsx
import * as React from "react";
-import { composeRefs } from "@radix-ui/react-compose-refs";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
var use = React[" use ".trim().toString()];
@@ -45,11 +45,12 @@ function createSlotClone(ownerName) {
if (isLazyComponent(children) && typeof use === "function") {
children = use(children._payload);
}
+ const childrenRef = React.isValidElement(children) ? getElementRef(children) : null;
+ const composedRef = useComposedRefs(forwardedRef, childrenRef);
if (React.isValidElement(children)) {
- const childrenRef = getElementRef(children);
const props2 = mergeProps(slotProps, children.props);
if (children.type !== React.Fragment) {
- props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+ props2.ref = forwardedRef ? composedRef : childrenRef;
}
return React.cloneElement(children, props2);
}
Reference in New Issue Copy Permalink