@nocobase/flow-engine 2.0.0-alpha.25 → 2.0.0-alpha.26

package/lib/flowContext.js

@@ -61,6 +61,7 @@ var import_lodash = __toESM(require("lodash"));
 var import_qs = __toESM(require("qs"));
 var import_react = __toESM(require("react"));
 var ReactDOMClient = __toESM(require("react-dom/client"));
+var import_ElementProxy = require("./ElementProxy");
 var import_Acl = require("./acl/Acl");
 var import_ContextPathProxy = require("./ContextPathProxy");
 var import_data_source = require("./data-source");
@@ -1280,6 +1281,50 @@ const _FlowRunJSContext = class _FlowRunJSContext extends FlowContext {
       }, "createRoot")
     };
     this.defineProperty("ReactDOM", { value: ReactDOMShim });
+    this.defineMethod(
+      "render",
+      function(vnode, container) {
+        const el = container || this.element;
+        if (!el) throw new Error("ctx.render: container not provided and ctx.element is not available");
+        const containerEl = (el == null ? void 0 : el.__el) || el;
+        const globalRef = globalThis;
+        globalRef.__nbRunjsRoots = globalRef.__nbRunjsRoots || /* @__PURE__ */ new WeakMap();
+        const rootMap = globalRef.__nbRunjsRoots;
+        if (typeof vnode === "string") {
+          const existingRoot = rootMap.get(containerEl);
+          if (existingRoot && typeof existingRoot.unmount === "function") {
+            try {
+              existingRoot.unmount();
+            } finally {
+              rootMap.delete(containerEl);
+            }
+          }
+          const proxy = new import_ElementProxy.ElementProxy(containerEl);
+          proxy.innerHTML = String(vnode ?? "");
+          return null;
+        }
+        if (vnode && vnode.nodeType && (vnode.nodeType === 1 || vnode.nodeType === 3 || vnode.nodeType === 11)) {
+          const existingRoot = rootMap.get(containerEl);
+          if (existingRoot && typeof existingRoot.unmount === "function") {
+            try {
+              existingRoot.unmount();
+            } finally {
+              rootMap.delete(containerEl);
+            }
+          }
+          while (containerEl.firstChild) containerEl.removeChild(containerEl.firstChild);
+          containerEl.appendChild(vnode);
+          return null;
+        }
+        let root = rootMap.get(containerEl);
+        if (!root) {
+          root = this.ReactDOM.createRoot(containerEl);
+          rootMap.set(containerEl, root);
+        }
+        root.render(vnode);
+        return root;
+      }
+    );
   }
   static define(meta, options) {
     const locale = options == null ? void 0 : options.locale;

package/lib/index.d.ts

@@ -8,6 +8,7 @@
  */
 export * from './types';
 export * from './utils';
+export { compileRunJs } from './utils/jsxTransform';
 export * from './resources';
 export * from './flowEngine';
 export * from './hooks';

package/lib/index.js

@@ -28,6 +28,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   RunJSContextRegistry: () => import_registry.RunJSContextRegistry,
+  compileRunJs: () => import_jsxTransform.compileRunJs,
   createBlockScopedEngine: () => import_BlockScopedFlowEngine.createBlockScopedEngine,
   createJSRunnerWithVersion: () => import_helpers.createJSRunnerWithVersion,
   createViewScopedEngine: () => import_ViewScopedFlowEngine.createViewScopedEngine,
@@ -43,6 +44,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./types"), module.exports);
 __reExport(src_exports, require("./utils"), module.exports);
+var import_jsxTransform = require("./utils/jsxTransform");
 __reExport(src_exports, require("./resources"), module.exports);
 __reExport(src_exports, require("./flowEngine"), module.exports);
 __reExport(src_exports, require("./hooks"), module.exports);
@@ -68,6 +70,7 @@ var import_BlockScopedFlowEngine = require("./BlockScopedFlowEngine");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   RunJSContextRegistry,
+  compileRunJs,
   createBlockScopedEngine,
   createJSRunnerWithVersion,
   createViewScopedEngine,

package/lib/models/flowModel.js

@@ -1054,7 +1054,8 @@ const _FlowModel = class _FlowModel {
       uid: this.uid,
       ...import_lodash.default.omit(this._options, ["flowEngine"]),
       stepParams: this.stepParams,
-      sortIndex: this.sortIndex
+      sortIndex: this.sortIndex,
+      flowRegistry: {}
     };
     const subModels = this.subModels;
     for (const subModelKey in subModels) {
@@ -1069,8 +1070,7 @@ const _FlowModel = class _FlowModel {
       }
     }
     for (const [key, flow] of this.flowRegistry.getFlows()) {
-      data["flowRegistry"] = data["flowRegistry"] || {};
-      data["flowRegistry"][key] = flow.toData();
+      data.flowRegistry[key] = flow.toData();
     }
     return data;
   }

