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

package/src/runjs-context/contributions.ts

@@ -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.
+ */
+
+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>;
+
+const contributions = new Set<RunJSContextContribution>();
+const appliedByVersion = new Map<RunJSVersion, Set<RunJSContextContribution>>();
+const setupDoneVersions = new Set<RunJSVersion>();
+
+async function applyContributionOnce(version: RunJSVersion, contribution: RunJSContextContribution) {
+  const applied = appliedByVersion.get(version) || new Set<RunJSContextContribution>();
+  appliedByVersion.set(version, applied);
+  if (applied.has(contribution)) return;
+
+  // Mark as applied before awaiting to avoid duplicate runs on concurrency.
+  // If it fails, remove the marker so a later setup retry can re-apply.
+  applied.add(contribution);
+  try {
+    await contribution({
+      version,
+      RunJSContextRegistry,
+      FlowRunJSContext,
+    });
+  } catch (error) {
+    applied.delete(contribution);
+    throw error;
+  }
+}
+
+/**
+ * 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 function registerRunJSContextContribution(contribution: RunJSContextContribution) {
+  if (typeof contribution !== 'function') {
+    throw new Error('[flow-engine] registerRunJSContextContribution: contribution must be a function');
+  }
+  if (contributions.has(contribution)) return;
+  contributions.add(contribution);
+
+  // Apply immediately for already-setup versions (late registration).
+  for (const version of setupDoneVersions) {
+    void applyContributionOnce(version, contribution).catch((error) => {
+      // Avoid unhandled rejections in late registrations
+      try {
+        // eslint-disable-next-line no-console
+        console.error('[flow-engine] RunJS context contribution failed:', error);
+      } catch (_) {
+        void 0;
+      }
+    });
+  }
+}
+
+/**
+ * Apply all registered contributions for a given version.
+ * Intended to be called by setupRunJSContexts().
+ */
+export async function applyRunJSContextContributions(version: RunJSVersion) {
+  for (const contribution of contributions) {
+    await applyContributionOnce(version, contribution);
+  }
+}
+
+/**
+ * Mark setupRunJSContexts() as completed for a given version.
+ * Used to support late contributions that should take effect without re-running setup.
+ */
+export function markRunJSContextsSetupDone(version: RunJSVersion) {
+  setupDoneVersions.add(version);
+}

package/src/runjs-context/helpers.ts

@@ -8,6 +8,7 @@
  */
 
 import type { FlowContext } from '../flowContext';
+import { createRunJSDeprecationProxy } from '../flowContext';
 import { JSRunner } from '../JSRunner';
 import type { JSRunnerOptions } from '../JSRunner';
 import { RunJSContextRegistry, getModelClassName, type RunJSVersion } from './registry';
@@ -36,7 +37,16 @@ export function createJSRunnerWithVersion(this: FlowContext, options?: JSRunnerO
     throw new Error('[RunJS] No RunJSContext registered for version/model.');
   }
   const runCtx = new (Ctor as any)(ensureFlowContext(this));
