remotion 4.0.229 → 4.0.231

package/dist/cjs/ResolveCompositionConfig.js

@@ -237,7 +237,11 @@ const ResolveCompositionConfig = ({ children }) => {
             // to the file
             return;
         }
-        window.dispatchEvent(new CustomEvent('remotion.propsUpdatedExternally'));
+        window.dispatchEvent(new CustomEvent(exports.PROPS_UPDATED_EXTERNALLY, {
+            detail: {
+                resetUnsaved: true,
+            },
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fastRefreshes]);
     (0, react_1.useEffect)(() => {

package/dist/cjs/multiple-versions-warning.js

@@ -7,6 +7,12 @@ const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
         return;
     }
+    const set = () => {
+        globalThis.remotion_imported = version_js_1.VERSION;
+        if (typeof window !== 'undefined') {
+            window.remotion_imported = version_js_1.VERSION;
+        }
+    };
     const alreadyImported = globalThis.remotion_imported ||
         (typeof window !== 'undefined' && window.remotion_imported);
     if (alreadyImported) {
@@ -15,6 +21,14 @@ const checkMultipleRemotionVersions = () => {
             // It's okay if this happens during SSR in developement
             return;
         }
+        // @remotion/webcodecs will also set this variable for the purpose of
+        // being picked up by Wappalyzer.
+        // If so, we can just override it because it is not the same as Remotion
+        if (typeof alreadyImported === 'string' &&
+            alreadyImported.includes('webcodecs')) {
+            set();
+            return;
+        }
         throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
             version_js_1.VERSION,
             typeof alreadyImported === 'string'
@@ -24,9 +38,6 @@ const checkMultipleRemotionVersions = () => {
             .filter(truthy_js_1.truthy)
             .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
     }
-    globalThis.remotion_imported = version_js_1.VERSION;
-    if (typeof window !== 'undefined') {
-        window.remotion_imported = version_js_1.VERSION;
-    }
+    set();
 };
 exports.checkMultipleRemotionVersions = checkMultipleRemotionVersions;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.229";
+export declare const VERSION = "4.0.231";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.229';
+exports.VERSION = '4.0.231';

package/dist/esm/index.mjs

@@ -101,27 +101,34 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.229";
+var VERSION = "4.0.231";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
+  const set = () => {
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== "undefined") {
+      window.remotion_imported = VERSION;
+    }
+  };
   const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
   if (alreadyImported) {
     if (alreadyImported === VERSION) {
       return;
     }
+    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
+      set();
+      return;
+    }
     throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
       VERSION,
       typeof alreadyImported === "string" ? alreadyImported : "an older version"
     ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
   }
-  globalThis.remotion_imported = VERSION;
-  if (typeof window !== "undefined") {
-    window.remotion_imported = VERSION;
-  }
+  set();
 };
 
 // src/Null.tsx
