elements-kit 0.0.19 → 0.0.20

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.
Files changed (56) hide show
  1. package/README.md +51 -104
  2. package/dist/{attributes-aiRoArZz.d.mts → attributes-DILeh3-s.d.mts} +42 -9
  3. package/dist/attributes.d.mts +1 -1
  4. package/dist/attributes.mjs +32 -0
  5. package/dist/{custom-elements-bVYOkHKt.d.mts → custom-elements-D5_NMNyD.d.mts} +18 -0
  6. package/dist/custom-elements.d.mts +1 -1
  7. package/dist/custom-elements.mjs +18 -0
  8. package/dist/{element-DxmInKJw.mjs → element-w1GCIMVp.mjs} +1 -1
  9. package/dist/for.d.mts +31 -2
  10. package/dist/for.mjs +16 -1
  11. package/dist/{infer-Dv5Wk-7E.d.mts → infer-DuFY-y2b.d.mts} +66 -27
  12. package/dist/integrations/react.d.mts +1 -1
  13. package/dist/jsx-runtime/index.d.mts +1 -1
  14. package/dist/jsx-runtime/index.mjs +1 -1
  15. package/dist/signals/index.d.mts +1 -1
  16. package/dist/signals/index.mjs +21 -2
  17. package/dist/{slot-Kb61AcgW.mjs → slot-CKtUoy2X.mjs} +0 -1
  18. package/dist/{slot-B5_VHB7E.d.mts → slot-D5iBUSAm.d.mts} +8 -1
  19. package/dist/slot.d.mts +1 -1
  20. package/dist/slot.mjs +1 -1
  21. package/dist/utilities/active-element.d.mts +1 -1
  22. package/dist/utilities/async.d.mts +39 -1
  23. package/dist/utilities/async.mjs +37 -0
  24. package/dist/utilities/debounced.d.mts +12 -1
  25. package/dist/utilities/debounced.mjs +11 -0
  26. package/dist/utilities/element-rect.d.mts +1 -1
  27. package/dist/utilities/element-scroll.d.mts +1 -1
  28. package/dist/utilities/environment.d.mts +2 -0
  29. package/dist/utilities/environment.mjs +2 -0
  30. package/dist/utilities/event-driven.d.mts +1 -1
  31. package/dist/utilities/event-listener.d.mts +12 -1
  32. package/dist/utilities/focus-within.d.mts +1 -1
  33. package/dist/utilities/hover.d.mts +1 -1
  34. package/dist/utilities/interval.d.mts +14 -1
  35. package/dist/utilities/location.d.mts +1 -1
  36. package/dist/utilities/media-devices.d.mts +1 -1
  37. package/dist/utilities/media-player.d.mts +1 -1
  38. package/dist/utilities/media-query.d.mts +1 -1
  39. package/dist/utilities/network.d.mts +1 -1
  40. package/dist/utilities/orientation.d.mts +1 -1
  41. package/dist/utilities/previous.d.mts +13 -1
  42. package/dist/utilities/previous.mjs +12 -0
  43. package/dist/utilities/promise.d.mts +7 -1
  44. package/dist/utilities/retry.d.mts +15 -0
  45. package/dist/utilities/retry.mjs +15 -0
  46. package/dist/utilities/routing.d.mts +12 -1
  47. package/dist/utilities/routing.mjs +11 -0
  48. package/dist/utilities/search-params.d.mts +1 -1
  49. package/dist/utilities/storage.d.mts +18 -1
  50. package/dist/utilities/storage.mjs +17 -0
  51. package/dist/utilities/throttled.d.mts +12 -1
  52. package/dist/utilities/throttled.mjs +11 -0
  53. package/dist/utilities/timeout.d.mts +1 -1
  54. package/dist/utilities/window-focus.d.mts +1 -1
  55. package/dist/utilities/window-size.d.mts +1 -1
  56. package/package.json +1 -1
@@ -4,6 +4,21 @@ type RetryDelay = number | ((attempt: number) => number);
4
4
  * Wraps `fn` to retry up to `attempts` times on failure.
5
5
  * Delay (if provided) is inserted between failures only — not after the last.
6
6
  * Each attempt runs in an effect scope so `onCleanup` inside `fn` fires before each retry.
