Actualizar src/sigpro.js

src/sigpro.js

@@ -41,16 +41,16 @@
    */
   window.$$ = (tag, props = {}, children = []) => {
     const el = document.createElement(tag);
-    
+
     // Logic: If props is NOT a plain object or is a Node/Array/Function, 
     // it's actually the children.
     if (
-      typeof props !== 'object' || 
-      props instanceof Node || 
-      Array.isArray(props) || 
+      typeof props !== 'object' ||
+      props instanceof Node ||
+      Array.isArray(props) ||
       typeof props === 'function'
     ) {
-      children = props; 
+      children = props;
       props = {};
     }
 
@@ -90,17 +90,26 @@
   };
 
   /**
-   * System Utilities (_)
+   * Application Mounter (Inspired by Vue)
+   * @param {HTMLElement|Function} node - Root component.
+   * @param {HTMLElement} [target] - Container element.
    */
-  window._render = (node, target = document.body) => {
+  window.mount = (node, target = document.body) => {
     target.innerHTML = '';
-    target.appendChild(typeof node === 'function' ? node() : node);
+    const root = typeof node === 'function' ? node() : node;
+    target.appendChild(root);
+    console.log("%c[SigPro] Mounted successfully", "color: #42b883; font-weight: bold;");
   };
 
-  window._router = (routes) => {
+  /**
+   * Integrated Router
+   * @param {Array} routes - Route definitions.
+   */
+  window.router = (routes) => {
     const sPath = $(window.location.hash.replace(/^#/, "") || "/");
     window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
-    return div({ class: "sigpro-router" }, [
+
+    return div([
       () => {
         const current = sPath();
         const route = routes.find(r => {
@@ -109,6 +118,7 @@
           if (rP.length !== cP.length) return false;
           return rP.every((part, i) => part.startsWith(':') || part === cP[i]);
         }) || routes.find(r => r.path === "*");
+
         return route ? (typeof route.component === 'function' ? route.component() : route.component) : h1("404");
       }
     ]);