A data-wp-input directive for two-way data binding

[DAreRodz]

As per @sirreal suggestion, having a directive that eases the control of <input> elements would be interesting, so it is not necessary to write a callback to handle value updates.

The directive could just point to a property in the state or context:

<input data-wp-input="state.value">

No event handler would be necessary to write something like this:

<form
    data-wp-interactive="example/input"
    data-wp-context="{}"
>
    <input
        type="text"
        data-wp-input="context.text"
    >
    <output
        data-wp-text="context.text"
    ></output>
</form>

It could even handle input types so you don't need to parse the value:

<script>
    import { store, getContext } from "@wordpress/interactivity";

    store( 'example/input', {
        state: {
            get result() {
                const { a, b } = getContext();
                return a + b;
            }
        }
    } );
</script>

<form
    data-wp-interactive="example/input"
    data-wp-context='{ "a": 0, "b": 0 }'
>
    <input
        name="A"
        type="number"
        data-wp-input="context.a"
    >
    <input
        name="B"
        type="number"
        data-wp-input="context.b"
    >
    <output
        name="A + B"
        data-wp-text="state.result"
    ></output>
</form>

The directive is mostly intended to be used in <input> elements (maybe <textarea> as well), so I thought about naming it data-wp-input. We can choose other names, though. 😄

Another name that comes to my mind is data-wp-control, as that's the word used in the MDN documentation to describe <input> elements.

Let me know what you think. 😊

[sirreal]

Thanks for creating this! It does't provide anything that cannot already be implemented, but it would save some repetitive code. It might also prevent bugs because change/input handlers would not need to be implemented for everything to connect to the store.

One way to think about it is as the inverse of the bind directives. data-wp-bind--value="…" gets a value from the store or context and sets an element attribute. This directive would take an element attribute and update a value in the store or context: data-wp-input--value="…".

The most common use case would likely be for <input> but I wonder if any element and any attribute could theoretically be read (checked, value, textContent). Maybe a more generic directive name would be good like data-wp-read--[attribute] or data-wp-inject--[attribute] although I don't love either of those names 🙂

[cbravobernal]

How would be an example of integrating input validation with those directives?
With data-wp-run?

[sirreal]

I think it would be OK to scope this to basic functionality of get value and put it in state/context. More advanced usage could continue to use events and handler functions.

[luisherranz]

I like it 😄👏

I like that it is different from data-wp-bind so that you can do one-way binding or two-way binding depending on the case.

[singerb]

As long as two way binding with two directives worked and didn't infinite loop, I think that's fine.

[singerb]

+1 from me to this idea; I had to read the API docs twice to make sure I wasn't missing what seemed like a standard feature for frameworks like this. Having to write my own code for it was fine with a single form element, but with anything more complex it would get repetitive very quickly.