@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.11

package/lib/runjs-context/snippets/scene/block/three-users-orbit.snippet.js

@@ -50,12 +50,12 @@ container.style.position = 'relative';
 container.style.borderRadius = '10px';
 container.style.overflow = 'hidden';
 container.style.background = 'radial-gradient(700px 300px at 20% 25%, #172036, #0b0f19 60%), radial-gradient(600px 240px at 80% 70%, rgba(56,189,248,0.12), transparent 60%)';
-ctx.element.replaceChildren(container);
+ctx.render(container);
 
 // \u4E0D\u505A\u663E\u5F0F\u6E05\u7406\u903B\u8F91\uFF1B\u5982\u9700\u5B58\u50A8\u4FE1\u606F\uFF0C\u7EDF\u4E00\u6302\u5728 ctx.model \u4E0A
 
-// \u4F7F\u7528 ctx.useResource \u52A0\u8F7D users:list\uFF08\u771F\u5B9E\u6570\u636E\uFF09
-ctx.useResource('MultiRecordResource');
+// \u4F7F\u7528 ctx.initResource \u52A0\u8F7D users:list\uFF08\u771F\u5B9E\u6570\u636E\uFF09
+ctx.initResource('MultiRecordResource');
 const resource = ctx.resource;
 resource.setDataSourceKey && resource.setDataSourceKey('main');
 resource.setResourceName && resource.setResourceName('users');
@@ -64,7 +64,7 @@ try {
   await resource.refresh();
 } catch (err) {
   var msg = (err && err.message) ? err.message : 'users:list \u8BF7\u6C42\u5931\u8D25';
-  ctx.element.innerHTML = '<div style="color:#cbd5e1; padding: 12px; text-align:center;">' + msg + '</div>';
+  container.innerHTML = '<div style="color:#cbd5e1; padding: 12px; text-align:center;">' + msg + '</div>';
   throw err;
 }
 
@@ -100,7 +100,7 @@ function makeAvatarTexture(user, idx) {
   return tex;
 }
 
-const THREE = await ctx.importAsync('https://esm.sh/three@0.160.0');
+const THREE = await ctx.importAsync('three@0.160.0');
 const { Scene, PerspectiveCamera, WebGLRenderer, Color, AmbientLight, DirectionalLight, Group, Mesh, MeshStandardMaterial, SphereGeometry, Raycaster, Vector2 } = THREE;
 
 const scene = new Scene();
@@ -206,7 +206,7 @@ async function getPrimaryKeyField() {
   if (__pkField) return __pkField;
   const name = (resource && resource.getResourceName) ? resource.getResourceName() : 'users';
   try {
-    const meta = await ctx.api.request({ url: 'collections:get', method: 'get', params: { filterByTk: name } });
+    const meta = await ctx.request({ url: 'collections:get', method: 'get', params: { filterByTk: name } });
     const data = (meta && meta.data) ? meta.data : {};
     // prefer filterTargetKey, fallback to fields.primaryKey
     const ft = (data && data.filterTargetKey) ? data.filterTargetKey : (data && data.options && data.options.filterTargetKey);

package/lib/runjs-context/snippets/scene/block/vue-component.snippet.js

@@ -49,10 +49,10 @@ mountNode.style.borderRadius = '8px';
 const target = document.createElement('div');
 target.className = 'nb-vue-counter';
 mountNode.appendChild(target);
-ctx.element.replaceChildren(mountNode);
+ctx.render(mountNode);
 
 async function bootstrap() {
-  const mod = await ctx.importAsync('https://esm.sh/vue@3.4.27/dist/vue.runtime.esm-browser.js');
+  const mod = await ctx.importAsync('vue@3.4.27/dist/vue.runtime.esm-browser.js');
   const createApp = mod?.createApp;
   const ref = mod?.ref;
   const h = mod?.h;
@@ -111,8 +111,7 @@ async function bootstrap() {
   };
 
   const app = createApp(Counter);
-  const mountTarget = ctx.element.querySelector('.nb-vue-counter');
-  app.mount(mountTarget || ctx.element);
+  app.mount(target);
 }
 
 bootstrap().catch((error) => {

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;