@nocobase/flow-engine 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -7,53 +7,190 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export type EngineSnippetMap = Record<string, () => Promise<any>>;
+import { RunJSContextRegistry } from '../registry';
 
-export const engineSnippets: EngineSnippetMap = {
+// Simple manual exports - no build-time magic needed
+const snippets: Record<string, () => Promise<any>> = {
   // global
   'global/message-success': () => import('./global/message-success.snippet'),
   'global/message-error': () => import('./global/message-error.snippet'),
-  'global/copy-to-clipboard': () => import('./global/copy-to-clipboard.snippet'),
-  'global/copy-record-json': () => import('./global/copy-record-json.snippet'),
-  'global/log-json-record': () => import('./global/log-json-record.snippet'),
-  'global/api-request-get': () => import('./global/api-request-get.snippet'),
-  'global/api-request-post': () => import('./global/api-request-post.snippet'),
-  'global/requireAsync': () => import('./global/requireAsync.snippet'),
-  'global/try-catch-async': () => import('./global/try-catch-async.snippet'),
-  'global/sleep': () => import('./global/sleep.snippet'),
+  'global/api-request': () => import('./global/api-request.snippet'),
+  'global/require-amd': () => import('./global/require-amd.snippet'),
+  'global/import-esm': () => import('./global/import-esm.snippet'),
   'global/notification-open': () => import('./global/notification-open.snippet'),
   'global/window-open': () => import('./global/window-open.snippet'),
-  'global/console-log-ctx': () => import('./global/console-log-ctx.snippet'),
   'global/open-view-drawer': () => import('./global/open-view-drawer.snippet'),
   'global/open-view-dialog': () => import('./global/open-view-dialog.snippet'),
-  'global/view-navigation-push': () => import('./global/view-navigation-push.snippet'),
+  'global/query-selector': () => import('./global/query-selector.snippet'),
+  'global/clipboard-copy-text': () => import('./global/clipboard-copy-text.snippet'),
   // libs
-  'libs/echarts-init': () => import('./libs/echarts-init.snippet'),
-  // scene/jsblock
-  'scene/jsblock/render-basic': () => import('./scene/jsblock/render-basic.snippet'),
-  'scene/jsblock/render-react': () => import('./scene/jsblock/render-react.snippet'),
-  'scene/jsblock/render-card': () => import('./scene/jsblock/render-card.snippet'),
-  'scene/jsblock/render-button-handler': () => import('./scene/jsblock/render-button-handler.snippet'),
-  'scene/jsblock/jsx-mount': () => import('./scene/jsblock/jsx-mount.snippet'),
-  'scene/jsblock/jsx-unmount': () => import('./scene/jsblock/jsx-unmount.snippet'),
-  'scene/jsblock/add-event-listener': () => import('./scene/jsblock/add-event-listener.snippet'),
-  'scene/jsblock/append-style': () => import('./scene/jsblock/append-style.snippet'),
-  // scene/jsfield
-  'scene/jsfield/innerHTML-value': () => import('./scene/jsfield/innerHTML-value.snippet'),
-  'scene/jsfield/format-number': () => import('./scene/jsfield/format-number.snippet'),
-  'scene/jsfield/color-by-value': () => import('./scene/jsfield/color-by-value.snippet'),
-  // scene/jsitem
-  'scene/jsitem/render-basic': () => import('./scene/jsitem/render-basic.snippet'),
-  // scene/actions
-  'scene/actions/record-id-message': () => import('./scene/actions/record-id-message.snippet'),
-  'scene/actions/run-action-basic': () => import('./scene/actions/run-action-basic.snippet'),
-  'scene/actions/collection-selected-count': () => import('./scene/actions/collection-selected-count.snippet'),
-  'scene/actions/iterate-selected-rows': () => import('./scene/actions/iterate-selected-rows.snippet'),
-  // scene/linkage
-  'scene/linkage/set-field-value': () => import('./scene/linkage/set-field-value.snippet'),
-  'scene/linkage/toggle-visible': () => import('./scene/linkage/toggle-visible.snippet'),
-  'scene/linkage/set-disabled': () => import('./scene/linkage/set-disabled.snippet'),
-  'scene/linkage/set-required': () => import('./scene/linkage/set-required.snippet'),
+  '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-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'),
+  'scene/block/vue-component': () => import('./scene/block/vue-component.snippet'),
+  'scene/block/resource-example': () => import('./scene/block/resource-example.snippet'),
+  'scene/block/api-fetch-render-list': () => import('./scene/block/api-fetch-render-list.snippet'),
+  'scene/block/render-info-card': () => import('./scene/block/render-info-card.snippet'),
+  'scene/block/render-statistics': () => import('./scene/block/render-statistics.snippet'),
+  'scene/block/render-timeline': () => import('./scene/block/render-timeline.snippet'),
+  'scene/block/render-iframe': () => import('./scene/block/render-iframe.snippet'),
+  // scene/detail
+  'scene/detail/innerHTML-value': () => import('./scene/detail/innerHTML-value.snippet'),
+  'scene/detail/format-number': () => import('./scene/detail/format-number.snippet'),
+  'scene/detail/color-by-value': () => import('./scene/detail/color-by-value.snippet'),
+  'scene/detail/copy-to-clipboard': () => import('./scene/detail/copy-to-clipboard.snippet'),
+  'scene/detail/status-tag': () => import('./scene/detail/status-tag.snippet'),
+  'scene/detail/relative-time': () => import('./scene/detail/relative-time.snippet'),
+  'scene/detail/percentage-bar': () => import('./scene/detail/percentage-bar.snippet'),
+  // scene/form
+  'scene/form/render-basic': () => import('./scene/form/render-basic.snippet'),
+  'scene/form/set-field-value': () => import('./scene/form/set-field-value.snippet'),
+  'scene/form/toggle-visible': () => import('./scene/form/toggle-visible.snippet'),
+  'scene/form/set-disabled': () => import('./scene/form/set-disabled.snippet'),
+  'scene/form/set-required': () => import('./scene/form/set-required.snippet'),
+  'scene/form/calculate-total': () => import('./scene/form/calculate-total.snippet'),
+  'scene/form/conditional-required': () => import('./scene/form/conditional-required.snippet'),
+  'scene/form/cascade-select': () => import('./scene/form/cascade-select.snippet'),
+  'scene/form/toggle-multiple-fields': () => import('./scene/form/toggle-multiple-fields.snippet'),
+  'scene/form/copy-field-values': () => import('./scene/form/copy-field-values.snippet'),
+  // scene/table
+  'scene/table/cell-open-dialog': () => import('./scene/table/cell-open-dialog.snippet'),
+  'scene/table/concat-fields': () => import('./scene/table/concat-fields.snippet'),
+  'scene/table/collection-selected-count': () => import('./scene/table/collection-selected-count.snippet'),
+  'scene/table/iterate-selected-rows': () => import('./scene/table/iterate-selected-rows.snippet'),
+  'scene/table/destroy-selected': () => import('./scene/table/destroy-selected.snippet'),
+  'scene/table/export-selected-json': () => import('./scene/table/export-selected-json.snippet'),
 };
 