package/lib/runjs-context/contexts/base.js

@@ -69,6 +69,13 @@ function defineBaseContextMeta() {
     },
     methods: {
       t: 'Internationalization function for translating text. Parameters: (key: string, variables?: object) => string. Example: `ctx.t("Hello {name}", { name: "World" })`',
+      render: {
+        description: 'Render into container. Accepts ReactElement, DOM Node/Fragment, or HTML string. Parameters: (vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null. Example: `ctx.render(<div>Hello</div>)` or `ctx.render("<b>hi</b>")`',
+        detail: "ReactDOM Root",
+        completion: {
+          insertText: `ctx.render(<div />)`
+        }
+      },
       requireAsync: 'Asynchronously load external libraries from URL. Parameters: (url: string) => Promise<any>. Example: `const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
       importAsync: 'Dynamically import ESM module by URL. Parameters: (url: string) => Promise<Module>. Example: `const mod = await ctx.importAsync("https://cdn.jsdelivr.net/npm/lit-html@2/+esm")`',
       resolveJsonTemplate: "Resolve JSON templates containing variable expressions with {{ }} syntax. Parameters: (template: any, context?: object) => any",
@@ -140,6 +147,13 @@ function defineBaseContextMeta() {
       },
       methods: {
         t: '\u56FD\u9645\u5316\u51FD\u6570\uFF0C\u7528\u4E8E\u7FFB\u8BD1\u6587\u6848\u3002\u53C2\u6570\uFF1A(key: string, variables?: object) => string\u3002\u793A\u4F8B\uFF1A`ctx.t("\u4F60\u597D {name}", { name: "\u4E16\u754C" })`',
+        render: {
+          description: '\u6E32\u67D3\u5230\u5BB9\u5668\u3002vnode \u652F\u6301 ReactElement\u3001DOM \u8282\u70B9/\u7247\u6BB5\u3001\u6216 HTML \u5B57\u7B26\u4E32\u3002\u53C2\u6570\uFF1A(vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null\u3002\u793A\u4F8B\uFF1A`ctx.render(<div />)` \u6216 `ctx.render("<b>hi</b>")`',
+          detail: "ReactDOM Root",
+          completion: {
+            insertText: `ctx.render(<div />)`
+          }
+        },
         requireAsync: '\u6309 URL \u5F02\u6B65\u52A0\u8F7D\u5916\u90E8\u5E93\u3002\u53C2\u6570\uFF1A(url: string) => Promise<any>\u3002\u793A\u4F8B\uFF1A`const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
         importAsync: '\u6309 URL \u52A8\u6001\u5BFC\u5165 ESM \u6A21\u5757\uFF08\u5F00\u53D1/\u751F\u4EA7\u5747\u53EF\u7528\uFF09\u3002\u53C2\u6570\uFF1A(url: string) => Promise<Module>\u3002\u793A\u4F8B\uFF1A`const mod = await ctx.importAsync("https://cdn.jsdelivr.net/npm/lit-html@2/+esm")`',
         resolveJsonTemplate: "\u89E3\u6790\u542B {{ }} \u53D8\u91CF\u8868\u8FBE\u5F0F\u7684 JSON \u6A21\u677F\u3002\u53C2\u6570\uFF1A(template: any, context?: object) => any",

package/lib/runjs-context/snippets/index.js

@@ -60,6 +60,7 @@ const snippets = {
   "scene/block/echarts-init": /* @__PURE__ */ __name(() => import("./scene/block/echarts-init.snippet"), "scene/block/echarts-init"),
   // scene/block
   "scene/block/render-react": /* @__PURE__ */ __name(() => import("./scene/block/render-react.snippet"), "scene/block/render-react"),
+  "scene/block/render-react-jsx": /* @__PURE__ */ __name(() => import("./scene/block/render-react-jsx.snippet"), "scene/block/render-react-jsx"),
   "scene/block/render-button-handler": /* @__PURE__ */ __name(() => import("./scene/block/render-button-handler.snippet"), "scene/block/render-button-handler"),
   "scene/block/add-event-listener": /* @__PURE__ */ __name(() => import("./scene/block/add-event-listener.snippet"), "scene/block/add-event-listener"),
   "scene/block/chartjs-bar": /* @__PURE__ */ __name(() => import("./scene/block/chartjs-bar.snippet"), "scene/block/chartjs-bar"),

package/lib/runjs-context/snippets/scene/block/render-button-handler.snippet.js

@@ -42,11 +42,13 @@ const snippet = {
     }
   },
   content: `
-const { React, ReactDOM, antd } = ctx;
-const { Button } = antd;
+const { Button } = ctx.antd;
 
-const node = React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Button'));
-ReactDOM.createRoot(ctx.element).render(node);
+ctx.render(
+  <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+    {ctx.t('Button')}
+  </Button>
+);
 `
 };
 var render_button_handler_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/render-info-card.snippet.js

@@ -42,29 +42,28 @@ const snippet = {
     }
   },
   content: `
-const { Card, Descriptions, Tag, Typography } = ctx.antd;
-const { createElement: h } = ctx.React;
+const { Card, Descriptions, Tag } = ctx.antd;
 
 if (!ctx.record) {
-  ctx.element.innerHTML = '<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>';
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>');
   return;
 }
 
 const record = ctx.record;
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Card, { title: ctx.t('Record Details'), bordered: true, style: { margin: 0 } },
-    h(Descriptions, { column: 2, size: 'small' },
-      h(Descriptions.Item, { label: ctx.t('ID') }, record.id || '-'),
-      h(Descriptions.Item, { label: ctx.t('Status') },
-        h(Tag, { color: record.status === 'active' ? 'green' : 'default' }, record.status || '-')
-      ),
-      h(Descriptions.Item, { label: ctx.t('Title') }, record.title || '-'),
-      h(Descriptions.Item, { label: ctx.t('Created At') },
-        record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'
-      )
-    )
-  )
+ctx.render(
+  <Card title={ctx.t('Record Details')} bordered style={{ margin: 0 }}>
+    <Descriptions column={2} size="small">
+      <Descriptions.Item label={ctx.t('ID')}>{record.id || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Status')}>
+        <Tag color={record.status === 'active' ? 'green' : 'default'}>{record.status || '-'}</Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Title')}>{record.title || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Created At')}>
+        {record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'}
+      </Descriptions.Item>
+    </Descriptions>
+  </Card>
 );
 
 `

