692 lines
36 KiB
JavaScript
692 lines
36 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { OPTIMIZED_FONT_PROVIDERS, NEXT_BUILTIN_DOCUMENT } from "../shared/lib/constants";
|
||
|
|
import { getPageFiles } from "../server/get-page-files";
|
||
|
|
import { htmlEscapeJsonString } from "../server/htmlescape";
|
||
|
|
import isError from "../lib/is-error";
|
||
|
|
import { HtmlContext, useHtmlContext } from "../shared/lib/html-context.shared-runtime";
|
||
|
|
/** Set of pages that have triggered a large data warning on production mode. */ const largePageDataWarnings = new Set();
|
||
|
|
function getDocumentFiles(buildManifest, pathname, inAmpMode) {
|
||
|
|
const sharedFiles = getPageFiles(buildManifest, "/_app");
|
||
|
|
const pageFiles = process.env.NEXT_RUNTIME !== "edge" && inAmpMode ? [] : getPageFiles(buildManifest, pathname);
|
||
|
|
return {
|
||
|
|
sharedFiles,
|
||
|
|
pageFiles,
|
||
|
|
allFiles: [
|
||
|
|
...new Set([
|
||
|
|
...sharedFiles,
|
||
|
|
...pageFiles
|
||
|
|
])
|
||
|
|
]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function getPolyfillScripts(context, props) {
|
||
|
|
// polyfills.js has to be rendered as nomodule without async
|
||
|
|
// It also has to be the first script to load
|
||
|
|
const { assetPrefix, buildManifest, assetQueryString, disableOptimizedLoading, crossOrigin } = context;
|
||
|
|
return buildManifest.polyfillFiles.filter((polyfill)=>polyfill.endsWith(".js") && !polyfill.endsWith(".module.js")).map((polyfill)=>/*#__PURE__*/ React.createElement("script", {
|
||
|
|
key: polyfill,
|
||
|
|
defer: !disableOptimizedLoading,
|
||
|
|
nonce: props.nonce,
|
||
|
|
crossOrigin: props.crossOrigin || crossOrigin,
|
||
|
|
noModule: true,
|
||
|
|
src: `${assetPrefix}/_next/${polyfill}${assetQueryString}`
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
function hasComponentProps(child) {
|
||
|
|
return !!child && !!child.props;
|
||
|
|
}
|
||
|
|
function AmpStyles({ styles }) {
|
||
|
|
if (!styles) return null;
|
||
|
|
// try to parse styles from fragment for backwards compat
|
||
|
|
const curStyles = Array.isArray(styles) ? styles : [];
|
||
|
|
if (// @ts-ignore Property 'props' does not exist on type ReactElement
|
||
|
|
styles.props && // @ts-ignore Property 'props' does not exist on type ReactElement
|
||
|
|
Array.isArray(styles.props.children)) {
|
||
|
|
const hasStyles = (el)=>{
|
||
|
|
var _el_props_dangerouslySetInnerHTML, _el_props;
|
||
|
|
return el == null ? void 0 : (_el_props = el.props) == null ? void 0 : (_el_props_dangerouslySetInnerHTML = _el_props.dangerouslySetInnerHTML) == null ? void 0 : _el_props_dangerouslySetInnerHTML.__html;
|
||
|
|
};
|
||
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
||
|
|
styles.props.children.forEach((child)=>{
|
||
|
|
if (Array.isArray(child)) {
|
||
|
|
child.forEach((el)=>hasStyles(el) && curStyles.push(el));
|
||
|
|
} else if (hasStyles(child)) {
|
||
|
|
curStyles.push(child);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/* Add custom styles before AMP styles to prevent accidental overrides */ return /*#__PURE__*/ React.createElement("style", {
|
||
|
|
"amp-custom": "",
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: curStyles.map((style)=>style.props.dangerouslySetInnerHTML.__html).join("").replace(/\/\*# sourceMappingURL=.*\*\//g, "").replace(/\/\*@ sourceURL=.*?\*\//g, "")
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function getDynamicChunks(context, props, files) {
|
||
|
|
const { dynamicImports, assetPrefix, isDevelopment, assetQueryString, disableOptimizedLoading, crossOrigin } = context;
|
||
|
|
return dynamicImports.map((file)=>{
|
||
|
|
if (!file.endsWith(".js") || files.allFiles.includes(file)) return null;
|
||
|
|
return /*#__PURE__*/ React.createElement("script", {
|
||
|
|
async: !isDevelopment && disableOptimizedLoading,
|
||
|
|
defer: !disableOptimizedLoading,
|
||
|
|
key: file,
|
||
|
|
src: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
nonce: props.nonce,
|
||
|
|
crossOrigin: props.crossOrigin || crossOrigin
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function getScripts(context, props, files) {
|
||
|
|
var _buildManifest_lowPriorityFiles;
|
||
|
|
const { assetPrefix, buildManifest, isDevelopment, assetQueryString, disableOptimizedLoading, crossOrigin } = context;
|
||
|
|
const normalScripts = files.allFiles.filter((file)=>file.endsWith(".js"));
|
||
|
|
const lowPriorityScripts = (_buildManifest_lowPriorityFiles = buildManifest.lowPriorityFiles) == null ? void 0 : _buildManifest_lowPriorityFiles.filter((file)=>file.endsWith(".js"));
|
||
|
|
return [
|
||
|
|
...normalScripts,
|
||
|
|
...lowPriorityScripts
|
||
|
|
].map((file)=>{
|
||
|
|
return /*#__PURE__*/ React.createElement("script", {
|
||
|
|
key: file,
|
||
|
|
src: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
nonce: props.nonce,
|
||
|
|
async: !isDevelopment && disableOptimizedLoading,
|
||
|
|
defer: !disableOptimizedLoading,
|
||
|
|
crossOrigin: props.crossOrigin || crossOrigin
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function getPreNextWorkerScripts(context, props) {
|
||
|
|
const { assetPrefix, scriptLoader, crossOrigin, nextScriptWorkers } = context;
|
||
|
|
// disable `nextScriptWorkers` in edge runtime
|
||
|
|
if (!nextScriptWorkers || process.env.NEXT_RUNTIME === "edge") return null;
|
||
|
|
try {
|
||
|
|
let { partytownSnippet } = __non_webpack_require__("@builder.io/partytown/integration");
|
||
|
|
const children = Array.isArray(props.children) ? props.children : [
|
||
|
|
props.children
|
||
|
|
];
|
||
|
|
// Check to see if the user has defined their own Partytown configuration
|
||
|
|
const userDefinedConfig = children.find((child)=>{
|
||
|
|
var _child_props_dangerouslySetInnerHTML, _child_props;
|
||
|
|
return hasComponentProps(child) && (child == null ? void 0 : (_child_props = child.props) == null ? void 0 : (_child_props_dangerouslySetInnerHTML = _child_props.dangerouslySetInnerHTML) == null ? void 0 : _child_props_dangerouslySetInnerHTML.__html.length) && "data-partytown-config" in child.props;
|
||
|
|
});
|
||
|
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, !userDefinedConfig && /*#__PURE__*/ React.createElement("script", {
|
||
|
|
"data-partytown-config": "",
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: `
|
||
|
|
partytown = {
|
||
|
|
lib: "${assetPrefix}/_next/static/~partytown/"
|
||
|
|
};
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}), /*#__PURE__*/ React.createElement("script", {
|
||
|
|
"data-partytown": "",
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: partytownSnippet()
|
||
|
|
}
|
||
|
|
}), (scriptLoader.worker || []).map((file, index)=>{
|
||
|
|
const { strategy, src, children: scriptChildren, dangerouslySetInnerHTML, ...scriptProps } = file;
|
||
|
|
let srcProps = {};
|
||
|
|
if (src) {
|
||
|
|
// Use external src if provided
|
||
|
|
srcProps.src = src;
|
||
|
|
} else if (dangerouslySetInnerHTML && dangerouslySetInnerHTML.__html) {
|
||
|
|
// Embed inline script if provided with dangerouslySetInnerHTML
|
||
|
|
srcProps.dangerouslySetInnerHTML = {
|
||
|
|
__html: dangerouslySetInnerHTML.__html
|
||
|
|
};
|
||
|
|
} else if (scriptChildren) {
|
||
|
|
// Embed inline script if provided with children
|
||
|
|
srcProps.dangerouslySetInnerHTML = {
|
||
|
|
__html: typeof scriptChildren === "string" ? scriptChildren : Array.isArray(scriptChildren) ? scriptChildren.join("") : ""
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
throw new Error("Invalid usage of next/script. Did you forget to include a src attribute or an inline script? https://nextjs.org/docs/messages/invalid-script");
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/ React.createElement("script", {
|
||
|
|
...srcProps,
|
||
|
|
...scriptProps,
|
||
|
|
type: "text/partytown",
|
||
|
|
key: src || index,
|
||
|
|
nonce: props.nonce,
|
||
|
|
"data-nscript": "worker",
|
||
|
|
crossOrigin: props.crossOrigin || crossOrigin
|
||
|
|
});
|
||
|
|
}));
|
||
|
|
} catch (err) {
|
||
|
|
if (isError(err) && err.code !== "MODULE_NOT_FOUND") {
|
||
|
|
console.warn(`Warning: ${err.message}`);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getPreNextScripts(context, props) {
|
||
|
|
const { scriptLoader, disableOptimizedLoading, crossOrigin } = context;
|
||
|
|
const webWorkerScripts = getPreNextWorkerScripts(context, props);
|
||
|
|
const beforeInteractiveScripts = (scriptLoader.beforeInteractive || []).filter((script)=>script.src).map((file, index)=>{
|
||
|
|
const { strategy, ...scriptProps } = file;
|
||
|
|
return /*#__PURE__*/ React.createElement("script", {
|
||
|
|
...scriptProps,
|
||
|
|
key: scriptProps.src || index,
|
||
|
|
defer: scriptProps.defer ?? !disableOptimizedLoading,
|
||
|
|
nonce: props.nonce,
|
||
|
|
"data-nscript": "beforeInteractive",
|
||
|
|
crossOrigin: props.crossOrigin || crossOrigin
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, webWorkerScripts, beforeInteractiveScripts);
|
||
|
|
}
|
||
|
|
function getHeadHTMLProps(props) {
|
||
|
|
const { crossOrigin, nonce, ...restProps } = props;
|
||
|
|
// This assignment is necessary for additional type checking to avoid unsupported attributes in <head>
|
||
|
|
const headProps = restProps;
|
||
|
|
return headProps;
|
||
|
|
}
|
||
|
|
function getAmpPath(ampPath, asPath) {
|
||
|
|
return ampPath || `${asPath}${asPath.includes("?") ? "&" : "?"}amp=1`;
|
||
|
|
}
|
||
|
|
function getNextFontLinkTags(nextFontManifest, dangerousAsPath, assetPrefix = "") {
|
||
|
|
if (!nextFontManifest) {
|
||
|
|
return {
|
||
|
|
preconnect: null,
|
||
|
|
preload: null
|
||
|
|
};
|
||
|
|
}
|
||
|
|
const appFontsEntry = nextFontManifest.pages["/_app"];
|
||
|
|
const pageFontsEntry = nextFontManifest.pages[dangerousAsPath];
|
||
|
|
const preloadedFontFiles = [
|
||
|
|
...appFontsEntry ?? [],
|
||
|
|
...pageFontsEntry ?? []
|
||
|
|
];
|
||
|
|
// If no font files should preload but there's an entry for the path, add a preconnect tag.
|
||
|
|
const preconnectToSelf = !!(preloadedFontFiles.length === 0 && (appFontsEntry || pageFontsEntry));
|
||
|
|
return {
|
||
|
|
preconnect: preconnectToSelf ? /*#__PURE__*/ React.createElement("link", {
|
||
|
|
"data-next-font": nextFontManifest.pagesUsingSizeAdjust ? "size-adjust" : "",
|
||
|
|
rel: "preconnect",
|
||
|
|
href: "/",
|
||
|
|
crossOrigin: "anonymous"
|
||
|
|
}) : null,
|
||
|
|
preload: preloadedFontFiles ? preloadedFontFiles.map((fontFile)=>{
|
||
|
|
const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile)[1];
|
||
|
|
return /*#__PURE__*/ React.createElement("link", {
|
||
|
|
key: fontFile,
|
||
|
|
rel: "preload",
|
||
|
|
href: `${assetPrefix}/_next/${encodeURI(fontFile)}`,
|
||
|
|
as: "font",
|
||
|
|
type: `font/${ext}`,
|
||
|
|
crossOrigin: "anonymous",
|
||
|
|
"data-next-font": fontFile.includes("-s") ? "size-adjust" : ""
|
||
|
|
});
|
||
|
|
}) : null
|
||
|
|
};
|
||
|
|
}
|
||
|
|
// Use `React.Component` to avoid errors from the RSC checks because
|
||
|
|
// it can't be imported directly in Server Components:
|
||
|
|
//
|
||
|
|
// import { Component } from 'react'
|
||
|
|
//
|
||
|
|
// More info: https://github.com/vercel/next.js/pull/40686
|
||
|
|
export class Head extends React.Component {
|
||
|
|
static #_ = this.contextType = HtmlContext;
|
||
|
|
getCssLinks(files) {
|
||
|
|
const { assetPrefix, assetQueryString, dynamicImports, crossOrigin, optimizeCss, optimizeFonts } = this.context;
|
||
|
|
const cssFiles = files.allFiles.filter((f)=>f.endsWith(".css"));
|
||
|
|
const sharedFiles = new Set(files.sharedFiles);
|
||
|
|
// Unmanaged files are CSS files that will be handled directly by the
|
||
|
|
// webpack runtime (`mini-css-extract-plugin`).
|
||
|
|
let unmangedFiles = new Set([]);
|
||
|
|
let dynamicCssFiles = Array.from(new Set(dynamicImports.filter((file)=>file.endsWith(".css"))));
|
||
|
|
if (dynamicCssFiles.length) {
|
||
|
|
const existing = new Set(cssFiles);
|
||
|
|
dynamicCssFiles = dynamicCssFiles.filter((f)=>!(existing.has(f) || sharedFiles.has(f)));
|
||
|
|
unmangedFiles = new Set(dynamicCssFiles);
|
||
|
|
cssFiles.push(...dynamicCssFiles);
|
||
|
|
}
|
||
|
|
let cssLinkElements = [];
|
||
|
|
cssFiles.forEach((file)=>{
|
||
|
|
const isSharedFile = sharedFiles.has(file);
|
||
|
|
if (!optimizeCss) {
|
||
|
|
cssLinkElements.push(/*#__PURE__*/ React.createElement("link", {
|
||
|
|
key: `${file}-preload`,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
rel: "preload",
|
||
|
|
href: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
as: "style",
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
const isUnmanagedFile = unmangedFiles.has(file);
|
||
|
|
cssLinkElements.push(/*#__PURE__*/ React.createElement("link", {
|
||
|
|
key: file,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
rel: "stylesheet",
|
||
|
|
href: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin,
|
||
|
|
"data-n-g": isUnmanagedFile ? undefined : isSharedFile ? "" : undefined,
|
||
|
|
"data-n-p": isUnmanagedFile ? undefined : isSharedFile ? undefined : ""
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
if (process.env.NODE_ENV !== "development" && optimizeFonts) {
|
||
|
|
cssLinkElements = this.makeStylesheetInert(cssLinkElements);
|
||
|
|
}
|
||
|
|
return cssLinkElements.length === 0 ? null : cssLinkElements;
|
||
|
|
}
|
||
|
|
getPreloadDynamicChunks() {
|
||
|
|
const { dynamicImports, assetPrefix, assetQueryString, crossOrigin } = this.context;
|
||
|
|
return dynamicImports.map((file)=>{
|
||
|
|
if (!file.endsWith(".js")) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/ React.createElement("link", {
|
||
|
|
rel: "preload",
|
||
|
|
key: file,
|
||
|
|
href: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
as: "script",
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin
|
||
|
|
});
|
||
|
|
})// Filter out nulled scripts
|
||
|
|
.filter(Boolean);
|
||
|
|
}
|
||
|
|
getPreloadMainLinks(files) {
|
||
|
|
const { assetPrefix, assetQueryString, scriptLoader, crossOrigin } = this.context;
|
||
|
|
const preloadFiles = files.allFiles.filter((file)=>{
|
||
|
|
return file.endsWith(".js");
|
||
|
|
});
|
||
|
|
return [
|
||
|
|
...(scriptLoader.beforeInteractive || []).map((file)=>/*#__PURE__*/ React.createElement("link", {
|
||
|
|
key: file.src,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
rel: "preload",
|
||
|
|
href: file.src,
|
||
|
|
as: "script",
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin
|
||
|
|
})),
|
||
|
|
...preloadFiles.map((file)=>/*#__PURE__*/ React.createElement("link", {
|
||
|
|
key: file,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
rel: "preload",
|
||
|
|
href: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
as: "script",
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin
|
||
|
|
}))
|
||
|
|
];
|
||
|
|
}
|
||
|
|
getBeforeInteractiveInlineScripts() {
|
||
|
|
const { scriptLoader } = this.context;
|
||
|
|
const { nonce, crossOrigin } = this.props;
|
||
|
|
return (scriptLoader.beforeInteractive || []).filter((script)=>!script.src && (script.dangerouslySetInnerHTML || script.children)).map((file, index)=>{
|
||
|
|
const { strategy, children, dangerouslySetInnerHTML, src, ...scriptProps } = file;
|
||
|
|
let html = "";
|
||
|
|
if (dangerouslySetInnerHTML && dangerouslySetInnerHTML.__html) {
|
||
|
|
html = dangerouslySetInnerHTML.__html;
|
||
|
|
} else if (children) {
|
||
|
|
html = typeof children === "string" ? children : Array.isArray(children) ? children.join("") : "";
|
||
|
|
}
|
||
|
|
return /*#__PURE__*/ React.createElement("script", {
|
||
|
|
...scriptProps,
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: html
|
||
|
|
},
|
||
|
|
key: scriptProps.id || index,
|
||
|
|
nonce: nonce,
|
||
|
|
"data-nscript": "beforeInteractive",
|
||
|
|
crossOrigin: crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
getDynamicChunks(files) {
|
||
|
|
return getDynamicChunks(this.context, this.props, files);
|
||
|
|
}
|
||
|
|
getPreNextScripts() {
|
||
|
|
return getPreNextScripts(this.context, this.props);
|
||
|
|
}
|
||
|
|
getScripts(files) {
|
||
|
|
return getScripts(this.context, this.props, files);
|
||
|
|
}
|
||
|
|
getPolyfillScripts() {
|
||
|
|
return getPolyfillScripts(this.context, this.props);
|
||
|
|
}
|
||
|
|
makeStylesheetInert(node) {
|
||
|
|
return React.Children.map(node, (c)=>{
|
||
|
|
var _c_props, _c_props1;
|
||
|
|
if ((c == null ? void 0 : c.type) === "link" && (c == null ? void 0 : (_c_props = c.props) == null ? void 0 : _c_props.href) && OPTIMIZED_FONT_PROVIDERS.some(({ url })=>{
|
||
|
|
var _c_props_href, _c_props;
|
||
|
|
return c == null ? void 0 : (_c_props = c.props) == null ? void 0 : (_c_props_href = _c_props.href) == null ? void 0 : _c_props_href.startsWith(url);
|
||
|
|
})) {
|
||
|
|
const newProps = {
|
||
|
|
...c.props || {},
|
||
|
|
"data-href": c.props.href,
|
||
|
|
href: undefined
|
||
|
|
};
|
||
|
|
return /*#__PURE__*/ React.cloneElement(c, newProps);
|
||
|
|
} else if (c == null ? void 0 : (_c_props1 = c.props) == null ? void 0 : _c_props1.children) {
|
||
|
|
const newProps = {
|
||
|
|
...c.props || {},
|
||
|
|
children: this.makeStylesheetInert(c.props.children)
|
||
|
|
};
|
||
|
|
return /*#__PURE__*/ React.cloneElement(c, newProps);
|
||
|
|
}
|
||
|
|
return c;
|
||
|
|
// @types/react bug. Returned value from .map will not be `null` if you pass in `[null]`
|
||
|
|
}).filter(Boolean);
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
const { styles, ampPath, inAmpMode, hybridAmp, canonicalBase, __NEXT_DATA__, dangerousAsPath, headTags, unstable_runtimeJS, unstable_JsPreload, disableOptimizedLoading, optimizeCss, optimizeFonts, assetPrefix, nextFontManifest } = this.context;
|
||
|
|
const disableRuntimeJS = unstable_runtimeJS === false;
|
||
|
|
const disableJsPreload = unstable_JsPreload === false || !disableOptimizedLoading;
|
||
|
|
this.context.docComponentsRendered.Head = true;
|
||
|
|
let { head } = this.context;
|
||
|
|
let cssPreloads = [];
|
||
|
|
let otherHeadElements = [];
|
||
|
|
if (head) {
|
||
|
|
head.forEach((c)=>{
|
||
|
|
let metaTag;
|
||
|
|
if (this.context.strictNextHead) {
|
||
|
|
metaTag = /*#__PURE__*/ React.createElement("meta", {
|
||
|
|
name: "next-head",
|
||
|
|
content: "1"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (c && c.type === "link" && c.props["rel"] === "preload" && c.props["as"] === "style") {
|
||
|
|
metaTag && cssPreloads.push(metaTag);
|
||
|
|
cssPreloads.push(c);
|
||
|
|
} else {
|
||
|
|
if (c) {
|
||
|
|
if (metaTag && (c.type !== "meta" || !c.props["charSet"])) {
|
||
|
|
otherHeadElements.push(metaTag);
|
||
|
|
}
|
||
|
|
otherHeadElements.push(c);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
head = cssPreloads.concat(otherHeadElements);
|
||
|
|
}
|
||
|
|
let children = React.Children.toArray(this.props.children).filter(Boolean);
|
||
|
|
// show a warning if Head contains <title> (only in development)
|
||
|
|
if (process.env.NODE_ENV !== "production") {
|
||
|
|
children = React.Children.map(children, (child)=>{
|
||
|
|
var _child_props;
|
||
|
|
const isReactHelmet = child == null ? void 0 : (_child_props = child.props) == null ? void 0 : _child_props["data-react-helmet"];
|
||
|
|
if (!isReactHelmet) {
|
||
|
|
var _child_props1;
|
||
|
|
if ((child == null ? void 0 : child.type) === "title") {
|
||
|
|
console.warn("Warning: <title> should not be used in _document.js's <Head>. https://nextjs.org/docs/messages/no-document-title");
|
||
|
|
} else if ((child == null ? void 0 : child.type) === "meta" && (child == null ? void 0 : (_child_props1 = child.props) == null ? void 0 : _child_props1.name) === "viewport") {
|
||
|
|
console.warn("Warning: viewport meta tags should not be used in _document.js's <Head>. https://nextjs.org/docs/messages/no-document-viewport-meta");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return child;
|
||
|
|
// @types/react bug. Returned value from .map will not be `null` if you pass in `[null]`
|
||
|
|
});
|
||
|
|
if (this.props.crossOrigin) console.warn("Warning: `Head` attribute `crossOrigin` is deprecated. https://nextjs.org/docs/messages/doc-crossorigin-deprecated");
|
||
|
|
}
|
||
|
|
if (process.env.NODE_ENV !== "development" && optimizeFonts && !(process.env.NEXT_RUNTIME !== "edge" && inAmpMode)) {
|
||
|
|
children = this.makeStylesheetInert(children);
|
||
|
|
}
|
||
|
|
let hasAmphtmlRel = false;
|
||
|
|
let hasCanonicalRel = false;
|
||
|
|
// show warning and remove conflicting amp head tags
|
||
|
|
head = React.Children.map(head || [], (child)=>{
|
||
|
|
if (!child) return child;
|
||
|
|
const { type, props } = child;
|
||
|
|
if (process.env.NEXT_RUNTIME !== "edge" && inAmpMode) {
|
||
|
|
let badProp = "";
|
||
|
|
if (type === "meta" && props.name === "viewport") {
|
||
|
|
badProp = 'name="viewport"';
|
||
|
|
} else if (type === "link" && props.rel === "canonical") {
|
||
|
|
hasCanonicalRel = true;
|
||
|
|
} else if (type === "script") {
|
||
|
|
// only block if
|
||
|
|
// 1. it has a src and isn't pointing to ampproject's CDN
|
||
|
|
// 2. it is using dangerouslySetInnerHTML without a type or
|
||
|
|
// a type of text/javascript
|
||
|
|
if (props.src && props.src.indexOf("ampproject") < -1 || props.dangerouslySetInnerHTML && (!props.type || props.type === "text/javascript")) {
|
||
|
|
badProp = "<script";
|
||
|
|
Object.keys(props).forEach((prop)=>{
|
||
|
|
badProp += ` ${prop}="${props[prop]}"`;
|
||
|
|
});
|
||
|
|
badProp += "/>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (badProp) {
|
||
|
|
console.warn(`Found conflicting amp tag "${child.type}" with conflicting prop ${badProp} in ${__NEXT_DATA__.page}. https://nextjs.org/docs/messages/conflicting-amp-tag`);
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// non-amp mode
|
||
|
|
if (type === "link" && props.rel === "amphtml") {
|
||
|
|
hasAmphtmlRel = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return child;
|
||
|
|
// @types/react bug. Returned value from .map will not be `null` if you pass in `[null]`
|
||
|
|
});
|
||
|
|
const files = getDocumentFiles(this.context.buildManifest, this.context.__NEXT_DATA__.page, process.env.NEXT_RUNTIME !== "edge" && inAmpMode);
|
||
|
|
const nextFontLinkTags = getNextFontLinkTags(nextFontManifest, dangerousAsPath, assetPrefix);
|
||
|
|
return /*#__PURE__*/ React.createElement("head", getHeadHTMLProps(this.props), this.context.isDevelopment && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", {
|
||
|
|
"data-next-hide-fouc": true,
|
||
|
|
"data-ampdevmode": process.env.NEXT_RUNTIME !== "edge" && inAmpMode ? "true" : undefined,
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: `body{display:none}`
|
||
|
|
}
|
||
|
|
}), /*#__PURE__*/ React.createElement("noscript", {
|
||
|
|
"data-next-hide-fouc": true,
|
||
|
|
"data-ampdevmode": process.env.NEXT_RUNTIME !== "edge" && inAmpMode ? "true" : undefined
|
||
|
|
}, /*#__PURE__*/ React.createElement("style", {
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: `body{display:block}`
|
||
|
|
}
|
||
|
|
}))), head, this.context.strictNextHead ? null : /*#__PURE__*/ React.createElement("meta", {
|
||
|
|
name: "next-head-count",
|
||
|
|
content: React.Children.count(head || []).toString()
|
||
|
|
}), children, optimizeFonts && /*#__PURE__*/ React.createElement("meta", {
|
||
|
|
name: "next-font-preconnect"
|
||
|
|
}), nextFontLinkTags.preconnect, nextFontLinkTags.preload, process.env.NEXT_RUNTIME !== "edge" && inAmpMode && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("meta", {
|
||
|
|
name: "viewport",
|
||
|
|
content: "width=device-width,minimum-scale=1,initial-scale=1"
|
||
|
|
}), !hasCanonicalRel && /*#__PURE__*/ React.createElement("link", {
|
||
|
|
rel: "canonical",
|
||
|
|
href: canonicalBase + require("../server/utils").cleanAmpPath(dangerousAsPath)
|
||
|
|
}), /*#__PURE__*/ React.createElement("link", {
|
||
|
|
rel: "preload",
|
||
|
|
as: "script",
|
||
|
|
href: "https://cdn.ampproject.org/v0.js"
|
||
|
|
}), /*#__PURE__*/ React.createElement(AmpStyles, {
|
||
|
|
styles: styles
|
||
|
|
}), /*#__PURE__*/ React.createElement("style", {
|
||
|
|
"amp-boilerplate": "",
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: `body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`
|
||
|
|
}
|
||
|
|
}), /*#__PURE__*/ React.createElement("noscript", null, /*#__PURE__*/ React.createElement("style", {
|
||
|
|
"amp-boilerplate": "",
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: `body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`
|
||
|
|
}
|
||
|
|
})), /*#__PURE__*/ React.createElement("script", {
|
||
|
|
async: true,
|
||
|
|
src: "https://cdn.ampproject.org/v0.js"
|
||
|
|
})), !(process.env.NEXT_RUNTIME !== "edge" && inAmpMode) && /*#__PURE__*/ React.createElement(React.Fragment, null, !hasAmphtmlRel && hybridAmp && /*#__PURE__*/ React.createElement("link", {
|
||
|
|
rel: "amphtml",
|
||
|
|
href: canonicalBase + getAmpPath(ampPath, dangerousAsPath)
|
||
|
|
}), this.getBeforeInteractiveInlineScripts(), !optimizeCss && this.getCssLinks(files), !optimizeCss && /*#__PURE__*/ React.createElement("noscript", {
|
||
|
|
"data-n-css": this.props.nonce ?? ""
|
||
|
|
}), !disableRuntimeJS && !disableJsPreload && this.getPreloadDynamicChunks(), !disableRuntimeJS && !disableJsPreload && this.getPreloadMainLinks(files), !disableOptimizedLoading && !disableRuntimeJS && this.getPolyfillScripts(), !disableOptimizedLoading && !disableRuntimeJS && this.getPreNextScripts(), !disableOptimizedLoading && !disableRuntimeJS && this.getDynamicChunks(files), !disableOptimizedLoading && !disableRuntimeJS && this.getScripts(files), optimizeCss && this.getCssLinks(files), optimizeCss && /*#__PURE__*/ React.createElement("noscript", {
|
||
|
|
"data-n-css": this.props.nonce ?? ""
|
||
|
|
}), this.context.isDevelopment && // this element is used to mount development styles so the
|
||
|
|
// ordering matches production
|
||
|
|
// (by default, style-loader injects at the bottom of <head />)
|
||
|
|
/*#__PURE__*/ React.createElement("noscript", {
|
||
|
|
id: "__next_css__DO_NOT_USE__"
|
||
|
|
}), styles || null), /*#__PURE__*/ React.createElement(React.Fragment, {}, ...headTags || []));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function handleDocumentScriptLoaderItems(scriptLoader, __NEXT_DATA__, props) {
|
||
|
|
var _children_find_props, _children_find, _children_find_props1, _children_find1;
|
||
|
|
if (!props.children) return;
|
||
|
|
const scriptLoaderItems = [];
|
||
|
|
const children = Array.isArray(props.children) ? props.children : [
|
||
|
|
props.children
|
||
|
|
];
|
||
|
|
const headChildren = (_children_find = children.find((child)=>child.type === Head)) == null ? void 0 : (_children_find_props = _children_find.props) == null ? void 0 : _children_find_props.children;
|
||
|
|
const bodyChildren = (_children_find1 = children.find((child)=>child.type === "body")) == null ? void 0 : (_children_find_props1 = _children_find1.props) == null ? void 0 : _children_find_props1.children;
|
||
|
|
// Scripts with beforeInteractive can be placed inside Head or <body> so children of both needs to be traversed
|
||
|
|
const combinedChildren = [
|
||
|
|
...Array.isArray(headChildren) ? headChildren : [
|
||
|
|
headChildren
|
||
|
|
],
|
||
|
|
...Array.isArray(bodyChildren) ? bodyChildren : [
|
||
|
|
bodyChildren
|
||
|
|
]
|
||
|
|
];
|
||
|
|
React.Children.forEach(combinedChildren, (child)=>{
|
||
|
|
var _child_type;
|
||
|
|
if (!child) return;
|
||
|
|
// When using the `next/script` component, register it in script loader.
|
||
|
|
if ((_child_type = child.type) == null ? void 0 : _child_type.__nextScript) {
|
||
|
|
if (child.props.strategy === "beforeInteractive") {
|
||
|
|
scriptLoader.beforeInteractive = (scriptLoader.beforeInteractive || []).concat([
|
||
|
|
{
|
||
|
|
...child.props
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
return;
|
||
|
|
} else if ([
|
||
|
|
"lazyOnload",
|
||
|
|
"afterInteractive",
|
||
|
|
"worker"
|
||
|
|
].includes(child.props.strategy)) {
|
||
|
|
scriptLoaderItems.push(child.props);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
__NEXT_DATA__.scriptLoader = scriptLoaderItems;
|
||
|
|
}
|
||
|
|
export class NextScript extends React.Component {
|
||
|
|
static #_ = this.contextType = HtmlContext;
|
||
|
|
getDynamicChunks(files) {
|
||
|
|
return getDynamicChunks(this.context, this.props, files);
|
||
|
|
}
|
||
|
|
getPreNextScripts() {
|
||
|
|
return getPreNextScripts(this.context, this.props);
|
||
|
|
}
|
||
|
|
getScripts(files) {
|
||
|
|
return getScripts(this.context, this.props, files);
|
||
|
|
}
|
||
|
|
getPolyfillScripts() {
|
||
|
|
return getPolyfillScripts(this.context, this.props);
|
||
|
|
}
|
||
|
|
static getInlineScriptSource(context) {
|
||
|
|
const { __NEXT_DATA__, largePageDataBytes } = context;
|
||
|
|
try {
|
||
|
|
const data = JSON.stringify(__NEXT_DATA__);
|
||
|
|
if (largePageDataWarnings.has(__NEXT_DATA__.page)) {
|
||
|
|
return htmlEscapeJsonString(data);
|
||
|
|
}
|
||
|
|
const bytes = process.env.NEXT_RUNTIME === "edge" ? new TextEncoder().encode(data).buffer.byteLength : Buffer.from(data).byteLength;
|
||
|
|
const prettyBytes = require("../lib/pretty-bytes").default;
|
||
|
|
if (largePageDataBytes && bytes > largePageDataBytes) {
|
||
|
|
if (process.env.NODE_ENV === "production") {
|
||
|
|
largePageDataWarnings.add(__NEXT_DATA__.page);
|
||
|
|
}
|
||
|
|
console.warn(`Warning: data for page "${__NEXT_DATA__.page}"${__NEXT_DATA__.page === context.dangerousAsPath ? "" : ` (path "${context.dangerousAsPath}")`} is ${prettyBytes(bytes)} which exceeds the threshold of ${prettyBytes(largePageDataBytes)}, this amount of data can reduce performance.\nSee more info here: https://nextjs.org/docs/messages/large-page-data`);
|
||
|
|
}
|
||
|
|
return htmlEscapeJsonString(data);
|
||
|
|
} catch (err) {
|
||
|
|
if (isError(err) && err.message.indexOf("circular structure") !== -1) {
|
||
|
|
throw new Error(`Circular structure in "getInitialProps" result of page "${__NEXT_DATA__.page}". https://nextjs.org/docs/messages/circular-structure`);
|
||
|
|
}
|
||
|
|
throw err;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
const { assetPrefix, inAmpMode, buildManifest, unstable_runtimeJS, docComponentsRendered, assetQueryString, disableOptimizedLoading, crossOrigin } = this.context;
|
||
|
|
const disableRuntimeJS = unstable_runtimeJS === false;
|
||
|
|
docComponentsRendered.NextScript = true;
|
||
|
|
if (process.env.NEXT_RUNTIME !== "edge" && inAmpMode) {
|
||
|
|
if (process.env.NODE_ENV === "production") {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const ampDevFiles = [
|
||
|
|
...buildManifest.devFiles,
|
||
|
|
...buildManifest.polyfillFiles,
|
||
|
|
...buildManifest.ampDevFiles
|
||
|
|
];
|
||
|
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, disableRuntimeJS ? null : /*#__PURE__*/ React.createElement("script", {
|
||
|
|
id: "__NEXT_DATA__",
|
||
|
|
type: "application/json",
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin,
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: NextScript.getInlineScriptSource(this.context)
|
||
|
|
},
|
||
|
|
"data-ampdevmode": true
|
||
|
|
}), ampDevFiles.map((file)=>/*#__PURE__*/ React.createElement("script", {
|
||
|
|
key: file,
|
||
|
|
src: `${assetPrefix}/_next/${file}${assetQueryString}`,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin,
|
||
|
|
"data-ampdevmode": true
|
||
|
|
})));
|
||
|
|
}
|
||
|
|
if (process.env.NODE_ENV !== "production") {
|
||
|
|
if (this.props.crossOrigin) console.warn("Warning: `NextScript` attribute `crossOrigin` is deprecated. https://nextjs.org/docs/messages/doc-crossorigin-deprecated");
|
||
|
|
}
|
||
|
|
const files = getDocumentFiles(this.context.buildManifest, this.context.__NEXT_DATA__.page, process.env.NEXT_RUNTIME !== "edge" && inAmpMode);
|
||
|
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, !disableRuntimeJS && buildManifest.devFiles ? buildManifest.devFiles.map((file)=>/*#__PURE__*/ React.createElement("script", {
|
||
|
|
key: file,
|
||
|
|
src: `${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`,
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin
|
||
|
|
})) : null, disableRuntimeJS ? null : /*#__PURE__*/ React.createElement("script", {
|
||
|
|
id: "__NEXT_DATA__",
|
||
|
|
type: "application/json",
|
||
|
|
nonce: this.props.nonce,
|
||
|
|
crossOrigin: this.props.crossOrigin || crossOrigin,
|
||
|
|
dangerouslySetInnerHTML: {
|
||
|
|
__html: NextScript.getInlineScriptSource(this.context)
|
||
|
|
}
|
||
|
|
}), disableOptimizedLoading && !disableRuntimeJS && this.getPolyfillScripts(), disableOptimizedLoading && !disableRuntimeJS && this.getPreNextScripts(), disableOptimizedLoading && !disableRuntimeJS && this.getDynamicChunks(files), disableOptimizedLoading && !disableRuntimeJS && this.getScripts(files));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export function Html(props) {
|
||
|
|
const { inAmpMode, docComponentsRendered, locale, scriptLoader, __NEXT_DATA__ } = useHtmlContext();
|
||
|
|
docComponentsRendered.Html = true;
|
||
|
|
handleDocumentScriptLoaderItems(scriptLoader, __NEXT_DATA__, props);
|
||
|
|
return /*#__PURE__*/ React.createElement("html", {
|
||
|
|
...props,
|
||
|
|
lang: props.lang || locale || undefined,
|
||
|
|
amp: process.env.NEXT_RUNTIME !== "edge" && inAmpMode ? "" : undefined,
|
||
|
|
"data-ampdevmode": process.env.NEXT_RUNTIME !== "edge" && inAmpMode && process.env.NODE_ENV !== "production" ? "" : undefined
|
||
|
|
});
|
||
|
|
}
|
||
|
|
export function Main() {
|
||
|
|
const { docComponentsRendered } = useHtmlContext();
|
||
|
|
docComponentsRendered.Main = true;
|
||
|
|
// @ts-ignore
|
||
|
|
return /*#__PURE__*/ React.createElement("next-js-internal-body-render-target", null);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* `Document` component handles the initial `document` markup and renders only on the server side.
|
||
|
|
* Commonly used for implementing server side rendering for `css-in-js` libraries.
|
||
|
|
*/ export default class Document extends React.Component {
|
||
|
|
/**
|
||
|
|
* `getInitialProps` hook returns the context object with the addition of `renderPage`.
|
||
|
|
* `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
|
||
|
|
*/ static getInitialProps(ctx) {
|
||
|
|
return ctx.defaultGetInitialProps(ctx);
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
return /*#__PURE__*/ React.createElement(Html, null, /*#__PURE__*/ React.createElement(Head, null), /*#__PURE__*/ React.createElement("body", null, /*#__PURE__*/ React.createElement(Main, null), /*#__PURE__*/ React.createElement(NextScript, null)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Add a special property to the built-in `Document` component so later we can
|
||
|
|
// identify if a user customized `Document` is used or not.
|
||
|
|
const InternalFunctionDocument = function InternalFunctionDocument() {
|
||
|
|
return /*#__PURE__*/ React.createElement(Html, null, /*#__PURE__*/ React.createElement(Head, null), /*#__PURE__*/ React.createElement("body", null, /*#__PURE__*/ React.createElement(Main, null), /*#__PURE__*/ React.createElement(NextScript, null)));
|
||
|
|
};
|
||
|
|
Document[NEXT_BUILTIN_DOCUMENT] = InternalFunctionDocument;
|
||
|
|
|
||
|
|
//# sourceMappingURL=_document.js.map
|