@nocobase/client-v2 2.0.0-alpha.20

package/src/PluginManager.ts

@@ -0,0 +1,114 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { Application } from './Application';
+import type { Plugin } from './Plugin';
+import { getPlugins } from './utils/remotePlugins';
+
+export type PluginOptions<T = any> = { name?: string; packageName?: string; config?: T };
+export type PluginType<Opts = any> = typeof Plugin | [typeof Plugin<Opts>, PluginOptions<Opts>];
+export type PluginData = {
+  name: string;
+  packageName: string;
+  version: string;
+  url: string;
+  type: 'local' | 'upload' | 'npm';
+};
+
+export class PluginManager {
+  protected pluginInstances: Map<typeof Plugin, Plugin> = new Map();
+  protected pluginsAliases: Record<string, Plugin> = {};
+  private initPlugins: Promise<void>;
+
+  constructor(
+    protected _plugins: PluginType[],
+    protected loadRemotePlugins: boolean,
+    protected app: Application,
+  ) {
+    this.app = app;
+    this.initPlugins = this.init(_plugins);
+  }
+
+  /**
+   * @internal
+   */
+  async init(_plugins: PluginType[]) {
+    await this.initStaticPlugins(_plugins);
+    if (this.loadRemotePlugins) {
+      await this.initRemotePlugins();
+    }
+  }
+
+  private async initStaticPlugins(_plugins: PluginType[] = []) {
+    for await (const plugin of _plugins) {
+      const pluginClass = Array.isArray(plugin) ? plugin[0] : plugin;
+      const opts = Array.isArray(plugin) ? plugin[1] : undefined;
+      await this.add(pluginClass, opts);
+    }
+  }
+
+  private async initRemotePlugins() {
+    const res = await this.app.apiClient.request({ url: 'pm:listEnabled' });
+    const pluginList: PluginData[] = res?.data?.data || [];
+    const plugins = await getPlugins({
+      requirejs: this.app.requirejs,
+      pluginData: pluginList,
+      devDynamicImport: this.app.devDynamicImport,
+    });
+    for await (const [name, pluginClass] of plugins) {
+      const info = pluginList.find((item) => item.name === name);
+      await this.add(pluginClass, info);
+    }
+  }
+
+  async add<T = any>(plugin: typeof Plugin, opts: PluginOptions<T> = {}) {
+    const instance = this.getInstance(plugin, opts);
+
+    this.pluginInstances.set(plugin, instance);
+
+    if (opts.name) {
+      this.pluginsAliases[opts.name] = instance;
+    }
+
+    if (opts.packageName) {
+      this.pluginsAliases[opts.packageName] = instance;
+    }
+
+    await instance.afterAdd();
+  }
+
+  get<T extends typeof Plugin>(PluginClass: T): InstanceType<T>;
+  get<T extends {}>(name: string): T;
+  get(nameOrPluginClass: any) {
+    if (typeof nameOrPluginClass === 'string') {
+      return this.pluginsAliases[nameOrPluginClass];
+    }
+    return this.pluginInstances.get(nameOrPluginClass.default || nameOrPluginClass);
+  }
+
+  private getInstance<T>(plugin: typeof Plugin, opts?: T) {
+    return new plugin(opts, this.app);
+  }
+
+  /**
+   * @internal
+   */
+  async load() {
+    await this.initPlugins;
+
+    for (const plugin of this.pluginInstances.values()) {
+      await plugin.beforeLoad();
+    }
+
+    for (const plugin of this.pluginInstances.values()) {
+      await plugin.load();
+      this.app.eventBus.dispatchEvent(new CustomEvent(`plugin:${plugin.options.name}:loaded`, { detail: plugin }));
+    }
+  }
+}

package/src/PluginSettingsManager.ts

