@arielgonzaguer/michi-router 1.2.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,43 +4,18 @@
4
4
  ![bundle size](https://img.shields.io/bundlephobia/minzip/@arielgonzaguer/michi-router)
5
5
  ![license](https://img.shields.io/npm/l/@arielgonzaguer/michi-router)
6
6
 
7
-
8
- # ¡IMPORTANTE!
9
-
10
- Las versiones 1.1.x publicadas antes del 18/marzo/2025 están rotas, contienen errores y han sido eliminadas.
11
- La versión estable es la 1.2.2.
12
- Si tienes alguna de estas versiones instaladas (1.1.x), actualízala a la versión 1.2.2 ejecutando el siguiente comando:
13
- ```bash
14
- npm install @arielgonzaguer/michi-router@latest
15
- ```
16
-
17
- O:
18
- ```bash
19
- npm install @arielgonzaguer/michi-router@1.2.2
20
- ```
21
-
22
- Gracias por tu comprensión 😸
7
+ ![Logo de MichiRouter](./public/michiRouter_LOGO.png)
23
8
 
24
9
  # Michi Router
25
10
 
26
11
  El router minimalista y simple para React.
27
12
  El objetivo principal de esta herramienta es proporcionar la funcionalidad básica de enrutamiento.
28
-
29
-
30
- ## Características
31
-
32
- - Es ideal para proyectos pequeños o que solo necesitan una funcionalidad básica de enrutamiento.
33
- - No requiere de ninguna configuración adicional.
34
- - No requiere de ninguna dependencia externa.
35
- - Creado con TypeScript.
36
- - Ultra ligero.
37
-
13
+ No requiere de ninguna dependencia externa, ideal para proyectos pequeños.
14
+ Creado con TypeScript.
38
15
 
39
16
  ## Compatibilidad
40
17
 
41
- - React 16.8+.
42
- - Funciona con proyectos creados con Vite, Next.js, etc.
43
- - Totalmente tipado con TypeScript.
18
+ - React 17+
44
19
 
45
20
  ## Instalación
46
21
 
@@ -48,230 +23,4 @@ El objetivo principal de esta herramienta es proporcionar la funcionalidad bási
48
23
  npm install @arielgonzaguer/michi-router
49
24
  ```
50
25
 
51
- ## Uso básico
52
-
53
- ```jsx
54
- // src/App.jsx //
55
- import { RouterProvider} from "@arielgonzaguer/michi-router";
56
-
57
- // puede crear rutas en un archivo separado o en el mismo archivo
58
- const routes = [
59
- { path: "/", component: <Home /> },
60
- { path: "/about", component: <About /> },
61
- ];
62
-
63
- function App() {
64
- return (
65
- <RouterProvider routes={routes}>
66
- {/* Esto se muestra si no se encuentra una ruta */}
67
- <div>404: Page not found</div>
68
- </RouterProvider>
69
- );
70
- }
71
- ```
72
-
73
- ### Usando Link
74
-
75
- #### Usando el componente Link solo con prop to
76
- ```jsx
77
- import { Link} from "@arielgonzaguer/michi-router";
78
-
79
- function NavigationComponent() {
80
- return (
81
- <nav>
82
- <Link to="/">Home</Link>
83
- <Link to="/about">About</Link>
84
- </nav>
85
- );
86
- }
87
- ```
88
-
89
- #### Usando el componente Link con todas las props
90
- ```jsx
91
- import { Link} from "@arielgonzaguer/michi-router";
92
-
93
- <Link
94
- to="/contact"
95
- className="nav-link"
96
- target="_blank"
97
- rel="noopener noreferrer"
98
- aria-label="Contacto"
99
- >
100
- Contacto
101
- </Link>
102
- ```
103
-
104
-
105
-
106
- ### Navegación programática (Hook useNavigate)
107
-
108
- ```jsx
109
- import { useNavigate } from "@arielgonzaguer/michi-router";
110
-
111
- function NavigateButton() {
112
- const navigate = useNavigate();
113
- return <button onClick={() => navigate("/about")}>Ir a About</button>;
114
- }
115
- ```
116
-
117
- ### Organización de rutas en archivos separados
118
-
119
- Para aplicaciones más grandes, puedes organizar tus rutas en archivos separados:
120
-
121
- ```jsx
122
- // routes.js
123
- import Home from "./pages/Home";
124
- import About from "./pages/About";
125
- import Products from "./pages/Products";
126
- import NotFound from "./pages/NotFound";
127
-
128
- export const routes = [
129
- { path: "/", component: <Home /> },
130
- { path: "/about", component: <About /> },
131
- { path: "/products", component: <Products /> },
132
- ];
133
-
134
- export const notFoundPage = <NotFound />;
135
- ```
136
-
137
- ```jsx
138
- // App.jsx
139
- import { RouterProvider } from "@arielgonzaguer/michi-router";
140
- import { routes, notFoundPage } from "./routes";
141
-
142
- function App() {
143
- return <RouterProvider routes={routes}>{notFoundPage}</RouterProvider>;
144
- }
145
- ```
146
-
147
- ### Integración con sistemas de autenticación
148
-
149
- ```jsx
150
- import { RouterProvider } from "@arielgonzaguer/michi-router";
151
- import { useAuth } from "./auth-context";
152
-
153
- function App() {
154
- const { isAuthenticated } = useAuth();
155
-
156
- // Definimos rutas condicionalmente basadas en autenticación
157
- const routes = [
158
- { path: "/", component: <Home /> },
159
- { path: "/login", component: <Login /> },
160
- // Solo agregamos estas rutas si el usuario está autenticado
161
- ...(isAuthenticated
162
- ? [
163
- { path: "/profile", component: <Profile /> },
164
- { path: "/admin", component: <Admin /> },
165
- ]
166
- : []),
167
- ];
168
-
169
- return (
170
- <RouterProvider routes={routes}>
171
- <div>404: Page not found</div>
172
- </RouterProvider>
173
- );
174
- }
175
- ```
176
-
177
- ### Usando un Layout General
178
-
179
- Puedes aplicar un layout común a todas tus rutas:
180
-
181
- ```jsx
182
- import { RouterProvider } from "@arielgonzaguer/michi-router";
183
- import MainLayout from "./layouts/MainLayout";
184
-
185
- const routes = [
186
- { path: "/", component: <Home /> },
187
- { path: "/about", component: <About /> },
188
- ];
189
-
190
- function App() {
191
- return (
192
- <RouterProvider routes={routes} layout={MainLayout}>
193
- <div>404: Page not found</div>
194
- </RouterProvider>
195
- );
196
- }
197
-
198
- // Ejemplo de un componente Layout
199
- function MainLayout({ children }) {
200
- return (
201
- <div className="layout">
202
- <header>
203
- <nav>
204
- <Link to="/">Home</Link>
205
- <Link to="/about">About</Link>
206
- </nav>
207
- </header>
208
- <main>{children}</main>
209
- <footer>Michi-router 😸</footer>
210
- </div>
211
- );
212
- }
213
- ```
214
-
215
- ## API
216
-
217
- ### `<RouterProvider>`
218
-
219
- Componente principal para el enrutamiento.
220
-
221
- **Props:**
222
-
223
- - `routes`: Array de objetos con `path` y `component`.
224
- - `children`: Elemento a mostrar cuando no hay ruta coincidente.
225
- - `layout`: Componente opcional que funciona como layout general para todas las rutas.
226
-
227
- ### `<Link>`
228
-
229
- Componente para navegación declarativa.
230
-
231
- **Props:**
232
-
233
- - `to`: Ruta destino.
234
- - `children`: Contenido del enlace.
235
- - `className`: Clases CSS opcionales.
236
- - `...rest`: Cualquier otra prop válida para elementos `<a>` de HTML.
237
-
238
- ### `useNavigate()`
239
-
240
- Hook para navegación programática.
241
-
242
- **Retorna:**
243
-
244
- - Función navigate que acepta la ruta como parámetro.
245
-
246
- ## Solución de problemas comunes
247
-
248
- ### El componente no se renderiza después de navegar
249
-
250
- Asegúrate de que la ruta en el array `routes` coincida exactamente con la URL, incluyendo barras diagonales.
251
-
252
- ### Errores con TypeScript
253
-
254
- Si estás usando TypeScript, asegúrate de importar los tipos correctamente:
255
-
256
- ```typescript
257
- import {
258
- RouterProvider,
259
- Link,
260
- useNavigate,
261
- } from "@arielgonzaguer/michi-router";
262
- import type { RouterProviderProps } from "@arielgonzaguer/michi-router";
263
- ```
264
-
265
- ## Contribuir
266
-
267
- Las contribuciones son bienvenidas. Por favor, sigue estos pasos:
268
-
269
- 1. Fork el repositorio.
270
- 2. Crea una rama para tu feature (`git checkout -b feature/amazing-feature`).
271
- 3. Haz commit de tus cambios (`git commit -m 'Add some amazing feature'`).
272
- 4. Push a la rama (`git push origin feature/amazing-feature`).
273
- 5. Abre un Pull Request.
274
-
275
- ## Licencia
276
-
277
- MIT
26
+ Visite la [Documentación oficial](https://michirouter.vercel.app/) para más detalles.
package/dist/index.d.ts CHANGED
@@ -1 +1,73 @@
1
- export * from './michi-router';
1
+ import React$1, { ReactNode } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ interface LayoutProps {
5
+ children: ReactNode;
6
+ }
7
+ interface Route {
8
+ path: string;
9
+ component: ReactNode;
10
+ }
11
+ interface RouterContextType {
12
+ path: string;
13
+ navigate: (to: string) => void;
14
+ }
15
+ interface RouterProviderProps {
16
+ routes: Array<{
17
+ path: string;
18
+ component: React.ReactNode;
19
+ }>;
20
+ children?: React.ReactNode;
21
+ layout?: React.ComponentType<{
22
+ children: React.ReactNode;
23
+ }>;
24
+ }
25
+ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
26
+ to: string;
27
+ children: ReactNode;
28
+ className?: string;
29
+ }
30
+ interface ProtectedProps {
31
+ children: JSX.Element;
32
+ configObject: {
33
+ states: {
34
+ user: any;
35
+ isLoading: boolean;
36
+ };
37
+ redirectionPath: string;
38
+ loadingComponent?: ReactNode;
39
+ defaultMessage?: string | undefined;
40
+ };
41
+ }
42
+
43
+ /**
44
+ * Proveedor principal del enrutador.
45
+ * @param routes - Array de rutas disponibles
46
+ * @param children - Contenido a mostrar cuando no hay coincidencia de ruta (404)
47
+ * @param layout - Componente de layout opcional para envolver todas las rutas
48
+ */
49
+ declare function RouterProvider({ routes, children, layout: Layout }: RouterProviderProps): react_jsx_runtime.JSX.Element;
50
+ /**
51
+ * Componente Link para navegación declarativa.
52
+ * Previene la recarga de página y utiliza el historial del navegador.
53
+ */
54
+ declare const Link: ({ to, children, className, ...rest }: LinkProps & React$1.AnchorHTMLAttributes<HTMLAnchorElement>) => react_jsx_runtime.JSX.Element;
55
+ /**
56
+ * Hook para acceder a la función de navegación programática.
57
+ * @returns Función navigate que permite cambiar de ruta
58
+ */
59
+ declare const useNavigate: () => (to: string) => void;
60
+
61
+ /**
62
+ * Un componente que restringe el acceso a sus hijos según el estado de autenticación del usuario.
63
+ *
64
+ * Si el usuario no está autenticado, redirige a la página de landing ("/").
65
+ * De lo contrario, renderiza sus hijos.
66
+ *
67
+ * @param {Object} props - Props del componente
68
+ * @param {React.ReactNode} props.children - Los nodos React a renderizar si el usuario está autenticado.
69
+ * @returns {JSX.Element|null} Los hijos si está autenticado, de lo contrario loader.
70
+ */
71
+ declare function Protected({ children, configObject }: ProtectedProps): JSX.Element | null;
72
+
73
+ export { type LayoutProps, Link, type LinkProps, Protected, type ProtectedProps, type Route, type RouterContextType, RouterProvider, type RouterProviderProps, useNavigate };
package/dist/index.js CHANGED
@@ -1,17 +1,7 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./michi-router"), exports);
1
+ "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:
2
+ {
3
+ states: { user: any; isLoading: boolean };
4
+ redirectionPath: string;
5
+ loadingComponent?: React.ReactNode;
6
+ defaultMessage?: string;
7
+ }`),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});
package/dist/index.mjs ADDED
@@ -0,0 +1,7 @@
1
+ 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:
2
+ {
3
+ states: { user: any; isLoading: boolean };
4
+ redirectionPath: string;
5
+ loadingComponent?: React.ReactNode;
6
+ defaultMessage?: string;
7
+ }`),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};
package/package.json CHANGED
@@ -1,21 +1,28 @@
1
1
  {
2
2
  "name": "@arielgonzaguer/michi-router",
3
3
  "private": false,
4
- "version": "1.2.2",
4
+ "version": "2.0.0",
5
5
  "description": "El router minimalista y simple para React.\nEl objetivo principal de esta herramienta es proporcionar la funcionalidad básica de enrutamiento.",
6
6
  "main": "dist/index.js",
7
+ "module": "dist/index.mjs",
7
8
  "types": "dist/index.d.ts",
8
9
  "files": [
9
- "dist"
10
+ "dist/index.mjs",
11
+ "dist/index.js",
12
+ "dist/index.d.ts"
10
13
  ],
11
14
  "scripts": {
12
15
  "build": "tsc",
13
- "prepare": "npm run build",
16
+ "prepare": "npm run build:bundle",
14
17
  "clean": "rimraf dist",
15
18
  "prebuild": "npm run clean",
16
- "prepublishOnly": "npm run build"
19
+ "prepublishOnly": "npm run build:bundle",
20
+ "test": "vitest",
21
+ "test:watch": "vitest --watch",
22
+ "build:bundle": "tsup src/index.ts --format esm,cjs --minify --dts --out-dir dist --external react --external react-dom"
17
23
  },
18
24
  "keywords": [
25
+ "enrutado",
19
26
  "react",
20
27
  "router",
21
28
  "typescript",
@@ -24,17 +31,24 @@
24
31
  "gatos"
25
32
  ],
26
33
  "peerDependencies": {
27
- "react": ">=16.8.0",
28
- "react-dom": ">=16.8.0"
34
+ "react": ">=17.0.0",
35
+ "react-dom": ">=17.0.0"
29
36
  },
30
37
  "devDependencies": {
31
- "@types/react": "^18.3.18",
32
- "@types/react-dom": "^18.3.5",
33
- "react": "^18.3.1",
34
- "react-dom": "^18.3.1",
35
- "rimraf": "^6.0.1",
36
- "typescript": "^4.9.5"
38
+ "@swc/core": "1.13.5",
39
+ "@testing-library/jest-dom": "6.0.0",
40
+ "@testing-library/react": "14.0.0",
41
+ "@types/jest": "29.5.3",
42
+ "@types/react": "18.3.18",
43
+ "@types/react-dom": "18.3.5",
44
+ "jsdom": "26.1.0",
45
+ "react": "18.3.1",
46
+ "react-dom": "18.3.1",
47
+ "rimraf": "6.0.1",
48
+ "tsup": "8.5.0",
49
+ "typescript": "4.9.5",
50
+ "vitest": "3.2.4"
37
51
  },
38
- "author": "Ariel González Agüero",
52
+ "author": "Ariel Gonzales Agüero",
39
53
  "license": "MIT"
40
54
  }
@@ -1,21 +0,0 @@
1
- import React from 'react';
2
- import type { RouterContextType, RouterProviderProps, LinkProps } from './types';
3
- declare const RouterContext: React.Context<RouterContextType>;
4
- /**
5
- * Proveedor principal del enrutador.
6
- * @param routes - Array de rutas disponibles
7
- * @param children - Contenido a mostrar cuando no hay coincidencia de ruta (404)
8
- * @param layout - Componente de layout opcional para envolver todas las rutas
9
- */
10
- export declare function RouterProvider({ routes, children, layout: Layout }: RouterProviderProps): React.JSX.Element;
11
- /**
12
- * Componente Link para navegación declarativa.
13
- * Previene la recarga de página y utiliza el historial del navegador.
14
- */
15
- export declare const Link: ({ to, children, className, ...rest }: LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.JSX.Element;
16
- /**
17
- * Hook para acceder a la función de navegación programática.
18
- * @returns Función navigate que permite cambiar de ruta
19
- */
20
- export declare const useNavigate: () => (to: string) => void;
21
- export { RouterContext };
@@ -1,109 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || function (mod) {
30
- if (mod && mod.__esModule) return mod;
31
- var result = {};
32
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
- __setModuleDefault(result, mod);
34
- return result;
35
- };
36
- var __rest = (this && this.__rest) || function (s, e) {
37
- var t = {};
38
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
39
- t[p] = s[p];
40
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
41
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
42
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
43
- t[p[i]] = s[p[i]];
44
- }
45
- return t;
46
- };
47
- Object.defineProperty(exports, "__esModule", { value: true });
48
- exports.RouterContext = exports.useNavigate = exports.Link = exports.RouterProvider = void 0;
49
- var react_1 = __importStar(require("react"));
50
- // Creación del contexto con un valor inicial
51
- var RouterContext = (0, react_1.createContext)({
52
- path: window.location.pathname,
53
- navigate: function () {
54
- console.warn('RouterContext usado fuera de RouterProvider');
55
- }
56
- });
57
- exports.RouterContext = RouterContext;
58
- /**
59
- * Proveedor principal del enrutador.
60
- * @param routes - Array de rutas disponibles
61
- * @param children - Contenido a mostrar cuando no hay coincidencia de ruta (404)
62
- * @param layout - Componente de layout opcional para envolver todas las rutas
63
- */
64
- function RouterProvider(_a) {
65
- var routes = _a.routes, children = _a.children, Layout = _a.layout;
66
- var _b = (0, react_1.useState)(window.location.pathname), path = _b[0], setPath = _b[1];
67
- (0, react_1.useEffect)(function () {
68
- var handlePopState = function () { return setPath(window.location.pathname); };
69
- window.addEventListener('popstate', handlePopState);
70
- return function () { return window.removeEventListener('popstate', handlePopState); };
71
- }, []);
72
- var navigate = (0, react_1.useCallback)(function (to) {
73
- window.history.pushState({}, '', to);
74
- setPath(to);
75
- }, []);
76
- // Encontrar la ruta actual
77
- var currentRoute = routes.find(function (route) { return route.path === path; });
78
- var routeContent = currentRoute ? currentRoute.component : children;
79
- try {
80
- return (react_1.default.createElement(RouterContext.Provider, { value: { path: path, navigate: navigate } }, Layout ? (react_1.default.createElement(Layout, null, routeContent)) : (routeContent)));
81
- }
82
- catch (error) {
83
- console.error('Error en RouterProvider:', error);
84
- return react_1.default.createElement("div", null, "Error en el enrutador. Consulta la consola para m\u00E1s detalles.");
85
- }
86
- }
87
- exports.RouterProvider = RouterProvider;
88
- /**
89
- * Componente Link para navegación declarativa.
90
- * Previene la recarga de página y utiliza el historial del navegador.
91
- */
92
- var Link = function (_a) {
93
- var to = _a.to, children = _a.children, className = _a.className, rest = __rest(_a, ["to", "children", "className"]);
94
- var navigate = (0, react_1.useContext)(RouterContext).navigate;
95
- return (react_1.default.createElement("a", __assign({ href: to, className: className, onClick: function (e) {
96
- e.preventDefault();
97
- navigate(to);
98
- } }, rest), children));
99
- };
100
- exports.Link = Link;
101
- /**
102
- * Hook para acceder a la función de navegación programática.
103
- * @returns Función navigate que permite cambiar de ruta
104
- */
105
- var useNavigate = function () {
106
- var navigate = (0, react_1.useContext)(RouterContext).navigate;
107
- return navigate;
108
- };
109
- exports.useNavigate = useNavigate;
@@ -1,2 +0,0 @@
1
- export { RouterProvider, Link, useNavigate } from './Michi-router';
2
- export type { Route, RouterContextType, RouterProviderProps, LinkProps, LayoutProps } from './types';
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useNavigate = exports.Link = exports.RouterProvider = void 0;
4
- var Michi_router_1 = require("./Michi-router");
5
- Object.defineProperty(exports, "RouterProvider", { enumerable: true, get: function () { return Michi_router_1.RouterProvider; } });
6
- Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Michi_router_1.Link; } });
7
- Object.defineProperty(exports, "useNavigate", { enumerable: true, get: function () { return Michi_router_1.useNavigate; } });
@@ -1,27 +0,0 @@
1
- import { ReactNode } from "react";
2
- export interface LayoutProps {
3
- children: ReactNode;
4
- }
5
- export interface Route {
6
- path: string;
7
- component: ReactNode;
8
- }
9
- export interface RouterContextType {
10
- path: string;
11
- navigate: (to: string) => void;
12
- }
13
- export interface RouterProviderProps {
14
- routes: Array<{
15
- path: string;
16
- component: React.ReactNode;
17
- }>;
18
- children?: React.ReactNode;
19
- layout?: React.ComponentType<{
20
- children: React.ReactNode;
21
- }>;
22
- }
23
- export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
24
- to: string;
25
- children: ReactNode;
26
- className?: string;
27
- }
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });