solid-tiny-utils 0.7.1 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/color/{hex-rgb.d.ts → hex-rgb.d.mts} +5 -3
- package/dist/color/hex-rgb.mjs +62 -0
- package/dist/color/{oklch-rgb.d.ts → oklch-rgb.d.mts} +9 -8
- package/dist/color/oklch-rgb.mjs +101 -0
- package/dist/color/{validation.d.ts → validation.d.mts} +5 -3
- package/dist/color/validation.mjs +35 -0
- package/dist/dom/{css.d.ts → css.d.mts} +5 -3
- package/dist/dom/css.mjs +51 -0
- package/dist/event/create-click-outside.d.mts +9 -0
- package/dist/event/create-click-outside.mjs +33 -0
- package/dist/event/{create-event-listener.d.ts → create-event-listener.d.mts} +7 -6
- package/dist/event/create-event-listener.mjs +34 -0
- package/dist/event/{create-intersection-observer.d.ts → create-intersection-observer.d.mts} +5 -4
- package/dist/event/create-intersection-observer.mjs +29 -0
- package/dist/event/{create-visibility-observer.d.ts → create-visibility-observer.d.mts} +7 -5
- package/dist/event/create-visibility-observer.mjs +46 -0
- package/dist/event/index.d.mts +11 -0
- package/dist/event/index.mjs +14 -0
- package/dist/event/{make-event-listener.d.ts → make-event-listener.d.mts} +8 -7
- package/dist/event/make-event-listener.mjs +35 -0
- package/dist/fn/create-debounce.d.mts +7 -0
- package/dist/fn/create-debounce.mjs +20 -0
- package/dist/fn/{create-loop-exec.d.ts → create-loop-exec.d.mts} +7 -6
- package/dist/fn/create-loop-exec.mjs +59 -0
- package/dist/fn/create-throttle.d.mts +7 -0
- package/dist/fn/create-throttle.mjs +21 -0
- package/dist/fn/index.d.mts +8 -0
- package/dist/fn/index.mjs +9 -0
- package/dist/index.d.mts +29 -0
- package/dist/index.mjs +26 -0
- package/dist/jsx/{attrs.d.ts → attrs.d.mts} +3 -2
- package/dist/jsx/attrs.mjs +26 -0
- package/dist/reactive/access.d.mts +6 -0
- package/dist/reactive/access.mjs +9 -0
- package/dist/reactive/{create-debounce-watch.d.ts → create-debounce-watch.d.mts} +6 -4
- package/dist/reactive/create-debounce-watch.mjs +15 -0
- package/dist/reactive/{create-watch.d.ts → create-watch.d.mts} +4 -3
- package/dist/reactive/create-watch.mjs +9 -0
- package/dist/reactive/index.d.mts +3 -0
- package/dist/types/{fn.d.ts → fn.d.mts} +3 -2
- package/dist/types/index.d.mts +2 -0
- package/dist/types/{maybe.d.ts → maybe.d.mts} +4 -3
- package/dist/utils/{array.d.ts → array.d.mts} +3 -2
- package/dist/utils/array.mjs +66 -0
- package/dist/utils/async.d.mts +8 -0
- package/dist/utils/async.mjs +17 -0
- package/dist/utils/{is.d.ts → is.d.mts} +3 -2
- package/dist/utils/is.mjs +72 -0
- package/dist/utils/{number.d.ts → number.d.mts} +3 -2
- package/dist/utils/number.mjs +127 -0
- package/dist/utils/{random.d.ts → random.d.mts} +3 -2
- package/dist/utils/random.mjs +33 -0
- package/dist/utils/{str.d.ts → str.d.mts} +4 -3
- package/dist/utils/str.mjs +120 -0
- package/package.json +25 -22
- package/dist/chunk-4L6FK7MF.js +0 -9
- package/dist/chunk-6G7GFZV2.js +0 -93
- package/dist/chunk-6OVLJ45M.js +0 -51
- package/dist/chunk-ACZGS7DG.js +0 -72
- package/dist/chunk-AZAXMGEB.js +0 -0
- package/dist/chunk-BLX3XSA6.js +0 -0
- package/dist/chunk-BT47ISVC.js +0 -36
- package/dist/chunk-EZML2DEC.js +0 -0
- package/dist/chunk-FFBJP5FE.js +0 -0
- package/dist/chunk-II6INKPZ.js +0 -8
- package/dist/chunk-KFLH3AZ6.js +0 -40
- package/dist/chunk-KKFGUHFR.js +0 -8
- package/dist/chunk-KM4Q6THD.js +0 -50
- package/dist/chunk-LEWF7QAQ.js +0 -47
- package/dist/chunk-LUFOWTRW.js +0 -0
- package/dist/chunk-PD6VHMH6.js +0 -26
- package/dist/chunk-QPEF6LHH.js +0 -111
- package/dist/chunk-QQVSG76Z.js +0 -36
- package/dist/chunk-S7U3LZNS.js +0 -23
- package/dist/chunk-SK6Y2YH6.js +0 -0
- package/dist/chunk-TDJLPDJF.js +0 -66
- package/dist/chunk-TGWWPUWD.js +0 -55
- package/dist/chunk-U5LQ2AS5.js +0 -0
- package/dist/chunk-WJHRONQU.js +0 -54
- package/dist/chunk-Y4GYGFIT.js +0 -85
- package/dist/chunk-YK5QQQ43.js +0 -12
- package/dist/chunk-YXRZ2KMJ.js +0 -0
- package/dist/color/hex-rgb.js +0 -15
- package/dist/color/index.d.ts +0 -3
- package/dist/color/index.js +0 -30
- package/dist/color/oklch-rgb.js +0 -15
- package/dist/color/validation.js +0 -18
- package/dist/dom/css.js +0 -19
- package/dist/dom/index.d.ts +0 -2
- package/dist/dom/index.js +0 -20
- package/dist/event/create-click-outside.d.ts +0 -8
- package/dist/event/create-click-outside.js +0 -17
- package/dist/event/create-event-listener.js +0 -17
- package/dist/event/create-intersection-observer.js +0 -16
- package/dist/event/create-visibility-observer.js +0 -16
- package/dist/event/index.d.ts +0 -8
- package/dist/event/index.js +0 -33
- package/dist/event/make-event-listener.js +0 -16
- package/dist/fn/create-debounce.d.ts +0 -6
- package/dist/fn/create-debounce.js +0 -15
- package/dist/fn/create-loop-exec.js +0 -15
- package/dist/fn/create-throttle.d.ts +0 -6
- package/dist/fn/create-throttle.js +0 -15
- package/dist/fn/index.d.ts +0 -9
- package/dist/fn/index.js +0 -21
- package/dist/index.d.ts +0 -27
- package/dist/index.js +0 -166
- package/dist/jsx/attrs.js +0 -6
- package/dist/jsx/index.d.ts +0 -1
- package/dist/jsx/index.js +0 -7
- package/dist/reactive/access.d.ts +0 -6
- package/dist/reactive/access.js +0 -13
- package/dist/reactive/create-debounce-watch.js +0 -15
- package/dist/reactive/create-watch.js +0 -6
- package/dist/reactive/index.d.ts +0 -5
- package/dist/reactive/index.js +0 -21
- package/dist/types/fn.js +0 -1
- package/dist/types/index.d.ts +0 -3
- package/dist/types/index.js +0 -3
- package/dist/types/maybe.js +0 -1
- package/dist/utils/array.js +0 -13
- package/dist/utils/async.d.ts +0 -6
- package/dist/utils/async.js +0 -6
- package/dist/utils/index.d.ts +0 -6
- package/dist/utils/index.js +0 -85
- package/dist/utils/is.js +0 -30
- package/dist/utils/number.js +0 -14
- package/dist/utils/object.d.ts +0 -10
- package/dist/utils/object.js +0 -7
- package/dist/utils/random.js +0 -14
- package/dist/utils/str.js +0 -20
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { isArray } from "../utils/is.mjs";
|
|
2
|
+
import { clearArray } from "../utils/array.mjs";
|
|
3
|
+
import { noop } from "../fn/index.mjs";
|
|
4
|
+
import { onCleanup } from "solid-js";
|
|
5
|
+
|
|
6
|
+
//#region src/event/make-event-listener.ts
|
|
7
|
+
/** biome-ignore-all lint/suspicious/noExplicitAny: I need any */
|
|
8
|
+
function makeEventListener(...args) {
|
|
9
|
+
let target;
|
|
10
|
+
let events;
|
|
11
|
+
let listeners;
|
|
12
|
+
let options;
|
|
13
|
+
if (typeof args[0] === "string" || isArray(args[0])) {
|
|
14
|
+
[events, listeners, options] = args;
|
|
15
|
+
target = window;
|
|
16
|
+
} else [target, events, listeners, options] = args;
|
|
17
|
+
if (!target) return noop;
|
|
18
|
+
if (!isArray(events)) events = [events];
|
|
19
|
+
if (!isArray(listeners)) listeners = [listeners];
|
|
20
|
+
const cleanups = [];
|
|
21
|
+
const cleanup = () => {
|
|
22
|
+
for (const c of cleanups) c();
|
|
23
|
+
clearArray(cleanups);
|
|
24
|
+
};
|
|
25
|
+
const register = (el, event, listener, opts) => {
|
|
26
|
+
el.addEventListener(event, listener, opts);
|
|
27
|
+
return () => el.removeEventListener(event, listener, opts);
|
|
28
|
+
};
|
|
29
|
+
cleanups.push(...events.flatMap((event) => listeners.map((listener) => register(target, event, listener, options))));
|
|
30
|
+
onCleanup(cleanup);
|
|
31
|
+
return cleanup;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
//#endregion
|
|
35
|
+
export { makeEventListener };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MaybeAccessor } from "../types/maybe.mjs";
|
|
2
|
+
import "../types/index.mjs";
|
|
3
|
+
|
|
4
|
+
//#region src/fn/create-debounce.d.ts
|
|
5
|
+
declare function createDebounce<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { createDebounce };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { access } from "../reactive/access.mjs";
|
|
2
|
+
import { onCleanup } from "solid-js";
|
|
3
|
+
|
|
4
|
+
//#region src/fn/create-debounce.ts
|
|
5
|
+
function createDebounce(callback, delay) {
|
|
6
|
+
let timeoutId;
|
|
7
|
+
onCleanup(() => {
|
|
8
|
+
clearTimeout(timeoutId);
|
|
9
|
+
});
|
|
10
|
+
const run = (...args) => {
|
|
11
|
+
clearTimeout(timeoutId);
|
|
12
|
+
timeoutId = setTimeout(() => {
|
|
13
|
+
callback(...args);
|
|
14
|
+
}, access(delay));
|
|
15
|
+
};
|
|
16
|
+
return run;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
//#endregion
|
|
20
|
+
export { createDebounce };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { MaybeAccessor, MaybePromise } from "../types/maybe.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/fn/create-loop-exec.d.ts
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* Repeatedly executes an asynchronous function with a specified delay between each execution.
|
|
@@ -15,8 +16,8 @@ import 'solid-js';
|
|
|
15
16
|
* - Uses `setTimeout` for scheduling and `onCleanup` for resource management.
|
|
16
17
|
*/
|
|
17
18
|
declare function createLoopExec(fn: () => MaybePromise<void>, delay: MaybeAccessor<number | false>): {
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
stop: () => void;
|
|
20
|
+
start: () => void;
|
|
20
21
|
};
|
|
21
|
-
|
|
22
|
-
export { createLoopExec };
|
|
22
|
+
//#endregion
|
|
23
|
+
export { createLoopExec };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { isNumber } from "../utils/is.mjs";
|
|
2
|
+
import { access } from "../reactive/access.mjs";
|
|
3
|
+
import { createWatch } from "../reactive/create-watch.mjs";
|
|
4
|
+
import { onCleanup } from "solid-js";
|
|
5
|
+
|
|
6
|
+
//#region src/fn/create-loop-exec.ts
|
|
7
|
+
/**
|
|
8
|
+
* Repeatedly executes an asynchronous function with a specified delay between each execution.
|
|
9
|
+
* The loop continues until the surrounding SolidJS effect is cleaned up.
|
|
10
|
+
*
|
|
11
|
+
* @param fn - The asynchronous function to execute in a loop. Can return a promise or void.
|
|
12
|
+
* @param delay - The delay (in milliseconds) between each execution. Can be a number or a reactive accessor.
|
|
13
|
+
* If `false` or < 0, the loop will not execute.
|
|
14
|
+
*
|
|
15
|
+
* @remarks
|
|
16
|
+
* - The loop is automatically stopped when cleanup.
|
|
17
|
+
* - `fn`'s error will not stop scheduling.
|
|
18
|
+
* - Uses `setTimeout` for scheduling and `onCleanup` for resource management.
|
|
19
|
+
*/
|
|
20
|
+
function createLoopExec(fn, delay) {
|
|
21
|
+
let shouldStop = false;
|
|
22
|
+
let isCleanedUp = false;
|
|
23
|
+
let timer;
|
|
24
|
+
const execFn = async () => {
|
|
25
|
+
clearTimeout(timer);
|
|
26
|
+
const d = access(delay);
|
|
27
|
+
if (shouldStop || !isNumber(d) || d < 0) return;
|
|
28
|
+
try {
|
|
29
|
+
await fn();
|
|
30
|
+
} finally {
|
|
31
|
+
timer = setTimeout(() => {
|
|
32
|
+
execFn();
|
|
33
|
+
}, d);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
createWatch(() => access(delay), () => {
|
|
37
|
+
execFn();
|
|
38
|
+
});
|
|
39
|
+
const stop = () => {
|
|
40
|
+
shouldStop = true;
|
|
41
|
+
clearTimeout(timer);
|
|
42
|
+
};
|
|
43
|
+
const start = () => {
|
|
44
|
+
if (isCleanedUp) return;
|
|
45
|
+
shouldStop = false;
|
|
46
|
+
execFn();
|
|
47
|
+
};
|
|
48
|
+
onCleanup(() => {
|
|
49
|
+
isCleanedUp = true;
|
|
50
|
+
stop();
|
|
51
|
+
});
|
|
52
|
+
return {
|
|
53
|
+
stop,
|
|
54
|
+
start
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
//#endregion
|
|
59
|
+
export { createLoopExec };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MaybeAccessor } from "../types/maybe.mjs";
|
|
2
|
+
import "../types/index.mjs";
|
|
3
|
+
|
|
4
|
+
//#region src/fn/create-throttle.d.ts
|
|
5
|
+
declare function createThrottle<Args extends unknown[]>(callback: (...args: Args) => void, delay: MaybeAccessor<number>): (...args: Args) => void;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { createThrottle };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { access } from "../reactive/access.mjs";
|
|
2
|
+
import { onCleanup } from "solid-js";
|
|
3
|
+
|
|
4
|
+
//#region src/fn/create-throttle.ts
|
|
5
|
+
function createThrottle(callback, delay) {
|
|
6
|
+
let timeoutId;
|
|
7
|
+
onCleanup(() => {
|
|
8
|
+
clearTimeout(timeoutId);
|
|
9
|
+
});
|
|
10
|
+
const run = (...args) => {
|
|
11
|
+
if (timeoutId) return;
|
|
12
|
+
timeoutId = setTimeout(() => {
|
|
13
|
+
callback(...args);
|
|
14
|
+
timeoutId = void 0;
|
|
15
|
+
}, access(delay));
|
|
16
|
+
};
|
|
17
|
+
return run;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
export { createThrottle };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { createDebounce } from "./create-debounce.mjs";
|
|
2
|
+
import { createLoopExec } from "./create-loop-exec.mjs";
|
|
3
|
+
import { createThrottle } from "./create-throttle.mjs";
|
|
4
|
+
|
|
5
|
+
//#region src/fn/index.d.ts
|
|
6
|
+
declare const noop: () => void;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { noop };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { OKLCH, RGB, oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
|
|
2
|
+
import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
|
|
3
|
+
import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
|
|
4
|
+
import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
|
|
5
|
+
import { AnyFn, Fn } from "./types/fn.mjs";
|
|
6
|
+
import { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise } from "./types/maybe.mjs";
|
|
7
|
+
import "./types/index.mjs";
|
|
8
|
+
import { createClickOutside } from "./event/create-click-outside.mjs";
|
|
9
|
+
import { DocumentEventName, GeneralEventListener, WindowEventName, makeEventListener } from "./event/make-event-listener.mjs";
|
|
10
|
+
import { createEventListener } from "./event/create-event-listener.mjs";
|
|
11
|
+
import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
|
|
12
|
+
import { CreateVisibilityObserverOption, EntryCallback, UseVisibilityObserverFn, createVisibilityObserver } from "./event/create-visibility-observer.mjs";
|
|
13
|
+
import { runSolidEventHandler } from "./event/index.mjs";
|
|
14
|
+
import { createDebounce } from "./fn/create-debounce.mjs";
|
|
15
|
+
import { createLoopExec } from "./fn/create-loop-exec.mjs";
|
|
16
|
+
import { createThrottle } from "./fn/create-throttle.mjs";
|
|
17
|
+
import { noop } from "./fn/index.mjs";
|
|
18
|
+
import { dataIf } from "./jsx/attrs.mjs";
|
|
19
|
+
import { access } from "./reactive/access.mjs";
|
|
20
|
+
import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
|
|
21
|
+
import { createWatch } from "./reactive/create-watch.mjs";
|
|
22
|
+
import "./reactive/index.mjs";
|
|
23
|
+
import { clearArray, iterate, list, range } from "./utils/array.mjs";
|
|
24
|
+
import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
|
|
25
|
+
import { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol } from "./utils/is.mjs";
|
|
26
|
+
import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
|
|
27
|
+
import { draw, random, shuffle, uid } from "./utils/random.mjs";
|
|
28
|
+
import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
|
|
29
|
+
export { AnyFn, CreateVisibilityObserverOption, DocumentEventName, EntryCallback, Fn, GeneralEventListener, MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise, OKLCH, RGB, UseVisibilityObserverFn, WindowEventName, access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hexToRgb, inRange, isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol } from "./utils/is.mjs";
|
|
2
|
+
import { clearArray, iterate, list, range } from "./utils/array.mjs";
|
|
3
|
+
import { runAtNextAnimationFrame, sleep } from "./utils/async.mjs";
|
|
4
|
+
import { clamp, inRange, max, min, toHex } from "./utils/number.mjs";
|
|
5
|
+
import { draw, random, shuffle, uid } from "./utils/random.mjs";
|
|
6
|
+
import { camel, capitalize, dash, pascal, snake, template, title, trim } from "./utils/str.mjs";
|
|
7
|
+
import { hexToRgb, rgbToHex } from "./color/hex-rgb.mjs";
|
|
8
|
+
import { oklchToRgb, rgbToOklch } from "./color/oklch-rgb.mjs";
|
|
9
|
+
import { isValidHex, isValidOKLCH, isValidRGB } from "./color/validation.mjs";
|
|
10
|
+
import { combineClass, combineStyle, mountStyle, stringStyleToObject } from "./dom/css.mjs";
|
|
11
|
+
import { access } from "./reactive/access.mjs";
|
|
12
|
+
import { createDebounce } from "./fn/create-debounce.mjs";
|
|
13
|
+
import { createLoopExec } from "./fn/create-loop-exec.mjs";
|
|
14
|
+
import { createThrottle } from "./fn/create-throttle.mjs";
|
|
15
|
+
import { noop } from "./fn/index.mjs";
|
|
16
|
+
import { createWatch } from "./reactive/create-watch.mjs";
|
|
17
|
+
import { createDebouncedWatch } from "./reactive/create-debounce-watch.mjs";
|
|
18
|
+
import { makeEventListener } from "./event/make-event-listener.mjs";
|
|
19
|
+
import { createClickOutside } from "./event/create-click-outside.mjs";
|
|
20
|
+
import { createEventListener } from "./event/create-event-listener.mjs";
|
|
21
|
+
import { createIntersectionObserver } from "./event/create-intersection-observer.mjs";
|
|
22
|
+
import { createVisibilityObserver } from "./event/create-visibility-observer.mjs";
|
|
23
|
+
import { runSolidEventHandler } from "./event/index.mjs";
|
|
24
|
+
import { dataIf } from "./jsx/attrs.mjs";
|
|
25
|
+
|
|
26
|
+
export { access, camel, capitalize, clamp, clearArray, combineClass, combineStyle, createClickOutside, createDebounce, createDebouncedWatch, createEventListener, createIntersectionObserver, createLoopExec, createThrottle, createVisibilityObserver, createWatch, dash, dataIf, draw, hexToRgb, inRange, isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol, isValidHex, isValidOKLCH, isValidRGB, iterate, list, makeEventListener, max, min, mountStyle, noop, oklchToRgb, pascal, random, range, rgbToHex, rgbToOklch, runAtNextAnimationFrame, runSolidEventHandler, shuffle, sleep, snake, stringStyleToObject, template, title, toHex, trim, uid };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
//#region src/jsx/attrs.ts
|
|
2
|
+
/**
|
|
3
|
+
* return '' if show is true
|
|
4
|
+
*
|
|
5
|
+
* suitable when you want to conditionally apply data attributes
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
*
|
|
9
|
+
* ```tsx
|
|
10
|
+
*
|
|
11
|
+
* function MyComponent(props:{size:'small'|'medium'|'large'}) {
|
|
12
|
+
* return <div
|
|
13
|
+
* data-size-small={dataIf(props.size === 'small')}
|
|
14
|
+
* data-size-medium={dataIf(props.size === 'medium')}
|
|
15
|
+
* data-size-large={dataIf(props.size === 'large')}
|
|
16
|
+
* >Hello</div>;
|
|
17
|
+
* }
|
|
18
|
+
*
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
function dataIf(show) {
|
|
22
|
+
return show ? "" : void 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
//#endregion
|
|
26
|
+
export { dataIf };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Accessor, AccessorArray, OnOptions } from "solid-js";
|
|
2
|
+
|
|
3
|
+
//#region src/reactive/create-debounce-watch.d.ts
|
|
2
4
|
|
|
3
5
|
/**
|
|
4
6
|
* Creates a debounced watch effect.
|
|
@@ -6,7 +8,7 @@ import { AccessorArray, Accessor, OnOptions } from 'solid-js';
|
|
|
6
8
|
* opt.delay - The debounce delay in milliseconds. Default is 10ms.
|
|
7
9
|
*/
|
|
8
10
|
declare function createDebouncedWatch<S, Next extends Prev, Prev = Next>(targets: AccessorArray<S> | Accessor<S>, fn: (input: S, prevInput?: S) => void, opt?: OnOptions & {
|
|
9
|
-
|
|
11
|
+
delay?: number;
|
|
10
12
|
}): void;
|
|
11
|
-
|
|
12
|
-
export { createDebouncedWatch };
|
|
13
|
+
//#endregion
|
|
14
|
+
export { createDebouncedWatch };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createDebounce } from "../fn/create-debounce.mjs";
|
|
2
|
+
import { createWatch } from "./create-watch.mjs";
|
|
3
|
+
|
|
4
|
+
//#region src/reactive/create-debounce-watch.ts
|
|
5
|
+
/**
|
|
6
|
+
* Creates a debounced watch effect.
|
|
7
|
+
*
|
|
8
|
+
* opt.delay - The debounce delay in milliseconds. Default is 10ms.
|
|
9
|
+
*/
|
|
10
|
+
function createDebouncedWatch(targets, fn, opt) {
|
|
11
|
+
createWatch(targets, createDebounce(fn, opt?.delay ?? 10), opt);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
//#endregion
|
|
15
|
+
export { createDebouncedWatch };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Accessor, AccessorArray, OnEffectFunction, OnOptions } from "solid-js";
|
|
2
2
|
|
|
3
|
+
//#region src/reactive/create-watch.d.ts
|
|
3
4
|
declare function createWatch<S, Next extends Prev, Prev = Next>(targets: AccessorArray<S> | Accessor<S>, fn: OnEffectFunction<S, undefined | NoInfer<Prev>, Next>, opt?: OnOptions): void;
|
|
4
|
-
|
|
5
|
-
export { createWatch };
|
|
5
|
+
//#endregion
|
|
6
|
+
export { createWatch };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { Accessor } from
|
|
1
|
+
import { Accessor } from "solid-js";
|
|
2
2
|
|
|
3
|
+
//#region src/types/maybe.d.ts
|
|
3
4
|
type MaybeArray<T> = T | T[];
|
|
4
5
|
type MaybePromise<T> = T | Promise<T>;
|
|
5
6
|
type MaybeAccessor<T> = T | Accessor<T>;
|
|
6
7
|
type MaybeNullableAccessor<T> = T | Accessor<T | null | undefined>;
|
|
7
|
-
|
|
8
|
-
export
|
|
8
|
+
//#endregion
|
|
9
|
+
export { MaybeAccessor, MaybeArray, MaybeNullableAccessor, MaybePromise };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/utils/array.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Like a reduce but does not require an array.
|
|
3
4
|
* Only need a number and will iterate the function
|
|
@@ -42,5 +43,5 @@ declare const list: <T = number>(startOrLength: number, end?: number, valueOrMap
|
|
|
42
43
|
* set arr.length to 0
|
|
43
44
|
*/
|
|
44
45
|
declare function clearArray<T>(arr: T[]): void;
|
|
45
|
-
|
|
46
|
-
export { clearArray, iterate, list, range };
|
|
46
|
+
//#endregion
|
|
47
|
+
export { clearArray, iterate, list, range };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { isFn } from "./is.mjs";
|
|
2
|
+
|
|
3
|
+
//#region src/utils/array.ts
|
|
4
|
+
/**
|
|
5
|
+
* Like a reduce but does not require an array.
|
|
6
|
+
* Only need a number and will iterate the function
|
|
7
|
+
* as many times as specified.
|
|
8
|
+
*
|
|
9
|
+
* NOTE: This is NOT zero indexed. If you pass count=5
|
|
10
|
+
* you will get 1, 2, 3, 4, 5 iteration in the callback
|
|
11
|
+
* function
|
|
12
|
+
*/
|
|
13
|
+
const iterate = (count, func, initValue) => {
|
|
14
|
+
let value = initValue;
|
|
15
|
+
for (let i = 1; i <= count; i++) value = func(value, i);
|
|
16
|
+
return value;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Creates a generator that will produce an iteration through
|
|
20
|
+
* the range of number as requested.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* range(3) // yields 0, 1, 2, 3
|
|
24
|
+
* range(0, 3) // yields 0, 1, 2, 3
|
|
25
|
+
* range(0, 3, 'y') // yields y, y, y, y
|
|
26
|
+
* range(0, 3, () => 'y') // yields y, y, y, y
|
|
27
|
+
* range(0, 3, i => i) // yields 0, 1, 2, 3
|
|
28
|
+
* range(0, 3, i => `y${i}`) // yields y0, y1, y2, y3
|
|
29
|
+
* range(0, 3, obj) // yields obj, obj, obj, obj
|
|
30
|
+
* range(0, 6, i => i, 2) // yields 0, 2, 4, 6
|
|
31
|
+
*/
|
|
32
|
+
function* range(startOrLength, end, valueOrMapper = (i) => i, step = 1) {
|
|
33
|
+
const mapper = isFn(valueOrMapper) ? valueOrMapper : () => valueOrMapper;
|
|
34
|
+
const start = end ? startOrLength : 0;
|
|
35
|
+
const final = end ?? startOrLength;
|
|
36
|
+
for (let i = start; i <= final; i += step) {
|
|
37
|
+
yield mapper(i);
|
|
38
|
+
if (i + step > final) break;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Creates a list of given start, end, value, and
|
|
43
|
+
* step parameters.
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* list(3) // 0, 1, 2, 3
|
|
47
|
+
* list(0, 3) // 0, 1, 2, 3
|
|
48
|
+
* list(0, 3, 'y') // y, y, y, y
|
|
49
|
+
* list(0, 3, () => 'y') // y, y, y, y
|
|
50
|
+
* list(0, 3, i => i) // 0, 1, 2, 3
|
|
51
|
+
* list(0, 3, i => `y${i}`) // y0, y1, y2, y3
|
|
52
|
+
* list(0, 3, obj) // obj, obj, obj, obj
|
|
53
|
+
* list(0, 6, i => i, 2) // 0, 2, 4, 6
|
|
54
|
+
*/
|
|
55
|
+
const list = (startOrLength, end, valueOrMapper, step) => {
|
|
56
|
+
return Array.from(range(startOrLength, end, valueOrMapper, step));
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* set arr.length to 0
|
|
60
|
+
*/
|
|
61
|
+
function clearArray(arr) {
|
|
62
|
+
arr.length = 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
//#endregion
|
|
66
|
+
export { clearArray, iterate, list, range };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
//#region src/utils/async.ts
|
|
2
|
+
/**
|
|
3
|
+
* Async wait
|
|
4
|
+
*/
|
|
5
|
+
const sleep = (milliseconds) => {
|
|
6
|
+
return new Promise((res) => setTimeout(res, milliseconds));
|
|
7
|
+
};
|
|
8
|
+
const runAtNextAnimationFrame = (cb) => {
|
|
9
|
+
return requestAnimationFrame(() => {
|
|
10
|
+
requestAnimationFrame(() => {
|
|
11
|
+
cb();
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
export { runAtNextAnimationFrame, sleep };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/utils/is.d.ts
|
|
1
2
|
declare const isSymbol: (value: any) => value is symbol;
|
|
2
3
|
declare const isArray: (arg: any) => arg is any[];
|
|
3
4
|
declare const isObject: (value: any) => value is object;
|
|
@@ -24,5 +25,5 @@ declare const isDate: (value: any) => value is Date;
|
|
|
24
25
|
declare const isPromise: (value: any) => value is Promise<any>;
|
|
25
26
|
declare const isEmpty: (value: any) => boolean;
|
|
26
27
|
declare const isClient: boolean;
|
|
27
|
-
|
|
28
|
-
export { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol };
|
|
28
|
+
//#endregion
|
|
29
|
+
export { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { isServer } from "solid-js/web";
|
|
2
|
+
|
|
3
|
+
//#region src/utils/is.ts
|
|
4
|
+
/** biome-ignore-all lint/suspicious/noExplicitAny: need any */
|
|
5
|
+
const isSymbol = (value) => {
|
|
6
|
+
return !!value && value.constructor === Symbol;
|
|
7
|
+
};
|
|
8
|
+
const isArray = Array.isArray;
|
|
9
|
+
const isObject = (value) => {
|
|
10
|
+
return !!value && value.constructor === Object;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Checks if the given value is primitive.
|
|
14
|
+
*
|
|
15
|
+
* Primitive Types: number , string , boolean , symbol, bigint, undefined, null
|
|
16
|
+
*
|
|
17
|
+
* @param {*} value value to check
|
|
18
|
+
* @returns {boolean} result
|
|
19
|
+
*/
|
|
20
|
+
const isPrimitive = (value) => {
|
|
21
|
+
return value === void 0 || value === null || typeof value !== "object" && typeof value !== "function";
|
|
22
|
+
};
|
|
23
|
+
const isFn = (value) => {
|
|
24
|
+
return !!(value && value.constructor && value.call && value.apply);
|
|
25
|
+
};
|
|
26
|
+
const isString = (value) => {
|
|
27
|
+
return typeof value === "string" || value instanceof String;
|
|
28
|
+
};
|
|
29
|
+
const isInt = (value) => {
|
|
30
|
+
return isNumber(value) && value % 1 === 0;
|
|
31
|
+
};
|
|
32
|
+
const isFloat = (value) => {
|
|
33
|
+
return isNumber(value) && value % 1 !== 0;
|
|
34
|
+
};
|
|
35
|
+
const isNumber = (value) => {
|
|
36
|
+
try {
|
|
37
|
+
return Number(value) === value;
|
|
38
|
+
} catch {
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const isDate = (value) => {
|
|
43
|
+
return Object.prototype.toString.call(value) === "[object Date]";
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* This is really a _best guess_ promise checking. You
|
|
47
|
+
* should probably use Promise.resolve(value) to be 100%
|
|
48
|
+
* sure you're handling it correctly.
|
|
49
|
+
*/
|
|
50
|
+
const isPromise = (value) => {
|
|
51
|
+
if (!value) return false;
|
|
52
|
+
if (!value.then) return false;
|
|
53
|
+
if (!isFn(value.then)) return false;
|
|
54
|
+
return true;
|
|
55
|
+
};
|
|
56
|
+
const isEmpty = (value) => {
|
|
57
|
+
if (value === true || value === false) return true;
|
|
58
|
+
if (value === null || value === void 0) return true;
|
|
59
|
+
if (isNumber(value)) return value === 0;
|
|
60
|
+
if (isDate(value)) return isNaN(value.getTime());
|
|
61
|
+
if (isFn(value)) return false;
|
|
62
|
+
if (isSymbol(value)) return false;
|
|
63
|
+
const length = value.length;
|
|
64
|
+
if (isNumber(length)) return length === 0;
|
|
65
|
+
const size = value.size;
|
|
66
|
+
if (isNumber(size)) return size === 0;
|
|
67
|
+
return Object.keys(value).length === 0;
|
|
68
|
+
};
|
|
69
|
+
const isClient = !isServer;
|
|
70
|
+
|
|
71
|
+
//#endregion
|
|
72
|
+
export { isArray, isClient, isDate, isEmpty, isFloat, isFn, isInt, isNumber, isObject, isPrimitive, isPromise, isString, isSymbol };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/utils/number.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Returns the smallest of the given numbers.
|
|
3
4
|
*
|
|
@@ -109,5 +110,5 @@ declare function inRange(x: number, minimum?: number, maximum?: number, inclusiv
|
|
|
109
110
|
* ```
|
|
110
111
|
*/
|
|
111
112
|
declare function toHex(x: number, pad?: number): string;
|
|
112
|
-
|
|
113
|
-
export { clamp, inRange, max, min, toHex };
|
|
113
|
+
//#endregion
|
|
114
|
+
export { clamp, inRange, max, min, toHex };
|