router-kit 1.3.2 → 1.3.4

package/README.md

@@ -34,6 +34,8 @@ npm install router-kit
 
 ### Basic Setup
 
+**Programmatic Approach (Traditional):**
+
 ```tsx
 import React from "react";
 import { createRouter, RouterProvider, Link } from "router-kit";
@@ -56,6 +58,31 @@ function App() {
 export default App;
 ```
 
+**Declarative Approach (New in v1.3.1):**
+
+```tsx
+import React from "react";
+import { Router, Route, Link } from "router-kit";
+
+// 1. Define your components
+const Home = () => <h1>Home Page</h1>;
+const About = () => <h1>About Page</h1>;
+
+// 2. Use declarative JSX routing
+function App() {
+  return (
+    <Router>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+    </Router>
+  );
+}
+
+export default App;
+```
+
+> 🆕 **New in v1.3.1**: Declarative routing with `<Router>` and `<Route>` components! Choose the approach that fits your style.
+
 ### Navigation
 
 ```tsx
@@ -259,20 +286,21 @@ const routes = createRouter([
 
 ## Feature Matrix
 
-| Feature               | Status | Documentation                                    |
-| --------------------- | ------ | ------------------------------------------------ |
-| Static Routes         | ✅     | [Docs](./DOCUMENTATION.md#routes)                |
-| Dynamic Routes        | ✅     | [Docs](./DOCUMENTATION.md#useparams)             |
-| Nested Routes         | ✅     | [Docs](./DOCUMENTATION.md#nested-routes)         |
-| Multiple Path Aliases | ✅     | [Docs](./DOCUMENTATION.md#multiple-path-aliases) |
-| Query Parameters      | ✅     | [Docs](./DOCUMENTATION.md#usequery)              |
-| Navigation State      | ✅     | [Docs](./DOCUMENTATION.md#navigation-state)      |
-| Custom 404 Pages      | ✅     | [Docs](./DOCUMENTATION.md#custom-404-pages)      |
-| TypeScript Support    | ✅     | [Docs](./DOCUMENTATION.md#typescript-support)    |
-| Error Handling        | ✅     | [Docs](./DOCUMENTATION.md#error-handling)        |
-| Dynamic Components    | ✅     | [Docs](./API_REFERENCE.md#usedynamiccomponents)  |
-| Hash Routing          | ⏳     | Planned                                          |
-| Regex Routes          | ⏳     | Planned                                          |
+| Feature                 | Status     | Documentation                                    |
+| ----------------------- | ---------- | ------------------------------------------------ |
+| Static Routes           | ✅         | [Docs](./DOCUMENTATION.md#routes)                |
+| Dynamic Routes          | ✅         | [Docs](./DOCUMENTATION.md#useparams)             |
+| Nested Routes           | ✅         | [Docs](./DOCUMENTATION.md#nested-routes)         |
+| Multiple Path Aliases   | ✅         | [Docs](./DOCUMENTATION.md#multiple-path-aliases) |
+| Query Parameters        | ✅         | [Docs](./DOCUMENTATION.md#usequery)              |
+| Navigation State        | ✅         | [Docs](./DOCUMENTATION.md#navigation-state)      |
+| Custom 404 Pages        | ✅         | [Docs](./DOCUMENTATION.md#custom-404-pages)      |
+| TypeScript Support      | ✅         | [Docs](./DOCUMENTATION.md#typescript-support)    |
+| Error Handling          | ✅         | [Docs](./DOCUMENTATION.md#error-handling)        |
+| Dynamic Components      | ✅         | [Docs](./API_REFERENCE.md#usedynamiccomponents)  |
+| **Declarative Routing** | ✅ **NEW** | [Docs](./DECLARATIVE_ROUTING.md)                 |
+| Hash Routing            | ⏳         | Planned                                          |
+| Regex Routes            | ⏳         | Planned                                          |
 
 ---
 
@@ -282,7 +310,7 @@ const routes = createRouter([
 
 ```tsx
 // Core
-import { createRouter, RouterProvider } from "router-kit";
+import { createRouter, RouterProvider, Router, Route } from "router-kit";
 
 // Components
 import { Link, NavLink } from "router-kit";
@@ -311,6 +339,8 @@ import { RouterErrorCode, RouterErrors, createRouterError } from "router-kit";
 
 ### Route Patterns
 
+**Programmatic Approach:**
+
 ```tsx
 // Static route
 { path: "about", component: <About /> }
@@ -337,6 +367,30 @@ import { RouterErrorCode, RouterErrors, createRouterError } from "router-kit";
 { path: "/404", component: <NotFound /> }
 ```
 
+**Declarative Approach:**
+
+```tsx
+// Static route
+<Route path="/about" element={<About />} />
+
+// Dynamic parameter
+<Route path="/users/:id" element={<UserProfile />} />
+
+// Multiple parameters
+<Route path="/posts/:category/:slug" element={<BlogPost />} />
+
+// Multiple paths
+<Route path={["/about", "/about-us"]} element={<About />} />
+
+// Nested routes
+<Route path="/dashboard" element={<Dashboard />}>
+  <Route path="settings" element={<Settings />} />
+</Route>
+
+// 404 page
+<Route path="/404" element={<NotFound />} />
+```
+
 ### Hook Usage
 
 ```tsx

package/dist/components/Router.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+/**
+ * Router component for declarative routing
+ * Provides an alternative JSX-based approach to defining routes
+ *
+ * @example
+ * ```tsx
+ * <Router>
+ *   <Route path="/" element={<Home />} />
+ *   <Route path="/about" element={<About />} />
+ *   <Route path="/users/:id" element={<UserProfile />} />
+ *   <Route path="/dashboard" element={<Dashboard />}>
+ *     <Route path="settings" element={<Settings />} />
+ *     <Route path="profile" element={<Profile />} />
+ *   </Route>
+ *   <Route path="/404" element={<NotFound />} />
+ * </Router>
+ * ```
+ */
+declare const Router: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Router;

package/dist/components/Router.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import RouterProvider from "../context/RouterProvider";
+import createRouter from "../core/createRouter";
+import { Route } from "./route";
+/**
+ * Extracts route configurations from JSX Route elements
+ * @param children React children containing Route elements
+ * @returns Array of route configurations
+ */
+function extractRoutesFromJSX(children) {
+    const routes = [];
+    Children.forEach(children, (child) => {
+        var _a;
+        if (isValidElement(child)) {
+            // Check if this is a Route component
+            const isRouteComponent = child.type === Route ||
+                ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Route" ||
+                (typeof child.type === "function" && child.type.name === "Route");
+            if (isRouteComponent) {
+                const props = child.props;
+                const route = {
+                    path: props.path,
+                    component: props.element,
+                };
+                // Handle nested routes
+                if (props.children) {
+                    const childRoutes = extractRoutesFromJSX(props.children);
+                    if (childRoutes.length > 0) {
+                        route.children = childRoutes;
+                    }
+                }
+                routes.push(route);
+            }
+        }
+    });
+    return routes;
+}
+/**
+ * Router component for declarative routing
+ * Provides an alternative JSX-based approach to defining routes
+ *
+ * @example
+ * ```tsx
+ * <Router>
+ *   <Route path="/" element={<Home />} />
+ *   <Route path="/about" element={<About />} />
+ *   <Route path="/users/:id" element={<UserProfile />} />
+ *   <Route path="/dashboard" element={<Dashboard />}>
+ *     <Route path="settings" element={<Settings />} />
+ *     <Route path="profile" element={<Profile />} />
+ *   </Route>
+ *   <Route path="/404" element={<NotFound />} />
+ * </Router>
+ * ```
+ */
+const Router = ({ children }) => {
+    const routes = extractRoutesFromJSX(children);
+    return _jsx(RouterProvider, { routes: createRouter(routes) });
+};
+export default Router;

package/dist/components/route.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from "react";
+/**
+ * Route component props for declarative routing
+ */
+export interface RouteProps {
+    path: string | string[];
+    element: ReactElement;
+    children?: ReactElement<RouteProps> | ReactElement<RouteProps>[];
+}
+/**
+ * Route component - used for declarative route definitions
+ * This is a placeholder component that will be processed by the Router
+ *
+ * @example
+ * ```tsx
+ * <Route path="/users/:id" element={<UserProfile />} />
+ * <Route path={["/about", "/about-us"]} element={<About />} />
+ * <Route path="/dashboard" element={<Dashboard />}>
+ *   <Route path="settings" element={<Settings />} />
+ * </Route>
+ * ```
+ */
+export declare function Route(props: RouteProps): null;
+export declare namespace Route {
+    var displayName: string;
+}
+export default Route;

package/dist/components/route.js

@@ -0,0 +1,21 @@
+/**
+ * Route component - used for declarative route definitions
+ * This is a placeholder component that will be processed by the Router
+ *
+ * @example
+ * ```tsx
+ * <Route path="/users/:id" element={<UserProfile />} />
+ * <Route path={["/about", "/about-us"]} element={<About />} />
+ * <Route path="/dashboard" element={<Dashboard />}>
+ *   <Route path="settings" element={<Settings />} />
+ * </Route>
+ * ```
+ */
+export function Route(props) {
+    // This component doesn't render anything directly
+    // It's used as a declarative way to define routes that will be processed by Router
+    return null;
+}
+// Add displayName for better debugging and component recognition
+Route.displayName = "Route";
+export default Route;

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 export { default as Link } from "./components/Link";
 export { default as NavLink } from "./components/NavLink";
+export { default as Route } from "./components/route";
+export { default as Router } from "./components/Router";
 export { default as RouterProvider } from "./context/RouterProvider";
 export { default as createRouter } from "./core/createRouter";
 export { useDynamicComponents } from "./hooks/useDynamicComponents";
 export { useLocation } from "./hooks/useLocation";
 export { useParams } from "./hooks/useParams";
 export { useQuery } from "./hooks/useQuery";
-export type { DynamicComponents, GetComponent, Location, NavigateOptions, Route, RouterContextType, RouterError, RouterKitError, Routes, } from "./types/index";
+export { useRouter } from "./hooks/useRouter";
+export type { RouteProps } from "./components/route";
+export type { DynamicComponents, GetComponent, Location, NavigateOptions, RouterContextType, RouterError, RouterKitError, Routes, Route as RouteType, } from "./types/index";
 export { createRouterError, RouterErrorCode, RouterErrors, } from "./utils/error/errors";

package/dist/index.js

@@ -1,9 +1,12 @@
 export { default as Link } from "./components/Link";
 export { default as NavLink } from "./components/NavLink";
+export { default as Route } from "./components/route";
+export { default as Router } from "./components/Router";
 export { default as RouterProvider } from "./context/RouterProvider";
 export { default as createRouter } from "./core/createRouter";
 export { useDynamicComponents } from "./hooks/useDynamicComponents";
 export { useLocation } from "./hooks/useLocation";
 export { useParams } from "./hooks/useParams";
 export { useQuery } from "./hooks/useQuery";
+export { useRouter } from "./hooks/useRouter";
 export { createRouterError, RouterErrorCode, RouterErrors, } from "./utils/error/errors";

package/dist/utils/security/security.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -5,7 +5,7 @@
     "email": "mohammed.bencheikh.dev@gmail.com",
     "url": "https://mohammedbencheikh.com/"
   },
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "A small React routing provider library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",