effector-final-form - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.js

@@ -82,3 +82,3 @@ import { createEffect as u, is as H, createEvent as g, createStore as h, sample as R } from "effector";
     });
-    const k = j([...c, "value"], t.getFieldState(s)), V = h(k);
+    const k = j([...c, "value"], t.getFieldState(s)), V = h({ ...k, name: s });
     R({
@@ -85,0 +85,0 @@ clock: b.filterMap(({ blur: m, change: I, focus: M, ...y }) => y.name === s ? y : void 0),

package.json

 {
   "name": "effector-final-form",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "☄️ Effector bindings for Final Form",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -29,115 +29,58 @@ # effector-final-form
 
-## API
-
-[Documentation link](https://binjospookie.github.io/effector-final-form/docs/api)
-
-## Differences from Final Form
-
-[Documentation link](https://binjospookie.github.io/effector-final-form/docs/differences)
-
-## Limitations
-
-[Documentation link](https://binjospookie.github.io/effector-final-form/docs/limitations)
-
 ## Base example
 
 ```ts
-import { vi } from 'vitest';
-import waitForExpect from 'wait-for-expect';
+import { createForm } from 'effector-final-form';
 
-// import { createForm } from 'effector-final-form';
-import { createForm } from '../../index';
+const form = createForm<{ login: string; password: string }>({
+  onSubmit: console.log,
+  subscribeOn: ['submitSucceeded', 'submitting'],
+});
 
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const loginField = form.api.registerField<string>({
+  name: 'login',
+  subscribeOn: ['value', 'error', 'validating'],
+  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect login'),
+});
 
-describe('example', () => {
-  test('', async () => {
-    const { $formState, api } = createForm<{ firstName: string }>({
-      onSubmit: async (f) => {
-        await sleep(1000);
+loginField.$state.watch(console.log);
+// {value: undefined, error: undefined, validating: true}
+// {name: "login", error: "Incorrect login", value: undefined, validating: false}
 
-        return f.firstName === 'Incorrect' ? { firstName: 'Submit Error' } : undefined;
-      },
-      subscribeOn: ['values', 'errors', 'submitting', 'submitSucceeded', 'submitFailed', 'submitErrors'],
-    });
+const passwordField = form.api.registerField<string>({
+  name: 'password',
+  subscribeOn: ['value', 'error', 'validating'],
+  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect password'),
+});
 
-    const field = api.registerField({
-      name: 'firstName',
-      subscribeOn: ['value', 'error', 'initial'],
-      initialValue: '',
-      validate: (v) => (v === '' ? 'Can not be empty' : undefined),
-    });
+passwordField.$state.watch(console.log);
+// {value: undefined, error: undefined, validating: true}
+// {name: "password", error: "Incorrect password", value: undefined, validating: false}
 
-    field.api.changeFx('');
+loginField.api.changeFx('John');
+// {name: "login", error: undefined, value: "John", validating: true}
+// {name: "login", error: undefined, value: "John", validating: false}
+passwordField.api.changeFx('secret');
+// {name: "password", error: undefined, value: "secret", validating: true}
+// {name: "password", error: undefined, value: "secret", validating: false}
+form.api.submitFx();
+// {login: "John", password: "secret"}
+```
 
-    await waitForExpect(() => {
-      expect(field.$state.getState().error).toBe('Can not be empty');
-    });
-    expect(field.$state.getState().initial).toBe('');
-    expect(field.$state.getState().value).toBe('');
+[Try it](https://stackblitz.com/edit/typescript-5fydjc?file=index.ts)
 
-    expect($formState.getState().errors).toStrictEqual({ firstName: 'Can not be empty' });
-    expect($formState.getState().values).toStrictEqual({ firstName: '' });
-    expect($formState.getState().submitting).toBe(false);
-    expect($formState.getState().submitSucceeded).toBe(false);
-    expect($formState.getState().submitFailed).toBe(false);
-    expect($formState.getState().submitErrors).toBe(null);
+## API
 
-    {
-      await field.api.changeFx('Incorrect');
+[Documentation link](https://binjospookie.github.io/effector-final-form/docs/api)
 
-      await waitForExpect(() => {
-        expect(field.$state.getState().error).toBe(undefined);
-        expect(field.$state.getState().value).toBe('Incorrect');
-        expect($formState.getState().errors).toStrictEqual({});
-      });
-    }
+## Differences from Final Form
 
-    {
-      const submitPromise = api.submitFx();
+[Documentation link](https://binjospookie.github.io/effector-final-form/docs/differences)
 
-      expect($formState.getState().submitting).toBe(true);
+## Limitations
 
-      vi.useFakeTimers();
-      vi.runOnlyPendingTimers();
-      await submitPromise;
-      vi.useRealTimers();
+[Documentation link](https://binjospookie.github.io/effector-final-form/docs/limitations)
 
-      expect($formState.getState().submitting).toBe(false);
-      expect($formState.getState().submitSucceeded).toBe(false);
-      expect($formState.getState().submitFailed).toBe(true);
-      expect($formState.getState().submitErrors).toStrictEqual({ firstName: 'Submit Error' });
-    }
-
-    {
-      await field.api.changeFx('John');
-
-      expect(field.$state.getState().error).toBe(undefined);
-      expect(field.$state.getState().value).toBe('John');
-      expect($formState.getState().errors).toStrictEqual({});
-
-      const submitPromise = api.submitFx();
-
-      await waitForExpect(() => {
-        expect($formState.getState().submitting).toBe(true);
-      });
-
-      vi.useFakeTimers();
-      vi.runOnlyPendingTimers();
-      await submitPromise;
-      vi.useRealTimers();
-
-      await waitForExpect(() => {
-        expect($formState.getState().submitting).toBe(false);
-      });
-      expect($formState.getState().submitSucceeded).toBe(true);
-      expect($formState.getState().submitFailed).toBe(false);
-      expect($formState.getState().submitErrors).toBe(null);
-    }
-  });
-});
-```
-
 ## More examples
 
 [Documentation link](https://binjospookie.github.io/effector-final-form/docs/examples)

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

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

Worsened metrics

Total package byte prevSize

21458

decreased by-7.12%

Number of lines in readme file

86

decreased by-39.86%

No dependency changes