@cripty2001/utils 0.0.147 → 0.0.148

package/dist/Logger/Logger.d.ts

@@ -1,5 +1,5 @@
 import { Whispr } from "@cripty2001/whispr";
-type LoggerItem = {
+export type LoggerItem = {
     id: string;
     date: Date;
     message: string;

package/dist/react/logger-display.js

@@ -10,21 +10,6 @@ const Logger_1 = __importDefault(require("../Logger/Logger"));
 const react_whispr_1 = require("../react-whispr");
 function LoggerReactDisplay() {
     const messages = (0, react_whispr_1.useWhisprValue)(Logger_1.default.lines);
-    const getColor = (severity) => {
-        switch (severity) {
-            case 'success':
-                return '#4CAF50';
-            case 'info':
-                return '#2196F3';
-            case 'warning':
-                return '#FF9800';
-            case 'error':
-                return '#F44336';
-            default:
-                return '#333';
-        }
-    };
-    const relTs = (0, react_whispr_1.useRelTime)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             position: 'fixed',
             bottom: 0,
@@ -43,30 +28,48 @@ function LoggerReactDisplay() {
             }, children: [...messages]
                 .reverse()
                 .slice(0, 3)
-                .map((message) => ((0, jsx_runtime_1.jsxs)("div", { style: {
-                    padding: '0.5rem',
-                    borderRadius: '0.375rem',
-                    boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-                    color: '#fff',
-                    width: '100%',
-                    maxWidth: '65ch',
-                    cursor: 'pointer',
-                    backgroundColor: getColor(message.severity)
-                }, onClick: message.dismiss, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["[", relTs(message.date), "] "] }), message.context && (0, jsx_runtime_1.jsxs)("span", { style: {
-                                            marginLeft: '0.5rem',
-                                        }, children: [" - ", message.context, " "] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: message.dismiss, style: {
-                                    marginLeft: '1rem',
-                                    color: '#fff',
-                                    fontWeight: 'bold',
-                                    background: 'none',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    padding: 0,
-                                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            marginTop: '0.25rem',
-                        }, children: message.message })] }, message.id))) }) }));
+                .map((message) => ((0, jsx_runtime_1.jsx)(LoggerReactDisplayItem, { message: message }, message.id))) }) }));
+}
+function LoggerReactDisplayItem({ message }) {
+    const getColor = (severity) => {
+        switch (severity) {
+            case 'success':
+                return '#4CAF50';
+            case 'info':
+                return '#2196F3';
+            case 'warning':
+                return '#FF9800';
+            case 'error':
+                return '#F44336';
+            default:
+                return '#333';
+        }
+    };
+    const relTs = (0, react_whispr_1.useRelTime)(message.date);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            padding: '0.5rem',
+            borderRadius: '0.375rem',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+            color: '#fff',
+            width: '100%',
+            maxWidth: '65ch',
+            cursor: 'pointer',
+            backgroundColor: getColor(message.severity)
+        }, onClick: message.dismiss, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["[", relTs, "] "] }), message.context && (0, jsx_runtime_1.jsxs)("span", { style: {
+                                    marginLeft: '0.5rem',
+                                }, children: [" - ", message.context, " "] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: message.dismiss, style: {
+                            marginLeft: '1rem',
+                            color: '#fff',
+                            fontWeight: 'bold',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            padding: 0,
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    marginTop: '0.25rem',
+                }, children: message.message })] }, message.id));
 }

package/dist/react-whispr.d.ts

