@nocobase/flow-engine 2.0.0-alpha.2

package/src/runjs-context/snippets/global/console-log-ctx.snippet.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-log-ctx',
+  label: 'Log ctx',
+  description: 'Log the whole ctx object to console',
+  content: `
+console.log('ctx =>', ctx);
+ctx.message?.success?.(ctx.t('ctx printed'));
+`,
+};

package/src/runjs-context/snippets/global/copy-record-json.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * 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-copy-record',
+  label: 'Copy record JSON',
+  description: 'Copy current ctx.record JSON to clipboard',
+  content: `
+await ctx.copyToClipboard(JSON.stringify(ctx.record ?? {}, null, 2));
+ctx.message.success(ctx.t('Record JSON copied to clipboard'));
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/copy-to-clipboard.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * 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-copy',
+  label: 'Copy to clipboard',
+  description: 'Copy a string to clipboard and show a success message',
+  content: `
+await ctx.copyToClipboard(ctx.t('Text to copy'));
+ctx.message.success(ctx.t('Copied to clipboard'));
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/log-json-record.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * 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-log-record',
+  label: 'Log record JSON',
+  description: 'Log current ctx.record as formatted JSON',
+  content: `
+console.log(ctx.t('Current record JSON:'), JSON.stringify(ctx.record ?? {}, null, 2));
+ctx.message.success(ctx.t('Printed to console'));
+`,
+};
+export default snippet;

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

