@nocobase/client-v2 2.1.0-beta.34 → 2.1.0-beta.35

package/src/utils/globalDeps.ts

@@ -37,53 +37,69 @@ 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
-  requirejs.define('react', () => React);
-  requirejs.define('react-dom', () => ReactDOM);
-  requirejs.define('react/jsx-runtime', () => jsxRuntime);
+  defineGlobalDep(requirejs, 'react', React);
+  defineGlobalDep(requirejs, 'react-dom', ReactDOM);
+  defineGlobalDep(requirejs, 'react/jsx-runtime', jsxRuntime);
 
   // react-router
-  requirejs.define('react-router', () => ReactRouter);
-  requirejs.define('react-router-dom', () => ReactRouterDom);
+  defineGlobalDep(requirejs, 'react-router', ReactRouter);
+  defineGlobalDep(requirejs, 'react-router-dom', ReactRouterDom);
 
   // antd
-  requirejs.define('antd', () => antd);
-  requirejs.define('@ant-design/icons', () => antdIcons);
-  requirejs.define('@ant-design/cssinjs', () => antdCssinjs);
-  requirejs.define('antd-style', () => antdStyle);
+  defineGlobalDep(requirejs, 'antd', antd);
+  defineGlobalDep(requirejs, '@ant-design/icons', antdIcons);
+  defineGlobalDep(requirejs, '@ant-design/cssinjs', antdCssinjs);
+  defineGlobalDep(requirejs, 'antd-style', antdStyle);
 
   // i18next
-  requirejs.define('i18next', () => i18next);
-  requirejs.define('react-i18next', () => reactI18next);
+  defineGlobalDep(requirejs, 'i18next', i18next);
+  defineGlobalDep(requirejs, 'react-i18next', reactI18next);
 
   // formily
-  requirejs.define('@formily/antd-v5', () => formilyAntdV5);
-  requirejs.define('@formily/core', () => formilyCore);
-  requirejs.define('@formily/react', () => formilyReact);
-  requirejs.define('@formily/reactive', () => formilyReactive);
-  requirejs.define('@formily/shared', () => formilyShared);
+  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
-  requirejs.define('@nocobase/utils', () => nocobaseClientUtils);
-  requirejs.define('@nocobase/utils/client', () => nocobaseClientUtils);
-  requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
-  requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
-  requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
-  requirejs.define('@nocobase/evaluators', () => nocobaseEvaluators);
-  requirejs.define('@nocobase/evaluators/client', () => nocobaseEvaluators);
+  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);
 
   requirejs.define('@dnd-kit/core', () => dndKitCore);
   requirejs.define('@dnd-kit/sortable', () => dndKitSortable);
 
   // utils
-  requirejs.define('ahooks', () => ahooks);
-  requirejs.define('axios', () => axios);
-  requirejs.define('dayjs', () => dayjs);
-  requirejs.define('lodash', () => lodash);
-  requirejs.define('@emotion/css', () => emotionCss);
-  requirejs.define('file-saver', () => FileSaver);
+  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/remotePlugins.ts

@@ -12,10 +12,22 @@ 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
  */
@@ -25,6 +37,14 @@ export function defineDevPlugins(plugins: Record<string, PluginClass>) {
   });
 }
 
+function defineDevPluginModules(plugins: Record<string, RemotePluginModule>) {
+  Object.entries(plugins).forEach(([packageName, pluginModule]) => {
+    const moduleId = getClientV2ModuleId(packageName);
+    window.define(moduleId, () => pluginModule);
+    defineAppDevPluginModule(moduleId, pluginModule);
+  });
+}
+
 /**
  * @internal
  */
@@ -43,6 +63,12 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
  */
 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]);
@@ -75,6 +101,77 @@ export function getRemotePlugins(requirejs: any, pluginData: PluginData[] = []):
   });
 }
 
+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[];
@@ -103,15 +200,19 @@ export async function getPlugins(options: GetPluginsOption): Promise<Array<[stri
   }
 
   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;
 }