@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.45

package/src/components/form/RemoteSelect.tsx

@@ -0,0 +1,137 @@
+/**
+ * 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 { useRequest } from 'ahooks';
+import { Select, type SelectProps } from 'antd';
+import React, { useMemo } from 'react';
+
+export interface RemoteSelectFieldNames {
+  label?: string;
+  value?: string;
+}
+
+export interface RemoteSelectProps<RawItem = any, Resp = RawItem[], V = any>
+  extends Omit<SelectProps<V>, 'options' | 'loading'> {
+  /**
+   * Fetch the option source. Receives no arguments; caller closes over the
+   * `ctx.api.resource(...)` (or any other source) it needs. May resolve
+   * with either an array of raw items (the common case) or an arbitrary
+   * envelope object — in the latter case, supply `selectItems` to pluck
+   * the array out.
+   */
+  request: () => Promise<Resp | undefined>;
+  /**
+   * When `request` returns an envelope (object with metadata around the
+   * list), use this to extract the array of items that drives the
+   * dropdown. Defaults to identity, i.e. `request` itself returns the
+   * array.
+   */
+  selectItems?: (response: Resp) => RawItem[] | undefined;
+  /**
+   * Names of the raw item properties that hold the display label and the
+   * persisted value. Defaults to `{ label: 'label', value: 'value' }`.
+   * Ignored when `mapOptions` is supplied.
+   */
+  fieldNames?: RemoteSelectFieldNames;
+  /**
+   * Full custom mapping from a raw item to an antd `OptionType`. When
+   * provided, overrides `fieldNames`.
+   */
+  mapOptions?: (item: RawItem, index: number) => { label: React.ReactNode; value: any };
+  /**
+   * Stable cache key for ahooks `useRequest` so the dropdown doesn't re-fetch
+   * on every re-mount. Pass a value tied to the request's effective inputs.
+   */
+  cacheKey?: string;
+  /**
+   * Re-run the request when any of these values changes. Forwarded to
+   * `useRequest`'s `refreshDeps`.
+   */
+  refreshDeps?: unknown[];
+  /**
+   * Skip the auto-fetch on mount when `false`. Defaults to `true`.
+   */
+  ready?: boolean;
+  /**
+   * Notified once the request resolves. Receives both the mapped item
+   * array and the raw response envelope — useful when callers need to
+   * read sibling metadata (counts, availability hints, etc.) without
+   * issuing a second request.
+   */
+  onLoaded?: (items: RawItem[], response: Resp) => void;
+}
+
+/**
+ * Generic settings-page Select bound to an async option source. The
+ * component itself stays framework-agnostic — it knows nothing about
+ * NocoBase resources, data sources, or Formily. Pass any async `request`
+ * that resolves with an array, and supply `fieldNames` (or `mapOptions`)
+ * to map raw items to antd option shape.
+ *
+ * Search is local-only (antd's default `optionFilterProp="label"`). For
+ * server-side search, drive `request` from external state and pass the
+ * search input via `refreshDeps`.
+ */
+export function RemoteSelect<RawItem = any, Resp = RawItem[], V = any>(props: RemoteSelectProps<RawItem, Resp, V>) {
+  const {
+    request,
+    selectItems,
+    fieldNames,
+    mapOptions,
+    cacheKey,
+    refreshDeps,
+    ready = true,
+    onLoaded,
+    showSearch = true,
+    allowClear = true,
+    ...selectProps
+  } = props;
+
+  const { data: response, loading } = useRequest<Resp | undefined, []>(request, {
+    cacheKey,
+    refreshDeps,
+    ready,
+    onSuccess: (resp) => {
+      if (resp === undefined) return;
+      const items = (selectItems ? selectItems(resp) : (resp as unknown as RawItem[])) || [];
+      onLoaded?.(items, resp);
+    },
+  });
+
+  const items = useMemo<RawItem[]>(() => {
+    if (response === undefined) return [];
+    return (selectItems ? selectItems(response) : (response as unknown as RawItem[])) || [];
+  }, [response, selectItems]);
+
+  const labelKey = fieldNames?.label ?? 'label';
+  const valueKey = fieldNames?.value ?? 'value';
+
+  const options = useMemo(() => {
+    if (mapOptions) {
+      return items.map((item, index) => mapOptions(item, index));
+    }
+    return items.map((item: any) => ({
+      label: item?.[labelKey],
+      value: item?.[valueKey],
+    }));
+  }, [items, mapOptions, labelKey, valueKey]);
+
+  return (
+    <Select
+      {...selectProps}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      optionFilterProp="label"
+      loading={loading}
+      options={options}
+    />
+  );
+}
+
+export default RemoteSelect;

