@nocobase/flow-engine 2.0.0-alpha.10

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

@@ -0,0 +1,31 @@
+/**
+ * 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 { FlowRunJSContext } from '../../flowContext';
+
+export class JSCollectionActionRunJSContext extends FlowRunJSContext {}
+
+JSCollectionActionRunJSContext.define({
+  label: 'JSCollectionAction RunJS context',
+  properties: {
+    resource: `Collection resource instance providing access to selected rows, pagination, and data operations.
+      Use ctx.resource.selectedRows to get selected records.
+      Use ctx.resource.pagination for page info.`,
+  },
+});
+
+JSCollectionActionRunJSContext.define(
+  {
+    label: 'JS 集合动作 RunJS 上下文',
+    properties: {
+      resource: '列表资源（包含选中行/分页信息等）',
+    },
+  },
+  { locale: 'zh-CN' },
+);

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

@@ -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.
+ */
+
+import { FlowRunJSContext } from '../../flowContext';
+
+/**
+ * RunJS context for JSColumnModel (table custom column).
+ * Focused on per-row rendering with access to current record and cell element.
+ */
+export class JSColumnRunJSContext extends FlowRunJSContext {}
+
+JSColumnRunJSContext.define({
+  label: 'JSColumn RunJS context',
+  properties: {
+    element:
+      'ElementProxy instance providing a safe DOM container for the current table cell. Supports innerHTML/append and basic DOM APIs.',
+    record: 'Current row record object (read-only).',
+    recordIndex: 'Index of the current row in the page (0-based).',
+    collection: 'Collection definition metadata (read-only).',
+    viewer:
+      'View controller providing dialog/drawer/embed helpers for interactions initiated from the cell (e.g., open details).',
+    React: 'React library',
+    antd: 'Ant Design library',
+  },
+  methods: {
+    onRefReady:
+      'Wait for cell DOM element to be ready before executing callback. Parameters: (ref, callback, timeout?) => void',
+    requireAsync: 'Load external library by URL: `const lib = await ctx.requireAsync(url)`',
+    importAsync: 'Dynamically import ESM module by URL: `const mod = await ctx.importAsync(url)`',
+  },
+});
+
+JSColumnRunJSContext.define(
+  {
+    label: 'JS 列 RunJS 上下文',
+    properties: {
+      element: 'ElementProxy，表格单元格的安全 DOM 容器，支持 innerHTML/append 等',
+      record: '当前行记录对象（只读）',
+      recordIndex: '当前行索引（从 0 开始）',
+      collection: '集合定义元数据（只读）',
+      viewer: '视图控制器，可用于在单元格中触发抽屉/对话框/内嵌等交互',
+      React: 'React 库',
+      antd: 'Ant Design 库',
+    },
+    methods: {
+      onRefReady: '等待单元格 DOM 就绪后执行回调。参数：(ref, callback, timeout?)',
+      requireAsync: '按 URL 异步加载外部库：`const lib = await ctx.requireAsync(url)`',
+      importAsync: '按 URL 动态导入 ESM 模块：`const mod = await ctx.importAsync(url)`',
+    },
+  },
+  { locale: 'zh-CN' },
+);

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

@@ -0,0 +1,48 @@
+/**
+ * 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 { FlowRunJSContext } from '../../flowContext';
+
+export class JSFieldRunJSContext extends FlowRunJSContext {}
+
+JSFieldRunJSContext.define({
+  label: 'JSField RunJS context',
+  properties: {
+    element: `ElementProxy instance providing a safe DOM container for field rendering.
+      Supports innerHTML, append, and other DOM manipulation methods.`,
+    value: `Current value of the field (read-only).
+      Contains the data value stored in this field.`,
+    record: `Current record data object (read-only).
+      Contains all field values of the parent record.`,
+    collection: `Collection definition metadata (read-only).
+      Provides schema information about the collection this field belongs to.`,
+  },
+  methods: {
+    onRefReady: `Wait for field container DOM element to be ready before executing callback.
+      Parameters: (ref: React.RefObject, callback: (element: HTMLElement) => void, timeout?: number) => void
+      Example: ctx.onRefReady(ctx.ref, (el) => { el.innerHTML = ctx.value })`,
+  },
+});
+
+JSFieldRunJSContext.define(
+  {
+    label: 'JS 字段 RunJS 上下文',
+    properties: {
+      element: 'ElementProxy，字段渲染容器，支持 innerHTML/append 等 DOM 操作',
+      value: '字段当前值（只读）',
+      record: '当前记录对象（只读，包含父记录全部字段值）',
+      collection: '集合定义元数据（只读，描述字段所属集合的 Schema）',
+    },
+    methods: {
+      onRefReady:
+        '在字段容器 DOM 就绪后执行回调。参数：(ref, callback, timeout?)；示例：ctx.onRefReady(ctx.ref, el => { el.innerHTML = ctx.value })',
+    },
+  },
+  { locale: 'zh-CN' },
+);

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { FlowRunJSContext } from '../../flowContext';
+
+export class JSItemRunJSContext extends FlowRunJSContext {}
+
+JSItemRunJSContext.define({
+  label: 'JSItem RunJS context',
+  properties: {
+    element: `ElementProxy instance providing a safe DOM container for form item rendering.
+      Supports innerHTML, append, and other DOM manipulation methods.`,
+    resource: `Current resource instance (read-only).
+      Provides access to the data resource associated with the current form context.`,
+    record: `Current record data object (read-only).
+      Contains all field values of the parent record.`,
+  },
+  methods: {
+    onRefReady: `Wait for form item container DOM element to be ready before executing callback.
+      Parameters: (ref: React.RefObject, callback: (element: HTMLElement) => void, timeout?: number) => void`,
+  },
+});
+
+JSItemRunJSContext.define(
+  {
+    label: 'JS 表单项 RunJS 上下文',
+    properties: {
+      element: 'ElementProxy，表单项渲染容器，支持 innerHTML/append 等 DOM 操作',
+      resource: '当前资源（只读）',
+      record: '当前记录（只读）',
+    },
+    methods: {
+      onRefReady: '容器就绪后执行回调。参数：(ref, callback, timeout?)',
+    },
+  },
+  { locale: 'zh-CN' },
+);

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

@@ -0,0 +1,33 @@
+/**
+ * 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 { FlowRunJSContext } from '../../flowContext';
+
+export class JSRecordActionRunJSContext extends FlowRunJSContext {}
+
+JSRecordActionRunJSContext.define({
+  label: 'JSRecordAction RunJS context',
+  properties: {
+    record: `Current record data object (read-only).
+      Contains all field values of the record associated with this action.`,
+    filterByTk: `Primary key or filter key of the current record (read-only).
+      Used to identify the specific record in database operations.`,
+  },
+});
+
+JSRecordActionRunJSContext.define(
+  {
+    label: 'JS 记录动作 RunJS 上下文',
+    properties: {
+      record: '当前记录（只读）',
+      filterByTk: '主键/过滤键（只读）',
+    },
+  },
+  { locale: 'zh-CN' },
+);

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

@@ -0,0 +1,155 @@
+/**
+ * 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 { FlowRunJSContext } from '../../flowContext';
+
+export function defineBaseContextMeta() {
+  FlowRunJSContext.define({
+    label: 'RunJS base',
+    properties: {
+      logger: 'Pino logger instance for structured logging. Example: `ctx.logger.info({ foo: 1 }, "message")`',
+      message:
+        'Ant Design global message API for displaying temporary messages. Example: `ctx.message.success("Operation completed")`',
+      notification:
+        'Ant Design notification API for displaying notification boxes. Example: `ctx.notification.open({ message: "Title", description: "Content" })`',
+      resource: 'Data resource accessible based on current user permissions',
+      urlSearchParams: 'URLSearchParams object containing query parameters from the current URL',
+      token: 'API authentication token for the current session',
+      role: 'Current user role information',
+      auth: 'Authentication context containing locale, role, user, and token information',
+      api: {
+        description: 'APIClient instance for making HTTP requests.',
+        detail: 'APIClient',
+        properties: {
+          request: {
+            description:
+              'Make an HTTP request using the APIClient instance. Parameters: (options: RequestOptions) => Promise<any>.',
+            detail: 'Promise<any>',
+            completion: {
+              insertText: `await ctx.api.request({ url: '', method: 'get', params: {} })`,
+            },
+          },
+        },
+      },
+      i18n: {
+        description: 'An instance of i18next for managing internationalization.',
+        detail: 'i18next',
+        properties: {
+          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',
+    },
+    methods: {
+      t: 'Internationalization function for translating text. Parameters: (key: string, variables?: object) => string. Example: `ctx.t("Hello {name}", { name: "World" })`',
+      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',
+      runAction: {
+        description:
+          'Execute a data action on the current resource. Parameters: (actionName: string, params: object) => Promise<any>. Example: `await ctx.runAction("create", { values: { name: "test" } })`',
+        detail: 'Promise<any>',
+        completion: {
+          insertText: `await ctx.runAction('create', { values: {} })`,
+        },
+      },
+      openView: {
+        description: `Open a view component (page, modal, or drawer) by its unique identifier.
+      Parameters: (viewId: string, options?: OpenViewOptions) => Promise<void>
+      Options:
+        - params: Record<string, any> - Parameters passed to the view component
+        - mode: "page" | "modal" | "drawer" - Display mode (default: "drawer")
+        - title: string - Modal/drawer title
+        - width: number | string - Modal/drawer width
+        - navigation: boolean - Whether to use route navigation
+        - preventClose: boolean - Prevent closing the view
+        - viewUid: string - Custom view UID for routing
+        - isMobileLayout: boolean - Use mobile layout (displays as embed)
+      Examples:
+       - Modal with params: await ctx.openView("user-detail", { params: { id: 123 }, mode: "modal", title: "User Details", width: 800 })
+       - Drawer (default): await ctx.openView("settings-page")
+        - Page navigation: await ctx.openView("dashboard", { mode: "page" })`,
+        detail: 'Promise<void>',
+        completion: {
+          insertText: `await ctx.openView('view-id', { mode: 'drawer', params: {} })`,
+        },
+      },
+    },
+  });
+
+  FlowRunJSContext.define(
+    {
+      label: 'RunJS 基础',
+      properties: {
+        logger: 'Pino 日志实例（结构化日志）。示例：`ctx.logger.info({ foo: 1 }, "message")`',
+        message: 'Ant Design 全局消息 API，用于显示临时提示。示例：`ctx.message.success("操作成功")`',
+        notification:
+          'Ant Design 通知 API，用于显示通知框。示例：`ctx.notification.open({ message: "标题", description: "内容" })`',
+        resource: '基于当前用户权限可访问的数据资源',
+        urlSearchParams: '当前 URL 的查询参数（URLSearchParams 对象）',
+        token: '当前会话的 API 认证 token',
+        role: '当前用户角色信息',
+        auth: '认证上下文，包含 locale、role、user、token 等信息',
+        api: {
+          description: '用于发起 HTTP 请求的 APIClient 实例',
+          detail: 'APIClient',
+          properties: {
+            request: {
+              description: '通过 ctx.api.request 发起 HTTP 请求，入参为 RequestOptions，返回 Promise。',
+              detail: 'Promise<any>',
+              completion: {
+                insertText: `await ctx.api.request({ url: '', method: 'get', params: {} })`,
+              },
+            },
+          },
+        },
+        i18n: {
+          description: 'i18next 实例，可用于管理国际化',
+          detail: 'i18next',
+          properties: {
+            language: '当前激活的语言代码',
+          },
+        },
+        React: 'React 命名空间，提供 React 函数与 hooks（RunJS 环境中可用）',
+        ReactDOM: 'ReactDOM 客户端 API，含 createRoot 等渲染方法',
+        antd: 'Ant Design 组件库（RunJS 环境中可用）',
+      },
+      methods: {
+        t: '国际化函数，用于翻译文案。参数：(key: string, variables?: object) => string。示例：`ctx.t("你好 {name}", { name: "世界" })`',
+        requireAsync:
+          '按 URL 异步加载外部库。参数：(url: string) => Promise<any>。示例：`const lodash = await ctx.requireAsync("https://cdn.jsdelivr.net/npm/lodash")`',
+        importAsync:
+          '按 URL 动态导入 ESM 模块（开发/生产均可用）。参数：(url: string) => Promise<Module>。示例：`const mod = await ctx.importAsync("https://cdn.jsdelivr.net/npm/lit-html@2/+esm")`',
+        resolveJsonTemplate: '解析含 {{ }} 变量表达式的 JSON 模板。参数：(template: any, context?: object) => any',
+        runAction: {
+          description:
+            '对当前资源执行数据动作。参数：(actionName: string, params: object) => Promise<any>。示例：`await ctx.runAction("create", { values: { name: "test" } })`',
+          detail: 'Promise<any>',
+          completion: {
+            insertText: `await ctx.runAction('create', { values: {} })`,
+          },
+        },
+        openView: {
+          description:
+            '根据唯一标识打开视图（页面/弹窗/抽屉）。参数：(viewId: string, options?: OpenViewOptions) => Promise<void>`，常用选项：params、mode、title、width、navigation、preventClose、viewUid、isMobileLayout。',
+          detail: 'Promise<void>',
+          completion: {
+            insertText: `await ctx.openView('view-id', { mode: 'drawer', params: {} })`,
+          },
+        },
+      },
+    },
+    { locale: 'zh-CN' },
+  );
+}

package/src/runjs-context/helpers.ts

@@ -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.
+ */
+
+import type { FlowContext } from '../flowContext';
+import { JSRunner } from '../JSRunner';
+import type { JSRunnerOptions } from '../JSRunner';
+import { RunJSContextRegistry, getModelClassName, type RunJSVersion } from './registry';
+
+function getLocale(ctx: any): string | undefined {
+  return ctx?.api?.auth?.locale || ctx?.i18n?.language || ctx?.locale;
+}
+
+export function getRunJSDocFor(ctx: FlowContext, { version = 'v1' as RunJSVersion } = {}) {
+  const modelClass = getModelClassName(ctx);
+  const ctor = RunJSContextRegistry.resolve(version, modelClass) || RunJSContextRegistry.resolve(version, '*');
+  const locale = getLocale(ctx);
+  if ((ctor as any)?.getDoc?.length) {
+    // prefer getDoc(locale)
+    return (ctor as any).getDoc(locale) || {};
+  }
+  return (ctor as any)?.getDoc?.() || {};
+}
+
+export function createJSRunnerWithVersion(this: FlowContext, options?: JSRunnerOptions) {
+  const version = (options?.version as RunJSVersion) || ('v1' as RunJSVersion);
+  const modelClass = getModelClassName(this);
+  const ensureFlowContext = (obj: any): FlowContext => obj as FlowContext;
+  const Ctor = RunJSContextRegistry.resolve(version, modelClass) || RunJSContextRegistry.resolve(version, '*');
+  if (!Ctor) {
+    throw new Error('[RunJS] No RunJSContext registered for version/model.');
+  }
+  const runCtx = new (Ctor as any)(ensureFlowContext(this));
+  const globals: Record<string, any> = { ctx: runCtx, ...(options?.globals || {}) };
+  // 对字段/区块类上下文，默认注入 window/document 以支持在沙箱中访问 DOM API
+  if (modelClass === 'JSFieldModel' || modelClass === 'JSBlockModel') {
+    if (typeof window !== 'undefined') globals.window = window as any;
+    if (typeof document !== 'undefined') globals.document = document as any;
+  }
+  // 透传 JSRunnerOptions 其余配置（如 timeoutMs）
+  const { timeoutMs } = options || {};
+  return new JSRunner({ globals, timeoutMs });
+}
+
+export function getRunJSScenesForModel(modelClass: string, version: RunJSVersion = 'v1'): string[] {
+  const meta = RunJSContextRegistry.getMeta(version, modelClass);
+  return Array.isArray(meta?.scenes) ? [...meta!.scenes!] : [];
+}
+
+export function getRunJSScenesForContext(ctx: FlowContext, { version = 'v1' as RunJSVersion } = {}): string[] {
+  const modelClass = getModelClassName(ctx);
+  return getRunJSScenesForModel(modelClass, version);
+}

