Skip to content
This repository has been archived by the owner on Jul 28, 2023. It is now read-only.

wp-bind improvements and negation in runtime #213

Conversation

luisherranz
Copy link
Member

@luisherranz luisherranz commented Apr 14, 2023

What

  • I've added support for negations to the JavaScript runtime: data-wp-bind.checked="!state.checked".
  • I've improved data-wp-bind to modify attributes on hydration (Preact doesn't modify them when using hydrate).
  • I've added e2e tests for data-wp-bind, including one that uses "!state.checked".

Why

Because ! is easy enough to add, and it's very useful when combined with data-wp-show or data-wp-bind.hidden (if/else).

How

  • For the negation, just check if the path starts with !.
  • For the data-wp-bind, add a useEffect and change the DOM manually to reflect the vDOM (similar to data-wp-class).

Notes

  1. While working on data-wp-bind.checked, I stumbled upon this weird thing: When you change the checked attribute of a node with React (reproduced here) or Preact (reproduced here), the browser doesn't update the checked attribute of the component. Everything seems to work because element.checked is correct and Dan says this is correct way of doing it, but at first it's pretty confusing 😅
  2. I'll work on the server-side negation in another PR.

@luisherranz luisherranz self-assigned this Apr 14, 2023
@luisherranz luisherranz requested a review from westonruter April 14, 2023 10:50
Copy link
Contributor

@SantosGuillamot SantosGuillamot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me! 🙂

@SantosGuillamot SantosGuillamot merged commit 7aefbca into main-wp-directives-plugin Apr 14, 2023
@SantosGuillamot SantosGuillamot deleted the data-bind-improvements-and-negation-in-runtime branch April 14, 2023 10:53
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants