@medyll/idae-be 0.89.0 → 0.90.0

package/README.md

@@ -15,6 +15,7 @@ npm install @medyll/idae-be
 - Comprehensive DOM traversal and manipulation
 - Event handling, style management, and attribute control
 - Timer integration for dynamic operations
+- HTTP content loading and insertion
 
 ## Unique Approach
 
@@ -31,25 +32,19 @@ import { be, toBe } from '@medyll/idae-be';
 
 // Select the container element
 be('#container')
-	.append(toBe('<div>New content</div>'), ({ be }) => {
-		be.addClass('highlight')
-			.on('click', () => console.log('Clicked!'))
-			.append(toBe('<span>Nested content</span>'), ({ be }) => {
-				be.addClass('nested').on('mouseover', () => console.log('Hovered!'));
-			});
-	})
-	.prepend(toBe('<h1>Title</h1>'), ({ be }) => {
-		be.addClass('title').children(({ be }) => {
-			be.setStyle({ color: 'blue' });
-		});
-	});
-```
-
-**Comments:**
-
-1. **`append`**: Adds a new `<div>` to the container and applies a class and event listener.
-2. **Nested `append`**: Adds a `<span>` inside the appended `<div>` with its own class and event listener.
-3. **`prepend`**: Adds a title at the beginning of the container and styles its children.
+    .append(toBe('<div>New content</div>'), ({ be }) => {
+        be.addClass('highlight')
+            .on('click', () => console.log('Clicked!'))
+            .append(toBe('<span>Nested content</span>'), ({ be }) => {
+                be.addClass('nested').on('mouseover', () => console.log('Hovered!'));
+            });
+    })
+    .prepend(toBe('<h1>Title</h1>'), ({ be }) => {
+        be.addClass('title').children(({ be }) => {
+            be.setStyle({ color: 'blue' });
+        });
+    });
+```
 
 ---
 
@@ -60,27 +55,21 @@ import { be } from '@medyll/idae-be';
 
 // Add a click event to all buttons inside the container
 be('#container button').on('click', ({ target }) => {
-	be(target)
-		.toggleClass('active')
-		.siblings(({ be }) => {
-			be.removeClass('active').on('mouseover', () => console.log('Sibling hovered!'));
-		});
+    be(target)
+        .toggleClass('active')
+        .siblings(({ be }) => {
+            be.removeClass('active').on('mouseover', () => console.log('Sibling hovered!'));
+        });
 });
 
 // Fire a custom event and handle it
 be('#container').fire('customEvent', { detailKey: 'detailValue' }, ({ be }) => {
-	be.children(({ be }) => {
-		be.addClass('custom-event-handled');
-	});
+    be.children(({ be }) => {
+        be.addClass('custom-event-handled');
+    });
 });
 ```
 
-**Comments:**
-
-1. **`on`**: Adds a click event to buttons and toggles a class on the clicked button.
-2. **`siblings`**: Removes a class from sibling buttons and adds a hover event.
-3. **`fire`**: Dispatches a custom event and applies a class to all child elements.
-
 ---
 
 ### Example 3: Styling and Attributes
@@ -90,24 +79,18 @@ import { be } from '@medyll/idae-be';
 
 // Select an element and update its styles and attributes
 be('#element')
-	.setStyle({ backgroundColor: 'yellow', fontSize: '16px' }, ({ be }) => {
-		be.setAttr('data-role', 'admin').children(({ be }) => {
-			be.setStyle({ color: 'red' }).setAttr('data-child', 'true');
-		});
-	})
-	.addClass('styled-element', ({ be }) => {
-		be.siblings(({ be }) => {
-			be.setStyle({ opacity: '0.5' });
-		});
-	});
+    .setStyle({ backgroundColor: 'yellow', fontSize: '16px' }, ({ be }) => {
+        be.setAttr('data-role', 'admin').children(({ be }) => {
+            be.setStyle({ color: 'red' }).setAttr('data-child', 'true');
+        });
+    })
+    .addClass('styled-element', ({ be }) => {
+        be.siblings(({ be }) => {
+            be.setStyle({ opacity: '0.5' });
+        });
+    });
 ```
 
