@nocobase/client-v2 2.1.0-beta.33 → 2.1.0-beta.35

package/src/__tests__/remotePlugins.test.ts

@@ -14,8 +14,11 @@ import { configRequirejs, defineDevPlugins, getPlugins } from '../utils/remotePl
 describe('client-v2 remotePlugins', () => {
   afterEach(() => {
     window.define = undefined;
+    window.__nocobase_app_dev_plugins__ = undefined;
   });
 
+  const createModuleUrl = (code: string) => `data:text/javascript;charset=utf-8,${encodeURIComponent(code)}`;
+
   it('should define dev plugins with /client-v2 module ids', () => {
     class DemoPlugin extends Plugin {}
 
@@ -58,6 +61,151 @@ describe('client-v2 remotePlugins', () => {
     expect(mockDefine).not.toHaveBeenCalledWith('@nocobase/demo/client', expect.any(Function));
   });
 
+  it('should request remote plugins when devDynamicImport only resolves some plugins', async () => {
+    class DemoPlugin extends Plugin {}
+
+    const remoteFn = vi.fn();
+    const requirejs: any = {
+      requirejs: (pluginData, resolve) => {
+        remoteFn();
+        resolve({ default: DemoPlugin });
+      },
+    };
+    requirejs.requirejs.config = vi.fn();
+
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    const plugins = await getPlugins({
+      requirejs,
+      pluginData: [
+        {
+          name: '@nocobase/demo',
+          packageName: '@nocobase/demo',
+          url: 'https://demo.com/dist/client-v2/index.js',
+        },
+        {
+          name: '@nocobase/remote',
+          packageName: '@nocobase/remote',
+          url: 'https://remote.com/dist/client-v2/index.js',
+        },
+      ] as any,
+      devDynamicImport: ((packageName) => {
+        if (packageName === '@nocobase/demo') {
+          return Promise.resolve({ default: DemoPlugin });
+        }
+        return Promise.resolve(null);
+      }) as any,
+    });
+
+    expect(plugins).toEqual([
+      ['@nocobase/demo', DemoPlugin],
+      ['@nocobase/remote', DemoPlugin],
+    ]);
+    expect(remoteFn).toHaveBeenCalledTimes(1);
+    expect(mockDefine).toHaveBeenCalledTimes(1);
+    expect(requirejs.requirejs.config).toHaveBeenCalledWith({
+      waitSeconds: 120,
+      paths: {
+        '@nocobase/remote/client-v2': 'https://remote.com/dist/client-v2/index.js',
+      },
+    });
+  });
+
+  it('should register ESM dev plugins before importing dependent plugins', async () => {
+    const requirejs: any = {
+      requirejs: vi.fn(),
+    };
+    requirejs.requirejs.config = vi.fn();
+
+    const mockDefine: any = vi.fn();
+    window.define = mockDefine;
+
+    const plugins = await getPlugins({
+      requirejs,
+      pluginData: [
+        {
+          name: '@nocobase/dependent',
+          packageName: '@nocobase/dependent',
+          url: createModuleUrl(`
+              const dependency = window.__nocobase_app_dev_plugins__ && window.__nocobase_app_dev_plugins__['@nocobase/dependency/client-v2'];
+            export default class DependentPlugin extends dependency.default {
+              static SharedBase = dependency.SharedBase;
+            }
+          `),
+          devMode: 'esm',
+          appDevDependencies: ['@nocobase/dependency'],
+        },
+        {
+          name: '@nocobase/dependency',
+          packageName: '@nocobase/dependency',
+          url: createModuleUrl('export class SharedBase {}; export default class DependencyPlugin {}'),
+          devMode: 'esm',
+        },
+      ] as any,
+    });
+
+    const dependencyModule = window.__nocobase_app_dev_plugins__['@nocobase/dependency/client-v2'] as {
+      default?: unknown;
+      SharedBase?: unknown;
+    };
+    const dependentPlugin = plugins[1][1] as (typeof plugins)[number][1] & { SharedBase?: unknown };
+
+    expect(plugins.map(([name]) => name)).toEqual(['@nocobase/dependency', '@nocobase/dependent']);
+    expect(dependencyModule.SharedBase).toBeDefined();
+    expect(plugins[0][1]).toBe(dependencyModule.default);
+    expect(dependentPlugin.SharedBase).toBe(dependencyModule.SharedBase);
+    expect(mockDefine).toHaveBeenCalledWith('@nocobase/dependency/client-v2', expect.any(Function));
+    expect(requirejs.requirejs.config).not.toHaveBeenCalled();
+  });
+
+  it('should load RequireJS dependencies before ESM dev plugins', async () => {
+    class DependencyPlugin extends Plugin {}
+    const SharedBase = { source: 'remote' };
+    const dependencyModule = {
+      SharedBase,
+      default: DependencyPlugin,
+    };
+    const requirejs: any = {
+      requirejs: vi.fn((packageNames, resolve) => {
+        expect(packageNames).toEqual(['@nocobase/remote-dependency/client-v2']);
+        resolve(dependencyModule);
+      }),
+    };
+    requirejs.requirejs.config = vi.fn();
+
+    window.define = vi.fn();
+
+    const plugins = await getPlugins({
+      requirejs,
+      pluginData: [
+        {
+          name: '@nocobase/dependent',
+          packageName: '@nocobase/dependent',
+          url: createModuleUrl(`
+            const dependency = window.__nocobase_app_dev_plugins__ && window.__nocobase_app_dev_plugins__['@nocobase/remote-dependency/client-v2'];
+            export default class DependentPlugin extends dependency.default {
+              static SharedBase = dependency.SharedBase;
+            }
+          `),
+          devMode: 'esm',
+          appDevDependencies: ['@nocobase/remote-dependency'],
+        },
+        {
+          name: '@nocobase/remote-dependency',
+          packageName: '@nocobase/remote-dependency',
+          url: 'https://dependency.com',
+        },
+      ] as any,
+    });
+
+    const dependentPlugin = plugins[1][1] as (typeof plugins)[number][1] & { SharedBase?: unknown };
+
+    expect(plugins.map(([name]) => name)).toEqual(['@nocobase/remote-dependency', '@nocobase/dependent']);
+    expect(window.__nocobase_app_dev_plugins__['@nocobase/remote-dependency/client-v2']).toBe(dependencyModule);
+    expect(dependentPlugin.SharedBase).toBe(SharedBase);
+  });
+
   it('should configure remote plugin paths with /client-v2 module ids', () => {
     const requirejs: any = {
       requirejs: {

package/src/authRedirect.ts

@@ -21,8 +21,6 @@ type LocationLike = {
   hash?: string;
 };
 
-const V2_PUBLIC_PATH_SUFFIX = '/v2/';
-
 function ensureLeadingSlash(value = '') {
   if (!value) {
     return '/';
@@ -111,18 +109,18 @@ function getV2PublicPath(app: AppLike) {
   return normalizePublicPath(app.getPublicPath());
 }
 
-function getRootPublicPath(app: AppLike) {
-  const publicPath = getV2PublicPath(app);
-  if (!publicPath.endsWith(V2_PUBLIC_PATH_SUFFIX)) {
-    return normalizePublicPath(publicPath.replace(/\/v2\/?$/, '/') || '/');
-  }
-  return normalizePublicPath(publicPath.slice(0, -V2_PUBLIC_PATH_SUFFIX.length) || '/');
-}
-
 function getV2BasePath(app: AppLike) {
   return trimTrailingSlashes(getV2PublicPath(app)) || '/';
 }
 
+export function getV2EffectiveBasePath(app: AppLike): string {
+  const basename = app.router?.getBasename?.();
+  if (basename) {
+    return normalizePublicPath(basename);
+  }
+  return getV2PublicPath(app);
+}
+
 function joinRootRelativePath(basePath: string, pathname: string) {
   const normalizedBasePath = normalizePublicPath(basePath);
   const normalizedPathname = normalizePathname(pathname);
@@ -138,46 +136,8 @@ function joinRootRelativePath(basePath: string, pathname: string) {
   return normalizePathname(`/${trimLeadingSlashes(normalizedBasePath)}/${trimLeadingSlashes(normalizedPathname)}`);
 }
 
-function mapV2AdminPathnameToLegacyPathname(pathname: string) {
-  const normalizedPathname = normalizePathname(pathname);
-
-  if (normalizedPathname === '/admin') {
-    return '/admin';
-  }
-
-  const segments = normalizedPathname.split('/').filter(Boolean);
-  if (segments[0] !== 'admin' || segments.length < 2) {
-    return null;
-  }
-
-  const [, name, ...restSegments] = segments;
-  const legacySegments = ['admin', name];
-  let index = 0;
-
-  while (index < restSegments.length) {
-    const segment = restSegments[index];
-
-    if (segment === 'tab' && restSegments[index + 1]) {
-      legacySegments.push('tabs', restSegments[index + 1]);
-      index += 2;
-      continue;
-    }
-
-    if (segment === 'view') {
-      legacySegments.push('popups', ...restSegments.slice(index + 1));
-      index = restSegments.length;
-      continue;
-    }
-
-    return null;
-  }
-
-  return normalizePathname(`/${legacySegments.join('/')}`);
-}
-
-function getLegacySigninPath(app: AppLike) {
-  const rootPublicPath = trimTrailingSlashes(getRootPublicPath(app));
-  return `${rootPublicPath}/signin`;
+function getV2SigninPath(app: AppLike) {
+  return joinRootRelativePath(getV2EffectiveBasePath(app), '/signin');
 }
 
 function stripCurrentV2Basename(app: AppLike, pathname: string) {
@@ -198,28 +158,7 @@ function stripCurrentV2Basename(app: AppLike, pathname: string) {
 }
 
 function getDefaultV2AdminRedirectPath(app: AppLike) {
-  return joinRootRelativePath(getV2PublicPath(app), '/admin');
-}
-
-/**
- * 将 v2 admin 路径转换为对应的 v1 admin 根相对路径。
- *
- * @param app 当前 v2 应用实例
- * @param value 当前 v2 admin 路径或 location 对象
- * @returns 对应的 v1 admin 根相对路径；若无法安全转换则返回 null
- */
-export function convertV2AdminPathToLegacy(app: AppLike, value: string | LocationLike) {
-  const locationLike = splitPathLike(value);
-  const pathname = stripCurrentV2Basename(app, locationLike.pathname || '/');
-  const legacyPathname = mapV2AdminPathnameToLegacyPathname(pathname);
-
-  if (!legacyPathname) {
-    return null;
-  }
-
-  return `${joinRootRelativePath(getRootPublicPath(app), legacyPathname)}${normalizeSearch(
-    locationLike.search,
-  )}${normalizeHash(locationLike.hash)}`;
+  return joinRootRelativePath(getV2EffectiveBasePath(app), '/admin');
 }
 
 /**
@@ -233,29 +172,29 @@ export function getCurrentV2RedirectPath(app: AppLike, locationLike: LocationLik
   const pathname = stripCurrentV2Basename(app, locationLike?.pathname || '/');
   const search = normalizeSearch(locationLike?.search || '');
   const hash = normalizeHash(locationLike?.hash || '');
-  return `${joinRootRelativePath(getV2PublicPath(app), pathname)}${search}${hash}`;
+  return `${joinRootRelativePath(getV2EffectiveBasePath(app), pathname)}${search}${hash}`;
 }
 
 /**
- * 构造跳转到 v1 登录页的完整 href。
+ * 构造跳转到 v2 登录页的完整 href。
  *
  * @param app 当前 v2 应用实例
  * @param targetPath 登录后回跳地址
- * @returns 指向 v1 登录页的 href
+ * @returns 指向 v2 登录页的 href
  */
-export function buildLegacySigninHref(app: AppLike, targetPath: string) {
-  return `${getLegacySigninPath(app)}?redirect=${encodeURIComponent(targetPath)}`;
+export function buildV2SigninHref(app: AppLike, targetPath: string) {
+  return `${getV2SigninPath(app)}?redirect=${encodeURIComponent(targetPath)}`;
 }
 
 /**
- * 通过整页跳转进入 v1 登录页。
+ * 通过整页跳转进入 v2 登录页。
  *
  * @param app 当前 v2 应用实例
  * @param targetPath 登录后回跳地址
  * @param options 跳转选项
  */
-export function redirectToLegacySignin(app: AppLike, targetPath: string, options?: { replace?: boolean }) {
-  const href = buildLegacySigninHref(app, targetPath);
+export function redirectToV2Signin(app: AppLike, targetPath: string, options?: { replace?: boolean }) {
+  const href = buildV2SigninHref(app, targetPath);
   if (options?.replace === false) {
     window.location.href = href;
     return;
@@ -264,13 +203,13 @@ export function redirectToLegacySignin(app: AppLike, targetPath: string, options
 }
 
 /**
- * 解析并校验服务端返回的 v1 登录页地址。
+ * 解析并校验服务端返回的 v2 登录页地址。
  *
  * @param value 服务端返回的 redirect
  * @param app 当前 v2 应用实例
- * @returns 合法时返回完整同源 URL，否则返回 null
+ * @returns 合法时返回完整同源 URL,否则返回 null
  */
-export function resolveLegacySigninRedirect(value: string | undefined | null, app: AppLike) {
+export function resolveV2SigninRedirect(value: string | undefined | null, app: AppLike) {
   if (!value) {
     return null;
   }
@@ -286,7 +225,7 @@ export function resolveLegacySigninRedirect(value: string | undefined | null, ap
     return null;
   }
 
-  const validPathnames = new Set(['/signin', getLegacySigninPath(app)]);
+  const validPathnames = new Set(['/signin', getV2SigninPath(app)]);
   if (!validPathnames.has(url.pathname)) {
     return null;
   }

package/src/components/form/EnvVariableInput.tsx

@@ -7,19 +7,14 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import {
-  useFlowContext,
-  VariableHybridInput,
-  type MetaTreeNode,
-  type VariableHybridInputConverters,
-} from '@nocobase/flow-engine';
-import { useRequest } from 'ahooks';
+import type { MetaTreeNode, VariableHybridInputConverters } from '@nocobase/flow-engine';
 import { Input } from 'antd';
 import React, { useMemo } from 'react';
+import { VariableInput } from './VariableInput';
 
 const ENV_EXPR_REGEXP = /\{\{\s*(\$env\.[^{}]+?)\s*\}\}/g;
 const ENV_SINGLE_EXPR_REGEXP = /^\{\{\s*(\$env\.[^{}]+?)\s*\}\}$/;
-const META_TREE_CACHE_KEY = '@nocobase/client-v2:EnvVariableInput:metaTree';
+const ENV_NAMESPACES = ['$env'];
 
 /**
  * Convert a stored value like `"{{ $env.foo.bar }}"` back into the
@@ -43,37 +38,6 @@ export function formatEnvPath(meta?: MetaTreeNode) {
   return `{{ ${paths.join('.')} }}`;
 }
 
-/**
- * Pull the `$env` sub-tree off the FlowContext meta registry and eagerly
- * resolve lazy `children` thunks so the picker can render labels on first
- * paint. Empty tree (no env-variables plugin or no defined vars) yields `[]`.
- */
-function useEnvMetaTree(): MetaTreeNode[] {
-  const ctx = useFlowContext();
-  const { data } = useRequest<MetaTreeNode[], []>(
-    async () => {
-      const tree = ctx.getPropertyMetaTree().filter((node) => node.name === '$env');
-      for (const node of tree) {
-        if (typeof node.children === 'function') {
-          try {
-            const resolved = await (node.children as () => Promise<MetaTreeNode[]>)();
-            node.children = Array.isArray(resolved) ? resolved : [];
-          } catch {
-            node.children = [];
-          }
-        }
-      }
-      return tree.filter((node) => Array.isArray(node.children) && node.children.length > 0);
-    },
-    {
-      cacheKey: META_TREE_CACHE_KEY,
-      refreshOnWindowFocus: true,
-    },
-  );
-
-  return data ?? [];
-}
-
 export interface EnvVariableInputProps {
   value?: string;
   onChange?: (value: string) => void;
@@ -91,15 +55,16 @@ export interface EnvVariableInputProps {
 const isVariableExpr = (value?: string) => typeof value === 'string' && /\{\{\s*[^{}]+?\s*\}\}/.test(value);
 
 /**
- * Generic input component for fields that accept either a literal value or a
- * `{{ $env.X }}` reference. The `$env` namespace is wired through the
- * environment-variables plugin's `flowEngine.context.defineProperty('$env', ...)`
- * registration; this component is the single consumption point and degrades
- * gracefully to a plain text input when no env variables are defined.
+ * Convenience wrapper around `VariableInput` constrained to the `$env`
+ * namespace, with optional password-input masking for plain values. Use for
+ * fields that accept either a literal credential or a `{{ $env.X }}`
+ * reference (S3 access keys, OAuth secrets, etc.). The `$env` tree is
+ * provided by the environment-variables plugin's
+ * `flowEngine.context.defineProperty('$env', ...)`; this component degrades
+ * gracefully to an empty picker when no env variables are defined.
  */
 export function EnvVariableInput(props: EnvVariableInputProps) {
   const { password, ...rest } = props;
-  const metaTree = useEnvMetaTree();
 
   const converters = useMemo<VariableHybridInputConverters>(
     () => ({
@@ -122,5 +87,5 @@ export function EnvVariableInput(props: EnvVariableInputProps) {
     );
   }
 
-  return <VariableHybridInput {...rest} converters={converters} metaTree={metaTree} />;
+  return <VariableInput {...rest} namespaces={ENV_NAMESPACES} converters={converters} />;
 }

package/src/components/form/VariableInput.tsx

@@ -0,0 +1,177 @@
+/**
+ * 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 {
+  useFlowContext,
+  VariableHybridInput,
+  type MetaTreeNode,
+  type VariableHybridInputConverters,
+} from '@nocobase/flow-engine';
+import { useRequest } from 'ahooks';
+import React, { useMemo } from 'react';
+import { TextAreaWithContextSelector } from '../../flow/components/TextAreaWithContextSelector';
+
+/**
+ * The flow-engine defaults emit `{{ ctx.$X.Y }}` and only parse the same
+ * shape back into a path — but NocoBase server templates (and v1 stored
+ * values) use the bare `{{$X.Y}}` form without the `ctx.` prefix. These
+ * converters keep the picker's output stable against v1 and let already-
+ * stored values round-trip to a labelled pill instead of falling back to a
+ * raw `{{…}}` literal.
+ */
+const VARIABLE_EXPR_RE = /^\{\{\s*(.+?)\s*\}\}$/;
+
+export function parseVariablePath(value?: string): string[] | undefined {
+  if (typeof value !== 'string') return undefined;
+  const match = value.trim().match(VARIABLE_EXPR_RE);
+  if (!match) return undefined;
+  let pathString = match[1];
+  // Backwards-compat: accept the legacy `ctx.` prefix so values produced by
+  // pre-fix versions of the picker still resolve to a labelled pill.
+  if (pathString === 'ctx') return [];
+  if (pathString.startsWith('ctx.')) pathString = pathString.slice(4);
+  return pathString.split('.');
+}
+
+export function formatVariablePath(meta?: MetaTreeNode): string | undefined {
+  const paths = meta?.paths || [];
+  if (paths.length === 0) return undefined;
+  // No inner spaces — matches the v1 storage shape exactly so round-trips
+  // through the API stay byte-stable.
+  return `{{${paths.join('.')}}}`;
+}
+
+const META_TREE_CACHE_PREFIX = '@nocobase/client-v2:VariableInput:metaTree';
+
+/**
+ * Resolve the meta tree the variable picker should expose. Filters the global
+ * meta tree by `namespaces` (top-level property names like `'$env'`,
+ * `'$user'`), appends `extraNodes`, and eagerly resolves any lazy `children`
+ * thunks so labels render on first paint.
+ *
+ * Returns `[]` while loading or when no nodes survive the filter, mirroring
+ * the existing EnvVariableInput behavior so the picker still opens but offers
+ * nothing.
+ */
+export function useFilteredMetaTree(options: { namespaces?: string[]; extraNodes?: MetaTreeNode[] }): MetaTreeNode[] {
+  const { namespaces, extraNodes } = options;
+  const ctx = useFlowContext();
+  const cacheKey = useMemo(() => {
+    const ns = namespaces ? [...namespaces].sort().join(',') : '*';
+    return `${META_TREE_CACHE_PREFIX}:${ns}`;
+  }, [namespaces]);
+
+  const { data } = useRequest<MetaTreeNode[], []>(
+    async () => {
+      const all = ctx.getPropertyMetaTree?.() ?? [];
+      const filtered = namespaces ? all.filter((node) => namespaces.includes(node.name)) : all;
+      for (const node of filtered) {
+        if (typeof node.children === 'function') {
+          try {
+            const resolved = await (node.children as () => Promise<MetaTreeNode[]>)();
+            node.children = Array.isArray(resolved) ? resolved : [];
+          } catch {
+            node.children = [];
+          }
+        }
+      }
+      const withChildren = filtered.filter(
+        (node) => !Array.isArray(node.children) || node.children.length > 0 || node.type !== 'object',
+      );
+      return withChildren;
+    },
+    {
+      cacheKey,
+      refreshOnWindowFocus: true,
+    },
+  );
+
+  return useMemo(() => {
+    const base = data ?? [];
+    if (!extraNodes?.length) return base;
+    return [...base, ...extraNodes];
+  }, [data, extraNodes]);
+}
+
+export interface VariableInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  addonBefore?: React.ReactNode;
+  /**
+   * Restrict the picker to specific top-level meta tree namespaces (e.g.
+   * `['$env', '$user']`). When omitted, every registered top-level property is
+   * exposed. Filter happens at the picker level — the underlying regex used
+   * for pill rendering still matches any `{{ ... }}` expression so pre-existing
+   * out-of-scope values stay legible.
+   */
+  namespaces?: string[];
+  /**
+   * Static leaves appended to the picker, after the namespace-filtered nodes.
+   * Use for ad-hoc local-only variables (e.g. `$resetLink`) that are not part
+   * of the global FlowContext registry.
+   */
+  extraNodes?: MetaTreeNode[];
+  /**
+   * Override the converters used by the underlying `VariableHybridInput`.
+   * Mostly useful when the caller wants to constrain `formatPathToValue` to a
+   * specific namespace (see `EnvVariableInput` for that pattern).
+   */
+  converters?: VariableHybridInputConverters;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Inline (single-line) variable input. Renders the literal text and any
+ * `{{ ... }}` references as styled pills via `VariableHybridInput`. Use for
+ * fields like form input titles, email subject lines, or any place a single
+ * line of mixed literal+variable content is appropriate.
+ */
+export function VariableInput(props: VariableInputProps) {
+  const { namespaces, extraNodes, converters, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const mergedConverters = useMemo<VariableHybridInputConverters>(
+    () => ({
+      formatPathToValue: formatVariablePath,
+      parseValueToPath: parseVariablePath,
+      ...converters,
+    }),
+    [converters],
+  );
+  return <VariableHybridInput {...rest} converters={mergedConverters} metaTree={metaTree} />;
+}
+
+export interface VariableTextAreaProps extends Omit<VariableInputProps, 'converters' | 'addonBefore'> {
+  rows?: number;
+  maxRows?: number;
+}
+
+/**
+ * Multi-line variable input. Variables are inserted as raw `{{ ... }}` text at
+ * the caret rather than rendered as pills — use for email body templates and
+ * other free-form long-form text where literal display of variable expressions
+ * is desirable (the server expands them at render time).
+ */
+export function VariableTextArea(props: VariableTextAreaProps) {
+  const { namespaces, extraNodes, rows, maxRows, style, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const metaTreeGetter = useMemo(() => () => metaTree, [metaTree]);
+  return (
+    <TextAreaWithContextSelector
+      {...rest}
+      rows={rows}
+      maxRows={maxRows}
+      style={style}
+      metaTree={metaTreeGetter}
+      formatPathToValue={(meta) => formatVariablePath(meta) ?? ''}
+    />
+  );
+}