@@ -928,7 +935,11 @@ var ResolveCompositionConfig = ({ children }) => {
     if (shouldIgnoreUpdate) {
       return;
     }
-    window.dispatchEvent(new CustomEvent("remotion.propsUpdatedExternally"));
+    window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
+      detail: {
+        resetUnsaved: true
+      }
+    }));
   }, [fastRefreshes]);
   useEffect2(() => {
     if (renderModalComposition && !isTheSame) {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.229";
+var VERSION = "4.0.231";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.229",
+  "version": "4.0.231",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.229"
+    "@remotion/eslint-config-internal": "4.0.231"
   },
   "keywords": [
     "remotion",

package/dist/cjs/NativeLayers.d.ts

@@ -1,13 +0,0 @@
-import type { PropsWithChildren } from 'react';
-export type ClipRegion = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-} | 'hide';
-export type TNativeLayersContext = {
-    clipRegion: ClipRegion | null;
-    setClipRegion: React.Dispatch<React.SetStateAction<ClipRegion | null>>;
-};
-export declare const NativeLayersContext: import("react").Context<TNativeLayersContext>;
-export declare const NativeLayersProvider: React.FC<PropsWithChildren>;

package/dist/cjs/NativeLayers.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NativeLayersProvider = exports.NativeLayersContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.NativeLayersContext = (0, react_1.createContext)({
-    setClipRegion: () => {
-        throw new Error('NativeLayers not set');
-    },
-    clipRegion: null,
-});
-const NativeLayersProvider = ({ children, }) => {
-    const [clipRegion, setClipRegion] = (0, react_1.useState)(null);
-    const context = (0, react_1.useMemo)(() => {
-        return {
-            setClipRegion,
-            clipRegion,
-        };
-    }, [clipRegion, setClipRegion]);
-    if (typeof window !== 'undefined') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useLayoutEffect)(() => {
-            window.remotion_getClipRegion = () => {
-                return clipRegion;
-            };
-        }, [clipRegion, setClipRegion]);
-    }
-    return ((0, jsx_runtime_1.jsx)(exports.NativeLayersContext.Provider, { value: context, children: children }));
-};
-exports.NativeLayersProvider = NativeLayersProvider;

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,2 +0,0 @@
-import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: import("react").ForwardRefExoticComponent<RemotionAnimatedImageProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimatedImage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const cancel_render_js_1 = require("../cancel-render.js");
-const delay_render_js_1 = require("../delay-render.js");
-const use_current_frame_js_1 = require("../use-current-frame.js");
-const use_video_config_js_1 = require("../use-video-config.js");
-const canvas_1 = require("./canvas");
-const decode_image_js_1 = require("./decode-image.js");
-const resolve_image_source_1 = require("./resolve-image-source");
-exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, onLoad, fit = 'fill', ...props }, canvasRef) => {
-    const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
-    const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
-    const [id] = (0, react_1.useState)(() => (0, delay_render_js_1.delayRender)(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
-    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const currentTime = frame / fps;
-    const currentTimeRef = (0, react_1.useRef)(currentTime);
-    currentTimeRef.current = currentTime;
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(canvasRef, () => {
-        var _a;
-        const c = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
-        if (!c) {
-            throw new Error('Canvas ref is not set');
-        }
-        return c;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        (0, decode_image_js_1.decodeImage)({
-            resolvedSrc,
-            signal: controller.signal,
-            currentTime: currentTimeRef.current,
-        })
-            .then((d) => {
-            setImageDecoder(d);
-        })
-            .catch((err) => {
-            if (err.name === 'AbortError') {
-                return;
-            }
-            // TODO: Allow to catch error
-            (0, cancel_render_js_1.cancelRender)(err);
-        });
-        return () => {
-            controller.abort();
-        };
-    }, [resolvedSrc, id, onLoad, onError]);
-    (0, react_1.useEffect)(() => {
-        if (!imageDecoder) {
-            return;
-        }
-        imageDecoder.getFrame(currentTime).then((videoFrame) => {
-            var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.draw(videoFrame.frame);
-        });
-    }, [currentTime, imageDecoder]);
-    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, ...props }));
-});

package/dist/cjs/animated-image/canvas.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { AnimatedImageFillMode } from './props';
-type Props = {
-    readonly width?: number;
-    readonly height?: number;
-    readonly fit: AnimatedImageFillMode;
-    readonly className?: string;
-    readonly style?: React.CSSProperties;
-};
-export type AnimatedImageCanvasRef = {
-    readonly draw: (imageData: VideoFrame) => void;
-    readonly getCanvas: () => HTMLCanvasElement | null;
-};
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<AnimatedImageCanvasRef>>;
-export {};

package/dist/cjs/animated-image/canvas.js

@@ -1,114 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const calcArgs = (fit, frameSize, canvasSize) => {
-    switch (fit) {
-        case 'fill': {
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                0,
-                0,
-                canvasSize.width,
-                canvasSize.height,
-            ];
-        }
-        case 'contain': {
-            const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        case 'cover': {
-            const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        default:
-            throw new Error('Unknown fit: ' + fit);
-    }
-};
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-    const canvasRef = (0, react_1.useRef)(null);
-    const draw = (0, react_1.useCallback)((imageData) => {
-        var _a;
-        const canvas = canvasRef.current;
-        const canvasWidth = width !== null && width !== void 0 ? width : imageData.displayWidth;
-        const canvasHeight = height !== null && height !== void 0 ? height : imageData.displayHeight;
-        if (!canvas) {
-            throw new Error('Canvas ref is not set');
-        }
-        const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx) {
-            throw new Error('Could not get 2d context');
-        }
-        canvas.width = canvasWidth;
-        canvas.height = canvasHeight;
-        ctx.drawImage(imageData, ...calcArgs(fit, {
-            height: imageData.displayHeight,
-            width: imageData.displayWidth,
-        }, {
-            width: canvasWidth,
-            height: canvasHeight,
-        }));
-    }, [fit, height, width]);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return {
-            draw,
-            getCanvas: () => {
-                if (!canvasRef.current) {
-                    throw new Error('Canvas ref is not set');
-                }
-                return canvasRef.current;
-            },
-        };
-    }, [draw]);
-    return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, className: className, style: style });
-};
-exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