-  const globals: Record<string, any> = { ctx: runCtx, ...(options?.globals || {}) };
+  let doc: any = {};
+  try {
+    const locale = getLocale(this);
+    if ((Ctor as any)?.getDoc?.length) doc = (Ctor as any).getDoc(locale) || {};
+    else doc = (Ctor as any)?.getDoc?.() || {};
+  } catch (_) {
+    doc = {};
+  }
+  const deprecatedCtx = createRunJSDeprecationProxy(runCtx, { doc });
+  const globals: Record<string, any> = { ctx: deprecatedCtx, ...(options?.globals || {}) };
   // 对字段/区块类上下文，默认注入 window/document 以支持在沙箱中访问 DOM API
   if (modelClass === 'JSFieldModel' || modelClass === 'JSBlockModel') {
     if (typeof window !== 'undefined') globals.window = window as any;

package/src/runjs-context/setup.ts

@@ -13,6 +13,7 @@
 import { RunJSContextRegistry } from './registry';
 import { FlowRunJSContext } from '../flowContext';
 import { defineBaseContextMeta } from './contexts/base';
+import { applyRunJSContextContributions, markRunJSContextsSetupDone } from './contributions';
 
 let done = false;
 export async function setupRunJSContexts() {
@@ -23,6 +24,7 @@ export async function setupRunJSContexts() {
   const [
     { JSBlockRunJSContext },
     { JSFieldRunJSContext },
+    { JSEditableFieldRunJSContext },
     { JSItemRunJSContext },
     { JSColumnRunJSContext },
     { FormJSFieldItemRunJSContext },
@@ -31,6 +33,7 @@ export async function setupRunJSContexts() {
   ] = await Promise.all([
     import('./contexts/JSBlockRunJSContext'),
     import('./contexts/JSFieldRunJSContext'),
+    import('./contexts/JSEditableFieldRunJSContext'),
     import('./contexts/JSItemRunJSContext'),
     import('./contexts/JSColumnRunJSContext'),
     import('./contexts/FormJSFieldItemRunJSContext'),
@@ -42,10 +45,13 @@ export async function setupRunJSContexts() {
   RunJSContextRegistry.register(v1, '*', FlowRunJSContext);
   RunJSContextRegistry.register(v1, 'JSBlockModel', JSBlockRunJSContext, { scenes: ['block'] });
   RunJSContextRegistry.register(v1, 'JSFieldModel', JSFieldRunJSContext, { scenes: ['detail'] });
+  RunJSContextRegistry.register(v1, 'JSEditableFieldModel', JSEditableFieldRunJSContext, { scenes: ['form'] });
   RunJSContextRegistry.register(v1, 'JSItemModel', JSItemRunJSContext, { scenes: ['form'] });
   RunJSContextRegistry.register(v1, 'JSColumnModel', JSColumnRunJSContext, { scenes: ['table'] });
   RunJSContextRegistry.register(v1, 'FormJSFieldItemModel', FormJSFieldItemRunJSContext, { scenes: ['form'] });
   RunJSContextRegistry.register(v1, 'JSRecordActionModel', JSRecordActionRunJSContext, { scenes: ['table'] });
   RunJSContextRegistry.register(v1, 'JSCollectionActionModel', JSCollectionActionRunJSContext, { scenes: ['table'] });
+  await applyRunJSContextContributions(v1);
   done = true;
+  markRunJSContextsSetupDone(v1);
 }

package/src/runjs-context/snippets/global/api-request.snippet.ts

@@ -13,16 +13,16 @@ const snippet: SnippetModule = {
   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 请求模板',
-      description: '使用 ctx.api.request 发送 HTTP 请求的基础模板',
+      description: '使用 ctx.request 发送 HTTP 请求的基础模板',
     },
   },
   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/src/runjs-context/snippets/global/import-esm.snippet.ts

@@ -23,14 +23,13 @@ const snippet: SnippetModule = {
   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/src/runjs-context/snippets/global/query-selector.snippet.ts

@@ -16,15 +16,20 @@ const snippet: SnippetModule = {
   contexts: [JSBlockRunJSContext, JSFieldRunJSContext, 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: '查询子元素',
-      description: '使用 querySelector 在 ctx.element 内查找子元素',
+      description: '使用 querySelector 在渲染的 DOM 内查找子元素',
     },
   },
   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/src/runjs-context/snippets/global/require-amd.snippet.ts

@@ -22,7 +22,7 @@ const snippet: SnippetModule = {
   },
   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/src/runjs-context/snippets/index.ts

@@ -9,8 +9,10 @@
 
 import { RunJSContextRegistry } from '../registry';
 
+export type RunJSSnippetLoader = () => Promise<any>;
+
 // Simple manual exports - no build-time magic needed
-const snippets: Record<string, () => Promise<any>> = {
+const snippets: Record<string, RunJSSnippetLoader | undefined> = {
   // global
   'global/message-success': () => import('./global/message-success.snippet'),
   'global/message-error': () => import('./global/message-error.snippet'),
@@ -69,6 +71,32 @@ const snippets: Record<string, () => Promise<any>> = {
 
 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 function registerRunJSSnippet(
+  ref: string,
+  loader: RunJSSnippetLoader,
+  options?: {
+    override?: boolean;
+  },
+): boolean {
+  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?.override) return false;
+  snippets[key] = loader;
+  return true;
+}
+
 // Cohesive snippet helpers for clients (editor, etc.)
 type EngineSnippetEntry = {
   name: string;
@@ -127,8 +155,8 @@ function resolveLocaleMeta(def: any, locale?: string) {
 }
 
 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 loader = snippets[ref];
+  if (typeof loader !== 'function') 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
@@ -152,46 +180,52 @@ export async function listSnippetsForContext(
   }
   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 (typeof loader !== 'function') return;
+      try {
+        const mod = await loader();
+        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,
+        });
+      } catch (_) {
+        // fail-open: ignore broken snippet loader
+        return;
       }
-      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/block/add-event-listener.snippet.ts

@@ -21,20 +21,18 @@ const snippet: SnippetModule = {
       description: '渲染按钮并绑定点击事件处理',
     },
   },
-  content:
-    `
+  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);
 `,
 };
 

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

@@ -23,7 +23,7 @@ const snippet: SnippetModule = {
   },
   content: `
 // Fetch users
-const { data } = await ctx.api.request({
+const { data } = await ctx.request({
   url: 'users:list',
   method: 'get',
   params: { pageSize: 5 },
@@ -31,14 +31,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(''));
 `,
 };
 

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

@@ -32,10 +32,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/src/runjs-context/snippets/scene/block/echarts-init.snippet.ts

@@ -25,8 +25,8 @@ const snippet: SnippetModule = {
 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/src/runjs-context/snippets/scene/block/render-iframe.snippet.ts

@@ -30,8 +30,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);
 `,
 };
 

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

@@ -22,7 +22,7 @@ const snippet: SnippetModule = {
     },
   },
   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/src/runjs-context/snippets/scene/block/render-statistics.snippet.ts

@@ -24,7 +24,7 @@ const snippet: SnippetModule = {
   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/src/runjs-context/snippets/scene/block/render-timeline.snippet.ts

@@ -24,7 +24,7 @@ const snippet: SnippetModule = {
   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/src/runjs-context/snippets/scene/block/resource-example.snippet.ts

@@ -14,32 +14,27 @@ const snippet: SnippetModule = {
   contexts: [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: '资源示例',
-      description: '使用 ctx.useResource 加载数据并渲染 JSON 输出',
+      description: '使用 ctx.initResource 加载数据并渲染 JSON 输出',
     },
   },
-  content:
-    `
+  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>
-` +
-    '`' +
-    `;
+\`);
 `,
 };
 

package/src/runjs-context/snippets/scene/block/three-users-orbit.snippet.ts

@@ -30,12 +30,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);
 
 // 不做显式清理逻辑；如需存储信息，统一挂在 ctx.model 上
 
-// 使用 ctx.useResource 加载 users:list（真实数据）
-ctx.useResource('MultiRecordResource');
+// 使用 ctx.initResource 加载 users:list（真实数据）
+ctx.initResource('MultiRecordResource');
 const resource = ctx.resource;
 resource.setDataSourceKey && resource.setDataSourceKey('main');
 resource.setResourceName && resource.setResourceName('users');
@@ -44,7 +44,7 @@ try {
   await resource.refresh();
 } catch (err) {
   var msg = (err && err.message) ? err.message : 'users:list 请求失败';
-  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;
 }
 
@@ -80,7 +80,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();
@@ -186,7 +186,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/src/runjs-context/snippets/scene/block/vue-component.snippet.ts

@@ -29,10 +29,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;
@@ -91,8 +91,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/src/runjs-context/snippets/scene/detail/color-by-value.snippet.ts

@@ -26,7 +26,7 @@ const snippet: SnippetModule = {
 // 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>');
 `,
 };
 

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

@@ -23,10 +23,22 @@ const snippet: SnippetModule = {
   },
   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 {
@@ -39,6 +51,11 @@ ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
   }
   ctx.message.success(ctx.t('Copied'));
 });
+
+wrapper.appendChild(valueEl);
+wrapper.appendChild(copyEl);
+
+ctx.render(wrapper);
 `,
 };