@nocobase/flow-engine 2.0.0-alpha.9 → 2.0.0-beta.2

package/lib/reactive/observer.js

@@ -0,0 +1,109 @@
+/**
+ * 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 observer_exports = {};
+__export(observer_exports, {
+  getPageActive: () => getPageActive,
+  observer: () => observer
+});
+module.exports = __toCommonJS(observer_exports);
+var import_reactive_react = require("@formily/reactive-react");
+var import_react = __toESM(require("react"));
+var import_FlowContextProvider = require("../FlowContextProvider");
+var import_reactive = require("@formily/reactive");
+const observer = /* @__PURE__ */ __name((Component, options) => {
+  const ComponentWithDefaultScheduler = import_react.default.memo((props) => {
+    const ctx = (0, import_FlowContextProvider.useFlowContext)();
+    const ctxRef = (0, import_react.useRef)(ctx);
+    ctxRef.current = ctx;
+    const pendingDisposerRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      return () => {
+        if (pendingDisposerRef.current) {
+          pendingDisposerRef.current();
+          pendingDisposerRef.current = null;
+        }
+      };
+    }, []);
+    const ObservedComponent = (0, import_react.useMemo)(
+      () => (0, import_reactive_react.observer)(Component, {
+        scheduler(updater) {
+          var _a, _b;
+          const pageActive = getPageActive(ctxRef.current);
+          const tabActive = (_b = (_a = ctxRef.current) == null ? void 0 : _a.tabActive) == null ? void 0 : _b.value;
+          if (pageActive === false || tabActive === false) {
+            setTimeout(() => {
+              if (pendingDisposerRef.current) {
+                return;
+              }
+              const disposer = (0, import_reactive.autorun)(() => {
+                var _a2, _b2, _c, _d, _e, _f;
+                if (((_b2 = (_a2 = ctxRef.current) == null ? void 0 : _a2.pageActive) == null ? void 0 : _b2.value) && (((_d = (_c = ctxRef.current) == null ? void 0 : _c.tabActive) == null ? void 0 : _d.value) === true || ((_f = (_e = ctxRef.current) == null ? void 0 : _e.tabActive) == null ? void 0 : _f.value) === void 0)) {
+                  updater();
+                  disposer == null ? void 0 : disposer();
+                  pendingDisposerRef.current = null;
+                }
+              });
+              pendingDisposerRef.current = disposer;
+            });
+            return;
+          }
+          if (pendingDisposerRef.current) {
+            pendingDisposerRef.current();
+            pendingDisposerRef.current = null;
+          }
+          updater();
+        },
+        ...options
+      }),
+      []
+    );
+    return /* @__PURE__ */ import_react.default.createElement(ObservedComponent, { ...props });
+  });
+  ComponentWithDefaultScheduler.displayName = `ComponentWithDefaultScheduler`;
+  return ComponentWithDefaultScheduler;
+}, "observer");
+function getPageActive(context) {
+  var _a, _b, _c;
+  return typeof ((_a = context == null ? void 0 : context.pageActive) == null ? void 0 : _a.value) === "boolean" ? (_b = context == null ? void 0 : context.pageActive) == null ? void 0 : _b.value : (_c = context == null ? void 0 : context.view) == null ? void 0 : _c.inputArgs.pageActive;
+}
+__name(getPageActive, "getPageActive");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPageActive,
+  observer
+});

package/lib/resources/baseRecordResource.d.ts

@@ -45,6 +45,7 @@ export declare abstract class BaseRecordResource<TData = any> extends APIResourc
     removeAppends(appends: string | string[]): this;
     getUpdateAssociationValues(): string[];
     addUpdateAssociationValues(updateAssociationValues: string | string[]): this;
+    jsonStringify(value: any): string;
     setFilterByTk(filterByTk: any): this;
     getFilterByTk(): any;
     setFields(fields: string[] | string): this;

package/lib/resources/baseRecordResource.js

