@nocobase/client-v2 2.1.0-alpha.2 → 2.1.0-alpha.20

package/lib/PluginSettingsManager.d.ts

@@ -18,6 +18,7 @@ export interface PluginSettingOptions {
      * @default Outlet
      */
     Component?: RouteType['Component'];
+    componentLoader?: RouteType['componentLoader'];
     icon?: string;
     /**
      * sort, the smaller the number, the higher the priority

package/lib/PluginSettingsManager.js

@@ -83,7 +83,8 @@ const _PluginSettingsManager = class _PluginSettingsManager {
     }
     this.app.router.add(this.getRouteName(name), {
       path: this.getRoutePath(name),
-      Component: this.settings[name].Component
+      Component: this.settings[name].Component,
+      componentLoader: this.settings[name].componentLoader
     });
   }
   remove(name) {

package/lib/RouterManager.d.ts

@@ -23,8 +23,14 @@ 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;
@@ -37,6 +43,8 @@ export declare class RouterManager {
     get state(): any;
     get navigate(): any;
     constructor(options: RouterOptions, app: Application);
+    protected resolveLoadedComponent(moduleOrComponent: ComponentLoaderResult): ComponentTypeAndString | undefined;
+    protected createRouteLazyComponent(componentLoader: ComponentLoader): ComponentType;
     /**
      * @internal
      */

package/lib/RouterManager.js

@@ -66,6 +66,37 @@ const _RouterManager = class _RouterManager {
     this.app = app;
     this.routes = options.routes || {};
   }
+  resolveLoadedComponent(moduleOrComponent) {
+    if (!moduleOrComponent) {
+      return void 0;
+    }
+    if (typeof moduleOrComponent === "function" || typeof moduleOrComponent === "string") {
+      return moduleOrComponent;
+    }
+    return moduleOrComponent.default || moduleOrComponent.Component;
+  }
+  createRouteLazyComponent(componentLoader) {
+    const LazyComponent = import_react.default.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 = /* @__PURE__ */ __name((props) => this.app.renderComponent(loadedComponent, props), "StringRouteComponent");
+          return {
+            default: StringRouteComponent
+          };
+        }
+        return {
+          default: loadedComponent
+        };
+      })
+    );
+    return /* @__PURE__ */ __name(function RouteLazyComponentWrapper(props) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Suspense, { fallback: null }, /* @__PURE__ */ import_react.default.createElement(LazyComponent, { ...props }));
+    }, "RouteLazyComponentWrapper");
+  }
   /**
    * @internal
    */
@@ -79,9 +110,11 @@ const _RouterManager = 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 = import_react.default.createElement(this.createRouteLazyComponent(componentLoader));
+          } else if (Component) {
             if (typeof Component === "string") {
               ele = this.app.renderComponent(Component);
             } else {

package/lib/utils/globalDeps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { RequireJS } from './requirejs';
+/**
+ * @internal
+ */
+export declare function defineGlobalDeps(requirejs: RequireJS): void;

package/lib/utils/globalDeps.js

@@ -0,0 +1,82 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var globalDeps_exports = {};
+__export(globalDeps_exports, {
+  defineGlobalDeps: () => defineGlobalDeps
+});
+module.exports = __toCommonJS(globalDeps_exports);
+var antdCssinjs = __toESM(require("@ant-design/cssinjs"));
+var antdIcons = __toESM(require("@ant-design/icons"));
+var formilyCore = __toESM(require("@formily/core"));
+var formilyReact = __toESM(require("@formily/react"));
+var formilyReactive = __toESM(require("@formily/reactive"));
+var formilyShared = __toESM(require("@formily/shared"));
+var nocobaseFlowEngine = __toESM(require("@nocobase/flow-engine"));
+var antd = __toESM(require("antd"));
+var i18next = __toESM(require("i18next"));
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var reactI18next = __toESM(require("react-i18next"));
+var ReactRouter = __toESM(require("react-router"));
+var ReactRouterDom = __toESM(require("react-router-dom"));
+var import_jsx_runtime = __toESM(require("react/jsx-runtime"));
+var nocobaseClientV2 = __toESM(require("../index"));
+function defineGlobalDeps(requirejs) {
+  requirejs.define("react", () => import_react.default);
+  requirejs.define("react-dom", () => import_react_dom.default);
+  requirejs.define("react/jsx-runtime", () => import_jsx_runtime.default);
+  requirejs.define("react-router", () => ReactRouter);
+  requirejs.define("react-router-dom", () => ReactRouterDom);
+  requirejs.define("antd", () => antd);
+  requirejs.define("@ant-design/icons", () => antdIcons);
+  requirejs.define("@ant-design/cssinjs", () => antdCssinjs);
+  requirejs.define("i18next", () => i18next);
+  requirejs.define("react-i18next", () => reactI18next);
+  requirejs.define("@formily/core", () => formilyCore);
+  requirejs.define("@formily/react", () => formilyReact);
+  requirejs.define("@formily/reactive", () => formilyReactive);
+  requirejs.define("@formily/shared", () => formilyShared);
+  requirejs.define("@nocobase/client-v2", () => nocobaseClientV2);
+  requirejs.define("@nocobase/client-v2/client-v2", () => nocobaseClientV2);
+  requirejs.define("@nocobase/flow-engine", () => nocobaseFlowEngine);
+}
+__name(defineGlobalDeps, "defineGlobalDeps");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineGlobalDeps
+});

package/lib/utils/remotePlugins.js

@@ -37,12 +37,12 @@ __export(remotePlugins_exports, {
 module.exports = __toCommonJS(remotePlugins_exports);
 function defineDevPlugins(plugins) {
   Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(`${packageName}/client`, () => plugin);
+    window.define(`${packageName}/client-v2`, () => plugin);
   });
 }
 __name(defineDevPlugins, "defineDevPlugins");
 function definePluginClient(packageName) {
-  window.define(`${packageName}/client`, ["exports", packageName], function(_exports, _pluginExports) {
+  window.define(`${packageName}/client-v2`, ["exports", packageName], function(_exports, _pluginExports) {
     Object.defineProperty(_exports, "__esModule", {
       value: true
     });

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.2",
-  "license": "AGPL-3.0",
+  "version": "2.1.0-alpha.20",
+  "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
   "dependencies": {
-    "@nocobase/flow-engine": "2.1.0-alpha.2",
-    "@nocobase/sdk": "2.1.0-alpha.2",
-    "@nocobase/shared": "2.1.0-alpha.2",
+    "@nocobase/flow-engine": "2.1.0-alpha.20",
+    "@nocobase/sdk": "2.1.0-alpha.20",
+    "@nocobase/shared": "2.1.0-alpha.20",
     "i18next": "^22.4.9",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "01afd1b928c72c072947533fb12a61b06e45c985"
+  "gitHead": "3d1535db6bf93ca23257faf474afee0d565f54c6"
 }

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));
+  });
+});