Third Party Libraries

Copy  "exports": {
    "./google": {
      "types": "./dist/google/index.d.ts",
      "default": "./dist/google/index.js"
    }
  },

Copyexport { default as GoogleMapsEmbed } from './google-maps-embed'
export { default as YouTubeEmbed } from './youtube-embed'
export { GoogleTagManager, sendGTMEvent } from './gtm'
export { GoogleAnalytics, sendGAEvent } from './ga'

Copyfunction Script(props: ScriptProps): JSX.Element | null {
  const {
    id,
    src = '',
    onLoad = () => {},
    onReady = null,
    strategy = 'afterInteractive',
    onError,
    stylesheets,
    ...restProps
  } = props

Copyconst hasOnReadyEffectCalled = useRef(false)
 
useEffect(() => {
  const cacheKey = id || src
  if (!hasOnReadyEffectCalled.current) {
    // Run onReady if script has loaded before but component is re-mounted
    if (onReady && cacheKey && LoadCache.has(cacheKey)) {
      onReady()
    }
 
    hasOnReadyEffectCalled.current = true
  }
}, [onReady, id, src])
 
const hasLoadScriptEffectCalled = useRef(false)
 
useEffect(() => {
  if (!hasLoadScriptEffectCalled.current) {
    if (strategy === 'afterInteractive') {
      loadScript(props)
    } else if (strategy === 'lazyOnload') {
      loadLazyScript(props)
    }
 
    hasLoadScriptEffectCalled.current = true
  }
}, [props, strategy])

Copy// Before interactive scripts need to be loaded by Next.js' runtime instead
// of native <script> tags, because they no longer have `defer`.
if (strategy === 'beforeInteractive') {
  if (!src) {
    // For inlined scripts, we put the content in `children`.
    if (restProps.dangerouslySetInnerHTML) {
      // Casting since lib.dom.d.ts doesn't have TrustedHTML yet.
      restProps.children = restProps.dangerouslySetInnerHTML
        .__html as string
      delete restProps.dangerouslySetInnerHTML
    }
 
    return (
      <script
        nonce={nonce}
        dangerouslySetInnerHTML={{
          __html: `(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString(
            JSON.stringify([0, { ...restProps, id }])
          )})`,
        }}
      />
    )
  } else {
    // @ts-ignore
    ReactDOM.preload(
      src,
      restProps.integrity
        ? {
            as: 'script',
            integrity: restProps.integrity,
            nonce,
            crossOrigin: restProps.crossOrigin,
          }
        : { as: 'script', nonce, crossOrigin: restProps.crossOrigin }
    )
    return (
      <script
        nonce={nonce}
        dangerouslySetInnerHTML={{
          __html: `(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString(
            JSON.stringify([src, { ...restProps, id }])
          )})`,
        }}
      />
    )
  }

Copyexport function GoogleAnalytics(props: GAParams) {
  const { gaId, debugMode, dataLayerName = 'dataLayer', nonce } = props
 
  if (currDataLayerName === undefined) {
    currDataLayerName = dataLayerName
  }
 
  useEffect(() => {
    // performance.mark is being used as a feature use signal. While it is traditionally used for performance
    // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
    // existing API.
    // The performance measurement will be handled by Chrome Aurora
 
    performance.mark('mark_feature_usage', {
      detail: {
        feature: 'next-third-parties-ga',
      },
    })
  }, [])
 
  return (
    <>
      <Script
        id="_next-ga-init"
        dangerouslySetInnerHTML={{
          __html: `
          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
          function gtag(){window['${dataLayerName}'].push(arguments);}
          gtag('js', new Date());
 
          gtag('config', '${gaId}' ${debugMode ? ",{ 'debug_mode': true }" : ''});`,
        }}
        nonce={nonce}
      />
      <Script
        id="_next-ga"
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
        nonce={nonce}
      />
    </>
  )

Copyexport function sendGAEvent(..._args: Object[]) {
  if (currDataLayerName === undefined) {
    console.warn(`@next/third-parties: GA has not been initialized`)
    return
  }
 
  if (window[currDataLayerName]) {
    window[currDataLayerName].push(arguments)
  } else {
    console.warn(
      `@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`
    )
  }
}

Copyexport const sendGTMEvent = (data: Object, dataLayerName?: string) => {
  // special case if we are sending events before GTM init and we have custom dataLayerName
  const dataLayer = dataLayerName || currDataLayerName
  // define dataLayer so we can still queue up events before GTM init
  window[dataLayer] = window[dataLayer] || []
  window[dataLayer].push(data)
}

Copyexport type ScriptEmbed = {
  html?: string | null
  height?: string | number | null
  width?: string | number | null
  children?: React.ReactElement | React.ReactElement[]
  dataNtpc?: string
}

CopyuseEffect(() => {
  if (dataNtpc) {
    // performance.mark is being used as a feature use signal. While it is traditionally used for performance
    // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
    // existing API.
    performance.mark('mark_feature_usage', {
      detail: {
        feature: `next-third-parties-${dataNtpc}`,
      },
    })
  }
}, [dataNtpc])

Copyreturn (
  <>
    {/* insert script children */}
    {children}
    {/* insert html */}
    {html ? (
      <div
        style={{
          height: height != null ? `${height}px` : 'auto',
          width: width != null ? `${width}px` : 'auto',
        }}
        data-ntpc={dataNtpc}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    ) : null}
  </>
)

Copyexport type YouTubeEmbed = {
  height?: number
  width?: number
  videoid: string
  playlabel?: string
  params?: string
  style?: string
}

Copyconst scriptStrategy = {
  server: 'beforeInteractive',
  client: 'afterInteractive',
  idle: 'lazyOnload',
  worker: 'worker',
}

Copyexport default function YouTubeEmbed(props: YouTubeEmbedTypes) {
  const { html, scripts, stylesheets } = TPCYouTubeEmbed(props)
 
  return (
    <ThirdPartyScriptEmbed
      height={props.height || null}
      width={props.width || null}
      html={html}
      dataNtpc="YouTubeEmbed"
    >
      {scripts?.map((script) => (
        <Script
          key={script.url}
          src={script.url}
          strategy={scriptStrategy[script.strategy] as ScriptProps['strategy']}
          stylesheets={stylesheets}
        />
      ))}
    </ThirdPartyScriptEmbed>
  )

Copyexport type GoogleMapsEmbed = {
  height?: number | string
  width?: number | string
  mode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
  apiKey: string
  style?: string
  allowfullscreen?: boolean
  loading?: 'eager' | 'lazy'
  q?: string
  id?: string
  center?: string
  zoom?: string
  maptype?: string
  language?: string
  region?: string
}

Copyexport default function GoogleMapsEmbed(props: GoogleMapsEmbedTypes) {
  const { apiKey, ...restProps } = props
  const formattedProps = { ...restProps, key: apiKey }
  const { html } = TPCGoogleMapEmbed(formattedProps)
 
  return (
    <ThirdPartyScriptEmbed
      height={formattedProps.height || null}
      width={formattedProps.width || null}
      html={html}
      dataNtpc="GoogleMapsEmbed"
    ></ThirdPartyScriptEmbed>
  )