@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

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__/runjsLocales.test.ts

@@ -0,0 +1,39 @@
+/**
+ * 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, beforeAll } from 'vitest';
+import { getRunJSDocFor } from '..';
+import { setupRunJSContexts } from '../runjs-context/setup';
+import { FlowContext } from '../flowContext';
+
+describe('RunJS locales patch (engine doc)', () => {
+  beforeAll(async () => {
+    await setupRunJSContexts();
+  });
+
+  it('should merge zh-CN locales for subclass doc label', () => {
+    const ctx = new FlowContext();
+    (ctx as any).defineProperty('model', { value: { constructor: { name: 'JSFieldModel' } } });
+    (ctx as any).defineProperty('api', { value: { auth: { locale: 'zh-CN' } } });
+    const doc = getRunJSDocFor(ctx as any, { version: 'v1' });
+    expect(doc?.label || '').toMatch(/JS 字段|JS 字段 RunJS 上下文/);
+  });
+
+  it('should localize base properties/methods via locales', () => {
+    const ctx = new FlowContext();
+    (ctx as any).defineProperty('model', { value: { constructor: { name: 'JSBlockModel' } } });
+    (ctx as any).defineProperty('api', { value: { auth: { locale: 'zh-CN' } } });
+    const doc = getRunJSDocFor(ctx as any, { version: 'v1' });
+    const message = doc?.properties?.message;
+    const messageText =
+      typeof message === 'string' ? message : (message as any)?.description ?? (message as any)?.detail ?? '';
+    expect(String(messageText)).toMatch(/Ant Design 全局消息 API/);
+    expect(String(doc?.methods?.t || '')).toMatch(/国际化函数/);
+  });
+});

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');
+  });
+});