7
+ *
8
+ * @example
9
+ * ```ts
10
+ * import { retry } from "elements-kit/utilities/retry";
11
+ *
12
+ * // Constant 500ms delay between retries
13
+ * const load = retry(() => fetch("/api").then(r => r.json()), 3, 500);
14
+ *
15
+ * // Exponential backoff
16
+ * const loadBackoff = retry(
17
+ * () => fetch("/api").then(r => r.json()),
18
+ * 5,
19
+ * (attempt) => 2 ** attempt * 100,
20
+ * );
21
+ * ```
7
22
  */
8
23
  declare function retry<T>(fn: () => Promise<T>, attempts: number, delay?: RetryDelay): () => Promise<T>;
9
24
  //#endregion
@@ -5,6 +5,21 @@ import "../signals/index.mjs";
5
5
  * Wraps `fn` to retry up to `attempts` times on failure.
6
6
  * Delay (if provided) is inserted between failures only — not after the last.
7
7
  * Each attempt runs in an effect scope so `onCleanup` inside `fn` fires before each retry.
8
+ *
9
+ * @example
10
+ * ```ts
11
+ * import { retry } from "elements-kit/utilities/retry";
12
+ *
13
+ * // Constant 500ms delay between retries
14
+ * const load = retry(() => fetch("/api").then(r => r.json()), 3, 500);
15
+ *
16
+ * // Exponential backoff
17
+ * const loadBackoff = retry(
18
+ * () => fetch("/api").then(r => r.json()),
19
+ * 5,
20
+ * (attempt) => 2 ** attempt * 100,
21
+ * );
22
+ * ```
8
23
  */
