@pactor-app/app 0.1.0

package/dist/index.js

@@ -0,0 +1,672 @@
+// src/application.ts
+import { Registry } from "@pactor-app/core";
+import { createShadcnComponentRegistry } from "@pactor-app/ui/components";
+import {
+  createUiBridge,
+  OverlayManager,
+  registerInteractionActions,
+  ShadcnInteractionProvider,
+  ShadcnOverlayHost
+} from "@pactor-app/ui/interaction";
+import {
+  createShadcnLayoutRegistry
+} from "@pactor-app/ui/layout";
+import { createPermissionAdapter, PermissionStore } from "@pactor-app/permission";
+import {
+  createFetchAdapter,
+  HttpDslResourceLoader
+} from "@pactor-app/resource";
+import {
+  createRouterAdapter,
+  MenuRegistry
+} from "@pactor-app/router";
+import {
+  createFetchHttpAdapter,
+  createPageRuntime
+} from "@pactor-app/runtime";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/app-shell.tsx
+import { createI18nContext } from "@pactor-app/core";
+import { resolveLayout } from "@pactor-app/ui/layout";
+import { resolveRoute } from "@pactor-app/router";
+import { DynamicDslRoute, useReactRouterBridge } from "@pactor-app/router/react";
+import { I18nContextProvider } from "@pactor-app/runtime";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import {
+  BrowserRouter,
+  HashRouter,
+  Route,
+  Routes,
+  useLocation
+} from "react-router-dom";
+
+// src/feedback.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var centerStyle = {
+  minHeight: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+function BootstrapSpinner({
+  style
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "pactor-app-spin", style: { ...centerStyle, ...style }, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      role: "status",
+      "aria-label": "\u52A0\u8F7D\u4E2D",
+      children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "16",
+          cy: "16",
+          r: "12",
+          fill: "none",
+          stroke: "#1677ff",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeDasharray: "56",
+          strokeDashoffset: "28",
+          children: /* @__PURE__ */ jsx(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "rotate",
+              from: "0 16 16",
+              to: "360 16 16",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+function ResultView({
+  className,
+  title,
+  subTitle,
+  extra
+}) {
+  return /* @__PURE__ */ jsx("div", { className, style: { ...centerStyle, padding: 24 }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: 480 }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 24, fontWeight: 600, marginBottom: 8 }, children: title }),
+    subTitle !== void 0 && /* @__PURE__ */ jsx("div", { style: { color: "rgba(0, 0, 0, 0.45)", marginBottom: 16 }, children: subTitle }),
+    extra
+  ] }) });
+}
+function PrimaryButton({
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onClick?.(),
+      style: {
+        padding: "6px 16px",
+        border: "none",
+        borderRadius: 6,
+        background: "#1677ff",
+        color: "#fff",
+        fontSize: 14,
+        cursor: "pointer"
+      },
+      children
+    }
+  );
+}
+
+// src/page-loader.tsx
+import { PageRuntimeView } from "@pactor-app/runtime";
+import { useEffect, useState } from "react";
+
+// src/error-boundary.tsx
+import { Component } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PageErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[@pactor-app/app] \u9875\u9762\u6E32\u67D3\u5F02\u5E38", error, info.componentStack);
+  }
+  render() {
+    const { error } = this.state;
+    if (error !== null) {
+      return /* @__PURE__ */ jsx2(
+        ResultView,
+        {
+          className: "pactor-app-page-render-error",
+          title: "\u9875\u9762\u6E32\u67D3\u5F02\u5E38",
+          subTitle: error.message,
+          extra: /* @__PURE__ */ jsx2(PrimaryButton, { onClick: () => this.setState({ error: null }), children: "\u91CD\u8BD5" })
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/page-loader.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DslPageLoader({ app, pageId, route }) {
+  const [state, setState] = useState({ status: "loading" });
+  const [retryTick, setRetryTick] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    let runtime = null;
+    void (async () => {
+      try {
+        const pageDsl = await app.resolvePage(pageId);
+        if (cancelled) {
+          return;
+        }
+        runtime = app.createPageRuntime(pageDsl, route);
+        setState({ status: "ready", runtime });
+        void runtime.ready();
+        void runtime.show();
+      } catch (cause) {
+        if (!cancelled) {
+          setState({
+            status: "error",
+            error: cause instanceof Error ? cause : new Error(String(cause))
+          });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (runtime !== null && !runtime.destroyed) {
+        void runtime.hide();
+        void runtime.destroy();
+      }
+    };
+  }, [app, pageId, retryTick]);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsx3("div", { className: "pactor-app-page-loading", children: /* @__PURE__ */ jsx3(BootstrapSpinner, { style: { minHeight: 0, padding: 48 } }) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx3(
+      ResultView,
+      {
+        className: "pactor-app-page-load-error",
+        title: "\u9875\u9762\u52A0\u8F7D\u5931\u8D25",
+        subTitle: state.error.message,
+        extra: /* @__PURE__ */ jsx3(PrimaryButton, { onClick: () => setRetryTick((n) => n + 1), children: "\u91CD\u8BD5" })
+      }
+    );
+  }
+  const OverlayHostView = app.interactionKit.OverlayHost;
+  return /* @__PURE__ */ jsx3(PageErrorBoundary, { children: /* @__PURE__ */ jsx3(PageRuntimeView, { runtime: state.runtime, children: /* @__PURE__ */ jsx3(
+    OverlayHostView,
+    {
+      manager: app.overlayManager,
+      resolvePage: app.resolvePage
+    }
+  ) }) });
+}
+
+// src/app-shell.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Application({ app }) {
+  const [state, setState] = useState2({ status: "loading" });
+  const [retryTick, setRetryTick] = useState2(0);
+  useEffect2(() => {
+    let cancelled = false;
+    void app.loadSession().then(
+      (session) => {
+        if (!cancelled) {
+          setState({ status: "ready", session });
+        }
+      },
+      (cause) => {
+        if (!cancelled) {
+          setState({
+            status: "error",
+            error: cause instanceof Error ? cause : new Error(String(cause))
+          });
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [app, retryTick]);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsx4("div", { className: "pactor-app-bootstrap-loading", children: /* @__PURE__ */ jsx4(BootstrapSpinner, {}) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx4(
+      ResultView,
+      {
+        className: "pactor-app-bootstrap-error",
+        title: "\u5E94\u7528\u542F\u52A8\u5931\u8D25",
+        subTitle: state.error.message,
+        extra: /* @__PURE__ */ jsx4(PrimaryButton, { onClick: () => setRetryTick((n) => n + 1), children: "\u91CD\u8BD5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(AppShell, { app, session: state.session });
+}
+function AppShell({
+  app,
+  session
+}) {
+  const Router = app.routerOptions.type === "hash" ? HashRouter : BrowserRouter;
+  const InteractionKit = app.interactionKit.Provider;
+  const Providers = app.providers;
+  const i18n = createI18nContext({
+    locale: session.locale,
+    defaultLocale: session.defaultLocale,
+    messages: session.messages
+  });
+  const shell = /* @__PURE__ */ jsx4(I18nContextProvider, { value: i18n, children: /* @__PURE__ */ jsx4(InteractionKit, { bridge: app.uiBridge, children: /* @__PURE__ */ jsx4(ShellLayout, { app, session }) }) });
+  return /* @__PURE__ */ jsxs2(Router, { basename: app.routerOptions.basename, children: [
+    /* @__PURE__ */ jsx4(RouterBridgeSync, { binding: app.navigation }),
+    Providers !== void 0 ? /* @__PURE__ */ jsx4(Providers, { children: shell }) : shell
+  ] });
+}
+function RouterBridgeSync({ binding }) {
+  const bridge = useReactRouterBridge();
+  const location = useLocation();
+  useEffect2(() => {
+    binding.bind(bridge, {
+      pathname: location.pathname,
+      search: location.search
+    });
+  }, [bridge, binding]);
+  useEffect2(() => {
+    binding.sync({ pathname: location.pathname, search: location.search });
+  }, [binding, location.pathname, location.search]);
+  return null;
+}
+function ShellLayout({
+  app,
+  session
+}) {
+  const location = useLocation();
+  const route = resolveRoute(session.menuRegistry, {
+    pathname: location.pathname,
+    search: location.search
+  });
+  const LayoutComponent = resolveLayout(app.layoutRegistry, session.layoutType);
+  const outlet = /* @__PURE__ */ jsx4(Routes, { children: /* @__PURE__ */ jsx4(
+    Route,
+    {
+      path: "*",
+      element: /* @__PURE__ */ jsx4(
+        DynamicDslRoute,
+        {
+          registry: session.menuRegistry,
+          permissionChecker: app.permissionStore,
+          fallback: /* @__PURE__ */ jsx4(NotFoundPage, {}),
+          forbidden: /* @__PURE__ */ jsx4(ForbiddenPage, {}),
+          render: ({ pageId, route: pageRoute }) => /* @__PURE__ */ jsx4(
+            DslPageLoader,
+            {
+              app,
+              pageId,
+              route: pageRoute
+            },
+            pageLoaderKey(pageId, pageRoute)
+          )
+        }
+      )
+    }
+  ) });
+  if (session.layoutType === "admin") {
+    return /* @__PURE__ */ jsx4(
+      LayoutComponent,
+      {
+        config: session.layoutConfig,
+        brand: session.brand,
+        registry: session.menuRegistry,
+        bridge: app.navigation,
+        route: route ?? void 0,
+        permissionChecker: app.permissionStore,
+        headerExtra: app.headerExtra,
+        children: outlet
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(LayoutComponent, { brand: session.brand, children: outlet });
+}
+function pageLoaderKey(pageId, route) {
+  return `${pageId}|${JSON.stringify(route.params)}|${JSON.stringify(route.query)}`;
+}
+function NotFoundPage() {
+  return /* @__PURE__ */ jsx4(
+    ResultView,
+    {
+      className: "pactor-app-not-found",
+      title: "404",
+      subTitle: "\u9875\u9762\u4E0D\u5B58\u5728\u6216\u5C1A\u672A\u6CE8\u518C"
+    }
+  );
+}
+function ForbiddenPage() {
+  return /* @__PURE__ */ jsx4(
+    ResultView,
+    {
+      className: "pactor-app-forbidden",
+      title: "403",
+      subTitle: "\u6CA1\u6709\u8BBF\u95EE\u8BE5\u9875\u9762\u7684\u6743\u9650"
+    }
+  );
+}
+
+// src/application.ts
+var ReactRouterBinding = class {
+  constructor() {
+    this.location = { pathname: "/", search: "" };
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  /** 绑定真实桥接与初始 location（RouterBridgeSync 挂载时调用） */
+  bind(delegate, initial) {
+    this.delegate = delegate;
+    this.location = initial;
+  }
+  /** location 变化同步并通知订阅者 */
+  sync(location) {
+    this.location = location;
+    for (const listener of [...this.listeners]) {
+      listener(location);
+    }
+  }
+  getLocation() {
+    return this.location;
+  }
+  push(to) {
+    if (this.delegate === void 0) {
+      console.warn(`[@pactor-app/app] \u8DEF\u7531\u5C1A\u672A\u6302\u8F7D\uFF0Cpush("${to}") \u5DF2\u5FFD\u7565`);
+      return;
+    }
+    this.delegate.push(to);
+  }
+  replace(to) {
+    if (this.delegate === void 0) {
+      console.warn(`[@pactor-app/app] \u8DEF\u7531\u5C1A\u672A\u6302\u8F7D\uFF0Creplace("${to}") \u5DF2\u5FFD\u7565`);
+      return;
+    }
+    this.delegate.replace(to);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function upsert(registry, name, item) {
+  if (registry.has(name)) {
+    registry.unregister(name);
+  }
+  registry.register(name, item);
+}
+function upsertAll(registry, entries) {
+  for (const [name, item] of Object.entries(entries ?? {})) {
+    upsert(registry, name, item);
+  }
+}
+function createResourceHttpAdapter(authTokenProvider) {
+  const base = createFetchAdapter();
+  if (authTokenProvider === void 0) {
+    return base;
+  }
+  return async (request) => {
+    const token = await authTokenProvider();
+    if (token === void 0 || token === "") {
+      return base(request);
+    }
+    return base({
+      ...request,
+      headers: { ...request.headers, authorization: `Bearer ${token}` }
+    });
+  };
+}
+function createRuntimeHttpAdapter(authTokenProvider) {
+  const base = createFetchHttpAdapter();
+  if (authTokenProvider === void 0) {
+    return base;
+  }
+  return {
+    async request(config) {
+      const token = await authTokenProvider();
+      if (token === void 0 || token === "") {
+        return base.request(config);
+      }
+      return base.request({
+        ...config,
+        headers: { ...config.headers, authorization: `Bearer ${token}` }
+      });
+    }
+  };
+}
+var MENU_TYPES = /* @__PURE__ */ new Set(["group", "page", "link"]);
+function sanitizeMenus(raw) {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  const menus = [];
+  for (const item of raw) {
+    if (!isRecord(item) || typeof item["id"] !== "string") {
+      continue;
+    }
+    const menu = item;
+    menus.push({
+      ...menu,
+      title: typeof item["title"] === "string" ? item["title"] : menu.id,
+      type: MENU_TYPES.has(menu.type) ? menu.type : "page",
+      children: item["children"] !== void 0 ? sanitizeMenus(item["children"]) : void 0
+    });
+  }
+  return menus;
+}
+var LAYOUT_MODES = ["top-side", "top-bottom", "side-full", "two-column"];
+var LAYOUT_BREAKPOINTS = ["xs", "sm", "md", "lg", "xl", "xxl"];
+function pickLayoutConfig(layout) {
+  const config = {};
+  for (const key of [
+    "header",
+    "sidebar",
+    "tabs",
+    "breadcrumb",
+    "footer",
+    "fixedHeader",
+    "fixedSider",
+    "collapsible",
+    "collapsed"
+  ]) {
+    const value = layout?.[key];
+    if (typeof value === "boolean") {
+      config[key] = value;
+    }
+  }
+  const mode = layout?.["mode"];
+  if (typeof mode === "string" && LAYOUT_MODES.includes(mode)) {
+    config.mode = mode;
+  }
+  const breakpoint = layout?.["breakpoint"];
+  if (typeof breakpoint === "string" && LAYOUT_BREAKPOINTS.includes(breakpoint)) {
+    config.breakpoint = breakpoint;
+  }
+  return config;
+}
+function createPactorApplication(options) {
+  if (typeof options.appId !== "string" || options.appId === "") {
+    throw new Error("[@pactor-app/app] createPactorApplication: appId \u5FC5\u586B");
+  }
+  const { appId } = options;
+  const routerOptions = options.router ?? {};
+  const overlayManager = new OverlayManager();
+  const uiBridge = createUiBridge();
+  const permissionStore = new PermissionStore();
+  const layoutRegistry = (options.layoutRegistry ?? options.ui?.layoutRegistry)?.() ?? createShadcnLayoutRegistry();
+  const interactionKit = options.interactionKit ?? options.ui?.interactionKit ?? {
+    Provider: ShadcnInteractionProvider,
+    OverlayHost: ShadcnOverlayHost
+  };
+  const navigation = new ReactRouterBinding();
+  const loader = options.loader ?? new HttpDslResourceLoader({
+    baseUrl: options.api?.baseURL,
+    adapter: createResourceHttpAdapter(options.authTokenProvider)
+  });
+  const httpAdapter = createRuntimeHttpAdapter(options.authTokenProvider);
+  const permissionAdapter = createPermissionAdapter(permissionStore);
+  const routerAdapter = createRouterAdapter(navigation);
+  const components = (options.componentRegistry ?? options.ui?.componentRegistry)?.() ?? createShadcnComponentRegistry();
+  upsertAll(components, options.components);
+  const actions = new Registry("ActionRegistry");
+  registerInteractionActions(actions, overlayManager, uiBridge);
+  upsert(actions, "navigate", (action) => {
+    const to = action.params?.["to"];
+    if (typeof to !== "string" || to === "") {
+      return {
+        ok: false,
+        error: new Error("[@pactor-app/app] navigate \u52A8\u4F5C\u7F3A\u5C11 params.to\uFF08string\uFF09")
+      };
+    }
+    navigation.push(to);
+    return { ok: true };
+  });
+  upsertAll(actions, options.actions);
+  const services = new Registry("ServiceRegistry");
+  upsertAll(services, options.services);
+  const capabilities = new Registry("CapabilityRegistry");
+  upsertAll(capabilities, options.capabilities);
+  let session = null;
+  const handle = {
+    appId,
+    overlayManager,
+    uiBridge,
+    permissionStore,
+    layoutRegistry,
+    interactionKit,
+    routerOptions,
+    providers: options.providers,
+    headerExtra: options.headerExtra,
+    navigation,
+    async loadSession() {
+      const bootstrap = await loader.loadBootstrap();
+      permissionStore.setPermissions(
+        Array.isArray(bootstrap.permissions) ? bootstrap.permissions.filter(
+          (code) => typeof code === "string"
+        ) : []
+      );
+      const menuRegistry = new MenuRegistry(sanitizeMenus(bootstrap.menus));
+      const layout = isRecord(bootstrap.layout) ? bootstrap.layout : void 0;
+      const layoutType = options.layout ?? (typeof layout?.["type"] === "string" ? layout["type"] : void 0) ?? "admin";
+      const appRecord = {
+        id: appId,
+        ...isRecord(bootstrap.app) ? bootstrap.app : {}
+      };
+      const brand = options.brand ?? {
+        title: typeof appRecord["name"] === "string" ? appRecord["name"] : appId,
+        logo: void 0
+      };
+      const browserLocale = typeof navigator !== "undefined" && typeof navigator.language === "string" ? navigator.language : "zh-CN";
+      const locale = options.locale ?? (typeof bootstrap.locale === "string" ? bootstrap.locale : void 0) ?? browserLocale;
+      const defaultLocale = options.defaultLocale ?? (typeof bootstrap.defaultLocale === "string" ? bootstrap.defaultLocale : void 0) ?? "zh-CN";
+      const messages = options.messages ?? (isRecord(bootstrap.messages) ? bootstrap.messages : void 0) ?? {};
+      const next = {
+        bootstrap,
+        menuRegistry,
+        layoutType,
+        layoutConfig: pickLayoutConfig(layout),
+        brand,
+        user: isRecord(bootstrap.user) ? bootstrap.user : {},
+        app: appRecord,
+        locale,
+        defaultLocale,
+        messages
+      };
+      session = next;
+      return next;
+    },
+    createPageRuntime(pageDsl, route) {
+      return createPageRuntime(pageDsl, {
+        components,
+        actions,
+        services,
+        capabilities,
+        permission: permissionAdapter,
+        router: routerAdapter,
+        http: httpAdapter,
+        route: { params: route.params, query: route.query },
+        user: session?.user ?? {},
+        app: session?.app ?? { id: appId },
+        locale: session?.locale ?? "zh-CN",
+        defaultLocale: session?.defaultLocale ?? "zh-CN",
+        messages: session?.messages ?? {}
+      });
+    },
+    async resolvePage(pageId) {
+      const resource = await loader.loadPage(pageId);
+      return resource.schema;
+    }
+  };
+  let root = null;
+  return {
+    appId,
+    mount(selector) {
+      const target = document.querySelector(selector);
+      if (target === null) {
+        throw new Error(`[@pactor-app/app] mount \u76EE\u6807\u5143\u7D20\u4E0D\u5B58\u5728: ${selector}`);
+      }
+      if (root !== null) {
+        root.unmount();
+        root = null;
+      }
+      root = createRoot(target);
+      root.render(createElement(Application, { app: handle }));
+    },
+    unmount() {
+      if (root !== null) {
+        root.unmount();
+        root = null;
+      }
+    },
+    registerComponent(name, component) {
+      upsert(components, name, component);
+    },
+    registerAction(name, handler) {
+      upsert(actions, name, handler);
+    },
+    registerService(name, handler) {
+      upsert(services, name, handler);
+    },
+    registerCapability(name, capability) {
+      upsert(capabilities, name, capability);
+    },
+    setLocale(locale, messages) {
+      if (session === null) {
+        console.warn("[@pactor-app/app] setLocale \u5728 bootstrap \u5B8C\u6210\u524D\u8C03\u7528\u5DF2\u5FFD\u7565");
+        return;
+      }
+      session = { ...session, locale, messages: messages ?? session.messages };
+      window.location.reload();
+    }
+  };
+}
+export {
+  Application,
+  DslPageLoader,
+  PageErrorBoundary,
+  ReactRouterBinding,
+  createPactorApplication
+};