@nocobase/flow-engine 2.0.0-beta.2 → 2.0.0-beta.20

package/src/__tests__/runjsExternalLibs.test.ts

@@ -0,0 +1,242 @@
+/**
+ * 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 { beforeEach, describe, expect, it, vi } from 'vitest';
+import { observable } from '@formily/reactive';
+
+vi.mock('../utils/runjsModuleLoader', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../utils/runjsModuleLoader')>();
+  return {
+    ...actual,
+    runjsImportAsync: vi.fn(),
+    runjsRequireAsync: vi.fn(),
+  };
+});
+
+import { runjsImportAsync } from '../utils/runjsModuleLoader';
+import { FlowEngine, FlowRunJSContext } from '..';
+import { externalReactRender } from '../runjsLibs';
+
+function newEngine(): FlowEngine {
+  const engine = new FlowEngine();
+  // 提供最小 api，避免 ctx.auth getter 在打印对象时抛错
+  engine.context.defineProperty('api', { value: { auth: { role: 'guest', locale: 'zh-CN', token: '' } } });
+  return engine;
+}
+
+beforeEach(() => {
+  (globalThis as any).__nocobaseImportAsyncCache = undefined;
+  (globalThis as any).__nbRunjsRoots = undefined;
+  (runjsImportAsync as any).mockReset();
+
+  if (typeof window !== 'undefined') {
+    (window as any).__esm_cdn_base_url__ = 'https://esm.sh';
+    (window as any).__esm_cdn_suffix__ = '';
+  }
+});
+
+describe('RunJS external libs', () => {
+  it('should override ctx.React/ReactDOM when importing external react', async () => {
+    const engine = newEngine();
+    const ctx = new FlowRunJSContext(engine.context);
+
+    const fakeReact = { createElement: vi.fn(), Fragment: Symbol('Fragment') };
+    const fakeReactDOM = { createRoot: vi.fn(() => ({ render: vi.fn(), unmount: vi.fn() })) };
+
+    (runjsImportAsync as any).mockImplementation(async (url: string) => {
+      if (url === 'https://esm.sh/react@18.2.0') return fakeReact;
+      if (url === 'https://esm.sh/react-dom@18.2.0/client') return fakeReactDOM;
+      throw new Error(`unexpected import url: ${url}`);
+    });
+
+    await ctx.importAsync('react@18.2.0');
+
+    expect(ctx.React).toBe(fakeReact);
+    expect(ctx.libs.React).toBe(fakeReact);
+    expect(ctx.ReactDOM).toBe(fakeReactDOM);
+    expect(ctx.libs.ReactDOM).toBe(fakeReactDOM);
+
+    expect(runjsImportAsync).toHaveBeenNthCalledWith(1, 'https://esm.sh/react@18.2.0');
+    expect(runjsImportAsync).toHaveBeenNthCalledWith(2, 'https://esm.sh/react-dom@18.2.0/client');
+  });
+
+  it('should override ctx.antd and ctx.libs.antd when importing antd', async () => {
+    const engine = newEngine();
+    const ctx = new FlowRunJSContext(engine.context);
+
+    const fakeAntd = { Button: 'Button' };
+
+    (runjsImportAsync as any).mockImplementation(async (url: string) => {
+      if (url === 'https://esm.sh/antd@5.29.3?bundle=1') return fakeAntd;
+      throw new Error(`unexpected import url: ${url}`);
+    });
+
+    await ctx.importAsync('antd@5.29.3');
+
+    expect(ctx.antd).toBe(fakeAntd);
+    expect(ctx.libs.antd).toBe(fakeAntd);
+  });
+
+  it('should isolate roots by rendererKey and unmount on ReactDOM switch', () => {
+    const engine = newEngine();
+    const ctx = new FlowRunJSContext(engine.context);
+
+    const root1 = { render: vi.fn(), unmount: vi.fn() };
+    const root2 = { render: vi.fn(), unmount: vi.fn() };
+
+    const renderer1 = { createRoot: vi.fn(() => root1) };
+    const renderer2 = { createRoot: vi.fn(() => root2) };
+
+    ctx.defineProperty('ReactDOM', { value: renderer1 });
+
+    const container = document.createElement('div');
+
+    ctx.render({ step: 1 }, container);
+    ctx.render({ step: 2 }, container);
+
+    expect(renderer1.createRoot).toHaveBeenCalledTimes(1);
+    expect(root1.render).toHaveBeenCalledTimes(2);
+
+    ctx.defineProperty('ReactDOM', { value: renderer2 });
+    ctx.render({ step: 3 }, container);
+
+    expect(root1.unmount).toHaveBeenCalledTimes(1);
+    expect(renderer2.createRoot).toHaveBeenCalledTimes(1);
+    expect(root2.render).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not reuse roots across different ctx owners when rendererKey is the same', () => {
+    const engine1 = newEngine();
+    const ctx1 = new FlowRunJSContext(engine1.context);
+
+    const engine2 = newEngine();
+    const ctx2 = new FlowRunJSContext(engine2.context);
+
+    const root1 = { render: vi.fn(), unmount: vi.fn() };
+    const root2 = { render: vi.fn(), unmount: vi.fn() };
+
+    // 两个 ctx 共享同一个 ReactDOM 实例引用（rendererKey 相同），但 owner 不同；
+    // 若错误复用 entry，会导致旧 ctx 的 autorun 闭包继续持有并驱动新渲染，进而泄漏。
+    const renderer = {
+      createRoot: vi.fn(() => root1),
+    };
+    (renderer.createRoot as any).mockImplementationOnce(() => root1).mockImplementationOnce(() => root2);
+
+    ctx1.defineProperty('ReactDOM', { value: renderer });
+    ctx2.defineProperty('ReactDOM', { value: renderer });
+
+    const container = document.createElement('div');
+
+    ctx1.render({ step: 1 } as any, container);
+    ctx2.render({ step: 2 } as any, container);
+
+    expect(renderer.createRoot).toHaveBeenCalledTimes(2);
+    expect(root1.unmount).toHaveBeenCalledTimes(1);
+    expect(root2.render).toHaveBeenCalledTimes(1);
+  });
+
+  it('should wrap external antd ConfigProvider and rerender on themeToken change', async () => {
+    const engine = newEngine();
+
+    const themeState = observable.shallow({ token: { colorPrimary: 'red' } });
+    engine.context.defineProperty('themeToken', {
+      get: () => themeState.token,
+      cache: false,
+    });
+    engine.context.defineProperty('antdConfig', {
+      value: {
+        theme: { token: { colorPrimary: 'red' } },
+        prefixCls: 'ant',
+      },
+    });
+
+    const ctx = new FlowRunJSContext(engine.context);
+
+    const createElement = vi.fn((type: any, props: any, ...children: any[]) => ({ type, props, children }));
+    const fakeReact = { createElement };
+    const fakeAntdConfigProvider = function ConfigProvider() {};
+    const fakeAntdApp = function App() {};
+    const fakeAntd = { ConfigProvider: fakeAntdConfigProvider, App: fakeAntdApp };
+
+    const root = { render: vi.fn(), unmount: vi.fn() };
+    const fakeReactDOM = { createRoot: vi.fn(() => root) };
+
+    ctx.defineProperty('React', { value: fakeReact });
+    ctx.defineProperty('ReactDOM', { value: fakeReactDOM });
+    ctx.defineProperty('antd', { value: fakeAntd });
+
+    const container = document.createElement('div');
+    const vnode = { v: 1 };
+
+    ctx.render(vnode as any, container);
+
+    expect(root.render).toHaveBeenCalledTimes(1);
+    // createElement is called twice: App first, then ConfigProvider
+    expect(createElement).toHaveBeenNthCalledWith(
+      2,
+      fakeAntdConfigProvider,
+      expect.objectContaining({ prefixCls: 'ant' }),
+      expect.anything(),
+    );
+
+    themeState.token = { colorPrimary: 'blue' };
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(root.render).toHaveBeenCalledTimes(2);
+
+    // cleanup (dispose autorun + unmount root)
+    ctx.render('', container);
+  });
+
+  it('should enhance hooks dispatcher-null TypeError with a helpful hint', () => {
+    const original = new TypeError(`Cannot read properties of null (reading 'useMemo')`);
+    // Mimic a real browser stack from ESM CDN where a dependency brings its own React.
+    (original as any).stack = [
+      `TypeError: Cannot read properties of null (reading 'useMemo')`,
+      `    at u.useMemo (https://esm.sh/react@19.2.4/es2022/react.mjs:2:7636)`,
+      `    at to (https://esm.sh/@dnd-kit/core@6.1.0/es2022/core.mjs:6:1574)`,
+    ].join('\n');
+
+    const root = {
+      render: vi.fn(() => {
+        throw original;
+      }),
+      unmount: vi.fn(),
+    };
+
+    const internalReact = {};
+    const internalAntd = {};
+    const ctx: any = {
+      React: internalReact,
+      ReactDOM: { __nbRunjsInternalShim: true },
+      antd: internalAntd,
+    };
+
+    const entry: any = { root };
+    const containerEl = document.createElement('div');
+
+    try {
+      externalReactRender({
+        ctx,
+        entry,
+        vnode: { v: 1 },
+        containerEl,
+        rootMap: new WeakMap(),
+        unmountContainerRoot: vi.fn(),
+        internalReact,
+        internalAntd,
+      });
+      expect.fail('expected externalReactRender to throw');
+    } catch (e: any) {
+      expect(String(e?.message || '')).toContain('[RunJS Hint]');
+      expect(String(e?.message || '')).toContain('await ctx.importAsync("react@19.2.4")');
+      expect(e?.cause).toBe(original);
+    }
+  });
+});

package/src/__tests__/runjsLibsLazyLoading.test.ts

@@ -0,0 +1,44 @@
+/**
+ * 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, it, expect } from 'vitest';
+import { FlowEngine } from '../flowEngine';
+import { registerRunJSLib } from '../runjsLibs';
+
+describe('RunJS ctx.libs lazy loading', () => {
+  it('preloads member access via prepareRunJsCode injection', async () => {
+    registerRunJSLib('testLib', async () => ({ foo: 123 }));
+
+    const engine = new FlowEngine();
+    const ctx: any = engine.context;
+    const r = await ctx.runjs(`return ctx.libs.testLib.foo;`);
+    expect(r.success).toBe(true);
+    expect(r.value).toBe(123);
+  });
+
+  it('preloads bracket access via prepareRunJsCode injection', async () => {
+    registerRunJSLib('testLib', async () => ({ foo: 456 }));
+
+    const engine = new FlowEngine();
+    const ctx: any = engine.context;
+    const r = await ctx.runjs(`return ctx.libs['testLib'].foo;`);
+    expect(r.success).toBe(true);
+    expect(r.value).toBe(456);
+  });
+
+  it('preloads object destructuring via prepareRunJsCode injection', async () => {
+    registerRunJSLib('testLib', async () => ({ foo: 789 }));
+
+    const engine = new FlowEngine();
+    const ctx: any = engine.context;
+    const r = await ctx.runjs(`const { testLib } = ctx.libs; return testLib.foo;`);
+    expect(r.success).toBe(true);
+    expect(r.value).toBe(789);
+  });
+});

package/src/__tests__/runjsPreprocessDefault.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 { describe, it, expect } from 'vitest';
+import { FlowEngine } from '../flowEngine';
+import { prepareRunJsCode } from '../utils/runjsTemplateCompat';
+
+describe('ctx.runjs preprocessTemplates default', () => {
+  it('enables template preprocess by default', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context as any;
+    ctx.defineProperty('user', { value: { id: 123 } });
+
+    const r1 = await ctx.runjs('return {{ctx.user.id}};');
+    expect(r1.success).toBe(true);
+    expect(r1.value).toBe(123);
+
+    const r2 = await ctx.runjs('return "{{ctx.user.id}}";');
+    expect(r2.success).toBe(true);
+    expect(r2.value).toBe('123');
+  });
+
+  it('can disable template preprocess explicitly', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context as any;
+    ctx.defineProperty('user', { value: { id: 123 } });
+
+    const r = await ctx.runjs('return "{{ctx.user.id}}";', undefined, { preprocessTemplates: false });
+    expect(r.success).toBe(true);
+    expect(r.value).toBe('{{ctx.user.id}}');
+  });
+
+  it('does not double-preprocess already prepared code', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context as any;
+    ctx.defineProperty('user', { value: { id: 123 } });
+
+    const prepared = await prepareRunJsCode('return "{{ctx.user.id}}";', { preprocessTemplates: true });
+    const r = await ctx.runjs(prepared);
+    expect(r.success).toBe(true);
+    expect(r.value).toBe('123');
+  });
+});

package/src/acl/Acl.tsx

@@ -6,7 +6,7 @@
  * 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 { omit } from 'lodash';
+import _, { omit } from 'lodash';
 import { FlowEngine } from '../flowEngine';
 import { FlowModel } from '../models/flowModel';
 
@@ -31,11 +31,11 @@ export class ACL {
   constructor(private flowEngine: FlowEngine) {}
 
   setData(data: Record<string, any>) {
-    this.data = data;
+    this.data = _.cloneDeep(data);
   }
 
   setMeta(data: Record<string, any>) {
-    this.meta = data;
+    this.meta = _.cloneDeep(data);
   }
 
   async load() {

package/src/components/__tests__/gridDragPlanner.test.ts

@@ -19,9 +19,14 @@ import {
 
 const rect = { top: 0, left: 0, width: 100, height: 100 };
 
-const createLayout = (rows: Record<string, string[][]>, sizes: Record<string, number[]>): GridLayoutData => ({
+const createLayout = (
+  rows: Record<string, string[][]>,
+  sizes: Record<string, number[]>,
+  rowOrder?: string[],
+): GridLayoutData => ({
   rows,
   sizes,
+  rowOrder,
 });
 
 describe('getSlotKey', () => {
@@ -275,6 +280,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -315,6 +321,33 @@ describe('simulateLayoutForSlot', () => {
     expect(result.sizes['row-new']).toEqual([24]);
   });
 
+  it('removes empty source row when moving item into empty container slot', () => {
+    const layout = createLayout(
+      {
+        rowA: [['block-x']],
+      },
+      {
+        rowA: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'empty-row',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'block-x',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rows['row-new']).toEqual([['block-x']]);
+    expect(result.rows.rowA).toBeUndefined();
+    expect(result.sizes.rowA).toBeUndefined();
+  });
+
   it('handles column slot with after position', () => {
     const layout = createLayout(
       {
@@ -373,6 +406,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -392,6 +426,112 @@ describe('simulateLayoutForSlot', () => {
     expect(Object.keys(result.rows)).toEqual(['rowA', 'row-inserted', 'rowB']);
   });
 
+  it('inserts row into rowOrder when dropping below target row', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+      ['rowA', 'rowB'],
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowA',
+      position: 'below',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rowOrder).toEqual(['rowA', 'row-new', 'rowB']);
+  });
+
+  it('maintains rowOrder and inserts new row before target when provided', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+      ['rowA', 'rowB'],
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowB',
+      position: 'above',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rowOrder).toEqual(['rowA', 'row-new', 'rowB']);
+    expect(result.rows).toEqual({
+      rowA: [['a']],
+      'row-new': [['c']],
+      rowB: [['b']],
+    });
+    expect(result.sizes).toEqual({
+      rowA: [24],
+      'row-new': [24],
+      rowB: [24],
+    });
+  });
+
+  it('derives rowOrder from rows when missing and removes empty rows from order', () => {
+    const layout = createLayout(
+      {
+        row1: [['a']],
+        row2: [['b']],
+        row3: [['c']],
+      },
+      {
+        row1: [24],
+        row2: [24],
+        row3: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'b', layout });
+
+    expect(result.rowOrder).toEqual(['row1', 'row3']);
+    expect(result.rows).toEqual({
+      row1: [['b', 'a']],
+      row3: [['c']],
+    });
+    expect(result.sizes).toEqual({
+      row1: [24],
+      row3: [24],
+    });
+  });
+
   it('handles empty-column slot by replacing empty column', () => {
     const layout = createLayout(
       {

package/src/components/dnd/gridDragPlanner.ts

@@ -46,6 +46,7 @@ export interface Point {
 export interface GridLayoutData {
   rows: Record<string, string[][]>;
   sizes: Record<string, number[]>;
+  rowOrder?: string[];
 }
 
 export interface ColumnSlot {
@@ -142,6 +143,49 @@ export interface LayoutSnapshot {
   containerRect: Rect;
 }
 
+const deriveRowOrder = (rows: Record<string, string[][]>, provided?: string[]) => {
+  const order: string[] = [];
+  const used = new Set<string>();
+
+  (provided || Object.keys(rows)).forEach((rowId) => {
+    if (rows[rowId] && !used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+
+  Object.keys(rows).forEach((rowId) => {
+    if (!used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+
+  return order;
+};
+
+const normalizeRowsWithOrder = (rows: Record<string, string[][]>, order: string[]) => {
+  const next: Record<string, string[][]> = {};
+  order.forEach((rowId) => {
+    if (rows[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!next[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  return next;
+};
+
+const ensureRowOrder = (layout: GridLayoutData) => {
+  const order = deriveRowOrder(layout.rows, layout.rowOrder);
+  layout.rowOrder = order;
+  layout.rows = normalizeRowsWithOrder(layout.rows, order);
+  return order;
+};
+
 export interface BuildLayoutSnapshotOptions {
   container: HTMLElement | null;
 }
@@ -465,10 +509,12 @@ const removeItemFromLayout = (layout: GridLayoutData, uidValue: string) => {
   if (columns.length === 0) {
     delete layout.rows[rowId];
     delete layout.sizes[rowId];
+    ensureRowOrder(layout);
     return;
   }
 
   normalizeRowSizes(rowId, layout);
+  ensureRowOrder(layout);
 };
 
 const toIntSizes = (weights: number[], count: number): number[] => {
@@ -592,8 +638,10 @@ export const simulateLayoutForSlot = ({
   const cloned: GridLayoutData = {
     rows: _.cloneDeep(layout.rows),
     sizes: _.cloneDeep(layout.sizes),
+    rowOrder: layout.rowOrder ? [...layout.rowOrder] : undefined,
   };
 
+  ensureRowOrder(cloned);
   removeItemFromLayout(cloned, sourceUid);
 
   const createRowId = generateRowId ?? uid;
@@ -638,8 +686,16 @@ export const simulateLayoutForSlot = ({
     case 'row-gap': {
       const newRowId = createRowId();
       const rowPosition: 'before' | 'after' = slot.position === 'above' ? 'before' : 'after';
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
       cloned.rows = insertRow(cloned.rows, slot.targetRowId, newRowId, rowPosition, [[sourceUid]]);
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const targetIndex = currentOrder.indexOf(slot.targetRowId);
+      const insertIndex =
+        targetIndex === -1 ? currentOrder.length : rowPosition === 'before' ? targetIndex : targetIndex + 1;
+      const nextOrder = [...currentOrder];
+      nextOrder.splice(insertIndex, 0, newRowId);
+      cloned.rowOrder = nextOrder;
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, nextOrder);
       break;
     }
     case 'empty-row': {
@@ -649,11 +705,15 @@ export const simulateLayoutForSlot = ({
         [newRowId]: [[sourceUid]],
       };
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
+      cloned.rowOrder = [...currentOrder.filter((id) => id !== newRowId), newRowId];
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, cloned.rowOrder);
       break;
     }
     default:
       break;
   }
 
+  ensureRowOrder(cloned);
   return cloned;
 };

package/src/components/settings/wrappers/component/SwitchWithTitle.tsx

@@ -52,7 +52,8 @@ export const SwitchWithTitle: FC = observer(
     };
 
     // 点击整个容器时触发
-    const handleWrapperClick = () => {
+    const handleWrapperClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
       if (disabled) return;
       handleChange(!checked);
     };