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