xladmin-next 0.1.9

package/README.md

@@ -0,0 +1,48 @@
+<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-next
+
+`xladmin-next` provides the Next.js router adapter for `xladmin`.
+
+## Install
+
+```bash
+npm install xladmin xladmin-next
+```
+
+## Usage
+
+```tsx
+'use client';
+
+import {Shell, createFetchXLAdminClient} from 'xladmin';
+import {useNextXLAdminRouter} from 'xladmin-next';
+
+export function AdminShell({models, blocks}) {
+  const client = createFetchXLAdminClient({baseUrl: '/api/admin'});
+  const router = useNextXLAdminRouter();
+
+  return (
+    <Shell client={client} models={models} blocks={blocks} basePath="/admin" locale="en" router={router}>
+      {/* your route page */}
+    </Shell>
+  );
+}
+```
+
+## Exports
+
+- `useNextXLAdminRouter()`
+- `createNextXLAdminRouter(...)`
+
+## 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 NextXLAdminRouterAdapter = {
+    pathname: string;
+    search: string;
+    push: (href: string) => void;
+    replace: (href: string) => void;
+    back: () => void;
+};
+declare function createNextXLAdminRouter(adapter: NextXLAdminRouterAdapter): XLAdminRouter;
+declare function useNextXLAdminRouter(): XLAdminRouter;
+
+export { type NextXLAdminRouterAdapter, createNextXLAdminRouter, useNextXLAdminRouter };

package/dist/index.js

@@ -0,0 +1,82 @@
+"use client";
+
+// src/index.tsx
+import { useEffect, useRef } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation.js";
+function createNextXLAdminRouter(adapter) {
+  return {
+    getLocation: () => ({
+      pathname: adapter.pathname,
+      search: adapter.search
+    }),
+    subscribe: () => () => {
+    },
+    push: (href) => {
+      adapter.push(href);
+    },
+    replace: (href) => {
+      adapter.replace(href);
+    },
+    back: () => {
+      adapter.back();
+    }
+  };
+}
+function useNextXLAdminRouter() {
+  const nextRouter = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const locationRef = useRef({
+    pathname,
+    search: searchParams.toString() ? `?${searchParams.toString()}` : ""
+  });
+  const previousLocationRef = useRef(locationRef.current);
+  const navigationRef = useRef(nextRouter);
+  const routerRef = useRef(null);
+  locationRef.current = {
+    pathname,
+    search: searchParams.toString() ? `?${searchParams.toString()}` : ""
+  };
+  navigationRef.current = nextRouter;
+  if (routerRef.current === null) {
+    routerRef.current = createNextXLAdminRouter({
+      pathname: locationRef.current.pathname,
+      search: locationRef.current.search,
+      push: (href) => {
+        navigationRef.current.push(href);
+      },
+      replace: (href) => {
+        navigationRef.current.replace(href);
+      },
+      back: () => {
+        navigationRef.current.back();
+      }
+    });
+    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();
+    }
+  }, [pathname, searchParams]);
+  return routerRef.current;
+}
+export {
+  createNextXLAdminRouter,
+  useNextXLAdminRouter
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "xladmin-next",
+  "version": "0.1.9",
+  "description": "Next.js 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-next"
+  },
+  "homepage": "https://github.com/Artasov/xladmin/tree/main/xladmin-frontend/packages/xladmin-next",
+  "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": {
+    "next": ">=15.0.0 <17.0.0",
+    "react": ">=19.0.0 <20.0.0",
+    "react-dom": ">=19.0.0 <20.0.0",
+    "xladmin": "^0.1.9"
+  }
+}