-export default engineSnippets;
+export default snippets;
+
+// Cohesive snippet helpers for clients (editor, etc.)
+type EngineSnippetEntry = {
+  name: string;
+  prefix?: string;
+  description?: string;
+  body: string;
+  ref: string;
+  group?: string;
+  groups?: string[];
+  scenes?: string[];
+};
+
+function deriveNameFromKey(key: string): string {
+  const parts = key.split('/');
+  return parts[parts.length - 1] || key;
+}
+
+function normalizeScenes(def: any, key: string): string[] {
+  if (Array.isArray(def?.scenes) && def.scenes.length) {
+    return def.scenes.map((scene: any) => String(scene).trim()).filter((scene: string) => scene.length > 0);
+  }
+  const parts = key.split('/');
+  if (parts[0] === 'scene' && parts[1]) {
+    return [parts[1]];
+  }
+  return [];
+}
+
+function computeGroups(def: any, key: string): string[] {
+  const scenes = normalizeScenes(def, key);
+  if (scenes.length) {
+    return scenes.map((scene) => `scene/${scene}`);
+  }
+  const parts = key.split('/');
+  if (!parts.length) return [];
+  const first = parts[0];
+  if (first === 'global' || first === 'libs') return [first];
+  if (first === 'scene' && parts.length >= 2) return [`${first}/${parts[1]}`];
+  if (parts.length >= 2) return [`${parts[0]}/${parts[1]}`];
+  return [parts[0]];
+}
+
+function resolveLocaleMeta(def: any, locale?: string) {
+  if (!locale || !def?.locales) return {};
+  const exact = def.locales[locale];
+  if (exact) return exact;
+  const normalized = locale.toLowerCase();
+  if (normalized !== locale && def.locales[normalized]) return def.locales[normalized];
+  const base = locale.split('-')[0];
+  if (base && def.locales[base]) return def.locales[base];
+  if (base) {
+    const lowerBase = base.toLowerCase();
+    if (def.locales[lowerBase]) return def.locales[lowerBase];
+  }
+  return {};
+}
+
+export async function getSnippetBody(ref: string): Promise<string> {
+  const loader = (snippets as any)[ref];
+  if (!loader) throw new Error(`[flow-engine] snippet not found: ${ref}`);
+  const mod = await loader();
+  const def = mod?.default;
+  // engine snippet modules export a SnippetModule as default
+  const content = def?.content ?? mod?.content ?? mod?.body ?? '';
+  return typeof content === 'string' ? content : String(content ?? '');
+}
+
+export async function listSnippetsForContext(
+  ctxClassName: string,
+  version = 'v1',
+  locale?: string,
+): Promise<EngineSnippetEntry[]> {
+  const entries: EngineSnippetEntry[] = [];
+  const allowedContextNames = new Set<string>();
+  if (typeof ctxClassName === 'string' && ctxClassName) allowedContextNames.add(ctxClassName);
+  try {
+    const resolvedCtor = RunJSContextRegistry['resolve'](version as any, ctxClassName);
+    if (resolvedCtor?.name) allowedContextNames.add(resolvedCtor.name);
+  } catch (_) {
+    // ignore resolution failure
+  }
+  await Promise.all(
+    Object.entries(snippets).map(async ([key, loader]) => {
+      const mod = await (loader as any)();
+      const def = mod?.default || {};
+      const body: any = def?.content ?? mod?.content;
+      if (typeof body !== 'string') return;
+      let ok = true;
+      if (Array.isArray(def?.contexts) && def.contexts.length) {
+        const ctxNames = def.contexts.map((item: any) => {
+          if (item === '*') return '*';
+          if (typeof item === 'string') return item;
+          if (typeof item === 'function') return item.name || '*';
+          if (item && typeof item === 'object' && typeof item.name === 'string') return item.name;
+          return String(item ?? '');
+        });
+        if (ctxClassName === '*') {
+          // '*' means return all snippets without filtering by context
+          ok = true;
+        } else {
+          ok = ctxNames.includes('*') || ctxNames.some((name: string) => allowedContextNames.has(name));
+        }
+      }
+      if (ok && Array.isArray(def?.versions) && def.versions.length) {
+        ok = def.versions.includes('*') || def.versions.includes(version);
+      }
+      if (!ok) return;
+      const localeMeta = resolveLocaleMeta(def, locale);
+      const name = localeMeta.label || def?.label || deriveNameFromKey(key);
+      const description = localeMeta.description ?? def?.description;
+      const prefix = def?.prefix || name;
+      const groups = computeGroups(def, key);
+      const scenes = normalizeScenes(def, key);
+      entries.push({
+        name,
+        prefix,
+        description,
+        body,
+        ref: key,
+        group: groups[0],
+        groups,
+        scenes,
+      });
+    }),
+  );
+  return entries;
+}

