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

Tracking issue: WordPress Directives Plugin 🎨 #80

Closed
13 of 23 tasks
luisherranz opened this issue Oct 14, 2022 · 54 comments
Closed
13 of 23 tasks

Tracking issue: WordPress Directives Plugin 🎨 #80

luisherranz opened this issue Oct 14, 2022 · 54 comments

Comments

@luisherranz
Copy link
Member

luisherranz commented Oct 14, 2022

This issue aims to list and keep track of the tasks related to the WordPress Directives Plugin experiment. The goal is to create an installable plugin that adds a set of basic directives and client-side navigations to any site.

For this experiment's stress-testing, please check the Tracking Issue: Performance and stress-testing vDOM Hydration 🧪

For the Custom Elements or Directives Hydration experiment, please check their corresponding Tracking Issues.

The main branch of this experiment is main-wp-directives-plugin. 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!!

High-level overview

  • Directives

    • Finish the directives of the initial list - In progress 🚧

      Work on the directives is still reactive as we only work on the ones that we need for our experiments, demos, etc. The work on the Movies demo and Woo blocks should bring some focus to this task.

    • Add SSR for the ones that need it - In progress 🚧\

      This is led by @ockham and @dmsnell.

      There's already initial support for the SSR of basic directive attributes and good progress on wp-context. The next challenge to solve is to figure out the APIs to access the inner HTML with the HTML (Tag) Processor.

    • Decide final names - In progress 🚧

      We are keeping a list of the decisions that need to be made here in the Tracking Issue.

  • Components

    There hasn't been any progress on this, mostly due to the lack of need for components (directive tags). @luisherranz opened an issue proposing their removal, as we couldn't find a single case where they add meaningful value and we might want to use them for other purposes in the future.

  • State Management

    • Finish the Deep Signals implementation - Finished
    • Decide on the recommended shape - In progress 🚧
      Same answer as in the "Directives - Decide final names".
    • TypeScript support - Not started
    • Figure out if we want to expose some parts of the router and/or other configuration in the state (example) - Not started
  • Server-side rendering

    • API to do SSRing - In progress 🚧
      Same answer as in the "Directives - Add SSR for the ones that need it".
    • Serialize initial state - Finished
    • Sort directives by priority - Not started
  • Client runtime

    • Limit hydration when CSN is not possible Finished
    • Deserialize state Finished ✅ (mostly)
    • Sort directives by priority - In progress 🚧
  • Bundling

    • API to register directives/components - Not started
    • Enqueue directives/components present in the HTML - Not started
    • Ensure script execution order, deferring and prefetch - Not started
    • Choose final package name and shape - In progress 🚧
      Same answer as in the "Directives - Decide final names".
    • Choose and implement dependency management - In progress 🚧
      Barely started, just preliminary conversations between @luisherranz, @gziolo, @dmsnell and @youknowriad.
  • Client-side navigation

    • Manual (Finished ✅) and automatic opt-in (Not started ⏸)
    • Router
      • Fetch directives/components scripts - Not started
      • Global state (state.router.url) - Not started
    • API to trigger virtual pageviews - Not started
    • Prefetching strategy - Not started

Done

In progress

Next

Decisions that need to be made

Experiments

@luisherranz luisherranz pinned this issue Oct 14, 2022
@luisherranz
Copy link
Member Author

luisherranz commented Oct 14, 2022

I've opened the main-wp-directives-plugin branch with a basic skeleton of a plugin, including a basic webpack configuration and enqueuing of the runtime/vendor scripts.

@luisherranz
Copy link
Member Author

luisherranz commented Oct 14, 2022

I've added some basic tasks to the OP to get the client-side navigations working, which is our first task.

These two experiments contain much of the required code:

We should rename wp-client-transition to wp-link.

@SantosGuillamot
Copy link
Contributor

SantosGuillamot commented Oct 17, 2022

I have created a Pull Request to "Add the wp-link to all the relative links on the page". It is still a draft, but I opened it to keep the discussion about that specific task there.

@luisherranz
Copy link
Member Author

luisherranz commented Oct 17, 2022

I've created a pull request to add the basic vdom + directives functionality.

I'll now create another one for the router + wp-link.

@luisherranz
Copy link
Member Author

I've created the pull request to add the router and the wp-link directive.

@luisherranz
Copy link
Member Author

I've created another pull request to change the toVdom logic to test removing the comment nodes and preserving the script's children:

@DAreRodz
Copy link
Collaborator

DAreRodz commented Oct 18, 2022

I'll be working on adding page transitions to the client-side navigations using the Shared Element Transition API. I'll share here a link to the PR soon.

@luisherranz
Copy link
Member Author

luisherranz commented Oct 19, 2022

I've created a PR to add support for CSS loading during client-side navigations:

@luisherranz
Copy link
Member Author

I've opened a PR to add a basic opt-in mechanism based on a custom meta tag:

@SantosGuillamot
Copy link
Contributor

I've opened a PR to add prefetch to all links and prevent scrolling in the pagination:

While doing that, we realized that the HTML of the parent blocks contains the children, so we were parsing the HTML multiple times. For that, we change the filters to only trigger for the Query Loop and the Template Parts until we figure out a better solution.

