@trunkjs/browser-utils 1.0.50 → 1.0.53
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/.ai-usage-info.md +3 -2
- package/CHANGELOG.md +32 -0
- package/README.md +20 -0
- package/index.d.ts +1 -0
- package/index.js +425 -247
- package/lib/FormDataAccessor.d.ts +28 -0
- package/package.json +2 -2
- package/skills/browser-utils-usage/SKILL.md +35 -0
- package/skills/browser-utils-usage/references/custom-elements-and-mixins.md +175 -0
- package/skills/browser-utils-usage/references/helpers-and-storage.md +159 -0
- package/skills/form-data-accessor-usage/SKILL.md +53 -0
package/.ai-usage-info.md
CHANGED
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
## Purpose
|
|
4
4
|
|
|
5
|
-
Small browser-side helpers for DOM work, timing, events, storage, and custom-element mixins.
|
|
5
|
+
Small browser-side helpers for DOM work, form values, timing, events, storage, and custom-element mixins.
|
|
6
6
|
|
|
7
7
|
Use this package when you need:
|
|
8
8
|
- small DOM helpers
|
|
9
|
+
- dynamic named form values and element/value entries
|
|
9
10
|
- debounce / wait helpers
|
|
10
11
|
- localStorage / sessionStorage state
|
|
11
12
|
- logging in custom elements
|
|
@@ -16,7 +17,7 @@ Do **not** use it for server-only code.
|
|
|
16
17
|
## Import
|
|
17
18
|
|
|
18
19
|
```ts
|
|
19
|
-
import { create_element, Debouncer, waitForLoad } from '@trunkjs/browser-utils';
|
|
20
|
+
import { create_element, Debouncer, FormDataAccessor, waitForLoad } from '@trunkjs/browser-utils';
|
|
20
21
|
```
|
|
21
22
|
|
|
22
23
|
## Common examples
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
|
+
## 1.0.53 (2026-09-01)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for browser-utils to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 1.0.52 (2026-08-29)
|
|
6
|
+
|
|
7
|
+
### 🩹 Fixes
|
|
8
|
+
|
|
9
|
+
- **browser-utils:** support non-iterable NodeList ([59b4feb](https://github.com/trunkjs/trunkjs-monorepo/commit/59b4feb))
|
|
10
|
+
|
|
11
|
+
### ❤️ Thank You
|
|
12
|
+
|
|
13
|
+
- Matthias Leuffen
|
|
14
|
+
|
|
15
|
+
## Unreleased
|
|
16
|
+
|
|
17
|
+
- Treat named value elements as opaque controls so nested object values are not collected twice.
|
|
18
|
+
|
|
19
|
+
## 1.0.51 (2026-08-29)
|
|
20
|
+
|
|
21
|
+
### ✨ Features
|
|
22
|
+
|
|
23
|
+
- Add `FormDataAccessor` for dynamic named DOM values, element/value entries, and native `FormData` output.
|
|
24
|
+
|
|
25
|
+
### 🩹 Fixes
|
|
26
|
+
|
|
27
|
+
- **browser-utils:** support non-iterable NodeList ([59b4feb](https://github.com/trunkjs/trunkjs-monorepo/commit/59b4feb))
|
|
28
|
+
|
|
29
|
+
### ❤️ Thank You
|
|
30
|
+
|
|
31
|
+
- Matthias Leuffen
|
|
32
|
+
|
|
1
33
|
## 1.0.50 (2026-05-19)
|
|
2
34
|
|
|
3
35
|
This was a version bump only for browser-utils to align it with other projects, there were no code changes.
|
package/README.md
CHANGED
|
@@ -4,6 +4,7 @@ A small collection of browser-focused, framework-agnostic utilities that make co
|
|
|
4
4
|
|
|
5
5
|
Exports:
|
|
6
6
|
- create_element: Minimal DOM element factory
|
|
7
|
+
- FormDataAccessor: Dynamic named form values and element/value entries
|
|
7
8
|
- Debouncer: Debounce helper with optional max-delay
|
|
8
9
|
- Stopwatch: Lightweight performance timer with lap logging
|
|
9
10
|
- waitFor, waitForDomContentLoaded, waitForLoad, sleep, waitForAnimationEnd: Promise-based event and timing helpers
|
|
@@ -22,6 +23,25 @@ import { } from '@trunkjs/browser-utils';
|
|
|
22
23
|
|
|
23
24
|
## Quick start
|
|
24
25
|
|
|
26
|
+
### `class FormDataAccessor`: Read and write named controls
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import { FormDataAccessor } from '@trunkjs/browser-utils';
|
|
30
|
+
|
|
31
|
+
const accessor = new FormDataAccessor(document.querySelector('#profile')!);
|
|
32
|
+
accessor.data = { name: 'Erika', topics: ['docs'] };
|
|
33
|
+
|
|
34
|
+
console.log(accessor.data);
|
|
35
|
+
console.log(accessor.formData);
|
|
36
|
+
|
|
37
|
+
accessor.entries.forEach(({ name, value, element }) => {
|
|
38
|
+
console.log(name, value, element);
|
|
39
|
+
});
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The control list is queried again on every access, so later DOM changes are reflected automatically. Use `entries`
|
|
43
|
+
when state such as `validated`, `invalid`, or `disabled` must be applied directly to the original elements.
|
|
44
|
+
|
|
25
45
|
### `function create_element()`: Create and append an element
|
|
26
46
|
|
|
27
47
|
```ts
|
package/index.d.ts
CHANGED