@conform-to/react - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0-pre.0

context.d.ts

@@ -57,5 +57,5 @@ import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
-export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, FormValue>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
 export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
@@ -62,0 +62,0 @@ /**

context.js

@@ -69,5 +69,6 @@ 'use strict';
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var state = context.getState();
   return new Proxy({
@@ -112,3 +113,3 @@ id,
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
@@ -121,14 +122,19 @@ return Reflect.get(target, key, receiver);
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, name, key, 'name');
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            break;
+        }
       }
@@ -139,13 +145,14 @@ return Reflect.get(target, key, receiver);
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : dom.formatPaths([...dom.getPaths(prefix), key]);
-  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          return context.formId;
         case 'required':
@@ -165,7 +172,9 @@ case 'minLength':
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
@@ -178,6 +187,7 @@ }
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
@@ -216,7 +226,9 @@ case 'context':
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(dom.INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
+      } else {
         event.preventDefault();
-      } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
       }
@@ -223,0 +235,0 @@ },

context.mjs

 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, formatPaths, getPaths, unstable_createFormContext, isPrefix } from '@conform-to/dom';
+import { STATE, formatPaths, getPaths, unstable_createFormContext, INTENT, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
@@ -65,5 +65,6 @@ import { jsx } from 'react/jsx-runtime';
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var state = context.getState();
   return new Proxy({
@@ -108,3 +109,3 @@ id,
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
@@ -117,14 +118,19 @@ return Reflect.get(target, key, receiver);
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, name, key, 'name');
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            break;
+        }
       }
@@ -135,13 +141,14 @@ return Reflect.get(target, key, receiver);
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : formatPaths([...getPaths(prefix), key]);
-  var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          return context.formId;
         case 'required':
@@ -161,7 +168,9 @@ case 'minLength':
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
@@ -174,6 +183,7 @@ }
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
@@ -212,7 +222,9 @@ case 'context':
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
+      } else {
         event.preventDefault();
-      } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
       }
@@ -219,0 +231,0 @@ },

hooks.d.ts

@@ -26,3 +26,3 @@ import { type FormId, type FieldName } from '@conform-to/dom';
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId?: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
@@ -29,0 +29,0 @@ }): FormMetadata<Schema, FormError>;

hooks.js

@@ -43,2 +43,3 @@ 'use strict';
   useSafeLayoutEffect(() => {
+    var disconnect = context$1.observe();
     document.addEventListener('input', context$1.onInput);
@@ -48,2 +49,3 @@ document.addEventListener('focusout', context$1.onBlur);
     return () => {
+      disconnect();
       document.removeEventListener('input', context$1.onInput);
@@ -60,5 +62,5 @@ document.removeEventListener('focusout', context$1.onBlur);
   var subjectRef = context.useSubjectRef();
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
@@ -70,5 +72,5 @@ }
   var context$1 = context.useFormContext(formId);
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);
+  return context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
 }
@@ -79,5 +81,5 @@ function useField(name) {
   var context$1 = context.useFormContext(options.formId);
-  var state = context.useFormState(context$1, subjectRef);
-  var field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);
-  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
+  var field = context.getFieldMetadata(context$1, subjectRef, stateSnapshot, name);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, false);
   return [field, form];
@@ -84,0 +86,0 @@ }

hooks.mjs

@@ -39,2 +39,3 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
   useSafeLayoutEffect(() => {
+    var disconnect = context.observe();
     document.addEventListener('input', context.onInput);
@@ -44,2 +45,3 @@ document.addEventListener('focusout', context.onBlur);
     return () => {
+      disconnect();
       document.removeEventListener('input', context.onInput);
@@ -56,5 +58,5 @@ document.removeEventListener('focusout', context.onBlur);
   var subjectRef = useSubjectRef();
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = getFormMetadata(formId, state, subjectRef, context, noValidate);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
@@ -66,5 +68,5 @@ }
   var context = useFormContext(formId);
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return getFormMetadata(context.formId, state, subjectRef, context, noValidate);
+  return getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 }
@@ -75,5 +77,5 @@ function useField(name) {
   var context = useFormContext(options.formId);
-  var state = useFormState(context, subjectRef);
-  var field = getFieldMetadata(context.formId, state, subjectRef, name);
-  var form = getFormMetadata(context.formId, state, subjectRef, context, false);
+  var stateSnapshot = useFormState(context, subjectRef);
+  var field = getFieldMetadata(context, subjectRef, stateSnapshot, name);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, false);
   return [field, form];
@@ -80,0 +82,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.6",
+	"version": "1.1.0-pre.0",
 	"main": "index.js",
@@ -34,3 +34,3 @@ "module": "index.mjs",
 	"dependencies": {
-		"@conform-to/dom": "1.0.6"
+		"@conform-to/dom": "1.1.0-pre.0"
 	},
@@ -37,0 +37,0 @@ "devDependencies": {

README

@@ -11,3 +11,3 @@
 
-Version 1.0.6 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0-pre.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
@@ -14,0 +14,0 @@ A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90178

1.68%

Lines of code

2136

1.33%

Worsened metrics

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @conform-to/dom@1.1.0-pre.0
  (transitive)

• - Removed

  @conform-to/dom@1.0.6
  (transitive)

• Updated

  @conform-to/dom@1.1.0-pre.0