litewire 1.0.0 → 1.0.1

package/README.MD

@@ -1,5 +1,9 @@
 # Litewire Framework
 
+```bash
+npm i litewire
+```
+
 ## Complete Architecture Manual & Reference Guide
 
 A comprehensive technical breakdown of the HTML-driven AJAX engine, dynamic component loader, DOM swapping, state management, and lifecycle events.
@@ -57,8 +61,8 @@ To support deployment in deeply nested directories or custom app sub-paths, Lite
 ```javascript
 // Custom manual instantiation with options
 const customLitewire = new Litewire({
-    baseUrl: '[https://api.myproject.com](https://api.myproject.com)',
-    loadingClass: 'is-loading' // Class applied to active triggers and indicators
+  baseUrl: "[https://api.myproject.com](https://api.myproject.com)",
+  loadingClass: "is-loading", // Class applied to active triggers and indicators
 });
 ```
 
@@ -68,18 +72,18 @@ const customLitewire = new Litewire({
 
 All core functionalities are driven by attaching `lw-*` attributes directly to standard HTML tags.
 
-| Attribute | Accepted Values | Default | Functional Description |
-|---|---|---|---|
-| `lw-get` | Relative / Absolute Path | None | Executes an HTTP GET request to the specified endpoint. |
-| `lw-post` | Relative / Absolute Path | None | Executes an HTTP POST request. Submits form payload if bound to or inside a `<form>`. |
-| `lw-put` | Relative / Absolute Path | None | Executes an HTTP PUT request with FormData payload attachment. |
-| `lw-delete` | Relative / Absolute Path | None | Executes an HTTP DELETE request. |
-| `lw-trigger` | `click`, `submit`, `load`, custom | Contextual | Overrides trigger event. Defaults to `submit` for forms, `click` for interactive tags. `load` fires instantly. |
-| `lw-target` | CSS Selector | Self Element | Specifies the container element where the returned HTML response will be rendered. |
-| `lw-swap` | `innerHTML`, `outerHTML`, `prepend`, `append` | `innerHTML` | Controls how the received HTML response replaces or integrates into the target element. |
-| `lw-indicator` | CSS Selector | `.litewire-indicator` | Specifies target loading elements. Automatically toggles the active `loadingClass` during request execution. |
-| `lw-push-url` | `true`, `false`, Custom Path | `false` | Pushes a new state to the browser history, caching DOM contents for native back/forward navigation. |
-| `lw-component` | JS File Path | None | Asynchronously imports a JavaScript module and mounts it directly onto the host DOM element. |
+| Attribute      | Accepted Values                               | Default               | Functional Description                                                                                         |
+| -------------- | --------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `lw-get`       | Relative / Absolute Path                      | None                  | Executes an HTTP GET request to the specified endpoint.                                                        |
+| `lw-post`      | Relative / Absolute Path                      | None                  | Executes an HTTP POST request. Submits form payload if bound to or inside a `<form>`.                          |
+| `lw-put`       | Relative / Absolute Path                      | None                  | Executes an HTTP PUT request with FormData payload attachment.                                                 |
+| `lw-delete`    | Relative / Absolute Path                      | None                  | Executes an HTTP DELETE request.                                                                               |
+| `lw-trigger`   | `click`, `submit`, `load`, custom             | Contextual            | Overrides trigger event. Defaults to `submit` for forms, `click` for interactive tags. `load` fires instantly. |
+| `lw-target`    | CSS Selector                                  | Self Element          | Specifies the container element where the returned HTML response will be rendered.                             |
+| `lw-swap`      | `innerHTML`, `outerHTML`, `prepend`, `append` | `innerHTML`           | Controls how the received HTML response replaces or integrates into the target element.                        |
+| `lw-indicator` | CSS Selector                                  | `.litewire-indicator` | Specifies target loading elements. Automatically toggles the active `loadingClass` during request execution.   |
+| `lw-push-url`  | `true`, `false`, Custom Path                  | `false`               | Pushes a new state to the browser history, caching DOM contents for native back/forward navigation.            |
+| `lw-component` | JS File Path                                  | None                  | Asynchronously imports a JavaScript module and mounts it directly onto the host DOM element.                   |
 
 ---
 
@@ -104,33 +108,33 @@ When an element with `lw-component="path/to/module.js"` is injected into the DOM
 
 ```html
 <!-- Target element containing component directives and dataset parameters -->
-<div 
-  lw-component="assets/js/uploader.js" 
-  data-max-files="5" 
-  data-allowed-types="image/png,image/jpeg">
-</div>
+<div
+  lw-component="assets/js/uploader.js"
+  data-max-files="5"
+  data-allowed-types="image/png,image/jpeg"
+></div>
 ```
 
 #### JavaScript Module (`assets/js/uploader.js`)
 
 ```javascript
 export default class ImageUploader {
-    constructor(element, params) {
-        this.container = element;
-        this.maxFiles = params.maxFiles || 1;
-        this.allowedTypes = params.allowedTypes || '*';
-        
-        this.render();
-    }
+  constructor(element, params) {
+    this.container = element;
+    this.maxFiles = params.maxFiles || 1;
+    this.allowedTypes = params.allowedTypes || "*";
+
+    this.render();
+  }
 
-    render() {
-        this.container.innerHTML = `
+  render() {
+    this.container.innerHTML = `
             <div class="upload-box">
                 <p>Upload up to ${this.maxFiles} files (${this.allowedTypes})</p>
                 <input type="file" multiple accept="${this.allowedTypes}">
             </div>
         `;
-    }
+  }
 }
 ```
 
@@ -171,22 +175,22 @@ Enabling history tracking via `lw-push-url="true"` allows AJAX-driven applicatio
 
 Litewire dispatches standard, bubbling DOM events during the request lifecycles. Custom JavaScript code can hook into these lifecycle stages using standard `addEventListener` calls.
 
-| Event Name | `event.detail` | Description / Usage |
-|---|---|---|
-| `litewire:beforeRequest` | `null` | Fires immediately before the HTTP request is initiated. Ideal for disabling inputs or custom client validation. |
-| `litewire:afterRequest` | `null` | Fires after the request succeeds and the HTML content swap is complete. Ideal for triggering animations. |
-| `litewire:error` | `{ error: Error }` | Fires if a network error occurs or the HTTP response returns an error status (non-2xx). |
+| Event Name               | `event.detail`     | Description / Usage                                                                                             |
+| ------------------------ | ------------------ | --------------------------------------------------------------------------------------------------------------- |
+| `litewire:beforeRequest` | `null`             | Fires immediately before the HTTP request is initiated. Ideal for disabling inputs or custom client validation. |
+| `litewire:afterRequest`  | `null`             | Fires after the request succeeds and the HTML content swap is complete. Ideal for triggering animations.        |
+| `litewire:error`         | `{ error: Error }` | Fires if a network error occurs or the HTTP response returns an error status (non-2xx).                         |
 
 ### Lifecycle Hooks Example
 
 ```javascript
 // Global logging and notification system integration
