@ablogcms/react-router 3.2.28-beta.0

package/README.md

@@ -0,0 +1,14 @@
+# @ablogcms/react-router
+
+CMS 管理画面の list-view 系画面（エントリー一覧・モジュール一覧など）専用の `react-router`
+ルーター生成ヘルパーを提供するパッケージ。
+
+## 使い方
+
+```ts
+import createLoader from '@ablogcms/react-router/list-view/create-loader';
+import createRouter from '@ablogcms/react-router/list-view/create-router';
+```
+
+一覧画面用のルーターとローダーを組み立てる。CMS 管理画面の list-view ページ専用のため、
+他の用途での利用は想定していない。

package/dist/chunk-LL3PVY7W.mjs

@@ -0,0 +1,36 @@
+// src/list-view/createRouter.tsx
+import { ScrollRestoration, createBrowserRouter, useParams, useRouteError } from "react-router";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ErrorElement({ element }) {
+  const error = useRouteError();
+  console.error(error);
+  return /* @__PURE__ */ jsx(Fragment, { children: element });
+}
+function RouteElement({
+  element,
+  contextProvider: ContextProvider
+}) {
+  const params = useParams();
+  const context = useMemo(() => ACMS.Library.parseAcmsPath(decodeURI(params["*"])), [params]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ContextProvider ? /* @__PURE__ */ jsx(ContextProvider, { context, children: element }) : element,
+    /* @__PURE__ */ jsx(ScrollRestoration, {})
+  ] });
+}
+function createRouter({ element, errorElement, contextProvider, ...rest }) {
+  const router = createBrowserRouter([
+    {
+      path: "*",
+      element: /* @__PURE__ */ jsx(RouteElement, { element, contextProvider }),
+      errorElement: /* @__PURE__ */ jsx(ErrorElement, { element: errorElement }),
+      ...rest
+    }
+  ]);
+  return router;
+}
+
+export {
+  createRouter
+};
+//# sourceMappingURL=chunk-LL3PVY7W.mjs.map

