@verbb/formie-browser 4.0.8 → 4.0.9-next.15.g698e7c066059

package/dist/js/core/craft-forms.d.ts

@@ -0,0 +1,12 @@
+import { FormieValidator } from '#validation/validator';
+export type CraftFormsApp = {
+    get: (form: HTMLFormElement) => FormieValidator | null;
+    rescan: () => void;
+    destroy: () => void;
+};
+/** Enhance Craft action forms without taking ownership of their requests. */
+export declare function craftForms({ root, observe }?: {
+    root?: ParentNode;
+    observe?: boolean;
+}): CraftFormsApp;
+//# sourceMappingURL=craft-forms.d.ts.map

package/dist/js/core/craft-forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"craft-forms.d.ts","sourceRoot":"","sources":["../../../src/js/core/craft-forms.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAaxD,MAAM,MAAM,aAAa,GAAG;IACxB,GAAG,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,eAAe,GAAG,IAAI,CAAC;IACvD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAkEF,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,EAAE,IAAe,EAAE,OAAe,EAAE,GAAE;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CAChB,GAAG,aAAa,CAgDrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbb/formie-browser",
-  "version": "4.0.8",
+  "version": "4.0.9-next.15.g698e7c066059",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -84,7 +84,8 @@
     "./vite-dev": "./vite-dev.mjs"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "next"
   },
   "scripts": {
     "prebuild": "node ../../scripts/generate-browser-theme-state.mjs",
@@ -101,7 +102,7 @@
     "@placekit/autocomplete-js": "^2.2.1",
     "@uppy/core": "^5.2.0",
     "@uppy/xhr-upload": "^5.2.0",
-    "@verbb/formie-core": "4.0.8",
+    "@verbb/formie-core": "4.0.9-next.15.g698e7c066059",
     "expression-language": "^2.5.4",
     "flatpickr": "^4.6.13",
     "friendly-challenge": "^0.9.19",
@@ -110,5 +111,6 @@
     "pell": "^1.0.6",
     "signature_pad": "^5.1.3",
     "tom-select": "^2.6.1"
-  }
+  },
+  "gitHead": "698e7c06605950aac8c2c4f10b57666b325bb500"
 }

package/src/index.ts

@@ -3,6 +3,8 @@ export { hydrateFormieModules } from '#core/hydrate-modules';
 export { formie } from '#core/formie';
 export { ModuleRegistry, clientRenderedModuleRegistry } from '#modules/registry';
 export { FormieValidator } from '#validation/validator';
+export { craftForms } from '#core/craft-forms';
+export type { CraftFormsApp } from '#core/craft-forms';
 export { bindLegacyDomEventCompatibility } from '#compatibility/dom-adapter';
 export { bindLegacyValidatorCompatibility } from '#compatibility/validator-adapter';
 export {

package/src/js/core/craft-forms.ts

@@ -0,0 +1,139 @@
+import { getErrorAriaLivePreference } from '#core/error-aria-live';
+import { focusFirstValidationError } from '#core/validation-focus';
+import { registerThemeClassMap } from '#theme/theme-classes';
+import { FormieValidator } from '#validation/validator';
+import type { BrowserThemeClassMap } from '#contracts/theme';
+
+const SELECTOR = 'form[data-formie-craft-form]:not([data-formie-init="false"])';
+
+type CraftFormBinding = {
+    validator: FormieValidator;
+    owners: Set<symbol>;
+    destroy: () => void;
+};
+
+const bindings = new WeakMap<HTMLFormElement, CraftFormBinding>();
+
+export type CraftFormsApp = {
+    get: (form: HTMLFormElement) => FormieValidator | null;
+    rescan: () => void;
+    destroy: () => void;
+};
+
+function bindCraftForm(form: HTMLFormElement): CraftFormBinding {
+    const existing = bindings.get(form);
+    if (existing) return existing;
+
+    // Parse before changing native validation so malformed configuration keeps
+    // the ordinary Craft form usable. No submission modules or tokens are loaded.
+    const theme = JSON.parse(form.dataset.formieThemeClasses || '{}') as BrowserThemeClassMap;
+    const classes = registerThemeClassMap(form, theme);
+    const originalNoValidate = form.getAttribute('novalidate');
+    const validator = new FormieValidator(form, {
+        live: form.dataset.formieValidationOnFocus === 'true',
+        errorAriaLive: getErrorAriaLivePreference(form),
+        fieldContainerErrorClass: classes.fieldLayoutError || [],
+        inputErrorClass: classes.fieldControlError || [],
+        messagesClass: classes.fieldErrors || [],
+        messageClass: classes.fieldError || [],
+    });
+
+    const submit = (event: SubmitEvent): void => {
+        const submitter = event.submitter;
+        if (event.defaultPrevented || originalNoValidate !== null
+            || form.dataset.formieValidationOnSubmit === 'false'
+            || submitter?.hasAttribute('formnovalidate')) return;
+
+        if (validator.submit().length) {
+            event.preventDefault();
+            focusFirstValidationError(form);
+        }
+        // A valid form keeps the original submit event and submitter, including
+        // its name/value and overrides. Craft handles the response and redirects.
+    };
+    const reset = (event: Event): void => {
+        queueMicrotask(() => {
+            if (!event.defaultPrevented && bindings.has(form)) validator.resetLiveState();
+        });
+    };
+    form.addEventListener('submit', submit);
+    form.addEventListener('reset', reset);
+
+    const binding: CraftFormBinding = {
+        validator,
+        owners: new Set(),
+        destroy: () => {
+            form.removeEventListener('submit', submit);
+            form.removeEventListener('reset', reset);
+            validator.removeEventListeners();
+            validator.resetLiveState();
+            if (originalNoValidate === null) form.removeAttribute('novalidate');
+            else form.setAttribute('novalidate', originalNoValidate);
+            bindings.delete(form);
+        },
+    };
+    bindings.set(form, binding);
+    form.dispatchEvent(new CustomEvent('formie:validator:ready', {
+        bubbles: true,
+        detail: {
+            validator,
+            addValidator: validator.addValidator.bind(validator),
+            removeValidator: validator.removeValidator.bind(validator),
+        },
+    }));
+    return binding;
+}
+
+/** Enhance Craft action forms without taking ownership of their requests. */
+export function craftForms({ root = document, observe = false }: {
+    root?: ParentNode;
+    observe?: boolean;
+} = {}): CraftFormsApp {
+    const owner = Symbol('craftForms');
+    const mounted = new Map<HTMLFormElement, CraftFormBinding>();
+    let destroyed = false;
+
+    const release = (form: HTMLFormElement, binding: CraftFormBinding): void => {
+        binding.owners.delete(owner);
+        if (!binding.owners.size) binding.destroy();
+        mounted.delete(form);
+    };
+    const rescan = (): void => {
+        if (destroyed) return;
+        const forms = new Set(root.querySelectorAll<HTMLFormElement>(SELECTOR));
+        if (root instanceof HTMLFormElement && root.matches(SELECTOR)) forms.add(root);
+
+        for (const [form, binding] of mounted) {
+            if (!forms.has(form)) release(form, binding);
+        }
+        for (const form of forms) {
+            if (mounted.has(form)) continue;
+            try {
+                const binding = bindCraftForm(form);
+                binding.owners.add(owner);
+                mounted.set(form, binding);
+            } catch (error) {
+                // One malformed form must not prevent other forms from mounting.
+                console.warn('Formie could not initialize Craft form validation.', error);
+            }
+        }
+    };
+    rescan();
+    const observer = observe ? new MutationObserver(rescan) : null;
+    observer?.observe(root, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['data-formie-craft-form', 'data-formie-init'],
+    });
+
+    return {
+        get: (form) => mounted.get(form)?.validator || null,
+        rescan,
+        destroy: () => {
+            destroyed = true;
+            observer?.disconnect();
+            for (const [form, binding] of mounted) release(form, binding);
+        },
+    };
+}