Build an "Import on Visibility" and "Interaction" Helper

Is your enhancement related to a problem? Please describe.

As per the guidance specified in the patterns.dev book released by Addy Osmani, we should look at building a mechanism to allow wp-scaffold to load heavy JS-related elements on interaction (user click, for instance) or on visibility.

Import on Interaction: https://www.patterns.dev/posts/import-on-interaction Import on Visibility: https://www.patterns.dev/posts/import-on-visibility

The two approaches largely tackle different elements:

Import on Interaction: Use Cases

3rd-party elements using the much spoken-about "Facade" pattern
Chat widgets
Client-side Authentication portals
Others?

We must update our Babel configuration to support dynamic imports to achieve this. Babel 7.5+ offers this straight out of the box. We will need to double-check if 10up-toolkit leverages this version. If not, and if you do not wish to upgrade to Babel 7.5+ on your project, there is a drop in babel plugin you can use.

const btn = document.querySelector("button");

btn.addEventListener("click", (e) => {
  e.preventDefault();
  import("@components/my-heavy-library")
    .then((module) => module.default)
    .then(executeHeavyLibrary()) // use the imported dependency
    .catch((err) => {
      console.log(err);
    });
});

Import on Visibility: Use Cases

3rd-party embeds (Twitter, Instagram, Facebook, Spotify, Google Maps, etc.)
Below-the-fold functionality that is not critical to user experience
Sliders, Carousels below the fold.
In WP's case, considering that the HTML structure is rendered server side, we could likely use this for Mega Menus, Drawer Navigations on mobile and any JS-related functionality that requires an interaction.

To achieve this functionality, we need to leverage the Intersection Observer API - its a fairly simple API that's well documented on MDN. Each implementation would likely be very different but at a high-level:

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

callback in this instance is the function that is fired, which could be a dynamic import of functionality.

These methods would help us reduce project bundle size in the long term, thus delivering a smaller pay load to the client (browser)

Designs

N/A

Describe alternatives you've considered

N/A

Code of Conduct

[X] I agree to follow this project's Code of Conduct

10up / wp-scaffold