Add document references

Author: cbravobernal

src/gutenberg-packages/frontend.js

@@ -29,7 +29,7 @@ class GutenbergBlock extends HTMLElement {
       );
       const innerBlocks = this.querySelector("gutenberg-inner-blocks");
       const Comp = blockTypes.get(blockType);
-      const technique = this.getAttribute("data-gutenberg-hydrate");
+      const hydrationTechnique = this.getAttribute("data-gutenberg-hydrate");
 
       hydrate(
         <EnvContext.Provider value="frontend">
@@ -45,7 +45,7 @@ class GutenbergBlock extends HTMLElement {
           </Comp>
         </EnvContext.Provider>,
         this,
-        technique
+        hydrationTechnique
       );
     });
   }

src/gutenberg-packages/wordpress-element.js

@@ -37,6 +37,8 @@ export const useEffect = (...args) =>
 
 export const hydrate = (container, element, technique) => {
   switch (technique) {
+    // Hydrate the element when is visible in the viewport.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
     case "view":
       const io = new IntersectionObserver((entries) => {
         for (const entry of entries) {
@@ -50,8 +52,11 @@ export const hydrate = (container, element, technique) => {
       io.observe(element.children[0]);
       break;
     case "idle":
+      // Safari does not support requestIdleCalback, we use a timeout instead. https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
       if ("requestIdleCallback" in window) {
-        window.requestIdleCallback(() => ReactHydrate(container, element));
+        window.requestIdleCallback(() => {
+          ReactHydrate(container, element);
+        });
       } else {
         setTimeout(ReactHydrate(container, element), 200);
       }