@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.45

package/src/theme/customAlgorithm.ts

@@ -0,0 +1,43 @@
+/**
+ * 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 { MappingAlgorithm, theme } from 'antd';
+import { ThemeConfig } from './type';
+
+export const customAlgorithm: MappingAlgorithm = (designToken, derivativeToken) => {
+  const result: ThemeConfig['token'] = derivativeToken || theme.defaultAlgorithm(designToken);
+
+  result.paddingPageHorizontal ??= result.sizeLG;
+  result.paddingPageVertical ??= result.sizeLG;
+  result.paddingPopupHorizontal ??= result.sizeLG;
+  result.paddingPopupVertical ??= result.size;
+  result.marginBlock ??= result.sizeLG;
+  result.borderRadiusBlock ??= result.borderRadiusLG;
+
+  result.colorBgSider ??= result.colorBgElevated;
+  result.colorBgSiderMenuHover ??= result.colorBgTextHover || result.colorFillSecondary;
+  result.colorBgSiderMenuActive ??= result.colorPrimaryBg;
+  result.colorTextSiderMenu ??= result.colorText;
+  result.colorTextSiderMenuHover ??= result.colorText;
+  result.colorTextSiderMenuActive ??= result.colorPrimary;
+
+  return result as any;
+};
+
+export const addCustomAlgorithmToTheme = (themeConfig: ThemeConfig) => {
+  if (Array.isArray(themeConfig.algorithm)) {
+    if (!themeConfig.algorithm.includes(customAlgorithm)) {
+      themeConfig.algorithm.push(customAlgorithm);
+    }
+  } else {
+    themeConfig.algorithm = [themeConfig.algorithm, customAlgorithm].filter(Boolean);
+  }
+  themeConfig.algorithm = themeConfig.algorithm.filter(Boolean);
+  return themeConfig;
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 { ThemeConfig } from './type';
+
+const defaultTheme: ThemeConfig = {
+  name: '',
+  token: {
+    colorPrimaryHeader: '#001529',
+    colorBgHeader: '#001529',
+    colorBgHeaderMenuHover: '#ffffff1a',
+    colorBgHeaderMenuActive: '#ffffff1a',
+    colorTextHeaderMenu: '#ffffffa6',
+    colorTextHeaderMenuHover: '#ffffff',
+    colorTextHeaderMenuActive: '#ffffff',
+
+    colorSettings: '#F18B62',
+    colorBgSettingsHover: 'rgba(241, 139, 98, 0.06)',
+    colorTemplateBgSettingsHover: 'rgba(98, 200, 241, 0.06)',
+    colorBorderSettingsHover: 'rgba(241, 139, 98, 0.3)',
+
+    motionUnit: 0.03,
+  },
+};
+
+export default defaultTheme;

package/src/theme/globalStyles.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { injectGlobal } from '@emotion/css';
+
+// Antd v5 has no labelFontWeight token, so a descendant selector on the
+// stable Form structure is the lowest-risk implementation for the bolder
+// form label default. Injected globally because v1's GlobalThemeProvider
+// re-exports v2's, so any v1 app served from this codebase goes through
+// the same provider and should get the same defaults.
+injectGlobal`
+  .ant-form-item-label > label {
+    font-weight: 600;
+  }
+
+  .nb-hidden {
+    display: none;
+  }
+
+  .nb-dialog-overflow-hidden {
+    .ant-modal-content {
+      overflow: hidden;
+    }
+  }
+`;

package/src/theme/index.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { ConfigProvider, theme as antdTheme } from 'antd';
+import _ from 'lodash';
+import React, { createContext, FC, useCallback, useMemo, useRef } from 'react';
+import compatOldTheme from './compatOldTheme';
+import { addCustomAlgorithmToTheme } from './customAlgorithm';
+import defaultTheme from './defaultTheme';
+import './globalStyles';
+import { ThemeConfig } from './type';
+
+interface ThemeItem {
+  id: number;
+  config: ThemeConfig;
+  optional: boolean;
+  isBuiltIn?: boolean;
+}
+
+interface GlobalThemeContextProps {
+  theme: ThemeConfig;
+  setTheme: React.Dispatch<React.SetStateAction<ThemeConfig>>;
+  setCurrentSettingTheme: (theme: ThemeConfig) => void;
+  getCurrentSettingTheme: () => ThemeConfig;
+  setCurrentEditingTheme: (themeItem: ThemeItem) => void;
+  getCurrentEditingTheme: () => ThemeItem;
+  isDarkTheme: boolean;
+}
+
+const GlobalThemeContext = createContext<GlobalThemeContextProps>(null);
+GlobalThemeContext.displayName = 'GlobalThemeContext';
+
+export const useGlobalTheme = () => {
+  return React.useContext(GlobalThemeContext) || ({ theme: {}, isDarkTheme: false } as GlobalThemeContextProps);
+};
+
+interface GlobalThemeProviderProps {
+  theme?: ThemeConfig;
+}
+
+export const GlobalThemeProvider: FC<GlobalThemeProviderProps> = ({ children, theme: themeFromProps }) => {
+  const [themeConfig, setTheme] = React.useState<ThemeConfig>(themeFromProps || defaultTheme);
+  const currentSettingThemeRef = useRef<ThemeConfig>(null);
+  const currentEditingThemeRef = useRef<ThemeItem>(null);
+
+  const isDarkTheme = useMemo(() => {
+    const algorithm = themeConfig?.algorithm;
+    if (Array.isArray(algorithm)) {
+      return algorithm.includes(antdTheme.darkAlgorithm);
+    }
+    return algorithm === antdTheme.darkAlgorithm;
+  }, [themeConfig?.algorithm]);
+
+  const setCurrentEditingTheme = useCallback((themeItem: ThemeItem) => {
+    currentEditingThemeRef.current = themeItem ? _.cloneDeep(themeItem) : themeItem;
+  }, []);
+
+  const getCurrentEditingTheme = useCallback(() => {
+    return currentEditingThemeRef.current;
+  }, []);
+
+  const setCurrentSettingTheme = useCallback((theme: ThemeConfig) => {
+    currentSettingThemeRef.current = theme ? _.cloneDeep(theme) : theme;
+  }, []);
+
+  const getCurrentSettingTheme = useCallback(() => {
+    return currentSettingThemeRef.current;
+  }, []);
+
+  const value = useMemo(() => {
+    return {
+      theme: addCustomAlgorithmToTheme(themeConfig),
+      setTheme,
+      setCurrentSettingTheme,
+      getCurrentSettingTheme,
+      setCurrentEditingTheme,
+      getCurrentEditingTheme,
+      isDarkTheme,
+    };
+  }, [
+    getCurrentEditingTheme,
+    getCurrentSettingTheme,
+    isDarkTheme,
+    setCurrentEditingTheme,
+    setCurrentSettingTheme,
+    themeConfig,
+  ]);
+
+  return (
+    <GlobalThemeContext.Provider value={value}>
+      <ConfigProvider theme={compatOldTheme(value.theme)}>{children}</ConfigProvider>
+    </GlobalThemeContext.Provider>
+  );
+};
+
+export { default as compatOldTheme } from './compatOldTheme';
+export { addCustomAlgorithmToTheme, customAlgorithm } from './customAlgorithm';
+export * from './type';
+export { defaultTheme };

package/src/theme/type.ts

@@ -0,0 +1,50 @@
+/**
+ * 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 { ThemeConfig as _ThemeConfig } from 'antd';
+import { AliasToken } from 'antd/es/theme/internal';
+
+export interface CustomToken extends AliasToken {
+  colorPrimaryHeader: string;
+  colorBgHeader: string;
+  colorBgHeaderMenuHover: string;
+  colorBgHeaderMenuActive: string;
+  colorTextHeaderMenu: string;
+  colorTextHeaderMenuHover: string;
+  colorTextHeaderMenuActive: string;
+
+  colorBgSider: string;
+  colorTextSiderMenu: string;
+  colorTextSiderMenuHover: string;
+  colorTextSiderMenuActive: string;
+  colorBgSiderMenuHover: string;
+  colorBgSiderMenuActive: string;
+
+  colorSettings: string;
+  colorBgSettingsHover: string;
+  colorTemplateBgSettingsHover: string;
+  colorBorderSettingsHover: string;
+
+  paddingPageHorizontal: number;
+  paddingPageVertical: number;
+
+  paddingPopupHorizontal: number;
+  paddingPopupVertical: number;
+
+  marginBlock: number;
+  borderRadiusBlock: number;
+
+  siderWidth: number;
+  globalStyle?: string;
+}
+
+export interface ThemeConfig extends _ThemeConfig {
+  name?: string;
+  token?: Partial<CustomToken>;
+}

package/src/utils/appVersionHTML.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+const htmlEscapeMap: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+export function escapeHTML(value: string) {
+  return value.replace(/[&<>"']/g, (matched) => htmlEscapeMap[matched]);
+}
+
+export function getAppVersionHTML(version: unknown) {
+  if (version === null || typeof version === 'undefined' || version === '') {
+    return '';
+  }
+
+  return `<span class="nb-app-version">v${escapeHTML(String(version))}</span>`;
+}

package/src/utils/globalDeps.ts

@@ -0,0 +1,107 @@
+/**
+ * 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 antdStyle from 'antd-style';
+import * as ctrlTinycolor from '@ctrl/tinycolor';
+import * as emotionCss from '@emotion/css';
+import * as formilyAntdV5 from '@formily/antd-v5';
+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 nocobaseEvaluators from '@nocobase/evaluators/client';
+import * as nocobaseClientUtils from '@nocobase/utils/client';
+import { dayjs } from '@nocobase/utils/client';
+import * as nocobaseFlowEngine from '@nocobase/flow-engine';
+import * as ahooks from 'ahooks';
+import * as antd from 'antd';
+import * as FileSaver from 'file-saver';
+import axios from 'axios';
+import * as i18next from 'i18next';
+import lodash from 'lodash';
+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 * as dndKitCore from '@dnd-kit/core';
+import * as dndKitSortable from '@dnd-kit/sortable';
+import type { RequireJS } from './requirejs';
+
+declare global {
+  interface Window {
+    __nocobase_app_dev__?: boolean;
+    __nocobase_app_dev_deps__?: Record<string, unknown>;
+    __nocobase_app_dev_plugins__?: Record<string, unknown>;
+  }
+}
+
+function defineGlobalDep(requirejs: RequireJS, name: string, value: unknown) {
+  requirejs.define(name, () => value);
+  if (window.__nocobase_app_dev__) {
+    window.__nocobase_app_dev_deps__ = window.__nocobase_app_dev_deps__ || {};
+    window.__nocobase_app_dev_deps__[name] = value;
+  }
+}
+
+/**
+ * @internal
+ */
+export function defineGlobalDeps(requirejs: RequireJS) {
+  // react
+  defineGlobalDep(requirejs, 'react', React);
+  defineGlobalDep(requirejs, 'react-dom', ReactDOM);
+  defineGlobalDep(requirejs, 'react/jsx-runtime', jsxRuntime);
+
+  // react-router
+  defineGlobalDep(requirejs, 'react-router', ReactRouter);
+  defineGlobalDep(requirejs, 'react-router-dom', ReactRouterDom);
+
+  // antd
+  defineGlobalDep(requirejs, 'antd', antd);
+  defineGlobalDep(requirejs, '@ant-design/icons', antdIcons);
+  defineGlobalDep(requirejs, '@ant-design/cssinjs', antdCssinjs);
+  defineGlobalDep(requirejs, 'antd-style', antdStyle);
+
+  // i18next
+  defineGlobalDep(requirejs, 'i18next', i18next);
+  defineGlobalDep(requirejs, 'react-i18next', reactI18next);
+
+  // formily
+  defineGlobalDep(requirejs, '@formily/antd-v5', formilyAntdV5);
+  defineGlobalDep(requirejs, '@formily/core', formilyCore);
+  defineGlobalDep(requirejs, '@formily/react', formilyReact);
+  defineGlobalDep(requirejs, '@formily/reactive', formilyReactive);
+  defineGlobalDep(requirejs, '@formily/shared', formilyShared);
+
+  // nocobase
+  defineGlobalDep(requirejs, '@nocobase/utils', nocobaseClientUtils);
+  defineGlobalDep(requirejs, '@nocobase/utils/client', nocobaseClientUtils);
+  defineGlobalDep(requirejs, '@nocobase/client-v2', nocobaseClientV2);
+  defineGlobalDep(requirejs, '@nocobase/client-v2/client-v2', nocobaseClientV2);
+  defineGlobalDep(requirejs, '@nocobase/flow-engine', nocobaseFlowEngine);
+  defineGlobalDep(requirejs, '@nocobase/evaluators', nocobaseEvaluators);
+  defineGlobalDep(requirejs, '@nocobase/evaluators/client', nocobaseEvaluators);
+
+  defineGlobalDep(requirejs, '@dnd-kit/core', dndKitCore);
+  defineGlobalDep(requirejs, '@dnd-kit/sortable', dndKitSortable);
+
+  // utils
+  defineGlobalDep(requirejs, '@ctrl/tinycolor', ctrlTinycolor);
+  defineGlobalDep(requirejs, 'ahooks', ahooks);
+  defineGlobalDep(requirejs, 'axios', axios);
+  defineGlobalDep(requirejs, 'dayjs', dayjs);
+  defineGlobalDep(requirejs, 'lodash', lodash);
+  defineGlobalDep(requirejs, '@emotion/css', emotionCss);
+  defineGlobalDep(requirejs, 'file-saver', FileSaver);
+}

package/src/utils/index.tsx

@@ -10,6 +10,8 @@
 import React, { ComponentType, FC } from 'react';
 import { BlankComponent } from '../components';
 
+export * from './appVersionHTML';
+
 export function normalizeContainer(container: Element | ShadowRoot | string): Element | null {
   if (!container) {
     console.warn(`Failed to mount app: mount target should not be null or undefined.`);
@@ -23,14 +25,18 @@ export function normalizeContainer(container: Element | ShadowRoot | string): El
     }
     return res;
   }
-  if (window.ShadowRoot && container instanceof window.ShadowRoot && container.mode === 'closed') {
+  if (
+    globalThis.window.ShadowRoot &&
+    container instanceof globalThis.window.ShadowRoot &&
+    container.mode === 'closed'
+  ) {
     console.warn(`mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`);
   }
   return container as any;
 }
 
-export const compose = (...components: [ComponentType, any][]) => {
-  const Component = components.reduce<ComponentType>((Parent, child) => {
+export const compose = (...components: [ComponentType<any>, any][]) => {
+  const Component = components.reduce<ComponentType<any>>((Parent, child) => {
     const [Child, childProps] = child;
     const ComposeComponent: FC = ({ children }) => (
       <Parent>
@@ -41,7 +47,7 @@ export const compose = (...components: [ComponentType, any][]) => {
     return ComposeComponent;
   }, BlankComponent);
 
-  return (LastChild?: ComponentType) =>
+  return (LastChild?: ComponentType<any>) =>
     ((props?: any) => {
       return <Component>{LastChild && <LastChild {...props} />}</Component>;
     }) as FC;

package/src/utils/remotePlugins.ts

@@ -8,37 +8,42 @@
  */
 
 import type { DevDynamicImport } from '../Application';
-import type { Plugin } from '../Plugin';
+import type { PluginClass } from '../PluginManager';
 import type { PluginData } from '../PluginManager';
 import type { RequireJS } from './requirejs';
 
+type RemotePluginModule = PluginClass | ({ default?: PluginClass } & Record<string, unknown>);
+
+function getClientV2ModuleId(packageName: string) {
+  return `${packageName}/client-v2`;
+}
+
+function getPluginClass(pluginModule: RemotePluginModule): PluginClass {
+  const defaultPlugin = 'default' in pluginModule ? pluginModule.default : undefined;
+  return defaultPlugin || (pluginModule as PluginClass);
+}
+
+function defineAppDevPluginModule(moduleId: string, pluginModule: RemotePluginModule) {
+  window.__nocobase_app_dev_plugins__ = window.__nocobase_app_dev_plugins__ || {};
+  window.__nocobase_app_dev_plugins__[moduleId] = pluginModule;
+}
+
 /**
  * @internal
  */
-export function defineDevPlugins(plugins: Record<string, typeof Plugin>) {
-  Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(`${packageName}/client`, () => plugin);
+export function defineDevPlugins(plugins: Record<string, RemotePluginModule>) {
+  Object.entries(plugins).forEach(([packageName, pluginModule]) => {
+    const moduleId = getClientV2ModuleId(packageName);
+    window.define(moduleId, () => pluginModule);
+    defineAppDevPluginModule(moduleId, pluginModule);
   });
 }
 
-/**
- * @internal
- */
-export function definePluginClient(packageName: string) {
-  window.define(`${packageName}/client`, ['exports', packageName], function (_exports: any, _pluginExports: any) {
-    Object.defineProperty(_exports, '__esModule', {
-      value: true,
-    });
-    Object.keys(_pluginExports).forEach(function (key) {
-      if (key === '__esModule') return;
-      if (key in _exports && _exports[key] === _pluginExports[key]) return;
-      Object.defineProperty(_exports, key, {
-        enumerable: true,
-        get: function () {
-          return _pluginExports[key];
-        },
-      });
-    });
+function defineDevPluginModules(plugins: Record<string, RemotePluginModule>) {
+  Object.entries(plugins).forEach(([packageName, pluginModule]) => {
+    const moduleId = getClientV2ModuleId(packageName);
+    window.define(moduleId, () => pluginModule);
+    defineAppDevPluginModule(moduleId, pluginModule);
   });
 }
 
@@ -49,7 +54,7 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
   requirejs.requirejs.config({
     waitSeconds: 120,
     paths: pluginData.reduce<Record<string, string>>((acc, cur) => {
-      acc[cur.packageName] = cur.url;
+      acc[getClientV2ModuleId(cur.packageName)] = cur.url;
       return acc;
     }, {}),
   });
@@ -58,10 +63,16 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
 /**
  * @internal
  */
-export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins: [string, typeof Plugin][]) => void) {
-  return (...pluginModules: (typeof Plugin & { default?: typeof Plugin })[]) => {
-    const res: [string, typeof Plugin][] = pluginModules
-      .map<[string, typeof Plugin]>((item, index) => [pluginData[index].name, item?.default || item])
+export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins: [string, PluginClass][]) => void) {
+  return (...pluginModules: (PluginClass & { default?: PluginClass })[]) => {
+    pluginModules.forEach((item, index) => {
+      if (item) {
+        defineAppDevPluginModule(getClientV2ModuleId(pluginData[index].packageName), item);
+      }
+    });
+
+    const res: [string, PluginClass][] = pluginModules
+      .map<[string, PluginClass]>((item, index) => [pluginData[index].name, item?.default || item])
       .filter((item) => item[1]);
     resolve(res);
 
@@ -82,22 +93,87 @@ export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins
 /**
  * @internal
  */
-export function getRemotePlugins(
-  requirejs: any,
-  pluginData: PluginData[] = [],
-): Promise<Array<[string, typeof Plugin]>> {
+export function getRemotePlugins(requirejs: any, pluginData: PluginData[] = []): Promise<Array<[string, PluginClass]>> {
   configRequirejs(requirejs, pluginData);
 
-  const packageNames = pluginData.map((item) => item.packageName);
-  packageNames.forEach((packageName) => {
-    definePluginClient(packageName);
-  });
+  const packageNames = pluginData.map((item) => getClientV2ModuleId(item.packageName));
 
   return new Promise((resolve, reject) => {
     requirejs.requirejs(packageNames, processRemotePlugins(pluginData, resolve), reject);
   });
 }
 
+async function getEsmDevPlugins(pluginData: PluginData[] = []): Promise<Array<[string, PluginClass]>> {
+  const plugins: Array<[string, PluginClass]> = [];
+  for (const plugin of sortPluginsByAppDevDependencies(pluginData)) {
+    const pluginModule: RemotePluginModule = await import(/* webpackIgnore: true */ plugin.url);
+    const pluginClass = getPluginClass(pluginModule);
+    if (pluginClass) {
+      plugins.push([plugin.name, pluginClass]);
+      defineDevPluginModules({ [plugin.packageName]: pluginModule });
+    }
+  }
+  return plugins;
+}
+
+function sortPluginsByAppDevDependencies(pluginData: PluginData[] = []) {
+  const pluginMap = new Map(pluginData.map((plugin) => [plugin.packageName, plugin]));
+  const sorted: PluginData[] = [];
+  const visiting = new Set<string>();
+  const visited = new Set<string>();
+
+  const visit = (plugin: PluginData) => {
+    if (visited.has(plugin.packageName)) {
+      return;
+    }
+    if (visiting.has(plugin.packageName)) {
+      return;
+    }
+    visiting.add(plugin.packageName);
+    for (const dep of plugin.appDevDependencies || []) {
+      const depPlugin = pluginMap.get(dep);
+      if (depPlugin) {
+        visit(depPlugin);
+      }
+    }
+    visiting.delete(plugin.packageName);
+    visited.add(plugin.packageName);
+    sorted.push(plugin);
+  };
+
+  pluginData.forEach(visit);
+  return sorted;
+}
+
+async function getMixedRemotePluginsInOrder(
+  requirejs: RequireJS,
+  pluginData: PluginData[] = [],
+): Promise<Array<[string, PluginClass]>> {
+  const plugins: Array<[string, PluginClass]> = [];
+  let requirejsPlugins: PluginData[] = [];
+  const flushRequirejsPlugins = async () => {
+    if (requirejsPlugins.length === 0) {
+      return;
+    }
+    const remotePluginList = await getRemotePlugins(requirejs, requirejsPlugins);
+    plugins.push(...remotePluginList);
+    requirejsPlugins = [];
+  };
+
+  for (const plugin of sortPluginsByAppDevDependencies(pluginData)) {
+    if (plugin.devMode === 'esm') {
+      await flushRequirejsPlugins();
+      const esmPluginList = await getEsmDevPlugins([plugin]);
+      plugins.push(...esmPluginList);
+      continue;
+    }
+    requirejsPlugins.push(plugin);
+  }
+
+  await flushRequirejsPlugins();
+  return plugins;
+}
+
 interface GetPluginsOption {
   requirejs: RequireJS;
   pluginData: PluginData[];
@@ -107,34 +183,41 @@ interface GetPluginsOption {
 /**
  * @internal
  */
-export async function getPlugins(options: GetPluginsOption): Promise<Array<[string, typeof Plugin]>> {
+export async function getPlugins(options: GetPluginsOption): Promise<Array<[string, PluginClass]>> {
   const { requirejs, pluginData, devDynamicImport } = options;
   if (pluginData.length === 0) return [];
 
-  const res: Array<[string, typeof Plugin]> = [];
+  const res: Array<[string, PluginClass]> = [];
 
-  const resolveDevPlugins: Record<string, typeof Plugin> = {};
+  const resolveDevPlugins: Record<string, PluginClass> = {};
+  const resolveDevPluginModules: Record<string, RemotePluginModule> = {};
   if (devDynamicImport) {
     for await (const plugin of pluginData) {
-      const pluginModule = await devDynamicImport(plugin.packageName);
+      const pluginModule: RemotePluginModule | null = await devDynamicImport(plugin.packageName);
       if (pluginModule) {
-        res.push([plugin.name, pluginModule.default]);
-        resolveDevPlugins[plugin.packageName] = pluginModule.default;
+        const pluginClass = getPluginClass(pluginModule);
+        res.push([plugin.name, pluginClass]);
+        resolveDevPlugins[plugin.packageName] = pluginClass;
+        resolveDevPluginModules[plugin.packageName] = pluginModule;
       }
     }
-    defineDevPlugins(resolveDevPlugins);
+    defineDevPlugins(resolveDevPluginModules);
   }
 
   const remotePlugins = pluginData.filter((item) => !resolveDevPlugins[item.packageName]);
+  const esmDevPlugins = remotePlugins.filter((item) => item.devMode === 'esm');
+  const requirejsPlugins = remotePlugins.filter((item) => item.devMode !== 'esm');
 
-  if (remotePlugins.length === 0) {
-    return res;
-  }
-
-  if (res.length === 0) {
-    const remotePluginList = await getRemotePlugins(requirejs, remotePlugins);
+  if (esmDevPlugins.length === 0) {
+    if (requirejsPlugins.length === 0) {
+      return res;
+    }
+    const remotePluginList = await getRemotePlugins(requirejs, requirejsPlugins);
     res.push(...remotePluginList);
+    return res;
   }
 
+  const mixedPluginList = await getMixedRemotePluginsInOrder(requirejs, remotePlugins);
+  res.push(...mixedPluginList);
   return res;
 }