@@ -110,6 +110,7 @@ const _BaseRecordResource = class _BaseRecordResource extends import_apiResource
   }
   async runAction(action, options) {
     var _a;
+    const { rawResponse, ...rest } = options;
     const config = this.mergeRequestConfig(
       import_lodash.default.omit(this.request, ["params", "data", "method"]),
       {
@@ -117,14 +118,18 @@ const _BaseRecordResource = class _BaseRecordResource extends import_apiResource
         url: this.buildURL(action)
       },
       (_a = this.runActionOptions) == null ? void 0 : _a[action],
-      options
+      rest
     );
     if (["create", "update", "firstOrCreate", "updateOrCreate"].includes(action)) {
       config.params = config.params || {};
       config.params.updateAssociationValues = this.getUpdateAssociationValues();
     }
     try {
-      const { data } = await this.api.request(config);
+      const response = await this.api.request(config);
+      if (rawResponse) {
+        return response;
+      }
+      const { data } = response;
       if (!(data == null ? void 0 : data.data)) {
         return data;
       }
@@ -219,8 +224,14 @@ const _BaseRecordResource = class _BaseRecordResource extends import_apiResource
     this.updateAssociationValues = currentUpdateAssociationValues;
     return this;
   }
+  jsonStringify(value) {
+    if (value !== null && typeof value === "object") {
+      return JSON.stringify(value);
+    }
+    return value;
+  }
   setFilterByTk(filterByTk) {
-    return this.addRequestParameter("filterByTk", filterByTk);
+    return this.addRequestParameter("filterByTk", this.jsonStringify(filterByTk));
   }
   getFilterByTk() {
     return this.request.params.filterByTk;

package/lib/resources/multiRecordResource.d.ts

@@ -39,11 +39,13 @@ export declare class MultiRecordResource<TDataItem = any> extends BaseRecordReso
     next(): Promise<void>;
     previous(): Promise<void>;
     goto(page: number): Promise<void>;
-    create(data: TDataItem, options?: AxiosRequestConfig): Promise<void>;
+    create(data: TDataItem, options?: AxiosRequestConfig & {
+        refresh?: boolean;
+    }): Promise<void>;
     get(filterByTk: any): Promise<TDataItem | undefined>;
     update(filterByTk: string | number, data: Partial<TDataItem>, options?: AxiosRequestConfig): Promise<void>;
     destroySelectedRows(): Promise<void>;
-    destroy(filterByTk: string | number | string[] | number[] | TDataItem | TDataItem[], options?: AxiosRequestConfig): Promise<void>;
+    destroy(filterByTk: string | number | string[] | number[] | TDataItem | TDataItem[] | object, options?: AxiosRequestConfig): Promise<void>;
     setItem(index: number, newDataItem: TDataItem): void;
     /**
      * 在同一个事件循环内多次调用 refresh 方法时，只有最后一次调用会生效。避免触发多次相同的接口请求。

package/lib/resources/multiRecordResource.js

@@ -129,8 +129,12 @@ const _MultiRecordResource = class _MultiRecordResource extends import_baseRecor
   }
   async create(data, options) {
     const config = this.mergeRequestConfig({ data }, this.createActionOptions, options);
-    await this.runAction("create", config);
-    await this.refresh();
+    const res = await this.runAction("create", config);
+    this.emit("saved", data);
+    if ((options == null ? void 0 : options.refresh) !== false) {
+      await this.refresh();
+    }
+    return res;
   }
   async get(filterByTk) {
     const options = {
@@ -144,17 +148,19 @@ const _MultiRecordResource = class _MultiRecordResource extends import_baseRecor
     return data;
   }
   async update(filterByTk, data, options) {
+    const result = data;
     const config = this.mergeRequestConfig(
       {
         params: {
           filterByTk
         },
-        data
+        data: result
       },
       this.updateActionOptions,
       options
     );
     await this.runAction("update", config);
+    this.emit("saved", data);
     await this.refresh();
   }
   async destroySelectedRows() {
@@ -168,14 +174,17 @@ const _MultiRecordResource = class _MultiRecordResource extends import_baseRecor
     const config = this.mergeRequestConfig(
       {
         params: {
-          filterByTk: import_lodash.default.castArray(filterByTk).map((item) => {
-            return typeof item === "object" ? item["id"] : item;
-          })
+          filterByTk: this.jsonStringify(filterByTk)
         }
       },
       options
     );
     await this.runAction("destroy", config);
+    const currentPage = this.getPage();
+    const lastPage = Math.ceil((this.getCount() - import_lodash.default.castArray(filterByTk).length) / this.getPageSize());
+    if (currentPage > lastPage) {
+      this.setPage(lastPage || 1);
+    }
     await this.refresh();
   }
   setItem(index, newDataItem) {

package/lib/resources/singleRecordResource.js

@@ -60,24 +60,27 @@ const _SingleRecordResource = class _SingleRecordResource extends import_baseRec
   async save(data, options) {
     const config = this.mergeRequestConfig(this.saveActionOptions, import_lodash.default.omit(options, ["refresh"]));
     let actionName = "create";
+    const result = data;
     if (!this.isNewRecord) {
       config.params = config.params || {};
       config.params.filterByTk = this.getFilterByTk();
       actionName = "update";
     }
-    await this.runAction(actionName, {
+    const res = await this.runAction(actionName, {
       ...config,
-      data
+      data: result
     });
+    this.emit("saved", data);
     if ((options == null ? void 0 : options.refresh) !== false) {
       await this.refresh();
     }
+    return res;
   }
   async destroy(options) {
     const config = this.mergeRequestConfig(
       {
         params: {
-          filterByTk: this.request.params.filterByTk
+          filterByTk: this.jsonStringify(this.request.params.filterByTk)
         }
       },
       options

package/lib/resources/sqlResource.d.ts

@@ -61,6 +61,7 @@ export declare class SQLResource<TData = any> extends BaseRecordResource<TData>
     setFilterByTk(filterByTk: any): this;
     setFilter(filter: Record<string, any>): this;
     setBind(bind: Record<string, any> | Array<any>): this;
+    setLiquidContext(liquidContext: Record<string, any>): this;
     run(): Promise<any>;
     runBySQL(): Promise<any>;
     runById(): Promise<any>;

package/lib/resources/sqlResource.js

@@ -45,18 +45,7 @@ var import_reactive = require("@formily/reactive");
 var import_lodash = __toESM(require("lodash"));
 var import_flowContext = require("../flowContext");
 var import_baseRecordResource = require("./baseRecordResource");
-function transformSQL(template) {
-  let index = 1;
-  const bind = {};
-  const sql = template.replace(/{{\s*([^}]+)\s*}}/g, (_2, expr) => {
-    const key = `__var${index}`;
-    bind[key] = `{{${expr.trim()}}}`;
-    index++;
-    return `$${key}`;
-  });
-  return { sql, bind };
-}
-__name(transformSQL, "transformSQL");
+var import_client = require("@nocobase/utils/client");
 const _FlowSQLRepository = class _FlowSQLRepository {
   ctx;
   constructor(ctx) {
@@ -72,16 +61,17 @@ const _FlowSQLRepository = class _FlowSQLRepository {
     });
   }
   async run(sql, options = {}) {
-    const result = transformSQL(sql);
-    const bind = await this.ctx.resolveJsonTemplate(result.bind);
+    const { sql: transformedSQL, bind, liquidContext } = await (0, import_client.transformSQL)(sql);
+    const resolved = await this.ctx.resolveJsonTemplate({ bind, liquidContext });
+    const parsedSQL = await (0, import_client.parseLiquidContext)(transformedSQL, resolved.liquidContext);
     const { data } = await this.ctx.api.request({
       method: "POST",
       url: "flowSql:run",
       data: {
-        sql: result.sql,
+        sql: parsedSQL,
         ...options,
         bind: {
-          ...bind,
+          ...resolved.bind,
           ...options.bind
         }
       }
@@ -105,7 +95,7 @@ const _FlowSQLRepository = class _FlowSQLRepository {
         uid
       }
     });
-    const bind = await this.ctx.resolveJsonTemplate(response.data.data || {});
+    const { bind, liquidContext } = await this.ctx.resolveJsonTemplate(response.data.data || {});
     const { data } = await this.ctx.api.request({
       method: "POST",
       url: "flowSql:runById",
@@ -114,8 +104,9 @@ const _FlowSQLRepository = class _FlowSQLRepository {
         ...options,
         bind: {
           ...bind,
-          ...options.bind
-        }
+          ...options == null ? void 0 : options.bind
+        },
+        liquidContext
       }
     });
     return data == null ? void 0 : data.data;
@@ -227,19 +218,23 @@ const _SQLResource = class _SQLResource extends import_baseRecordResource.BaseRe
     this.request.data.bind = bind;
     return this;
   }
+  setLiquidContext(liquidContext) {
+    this.request.data.liquidContext = liquidContext;
+    return this;
+  }
   async run() {
     return this._debugEnabled ? await this.runBySQL() : await this.runById();
   }
   async runBySQL() {
     const sql = this._sql;
-    const result = transformSQL(sql);
-    const bind = await this.context.resolveJsonTemplate(result.bind);
+    const { sql: transformedSQL, bind, liquidContext } = await (0, import_client.transformSQL)(sql);
+    const resolved = await this.context.resolveJsonTemplate({ bind, liquidContext });
     const options = import_lodash.default.cloneDeep({
       method: "post",
       ...this.getRefreshRequestOptions()
     });
-    options.data.bind = bind;
-    options.data.sql = result.sql;
+    options.data.sql = await (0, import_client.parseLiquidContext)(transformedSQL, resolved.liquidContext);
+    options.data.bind = resolved.bind;
     return await this.runAction("run", options);
   }
   async runById() {
@@ -249,8 +244,9 @@ const _SQLResource = class _SQLResource extends import_baseRecordResource.BaseRe
         uid: this.request.data.uid
       }
     });
-    const bind = await this.context.resolveJsonTemplate(data);
+    const { bind, liquidContext } = await this.context.resolveJsonTemplate(data);
     this.setBind(bind);
+    this.setLiquidContext(liquidContext);
     return await this.runAction("runById", {
       method: "post",
       ...this.getRefreshRequestOptions()
@@ -269,10 +265,11 @@ const _SQLResource = class _SQLResource extends import_baseRecordResource.BaseRe
         try {
           this.clearError();
           this.loading = true;
+          this.emit("loading");
           const { data, meta } = await this.run();
           this.setData(data).setMeta(meta);
-          this.emit("refresh");
           this.loading = false;
+          this.emit("refresh");
           resolve();
         } catch (error) {
           this.setError(error);

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

@@ -63,12 +63,30 @@ function defineBaseContextMeta() {
           language: "Current active language code."
         }
       },
-      React: "React namespace providing React library functions and hooks (available in RunJS environment)",
-      ReactDOM: "ReactDOM client API including createRoot for rendering React components",
-      antd: "Ant Design component library"
+      React: "React namespace providing React library functions and hooks (available in RunJS environment). Recommended access path: `ctx.libs.React`.",
+      ReactDOM: "ReactDOM client API including createRoot for rendering React components. Also available via `ctx.libs.ReactDOM`.",
+      antd: "Ant Design component library. Recommended access path: `ctx.libs.antd`.",
+      libs: {
+        description: "Namespace for third-party and shared libraries. Includes React, ReactDOM, Ant Design, and dayjs.",
+        detail: "Libraries namespace",
+        properties: {
+          React: "React namespace (same as ctx.React).",
+          ReactDOM: "ReactDOM client API (same as ctx.ReactDOM).",
+          antd: "Ant Design component library (same as ctx.antd).",
+          dayjs: "dayjs date-time utility library.",
+          antdIcons: "Ant Design icons library. Example: `ctx.libs.antdIcons.PlusOutlined`."
+        }
+      }
     },
     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",
@@ -134,12 +152,30 @@ function defineBaseContextMeta() {
             language: "\u5F53\u524D\u6FC0\u6D3B\u7684\u8BED\u8A00\u4EE3\u7801"
           }
         },
-        React: "React \u547D\u540D\u7A7A\u95F4\uFF0C\u63D0\u4F9B React \u51FD\u6570\u4E0E hooks\uFF08RunJS \u73AF\u5883\u4E2D\u53EF\u7528\uFF09",
-        ReactDOM: "ReactDOM \u5BA2\u6237\u7AEF API\uFF0C\u542B createRoot \u7B49\u6E32\u67D3\u65B9\u6CD5",
-        antd: "Ant Design \u7EC4\u4EF6\u5E93\uFF08RunJS \u73AF\u5883\u4E2D\u53EF\u7528\uFF09"
+        React: "React \u547D\u540D\u7A7A\u95F4\uFF0C\u63D0\u4F9B React \u51FD\u6570\u4E0E hooks\uFF08RunJS \u73AF\u5883\u4E2D\u53EF\u7528\uFF09\u3002\u63A8\u8350\u4F7F\u7528 `ctx.libs.React` \u8BBF\u95EE\u3002",
+        ReactDOM: "ReactDOM \u5BA2\u6237\u7AEF API\uFF0C\u542B createRoot \u7B49\u6E32\u67D3\u65B9\u6CD5\u3002\u63A8\u8350\u901A\u8FC7 `ctx.libs.ReactDOM` \u8BBF\u95EE\u3002",
+        antd: "Ant Design \u7EC4\u4EF6\u5E93\uFF08RunJS \u73AF\u5883\u4E2D\u53EF\u7528\uFF09\u3002\u63A8\u8350\u4F7F\u7528 `ctx.libs.antd` \u8BBF\u95EE\u3002",
+        libs: {
+          description: "\u7B2C\u4E09\u65B9/\u901A\u7528\u5E93\u7684\u7EDF\u4E00\u547D\u540D\u7A7A\u95F4\uFF0C\u5305\u542B React\u3001ReactDOM\u3001Ant Design\u3001dayjs \u7B49\u3002\u540E\u7EED\u65B0\u589E\u5E93\u4F1A\u4F18\u5148\u6302\u5728\u6B64\u5904\u3002",
+          detail: "\u901A\u7528\u5E93\u547D\u540D\u7A7A\u95F4",
+          properties: {
+            React: "React \u547D\u540D\u7A7A\u95F4\uFF08\u7B49\u4EF7\u4E8E ctx.React\uFF09\u3002",
+            ReactDOM: "ReactDOM \u5BA2\u6237\u7AEF API\uFF08\u7B49\u4EF7\u4E8E ctx.ReactDOM\uFF09\u3002",
+            antd: "Ant Design \u7EC4\u4EF6\u5E93\uFF08\u7B49\u4EF7\u4E8E ctx.antd\uFF09\u3002",
+            dayjs: "dayjs \u65E5\u671F\u65F6\u95F4\u5DE5\u5177\u5E93\u3002",
+            antdIcons: "Ant Design \u56FE\u6807\u5E93\u3002 \u4F8B\u5982\uFF1A`ctx.libs.antdIcons.PlusOutlined`\u3002"
+          }
+        }
       },
       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/global/clipboard-copy-text.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/global/clipboard-copy-text.snippet.js

@@ -0,0 +1,61 @@
+/**
+ * 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 clipboard_copy_text_snippet_exports = {};
+__export(clipboard_copy_text_snippet_exports, {
+  default: () => clipboard_copy_text_snippet_default
+});
+module.exports = __toCommonJS(clipboard_copy_text_snippet_exports);
+const snippet = {
+  contexts: ["*"],
+  prefix: "sn-clipboard-copy",
+  label: "Copy text to clipboard (function)",
+  description: "A reusable function that copies a given string to the clipboard.",
+  locales: {
+    "zh-CN": {
+      label: "\u590D\u5236\u6587\u672C\u5230\u526A\u8D34\u677F\uFF08\u51FD\u6570\uFF09",
+      description: "\u901A\u7528\u51FD\u6570\uFF1A\u63A5\u53D7\u4E00\u4E2A\u5B57\u7B26\u4E32\u53C2\u6570\u5E76\u590D\u5236\u5230\u526A\u8D34\u677F\u3002"
+    }
+  },
+  content: `
+// A general utility function that copies text to clipboard.
+// Usage:
+//   const ok = await copyTextToClipboard('Hello');
+//   if (ok) { /* success */ } else { /* handle failure */ }
+async function copyTextToClipboard(text) {
+  const s = String(text ?? '');
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(s);
+      return true;
+    }
+  } catch (_) {
+    // Fallback below
+  }
+}
+`
+};
+var clipboard_copy_text_snippet_default = snippet;

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

@@ -55,10 +55,13 @@ const snippets = {
   "global/open-view-drawer": /* @__PURE__ */ __name(() => import("./global/open-view-drawer.snippet"), "global/open-view-drawer"),
   "global/open-view-dialog": /* @__PURE__ */ __name(() => import("./global/open-view-dialog.snippet"), "global/open-view-dialog"),
   "global/query-selector": /* @__PURE__ */ __name(() => import("./global/query-selector.snippet"), "global/query-selector"),
+  "global/clipboard-copy-text": /* @__PURE__ */ __name(() => import("./global/clipboard-copy-text.snippet"), "global/clipboard-copy-text"),
   // libs
   "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-antd-icons": /* @__PURE__ */ __name(() => import("./scene/block/render-antd-icons.snippet"), "scene/block/render-antd-icons"),
   "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-antd-icons.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-antd-icons.snippet.js

@@ -0,0 +1,65 @@
+/**
+ * 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_antd_icons_snippet_exports = {};
+__export(render_antd_icons_snippet_exports, {
+  default: () => render_antd_icons_snippet_default
+});
+module.exports = __toCommonJS(render_antd_icons_snippet_exports);
+var import_JSBlockRunJSContext = require("../../../contexts/JSBlockRunJSContext");
+const snippet = {
+  contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext],
+  prefix: "sn-jsb-antd-icons",
+  label: "Render Ant Design icons",
+  description: "Render Ant Design icons with buttons inside the block container",
+  locales: {
+    "zh-CN": {
+      label: "\u6E32\u67D3 Ant Design \u56FE\u6807",
+      description: "\u5728\u533A\u5757\u5BB9\u5668\u4E2D\u4F7F\u7528 Ant Design \u56FE\u6807\u4E0E\u6309\u94AE\u8FDB\u884C\u6E32\u67D3"
+    }
+  },
+  content: `
+// Render Ant Design icons with buttons via ctx.libs
+const { React, antd, antdIcons } = ctx.libs;
+const { Button, Space } = antd;
+const { PlusOutlined, EditOutlined, DeleteOutlined } = antdIcons;
+
+const IconButtons = () => (
+  <Space style={{ padding: 12 }}>
+    <Button type="primary" icon={<PlusOutlined />}>
+      {ctx.t('Add')}
+    </Button>
+    <Button icon={<EditOutlined />}>{ctx.t('Edit')}</Button>
+    <Button danger icon={<DeleteOutlined />}>
+      {ctx.t('Delete')}
+    </Button>
+  </Space>
+);
+
+ctx.render(<IconButtons />);
+`
+};
+var render_antd_icons_snippet_default = snippet;

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.libs.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;