@@ -0,0 +1,182 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { set } from 'lodash';
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+import type { Application } from './Application';
+import type { RouteType } from './RouterManager';
+
+export const ADMIN_SETTINGS_KEY = 'admin.settings.';
+export const ADMIN_SETTINGS_PATH = '/admin/settings/';
+export const SNIPPET_PREFIX = 'pm.';
+
+export interface PluginSettingOptions {
+  title: any;
+  /**
+   * @default Outlet
+   */
+  Component?: RouteType['Component'];
+  icon?: string;
+  /**
+   * sort, the smaller the number, the higher the priority
+   * @default 0
+   */
+  sort?: number;
+  aclSnippet?: string;
+  link?: string;
+  isTopLevel?: boolean;
+  isPinned?: boolean;
+  [index: string]: any;
+}
+
+export interface PluginSettingsPageType {
+  label?: string | React.ReactElement;
+  title: string | React.ReactElement;
+  link?: string;
+  key: string;
+  icon: any;
+  path: string;
+  sort?: number;
+  name?: string;
+  isAllow?: boolean;
+  topLevelName?: string;
+  aclSnippet: string;
+  children?: PluginSettingsPageType[];
+  [index: string]: any;
+}
+
+export class PluginSettingsManager {
+  protected settings: Record<string, PluginSettingOptions> = {};
+  protected aclSnippets: string[] = [];
+  public app: Application;
+  private cachedList = {};
+
+  constructor(_pluginSettings: Record<string, PluginSettingOptions>, app: Application) {
+    this.app = app;
+    Object.entries(_pluginSettings || {}).forEach(([name, pluginSettingOptions]) => {
+      this.add(name, pluginSettingOptions);
+    });
+  }
+
+  clearCache() {
+    this.cachedList = {};
+  }
+
+  setAclSnippets(aclSnippets: string[]) {
+    this.aclSnippets = aclSnippets;
+  }
+
+  getAclSnippet(name: string) {
+    const setting = this.settings[name];
+    if (setting?.skipAclConfigure) {
+      return null;
+    }
+    return setting?.aclSnippet ? setting.aclSnippet : `${SNIPPET_PREFIX}${name}`;
+  }
+
+  getRouteName(name: string) {
+    return `${ADMIN_SETTINGS_KEY}${name}`;
+  }
+
+  getRoutePath(name: string) {
+    return `${ADMIN_SETTINGS_PATH}${name.replaceAll('.', '/')}`;
+  }
+
+  add(name: string, options: PluginSettingOptions) {
+    const nameArr = name.split('.');
+    const topLevelName = nameArr[0];
+    this.settings[name] = {
+      ...this.settings[name],
+      Component: Outlet,
+      ...options,
+      name,
+      topLevelName: options.topLevelName || topLevelName,
+    };
+    // add children
+    if (nameArr.length > 1) {
+      set(this.settings, nameArr.join('.children.'), this.settings[name]);
+    }
+
+    // add route
+    this.app.router.add(this.getRouteName(name), {
+      path: this.getRoutePath(name),
+      Component: this.settings[name].Component,
+    });
+  }
+
+  remove(name: string) {
+    // delete self and children
+    Object.keys(this.settings).forEach((key) => {
+      if (key.startsWith(name)) {
+        delete this.settings[key];
+        this.app.router.remove(`${ADMIN_SETTINGS_KEY}${key}`);
+      }
+    });
+  }
+
+  hasAuth(name: string) {
+    if (this.aclSnippets.includes(`!${this.getAclSnippet('*')}`)) return false;
+    return this.aclSnippets.includes(`!${this.getAclSnippet(name)}`) === false;
+  }
+
+  getSetting(name: string) {
+    return this.settings[name];
+  }
+
+  has(name: string) {
+    const hasAuth = this.hasAuth(name);
+    if (!hasAuth) return false;
+    return !!this.getSetting(name);
+  }
+
+  get(name: string, filterAuth = true): PluginSettingsPageType {
+    const isAllow = this.hasAuth(name);
+    const pluginSetting = this.getSetting(name);
+    if ((filterAuth && !isAllow) || !pluginSetting) return null;
+    const children = Object.keys(pluginSetting.children || {})
+      .sort((a, b) => a.localeCompare(b)) // sort by name
+      .map((key) => this.get(pluginSetting.children[key].name, filterAuth))
+      .filter(Boolean)
+      .sort((a, b) => (a.sort || 0) - (b.sort || 0));
+    const { title, icon, aclSnippet, ...others } = pluginSetting;
+    return {
+      isTopLevel: name === pluginSetting.topLevelName,
+      ...others,
+      aclSnippet: this.getAclSnippet(name),
+      title,
+      isAllow,
+      label: title,
+      icon: this.app.flowEngine.context.renderIon?.(icon),
+      path: this.getRoutePath(name),
+      key: name,
+      children: children.length ? children : undefined,
+    };
+  }
+
+  getList(filterAuth = true): PluginSettingsPageType[] {
+    const cacheKey = JSON.stringify(filterAuth);
+    if (this.cachedList[cacheKey]) return this.cachedList[cacheKey];
+
+    return (this.cachedList[cacheKey] = Array.from(
+      new Set(Object.values(this.settings).map((item) => item.topLevelName)),
+    )
+      .sort((a, b) => a.localeCompare(b)) // sort by name
+      .map((name) => this.get(name, filterAuth))
+      .filter(Boolean)
+      .sort((a, b) => (a.sort || 0) - (b.sort || 0)));
+  }
+
+  getAclSnippets() {
+    return Object.keys(this.settings)
+      .map((name) => this.getAclSnippet(name))
+      .filter(Boolean);
+  }
+}

