@medyll/idae-be 1.89.0 → 1.96.2
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/README.md +377 -377
- package/cli.js +46 -0
- package/package.json +17 -4
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 medyll
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 medyll
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,377 +1,377 @@
|
|
|
1
|
-
# @medyll/idae-be
|
|
2
|
-
|
|
3
|
-
A DOM walk and manipulation library with a callback-based approach for precise element targeting.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @medyll/idae-be
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Key Features
|
|
12
|
-
|
|
13
|
-
- Root object persistence for consistent chaining
|
|
14
|
-
- Callback-based element manipulation for precise targeting
|
|
15
|
-
- Comprehensive DOM traversal and manipulation
|
|
16
|
-
- Event handling, style management, and attribute control
|
|
17
|
-
- Timer integration for dynamic operations
|
|
18
|
-
- HTTP content loading and insertion
|
|
19
|
-
|
|
20
|
-
## Unique Approach
|
|
21
|
-
|
|
22
|
-
Unlike jQuery and other chained libraries, `@medyll/idae-be` always returns the root object. This approach allows for consistent chaining while using callbacks to manipulate targeted elements. This design provides more control and clarity in complex DOM operations.
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
## Basic Usage
|
|
27
|
-
|
|
28
|
-
### Example 1: DOM Manipulation with Callbacks
|
|
29
|
-
|
|
30
|
-
```javascript
|
|
31
|
-
import { be, toBe } from '@medyll/idae-be';
|
|
32
|
-
|
|
33
|
-
// Select the container element
|
|
34
|
-
be('#container')
|
|
35
|
-
.append(toBe('<div>New content</div>'), ({ be }) => {
|
|
36
|
-
be.addClass('highlight')
|
|
37
|
-
.on('click', () => console.log('Clicked!'))
|
|
38
|
-
.append(toBe('<span>Nested content</span>'), ({ be }) => {
|
|
39
|
-
be.addClass('nested').on('mouseover', () => console.log('Hovered!'));
|
|
40
|
-
});
|
|
41
|
-
})
|
|
42
|
-
.prepend(toBe('<h1>Title</h1>'), ({ be }) => {
|
|
43
|
-
be.addClass('title').children(({ be }) => {
|
|
44
|
-
be.setStyle({ color: 'blue' });
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
|
-
### Example 2: Event Handling and Traversal
|
|
52
|
-
|
|
53
|
-
```javascript
|
|
54
|
-
import { be } from '@medyll/idae-be';
|
|
55
|
-
|
|
56
|
-
// Add a click event to all buttons inside the container
|
|
57
|
-
be('#container button').on('click', ({ target }) => {
|
|
58
|
-
be(target)
|
|
59
|
-
.toggleClass('active')
|
|
60
|
-
.siblings(({ be }) => {
|
|
61
|
-
be.removeClass('active').on('mouseover', () => console.log('Sibling hovered!'));
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
// Fire a custom event and handle it
|
|
66
|
-
be('#container').fire('customEvent', { detailKey: 'detailValue' }, ({ be }) => {
|
|
67
|
-
be.children(({ be }) => {
|
|
68
|
-
be.addClass('custom-event-handled');
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
---
|
|
74
|
-
|
|
75
|
-
### Example 3: Styling and Attributes
|
|
76
|
-
|
|
77
|
-
```javascript
|
|
78
|
-
import { be } from '@medyll/idae-be';
|
|
79
|
-
|
|
80
|
-
// Select an element and update its styles and attributes
|
|
81
|
-
be('#element')
|
|
82
|
-
.setStyle({ backgroundColor: 'yellow', fontSize: '16px' }, ({ be }) => {
|
|
83
|
-
be.setAttr('data-role', 'admin').children(({ be }) => {
|
|
84
|
-
be.setStyle({ color: 'red' }).setAttr('data-child', 'true');
|
|
85
|
-
});
|
|
86
|
-
})
|
|
87
|
-
.addClass('styled-element', ({ be }) => {
|
|
88
|
-
be.siblings(({ be }) => {
|
|
89
|
-
be.setStyle({ opacity: '0.5' });
|
|
90
|
-
});
|
|
91
|
-
});
|
|
92
|
-
```
|
|
93
|
-
#### `unwrap(callback?: HandlerCallBackFn): Be`
|
|
94
|
-
Removes the parent element of the selected element(s), keeping the selected element(s) in the DOM.
|
|
95
|
-
|
|
96
|
-
**Example:**
|
|
97
|
-
```javascript
|
|
98
|
-
// HTML: <div id="wrapper"><span id="child">Content</span></div>
|
|
99
|
-
be('#child').unwrap();
|
|
100
|
-
// Result: <span id="child">Content</span>
|
|
101
|
-
---
|
|
102
|
-
|
|
103
|
-
### Example 4: Timers
|
|
104
|
-
|
|
105
|
-
```javascript
|
|
106
|
-
import { be } from '@medyll/idae-be';
|
|
107
|
-
|
|
108
|
-
// Set a timeout to execute a callback after 100ms
|
|
109
|
-
be('#test').timeout(100, ({ be }) => {
|
|
110
|
-
be.setStyle({ backgroundColor: 'yellow' }).append('<span>Timeout executed</span>');
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
// Set an interval to execute a callback every 400ms
|
|
114
|
-
const intervalInstance = be('#test').interval(400, ({ be }) => {
|
|
115
|
-
be.toggleClass('highlight');
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
// Clear the interval after 600ms
|
|
119
|
-
setTimeout(() => {
|
|
120
|
-
intervalInstance.clearInterval();
|
|
121
|
-
}, 600);
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
---
|
|
125
|
-
|
|
126
|
-
### Example 5: Walk
|
|
127
|
-
|
|
128
|
-
```javascript
|
|
129
|
-
import { be } from '@medyll/idae-be';
|
|
130
|
-
|
|
131
|
-
// Traverse up the DOM tree to find the parent element
|
|
132
|
-
be('#child').up('#parent', ({ be: parent }) => {
|
|
133
|
-
parent.addClass('highlight')
|
|
134
|
-
.children(({ be: child }) => {
|
|
135
|
-
child.setStyle({ color: 'blue' });
|
|
136
|
-
});
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
// Find all siblings of an element and add a class
|
|
140
|
-
be('#target').siblings(({ be: siblings }) => {
|
|
141
|
-
siblings.addClass('sibling-class').children(({ be }) => {
|
|
142
|
-
be.setStyle({ fontWeight: 'bold' });
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
// Find the closest ancestor matching a selector
|
|
147
|
-
be('#child').closest('.ancestor', ({ be: closest }) => {
|
|
148
|
-
closest.setStyle({ border: '2px solid red' }).children(({ be }) => {
|
|
149
|
-
be.addClass('ancestor-child');
|
|
150
|
-
});
|
|
151
|
-
});
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
---
|
|
155
|
-
|
|
156
|
-
### Example 6: HTTP Content Loading and Insertion
|
|
157
|
-
|
|
158
|
-
```javascript
|
|
159
|
-
import { be } from '@medyll/idae-be';
|
|
160
|
-
|
|
161
|
-
// Load content from a URL and update the element
|
|
162
|
-
be('#test').updateHttp('/content.html', ({ be }) => {
|
|
163
|
-
console.log('Content loaded:', be.html);
|
|
164
|
-
});
|
|
165
|
-
|
|
166
|
-
// Load content and insert it at a specific position
|
|
167
|
-
be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
|
|
168
|
-
console.log('Content inserted:', be.html);
|
|
169
|
-
});
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
---
|
|
173
|
-
|
|
174
|
-
## API Reference
|
|
175
|
-
|
|
176
|
-
### Core Methods
|
|
177
|
-
|
|
178
|
-
#### `be(selector: string | HTMLElement | HTMLElement[]): Be`
|
|
179
|
-
Create a new Be instance.
|
|
180
|
-
|
|
181
|
-
**Example:**
|
|
182
|
-
```javascript
|
|
183
|
-
const instance = be('#test');
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
#### `toBe(str: string | HTMLElement, options?: { tag?: string }): Be`
|
|
187
|
-
Convert a string or HTMLElement to a Be instance.
|
|
188
|
-
|
|
189
|
-
**Example:**
|
|
190
|
-
```javascript
|
|
191
|
-
const newElement = toBe('<div>Content</div>');
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
#### `createBe(tagOrHtml: string, options?: Object): Be`
|
|
195
|
-
Create a new Be element.
|
|
196
|
-
|
|
197
|
-
**Example:**
|
|
198
|
-
```javascript
|
|
199
|
-
const newElement = createBe('div', { className: 'my-class' });
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
---
|
|
203
|
-
|
|
204
|
-
### HTTP Methods
|
|
205
|
-
|
|
206
|
-
#### `updateHttp(url: string, callback?: HandlerCallBackFn): Be`
|
|
207
|
-
Loads content from a URL and updates the element's content.
|
|
208
|
-
|
|
209
|
-
**Example:**
|
|
210
|
-
```javascript
|
|
211
|
-
be('#test').updateHttp('/content.html', ({ be }) => {
|
|
212
|
-
console.log(be.html);
|
|
213
|
-
});
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
#### `insertHttp(url: string, mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', callback?: HandlerCallBackFn): Be`
|
|
217
|
-
Loads content from a URL and inserts it into the element at a specified position.
|
|
218
|
-
|
|
219
|
-
**Example:**
|
|
220
|
-
```javascript
|
|
221
|
-
be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
|
|
222
|
-
console.log(be.html);
|
|
223
|
-
});
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
---
|
|
227
|
-
|
|
228
|
-
### Timers
|
|
229
|
-
|
|
230
|
-
#### `timeout(delay: number, callback: HandlerCallBackFn): Be`
|
|
231
|
-
Set a timeout for an element.
|
|
232
|
-
|
|
233
|
-
**Example:**
|
|
234
|
-
```javascript
|
|
235
|
-
be('#test').timeout(1000, () => console.log('Timeout executed'));
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
#### `interval(delay: number, callback: HandlerCallBackFn): Be`
|
|
239
|
-
Set an interval for an element.
|
|
240
|
-
|
|
241
|
-
**Example:**
|
|
242
|
-
```javascript
|
|
243
|
-
be('#test').interval(500, () => console.log('Interval executed'));
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
#### `clearTimeout(): Be`
|
|
247
|
-
Clear a timeout.
|
|
248
|
-
|
|
249
|
-
**Example:**
|
|
250
|
-
```javascript
|
|
251
|
-
const timeoutInstance = be('#test').timeout(1000, () => console.log('Timeout executed'));
|
|
252
|
-
timeoutInstance.clearTimeout();
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
#### `clearInterval(): Be`
|
|
256
|
-
Clear an interval.
|
|
257
|
-
|
|
258
|
-
**Example:**
|
|
259
|
-
```javascript
|
|
260
|
-
const intervalInstance = be('#test').interval(500, () => console.log('Interval executed'));
|
|
261
|
-
intervalInstance.clearInterval();
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
---
|
|
265
|
-
|
|
266
|
-
### Traversal
|
|
267
|
-
|
|
268
|
-
#### `up(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
269
|
-
Traverse up the DOM tree.
|
|
270
|
-
|
|
271
|
-
**Example:**
|
|
272
|
-
```javascript
|
|
273
|
-
be('#child').up();
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
#### `next(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
277
|
-
Traverse to the next sibling.
|
|
278
|
-
|
|
279
|
-
**Example:**
|
|
280
|
-
```javascript
|
|
281
|
-
be('#sibling1').next();
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
#### `previous(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
285
|
-
Traverse to the previous sibling.
|
|
286
|
-
|
|
287
|
-
**Example:**
|
|
288
|
-
```javascript
|
|
289
|
-
be('#sibling2').previous();
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
#### `siblings(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
293
|
-
Find all sibling elements.
|
|
294
|
-
|
|
295
|
-
**Example:**
|
|
296
|
-
```javascript
|
|
297
|
-
be('#child').siblings();
|
|
298
|
-
```
|
|
299
|
-
|
|
300
|
-
#### `children(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
301
|
-
Find all child elements.
|
|
302
|
-
|
|
303
|
-
**Example:**
|
|
304
|
-
```javascript
|
|
305
|
-
be('#parent').children();
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
#### `closest(selector: string, callback?: HandlerCallBackFn): Be`
|
|
309
|
-
Find the closest ancestor matching a selector.
|
|
310
|
-
|
|
311
|
-
**Example:**
|
|
312
|
-
```javascript
|
|
313
|
-
be('#child').closest('#ancestor');
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
---
|
|
317
|
-
|
|
318
|
-
### Styling
|
|
319
|
-
|
|
320
|
-
#### `setStyle(styles: Record<string, string>): Be`
|
|
321
|
-
Set CSS styles for an element.
|
|
322
|
-
|
|
323
|
-
**Example:**
|
|
324
|
-
```javascript
|
|
325
|
-
be('#test').setStyle({ color: 'red', fontSize: '16px' });
|
|
326
|
-
```
|
|
327
|
-
|
|
328
|
-
#### `getStyle(property: string): string | null`
|
|
329
|
-
Get the value of a CSS property.
|
|
330
|
-
|
|
331
|
-
**Example:**
|
|
332
|
-
```javascript
|
|
333
|
-
const color = be('#test').getStyle('color');
|
|
334
|
-
console.log(color); // Output: "red"
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
#### `unsetStyle(property: string): Be`
|
|
338
|
-
Remove a CSS property from an element.
|
|
339
|
-
|
|
340
|
-
**Example:**
|
|
341
|
-
```javascript
|
|
342
|
-
be('#test').unsetStyle('color');
|
|
343
|
-
```
|
|
344
|
-
|
|
345
|
-
---
|
|
346
|
-
|
|
347
|
-
### Events
|
|
348
|
-
|
|
349
|
-
#### `on(eventName: string, handler: EventListener): Be`
|
|
350
|
-
Add an event listener to an element.
|
|
351
|
-
|
|
352
|
-
**Example:**
|
|
353
|
-
```javascript
|
|
354
|
-
be('#test').on('click', () => console.log('Clicked!'));
|
|
355
|
-
```
|
|
356
|
-
|
|
357
|
-
#### `off(eventName: string, handler: EventListener): Be`
|
|
358
|
-
Remove an event listener from an element.
|
|
359
|
-
|
|
360
|
-
**Example:**
|
|
361
|
-
```javascript
|
|
362
|
-
be('#test').off('click', handler);
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
#### `fire(eventName: string, detail?: any): Be`
|
|
366
|
-
Dispatch a custom event.
|
|
367
|
-
|
|
368
|
-
**Example:**
|
|
369
|
-
```javascript
|
|
370
|
-
be('#test').fire('customEvent', { key: 'value' });
|
|
371
|
-
```
|
|
372
|
-
|
|
373
|
-
---
|
|
374
|
-
|
|
375
|
-
## License
|
|
376
|
-
|
|
377
|
-
This project is licensed under the MIT License.
|
|
1
|
+
# @medyll/idae-be
|
|
2
|
+
|
|
3
|
+
A DOM walk and manipulation library with a callback-based approach for precise element targeting.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @medyll/idae-be
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Key Features
|
|
12
|
+
|
|
13
|
+
- Root object persistence for consistent chaining
|
|
14
|
+
- Callback-based element manipulation for precise targeting
|
|
15
|
+
- Comprehensive DOM traversal and manipulation
|
|
16
|
+
- Event handling, style management, and attribute control
|
|
17
|
+
- Timer integration for dynamic operations
|
|
18
|
+
- HTTP content loading and insertion
|
|
19
|
+
|
|
20
|
+
## Unique Approach
|
|
21
|
+
|
|
22
|
+
Unlike jQuery and other chained libraries, `@medyll/idae-be` always returns the root object. This approach allows for consistent chaining while using callbacks to manipulate targeted elements. This design provides more control and clarity in complex DOM operations.
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Basic Usage
|
|
27
|
+
|
|
28
|
+
### Example 1: DOM Manipulation with Callbacks
|
|
29
|
+
|
|
30
|
+
```javascript
|
|
31
|
+
import { be, toBe } from '@medyll/idae-be';
|
|
32
|
+
|
|
33
|
+
// Select the container element
|
|
34
|
+
be('#container')
|
|
35
|
+
.append(toBe('<div>New content</div>'), ({ be }) => {
|
|
36
|
+
be.addClass('highlight')
|
|
37
|
+
.on('click', () => console.log('Clicked!'))
|
|
38
|
+
.append(toBe('<span>Nested content</span>'), ({ be }) => {
|
|
39
|
+
be.addClass('nested').on('mouseover', () => console.log('Hovered!'));
|
|
40
|
+
});
|
|
41
|
+
})
|
|
42
|
+
.prepend(toBe('<h1>Title</h1>'), ({ be }) => {
|
|
43
|
+
be.addClass('title').children(({ be }) => {
|
|
44
|
+
be.setStyle({ color: 'blue' });
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### Example 2: Event Handling and Traversal
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
import { be } from '@medyll/idae-be';
|
|
55
|
+
|
|
56
|
+
// Add a click event to all buttons inside the container
|
|
57
|
+
be('#container button').on('click', ({ target }) => {
|
|
58
|
+
be(target)
|
|
59
|
+
.toggleClass('active')
|
|
60
|
+
.siblings(({ be }) => {
|
|
61
|
+
be.removeClass('active').on('mouseover', () => console.log('Sibling hovered!'));
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Fire a custom event and handle it
|
|
66
|
+
be('#container').fire('customEvent', { detailKey: 'detailValue' }, ({ be }) => {
|
|
67
|
+
be.children(({ be }) => {
|
|
68
|
+
be.addClass('custom-event-handled');
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
### Example 3: Styling and Attributes
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
import { be } from '@medyll/idae-be';
|
|
79
|
+
|
|
80
|
+
// Select an element and update its styles and attributes
|
|
81
|
+
be('#element')
|
|
82
|
+
.setStyle({ backgroundColor: 'yellow', fontSize: '16px' }, ({ be }) => {
|
|
83
|
+
be.setAttr('data-role', 'admin').children(({ be }) => {
|
|
84
|
+
be.setStyle({ color: 'red' }).setAttr('data-child', 'true');
|
|
85
|
+
});
|
|
86
|
+
})
|
|
87
|
+
.addClass('styled-element', ({ be }) => {
|
|
88
|
+
be.siblings(({ be }) => {
|
|
89
|
+
be.setStyle({ opacity: '0.5' });
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
#### `unwrap(callback?: HandlerCallBackFn): Be`
|
|
94
|
+
Removes the parent element of the selected element(s), keeping the selected element(s) in the DOM.
|
|
95
|
+
|
|
96
|
+
**Example:**
|
|
97
|
+
```javascript
|
|
98
|
+
// HTML: <div id="wrapper"><span id="child">Content</span></div>
|
|
99
|
+
be('#child').unwrap();
|
|
100
|
+
// Result: <span id="child">Content</span>
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
### Example 4: Timers
|
|
104
|
+
|
|
105
|
+
```javascript
|
|
106
|
+
import { be } from '@medyll/idae-be';
|
|
107
|
+
|
|
108
|
+
// Set a timeout to execute a callback after 100ms
|
|
109
|
+
be('#test').timeout(100, ({ be }) => {
|
|
110
|
+
be.setStyle({ backgroundColor: 'yellow' }).append('<span>Timeout executed</span>');
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// Set an interval to execute a callback every 400ms
|
|
114
|
+
const intervalInstance = be('#test').interval(400, ({ be }) => {
|
|
115
|
+
be.toggleClass('highlight');
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
// Clear the interval after 600ms
|
|
119
|
+
setTimeout(() => {
|
|
120
|
+
intervalInstance.clearInterval();
|
|
121
|
+
}, 600);
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
### Example 5: Walk
|
|
127
|
+
|
|
128
|
+
```javascript
|
|
129
|
+
import { be } from '@medyll/idae-be';
|
|
130
|
+
|
|
131
|
+
// Traverse up the DOM tree to find the parent element
|
|
132
|
+
be('#child').up('#parent', ({ be: parent }) => {
|
|
133
|
+
parent.addClass('highlight')
|
|
134
|
+
.children(({ be: child }) => {
|
|
135
|
+
child.setStyle({ color: 'blue' });
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
// Find all siblings of an element and add a class
|
|
140
|
+
be('#target').siblings(({ be: siblings }) => {
|
|
141
|
+
siblings.addClass('sibling-class').children(({ be }) => {
|
|
142
|
+
be.setStyle({ fontWeight: 'bold' });
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
// Find the closest ancestor matching a selector
|
|
147
|
+
be('#child').closest('.ancestor', ({ be: closest }) => {
|
|
148
|
+
closest.setStyle({ border: '2px solid red' }).children(({ be }) => {
|
|
149
|
+
be.addClass('ancestor-child');
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
### Example 6: HTTP Content Loading and Insertion
|
|
157
|
+
|
|
158
|
+
```javascript
|
|
159
|
+
import { be } from '@medyll/idae-be';
|
|
160
|
+
|
|
161
|
+
// Load content from a URL and update the element
|
|
162
|
+
be('#test').updateHttp('/content.html', ({ be }) => {
|
|
163
|
+
console.log('Content loaded:', be.html);
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
// Load content and insert it at a specific position
|
|
167
|
+
be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
|
|
168
|
+
console.log('Content inserted:', be.html);
|
|
169
|
+
});
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## API Reference
|
|
175
|
+
|
|
176
|
+
### Core Methods
|
|
177
|
+
|
|
178
|
+
#### `be(selector: string | HTMLElement | HTMLElement[]): Be`
|
|
179
|
+
Create a new Be instance.
|
|
180
|
+
|
|
181
|
+
**Example:**
|
|
182
|
+
```javascript
|
|
183
|
+
const instance = be('#test');
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
#### `toBe(str: string | HTMLElement, options?: { tag?: string }): Be`
|
|
187
|
+
Convert a string or HTMLElement to a Be instance.
|
|
188
|
+
|
|
189
|
+
**Example:**
|
|
190
|
+
```javascript
|
|
191
|
+
const newElement = toBe('<div>Content</div>');
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
#### `createBe(tagOrHtml: string, options?: Object): Be`
|
|
195
|
+
Create a new Be element.
|
|
196
|
+
|
|
197
|
+
**Example:**
|
|
198
|
+
```javascript
|
|
199
|
+
const newElement = createBe('div', { className: 'my-class' });
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
### HTTP Methods
|
|
205
|
+
|
|
206
|
+
#### `updateHttp(url: string, callback?: HandlerCallBackFn): Be`
|
|
207
|
+
Loads content from a URL and updates the element's content.
|
|
208
|
+
|
|
209
|
+
**Example:**
|
|
210
|
+
```javascript
|
|
211
|
+
be('#test').updateHttp('/content.html', ({ be }) => {
|
|
212
|
+
console.log(be.html);
|
|
213
|
+
});
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
#### `insertHttp(url: string, mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', callback?: HandlerCallBackFn): Be`
|
|
217
|
+
Loads content from a URL and inserts it into the element at a specified position.
|
|
218
|
+
|
|
219
|
+
**Example:**
|
|
220
|
+
```javascript
|
|
221
|
+
be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
|
|
222
|
+
console.log(be.html);
|
|
223
|
+
});
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
### Timers
|
|
229
|
+
|
|
230
|
+
#### `timeout(delay: number, callback: HandlerCallBackFn): Be`
|
|
231
|
+
Set a timeout for an element.
|
|
232
|
+
|
|
233
|
+
**Example:**
|
|
234
|
+
```javascript
|
|
235
|
+
be('#test').timeout(1000, () => console.log('Timeout executed'));
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
#### `interval(delay: number, callback: HandlerCallBackFn): Be`
|
|
239
|
+
Set an interval for an element.
|
|
240
|
+
|
|
241
|
+
**Example:**
|
|
242
|
+
```javascript
|
|
243
|
+
be('#test').interval(500, () => console.log('Interval executed'));
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
#### `clearTimeout(): Be`
|
|
247
|
+
Clear a timeout.
|
|
248
|
+
|
|
249
|
+
**Example:**
|
|
250
|
+
```javascript
|
|
251
|
+
const timeoutInstance = be('#test').timeout(1000, () => console.log('Timeout executed'));
|
|
252
|
+
timeoutInstance.clearTimeout();
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
#### `clearInterval(): Be`
|
|
256
|
+
Clear an interval.
|
|
257
|
+
|
|
258
|
+
**Example:**
|
|
259
|
+
```javascript
|
|
260
|
+
const intervalInstance = be('#test').interval(500, () => console.log('Interval executed'));
|
|
261
|
+
intervalInstance.clearInterval();
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
### Traversal
|
|
267
|
+
|
|
268
|
+
#### `up(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
269
|
+
Traverse up the DOM tree.
|
|
270
|
+
|
|
271
|
+
**Example:**
|
|
272
|
+
```javascript
|
|
273
|
+
be('#child').up();
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
#### `next(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
277
|
+
Traverse to the next sibling.
|
|
278
|
+
|
|
279
|
+
**Example:**
|
|
280
|
+
```javascript
|
|
281
|
+
be('#sibling1').next();
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
#### `previous(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
285
|
+
Traverse to the previous sibling.
|
|
286
|
+
|
|
287
|
+
**Example:**
|
|
288
|
+
```javascript
|
|
289
|
+
be('#sibling2').previous();
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
#### `siblings(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
293
|
+
Find all sibling elements.
|
|
294
|
+
|
|
295
|
+
**Example:**
|
|
296
|
+
```javascript
|
|
297
|
+
be('#child').siblings();
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
#### `children(selector?: string, callback?: HandlerCallBackFn): Be`
|
|
301
|
+
Find all child elements.
|
|
302
|
+
|
|
303
|
+
**Example:**
|
|
304
|
+
```javascript
|
|
305
|
+
be('#parent').children();
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
#### `closest(selector: string, callback?: HandlerCallBackFn): Be`
|
|
309
|
+
Find the closest ancestor matching a selector.
|
|
310
|
+
|
|
311
|
+
**Example:**
|
|
312
|
+
```javascript
|
|
313
|
+
be('#child').closest('#ancestor');
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
### Styling
|
|
319
|
+
|
|
320
|
+
#### `setStyle(styles: Record<string, string>): Be`
|
|
321
|
+
Set CSS styles for an element.
|
|
322
|
+
|
|
323
|
+
**Example:**
|
|
324
|
+
```javascript
|
|
325
|
+
be('#test').setStyle({ color: 'red', fontSize: '16px' });
|
|
326
|
+
```
|
|
327
|
+
|
|
328
|
+
#### `getStyle(property: string): string | null`
|
|
329
|
+
Get the value of a CSS property.
|
|
330
|
+
|
|
331
|
+
**Example:**
|
|
332
|
+
```javascript
|
|
333
|
+
const color = be('#test').getStyle('color');
|
|
334
|
+
console.log(color); // Output: "red"
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
#### `unsetStyle(property: string): Be`
|
|
338
|
+
Remove a CSS property from an element.
|
|
339
|
+
|
|
340
|
+
**Example:**
|
|
341
|
+
```javascript
|
|
342
|
+
be('#test').unsetStyle('color');
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
347
|
+
### Events
|
|
348
|
+
|
|
349
|
+
#### `on(eventName: string, handler: EventListener): Be`
|
|
350
|
+
Add an event listener to an element.
|
|
351
|
+
|
|
352
|
+
**Example:**
|
|
353
|
+
```javascript
|
|
354
|
+
be('#test').on('click', () => console.log('Clicked!'));
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
#### `off(eventName: string, handler: EventListener): Be`
|
|
358
|
+
Remove an event listener from an element.
|
|
359
|
+
|
|
360
|
+
**Example:**
|
|
361
|
+
```javascript
|
|
362
|
+
be('#test').off('click', handler);
|
|
363
|
+
```
|
|
364
|
+
|
|
365
|
+
#### `fire(eventName: string, detail?: any): Be`
|
|
366
|
+
Dispatch a custom event.
|
|
367
|
+
|
|
368
|
+
**Example:**
|
|
369
|
+
```javascript
|
|
370
|
+
be('#test').fire('customEvent', { key: 'value' });
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
---
|
|
374
|
+
|
|
375
|
+
## License
|
|
376
|
+
|
|
377
|
+
This project is licensed under the MIT License.
|
package/cli.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const fs = require('fs');
|
|
4
|
+
const path = require('path');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const pkgJson = require(path.join(__dirname, 'package.json'));
|
|
8
|
+
const packageName = pkgJson.name.replace(/^@[^/]+\//, '');
|
|
9
|
+
const cmd = process.argv[2];
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
if (cmd === 'get-readme') {
|
|
13
|
+
const readmePath = path.join(__dirname, 'README.md');
|
|
14
|
+
if (fs.existsSync(readmePath)) {
|
|
15
|
+
const content = fs.readFileSync(readmePath, 'utf8');
|
|
16
|
+
console.log(content);
|
|
17
|
+
} else {
|
|
18
|
+
console.error('README.md not found in this package.');
|
|
19
|
+
process.exit(1);
|
|
20
|
+
}
|
|
21
|
+
} else if (cmd === 'install-skill') {
|
|
22
|
+
const readline = require('readline');
|
|
23
|
+
const rl = readline.createInterface({
|
|
24
|
+
input: process.stdin,
|
|
25
|
+
output: process.stdout
|
|
26
|
+
});
|
|
27
|
+
const skillSrc = path.join(__dirname, 'SKILL.md');
|
|
28
|
+
const skillDest = path.resolve(__dirname, `../../../.github/skills/${packageName}/SKILL.md`);
|
|
29
|
+
if (!fs.existsSync(skillSrc)) {
|
|
30
|
+
console.error('SKILL.md not found in this package.');
|
|
31
|
+
process.exit(1);
|
|
32
|
+
}
|
|
33
|
+
rl.question(`This will copy SKILL.md to .github/skills/${packageName}/SKILL.md. Continue? (y/n): `, (answer) => {
|
|
34
|
+
if (answer.trim().toLowerCase() === 'y' || answer.trim().toLowerCase() === 'yes') {
|
|
35
|
+
fs.mkdirSync(path.dirname(skillDest), { recursive: true });
|
|
36
|
+
fs.copyFileSync(skillSrc, skillDest);
|
|
37
|
+
console.log(`SKILL.md installed to .github/skills/${packageName}/SKILL.md`);
|
|
38
|
+
} else {
|
|
39
|
+
console.log('Operation cancelled.');
|
|
40
|
+
}
|
|
41
|
+
rl.close();
|
|
42
|
+
});
|
|
43
|
+
} else {
|
|
44
|
+
console.log('Usage: <cli> get-readme | install-skill');
|
|
45
|
+
process.exit(1);
|
|
46
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medyll/idae-be",
|
|
3
|
+
"bin": {
|
|
4
|
+
"idae-be": "./cli.js"
|
|
5
|
+
},
|
|
3
6
|
"scope": "@medyll",
|
|
4
|
-
"
|
|
7
|
+
"author": "Lebrun Meddy",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/medyll/idae.git"
|
|
11
|
+
},
|
|
12
|
+
"version": "1.96.2",
|
|
5
13
|
"description": "A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attribute control, HTTP content loading, timers, and more. Ideal for developers seeking a modular and consistent API for dynamic web applications.",
|
|
6
14
|
"keywords": [
|
|
7
15
|
"DOM",
|
|
@@ -30,8 +38,13 @@
|
|
|
30
38
|
"peerDependencies": {
|
|
31
39
|
"svelte": "^5.0.0-next"
|
|
32
40
|
},
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public",
|
|
43
|
+
"directory": "."
|
|
44
|
+
},
|
|
33
45
|
"devDependencies": {
|
|
34
46
|
"@playwright/test": "^1.52.0",
|
|
47
|
+
"@semantic-release/github": "^10.3.5",
|
|
35
48
|
"@sveltejs/adapter-auto": "^6.0.0",
|
|
36
49
|
"@sveltejs/kit": "^2.20.8",
|
|
37
50
|
"@sveltejs/package": "^2.3.11",
|
|
@@ -51,8 +64,8 @@
|
|
|
51
64
|
"typescript-eslint": "^8.32.0",
|
|
52
65
|
"vite": "^6.3.5",
|
|
53
66
|
"vitest": "^3.1.3",
|
|
54
|
-
"@medyll/idae-
|
|
55
|
-
"@medyll/idae-dom-events": "0.
|
|
67
|
+
"@medyll/idae-eslint-config": "0.1.5",
|
|
68
|
+
"@medyll/idae-dom-events": "1.0.2"
|
|
56
69
|
},
|
|
57
70
|
"svelte": "./dist/index.js",
|
|
58
71
|
"types": "./dist/index.d.ts",
|
|
@@ -70,6 +83,6 @@
|
|
|
70
83
|
"format": "prettier --write .",
|
|
71
84
|
"test:integration": "",
|
|
72
85
|
"test:unit": "vitest",
|
|
73
|
-
"
|
|
86
|
+
"prepackage": "node scripts/package-pre.js"
|
|
74
87
|
}
|
|
75
88
|
}
|