Giters

WordPress / block-interactivity-experiments

⚠️ WARNING: This repository is no longer active. The development and discussions have been moved to the Gutenberg repository.

Home Page:https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tracking issue: Directives Hydration ⚛️

luisherranz opened this issue · comments

commented

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.

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

Done

Next

On hold

commented

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

commented

#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:

commented

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

commented

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:

So far so good!

commented

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.

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.

commented

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.

commented

David is working on Suspense and ErrorBoundaries in this PR:

commented

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

commented

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.

commented

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.

commented

I'll be working on this today:

commented

@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-.

commented

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. 😄

commented

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

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

commented

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.

commented

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

commented

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.

commented

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

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

commented

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

commented

#74 is ready for review:

EDIT: Merged! 🎉

commented

I think we've finished pretty much here.

@DAreRodz, is there something else we should add?

commented

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

commented

Merged 🙂

commented

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.

commented

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

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

commented

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.

commented

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

commented

Closed in favor of: