Tracking issue: Directives Hydration ⚛️

[luisherranz]

We are now actively working on the WordPress Directives Plugin Tracking issue instead ➡️

---

This issue aims to list and keep track of the tasks related to the Directives Hydration experiment.

• Wrapperless hydration alternative: Directives hydration #60

For the Custom Elements Hydration experiment, please check the Tracking Issue: Custom Elements Hydration 🧩.

The main branch of this experiment is main-directives-hydration. Make sure you select it when opening a pull request if it is related to this experiment.

Please, proactively comment on this issue whenever you start working on a new task, get blocked, or finish a task, sharing as much detail and information as possible. Thanks!!

Experiments

• Experiment: Client-side navigation of the Query Loop block using directives gutenberg#44034
• Experiment: Client side navigations in the Product Query block woocommerce/woocommerce-blocks#7187
• Experiment: Replicate Navigation block using directives gutenberg#44509
• Benchmark for WP directives DAreRodz/js-framework-benchmark#1

Done

• ⚛️ Restructure the project folder and files to make it ready for the Directives Hydration #65
• ⚛️ Hydrate the blocks with Directives Hydration (using wp-block and wp-inner-blocks) #66
• ⚛️ Add directives to handle providesContext and usesContext #68
• ⚛️ Add Suspense and ErrorBoundary examples #70
• ⚛️ Fix hydration when there are scripts in the top of the body #71
• ⚛️ Get rid of the <wp-block> wrapper #72
• ⚛️ Use a wp-inner-block attribute for each inner block #77
• ⚛️ Refactor directives and make them work inside client components #74
• ⚛️ Use Suspense and lazy to Hydrate views that were not registered before calling hydrate() #78

Next

On hold

• Add lazy hydration techniques: idle and view #75

[luisherranz]

I've opened the first PR to prepare the project to add the initial version of the hydration (co-authored with @DAreRodz):

• ⚛️ Restructure the project folder and files to make it ready for the Directives Hydration #65

[DAreRodz]

#65 is approved and merged. 🎉 I'll update the tracking issue's description to reflect that.

Aso, I've started with a PR to hydrate block components inside a single vDOM tree:

• ⚛️ Hydrate the blocks with Directives Hydration (using wp-block and wp-inner-blocks) #66

[luisherranz]

I've made a proof of concept of the vdom-based client-side navigation on the Query Loop block:

• Experiment: Client-side navigation of the Query Loop block using directives gutenberg#44034

[luisherranz]

I've made some more progress on the experiment, replacing the imperative event listeners with a wp-client-navigation directive and adding a small client router that caches the HTML and can prefetch pages:

• Experiment: Client-side navigation of the Query Loop block using directives gutenberg#44034 (comment)

So far so good!

[DAreRodz]

The "block wiring" is almost complete; I marked #66 ready for review. Still, I have intentionally left the block context to implement it in a different PR and test the preact's option hook API.

• ⚛️ Hydrate the blocks with Directives Hydration (using wp-block and wp-inner-blocks) #66

There's also a problem during hydration, because some elements are being regenerated. We need to investigate that. 🕵️

EDIT: the hydration bug was found. I left a note in the bugfix.

[DAreRodz]

I refactored toVdom(), removed visitor.js and added directives support. In addition, most of the code that was inside visitor.js has been moved to directives.

• ⚛️ Add directives to handle providesContext and usesContext #68

[luisherranz]

David is working on Suspense and ErrorBoundaries in this PR:

• ⚛️ Add Suspense and ErrorBoundary examples #70

[luisherranz]

Destroying <scripts> was causing problems with the initial hydration, so @DAreRodz and I fixed that here:

• ⚛️ Fix hydration when there are scripts in the top of the body #71

[luisherranz]

I've started another client-side navigation experiment for WooCommerce's Product Query block. This one is replacing only the inner children of the Product Query block instead of the whole document.

• Experiment: Client side navigations in the Product Query block woocommerce/woocommerce-blocks#7187

[DAreRodz]

