@nocobase/flow-engine 2.0.0-alpha.2

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@nocobase/flow-engine",
+  "version": "2.0.0-alpha.2",
+  "private": false,
+  "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "dependencies": {
+    "@formily/antd-v5": "1.x",
+    "@formily/reactive": "2.x",
+    "@nocobase/sdk": "1.8.0-beta.4",
+    "ahooks": "^3.7.2",
+    "dompurify": "^3.0.2",
+    "lodash": "^4.x",
+    "pino": "^8.0.0",
+    "ses": "^1.14.0",
+    "slate": "^0.103.0",
+    "slate-history": "^0.109.0",
+    "slate-react": "^0.110.3",
+    "uid": "^2.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.x"
+  },
+  "keywords": [
+    "nocobase",
+    "flow",
+    "engine",
+    "workflow"
+  ],
+  "author": "NocoBase Team",
+  "license": "AGPL-3.0",
+  "gitHead": "1322f486b248bef53ed8c8f42f0a39dfd02125fd"
+}

package/src/ContextPathProxy.ts

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+
+export class ContextPathProxy {
+  [key: string]: any;
+
+  constructor(private path: string[]) {}
+
+  toString(): string {
+    return `{{${this.path.join('.')}}}`;
+  }
+
+  valueOf(): string {
+    return this.toString();
+  }
+
+  [Symbol.toPrimitive](): string {
+    return this.toString();
+  }
+
+  static create(path: string[] = ['ctx']): any {
+    return new Proxy(new ContextPathProxy(path), {
+      get(target, prop, receiver) {
+        // 忽略 symbol 类型属性（如 inspect、自定义 iterator 等）
+        if (typeof prop === 'symbol') return undefined;
+
+        // 优先返回 ContextPathProxy 实例上的已有属性或方法
+        if (prop in target) {
+          const value = (target as any)[prop];
+          return typeof value === 'function' ? value.bind(target) : value;
+        }
+
+        // 构建新的代理路径
+        const newPath = [...path, prop.toString()];
+        return ContextPathProxy.create(newPath);
+      },
+    });
+  }
+}

package/src/ElementProxy.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 DOMPurify from 'dompurify';
+
+export class ElementProxy {
+  private __el: HTMLElement;
+
+  constructor(element) {
+    this.__el = element;
+
+    return new Proxy(this, {
+      get: (target, prop, receiver) => {
+        // 如果 ElementProxy 本身定义了属性（如 getter 方法），则优先用它
+        if (prop in target) {
+          const value = Reflect.get(target, prop, receiver);
+          return typeof value === 'function' ? value.bind(receiver) : value;
+        }
+
+        // 否则透传给原始 HTMLElement
+        const elValue = target.__el[prop];
+        return typeof elValue === 'function' ? elValue.bind(target.__el) : elValue;
+      },
+
+      set: (target, prop, value, receiver) => {
+        // 如果 ElementProxy 本身定义了 setter 方法，则使用它
+        const descriptor = Object.getOwnPropertyDescriptor(ElementProxy.prototype, prop);
+        if (descriptor && typeof descriptor.set === 'function') {
+          descriptor.set.call(receiver, value);
+          return true;
+        }
+
+        // 否则透传设置
+        target.__el[prop] = value;
+        return true;
+      },
+    });
+  }
+
+  // ✅ 自定义 getter/setter
+  get innerHTML() {
+    return this.__el.innerHTML;
+  }
+
+  set innerHTML(value) {
+    this.__el.innerHTML = DOMPurify.sanitize(value);
+  }
+
+  get outerHTML() {
+    return this.__el.outerHTML;
+  }
+
+  set outerHTML(value) {
+    this.__el.outerHTML = DOMPurify.sanitize(value);
+  }
+
+  // ✅ 示例：封装方法（可选）
+  appendChild(child) {
+    if (child instanceof HTMLElement || typeof child === 'string') {
+      this.__el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+    }
+  }
+}