package/dist/cjs/animated-image/decode-image.d.ts

@@ -1,14 +0,0 @@
-export type AnimatedImageCacheItem = {
-    timeInSeconds: number;
-    frameIndex: number;
-    frame: VideoFrame | null;
-};
-export type RemotionImageDecoder = {
-    getFrame: (i: number) => Promise<AnimatedImageCacheItem>;
-    frameCount: number;
-};
-export declare const decodeImage: ({ resolvedSrc, signal, currentTime, }: {
-    resolvedSrc: string;
-    signal: AbortSignal;
-    currentTime: number;
-}) => Promise<RemotionImageDecoder>;

package/dist/cjs/animated-image/decode-image.js

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeImage = void 0;
-const CACHE_SIZE = 5;
-const decodeImage = async ({ resolvedSrc, signal, currentTime, }) => {
-    if (typeof ImageDecoder === 'undefined') {
-        throw new Error('Your browser does not support the WebCodecs ImageDecoder API.');
-    }
-    const res = await fetch(resolvedSrc, { signal });
-    const { body } = res;
-    if (!body) {
-        throw new Error('Got no body');
-    }
-    const decoder = new ImageDecoder({
-        data: body,
-        type: res.headers.get('Content-Type') || 'image/gif',
-    });
-    await decoder.completed;
-    const { selectedTrack } = decoder.tracks;
-    if (!selectedTrack) {
-        throw new Error('No selected track');
-    }
-    const cache = [];
-    let durationFound = null;
-    const getFrameByIndex = async (frameIndex) => {
-        const foundInCache = cache.find((c) => c.frameIndex === frameIndex);
-        if (foundInCache && foundInCache.frame) {
-            return foundInCache;
-        }
-        const frame = await decoder.decode({
-            frameIndex,
-            completeFramesOnly: true,
-        });
-        if (foundInCache) {
-            foundInCache.frame = frame.image;
-        }
-        else {
-            cache.push({
-                frame: frame.image,
-                frameIndex,
-                timeInSeconds: frame.image.timestamp / 1000000,
-            });
-        }
-        return {
-            frame: frame.image,
-            frameIndex,
-            timeInSeconds: frame.image.timestamp / 1000000,
-        };
-    };
-    const clearCache = (closeToTimeInSec) => {
-        const itemsInCache = cache.filter((c) => c.frame);
-        const sortByClosestToCurrentTime = itemsInCache.sort((a, b) => {
-            const aDiff = Math.abs(a.timeInSeconds - closeToTimeInSec);
-            const bDiff = Math.abs(b.timeInSeconds - closeToTimeInSec);
-            return aDiff - bDiff;
-        });
-        for (let i = 0; i < sortByClosestToCurrentTime.length; i++) {
-            if (i < CACHE_SIZE) {
-                continue;
-            }
-            const item = sortByClosestToCurrentTime[i];
-            item.frame = null;
-        }
-    };
-    const ensureFrameBeforeAndAfter = async (timeInSec) => {
-        const actualTimeInSec = durationFound
-            ? timeInSec % durationFound
-            : timeInSec;
-        const framesBefore = cache.filter((c) => c.timeInSeconds <= actualTimeInSec);
-        const biggestIndex = framesBefore
-            .map((c) => c.frameIndex)
-            .reduce((a, b) => Math.max(a, b), 0);
-        let i = biggestIndex;
-        while (true) {
-            const f = await getFrameByIndex(i);
-            i++;
-            if (!f.frame) {
-                throw new Error('No frame found');
-            }
-            if (!f.frame.duration) {
-                throw new Error('Frame has no duration');
-            }
-            if (i === selectedTrack.frameCount) {
-                const duration = (f.frame.timestamp + f.frame.duration) / 1000000;
-                durationFound = duration;
-            }
-            if (f.timeInSeconds > actualTimeInSec || i === selectedTrack.frameCount) {
-                break;
-            }
-        }
-        clearCache(actualTimeInSec);
-    };
-    // Twice because might be over total duration
-    await ensureFrameBeforeAndAfter(currentTime);
-    await ensureFrameBeforeAndAfter(currentTime);
-    const getFrame = async (timeInSec) => {
-        const actualTimeInSec = durationFound
-            ? timeInSec % durationFound
-            : timeInSec;
-        await ensureFrameBeforeAndAfter(actualTimeInSec);
-        const itemsInCache = cache.filter((c) => c.frame);
-        const closest = itemsInCache.reduce((a, b) => {
-            const aDiff = Math.abs(a.timeInSeconds - actualTimeInSec);
-            const bDiff = Math.abs(b.timeInSeconds - actualTimeInSec);
-            return aDiff < bDiff ? a : b;
-        });
-        if (!closest.frame) {
-            throw new Error('No frame found');
-        }
-        return closest;
-    };
-    return {
-        getFrame,
-        frameCount: selectedTrack.frameCount,
-    };
-};
-exports.decodeImage = decodeImage;

