@arielgonzaguer/michi-router 1.0.0

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright 2025 ArielGonzAgüer
+Por la presente se concede permiso, libre de cargos, a cualquier persona que obtenga una copia de este software y de los archivos de documentación asociados (el "Software"), a utilizar el Software sin restricción, incluyendo sin limitación los derechos a usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar, y/o vender copias del Software, y a permitir a las personas a las que se les proporcione el Software a hacer lo mismo, sujeto a las siguientes condiciones:
+
+El aviso de copyright anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
+
+EL SOFTWARE SE PROPORCIONA "COMO ESTÁ", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO PERO NO LIMITADO A GARANTÍAS DE COMERCIALIZACIÓN, IDONEIDAD PARA UN PROPÓSITO PARTICULAR E INCUMPLIMIENTO. EN NINGÚN CASO LOS AUTORES O PROPIETARIOS DE LOS DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGUNA RECLAMACIÓN, DAÑOS U OTRAS RESPONSABILIDADES, YA SEA EN UNA ACCIÓN DE CONTRATO, AGRAVIO O CUALQUIER OTRO MOTIVO, DERIVADAS DE, FUERA DE O EN CONEXIÓN CON EL SOFTWARE O SU USO U OTRO TIPO DE ACCIONES EN EL SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# Michi Router
+
+El router minimalista y simple para React.
+
+## Installation
+
+```bash
+npm install @arielgonzaguer/michi-router
+```
+
+## Usage
+
+```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
+function NavigationComponent() {
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/about">About</Link>
+    </nav>
+  );
+}
+
+// Usando useNavigate
+function NavigateButton() {
+  const navigate = useNavigate();
+  return <button onClick={() => navigate("/about")}>Ir a About</button>;
+}
+```
+
+## 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
+
+### `<Link>`
+
+Componente para navegación declarativa.
+
+**Props:**
+
+- `to`: Ruta destino
+- `children`: Contenido del enlace
+- `className`: Clases CSS opcionales
+
+### `useNavigate()`
+
+Hook para navegación programática.
+
+**Retorna:**
+
+- Función navigate que acepta la ruta como parámetro
+
+## Licencia
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './michi-router';

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./michi-router"), exports);

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

@@ -0,0 +1,7 @@
+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;
+export declare const useNavigate: () => (to: string) => void;
+export { RouterContext };

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

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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");
+// Creación del contexto con un valor inicial
+var RouterContext = (0, react_2.createContext)({
+    path: '',
+    navigate: function () { }
+});
+exports.RouterContext = RouterContext;
+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 handlePopState = function () { return setPath(window.location.pathname); };
+        window.addEventListener('popstate', handlePopState);
+        return function () { return window.removeEventListener('popstate', handlePopState); };
+    }, []);
+    var navigate = function (to) {
+        window.history.pushState({}, '', to);
+        setPath(to);
+    };
+    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));
+}
+exports.RouterProvider = RouterProvider;
+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) {
+            e.preventDefault();
+            navigate(to);
+        } }, children));
+};
+exports.Link = Link;
+var useNavigate = function () {
+    var navigate = (0, react_2.useContext)(RouterContext).navigate;
+    return navigate;
+};
+exports.useNavigate = useNavigate;

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

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

package/dist/michi-router/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigate = exports.Link = exports.RouterProvider = void 0;
+var Michi_router_1 = require("./Michi-router");
+Object.defineProperty(exports, "RouterProvider", { enumerable: true, get: function () { return Michi_router_1.RouterProvider; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Michi_router_1.Link; } });
+Object.defineProperty(exports, "useNavigate", { enumerable: true, get: function () { return Michi_router_1.useNavigate; } });

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface Route {
+    path: string;
+    component: ReactNode;
+}
+export interface RouterContextType {
+    path: string;
+    navigate: (to: string) => void;
+}
+export interface RouterProviderProps {
+    routes: Route[];
+    children?: ReactNode;
+}
+export interface LinkProps {
+    to: string;
+    children: ReactNode;
+    className?: string;
+}

package/dist/michi-router/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@arielgonzaguer/michi-router",
+  "private": false,
+  "version": "1.0.0",
+  "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"
+}