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

package/lib/runjs-context/contributions.d.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';
+import { RunJSContextRegistry, type RunJSVersion } from './registry';
+export type RunJSContextContributionApi = {
+    version: RunJSVersion;
+    RunJSContextRegistry: typeof RunJSContextRegistry;
+    FlowRunJSContext: typeof FlowRunJSContext;
+};
+export type RunJSContextContribution = (api: RunJSContextContributionApi) => void | Promise<void>;
+/**
+ * Register a RunJS context/doc contribution.
+ *
+ * - If RunJS contexts have already been set up for a version, the contribution is applied immediately once.
+ * - Each contribution is executed at most once per version.
+ */
+export declare function registerRunJSContextContribution(contribution: RunJSContextContribution): void;
+/**
+ * Apply all registered contributions for a given version.
+ * Intended to be called by setupRunJSContexts().
+ */
+export declare function applyRunJSContextContributions(version: RunJSVersion): Promise<void>;
+/**
+ * Mark setupRunJSContexts() as completed for a given version.
+ * Used to support late contributions that should take effect without re-running setup.
+ */
+export declare function markRunJSContextsSetupDone(version: RunJSVersion): void;

package/lib/runjs-context/contributions.js

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var contributions_exports = {};
+__export(contributions_exports, {
+  applyRunJSContextContributions: () => applyRunJSContextContributions,
+  markRunJSContextsSetupDone: () => markRunJSContextsSetupDone,
+  registerRunJSContextContribution: () => registerRunJSContextContribution
+});
+module.exports = __toCommonJS(contributions_exports);
+var import_flowContext = require("../flowContext");
+var import_registry = require("./registry");
+const contributions = /* @__PURE__ */ new Set();
+const appliedByVersion = /* @__PURE__ */ new Map();
+const setupDoneVersions = /* @__PURE__ */ new Set();
+async function applyContributionOnce(version, contribution) {
+  const applied = appliedByVersion.get(version) || /* @__PURE__ */ new Set();
+  appliedByVersion.set(version, applied);
+  if (applied.has(contribution)) return;
+  applied.add(contribution);
+  try {
+    await contribution({
+      version,
+      RunJSContextRegistry: import_registry.RunJSContextRegistry,
+      FlowRunJSContext: import_flowContext.FlowRunJSContext
+    });
+  } catch (error) {
+    applied.delete(contribution);
+    throw error;
+  }
+}
+__name(applyContributionOnce, "applyContributionOnce");
+function registerRunJSContextContribution(contribution) {
+  if (typeof contribution !== "function") {
+    throw new Error("[flow-engine] registerRunJSContextContribution: contribution must be a function");
+  }
+  if (contributions.has(contribution)) return;
+  contributions.add(contribution);
+  for (const version of setupDoneVersions) {
+    void applyContributionOnce(version, contribution).catch((error) => {
+      try {
+        console.error("[flow-engine] RunJS context contribution failed:", error);
+      } catch (_) {
+      }
+    });
+  }
+}
+__name(registerRunJSContextContribution, "registerRunJSContextContribution");
+async function applyRunJSContextContributions(version) {
+  for (const contribution of contributions) {
+    await applyContributionOnce(version, contribution);
+  }
+}
+__name(applyRunJSContextContributions, "applyRunJSContextContributions");
+function markRunJSContextsSetupDone(version) {
+  setupDoneVersions.add(version);
+}
+__name(markRunJSContextsSetupDone, "markRunJSContextsSetupDone");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  applyRunJSContextContributions,
+  markRunJSContextsSetupDone,
+  registerRunJSContextContribution
+});

package/lib/runjs-context/helpers.js

@@ -33,6 +33,7 @@ __export(helpers_exports, {
   getRunJSScenesForModel: () => getRunJSScenesForModel
 });
 module.exports = __toCommonJS(helpers_exports);