package/lib/runjs-context/snippets/scene/block/render-react-jsx.snippet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 type { SnippetModule } from '../../types';
+declare const snippet: SnippetModule;
+export default snippet;

package/lib/runjs-context/snippets/scene/block/render-react-jsx.snippet.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var render_react_jsx_snippet_exports = {};
+__export(render_react_jsx_snippet_exports, {
+  default: () => render_react_jsx_snippet_default
+});
+module.exports = __toCommonJS(render_react_jsx_snippet_exports);
+var import_JSBlockRunJSContext = require("../../../contexts/JSBlockRunJSContext");
+const snippet = {
+  contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext],
+  prefix: "sn-react-jsx",
+  label: "Render React (JSX)",
+  description: "Render a simple React component using JSX syntax",
+  locales: {
+    "zh-CN": {
+      label: "\u6E32\u67D3 React\uFF08JSX\uFF09",
+      description: "\u4F7F\u7528 JSX \u8BED\u6CD5\u6E32\u67D3\u4E00\u4E2A\u7B80\u5355\u7684 React \u7EC4\u4EF6"
+    }
+  },
+  content: `
+// Render a React component with JSX
+const { React } = ctx;
+
+const App = () => (
+  <div style={{ padding: 12 }}>
+    <h3 style={{ margin: 0, color: '#1890ff' }}>Hello JSX</h3>
+    <div style={{ color: '#555' }}>This block is rendered by JSX.</div>
+  </div>
+);
+
+ctx.render(<App />);
+`
+};
+var render_react_jsx_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/render-react.snippet.js

@@ -43,15 +43,15 @@ const snippet = {
   },
   content: `
 // Render a React element into ctx.element via ReactDOM
-const { React, ReactDOM, antd } = ctx;
-const { Button } = antd;
+const { Button } = ctx.antd;
 
-const node = React.createElement(
-  'div',
-  { style: { padding: 12 } },
-  React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Click')),
+ctx.render(
+  <div style={{ padding: 12 }}>
+    <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+      {ctx.t('Click')}
+    </Button>
+  </div>
 );
-ReactDOM.createRoot(ctx.element).render(node);
 `
 };
 var render_react_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/render-statistics.snippet.js

