create-prisma-php-app 1.13.2 → 1.13.4

package/dist/src/app/js/index.js

@@ -29,163 +29,6 @@ function debounce(func, wait = 300, immediate = false) {
   };
 }
 
-/**
- * Represents a HTTP request.
- */
-class RequestApi {
-  static instance = null;
-
-  /**
-   * The constructor is now private. To ensure it's not accessible from outside,
-   * you can throw an error if someone tries to instantiate it directly
-   * (though JavaScript does not have true private constructors).
-   */
-  constructor(baseURL = window.location.origin) {
-    this.baseURL = baseURL;
-  }
-
-  /**
-   * Static method to get instance of RequestApi.
-   *
-   * @param {string} [baseURL=window.location.origin] - The base URL for the request.
-   * @returns {RequestApi} The singleton instance of the RequestApi.
-   */
-  static getInstance(baseURL = window.location.origin) {
-    if (!RequestApi.instance) {
-      RequestApi.instance = new RequestApi(baseURL);
-    }
-    return RequestApi.instance;
-  }
-
-  /**
-   * Sends a HTTP request.
-   *
-   * @async
-   * @param {string} method - The HTTP method.
-   * @param {string} url - The URL to send the request to.
-   * @param {*} [data=null] - The data to send with the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  async request(method, url, data = null, headers = {}) {
-    let fullUrl = `${this.baseURL}${url}`;
-    const options = {
-      method,
-      headers: {
-        "Content-Type": "application/json",
-        "X-Requested-With": "XMLHttpRequest",
-        ...headers,
-      },
-    };
-
-    if (data) {
-      if (method === "GET") {
-        const params = new URLSearchParams(data).toString();
-        fullUrl += `?${params}`;
-      } else if (method !== "HEAD" && method !== "OPTIONS") {
-        options.body = JSON.stringify(data);
-      }
-    }
-
-    try {
-      const response = await fetch(fullUrl, options);
-      if (method === "HEAD") {
-        return response.headers;
-      }
-      const contentType = response.headers.get("content-type");
-      if (contentType && contentType.includes("application/json")) {
-        return await response.json();
-      } else {
-        return await response.text();
-      }
-    } catch (error) {
-      throw error;
-    }
-  }
-
-  /**
-   * Sends a GET request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {*} [params] - The parameters to include in the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  get(url, params, headers) {
-    return this.request("GET", url, params, headers);
-  }
-
-  /**
-   * Sends a POST request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {*} data - The data to send with the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  post(url, data, headers) {
-    return this.request("POST", url, data, headers);
-  }
-
-  /**
-   * Sends a PUT request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {*} data - The data to send with the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  put(url, data, headers) {
-    return this.request("PUT", url, data, headers);
-  }
-
-  /**
-   * Sends a DELETE request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {*} data - The data to send with the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  delete(url, data, headers) {
-    return this.request("DELETE", url, data, headers);
-  }
-
-  /**
-   * Sends a PATCH request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {*} data - The data to send with the request.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response data.
-   */
-  patch(url, data, headers) {
-    return this.request("PATCH", url, data, headers);
-  }
-
-  /**
-   * Sends a HEAD request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the response headers.
-   */
-  head(url, headers) {
-    return this.request("HEAD", url, null, headers);
-  }
-
-  /**
-   * Sends an OPTIONS request.
-   *
-   * @param {string} url - The URL to send the request to.
-   * @param {Object} [headers={}] - The headers to include in the request.
-   * @returns {Promise<unknown>} - A promise that resolves to the options available.
-   */
-  options(url, headers) {
-    return this.request("OPTIONS", url, null, headers);
-  }
-}
-
 /**
  * Copies text to the clipboard.
  *
@@ -230,310 +73,493 @@ function copyCode(btnElement) {
   copyToClipboard(textToCopy, btnElement);
 }
 
-/**
- * Manages the application state.
- */
-class StateManager {
-  static instance = null;
-
+if (
+  typeof RequestApi === "undefined" &&
+  typeof StateManager === "undefined" &&
+  typeof HXConnector === "undefined"
+) {
   /**
-   * Creates a new StateManager instance.
-   *
-   * @param {{}} [initialState={}] - The initial state.
+   * Represents a HTTP request.
    */
-  constructor(initialState = {}) {
-    this.state = initialState;
-    this.listeners = [];
-  }
+  class RequestApi {
+    static instance = null;
+
+    /**
+     * The constructor is now private. To ensure it's not accessible from outside,
+     * you can throw an error if someone tries to instantiate it directly
+     * (though JavaScript does not have true private constructors).
+     */
+    constructor(baseURL = window.location.origin) {
+      this.baseURL = baseURL;
+    }
 
-  /**
-   * Gets the singleton instance of StateManager.
-   *
-   * @static
-   * @param {{}} [initialState={}] - The initial state.
-   * @returns {StateManager} - The StateManager instance.
-   */
-  static getInstance(initialState = {}) {
-    if (!StateManager.instance) {
-      StateManager.instance = new StateManager(initialState);
-      StateManager.instance.loadState(); // Load state immediately after instance creation
+    /**
+     * Static method to get instance of RequestApi.
+     *
+     * @param {string} [baseURL=window.location.origin] - The base URL for the request.
+     * @returns {RequestApi} The singleton instance of the RequestApi.
+     */
+    static getInstance(baseURL = window.location.origin) {
+      if (!RequestApi.instance) {
+        RequestApi.instance = new RequestApi(baseURL);
+      }
+      return RequestApi.instance;
     }
-    return StateManager.instance;
-  }
 
-  /**
-   * Sets the state.
-   *
-   * @param {*} update - The state update.
-   * @param {boolean} [saveToStorage=false] - Whether to save the state to localStorage.
-   */
-  setState(update, saveToStorage = false) {
-    this.state = { ...this.state, ...update };
-    this.listeners.forEach((listener) => listener(this.state));
-    if (saveToStorage) {
-      this.saveState();
+    /**
+     * Sends a HTTP request.
+     *
+     * @async
+     * @param {string} method - The HTTP method.
+     * @param {string} url - The URL to send the request to.
+     * @param {*} [data=null] - The data to send with the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    async request(method, url, data = null, headers = {}) {
+      let fullUrl = `${this.baseURL}${url}`;
+      const options = {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          "X-Requested-With": "XMLHttpRequest",
+          ...headers,
+        },
+      };
+
+      if (data) {
+        if (method === "GET") {
+          const params = new URLSearchParams(data).toString();
+          fullUrl += `?${params}`;
+        } else if (method !== "HEAD" && method !== "OPTIONS") {
+          options.body = JSON.stringify(data);
+        }
+      }
+
+      try {
+        const response = await fetch(fullUrl, options);
+        if (method === "HEAD") {
+          return response.headers;
+        }
+        const contentType = response.headers.get("content-type");
+        if (contentType && contentType.includes("application/json")) {
+          return await response.json();
+        } else {
+          return await response.text();
+        }
+      } catch (error) {
+        throw error;
+      }
     }
-  }
 
-  /**
-   * Subscribes to state changes.
-   *
-   * @param {*} listener - The listener function.
-   * @returns {Function} - A function to unsubscribe the listener.
-   */
-  subscribe(listener) {
-    this.listeners.push(listener);
-    listener(this.state); // Immediately invoke the listener with the current state
-    return () =>
-      (this.listeners = this.listeners.filter((l) => l !== listener));
-  }
+    /**
+     * Sends a GET request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {*} [params] - The parameters to include in the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    get(url, params, headers) {
+      return this.request("GET", url, params, headers);
+    }
 
-  /**
-   * Saves the state to localStorage.
-   */
-  saveState() {
-    localStorage.setItem("appState", JSON.stringify(this.state));
-  }
+    /**
+     * Sends a POST request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {*} data - The data to send with the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    post(url, data, headers) {
+      return this.request("POST", url, data, headers);
+    }
 
-  /**
-   * Loads the state from localStorage.
-   */
-  loadState() {
-    const state = localStorage.getItem("appState");
-    if (state) {
-      this.state = JSON.parse(state);
-      this.listeners.forEach((listener) => listener(this.state));
+    /**
+     * Sends a PUT request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {*} data - The data to send with the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    put(url, data, headers) {
+      return this.request("PUT", url, data, headers);
+    }
+
+    /**
+     * Sends a DELETE request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {*} data - The data to send with the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    delete(url, data, headers) {
+      return this.request("DELETE", url, data, headers);
+    }
+
+    /**
+     * Sends a PATCH request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {*} data - The data to send with the request.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response data.
+     */
+    patch(url, data, headers) {
+      return this.request("PATCH", url, data, headers);
+    }
+
+    /**
+     * Sends a HEAD request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the response headers.
+     */
+    head(url, headers) {
+      return this.request("HEAD", url, null, headers);
+    }
+
+    /**
+     * Sends an OPTIONS request.
+     *
+     * @param {string} url - The URL to send the request to.
+     * @param {Object} [headers={}] - The headers to include in the request.
+     * @returns {Promise<unknown>} - A promise that resolves to the options available.
+     */
+    options(url, headers) {
+      return this.request("OPTIONS", url, null, headers);
     }
   }
 
   /**
-   * Resets the state to its initial value.
-   *
-   * @param {boolean} [clearFromStorage=false] - Whether to clear the state from localStorage.
+   * Manages the application state.
    */
-  resetState(clearFromStorage = false) {
-    this.state = {}; // Reset the state to an empty object or a default state if you prefer
-    this.listeners.forEach((listener) => listener(this.state));
-    if (clearFromStorage) {
-      localStorage.removeItem("appState"); // Clear the state from localStorage
+  class StateManager {
+    static instance = null;
+
+    /**
+     * Creates a new StateManager instance.
+     *
+     * @param {{}} [initialState={}] - The initial state.
+     */
+    constructor(initialState = {}) {
+      this.state = initialState;
+      this.listeners = [];
     }
-  }
-}
 
-class HXConnector {
-  // Static property to hold the single instance
-  static instance = null;
+    /**
+     * Gets the singleton instance of StateManager.
+     *
+     * @static
+     * @param {{}} [initialState={}] - The initial state.
+     * @returns {StateManager} - The StateManager instance.
+     */
+    static getInstance(initialState = {}) {
+      if (!StateManager.instance) {
+        StateManager.instance = new StateManager(initialState);
+        StateManager.instance.loadState(); // Load state immediately after instance creation
+      }
+      return StateManager.instance;
+    }
 
-  // Private constructor to prevent direct instantiation
-  constructor() {
-    if (HXConnector.instance) {
-      return HXConnector.instance;
+    /**
+     * Sets the state.
+     *
+     * @param {*} update - The state update.
+     * @param {boolean} [saveToStorage=false] - Whether to save the state to localStorage.
+     */
+    setState(update, saveToStorage = false) {
+      this.state = { ...this.state, ...update };
+      this.listeners.forEach((listener) => listener(this.state));
+      if (saveToStorage) {
+        this.saveState();
+      }
     }
 
-    this.init();
-    HXConnector.instance = this;
-  }
+    /**
+     * Subscribes to state changes.
+     *
+     * @param {*} listener - The listener function.
+     * @returns {Function} - A function to unsubscribe the listener.
+     */
+    subscribe(listener) {
+      this.listeners.push(listener);
+      listener(this.state); // Immediately invoke the listener with the current state
+      return () =>
+        (this.listeners = this.listeners.filter((l) => l !== listener));
+    }
 
-  // Static method to get the single instance
-  static getInstance() {
-    if (!HXConnector.instance) {
-      HXConnector.instance = new HXConnector();
+    /**
+     * Saves the state to localStorage.
+     */
+    saveState() {
+      localStorage.setItem("appState", JSON.stringify(this.state));
+    }
+
+    /**
+     * Loads the state from localStorage.
+     */
+    loadState() {
+      const state = localStorage.getItem("appState");
+      if (state) {
+        this.state = JSON.parse(state);
+        this.listeners.forEach((listener) => listener(this.state));
+      }
     }
-    return HXConnector.instance;
-  }
 
-  // Initializes the HXConnector by connecting attributes of elements with
-  // `hx-trigger` and `hx-vals` attributes, and sets up an event listener to handle
-  // new elements added after HTMX swaps.
-  init() {
-    this.connectAttributes(document.querySelectorAll("[hx-trigger][hx-vals]"));
-    this.handleFormEvents(document.querySelectorAll("[hx-form]"));
-
-    document.body.addEventListener("htmx:afterSwap", (event) => {
-      this.connectAttributes(
-        event.detail.target.querySelectorAll("[hx-trigger][hx-vals]")
-      );
-      this.handleFormEvents(event.detail.target.querySelectorAll("[hx-form]"));
-    });
+    /**
+     * Resets the state to its initial value.
+     *
+     * @param {boolean} [clearFromStorage=false] - Whether to clear the state from localStorage.
+     */
+    resetState(clearFromStorage = false) {
+      this.state = {}; // Reset the state to an empty object or a default state if you prefer
+      this.listeners.forEach((listener) => listener(this.state));
+      if (clearFromStorage) {
+        localStorage.removeItem("appState"); // Clear the state from localStorage
+      }
+    }
   }
 
-  // Connects attributes of the provided elements based on the values specified
-  // in their `hx-vals` attributes and attaches event listeners based on `hx-trigger`.
-  connectAttributes(elements) {
-    elements.forEach((element) => {
-      const event = element.getAttribute("hx-trigger");
-      element.addEventListener(event, (el) => {
-        const targetElement = el.target.closest("[hx-trigger]");
-        if (targetElement) {
-          const values = JSON.parse(targetElement.getAttribute("hx-vals"));
-
-          // Process targets
-          if (values.targets) {
-            values.targets.forEach((target) => {
-              const targetElem = document.getElementById(target.id);
-              if (targetElem) {
-                this.updateElementValues(targetElem, target.value);
-              }
-            });
-          }
+  /**
+   * Connects elements with `hx-trigger` and `hx-vals` attributes to update
+   * their values and attributes based on the specified triggers.
+   * Also handles form events based on the `hx-form` attribute.
+   * This class is a singleton.
+   **/
+  class HXConnector {
+    // Static property to hold the single instance
+    static instance = null;
+
+    // Private constructor to prevent direct instantiation
+    constructor() {
+      if (HXConnector.instance) {
+        return HXConnector.instance;
+      }
 
-          // Process attributes
-          if (values.attributes) {
-            values.attributes.forEach((attributeSet) => {
-              const element = document.getElementById(attributeSet.id);
-              if (element) {
-                Object.keys(attributeSet.attributes).forEach((attr) => {
-                  const value = attributeSet.attributes[attr];
-                  switch (attr) {
-                    case "class":
-                      this.updateClassAttribute(element, value);
-                      break;
-                    case "add":
-                      element.setAttribute(value, "");
-                      break;
-                    case "remove":
-                      element.removeAttribute(value);
-                      break;
-                    default:
-                      element.setAttribute(attr, value);
-                  }
-                });
-              }
-            });
-          }
+      this.init();
+      HXConnector.instance = this;
+    }
 
-          // Register swaps to be processed after the htmx request completes
-          if (values.swaps) {
-            document.addEventListener(
-              "htmx:afterRequest",
-              () => {
-                values.swaps.forEach((swap) => {
-                  const element = document.getElementById(swap.id);
-                  if (element) {
-                    Object.keys(swap.attributes).forEach((attr) => {
-                      const value = swap.attributes[attr];
-                      switch (attr) {
-                        case "class":
-                          this.updateClassAttribute(element, value);
-                          break;
-                        case "add":
-                          element.setAttribute(value, "");
-                          break;
-                        case "remove":
-                          element.removeAttribute(value);
-                          break;
-                        default:
-                          element.setAttribute(attr, value);
-                      }
-                    });
-                  }
-                });
-              },
-              {
-                once: true,
-              }
-            );
-          }
-        }
+    // Static method to get the single instance
+    static getInstance() {
+      if (!HXConnector.instance) {
+        HXConnector.instance = new HXConnector();
+      }
+      return HXConnector.instance;
+    }
+
+    // Initializes the HXConnector by connecting attributes of elements with
+    // `hx-trigger` and `hx-vals` attributes, and sets up an event listener to handle
+    // new elements added after HTMX swaps.
+    init() {
+      this.connectAttributes(document.querySelectorAll("[hx-trigger][hx-vals]"));
+      this.handleFormEvents(document.querySelectorAll("[hx-form]"));
+
+      document.body.addEventListener("htmx:afterSwap", (event) => {
+        this.connectAttributes(
+          event.detail.target.querySelectorAll("[hx-trigger][hx-vals]")
+        );
+        this.handleFormEvents(event.detail.target.querySelectorAll("[hx-form]"));
       });
-    });
-  }
+    }
 
-  // Handles form events for the provided forms based on their `hx-form` attribute.
-  handleFormEvents(forms) {
-    forms.forEach((form) => {
-      const eventAttr = form.getAttribute("hx-form");
-      if (eventAttr) {
-        const [eventType, functionName] = eventAttr.split(":");
-
-        form.addEventListener(`htmx:${eventType}`, (event) => {
-          switch (functionName) {
-            case "reset":
-              if (event.detail.successful) {
-                form.reset();
-              }
-              break;
-
-            case "clear":
-              if (event.detail.successful) {
-                this.clearForm(form);
-              }
-              break;
-
-            case "disable":
-              this.toggleForm(form, true);
-              break;
-
-            case "enable":
-              this.toggleForm(form, false);
-              break;
-
-            // Add more cases as needed
-
-            default:
-              console.warn(`Unhandled function name: ${functionName}`);
-              break;
+    // Connects attributes of the provided elements based on the values specified
+    // in their `hx-vals` attributes and attaches event listeners based on `hx-trigger`.
+    connectAttributes(elements) {
+      elements.forEach((element) => {
+        const event = element.getAttribute("hx-trigger");
+        element.addEventListener(event, (el) => {
+          const targetElement = el.target.closest("[hx-trigger]");
+          if (targetElement) {
+            const values = JSON.parse(targetElement.getAttribute("hx-vals"));
+
+            // Process targets
+            if (values.targets) {
+              values.targets.forEach((target) => {
+                const targetElem = document.getElementById(target.id);
+                if (targetElem) {
+                  this.updateElementValues(targetElem, target.value);
+                }
+              });
+            }
+
+            // Process attributes
+            if (values.attributes) {
+              values.attributes.forEach((attributeSet) => {
+                const element = document.getElementById(attributeSet.id);
+                if (element) {
+                  Object.keys(attributeSet.attributes).forEach((attr) => {
+                    const value = attributeSet.attributes[attr];
+                    switch (attr) {
+                      case "class":
+                        this.updateClassAttribute(element, value);
+                        break;
+                      case "add":
+                        element.setAttribute(value, "");
+                        break;
+                      case "remove":
+                        element.removeAttribute(value);
+                        break;
+                      default:
+                        element.setAttribute(attr, value);
+                    }
+                  });
+                }
+              });
+            }
+
+            // Register swaps to be processed after the htmx request completes
+            if (values.swaps) {
+              document.addEventListener(
+                "htmx:afterRequest",
+                () => {
+                  values.swaps.forEach((swap) => {
+                    const element = document.getElementById(swap.id);
+                    if (element) {
+                      Object.keys(swap.attributes).forEach((attr) => {
+                        const value = swap.attributes[attr];
+                        switch (attr) {
+                          case "class":
+                            this.updateClassAttribute(element, value);
+                            break;
+                          case "add":
+                            element.setAttribute(value, "");
+                            break;
+                          case "remove":
+                            element.removeAttribute(value);
+                            break;
+                          default:
+                            element.setAttribute(attr, value);
+                        }
+                      });
+                    }
+                  });
+                },
+                {
+                  once: true,
+                }
+              );
+            }
           }
         });
-      }
-    });
-  }
+      });
+    }
 
-  // Clears the input values of the specified form.
-  clearForm(form) {
-    const inputs = form.querySelectorAll("input, textarea, select");
-    inputs.forEach((input) => {
-      if (input.type === "checkbox" || input.type === "radio") {
-        input.checked = false;
-      } else {
-        input.value = "";
-      }
-    });
-  }
+    // Handles form events for the provided forms based on their `hx-form` attribute.
+    handleFormEvents(forms) {
+      forms.forEach((form) => {
+        const eventAttr = form.getAttribute("hx-form");
+        if (eventAttr) {
+          const [eventType, functionName] = eventAttr.split(":");
+
+          form.addEventListener(`htmx:${eventType}`, (event) => {
+            switch (functionName) {
+              case "reset":
+                if (event.detail.successful) {
+                  form.reset();
+                }
+                break;
+
+              case "clear":
+                if (event.detail.successful) {
+                  this.clearForm(form);
+                }
+                break;
+
+              case "disable":
+                this.toggleForm(form, true);
+                break;
+
+              case "enable":
+                this.toggleForm(form, false);
+                break;
+
+              // Add more cases as needed
+
+              default:
+                console.warn(`Unhandled function name: ${functionName}`);
+                break;
+            }
+          });
+        }
+      });
+    }
 
-  // Toggles the disabled state of the specified form's inputs.
-  toggleForm(form, state) {
-    const inputs = form.querySelectorAll("input, textarea, select, button");
-    inputs.forEach((input) => {
-      input.disabled = state;
-    });
-  }
+    // Clears the input values of the specified form.
+    clearForm(form) {
+      const inputs = form.querySelectorAll("input, textarea, select");
+      inputs.forEach((input) => {
+        if (input.type === "checkbox" || input.type === "radio") {
+          input.checked = false;
+        } else {
+          input.value = "";
+        }
+      });
+    }
+
+    // Toggles the disabled state of the specified form's inputs.
+    toggleForm(form, state) {
+      const inputs = form.querySelectorAll("input, textarea, select, button");
+      inputs.forEach((input) => {
+        input.disabled = state;
+      });
+    }
 
-  // Updates the values of the specified element based on its tag name and type.
-  updateElementValues(element, value) {
-    const tagName = element.tagName;
-    const inputType = element.type;
+    // Updates the values of the specified element based on its tag name and type.
+    updateElementValues(element, value) {
+      const tagName = element.tagName;
+      const inputType = element.type;
 
-    if (tagName === "INPUT" || tagName === "TEXTAREA") {
-      if (inputType === "checkbox") {
-        element.checked = value;
+      if (tagName === "INPUT" || tagName === "TEXTAREA") {
+        if (inputType === "checkbox") {
+          element.checked = value;
+        } else {
+          element.value = value;
+        }
       } else {
-        element.value = value;
+        element.textContent = value;
       }
-    } else {
-      element.textContent = value;
+    }
+
+    // Updates the class attribute of the specified element. Class names starting
+    // with a hyphen (`-`) are removed, others are added.
+    updateClassAttribute(element, className) {
+      const classNames = className.split(" ");
+      classNames.forEach((name) => {
+        if (name.startsWith("-")) {
+          element.classList.remove(name.substring(1));
+        } else {
+          element.classList.add(name);
+        }
+      });
     }
   }
 
-  // Updates the class attribute of the specified element. Class names starting
-  // with a hyphen (`-`) are removed, others are added.
-  updateClassAttribute(element, className) {
-    const classNames = className.split(" ");
-    classNames.forEach((name) => {
-      if (name.startsWith("-")) {
-        element.classList.remove(name.substring(1));
-      } else {
-        element.classList.add(name);
-      }
-    });
+  let store = null;
+  let api = null;
+  let hxConnector = null;
+
+  // Function to initialize instances
+  function initializeInstances() {
+    store = StateManager.getInstance();
+    api = RequestApi.getInstance();
+    hxConnector = HXConnector.getInstance();
   }
-}
 
-let store = null;
-let api = null;
-let hxConnector = null;
-document.addEventListener("DOMContentLoaded", function () {
-  store = StateManager.getInstance();
-  api = RequestApi.getInstance();
-  hxConnector = HXConnector.getInstance();
-});
+  // Initialize instances on initial page load
+  document.addEventListener("DOMContentLoaded", function () {
+    initializeInstances();
+
+    // Ensure document.body exists before attaching the event listener
+    if (document.body) {
+      document.body.addEventListener("htmx:afterOnLoad", function () {
+        initializeInstances();
+      });
+    }
+  });
+}