package/src/runjs-context/snippets/scene/{jsblock → block}/add-event-listener.snippet.ts

@@ -7,10 +7,20 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export default {
-  contexts: ['JSBlockRunJSContext'],
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
   prefix: 'sn-jsb-click',
   label: 'Add click listener',
+  description: 'Render a button and bind a click event handler',
+  locales: {
+    'zh-CN': {
+      label: '添加点击监听',
+      description: '渲染按钮并绑定点击事件处理',
+    },
+  },
   content:
     `
 // Render a button and bind a click handler
@@ -27,3 +37,5 @@ if (btn) {
 }
 `,
 };
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/api-fetch-render-list.snippet.ts

@@ -0,0 +1,45 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-fetch-list',
+  label: 'Fetch & render list',
+  description: 'Fetch a small list via ctx.api and render basic HTML',
+  locales: {
+    'zh-CN': {
+      label: '拉取并渲染列表',
+      description: '使用 ctx.api 拉取少量数据，并渲染基础 HTML 列表',
+    },
+  },
+  content: `
+// Fetch users
+const { data } = await ctx.api.request({
+  url: 'users:list',
+  method: 'get',
+  params: { pageSize: 5 },
+});
+const rows = Array.isArray(data?.data) ? data.data : (Array.isArray(data) ? data : []);
+
+// Render as a simple HTML list
+ctx.element.innerHTML = [
+  '<div style="padding:12px">',
+  '<h4 style="margin:0 0 8px">' + ctx.t('Users') + '</h4>',
+  '<ul style="margin:0; padding-left:20px">',
+  ...rows.map((r, i) => '<li>#' + (i + 1) + ': ' + String((r && (r.nickname ?? r.username ?? r.id)) ?? '') + '</li>'),
+  '</ul>',
+  '</div>'
+].join('');
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/chartjs-bar.snippet.ts

@@ -0,0 +1,80 @@
+/**
+ * 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-jsb-chartjs',
+  label: 'Render Chart.js bar chart',
+  description: 'Load Chart.js from CDN and render a basic bar chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '渲染 Chart.js 柱状图',
+      description: '通过 CDN 引入 Chart.js 并在区块中渲染基础柱状图',
+    },
+  },
+  content: `
+const wrapper = document.createElement('div');
+wrapper.style.padding = '16px';
+wrapper.style.background = '#fff';
+wrapper.style.borderRadius = '8px';
+wrapper.style.boxShadow = '0 2px 8px rgba(0,0,0,0.05)';
+
+const canvas = document.createElement('canvas');
+canvas.width = 480;
+canvas.height = 320;
+wrapper.appendChild(canvas);
+ctx.element.replaceChildren(wrapper);
+
+async function renderChart() {
+  const loaded = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js');
+  const Chart = loaded?.Chart || loaded?.default?.Chart || loaded?.default;
+  if (!Chart) {
+    throw new Error('Chart.js is not available');
+  }
+
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+  const data = [12, 18, 9, 15, 22];
+
+  new Chart(canvas.getContext('2d'), {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: ctx.t('Daily visits'),
+          data,
+          backgroundColor: 'rgba(24, 144, 255, 0.6)',
+          borderColor: '#1890ff',
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        legend: { display: true },
+        title: {
+          display: true,
+          text: ctx.t('Weekly overview'),
+        },
+      },
+    },
+  });
+}
+
+renderChart().catch((error) => {
+  console.error('[RunJS] failed to render chart', error);
+  wrapper.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Chart initialization failed')) + '</div>';
+});
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/echarts-init.snippet.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+import { SnippetModule } from '../../types';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-echarts',
+  label: 'Init ECharts',
+  description: 'Load ECharts and render a simple chart inside the block',
+  locales: {
+    'zh-CN': {
+      label: '初始化 ECharts',
+      description: '加载 ECharts 并在区块内渲染示例图表',
+    },
+  },
+  content: `
+const container = document.createElement('div');
+container.style.height = '400px';
+container.style.width = '100%';
+ctx.element.replaceChildren(container);
+const echarts = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js');
+if (!echarts) {
+  throw new Error('ECharts library not loaded');
+}
+
+const chart = echarts.init(container);
+chart.setOption({
+  title: { text: ctx.t('ECharts') },
+  series: [{ type: 'pie', data: [{ value: 1, name: ctx.t('A') }] }],
+});
+
+chart.resize();
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/{jsblock → block}/render-button-handler.snippet.ts

@@ -7,18 +7,27 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export default {
-  contexts: ['JSBlockRunJSContext'],
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
   prefix: 'sn-jsb-button',
   label: 'Render button handler',
+  description: 'Render a button and handle click events inside the block',
+  locales: {
+    'zh-CN': {
+      label: '按钮事件处理',
+      description: '在区块中渲染按钮并绑定点击处理逻辑',
+    },
+  },
   content: `
 const { React, ReactDOM, antd } = ctx;
 const { Button } = antd;
 
-if (ctx.__reactRoot?.unmount) { try { ctx.__reactRoot.unmount(); } catch(_) {} ctx.__reactRoot = undefined; }
 const node = React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Button'));
-const root = ReactDOM.createRoot(ctx.element);
-root.render(node);
-ctx.__reactRoot = root;
+ReactDOM.createRoot(ctx.element).render(node);
 `,
 };
+
+export default snippet;

package/src/runjs-context/snippets/scene/block/render-iframe.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';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
+  prefix: 'sn-jsb-iframe',
+  label: 'Render iframe',
+  description: 'Embed example.com as a sandboxed iframe inside the block element',
+  locales: {
+    'zh-CN': {
+      label: '渲染 iframe',
+      description: '在区块中以 sandbox 限制嵌入 example.com 页面',
+    },
+  },
+  content: `
+// Create an iframe that fills the current block container
+const iframe = document.createElement('iframe');
+iframe.src = 'https://example.com';
+iframe.setAttribute('sandbox', 'allow-scripts');
+iframe.style.width = '100%';
+iframe.style.height = '100%';
+iframe.style.border = 'none';
+
+// Replace existing children so the iframe is the only content
+ctx.element.replaceChildren(iframe);
+`,
+};
+
+export default snippet;

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

@@ -0,0 +1,53 @@
+/**
+ * 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-jsb-info-card',
+  label: 'Render record info card',
+  description: 'Display current record information in an Ant Design card',
+  locales: {
+    'zh-CN': {
+      label: '渲染记录信息卡片',
+      description: '使用 Ant Design 卡片显示当前记录的关键信息',
+    },
+  },
+  content: `
+const { Card, Descriptions, Tag, Typography } = ctx.antd;
+const { createElement: h } = ctx.React;
+
+if (!ctx.record) {
+  ctx.element.innerHTML = '<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() : '-'
+      )
+    )
+  )
+);
+
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/{jsblock → block}/render-react.snippet.ts