-document.addEventListener('litewire:beforeRequest', (e) => {
-    console.log('Initiating Litewire request from:', e.target);
+document.addEventListener("litewire:beforeRequest", (e) => {
+  console.log("Initiating Litewire request from:", e.target);
 });
 
-document.addEventListener('litewire:error', (e) => {
-    alert(`Request failed: ${e.detail.error.message}`);
+document.addEventListener("litewire:error", (e) => {
+  alert(`Request failed: ${e.detail.error.message}`);
 });
 ```
 
@@ -201,7 +205,7 @@ Litewire natively secures outgoing write operations (`POST`, `PUT`, `DELETE`) ag
 Before dispatching non-GET requests, Litewire scans the host page head for a CSRF meta tag:
 
 ```html
-<meta name="csrf-token" content="abc123securehash456">
+<meta name="csrf-token" content="abc123securehash456" />
 ```
 
 If detected, Litewire automatically includes the retrieved token into the HTTP request headers:
@@ -218,14 +222,15 @@ X-CSRF-TOKEN: abc123securehash456
 
 ```html
 <!-- Live search input updating target table and browser address bar -->
-<input 
-  type="text" 
-  name="q" 
-  placeholder="Search users..." 
-  lw-get="/users/search" 
-  lw-trigger="keyup" 
-  lw-target="#user-table-body" 
-  lw-push-url="true">
+<input
+  type="text"
+  name="q"
+  placeholder="Search users..."
+  lw-get="/users/search"
+  lw-trigger="keyup"
+  lw-target="#user-table-body"
+  lw-push-url="true"
+/>
 
 <table>
   <tbody id="user-table-body">
@@ -234,14 +239,47 @@ X-CSRF-TOKEN: abc123securehash456
 </table>
 ```
 
+```php
+// Route
+Route::get('/users/search', 'UsersController@search')->name('user.search');
+
+//UserController
+public function search(Request $request)
+    {
+        $query = $request->input('q', '');
+        $search = $this->model('UsersModel')->searchUser($query);
+        $data = [
+            'users' => $search
+        ];
+
+        $html = $this->render('users/search', $data);
+        return $this->response($html);
+    }
+
+//Blade
+@if (!empty($users))
+    @foreach ($users as $index => $user)
+        <tr>
+            <td>{{ $index + 1 }}</td>
+            <td>{{ $user['fullname'] }}</td>
+        </tr>
+    @endforeach
+@endif
+```
+
 ### Pattern B: Form Submission with Indicator & Append Swap
 
 ```html
-<form lw-post="/comments/add" lw-target="#comments-list" lw-swap="append" lw-indicator="#spinner">
+<form
+  lw-post="/comments/add"
+  lw-target="#comments-list"
+  lw-swap="append"
+  lw-indicator="#spinner"
+>
   <textarea name="comment" required placeholder="Write a comment..."></textarea>
-  
+
   <button type="submit">
-    Post Comment 
+    Post Comment
     <span id="spinner" class="litewire-indicator hidden">Posting...</span>
   </button>
 </form>
@@ -255,9 +293,13 @@ X-CSRF-TOKEN: abc123securehash456
 
 ```html
 <!-- Automatically fetches and replaces content once page loads -->
-<div lw-get="/analytics/widget" lw-trigger="load" lw-target="#analytics-container">
-    <p>Loading real-time analytics data...</p>
+<div
+  lw-get="/analytics/widget"
+  lw-trigger="load"
+  lw-target="#analytics-container"
+>
+  <p>Loading real-time analytics data...</p>
 </div>
 
 <div id="analytics-container"></div>
-```
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "litewire",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A lightweight HTML-driven AJAX engine and dynamic ES module component loader.",
   "main": "src/litewire.js",
   "module": "src/litewire.js",
@@ -30,4 +30,4 @@
     "url": "https://github.com/languaojs/litewire/issues"
   },
   "homepage": "https://github.com/languaojs/litewire#readme"
-}
+}

package/src/litewire.js

@@ -97,7 +97,7 @@ class Litewire {
         if (!path) return;
 
         const cleanPath = path.replace(/^\/+/, '');
-        const url = `${this.baseUrl}/${cleanPath}`;
+        let url = `${this.baseUrl}/${cleanPath}`;
 
         const options = { method: method.toUpperCase(), headers: {} };
 
@@ -106,7 +106,21 @@ class Litewire {
             options.headers['X-CSRF-TOKEN'] = csrfToken;
         }
 
-        if (method !== 'get') {
+        if (method === 'get') {
+            const form = el.tagName === 'FORM' ? el : el.closest('form');
+            let params = new URLSearchParams();
+
+            if (form) {
+                params = new URLSearchParams(new FormData(form));
+            } else if (el.name && el.value !== undefined) {
+                params.append(el.name, el.value);
+            }
+
+            const queryString = params.toString();
+            if (queryString) {
+                url += (url.includes('?') ? '&' : '?') + queryString;
+            }
+        } else {
             const form = el.tagName === 'FORM' ? el : el.closest('form');
             if (form) {
                 options.body = new FormData(form);