package/src/FlowContextProvider.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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 React, { createContext, useContext } from 'react';
+import { FlowContext, FlowEngineContext } from './flowContext';
+import { FlowView } from './views/FlowView';
+
+export const FlowReactContext = createContext<FlowContext>(null);
+export const FlowViewContext = createContext<FlowContext>(null);
+
+export function FlowContextProvider(props: { children: React.ReactNode; context: FlowContext }) {
+  return <FlowReactContext.Provider value={props.context}>{props.children}</FlowReactContext.Provider>;
+}
+
+export function FlowViewContextProvider(props: { children: React.ReactNode; context: FlowContext }) {
+  return (
+    <FlowViewContext.Provider value={props.context}>
+      <FlowReactContext.Provider value={props.context}>{props.children}</FlowReactContext.Provider>
+    </FlowViewContext.Provider>
+  );
+}
+
+export function useFlowContext<T = FlowEngineContext>() {
+  return useContext(FlowReactContext) as T;
+}
+
+export function useFlowViewContext<T = FlowEngineContext>() {
+  return useContext(FlowViewContext) as T;
+}
+
+export function useFlowView() {
+  const ctx = useFlowContext();
+  return ctx.view as FlowView;
+}

package/src/FlowDefinition.ts

@@ -0,0 +1,275 @@
+/**
+ * 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 { observable } from '@formily/reactive';
+import _ from 'lodash';
+import type { FlowDefinitionOptions, StepDefinition } from './types';
+import { IFlowRepository } from './flow-registry/BaseFlowRegistry';
+
+export class FlowDefinition {
+  _steps: Map<string, FlowStep> = observable.shallow(new Map());
+  protected options: Omit<FlowDefinitionOptions, 'steps'>;
+
+  constructor(
+    options: FlowDefinitionOptions,
+    protected flowRegistry: IFlowRepository,
+  ) {
+    this.options = observable.shallow(_.omit(options, ['steps']));
+    // 初始化步骤
+    for (const [stepKey, step] of Object.entries(options.steps || {})) {
+      this.addStep(stepKey, step);
+    }
+  }
+
+  get key() {
+    return this.options.key;
+  }
+
+  get title() {
+    return this.options.title;
+  }
+
+  set title(title: string) {
+    this.options.title = title;
+  }
+
+  get sort() {
+    return this.options.sort;
+  }
+
+  get on() {
+    return this.options.on;
+  }
+
+  set on(on) {
+    this.options.on = on;
+  }
+
+  get defaultParams() {
+    return this.options.defaultParams;
+  }
+
+  get manual() {
+    return this.options.manual;
+  }
+
+  set manual(manual: boolean) {
+    this.options.manual = manual;
+  }
+
+  get steps() {
+    const steps: Record<string, StepDefinition> = {};
+    const sortedSteps = this.getSortedSteps();
+    for (const [stepKey, step] of sortedSteps) {
+      steps[stepKey] = step.serialize();
+    }
+    return steps;
+  }
+
+  getSortedSteps(): [string, FlowStep][] {
+    return [...this._steps.entries()].sort(([, stepA], [, stepB]) => {
+      const sortA = stepA.serialize().sort ?? 0;
+      const sortB = stepB.serialize().sort ?? 0;
+      return sortA - sortB;
+    });
+  }
+
+  setOptions(flowOptions: Omit<FlowDefinitionOptions, 'key' | 'steps'>) {
+    Object.assign(this.options, flowOptions);
+  }
+
+  getSteps() {
+    return this._steps;
+  }
+
+  mapSteps(callback: (step: FlowStep) => any) {
+    const sortedSteps = this.getSortedSteps();
+    return sortedSteps.map(([, step]) => {
+      return callback(step);
+    });
+  }
+
+  getStep(stepKey: string) {
+    return this._steps.get(stepKey);
+  }
+
+  addStep(stepKey: string, flowStep: Omit<StepDefinition, 'key'>) {
+    const existingStep = this._steps.get(stepKey);
+    if (existingStep) {
+      existingStep.setOptions(flowStep);
+      return existingStep;
+    } else {
+      // Auto-assign sort value if not provided
+      if (flowStep.sort === undefined) {
+        const maxSort = Math.max(0, ...Array.from(this._steps.values()).map((step) => step.serialize().sort ?? 0));
+        flowStep = { ...flowStep, sort: maxSort + 1 };
+      }
+
+      const newStep = new FlowStep(
+        {
+          ...flowStep,
+          key: stepKey,
+        },
+        this,
+      );
+      this._steps.set(stepKey, newStep);
+      return newStep;
+    }
+  }
+
+  setStep(stepKey: string, flowStep: StepDefinition) {
+    return this.addStep(stepKey, flowStep);
+  }
+
+  hasStep(stepKey: string) {
+    return this._steps.has(stepKey);
+  }
+
+  moveStep(sourceStepKey: string, targetStepKey: string) {
+    if (!this._steps.has(sourceStepKey)) {
+      throw new Error(`Source step '${sourceStepKey}' not found`);
+    }
+    if (!this._steps.has(targetStepKey)) {
+      throw new Error(`Target step '${targetStepKey}' not found`);
+    }
+    if (sourceStepKey === targetStepKey) {
+      return; // No need to move
+    }
+
+    // Get current sorted steps
+    const sortedSteps = this.getSortedSteps();
+    const newOrder: [string, FlowStep][] = [];
+
+    // Remove source step from current order
+    const filteredSteps = sortedSteps.filter(([key]) => key !== sourceStepKey);
+    const sourceStep = this._steps.get(sourceStepKey)!;
+
+    // Insert source step before target step
+    for (const [stepKey, step] of filteredSteps) {
+      if (stepKey === targetStepKey) {
+        newOrder.push([sourceStepKey, sourceStep]);
+      }
+      newOrder.push([stepKey, step]);
+    }
+
+    // Reassign sort values as integers: 1, 2, 3, ...
+    newOrder.forEach(([stepKey, step], index) => {
+      step.setOptions({ sort: index + 1 });
+    });
+  }
+
+  removeStep(stepKey: string) {
+    this._steps.delete(stepKey);
+  }
+
+  async saveStep(step: FlowStep) {
+    await this.flowRegistry.saveFlow(this);
+  }
+
+  async destroyStep(stepKey: string) {
+    this.removeStep(stepKey);
+    await this.flowRegistry.saveFlow(this);
+  }
+
+  async save() {
+    await this.flowRegistry.saveFlow(this);
+  }
+
+  async destroy() {
+    await this.flowRegistry.destroyFlow(this.key);
+  }
+
+  remove() {
+    return this.flowRegistry.removeFlow(this.key);
+  }
+
+  toData() {
+    return this.serialize();
+  }
+
+  serialize() {
+    const data: any = {
+      ...this.options,
+    };
+    const sortedSteps = this.getSortedSteps();
+    for (const [stepKey, step] of sortedSteps) {
+      data.steps = data.steps || {};
+      data.steps[stepKey] = {
+        ...step.serialize(),
+      };
+    }
+    return data;
+  }
+}
+
+export class FlowStep {
+  protected options: StepDefinition;
+
+  constructor(
+    options: StepDefinition,
+    protected flowDef: FlowDefinition,
+  ) {
+    this.options = observable.shallow(options);
+  }
+
+  setOptions(stepOptions: Omit<StepDefinition, 'key' | 'flowKey'>) {
+    Object.assign(this.options, stepOptions);
+  }
+
+  get key() {
+    return this.options.key;
+  }
+
+  get flowKey() {
+    return this.flowDef.key;
+  }
+
+  get title() {
+    return this.options.title;
+  }
+
+  set title(title: string) {
+    this.options.title = title;
+  }
+
+  get uiSchema() {
+    return this.options.uiSchema;
+  }
+
+  get defaultParams() {
+    return this.options.defaultParams || {};
+  }
+
+  set defaultParams(params: Record<string, any>) {
+    this.options.defaultParams = params;
+  }
+
+  get use() {
+    return this.options.use;
+  }
+
+  async save() {
+    return this.flowDef.save();
+  }
+
+  async remove() {
+    return this.flowDef.removeStep(this.key);
+  }
+
+  async destroy() {
+    return this.flowDef.destroyStep(this.key);
+  }
+
+  serialize() {
+    return {
+      ...this.options,
+      flowKey: this.flowDef.key,
+    };
+  }
+}

package/src/JSRunner.ts

@@ -0,0 +1,84 @@
+/**
+ * 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 'ses';
+
+export interface JSRunnerOptions {
+  timeoutMs?: number;
+  globals?: Record<string, any>;
+  version?: string;
+}
+
+export class JSRunner {
+  private globals: Record<string, any>;
+  private timeoutMs: number;
+
+  constructor(options: JSRunnerOptions = {}) {
+    const bindWindowFn = (key: 'setTimeout' | 'clearTimeout' | 'setInterval' | 'clearInterval') => {
+      if (typeof window !== 'undefined' && typeof window[key] === 'function') {
+        return window[key].bind(window);
+      }
+      const fn = globalThis[key];
+      return typeof fn === 'function' ? fn.bind(globalThis) : fn;
+    };
+
+    this.globals = {
+      console,
+      setTimeout: bindWindowFn('setTimeout'),
+      clearTimeout: bindWindowFn('clearTimeout'),
+      setInterval: bindWindowFn('setInterval'),
+      clearInterval: bindWindowFn('clearInterval'),
+      ...(options.globals || {}),
+    };
+    this.timeoutMs = options.timeoutMs ?? 5000; // 默认 5 秒超时
+  }
+
+  /**
+   * 注册单个变量或函数
+   */
+  register(name: string, value: any): void {
+    this.globals[name] = value;
+  }
+
+  /**
+   * 异步运行代码，带错误处理和超时机制
+   */
+  async run(code: string): Promise<{
+    success: boolean;
+    value?: any;
+    error?: any;
+    timeout?: boolean;
+  }> {
+    const wrapped = `(async () => {
+      try {
+        ${code};
+      } catch (e) {
+        throw e;
+      }
+    })()`;
+
+    const compartment = new Compartment(this.globals);
+
+    try {
+      const task = compartment.evaluate(wrapped);
+      const timeoutPromise = new Promise((_resolve, reject) =>
+        setTimeout(() => reject(new Error('Execution timed out')), this.timeoutMs),
+      );
+      const result = await Promise.race([task, timeoutPromise]);
+      return { success: true, value: result };
+    } catch (err) {
+      console.error(err);
+      return {
+        success: false,
+        error: err,
+        timeout: err.message === 'Execution timed out',
+      };
+    }
+  }
+}