@@ -7,28 +7,32 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export default {
-  contexts: ['JSBlockRunJSContext'],
+import type { SnippetModule } from '../../types';
+import { JSBlockRunJSContext } from '../../../contexts/JSBlockRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSBlockRunJSContext],
   prefix: 'sn-jsb-react',
   label: 'Render React',
+  description: 'Render a React element inside the block container',
+  locales: {
+    'zh-CN': {
+      label: '渲染 React',
+      description: '在区块容器中渲染 React 组件',
+    },
+  },
   content: `
 // Render a React element into ctx.element via ReactDOM
 const { React, ReactDOM, antd } = ctx;
 const { Button } = antd;
 
-// Unmount previous render to allow repeated runs
-if (ctx.__reactRoot?.unmount) {
-  try { ctx.__reactRoot.unmount(); } catch(_) {}
-  ctx.__reactRoot = undefined;
-}
-
 const node = React.createElement(
   'div',
   { style: { padding: 12 } },
   React.createElement(Button, { type: 'primary', onClick: () => ctx.message.success(ctx.t('Clicked!')) }, ctx.t('Click')),
 );
-const root = ReactDOM.createRoot(ctx.element);
-root.render(node);
-ctx.__reactRoot = root;
+ReactDOM.createRoot(ctx.element).render(node);
 `,
 };
+
+export default snippet;