package/src/RouterManager.tsx

@@ -0,0 +1,239 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { get, set } from 'lodash';
+import React, { ComponentType, createContext, useContext } from 'react';
+import { matchRoutes, useParams } from 'react-router';
+import {
+  type BrowserRouterProps,
+  createBrowserRouter,
+  createHashRouter,
+  createMemoryRouter,
+  type HashRouterProps,
+  type MemoryRouterProps,
+  Outlet,
+  type RouteObject,
+  RouterProvider,
+  useRouteError,
+} from 'react-router-dom';
+import { Application } from './Application';
+import { BlankComponent, RouterContextCleaner } from './components';
+import { RouterBridge } from './components/RouterBridge';
+
+export interface BrowserRouterOptions extends Omit<BrowserRouterProps, 'children'> {
+  type?: 'browser';
+}
+export interface HashRouterOptions extends Omit<HashRouterProps, 'children'> {
+  type?: 'hash';
+}
+export interface MemoryRouterOptions extends Omit<MemoryRouterProps, 'children'> {
+  type?: 'memory';
+}
+export type RouterOptions = (HashRouterOptions | BrowserRouterOptions | MemoryRouterOptions) & {
+  renderComponent?: RenderComponentType;
+  routes?: Record<string, RouteType>;
+};
+export type ComponentTypeAndString<T = any> = ComponentType<T> | string;
+export interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
+  Component?: ComponentTypeAndString;
+  skipAuthCheck?: boolean;
+}
+export type RenderComponentType = (Component: ComponentTypeAndString, props?: any) => React.ReactNode;
+
+export class RouterManager {
+  protected routes: Record<string, RouteType> = {};
+  protected options: RouterOptions;
+  public app: Application;
+  public router;
+  get basename() {
+    return this.router.basename;
+  }
+  get state() {
+    return this.router.state;
+  }
+  get navigate() {
+    return this.router.navigate;
+  }
+
+  constructor(options: RouterOptions = {}, app: Application) {
+    this.options = options;
+    this.app = app;
+    this.routes = options.routes || {};
+  }
+
+  /**
+   * @internal
+   */
+  getRoutesTree(): RouteObject[] {
+    type RouteTypeWithChildren = RouteType & { children?: RouteTypeWithChildren };
+    const routes: Record<string, RouteTypeWithChildren> = {};
+
+    /**
+     * { 'a': { name: '1' }, 'a.b': { name: '2' }, 'a.c': { name: '3' } };
+     * =>
+     * { a: { name: '1', children: { b: { name: '2' }, c: {name: '3'} } } }
+     */
+    for (const [name, route] of Object.entries(this.routes)) {
+      set(routes, name.split('.').join('.children.'), { ...get(routes, name.split('.').join('.children.')), ...route });
+    }
+
+    /**
+     * get RouteObject tree
+     *
+     * @example
+     * { a: { name: '1', children: { b: { name: '2' }, c: { children: { d: { name: '3' } } } } } }
+     * =>
+     * { name: '1', children: [{ name: '2' }, { name: '3' }] }
+     */
+    const buildRoutesTree = (routes: RouteTypeWithChildren): RouteObject[] => {
+      return Object.values(routes).reduce<RouteObject[]>((acc, item) => {
+        if (Object.keys(item).length === 1 && item.children) {
+          acc.push(...buildRoutesTree(item.children));
+        } else {
+          const { Component, element, children, ...reset } = item;
+          let ele = element;
+          if (Component) {
+            if (typeof Component === 'string') {
+              ele = this.app.renderComponent(Component);
+            } else {
+              ele = React.createElement(Component);
+            }
+          }
+          const res = {
+            ...reset,
+            element: ele,
+            children: children ? buildRoutesTree(children) : undefined,
+          } as RouteObject;
+          acc.push(res);
+        }
+        return acc;
+      }, []);
+    };
+
+    return buildRoutesTree(routes);
+  }
+
+  getRoutes() {
+    return this.routes;
+  }
+
+  setType(type: RouterOptions['type']) {
+    this.options.type = type;
+  }
+
+  getBasename() {
+    return this.options.basename;
+  }
+
+  setBasename(basename: string) {
+    this.options.basename = basename;
+  }
+
+  matchRoutes(pathname: string) {
+    const routes = Object.values(this.routes);
+    // @ts-ignore
+    return matchRoutes<RouteType>(routes, pathname, this.basename);
+  }
+
+  isSkippedAuthCheckRoute(pathname: string) {
+    const matchedRoutes = this.matchRoutes(pathname);
+    return matchedRoutes.some((match) => {
+      return match?.route?.skipAuthCheck === true;
+    });
+  }
+  /**
+   * @internal
+   */
+  getRouterComponent(children?: React.ReactNode) {
+    const { type = 'browser', ...opts } = this.options;
+
+    const routerCreators = {
+      hash: createHashRouter,
+      browser: createBrowserRouter,
+      memory: createMemoryRouter,
+    };
+
+    const routes = this.getRoutesTree();
+
+    const BaseLayoutContext = createContext<ComponentType>(null);
+
+    const Provider = () => {
+      const BaseLayout = useContext(BaseLayoutContext);
+      return (
+        <>
+          <RouterBridge app={this.app} />
+          <BaseLayout>
+            <Outlet />
+            {children}
+          </BaseLayout>
+        </>
+      );
+    };
+
+    // bubble up error to application error boundary
+    const ErrorElement = () => {
+      const error = useRouteError();
+      throw error;
+    };
+
+    this.router = routerCreators[type](
+      [
+        {
+          element: <Provider />,
+          errorElement: <ErrorElement />,
+          children: routes,
+        },
+      ],
+      opts,
+    );
+
+    const RenderRouter: React.FC<{ BaseLayout?: ComponentType }> = ({ BaseLayout = BlankComponent }) => {
+      return (
+        <BaseLayoutContext.Provider value={BaseLayout}>
+          <RouterContextCleaner>
+            <RouterProvider
+              future={{
+                v7_startTransition: true,
+              }}
+              router={this.router}
+            />
+          </RouterContextCleaner>
+        </BaseLayoutContext.Provider>
+      );
+    };
+
+    return RenderRouter;
+  }
+
+  add(name: string, route: RouteType) {
+    this.routes[name] = {
+      id: name,
+      ...route,
+      handle: {
+        path: route.path,
+      },
+    };
+  }
+
+  get(name: string) {
+    return this.routes[name];
+  }
+
+  has(name: string) {
+    return !!this.get(name);
+  }
+
+  remove(name: string) {
+    delete this.routes[name];
+  }
+}
+
+export function createRouterManager(options?: RouterOptions, app?: Application) {
+  return new RouterManager(options, app);
+}