Added callback function prop to facilitate logging

Added timout prop to allow user to set the renderscan highlight duration

Added documentation for callback and duration options

1.1.0

ReadMe update

Author: Tintow

README.md

@@ -29,6 +29,8 @@ The overlay button appears in the bottom right corner and is enabled by default.
 - `initialEnabled` (default: `true`) - Start with render scanning enabled
 - `offsetLeft` (default: `0`) - Offset the button left from its default position
 - `hideIcon` (default: `false`) - Hide the render scan button while keeping functionality active
+- `callback` (default: `undefined`) - Optional user defined function that gets called once per valid mutation. Signature is `(mutation:MutationRecord)=>void;`
+- `duration` (defult: `1000`) - Adjust how long the render scan highlights remain on screen in ms
 
 ## Development
 

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-render-scan",
-	"version": "1.0.5",
+	"version": "1.1.0",
 	"license": "MIT",
 	"homepage": "https://khromov.github.io/svelte-render-scan/",
 	"repository": {

package.json

@@ -7,11 +7,15 @@
 	let {
 		initialEnabled = true,
 		offsetLeft = 0,
-		hideIcon = false
+		hideIcon = false,
+		callback = undefined,
+		duration = 1000
 	} = $props<{
 		initialEnabled?: boolean;
 		offsetLeft?: number;
 		hideIcon?: boolean;
+		callback?: (mutationRecord: MutationRecord) => void;
+		duration?: number;
 	}>();
 
 	// State management
@@ -37,7 +41,7 @@
 </script>
 
 {#if enabled}
-	<RenderScanObserver />
+	<RenderScanObserver {callback} {duration} />
 {/if}
 
 <!-- Floating button -->

src/lib/components/RenderScan.svelte

@@ -29,10 +29,8 @@
 		get title() {
 			// Get entries once and use them for both the reasons string and total
 			const entries = [...this.#reasons.entries()];
-			const reasons = entries
-				.map(([key, count]) => `${key} (${count})`)
-				.join(' , ');
-			
+			const reasons = entries.map(([key, count]) => `${key} (${count})`).join(' , ');
+
 			// Calculate total using the same entries array
 			const total = entries.reduce((sum, [_, count]) => sum + count, 0);
 
@@ -94,7 +92,7 @@
 						this.#element.remove();
 						activeHighlights.delete(this);
 					}, 250); // Match the CSS transition duration
-				}, 1000);
+				}, duration);
 			});
 		}
 
@@ -129,6 +127,12 @@
 		}
 	}
 
+	// Props with defaults
+	let { duration = 1000, callback = undefined } = $props<{
+		duration: number;
+		callback: (mutation: MutationRecord) => void;
+	}>();
+
 	let overlayEl: HTMLDivElement | null = null;
 	let mutationObserver: MutationObserver | null = null;
 	let cache = new WeakMap<Node, Highlight>();
@@ -185,6 +189,7 @@
 					default:
 						console.log(`Unhandled mutation type: ${mutation.type}`);
 				}
+				if (callback) callback(mutation);
 			}
 		});
 
@@ -213,4 +218,4 @@
 			activeHighlights.clear();
 		};
 	});
-</script>
+</script>

src/lib/components/RenderScanObserver.svelte

@@ -83,6 +83,12 @@
   offsetLeft={60}
 />`
 	};
+	// Callback usage code snippet
+	const callbackCode = `function customCallback(mutation: MutationRecord) {
+	// Custom code...
+}
+
+<RenderScan callback={customCallback} />`;
 </script>
 
 <div class="border-b-4 bg-[#faf6f4] py-12">
@@ -269,6 +275,22 @@
 				<div class="code-block">{`<RenderScan hideIcon={true} />`}</div>
 			</div>
 
+			<div>
+				<h3 class="mb-2 font-bold">Highlight Duration</h3>
+				<p class="mb-3 text-gray-600">
+					Adjust how long the render scan highlights remain on screen (default=1000):
+				</p>
+				<div class="code-block">{`<RenderScan duration={2000} />`}</div>
+			</div>
+
+			<div>
+				<h3 class="mb-2 font-bold">Callback Function</h3>
+				<p class="mb-3 text-gray-600">
+					Optional user defined function that gets called once per valid mutation:
+				</p>
+				<div class="code-block">{callbackCode}</div>
+			</div>
+
 			<div>
 				<h3 class="mb-2 font-bold">Combined Props</h3>
 				<p class="mb-3 text-gray-600">Use multiple props together:</p>