9
24
  function retry(fn, attempts, delay) {
10
25
  return async () => {
@@ -1,6 +1,17 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/routing.d.ts
4
+ /**
5
+ * Monkey-patches `history.pushState` / `history.replaceState` to dispatch
6
+ * `pushstate` and `replacestate` events on `window`.
7
+ *
8
+ * Needed because the platform only fires `popstate` on back/forward
9
+ * navigation — `currentLocation` and anything else that reacts to
10
+ * programmatic navigation needs these synthetic events.
11
+ *
12
+ * Call once at app boot (or before any router-driven navigation). Safe to
13
+ * call outside a browser — it no-ops.
14
+ */
4
15
  declare function patchHistory(): void;
5
16
  type NavigateOptions = {
6
17
  replace?: boolean;
@@ -16,6 +16,17 @@ const patchHistoryMethod = (method) => {
16
16
  return result;
17
17
  };
18
18
  };
19
+ /**
20
+ * Monkey-patches `history.pushState` / `history.replaceState` to dispatch
21
+ * `pushstate` and `replacestate` events on `window`.
22
+ *
23
+ * Needed because the platform only fires `popstate` on back/forward
24
+ * navigation — `currentLocation` and anything else that reacts to
25
+ * programmatic navigation needs these synthetic events.
26
+ *
27
+ * Call once at app boot (or before any router-driven navigation). Safe to
28
+ * call outside a browser — it no-ops.
29
+ */
19
30
  function patchHistory() {
20
31
  if (typeof window !== "undefined" && typeof history !== "undefined") {
21
32
  patchHistoryMethod("pushState");
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/search-params.d.ts
4
4
  /**
@@ -1,4 +1,4 @@
1
- import { x as Signal } from "../infer-Dv5Wk-7E.mjs";
1
+ import { x as Signal } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/storage.d.ts
4
4
  type StorageOptions<T> = {
@@ -10,12 +10,29 @@ type StorageOptions<T> = {
10
10
  *
11
11
  * Changes made in other tabs/windows are synchronised automatically via
12
12
  * the `StorageEvent`.
13
+ *
14
+ * @example
15
+ * ```ts
16
+ * import { createLocalStorage } from "elements-kit/utilities/storage";
17
+ *
18
+ * const theme = createLocalStorage<"light" | "dark">("theme", "light");
19
+ * theme(); // read current
20
+ * theme("dark"); // write — persists and notifies
21
+ * ```
13
22
  */
14
23
  declare function createLocalStorage<T>(key: string, initialValue: T, options?: StorageOptions<T>): Signal<T>;
15
24
  /**
16
25
  * Returns a `Signal` persisted to `sessionStorage`.
17
26
  *
18
27
  * Session storage is scoped to the current tab — no cross-tab sync.
28
+ *
29
+ * @example
30
+ * ```ts
31
+ * import { createSessionStorage } from "elements-kit/utilities/storage";
32
+ *
33
+ * const draft = createSessionStorage("draft", { title: "", body: "" });
34
+ * draft({ title: "hi", body: "…" });
35
+ * ```
19
36
  */
20
37
  declare function createSessionStorage<T>(key: string, initialValue: T, options?: StorageOptions<T>): Signal<T>;
21
38
  //#endregion
@@ -12,6 +12,15 @@ function readOrDefault(storage, key, initialValue, deserialise) {
12
12
  *
13
13
  * Changes made in other tabs/windows are synchronised automatically via
14
14
  * the `StorageEvent`.
15
+ *
16
+ * @example
17
+ * ```ts
18
+ * import { createLocalStorage } from "elements-kit/utilities/storage";
19
+ *
20
+ * const theme = createLocalStorage<"light" | "dark">("theme", "light");
21
+ * theme(); // read current
22
+ * theme("dark"); // write — persists and notifies
23
+ * ```
15
24
  */
16
25
  function createLocalStorage(key, initialValue, options) {
17
26
  const serialise = options?.serialise ?? ((v) => JSON.stringify(v));
@@ -41,6 +50,14 @@ function createLocalStorage(key, initialValue, options) {
41
50
  * Returns a `Signal` persisted to `sessionStorage`.
42
51
  *
43
52
  * Session storage is scoped to the current tab — no cross-tab sync.
53
+ *
54
+ * @example
55
+ * ```ts
56
+ * import { createSessionStorage } from "elements-kit/utilities/storage";
57
+ *
58
+ * const draft = createSessionStorage("draft", { title: "", body: "" });
59
+ * draft({ title: "hi", body: "…" });
60
+ * ```
44
61
  */
45
62
  function createSessionStorage(key, initialValue, options) {
46
63
  const serialise = options?.serialise ?? ((v) => JSON.stringify(v));
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/throttled.d.ts
4
4
  /**
@@ -7,6 +7,17 @@ import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
7
7
  * value is never lost.
8
8
  *
9
9
  * The initial value is read synchronously.
10
+ *
11
+ * @example
12
+ * ```ts
13
+ * import { signal } from "elements-kit/signals";
14
+ * import { createThrottled } from "elements-kit/utilities/throttled";
15
+ *
16
+ * const scrollY = signal(0);
17
+ * const sampled = createThrottled(scrollY, 100);
18
+ *
19
+ * effect(() => analytics.record(sampled()));
20
+ * ```
10
21
  */
11
22
  declare function createThrottled<T>(getter: () => T, interval: number): Computed<T>;
12
23
  //#endregion
@@ -8,6 +8,17 @@ import { createTimeout } from "./timeout.mjs";
8
8
  * value is never lost.
9
9
  *
10
10
  * The initial value is read synchronously.
11
+ *
12
+ * @example
13
+ * ```ts
14
+ * import { signal } from "elements-kit/signals";
15
+ * import { createThrottled } from "elements-kit/utilities/throttled";
16
+ *
17
+ * const scrollY = signal(0);
18
+ * const sampled = createThrottled(scrollY, 100);
19
+ *
20
+ * effect(() => analytics.record(sampled()));
21
+ * ```
11
22
  */
12
23
  function createThrottled(getter, interval) {
13
24
  const s = signal(getter());
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/timeout.d.ts
4
4
  type TimeoutResult = {
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/window-focus.d.ts
4
4
  /**
@@ -1,4 +1,4 @@
1
- import { y as Computed } from "../infer-Dv5Wk-7E.mjs";
1
+ import { y as Computed } from "../infer-DuFY-y2b.mjs";
2
2
 
3
3
  //#region src/utilities/window-size.d.ts
4
4
  type WindowSizeResult = {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "elements-kit",
3
3
  "type": "module",
4
- "version": "0.0.19",
4
+ "version": "0.0.20",
5
5
  "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
6
6
  "keywords": [
7
7
  "webcomponents",