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

package/lib/data-source/index.js

@@ -461,6 +461,12 @@ const _Collection = class _Collection {
   }
   get titleCollectionField() {
     const titleFieldName = this.options.titleField || this.filterTargetKey;
+    if (Array.isArray(titleFieldName)) {
+      if (titleFieldName.length !== 1) {
+        return void 0;
+      }
+      return this.getField(titleFieldName[0]);
+    }
     const titleCollectionField = this.getField(titleFieldName);
     return titleCollectionField;
   }

package/lib/locale/en-US.json

@@ -34,6 +34,7 @@
   "Failed to destroy model after creation error": "Failed to destroy model after creation error",
   "Failed to get action {{action}}": "Failed to get action {{action}}",
   "Failed to get configurable flows for model {{model}}": "Failed to get configurable flows for model {{model}}",
+  "Attributes are unavailable before selecting a record": "Attributes are unavailable before selecting a record",
   "Failed to import FormDialog": "Failed to import FormDialog",
   "Failed to import FormDialog or FormStep": "Failed to import FormDialog or FormStep",
   "Failed to import Formily components": "Failed to import Formily components",

package/lib/locale/index.d.ts

@@ -43,6 +43,7 @@ export declare const locales: {
         "Failed to destroy model after creation error": string;
         "Failed to get action {{action}}": string;
         "Failed to get configurable flows for model {{model}}": string;
+        "Attributes are unavailable before selecting a record": string;
         "Failed to import FormDialog": string;
         "Failed to import FormDialog or FormStep": string;
         "Failed to import Formily components": string;
@@ -120,6 +121,7 @@ export declare const locales: {
         "Failed to destroy model after creation error": string;
         "Failed to get action {{action}}": string;
         "Failed to get configurable flows for model {{model}}": string;
+        "Attributes are unavailable before selecting a record": string;
         "Failed to import FormDialog": string;
         "Failed to import FormDialog or FormStep": string;
         "Failed to import Formily components": string;

package/lib/locale/zh-CN.json

@@ -31,6 +31,7 @@
   "Failed to destroy model after creation error": "创建错误后销毁模型失败",
   "Failed to get action {{action}}": "获取 action '{{action}}' 失败",
   "Failed to get configurable flows for model {{model}}": "获取模型 '{{model}}' 的可配置 flows 失败",
+  "Attributes are unavailable before selecting a record": "选择记录之前，当前项属性不可用",
   "Failed to import FormDialog": "导入 FormDialog 失败",
   "Failed to import FormDialog or FormStep": "导入 FormDialog 或 FormStep 失败",
   "Failed to import Formily components": "导入 Formily 组件失败",

package/lib/reactive/observer.js

@@ -51,8 +51,31 @@ const observer = /* @__PURE__ */ __name((Component, options) => {
     const ctxRef = (0, import_react.useRef)(ctx);
     ctxRef.current = ctx;
     const pendingDisposerRef = (0, import_react.useRef)(null);
+    const pendingTimerRef = (0, import_react.useRef)(null);
+    const clearPendingDisposer = /* @__PURE__ */ __name(() => {
+      if (pendingDisposerRef.current) {
+        pendingDisposerRef.current();
+        pendingDisposerRef.current = null;
+      }
+    }, "clearPendingDisposer");
+    const clearPendingTimer = /* @__PURE__ */ __name(() => {
+      if (pendingTimerRef.current) {
+        clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = null;
+      }
+    }, "clearPendingTimer");
+    const isContextActive = /* @__PURE__ */ __name(() => {
+      var _a, _b;
+      const pageActive = getPageActive(ctxRef.current);
+      const tabActive = (_b = (_a = ctxRef.current) == null ? void 0 : _a.tabActive) == null ? void 0 : _b.value;
+      return pageActive !== false && tabActive !== false;
+    }, "isContextActive");
     (0, import_react.useEffect)(() => {
       return () => {
+        if (pendingTimerRef.current) {
+          clearTimeout(pendingTimerRef.current);
+          pendingTimerRef.current = null;
+        }
         if (pendingDisposerRef.current) {
           pendingDisposerRef.current();
           pendingDisposerRef.current = null;
@@ -62,30 +85,37 @@ const observer = /* @__PURE__ */ __name((Component, options) => {
     const ObservedComponent = (0, import_react.useMemo)(
       () => (0, import_reactive_react.observer)(Component, {
         scheduler(updater) {
-          var _a, _b;
-          const pageActive = getPageActive(ctxRef.current);
-          const tabActive = (_b = (_a = ctxRef.current) == null ? void 0 : _a.tabActive) == null ? void 0 : _b.value;
-          if (pageActive === false || tabActive === false) {
-            setTimeout(() => {
+          if (!isContextActive()) {
+            if (pendingTimerRef.current || pendingDisposerRef.current) {
+              return;
+            }
+            pendingTimerRef.current = setTimeout(() => {
+              pendingTimerRef.current = null;
               if (pendingDisposerRef.current) {
                 return;
               }
-              const disposer = (0, import_reactive.autorun)(() => {
-                var _a2, _b2, _c, _d, _e, _f;
-                if (((_b2 = (_a2 = ctxRef.current) == null ? void 0 : _a2.pageActive) == null ? void 0 : _b2.value) && (((_d = (_c = ctxRef.current) == null ? void 0 : _c.tabActive) == null ? void 0 : _d.value) === true || ((_f = (_e = ctxRef.current) == null ? void 0 : _e.tabActive) == null ? void 0 : _f.value) === void 0)) {
+              if (isContextActive()) {
+                updater();
+                return;
+              }
+              pendingDisposerRef.current = (0, import_reactive.reaction)(
+                () => isContextActive(),
+                (active) => {
+                  if (!active) {
+                    return;
+                  }
+                  clearPendingDisposer();
                   updater();
-                  disposer == null ? void 0 : disposer();
-                  pendingDisposerRef.current = null;
+                },
+                {
+                  name: "FlowObserverPendingUpdate"
                 }
-              });
-              pendingDisposerRef.current = disposer;
+              );
             });
             return;
           }
-          if (pendingDisposerRef.current) {
-            pendingDisposerRef.current();
-            pendingDisposerRef.current = null;
-          }
+          clearPendingTimer();
+          clearPendingDisposer();
           updater();
         },
         ...options

package/lib/utils/runjsValue.js

@@ -231,6 +231,34 @@ function normalizeSubPath(raw) {
   return { subPath: s, wildcard: false };
 }
 __name(normalizeSubPath, "normalizeSubPath");
+function extractCtxRootUsage(expr) {
+  const raw = String(expr || "").trim();
+  if (!raw || raw === "ctx") return null;
+  const dotMatch = raw.match(/^ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*)([\s\S]*)$/);
+  if (dotMatch) {
+    const varName = dotMatch[1] || "";
+    const rest = dotMatch[2] || "";
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard
+    };
+  }
+  const bracketMatch = raw.match(/^ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]([\s\S]*)$/);
+  if (bracketMatch) {
+    const varName = bracketMatch[2] || "";
+    const rest = bracketMatch[3] || "";
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard
+    };
+  }
+  return null;
+}
+__name(extractCtxRootUsage, "extractCtxRootUsage");
 function extractUsedVariablePathsFromRunJS(code) {
   if (typeof code !== "string" || !code.trim()) return {};
   const src = stripStringsAndComments(code);
@@ -242,23 +270,25 @@ function extractUsedVariablePathsFromRunJS(code) {
     set.add(subPath || "");
     usage.set(varName, set);
   }, "add");
+  const addCtxUsage = /* @__PURE__ */ __name((expr) => {
+    const hit = extractCtxRootUsage(expr);
+    if (!(hit == null ? void 0 : hit.varName)) return;
+    add(hit.varName, hit.wildcard ? "" : hit.subPath);
+  }, "addCtxUsage");
   const dotRe = /ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*(?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   let match;
   while (match = dotRe.exec(src)) {
-    const pathAfterCtx = match[1] || "";
-    const firstKeyMatch = pathAfterCtx.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-    if (!firstKeyMatch) continue;
-    const firstKey = firstKeyMatch[1];
-    const rest = pathAfterCtx.slice(firstKey.length);
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(firstKey, wildcard ? "" : subPath);
+    addCtxUsage(`ctx.${match[1] || ""}`);
   }
   const bracketRootRe = /ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]((?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   while (match = bracketRootRe.exec(srcWithStrings)) {
-    const varName = match[2] || "";
-    const rest = match[3] || "";
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(varName, wildcard ? "" : subPath);
+    addCtxUsage(`ctx['${match[2] || ""}']${match[3] || ""}`);
+  }
+  const getVarRe = /ctx\.getVar\s*\(\s*(['"])((?:\\.|(?!\1)[\s\S])*)\1\s*\)/g;
+  while (match = getVarRe.exec(srcWithStrings)) {
+    const expr = String(match[2] || "").replace(/\\'/g, "'").replace(/\\"/g, '"').trim();
+    if (!expr.startsWith("ctx")) continue;
+    addCtxUsage(expr);
   }
   const out = {};
   for (const [k, set] of usage.entries()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.13",
+  "version": "2.1.0-beta.14",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-beta.13",
-    "@nocobase/shared": "2.1.0-beta.13",
+    "@nocobase/sdk": "2.1.0-beta.14",
+    "@nocobase/shared": "2.1.0-beta.14",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "691716e5f4e5f8bd3859d65bc8a29b4e3c32209b"
+  "gitHead": "cd55c9a14596d834c30c83a82c38f1f719f7aac4"
 }

package/src/data-source/index.ts

@@ -501,6 +501,12 @@ export class Collection {
 
   get titleCollectionField() {
     const titleFieldName = this.options.titleField || this.filterTargetKey;
+    if (Array.isArray(titleFieldName)) {
+      if (titleFieldName.length !== 1) {
+        return undefined;
+      }
+      return this.getField(titleFieldName[0]);
+    }
     const titleCollectionField = this.getField(titleFieldName);
     return titleCollectionField;
   }

package/src/locale/en-US.json

@@ -34,6 +34,7 @@
   "Failed to destroy model after creation error": "Failed to destroy model after creation error",
   "Failed to get action {{action}}": "Failed to get action {{action}}",
   "Failed to get configurable flows for model {{model}}": "Failed to get configurable flows for model {{model}}",
+  "Attributes are unavailable before selecting a record": "Attributes are unavailable before selecting a record",
   "Failed to import FormDialog": "Failed to import FormDialog",
   "Failed to import FormDialog or FormStep": "Failed to import FormDialog or FormStep",
   "Failed to import Formily components": "Failed to import Formily components",

package/src/locale/zh-CN.json

@@ -31,6 +31,7 @@
   "Failed to destroy model after creation error": "创建错误后销毁模型失败",
   "Failed to get action {{action}}": "获取 action '{{action}}' 失败",
   "Failed to get configurable flows for model {{model}}": "获取模型 '{{model}}' 的可配置 flows 失败",
+  "Attributes are unavailable before selecting a record": "选择记录之前，当前项属性不可用",
   "Failed to import FormDialog": "导入 FormDialog 失败",
   "Failed to import FormDialog or FormStep": "导入 FormDialog 或 FormStep 失败",
   "Failed to import Formily components": "导入 Formily 组件失败",

package/src/reactive/__tests__/observer.test.tsx

@@ -208,4 +208,86 @@ describe('observer', () => {
     expect(screen.getByText('Count: 0')).toBeInTheDocument();
     expect(screen.queryByText('Count: 1')).not.toBeInTheDocument();
   });
+
+  it('should flush pending update without TDZ error when context becomes active before timer callback runs', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const model = observable({ count: 0 });
+      const pageActive = observable.ref(false);
+      const tabActive = observable.ref(true);
+
+      const context = {
+        pageActive,
+        tabActive,
+      };
+
+      (useFlowContext as any).mockReturnValue(context);
+
+      const Component = observer(() => <div>Count: {model.count}</div>);
+
+      render(<Component />);
+
+      expect(screen.getByText('Count: 0')).toBeInTheDocument();
+
+      act(() => {
+        model.count++;
+        pageActive.value = true;
+      });
+
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      expect(screen.getByText('Count: 1')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('should cleanup pending timer and listener on unmount', async () => {
+    vi.useFakeTimers();
+
+    try {
+      const model = observable({ count: 0 });
+      const pageActive = observable.ref(false);
+      const tabActive = observable.ref(true);
+      const renderSpy = vi.fn();
+
+      const context = {
+        pageActive,
+        tabActive,
+      };
+
+      (useFlowContext as any).mockReturnValue(context);
+
+      const Component = observer(() => {
+        renderSpy(model.count);
+        return <div>Count: {model.count}</div>;
+      });
+
+      const { unmount } = render(<Component />);
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+      expect(screen.getByText('Count: 0')).toBeInTheDocument();
+
+      act(() => {
+        model.count++;
+      });
+
+      unmount();
+
+      act(() => {
+        pageActive.value = true;
+      });
+
+      await act(async () => {
+        await vi.runAllTimersAsync();
+      });
+
+      expect(renderSpy).toHaveBeenCalledTimes(1);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/src/reactive/observer.tsx

@@ -10,7 +10,7 @@
 import { observer as originalObserver, IObserverOptions, ReactFC } from '@formily/reactive-react';
 import React, { useMemo, useEffect, useRef } from 'react';
 import { useFlowContext } from '../FlowContextProvider';
-import { autorun } from '@formily/reactive';
+import { reaction } from '@formily/reactive';
 import { FlowEngineContext } from '..';
 
 type ObserverComponentProps<P, Options extends IObserverOptions> = Options extends {
@@ -30,12 +30,67 @@ export const observer = <P, Options extends IObserverOptions = IObserverOptions>
     const ctxRef = useRef(ctx);
     ctxRef.current = ctx;
 
-    // Store the pending disposer to avoid creating multiple listeners
+    // 保存延迟更新的监听器，避免重复创建监听。
     const pendingDisposerRef = useRef<(() => void) | null>(null);
+    // 保存延迟创建监听器的定时器，避免组件卸载后仍继续调度。
+    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-    // Cleanup on unmount
+    /**
+     * 清理挂起的可见性监听器。
+     *
+     * @example
+     * ```typescript
+     * clearPendingDisposer();
+     * ```
+     */
+    const clearPendingDisposer = () => {
+      if (pendingDisposerRef.current) {
+        pendingDisposerRef.current();
+        pendingDisposerRef.current = null;
+      }
+    };
+
+    /**
+     * 清理挂起的定时器。
+     *
+     * @example
+     * ```typescript
+     * clearPendingTimer();
+     * ```
+     */
+    const clearPendingTimer = () => {
+      if (pendingTimerRef.current) {
+        clearTimeout(pendingTimerRef.current);
+        pendingTimerRef.current = null;
+      }
+    };
+
+    /**
+     * 判断当前页面与标签页是否允许立即更新。
+     *
+     * @returns 当前上下文是否处于可更新状态。
+     * @example
+     * ```typescript
+     * if (isContextActive()) {
+     *   updater();
+     * }
+     * ```
+     */
+    const isContextActive = () => {
+      const pageActive = getPageActive(ctxRef.current);
+      const tabActive = ctxRef.current?.tabActive?.value;
+
+      return pageActive !== false && tabActive !== false;
+    };
+
+    // 组件卸载时统一清理所有挂起任务，避免异步回调在卸载后继续运行。
     useEffect(() => {
       return () => {
+        if (pendingTimerRef.current) {
+          clearTimeout(pendingTimerRef.current);
+          pendingTimerRef.current = null;
+        }
+
         if (pendingDisposerRef.current) {
           pendingDisposerRef.current();
           pendingDisposerRef.current = null;
@@ -47,38 +102,45 @@ export const observer = <P, Options extends IObserverOptions = IObserverOptions>
       () =>
         originalObserver(Component, {
           scheduler(updater) {
-            const pageActive = getPageActive(ctxRef.current);
-            const tabActive = ctxRef.current?.tabActive?.value;
+            if (!isContextActive()) {
+              if (pendingTimerRef.current || pendingDisposerRef.current) {
+                return;
+              }
+
+              // 通过异步任务打断同步调度，避免连续触发时形成递归更新。
+              pendingTimerRef.current = setTimeout(() => {
+                pendingTimerRef.current = null;
 
-            if (pageActive === false || tabActive === false) {
-              // Avoid stack overflow
-              setTimeout(() => {
-                // If there is already a pending updater, do nothing
                 if (pendingDisposerRef.current) {
                   return;
                 }
 
-                // Delay the update until the page and tab become active
-                const disposer = autorun(() => {
-                  if (
-                    ctxRef.current?.pageActive?.value &&
-                    (ctxRef.current?.tabActive?.value === true || ctxRef.current?.tabActive?.value === undefined)
-                  ) {
+                if (isContextActive()) {
+                  updater();
+                  return;
+                }
+
+                // 只监听组合后的“是否可更新”状态，条件恢复后执行一次并立即销毁。
+                pendingDisposerRef.current = reaction(
+                  () => isContextActive(),
+                  (active) => {
+                    if (!active) {
+                      return;
+                    }
+
+                    clearPendingDisposer();
                     updater();
-                    disposer?.();
-                    pendingDisposerRef.current = null;
-                  }
-                });
-                pendingDisposerRef.current = disposer;
+                  },
+                  {
+                    name: 'FlowObserverPendingUpdate',
+                  },
+                );
               });
               return;
             }
 
-            // If we are updating immediately, clear any pending disposer
-            if (pendingDisposerRef.current) {
-              pendingDisposerRef.current();
-              pendingDisposerRef.current = null;
-            }
+            clearPendingTimer();
+            clearPendingDisposer();
 
             updater();
           },

package/src/utils/__tests__/runjsValue.test.ts

@@ -41,4 +41,15 @@ describe('runjsValue utils', () => {
     expect(out.someVar).toContain('');
     expect(out.user).toContain('name');
   });
+
+  it('extractUsedVariablePathsFromRunJS: extracts ctx.getVar string paths', () => {
+    const code = `
+      const phone = await ctx.getVar('ctx.item.value.phone');
+      const assignee = await ctx.getVar("ctx.user.profile.name");
+      return [phone, assignee];
+    `;
+    const out = extractUsedVariablePathsFromRunJS(code);
+    expect(out.item).toContain('value.phone');
+    expect(out.user).toContain('profile.name');
+  });
 });

package/src/utils/runjsValue.ts

@@ -236,6 +236,37 @@ function normalizeSubPath(raw: string): { subPath: string; wildcard: boolean } {
   return { subPath: s, wildcard: false };
 }
 
+function extractCtxRootUsage(expr: string): { varName: string; subPath: string; wildcard: boolean } | null {
+  const raw = String(expr || '').trim();
+  if (!raw || raw === 'ctx') return null;
+
+  const dotMatch = raw.match(/^ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*)([\s\S]*)$/);
+  if (dotMatch) {
+    const varName = dotMatch[1] || '';
+    const rest = dotMatch[2] || '';
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard,
+    };
+  }
+
+  const bracketMatch = raw.match(/^ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]([\s\S]*)$/);
+  if (bracketMatch) {
+    const varName = bracketMatch[2] || '';
+    const rest = bracketMatch[3] || '';
+    const normalized = normalizeSubPath(rest);
+    return {
+      varName,
+      subPath: normalized.subPath,
+      wildcard: normalized.wildcard,
+    };
+  }
+
+  return null;
+}
+
 /**
  * Heuristic extraction of ctx variable usage from RunJS code.
  *
@@ -256,27 +287,35 @@ export function extractUsedVariablePathsFromRunJS(code: string): Record<string,
     usage.set(varName, set);
   };
 
+  const addCtxUsage = (expr: string) => {
+    const hit = extractCtxRootUsage(expr);
+    if (!hit?.varName) return;
+    add(hit.varName, hit.wildcard ? '' : hit.subPath);
+  };
+
   // dot form: ctx.foo.bar / ctx.foo[0].bar (excluding ctx.method(...))
   const dotRe = /ctx\.([a-zA-Z_$][a-zA-Z0-9_$]*(?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   let match: RegExpExecArray | null;
   while ((match = dotRe.exec(src))) {
-    const pathAfterCtx = match[1] || '';
-    const firstKeyMatch = pathAfterCtx.match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
-    if (!firstKeyMatch) continue;
-    const firstKey = firstKeyMatch[1];
-    const rest = pathAfterCtx.slice(firstKey.length);
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(firstKey, wildcard ? '' : subPath);
+    addCtxUsage(`ctx.${match[1] || ''}`);
   }
 
   // bracket root: ctx['foo'].bar / ctx["foo"][0] (excluding ctx['method'](...))
   const bracketRootRe =
     /ctx\s*\[\s*(['"])([a-zA-Z_$][a-zA-Z0-9_$]*)\1\s*\]((?:(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)|(?:\[[^\]]+\]))*)(?!\s*\()/g;
   while ((match = bracketRootRe.exec(srcWithStrings))) {
-    const varName = match[2] || '';
-    const rest = match[3] || '';
-    const { subPath, wildcard } = normalizeSubPath(rest);
-    add(varName, wildcard ? '' : subPath);
+    addCtxUsage(`ctx['${match[2] || ''}']${match[3] || ''}`);
+  }
+
+  // async-safe helper form: await ctx.getVar('ctx.foo.bar')
+  const getVarRe = /ctx\.getVar\s*\(\s*(['"])((?:\\.|(?!\1)[\s\S])*)\1\s*\)/g;
+  while ((match = getVarRe.exec(srcWithStrings))) {
+    const expr = String(match[2] || '')
+      .replace(/\\'/g, "'")
+      .replace(/\\"/g, '"')
+      .trim();
+    if (!expr.startsWith('ctx')) continue;
+    addCtxUsage(expr);
   }
 
   const out: Record<string, string[]> = {};