@arielgonzaguer/michi-router 1.0.3 → 1.0.5

package/README.md

@@ -1,277 +1,256 @@
-# 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
-
-```bash
-npm install @arielgonzaguer/michi-router
-```
-
-## 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
-const routes = [
-  { path: "/", component: <Home /> },
-  { path: "/about", component: <About /> },
-];
-
-function App() {
-  return (
-    <RouterProvider routes={routes}>
-      {/* Esto se muestra si no se encuentra una ruta */}
-      <div>404: Page not found</div>
-    </RouterProvider>
-  );
-}
-```
-
-### Usando Link
-
-#### Usando el componente Link solo con prop to
-```jsx
-function NavigationComponent() {
-  return (
-    <nav>
-      <Link to="/">Home</Link>
-      <Link to="/about">About</Link>
-    </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";
-
-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>`
-
-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.
-
-### `<Link>`
-
-Componente para navegación declarativa.
-
-**Props:**
-
-- `to`: Ruta destino.
-- `children`: Contenido del enlace.
-- `className`: Clases CSS opcionales.
-- `...rest`: Cualquier otra prop válida para elementos `<a>` de HTML.
-
-### `useNavigate()`
-
-Hook para navegación programática.
-
-**Retorna:**
-
-- 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
-
-MIT
+# 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.
+
+## Compatibilidad
+
+- React 16.8+.
+- Funciona con proyectos creados con  Vite, Next.js, etc.
+- Totalmente tipado con TypeScript.
+
+## Instalación
+
+```bash
+npm install @arielgonzaguer/michi-router
+```
+
+## Uso básico
+
+```jsx
+// src/App.jsx //
+import { RouterProvider} from "@arielgonzaguer/michi-router";
+
+// puede crear rutas en un archivo separado o en el mismo archivo
+const routes = [
+  { path: "/", component: <Home /> },
+  { path: "/about", component: <About /> },
+];
+
+function App() {
+  return (
+    <RouterProvider routes={routes}>
+      {/* Esto se muestra si no se encuentra una ruta */}
+      <div>404: Page not found</div>
+    </RouterProvider>
+  );
+}
+```
+
+### Usando Link
+
+#### Usando el componente Link solo con prop to
+```jsx
+import { Link} from "@arielgonzaguer/michi-router";
+
+function NavigationComponent() {
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/about">About</Link>
+    </nav>
+  );
+}
+```
+
+#### Usando el componente Link con todas las props
+```jsx
+import { Link} from "@arielgonzaguer/michi-router";
+
+<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";
+
+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>`
+
+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.
+
+### `<Link>`
+
+Componente para navegación declarativa.
+
+**Props:**
+
+- `to`: Ruta destino.
+- `children`: Contenido del enlace.
+- `className`: Clases CSS opcionales.
+- `...rest`: Cualquier otra prop válida para elementos `<a>` de HTML.
+
+### `useNavigate()`
+
+Hook para navegación programática.
+
+**Retorna:**
+
+- Función navigate que acepta la ruta como parámetro.
+
+## 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
+
+MIT

package/package.json

@@ -1,39 +1,40 @@
-{
-  "name": "@arielgonzaguer/michi-router",
-  "private": false,
-  "version": "1.0.3",
-  "description": "The minimalist and simple router for React",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "prepare": "npm run build",
-    "clean": "rimraf dist",
-    "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "react",
-    "router",
-    "typescript",
-    "michi",
-    "cats"
-  ],
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^6.0.1",
-    "typescript": "^4.9.5"
-  },
-  "author": "Ariel González Agüero",
-  "license": "MIT"
-}
+{
+  "name": "@arielgonzaguer/michi-router",
+  "private": false,
+  "version": "1.0.5",
+  "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",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "typescript",
+    "michi",
+    "cats",
+    "gatos"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^4.9.5"
+  },
+  "author": "Ariel González Agüero",
+  "license": "MIT"
+}