@@ -110,9 +110,11 @@ export declare function useAsync<I, O>(f: (input: I, setProgress: (p: number) =>
 export declare function useAsyncEffect<I>(f: (input: I, setProgress: (p: number) => void, signal: AbortSignal) => Promise<void>, data: I, debounce?: number): void;
 /**
  * Format a timestamp into a relative time string (e.g. "5 minutes ago", "in 2 hours"), using the browser locale.
- * @returns A callback (reactive, will change on refresh) that formats a given timestamp into a relative time string.
+ *
+ * @param data The data to format. Reactive
+ * @returns The formatted timestamp
  */
-export declare function useRelTime(): (ts: Date | number) => string;
+export declare function useRelTime(_data: number | Date): string;
 /**
  * React shorthand for the Searcher
  * @param data The data to search on

package/dist/react-whispr.js

@@ -36,18 +36,11 @@ const Searcher_1 = require("./Searcher");
 function useWhisprValue(w, computer = (d) => d) {
     const value_w = (0, react_1.useRef)(whispr_1.Whispr.from({ w }, ({ w }) => computer(w))).current;
     const [value, setValue] = (0, react_1.useState)(value_w.value);
-    const valueRef = (0, react_1.useRef)(value);
-    (0, react_1.useEffect)(() => {
-        valueRef.current = value;
-    }, [value]);
-    (0, react_1.useEffect)(() => {
-        const unsub = value_w.subscribe((newValue) => {
-            if ((0, lodash_1.isEqual)(newValue, valueRef.current))
-                return;
-            setValue(newValue);
-        }, false);
-        return () => unsub();
-    }, [value_w]);
+    value_w.subscribe((newValue) => {
+        if ((0, lodash_1.isEqual)(newValue, value))
+            return;
+        setValue(newValue);
+    }, false); // Already got the initial value, and this will call syncronously generate a react warning as called on an not yet mounted component
     return value;
 }
 /**
@@ -221,59 +214,59 @@ function useAsyncEffect(f, data, debounce = 200) {
 }
 /**
  * Format a timestamp into a relative time string (e.g. "5 minutes ago", "in 2 hours"), using the browser locale.
- * @returns A callback (reactive, will change on refresh) that formats a given timestamp into a relative time string.
+ *
+ * @param data The data to format. Reactive
+ * @returns The formatted timestamp
  */
-function useRelTime() {
-    const currTs = useCurrentTimestamp(1000);
-    const rtf = (0, react_1.useRef)(new Intl.RelativeTimeFormat(navigator.language, { numeric: "auto" })).current;
-    const getFormat = (_diff) => {
-        const diff = Math.abs(_diff);
-        const breakpoints = [
-            {
-                base: 1,
-                limit: 60,
-                unit: "second"
-            },
-            {
-                base: 60,
-                limit: 60,
-                unit: "minute"
-            },
-            {
-                base: 60 * 60,
-                limit: 24,
-                unit: "hour"
-            },
-            {
-                base: 60 * 60 * 24,
-                limit: 45,
-                unit: "day"
-            },
-        ];
-        for (const { base, limit, unit } of breakpoints) {
-            if (diff < limit * base)
-                return {
-                    base,
-                    unit
-                };
-        }
-        return {
-            base: 60 * 60 * 24 * 7,
-            unit: "week"
-        };
-    };
-    const cb = (0, react_1.useCallback)((ts) => {
-        const now = currTs;
-        const then = ts instanceof Date ? ts.getTime() : ts;
-        const delta = then - now;
-        const seconds = Math.round(delta / 1000);
-        const { base, unit } = getFormat(seconds);
+function useRelTime(_data) {
+    const rtf = new Intl.RelativeTimeFormat(navigator.language, { numeric: "auto" });
+    const data = useWhispr(_data);
+    const toReturn = useSafeRef(() => whispr_1.Whispr.from({ data, curr: (0, _1.CURRENT_TS_MS)() }, ({ data, curr }) => {
+        const then = data instanceof Date ? data.getTime() : data;
+        const seconds = Math.round(then - curr) / 1000;
+        const { base, unit } = useRelTimeFormat(seconds);
         const rounded = seconds > 0 ?
             Math.floor(seconds / base) :
             Math.ceil(seconds / base);
         return rtf.format(rounded, unit);
-    }, [currTs, rtf]);
-    return cb;
+    }));
+    return useWhisprValue(toReturn);
+}
+function useRelTimeFormat(_diff) {
+    const diff = Math.abs(_diff);
+    const breakpoints = [
+        {
+            base: 1,
+            limit: 60,
+            unit: "second"
+        },
+        {
+            base: 60,
+            limit: 60,
+            unit: "minute"
+        },
+        {
+            base: 60 * 60,
+            limit: 24,
+            unit: "hour"
+        },
+        {
+            base: 60 * 60 * 24,
+            limit: 45,
+            unit: "day"
+        },
+    ];
+    for (const { base, limit, unit } of breakpoints) {
+        if (diff < limit * base)
+            return {
+                base,
+                unit
+            };
+    }
+    return {
+        base: 60 * 60 * 24 * 7,
+        unit: "week"
+    };
 }
 /**
  * React shorthand for the Searcher

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cripty2001/utils",
-  "version": "0.0.147",
+  "version": "0.0.148",
   "description": "Internal Set of utils. If you need them use them, otherwise go to the next package ;)",
   "homepage": "https://github.com/cripty2001/utils#readme",
   "bugs": {