-**Comments:**
-
-1. **`setStyle`**: Applies styles to the selected element and its children.
-2. **`setAttr`**: Sets attributes on the selected element and its children.
-3. **`addClass`**: Adds a class to the element and modifies its siblings.
-
 ---
 
 ### Example 4: Timers
@@ -117,25 +100,18 @@ import { be } from '@medyll/idae-be';
 
 // Set a timeout to execute a callback after 100ms
 be('#test').timeout(100, ({ be }) => {
-	be.setStyle({ backgroundColor: 'yellow' }).append('<span>Timeout executed</span>');
+    be.setStyle({ backgroundColor: 'yellow' }).append('<span>Timeout executed</span>');
 });
 
-// Set an interval to execute a callback every 100ms
-be('#test').interval(100, ({ be }) => {
-	be.toggleClass('highlight');
-});
-
-// Clear a timeout before it executes
-const timeoutInstance = be('#test').timeout(500, ({ be }) => {
-	be.setStyle({ color: 'red' });
-});
-timeoutInstance.clearTimeout();
-
-// Clear an interval after 600ms
+// Set an interval to execute a callback every 400ms
 const intervalInstance = be('#test').interval(400, ({ be }) => {
-	be.setStyle({ fontSize: '20px' });
+    be.toggleClass('highlight');
 });
-intervalInstance.clearInterval();
+
+// Clear the interval after 600ms
+setTimeout(() => {
+    intervalInstance.clearInterval();
+}, 600);
 ```
 
 ---
@@ -147,28 +123,248 @@ import { be } from '@medyll/idae-be';
 
 // Traverse up the DOM tree to find the parent element
 be('#child').up('#parent', ({ be: parent }) => {
-	parent.addClass('highlight').children(({ be: child }) => {
-		child.setStyle({ color: 'blue' });
-	});
+    parent.addClass('highlight')
+        .children(({ be: child }) => {
+            child.setStyle({ color: 'blue' });
+        });
 });
 
 // Find all siblings of an element and add a class
 be('#target').siblings(({ be: siblings }) => {
-	siblings.addClass('sibling-class').children(({ be }) => {
-		be.setStyle({ fontWeight: 'bold' });
-	});
+    siblings.addClass('sibling-class').children(({ be }) => {
+        be.setStyle({ fontWeight: 'bold' });
+    });
 });
 
 // Find the closest ancestor matching a selector
 be('#child').closest('.ancestor', ({ be: closest }) => {
-	closest.setStyle({ border: '2px solid red' }).children(({ be }) => {
-		be.addClass('ancestor-child');
-	});
+    closest.setStyle({ border: '2px solid red' }).children(({ be }) => {
+        be.addClass('ancestor-child');
+    });
 });
 ```
 
 ---
 