+var import_flowContext = require("../flowContext");
 var import_JSRunner = require("../JSRunner");
 var import_registry = require("./registry");
 function getLocale(ctx) {
@@ -52,6 +53,7 @@ function getRunJSDocFor(ctx, { version = "v1" } = {}) {
 }
 __name(getRunJSDocFor, "getRunJSDocFor");
 function createJSRunnerWithVersion(options) {
+  var _a, _b;
   const version = (options == null ? void 0 : options.version) || "v1";
   const modelClass = (0, import_registry.getModelClassName)(this);
   const ensureFlowContext = /* @__PURE__ */ __name((obj) => obj, "ensureFlowContext");
@@ -60,7 +62,16 @@ function createJSRunnerWithVersion(options) {
     throw new Error("[RunJS] No RunJSContext registered for version/model.");
   }
   const runCtx = new Ctor(ensureFlowContext(this));
-  const globals = { ctx: runCtx, ...(options == null ? void 0 : options.globals) || {} };
+  let doc = {};
+  try {
+    const locale = getLocale(this);
+    if ((_a = Ctor == null ? void 0 : Ctor.getDoc) == null ? void 0 : _a.length) doc = Ctor.getDoc(locale) || {};
+    else doc = ((_b = Ctor == null ? void 0 : Ctor.getDoc) == null ? void 0 : _b.call(Ctor)) || {};
+  } catch (_) {
+    doc = {};
+  }
+  const deprecatedCtx = (0, import_flowContext.createRunJSDeprecationProxy)(runCtx, { doc });
+  const globals = { ctx: deprecatedCtx, ...(options == null ? void 0 : options.globals) || {} };
   if (modelClass === "JSFieldModel" || modelClass === "JSBlockModel") {
     if (typeof window !== "undefined") globals.window = window;
     if (typeof document !== "undefined") globals.document = document;

package/lib/runjs-context/setup.js

@@ -43,6 +43,7 @@ module.exports = __toCommonJS(setup_exports);
 var import_registry = require("./registry");
 var import_flowContext = require("../flowContext");
 var import_base = require("./contexts/base");
+var import_contributions = require("./contributions");
 let done = false;
 async function setupRunJSContexts() {
   if (done) return;
@@ -50,6 +51,7 @@ async function setupRunJSContexts() {
   const [
     { JSBlockRunJSContext },
     { JSFieldRunJSContext },
+    { JSEditableFieldRunJSContext },
     { JSItemRunJSContext },
     { JSColumnRunJSContext },
     { FormJSFieldItemRunJSContext },
@@ -58,6 +60,7 @@ async function setupRunJSContexts() {
   ] = await Promise.all([
     import("./contexts/JSBlockRunJSContext"),
     import("./contexts/JSFieldRunJSContext"),
+    import("./contexts/JSEditableFieldRunJSContext"),
     import("./contexts/JSItemRunJSContext"),
     import("./contexts/JSColumnRunJSContext"),
     import("./contexts/FormJSFieldItemRunJSContext"),
@@ -68,12 +71,15 @@ async function setupRunJSContexts() {
   import_registry.RunJSContextRegistry.register(v1, "*", import_flowContext.FlowRunJSContext);
   import_registry.RunJSContextRegistry.register(v1, "JSBlockModel", JSBlockRunJSContext, { scenes: ["block"] });
   import_registry.RunJSContextRegistry.register(v1, "JSFieldModel", JSFieldRunJSContext, { scenes: ["detail"] });
+  import_registry.RunJSContextRegistry.register(v1, "JSEditableFieldModel", JSEditableFieldRunJSContext, { scenes: ["form"] });
   import_registry.RunJSContextRegistry.register(v1, "JSItemModel", JSItemRunJSContext, { scenes: ["form"] });
   import_registry.RunJSContextRegistry.register(v1, "JSColumnModel", JSColumnRunJSContext, { scenes: ["table"] });
   import_registry.RunJSContextRegistry.register(v1, "FormJSFieldItemModel", FormJSFieldItemRunJSContext, { scenes: ["form"] });
   import_registry.RunJSContextRegistry.register(v1, "JSRecordActionModel", JSRecordActionRunJSContext, { scenes: ["table"] });
   import_registry.RunJSContextRegistry.register(v1, "JSCollectionActionModel", JSCollectionActionRunJSContext, { scenes: ["table"] });
+  await (0, import_contributions.applyRunJSContextContributions)(v1);
   done = true;
+  (0, import_contributions.markRunJSContextsSetupDone)(v1);
 }
 __name(setupRunJSContexts, "setupRunJSContexts");
 // Annotate the CommonJS export names for ESM import in node:

package/lib/runjs-context/snippets/global/api-request.snippet.js

@@ -33,16 +33,16 @@ const snippet = {
   contexts: ["*"],
   prefix: "sn-api-request",
   label: "API request template",
-  description: "Basic template to send HTTP requests via ctx.api.request",
+  description: "Basic template to send HTTP requests via ctx.request",
   locales: {
     "zh-CN": {
       label: "API \u8BF7\u6C42\u6A21\u677F",
-      description: "\u4F7F\u7528 ctx.api.request \u53D1\u9001 HTTP \u8BF7\u6C42\u7684\u57FA\u7840\u6A21\u677F"
+      description: "\u4F7F\u7528 ctx.request \u53D1\u9001 HTTP \u8BF7\u6C42\u7684\u57FA\u7840\u6A21\u677F"
     }
   },
   content: `
 // Replace url/method/params/data as needed
-const response = await ctx.api.request({
+const response = await ctx.request({
   url: 'users:list',
   method: 'get',
   params: {

package/lib/runjs-context/snippets/global/import-esm.snippet.js

@@ -43,14 +43,13 @@ const snippet = {
   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 mod = await ctx.importAsync('lit-html@2');
 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);
+ctx.render(container);
 
 render(html\`<span style="color:#52c41a;">lit-html loaded and rendered</span>\`, container);
 `

package/lib/runjs-context/snippets/global/query-selector.snippet.js

@@ -36,15 +36,20 @@ const snippet = {
   contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext, import_JSFieldRunJSContext.JSFieldRunJSContext, import_FormJSFieldItemRunJSContext.FormJSFieldItemRunJSContext],
   prefix: "sn-query-selector",
   label: "Query selector",
-  description: "Find a child element inside ctx.element using querySelector",
+  description: "Find a child element inside rendered DOM using querySelector",
   locales: {
     "zh-CN": {
       label: "\u67E5\u8BE2\u5B50\u5143\u7D20",
-      description: "\u4F7F\u7528 querySelector \u5728 ctx.element \u5185\u67E5\u627E\u5B50\u5143\u7D20"
+      description: "\u4F7F\u7528 querySelector \u5728\u6E32\u67D3\u7684 DOM \u5185\u67E5\u627E\u5B50\u5143\u7D20"
     }
   },
   content: `
-const child = ctx.element.querySelector('.child-class');
+const wrapper = document.createElement('div');
+wrapper.innerHTML = '<div class="child-class"></div>';
+
+ctx.render(wrapper);
+
+const child = wrapper.querySelector('.child-class');
 if (child) {
   child.textContent = ctx.t('Hello from querySelector');
 }

package/lib/runjs-context/snippets/global/require-amd.snippet.js

@@ -42,7 +42,7 @@ const snippet = {
   },
   content: `
 // Load an external library (AMD/RequireJS)
-const dayjs = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js');
+const dayjs = await ctx.requireAsync('dayjs@1/dayjs.min.js');
 console.log('dayjs loaded:', dayjs?.default || dayjs);
 `
 };

package/lib/runjs-context/snippets/index.d.ts

@@ -6,8 +6,18 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
-declare const snippets: Record<string, () => Promise<any>>;
+export type RunJSSnippetLoader = () => Promise<any>;
+declare const snippets: Record<string, RunJSSnippetLoader | undefined>;
 export default snippets;
+/**
+ * Register a RunJS snippet loader for editors/AI coding.
+ *
+ * - By default, an existing ref will NOT be overwritten (returns false).
+ * - Use { override: true } to overwrite an existing ref (returns true).
+ */
+export declare function registerRunJSSnippet(ref: string, loader: RunJSSnippetLoader, options?: {
+    override?: boolean;
+}): boolean;
 type EngineSnippetEntry = {
     name: string;
     prefix?: string;

package/lib/runjs-context/snippets/index.js

@@ -39,7 +39,8 @@ var snippets_exports = {};
 __export(snippets_exports, {
   default: () => snippets_default,
   getSnippetBody: () => getSnippetBody,
-  listSnippetsForContext: () => listSnippetsForContext
+  listSnippetsForContext: () => listSnippetsForContext,
+  registerRunJSSnippet: () => registerRunJSSnippet
 });
 module.exports = __toCommonJS(snippets_exports);
 var import_registry = require("../registry");
@@ -100,6 +101,20 @@ const snippets = {
   "scene/table/export-selected-json": /* @__PURE__ */ __name(() => import("./scene/table/export-selected-json.snippet"), "scene/table/export-selected-json")
 };
 var snippets_default = snippets;
+function registerRunJSSnippet(ref, loader, options) {
+  if (typeof ref !== "string" || !ref.trim()) {
+    throw new Error("[flow-engine] registerRunJSSnippet: ref must be a non-empty string");
+  }
+  if (typeof loader !== "function") {
+    throw new Error("[flow-engine] registerRunJSSnippet: loader must be a function returning a Promise");
+  }
+  const key = ref.trim();
+  const existed = typeof snippets[key] === "function";
+  if (existed && !(options == null ? void 0 : options.override)) return false;
+  snippets[key] = loader;
+  return true;
+}
+__name(registerRunJSSnippet, "registerRunJSSnippet");
 function deriveNameFromKey(key) {
   const parts = key.split("/");
   return parts[parts.length - 1] || key;
@@ -147,7 +162,7 @@ function resolveLocaleMeta(def, locale) {
 __name(resolveLocaleMeta, "resolveLocaleMeta");
 async function getSnippetBody(ref) {
   const loader = snippets[ref];
-  if (!loader) throw new Error(`[flow-engine] snippet not found: ${ref}`);
+  if (typeof loader !== "function") throw new Error(`[flow-engine] snippet not found: ${ref}`);
   const mod = await loader();
   const def = mod == null ? void 0 : mod.default;
   const content = (def == null ? void 0 : def.content) ?? (mod == null ? void 0 : mod.content) ?? (mod == null ? void 0 : mod.body) ?? "";
@@ -165,45 +180,50 @@ async function listSnippetsForContext(ctxClassName, version = "v1", locale) {
   }
   await Promise.all(
     Object.entries(snippets).map(async ([key, loader]) => {
-      const mod = await loader();
-      const def = (mod == null ? void 0 : mod.default) || {};
-      const body = (def == null ? void 0 : def.content) ?? (mod == null ? void 0 : mod.content);
-      if (typeof body !== "string") return;
-      let ok = true;
-      if (Array.isArray(def == null ? void 0 : def.contexts) && def.contexts.length) {
-        const ctxNames = def.contexts.map((item) => {
-          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 === "*") {
-          ok = true;
-        } else {
-          ok = ctxNames.includes("*") || ctxNames.some((name2) => allowedContextNames.has(name2));
+      if (typeof loader !== "function") return;
+      try {
+        const mod = await loader();
+        const def = (mod == null ? void 0 : mod.default) || {};
+        const body = (def == null ? void 0 : def.content) ?? (mod == null ? void 0 : mod.content);
+        if (typeof body !== "string") return;
+        let ok = true;
+        if (Array.isArray(def == null ? void 0 : def.contexts) && def.contexts.length) {
+          const ctxNames = def.contexts.map((item) => {
+            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 === "*") {
+            ok = true;
+          } else {
+            ok = ctxNames.includes("*") || ctxNames.some((name2) => allowedContextNames.has(name2));
+          }
         }
+        if (ok && Array.isArray(def == null ? void 0 : 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 == null ? void 0 : def.label) || deriveNameFromKey(key);
+        const description = localeMeta.description ?? (def == null ? void 0 : def.description);
+        const prefix = (def == null ? void 0 : 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
+        });
+      } catch (_) {
+        return;
       }
-      if (ok && Array.isArray(def == null ? void 0 : 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 == null ? void 0 : def.label) || deriveNameFromKey(key);
-      const description = localeMeta.description ?? (def == null ? void 0 : def.description);
-      const prefix = (def == null ? void 0 : 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;
@@ -212,5 +232,6 @@ __name(listSnippetsForContext, "listSnippetsForContext");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getSnippetBody,
-  listSnippetsForContext
+  listSnippetsForContext,
+  registerRunJSSnippet
 });

package/lib/runjs-context/snippets/scene/block/add-event-listener.snippet.js

@@ -43,13 +43,16 @@ const snippet = {
   },
   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!')));
-}
+const button = document.createElement('button');
+button.textContent = ctx.t('Click me');
+button.style.padding = '6px 12px';
+button.addEventListener('click', () => ctx.message.success(ctx.t('Clicked!')));
+
+const wrapper = document.createElement('div');
+wrapper.style.padding = '12px';
+wrapper.appendChild(button);
+
+ctx.render(wrapper);
 `
 };
 var add_event_listener_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/api-fetch-render-list.snippet.js

@@ -43,7 +43,7 @@ const snippet = {
   },
   content: `
 // Fetch users
-const { data } = await ctx.api.request({
+const { data } = await ctx.request({
   url: 'users:list',
   method: 'get',
   params: { pageSize: 5 },
@@ -51,14 +51,14 @@ const { data } = await ctx.api.request({
 const rows = Array.isArray(data?.data) ? data.data : (Array.isArray(data) ? data : []);
 
 // Render as a simple HTML list
-ctx.element.innerHTML = [
+ctx.render([
   '<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('');
+].join(''));
 `
 };
 var api_fetch_render_list_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/chartjs-bar.snippet.js

@@ -52,10 +52,10 @@ const canvas = document.createElement('canvas');
 canvas.width = 480;
 canvas.height = 320;
 wrapper.appendChild(canvas);
-ctx.element.replaceChildren(wrapper);
+ctx.render(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 loaded = await ctx.requireAsync('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');

package/lib/runjs-context/snippets/scene/block/echarts-init.snippet.js

@@ -45,8 +45,8 @@ const snippet = {
 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');
+ctx.render(container);
+const echarts = await ctx.requireAsync('echarts@5/dist/echarts.min.js');
 if (!echarts) {
   throw new Error('ECharts library not loaded');
 }

package/lib/runjs-context/snippets/scene/block/render-iframe.snippet.js

@@ -50,8 +50,8 @@ 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);
+// Render the iframe as the only content
+ctx.render(iframe);
 `
 };
 var render_iframe_snippet_default = snippet;

package/lib/runjs-context/snippets/scene/block/render-react.snippet.js

@@ -42,7 +42,7 @@ const snippet = {
     }
   },
   content: `
-// Render a React element into ctx.element via ReactDOM
+// Render a React element into the current container
 const { Button } = ctx.libs.antd;
 
 ctx.render(

package/lib/runjs-context/snippets/scene/block/render-statistics.snippet.js

@@ -44,7 +44,7 @@ const snippet = {
   content: `
 const { Card, Statistic, Row, Col } = ctx.libs.antd;
 
-const res = await ctx.api.request({
+const res = await ctx.request({
   url: 'users:list',
   method: 'get',
   params: {

package/lib/runjs-context/snippets/scene/block/render-timeline.snippet.js

@@ -44,7 +44,7 @@ const snippet = {
   content: `
 const { Timeline, Card } = ctx.libs.antd;
 
-const res = await ctx.api.request({
+const res = await ctx.request({
   url: 'users:list',
   method: 'get',
   params: {

package/lib/runjs-context/snippets/scene/block/resource-example.snippet.js

@@ -34,27 +34,27 @@ const snippet = {
   contexts: [import_JSBlockRunJSContext.JSBlockRunJSContext],
   prefix: "sn-resource-example",
   label: "Resource example",
-  description: "Create a resource via ctx.createResource and render JSON output",
+  description: "Create a resource via ctx.makeResource and render JSON output",
   locales: {
     "zh-CN": {
       label: "\u8D44\u6E90\u793A\u4F8B",
-      description: "\u4F7F\u7528 ctx.useResource \u52A0\u8F7D\u6570\u636E\u5E76\u6E32\u67D3 JSON \u8F93\u51FA"
+      description: "\u4F7F\u7528 ctx.initResource \u52A0\u8F7D\u6570\u636E\u5E76\u6E32\u67D3 JSON \u8F93\u51FA"
     }
   },
   content: `
 // Create a resource and load a single record
-const resource = ctx.createResource('SingleRecordResource');
+const resource = ctx.makeResource('SingleRecordResource');
 resource.setDataSourceKey('main');
 resource.setResourceName('users');
 // Optionally set filterByTk to target a specific record:
 // resource.setRequestOptions('params', { filterByTk: 1 });
 await resource.refresh();
 
-ctx.element.innerHTML = \`
+ctx.render(\`
   <pre style="padding: 12px; background: #f5f5f5; border-radius: 6px;">
     \${JSON.stringify(resource.getData(), null, 2)}
   </pre>
-\`;
+\`);
 `
 };
 var resource_example_snippet_default = snippet;

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) => {