@sohanemon/utils 4.1.6 → 4.1.8

package/dist/functions/index.d.ts

@@ -165,3 +165,28 @@ export declare function throttle<F extends (...args: any[]) => any>(function_: F
     leading?: boolean;
     trailing?: boolean;
 }): ThrottledFunction<F>;
+/**
+ * Formats a string by replacing each '%s' placeholder with the corresponding argument.
+ * This function mimics the basic behavior of C's printf for %s substitution.
+ *
+ * It supports both calls like `printf(format, ...args)` and `printf(format, argsArray)`.
+ *
+ * @param format - The format string containing '%s' placeholders.
+ * @param args - The values to substitute into the placeholders, either as separate arguments or as a single array.
+ * @returns The formatted string with all '%s' replaced by the provided arguments.
+ *
+ * @example
+ * ```ts
+ * const message = printf("%s love %s", "I", "Bangladesh");
+ * // message === "I love Bangladesh"
+ *
+ * const arr = ["I", "Bangladesh"];
+ * const message2 = printf("%s love %s", arr);
+ * // message2 === "I love Bangladesh"
+ *
+ * // If there are too few arguments:
+ * const incomplete = printf("Bangladesh is %s %s", "beautiful");
+ * // incomplete === "Bangladesh is beautiful"
+ * ```
+ */
+export declare function printf(format: string, ...args: unknown[]): string;

package/dist/functions/index.js

@@ -311,3 +311,35 @@ export function throttle(function_, wait = 100, options) {
     });
     return throttled;
 }
+/**
+ * Formats a string by replacing each '%s' placeholder with the corresponding argument.
+ * This function mimics the basic behavior of C's printf for %s substitution.
+ *
+ * It supports both calls like `printf(format, ...args)` and `printf(format, argsArray)`.
+ *
+ * @param format - The format string containing '%s' placeholders.
+ * @param args - The values to substitute into the placeholders, either as separate arguments or as a single array.
+ * @returns The formatted string with all '%s' replaced by the provided arguments.
+ *
+ * @example
+ * ```ts
+ * const message = printf("%s love %s", "I", "Bangladesh");
+ * // message === "I love Bangladesh"
+ *
+ * const arr = ["I", "Bangladesh"];
+ * const message2 = printf("%s love %s", arr);
+ * // message2 === "I love Bangladesh"
+ *
+ * // If there are too few arguments:
+ * const incomplete = printf("Bangladesh is %s %s", "beautiful");
+ * // incomplete === "Bangladesh is beautiful"
+ * ```
+ */
+export function printf(format, ...args) {
+    const replacements = args.length === 1 && Array.isArray(args[0]) ? args[0] : args;
+    let idx = 0;
+    return format.replace(/%s/g, () => {
+        const arg = replacements[idx++];
+        return arg === undefined ? '' : String(arg);
+    });
+}

package/dist/hooks/index.js

@@ -303,7 +303,7 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         height: 500,
         width: 500,
     });
-    const handleCalculation = () => {
+    const handleCalculation = React.useCallback(() => {
         const blocksHeight = blockIds.reduce((prevHeight, id) => prevHeight + (document.getElementById(id)?.clientHeight || 0), 0);
         const blocksWidth = blockIds.reduce((prevWidth, id) => prevWidth + (document.getElementById(id)?.clientWidth || 0), 0);
         const height = substract
@@ -312,28 +312,80 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         const width = substract
             ? window.innerWidth - blocksWidth - margin
             : blocksWidth + margin;
-        const newDimensions = { height, width };
-        setDimensions(newDimensions);
+        setDimensions((prev) => {
+            // Only update state if dimensions have actually changed
+            if (prev.height === height && prev.width === width) {
+                return prev;
+            }
+            return { height, width };
+        });
         onChange?.({
             blocksWidth,
             blocksHeight,
             remainingWidth: width,
             remainingHeight: height,
         });
-    };
+    }, [blockIds, margin, substract, onChange]);
     useIsomorphicEffect(() => {
         handleCalculation();
-        if (!dynamic)
-            return;
-        if (typeof dynamic === 'string') {
-            const resizableElement = document.getElementById(dynamic);
-            const resizeObserver = new ResizeObserver(() => handleCalculation());
-            if (resizableElement)
-                resizeObserver.observe(resizableElement);
-            return () => resizeObserver.disconnect();
+        const cleanups = [];
+        if (blockIds.length > 0) {
+            const observer = new MutationObserver((mutations) => {
+                let shouldRecalculate = false;
+                for (const mutation of mutations) {
+                    for (const node of mutation.addedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                    for (const node of mutation.removedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                }
+                if (shouldRecalculate) {
+                    handleCalculation();
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            cleanups.push(() => observer.disconnect());
         }
-        window.addEventListener('resize', handleCalculation);
-        return () => window.removeEventListener('resize', handleCalculation);
-    }, []);
+        if (dynamic) {
+            if (typeof dynamic === 'string') {
+                const resizableElement = document.getElementById(dynamic);
+                if (resizableElement) {
+                    const resizeObserver = new ResizeObserver(handleCalculation);
+                    resizeObserver.observe(resizableElement);
+                    cleanups.push(() => resizeObserver.unobserve(resizableElement));
+                    cleanups.push(() => resizeObserver.disconnect());
+                }
+            }
+            else {
+                window.addEventListener('resize', handleCalculation);
+                cleanups.push(() => window.removeEventListener('resize', handleCalculation));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanups) {
+                cleanup();
+            }
+        };
+    }, [handleCalculation, dynamic, blockIds.join(',')]);
     return dimensions;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",