@conform-to/dom - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0-pre.0

form.d.ts

@@ -36,2 +36,3 @@ import { getFormAction, getFormEncType, getFormMethod } from './dom';
 export type FormMeta<FormError> = {
+    isValueUpdated: boolean;
     submissionStatus?: 'error' | 'success';
@@ -46,3 +47,3 @@ defaultValue: Record<string, unknown>;
 };
-export type FormState<FormError> = FormMeta<FormError> & {
+export type FormState<FormError> = Omit<FormMeta<FormError>, 'isValueUpdated'> & {
     valid: Record<string, boolean>;
@@ -124,2 +125,3 @@ dirty: Record<string, boolean>;
     onUpdate(options: Partial<FormOptions<Schema, FormError, FormValue>>): void;
+    observe(): () => void;
     subscribe(callback: () => void, getSubject?: () => SubscriptionSubject | undefined): () => void;
@@ -126,0 +128,0 @@ getState(): FormState<FormError>;

form.js

@@ -17,2 +17,3 @@ 'use strict';
   var result = {
+    isValueUpdated: false,
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
@@ -41,3 +42,3 @@ defaultValue,
       for (var i = 0; i < value.length; i++) {
-        result[formdata.formatPaths([...formdata.getPaths(key), i])] = util.generateId();
+        result[formdata.formatName(key, i)] = util.generateId();
       }
@@ -71,6 +72,6 @@ }
         var {
-          name: _name2,
           validated,
           value
         } = intent.payload;
+        var _name2 = formdata.formatName(intent.payload.name, intent.payload.index);
         if (typeof value !== 'undefined') {
@@ -104,4 +105,3 @@ updateValue(meta, _name2 !== null && _name2 !== void 0 ? _name2 : '', submission.serialize(value));
       {
-        var _intent$payload$name;
-        var _name3 = (_intent$payload$name = intent.payload.name) !== null && _intent$payload$name !== void 0 ? _intent$payload$name : '';
+        var _name3 = formdata.formatName(intent.payload.name, intent.payload.index);
         var _value = formdata.getValue(meta.defaultValue, _name3);
@@ -364,4 +364,7 @@ updateValue(meta, _name3, _value);
     });
-    if (submission.status !== 'success' && submission.error !== null) {
-      report(submission.reply());
+    if (submission.status === 'success' || submission.error !== null) {
+      var _result2 = submission.reply();
+      report(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _result2), {}, {
+        status: _result2.status !== 'success' ? _result2.status : undefined
+      }));
     }
@@ -386,4 +389,12 @@ return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
     var validated = meta.validated[element.name];
-    return validated ? shouldRevalidate === eventName : shouldValidate === eventName;
+    return validated ? shouldRevalidate === eventName && (eventName === 'onInput' || meta.isValueUpdated) : shouldValidate === eventName;
   }
+  function updateFormValue(form) {
+    var formData = new FormData(form);
+    var result = submission.getSubmissionContext(formData);
+    updateFormMeta(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
+      isValueUpdated: true,
+      value: result.payload
+    }));
+  }
   function onInput(event) {
@@ -395,7 +406,3 @@ var element = resolveTarget(event);
     if (event.defaultPrevented || !willValidate(element, 'onInput')) {
-      var formData = new FormData(element.form);
-      var result = submission.getSubmissionContext(formData);
-      updateFormMeta(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
-        value: result.payload
-      }));
+      updateFormValue(element.form);
     } else {
@@ -445,2 +452,3 @@ dispatch({
     var update = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, meta), {}, {
+      isValueUpdated: false,
       submissionStatus: result.status,
@@ -469,4 +477,3 @@ value: result.initialValue,
     if (latestOptions.formId !== currentFormId) {
-      var _getFormElement;
-      (_getFormElement = getFormElement()) === null || _getFormElement === void 0 || _getFormElement.reset();
+      updateFormMeta(createFormMeta(latestOptions, true));
     } else if (options.lastResult && options.lastResult !== currentResult) {
@@ -527,2 +534,29 @@ report(options.lastResult);
   }
+  function observe() {
+    var observer = new MutationObserver(mutations => {
+      var form = getFormElement();
+      if (!form) {
+        return;
+      }
+      for (var mutation of mutations) {
+        var nodes = mutation.type === 'childList' ? [...mutation.addedNodes, ...mutation.removedNodes] : [mutation.target];
+        for (var node of nodes) {
+          var element = dom.isFieldElement(node) ? node : node instanceof HTMLElement ? node.querySelector('input,select,textarea') : null;
+          if ((element === null || element === void 0 ? void 0 : element.form) === form) {
+            updateFormValue(form);
+            return;
+          }
+        }
+      }
+    });
+    observer.observe(document, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ['form', 'name']
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }
   return {
@@ -545,3 +579,4 @@ get formId() {
     getState,
-    getSerializedState
+    getSerializedState,
+    observe
   };
@@ -548,0 +583,0 @@ }

formdata.d.ts

@@ -16,3 +16,3 @@ /**
  */
-export declare function getPaths(name: string): Array<string | number>;
+export declare function getPaths(name: string | undefined): Array<string | number>;
 /**
@@ -27,2 +27,6 @@ * Returns a formatted name from the paths based on the JS syntax convention
 /**
+ * Format based on a prefix and a path
+ */
+export declare function formatName(prefix: string | undefined, path?: string | number): string;
+/**
  * Check if a name match the prefix paths
@@ -29,0 +33,0 @@ */

formdata.js

@@ -69,2 +69,9 @@ 'use strict';
 /**
+ * Format based on a prefix and a path
+ */
+function formatName(prefix, path) {
+  return typeof path !== 'undefined' ? formatPaths([...getPaths(prefix), path]) : prefix !== null && prefix !== void 0 ? prefix : '';
+}
+
+/**
  * Check if a name match the prefix paths
@@ -219,2 +226,3 @@ */
 exports.flatten = flatten;
+exports.formatName = formatName;
 exports.formatPaths = formatPaths;
@@ -221,0 +229,0 @@ exports.getFormData = getFormData;

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.6",
+	"version": "1.1.0-pre.0",
 	"main": "index.js",
@@ -9,0 +9,0 @@ "module": "index.mjs",

submission.d.ts

@@ -81,2 +81,6 @@ import type { DefaultValue, FieldName, FormValue } from './form';
         name?: FieldName<Schema>;
+        index?: never;
+    } | {
+        name: FieldName<Schema>;
+        index: Schema extends Array<unknown> ? number : never;
     };
@@ -88,4 +92,10 @@ };
         name?: FieldName<Schema>;
+        index?: never;
         value?: NonNullable<DefaultValue<Schema>>;
         validated?: boolean;
+    } | {
+        name: FieldName<Schema>;
+        index: Schema extends Array<unknown> ? number : never;
+        value?: NonNullable<DefaultValue<Schema extends Array<infer Item> ? Item : unknown>>;
+        validated?: boolean;
     };
@@ -92,0 +102,0 @@ };

submission.js

@@ -57,5 +57,3 @@ 'use strict';
         {
-          var {
-            name
-          } = intent.payload;
+          var name = formdata.formatName(intent.payload.name, intent.payload.index);
           var _value = serialize(intent.payload.value);
@@ -74,5 +72,3 @@ if (typeof _value !== 'undefined') {
         {
-          var {
-            name: _name
-          } = intent.payload;
+          var _name = formdata.formatName(intent.payload.name, intent.payload.index);
           if (_name) {
@@ -79,0 +75,0 @@ formdata.setValue(context.payload, _name, () => undefined);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108555

increased by3.31%

Lines of code

2866

increased by3.28%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes