@nocobase/client-v2 2.1.0-beta.24 → 2.1.0-beta.25

package/src/flow/models/blocks/filter-form/__tests__/FilterFormBlockModel.cleanup.test.ts

@@ -0,0 +1,138 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import '@nocobase/client';
+import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { waitFor } from '@testing-library/react';
+import { TableBlockModel } from '../../table/TableBlockModel';
+import { FilterFormBlockModel } from '../FilterFormBlockModel';
+import { FilterFormGridModel } from '../FilterFormGridModel';
+import { FilterFormItemModel } from '../FilterFormItemModel';
+
+describe('FilterFormBlockModel cleanup', () => {
+  function createFilterFormSetup() {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FlowModel,
+      TableBlockModel,
+      FilterFormBlockModel,
+      FilterFormGridModel,
+      FilterFormItemModel,
+    });
+
+    const blockGridModel = engine.createModel<FlowModel>({
+      uid: 'block-grid',
+      use: 'FlowModel',
+      subModels: {
+        items: [],
+      },
+    } as any);
+
+    const tableBlock = blockGridModel.addSubModel('items', {
+      uid: 'target-table',
+      use: 'TableBlockModel',
+    }) as TableBlockModel;
+
+    const filterForm = blockGridModel.addSubModel('items', {
+      uid: 'filter-form',
+      use: 'FilterFormBlockModel',
+      subModels: {
+        grid: {
+          uid: 'filter-grid',
+          use: 'FilterFormGridModel',
+          subModels: {
+            items: [],
+          },
+        },
+      },
+    }) as FilterFormBlockModel;
+
+    const filterItem = filterForm.subModels.grid.addSubModel('items', {
+      uid: 'filter-item',
+      use: 'FilterFormItemModel',
+      stepParams: {
+        filterFormItemSettings: {
+          init: {
+            defaultTargetUid: tableBlock.uid,
+          },
+        },
+      },
+    }) as FilterFormItemModel;
+
+    const removeFilterConfig = vi.fn(async () => {});
+    const saveConnectFieldsConfig = vi.fn(async () => {});
+    const getConnectFieldsConfig = vi.fn(() => ({
+      targets: [
+        {
+          targetId: tableBlock.uid,
+          filterPaths: ['name'],
+        },
+      ],
+    }));
+
+    filterForm.context.defineProperty('blockGridModel', { value: blockGridModel });
+    filterForm.context.defineProperty('filterManager', {
+      value: {
+        removeFilterConfig,
+        saveConnectFieldsConfig,
+        getConnectFieldsConfig,
+      },
+    });
+    filterForm.subModels.grid.context.defineProperty('filterManager', {
+      value: {
+        removeFilterConfig,
+        saveConnectFieldsConfig,
+        getConnectFieldsConfig,
+      },
+    });
+
+    const destroySpy = vi.spyOn(filterItem, 'destroy').mockResolvedValue(true as any);
+    vi.spyOn(filterForm as any, 'applyDefaultsAndInitialFilter').mockResolvedValue(undefined);
+
+    (filterForm as any).onMount();
+
+    return {
+      engine,
+      blockGridModel,
+      tableBlock,
+      filterForm,
+      filterItem,
+      removeFilterConfig,
+      saveConnectFieldsConfig,
+      getConnectFieldsConfig,
+      destroySpy,
+    };
+  }
+
+  it('does not remove filter items when target block is only removed during popup teardown', async () => {
+    const { engine, blockGridModel, tableBlock, filterForm, removeFilterConfig, destroySpy } = createFilterFormSetup();
+
+    await Promise.resolve(engine.removeModelWithSubModels(blockGridModel.uid));
+
+    expect(removeFilterConfig).not.toHaveBeenCalled();
+    expect(destroySpy).not.toHaveBeenCalled();
+
+    (filterForm as any).onUnmount();
+    expect(engine.getModel(tableBlock.uid)).toBeUndefined();
+  });
+
+  it('removes filter items when target block is actually destroyed', async () => {
+    const { tableBlock, filterForm, removeFilterConfig, destroySpy } = createFilterFormSetup();
+
+    await tableBlock.destroy();
+
+    await waitFor(() => {
+      expect(removeFilterConfig).toHaveBeenCalledWith({ filterId: 'filter-item' });
+      expect(destroySpy).toHaveBeenCalledTimes(1);
+    });
+
+    (filterForm as any).onUnmount();
+  });
+});

package/src/flow/models/blocks/form/__tests__/FormBlockModel.test.tsx

@@ -85,6 +85,7 @@ async function setupFormModel() {
       { name: 'assignees', type: 'belongsToMany', target: 'users', interface: 'm2m' },
       { name: 'note', type: 'string', interface: 'text' },
       { name: 'status', type: 'string', interface: 'text' },
+      { name: 'rawPayload', type: 'json', filterable: true },
     ],
   });
 
@@ -283,6 +284,27 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(params.note).toBeUndefined();
   });
 
+  it('keeps interfaced fields in formValues meta even when they are not configured in the form grid', async () => {
+    const model = await setupFormModel();
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+    mockFormGridEnabledFields(model, ['customer', 'note']);
+
+    const opt = (model.context as any).getPropertyOptions('formValues');
+    const meta = await opt.meta();
+    const props = await meta.properties();
+
+    expect(props).toHaveProperty('customer');
+    expect(props).toHaveProperty('note');
+    expect(props).toHaveProperty('status');
+    expect(props).toHaveProperty('assignees');
+    expect(props).not.toHaveProperty('rawPayload');
+  });
+
   it('registers formValuesChange event and eventSettings flow', async () => {
     const engine = new FlowEngine();
     const TestFormModel = await createTestFormModelSubclass();

package/src/flow/models/blocks/table/JSColumnModel.tsx

@@ -30,6 +30,27 @@ import { TableCustomColumnModel } from './TableCustomColumnModel';
 import { CodeEditor } from '../../../components/code-editor';
 import { resolveRunJsParams } from '../../utils/resolveRunJsParams';
 
+function getRecordRenderSignature(record: any) {
+  if (!record || typeof record !== 'object') {
+    return String(record);
+  }
+
+  try {
+    const seen = new WeakSet();
+    return JSON.stringify(record, (_key, value) => {
+      if (value && typeof value === 'object') {
+        if (seen.has(value)) {
+          return '[Circular]';
+        }
+        seen.add(value);
+      }
+      return value;
+    });
+  } catch (error) {
+    return String(record);
+  }
+}
+
 export class JSColumnModel extends TableCustomColumnModel {
   // Stable per‑instance render component to avoid remounts across re-renders
   private _RenderComponent?: React.ComponentType;
@@ -113,7 +134,13 @@ export class JSColumnModel extends TableCustomColumnModel {
         // 使用记录主键作为 fork key，避免分页后 index 复用导致 fork 复用
         const tk = this.context.collection?.getFilterByTK?.(record);
         const forkKey = tk ?? record?.id ?? index;
+        const recordSignature = getRecordRenderSignature(record);
         const fork = this.createFork({}, String(forkKey));
+        const previousRecordSignature = (fork as any).__recordRenderSignature;
+        if (previousRecordSignature !== recordSignature) {
+          (fork as any).__recordRenderSignature = recordSignature;
+          fork.invalidateFlowCache('beforeRender');
+        }
         const recordMeta: PropertyMetaFactory = createRecordMetaFactory(
           () => fork.context.collection,
           fork.context.t('Current record'),
@@ -137,7 +164,7 @@ export class JSColumnModel extends TableCustomColumnModel {
         fork.context.defineProperty('recordIndex', {
           get: () => index,
         });
-        return <MemoFlowModelRenderer key={fork.uid} model={fork} />;
+        return <MemoFlowModelRenderer key={`${fork.uid}:${recordSignature}`} model={fork} />;
       },
     };
   }
@@ -264,7 +291,8 @@ JSColumnModel.registerFlow({
 
         ctx.onRefReady(ctx.ref, async (element) => {
           ctx.defineProperty('element', {
-            get: () => new ElementProxy(element),
+            get: () => new ElementProxy((ctx.ref?.current as HTMLElement | null) || element),
+            cache: false,
           });
           const navigator = createSafeNavigator();
           await ctx.runjs(

package/src/flow/models/blocks/table/TableBlockModel.tsx

@@ -314,7 +314,14 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
                   onSuccess: (values) => {
                     const collectionField = this.collection.getField(dataIndex);
                     record[dataIndex] = values[dataIndex];
-                    setNestedValue(this.resource.getData(), recordIndex, record);
+                    if (typeof recordIndex === 'number') {
+                      this.resource.setItem(recordIndex, record);
+                    } else {
+                      const nextData = _.cloneDeep(this.resource.getData());
+                      setNestedValue(nextData, recordIndex, record);
+                      this.resource.setData(nextData);
+                    }
+                    this.resource.emit('refresh');
                     // 仅重渲染单元格
                     const fork: ForkFlowModel = model.subModels.field.createFork({}, `${recordIndex}`);
                     // Provide expandable meta for current row record based on the collection in context

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -313,6 +313,7 @@ export class TableColumnModel extends DisplayItemModel {
             ? this.fieldPath.replace(`${this.context.prefixFieldPath}.`, '')
             : this.fieldPath;
           const value = get(record, namePath);
+          fork.setProps({ value });
           return (
             <FormItem key={field.uid} {...omit(this.props, 'title')} value={value} noStyle={true}>
               <FieldModelRenderer model={fork} />

package/src/flow/models/blocks/table/__tests__/JSColumnModel.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+import { JSColumnModel } from '../JSColumnModel';
+
+describe('JSColumnModel row refresh', () => {
+  it('changes renderer key and invalidates beforeRender cache when row content changes', () => {
+    const engine = new FlowEngine();
+    const model = new JSColumnModel({
+      uid: 'js-column-row-refresh',
+      flowEngine: engine,
+      props: {
+        width: 200,
+        title: 'JS column',
+      },
+    } as any);
+
+    engine.context.dataSourceManager.getDataSource('main').addCollection({
+      name: 'users',
+      filterTargetKey: 'id',
+      fields: [
+        { name: 'id', type: 'integer', interface: 'number' },
+        { name: 'age', type: 'integer', interface: 'integer' },
+        { name: 'workyears', type: 'float', interface: 'number' },
+      ],
+    });
+
+    const collection = engine.context.dataSourceManager.getCollection('main', 'users');
+    model.context.defineProperty('collection', {
+      value: collection,
+    });
+
+    const column = model.getColumnProps();
+    const first = column.render(null, { id: 1, age: 3, workyears: 39.2 }, 0) as any;
+    const fork = model.getFork('1') as any;
+    const invalidateFlowCache = vi.fn();
+    fork.invalidateFlowCache = invalidateFlowCache;
+    const second = column.render(null, { id: 1, age: 37, workyears: 39.2 }, 0) as any;
+
+    expect(first.key).not.toBe(second.key);
+    expect(invalidateFlowCache).toHaveBeenCalledWith('beforeRender');
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.quickEditRefresh.test.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+
+describe('TableBlockModel quick edit refresh', () => {
+  it('updates table data through a new array reference after quick editing a flat row', () => {
+    const engine = new FlowEngine();
+    const resource = engine.context.createResource(MultiRecordResource);
+    const original = [
+      { id: 1, title: 'old title', status: 'draft' },
+      { id: 2, title: 'other title', status: 'published' },
+    ];
+
+    resource.setData(original);
+    const before = resource.getData();
+    const editedRecord = { ...before[0], title: 'new title' };
+
+    resource.setItem(0, editedRecord);
+
+    expect(resource.getData()).not.toBe(before);
+    expect(resource.getData()[0]).toEqual(editedRecord);
+    expect(resource.getData()[1]).toEqual(original[1]);
+  });
+
+  it('notifies mounted JS fields after quick editing local table data', () => {
+    const engine = new FlowEngine();
+    const resource = engine.context.createResource(MultiRecordResource);
+    const original = [{ id: 1, title: 'old title', status: 'draft' }];
+    let refreshCount = 0;
+    resource.on('refresh', () => {
+      refreshCount += 1;
+    });
+
+    resource.setData(original);
+    const editedRecord = { ...resource.getData()[0], title: 'new title' };
+    resource.setItem(0, editedRecord);
+    resource.emit('refresh');
+
+    expect(refreshCount).toBe(1);
+  });
+});

package/src/flow/models/fields/JSFieldModel.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ElementProxy, tExpr, createSafeWindow, createSafeDocument, createSafeNavigator } from '@nocobase/flow-engine';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { resolveRunJsParams } from '../utils/resolveRunJsParams';
 import { CodeEditor } from '../../components/code-editor';
@@ -41,6 +41,10 @@ ctx.render(<JsReadonlyField />);
  */
 export class JSFieldModel extends FieldModel {
   private _mountedOnce = false; // prevent first-mount double-run
+  private _lastRenderedElement?: HTMLSpanElement | null;
+  private _pendingRenderedElement?: HTMLSpanElement | null;
+  private _lastRunJs?: { code: string; value: any; element: HTMLSpanElement | null };
+
   getInputArgs() {
     const field = this.context.collectionField;
     if (field?.isAssociationField?.()) {
@@ -75,19 +79,10 @@ export class JSFieldModel extends FieldModel {
    * 说明：fork 实例在表格逐行渲染时会复用该逻辑，确保按值更新。
    */
   useHooksBeforeRender() {
-    // 单一副作用：当 code 或 value 变化，且二者都已就绪时执行一次
-    // 通过记忆上次运行的输入，避免相同输入导致的重复执行
     const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const lastRunRef = useRef<{ code: string; value: any } | null>(null);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      const valueNow = this.props.value;
-      const codeNow = (typeof codeParam === 'string' && codeParam.trim().length ? codeParam : DEFAULT_CODE).trim();
-      const last = lastRunRef.current;
-      if (last && last.code === codeNow && last.value === valueNow) return;
-      lastRunRef.current = { code: codeNow, value: valueNow };
-      this.applyFlow('jsSettings');
+      this.refreshRenderedElement(this.context.ref?.current as HTMLSpanElement | null);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [codeParam, this.props.value]);
   }
@@ -95,8 +90,52 @@ export class JSFieldModel extends FieldModel {
   /**
    * 渲染一个占位容器，供 JS 脚本写入内容
    */
+  private getRunJsCode() {
+    const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+    return (typeof codeParam === 'string' && codeParam.trim().length ? codeParam : DEFAULT_CODE).trim();
+  }
+
+  private refreshRenderedElement(element: HTMLSpanElement | null) {
+    if (!element || this._pendingRenderedElement === element) {
+      return;
+    }
+
+    this._pendingRenderedElement = element;
+    const ref = this.context.ref as React.MutableRefObject<HTMLSpanElement | null>;
+
+    queueMicrotask(() => {
+      if (this._pendingRenderedElement === element) {
+        this._pendingRenderedElement = null;
+      }
+      if (ref.current !== element) {
+        return;
+      }
+      const code = this.getRunJsCode();
+      const value = this.props.value;
+      const last = this._lastRunJs;
+      if (last && last.element === element && last.code === code && Object.is(last.value, value)) {
+        return;
+      }
+      this._lastRunJs = { code, value, element };
+      void this.applyFlow('jsSettings');
+    });
+  }
+
   render() {
-    return <span ref={this.context.ref} style={{ display: 'inline-block', maxWidth: '100%' }} />;
+    const ref = this.context.ref as React.MutableRefObject<HTMLSpanElement | null>;
+    const assignRef = (element: HTMLSpanElement | null) => {
+      ref.current = element;
+      if (!element) {
+        return;
+      }
+
+      const elementChanged = this._lastRenderedElement && this._lastRenderedElement !== element;
+      this._lastRenderedElement = element;
+      if (elementChanged || !this._mountedOnce) {
+        this.refreshRenderedElement(element);
+      }
+    };
+    return <span ref={assignRef} style={{ display: 'inline-block', maxWidth: '100%' }} />;
   }
 
   /**
@@ -106,7 +145,7 @@ export class JSFieldModel extends FieldModel {
   protected onMount() {
     if (this._mountedOnce) {
       if (this.context.ref?.current) {
-        this.rerender();
+        this.refreshRenderedElement(this.context.ref.current as HTMLSpanElement);
       }
     }
     this._mountedOnce = true;
@@ -165,7 +204,8 @@ JSFieldModel.registerFlow({
         // 暴露 element 与 value 到运行上下文
         ctx.onRefReady(ctx.ref, async (element) => {
           ctx.defineProperty('element', {
-            get: () => new ElementProxy(element),
+            get: () => new ElementProxy((ctx.ref?.current as HTMLElement | null) || element),
+            cache: false,
           });
           ctx.defineProperty('value', {
             get: () => ctx.model.props?.value,

package/src/utils/globalDeps.ts

@@ -15,6 +15,7 @@ import * as formilyReactive from '@formily/reactive';
 import * as formilyShared from '@formily/shared';
 import * as nocobaseClientUtils from '@nocobase/utils/client';
 import * as nocobaseFlowEngine from '@nocobase/flow-engine';
+import * as ahooks from 'ahooks';
 import * as antd from 'antd';
 import * as i18next from 'i18next';
 import React from 'react';
@@ -61,4 +62,7 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
   requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
+
+  // utils
+  requirejs.define('ahooks', () => ahooks);
 }

package/src/utils/requirejs.ts

@@ -1686,7 +1686,7 @@ export function getRequireJs(): RequireJS {
 
           //Join the path parts together, then figure out if baseUrl is needed.
           url = syms.join('/');
-          url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js'));
+          url += (ext || (/^data\:|^blob\:|\?/.test(url) || /\.js(?:$|[?#])/.test(url) || skipExt ? '' : '.js'));
           url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
         }