Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Formless to be Halogen 5 compatible #46

Merged
merged 33 commits into from
Aug 19, 2019
Merged

Conversation

thomashoneyman
Copy link
Owner

@thomashoneyman thomashoneyman commented Apr 20, 2019

What does this pull request do?

Closes #45 by updating the library for compatibility with Halogen 5. Along the way I made a number of improvements to the library along the lines of the same improvements made to the Select library in #39.

Where should the reviewer start?

This is a fairly enormous PR. I don't expect diving in to the Formless internals will be fruitful; instead, review the new examples to see how using the component has changed.

How should this be manually tested?

If you have a medium-sized form in production, I would suggest trying to convert it to this new format to ensure the features you have extended via a parent component are still possible with new Formless. There should be no loss in functionality -- anything you could express the old way you can express the new way, and you can now express quite a bit more.

You can also verify that the demo site examples work by building the app (yarn build-all) and then opening dist/index.html.

Summary of changes

  1. The component and examples are now Halogen 5 compatible.

  2. Formless is no longer meant to be extended by a parent component. Previously, if you wanted more state available to the form for rendering you would write that state into the parent component and then use the parent state in the render function. If you wanted to support new behaviors you would write a query in the parent component, embed it in the render function with the Raise query from Formless, and then handle it when Formless raised an Emit message containing the query. This caused a lot of pollution: the child component (Formless) mixed its state and queries with a parent component. Now, Formless is extensible. If you want more state available, you extend the Formless state type with new fields. If you want more queries or actions, you extend the Formless query / action types and provide a handler for the new queries / actions.

  3. Formless is much more extensible than it was previously. In addition to extending state and queries, as you could previously, you can now extend even more. You can hook in to the initialize, finalize, and receive lifecycles if you would like and you can provide your own output messages.

  4. Formless now handles its Message type differently. Formless still has a Message type, but allows you to pass your own handler for these messages. Now you can perform new actions within the Formless component when a message is raised, and then raise you own custom messages as you see fit. The most common thing to do is intercept the Submitted message by doing some processing on the output type before raising that output type as the component message. This means a parent component literally only has to handle the RegisteredUser or ValidatedForm or whatever type it is the form is meant to produce, but you still have the power to hook in to any Formless messages as before.

  5. Formless has much better support for child components because of this change. If you want to embed child components in a Formless form, then you can also handle their outputs by extending the Formless Action type. That means that Formless can manage these child components for itself without a parent component being aware of them -- the child components are encapsulated. However, with the sendQuery query, a parent can transparently query through Formless to a child component and receive a result, as if Formless wasn't even there.

  6. The README and examples have all been updated. Please see the examples to understand how the component works now. I've got a 'summary of changes' in the works as well.

  7. The Formless component is a little simpler internally. It no longer uses the Store comonad to manage state and no longer takes a render function as part of its input type. It takes a new argument, which is a Spec: this Spec type describes any extensions to the component (your extensions to the state, query, action, message, child slots, etc. types) and provides handlers for any extensions that need them (if you added new actions, you need a handleAction function; if you added new queries you need a handleQuery function, etc). All extensions are optional, and you can simply provide defaultSpec if you have nothing to add. Usually you will override defaultSpec with at least a render function.

  8. To embed your own action in Formless HTML, use the injAction function (onClick \_ -> Just $ injAction MyAction). To use your own query to query Formless, use the injQuery function (H.query _formless unit $ injQuery MyQuery).

Other Notes:

Documentation comments and the readme have been updated. However, I'll still need to produce a "changes in the last version" document as part of release notes for people converting Halogen 4 forms to the new version of Formless.

@thomashoneyman thomashoneyman self-assigned this Apr 20, 2019
@thomashoneyman thomashoneyman added this to the Halogen 5 milestone May 24, 2019
linearray and others added 2 commits August 19, 2019 11:30
* Added Formless component template

* Further cleanup template

* Fix indentation for template

* Fix typo in template example

* Template file: convert MonadType to m with MonadAff constraint

* Template file: document handleEvent function

* Temlate file: document mkInput

* Template file: more clearly document getInput and setValidate functions

* Use comments to further document template file
@thomashoneyman
Copy link
Owner Author

I am going to merge this into master now that it looks like many folks are moving over to the Halogen release candidates. However, I'll hold off on a 1.0 release until:

@thomashoneyman thomashoneyman merged commit d7151f8 into master Aug 19, 2019
@thomashoneyman thomashoneyman deleted the halogen-5 branch August 19, 2019 21:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update for Halogen 5
5 participants