{"version":3,"sources":["../../src/client/script.tsx"],"sourcesContent":["'use client'\n\nimport ReactDOM from 'react-dom'\nimport React, { useEffect, useContext, useRef, type JSX } from 'react'\nimport type { ScriptHTMLAttributes } from 'react'\nimport { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'\nimport { setAttributesFromProps } from './set-attributes-from-props'\nimport { requestIdleCallback } from './request-idle-callback'\n\nconst ScriptCache = new Map()\nconst LoadCache = new Set()\n\nexport interface ScriptProps extends ScriptHTMLAttributes {\n strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive' | 'worker'\n id?: string\n onLoad?: (e: any) => void\n onReady?: () => void | null\n onError?: (e: any) => void\n children?: React.ReactNode\n stylesheets?: string[]\n}\n\n/**\n * @deprecated Use `ScriptProps` instead.\n */\nexport type Props = ScriptProps\n\nconst insertStylesheets = (stylesheets: string[]) => {\n // Case 1: Styles for afterInteractive/lazyOnload with appDir injected via handleClientScriptLoad\n //\n // Using ReactDOM.preinit to feature detect appDir and inject styles\n // Stylesheets might have already been loaded if initialized with Script component\n // Re-inject styles here to handle scripts loaded via handleClientScriptLoad\n // ReactDOM.preinit handles dedup and ensures the styles are loaded only once\n if (ReactDOM.preinit) {\n stylesheets.forEach((stylesheet: string) => {\n ReactDOM.preinit(stylesheet, { as: 'style' })\n })\n\n return\n }\n\n // Case 2: Styles for afterInteractive/lazyOnload with pages injected via handleClientScriptLoad\n //\n // We use this function to load styles when appdir is not detected\n // TODO: Use React float APIs to load styles once available for pages dir\n if (typeof window !== 'undefined') {\n let head = document.head\n stylesheets.forEach((stylesheet: string) => {\n let link = document.createElement('link')\n\n link.type = 'text/css'\n link.rel = 'stylesheet'\n link.href = stylesheet\n\n head.appendChild(link)\n })\n }\n}\n\nconst loadScript = (props: ScriptProps): void => {\n const {\n src,\n id,\n onLoad = () => {},\n onReady = null,\n dangerouslySetInnerHTML,\n children = '',\n strategy = 'afterInteractive',\n onError,\n stylesheets,\n } = props\n\n const cacheKey = id || src\n\n // Script has already loaded\n if (cacheKey && LoadCache.has(cacheKey)) {\n return\n }\n\n // Contents of this script are already loading/loaded\n if (ScriptCache.has(src)) {\n LoadCache.add(cacheKey)\n // It is possible that multiple `next/script` components all have same \"src\", but has different \"onLoad\"\n // This is to make sure the same remote script will only load once, but \"onLoad\" are executed in order\n ScriptCache.get(src).then(onLoad, onError)\n return\n }\n\n /** Execute after the script first loaded */\n const afterLoad = () => {\n // Run onReady for the first time after load event\n if (onReady) {\n onReady()\n }\n // add cacheKey to LoadCache when load successfully\n LoadCache.add(cacheKey)\n }\n\n const el = document.createElement('script')\n\n const loadPromise = new Promise((resolve, reject) => {\n el.addEventListener('load', function (e) {\n resolve()\n if (onLoad) {\n onLoad.call(this, e)\n }\n afterLoad()\n })\n el.addEventListener('error', function (e) {\n reject(e)\n })\n }).catch(function (e) {\n if (onError) {\n onError(e)\n }\n })\n\n if (dangerouslySetInnerHTML) {\n // Casting since lib.dom.d.ts doesn't have TrustedHTML yet.\n el.innerHTML = (dangerouslySetInnerHTML.__html as string) || ''\n\n afterLoad()\n } else if (children) {\n el.textContent =\n typeof children === 'string'\n ? children\n : Array.isArray(children)\n ? children.join('')\n : ''\n\n afterLoad()\n } else if (src) {\n el.src = src\n // do not add cacheKey into LoadCache for remote script here\n // cacheKey will be added to LoadCache when it is actually loaded (see loadPromise above)\n\n ScriptCache.set(src, loadPromise)\n }\n\n setAttributesFromProps(el, props)\n\n if (strategy === 'worker') {\n el.setAttribute('type', 'text/partytown')\n }\n\n el.setAttribute('data-nscript', strategy)\n\n // Load styles associated with this script\n if (stylesheets) {\n insertStylesheets(stylesheets)\n }\n\n document.body.appendChild(el)\n}\n\nexport function handleClientScriptLoad(props: ScriptProps) {\n const { strategy = 'afterInteractive' } = props\n if (strategy === 'lazyOnload') {\n window.addEventListener('load', () => {\n requestIdleCallback(() => loadScript(props))\n })\n } else {\n loadScript(props)\n }\n}\n\nfunction loadLazyScript(props: ScriptProps) {\n if (document.readyState === 'complete') {\n requestIdleCallback(() => loadScript(props))\n } else {\n window.addEventListener('load', () => {\n requestIdleCallback(() => loadScript(props))\n })\n }\n}\n\nfunction addBeforeInteractiveToCache() {\n const scripts = [\n ...document.querySelectorAll('[data-nscript=\"beforeInteractive\"]'),\n ...document.querySelectorAll('[data-nscript=\"beforePageRender\"]'),\n ]\n scripts.forEach((script) => {\n const cacheKey = script.id || script.getAttribute('src')\n LoadCache.add(cacheKey)\n })\n}\n\nexport function initScriptLoader(scriptLoaderItems: ScriptProps[]) {\n scriptLoaderItems.forEach(handleClientScriptLoad)\n addBeforeInteractiveToCache()\n}\n\n/**\n * Load a third-party scripts in an optimized way.\n *\n * Read more: [Next.js Docs: `next/script`](https://nextjs.org/docs/app/api-reference/components/script)\n */\nfunction Script(props: ScriptProps): JSX.Element | null {\n const {\n id,\n src = '',\n onLoad = () => {},\n onReady = null,\n strategy = 'afterInteractive',\n onError,\n stylesheets,\n ...restProps\n } = props\n\n // Context is available only during SSR\n let { updateScripts, scripts, getIsSsr, appDir, nonce } =\n useContext(HeadManagerContext)\n\n // if a nonce is explicitly passed to the script tag, favor that over the automatic handling\n nonce = restProps.nonce || nonce\n\n /**\n * - First mount:\n * 1. The useEffect for onReady executes\n * 2. hasOnReadyEffectCalled.current is false, but the script hasn't loaded yet (not in LoadCache)\n * onReady is skipped, set hasOnReadyEffectCalled.current to true\n * 3. The useEffect for loadScript executes\n * 4. hasLoadScriptEffectCalled.current is false, loadScript executes\n * Once the script is loaded, the onLoad and onReady will be called by then\n * [If strict mode is enabled / is wrapped in component]\n * 5. The useEffect for onReady executes again\n * 6. hasOnReadyEffectCalled.current is true, so entire effect is skipped\n * 7. The useEffect for loadScript executes again\n * 8. hasLoadScriptEffectCalled.current is true, so entire effect is skipped\n *\n * - Second mount:\n * 1. The useEffect for onReady executes\n * 2. hasOnReadyEffectCalled.current is false, but the script has already loaded (found in LoadCache)\n * onReady is called, set hasOnReadyEffectCalled.current to true\n * 3. The useEffect for loadScript executes\n * 4. The script is already loaded, loadScript bails out\n * [If strict mode is enabled / is wrapped in component]\n * 5. The useEffect for onReady executes again\n * 6. hasOnReadyEffectCalled.current is true, so entire effect is skipped\n * 7. The useEffect for loadScript executes again\n * 8. hasLoadScriptEffectCalled.current is true, so entire effect is skipped\n */\n const hasOnReadyEffectCalled = useRef(false)\n\n useEffect(() => {\n const cacheKey = id || src\n if (!hasOnReadyEffectCalled.current) {\n // Run onReady if script has loaded before but component is re-mounted\n if (onReady && cacheKey && LoadCache.has(cacheKey)) {\n onReady()\n }\n\n hasOnReadyEffectCalled.current = true\n }\n }, [onReady, id, src])\n\n const hasLoadScriptEffectCalled = useRef(false)\n\n useEffect(() => {\n if (!hasLoadScriptEffectCalled.current) {\n if (strategy === 'afterInteractive') {\n loadScript(props)\n } else if (strategy === 'lazyOnload') {\n loadLazyScript(props)\n }\n\n hasLoadScriptEffectCalled.current = true\n }\n }, [props, strategy])\n\n if (strategy === 'beforeInteractive' || strategy === 'worker') {\n if (updateScripts) {\n scripts[strategy] = (scripts[strategy] || []).concat([\n {\n id,\n src,\n onLoad,\n onReady,\n onError,\n ...restProps,\n nonce,\n },\n ])\n updateScripts(scripts)\n } else if (getIsSsr && getIsSsr()) {\n // Script has already loaded during SSR\n LoadCache.add(id || src)\n } else if (getIsSsr && !getIsSsr()) {\n loadScript({\n ...props,\n nonce,\n })\n }\n }\n\n // For the app directory, we need React Float to preload these scripts.\n if (appDir) {\n // Injecting stylesheets here handles beforeInteractive and worker scripts correctly\n // For other strategies injecting here ensures correct stylesheet order\n // ReactDOM.preinit handles loading the styles in the correct order,\n // also ensures the stylesheet is loaded only once and in a consistent manner\n //\n // Case 1: Styles for beforeInteractive/worker with appDir - handled here\n // Case 2: Styles for beforeInteractive/worker with pages dir - Not handled yet\n // Case 3: Styles for afterInteractive/lazyOnload with appDir - handled here\n // Case 4: Styles for afterInteractive/lazyOnload with pages dir - handled in insertStylesheets function\n if (stylesheets) {\n stylesheets.forEach((styleSrc) => {\n ReactDOM.preinit(styleSrc, { as: 'style' })\n })\n }\n\n // Before interactive scripts need to be loaded by Next.js' runtime instead\n // of native