@arielgonzaguer/michi-router 2.0.0 → 2.1.1

package/README.md

@@ -4,23 +4,25 @@
 ![bundle size](https://img.shields.io/bundlephobia/minzip/@arielgonzaguer/michi-router)
 ![license](https://img.shields.io/npm/l/@arielgonzaguer/michi-router)
 
-![Logo de MichiRouter](./public/michiRouter_LOGO.png)
-
-# Michi Router
+![Logo de MichiRouter](https://cdn.jsdelivr.net/gh/Ariel-GonzAguer/michi-router@main/public/michiRouter_LOGO.png)
 
 El router minimalista y simple para React.
 El objetivo principal de esta herramienta es proporcionar la funcionalidad básica de enrutamiento.
 No requiere de ninguna dependencia externa, ideal para proyectos pequeños.
 Creado con TypeScript.
 
-## Compatibilidad
+## 🚀 Características
 
-- React 17+
+- ✅ **Minimalista**: Solo las funcionalidades esenciales de enrutamiento
+- ✅ **TypeScript**: Completamente tipado para mejor experiencia de desarrollo
+- ✅ **Zero dependencias**: No requiere librerías externas
+- ✅ **Liviano**: Bundle pequeño y optimizado
+- ✅ **Componente Protected**: Control de acceso integrado
+- ✅ **SSR Compatible**: Funciona con Next.js y otras soluciones SSR
 
-## Instalación
+## 📦 Instalación
 
 ```bash
 npm install @arielgonzaguer/michi-router
 ```
-
-Visite la [Documentación oficial](https://michirouter.vercel.app/) para más detalles.
+Para ver la documentación completa, visite [la página de documentación](https://michirouter.vercel.app/).

package/dist/index.d.ts

@@ -27,17 +27,19 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
     children: ReactNode;
     className?: string;
 }
-interface ProtectedProps {
+interface AuthState<TUser = any> {
+    user: TUser | null;
+    isLoading: boolean;
+}
+interface ProtectedConfig<TUser = any> {
+    states: AuthState<TUser>;
+    redirectionPath: string;
+    loadingComponent?: ReactNode;
+    defaultMessage?: string;
+}
+interface ProtectedProps<TUser = any> {
     children: JSX.Element;
-    configObject: {
-        states: {
-            user: any;
-            isLoading: boolean;
-        };
-        redirectionPath: string;
-        loadingComponent?: ReactNode;
-        defaultMessage?: string | undefined;
-    };
+    configObject: ProtectedConfig<TUser>;
 }
 
 /**
@@ -68,6 +70,6 @@ declare const useNavigate: () => (to: string) => void;
  * @param {React.ReactNode} props.children - Los nodos React a renderizar si el usuario está autenticado.
  * @returns {JSX.Element|null} Los hijos si está autenticado, de lo contrario loader.
  */
-declare function Protected({ children, configObject }: ProtectedProps): JSX.Element | null;
+declare function Protected<TUser = any>({ children, configObject }: ProtectedProps<TUser>): JSX.Element | null;
 
 export { type LayoutProps, Link, type LinkProps, Protected, type ProtectedProps, type Route, type RouterContextType, RouterProvider, type RouterProviderProps, useNavigate };

package/dist/index.js

@@ -1,7 +1,7 @@
-"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var n in e)p(t,n,{get:e[n],enumerable:!0})},y=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of C(e))!x.call(t,r)&&r!==n&&p(t,r,{get:()=>e[r],enumerable:!(o=h(e,r))||o.enumerable});return t};var L=t=>y(p({},"__esModule",{value:!0}),t);var E={};w(E,{Link:()=>g,Protected:()=>c,RouterProvider:()=>m,useNavigate:()=>u});module.exports=L(E);var a=require("react"),d=require("react/jsx-runtime"),l=(0,a.createContext)({path:window.location.pathname,navigate:()=>{console.warn("RouterContext usado fuera de RouterProvider")}});function m({routes:t,children:e,layout:n}){let[o,r]=(0,a.useState)(window.location.pathname);(0,a.useEffect)(()=>{let s=()=>r(window.location.pathname);return window.addEventListener("popstate",s),()=>window.removeEventListener("popstate",s)},[]);let i=(0,a.useCallback)(s=>{window.history.pushState({},"",s),r(s)},[]),P=t.find(s=>s.path===o),f=P?P.component:e;try{return(0,d.jsx)(l.Provider,{value:{path:o,navigate:i},children:n?(0,d.jsx)(n,{children:f}):f})}catch(s){return console.error("Error en RouterProvider:",s),(0,d.jsx)("div",{children:"Error en el enrutador. Consulta la consola para m\xE1s detalles."})}}var g=({to:t,children:e,className:n,...o})=>{let{navigate:r}=(0,a.useContext)(l);return(0,d.jsx)("a",{href:t,className:n,onClick:i=>{i.preventDefault(),r(t)},...o,children:e})},u=()=>{let{navigate:t}=(0,a.useContext)(l);return t};var v=require("react");var R=require("react/jsx-runtime");function c({children:t,configObject:e}){let n=u(),o={states:e?.states||null,redirectionPath:e?.redirectionPath||"/",loadingComponent:e?.loadingComponent||null,defaultMessage:e?.defaultMessage||void 0};if(!o.states)return console.error(`Componente Protected: El objeto de configuraci\xF3n es inv\xE1lido. Este es el formato esperado:
+"use strict";var l=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var a in e)l(t,a,{get:e[a],enumerable:!0})},E=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of x(e))!y.call(t,r)&&r!==a&&l(t,r,{get:()=>e[r],enumerable:!(o=w(e,r))||o.enumerable});return t};var M=t=>E(l({},"__esModule",{value:!0}),t);var T={};L(T,{Link:()=>C,Protected:()=>P,RouterProvider:()=>R,useNavigate:()=>d});module.exports=M(T);var s=require("react"),u=require("react/jsx-runtime"),c=typeof window<"u",v=()=>c?window.location.pathname:"/",f=(0,s.createContext)({path:v(),navigate:()=>{console.warn("RouterContext usado fuera de RouterProvider")}});function R({routes:t,children:e,layout:a}){let[o,r]=(0,s.useState)(v());(0,s.useEffect)(()=>{if(!c)return;let n=()=>r(window.location.pathname);return window.addEventListener("popstate",n),()=>window.removeEventListener("popstate",n)},[]);let i=(0,s.useCallback)(n=>{if(!c){r(n);return}if(typeof n!="string"||n.includes("javascript:")||n.includes("data:")){console.warn("MichiRouter: URL potencialmente insegura bloqueada:",n);return}window.history.pushState({},"",n),r(n)},[]),m=t.find(n=>n.path===o),g=m?m.component:e;try{return(0,u.jsx)(f.Provider,{value:{path:o,navigate:i},children:a?(0,u.jsx)(a,{children:g}):g})}catch(n){return console.error("Error en RouterProvider:",n),(0,u.jsx)("div",{children:"Error en el enrutador. Consulta la consola para m\xE1s detalles."})}}var C=({to:t,children:e,className:a,...o})=>{let{navigate:r}=(0,s.useContext)(f);return(0,u.jsx)("a",{href:t,className:a,onClick:i=>{i.preventDefault(),r(t)},...o,children:e})},d=()=>{let{navigate:t}=(0,s.useContext)(f);return t};var h=require("react");var p=require("react/jsx-runtime");function P({children:t,configObject:e}){let a=d(),o={states:e?.states||{user:null,isLoading:!1},redirectionPath:e?.redirectionPath||"/",loadingComponent:e?.loadingComponent||null,defaultMessage:e?.defaultMessage||void 0};if(!e?.states)return console.error(`Componente Protected: El objeto de configuraci\xF3n es inv\xE1lido. Este es el formato esperado:
 {
   states: { user: any; isLoading: boolean };
   redirectionPath: string;
   loadingComponent?: React.ReactNode;
   defaultMessage?: string;
-}`),null;let{user:r,isLoading:i}=o.states;return(0,v.useEffect)(()=>{!i&&!r&&n(o.redirectionPath)},[i,r,n,o.redirectionPath]),i?o.loadingComponent?o.loadingComponent:o.defaultMessage?(0,R.jsx)("div",{children:o.defaultMessage}):null:r?t:null}0&&(module.exports={Link,Protected,RouterProvider,useNavigate});
+}`),null;let{user:r,isLoading:i}=o.states;return(0,h.useEffect)(()=>{!i&&!r&&a(o.redirectionPath)},[i,r,a,o.redirectionPath]),i?o.loadingComponent?o.loadingComponent:o.defaultMessage?(0,p.jsx)(p.Fragment,{children:o.defaultMessage}):null:r?t:null}0&&(module.exports={Link,Protected,RouterProvider,useNavigate});

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import{useCallback as f,createContext as m,useContext as c,useState as g,useEffect as v}from"react";import{jsx as i}from"react/jsx-runtime";var d=m({path:window.location.pathname,navigate:()=>{console.warn("RouterContext usado fuera de RouterProvider")}});function R({routes:o,children:r,layout:a}){let[e,n]=g(window.location.pathname);v(()=>{let t=()=>n(window.location.pathname);return window.addEventListener("popstate",t),()=>window.removeEventListener("popstate",t)},[]);let s=f(t=>{window.history.pushState({},"",t),n(t)},[]),p=o.find(t=>t.path===e),l=p?p.component:r;try{return i(d.Provider,{value:{path:e,navigate:s},children:a?i(a,{children:l}):l})}catch(t){return console.error("Error en RouterProvider:",t),i("div",{children:"Error en el enrutador. Consulta la consola para m\xE1s detalles."})}}var h=({to:o,children:r,className:a,...e})=>{let{navigate:n}=c(d);return i("a",{href:o,className:a,onClick:s=>{s.preventDefault(),n(o)},...e,children:r})},u=()=>{let{navigate:o}=c(d);return o};import{useEffect as C}from"react";import{jsx as x}from"react/jsx-runtime";function P({children:o,configObject:r}){let a=u(),e={states:r?.states||null,redirectionPath:r?.redirectionPath||"/",loadingComponent:r?.loadingComponent||null,defaultMessage:r?.defaultMessage||void 0};if(!e.states)return console.error(`Componente Protected: El objeto de configuraci\xF3n es inv\xE1lido. Este es el formato esperado:
+import{useCallback as g,createContext as v,useContext as f,useState as R,useEffect as C}from"react";import{jsx as i}from"react/jsx-runtime";var u=typeof window<"u",P=()=>u?window.location.pathname:"/",d=v({path:P(),navigate:()=>{console.warn("RouterContext usado fuera de RouterProvider")}});function h({routes:n,children:o,layout:a}){let[t,r]=R(P());C(()=>{if(!u)return;let e=()=>r(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[]);let s=g(e=>{if(!u){r(e);return}if(typeof e!="string"||e.includes("javascript:")||e.includes("data:")){console.warn("MichiRouter: URL potencialmente insegura bloqueada:",e);return}window.history.pushState({},"",e),r(e)},[]),l=n.find(e=>e.path===t),c=l?l.component:o;try{return i(d.Provider,{value:{path:t,navigate:s},children:a?i(a,{children:c}):c})}catch(e){return console.error("Error en RouterProvider:",e),i("div",{children:"Error en el enrutador. Consulta la consola para m\xE1s detalles."})}}var w=({to:n,children:o,className:a,...t})=>{let{navigate:r}=f(d);return i("a",{href:n,className:a,onClick:s=>{s.preventDefault(),r(n)},...t,children:o})},p=()=>{let{navigate:n}=f(d);return n};import{useEffect as x}from"react";import{Fragment as y,jsx as L}from"react/jsx-runtime";function m({children:n,configObject:o}){let a=p(),t={states:o?.states||{user:null,isLoading:!1},redirectionPath:o?.redirectionPath||"/",loadingComponent:o?.loadingComponent||null,defaultMessage:o?.defaultMessage||void 0};if(!o?.states)return console.error(`Componente Protected: El objeto de configuraci\xF3n es inv\xE1lido. Este es el formato esperado:
 {
   states: { user: any; isLoading: boolean };
   redirectionPath: string;
   loadingComponent?: React.ReactNode;
   defaultMessage?: string;
-}`),null;let{user:n,isLoading:s}=e.states;return C(()=>{!s&&!n&&a(e.redirectionPath)},[s,n,a,e.redirectionPath]),s?e.loadingComponent?e.loadingComponent:e.defaultMessage?x("div",{children:e.defaultMessage}):null:n?o:null}export{h as Link,P as Protected,R as RouterProvider,u as useNavigate};
+}`),null;let{user:r,isLoading:s}=t.states;return x(()=>{!s&&!r&&a(t.redirectionPath)},[s,r,a,t.redirectionPath]),s?t.loadingComponent?t.loadingComponent:t.defaultMessage?L(y,{children:t.defaultMessage}):null:r?n:null}export{w as Link,m as Protected,h as RouterProvider,p as useNavigate};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arielgonzaguer/michi-router",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "El router minimalista y simple para React.\nEl objetivo principal de esta herramienta es proporcionar la funcionalidad básica de enrutamiento.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",