package/src/components/form/VariableInput.tsx

@@ -0,0 +1,250 @@
+/**
+ * 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.
+ */
+
+/**
+ * Variable delimiters: opening + closing tokens. Default `['{{', '}}']`
+ * matches NocoBase server template convention (Handlebars HTML-escaped
+ * output). Pass `['{{{', '}}}']` to switch to Handlebars' raw/unescaped
+ * form — required for fields whose content is rendered as HTML (e.g.
+ * in-app message body) so the variable expansion bypasses HTML escaping.
+ *
+ * Restrict to literal-token pairs, since the regex builder escapes them
+ * verbatim.
+ */
+export type VariableDelimiters = readonly [string, string];
+
+const DEFAULT_DELIMITERS: VariableDelimiters = ['{{', '}}'];
+
+function escapeForRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Factory: returns a `parseValueToPath` bound to the given delimiters.
+ * Anchored (`^…$`) — only treats the whole input as a single variable
+ * reference, matching the v1 single-line picker behaviour.
+ */
+export function makeParseVariablePath(delimiters: VariableDelimiters = DEFAULT_DELIMITERS) {
+  const [open, close] = delimiters;
+  const re = new RegExp(`^${escapeForRegExp(open)}\\s*(.+?)\\s*${escapeForRegExp(close)}$`);
+  return (value?: string): string[] | undefined => {
+    if (typeof value !== 'string') return undefined;
+    const match = value.trim().match(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('.');
+  };
+}
+
+/**
+ * Factory: returns a `formatPathToValue` bound to the given delimiters.
+ * No inner spaces — matches the v1 storage shape exactly so round-trips
+ * through the API stay byte-stable.
+ */
+export function makeFormatVariablePath(delimiters: VariableDelimiters = DEFAULT_DELIMITERS) {
+  const [open, close] = delimiters;
+  return (meta?: MetaTreeNode): string | undefined => {
+    const paths = meta?.paths || [];
+    if (paths.length === 0) return undefined;
+    return `${open}${paths.join('.')}${close}`;
+  };
+}
+
+/**
+ * Factory: returns a global regex matching every occurrence of the
+ * variable token within a longer string. Used by `VariableHybridInput`
+ * to render embedded variables as pills.
+ */
+export function makeVariableRegExp(delimiters: VariableDelimiters = DEFAULT_DELIMITERS): RegExp {
+  const [open, close] = delimiters;
+  return new RegExp(`${escapeForRegExp(open)}\\s*([^{}]+?)\\s*${escapeForRegExp(close)}`, 'g');
+}
+
+// Default exports — `{{ ... }}` for the most common case. Kept named so
+// existing callers don't need to switch to the factory.
+export const parseVariablePath = makeParseVariablePath();
+export const formatVariablePath = makeFormatVariablePath();
+
+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).
+   *
+   * Takes precedence over `delimiters` when both are set on the same field
+   * (an explicit converter wins over the delimiter-derived one).
+   */
+  converters?: VariableHybridInputConverters;
+  /**
+   * Token pair wrapping variable references in the stored string. Defaults
+   * to `['{{', '}}']` — the standard NocoBase server-template form,
+   * HTML-escaped by Handlebars. Pass `['{{{', '}}}']` for fields rendered
+   * as HTML where escaping would corrupt the variable value (e.g. the
+   * in-app message body).
+   *
+   * Ignored when `converters` is also supplied — caller-provided converters
+   * win.
+   */
+  delimiters?: VariableDelimiters;
+  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, delimiters, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const mergedConverters = useMemo<VariableHybridInputConverters>(() => {
+    // Default delimiters → reuse the pre-built singletons.
+    if (!delimiters) {
+      return {
+        formatPathToValue: formatVariablePath,
+        parseValueToPath: parseVariablePath,
+        ...converters,
+      };
+    }
+    return {
+      formatPathToValue: makeFormatVariablePath(delimiters),
+      parseValueToPath: makeParseVariablePath(delimiters),
+      variableRegExp: makeVariableRegExp(delimiters),
+      ...converters,
+    };
+  }, [converters, delimiters]);
+  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, delimiters, ...rest } = props;
+  const metaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const metaTreeGetter = useMemo(() => () => metaTree, [metaTree]);
+  const formatPathToValue = useMemo(
+    () => (delimiters ? makeFormatVariablePath(delimiters) : formatVariablePath),
+    [delimiters],
+  );
+  return (
+    <TextAreaWithContextSelector
+      {...rest}
+      rows={rows}
+      maxRows={maxRows}
+      style={style}
+      metaTree={metaTreeGetter}
+      formatPathToValue={(meta) => formatPathToValue(meta) ?? ''}
+    />
+  );
+}

