@depup/gatsby 5.16.1-depup.0

package/cache-dir/head/components/head-components.js

@@ -0,0 +1,86 @@
+import React from "react"
+
+import {
+  HTML_BODY_ORIGINAL_TAG_ATTRIBUTE_KEY,
+  ITEM_PROP_WORKAROUND_KEY,
+  ITEM_PROP_WORKAROUND_VALUE,
+  VALID_NODE_NAMES,
+} from "../constants"
+
+export const IsHeadRenderContext = React.createContext(false)
+
+export function getValidHeadComponentReplacements(
+  originalCreateElement,
+  forceHeadRenderContext
+) {
+  function useIsHeadRender() {
+    if (forceHeadRenderContext) {
+      // for SSR we don't need to use React context, because head rendering is sync
+      // so forcing it is more performant
+      return true
+    }
+
+    // for Browser we use React Context
+    // note: technically this is breaking rules of hooks, because useContext is used
+    // not at the top of the hook after some conditional code did run,
+    // but this would only manifest if `forceHeadRenderContext` could change between rerenders,
+    // and because this is factory argument, it can't change
+    const isHeadRenderFromContext = React.useContext(IsHeadRenderContext)
+
+    return isHeadRenderFromContext
+  }
+
+  function htmlOrBodyComponentFactory(TagName) {
+    const HeadAwareComponent = props => {
+      // De-risk monkey patch by only applying it within a `Head()` render.
+      const isHeadRender = useIsHeadRender()
+      if (isHeadRender) {
+        const allProps = {
+          ...props,
+          [HTML_BODY_ORIGINAL_TAG_ATTRIBUTE_KEY]: TagName,
+        }
+        return originalCreateElement(`div`, allProps)
+      } else {
+        return originalCreateElement(TagName, props)
+      }
+    }
+    HeadAwareComponent.displayName = `React19HeadAPICompat${TagName}`
+    return HeadAwareComponent
+  }
+
+  function nodeComponentFactory(TagName) {
+    const HeadAwareComponent = props => {
+      // De-risk monkey patch by only applying it within a `Head()` render:
+      const isHeadRender = useIsHeadRender()
+      // only modify props if ITEM_PROP_WORKAROUND_KEY is not set in props
+      if (isHeadRender && !(ITEM_PROP_WORKAROUND_KEY in props)) {
+        const propsWithWorkaround = {
+          ...props,
+          [ITEM_PROP_WORKAROUND_KEY]: ITEM_PROP_WORKAROUND_VALUE,
+        }
+        return originalCreateElement(TagName, propsWithWorkaround)
+      }
+
+      return originalCreateElement(TagName, props)
+    }
+    HeadAwareComponent.displayName = `React19HeadAPICompat${TagName}`
+    return HeadAwareComponent
+  }
+
+  return new Map(
+    VALID_NODE_NAMES.map(nodeName => {
+      // for each of valid head nodes we will create replacement component
+      // that can check IsHeadRenderContext context (it is a new component,
+      // so this won't break rules of hooks) and apply workarounds for
+      // React 19 automatic handling of meta tags which is incompatible with
+      // Gatsby Head API
+
+      const replacement =
+        nodeName === `html` || nodeName === `body`
+          ? htmlOrBodyComponentFactory(nodeName)
+          : nodeComponentFactory(nodeName)
+
+      return [nodeName, replacement]
+    })
+  )
+}

package/cache-dir/head/constants.js

@@ -0,0 +1,15 @@
+export const VALID_NODE_NAMES = [
+  `link`,
+  `meta`,
+  `style`,
+  `title`,
+  `base`,
+  `noscript`,
+  `script`,
+  `html`,
+  `body`,
+]
+
+export const ITEM_PROP_WORKAROUND_KEY = `itemProp`
+export const ITEM_PROP_WORKAROUND_VALUE = `gatsby-do-not-hoist-me-react`
+export const HTML_BODY_ORIGINAL_TAG_ATTRIBUTE_KEY = `data-original-tag`

package/cache-dir/head/head-export-handler-for-browser.js

