@nocobase/client-v2 2.1.0-beta.15 → 2.1.0-beta.16

package/src/Application.tsx

@@ -18,7 +18,7 @@ import {
 } from '@nocobase/flow-engine';
 import { APIClient, type APIClientOptions, getSubAppName } from '@nocobase/sdk';
 import { createInstance, type i18n as i18next } from 'i18next';
-import _ from 'lodash';
+import { get, merge, set } from 'lodash-es';
 import React, { ComponentType, FC, ReactElement, ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { I18nextProvider } from 'react-i18next';
@@ -30,6 +30,7 @@ import { type ComponentTypeAndString, RouterManager, type RouterOptions } from '
 import { WebSocketClient, type WebSocketClientOptions } from './WebSocketClient';
 import { BlankComponent } from './components';
 import { compose, normalizeContainer } from './utils';
+import { defineGlobalDeps } from './utils/globalDeps';
 import type { RequireJS } from './utils/requirejs';
 import { getRequireJs } from './utils/requirejs';
 
@@ -139,10 +140,17 @@ export class Application {
       error: observable.ref,
     });
     this.devDynamicImport = options.devDynamicImport;
-    this.components = _.merge(this.components, options.components);
+    this.components = merge(this.components, options.components);
     this.apiClient = new APIClient(options.apiClient);
     this.i18n = options.i18n || createInstance();
     this.router = new RouterManager(options.router, this);
+    if (typeof options.router?.basename === 'undefined') {
+      const publicPath = this.getPublicPath();
+      const basename = publicPath === '/' ? undefined : publicPath.replace(/\/$/, '');
+      if (basename) {
+        this.router.setBasename(basename);
+      }
+    }
     this.pluginManager = new PluginManager(options.plugins, options.loadRemotePlugins, this);
     this.flowEngine = new FlowEngine();
     this.flowEngine.registerModels({ ApplicationModel });
@@ -225,6 +233,7 @@ export class Application {
       return;
     }
     window['requirejs'] = this.requirejs = getRequireJs();
+    defineGlobalDeps(this.requirejs);
     window.define = this.requirejs.define;
   }
 