@@ -43,7 +43,6 @@ const snippet = {
   },
   content: `
 const { Card, Statistic, Row, Col } = ctx.antd;
-const { createElement: h } = ctx.React;
 
 const res = await ctx.api.request({
   url: 'users:list',
@@ -67,33 +66,29 @@ const distinctRoles = new Set(
     .filter(Boolean),
 ).size;
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Row, { gutter: 16 },
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Total users'), value: total, valueStyle: { color: '#3f8600' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Administrators'), value: adminCount, valueStyle: { color: '#1890ff' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Users with email'), value: withEmail, valueStyle: { color: '#faad14' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, {
-          title: ctx.t('Distinct roles'),
-          value: distinctRoles,
-          valueStyle: { color: '#cf1322' },
-        })
-      )
-    )
-  )
+ctx.render(
+  <Row gutter={16}>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Total users')} value={total} valueStyle={{ color: '#3f8600' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Administrators')} value={adminCount} valueStyle={{ color: '#1890ff' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Users with email')} value={withEmail} valueStyle={{ color: '#faad14' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Distinct roles')} value={distinctRoles} valueStyle={{ color: '#cf1322' }} />
+      </Card>
+    </Col>
+  </Row>
 );
 `
 };

package/lib/runjs-context/snippets/scene/block/render-timeline.snippet.js

@@ -43,7 +43,6 @@ const snippet = {
   },
   content: `
 const { Timeline, Card } = ctx.antd;
-const { createElement: h } = ctx.React;
 
 const res = await ctx.api.request({
   url: 'users:list',
@@ -57,28 +56,28 @@ const res = await ctx.api.request({
 const records = res?.data?.data || [];
 
 if (!records.length) {
-  ctx.element.innerHTML = '<div style="padding:16px;color:#999;">' + ctx.t('No data') + '</div>';
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No data') + '</div>');
   return;
 }
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Card, { title: ctx.t('Activity Timeline'), bordered: true },
-    h(Timeline, { mode: 'left' },
-      ...records.map(record =>
-        h(Timeline.Item, {
-          key: record.id,
-          label: record.createdAt ? new Date(record.createdAt).toLocaleString() : '',
-        },
-          h('div', {},
-            h('strong', {}, record.nickname || record.username || ctx.t('Unnamed user')),
-            record.email
-              ? h('div', { style: { color: '#999', fontSize: '12px', marginTop: '4px' } }, record.email)
-              : null,
-          )
-        )
-      )
-    )
-  )
+ctx.render(
+  <Card title={ctx.t('Activity Timeline')} bordered>
+    <Timeline mode="left">
+      {records.map((record) => (
+        <Timeline.Item
+          key={record.id}
+          label={record.createdAt ? new Date(record.createdAt).toLocaleString() : ''}
+        >
+          <div>
+            <strong>{record.nickname || record.username || ctx.t('Unnamed user')}</strong>
+            {record.email ? (
+              <div style={{ color: '#999', fontSize: '12px', marginTop: '4px' }}>{record.email}</div>
+            ) : null}
+          </div>
+        </Timeline.Item>
+      ))}
+    </Timeline>
+  </Card>
 );
 `
 };

package/lib/utils/jsxTransform.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+/**
+ * Lightweight JSX -> JS compiler for RunJS user code.
+ * - Uses sucrase via dynamic import (lazy; avoids static cycles and cost when not needed)
+ * - Maps JSX to ctx.React.createElement / ctx.React.Fragment so no global React is required
+ * - If sucrase is unavailable or transform throws, returns original code as graceful fallback
+ */
+export declare function compileRunJs(code: string): Promise<string>;