@@ -0,0 +1,170 @@
+import React from "react"
+import { useEffect } from "react"
+import { StaticQueryContext } from "gatsby"
+import { LocationProvider } from "@gatsbyjs/reach-router"
+
+import { reactDOMUtils } from "../react-dom-utils"
+import { FireCallbackInEffect } from "./components/fire-callback-in-effect"
+import {
+  IsHeadRenderContext,
+  getValidHeadComponentReplacements,
+} from "./components/head-components"
+import {
+  headExportValidator,
+  filterHeadProps,
+  diffNodes,
+  getValidHeadNodesAndAttributes,
+  removePrevHeadElements,
+  applyHtmlAndBodyAttributes,
+  removeHtmlAndBodyAttributes,
+} from "./utils"
+import { apiRunner } from "../api-runner-browser"
+
+const hiddenRoot = document.createElement(`div`)
+const keysOfHtmlAndBodyAttributes = {
+  html: [],
+  body: [],
+}
+
+const onHeadRendered = () => {
+  const { validHeadNodes, htmlAndBodyAttributes } =
+    getValidHeadNodesAndAttributes(hiddenRoot)
+
+  keysOfHtmlAndBodyAttributes.html = Object.keys(htmlAndBodyAttributes.html)
+  keysOfHtmlAndBodyAttributes.body = Object.keys(htmlAndBodyAttributes.body)
+
+  applyHtmlAndBodyAttributes(htmlAndBodyAttributes)
+
+  /**
+   * The rest of the code block below is a diffing mechanism to ensure that
+   * the head elements aren't duplicated on every re-render.
+   */
+  const existingHeadElements = document.querySelectorAll(`[data-gatsby-head]`)
+
+  if (existingHeadElements.length === 0) {
+    document.head.append(...validHeadNodes)
+    return
+  }
+
+  const newHeadNodes = []
+  diffNodes({
+    oldNodes: existingHeadElements,
+    newNodes: validHeadNodes,
+    onStale: node => node.parentNode.removeChild(node),
+    onNew: node => newHeadNodes.push(node),
+  })
+
+  document.head.append(...newHeadNodes)
+}
+
+if (process.env.BUILD_STAGE === `develop`) {
+  // sigh ... <html> and <body> elements are not valid descedents of <div> (our hidden element)
+  // react-dom in dev mode will warn about this. There doesn't seem to be a way to render arbitrary
+  // user Head without hitting this issue (our hidden element could be just "new Document()", but
+  // this can only have 1 child, and we don't control what is being rendered so that's not an option)
+  // instead we continue to render to <div>, and just silence warnings for <html> and <body> elements
+  // https://github.com/facebook/react/blob/e2424f33b3ad727321fc12e75c5e94838e84c2b5/packages/react-dom-bindings/src/client/validateDOMNesting.js#L498-L520
+  const originalConsoleError = console.error.bind(console)
+  console.error = (...args) => {
+    if (
+      Array.isArray(args) &&
+      args.length >= 2 &&
+      args[0]?.includes?.(`validateDOMNesting(...): %s cannot appear as`) &&
+      (args[1] === `<html>` || args[1] === `<body>`)
+    ) {
+      return undefined
+    }
+    return originalConsoleError(...args)
+  }
+
+  /* We set up observer to be able to regenerate <head> after react-refresh
+     updates our hidden element.
+  */
+  const observer = new MutationObserver(onHeadRendered)
+  observer.observe(hiddenRoot, {
+    attributes: true,
+    childList: true,
+    characterData: true,
+    subtree: true,
+  })
+}
+
+// React 19 does not allow rendering a second `<html>` or `<body>` anywhere in the tree:
+// https://github.com/facebook/react/blob/50e7ec8a694072fd6fcd52182df8a75211bf084d/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L3739
+// Unfortunately, our Head API relies on users being able to render these elements, which we then
+// render in a hidden `<div>` to extract attributes to apply to the real `<html>` and `<body>`.
+// We explored several alternatives, but none were viable given React's constraints.
+// To work around this, we intercept attempts to render these elements inside of
+// Head and replace them with custom components that render as `<div>`s with a
+// `data-original-tag` attribute. We can then use this attribute later to apply
+// attributes to the real `<html>` and `<body>` elements.
+// Additionally other head elements are subject to React's new hoisting behavior,
+// which has some differences from how Gatsby Head API works, so we do append `itemProp`
+// which prevents React from hoisting those elements:
+// https://github.com/facebook/react/blob/50e7ec8a694072fd6fcd52182df8a75211bf084d/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L5824
+// we later will remove this attribute if it has our custom value before appending to real head.
+
+// De-risk monkey patch by only applying it when needed (React 19+, not React 18)
+const reactMajor = parseInt(React.version.split(`.`)[0], 10)
+if (reactMajor !== 18 && !React.createElement.headPatched) {
+  const originalCreateElement = React.createElement
+  const validHeadComponentReplacements = getValidHeadComponentReplacements(
+    originalCreateElement,
+    false
+  )
+  React.createElement = function patchedCreateElement(type, props, ...rest) {
+    const headReplacement = validHeadComponentReplacements.get(type)
+    if (headReplacement) {
+      type = headReplacement
+    }
+
+    return originalCreateElement.call(React, type, props, ...rest)
+  }
+
+  React.createElement.headPatched = true
+}
+export function headHandlerForBrowser({
+  pageComponent,
+  staticQueryResults,
+  pageComponentProps,
+}) {
+  useEffect(() => {
+    if (pageComponent?.Head) {
+      headExportValidator(pageComponent.Head)
+
+      const { render } = reactDOMUtils()
+
+      const HeadElement = (
+        <pageComponent.Head {...filterHeadProps(pageComponentProps)} />
+      )
+
+      const WrapHeadElement = apiRunner(
+        `wrapRootElement`,
+        { element: HeadElement },
+        HeadElement,
+        ({ result }) => {
+          return { element: result }
+        }
+      ).pop()
+
+      render(
+        // just a hack to call the callback after react has done first render
+        // Note: In dev, we call onHeadRendered twice( in FireCallbackInEffect and after mutualution observer dectects initail render into hiddenRoot) this is for hot reloading
+        // In Prod we only call onHeadRendered in FireCallbackInEffect to render to head
+        <FireCallbackInEffect callback={onHeadRendered}>
+          <IsHeadRenderContext.Provider value={true}>
+            <StaticQueryContext.Provider value={staticQueryResults}>
+              <LocationProvider>{WrapHeadElement}</LocationProvider>
+            </StaticQueryContext.Provider>
+          </IsHeadRenderContext.Provider>
+        </FireCallbackInEffect>,
+        hiddenRoot
+      )
+    }
+
+    return () => {
+      removePrevHeadElements()
+      removeHtmlAndBodyAttributes(keysOfHtmlAndBodyAttributes)
+    }
+  })
+}

