<commit_before>/* global HAS_REACT_18 */
import type { GatsbyImageProps } from "gatsby-plugin-image"
import React from "react"

let hydrateRef
let isFirstHydration = true
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)

export function onRouteUpdate(): void {
  if (
    process.env.NODE_ENV === `production` &&
    isFirstHydration &&
    // Safari has a bug that causes images to stay blank when directly loading a page (images load when client-side navigating)
    // running this code on first hydration makes images load.
    !isSafari
  ) {
    isFirstHydration = false
    return
  }

  if (`requestIdleCallback` in window) {
    if (hydrateRef) {
      // @ts-ignore cancelIdleCallback is on window object
      cancelIdleCallback(hydrateRef)
    }

    // @ts-ignore requestIdleCallback is on window object
    hydrateRef = requestIdleCallback(hydrateImages)
  } else {
    if (hydrateRef) {
      clearTimeout(hydrateRef)
    }
    hydrateRef = setTimeout(hydrateImages)
  }
}

declare const HAS_REACT_18: boolean

// eslint-disable-next-line @typescript-eslint/no-explicit-any
let ReactDOM: any

if (HAS_REACT_18) {
  ReactDOM = require(`react-dom/client`)
} else {
  ReactDOM = require(`react-dom`)
}

function hydrateImages(): void {
  const doc = document
  const inlineWPimages: Array<HTMLElement> = Array.from(
    doc.querySelectorAll(`[data-wp-inline-image]`)
  )

  if (!inlineWPimages.length) {
    return
  }

  import(
    /* webpackChunkName: "gatsby-plugin-image" */ `gatsby-plugin-image`
  ).then(mod => {
    inlineWPimages.forEach(image => {
      if (image.dataset && image.dataset.wpInlineImage && image.parentNode) {
        const hydrationData = doc.querySelector(
          `script[data-wp-inline-image-hydration="${image.dataset.wpInlineImage}"]`
        )

        if (hydrationData) {
          const imageProps: GatsbyImageProps = JSON.parse(
            hydrationData.innerHTML
          )

          if (ReactDOM.createRoot) {
            const root = ReactDOM.createRoot(image.parentNode)
            root.render(React.createElement(mod.GatsbyImage, imageProps))
          } else {
            ReactDOM.hydrate(
              React.createElement(mod.GatsbyImage, imageProps),
              image.parentNode
            )
          }<commit_msg>fix(gatsby-source-wordpress): always hydrate images and use the right parent element (#36002)<commit_after>/* global HAS_REACT_18 */
import type { GatsbyImageProps } from "gatsby-plugin-image"
import React from "react"

let hydrateRef

export function onRouteUpdate(): void {
  if (`requestIdleCallback` in window) {
    if (hydrateRef) {
      // @ts-ignore cancelIdleCallback is on window object
      cancelIdleCallback(hydrateRef)
    }

    // @ts-ignore requestIdleCallback is on window object
    hydrateRef = requestIdleCallback(hydrateImages)
  } else {
    if (hydrateRef) {
      clearTimeout(hydrateRef)
    }
    hydrateRef = setTimeout(hydrateImages)
  }
}

declare const HAS_REACT_18: boolean

// eslint-disable-next-line @typescript-eslint/no-explicit-any
let ReactDOM: any

if (HAS_REACT_18) {
  ReactDOM = require(`react-dom/client`)
} else {
  ReactDOM = require(`react-dom`)
}

function hydrateImages(): void {
  const doc = document
  const inlineWPimages: Array<HTMLElement> = Array.from(
    doc.querySelectorAll(`[data-wp-inline-image]`)
  )

  if (!inlineWPimages.length) {
    return
  }

  import(
    /* webpackChunkName: "gatsby-plugin-image" */ `gatsby-plugin-image`
  ).then(mod => {
    inlineWPimages.forEach(image => {
      // usually this is the right element to hydrate on
      const grandParentIsGatsbyImage =
        // @ts-ignore-next-line classList is on HTMLElement
        image?.parentNode?.parentNode?.classList?.contains(
          `gatsby-image-wrapper`
        )

      // but sometimes this is the right element
      const parentIsGatsbyImage =
        // @ts-ignore-next-line classList is on HTMLElement
        image?.parentNode?.classList?.contains(`gatsby-image-wrapper`)

      if (!grandParentIsGatsbyImage && !parentIsGatsbyImage) {
        return
      }

      const gatsbyImageHydrationElement = grandParentIsGatsbyImage
        ? image.parentNode.parentNode
        : image.parentNode

      if (
        image.dataset &&
        image.dataset.wpInlineImage &&
        gatsbyImageHydrationElement
      ) {
        const hydrationData = doc.querySelector(
          `script[data-wp-inline-image-hydration="${image.dataset.wpInlineImage}"]`
        )

        if (hydrationData) {
          const imageProps: GatsbyImageProps = JSON.parse(
            hydrationData.innerHTML
          )

          if (ReactDOM.createRoot) {
            const root = ReactDOM.createRoot(gatsbyImageHydrationElement)
            root.render(React.createElement(mod.GatsbyImage, imageProps))
          } else {
            ReactDOM.hydrate(
              React.createElement(mod.GatsbyImage, imageProps),
              gatsbyImageHydrationElement
            )
          }
{'fraction_non_alphanumeric': 0.10385992837246319, 'fraction_numerical': 0.0033824114604058893, 'mean_word_length': 2.7796992481203007, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2555934', 'n_tokens_mistral': 1572, 'n_tokens_neox': 1528, 'n_words': 311}