@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.
Files changed (4) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +377 -377
  3. package/cli.js +46 -0
  4. 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
- "version": "1.89.0",
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-prettier-config": "1.2.1",
55
- "@medyll/idae-dom-events": "0.149.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
- "package:pre": "node scripts/package-pre.js"
86
+ "prepackage": "node scripts/package-pre.js"
74
87
  }
75
88
  }