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

wp-bind improvements and negation in runtime#213

Merged
SantosGuillamot merged 3 commits intomain-wp-directives-pluginfrom
data-bind-improvements-and-negation-in-runtime
Apr 14, 2023
Merged

wp-bind improvements and negation in runtime#213
SantosGuillamot merged 3 commits intomain-wp-directives-pluginfrom
data-bind-improvements-and-negation-in-runtime

Conversation

@luisherranz
Copy link
Copy Markdown
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
Copy Markdown
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