next
Version:
The React Framework
216 lines (215 loc) • 7.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.initScriptLoader = initScriptLoader;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _headManagerContext = require("../shared/lib/head-manager-context");
var _headManager = require("./head-manager");
var _requestIdleCallback = require("./request-idle-callback");
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {
};
if (obj != null) {
for(var key in obj){
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
};
if (desc.get || desc.set) {
Object.defineProperty(newObj, key, desc);
} else {
newObj[key] = obj[key];
}
}
}
}
newObj.default = obj;
return newObj;
}
}
function _objectSpread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {
};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {
};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {
};
var target = {
};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
const ScriptCache = new Map();
const LoadCache = new Set();
const ignoreProps = [
'onLoad',
'dangerouslySetInnerHTML',
'children',
'onError',
'strategy',
];
const loadScript = (props)=>{
const { src , id , onLoad =()=>{
} , dangerouslySetInnerHTML , children ='' , strategy ='afterInteractive' , onError , } = 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);
// Execute onLoad since the script loading has begun
ScriptCache.get(src).then(onLoad, onError);
return;
}
const el = document.createElement('script');
const loadPromise = new Promise((resolve, reject)=>{
el.addEventListener('load', function(e) {
resolve();
if (onLoad) {
onLoad.call(this, e);
}
});
el.addEventListener('error', function(e) {
reject(e);
});
}).catch(function(e) {
if (onError) {
onError(e);
}
});
if (src) {
ScriptCache.set(src, loadPromise);
}
LoadCache.add(cacheKey);
if (dangerouslySetInnerHTML) {
el.innerHTML = dangerouslySetInnerHTML.__html || '';
} else if (children) {
el.textContent = typeof children === 'string' ? children : Array.isArray(children) ? children.join('') : '';
} else if (src) {
el.src = src;
}
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);
}
el.setAttribute('data-nscript', strategy);
document.body.appendChild(el);
};
function handleClientScriptLoad(props) {
const { strategy ='afterInteractive' } = props;
if (strategy === 'afterInteractive') {
loadScript(props);
} else if (strategy === 'lazyOnload') {
window.addEventListener('load', ()=>{
(0, _requestIdleCallback).requestIdleCallback(()=>loadScript(props)
);
});
}
}
function loadLazyScript(props) {
if (document.readyState === 'complete') {
(0, _requestIdleCallback).requestIdleCallback(()=>loadScript(props)
);
} else {
window.addEventListener('load', ()=>{
(0, _requestIdleCallback).requestIdleCallback(()=>loadScript(props)
);
});
}
}
function initScriptLoader(scriptLoaderItems) {
scriptLoaderItems.forEach(handleClientScriptLoad);
}
function Script(props) {
const { src ='' , onLoad =()=>{
} , dangerouslySetInnerHTML , strategy ='afterInteractive' , onError } = props, restProps = _objectWithoutProperties(props, ["src", "onLoad", "dangerouslySetInnerHTML", "strategy", "onError"]);
// Context is available only during SSR
const { updateScripts , scripts , getIsSsr } = (0, _react).useContext(_headManagerContext.HeadManagerContext);
(0, _react).useEffect(()=>{
if (strategy === 'afterInteractive') {
loadScript(props);
} else if (strategy === 'lazyOnload') {
loadLazyScript(props);
}
}, [
props,
strategy
]);
if (strategy === 'beforeInteractive') {
if (updateScripts) {
scripts.beforeInteractive = (scripts.beforeInteractive || []).concat([
_objectSpread({
src,
onLoad,
onError
}, restProps),
]);
updateScripts(scripts);
} else if (getIsSsr && getIsSsr()) {
// Script has already loaded during SSR
LoadCache.add(restProps.id || src);
} else if (getIsSsr && !getIsSsr()) {
loadScript(props);
}
}
return null;
}
var _default = Script;
exports.default = _default;
//# sourceMappingURL=script.js.map