I've removed the <wp-block> wrapper and everything seems to work fine. 🙌

The way to append the wrapper attributes is a bit hacky, TBH. We can give it a thought and change that with something else.

• ⚛️ Get rid of the <wp-block> wrapper #72

[luisherranz]

I'll be working on this today:

• Issue: ⚛️ Directives don't work if they are used inside of a component #73
• PR: ⚛️ Refactor directives and make them work inside client components #74

[luisherranz]

@DAreRodz, as part of #73 do you mind if I refactor the directives code a bit to make it work with wp-directive instead of data-wp-block-directive? Those data-wp-block- attributes were internals, but now that we're going to expose them to the devs, I'd rather go with wp-.

[DAreRodz]

do you mind if I refactor the directives code a bit to make it work with wp-directive instead of data-wp-block-directive?

Of course I don't mind! Actually, I thought of doing the same, hehe. 😄

[DAreRodz]

I've written an update on the lazy hydration techniques issue:

• Add lazy hydration techniques: idle and view #75 (comment)

TL;DR: all the approaches we tried so far were unsuccessful, although we have some ideas we're going to explore next week.

[DAreRodz]

We decided to put #75 on hold as mentioned in #75 (comment), and continue with other tasks.

Also, I've created an issue for removing the wp-inner-blocks wrapper, which is what I'm going to work on.

• ⚛️ Remove the wp-inner-blocks wrapper #76

[luisherranz]

@ockham and I recorded a video summary of the progress with this.

https://www.loom.com/share/fa2dc7c81cd14c6ebef6bc2d10863979

EDIT: @SantosGuillamot discovered what is the cst query.

[luisherranz]

#74 should be ready for review, although I just noticed a problem with the block context that I want to investigate.

• ⚛️ Refactor directives and make them work inside client components #74

[DAreRodz]

I've removed the wp-inner-blocks wrapper in #77. Now, a wp-inner-block attribute is included in each inner block instead, which is used to compute all inner blocks. The PR is ready to review.

• ⚛️ Use a wp-inner-block attribute for each inner block #77

[luisherranz]

@SantosGuillamot, @DAreRodz and I have started this new experiment to see if we can replicate the behavior of the Navigation block with directives hydration:

• Experiment: Replicate Navigation block using directives gutenberg#44509

It's based on @SantosGuillamot's initial exploration using Alpine directives.

[luisherranz]

I just merged #77. I'll resolve the conflicts on #74 and fix its bug.

[luisherranz]

#74 is ready for review:

• ⚛️ Refactor directives and make them work inside client components #74

EDIT: Merged! 🎉

[luisherranz]

I think we've finished pretty much here.

@DAreRodz, is there something else we should add?

[DAreRodz]

In a pair-programming session with @c4rl0sbr4v0, we implemented a way to pause hydration if View components are not registered yet.

• ⚛️ Use Suspense and lazy to Hydrate views that were not registered before calling hydrate() #78

[luisherranz]

Merged 🙂

[DAreRodz]

I think we've finished pretty much here.

DAreRodz, is there something else we should add?

Uhm, I'm not sure what else we could add. 😄

Maybe we can test if the directives hydration approach could get along with third-party blocks using other libraries for interactivity. As long as they don't interact with our VDOM, the hydration is supposed to work fine, although we haven't tested yet if that assumption is correct.

[luisherranz]

I've made a video summary of the "Replicate Navigation block using vDOM-based directives" experiment.

[DAreRodz]

I've started working on a benchmark to measure WP directives performance.

• Benchmark for WP directives DAreRodz/js-framework-benchmark#1

I placed a link in the description under Experiments. Feel free to move it if you feel there's a better place for it.

[luisherranz]

We've moved our work to the WP Directives Plugin branch and Tracking Issue because we are now trying to build a plugin that people can install to test this out.

[luisherranz]

We have renamed this to Directives Hydration to make more explicit the difference between this and the Custom Elements Hydration.

[luisherranz]

Closed in favor of:

• Tracking issue: WordPress Directives Plugin 🎨 #80