@arielgonzaguer/michi-router 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,25 @@
 # Michi Router
 
+![npm version](https://img.shields.io/npm/v/@arielgonzaguer/michi-router)
+![bundle size](https://img.shields.io/bundlephobia/minzip/@arielgonzaguer/michi-router)
+![license](https://img.shields.io/npm/l/@arielgonzaguer/michi-router)
+
 El router minimalista y simple para React.
+El objetivo principal de esta herramienta es proporcionar la funcionalidad básica de enrutamiento.
+
+## Características
+
+- Es ideal para proyectos pequeños o que solo necesitan una funcionalidad básica de enrutamiento.
+- No requiere de ninguna configuración adicional.
+- No requiere de ninguna dependencia externa.
+- Creado con TypeScript.
+- Ultra ligero. Menos de 20kb (más ligero y básico que otras librerías).
+
+## Compatibilidad
+
+- React 16.8+.
+- Funciona con proyectos creados con Create React App, Vite, Next.js, etc.
+- Totalmente tipado con TypeScript.
 
 ## Installation
 
@@ -8,9 +27,10 @@ El router minimalista y simple para React.
 npm install @arielgonzaguer/michi-router
 ```
 
-## Usage
+## Uso básico
 
 ```jsx
+// src/App.jsx //
 import { RouterProvider, Link } from "@arielgonzaguer/michi-router";
 
 // puede crear rutas en un archivo separado o en el mismo archivo
@@ -27,8 +47,12 @@ function App() {
     </RouterProvider>
   );
 }
+```
 
-// Usando Link
+### Usando Link
+
+#### Usando el componente Link solo con prop to
+```jsx
 function NavigationComponent() {
   return (
     <nav>
@@ -37,14 +61,94 @@ function NavigationComponent() {
     </nav>
   );
 }
+```
+
+#### Usando el componente Link con todas las props
+```jsx
+<Link 
+  to="/contact" 
+  className="nav-link" 
+  target="_blank" 
+  rel="noopener noreferrer"
+  aria-label="Contacto"
+>
+  Contacto
+</Link>
+```
+
+
+
+### Navegación programática (Hook useNavigate)
+
+```jsx
+import { useNavigate } from "@arielgonzaguer/michi-router";
 
-// Usando useNavigate
 function NavigateButton() {
   const navigate = useNavigate();
   return <button onClick={() => navigate("/about")}>Ir a About</button>;
 }
 ```
 
+### Organización de rutas en archivos separados
+
+Para aplicaciones más grandes, puedes organizar tus rutas en archivos separados:
+
+```jsx
+// routes.js
+import Home from "./pages/Home";
+import About from "./pages/About";
+import Products from "./pages/Products";
+import NotFound from "./pages/NotFound";
+
+export const routes = [
+  { path: "/", component: <Home /> },
+  { path: "/about", component: <About /> },
+  { path: "/products", component: <Products /> },
+];
+
+export const notFoundPage = <NotFound />;
+```
+
+```jsx
+// App.jsx
+import { RouterProvider } from "@arielgonzaguer/michi-router";
+import { routes, notFoundPage } from "./routes";
+
+function App() {
+  return <RouterProvider routes={routes}>{notFoundPage}</RouterProvider>;
+}
+```
+
+### Integración con sistemas de autenticación
+
+```jsx
+import { RouterProvider } from "@arielgonzaguer/michi-router";
+import { useAuth } from "./auth-context";
+
+function App() {
+  const { isAuthenticated } = useAuth();
+
+  // Definimos rutas condicionalmente basadas en autenticación
+  const routes = [
+    { path: "/", component: <Home /> },
+    { path: "/login", component: <Login /> },
+    // Solo agregamos estas rutas si el usuario está autenticado
+    ...(isAuthenticated
+      ? [
+          { path: "/profile", component: <Profile /> },
+          { path: "/admin", component: <Admin /> },
+        ]
+      : []),
+  ];
+
+  return (
+    <RouterProvider routes={routes}>
+      <div>404: Page not found</div>
+    </RouterProvider>
+  );
+}
+```
+
 ### Usando un Layout General
 
 Puedes aplicar un layout común a todas tus rutas:
@@ -91,9 +195,9 @@ Componente principal para el enrutamiento.
 
 **Props:**
 
-- `routes`: Array de objetos con `path` y `component`
-- `children`: Elemento a mostrar cuando no hay ruta coincidente
-- `layout`: Componente opcional que funciona como layout general para todas las rutas
+- `routes`: Array de objetos con `path` y `component`.
+- `children`: Elemento a mostrar cuando no hay ruta coincidente.
+- `layout`: Componente opcional que funciona como layout general para todas las rutas.
 
 ### `<Link>`
 
@@ -101,9 +205,10 @@ Componente para navegación declarativa.
 
 **Props:**
 
-- `to`: Ruta destino
-- `children`: Contenido del enlace
-- `className`: Clases CSS opcionales
+- `to`: Ruta destino.
+- `children`: Contenido del enlace.
+- `className`: Clases CSS opcionales.
+- `...rest`: Cualquier otra prop válida para elementos `<a>` de HTML.
 
 ### `useNavigate()`
 
@@ -111,7 +216,61 @@ Hook para navegación programática.
 
 **Retorna:**
 
-- Función navigate que acepta la ruta como parámetro
+- Función navigate que acepta la ruta como parámetro.
+
+## Próximas características
+
+- [ ] Soporte para rutas anidadas.
+
+  ```jsx
+  const routes = [
+    {
+      path: "/dashboard",
+      component: <Dashboard />,
+      children: [
+        { path: "/users", component: <Users /> },
+        { path: "/settings", component: <Settings /> },
+      ],
+    },
+  ];
+  ```
+
+- [ ] Transiciones entre rutas.
+
+  ```jsx
+  <RouterProvider routes={routes} transitions={true} transitionDuration={300}>
+    <NotFound />
+  </RouterProvider>
+  ```
+
+## Solución de problemas comunes
+
+### El componente no se renderiza después de navegar
+
+Asegúrate de que la ruta en el array `routes` coincida exactamente con la URL, incluyendo barras diagonales.
+
+### Errores con TypeScript
+
+Si estás usando TypeScript, asegúrate de importar los tipos correctamente:
+
+```typescript
+import {
+  RouterProvider,
+  Link,
+  useNavigate,
+} from "@arielgonzaguer/michi-router";
+import type { RouterProviderProps } from "@arielgonzaguer/michi-router";
+```
+
+## Contribuir
+
+Las contribuciones son bienvenidas. Por favor, sigue estos pasos:
+
+1. Fork el repositorio.
+2. Crea una rama para tu feature (`git checkout -b feature/amazing-feature`).
+3. Haz commit de tus cambios (`git commit -m 'Add some amazing feature'`).
+4. Push a la rama (`git push origin feature/amazing-feature`).
+5. Abre un Pull Request.
 
 ## Licencia
 

package/dist/michi-router/Michi-router.d.ts

@@ -1,11 +1,21 @@
 import React from 'react';
 import type { RouterContextType, RouterProviderProps, LinkProps } from './types';
 declare const RouterContext: React.Context<RouterContextType>;
-export declare function RouterProvider({ routes, children, layout: Layout }: RouterProviderProps & {
-    layout?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-}): React.JSX.Element;
-export declare const Link: ({ to, children, className }: LinkProps) => React.JSX.Element;
+/**
+ * Proveedor principal del enrutador.
+ * @param routes - Array de rutas disponibles
+ * @param children - Contenido a mostrar cuando no hay coincidencia de ruta (404)
+ * @param layout - Componente de layout opcional para envolver todas las rutas
+ */
+export declare function RouterProvider({ routes, children, layout: Layout }: RouterProviderProps): React.JSX.Element;
+/**
+ * Componente Link para navegación declarativa.
+ * Previene la recarga de página y utiliza el historial del navegador.
+ */
+export declare const Link: ({ to, children, className, ...rest }: LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.JSX.Element;
+/**
+ * Hook para acceder a la función de navegación programática.
+ * @returns Función navigate que permite cambiar de ruta
+ */
 export declare const useNavigate: () => (to: string) => void;
 export { RouterContext };

package/dist/michi-router/Michi-router.js

@@ -1,45 +1,109 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RouterContext = exports.useNavigate = exports.Link = exports.RouterProvider = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("react");
+var react_1 = __importStar(require("react"));
 // Creación del contexto con un valor inicial
-var RouterContext = (0, react_2.createContext)({
-    path: '',
-    navigate: function () { }
+var RouterContext = (0, react_1.createContext)({
+    path: window.location.pathname,
+    navigate: function () {
+        console.warn('RouterContext usado fuera de RouterProvider');
+    }
 });
 exports.RouterContext = RouterContext;
+/**
+ * Proveedor principal del enrutador.
+ * @param routes - Array de rutas disponibles
+ * @param children - Contenido a mostrar cuando no hay coincidencia de ruta (404)
+ * @param layout - Componente de layout opcional para envolver todas las rutas
+ */
 function RouterProvider(_a) {
     var routes = _a.routes, children = _a.children, Layout = _a.layout;
-    var _b = (0, react_2.useState)(window.location.pathname), path = _b[0], setPath = _b[1];
-    (0, react_2.useEffect)(function () {
+    var _b = (0, react_1.useState)(window.location.pathname), path = _b[0], setPath = _b[1];
+    (0, react_1.useEffect)(function () {
         var handlePopState = function () { return setPath(window.location.pathname); };
         window.addEventListener('popstate', handlePopState);
         return function () { return window.removeEventListener('popstate', handlePopState); };
     }, []);
-    var navigate = function (to) {
+    var navigate = (0, react_1.useCallback)(function (to) {
         window.history.pushState({}, '', to);
         setPath(to);
-    };
+    }, []);
+    // Encontrar la ruta actual
     var currentRoute = routes.find(function (route) { return route.path === path; });
     var routeContent = currentRoute ? currentRoute.component : children;
-    return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, Layout ? (react_1.default.createElement(Layout, null, routeContent)) : (routeContent)));
+    try {
+        return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, Layout ? (react_1.default.createElement(Layout, null, routeContent)) : (routeContent)));
+    }
+    catch (error) {
+        console.error('Error en RouterProvider:', error);
+        return react_1.default.createElement("div", null, "Error en el enrutador. Consulta la consola para m\u00E1s detalles.");
+    }
 }
 exports.RouterProvider = RouterProvider;
+/**
+ * Componente Link para navegación declarativa.
+ * Previene la recarga de página y utiliza el historial del navegador.
+ */
 var Link = function (_a) {
-    var to = _a.to, children = _a.children, className = _a.className;
-    var navigate = (0, react_2.useContext)(RouterContext).navigate;
-    return (react_1.default.createElement("a", { href: to, className: className, style: { marginRight: '1rem' }, onClick: function (e) {
+    var to = _a.to, children = _a.children, className = _a.className, rest = __rest(_a, ["to", "children", "className"]);
+    var navigate = (0, react_1.useContext)(RouterContext).navigate;
+    return (react_1.default.createElement("a", __assign({ href: to, className: className, onClick: function (e) {
             e.preventDefault();
             navigate(to);
-        } }, children));
+        } }, rest), children));
 };
 exports.Link = Link;
+/**
+ * Hook para acceder a la función de navegación programática.
+ * @returns Función navigate que permite cambiar de ruta
+ */
 var useNavigate = function () {
-    var navigate = (0, react_2.useContext)(RouterContext).navigate;
+    var navigate = (0, react_1.useContext)(RouterContext).navigate;
     return navigate;
 };
 exports.useNavigate = useNavigate;

package/dist/michi-router/index.d.ts

@@ -1,2 +1,2 @@
 export { RouterProvider, Link, useNavigate } from './Michi-router';
-export type { Route, RouterContextType, RouterProviderProps, LinkProps } from './types';
+export type { Route, RouterContextType, RouterProviderProps, LinkProps, LayoutProps } from './types';

package/dist/michi-router/types.d.ts

@@ -1,4 +1,7 @@
 import { ReactNode } from "react";
+export interface LayoutProps {
+    children: ReactNode;
+}
 export interface Route {
     path: string;
     component: ReactNode;
@@ -17,7 +20,7 @@ export interface RouterProviderProps {
         children: React.ReactNode;
     }>;
 }
-export interface LinkProps {
+export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
     to: string;
     children: ReactNode;
     className?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arielgonzaguer/michi-router",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "The minimalist and simple router for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",