@@ -421,7 +430,7 @@ export class Application {
 
     // Component is a string, try to get it from this.components
     if (typeof Component === 'string') {
-      const res = _.get(this.components, Component) as ComponentType<T>;
+      const res = get(this.components, Component) as ComponentType<T>;
       if (!res) {
         showError(`Component ${Component} not found`);
         return;
@@ -443,7 +452,7 @@ export class Application {
       console.error('Component must have a displayName or pass name as second argument');
       return;
     }
-    _.set(this.components, componentName, component);
+    set(this.components, componentName, component);
   }
 
   addComponents(components: Record<string, ComponentType>) {

package/src/PluginManager.ts

@@ -54,7 +54,7 @@ export class PluginManager {
   }
 
   private async initRemotePlugins() {
-    const res = await this.app.apiClient.request({ url: 'pm:listEnabled' });
+    const res = await this.app.apiClient.request({ url: 'pm:listEnabledV2' });
     const pluginList: PluginData[] = res?.data?.data || [];
     const plugins = await getPlugins({
       requirejs: this.app.requirejs,

package/src/PluginSettingsManager.ts

@@ -24,6 +24,7 @@ export interface PluginSettingOptions {
    * @default Outlet
    */
   Component?: RouteType['Component'];
+  componentLoader?: RouteType['componentLoader'];
   icon?: string;
   /**
    * sort, the smaller the number, the higher the priority
@@ -109,6 +110,7 @@ export class PluginSettingsManager {
     this.app.router.add(this.getRouteName(name), {
       path: this.getRoutePath(name),
       Component: this.settings[name].Component,
+      componentLoader: this.settings[name].componentLoader,
     });
   }
 

package/src/RouterManager.tsx

@@ -40,8 +40,13 @@ export type RouterOptions = (HashRouterOptions | BrowserRouterOptions | MemoryRo
   routes?: Record<string, RouteType>;
 };
 export type ComponentTypeAndString<T = any> = ComponentType<T> | string;
+export type ComponentLoaderResult =
+  | { default?: ComponentTypeAndString; Component?: ComponentTypeAndString }
+  | ComponentTypeAndString;
+export type ComponentLoader = () => Promise<ComponentLoaderResult>;
 export interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
   Component?: ComponentTypeAndString;
+  componentLoader?: ComponentLoader;
   skipAuthCheck?: boolean;
 }
 export type RenderComponentType = (Component: ComponentTypeAndString, props?: any) => React.ReactNode;
@@ -67,6 +72,45 @@ export class RouterManager {
     this.routes = options.routes || {};
   }
 
+  protected resolveLoadedComponent(moduleOrComponent: ComponentLoaderResult): ComponentTypeAndString | undefined {
+    if (!moduleOrComponent) {
+      return undefined;
+    }
+    if (typeof moduleOrComponent === 'function' || typeof moduleOrComponent === 'string') {
+      return moduleOrComponent;
+    }
+    return moduleOrComponent.default || moduleOrComponent.Component;
+  }
+
+  protected createRouteLazyComponent(componentLoader: ComponentLoader): ComponentType {
+    const LazyComponent = React.lazy(() =>
+      componentLoader().then((moduleOrComponent) => {
+        const loadedComponent = this.resolveLoadedComponent(moduleOrComponent);
+        if (!loadedComponent) {
+          throw new Error('componentLoader must resolve to a React component or component module.');
+        }
+        if (typeof loadedComponent === 'string') {
+          const StringRouteComponent: ComponentType<any> = (props: Record<string, any>) =>
+            this.app.renderComponent(loadedComponent, props);
+          return {
+            default: StringRouteComponent,
+          };
+        }
+        return {
+          default: loadedComponent as ComponentType<any>,
+        };
+      }),
+    );
+
+    return function RouteLazyComponentWrapper(props: Record<string, any>) {
+      return (
+        <React.Suspense fallback={null}>
+          <LazyComponent {...props} />
+        </React.Suspense>
+      );
+    };
+  }
+
   /**
    * @internal
    */
@@ -96,9 +140,11 @@ export class RouterManager {
         if (Object.keys(item).length === 1 && item.children) {
           acc.push(...buildRoutesTree(item.children));
         } else {
-          const { Component, element, children, ...reset } = item;
+          const { Component, componentLoader, element, children, ...reset } = item;
           let ele = element;
-          if (Component) {
+          if (componentLoader) {
+            ele = React.createElement(this.createRouteLazyComponent(componentLoader));
+          } else if (Component) {
             if (typeof Component === 'string') {
               ele = this.app.renderComponent(Component);
             } else {

package/src/__tests__/app.test.tsx

@@ -68,6 +68,61 @@ describe('app', () => {
     expect(screen.getByText('Hello Route')).toBeInTheDocument();
   });
 
+  it('should support router componentLoader lazy functionality', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('root', {
+          path: '/',
+          componentLoader: async () => ({
+            default: () => <div>Hello Lazy Route</div>,
+          }),
+        });
+      }
+    }
+    const app = createMockClient({ plugins: [PluginHelloClient] });
+    await renderApp(app);
+    expect(await screen.findByText('Hello Lazy Route')).toBeInTheDocument();
+  });
+
+  it('should support publicPath basename for plugin routes', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.router.add('demo.route', {
+          path: '/demo/app-info',
+          componentLoader: async () => ({
+            default: () => <div>Hello Basename Route</div>,
+          }),
+        });
+      }
+    }
+    const app = createMockClient({
+      publicPath: '/v2/',
+      plugins: [PluginHelloClient],
+      router: { type: 'memory', initialEntries: ['/v2/demo/app-info'] },
+    });
+    await renderApp(app);
+    expect(await screen.findByText('Hello Basename Route')).toBeInTheDocument();
+  });
+
+  it('should support plugin settings componentLoader lazy functionality', async () => {
+    class PluginHelloClient extends Plugin {
+      async load() {
+        this.pluginSettingsManager.add('demo', {
+          title: 'Demo',
+          componentLoader: async () => ({
+            default: () => <div>Hello Lazy Settings</div>,
+          }),
+        });
+      }
+    }
+    const app = createMockClient({
+      plugins: [PluginHelloClient],
+      router: { type: 'memory', initialEntries: ['/admin/settings/demo'] },
+    });
+    await renderApp(app);
+    expect(await screen.findByText('Hello Lazy Settings')).toBeInTheDocument();
+  });
+
   it('should show maintaining state', async () => {
     class PluginHelloClient extends Plugin {}
     const app = createMockClient({ plugins: [PluginHelloClient] });

package/src/__tests__/globalDeps.test.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { defineGlobalDeps } from '../utils/globalDeps';
+
+describe('client-v2 defineGlobalDeps', () => {
+  it('should register shared AMD dependencies for remote plugins', () => {
+    const define = vi.fn();
+
+    defineGlobalDeps({
+      define,
+    } as any);
+
+    expect(define).toHaveBeenCalledWith('react', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('react-router-dom', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@formily/react', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@nocobase/client-v2', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@nocobase/flow-engine', expect.any(Function));
+  });
+});

package/src/__tests__/plugin.test.ts

@@ -0,0 +1,61 @@
+/**
+ * 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 { createMockClient, Plugin } from '@nocobase/client-v2';
+
+describe('PluginManager', () => {
+  it('should request remote plugins from pm:listEnabledV2', async () => {
+    const app = createMockClient({
+      loadRemotePlugins: true,
+    });
+    app.apiMock.onGet('pm:listEnabledV2').reply(200, { data: [] });
+
+    await app.load();
+
+    expect(app.apiMock.history.get).toHaveLength(1);
+    expect(app.apiMock.history.get[0]?.url).toBe('pm:listEnabledV2');
+  });
+
+  it('should not request remote plugins from pm:listEnabled', async () => {
+    const app = createMockClient({
+      loadRemotePlugins: true,
+    });
+    app.apiMock.onGet('pm:listEnabledV2').reply(200, { data: [] });
+
+    await app.load();
+
+    expect(app.apiMock.history.get.some((request) => request.url === 'pm:listEnabled')).toBe(false);
+  });
+
+  it('should define client-v2 module ids for dev plugins', async () => {
+    class DemoPlugin extends Plugin {}
+
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    const app = createMockClient({
+      loadRemotePlugins: true,
+      devDynamicImport: vi.fn().mockResolvedValue({ default: DemoPlugin }) as any,
+    });
+    app.apiMock.onGet('pm:listEnabledV2').reply(200, {
+      data: [
+        {
+          name: '@nocobase/demo',
+          packageName: '@nocobase/demo',
+          url: 'https://demo.com/dist/client-v2/index.js',
+        },
+      ],
+    });
+
+    await app.load();
+
+    expect(mockDefine).toHaveBeenCalledWith('@nocobase/demo/client-v2', expect.any(Function));
+    expect(mockDefine).not.toHaveBeenCalledWith('@nocobase/demo/client', expect.any(Function));
+  });
+});

package/src/__tests__/remotePlugins.test.ts

@@ -0,0 +1,72 @@
+/**
+ * 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 { Plugin } from '../Plugin';
+import { defineDevPlugins, definePluginClient, getPlugins } from '../utils/remotePlugins';
+
+describe('client-v2 remotePlugins', () => {
+  afterEach(() => {
+    window.define = undefined;
+  });
+
+  it('should define dev plugins with /client-v2 module ids', () => {
+    class DemoPlugin extends Plugin {}
+
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    defineDevPlugins({
+      '@nocobase/demo': DemoPlugin,
+    });
+
+    expect(mockDefine).toHaveBeenCalledWith('@nocobase/demo/client-v2', expect.any(Function));
+  });
+
+  it('should define remote plugin proxies with /client-v2 module ids', () => {
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    definePluginClient('@nocobase/demo');
+
+    expect(mockDefine).toHaveBeenCalledWith(
+      '@nocobase/demo/client-v2',
+      ['exports', '@nocobase/demo'],
+      expect.any(Function),
+    );
+  });
+
+  it('should not define /client aliases when loading v2 plugins', async () => {
+    class DemoPlugin extends Plugin {}
+
+    const requirejs: any = {
+      requirejs: vi.fn(),
+    };
+    requirejs.requirejs.config = vi.fn();
+    requirejs.requirejs.requirejs = vi.fn();
+
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    const plugins = await getPlugins({
+      requirejs,
+      pluginData: [
+        {
+          name: '@nocobase/demo',
+          packageName: '@nocobase/demo',
+          url: 'https://demo.com/dist/client-v2/index.js',
+        },
+      ] as any,
+      devDynamicImport: vi.fn().mockResolvedValue({ default: DemoPlugin }) as any,
+    });
+
+    expect(plugins).toEqual([['@nocobase/demo', DemoPlugin]]);
+    expect(mockDefine).toHaveBeenCalledWith('@nocobase/demo/client-v2', expect.any(Function));
+    expect(mockDefine).not.toHaveBeenCalledWith('@nocobase/demo/client', expect.any(Function));
+  });
+});

package/src/utils/globalDeps.ts

@@ -0,0 +1,61 @@
+/**
+ * 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 * as antdCssinjs from '@ant-design/cssinjs';
+import * as antdIcons from '@ant-design/icons';
+import * as formilyCore from '@formily/core';
+import * as formilyReact from '@formily/react';
+import * as formilyReactive from '@formily/reactive';
+import * as formilyShared from '@formily/shared';
+import * as nocobaseFlowEngine from '@nocobase/flow-engine';
+import * as antd from 'antd';
+import * as i18next from 'i18next';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import * as reactI18next from 'react-i18next';
+import * as ReactRouter from 'react-router';
+import * as ReactRouterDom from 'react-router-dom';
+import jsxRuntime from 'react/jsx-runtime';
+import * as nocobaseClientV2 from '../index';
+
+import type { RequireJS } from './requirejs';
+
+/**
+ * @internal
+ */
+export function defineGlobalDeps(requirejs: RequireJS) {
+  // react
+  requirejs.define('react', () => React);
+  requirejs.define('react-dom', () => ReactDOM);
+  requirejs.define('react/jsx-runtime', () => jsxRuntime);
+
+  // react-router
+  requirejs.define('react-router', () => ReactRouter);
+  requirejs.define('react-router-dom', () => ReactRouterDom);
+
+  // antd
+  requirejs.define('antd', () => antd);
+  requirejs.define('@ant-design/icons', () => antdIcons);
+  requirejs.define('@ant-design/cssinjs', () => antdCssinjs);
+
+  // i18next
+  requirejs.define('i18next', () => i18next);
+  requirejs.define('react-i18next', () => reactI18next);
+
+  // formily
+  requirejs.define('@formily/core', () => formilyCore);
+  requirejs.define('@formily/react', () => formilyReact);
+  requirejs.define('@formily/reactive', () => formilyReactive);
+  requirejs.define('@formily/shared', () => formilyShared);
+
+  // nocobase
+  requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
+  requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
+  requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
+}

package/src/utils/remotePlugins.ts

@@ -17,7 +17,7 @@ import type { RequireJS } from './requirejs';
  */
 export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
   Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(`${packageName}/client`, () => plugin);
+    window.define(`${packageName}/client-v2`, () => plugin);
   });
 }
 
@@ -25,7 +25,7 @@ export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
  * @internal
  */
 export function definePluginClient(packageName: string) {
-  window.define(`${packageName}/client`, ['exports', packageName], function (_exports: any, _pluginExports: any) {
+  window.define(`${packageName}/client-v2`, ['exports', packageName], function (_exports: any, _pluginExports: any) {
     Object.defineProperty(_exports, '__esModule', {
       value: true,
     });