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

package/lib/runjs-context/snippets/scene/detail/color-by-value.snippet.js

@@ -46,7 +46,7 @@ const snippet = {
 // Colorize based on numeric sign
 const n = Number(ctx.value ?? 0);
 const color = Number.isFinite(n) ? (n > 0 ? 'green' : n < 0 ? 'red' : '#999') : '#555';
-ctx.element.innerHTML = '<span style=' + JSON.stringify('color:' + color) + '>' + String(ctx.value ?? '') + '</span>';
+ctx.render('<span style=' + JSON.stringify('color:' + color) + '>' + String(ctx.value ?? '') + '</span>');
 `
 };
 var color_by_value_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/copy-to-clipboard.snippet.js

@@ -43,10 +43,22 @@ const snippet = {
   },
   content: `
 const text = String(ctx.value ?? '');
-ctx.element.innerHTML = '<a class="nb-copy" style="cursor:pointer;color:#1677ff">' +
-  ctx.t('Copy') + '</a>';
 
-ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
+const wrapper = document.createElement('span');
+wrapper.style.display = 'inline-flex';
+wrapper.style.alignItems = 'center';
+wrapper.style.gap = '8px';
+
+const valueEl = document.createElement('span');
+valueEl.textContent = text;
+valueEl.style.color = '#666';
+
+const copyEl = document.createElement('a');
+copyEl.textContent = ctx.t('Copy');
+copyEl.style.cursor = 'pointer';
+copyEl.style.color = '#1677ff';
+
+copyEl.addEventListener('click', async () => {
   if (navigator?.clipboard?.writeText) {
     await navigator.clipboard.writeText(text);
   } else {
@@ -59,6 +71,11 @@ ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
   }
   ctx.message.success(ctx.t('Copied'));
 });
+
+wrapper.appendChild(valueEl);
+wrapper.appendChild(copyEl);
+
+ctx.render(wrapper);
 `
 };
 var copy_to_clipboard_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/format-number.snippet.js

@@ -45,7 +45,7 @@ const snippet = {
   content: `
 // Format number using locale
 const n = Number(ctx.value ?? 0);
-ctx.element.innerHTML = String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? '');
+ctx.render(String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? ''));
 `
 };
 var format_number_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/innerHTML-value.snippet.js

@@ -44,7 +44,7 @@ const snippet = {
   },
   content: `
 const v = String(ctx.value ?? '');
-ctx.element.innerHTML = \`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`;
+ctx.render(\`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`);
 `
 };
 var innerHTML_value_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/percentage-bar.snippet.js

@@ -46,7 +46,7 @@ const snippet = {
 const value = Number(ctx.value ?? 0);
 
 if (!Number.isFinite(value)) {
-  ctx.element.innerHTML = '-';
+  ctx.render('-');
   return;
 }
 
@@ -62,7 +62,7 @@ const getColor = (val) => {
 
 const color = getColor(percent);
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <div style="display: flex; align-items: center; gap: 8px;">
     <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
       <div style="
@@ -76,7 +76,7 @@ ctx.element.innerHTML = \`
       \${percent.toFixed(1)}%
     </span>
   </div>
-\`;
+\`);
 `
 };
 var percentage_bar_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/relative-time.snippet.js

@@ -63,18 +63,18 @@ const formatRelativeTime = (date) => {
 
 const dateStr = ctx.value;
 if (!dateStr) {
-  ctx.element.innerHTML = '-';
+  ctx.render('-');
   return;
 }
 
 const relativeTime = formatRelativeTime(dateStr);
 const fullDate = new Date(dateStr).toLocaleString();
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <span title="\${fullDate}" style="cursor: help; color: #666;">
     \${relativeTime}
   </span>
-\`;
+\`);
 `
 };
 var relative_time_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/detail/status-tag.snippet.js

@@ -56,7 +56,7 @@ const statusColors = {
 const status = String(ctx.value || 'unknown');
 const color = statusColors[status] || 'default';
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <span style="
     display: inline-block;
     padding: 2px 8px;
@@ -68,7 +68,7 @@ ctx.element.innerHTML = \`
   ">
     \${ctx.t(status)}
   </span>
-\`;
+\`);
 `
 };
 var status_tag_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/form/cascade-select.snippet.js

@@ -49,7 +49,7 @@ if (!parentRoleId) {
   return;
 }
 
-const res = await ctx.api.request({
+const res = await ctx.request({
   url: 'roles:list',
   method: 'get',
   params: {

package/lib/runjs-context/snippets/scene/form/render-basic.snippet.js

@@ -42,12 +42,12 @@ const snippet = {
     }
   },
   content: `
-ctx.element.innerHTML = \`
+ctx.render(\`
   <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6;">
     <h3 style="color: #1890ff; margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">\${ctx.t('JS Item')}</h3>
     <div style="color:#555">\${ctx.t('This area is rendered by your JavaScript code.')}</div>
   </div>
-\`;
+\`);
 `
 };
 var render_basic_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/table/cell-open-dialog.snippet.js

@@ -43,9 +43,10 @@ const snippet = {
   },
   content: `
 // Render a button inside the cell
-ctx.element.innerHTML = '<button class="nb-cell-btn" style="padding:4px 8px">' + ctx.t('View') + '</button>';
-
-const button = ctx.element.querySelector('.nb-cell-btn');
+const button = document.createElement('button');
+button.className = 'nb-cell-btn';
+button.style.padding = '4px 8px';
+button.textContent = ctx.t('View');
 const popupUid = ctx.model.uid + '-1'; // popupUid should be stable and better bound to ctx.model.uid
 const primaryKey = ctx.collection?.primaryKey || 'id';
 
@@ -59,6 +60,8 @@ button?.addEventListener('click', async () => {
     },
   });
 });
+
+ctx.render(button);
 `
 };
 var cell_open_dialog_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/table/concat-fields.snippet.js

@@ -73,7 +73,9 @@ const valueB = normalize(ctx.record?.[fieldB]);
 
 const parts = [valueA, valueB].filter((item) => item.length > 0);
 
-ctx.element.textContent = parts.length ? parts.join(' / ') : ctx.t('N/A');
+const result = document.createElement('span');
+result.textContent = parts.length ? parts.join(' / ') : ctx.t('N/A');
+ctx.render(result);
 `
 };
 var concat_fields_snippet_default = snippet;

package/lib/runjsLibs.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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';
+export type RunJSLibCache = 'global' | 'context';
+export type RunJSLibLoader<T = any> = (ctx: FlowContext) => T | Promise<T>;
+export declare function registerRunJSLib(name: string, loader: RunJSLibLoader, options?: {
+    cache?: RunJSLibCache;
+}): void;
+export declare function setupRunJSLibs(ctx: FlowContext): void;
+export declare function setRunJSLibOverride(ctx: FlowContext, name: string, value: unknown, options?: {
+    topLevelKey?: string | false;
+}): void;
+export declare function externalReactRender(options: {
+    ctx: any;
+    entry: any;
+    vnode: any;
+    containerEl: any;
+    rootMap: WeakMap<any, any>;
+    unmountContainerRoot: () => void;
+    internalReact: any;
+    internalAntd: any;
+}): any;