@depup/lottie-react 3.1.0-depup.0 → 3.1.2-depup.0

package/README.md

@@ -13,8 +13,8 @@ npm install @depup/lottie-react
 
 | Field | Value |
 |-------|-------|
-| Original | [lottie-react](https://www.npmjs.com/package/lottie-react) @ 3.1.0 |
-| Processed | 2026-08-17 |
+| Original | [lottie-react](https://www.npmjs.com/package/lottie-react) @ 3.1.2 |
+| Processed | 2026-09-08 |
 | Smoke test | passed |
 | Deps updated | 0 |
 

package/build/animation/useLottieAnimation.cjs

@@ -15,6 +15,30 @@ function toError(cause) {
 	return cause instanceof Error ? cause : new Error(String(cause));
 }
 /**
+* Takes back the two hidden spans lottie-web appends to `document.body` to
+* measure a font with. The engine appends a pair per font and removes them
+* only on the path where it watches a downloaded font arrive, so a font with
+* nothing to download keeps its pair and every load adds another.
+*
+* Only a font already marked loaded may have its pair taken. A pending one is
+* still being measured through those spans, and a span out of the document
+* measures zero, which the engine reads as the font arriving and then fails on
+* a parent that is no longer there. A download that never arrives therefore
+* keeps its pair, which stays the engine's to collect.
+*
+* `renderer` is untyped upstream, so the path to the fonts is checked rather
+* than trusted.
+*/
+function removeMeasurementSpans(item) {
+	const measured = item.renderer?.globalData?.fontManager?.fonts;
+	const fonts = Array.isArray(measured) ? measured : [];
+	for (const font of fonts) {
+		if (!font.loaded) continue;
+		font.sansCase?.parent.remove();
+		font.monoCase?.parent.remove();
+	}
+}
+/**
 * Everything the animation does, with no opinion about how it is rendered.
 *
 * It takes the engine as an argument so the same logic serves every build.
@@ -309,6 +333,7 @@ function useLottieAnimation(engine, options) {
 			fail(toError(cause));
 			return;
 		}
+		removeMeasurementSpans(item);
 		itemRef.current = item;
 		setAnimationItem(item);
 		item.setSpeed(valuesRef.current.speed);
@@ -373,6 +398,7 @@ function useLottieAnimation(engine, options) {
 		for (const [name, handler] of listeners) item.addEventListener(name, handler);
 		return () => {
 			for (const [name, handler] of listeners) item.removeEventListener(name, handler);
+			removeMeasurementSpans(item);
 			item.destroy();
 			itemRef.current = null;
 			setAnimationItem(null);

package/build/animation/useLottieAnimation.js

@@ -15,6 +15,30 @@ function toError(cause) {
 	return cause instanceof Error ? cause : new Error(String(cause));
 }
 /**
+* Takes back the two hidden spans lottie-web appends to `document.body` to
+* measure a font with. The engine appends a pair per font and removes them
+* only on the path where it watches a downloaded font arrive, so a font with
+* nothing to download keeps its pair and every load adds another.
+*
+* Only a font already marked loaded may have its pair taken. A pending one is
+* still being measured through those spans, and a span out of the document
+* measures zero, which the engine reads as the font arriving and then fails on
+* a parent that is no longer there. A download that never arrives therefore
+* keeps its pair, which stays the engine's to collect.
+*
+* `renderer` is untyped upstream, so the path to the fonts is checked rather
+* than trusted.
+*/
+function removeMeasurementSpans(item) {
+	const measured = item.renderer?.globalData?.fontManager?.fonts;
+	const fonts = Array.isArray(measured) ? measured : [];
+	for (const font of fonts) {
+		if (!font.loaded) continue;
+		font.sansCase?.parent.remove();
+		font.monoCase?.parent.remove();
+	}
+}
+/**
 * Everything the animation does, with no opinion about how it is rendered.
 *
 * It takes the engine as an argument so the same logic serves every build.
@@ -309,6 +333,7 @@ function useLottieAnimation(engine, options) {
 			fail(toError(cause));
 			return;
 		}
+		removeMeasurementSpans(item);
 		itemRef.current = item;
 		setAnimationItem(item);
 		item.setSpeed(valuesRef.current.speed);
@@ -373,6 +398,7 @@ function useLottieAnimation(engine, options) {
 		for (const [name, handler] of listeners) item.addEventListener(name, handler);
 		return () => {
 			for (const [name, handler] of listeners) item.removeEventListener(name, handler);
+			removeMeasurementSpans(item);
 			item.destroy();
 			itemRef.current = null;
 			setAnimationItem(null);

package/build/utils/mergeRefs.cjs

@@ -5,20 +5,25 @@
 * An element has a single `ref` slot, so any element that both this library and
 * the person using it want a handle on needs one callback that feeds both.
 *
-* Teardown is the part that is not boilerplate, because the two supported React
-* versions differ. React 19 treats a function returned from a ref callback as
-* its cleanup and then never calls that ref with `null`, while React 18
-* discards the return and calls with `null`. So each ref gets its own cleanup
-* where it returned one and a `null` call where it did not, and the combined
-* teardown is returned for React 19 to run. React 18 ignores it and calls this
-* callback with `null` instead, which does the same work.
+* Teardown is where the two supported React versions differ. React 19 treats a
+* function returned from a ref callback as its cleanup and never calls that ref
+* with `null`; React 18 always calls with `null` and, in development, reports a
+* returned function. So a combined teardown is returned only when a ref returned
+* a cleanup of its own, since that ref must be torn down by it rather than by a
+* `null` call. Otherwise nothing is returned and both versions call this
+* callback with `null`, which clears every ref.
 */
 function mergeRefs(...refs) {
 	return (node) => {
+		let returned = false;
 		const teardowns = refs.map((ref) => {
 			if (typeof ref === "function") {
 				const cleanup = ref(node);
-				return typeof cleanup === "function" ? cleanup : () => ref(null);
+				if (typeof cleanup === "function") {
+					returned = true;
+					return cleanup;
+				}
+				return () => ref(null);
 			}
 			if (ref) {
 				ref.current = node;
@@ -28,6 +33,7 @@ function mergeRefs(...refs) {
 			}
 			return () => void 0;
 		});
+		if (!returned) return;
 		return () => {
 			for (const teardown of teardowns) teardown();
 		};

package/build/utils/mergeRefs.js

@@ -5,20 +5,25 @@
 * An element has a single `ref` slot, so any element that both this library and
 * the person using it want a handle on needs one callback that feeds both.
 *
-* Teardown is the part that is not boilerplate, because the two supported React
-* versions differ. React 19 treats a function returned from a ref callback as
-* its cleanup and then never calls that ref with `null`, while React 18
-* discards the return and calls with `null`. So each ref gets its own cleanup
-* where it returned one and a `null` call where it did not, and the combined
-* teardown is returned for React 19 to run. React 18 ignores it and calls this
-* callback with `null` instead, which does the same work.
+* Teardown is where the two supported React versions differ. React 19 treats a
+* function returned from a ref callback as its cleanup and never calls that ref
+* with `null`; React 18 always calls with `null` and, in development, reports a
+* returned function. So a combined teardown is returned only when a ref returned
+* a cleanup of its own, since that ref must be torn down by it rather than by a
+* `null` call. Otherwise nothing is returned and both versions call this
+* callback with `null`, which clears every ref.
 */
 function mergeRefs(...refs) {
 	return (node) => {
+		let returned = false;
 		const teardowns = refs.map((ref) => {
 			if (typeof ref === "function") {
 				const cleanup = ref(node);
-				return typeof cleanup === "function" ? cleanup : () => ref(null);
+				if (typeof cleanup === "function") {
+					returned = true;
+					return cleanup;
+				}
+				return () => ref(null);
 			}
 			if (ref) {
 				ref.current = node;
@@ -28,6 +33,7 @@ function mergeRefs(...refs) {
 			}
 			return () => void 0;
 		});
+		if (!returned) return;
 		return () => {
 			for (const teardown of teardowns) teardown();
 		};

package/changes.json

@@ -1,5 +1,5 @@
 {
   "bumped": {},
-  "timestamp": "2026-08-17T00:14:39.892Z",
+  "timestamp": "2026-09-08T00:33:31.334Z",
   "totalUpdated": 0
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depup/lottie-react",
-  "version": "3.1.0-depup.0",
+  "version": "3.1.2-depup.0",
   "description": "Lottie animations in React: one component for the easy path, the whole engine when you need control. (with updated dependencies)",
   "keywords": [
     "lottie-react",
@@ -74,7 +74,7 @@
         "lottie-web"
       ],
       "gzip": true,
-      "limit": "4.9 KB"
+      "limit": "5 KB"
     },
     {
       "name": "import { useLottie }",
@@ -86,7 +86,7 @@
         "lottie-web"
       ],
       "gzip": true,
-      "limit": "3.85 KB"
+      "limit": "3.95 KB"
     },
     {
       "name": "import { Lottie, LottieControls }",
@@ -110,7 +110,7 @@
         "lottie-web/build/player/lottie_svg.js"
       ],
       "gzip": true,
-      "limit": "4.9 KB"
+      "limit": "5 KB"
     },
     {
       "name": "import { LottieLight, useLottieLight }, only its own engine external",
@@ -122,7 +122,7 @@
         "lottie-web/build/player/lottie_light.js"
       ],
       "gzip": true,
-      "limit": "4.9 KB"
+      "limit": "5 KB"
     }
   ],
   "scripts": {
@@ -174,8 +174,8 @@
     "changes": {},
     "depsUpdated": 0,
     "originalPackage": "lottie-react",
-    "originalVersion": "3.1.0",
-    "processedAt": "2026-08-17T00:14:54.679Z",
+    "originalVersion": "3.1.2",
+    "processedAt": "2026-09-08T00:33:40.802Z",
     "smokeTest": "passed"
   }
 }