WIP: Fluent Validation Plugin

[parisholley]

Potential implementation direction as a solution to #94 and maybe introduce a new Fluent API abstraction.

Problem:

• Need a way to support running validation in child components yet maintaining isValid() state in a parent component. Example, multiple tabs with a "error badge" if any of the state displayed within the tab is invalid (and doing so in a way that doesn't cause a full re-render).
• Need a way to validate data within an array whose length may change at any time.

Proposed API syntax:

    ValidationAttach(state, (validator) => {
      // conditional validation
      const enabled = validator.notifications.when(n => n.enabled.get());
      enabled.message.required();

      // union type support (graphql example), conditional reuse
      enabled.whenType('__typename', 'NotificationConfigEmail').subject.required();
      enabled.whenType('__typename', 'NotificationConfigSlack').channel.required();

      // nested array path support
      validator.roles.name.validate(name => name && name.length > 0);

      // inject any other parts of the state into conditionals
      validator.properties.conditions.when((c, properties) => {
        if (!c.propertyId.get()) {
          return false;
        }

        return properties.some(p => p.id.get() === c.propertyId.get() && p.fieldType.get() === FieldType.SELECT);
      }, validator.properties).valueId.required();
    });

    // validate entire state
    Validation(state).valid();
    
    // validate portion of state (eg: navigation/tabs)
    Validation(state.roles).valid();

    // validation multiple portions (eg: multiple fields on same tab)
    Validation(state).valid(['roles','notifications']);

    // downstream component can check if it is required or valid
    const validation = Validation(state.field);

    const form = <Input error={!validation.valid()) value={state.field.get()} required={validation.required()} />

[codecov-commenter]

Codecov Report

Merging #97 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master      #97   +/-   ##
=======================================
  Coverage   90.83%   90.83%           
=======================================
  Files           1        1           
  Lines         480      480           
  Branches      132      132           
=======================================
  Hits          436      436           
  Misses         44       44           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c1585a1...862d582. Read the comment docs.

[parisholley]

i made a attempt at extracting the fluent'ness but ran into some typing issues.. though it may be possible with right magic. also realizing as i go that my scope is increasing a bit (eg: marking things as required) which start to feel more like a form plugin that pure validation.

new api addition:

  Validation(state.properties).conditions.when(({ propertyId }, properties) => {
    if (!propertyId) {
      return false;
    }

    const property = properties.find(p => p.id === propertyId);

    return property.fieldType === FieldType.SELECT;
  }).valueId.required();

the when method comes in handy when dealing with form state with cross dependencies. i'm building a "dynamic form ui" which allows a user to optionally show a "property" based on either the existence of another property (eg: checkbox) or based on the value chosen for that property (eg: select box). to keep the UI smooth, i need to conditionally apply validation depending on if the property they are referencing is of a certain type, otherwise, ignore.

[avkonst]

I will try to put in code the other idea, which does not require a proxy. We may come up with 2 new validation plugins :) The one old can remain as deprecated. But give me some time for it.

[parisholley]

in retrospect, i don't remember why i actually needed to downgrade anymore.. any validation callbacks should be listening to the state via get() incase of changes... took it out and still works fine

[avkonst]

"any validation callbacks should be listening to the state via get() incase of changes" - exactly - validation functions should read the state and leave traces of what they touched, so hookstate can detect when and what should be rerendered.

[avkonst]

this relationship may cause large parent object being hold in RAM...

[parisholley]

NestedState is transient within the scope of a valid call.. this exists because I ran into issues reusing the State (at root) and the re-render events firing off properly. potentially, this may not be needed the reverse tree walk can be eliminated in conditionalValid, by just doing a lookup each time, but will need to benchmark the performance hit.

[avkonst]

Why only string? where are numbers, booleans, undefined and null?

[parisholley]

why undefined/null?

[avkonst]

this is getting close to what I was thinking about. It would be still possible to achieve the same without proxy, but maybe it is the other story.

As we discussed, you need to move your code to the Validation2 plugin, because it breaks compatibility with the previous one.

Also when you are ready. Add the plugin to docs and a code sample like for other plugins.

[parisholley]

yeah, i'll create a new PR once i'm closer to final state with a new plugin folder.

w/r/t object config vs proxy... take a look at the example validation i have in PR description, in particular the conditional behavior. i feel like trying to replicate that as a POJO would be incredibly verbose.

at least this latest version, the cost of the proxy is only in one place (on attach), so don't imagine there is perf loss going a different route.