+### Example 6: HTTP Content Loading and Insertion
+
+```javascript
+import { be } from '@medyll/idae-be';
+
+// Load content from a URL and update the element
+be('#test').updateHttp('/content.html', ({ be }) => {
+    console.log('Content loaded:', be.html);
+});
+
+// Load content and insert it at a specific position
+be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
+    console.log('Content inserted:', be.html);
+});
+```
+
+---
+
+## API Reference
+
+### Core Methods
+
+#### `be(selector: string | HTMLElement | HTMLElement[]): Be`
+Create a new Be instance.
+
+**Example:**
+```javascript
+const instance = be('#test');
+```
+
+#### `toBe(str: string | HTMLElement, options?: { tag?: string }): Be`
+Convert a string or HTMLElement to a Be instance.
+
+**Example:**
+```javascript
+const newElement = toBe('<div>Content</div>');
+```
+
+#### `createBe(tagOrHtml: string, options?: Object): Be`
+Create a new Be element.
+
+**Example:**
+```javascript
+const newElement = createBe('div', { className: 'my-class' });
+```
+
+---
+
+### HTTP Methods
+
+#### `updateHttp(url: string, callback?: HandlerCallBackFn): Be`
+Loads content from a URL and updates the element's content.
+
+**Example:**
+```javascript
+be('#test').updateHttp('/content.html', ({ be }) => {
+    console.log(be.html);
+});
+```
+
+#### `insertHttp(url: string, mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', callback?: HandlerCallBackFn): Be`
+Loads content from a URL and inserts it into the element at a specified position.
+
+**Example:**
+```javascript
+be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => {
+    console.log(be.html);
+});
+```
+
+---
+
+### Timers
+
+#### `timeout(delay: number, callback: HandlerCallBackFn): Be`
+Set a timeout for an element.
+
+**Example:**
+```javascript
+be('#test').timeout(1000, () => console.log('Timeout executed'));
+```
+
+#### `interval(delay: number, callback: HandlerCallBackFn): Be`
+Set an interval for an element.
+
+**Example:**
+```javascript
+be('#test').interval(500, () => console.log('Interval executed'));
+```
+
+#### `clearTimeout(): Be`
+Clear a timeout.
+
+**Example:**
+```javascript
+const timeoutInstance = be('#test').timeout(1000, () => console.log('Timeout executed'));
+timeoutInstance.clearTimeout();
+```
+
+#### `clearInterval(): Be`
+Clear an interval.
+
+**Example:**
+```javascript
+const intervalInstance = be('#test').interval(500, () => console.log('Interval executed'));
+intervalInstance.clearInterval();
+```
+
+---
+
+### Traversal
+
+#### `up(selector?: string, callback?: HandlerCallBackFn): Be`
+Traverse up the DOM tree.
+
+**Example:**
+```javascript
+be('#child').up();
+```
+
+#### `next(selector?: string, callback?: HandlerCallBackFn): Be`
+Traverse to the next sibling.
+
+**Example:**
+```javascript
+be('#sibling1').next();
+```
+
+#### `previous(selector?: string, callback?: HandlerCallBackFn): Be`
+Traverse to the previous sibling.
+
+**Example:**
+```javascript
+be('#sibling2').previous();
+```
+
+#### `siblings(selector?: string, callback?: HandlerCallBackFn): Be`
+Find all sibling elements.
+
+**Example:**
+```javascript
+be('#child').siblings();
+```
+
+#### `children(selector?: string, callback?: HandlerCallBackFn): Be`
+Find all child elements.
+
+**Example:**
+```javascript
+be('#parent').children();
+```
+
+#### `closest(selector: string, callback?: HandlerCallBackFn): Be`
+Find the closest ancestor matching a selector.
+
+**Example:**
+```javascript
+be('#child').closest('#ancestor');
+```
+
+---
+
+### Styling
+
+#### `setStyle(styles: Record<string, string>): Be`
+Set CSS styles for an element.
+
+**Example:**
+```javascript
+be('#test').setStyle({ color: 'red', fontSize: '16px' });
+```
+
+#### `getStyle(property: string): string | null`
+Get the value of a CSS property.
+
+**Example:**
+```javascript
+const color = be('#test').getStyle('color');
+console.log(color); // Output: "red"
+```
+
+#### `unsetStyle(property: string): Be`
+Remove a CSS property from an element.
+
+**Example:**
+```javascript
+be('#test').unsetStyle('color');
+```
+
+---
+
+### Events
+
+#### `on(eventName: string, handler: EventListener): Be`
+Add an event listener to an element.
+
+**Example:**
+```javascript
+be('#test').on('click', () => console.log('Clicked!'));
+```
+
+#### `off(eventName: string, handler: EventListener): Be`
+Remove an event listener from an element.
+
+**Example:**
+```javascript
+be('#test').off('click', handler);
+```
+
+#### `fire(eventName: string, detail?: any): Be`
+Dispatch a custom event.
+
+**Example:**
+```javascript
+be('#test').fire('customEvent', { key: 'value' });
+```
+
+---
+
 ## License
 
 This project is licensed under the MIT License.

package/dist/be.d.ts

@@ -9,6 +9,7 @@ import { PositionHandler, type PositionHandlerHandle } from './modules/position.
 import { WalkHandler, type WalkHandlerHandle } from './modules/walk.js';
 import { TextHandler, type TextHandlerHandle } from './modules/text.js';
 import { TimersHandler, type TimerHandlerHandle } from './modules/timers.js';
