@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.31

package/src/flow/components/code-editor/__tests__/javascriptHtmlTemplate.test.ts

@@ -0,0 +1,101 @@
+/**
+ * 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 { syntaxTree } from '@codemirror/language';
+import { CompletionContext } from '@codemirror/autocomplete';
+import { EditorState } from '@codemirror/state';
+import { describe, expect, it, beforeAll } from 'vitest';
+import { setupRunJSContexts } from '@nocobase/flow-engine';
+import { javascriptWithHtmlTemplates } from '../javascriptHtmlTemplate';
+import { createHtmlCompletion } from '../htmlCompletion';
+
+describe('javascriptWithHtmlTemplates', () => {
+  beforeAll(async () => {
+    await setupRunJSContexts();
+  });
+  it('mounts html parser for template literal segments', () => {
+    const support = javascriptWithHtmlTemplates();
+    const state = EditorState.create({
+      doc: 'const template = `<div class="box">${value}</div>`;',
+      extensions: [support],
+    });
+
+    const htmlPos = state.doc.toString().indexOf('div class');
+    const node = syntaxTree(state).resolveInner(htmlPos, 1);
+
+    expect(node.name).toBe('TagName');
+  });
+
+  it('preserves interpolation nodes from javascript parser', () => {
+    const support = javascriptWithHtmlTemplates();
+    const state = EditorState.create({
+      doc: 'const template = `<div>${value}</div>`;',
+      extensions: [support],
+    });
+
+    const variablePos = state.doc.toString().indexOf('value');
+    const node = syntaxTree(state).resolveInner(variablePos, 1);
+
+    expect(node.name).toBe('VariableName');
+  });
+
+  it('defers to html completions inside template literals', async () => {
+    const support = javascriptWithHtmlTemplates();
+    const state = EditorState.create({
+      doc: 'const template = `<`;',
+      extensions: [support],
+    });
+    const doc = state.doc.toString();
+    const pos = doc.indexOf('<') + 1;
+    const context = new CompletionContext(state, pos, true);
+
+    const { createJavascriptCompletion } = await import('../javascriptCompletion');
+    const jsCompletion = createJavascriptCompletion()(context);
+    expect(jsCompletion).toBeNull();
+
+    const htmlResult = await createHtmlCompletion()(context);
+    expect(htmlResult).not.toBeNull();
+    expect(htmlResult?.options?.some((option) => option.label.includes('div'))).toBe(true);
+  });
+
+  it('keeps html completions working after interpolations', async () => {
+    const support = javascriptWithHtmlTemplates();
+    const state = EditorState.create({
+      doc: 'const template = `<div>${value}<<`;',
+      extensions: [support],
+    });
+
+    const doc = state.doc.toString();
+    const pos = doc.lastIndexOf('<');
+    const context = new CompletionContext(state, pos + 1, true);
+
+    const { createJavascriptCompletion } = await import('../javascriptCompletion');
+    const jsCompletion = createJavascriptCompletion()(context);
+    expect(jsCompletion).toBeNull();
+
+    const htmlResult = await createHtmlCompletion()(context);
+    expect(htmlResult).not.toBeNull();
+    expect(htmlResult?.options?.some((option) => option.label.includes('div'))).toBe(true);
+  });
+
+  it('keeps javascript completions available outside template literals', async () => {
+    const state = EditorState.create({
+      doc: 'const value = windo',
+      extensions: [javascriptWithHtmlTemplates()],
+    });
+
+    const pos = state.doc.length;
+    const context = new CompletionContext(state, pos, true);
+
+    const { createJavascriptCompletion } = await import('../javascriptCompletion');
+    const result = createJavascriptCompletion()(context);
+    expect(result).not.toBeNull();
+    expect(result?.options.length ?? 0).toBeGreaterThan(0);
+  });
+});

package/src/flow/components/code-editor/__tests__/linter.test.ts

@@ -0,0 +1,124 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { computeDiagnosticsFromText } from '../linter';
+
+describe('code-editor linter', () => {
+  it('ignores diagnostics on lines containing {{ ctx.* }} (template only line)', () => {
+    const code = `{{ ctx.user.name }}`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.length).toBe(0);
+  });
+
+  it('ignores syntax errors on assignment line with {{ ctx.* }}', () => {
+    const code = `const a = {{ctx.aaa.bb}}`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.length).toBe(0);
+  });
+
+  it('reports normal syntax errors when no template present', () => {
+    const code = `const a = ;`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.length).toBeGreaterThan(0);
+    // 至少应包含一个语法错误
+    expect(diags.some((d) => d.severity === 'error' && /Syntax error:/.test(d.message))).toBe(true);
+  });
+
+  it('reports possible undefined variable warning', () => {
+    const code = `foo + 1;`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('Possible undefined variable: foo'))).toBe(
+      true,
+    );
+  });
+
+  it('does not warn for callback parameters used inside JSX', () => {
+    const code = `
+const columns = [
+  {
+    render: (roles, record) => (
+      <div>
+        {roles.map((role) => <Tag key={role.name}>{record.nickname || role.title}</Tag>)}
+      </div>
+    ),
+  },
+];
+`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: roles'))).toBe(false);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: record'))).toBe(false);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: role'))).toBe(false);
+  });
+
+  it('reports non-callable expression warning', () => {
+    const code = `(1+2)()`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.severity === 'warning' && d.message === 'This expression is not callable.')).toBe(true);
+  });
+
+  it('suppresses warnings on lines with template (non-callable + template)', () => {
+    const code = `{{ ctx.x }}`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.length).toBe(0);
+  });
+
+  it('does not warn for allowed global ctx access', () => {
+    const code = `ctx && ctx.viewer && ctx.view;`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.length).toBe(0);
+  });
+
+  it('warns for suspicious short ctx method call', () => {
+    const code = `ctx.fw();`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('ctx.fw'))).toBe(true);
+  });
+
+  it('warns for unknown ctx method call when known ctx roots are provided', () => {
+    const code = `ctx.foobar();`;
+    const diags = computeDiagnosticsFromText(code, { knownCtxMemberRoots: ['t', 'setValue', 'getValue'] });
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('ctx.foobar'))).toBe(true);
+  });
+
+  it('warns for unknown ctx member access when known ctx roots are provided', () => {
+    const code = `const x = ctx.foobar;`;
+    const diags = computeDiagnosticsFromText(code, { knownCtxMemberRoots: ['t', 'setValue', 'getValue'] });
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('ctx.foobar'))).toBe(true);
+  });
+
+  it('does not warn for known ctx method call when known ctx roots are provided', () => {
+    const code = `ctx.t("x"); ctx.setValue?.("y");`;
+    const diags = computeDiagnosticsFromText(code, { knownCtxMemberRoots: ['t', 'setValue'] });
+    expect(diags.some((d) => d.message.includes('Possible undefined ctx method call'))).toBe(false);
+  });
+
+  it('does not warn for known ctx member access when known ctx roots are provided', () => {
+    const code = `const t = ctx.t; const setValue = ctx.setValue; const logger = ctx.logger;`;
+    const diags = computeDiagnosticsFromText(code, { knownCtxMemberRoots: ['t', 'setValue'] });
+    expect(diags.some((d) => d.message.includes('Possible unknown ctx member access'))).toBe(false);
+  });
+
+  it('still shows unknown ctx warnings even when syntax error exists', () => {
+    const code = `ctx.foobar();\nconst a = ;\n(1+2)();\nconst x = ctx.bar;\n`;
+    const diags = computeDiagnosticsFromText(code, { knownCtxMemberRoots: ['t', 'setValue'] });
+    expect(diags.some((d) => d.severity === 'error' && /Syntax error:/.test(d.message))).toBe(true);
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('ctx.foobar'))).toBe(true);
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('ctx.bar'))).toBe(true);
+    expect(diags.some((d) => d.severity === 'warning' && d.message === 'This expression is not callable.')).toBe(true);
+  });
+
+  it('does not warn for allowed global Blob', () => {
+    const code = `const b = new Blob(['x']);\nb.size;`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.severity === 'warning' && d.message.includes('Possible undefined variable: Blob'))).toBe(
+      false,
+    );
+  });
+});

package/src/flow/components/code-editor/__tests__/resolveScenes.test.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { inferRunJSScenesFromContext, mergeRunJSScenes } from '../resolveScenes';
+
+describe('mergeRunJSScenes', () => {
+  it('merges explicit event flow scene with auto detail/table scenes', () => {
+    expect(mergeRunJSScenes('eventFlow', ['detailFieldEvent'])).toEqual(['eventFlow', 'detailFieldEvent']);
+    expect(mergeRunJSScenes('eventFlow', ['tableFieldEvent'])).toEqual(['eventFlow', 'tableFieldEvent']);
+  });
+
+  it('deduplicates and keeps order stable', () => {
+    expect(mergeRunJSScenes(['eventFlow', 'detail'], ['detail', 'form'])).toEqual(['eventFlow', 'detail', 'form']);
+  });
+
+  it('returns undefined when both inputs are empty', () => {
+    expect(mergeRunJSScenes(undefined, undefined)).toBeUndefined();
+  });
+
+  it('infers scenes for normal field models used in event flow settings', () => {
+    expect(inferRunJSScenesFromContext({ model: { constructor: { name: 'DetailsItemModel' } } }, 'eventFlow')).toEqual([
+      'detailFieldEvent',
+    ]);
+    expect(inferRunJSScenesFromContext({ model: { constructor: { name: 'TableColumnModel' } } }, 'eventFlow')).toEqual([
+      'tableFieldEvent',
+    ]);
+    expect(inferRunJSScenesFromContext({ model: { constructor: { name: 'FormItemModel' } } }, 'eventFlow')).toEqual([
+      'formFieldEvent',
+    ]);
+  });
+
+  it('does not infer field event scenes outside event flow editors', () => {
+    expect(
+      inferRunJSScenesFromContext({ model: { constructor: { name: 'DetailsItemModel' } } }, 'detail'),
+    ).toBeUndefined();
+  });
+});

package/src/flow/components/code-editor/__tests__/runjsCompletionSource.test.ts

@@ -0,0 +1,251 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+
+// Avoid pulling in heavy HTML/JSX completion behaviors; we only test our ctx meta merging logic here.
+vi.mock('../htmlCompletion', () => ({ isHtmlTemplateContext: () => false }));
+vi.mock('../jsxCompletion', () => ({ createJsxCompletion: () => () => false }));
+
+import { createRunJSCompletionSource } from '../runjsCompletionSource';
+
+function makeDoc(text: string) {
+  return {
+    sliceString(from: number, to: number) {
+      return text.slice(from, to);
+    },
+  };
+}
+
+describe('createRunJSCompletionSource', () => {
+  it('suppresses snapshot property completions under meta root (keeps meta breadcrumb)', async () => {
+    const hostCtx: any = {
+      t: (s: string) => s,
+      getPropertyMetaTree: (value: string) => {
+        if (value === '{{ ctx.record }}') {
+          return [
+            {
+              name: 'roles',
+              title: '角色',
+              type: 'object',
+              paths: ['record', 'roles'],
+              children: [
+                {
+                  name: 'users',
+                  title: 'users',
+                  type: 'object',
+                  paths: ['record', 'roles', 'users'],
+                  parentTitles: ['角色'],
+                },
+              ],
+            },
+          ];
+        }
+        return [];
+      },
+    };
+
+    const staticOptions: any[] = [
+      { label: 'ctx.record.roles.users', type: 'property', detail: 'object' },
+      { label: 'ctx.record.save()', type: 'function', detail: '() => void' },
+      { label: 'ctx.other', type: 'property' },
+    ];
+
+    const source = createRunJSCompletionSource({ hostCtx, staticOptions });
+
+    const text = 'ctx.record.roles.users';
+    const context: any = {
+      explicit: true,
+      pos: text.length,
+      state: { doc: makeDoc(text) },
+      matchBefore: () => ({ from: 0, to: text.length, text }),
+    };
+
+    const res = await source(context);
+    expect(res).toBeTruthy();
+    const options = (res as any).options as any[];
+
+    const matches = options.filter((o) => o.label === 'ctx.record.roles.users');
+    expect(matches.length).toBe(1);
+    expect(matches[0].detail).toBe('角色 / users');
+    // function under same root should NOT be filtered out
+    expect(options.some((o) => o.label === 'ctx.record.save()')).toBe(true);
+  });
+
+  it('uses await ctx.getVar(fullPath) for ctx.popup.* meta completions and hides snapshot ctx.popup in deep contexts', async () => {
+    const hostCtx: any = {
+      t: (s: string) => s,
+      popup: Promise.resolve({ uid: 'p1' }),
+      getPropertyMetaTree: (value: string) => {
+        if (value === '{{ ctx.popup }}') {
+          return [
+            {
+              name: 'record',
+              title: 'Record',
+              type: 'object',
+              paths: ['popup', 'record'],
+              children: [
+                {
+                  name: 'id',
+                  title: 'ID',
+                  type: 'string',
+                  paths: ['popup', 'record', 'id'],
+                  parentTitles: ['Record'],
+                },
+              ],
+            },
+          ];
+        }
+        return [];
+      },
+    };
+
+    const staticOptions: any[] = [
+      { label: 'ctx.popup', type: 'property', detail: 'Promise<any>' },
+      { label: 'ctx.popup.record', type: 'property' },
+    ];
+
+    const source = createRunJSCompletionSource({ hostCtx, staticOptions });
+
+    const text = 'ctx.popup.record.'; // cursor after dot
+    const context: any = {
+      explicit: true,
+      pos: text.length,
+      state: { doc: makeDoc(text) },
+      matchBefore: () => ({ from: 0, to: text.length, text }),
+    };
+
+    const res = await source(context);
+    expect(res).toBeTruthy();
+    const options = (res as any).options as any[];
+
+    const id = options.find((o) => o.label === 'ctx.popup.record.id');
+    expect(id).toBeTruthy();
+    expect(typeof id.apply).toBe('function');
+    const mockView = { dispatch: vi.fn(), state: { doc: makeDoc(text) } } as any;
+    (id as any).apply(mockView, id, (res as any).from, (res as any).to);
+    const inserted = mockView.dispatch.mock.calls[0][0]?.changes?.insert;
+    expect(inserted).toBe("await ctx.getVar('ctx.popup.record.id')");
+    // deep meta context should not propose snapshot ctx.popup root (to avoid inserting await ctx.getVar('ctx.popup') + trailing .xxx)
+    expect(options.some((o) => o.label === 'ctx.popup')).toBe(false);
+  });
+
+  it('does not wrap ctx.* into getVar when completing inside a string literal', async () => {
+    const hostCtx: any = {
+      t: (s: string) => s,
+      popup: Promise.resolve({ uid: 'p1' }),
+      getPropertyMetaTree: (value: string) => {
+        if (value === '{{ ctx.popup }}') {
+          return [
+            {
+              name: 'record',
+              title: 'Record',
+              type: 'object',
+              paths: ['popup', 'record'],
+              children: [
+                {
+                  name: 'createdAt',
+                  title: 'Created at',
+                  type: 'string',
+                  paths: ['popup', 'record', 'createdAt'],
+                  parentTitles: ['Record'],
+                },
+              ],
+            },
+          ];
+        }
+        return [];
+      },
+    };
+
+    const staticOptions: any[] = [{ label: 'ctx.popup.record.createdAt', type: 'property' }];
+    const source = createRunJSCompletionSource({ hostCtx, staticOptions });
+
+    const prefix = "await ctx.getVar('";
+    const pathText = 'ctx.popup.record.';
+    const text = `${prefix}${pathText}`;
+    const wordFrom = prefix.length;
+    const context: any = {
+      explicit: true,
+      pos: text.length,
+      state: { doc: makeDoc(text) },
+      matchBefore: () => ({ from: wordFrom, to: text.length, text: pathText }),
+    };
+
+    const res = await source(context);
+    expect(res).toBeTruthy();
+    const options = (res as any).options as any[];
+
+    const createdAt = options.find((o) => o.label === 'ctx.popup.record.createdAt');
+    expect(createdAt).toBeTruthy();
+    expect(typeof createdAt.apply).toBe('function');
+
+    const mockView = { dispatch: vi.fn(), state: { doc: makeDoc(text) } } as any;
+    (createdAt as any).apply(mockView, createdAt, (res as any).from, (res as any).to);
+    const inserted = mockView.dispatch.mock.calls[0][0]?.changes?.insert;
+    expect(inserted).toBe('ctx.popup.record.createdAt');
+  });
+
+  it('supports async hidden/disabled/disabledReason in meta nodes', async () => {
+    const hostCtx: any = {
+      t: (s: string) => s,
+      getPropertyMetaTree: (value: string) => {
+        if (value === '{{ ctx.record }}') {
+          return [
+            {
+              name: 'visible',
+              title: 'Visible',
+              type: 'string',
+              paths: ['record', 'visible'],
+              hidden: async () => false,
+            },
+            {
+              name: 'hidden',
+              title: 'Hidden',
+              type: 'string',
+              paths: ['record', 'hidden'],
+              hidden: async () => true,
+            },
+            {
+              name: 'disabled',
+              title: 'Disabled',
+              type: 'string',
+              paths: ['record', 'disabled'],
+              disabled: async () => true,
+              disabledReason: async () => 'not allowed',
+            },
+          ];
+        }
+        return [];
+      },
+    };
+
+    const source = createRunJSCompletionSource({ hostCtx, staticOptions: [] });
+
+    const text = 'ctx.record.'; // cursor after dot
+    const context: any = {
+      explicit: true,
+      pos: text.length,
+      state: { doc: makeDoc(text) },
+      matchBefore: () => ({ from: 0, to: text.length, text }),
+    };
+
+    const res = await source(context);
+    expect(res).toBeTruthy();
+    const options = (res as any).options as any[];
+
+    expect(options.some((o) => o.label === 'ctx.record.visible')).toBe(true);
+    expect(options.some((o) => o.label === 'ctx.record.hidden')).toBe(false);
+
+    const disabled = options.find((o) => o.label === 'ctx.record.disabled');
+    expect(disabled).toBeTruthy();
+    expect(String(disabled?.info || '')).toContain('Disabled:');
+    expect(String(disabled?.info || '')).toContain('not allowed');
+  });
+});