Add priorities to directives

[DAreRodz]

What

This PR extends the directive() function API to add a new option called priority, making directives on the same element to be evaluated in priority order. In such an element, directives with the same priority are evaluated together, wrapped in the same component, and those with less priority are wrapped in a nested component.

Priorities follow the same schema as in WordPress, i.e., priority is a numeric value, lower numbers correspond with earlier execution ("more" priority), and the default value is 10.

Note that this value is per directive type, as it is set during directive definition. It doesn't allow changing the order in which directives are evaluated on different parts of the HTML.

A trivial example:

directive(
  'customdirective',
  ({ directives: { customdirective }) => { /* ... */ },
  { priority: 12 } // arbitrary value, just for display purposes
);

In addition, the priority for the data-wp-context directive has been set to 5.

Why

Priorities allow directives to manipulate the element in which they appear, in the correct order. It is especially convenient for directives that add wrappers, like a context Provider (e.g. data-wp-context), allowing other directives with less priority in the same element to consume that context.

How

The main changes are in /src/runtime/hooks.js:

• I've implemented a hook called usePriorityLevels, that receives the object with all directives defined in an element and returns them sorted and grouped by priority.
• I'm using a recursive component called RecursivePriorityLevel inside the Directive component. It renders a component instance for each priority level that usePriorityLevels yields.

[SantosGuillamot]

Approving from my side because I tested and it seems to work great 🙂 (actually, it can help fixing this issue).

I just tested that it works. Please wait for a proper code review before merging it.

[luisherranz]

Looks good to me as well. Great work, David 🙂

[luisherranz]

@DAreRodz, can you explain this in more detail? Why is element already rendered?

[DAreRodz]

The thing is that element comes from the Directive component, which never re-renders, so element is always the same instance. If we don't clone it, it's unsafe to modify its properties the way we do inside directives because some element's internals wouldn't be updated (like the __k property).

[DAreRodz]

Thanks for the reviews. PR is merged now. 🙌

As a follow-up, we can try improving the code with these changes:

• Move the logic inside the usePriorityLevels hook to the vnode option hook.
• Refactor components so we don't need an extra component (Directive)
• Show directive names for each RecursivePriorityLevel in the preact dev tools