id-dom 0.0.1 → 0.0.3
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/Readme.md +23 -17
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
# dom
|
|
1
|
+
# id-dom
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/id-dom)
|
|
4
|
+
[](https://www.npmjs.com/package/id-dom)
|
|
5
|
+
[](https://github.com/iWhatty/id-dom)
|
|
6
|
+
[](https://github.com/iWhatty/id-dom/blob/main/LICENSE.md)
|
|
7
|
+
|
|
2
8
|
|
|
3
9
|
**Deterministic DOM element getters by ID (typed, tiny, modern).**
|
|
4
10
|
|
|
5
|
-
`dom
|
|
11
|
+
`id-dom` is a small utility for grabbing DOM references safely **by `id`**, with predictable behavior:
|
|
6
12
|
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
+
* **Typed getters** (`button('saveBtn')`, `input('name')`, etc.)
|
|
14
|
+
* **Strict or optional** mode (`throw` vs `null`)
|
|
15
|
+
* **Short optional alias** (`.opt`)
|
|
16
|
+
* **Scopable** to a root (`document`, `ShadowRoot`, or an `Element`)
|
|
17
|
+
* **Centralized error handling** (`onError`, optional `warn`)
|
|
18
|
+
* **Zero deps**
|
|
13
19
|
|
|
14
20
|
This is deliberately **not** a selector framework — it’s a tiny “ID-first” primitive for clean, safe DOM wiring.
|
|
15
21
|
|
|
@@ -18,7 +24,7 @@ This is deliberately **not** a selector framework — it’s a tiny “ID-first
|
|
|
18
24
|
## Install
|
|
19
25
|
|
|
20
26
|
```bash
|
|
21
|
-
npm install dom
|
|
27
|
+
npm install id-dom
|
|
22
28
|
```
|
|
23
29
|
|
|
24
30
|
---
|
|
@@ -26,7 +32,7 @@ npm install dom-id
|
|
|
26
32
|
## Quick Start
|
|
27
33
|
|
|
28
34
|
```js
|
|
29
|
-
import dom from 'dom
|
|
35
|
+
import dom from 'id-dom'
|
|
30
36
|
|
|
31
37
|
const saveBtn = dom.button('saveBtn') // throws if missing or wrong type
|
|
32
38
|
saveBtn.addEventListener('click', save)
|
|
@@ -68,7 +74,7 @@ The default export is a scoped instance using `document` (when available) with *
|
|
|
68
74
|
* wrong type/tag → **throws**
|
|
69
75
|
|
|
70
76
|
```js
|
|
71
|
-
import dom from 'dom
|
|
77
|
+
import dom from 'id-dom'
|
|
72
78
|
|
|
73
79
|
const name = dom.input('nameInput')
|
|
74
80
|
const submit = dom.button('submitBtn')
|
|
@@ -84,7 +90,7 @@ Create a scoped instance that searches within a root:
|
|
|
84
90
|
* `ShadowRoot` / `Element` (uses `querySelector(#id)` fallback)
|
|
85
91
|
|
|
86
92
|
```js
|
|
87
|
-
import { createDom } from 'dom
|
|
93
|
+
import { createDom } from 'id-dom'
|
|
88
94
|
|
|
89
95
|
const d = createDom(document, { mode: 'null', warn: true })
|
|
90
96
|
|
|
@@ -110,7 +116,7 @@ type DomMode = 'throw' | 'null'
|
|
|
110
116
|
Generic typed lookup:
|
|
111
117
|
|
|
112
118
|
```js
|
|
113
|
-
import { byId } from 'dom
|
|
119
|
+
import { byId } from 'id-dom'
|
|
114
120
|
|
|
115
121
|
const btn = byId('saveBtn', HTMLButtonElement)
|
|
116
122
|
```
|
|
@@ -129,7 +135,7 @@ const maybeBtn2 = byId.opt('saveBtn', HTMLButtonElement)
|
|
|
129
135
|
Tag-based validation for semantic elements:
|
|
130
136
|
|
|
131
137
|
```js
|
|
132
|
-
import { tag } from 'dom
|
|
138
|
+
import { tag } from 'id-dom'
|
|
133
139
|
|
|
134
140
|
const main = tag('appMain', 'main')
|
|
135
141
|
```
|
|
@@ -184,7 +190,7 @@ dom.canvas.opt('game')
|
|
|
184
190
|
### Throwing (default)
|
|
185
191
|
|
|
186
192
|
```js
|
|
187
|
-
import dom from 'dom
|
|
193
|
+
import dom from 'id-dom'
|
|
188
194
|
|
|
189
195
|
dom.button('missing') // throws
|
|
190
196
|
```
|
|
@@ -192,7 +198,7 @@ dom.button('missing') // throws
|
|
|
192
198
|
### Null-returning mode
|
|
193
199
|
|
|
194
200
|
```js
|
|
195
|
-
import { createDom } from 'dom
|
|
201
|
+
import { createDom } from 'id-dom'
|
|
196
202
|
|
|
197
203
|
const d = createDom(document, { mode: 'null' })
|
|
198
204
|
|
|
@@ -221,7 +227,7 @@ createDom(document, { mode: 'null', warn: true })
|
|
|
221
227
|
## Shadow DOM / Scoped Roots
|
|
222
228
|
|
|
223
229
|
```js
|
|
224
|
-
import { createDom } from 'dom
|
|
230
|
+
import { createDom } from 'id-dom'
|
|
225
231
|
|
|
226
232
|
const host = document.querySelector('#widget')
|
|
227
233
|
const shadow = host.attachShadow({ mode: 'open' })
|