Adding alpine state to the form-wrapper.blade.php

[roni-estein]

Hey looking for what you think the most flexible way would be short of just publishing and overwriting the component views to add reactive state to the wrapper component. I've done this a couple of ways already, some examples:

1. Animating my "hint" text while accepting more complex codes in a field like a Canadian postal codes or birth date fields to show which parts you've completed.

2. Showing the character count on a text area, that only accepts a limited size.

3. Showing complex requirements like

• 1 uppercase
• 1 lowercase
• 1 number
• 1 punctuation mark
• Minimum 8 characters

For a password field and checking them off.

This can already easily be done by making the component "reactive" but I've been defaulting to overwriting the component wrapper for design anyhow so I've been dropping in state like wrapped or wrappedData or fieldData I need to settle on a name.

But it occurred to me we could change PR the change to the component wrapper and then default it to an empty object that only renders when it's needed. And then we can just add a "wrapped" object in 'app.js' that is customizable, however that may not be robust enough.

Any thoughts would be appreciated. If this is something that is interesting and won't add a maintenance burden I'd be happy to PR it. Both the the code and the docs.

[roni-estein]

I thought I could leverage the goodies from this tweet to figure out a really configurable solution for this issue but it didn;t work quite like I would like.

There are a couple of ways that I could tackle this... specifically me. People with more JS-fu could do better.
Here is my coding by wishful thinking solution

Right now, I need to publish the field-wrapper.blade.php to the project and add some alpine state that I can manipulate on it. That allows me to manipulate the hint html and basically everything in the wrapped element. It would be nice if I could bypass that somehow by passing the state of the current alpine component to some object and manipulate it there. I supposer I already can, but I can't also send over functions to manipulate that state, or at least I haven't figured that out.

My main thrust is for projects that have tons of forms, to essentially configure a few visual components but not have a nested bunch of directories with tiny form segments all over the place.

[roni-estein]

I think adding alpine state is a great idea to all wrappers, but as most wrappers are going to be published as part of a design, this is something that can be easily done as part of the install process. And may not need to be a PR. Although I do like the idea of PR-ing to give people a good example of a place to start from instead of trying to sort through it all on your own. Thoughts?