Formless v0.3.0 released!

thomashoneyman · October 22, 2018, 4:29pm

Formless 0.3.0 has been released at long last! This release incorporated tons of suggestions and feedback from @dariooddenino , @davez , @crcornwell, and others. Thanks to everyone who opened issues in the repo or reached out to me with suggestions in Slack.

This release introduces some breaking changes to the library, so the 0.3.0 release notes include a migration guide to help anyone migrating code from 0.2.0. The full migration guide is quite detailed, so here’s a shorter summary:

A short migration guide

Taking these steps should cover the changes you need to update to Formless 0.3.0.

Remove the submitter function from your component input and move its behavior to where you handle the Submitted message.
Remove the output type from all component type signatures.
Rename the input field in the component input to initialInputs.
Rename the replaceInputs / ReplaceInputs queries to initialize / Initialize.
Rename any modify* queries to set* instead, and if you had any places in your code you wish you could have provided a modification function, use modify* now.

For the longer, more detailed migration guide, see the 0.3.0 release notes.

What’s New

This version of the library adds some new features along with lots of cleanup of the internals:

You used to only be able to set the value of form fields with modify. Now, modify supports an update function and the new set query lets you set a field’s value. This is much nicer for things like toggling a boolean field. Plus, if you need to force validation on a non-dirty field, you can now use modifyValidate with identity as your modifying function.
If you wanted to update all values in your form, you used to have to call modify on every field. Now, there are modifyAll and setAll queries alongside the old validateAll and resetAll queries. Provide a record of input values or input functions and apply them to the full form.
If you had a form with no validation, you previously had to provide a record of validators which did nothing. Now, you can provide the noValidation function as your validators input. (Thanks, @dariooddenino!)
I’ve figured out how to support action AND request queries in renderless components. Now, send and send' work with the full flexibility of Halogen.query and Halogen.query’. This will be added to purescript-halogen-renderless soon, too.
Every helper query is now extracted into the Formless.Query module for easy browsing / documentation.

Next Steps

This is a breaking change for users of Formless 0.2.0 and I understand that can cause some headaches even if PureScript is renowned for its ease of refactoring. I have updated the readme and examples and have provided the migration guide to alleviate as much of this as I can, but it’s possible I’ve missed things. Anyone migrating from 0.2.0 to 0.3.0, please feel free to open issues or message me directly if you need any help migrating.

As usual, I’d love to continue hearing feedback on the library from the community. If things seem pretty stable over the next few weeks, I’ll most likely add a few tutorials and get Formless to a 1.0 release.

Thanks!

dariooddenino · October 22, 2018, 8:36pm

Great job, I will update next week hoping everything goes smoothly

dariooddenino · October 23, 2018, 11:50am

As a small addition to the migration guide: I had to replace InputField with InputFunction in my helper functions’ constraints

thomashoneyman · October 23, 2018, 4:49pm

Ah! That’s right. In addition, I did forget those setValidateAll and modifyValidateAll helpers, and I even managed to force wrapping those inputs where the other query helpers do not require it. This PR remedies those issues but unfortunately would be a breaking change for those on 0.3.0 using these particular functions.

thomashoneyman · October 24, 2018, 1:51am

I’ve added a new Formless example demonstrating how to make a form with a dynamic number of sub-forms:

Demo:
https://thomashoneyman.github.io/purescript-halogen-formless/#nested

Source:

github.com

thomashoneyman/purescript-halogen-formless/blob/master/example/nested-array/Component.purs

module Example.Nested.Component where

import Prelude

import Data.Array (filter, snoc)
import Data.Const (Const)
import Data.Either (Either(..))
import Data.Maybe (Maybe(..))
import Data.Newtype (class Newtype)
import Data.Symbol (SProxy(..))
import Data.Traversable (for, traverse)
import Effect.Aff (Aff)
import Effect.Console as Console
import Example.App.UI.Element as UI
import Example.App.Validation as V
import Formless as F
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP

This file has been truncated. show original

I’ve also merged the PR linked in the last post, which makes this announcement both for Formless 0.3.0 AND 0.4.0!