xladmin-react-router 0.1.9

package/README.md

@@ -0,0 +1,46 @@
+<div align="center">
+  <a href="./README.md">
+    <img src="https://img.shields.io/badge/English-blue?style=for-the-badge" alt="English">
+  </a>
+  <a href="./docs/README.ru.md">
+    <img src="https://img.shields.io/badge/%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9-red?style=for-the-badge" alt="Russian">
+  </a>
+</div>
+
+# xladmin-react-router
+
+`xladmin-react-router` provides the React Router adapter for `xladmin`.
+
+## Install
+
+```bash
+npm install xladmin xladmin-react-router react-router-dom
+```
+
+## Usage
+
+```tsx
+import {Shell, createFetchXLAdminClient} from 'xladmin';
+import {useReactRouterXLAdminRouter} from 'xladmin-react-router';
+
+export function AdminShell({models, blocks}) {
+  const client = createFetchXLAdminClient({baseUrl: '/api/admin'});
+  const router = useReactRouterXLAdminRouter();
+
+  return (
+    <Shell client={client} models={models} blocks={blocks} basePath="/admin" locale="en" router={router}>
+      {/* your route page */}
+    </Shell>
+  );
+}
+```
+
+## Exports
+
+- `useReactRouterXLAdminRouter()`
+- `createReactRouterXLAdminRouter(...)`
+
+## Docs
+
+- [Russian README](./docs/README.ru.md)
+- [xladmin package](../xladmin-core/README.md)

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { XLAdminRouter } from 'xladmin';
+
+type ReactRouterXLAdminAdapter = {
+    pathname: string;
+    search: string;
+    push: (href: string) => void;
+    replace: (href: string) => void;
+    back: () => void;
+};
+declare function createReactRouterXLAdminRouter(adapter: ReactRouterXLAdminAdapter): XLAdminRouter;
+declare function useReactRouterXLAdminRouter(): XLAdminRouter;
+
+export { type ReactRouterXLAdminAdapter, createReactRouterXLAdminRouter, useReactRouterXLAdminRouter };

package/dist/index.js

@@ -0,0 +1,81 @@
+"use client";
+
+// src/index.tsx
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+function createReactRouterXLAdminRouter(adapter) {
+  return {
+    getLocation: () => ({
+      pathname: adapter.pathname,
+      search: adapter.search
+    }),
+    subscribe: () => () => {
+    },
+    push: (href) => {
+      adapter.push(href);
+    },
+    replace: (href) => {
+      adapter.replace(href);
+    },
+    back: () => {
+      adapter.back();
+    }
+  };
+}
+function useReactRouterXLAdminRouter() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const locationRef = useRef({
+    pathname: location.pathname,
+    search: location.search
+  });
+  const previousLocationRef = useRef(locationRef.current);
+  const navigateRef = useRef(navigate);
+  const routerRef = useRef(null);
+  locationRef.current = {
+    pathname: location.pathname,
+    search: location.search
+  };
+  navigateRef.current = navigate;
+  if (routerRef.current === null) {
+    routerRef.current = createReactRouterXLAdminRouter({
+      pathname: locationRef.current.pathname,
+      search: locationRef.current.search,
+      push: (href) => {
+        navigateRef.current(href);
+      },
+      replace: (href) => {
+        navigateRef.current(href, { replace: true });
+      },
+      back: () => {
+        navigateRef.current(-1);
+      }
+    });
+    routerRef.current.getLocation = () => ({
+      pathname: locationRef.current.pathname,
+      search: locationRef.current.search
+    });
+    routerRef.current.subscribe = (listener) => {
+      listenersRef.current.add(listener);
+      return () => {
+        listenersRef.current.delete(listener);
+      };
+    };
+  }
+  useEffect(() => {
+    const previousLocation = previousLocationRef.current;
+    if (previousLocation.pathname === locationRef.current.pathname && previousLocation.search === locationRef.current.search) {
+      return;
+    }
+    previousLocationRef.current = locationRef.current;
+    for (const listener of listenersRef.current) {
+      listener();
+    }
+  }, [location.pathname, location.search]);
+  return routerRef.current;
+}
+export {
+  createReactRouterXLAdminRouter,
+  useReactRouterXLAdminRouter
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "xladmin-react-router",
+  "version": "0.1.9",
+  "description": "React Router adapter for xladmin.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Artasov/xladmin.git",
+    "directory": "xladmin-frontend/packages/xladmin-react-router"
+  },
+  "homepage": "https://github.com/Artasov/xladmin/tree/main/xladmin-frontend/packages/xladmin-react-router",
+  "bugs": {
+    "url": "https://github.com/Artasov/xladmin/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/clean.mjs && tsup src/index.tsx --format esm --dts",
+    "check": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --environment node --pool threads"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0 <20.0.0",
+    "react-dom": ">=19.0.0 <20.0.0",
+    "react-router-dom": ">=6.4.0 <8.0.0",
+    "xladmin": "^0.1.9"
+  }
+}