+import { HttpHandler, type HttpHandlerHandle } from './modules/http.js';
 export declare class Be {
     [key: string]: unknown;
     inputNode: HTMLElement | HTMLElement[] | string;
@@ -91,6 +92,10 @@ export declare class Be {
     interval: TimersHandler['interval'];
     clearTimeout: TimersHandler['clearTimeout'];
     clearInterval: TimersHandler['clearInterval'];
+    http: (actions: HttpHandlerHandle) => Be;
+    private httpHandler;
+    updateHttp: HttpHandler['update'];
+    insertHttp: HttpHandler['insert'];
     private constructor();
     /**
      * Normalizes the input to ensure `node` is always an HTMLElement or an array of HTMLElements.
@@ -124,6 +129,17 @@ export declare class Be {
         data?: T;
         headers?: Record<string, string>;
     }): Promise<any>;
+    /**
+     * Iterates over nodes based on the type of `this.isWhat` and applies a callback function to each node.
+     *
+     * @param callback - A function to be executed for each node. Receives the current node as an argument.
+     * @param firstChild - Optional. If `true`, stops further iteration after the first child is processed.
+     *
+     * The behavior of the method depends on the value of `this.isWhat`:
+     * - `'element'`: Applies the callback to a single HTMLElement (`this.inputNode`).
+     * - `'array'`: Iterates over an array of HTMLElements (`this.inputNode`) and applies the callback to each.
+     * - `'qy'`: Selects elements using a query selector string (`this.inputNode`) and applies the callback to each.
+     */
     eachNode(callback: (el: HTMLElement) => void, firstChild?: boolean): void;
     get html(): string | null;
     get node(): HTMLElement | HTMLElement[];

package/dist/be.js

@@ -9,6 +9,7 @@ import { PositionHandler } from './modules/position.js';
 import { WalkHandler } from './modules/walk.js';
 import { TextHandler } from './modules/text.js';
 import { TimersHandler } from './modules/timers.js';
+import { HttpHandler } from './modules/http.js';
 export class Be {
     inputNode;
     isWhat;
@@ -101,6 +102,11 @@ export class Be {
     interval;
     clearTimeout;
     clearInterval;
+    // http
+    http;
+    httpHandler;
+    updateHttp;
+    insertHttp;
     constructor(input) {
         if (input instanceof Be) {
             return input;
@@ -152,6 +158,10 @@ export class Be {
         this.timerHandler = new TimersHandler(this);
         this.timers = this.handle(this.timerHandler);
         this.attach(TimersHandler);
+        // http
+        this.httpHandler = new HttpHandler(this);
+        this.http = this.handle(this.httpHandler);
+        this.attach(HttpHandler, 'Http');
     }
     /**
      * Normalizes the input to ensure `node` is always an HTMLElement or an array of HTMLElements.
@@ -211,7 +221,7 @@ export class Be {
      * @returns The created `Be` element.
      */
     static toBe(str, options = {}) {
-        const { tag = 'span' } = options;
+        const { tag = 'div' } = options;
         let beElem;
         if (str instanceof HTMLElement) {
             beElem = be(str);
@@ -263,6 +273,17 @@ export class Be {
             headers: options.headers || {}
         }).then((response) => response.json());
     }
+    /**
+     * Iterates over nodes based on the type of `this.isWhat` and applies a callback function to each node.
+     *
+     * @param callback - A function to be executed for each node. Receives the current node as an argument.
+     * @param firstChild - Optional. If `true`, stops further iteration after the first child is processed.
+     *
+     * The behavior of the method depends on the value of `this.isWhat`:
+     * - `'element'`: Applies the callback to a single HTMLElement (`this.inputNode`).
+     * - `'array'`: Iterates over an array of HTMLElements (`this.inputNode`) and applies the callback to each.
+     * - `'qy'`: Selects elements using a query selector string (`this.inputNode`) and applies the callback to each.
+     */
     eachNode(callback, firstChild) {
         switch (this.isWhat) {
             case 'element':

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './modules/timers.js';
 export * from './modules/text.js';
 export * from './modules/styles.js';
 export * from './modules/position.js';
+export * from './modules/http.js';
 export * from './modules/events.js';
 export * from './modules/dom.js';
 export * from './modules/data.js';

package/dist/index.js

@@ -7,6 +7,7 @@ export * from './modules/timers.js';
 export * from './modules/text.js';
 export * from './modules/styles.js';
 export * from './modules/position.js';
+export * from './modules/http.js';
 export * from './modules/events.js';
 export * from './modules/dom.js';
 export * from './modules/data.js';

package/dist/modules/http.d.ts

@@ -0,0 +1,78 @@
+import { Be } from '../be.js';
+import type { CommonHandler, HandlerCallBackFn } from '../types.js';
+declare enum httpMethods {
+    update = "update",
+    insert = "insert"
+}
+export interface HttpHandlerHandle {
+    update?: {
+        url: string;
+        options?: {
+            method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+            data?: Record<string, unknown>;
+            headers?: Record<string, string>;
+        };
+        callback?: HandlerCallBackFn;
+    };
+    insert?: {
+        url: string;
+        mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend';
+        callback?: HandlerCallBackFn;
+    };
+}
+/**
+ * Handles HTTP operations for Be elements.
+ */
+export declare class HttpHandler implements CommonHandler<HttpHandler, HttpHandlerHandle> {
+    private beElement;
+    static methods: httpMethods[];
+    constructor(beElement: Be);
+    methods: string[];
+    /**
+     * Handles HTTP actions like loading content or inserting it into the DOM.
+     * @param actions - The actions to perform.
+     * @returns The Be instance for method chaining.
+     */
+    handle(actions: HttpHandlerHandle): Be;
+    /**
+     * Loads content from a URL and updates the element's content.
+     * Can be called with two or three arguments:
+     * - `update(url: string, callback?: HandlerCallBackFn)`
+     * - `update(url: string, options?: { method?: string; data?: object; headers?: object }, callback?: HandlerCallBackFn)`
+     *
+     * @param url - The URL to fetch content from.
+     * @param optionsOrCallback - Optional configuration for the HTTP request or a callback function.
+     * @param callback - Optional callback function if options are provided.
+     * @returns The Be instance for method chaining.
+     * @example
+     * // Call with two arguments
+     * be('#test').updateHttp('/content.html', ({ be }) => console.log(be.html));
+     *
+     * // Call with three arguments
+     * be('#test').updateHttp('/content.html', { method: 'POST', data: { key: 'value' } }, ({ be }) => console.log(be.html));
+     */
+    update(url: string, optionsOrCallback?: {
+        method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
+        data?: Record<string, unknown>;
+        headers?: Record<string, string>;
+    } | HandlerCallBackFn, callback?: HandlerCallBackFn): Promise<void>;
+    /**
+     * Loads content from a URL and inserts it into the element at a specified position.
+     * Can be called with two or three arguments:
+     * - `insert(url: string, callback?: HandlerCallBackFn)`
+     * - `insert(url: string, mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', callback?: HandlerCallBackFn)`
+     *
+     * @param url - The URL to fetch content from.
+     * @param modeOrCallback - Optional position to insert the content or a callback function.
+     * @param callback - Optional callback function if mode is provided.
+     * @returns The Be instance for method chaining.
+     * @example
+     * // Call with two arguments
+     * be('#test').insertHttp('/content.html', ({ be }) => console.log(be.html));
+     *
+     * // Call with three arguments
+     * be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => console.log(be.html));
+     */
+    insert(url: string, modeOrCallback?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend' | HandlerCallBackFn, callback?: HandlerCallBackFn): Promise<void>;
+}
+export {};

package/dist/modules/http.js

@@ -0,0 +1,120 @@
+import { Be } from '../be.js';
+import { DomHandler } from './dom.js';
+var httpMethods;
+(function (httpMethods) {
+    httpMethods["update"] = "update";
+    httpMethods["insert"] = "insert";
+})(httpMethods || (httpMethods = {}));
+/**
+ * Handles HTTP operations for Be elements.
+ */
+export class HttpHandler {
+    beElement;
+    static methods = Object.values(httpMethods);
+    constructor(beElement) {
+        this.beElement = beElement;
+    }
+    methods = HttpHandler.methods;
+    /**
+     * Handles HTTP actions like loading content or inserting it into the DOM.
+     * @param actions - The actions to perform.
+     * @returns The Be instance for method chaining.
+     */
+    handle(actions) {
+        Object.entries(actions).forEach(([method, props]) => {
+            switch (method) {
+                case 'update':
+                    this.update(props.url, props.options, props.callback);
+                    break;
+                case 'insert':
+                    this.insert(props.url, props.mode, props.callback);
+                    break;
+            }
+        });
+        return this.beElement;
+    }
+    /**
+     * Loads content from a URL and updates the element's content.
+     * Can be called with two or three arguments:
+     * - `update(url: string, callback?: HandlerCallBackFn)`
+     * - `update(url: string, options?: { method?: string; data?: object; headers?: object }, callback?: HandlerCallBackFn)`
+     *
+     * @param url - The URL to fetch content from.
+     * @param optionsOrCallback - Optional configuration for the HTTP request or a callback function.
+     * @param callback - Optional callback function if options are provided.
+     * @returns The Be instance for method chaining.
+     * @example
+     * // Call with two arguments
+     * be('#test').updateHttp('/content.html', ({ be }) => console.log(be.html));
+     *
+     * // Call with three arguments
+     * be('#test').updateHttp('/content.html', { method: 'POST', data: { key: 'value' } }, ({ be }) => console.log(be.html));
+     */
+    async update(url, optionsOrCallback, callback) {
+        let options;
+        // Detect if the second argument is an options object or a callback function
+        if (typeof optionsOrCallback === 'function') {
+            callback = optionsOrCallback;
+        }
+        else {
+            options = optionsOrCallback;
+        }
+        const response = await fetch(url, {
+            method: options?.method || 'GET',
+            body: options?.data ? JSON.stringify(options.data) : undefined,
+            headers: {
+                'Content-Type': 'application/json',
+                ...options?.headers
+            }
+        });
+        const content = await response.text();
+        this.beElement.eachNode((el) => {
+            const beElem = Be.elem(el);
+            beElem.update(content);
+            callback?.({
+                fragment: content,
+                be: beElem,
+                root: this.beElement
+            });
+        });
+    }
+    /**
+     * Loads content from a URL and inserts it into the element at a specified position.
+     * Can be called with two or three arguments:
+     * - `insert(url: string, callback?: HandlerCallBackFn)`
+     * - `insert(url: string, mode?: 'afterbegin' | 'afterend' | 'beforebegin' | 'beforeend', callback?: HandlerCallBackFn)`
+     *
+     * @param url - The URL to fetch content from.
+     * @param modeOrCallback - Optional position to insert the content or a callback function.
+     * @param callback - Optional callback function if mode is provided.
+     * @returns The Be instance for method chaining.
+     * @example
+     * // Call with two arguments
+     * be('#test').insertHttp('/content.html', ({ be }) => console.log(be.html));
+     *
+     * // Call with three arguments
+     * be('#test').insertHttp('/content.html', 'afterbegin', ({ be }) => console.log(be.html));
+     */
+    async insert(url, modeOrCallback, callback) {
+        let mode;
+        // Detect if the second argument is a mode or a callback function
+        if (typeof modeOrCallback === 'function') {
+            callback = modeOrCallback;
+        }
+        else {
+            mode = modeOrCallback;
+        }
+        const response = await fetch(url);
+        const content = await response.text();
+        this.beElement.eachNode((el) => {
+            const beElem = Be.elem(el);
+            const domHandler = new DomHandler(beElem);
+            domHandler.insert(mode || 'beforeend', content);
+            callback?.({
+                fragment: content,
+                be: beElem,
+                root: this.beElement
+            });
+        });
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@medyll/idae-be",
 	"scope": "@medyll",
-	"version": "0.89.0",
+	"version": "0.90.0",
 	"description": "A powerful DOM manipulation library with a callback-based approach for precise element targeting. Provides consistent chaining, comprehensive DOM traversal, event handling, style management, and more. Written in TypeScript for modern browsers.",
 	"scripts": {
 		"dev": "vite dev",