package/lib/utils/jsxTransform.js

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var jsxTransform_exports = {};
+__export(jsxTransform_exports, {
+  compileRunJs: () => compileRunJs
+});
+module.exports = __toCommonJS(jsxTransform_exports);
+async function compileRunJs(code) {
+  var _a;
+  const maybeJSX = /<[A-Za-z]|<\//.test(code);
+  if (!maybeJSX) return code;
+  try {
+    const mod = await import("sucrase");
+    const transform = (mod == null ? void 0 : mod.transform) || ((_a = mod == null ? void 0 : mod.default) == null ? void 0 : _a.transform);
+    if (typeof transform !== "function") return code;
+    const res = transform(code, {
+      transforms: ["jsx"],
+      jsxPragma: "ctx.React.createElement",
+      jsxFragmentPragma: "ctx.React.Fragment",
+      // Keep ES syntax as-is; JSRunner runs in modern engines
+      disableESTransforms: true,
+      production: true
+    });
+    return (res && (res.code || (res == null ? void 0 : res.output))) ?? code;
+  } catch (_e) {
+    return code;
+  }
+}
+__name(compileRunJs, "compileRunJs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  compileRunJs
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.0.0-alpha.25",
+  "version": "2.0.0-alpha.26",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.0.0-alpha.25",
-    "@nocobase/shared": "2.0.0-alpha.25",
+    "@nocobase/sdk": "2.0.0-alpha.26",
+    "@nocobase/shared": "2.0.0-alpha.26",
     "ahooks": "^3.7.2",
     "dompurify": "^3.0.2",
     "lodash": "^4.x",
@@ -18,6 +18,7 @@
     "slate": "^0.103.0",
     "slate-history": "^0.109.0",
     "slate-react": "^0.110.3",
+    "sucrase": "^3.35.0",
     "uid": "^2.0.2"
   },
   "peerDependencies": {
@@ -34,5 +35,5 @@
   ],
   "author": "NocoBase Team",
   "license": "AGPL-3.0",
-  "gitHead": "8ce1972206272bd1723db193abd0425c532c5687"
+  "gitHead": "3f9e6825dfefabec9640dc46783955174275df04"
 }

package/src/flowContext.ts

@@ -20,6 +20,7 @@ import pino from 'pino';
 import qs from 'qs';
 import React, { createRef } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
+import { ElementProxy } from './ElementProxy';
 import type { Location } from 'react-router-dom';
 import { ACL } from './acl/Acl';
 import { ContextPathProxy } from './ContextPathProxy';
@@ -1698,6 +1699,68 @@ export class FlowRunJSContext extends FlowContext {
       },
     };
     this.defineProperty('ReactDOM', { value: ReactDOMShim });
+
+    // Convenience: ctx.render(<App />[, container])
+    // - container defaults to ctx.element if available
+    // - internally uses engine.reactView.createRoot to inherit app context
+    // - caches root per container via global WeakMap
+    this.defineMethod(
+      'render',
+      function (
+        this: any,
+        vnode: React.ReactElement | Node | DocumentFragment | string,
+        container?: Element | DocumentFragment,
+      ) {
+        const el = (container as any) || (this.element as any);
+        if (!el) throw new Error('ctx.render: container not provided and ctx.element is not available');
+        const containerEl: any = (el as any)?.__el || el; // unwrap ElementProxy
+        const globalRef: any = globalThis as any;
+        globalRef.__nbRunjsRoots = globalRef.__nbRunjsRoots || new WeakMap<any, any>();
+        const rootMap: WeakMap<any, any> = globalRef.__nbRunjsRoots;
+
+        // If vnode is string (HTML), unmount react root and set sanitized HTML
+        if (typeof vnode === 'string') {
+          const existingRoot = rootMap.get(containerEl);
+          if (existingRoot && typeof existingRoot.unmount === 'function') {
+            try {
+              existingRoot.unmount();
+            } finally {
+              rootMap.delete(containerEl);
+            }
+          }
+          const proxy: any = new ElementProxy(containerEl);
+          proxy.innerHTML = String(vnode ?? '');
+          return null;
+        }
+
+        // If vnode is a DOM Node or DocumentFragment, unmount and replace content
+        if (
+          vnode &&
+          (vnode as any).nodeType &&
+          ((vnode as any).nodeType === 1 || (vnode as any).nodeType === 3 || (vnode as any).nodeType === 11)
+        ) {
+          const existingRoot = rootMap.get(containerEl);
+          if (existingRoot && typeof existingRoot.unmount === 'function') {
+            try {
+              existingRoot.unmount();
+            } finally {
+              rootMap.delete(containerEl);
+            }
+          }
+          while (containerEl.firstChild) containerEl.removeChild(containerEl.firstChild);
+          containerEl.appendChild(vnode as any);
+          return null;
+        }
+
+        let root = rootMap.get(containerEl);
+        if (!root) {
+          root = this.ReactDOM.createRoot(containerEl);
+          rootMap.set(containerEl, root);
+        }
+        root.render(vnode as any);
+        return root;
+      },
+    );
   }
   static define(meta: RunJSDocMeta, options?: { locale?: string }) {
     const locale = options?.locale;

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './types';
 
 // 工具函数
 export * from './utils';
+export { compileRunJs } from './utils/jsxTransform';
 
 // 资源类
 export * from './resources';

package/src/models/flowModel.tsx

@@ -1331,6 +1331,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       ..._.omit(this._options, ['flowEngine']),
       stepParams: this.stepParams,
       sortIndex: this.sortIndex,
+      flowRegistry: {},
     };
     const subModels = this.subModels as {
       [key: string]: FlowModel | FlowModel[];
@@ -1347,8 +1348,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
       }
     }
     for (const [key, flow] of this.flowRegistry.getFlows()) {
-      data['flowRegistry'] = data['flowRegistry'] || {};
-      data['flowRegistry'][key] = flow.toData();
+      data.flowRegistry[key] = flow.toData();
     }
     return data;
   }

