"use client";
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
handleClientScriptLoad: null,
initScriptLoader: null,
default: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
handleClientScriptLoad: function() {
return handleClientScriptLoad;
},
initScriptLoader: function() {
return initScriptLoader;
},
default: function() {
return _default;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactdom = /*#__PURE__*/ _interop_require_default._(require("react-dom"));
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _headmanagercontextsharedruntime = require("../shared/lib/head-manager-context.shared-runtime");
const _headmanager = require("./head-manager");
const _requestidlecallback = require("./request-idle-callback");
const ScriptCache = new Map();
const LoadCache = new Set();
const ignoreProps = [
"onLoad",
"onReady",
"dangerouslySetInnerHTML",
"children",
"onError",
"strategy",
"stylesheets"
];
const insertStylesheets = (stylesheets)=>{
// Case 1: Styles for afterInteractive/lazyOnload with appDir injected via handleClientScriptLoad
//
// Using ReactDOM.preinit to feature detect appDir and inject styles
// Stylesheets might have already been loaded if initialized with Script component
// Re-inject styles here to handle scripts loaded via handleClientScriptLoad
// ReactDOM.preinit handles dedup and ensures the styles are loaded only once
if (_reactdom.default.preinit) {
stylesheets.forEach((stylesheet)=>{
_reactdom.default.preinit(stylesheet, {
as: "style"
});
});
return;
}
// Case 2: Styles for afterInteractive/lazyOnload with pages injected via handleClientScriptLoad
//
// We use this function to load styles when appdir is not detected
// TODO: Use React float APIs to load styles once available for pages dir
if (typeof window !== "undefined") {
let head = document.head;
stylesheets.forEach((stylesheet)=>{
let link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = stylesheet;
head.appendChild(link);
});
}
};
const loadScript = (props)=>{
const { src, id, onLoad = ()=>{}, onReady = null, dangerouslySetInnerHTML, children = "", strategy = "afterInteractive", onError, stylesheets } = props;
const cacheKey = id || src;
// Script has already loaded
if (cacheKey && LoadCache.has(cacheKey)) {
return;
}
// Contents of this script are already loading/loaded
if (ScriptCache.has(src)) {
LoadCache.add(cacheKey);
// It is possible that multiple `next/script` components all have same "src", but has different "onLoad"
// This is to make sure the same remote script will only load once, but "onLoad" are executed in order
ScriptCache.get(src).then(onLoad, onError);
return;
}
/** Execute after the script first loaded */ const afterLoad = ()=>{
// Run onReady for the first time after load event
if (onReady) {
onReady();
}
// add cacheKey to LoadCache when load successfully
LoadCache.add(cacheKey);
};
const el = document.createElement("script");
const loadPromise = new Promise((resolve, reject)=>{
el.addEventListener("load", function(e) {
resolve();
if (onLoad) {
onLoad.call(this, e);
}
afterLoad();
});
el.addEventListener("error", function(e) {
reject(e);
});
}).catch(function(e) {
if (onError) {
onError(e);
}
});
if (dangerouslySetInnerHTML) {
// Casting since lib.dom.d.ts doesn't have TrustedHTML yet.
el.innerHTML = dangerouslySetInnerHTML.__html || "";
afterLoad();
} else if (children) {
el.textContent = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
afterLoad();
} else if (src) {
el.src = src;
// do not add cacheKey into LoadCache for remote script here
// cacheKey will be added to LoadCache when it is actually loaded (see loadPromise above)
ScriptCache.set(src, loadPromise);
}
for (const [k, value] of Object.entries(props)){
if (value === undefined || ignoreProps.includes(k)) {
continue;
}
const attr = _headmanager.DOMAttributeNames[k] || k.toLowerCase();
el.setAttribute(attr, value);
}
if (strategy === "worker") {
el.setAttribute("type", "text/partytown");
}
el.setAttribute("data-nscript", strategy);
// Load styles associated with this script
if (stylesheets) {
insertStylesheets(stylesheets);
}
document.body.appendChild(el);
};
function handleClientScriptLoad(props) {
const { strategy = "afterInteractive" } = props;
if (strategy === "lazyOnload") {
window.addEventListener("load", ()=>{
(0, _requestidlecallback.requestIdleCallback)(()=>loadScript(props));
});
} else {
loadScript(props);
}
}
function loadLazyScript(props) {
if (document.readyState === "complete") {
(0, _requestidlecallback.requestIdleCallback)(()=>loadScript(props));
} else {
window.addEventListener("load", ()=>{
(0, _requestidlecallback.requestIdleCallback)(()=>loadScript(props));
});
}
}
function addBeforeInteractiveToCache() {
const scripts = [
...document.querySelectorAll('[data-nscript="beforeInteractive"]'),
...document.querySelectorAll('[data-nscript="beforePageRender"]')
];
scripts.forEach((script)=>{
const cacheKey = script.id || script.getAttribute("src");
LoadCache.add(cacheKey);
});
}
function initScriptLoader(scriptLoaderItems) {
scriptLoaderItems.forEach(handleClientScriptLoad);
addBeforeInteractiveToCache();
}
function Script(props) {
const { id, src = "", onLoad = ()=>{}, onReady = null, strategy = "afterInteractive", onError, stylesheets, ...restProps } = props;
// Context is available only during SSR
const { updateScripts, scripts, getIsSsr, appDir, nonce } = (0, _react.useContext)(_headmanagercontextsharedruntime.HeadManagerContext);
/**
* - First mount:
* 1. The useEffect for onReady executes
* 2. hasOnReadyEffectCalled.current is false, but the script hasn't loaded yet (not in LoadCache)
* onReady is skipped, set hasOnReadyEffectCalled.current to true
* 3. The useEffect for loadScript executes
* 4. hasLoadScriptEffectCalled.current is false, loadScript executes
* Once the script is loaded, the onLoad and onReady will be called by then
* [If strict mode is enabled / is wrapped in component]
* 5. The useEffect for onReady executes again
* 6. hasOnReadyEffectCalled.current is true, so entire effect is skipped
* 7. The useEffect for loadScript executes again
* 8. hasLoadScriptEffectCalled.current is true, so entire effect is skipped
*
* - Second mount:
* 1. The useEffect for onReady executes
* 2. hasOnReadyEffectCalled.current is false, but the script has already loaded (found in LoadCache)
* onReady is called, set hasOnReadyEffectCalled.current to true
* 3. The useEffect for loadScript executes
* 4. The script is already loaded, loadScript bails out
* [If strict mode is enabled / is wrapped in component]
* 5. The useEffect for onReady executes again
* 6. hasOnReadyEffectCalled.current is true, so entire effect is skipped
* 7. The useEffect for loadScript executes again
* 8. hasLoadScriptEffectCalled.current is true, so entire effect is skipped
*/ const hasOnReadyEffectCalled = (0, _react.useRef)(false);
(0, _react.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 = (0, _react.useRef)(false);
(0, _react.useEffect)(()=>{
if (!hasLoadScriptEffectCalled.current) {
if (strategy === "afterInteractive") {
loadScript(props);
} else if (strategy === "lazyOnload") {
loadLazyScript(props);
}
hasLoadScriptEffectCalled.current = true;
}
}, [
props,
strategy
]);
if (strategy === "beforeInteractive" || strategy === "worker") {
if (updateScripts) {
scripts[strategy] = (scripts[strategy] || []).concat([
{
id,
src,
onLoad,
onReady,
onError,
...restProps
}
]);
updateScripts(scripts);
} else if (getIsSsr && getIsSsr()) {
// Script has already loaded during SSR
LoadCache.add(id || src);
} else if (getIsSsr && !getIsSsr()) {
loadScript(props);
}
}
// For the app directory, we need React Float to preload these scripts.
if (appDir) {
// Injecting stylesheets here handles beforeInteractive and worker scripts correctly
// For other strategies injecting here ensures correct stylesheet order
// ReactDOM.preinit handles loading the styles in the correct order,
// also ensures the stylesheet is loaded only once and in a consistent manner
//
// Case 1: Styles for beforeInteractive/worker with appDir - handled here
// Case 2: Styles for beforeInteractive/worker with pages dir - Not handled yet
// Case 3: Styles for afterInteractive/lazyOnload with appDir - handled here
// Case 4: Styles for afterInteractive/lazyOnload with pages dir - handled in insertStylesheets function
if (stylesheets) {
stylesheets.forEach((styleSrc)=>{
_reactdom.default.preinit(styleSrc, {
as: "style"
});
});
}
// Before interactive scripts need to be loaded by Next.js' runtime instead
// of native