package/dist/chunk-LL3PVY7W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-view/createRouter.tsx"],"sourcesContent":["import { type RouteObject, ScrollRestoration, createBrowserRouter, useParams, useRouteError } from 'react-router';\nimport { type ComponentType, type ReactNode, useMemo } from 'react';\nimport type { AcmsContext } from '@ablogcms/url/types';\n\n/**\n * URL から解決した ACMS コンテキストをルート要素へ供給するコンポーネント。\n *\n * CMS コア側の `AcmsContextProvider` を注入するための口。パッケージから\n * コア（`ablogcms/js/src/stores/acms`）を直接参照すると alias 依存になり npm 公開できないため、\n * 依存の向きを呼び出し側からの注入に反転させている。\n */\nexport type AcmsRouteContextProvider = ComponentType<{ context: AcmsContext; children: ReactNode }>;\n\ntype CreateRouterOptions = RouteObject & {\n  contextProvider?: AcmsRouteContextProvider;\n};\n\n/**\n * エラーコンポーネントを作成する\n */\nfunction ErrorElement({ element }: { element: ReactNode }): ReactNode {\n  const error = useRouteError();\n  console.error(error);\n  return <>{element}</>;\n}\n\n/**\n * ルートコンポーネントを作成する\n */\nfunction RouteElement({\n  element,\n  contextProvider: ContextProvider,\n}: {\n  element: ReactNode;\n  contextProvider?: AcmsRouteContextProvider;\n}): RouteObject['element'] {\n  const params = useParams();\n  // 直接 parseAcmsPath を import せずグローバル経由で呼ぶ。ACMS.Library 側は実行時の\n  // 設定を織り込んだ状態で公開されており、素の関数呼び出しと挙動が一致する保証がないため\n  const context = useMemo(() => ACMS.Library.parseAcmsPath(decodeURI(params['*'] as string)), [params]);\n\n  return (\n    <>\n      {ContextProvider ? <ContextProvider context={context}>{element}</ContextProvider> : element}\n      <ScrollRestoration />\n    </>\n  );\n}\n\n/**\n * 管理画面のルートコンポーネントを作成する\n *\n * @warning\n * このメソッドはReactコンポーネントの中で利用すると、コンポーネントが表示されない不具合があります。\n * コンポーネントの外で呼び出すようにしてください。\n */\nexport default function createRouter({ element, errorElement, contextProvider, ...rest }: CreateRouterOptions) {\n  // ルーターの作成\n  const router = createBrowserRouter([\n    {\n      path: '*',\n      element: <RouteElement element={element} contextProvider={contextProvider} />,\n      errorElement: <ErrorElement element={errorElement} />,\n      ...rest,\n    },\n  ]);\n\n  return router;\n}\n"],"mappings":";AAAA,SAA2B,mBAAmB,qBAAqB,WAAW,qBAAqB;AACnG,SAA6C,eAAe;AAsBnD,wBAmBL,YAnBK;AAHT,SAAS,aAAa,EAAE,QAAQ,GAAsC;AACpE,QAAM,QAAQ,cAAc;AAC5B,UAAQ,MAAM,KAAK;AACnB,SAAO,gCAAG,mBAAQ;AACpB;AAKA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,iBAAiB;AACnB,GAG2B;AACzB,QAAM,SAAS,UAAU;AAGzB,QAAM,UAAU,QAAQ,MAAM,KAAK,QAAQ,cAAc,UAAU,OAAO,GAAG,CAAW,CAAC,GAAG,CAAC,MAAM,CAAC;AAEpG,SACE,iCACG;AAAA,sBAAkB,oBAAC,mBAAgB,SAAmB,mBAAQ,IAAqB;AAAA,IACpF,oBAAC,qBAAkB;AAAA,KACrB;AAEJ;AASe,SAAR,aAA8B,EAAE,SAAS,cAAc,iBAAiB,GAAG,KAAK,GAAwB;AAE7G,QAAM,SAAS,oBAAoB;AAAA,IACjC;AAAA,MACE,MAAM;AAAA,MACN,SAAS,oBAAC,gBAAa,SAAkB,iBAAkC;AAAA,MAC3E,cAAc,oBAAC,gBAAa,SAAS,cAAc;AAAA,MACnD,GAAG;AAAA,IACL;AAAA,EACF,CAAC;AAED,SAAO;AACT;","names":[]}

package/dist/chunk-T4KEVRNL.mjs

@@ -0,0 +1,50 @@
+// src/list-view/createLoader.ts
+import { redirect, matchPath } from "react-router";
+import { parseUrlSearchParams } from "@ablogcms/utils";
+function createStorageKey(id) {
+  return `acms-${id}-root-${ACMS.Config.root}-suid-${ACMS.Config.suid}-bid-${ACMS.Config.bid}`;
+}
+function createLoader({
+  id,
+  admin,
+  onLoad,
+  ignoredParams = []
+}) {
+  const storageKey = createStorageKey(id);
+  let isFirstMount = true;
+  const loader = ({ params, request }) => {
+    const path = params["*"];
+    const url = new URL(request.url);
+    const context = ACMS.Library.parseAcmsPath(decodeURI(path));
+    const match = matchPath(`${ACMS.Config.root}bid/:bid/admin/${admin}`, url.pathname);
+    if (isFirstMount && match && url.searchParams.size === 0) {
+      const data = localStorage.getItem(storageKey);
+      if (data) {
+        const savedContext = JSON.parse(data);
+        return redirect(ACMS.Library.acmsLink({ ...savedContext, bid: match.params.bid, admin }));
+      }
+    }
+    if (match && url.searchParams.size === 0) {
+      localStorage.removeItem(storageKey);
+    } else {
+      ignoredParams.forEach((param) => {
+        url.searchParams.delete(param);
+      });
+      const data = {
+        ...context,
+        field: context.field?.toString(),
+        searchParams: parseUrlSearchParams(url.searchParams)
+      };
+      localStorage.setItem(storageKey, JSON.stringify(data));
+    }
+    onLoad({ context, url });
+    isFirstMount = false;
+    return null;
+  };
+  return loader;
+}
+
+export {
+  createLoader
+};
+//# sourceMappingURL=chunk-T4KEVRNL.mjs.map

package/dist/chunk-T4KEVRNL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-view/createLoader.ts"],"sourcesContent":["import { redirect, matchPath, type RouteObject } from 'react-router';\nimport { parseUrlSearchParams } from '@ablogcms/utils';\nimport type { AcmsContext } from '@ablogcms/url/types';\n\nexport interface CreateLoaderOptions {\n  id: string;\n  admin: string;\n  onLoad: ({ context, url }: { context: AcmsContext; url: URL }) => void | Promise<void>;\n  ignoredParams?: string[];\n}\n\n/**\n * ストレージキー生成関数\n */\nfunction createStorageKey(id: string): string {\n  return `acms-${id}-root-${ACMS.Config.root}-suid-${ACMS.Config.suid}-bid-${ACMS.Config.bid}`;\n}\n\n/**\n * ローダー関数を作成する\n */\nexport default function createLoader({\n  id,\n  admin,\n  onLoad,\n  ignoredParams = [],\n}: CreateLoaderOptions): RouteObject['loader'] {\n  const storageKey = createStorageKey(id);\n  let isFirstMount = true;\n\n  const loader: RouteObject['loader'] = ({ params, request }) => {\n    const path = params['*'] as string;\n    const url = new URL(request.url);\n    const context = ACMS.Library.parseAcmsPath(decodeURI(path));\n    const match = matchPath(`${ACMS.Config.root}bid/:bid/admin/${admin}`, url.pathname);\n\n    if (isFirstMount && match && url.searchParams.size === 0) {\n      // 初回アクセスかつ、検索条件がない場合はローカルストレージから取得\n      const data = localStorage.getItem(storageKey);\n      if (data) {\n        // ローカルストレージにデータがある場合はリダイレクト\n        const savedContext: AcmsContext & { searchParams: Record<string, string | string[]> } = JSON.parse(data);\n        return redirect(ACMS.Library.acmsLink({ ...savedContext, bid: match.params.bid, admin }));\n      }\n    }\n\n    if (match && url.searchParams.size === 0) {\n      // 検索条件がない場合\n      localStorage.removeItem(storageKey);\n    } else {\n      // 検索条件がある場合\n      ignoredParams.forEach((param) => {\n        url.searchParams.delete(param);\n      });\n      const data = {\n        ...context,\n        field: context.field?.toString(),\n        searchParams: parseUrlSearchParams(url.searchParams),\n      };\n      localStorage.setItem(storageKey, JSON.stringify(data));\n    }\n\n    // プリロード処理の実行\n    onLoad({ context, url });\n    isFirstMount = false;\n\n    return null;\n  };\n\n  return loader;\n}\n"],"mappings":";AAAA,SAAS,UAAU,iBAAmC;AACtD,SAAS,4BAA4B;AAarC,SAAS,iBAAiB,IAAoB;AAC5C,SAAO,QAAQ,EAAE,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,IAAI,QAAQ,KAAK,OAAO,GAAG;AAC5F;AAKe,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB,CAAC;AACnB,GAA+C;AAC7C,QAAM,aAAa,iBAAiB,EAAE;AACtC,MAAI,eAAe;AAEnB,QAAM,SAAgC,CAAC,EAAE,QAAQ,QAAQ,MAAM;AAC7D,UAAM,OAAO,OAAO,GAAG;AACvB,UAAM,MAAM,IAAI,IAAI,QAAQ,GAAG;AAC/B,UAAM,UAAU,KAAK,QAAQ,cAAc,UAAU,IAAI,CAAC;AAC1D,UAAM,QAAQ,UAAU,GAAG,KAAK,OAAO,IAAI,kBAAkB,KAAK,IAAI,IAAI,QAAQ;AAElF,QAAI,gBAAgB,SAAS,IAAI,aAAa,SAAS,GAAG;AAExD,YAAM,OAAO,aAAa,QAAQ,UAAU;AAC5C,UAAI,MAAM;AAER,cAAM,eAAkF,KAAK,MAAM,IAAI;AACvG,eAAO,SAAS,KAAK,QAAQ,SAAS,EAAE,GAAG,cAAc,KAAK,MAAM,OAAO,KAAK,MAAM,CAAC,CAAC;AAAA,MAC1F;AAAA,IACF;AAEA,QAAI,SAAS,IAAI,aAAa,SAAS,GAAG;AAExC,mBAAa,WAAW,UAAU;AAAA,IACpC,OAAO;AAEL,oBAAc,QAAQ,CAAC,UAAU;AAC/B,YAAI,aAAa,OAAO,KAAK;AAAA,MAC/B,CAAC;AACD,YAAM,OAAO;AAAA,QACX,GAAG;AAAA,QACH,OAAO,QAAQ,OAAO,SAAS;AAAA,QAC/B,cAAc,qBAAqB,IAAI,YAAY;AAAA,MACrD;AACA,mBAAa,QAAQ,YAAY,KAAK,UAAU,IAAI,CAAC;AAAA,IACvD;AAGA,WAAO,EAAE,SAAS,IAAI,CAAC;AACvB,mBAAe;AAEf,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as createLoader } from './list-view/createLoader.js';
+export type { CreateLoaderOptions } from './list-view/createLoader.js';
+export { default as createRouter } from './list-view/createRouter.js';
+export type { AcmsRouteContextProvider } from './list-view/createRouter.js';

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import {
+  createLoader
+} from "./chunk-T4KEVRNL.mjs";
+import {
+  createRouter
+} from "./chunk-LL3PVY7W.mjs";
+export {
+  createLoader,
+  createRouter
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/list-view/createLoader.d.ts

@@ -0,0 +1,15 @@
+import { type RouteObject } from 'react-router';
+import type { AcmsContext } from '@ablogcms/url/types';
+export interface CreateLoaderOptions {
+    id: string;
+    admin: string;
+    onLoad: ({ context, url }: {
+        context: AcmsContext;
+        url: URL;
+    }) => void | Promise<void>;
+    ignoredParams?: string[];
+}
+/**
+ * ローダー関数を作成する
+ */
+export default function createLoader({ id, admin, onLoad, ignoredParams, }: CreateLoaderOptions): RouteObject['loader'];

package/dist/list-view/createLoader.mjs

@@ -0,0 +1,7 @@
+import {
+  createLoader
+} from "../chunk-T4KEVRNL.mjs";
+export {
+  createLoader as default
+};
+//# sourceMappingURL=createLoader.mjs.map

package/dist/list-view/createLoader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/list-view/createRouter.d.ts

@@ -0,0 +1,26 @@
+import { type RouteObject } from 'react-router';
+import { type ComponentType, type ReactNode } from 'react';
+import type { AcmsContext } from '@ablogcms/url/types';
+/**
+ * URL から解決した ACMS コンテキストをルート要素へ供給するコンポーネント。
+ *
+ * CMS コア側の `AcmsContextProvider` を注入するための口。パッケージから
+ * コア（`ablogcms/js/src/stores/acms`）を直接参照すると alias 依存になり npm 公開できないため、
+ * 依存の向きを呼び出し側からの注入に反転させている。
+ */
+export type AcmsRouteContextProvider = ComponentType<{
+    context: AcmsContext;
+    children: ReactNode;
+}>;
+type CreateRouterOptions = RouteObject & {
+    contextProvider?: AcmsRouteContextProvider;
+};
+/**
+ * 管理画面のルートコンポーネントを作成する
+ *
+ * @warning
+ * このメソッドはReactコンポーネントの中で利用すると、コンポーネントが表示されない不具合があります。
+ * コンポーネントの外で呼び出すようにしてください。
+ */
+export default function createRouter({ element, errorElement, contextProvider, ...rest }: CreateRouterOptions): import("react-router").DataRouter;
+export {};

package/dist/list-view/createRouter.mjs

@@ -0,0 +1,7 @@
+import {
+  createRouter
+} from "../chunk-LL3PVY7W.mjs";
+export {
+  createRouter as default
+};
+//# sourceMappingURL=createRouter.mjs.map

package/dist/list-view/createRouter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ablogcms/react-router",
+  "version": "3.2.28-beta.0",
+  "type": "module",
+  "description": "CMS 管理画面 list-view 画面用の react-router ヘルパー",
+  "license": "MIT",
+  "homepage": "https://www.a-blogcms.jp",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org:appleple/ablogcms.git",
+    "directory": "packages/frontend/react-router"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "react-router": "^8.3.0",
+    "@ablogcms/url": "3.2.28-beta.0",
+    "@ablogcms/utils": "3.2.28-beta.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "@types/react": "^19.2.17"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./list-view/create-loader": {
+      "types": "./dist/list-view/createLoader.d.ts",
+      "import": "./dist/list-view/createLoader.mjs",
+      "default": "./dist/list-view/createLoader.mjs"
+    },
+    "./list-view/create-router": {
+      "types": "./dist/list-view/createRouter.d.ts",
+      "import": "./dist/list-view/createRouter.mjs",
+      "default": "./dist/list-view/createRouter.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../../tools/build-package.mjs"
+  }
+}