package/cache-dir/head/head-export-handler-for-ssr.js

@@ -0,0 +1,237 @@
+const React = require(`react`)
+const { grabMatchParams } = require(`../find-path`)
+const { StaticQueryContext } = require(`gatsby`)
+const {
+  headExportValidator,
+  filterHeadProps,
+  isElementType,
+  isValidNodeName,
+  warnForInvalidTag,
+} = require(`./utils`)
+const { ServerLocation, Router } = require(`@gatsbyjs/reach-router`)
+const { renderToString } = require(`react-dom/server`)
+const { parse } = require(`node-html-parser`)
+const styleToOjbect = require(`style-to-object`)
+
+import {
+  ITEM_PROP_WORKAROUND_KEY,
+  ITEM_PROP_WORKAROUND_VALUE,
+  HTML_BODY_ORIGINAL_TAG_ATTRIBUTE_KEY,
+} from "./constants"
+import { getValidHeadComponentReplacements } from "./components/head-components"
+import { apiRunner } from "../api-runner-ssr"
+
+export function applyHtmlAndBodyAttributesSSR(
+  htmlAndBodyAttributes,
+  { setHtmlAttributes, setBodyAttributes }
+) {
+  if (!htmlAndBodyAttributes) return
+
+  const { html, body } = htmlAndBodyAttributes
+
+  setHtmlAttributes(html)
+  setBodyAttributes(body)
+}
+
+export function getValidHeadNodesAndAttributesSSR(
+  rootNode,
+  htmlAndBodyAttributes = {
+    html: {},
+    body: {},
+  }
+) {
+  const seenIds = new Map()
+  const validHeadNodes = []
+
+  // Filter out non-element nodes before looping since we don't care about them
+  for (const node of rootNode.childNodes) {
+    const { rawTagName } = node
+    const id = node.attributes?.id
+
+    if (!isElementType(node)) continue
+
+    const NodeName =
+      node.attributes?.[HTML_BODY_ORIGINAL_TAG_ATTRIBUTE_KEY] ?? rawTagName
+
+    if (isValidNodeName(NodeName)) {
+      if (NodeName === `html` || NodeName === `body`) {
+        const { style, ...nonStyleAttributes } = node.attributes
+
+        htmlAndBodyAttributes[NodeName] = {
+          ...htmlAndBodyAttributes[NodeName],
+          ...nonStyleAttributes,
+        }
+
+        // Unfortunately renderToString converts inline styles to a string, so we have to convert them back to an object
+        if (style) {
+          htmlAndBodyAttributes[NodeName].style = {
+            ...htmlAndBodyAttributes[NodeName]?.style,
+            ...styleToOjbect(style),
+          }
+        }
+      } else {
+        let element
+        const attributes = { ...node.attributes, "data-gatsby-head": true }
+
+        if (
+          attributes[ITEM_PROP_WORKAROUND_KEY] === ITEM_PROP_WORKAROUND_VALUE
+        ) {
+          delete attributes[ITEM_PROP_WORKAROUND_KEY]
+        }
+
+        if (NodeName === `script` || NodeName === `style`) {
+          element = (
+            <NodeName
+              {...attributes}
+              dangerouslySetInnerHTML={{
+                __html: node.text,
+              }}
+            />
+          )
+        } else {
+          element =
+            node.textContent.length > 0 ? (
+              <NodeName {...attributes}>{node.textContent}</NodeName>
+            ) : (
+              <NodeName {...attributes} />
+            )
+        }
+
+        if (id) {
+          if (!seenIds.has(id)) {
+            validHeadNodes.push(element)
+            seenIds.set(id, validHeadNodes.length - 1)
+          } else {
+            const indexOfPreviouslyInsertedNode = seenIds.get(id)
+            validHeadNodes[indexOfPreviouslyInsertedNode] = element
+          }
+        } else {
+          validHeadNodes.push(element)
+        }
+      }
+    } else {
+      warnForInvalidTag(rawTagName)
+    }
+
+    if (node.childNodes.length) {
+      validHeadNodes.push(
+        ...getValidHeadNodesAndAttributesSSR(node, htmlAndBodyAttributes)
+          .validHeadNodes
+      )
+    }
+  }
+
+  return { validHeadNodes, htmlAndBodyAttributes }
+}
+
+// see explanation in "head-export-handler-for-browser.js" module for reasons behind this patching
+let applyCreateElementPatch = undefined
+let revertCreateElementPatch = undefined
+let needToRevertCreateElementPatch = false
+
+const reactMajor = parseInt(React.version.split(`.`)[0], 10)
+if (reactMajor !== 18) {
+  const originalCreateElement = React.createElement
+  const validHeadComponentReplacements = getValidHeadComponentReplacements(
+    originalCreateElement,
+    true
+  )
+
+  function patchedCreateElement(type, props, ...rest) {
+    const headReplacement = validHeadComponentReplacements.get(type)
+    if (headReplacement) {
+      type = headReplacement
+    }
+
+    return originalCreateElement.call(React, type, props, ...rest)
+  }
+
+  applyCreateElementPatch = () => {
+    needToRevertCreateElementPatch = true
+    React.createElement = patchedCreateElement
+  }
+
+  revertCreateElementPatch = () => {
+    if (needToRevertCreateElementPatch) {
+      React.createElement = originalCreateElement
+      needToRevertCreateElementPatch = false
+    }
+  }
+}
+
+// if this sync function is changed to async one, make sure to cover potential React.createElement patching as
+// current handling relies on it being sync and we can just modify React.createElement temporarily without checking context of render
+// (check how it's done in "head-export-handler-for-browser.js" module for potential solution)
+export function headHandlerForSSR({
+  pageComponent,
+  setHeadComponents,
+  setHtmlAttributes,
+  setBodyAttributes,
+  staticQueryContext,
+  pageData,
+  pagePath,
+}) {
+  if (pageComponent?.Head) {
+    try {
+      headExportValidator(pageComponent.Head)
+
+      function HeadRouteHandler(props) {
+        const _props = {
+          ...props,
+          ...pageData.result,
+          params: {
+            ...grabMatchParams(props.location.pathname),
+            ...(pageData.result?.pageContext?.__params || {}),
+          },
+        }
+
+        const HeadElement = <pageComponent.Head {...filterHeadProps(_props)} />
+
+        const headWithWrapRootElement = apiRunner(
+          `wrapRootElement`,
+          { element: HeadElement },
+          HeadElement,
+          ({ result }) => {
+            return { element: result }
+          }
+        ).pop()
+
+        return headWithWrapRootElement
+      }
+
+      const routerElement = (
+        <StaticQueryContext.Provider value={staticQueryContext}>
+          <ServerLocation url={`${__BASE_PATH__}${pagePath}`}>
+            <Router
+              baseuri={__BASE_PATH__}
+              component={({ children }) => <>{children}</>}
+            >
+              <HeadRouteHandler path="/*" />
+            </Router>
+          </ServerLocation>
+        </StaticQueryContext.Provider>
+      )
+
+      applyCreateElementPatch?.()
+
+      const rawString = renderToString(routerElement)
+
+      revertCreateElementPatch?.()
+
+      const rootNode = parse(rawString)
+      const { validHeadNodes, htmlAndBodyAttributes } =
+        getValidHeadNodesAndAttributesSSR(rootNode)
+
+      applyHtmlAndBodyAttributesSSR(htmlAndBodyAttributes, {
+        setHtmlAttributes,
+        setBodyAttributes,
+      })
+
+      setHeadComponents(validHeadNodes)
+    } catch (e) {
+      // make sure that we don't leave this function without reverting the patch
+      revertCreateElementPatch?.()
+      throw e
+    }
+  }
+}