package/src/components/form/__tests__/EnvVariableInput.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { FlowContext, FlowContextProvider, MetaTreeNode } from '@nocobase/flow-engine';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { EnvVariableInput, formatEnvPath, parseEnvPath } from '../EnvVariableInput';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as any).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret', BASE_URL: 'https://example.com' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+        BASE_URL: { title: 'Base URL', type: 'string' },
+      },
+    },
+  });
+
+  ctx.defineProperty('$user', {
+    value: { name: 'John' },
+    meta: {
+      title: 'User',
+      type: 'object',
+      properties: {
+        name: { title: 'Name', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('parseEnvPath', () => {
+  it('parses single segment', () => {
+    expect(parseEnvPath('{{ $env.API_KEY }}')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('parses nested segments', () => {
+    expect(parseEnvPath('{{ $env.foo.bar.baz }}')).toEqual(['$env', 'foo', 'bar', 'baz']);
+  });
+
+  it('trims surrounding whitespace', () => {
+    expect(parseEnvPath('   {{ $env.API_KEY }}   ')).toEqual(['$env', 'API_KEY']);
+  });
+
+  it('returns undefined for plain text', () => {
+    expect(parseEnvPath('plain value')).toBeUndefined();
+  });
+
+  it('returns undefined for non-$env variable', () => {
+    expect(parseEnvPath('{{ $user.name }}')).toBeUndefined();
+  });
+
+  it('returns undefined for mixed content', () => {
+    expect(parseEnvPath('prefix {{ $env.API_KEY }} suffix')).toBeUndefined();
+  });
+
+  it('returns undefined for empty / undefined', () => {
+    expect(parseEnvPath('')).toBeUndefined();
+    expect(parseEnvPath(undefined)).toBeUndefined();
+  });
+});
+
+describe('formatEnvPath', () => {
+  it('formats a single nested env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'API_KEY'] } as MetaTreeNode)).toBe('{{ $env.API_KEY }}');
+  });
+
+  it('formats multi-level env path', () => {
+    expect(formatEnvPath({ paths: ['$env', 'foo', 'bar'] } as MetaTreeNode)).toBe('{{ $env.foo.bar }}');
+  });
+
+  it('returns undefined for non-$env namespace', () => {
+    expect(formatEnvPath({ paths: ['$user', 'name'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for $env root only', () => {
+    expect(formatEnvPath({ paths: ['$env'] } as MetaTreeNode)).toBeUndefined();
+  });
+
+  it('returns undefined for empty meta', () => {
+    expect(formatEnvPath(undefined)).toBeUndefined();
+    expect(formatEnvPath({ paths: [] } as MetaTreeNode)).toBeUndefined();
+  });
+});
+
+describe('EnvVariableInput component', () => {
+  it('renders contenteditable editor with the variable selector button', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'textbox' })).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the variable as a styled pill when value is a $env expression', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+      expect(tag.className).toContain('nb-variable-tag');
+    });
+  });
+
+  it('renders password input when value is plain text and password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="my-secret" password onChange={() => undefined} />);
+
+    const input = await screen.findByDisplayValue('my-secret');
+    expect(input).toBeInTheDocument();
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('does NOT mask when value is a $env expression even with password=true', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="{{ $env.API_KEY }}" password onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const tag = screen.getByText((_, node) => node?.textContent === 'Env/API Key' && node.tagName === 'SPAN');
+      expect(tag).toBeInTheDocument();
+    });
+    expect(screen.queryByDisplayValue('{{ $env.API_KEY }}')).not.toBeInTheDocument();
+  });
+
+  it('propagates onChange when typing into the password input', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+    renderWithCtx(ctx, <EnvVariableInput value="initial" password onChange={handleChange} />);
+
+    const input = await screen.findByDisplayValue('initial');
+    fireEvent.change(input, { target: { value: 'next-value' } });
+    expect(handleChange).toHaveBeenCalledWith('next-value');
+  });
+
+  it('renders placeholder text on the editor', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" placeholder="enter or pick" onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('data-placeholder')).toBe('enter or pick');
+    });
+  });
+
+  it('honors disabled state', async () => {
+    const ctx = createContextWithEnv();
+    renderWithCtx(ctx, <EnvVariableInput value="" disabled onChange={() => undefined} />);
+
+    await waitFor(() => {
+      const editor = screen.getByRole('textbox', { name: 'textbox' });
+      expect(editor.getAttribute('contenteditable')).toBe('false');
+    });
+  });
+});

