Details (#69)

* remove isFormState

* Simplify validation logic

* typo

* specify exports in src/index.ts

* rename bindInput in docs react-bindings

* remove bindInput

* type details optimization

* remove useless path mapping

* Optimize test cases

* remove bindInput in docs

* field -> child state

* clear validation info when ending validation

Author: nighca

dumi/.umirc.ts

@@ -5,10 +5,8 @@ const repo = 'formstate-x'
 
 export default defineConfig({
   title: repo,
-  favicon:
-    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
-  logo:
-    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
+  favicon: 'TODO',
+  logo: 'TODO',
   outputPath: `dist/${repo}`,
   mode: 'site',
   hash: true,
@@ -23,8 +21,7 @@ export default defineConfig({
     },
   ],
   alias: {
-    'formstate-x': path.join(__dirname, 'src'),
-    'formstate-x/bindings/react': path.join(__dirname, 'src/bindings/react')
+    'formstate-x': path.join(__dirname, 'src')
   },
   mfsu: {}
   // more config: https://d.umijs.org/config

dumi/docs/guide/advanced/index.md

@@ -63,7 +63,7 @@ As we learnt from section [Reactive Validation](/guide/validation#reactive-valid
 
 ### Transformed State
 
-When we create input components based on UI inputs, these input components always provide their own business semantics which differs from the semantics of the original UI inputs. Which means, sometimes there's a gap between the business-value and the view-value for one component.
+When we create input components based on UI inputs, these input components always provide their own business semantics which differ from the semantics of the original UI inputs. Which means, sometimes there's a gap between the business-value and the view-value for one component.
 
 Let's take a component named `NumberInput` as example.
 
@@ -77,7 +77,7 @@ A typical number input is made with a normal text input to collect user input. S
 const state = new FieldState('')
 ```
 
-However, as implementation details, the `string`-type value, is not the value we would like the consumer of `NumberInput` to access. The component should behave as its name (`NumberInput`) suggests, collecting `number`-type value from user.
+However, as implementation details, the `string`-type value, is not the value we would like the consumer of `NumberInput` to access. The component should behave as its name (`NumberInput`) suggests, to collect `number`-type value from user.
 
 We need to transform the `string`-type value to number before we export it out. That's when `TransformedState` rescues:
 
@@ -101,7 +101,7 @@ In section [Conditional Validation](/guide/validation#conditional-validation), w
 
 However, sometimes we may add more than one validators for one state. It will not be convenient to add the `if` logic in each validator.
 
-Sometimes we face complex states, which composed with many child states. It's not possible to change child states' validators' logic for the parent state. `formstate-x` provides a method `disableWhen` to help with such cases.
+Sometimes we face complex states, which are composed with child states. It's not proper to change validators' logic of child states when writing logic of parent states. `formstate-x` provides a method `disableWhen` to help with such cases.
 
 Here is a demo:
 

dumi/docs/guide/basic/index.md

@@ -28,4 +28,4 @@ As formstate-x is based on MobX, components who read state from formstate-x need
 
 For convenience, we defined the field state (variable `state`) outside the component body. Actually, like any other MobX observable state, it's ok to be hold anywhere you like.
 
-Now let's try some really cool thing. We will see how formstate-x provides powerful validating ability in section [Validation](/guide/validation).
+Now let's try some real rocking thing. We will see how formstate-x provides powerful validating ability in section [Validation](/guide/validation).

dumi/docs/guide/validation/async-validation.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 import { FieldState } from 'formstate-x'
-import { bindInputWithChangeEvent } from '../../react-bindings'
+import { bindInput } from '../../react-bindings'
 
 function validateName(v: string) {
   return new Promise<string | false>(resolve => {
@@ -19,7 +19,7 @@ export default observer(function Demo() {
     <>
       <label>
         Name:
-        <input type="text" {...bindInputWithChangeEvent(state)} />
+        <input type="text" {...bindInput(state)} />
       </label>
       {state.validating && <span style={tipStyle}>validating...</span>}
       {state.validated && state.hasError && <span style={errorTipStyle}>{state.error}</span>}

dumi/docs/guide/validation/conditional-validation.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observable } from 'mobx'
 import { observer } from 'mobx-react'
 import { FieldState } from 'formstate-x'
-import { bindInputWithChangeEvent } from '../../react-bindings'
+import { bindInput } from '../../react-bindings'
 
 const validationCtrl = observable({
   enabled: true,
@@ -27,7 +27,7 @@ export default observer(function Demo() {
       <p>
         <label>
           Name (5 characters at most):
-          <input type="text" {...bindInputWithChangeEvent(state)} />
+          <input type="text" {...bindInput(state)} />
         </label>
         {state.hasError && <span style={errorTipStyle}>{state.error}</span>}
       </p>

dumi/docs/guide/validation/index.md

@@ -48,7 +48,7 @@ async function validateName(v: string) {
     return data.valid ? undefined : data.message
 } catch (e) {
     // If some exception (such as network error) occurs, this `catch` prevents formstate-x to throw.
-    // The return value, instead, tells formstate-x to treat the value as invalid (with message "Validate failed")
+    // The return value, instead, tells formstate-x to treat the value invalid (with message "Validate failed")
     return 'Validate failed'
   }
 }

dumi/docs/guide/validation/multiple-validator.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 import { FieldState } from 'formstate-x'
-import { bindInputWithChangeEvent } from '../../react-bindings'
+import { bindInput } from '../../react-bindings'
 
 const validateNotEmpty = (v: string) => v.trim() === '' && 'Empty'
 const validateLength = (v: string) => v.length > 5 && 'Too long'
@@ -16,7 +16,7 @@ export default observer(function Demo() {
     <>
       <label>
         Name:
-        <input type="text" {...bindInputWithChangeEvent(state)} />
+        <input type="text" {...bindInput(state)} />
       </label>
       {state.hasError && <span style={errorTipStyle}>{state.error}</span>}
     </>

dumi/docs/guide/validation/reactive-validation.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observable } from 'mobx'
 import { observer } from 'mobx-react'
 import { FieldState } from 'formstate-x'
-import { bindInputWithChangeEvent } from '../../react-bindings'
+import { bindInput } from '../../react-bindings'
 
 const someObservableStore = observable({
   strict: true,
@@ -34,7 +34,7 @@ export default observer(function Demo() {
       <p>
         <label>
           Name:
-          <input type="text" {...bindInputWithChangeEvent(state)} />
+          <input type="text" {...bindInput(state)} />
         </label>
         {state.hasError && <span style={errorTipStyle}>{state.error}</span>}
       </p>

dumi/docs/guide/validation/validation.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 import { FieldState } from 'formstate-x'
-import { bindInputWithChangeEvent } from '../../react-bindings'
+import { bindInput } from '../../react-bindings'
 
 function validateName(v: string) {
   return v.length > 5 && 'Too long'
@@ -14,7 +14,7 @@ export default observer(function Demo() {
     <>
       <label>
         Name (5 characters at most):
-        <input type="text" {...bindInputWithChangeEvent(state)} />
+        <input type="text" {...bindInput(state)} />
       </label>
       {state.hasError && <span style={errorTipStyle}>{state.error}</span>}
     </>

dumi/docs/index.md

@@ -29,7 +29,7 @@ yarn add formstate-x
 ### Usage
 
 ```javascript
-import { FieldState, FormState, bindInput } from 'formstate-x'
+import { FieldState, FormState } from 'formstate-x'
 
 const form = new FormState({
   foo: new FieldState(''),
@@ -50,16 +50,16 @@ async function handleSubmit(e) {
 
 // when render (with react)
 <form onSubmit={handleSubmit}>
-  <FooInput {...bindInput(form.$.foo)}>
-  <BarInput {...bindInput(form.$.bar)}>
+  <FooInput value={form.$.foo.value} onChange={v => form.$.foo.onChange(v)}>
+  <BarInput value={form.$.bar.value} onChange={v => form.$.bar.onChange(v)}>
 </form>
 ```
 
 ### Comparison with [formstate](https://github.com/formstate/formstate)
 
 formstate-x provides similar APIs with [formstate](https://github.com/formstate/formstate) because we like their simplicity. formstate has a very helpful document which we will recommend you to read. But there are some points of formstate that brought inconvenience to our development, and we got disagreement with formstate in related problems. That's why we build formstate-x:
 
-1. formstate uses MobX but not embracing it, which constrained its ability (related issue: [#11](https://github.com/formstate/formstate/issues/11)). formstate-x leverages MobX's power substantially, so we can easily track all dependencies when do validation, including dynamic values or dynamic valdiators. That's also why realizing cross-field validation is extremly easy with formstat-x.
+1. formstate uses MobX but not embracing it, which constrained its ability (related issue: [#11](https://github.com/formstate/formstate/issues/11)). formstate-x leverages MobX's power substantially, so we can easily track all dependencies when do validation, including dynamic values or dynamic valdiators. That's also why realizing cross-state validation is extremly easy with formstat-x.
 2. formstate mixes validated, safe value with readable value (`$`), in some cases it's not suitable to use either `$` or `value`. formstate-x provides `value` as readable value, `$` as validated and safe value and `_value` for UI binding only.
 3. formstate doesn't provide a good way to extract value from `FormState` ( related issues: [#25](https://github.com/formstate/formstate/issues/25) [#28](https://github.com/formstate/formstate/issues/28)). formstate-x provides `value` as `FormState`'s serialized value, with full type info.
 4. formstate dosen't provide a good way to disable part of a `FormState`. `FormStateLazy` is like a hack and very different concept from `FieldState` & `FormState`. formstate-x provides `disableWhen` to let you realize conditional validation with a single method call.