@luisherranz
Copy link
Member Author

luisherranz commented Oct 19, 2022

Another PR to add an admin page with a checkbox to toggle client-side navigations (for testing purposes only):

@luisherranz
Copy link
Member Author

I did a couple of bug fixes that we noticed while working on this demo:

@luisherranz
Copy link
Member Author

luisherranz commented Oct 26, 2022

I've opened an issue to talk about limiting the hydration surface when the site doesn't support client-side navigations:

@luisherranz
Copy link
Member Author

@yscik opened an issue to talk about how to avoid using strings to define the directives in JSX.

@SantosGuillamot and I did a PR to show how server-side rendering in PHP could look like using an HTML parser.

@luisherranz
Copy link
Member Author

I closed the build-time SSR in PHP proof of concept because @ockham and @dmsnell have started working on a new run-time version based on the WP_HTML_Tag_Processor, which is much more promising.

@luisherranz
Copy link
Member Author

I have created a PR to start using createTreeWalker. I'm not going to be able to dedicate time to it in the next few days, so if anyone wants to finish it, no problem 🙂

@SantosGuillamot
Copy link
Contributor

I have created a PR to handle the CDATA nodes based on @DAreRodz proposal.

@luisherranz
Copy link
Member Author

@luisherranz
Copy link
Member Author

@luisherranz
Copy link
Member Author

I forgot to mention here these two PRs, sorry!

I've also updated the opening post 🙂

@SantosGuillamot
Copy link
Contributor

I've started a pull request to Add wp-show directive attribute. Right now, it only exists the wp-show directive tag (component).

I've added it to the opening post (In Progress). Please let me know if it should be in any other place.

@bernhardreiter
Copy link

  • Add SSR for the ones that need it - In progress \

This is led by @bernhardreiter and @dmsnell.

You've probably wanted to mention somebody else with a similar name.

@luisherranz
Copy link
Member Author

Oh my. Yes, that was @ockham, sorry!

@SantosGuillamot
Copy link
Contributor

I've opened an issue to discuss What should be the HTML structure returned when wp-show is false?

@michalczaplinski
Copy link
Collaborator

I've opened an issue to discuss if we want to expose parts of the router (or other API internals) in the store:

@dmsnell
Copy link
Member

dmsnell commented Feb 24, 2023

I'll repeat it here because I think it will be important.

Decide on whether to use wp- or data-wp-

If we can avoid using the wp- prefix we'll have much better opportunity to avoid needless performance hits in content without directives. This isn't about data-wp- vs. wp- but rather something like wp- vs. wpx-.

It'd be extremely advantageous to be able to perform this quick check and bail all directive processing.

function process_directives( $html ) {
	// Some posts will have `wpx-` without having directives,
	// But no posts will have directives without having `wpx-`.
	if ( false === strpos( $html, 'wpx-' ) ) {
		return $html;
	}
}

Looking for wp- conflates with all sorts of Gutenberg prefixes otherwise.

@luisherranz
Copy link
Member Author

A small update:

@DAreRodz
Copy link
Collaborator

DAreRodz commented Mar 3, 2023

I've merged the PR that makes wp-ignore work on client-side navigations.

Same with this other PR, which refactors the e2e tests a bit to prevent fetch failures during client-side navigations.

@SantosGuillamot
Copy link
Contributor

I have started a pull request to add the wp-text directive to stop using wp-bind:children in the current examples.

@luisherranz
Copy link
Member Author

I've opened a couple of issues, one to make the hydration more resilient (and make it work with template) and the other to see how we could integrate the new View Transitions API:

@luisherranz
Copy link
Member Author

It's very preliminary yet, but @DAreRodz and I have started an experiment to do client-side form submissions on the Comments Form block:

@luisherranz
Copy link
Member Author

Added this to the list, mentioned by @tomjn here:

@luisherranz
Copy link
Member Author

Another issue related to the router:

@michalczaplinski
Copy link
Collaborator

michalczaplinski commented Mar 27, 2023

I've reopened

because it became clear that wp_store is not the right final name. It would be amazing if we could decide before publishing the blog post introducing the Interactivity API because having a bad name is easy for people to nitpick.

Realistically, we might need more time, though 🙂

@luisherranz
Copy link
Member Author

We finished the basic functionality of the Comments Form submission experiment:

@luisherranz
Copy link
Member Author

@artemiomorales started this experiment of a lightbox for images, similar to the one in Medium:

@luisherranz
Copy link
Member Author

I've added support for the ! operator: "!state.boolean"

I've also improved the logic of data-wp-bind and added some e2e tests.

@luisherranz
Copy link
Member Author

I finally merged the createTreeWalker version:

@DAreRodz and I have also started working on a branch to simplify the runtime so we can start testing it with core blocks:

@DAreRodz
Copy link
Collaborator

DAreRodz commented May 8, 2023

I haven't opened a PR yet, but I just started working on sorting directives by priority. I'll update this comment with the PR link soon.

@luisherranz
Copy link
Member Author

@luisherranz
Copy link
Member Author

I'm going to close this issue as part of the migration to the Gutenberg repository.

This is the current Tracking Issue on Gutenberg. Please refer to it from now on.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants