@nocobase/flow-engine 2.1.0-beta.14 → 2.1.0-beta.16

package/lib/components/FlowModelRenderer.js

@@ -61,11 +61,12 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive.observer)(
     showErrorFallback,
     settingsMenuLevel,
     extraToolbarItems,
-    fallback
+    fallback,
+    useCache
   }) => {
     const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache
+      useCache
     });
     (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
     if (pending) {
@@ -195,13 +196,15 @@ const FlowModelRenderer = (0, import_reactive.observer)(
     extraToolbarItems,
     useCache
   }) => {
+    var _a;
+    const resolvedUseCache = typeof useCache === "boolean" ? useCache : (_a = model == null ? void 0 : model.context) == null ? void 0 : _a.useCache;
     (0, import_react.useEffect)(() => {
-      if (model == null ? void 0 : model.context) {
+      if ((model == null ? void 0 : model.context) && typeof resolvedUseCache !== "undefined") {
         model.context.defineProperty("useCache", {
-          value: typeof useCache === "boolean" ? useCache : model.context.useCache
+          value: resolvedUseCache
         });
       }
-    }, [model == null ? void 0 : model.context, useCache]);
+    }, [model == null ? void 0 : model.context, resolvedUseCache]);
     if (!model || typeof model.render !== "function") {
       console.warn("FlowModelRenderer: Invalid model or render method not found.", model);
       return null;
@@ -218,7 +221,8 @@ const FlowModelRenderer = (0, import_reactive.observer)(
         showErrorFallback,
         settingsMenuLevel,
         extraToolbarItems,
-        fallback
+        fallback,
+        useCache: resolvedUseCache
       }
     );
     if (showErrorFallback) {

package/lib/components/MobilePopup.js

@@ -41,11 +41,12 @@ __export(MobilePopup_exports, {
 });
 module.exports = __toCommonJS(MobilePopup_exports);
 var import_antd = require("antd");
-var import_antd_mobile = require("antd-mobile");
 var import_react = __toESM(require("react"));
-var import_antd_mobile_icons = require("antd-mobile-icons");
 var import_MobilePopup = require("./MobilePopup.style");
 var import_react_i18next = require("react-i18next");
+var import_lazy_helper = require("../lazy-helper");
+const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
+const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
@@ -67,7 +68,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
     };
   }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd_mobile.Popup,
+    Popup,
     {
       className: `${componentCls} ${hashId} ${className || ""}`,
       visible,
@@ -81,7 +82,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       style,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
@@ -90,7 +91,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
         tabIndex: 0,
         "aria-label": t("Close")
       },
-      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+      /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),
     children,
     footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)

package/lib/components/settings/wrappers/contextual/FlowsFloatContextMenu.js

@@ -52,6 +52,13 @@ var import_reactive = require("../../../../reactive");
 var import_useFloatToolbarPortal = require("./useFloatToolbarPortal");
 var import_useFloatToolbarVisibility = require("./useFloatToolbarVisibility");
 const TOOLBAR_Z_INDEX = 999;
+const getFloatMenuInstanceId = /* @__PURE__ */ __name((model) => {
+  if (!model) {
+    return "";
+  }
+  const forkId = (model == null ? void 0 : model.isFork) ? model == null ? void 0 : model.forkId : void 0;
+  return forkId == null || forkId === "" ? String(model.uid || "") : `${String(model.uid || "")}::${String(forkId)}`;
+}, "getFloatMenuInstanceId");
 const hostContainerStyles = import_css.css`
   position: relative;
 
@@ -247,7 +254,7 @@ const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
   }
   return false;
 }, "detectButtonInDOM");
-const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, onSettingsMenuOpenChange, getPopupContainer) => {
+const renderToolbarItems = /* @__PURE__ */ __name((model, modelInstanceId, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, onSettingsMenuOpenChange, getPopupContainer) => {
   var _a, _b;
   const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
   const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
@@ -262,7 +269,7 @@ const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, show
         {
           key: itemConfig.key,
           model,
-          id: model.uid,
+          id: modelInstanceId,
           showDeleteButton,
           showCopyUidButton,
           menuLevels: settingsMenuLevel,
@@ -397,7 +404,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
       schedulePortalRectUpdate: /* @__PURE__ */ __name(() => {
       }, "schedulePortalRectUpdate")
     });
-    const modelUid = (model == null ? void 0 : model.uid) || "";
+    const modelUid = getFloatMenuInstanceId(model);
     const flowEngine = (0, import_provider.useFlowEngine)();
     const updatePortalRectProxy = (0, import_react.useCallback)(() => {
       portalActionsRef.current.updatePortalRect();
@@ -434,6 +441,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     const toolbarItems = (0, import_react.useMemo)(
       () => model ? renderToolbarItems(
         model,
+        modelUid,
         showDeleteButton,
         showCopyUidButton,
         flowEngine,
@@ -495,7 +503,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         ref: toolbarContainerRef,
         className: `nb-toolbar-container ${toolbarContainerClassName}`,
         style: toolbarContainerStyle,
-        "data-model-uid": model.uid
+        "data-model-uid": modelUid
       },
       showTitle && (model.title || model.extraTitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-title" }, model.title && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.title), model.extraTitle && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.extraTitle)),
       /* @__PURE__ */ import_react.default.createElement(
@@ -528,7 +536,7 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         className: `${hostContainerStyles} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
         style: containerStyle,
         "data-has-float-menu": "true",
-        "data-float-menu-model-uid": model.uid,
+        "data-float-menu-model-uid": modelUid,
         onMouseMove: handleChildHover,
         onMouseEnter: handleHostMouseEnter,
         onMouseLeave: handleHostMouseLeave

package/lib/components/subModel/AddSubModelButton.js

@@ -430,7 +430,7 @@ const AddSubModelButtonCore = /* @__PURE__ */ __name(function AddSubModelButton(
     }
     let addedModel;
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ...import_lodash.default.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,

package/lib/components/subModel/utils.js

@@ -44,7 +44,7 @@ __export(utils_exports, {
   buildWrapperFieldChildren: () => buildWrapperFieldChildren
 });
 module.exports = __toCommonJS(utils_exports);
-var _ = __toESM(require("lodash"));
+var import_lodash = __toESM(require("lodash"));
 var import_utils = require("../../utils");
 async function callHideFunction(hide, ctx) {
   if (typeof hide === "function") {
@@ -107,7 +107,7 @@ function buildSubModelChildren(M, ctx) {
             const extraArg = args && args.length > 0 ? args[args.length - 1] : void 0;
             const defaultOpts = await (0, import_utils.resolveCreateModelOptions)(meta == null ? void 0 : meta.createModelOptions, ctx, extraArg);
             const childOpts = await (0, import_utils.resolveCreateModelOptions)(src, ctx, extraArg);
-            return _.merge({}, _.cloneDeep(defaultOpts), childOpts);
+            return import_lodash.default.merge({}, import_lodash.default.cloneDeep(defaultOpts), childOpts);
           };
         }
         return node;

package/lib/flowEngine.d.ts

@@ -8,7 +8,7 @@ import { FlowResource } from './resources';
 import { Emitter } from './emitter';
 import ModelOperationScheduler from './scheduler/ModelOperationScheduler';
 import type { ScheduleOptions, ScheduledCancel } from './scheduler/ModelOperationScheduler';
-import type { ActionDefinition, ApplyFlowCacheEntry, CreateModelOptions, EventDefinition, FlowModelOptions, IFlowModelRepository, ModelConstructor, PersistOptions, ResourceType } from './types';
+import type { ActionDefinition, ApplyFlowCacheEntry, CreateModelOptions, EnsureBatchResult, EventDefinition, FlowModelLoaderInputMap, FlowModelOptions, IFlowModelRepository, ModelConstructor, PersistOptions, ResourceType } from './types';
 /**
  * FlowEngine is the core class of the flow engine, responsible for managing flow models, actions, model repository, and more.
  * It provides capabilities for registering, creating, finding, persisting, replacing, and moving models.
@@ -47,6 +47,28 @@ export declare class FlowEngine {
      * @private
      */
     private _modelClasses;
+    /**
+     * Registered model entries.
+     * Key is the model class name, value is the model loader entry.
+     * @private
+     */
+    private _modelLoaders;
+    /**
+     * In-flight model loading promises.
+     * Key is the model class name, value is the loading promise.
+     * @private
+     */
+    private _loadingModelPromises;
+    /**
+     * Whether model-loader preload has completed in this session.
+     * @private
+     */
+    private _modelLoadersPreloaded;
+    /**
+     * In-flight model-loader preload promise.
+     * @private
+     */
+    private _modelLoadersPreloadPromise?;
     /**
      * Created model instances.
      * Key is the model instance UID, value is the model instance object.
@@ -226,6 +248,10 @@ export declare class FlowEngine {
      * Get all registered global events.
      */
     getEvents<TModel extends FlowModel = FlowModel>(): Map<string, EventDefinition<TModel>>;
+    /**
+     * for proxy instance, the #registerModel can't be called.
+     */
+    private _registerModel;
     /**
      * Register multiple model classes.
      * @param {Record<string, ModelConstructor>} models Model class map, key is model name, value is model constructor
@@ -234,6 +260,102 @@ export declare class FlowEngine {
      * flowEngine.registerModels({ UserModel, OrderModel });
      */
     registerModels(models: Record<string, ModelConstructor | typeof FlowModel<any>>): void;
+    /**
+     * Register multiple model loader entries.
+     * The `extends` field declares parent class(es) for async subclass discovery via `getSubclassesOfAsync`.
+     * It accepts `string | ModelConstructor | (string | ModelConstructor)[]` and is normalized to `string[]` internally.
+     * @param {FlowModelLoaderInputMap} loaders Model loader input map
+     * @returns {void}
+     * @example
+     * flowEngine.registerModelLoaders({
+     *   DemoModel: {
+     *     extends: 'BaseModel',
+     *     loader: () => import('./models/DemoModel'),
+     *   },
+     * });
+     */
+    registerModelLoaders(loaders: FlowModelLoaderInputMap): void;
+    /**
+     * Get a registered model class (constructor) asynchronously.
+     * This will first ensure the model loader entry is resolved.
+     * @param {string} name Model class name
+     * @returns {Promise<ModelConstructor | undefined>} Model constructor, or undefined if not found
+     */
+    getModelClassAsync(name: string): Promise<ModelConstructor | undefined>;
+    /**
+     * Get all registered model classes asynchronously.
+     * This will first ensure all registered model loader entries are resolved.
+     * @returns {Promise<Map<string, ModelConstructor>>} Model class map
+     */
+    getModelClassesAsync(): Promise<Map<string, ModelConstructor>>;
+    /**
+     * Create and register a model instance asynchronously.
+     * This will first ensure all string-based model references in the model tree are resolved.
+     * @template T FlowModel subclass type, defaults to FlowModel.
+     * @param {CreateModelOptions} options Model creation options
+     * @returns {Promise<T>} Created model instance
+     */
+    createModelAsync<T extends FlowModel = FlowModel>(options: CreateModelOptions, extra?: {
+        delegateToParent?: boolean;
+        delegate?: FlowContext;
+    }): Promise<T>;
+    /**
+     * Normalize a loader result into a model constructor.
+     * @param {string} name Model class name
+     * @param {FlowModelLoaderResult} loaded Loader result
+     * @returns {ModelConstructor | null} Normalized model constructor
+     * @private
+     */
+    private normalizeModelLoaderResult;
+    /**
+     * Collect string-based model names from a model tree.
+     * @param {unknown} data Model tree data
+     * @param {Set<string>} names Model name set
+     * @private
+     */
+    private collectModelNamesFromTree;
+    /**
+     * Collect additional model names from object-form meta.createModelOptions defaults.
+     * @param {ModelConstructor} modelClass Model class constructor
+     * @param {Set<string>} names Model name set
+     * @private
+     */
+    private collectModelNamesFromMetaDefaults;
+    /**
+     * Ensure a single model class is available.
+     * @param {string} name Model class name
+     * @returns {Promise<ModelConstructor | null>} Model constructor or null when resolution fails
+     * @private
+     */
+    private ensureModel;
+    /**
+     * Ensure multiple model classes are available.
+     * @param {string[]} names Model class names
+     * @returns {Promise<EnsureBatchResult>} Batch ensure result
+     * @private
+     */
+    private ensureModels;
+    /**
+     * Resolve all unresolved string-based model references in a model tree before synchronous creation begins.
+     *
+     * Use this when you already have a model tree object, such as repository-returned data or resolved
+     * `createModelOptions`, and you need to ensure every string `use` in that tree has been loaded and
+     * registered into `_modelClasses` before calling `createModel()`.
+     *
+     * @param {unknown} data Model tree data
+     * @returns {Promise<EnsureBatchResult>} Batch ensure result
+     */
+    resolveModelTree(data: unknown): Promise<EnsureBatchResult>;
+    /**
+     * Preload all currently registered unresolved model loaders.
+     *
+     * This method is intended for flow-settings/discovery style entry points that need registered model
+     * classes to exist before UI is rendered, without requiring callers to know which specific models
+     * will be touched next.
+     *
+     * @returns {Promise<EnsureBatchResult>} Batch ensure result
+     */
+    preloadModelLoaders(): Promise<EnsureBatchResult>;
     registerResources(resources: Record<string, any>): void;
     createResource<T = FlowResource>(resourceType: ResourceType<T>, options?: {
         context?: FlowContext;
@@ -262,6 +384,15 @@ export declare class FlowEngine {
      * @returns {Map<string, ModelConstructor>} Model classes inherited from base class and passed the filter
      */
     getSubclassesOf(baseClass: string | ModelConstructor, filter?: (ModelClass: ModelConstructor, className: string) => boolean): Map<string, ModelConstructor>;
+    /**
+     * Asynchronously get all subclasses of a base class, including those registered via model loaders.
+     * Merges results from already-loaded classes (_modelClasses) and async loader entries with matching `extends` declarations.
+     * Loader-resolved classes are validated with `isInheritedFrom`; mismatches are warned and excluded.
+     * @param {string | ModelConstructor} baseClass Base class name or constructor
+     * @param {(ModelClass: ModelConstructor, className: string) => boolean} [filter] Optional filter function
+     * @returns {Promise<Map<string, ModelConstructor>>} Model classes that are subclasses of the base class
+     */
+    getSubclassesOfAsync(baseClass: string | ModelConstructor, filter?: (ModelClass: ModelConstructor, className: string) => boolean): Promise<Map<string, ModelConstructor>>;
     /**
      * Create and register a model instance.
      * If an instance with the same UID exists, returns the existing instance.