package/src/components/form/__tests__/VariableInput.test.ts

@@ -0,0 +1,85 @@
+/**
+ * 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 {
+  formatVariablePath,
+  makeFormatVariablePath,
+  makeParseVariablePath,
+  makeVariableRegExp,
+  parseVariablePath,
+} from '../VariableInput';
+
+describe('VariableInput delimiter helpers', () => {
+  describe('default delimiters {{ }}', () => {
+    it('formats meta nodes into `{{x.y}}` with no inner spaces', () => {
+      expect(formatVariablePath({ paths: ['$user', 'id'] } as any)).toBe('{{$user.id}}');
+    });
+
+    it('parses `{{x.y}}` into a path array', () => {
+      expect(parseVariablePath('{{ $user.id }}')).toEqual(['$user', 'id']);
+      expect(parseVariablePath('{{$user.id}}')).toEqual(['$user', 'id']);
+    });
+
+    it('strips a legacy `ctx.` prefix for backwards-compat', () => {
+      expect(parseVariablePath('{{ctx.$user.id}}')).toEqual(['$user', 'id']);
+      expect(parseVariablePath('{{ctx}}')).toEqual([]);
+    });
+
+    it('returns undefined for plain text', () => {
+      expect(parseVariablePath('hello world')).toBeUndefined();
+      expect(parseVariablePath('')).toBeUndefined();
+      expect(parseVariablePath(undefined)).toBeUndefined();
+    });
+  });
+
+  describe('triple-brace delimiters {{{ }}}', () => {
+    const format = makeFormatVariablePath(['{{{', '}}}']);
+    const parse = makeParseVariablePath(['{{{', '}}}']);
+
+    it('formats meta nodes into `{{{x.y}}}`', () => {
+      expect(format({ paths: ['$user', 'id'] } as any)).toBe('{{{$user.id}}}');
+    });
+
+    it('parses `{{{x.y}}}` into a path array', () => {
+      expect(parse('{{{$user.id}}}')).toEqual(['$user', 'id']);
+      expect(parse('{{{ $user.id }}}')).toEqual(['$user', 'id']);
+    });
+
+    it('does not match the double-brace form', () => {
+      expect(parse('{{$user.id}}')).toBeUndefined();
+    });
+  });
+
+  describe('makeVariableRegExp', () => {
+    it('matches every occurrence in a longer string under default delimiters', () => {
+      const re = makeVariableRegExp();
+      const matches = Array.from('hello {{ $user.id }} world {{ $env.X }}'.matchAll(re)).map((m) => m[1]);
+      expect(matches).toEqual(['$user.id', '$env.X']);
+    });
+
+    it('matches triple-brace occurrences when configured', () => {
+      const re = makeVariableRegExp(['{{{', '}}}']);
+      const matches = Array.from('hi {{{$user.id}}} :)'.matchAll(re)).map((m) => m[1]);
+      expect(matches).toEqual(['$user.id']);
+    });
+
+    it('does not match double-brace occurrences under triple-brace config', () => {
+      const re = makeVariableRegExp(['{{{', '}}}']);
+      const matches = Array.from('plain {{ x }} text'.matchAll(re));
+      expect(matches).toHaveLength(0);
+    });
+  });
+
+  it('handles empty paths consistently', () => {
+    expect(formatVariablePath({ paths: [] } as any)).toBeUndefined();
+    expect(formatVariablePath(undefined)).toBeUndefined();
+    expect(makeFormatVariablePath(['{{{', '}}}'])({ paths: [] } as any)).toBeUndefined();
+  });
+});