Initial hydration techniques configuration

Author: cbravobernal

src/gutenberg-packages/frontend.js

@@ -22,13 +22,15 @@ class GutenbergBlock extends HTMLElement {
     setTimeout(() => {
       const blockType = this.getAttribute("data-gutenberg-block-type");
       const attributes = JSON.parse(
-        this.getAttribute("data-gutenberg-attributes"),
+        this.getAttribute("data-gutenberg-attributes")
       );
       const blockProps = JSON.parse(
-        this.getAttribute("data-gutenberg-block-props"),
+        this.getAttribute("data-gutenberg-block-props")
       );
       const innerBlocks = this.querySelector("gutenberg-inner-blocks");
       const Comp = blockTypes.get(blockType);
+      const technique = this.getAttribute("data-gutenberg-hydrate");
+
       hydrate(
         <EnvContext.Provider value="frontend">
           <Comp
@@ -43,6 +45,7 @@ class GutenbergBlock extends HTMLElement {
           </Comp>
         </EnvContext.Provider>,
         this,
+        technique
       );
     });
   }

src/gutenberg-packages/wordpress-blocks.js

@@ -1,14 +1,16 @@
 import { InnerBlocks, useBlockProps } from "@wordpress/block-editor";
 import { registerBlockType as gutenbergRegisterBlockType } from "@wordpress/blocks";
 
-const save = (name, Comp) =>
+const save =
+  (name, Comp) =>
   ({ attributes }) => {
     const blockProps = useBlockProps.save();
     return (
       <gutenberg-interactive-block
         data-gutenberg-block-type={name}
         data-gutenberg-attributes={JSON.stringify(attributes)}
         data-gutenberg-block-props={JSON.stringify(blockProps)}
+        data-gutenberg-hydrate="view"
       >
         <Comp blockProps={blockProps} attributes={attributes}>
           <gutenberg-inner-blocks>

src/gutenberg-packages/wordpress-element.js

@@ -4,7 +4,7 @@ import {
   useEffect as useReactEffect,
   useState as useReactState,
 } from "@wordpress/element";
-export { hydrate } from "react-dom";
+import { hydrate as ReactHydrate } from "react-dom";
 
 export const EnvContext = createContext(null);
 
@@ -34,3 +34,29 @@ export const useState = (init) =>
 
 export const useEffect = (...args) =>
   useBlockEnvironment() !== "save" ? useReactEffect(...args) : noop;
+
+export const hydrate = (container, element, technique) => {
+  switch (technique) {
+    case "view":
+      const io = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          // As soon as we hydrate, disconnect this IntersectionObserver.
+          io.disconnect();
+          ReactHydrate(container, element);
+          break; // break loop on first match
+        }
+      });
+      io.observe(element.children[0]);
+      break;
+    case "idle":
+      if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(() => ReactHydrate(container, element));
+      } else {
+        setTimeout(ReactHydrate(container, element), 200);
+      }
+      break;
+    default:
+      ReactHydrate(container, element);
+  }
+};