package/src/runjs-context/contexts/base.ts

@@ -50,6 +50,14 @@ export function defineBaseContextMeta() {
     },
     methods: {
       t: 'Internationalization function for translating text. Parameters: (key: string, variables?: object) => string. Example: `ctx.t("Hello {name}", { name: "World" })`',
+      render: {
+        description:
+          'Render into container. Accepts ReactElement, DOM Node/Fragment, or HTML string. Parameters: (vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null. Example: `ctx.render(<div>Hello</div>)` or `ctx.render("<b>hi</b>")`',
+        detail: 'ReactDOM Root',
+        completion: {
+          insertText: `ctx.render(<div />)`,
+        },
+      },
       requireAsync:
         'Asynchronously load external libraries from URL. Parameters: (url: string) => Promise<any>. Example: `const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
       importAsync:
@@ -127,6 +135,14 @@ export function defineBaseContextMeta() {
       },
       methods: {
         t: '国际化函数，用于翻译文案。参数：(key: string, variables?: object) => string。示例：`ctx.t("你好 {name}", { name: "世界" })`',
+        render: {
+          description:
+            '渲染到容器。vnode 支持 ReactElement、DOM 节点/片段、或 HTML 字符串。参数：(vnode: ReactElement | Node | DocumentFragment | string, container?: HTMLElement|ElementProxy) => Root|null。示例：`ctx.render(<div />)` 或 `ctx.render("<b>hi</b>")`',
+          detail: 'ReactDOM Root',
+          completion: {
+            insertText: `ctx.render(<div />)`,
+          },
+        },
         requireAsync:
           '按 URL 异步加载外部库。参数：(url: string) => Promise<any>。示例：`const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
         importAsync:

package/src/runjs-context/snippets/index.ts

@@ -27,6 +27,7 @@ const snippets: Record<string, () => Promise<any>> = {
   'scene/block/echarts-init': () => import('./scene/block/echarts-init.snippet'),
   // scene/block
   'scene/block/render-react': () => import('./scene/block/render-react.snippet'),
+  'scene/block/render-react-jsx': () => import('./scene/block/render-react-jsx.snippet'),
   'scene/block/render-button-handler': () => import('./scene/block/render-button-handler.snippet'),
   'scene/block/add-event-listener': () => import('./scene/block/add-event-listener.snippet'),
   'scene/block/chartjs-bar': () => import('./scene/block/chartjs-bar.snippet'),

package/src/runjs-context/snippets/scene/block/render-button-handler.snippet.ts

@@ -22,11 +22,13 @@ const snippet: SnippetModule = {
     },
   },
   content: `
-const { React, ReactDOM, antd } = ctx;
-const { Button } = antd;
+const { Button } = ctx.antd;
 
-const node = React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Button'));
-ReactDOM.createRoot(ctx.element).render(node);
+ctx.render(
+  <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+    {ctx.t('Button')}
+  </Button>
+);
 `,
 };
 

package/src/runjs-context/snippets/scene/block/render-info-card.snippet.ts

@@ -22,29 +22,28 @@ const snippet: SnippetModule = {
     },
   },
   content: `
-const { Card, Descriptions, Tag, Typography } = ctx.antd;
-const { createElement: h } = ctx.React;
+const { Card, Descriptions, Tag } = ctx.antd;
 
 if (!ctx.record) {
-  ctx.element.innerHTML = '<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>';
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No record data') + '</div>');
   return;
 }
 
 const record = ctx.record;
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Card, { title: ctx.t('Record Details'), bordered: true, style: { margin: 0 } },
-    h(Descriptions, { column: 2, size: 'small' },
-      h(Descriptions.Item, { label: ctx.t('ID') }, record.id || '-'),
-      h(Descriptions.Item, { label: ctx.t('Status') },
-        h(Tag, { color: record.status === 'active' ? 'green' : 'default' }, record.status || '-')
-      ),
-      h(Descriptions.Item, { label: ctx.t('Title') }, record.title || '-'),
-      h(Descriptions.Item, { label: ctx.t('Created At') },
-        record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'
-      )
-    )
-  )
+ctx.render(
+  <Card title={ctx.t('Record Details')} bordered style={{ margin: 0 }}>
+    <Descriptions column={2} size="small">
+      <Descriptions.Item label={ctx.t('ID')}>{record.id || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Status')}>
+        <Tag color={record.status === 'active' ? 'green' : 'default'}>{record.status || '-'}</Tag>
+      </Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Title')}>{record.title || '-'}</Descriptions.Item>
+      <Descriptions.Item label={ctx.t('Created At')}>
+        {record.createdAt ? new Date(record.createdAt).toLocaleString() : '-'}
+      </Descriptions.Item>
+    </Descriptions>
+  </Card>
 );
 
 `,

package/src/runjs-context/snippets/scene/block/render-react-jsx.snippet.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 type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-react-jsx',
+  label: 'Render React (JSX)',
+  description: 'Render a simple React component using JSX syntax',
+  locales: {
+    'zh-CN': {
+      label: '渲染 React（JSX）',
+      description: '使用 JSX 语法渲染一个简单的 React 组件',
+    },
+  },
+  content: `
+// Render a React component with JSX
+const { React } = ctx;
+
+const App = () => (
+  <div style={{ padding: 12 }}>
+    <h3 style={{ margin: 0, color: '#1890ff' }}>Hello JSX</h3>
+    <div style={{ color: '#555' }}>This block is rendered by JSX.</div>
+  </div>
+);
+
+ctx.render(<App />);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-react.snippet.ts

@@ -23,15 +23,15 @@ const snippet: SnippetModule = {
   },
   content: `
 // Render a React element into ctx.element via ReactDOM
-const { React, ReactDOM, antd } = ctx;
-const { Button } = antd;
+const { Button } = ctx.antd;
 
-const node = React.createElement(
-  'div',
-  { style: { padding: 12 } },
-  React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Click')),
+ctx.render(
+  <div style={{ padding: 12 }}>
+    <Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>
+      {ctx.t('Click')}
+    </Button>
+  </div>
 );
-ReactDOM.createRoot(ctx.element).render(node);
 `,
 };
 

package/src/runjs-context/snippets/scene/block/render-statistics.snippet.ts

@@ -23,7 +23,6 @@ const snippet: SnippetModule = {
   },
   content: `
 const { Card, Statistic, Row, Col } = ctx.antd;
-const { createElement: h } = ctx.React;
 
 const res = await ctx.api.request({
   url: 'users:list',
@@ -47,33 +46,29 @@ const distinctRoles = new Set(
     .filter(Boolean),
 ).size;
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Row, { gutter: 16 },
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Total users'), value: total, valueStyle: { color: '#3f8600' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Administrators'), value: adminCount, valueStyle: { color: '#1890ff' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, { title: ctx.t('Users with email'), value: withEmail, valueStyle: { color: '#faad14' } })
-      )
-    ),
-    h(Col, { span: 6 },
-      h(Card, {},
-        h(Statistic, {
-          title: ctx.t('Distinct roles'),
-          value: distinctRoles,
-          valueStyle: { color: '#cf1322' },
-        })
-      )
-    )
-  )
+ctx.render(
+  <Row gutter={16}>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Total users')} value={total} valueStyle={{ color: '#3f8600' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Administrators')} value={adminCount} valueStyle={{ color: '#1890ff' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Users with email')} value={withEmail} valueStyle={{ color: '#faad14' }} />
+      </Card>
+    </Col>
+    <Col span={6}>
+      <Card>
+        <Statistic title={ctx.t('Distinct roles')} value={distinctRoles} valueStyle={{ color: '#cf1322' }} />
+      </Card>
+    </Col>
+  </Row>
 );
 `,
 };

package/src/runjs-context/snippets/scene/block/render-timeline.snippet.ts

@@ -23,7 +23,6 @@ const snippet: SnippetModule = {
   },
   content: `
 const { Timeline, Card } = ctx.antd;
-const { createElement: h } = ctx.React;
 
 const res = await ctx.api.request({
   url: 'users:list',
@@ -37,28 +36,28 @@ const res = await ctx.api.request({
 const records = res?.data?.data || [];
 
 if (!records.length) {
-  ctx.element.innerHTML = '<div style="padding:16px;color:#999;">' + ctx.t('No data') + '</div>';
+  ctx.render('<div style="padding:16px;color:#999;">' + ctx.t('No data') + '</div>');
   return;
 }
 
-ctx.ReactDOM.createRoot(ctx.element).render(
-  h(Card, { title: ctx.t('Activity Timeline'), bordered: true },
-    h(Timeline, { mode: 'left' },
-      ...records.map(record =>
-        h(Timeline.Item, {
-          key: record.id,
-          label: record.createdAt ? new Date(record.createdAt).toLocaleString() : '',
-        },
-          h('div', {},
-            h('strong', {}, record.nickname || record.username || ctx.t('Unnamed user')),
-            record.email
-              ? h('div', { style: { color: '#999', fontSize: '12px', marginTop: '4px' } }, record.email)
-              : null,
-          )
-        )
-      )
-    )
-  )
+ctx.render(
+  <Card title={ctx.t('Activity Timeline')} bordered>
+    <Timeline mode="left">
+      {records.map((record) => (
+        <Timeline.Item
+          key={record.id}
+          label={record.createdAt ? new Date(record.createdAt).toLocaleString() : ''}
+        >
+          <div>
+            <strong>{record.nickname || record.username || ctx.t('Unnamed user')}</strong>
+            {record.email ? (
+              <div style={{ color: '#999', fontSize: '12px', marginTop: '4px' }}>{record.email}</div>
+            ) : null}
+          </div>
+        </Timeline.Item>
+      ))}
+    </Timeline>
+  </Card>
 );
 `,
 };

package/src/utils/__tests__/jsxTransform.test.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 { compileRunJs } from '../../utils/jsxTransform';
+
+describe('compileRunJs', () => {
+  it('returns original code when no JSX is present', async () => {
+    const src = `const a = 1; const b = a + 1;`;
+    const out = await compileRunJs(src);
+    expect(out).toBe(src);
+  });
+
+  it('transforms JSX when sucrase is available (skip if missing)', async () => {
+    const src = `ctx.render(<div className="x">hi</div>);`;
+
+    // Try to import sucrase to decide if this environment has it installed
+    const hasSucrase = await import('sucrase').then(() => true).catch(() => false);
+
+    const out = await compileRunJs(src);
+
+    if (!hasSucrase) {
+      // Environment without sucrase: current implementation falls back to original code
+      expect(out).toBe(src);
+      return;
+    }
+
+    // sucrase available: output should contain React.createElement mapping
+    expect(out).not.toBe(src);
+    expect(out).toMatch(/ctx\.React\.createElement/);
+  });
+});

package/src/utils/jsxTransform.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.
+ */
+
+/**
+ * Lightweight JSX -> JS compiler for RunJS user code.
+ * - Uses sucrase via dynamic import (lazy; avoids static cycles and cost when not needed)
+ * - Maps JSX to ctx.React.createElement / ctx.React.Fragment so no global React is required
+ * - If sucrase is unavailable or transform throws, returns original code as graceful fallback
+ */
+export async function compileRunJs(code: string): Promise<string> {
+  // Fast path: cheap heuristic to skip import if no JSX likely present
+  // (not strict; still safe because we fall back to transform if dynamic import is cheap)
+  const maybeJSX = /<[A-Za-z]|<\//.test(code);
+  if (!maybeJSX) return code;
+
+  try {
+    const mod: any = await import('sucrase');
+    const transform = mod?.transform || mod?.default?.transform;
+    if (typeof transform !== 'function') return code;
+    const res = transform(code, {
+      transforms: ['jsx'],
+      jsxPragma: 'ctx.React.createElement',
+      jsxFragmentPragma: 'ctx.React.Fragment',
+      // Keep ES syntax as-is; JSRunner runs in modern engines
+      disableESTransforms: true,
+      production: true,
+    });
+    return (res && (res.code || res?.output)) ?? code;
+  } catch (_e) {
+    // Fallback: return original code if transform fails
+    return code;
+  }
+}