package/src/runjs-context/registry.ts

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+// 为避免在模块初始化阶段引入 FlowContext（从而触发循环依赖），不要在顶层导入各类 RunJSContext。
+// 在需要默认映射时（首次 resolve）再使用 createRequire 同步加载对应模块。
+
+export type RunJSVersion = 'v1' | (string & {});
+export type RunJSContextCtor = new (delegate: any) => any;
+export type RunJSContextMeta = {
+  scenes?: string[];
+};
+
+export class RunJSContextRegistry {
+  private static map = new Map<string, { ctor: RunJSContextCtor; meta?: RunJSContextMeta }>();
+  static register(version: RunJSVersion, modelClass: string, ctor: RunJSContextCtor, meta?: RunJSContextMeta) {
+    this.map.set(`${version}:${modelClass}`, { ctor, meta });
+  }
+  static resolve(version: RunJSVersion, modelClass: string) {
+    return this.map.get(`${version}:${modelClass}`)?.ctor || this.map.get(`${version}:*`)?.ctor;
+  }
+  static getMeta(version: RunJSVersion, modelClass: string): RunJSContextMeta | undefined {
+    return this.map.get(`${version}:${modelClass}`)?.meta || this.map.get(`${version}:*`)?.meta;
+  }
+}
+
+export function getModelClassName(ctx: any): string {
+  return ctx?.model?.constructor?.name || '*';
+}