@@ -0,0 +1,20 @@
+/**
+ * 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',
+  content: `
+ctx.message.error(ctx.t('Operation failed'));
+`,
+};
+export default snippet;

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

@@ -0,0 +1,20 @@
+/**
+ * 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',
+  content: `
+ctx.message.success(ctx.t('Operation succeeded'));
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/notification-open.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-notify',
+  label: 'Open notification',
+  description: 'Open an AntD notification with custom content',
+  content: `
+ctx.notification.open({
+  message: ctx.t('Notification title'),
+  description: ctx.t('This is a notification description'),
+});
+`,
+};

package/src/runjs-context/snippets/global/open-view-dialog.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: ['*'],
+  versions: ['*'],
+  prefix: 'sn-open-dialog',
+  label: 'Open view (dialog)',
+  description: 'Open a view in dialog via ctx.openView',
+  content: `
+const popupUid = 'your-popup-uid';
+await ctx.openView(popupUid, {
+  mode: 'dialog',
+  viewUid: 'detail',
+  inputArgs: { foo: 'bar' },
+});
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/open-view-drawer.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: ['*'],
+  versions: ['*'],
+  prefix: 'sn-open-drawer',
+  label: 'Open view (drawer)',
+  description: 'Open a view in drawer via ctx.openView',
+  content: `
+const popupUid = 'your-popup-uid';
+await ctx.openView(popupUid, {
+  mode: 'drawer',
+  viewUid: 'detail',
+  inputArgs: { foo: 'bar' },
+});
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/requireAsync.snippet.ts

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-require',
+  label: 'Load external library',
+  description: 'Dynamically load an external JS via RequireJS',
+  content: `
+// Load an external library (AMD/RequireJS)
+try {
+  const lib = await ctx.requireAsync('https://cdn.example.com/lib@1.0.0/index.js');
+  console.log('lib loaded:', lib);
+} catch (e) {
+  ctx.message.error(ctx.t('Failed to load external library: {{msg}}', { msg: String(e?.message || e) }));
+}
+`,
+};

package/src/runjs-context/snippets/global/sleep.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-sleep',
+  label: 'Sleep',
+  description: 'Pause execution for a given milliseconds',
+  content: `
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+const ms = 500;
+await sleep(ms);
+ctx.message.success(ctx.t('Waited {{ms}} ms', { ms }));
+`,
+};

package/src/runjs-context/snippets/global/try-catch-async.snippet.ts

@@ -0,0 +1,22 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-try',
+  label: 'Try/catch template',
+  description: 'Async try/catch template with toast message',
+  content: `
+try {
+  // await some async work
+} catch (e) {
+  ctx.message.error(ctx.t('Operation failed: {{msg}}', { msg: String(e?.message || e) }));
+}
+`,
+};

package/src/runjs-context/snippets/global/view-navigation-push.snippet.ts

@@ -0,0 +1,23 @@
+/**
+ * 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: ['*'],
+  versions: ['*'],
+  prefix: 'sn-nav-push',
+  label: 'View navigation: push',
+  description: 'Navigate within current view (if supported)',
+  content: `
+// Push a new sub-view (if navigation is available)
+ctx.view?.navigation?.push({ viewUid: 'detail', filterByTk: 1 });
+// To go back: ctx.view?.navigation?.back();
+`,
+};
+export default snippet;

package/src/runjs-context/snippets/global/window-open.snippet.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['*'],
+  prefix: 'sn-window-open',
+  label: 'Open new window',
+  description: 'Safely open a new browser window/tab',
+  content: `
+// Open a new window/tab
+window.open('https://example.com', '_blank');
+`,
+};

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

@@ -0,0 +1,59 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export type EngineSnippetMap = Record<string, () => Promise<any>>;
+
+export const engineSnippets: EngineSnippetMap = {
+  // 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/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'),
+  // 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'),
+};
+
+export default engineSnippets;

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

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-echarts',
+  label: 'Init ECharts',
+  content: `
+ctx.element.style.height = '400px';
+const echarts = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js');
+if (!echarts) {
+  ctx.message.error(ctx.t('Failed to load ECharts'));
+} else {
+  const chart = echarts.init(ctx.element);
+  chart.setOption({ title: { text: ctx.t('ECharts') }, series: [{ type: 'pie', data: [{ value: 1, name: ctx.t('A') }] }] });
+}
+`,
+};

package/src/runjs-context/snippets/scene/actions/collection-selected-count.snippet.ts

@@ -0,0 +1,22 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSCollectionActionRunJSContext'],
+  prefix: 'sn-act-selected-count',
+  label: 'Selected count',
+  content: `
+const rows = ctx.resource?.getSelectedRows?.() || [];
+if (!rows.length) {
+  ctx.message.warning(ctx.t('Please select data'));
+} else {
+  ctx.message.success(ctx.t('Selected {{count}} rows', { count: rows.length }));
+}
+`,
+};

package/src/runjs-context/snippets/scene/actions/iterate-selected-rows.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSCollectionActionRunJSContext'],
+  prefix: 'sn-act-iterate',
+  label: 'Iterate selected rows',
+  content: `
+const rows = ctx.resource?.getSelectedRows?.() || [];
+for (const row of rows) {
+  console.log(ctx.t('Selected row:'), row);
+}
+ctx.message.success(ctx.t('Processed {{count}} rows', { count: rows.length }));
+`,
+};

package/src/runjs-context/snippets/scene/actions/record-id-message.snippet.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSRecordActionRunJSContext'],
+  prefix: 'sn-act-record-id',
+  label: 'Show record id',
+  content: `
+if (!ctx.record) {
+  ctx.message.error(ctx.t('Record not found'));
+} else {
+  ctx.message.success(ctx.t('Record ID: {{id}}', { id: ctx.filterByTk ?? ctx.record?.id }));
+}
+`,
+};

package/src/runjs-context/snippets/scene/actions/run-action-basic.snippet.ts

@@ -0,0 +1,18 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSRecordActionRunJSContext', 'JSCollectionActionRunJSContext'],
+  prefix: 'sn-act-run',
+  label: 'Run action',
+  content: `
+await ctx.runAction('someAction', { foo: 'bar' });
+ctx.message.success(ctx.t('Action executed'));
+`,
+};

package/src/runjs-context/snippets/scene/jsblock/add-event-listener.snippet.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsb-click',
+  label: 'Add click listener',
+  content:
+    `
+// Render a button and bind a click handler
+ctx.element.innerHTML = ` +
+    '`' +
+    `
+  <button id="nb-jsb-btn" style="padding:6px 12px">\${ctx.t('Click me')}</button>
+` +
+    '`' +
+    `;
+const btn = document.getElementById('nb-jsb-btn');
+if (btn) {
+  btn.addEventListener('click', () => ctx.message.success(ctx.t('Clicked!')));
+}
+`,
+};

package/src/runjs-context/snippets/scene/jsblock/append-style.snippet.ts

@@ -0,0 +1,20 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsb-style',
+  label: 'Append style',
+  content: `
+// Append styles to container
+ctx.element.style.border = '1px dashed #999';
+ctx.element.style.padding = '12px';
+ctx.element.style.borderRadius = '8px';
+`,
+};

package/src/runjs-context/snippets/scene/jsblock/jsx-mount.snippet.ts

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsx-mount',
+  label: 'JSX mount',
+  content: `
+// Render JSX (editor does not auto-transform)
+const { ReactDOM, antd } = ctx;
+const { Button } = antd;
+
+if (ctx.__reactRoot?.unmount) { try { ctx.__reactRoot.unmount(); } catch(_) {} ctx.__reactRoot = undefined; }
+const root = ReactDOM.createRoot(ctx.element);
+root.render(<Button type="primary" onClick={() => ctx.message.success(ctx.t('Clicked!'))}>{ctx.t('Button')}</Button>);
+ctx.__reactRoot = root;
+`,
+};

package/src/runjs-context/snippets/scene/jsblock/jsx-unmount.snippet.ts

@@ -0,0 +1,19 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsx-unmount',
+  label: 'JSX unmount',
+  content: `
+if (ctx.__reactRoot?.unmount) { try { ctx.__reactRoot.unmount(); } catch(_) {} }
+ctx.__reactRoot = undefined;
+ctx.element.innerHTML = '';
+`,
+};

package/src/runjs-context/snippets/scene/jsblock/render-basic.snippet.ts

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsb-html',
+  label: 'Render HTML',
+  content:
+    `
+ctx.element.innerHTML = ` +
+    '`' +
+    `
+  <div style="padding:12px">\${ctx.t('Hello JSBlock')}</div>
+` +
+    '`' +
+    `;
+`,
+};

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

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export default {
+  contexts: ['JSBlockRunJSContext'],
+  prefix: 'sn-jsb-button',
+  label: 'Render button handler',
+  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;
+`,
+};