@nocobase/flow-engine 2.1.0-alpha.3 → 2.1.0-alpha.30

package/src/models/flowModel.tsx

@@ -11,8 +11,6 @@ import { batch, define, observable, observe } from '@formily/reactive';
 import _ from 'lodash';
 import React from 'react';
 import { uid } from 'uid/secure';
-import { openRequiredParamsStepFormDialog as openRequiredParamsStepFormDialogFn } from '../components/settings/wrappers/contextual/StepRequiredSettingsDialog';
-import { openStepSettingsDialog as openStepSettingsDialogFn } from '../components/settings/wrappers/contextual/StepSettingsDialog';
 import { Emitter } from '../emitter';
 import { InstanceFlowRegistry } from '../flow-registry/InstanceFlowRegistry';
 import { FlowContext, FlowModelContext, FlowRuntimeContext } from '../flowContext';
@@ -36,7 +34,9 @@ import type {
 import { IModelComponentProps, ReadonlyModelProps } from '../types';
 import { isInheritedFrom, setupRuntimeContextSteps } from '../utils';
 // import { FlowExitAllException } from '../utils/exceptions';
-import { Typography } from 'antd/lib';
+import { Typography } from 'antd';
+import type { MenuProps } from 'antd';
+import { observer } from '..';
 import { ModelActionRegistry } from '../action-registry/ModelActionRegistry';
 import { buildSubModelItem } from '../components/subModel/utils';
 import { ModelEventRegistry } from '../event-registry/ModelEventRegistry';
@@ -46,8 +46,6 @@ import { FlowSettingsOpenOptions } from '../flowSettings';
 import type { ScheduleOptions } from '../scheduler/ModelOperationScheduler';
 import type { DispatchEventOptions, EventDefinition } from '../types';
 import { ForkFlowModel } from './forkFlowModel';
-import type { MenuProps } from 'antd';
-import { observer } from '..';
 
 // 使用 WeakMap 为每个类缓存一个 ModelActionRegistry 实例
 const classActionRegistries = new WeakMap<typeof FlowModel, ModelActionRegistry>();
@@ -62,16 +60,22 @@ const modelMetas = new WeakMap<typeof FlowModel, FlowModelMeta>();
 const modelGlobalRegistries = new WeakMap<typeof FlowModel, GlobalFlowRegistry>();
 
 type BaseMenuItem = NonNullable<MenuProps['items']>[number];
-type MenuLeafItem = Exclude<BaseMenuItem, { children: MenuProps['items'] }>;
+type MenuBaseItem = Omit<Exclude<BaseMenuItem, null>, 'key' | 'children'>;
 
-export type FlowModelExtraMenuItem = Omit<MenuLeafItem, 'key'> & {
+export type FlowModelExtraMenuItem = MenuBaseItem & {
   key: React.Key;
   group?: string;
   sort?: number;
+  label?: React.ReactNode;
+  disabled?: boolean;
   onClick?: () => void;
+  children?: FlowModelExtraMenuItem[];
 };
 
-type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key'> & { key?: React.Key };
+type FlowModelExtraMenuItemInput = Omit<FlowModelExtraMenuItem, 'key' | 'children'> & {
+  key?: React.Key;
+  children?: FlowModelExtraMenuItemInput[];
+};
 
 type ExtraMenuItemEntry = {
   group?: string;
@@ -88,6 +92,66 @@ type ExtraMenuItemEntry = {
 
 const classMenuExtensions = new WeakMap<typeof FlowModel, Set<ExtraMenuItemEntry>>();
 
+const sortExtraMenuItems = (items: FlowModelExtraMenuItem[]) => {
+  return [...items].sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
+};
+
+const isFlowModelExtraMenuItem = (item: FlowModelExtraMenuItem | null): item is FlowModelExtraMenuItem => {
+  return item !== null;
+};
+
+const normalizeExtraMenuItem = (
+  item: FlowModelExtraMenuItemInput,
+  {
+    group,
+    sort,
+    prefix,
+    path,
+  }: {
+    group: string;
+    sort: number;
+    prefix: string;
+    path: string;
+  },
+): FlowModelExtraMenuItem | null => {
+  if (!item) {
+    return null;
+  }
+
+  const normalizedGroup = item.group || group;
+  const normalizedSort = typeof item.sort === 'number' ? item.sort : sort;
+  const normalizedChildren = sortExtraMenuItems(
+    (item.children || [])
+      .map((child, index) =>
+        normalizeExtraMenuItem(child, {
+          group: normalizedGroup,
+          sort: normalizedSort,
+          prefix,
+          path: `${path}-${index}`,
+        }),
+      )
+      .filter(isFlowModelExtraMenuItem),
+  );
+
+  return {
+    ...item,
+    key: item.key ?? `${prefix}-${normalizedGroup}-${path}`,
+    group: normalizedGroup,
+    sort: normalizedSort,
+    children: normalizedChildren.length ? normalizedChildren : undefined,
+  };
+};
+
+async function loadOpenStepSettingsDialog() {
+  const mod = await import('../components/settings/wrappers/contextual/StepSettingsDialog');
+  return mod.openStepSettingsDialog;
+}
+
+async function loadOpenRequiredParamsStepFormDialog() {
+  const mod = await import('../components/settings/wrappers/contextual/StepRequiredSettingsDialog');
+  return mod.openRequiredParamsStepFormDialog;
+}
+
 export enum ModelRenderMode {
   ReactElement = 'reactElement',
   RenderFunction = 'renderFunction',
@@ -208,11 +272,14 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       if (changed.type === 'set' && _.isEqual(changed.value, changed.oldValue)) {
         return;
       }
+      const hasLastAutoRun = !!this._lastAutoRunParams;
 
       if (this.flowEngine) {
         this.invalidateFlowCache('beforeRender');
       }
-      this._rerunLastAutoRun();
+      if (hasLastAutoRun) {
+        this._rerunLastAutoRun();
+      }
       this.forks.forEach((fork) => {
         fork.rerender();
       });
@@ -695,6 +762,8 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     } else {
       this.props = { ...this.props, ...props };
     }
+
+    this._options.props = { ...this.props };
   }
 
   getProps(): ReadonlyModelProps {
@@ -858,6 +927,11 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     }
   }, 100);
 
+  private resetAutoRunState(): void {
+    this._rerunLastAutoRun?.cancel?.();
+    this._lastAutoRunParams = null;
+  }
+
   /**
    * 通用事件分发钩子：开始
    * 子类可覆盖；beforeRender 事件可通过抛出 FlowExitException 提前终止。
@@ -951,7 +1025,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       }
 
       // 创建缓存的响应式包装器组件工厂（只创建一次）
-      const createReactiveWrapper = (modelInstance: any) => {
+      const createReactiveWrapper = (modelInstance: FlowModel) => {
         const ReactiveWrapper = observer(() => {
           // 触发响应式更新的关键属性访问（读取 run/渲染目标的 props）
           const renderTarget = modelInstance;
@@ -977,6 +1051,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
               model: renderTarget,
             });
             return () => {
+              renderTarget.resetAutoRunState();
               if (typeof renderTarget.onUnmount === 'function') {
                 renderTarget.onUnmount();
               }
@@ -1177,17 +1252,17 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return model;
   }
 
-  filterSubModels<K extends keyof Structure['subModels'], R>(
+  filterSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => boolean,
-  ): ArrayElementType<Structure['subModels'][K]>[] {
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => boolean,
+  ): ArrayElementType<NonNullable<Structure['subModels']>[K]>[] {
     const model = (this.subModels as any)[subKey as string];
 
     if (!model) {
       return [];
     }
 
-    const results: ArrayElementType<Structure['subModels'][K]>[] = [];
+    const results: ArrayElementType<NonNullable<Structure['subModels']>[K]>[] = [];
 
     _.castArray(model)
       .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
@@ -1201,9 +1276,9 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return results;
   }
 
-  mapSubModels<K extends keyof Structure['subModels'], R>(
+  mapSubModels<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>, index: number) => R,
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>, index: number) => R,
   ): R[] {
     const model = (this.subModels as any)[subKey as string];
 
@@ -1223,7 +1298,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return results;
   }
 
-  hasSubModel<K extends keyof Structure['subModels']>(subKey: K) {
+  hasSubModel<K extends keyof NonNullable<Structure['subModels']>>(subKey: K) {
     const subModel = (this.subModels as any)[subKey as string];
     if (!subModel) {
       return false;
@@ -1231,10 +1306,10 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return _.castArray(subModel).length > 0;
   }
 
-  findSubModel<K extends keyof Structure['subModels'], R>(
+  findSubModel<K extends keyof NonNullable<Structure['subModels']>, R>(
     subKey: K,
-    callback: (model: ArrayElementType<Structure['subModels'][K]>) => R,
-  ): ArrayElementType<Structure['subModels'][K]> | null {
+    callback: (model: ArrayElementType<NonNullable<Structure['subModels']>[K]>) => R,
+  ): ArrayElementType<NonNullable<Structure['subModels']>[K]> | null {
     const model = (this.subModels as any)[subKey as string];
 
     if (!model) {
@@ -1244,7 +1319,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     return (
       (_.castArray(model).find((item) => {
         return (callback as (model: any) => R)(item);
-      }) as ArrayElementType<Structure['subModels'][K]> | undefined) || null
+      }) as ArrayElementType<NonNullable<Structure['subModels']>[K]> | undefined) || null
     );
   }
 
@@ -1369,7 +1444,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
    * @param {string} stepKey 步骤的唯一标识符
    * @returns {void}
    */
-  openStepSettingsDialog(flowKey: string, stepKey: string) {
+  async openStepSettingsDialog(flowKey: string, stepKey: string) {
     // 创建流程运行时上下文
     const flow = this.getFlow(flowKey);
     const step = flow?.steps?.[stepKey];
@@ -1383,7 +1458,9 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     setupRuntimeContextSteps(ctx, flow.steps, this, flowKey);
     ctx.defineProperty('currentStep', { value: step });
 
-    return openStepSettingsDialogFn({
+    const openStepSettingsDialog = await loadOpenStepSettingsDialog();
+
+    return openStepSettingsDialog({
       model: this,
       flowKey,
       stepKey,
@@ -1399,7 +1476,9 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
    * @returns {Promise<any>} 返回表单提交的值
    */
   async configureRequiredSteps(dialogWidth?: number | string, dialogTitle?: string) {
-    return openRequiredParamsStepFormDialogFn({
+    const openRequiredParamsStepFormDialog = await loadOpenRequiredParamsStepFormDialog();
+
+    return openRequiredParamsStepFormDialog({
       model: this,
       dialogWidth,
       dialogTitle,
@@ -1432,6 +1511,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     const data = {
       uid: this.uid,
       ..._.omit(this._options, ['flowEngine']),
+      props: { ...this.props },
       stepParams: this.stepParams,
       sortIndex: this.sortIndex,
       flowRegistry: {},
@@ -1586,6 +1666,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       seen.add(Cls);
       const reg = classMenuExtensions.get(Cls);
       if (reg) {
+        let entryIndex = 0;
         for (const entry of reg) {
           if (entry.matcher && !entry.matcher(model)) continue;
           const items =
@@ -1593,16 +1674,21 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
           const group = entry.group || 'common-actions';
           const sort = entry.sort ?? 0;
           const prefix = entry.keyPrefix || Cls.name || 'extra';
-          (items || []).forEach((it, idx: number) => {
-            if (!it) return;
-            const key = it.key ?? `${prefix}-${group}-${idx}-${Math.random().toString(36).slice(2, 6)}`;
-            collected.push({
-              ...it,
-              key,
-              group: it.group || group,
-              sort: typeof it.sort === 'number' ? it.sort : sort,
-            });
+          sortExtraMenuItems(
+            (items || [])
+              .map((it, idx: number) =>
+                normalizeExtraMenuItem(it, {
+                  group,
+                  sort,
+                  prefix,
+                  path: `${entryIndex}-${idx}`,
+                }),
+              )
+              .filter(isFlowModelExtraMenuItem),
+          ).forEach((it) => {
+            collected.push(it);
           });
+          entryIndex += 1;
         }
       }
       const ParentClass = Object.getPrototypeOf(Cls) as typeof FlowModel;

package/src/provider.tsx

@@ -45,34 +45,50 @@ export const FlowEngineGlobalsContextProvider: React.FC<{ children: React.ReactN
   const engine = useFlowEngine();
   const config = useContext(ConfigProvider.ConfigContext);
   const { token } = theme.useToken();
+  const isDarkTheme = React.useMemo(() => {
+    const algorithm = config?.theme?.algorithm;
+    if (Array.isArray(algorithm)) {
+      return algorithm.includes(theme.darkAlgorithm);
+    }
+    return algorithm === theme.darkAlgorithm;
+  }, [config]);
 
-  useEffect(() => {
-    const context = {
-      antdConfig: config,
-      // themeToken 改为可观察的 getter，在下方单独 define
-      modal,
-      message,
-      notification,
-    };
-    engine.context.defineProperty('viewer', {
-      cache: false,
-      get: (ctx) => new FlowViewer(ctx, { drawer, embed, popover, dialog }),
-    });
-    for (const item of Object.entries(context)) {
-      const [key, value] = item;
-      if (value) {
-        engine.context.defineProperty(key, { value });
-      }
+  // 这些全局能力需要在 children 首次渲染前就可读，不能等到 effect 后再挂到上下文。
+  engine.context.defineProperty('viewer', {
+    cache: false,
+    get: (ctx) => new FlowViewer(ctx, { drawer, embed, popover, dialog }),
+  });
+  for (const item of Object.entries({
+    antdConfig: config,
+    modal,
+    message,
+    notification,
+  })) {
+    const [key, value] = item;
+    if (value) {
+      engine.context.defineProperty(key, { value });
     }
-    // 将 themeToken 定义为 observable, 使组件能够响应主题的变更
-    // NOTE: 必须在 antdConfig 写入后再更新 themeToken；否则会读取到旧 antdConfig 的值。
-    engine.context.defineProperty('themeToken', {
-      get: () => token,
-      observable: true,
-      cache: true,
-    });
+  }
+  // 将 themeToken 定义为 observable, 使组件能够响应主题的变更。
+  engine.context.defineProperty('themeToken', {
+    get: () => token,
+    observable: true,
+    cache: true,
+  });
+  // 统一把暗色模式暴露到 Flow 上下文，避免 flow 侧继续依赖 global-theme。
+  engine.context.defineProperty('isDarkTheme', {
+    get: () => isDarkTheme,
+    observable: true,
+    cache: true,
+    info: {
+      description: 'Whether current theme algorithm is dark mode.',
+      detail: 'boolean',
+    },
+  });
+
+  useEffect(() => {
     engine.reactView.refresh();
-  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed]);
+  }, [engine, drawer, modal, message, notification, config, popover, token, dialog, embed, isDarkTheme]);
 
   return (
     <ConfigProvider {...config} locale={engine.context.locales?.antd} popupMatchSelectWidth={false}>

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/runjs-context/registry.ts

@@ -10,7 +10,7 @@
 // 为避免在模块初始化阶段引入 FlowContext（从而触发循环依赖），不要在顶层导入各类 RunJSContext。
 // 在需要默认映射时（首次 resolve）再使用 createRequire 同步加载对应模块。
 
-export type RunJSVersion = 'v1' | (string & {});
+export type RunJSVersion = 'v1' | 'v2' | (string & {});
 export type RunJSContextCtor = new (delegate: any) => any;
 export type RunJSContextMeta = {
   scenes?: string[];

package/src/runjs-context/setup.ts

@@ -41,17 +41,27 @@ export async function setupRunJSContexts() {
     import('./contexts/JSCollectionActionRunJSContext'),
   ]);
 
-  const v1 = 'v1';
-  RunJSContextRegistry.register(v1, '*', FlowRunJSContext);
-  RunJSContextRegistry.register(v1, 'JSBlockModel', JSBlockRunJSContext, { scenes: ['block'] });
-  RunJSContextRegistry.register(v1, 'JSFieldModel', JSFieldRunJSContext, { scenes: ['detail'] });
-  RunJSContextRegistry.register(v1, 'JSEditableFieldModel', JSEditableFieldRunJSContext, { scenes: ['form'] });
-  RunJSContextRegistry.register(v1, 'JSItemModel', JSItemRunJSContext, { scenes: ['form'] });
-  RunJSContextRegistry.register(v1, 'JSColumnModel', JSColumnRunJSContext, { scenes: ['table'] });
-  RunJSContextRegistry.register(v1, 'FormJSFieldItemModel', FormJSFieldItemRunJSContext, { scenes: ['form'] });
-  RunJSContextRegistry.register(v1, 'JSRecordActionModel', JSRecordActionRunJSContext, { scenes: ['table'] });
-  RunJSContextRegistry.register(v1, 'JSCollectionActionModel', JSCollectionActionRunJSContext, { scenes: ['table'] });
-  await applyRunJSContextContributions(v1);
+  const registerBuiltins = (version: 'v1' | 'v2') => {
+    RunJSContextRegistry.register(version, '*', FlowRunJSContext);
+    RunJSContextRegistry.register(version, 'JSBlockModel', JSBlockRunJSContext, { scenes: ['block'] });
+    RunJSContextRegistry.register(version, 'JSFieldModel', JSFieldRunJSContext, { scenes: ['detail'] });
+    RunJSContextRegistry.register(version, 'JSEditableFieldModel', JSEditableFieldRunJSContext, { scenes: ['form'] });
+    RunJSContextRegistry.register(version, 'JSItemModel', JSItemRunJSContext, { scenes: ['form'] });
+    RunJSContextRegistry.register(version, 'JSItemActionModel', JSItemRunJSContext, { scenes: ['table'] });
+    RunJSContextRegistry.register(version, 'JSColumnModel', JSColumnRunJSContext, { scenes: ['table'] });
+    RunJSContextRegistry.register(version, 'FormJSFieldItemModel', FormJSFieldItemRunJSContext, { scenes: ['form'] });
+    RunJSContextRegistry.register(version, 'JSRecordActionModel', JSRecordActionRunJSContext, { scenes: ['table'] });
+    RunJSContextRegistry.register(version, 'JSCollectionActionModel', JSCollectionActionRunJSContext, {
+      scenes: ['table'],
+    });
+  };
+
+  const versions: Array<'v1' | 'v2'> = ['v1', 'v2'];
+  for (const version of versions) {
+    registerBuiltins(version);
+    await applyRunJSContextContributions(version);
+    markRunJSContextsSetupDone(version);
+  }
+
   done = true;
-  markRunJSContextsSetupDone(v1);
 }