package/src/runjs-context/setup.ts

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ */
+
+/**
+ * RunJS context registration entry. No side-effects by default.
+ */
+import { RunJSContextRegistry } from './registry';
+import { FlowRunJSContext } from '../flowContext';
+import { defineBaseContextMeta } from './contexts/base';
+
+let done = false;
+export async function setupRunJSContexts() {
+  if (done) return;
+  defineBaseContextMeta();
+
+  // Lazy import to avoid circular dependencies during module initialization
+  const [
+    { JSBlockRunJSContext },
+    { JSFieldRunJSContext },
+    { JSItemRunJSContext },
+    { JSColumnRunJSContext },
+    { FormJSFieldItemRunJSContext },
+    { JSRecordActionRunJSContext },
+    { JSCollectionActionRunJSContext },
+  ] = await Promise.all([
+    import('./contexts/JSBlockRunJSContext'),
+    import('./contexts/JSFieldRunJSContext'),
+    import('./contexts/JSItemRunJSContext'),
+    import('./contexts/JSColumnRunJSContext'),
+    import('./contexts/FormJSFieldItemRunJSContext'),
+    import('./contexts/JSRecordActionRunJSContext'),
+    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, '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'] });
+  done = true;
+}

package/src/runjs-context/snippets/global/api-request.snippet.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 type { SnippetModule } from '../types';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-api-request',
+  label: 'API request template',
+  description: 'Basic template to send HTTP requests via ctx.api.request',
+  locales: {
+    'zh-CN': {
+      label: 'API 请求模板',
+      description: '使用 ctx.api.request 发送 HTTP 请求的基础模板',
+    },
+  },
+  content: `
+// Replace url/method/params/data as needed
+const response = await ctx.api.request({
+  url: 'users:list',
+  method: 'get',
+  params: {
+    pageSize: 10,
+  },
+});
+
+ctx.message.success(ctx.t('Request finished'));
+console.log(ctx.t('Response data:'), response?.data);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/global/import-esm.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';
+
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-import',
+  label: 'Import ESM module',
+  description: 'Dynamically import an ESM module by URL',
+  locales: {
+    'zh-CN': {
+      label: '导入 ESM 模块',
+      description: '按 URL 动态导入 ESM 模块',
+    },
+  },
+  content: `
+// Import an ESM module by URL
+// Works in yarn dev and yarn start
+const mod = await ctx.importAsync('https://cdn.jsdelivr.net/npm/lit-html@2/+esm');
+const { html, render } = mod;
+
+ctx.element.innerHTML = '';
+const container = document.createElement('div');
+container.style.padding = '8px';
+container.style.border = '1px dashed #999';
+ctx.element.append(container);
+
+render(html\`<span style="color:#52c41a;">lit-html loaded and rendered</span>\`, container);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/global/message-error.snippet.ts

@@ -0,0 +1,26 @@
+/**
+ * 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';
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-msg-error',
+  label: 'Message error',
+  description: 'Show an error toast message',
+  locales: {
+    'zh-CN': {
+      label: '错误消息提示',
+      description: '显示一条错误提示消息',
+    },
+  },
+  content: `
+ctx.message.error(ctx.t('Operation failed'));
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/message-success.snippet.ts

@@ -0,0 +1,26 @@
+/**
+ * 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';
+const snippet: SnippetModule = {
+  contexts: ['*'],
+  prefix: 'sn-msg',
+  label: 'Message success',
+  description: 'Show a success toast message',
+  locales: {
+    'zh-CN': {
+      label: '成功消息提示',
+      description: '显示一条成功提示消息',
+    },
+  },
+  content: `
+ctx.message.success(ctx.t('Operation succeeded'));
+`,
+};
+export default snippet;