package/src/ReactView.tsx

@@ -0,0 +1,104 @@
+/**
+ * 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 { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { Root, RootOptions, createRoot } from 'react-dom/client';
+import { FlowEngine } from './flowEngine';
+import { FlowEngineProvider } from './provider';
+
+function Provider({ config, engine, children }) {
+  return (
+    <FlowEngineProvider engine={engine}>
+      <ConfigProvider {...config}>
+        <App>{children}</App>
+      </ConfigProvider>
+    </FlowEngineProvider>
+  );
+}
+
+export class ReactView {
+  private refreshCallback: (() => void) | null = null;
+
+  constructor(private flowEngine: FlowEngine) {}
+
+  createRoot(container: HTMLElement, options: RootOptions = {}): Root {
+    const root = createRoot(container, options);
+    let currentChildren: React.ReactNode;
+
+    const doRender = () => {
+      root.render(
+        <Provider engine={this.flowEngine} config={this.flowEngine.context.antdConfig}>
+          {currentChildren}
+        </Provider>,
+      );
+    };
+
+    const flowRoot = {
+      render: (children: React.ReactNode) => {
+        currentChildren = children;
+        this.refreshCallback = doRender;
+        doRender();
+      },
+      unmount: () => {
+        this.refreshCallback = null;
+        currentChildren = null;
+        root.unmount();
+      },
+    };
+
+    return flowRoot;
+  }
+
+  // 重新渲染当前根
+  refresh() {
+    if (this.refreshCallback) {
+      this.refreshCallback();
+    }
+  }
+
+  render(children: React.ReactNode | ((root: Root) => React.ReactNode), options: any = {}) {
+    const container = document.createElement('span');
+    const { onRendered } = options;
+    let root: Root;
+
+    const renderContent = (root: Root) => {
+      const content = typeof children === 'function' ? (children as (root: Root) => React.ReactNode)(root) : children;
+      return (
+        <Provider engine={this.flowEngine} config={this.flowEngine.context.antdConfig}>
+          {content}
+        </Provider>
+      );
+    };
+
+    if (onRendered) {
+      onRendered(() => {
+        root = createRoot(container);
+        root.render(renderContent(root));
+      });
+    } else {
+      root = createRoot(container);
+      root.render(renderContent(root));
+    }
+
+    (container as any)._reactRoot = root;
+
+    return container;
+  }
+
+  onRefReady<T extends HTMLElement>(ref: React.RefObject<T>, cb: (el: T) => void, timeout = 10000) {
+    const start = Date.now();
+    function check() {
+      if (ref.current) return cb(ref.current);
+      if (Date.now() - start > timeout) return;
+      setTimeout(check, 30);
+    }
+    check();
+  }
+}