@verbb/formie-browser 1.0.12 → 1.0.14

package/src/js/utils/csrf.ts

@@ -0,0 +1,136 @@
+export type FormCsrfToken = {
+    name: string;
+    value: string;
+};
+
+type CraftGlobal = {
+    csrfTokenName?: string;
+    csrfTokenValue?: string;
+};
+
+const DEFAULT_CRAFT_CSRF_TOKEN_NAME = 'CRAFT_CSRF_TOKEN';
+const FORMIE_CSRF_PARAM_ATTR = 'data-formie-csrf-param';
+const FORMIE_CSRF_INPUT_ATTR = 'data-formie-csrf';
+
+function getCraftCsrfTokenName(): string | null {
+    const craft = (globalThis as { Craft?: CraftGlobal }).Craft;
+    const name = craft?.csrfTokenName;
+
+    return typeof name === 'string' && name.trim() ? name.trim() : null;
+}
+
+function escapeAttributeSelectorValue(value: string): string {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+
+    // Attribute-selector fallback for environments without CSS.escape.
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+function queryNamedInput(root: ParentNode, name: string): HTMLInputElement | null {
+    const input = root.querySelector(`input[name="${escapeAttributeSelectorValue(name)}"]`);
+
+    return input instanceof HTMLInputElement ? input : null;
+}
+
+/**
+ * Resolve the Craft CSRF hidden input for a Formie form.
+ *
+ * Prefer Formie markers / declared param names so custom `csrfTokenName`
+ * values in `config/general.php` keep working. Fall back to Craft's CP
+ * global and the default token name for older or custom templates.
+ */
+export function getFormCsrfInput(form: ParentNode | null | undefined): HTMLInputElement | null {
+    if (!form) {
+        return null;
+    }
+
+    const marked = form.querySelector(`input[${FORMIE_CSRF_INPUT_ATTR}]`);
+
+    if (marked instanceof HTMLInputElement && marked.name.trim()) {
+        return marked;
+    }
+
+    if (form instanceof Element) {
+        const declaredParam = form.getAttribute(FORMIE_CSRF_PARAM_ATTR)?.trim();
+
+        if (declaredParam) {
+            const declaredInput = queryNamedInput(form, declaredParam);
+
+            if (declaredInput) {
+                return declaredInput;
+            }
+        }
+    }
+
+    const craftName = getCraftCsrfTokenName();
+
+    if (craftName) {
+        const craftInput = queryNamedInput(form, craftName);
+
+        if (craftInput) {
+            return craftInput;
+        }
+    }
+
+    return queryNamedInput(form, DEFAULT_CRAFT_CSRF_TOKEN_NAME);
+}
+
+export function getFormCsrfToken(form: ParentNode | null | undefined): FormCsrfToken | null {
+    const input = getFormCsrfInput(form);
+    const name = input?.name?.trim() || '';
+    const value = input?.value?.trim() || '';
+
+    if (!name || !value) {
+        return null;
+    }
+
+    return { name, value };
+}
+
+export function appendFormCsrfToFormData(body: FormData, form: ParentNode | null | undefined): void {
+    const csrf = getFormCsrfToken(form);
+
+    if (csrf) {
+        body.append(csrf.name, csrf.value);
+    }
+}
+
+export function applyFormCsrfToRecord(target: Record<string, string>, form: ParentNode | null | undefined): void {
+    const csrf = getFormCsrfToken(form);
+
+    if (csrf) {
+        target[csrf.name] = csrf.value;
+    }
+}
+
+export function isFormCsrfFieldName(name: string, form?: ParentNode | null): boolean {
+    const normalizedName = name.endsWith('[]') ? name.slice(0, -2) : name;
+
+    if (!normalizedName) {
+        return false;
+    }
+
+    if (normalizedName === DEFAULT_CRAFT_CSRF_TOKEN_NAME) {
+        return true;
+    }
+
+    const craftName = getCraftCsrfTokenName();
+
+    if (craftName && normalizedName === craftName) {
+        return true;
+    }
+
+    if (form instanceof Element) {
+        const declaredParam = form.getAttribute(FORMIE_CSRF_PARAM_ATTR)?.trim();
+
+        if (declaredParam && normalizedName === declaredParam) {
+            return true;
+        }
+    }
+
+    const csrf = getFormCsrfToken(form);
+
+    return !!csrf && normalizedName === csrf.name;
+}

package/src/js/utils/field-references.parser.ts

@@ -1,121 +1,21 @@
-import type { FieldReferenceTransform, ParsedFieldReference } from '#utils/field-references.types';
+import { parseReference } from '@verbb/formie-core';
+import type { ParsedFieldReference } from '#utils/field-references.types';
 import { normalizeFieldKey } from '#utils/field-references.keys';
 
-function parseTransforms(body: string): { source: string; transforms: FieldReferenceTransform[] } {
-    const parts = body.split(';').map((part) => {
-        return part.trim();
-    }).filter(Boolean);
-
-    if (!parts.length) {
-        return {
-            source: '',
-            transforms: [],
-        };
-    }
-
-    const [source, ...metadata] = parts;
-    const transforms: FieldReferenceTransform[] = [];
-    let current: FieldReferenceTransform | null = null;
-
-    metadata.forEach((entry) => {
-        if (entry.startsWith('transform=')) {
-            if (current) {
-                transforms.push(current);
-            }
-
-            current = {
-                id: decodeURIComponent(entry.slice('transform='.length) || '').trim(),
-                params: {},
-            };
-            return;
-        }
-
-        if (!current || !entry.includes('=')) {
-            return;
-        }
-
-        const [rawKey, rawValue] = entry.split('=', 2);
-        const key = (rawKey || '').trim();
-
-        if (!key || key === 'transform') {
-            return;
-        }
-
-        current.params[key] = decodeURIComponent(rawValue || '').trim();
-    });
-
-    if (current) {
-        transforms.push(current);
-    }
-
-    return {
-        source: source || '',
-        transforms,
-    };
-}
-
+/** Browser field slots adapt the shared grammar; plain keys are legacy field operands. */
 export function parseFieldReference(rawValue: string): ParsedFieldReference {
     const raw = String(rawValue || '').trim();
-
-    if (!raw) {
-        return {
-            raw,
-            target: '',
-            key: '',
-            selector: '',
-            defaultValue: '',
-            transforms: [],
-            isToken: false,
-            isValid: false,
-        };
-    }
-
-    const tokenMatch = raw.match(/^\{([a-zA-Z]+)(?::(.*))?\}$/);
-
-    if (!tokenMatch) {
-        return {
-            raw,
-            target: '',
-            key: normalizeFieldKey(raw),
-            selector: '',
-            defaultValue: '',
-            transforms: [],
-            isToken: false,
-            isValid: true,
-        };
-    }
-
-    const targetRaw = (tokenMatch[1] || '').trim().toLowerCase();
-    const bodyRaw = (tokenMatch[2] || '').trim();
-    const [beforeDefault, defaultRaw = ''] = bodyRaw.split('|', 2);
-    const { source, transforms } = parseTransforms(beforeDefault || '');
-
-    if (targetRaw !== 'field') {
-        return {
-            raw,
-            target: '',
-            key: '',
-            selector: '',
-            defaultValue: defaultRaw.trim(),
-            transforms,
-            isToken: true,
-            isValid: false,
-        };
-    }
-
-    const separatorIndex = source.indexOf(':');
-    const keyRaw = separatorIndex === -1 ? source : source.slice(0, separatorIndex);
-    const selectorRaw = separatorIndex === -1 ? '' : source.slice(separatorIndex + 1);
-    const key = normalizeFieldKey(keyRaw);
-
+    const expression = parseReference(raw);
+    const isToken = raw.startsWith('{');
+    const field = expression.isValid && expression.target === 'field';
     return {
         raw,
-        target: 'field',
-        key,
-        selector: selectorRaw.trim(),
-        defaultValue: defaultRaw.trim(),
-        transforms,
-        isToken: true,
-        isValid: key !== '',
+        target: field ? 'field' : '',
+        key: field ? normalizeFieldKey(expression.identifier) : (isToken ? '' : normalizeFieldKey(raw)),
+        selector: expression.selector,
+        defaultValue: expression.default,
+        transforms: expression.transformerId ? [{ id: expression.transformerId, params: expression.transformerParams }] : [],
+        isToken,
+        isValid: isToken ? field : raw !== '',
     };
 }

package/src/js/utils/field-references.resolver.ts

@@ -1,3 +1,4 @@
+import { parseReference, resolveReference } from '@verbb/formie-core';
 import { fieldKeyToInputName, normalizeFieldKey } from '#utils/field-references.keys';
 import { parseFieldReference } from '#utils/field-references.parser';
 import type {
@@ -42,74 +43,36 @@ function getEntry(registry: FieldValueRegistry, key: string) {
     return registry.get(normalizeFieldKey(key)) || null;
 }
 
-export function resolveFieldReferenceLive(
-    reference: string,
-    registry: FieldValueRegistry,
-): ResolveFieldValueResult {
+function resolvedProjection(reference: string, key: string, value: string | string[]): ResolveFieldValueResult {
+    const token = reference.trim().startsWith('{') ? reference : `{field:${encodeURIComponent(key)}}`;
+    const expression = parseReference(token);
+    const id = `field:${expression.identifier}`;
+    const valueId = expression.selector ? `${id}:${expression.selector}` : id;
+    const resolved = resolveReference(token, {
+        definitions: { [id]: { id, selectors: expression.selector ? [expression.selector] : [], availability: { server: true, browser: true } } },
+        values: { [valueId]: value },
+    });
+    return { key, value: resolved.diagnostic ? '' : resolved.value as string | string[], found: !resolved.diagnostic, diagnostic: resolved.diagnostic };
+}
+
+export function resolveFieldReferenceLive(reference: string, registry: FieldValueRegistry): ResolveFieldValueResult {
     const parsed = parseFieldReference(reference);
     const key = parsed.key;
-    const entry = getEntry(registry, key);
-
-    if (!entry) {
-        return {
-            key,
-            value: parsed.defaultValue,
-            found: false,
-        };
-    }
-
-    const value = readInputsValue(entry.inputs);
-
-    return {
-        key,
-        value: value === '' && parsed.defaultValue !== '' ? parsed.defaultValue : value,
-        found: true,
-    };
+    const lookup = parsed.selector ? `${key}.${parsed.selector.replace(/:/g, '.')}` : key;
+    const entry = parsed.isValid ? getEntry(registry, lookup) : null;
+    if (!entry) return { key, value: '', found: false, diagnostic: !parsed.isValid ? 'invalidExpression' : parsed.selector ? 'invalidSelector' : 'missingField' };
+    return resolvedProjection(reference, key, readInputsValue(entry.inputs));
 }
 
-export function resolveFieldReferenceFromFormData(
-    reference: string,
-    formData: FormData,
-    registry?: FieldValueRegistry,
-): ResolveFieldValueResult {
+export function resolveFieldReferenceFromFormData(reference: string, formData: FormData, registry?: FieldValueRegistry): ResolveFieldValueResult {
     const parsed = parseFieldReference(reference);
     const key = parsed.key;
-
-    if (!key) {
-        return {
-            key,
-            value: parsed.defaultValue,
-            found: false,
-        };
-    }
-
-    const entry = registry ? getEntry(registry, key) : null;
-    const names = entry?.names?.length ? entry.names : [fieldKeyToInputName(key)];
-    const values = names.flatMap((name) => {
-        const collected = formData.getAll(name).map((value) => {
-            return String(value ?? '');
-        });
-
-        if (collected.length) {
-            return collected;
-        }
-
-        return formData.getAll(`${name}[]`).map((value) => {
-            return String(value ?? '');
-        });
-    }).filter((value) => value !== '');
-
-    if (!values.length) {
-        return {
-            key,
-            value: parsed.defaultValue,
-            found: false,
-        };
-    }
-
-    return {
-        key,
-        value: values.length > 1 ? values : values[0],
-        found: true,
-    };
+    const lookup = parsed.selector ? `${key}.${parsed.selector.replace(/:/g, '.')}` : key;
+    const entry = registry ? getEntry(registry, lookup) : null;
+    if (!parsed.isValid || (registry && !entry)) return { key, value: '', found: false, diagnostic: parsed.isValid ? 'missingField' : 'invalidExpression' };
+    const names = entry?.names?.length ? entry.names : [fieldKeyToInputName(lookup)];
+    const present = !!entry || names.some((name) => formData.has(name) || formData.has(`${name}[]`));
+    if (!present) return { key, value: '', found: false, diagnostic: 'missingField' };
+    const values = names.flatMap((name) => [...formData.getAll(name), ...formData.getAll(`${name}[]`)]).map((value) => String(value ?? ''));
+    return resolvedProjection(reference, key, values.length > 1 ? values : values[0] ?? '');
 }

package/src/js/utils/field-references.row-scope.ts

@@ -78,7 +78,7 @@ export function parseRowsExpression(expression: string, rowCount: number): numbe
                 [start, end] = [end, start];
             }
 
-            for (let row = start; row <= end; row++) {
+            for (let row = Math.max(1, start); row <= Math.min(rowCount, end); row++) {
                 if (row >= 1 && row <= rowCount) {
                     indices.push(row - 1);
                 }

package/src/js/utils/field-references.types.ts

@@ -28,4 +28,5 @@ export type ResolveFieldValueResult = {
     key: string;
     value: string | string[];
     found: boolean;
+    diagnostic?: string;
 };

package/src/js/utils/http.ts

@@ -1,11 +1,12 @@
-export type RequestJsonOptions = {
+import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
+export type RequestJsonOptions = BrowserRequestOptions & {
     method?: string;
     body?: BodyInit | null;
     headers?: Record<string, string>;
     signal?: AbortSignal;
 };
 
-async function request(url: string | URL, options: RequestJsonOptions = {}): Promise<Response> {
+export async function request(url: string | URL, options: RequestJsonOptions = {}): Promise<Response> {
     // Do not send `X-Requested-With` here: it is not CORS-safelisted, and Craft GraphQL CORS
     // often omits it from `Access-Control-Allow-Headers` (breaks localhost → ddev, starters, etc.).
     // `Accept` + JSON `Content-Type` are enough for Formie/Craft JSON endpoints.
@@ -16,7 +17,7 @@ async function request(url: string | URL, options: RequestJsonOptions = {}): Pro
     delete headers['X-Requested-With'];
     delete headers['x-requested-with'];
 
-    return fetch(String(url), {
+    return browserRequest(String(url), {
         method: options.method || 'GET',
         body: options.body ?? null,
         signal: options.signal,
@@ -26,8 +27,7 @@ async function request(url: string | URL, options: RequestJsonOptions = {}): Pro
         // `include` + `Access-Control-Allow-Origin: *` is invalid; many Craft GraphQL setups use `*`.
         // `same-origin` keeps cookies for same-host deployments and avoids credentialed cross-origin
         // fetches (e.g. Vite on localhost → ddev HTTPS) so wildcard CORS can succeed.
-        credentials: 'same-origin',
-    });
+    }, options);
 }
 
 export async function requestJson<T>(url: string | URL, options: RequestJsonOptions = {}): Promise<T> {

package/src/js/utils/request-profile.ts

@@ -0,0 +1,10 @@
+import type { BrowserRequestOptions } from '@verbb/formie-core';
+
+const formRequests = new WeakMap<HTMLFormElement, BrowserRequestOptions>();
+export function setFormBrowserRequestOptions(form: HTMLFormElement, options: BrowserRequestOptions): void {
+    formRequests.set(form, { ...options });
+    form.dataset.formieRequestProfile = options.profile ?? 'same-origin-browser';
+}
+export function getFormBrowserRequestOptions(form: HTMLFormElement | null | undefined): BrowserRequestOptions {
+    return form && formRequests.get(form) || { profile: form?.dataset.formieRequestProfile as BrowserRequestOptions['profile'] };
+}

package/src/js/utils/unload-warning.ts

@@ -1,15 +1,17 @@
+import { isFormCsrfFieldName } from '#utils/csrf';
+
 const DIRTY_TRACKING_IGNORED_FIELD_NAMES = new Set([
-    'CRAFT_CSRF_TOKEN',
     'action',
     'redirect',
     'requestToken',
+    'uploadCreateToken',
     'renderId',
     'formStartedAt',
     'submitAction',
     'pageId',
     'draftContextToken',
     'draftContext',
-    'continuationToken',
+    'progressId',
 ]);
 
 function serializeStableValue(value: unknown, seen: WeakSet<object>): string {
@@ -64,19 +66,25 @@ function stableSerialize(value: unknown): string {
     return serializeStableValue(value, new WeakSet<object>());
 }
 
-function shouldTrackFieldName(name: string): boolean {
+function shouldTrackFieldName(name: string, form: HTMLFormElement): boolean {
     if (!name) {
         return false;
     }
 
     const normalizedName = name.endsWith('[]') ? name.slice(0, -2) : name;
 
+    // Ignore CSRF regardless of custom csrfTokenName so token refresh
+    // does not mark the form dirty.
+    if (isFormCsrfFieldName(normalizedName, form)) {
+        return false;
+    }
+
     return !DIRTY_TRACKING_IGNORED_FIELD_NAMES.has(normalizedName);
 }
 
 function buildTrackedSnapshot(form: HTMLFormElement): string {
     const entries = Array.from(new FormData(form).entries()).filter(([name]) => {
-        return shouldTrackFieldName(String(name || ''));
+        return shouldTrackFieldName(String(name || ''), form);
     });
 
     return stableSerialize(entries);

package/src/js/validation/rules/email.ts

@@ -1,12 +1,10 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 
 const email: ValidationRuleDefinition = {
     rule: ({ input, getRule }) => {
-        if (!getRule('email') || !input.value || input.value.length < 1) {
-            return true;
-        }
-
-        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
+        const rule = getRule('email');
+        return !rule || validateBrowserValue(input.value, { ...(typeof rule === 'object' ? rule : {}), type: 'email' }) === null;
     },
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-validation-email-message')

package/src/js/validation/rules/match.ts

@@ -1,3 +1,4 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 import { getComparableInput, getLabelText } from '#validation/rules/shared';
 
@@ -9,7 +10,7 @@ const match: ValidationRuleDefinition = {
             return true;
         }
 
-        return sourceInput.value === ctx.input.value;
+        return validateBrowserValue(ctx.input.value, { type: 'match' }, { comparison: sourceInput.value }) === null;
     },
     message: (ctx) => {
         const sourceInput = getComparableInput(ctx);

package/src/js/validation/rules/minmax.ts

@@ -1,47 +1,8 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
-
+const bounds = (input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) => ({ type: 'number', min: input.hasAttribute('min') ? Number(input.getAttribute('min')) : null, max: input.hasAttribute('max') ? Number(input.getAttribute('max')) : null });
 const minmax: ValidationRuleDefinition = {
-    rule: ({ input }) => {
-        if (input.type !== 'number' || input.value.trim() === '') {
-            return true;
-        }
-
-        const value = parseFloat(input.value);
-        const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min') || '') : null;
-        const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max') || '') : null;
-
-        if (Number.isNaN(value)) {
-            return false;
-        }
-
-        if (min !== null && value < min) {
-            return false;
-        }
-
-        if (max !== null && value > max) {
-            return false;
-        }
-
-        return true;
-    },
-    message: ({ input, label, t }) => {
-        const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min') || '') : null;
-        const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max') || '') : null;
-
-        if (min !== null && max !== null) {
-            return t('{label} must be no less than {min}.', { label, min });
-        }
-
-        if (min !== null) {
-            return t('{label} must be no less than {min}.', { label, min });
-        }
-
-        if (max !== null) {
-            return t('{label} must be no greater than {max}.', { label, max });
-        }
-
-        return t('{label} is not a valid number.', { label });
-    },
+    rule: ({ input }) => input.type !== 'number' || validateBrowserValue(input.value, bounds(input)) === null,
+    message: ({ input, label, t }) => validateBrowserValue(input.value, bounds(input), { label }) ?? t('{label} is not a valid number.', { label }),
 };
-
 export default minmax;

package/src/js/validation/rules/number.ts

@@ -1,58 +1,14 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 
 const number: ValidationRuleDefinition = {
     rule: ({ input, getRule }) => {
         const rule = getRule('number');
-
-        if (!rule || !input.value || input.value.trim() === '') {
-            return true;
-        }
-
-        const value = parseFloat(input.value);
-
-        if (Number.isNaN(value)) {
-            return false;
-        }
-
-        if (rule !== true && typeof rule === 'object') {
-            const min = typeof rule.min === 'number' ? rule.min : null;
-            const max = typeof rule.max === 'number' ? rule.max : null;
-
-            if (min !== null && value < min) {
-                return false;
-            }
-
-            if (max !== null && value > max) {
-                return false;
-            }
-        }
-
-        return true;
+        return !rule || validateBrowserValue(input.value, { ...(typeof rule === 'object' ? rule : {}), type: 'number' }) === null;
     },
     message: ({ input, label, getRule, t }) => {
         const rule = getRule('number');
-        const min = rule !== true && rule && typeof rule === 'object' && typeof rule.min === 'number' ? rule.min : null;
-        const max = rule !== true && rule && typeof rule === 'object' && typeof rule.max === 'number' ? rule.max : null;
-
-        if (min !== null && max !== null) {
-            return input.getAttribute('data-formie-validation-number-min-message')
-                ?? t('{label} must be no less than {min}.', { label, min });
-        }
-
-        if (min !== null) {
-            return input.getAttribute('data-formie-validation-number-min-message')
-                ?? t('{label} must be no less than {min}.', { label, min });
-        }
-
-        if (max !== null) {
-            return input.getAttribute('data-formie-validation-number-max-message')
-                ?? t('{label} must be no greater than {max}.', { label, max });
-        }
-
-        return input.getAttribute('data-formie-validation-number-message')
-            ?? input.getAttribute('data-formie-pattern-number-message')
-            ?? input.getAttribute('data-pattern-number-message')
-            ?? t('{label} is not a valid number.', { label });
+        return validateBrowserValue(input.value, { ...(typeof rule === 'object' ? rule : {}), type: 'number' }, { label }) ?? t('{label} is not a valid number.', { label });
     },
 };
 

package/src/js/validation/rules/pattern.ts

@@ -1,15 +1,10 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 
 const pattern: ValidationRuleDefinition = {
     rule: ({ input, config }) => {
-        const rawPattern = input.getAttribute('pattern');
-        const patternToMatch = rawPattern ? new RegExp(`^(?:${rawPattern})$`) : config.patterns[input.type];
-
-        if (!patternToMatch || !input.value || input.value.length < 1) {
-            return true;
-        }
-
-        return patternToMatch.test(input.value);
+        const pattern = input.getAttribute('pattern') || config.patterns[input.type];
+        return validateBrowserValue(input.value, { type: 'pattern', pattern }) === null;
     },
     message: ({ input, label, t }) => {
         const messages = {

package/src/js/validation/rules/required.ts

@@ -1,3 +1,4 @@
+import { validateBrowserValue } from '@verbb/formie-core';
 import type { ValidationRuleDefinition } from '#validation/types';
 
 const required: ValidationRuleDefinition = {
@@ -18,7 +19,7 @@ const required: ValidationRuleDefinition = {
             return input instanceof HTMLInputElement ? input.checked : true;
         }
 
-        return input.value.trim() !== '';
+        return validateBrowserValue(input.value, { type: 'required' }) === null;
     },
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-required-message')