@arielgonzaguer/michi-router 1.0.0 → 1.0.2

package/README.md

@@ -1,6 +1,16 @@
 # 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 idea 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.
+- Es compatible con React 16.8 y versiones posteriores.
+- Creado con TypeScript.
+- Ultra ligero. Menos de 15kb (más ligero y básico que otras librerías).
 
 ## Installation
 
@@ -8,9 +18,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 +38,10 @@ function App() {
     </RouterProvider>
   );
 }
+```
 
-// Usando Link
+### Usando Link
+```jsx
 function NavigationComponent() {
   return (
     <nav>
@@ -37,14 +50,116 @@ function NavigationComponent() {
     </nav>
   );
 }
+```
 
-// Usando useNavigate
+### Navegación programática (Hook useNavigate)
+```jsx
 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:
+
+```jsx
+import { RouterProvider } from "@arielgonzaguer/michi-router";
+import MainLayout from "./layouts/MainLayout";
+
+const routes = [
+  { path: "/", component: <Home /> },
+  { path: "/about", component: <About /> },
+];
+
+function App() {
+  return (
+    <RouterProvider routes={routes} layout={MainLayout}>
+      <div>404: Page not found</div>
+    </RouterProvider>
+  );
+}
+
+// Ejemplo de un componente Layout
+function MainLayout({ children }) {
+  return (
+    <div className="layout">
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <main>{children}</main>
+      <footer>Michi-router 😸</footer>
+    </div>
+  );
+}
+```
+
 ## API
 
 ### `<RouterProvider>`
@@ -55,6 +170,7 @@ Componente principal para el enrutamiento.
 
 - `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>`
 
@@ -74,6 +190,30 @@ Hook para navegación programática.
 
 - 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>
+  ```
+
 ## Licencia
 
 MIT

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

@@ -1,7 +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 }: RouterProviderProps): 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,44 +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;
-    var _b = (0, react_2.useState)(window.location.pathname), path = _b[0], setPath = _b[1];
-    (0, react_2.useEffect)(function () {
+    var routes = _a.routes, children = _a.children, Layout = _a.layout;
+    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; });
-    return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, currentRoute ? currentRoute.component : children));
+    var routeContent = currentRoute ? currentRoute.component : children;
+    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';
+import { ReactNode } from "react";
+export interface LayoutProps {
+    children: ReactNode;
+}
 export interface Route {
     path: string;
     component: ReactNode;
@@ -8,10 +11,16 @@ export interface RouterContextType {
     navigate: (to: string) => void;
 }
 export interface RouterProviderProps {
-    routes: Route[];
-    children?: ReactNode;
+    routes: Array<{
+        path: string;
+        component: React.ReactNode;
+    }>;
+    children?: React.ReactNode;
+    layout?: React.ComponentType<{
+        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.0",
+  "version": "1.0.2",
   "description": "The minimalist and simple router for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",