package/dist/cjs/animated-image/index.d.ts

@@ -1 +0,0 @@
-export { AnimatedImage } from './AnimatedImage';

package/dist/cjs/animated-image/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimatedImage = void 0;
-var AnimatedImage_1 = require("./AnimatedImage");
-Object.defineProperty(exports, "AnimatedImage", { enumerable: true, get: function () { return AnimatedImage_1.AnimatedImage; } });

package/dist/cjs/animated-image/props.d.ts

@@ -1,19 +0,0 @@
-export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'unmount-after-finish';
-export type RemotionAnimatedImageProps = {
-    src: string;
-    width?: number;
-    height?: number;
-    onLoad?: (info: {
-        width: number;
-        height: number;
-        delays: number[];
-        frames: ImageData[];
-    }) => void;
-    onError?: (error: Error) => void;
-    fit?: AnimatedImageFillMode;
-    playbackRate?: number;
-    style?: React.CSSProperties;
-    loopBehavior?: RemotionAnimatedImageLoopBehavior;
-    id?: string;
-};
-export type AnimatedImageFillMode = 'contain' | 'cover' | 'fill';

package/dist/cjs/animated-image/props.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/animated-image/resolve-image-source.d.ts

@@ -1 +0,0 @@
-export declare const resolveAnimatedImageSource: (src: string) => string;

package/dist/cjs/animated-image/resolve-image-source.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveAnimatedImageSource = void 0;
-const resolveAnimatedImageSource = (src) => {
-    return new URL(src, typeof window === 'undefined' ? undefined : window.origin)
-        .href;
-};
-exports.resolveAnimatedImageSource = resolveAnimatedImageSource;

package/dist/cjs/animated-image/use-element-size.d.ts

@@ -1,6 +0,0 @@
-export type Size = {
-    width: number;
-    height: number;
-};
-export declare const updateAllElementsSizes: () => void;
-export declare const useElementSize: (ref: React.RefObject<HTMLElement>) => Size | null;

package/dist/cjs/animated-image/use-element-size.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useElementSize = exports.updateAllElementsSizes = void 0;
-const react_1 = require("react");
-let elementSizeHooks = [];
-const updateAllElementsSizes = () => {
-    for (const listener of elementSizeHooks) {
-        listener();
-    }
-};
-exports.updateAllElementsSizes = updateAllElementsSizes;
-const useElementSize = (ref) => {
-    const [size, setSize] = (0, react_1.useState)(null);
-    const observer = (0, react_1.useMemo)(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return null;
-        }
-        return new ResizeObserver((entries) => {
-            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
-            const { contentRect } = entries[0];
-            // The clientRect returns the size with `scale()` being applied.
-            const newSize = entries[0].target.getClientRects();
-            if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
-                setSize(null);
-                return;
-            }
-            const probableCssParentScale = newSize[0].width / contentRect.width;
-            const width = newSize[0].width * (1 / probableCssParentScale);
-            const height = newSize[0].height * (1 / probableCssParentScale);
-            setSize({
-                width,
-                height,
-            });
-        });
-    }, []);
-    const updateSize = (0, react_1.useCallback)(() => {
-        if (!ref.current) {
-            return;
-        }
-        const rect = ref.current.getClientRects();
-        if (!rect[0]) {
-            setSize(null);
-            return;
-        }
-        setSize({
-            width: rect[0].width,
-            height: rect[0].height,
-        });
-    }, [ref]);
-    (0, react_1.useEffect)(() => {
-        if (!observer) {
-            return;
-        }
-        updateSize();
-        const { current } = ref;
-        if (ref.current) {
-            observer.observe(ref.current);
-        }
-        return () => {
-            if (current) {
-                observer.unobserve(current);
-            }
-        };
-    }, [observer, ref, updateSize]);
-    (0, react_1.useEffect)(() => {
-        elementSizeHooks.push(updateSize);
-        return () => {
-            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
-        };
-    }, [updateSize]);
-    return size;
-};
-exports.useElementSize = useElementSize;