407 lines
18 KiB
JavaScript
407 lines
18 KiB
JavaScript
"use client";
|
||
"use strict";
|
||
Object.defineProperty(exports, "__esModule", {
|
||
value: true
|
||
});
|
||
exports.default = void 0;
|
||
var _interop_require_default = require("@swc/helpers/lib/_interop_require_default.js").default;
|
||
var _object_without_properties_loose = require("@swc/helpers/lib/_object_without_properties_loose.js").default;
|
||
var _react = _interop_require_default(require("react"));
|
||
var _router = require("../shared/lib/router/router");
|
||
var _formatUrl = require("../shared/lib/router/utils/format-url");
|
||
var _addLocale = require("./add-locale");
|
||
var _routerContext = require("../shared/lib/router-context");
|
||
var _appRouterContext = require("../shared/lib/app-router-context");
|
||
var _useIntersection = require("./use-intersection");
|
||
var _getDomainLocale = require("./get-domain-locale");
|
||
var _addBasePath = require("./add-base-path");
|
||
|
||
const prefetched = new Set();
|
||
function prefetch(router, href, as, options) {
|
||
if (typeof window === 'undefined') {
|
||
return;
|
||
}
|
||
if (!(0, _router).isLocalURL(href)) {
|
||
return;
|
||
}
|
||
// We should only dedupe requests when experimental.optimisticClientCache is
|
||
// disabled.
|
||
if (!options.bypassPrefetchedCheck) {
|
||
const locale = // Let the link's locale prop override the default router locale.
|
||
typeof options.locale !== 'undefined' ? options.locale : 'locale' in router ? router.locale : undefined;
|
||
const prefetchedKey = href + '%' + as + '%' + locale;
|
||
// If we've already fetched the key, then don't prefetch it again!
|
||
if (prefetched.has(prefetchedKey)) {
|
||
return;
|
||
}
|
||
// Mark this URL as prefetched.
|
||
prefetched.add(prefetchedKey);
|
||
}
|
||
// Prefetch the JSON page if asked (only in the client)
|
||
// We need to handle a prefetch error here since we may be
|
||
// loading with priority which can reject but we don't
|
||
// want to force navigation since this is only a prefetch
|
||
Promise.resolve(router.prefetch(href, as, options)).catch((err)=>{
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
// rethrow to show invalid URL errors
|
||
throw err;
|
||
}
|
||
});
|
||
}
|
||
function isModifiedEvent(event) {
|
||
const { target } = event.currentTarget;
|
||
return target && target !== '_self' || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.nativeEvent && event.nativeEvent.which === 2;
|
||
}
|
||
function linkClicked(e, router, href, as, replace, shallow, scroll, locale, isAppRouter, prefetchEnabled) {
|
||
const { nodeName } = e.currentTarget;
|
||
// anchors inside an svg have a lowercase nodeName
|
||
const isAnchorNodeName = nodeName.toUpperCase() === 'A';
|
||
if (isAnchorNodeName && (isModifiedEvent(e) || !(0, _router).isLocalURL(href))) {
|
||
// ignore click for browser’s default behavior
|
||
return;
|
||
}
|
||
e.preventDefault();
|
||
const navigate = ()=>{
|
||
// If the router is an NextRouter instance it will have `beforePopState`
|
||
if ('beforePopState' in router) {
|
||
router[replace ? 'replace' : 'push'](href, as, {
|
||
shallow,
|
||
locale,
|
||
scroll
|
||
});
|
||
} else {
|
||
router[replace ? 'replace' : 'push'](as || href, {
|
||
forceOptimisticNavigation: !prefetchEnabled
|
||
});
|
||
}
|
||
};
|
||
if (isAppRouter) {
|
||
// @ts-expect-error startTransition exists.
|
||
_react.default.startTransition(navigate);
|
||
} else {
|
||
navigate();
|
||
}
|
||
}
|
||
function formatStringOrUrl(urlObjOrString) {
|
||
if (typeof urlObjOrString === 'string') {
|
||
return urlObjOrString;
|
||
}
|
||
return (0, _formatUrl).formatUrl(urlObjOrString);
|
||
}
|
||
/**
|
||
* React Component that enables client-side transitions between routes.
|
||
*/ const Link = /*#__PURE__*/ _react.default.forwardRef(function LinkComponent(props, forwardedRef) {
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
function createPropError(args) {
|
||
return new Error(`Failed prop type: The prop \`${args.key}\` expects a ${args.expected} in \`<Link>\`, but got \`${args.actual}\` instead.` + (typeof window !== 'undefined' ? "\nOpen your browser's console to view the Component stack trace." : ''));
|
||
}
|
||
// TypeScript trick for type-guarding:
|
||
const requiredPropsGuard = {
|
||
href: true
|
||
};
|
||
const requiredProps = Object.keys(requiredPropsGuard);
|
||
requiredProps.forEach((key)=>{
|
||
if (key === 'href') {
|
||
if (props[key] == null || typeof props[key] !== 'string' && typeof props[key] !== 'object') {
|
||
throw createPropError({
|
||
key,
|
||
expected: '`string` or `object`',
|
||
actual: props[key] === null ? 'null' : typeof props[key]
|
||
});
|
||
}
|
||
} else {
|
||
// TypeScript trick for type-guarding:
|
||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
const _ = key;
|
||
}
|
||
});
|
||
// TypeScript trick for type-guarding:
|
||
const optionalPropsGuard = {
|
||
as: true,
|
||
replace: true,
|
||
scroll: true,
|
||
shallow: true,
|
||
passHref: true,
|
||
prefetch: true,
|
||
locale: true,
|
||
onClick: true,
|
||
onMouseEnter: true,
|
||
onTouchStart: true,
|
||
legacyBehavior: true
|
||
};
|
||
const optionalProps = Object.keys(optionalPropsGuard);
|
||
optionalProps.forEach((key)=>{
|
||
const valType = typeof props[key];
|
||
if (key === 'as') {
|
||
if (props[key] && valType !== 'string' && valType !== 'object') {
|
||
throw createPropError({
|
||
key,
|
||
expected: '`string` or `object`',
|
||
actual: valType
|
||
});
|
||
}
|
||
} else if (key === 'locale') {
|
||
if (props[key] && valType !== 'string') {
|
||
throw createPropError({
|
||
key,
|
||
expected: '`string`',
|
||
actual: valType
|
||
});
|
||
}
|
||
} else if (key === 'onClick' || key === 'onMouseEnter' || key === 'onTouchStart') {
|
||
if (props[key] && valType !== 'function') {
|
||
throw createPropError({
|
||
key,
|
||
expected: '`function`',
|
||
actual: valType
|
||
});
|
||
}
|
||
} else if (key === 'replace' || key === 'scroll' || key === 'shallow' || key === 'passHref' || key === 'prefetch' || key === 'legacyBehavior') {
|
||
if (props[key] != null && valType !== 'boolean') {
|
||
throw createPropError({
|
||
key,
|
||
expected: '`boolean`',
|
||
actual: valType
|
||
});
|
||
}
|
||
} else {
|
||
// TypeScript trick for type-guarding:
|
||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
const _ = key;
|
||
}
|
||
});
|
||
// This hook is in a conditional but that is ok because `process.env.NODE_ENV` never changes
|
||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||
const hasWarned = _react.default.useRef(false);
|
||
if (props.prefetch && !hasWarned.current) {
|
||
hasWarned.current = true;
|
||
console.warn('Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://nextjs.org/docs/messages/prefetch-true-deprecated');
|
||
}
|
||
}
|
||
let children;
|
||
const { href: hrefProp , as: asProp , children: childrenProp , prefetch: prefetchProp , passHref , replace , shallow , scroll , locale , onClick , onMouseEnter: onMouseEnterProp , onTouchStart: onTouchStartProp , // @ts-expect-error this is inlined as a literal boolean not a string
|
||
legacyBehavior =process.env.__NEXT_NEW_LINK_BEHAVIOR === false } = props, restProps = _object_without_properties_loose(props, [
|
||
"href",
|
||
"as",
|
||
"children",
|
||
"prefetch",
|
||
"passHref",
|
||
"replace",
|
||
"shallow",
|
||
"scroll",
|
||
"locale",
|
||
"onClick",
|
||
"onMouseEnter",
|
||
"onTouchStart",
|
||
"legacyBehavior"
|
||
]);
|
||
children = childrenProp;
|
||
if (legacyBehavior && (typeof children === 'string' || typeof children === 'number')) {
|
||
children = /*#__PURE__*/ _react.default.createElement("a", null, children);
|
||
}
|
||
const prefetchEnabled = prefetchProp !== false;
|
||
const pagesRouter = _react.default.useContext(_routerContext.RouterContext);
|
||
const appRouter = _react.default.useContext(_appRouterContext.AppRouterContext);
|
||
const router = pagesRouter != null ? pagesRouter : appRouter;
|
||
// We're in the app directory if there is no pages router.
|
||
const isAppRouter = !pagesRouter;
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
if (isAppRouter && !asProp) {
|
||
let href;
|
||
if (typeof hrefProp === 'string') {
|
||
href = hrefProp;
|
||
} else if (typeof hrefProp === 'object' && typeof hrefProp.pathname === 'string') {
|
||
href = hrefProp.pathname;
|
||
}
|
||
if (href) {
|
||
const hasDynamicSegment = href.split('/').some((segment)=>segment.startsWith('[') && segment.endsWith(']'));
|
||
if (hasDynamicSegment) {
|
||
throw new Error(`Dynamic href \`${href}\` found in <Link> while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href`);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const { href , as } = _react.default.useMemo(()=>{
|
||
if (!pagesRouter) {
|
||
const resolvedHref = formatStringOrUrl(hrefProp);
|
||
return {
|
||
href: resolvedHref,
|
||
as: asProp ? formatStringOrUrl(asProp) : resolvedHref
|
||
};
|
||
}
|
||
const [resolvedHref, resolvedAs] = (0, _router).resolveHref(pagesRouter, hrefProp, true);
|
||
return {
|
||
href: resolvedHref,
|
||
as: asProp ? (0, _router).resolveHref(pagesRouter, asProp) : resolvedAs || resolvedHref
|
||
};
|
||
}, [
|
||
pagesRouter,
|
||
hrefProp,
|
||
asProp
|
||
]);
|
||
const previousHref = _react.default.useRef(href);
|
||
const previousAs = _react.default.useRef(as);
|
||
// This will return the first child, if multiple are provided it will throw an error
|
||
let child;
|
||
if (legacyBehavior) {
|
||
if (process.env.NODE_ENV === 'development') {
|
||
if (onClick) {
|
||
console.warn(`"onClick" was passed to <Link> with \`href\` of \`${hrefProp}\` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link`);
|
||
}
|
||
if (onMouseEnterProp) {
|
||
console.warn(`"onMouseEnter" was passed to <Link> with \`href\` of \`${hrefProp}\` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`);
|
||
}
|
||
try {
|
||
child = _react.default.Children.only(children);
|
||
} catch (err) {
|
||
if (!children) {
|
||
throw new Error(`No children were passed to <Link> with \`href\` of \`${hrefProp}\` but one child is required https://nextjs.org/docs/messages/link-no-children`);
|
||
}
|
||
throw new Error(`Multiple children were passed to <Link> with \`href\` of \`${hrefProp}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` + (typeof window !== 'undefined' ? " \nOpen your browser's console to view the Component stack trace." : ''));
|
||
}
|
||
} else {
|
||
child = _react.default.Children.only(children);
|
||
}
|
||
} else {
|
||
if (process.env.NODE_ENV === 'development') {
|
||
var ref;
|
||
if (((ref = children) == null ? void 0 : ref.type) === 'a') {
|
||
throw new Error('Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.\nLearn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor');
|
||
}
|
||
}
|
||
}
|
||
const childRef = legacyBehavior ? child && typeof child === 'object' && child.ref : forwardedRef;
|
||
const [setIntersectionRef, isVisible, resetVisible] = (0, _useIntersection).useIntersection({
|
||
rootMargin: '200px'
|
||
});
|
||
const setRef = _react.default.useCallback((el)=>{
|
||
// Before the link getting observed, check if visible state need to be reset
|
||
if (previousAs.current !== as || previousHref.current !== href) {
|
||
resetVisible();
|
||
previousAs.current = as;
|
||
previousHref.current = href;
|
||
}
|
||
setIntersectionRef(el);
|
||
if (childRef) {
|
||
if (typeof childRef === 'function') childRef(el);
|
||
else if (typeof childRef === 'object') {
|
||
childRef.current = el;
|
||
}
|
||
}
|
||
}, [
|
||
as,
|
||
childRef,
|
||
href,
|
||
resetVisible,
|
||
setIntersectionRef
|
||
]);
|
||
// Prefetch the URL if we haven't already and it's visible.
|
||
_react.default.useEffect(()=>{
|
||
// in dev, we only prefetch on hover to avoid wasting resources as the prefetch will trigger compiling the page.
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
return;
|
||
}
|
||
if (!router) {
|
||
return;
|
||
}
|
||
// If we don't need to prefetch the URL, don't do prefetch.
|
||
if (!isVisible || !prefetchEnabled) {
|
||
return;
|
||
}
|
||
// Prefetch the URL.
|
||
prefetch(router, href, as, {
|
||
locale
|
||
});
|
||
}, [
|
||
as,
|
||
href,
|
||
isVisible,
|
||
locale,
|
||
prefetchEnabled,
|
||
pagesRouter == null ? void 0 : pagesRouter.locale,
|
||
router,
|
||
]);
|
||
const childProps = {
|
||
ref: setRef,
|
||
onClick (e) {
|
||
if (process.env.NODE_ENV !== 'production') {
|
||
if (!e) {
|
||
throw new Error(`Component rendered inside next/link has to pass click event to "onClick" prop.`);
|
||
}
|
||
}
|
||
if (!legacyBehavior && typeof onClick === 'function') {
|
||
onClick(e);
|
||
}
|
||
if (legacyBehavior && child.props && typeof child.props.onClick === 'function') {
|
||
child.props.onClick(e);
|
||
}
|
||
if (!router) {
|
||
return;
|
||
}
|
||
if (e.defaultPrevented) {
|
||
return;
|
||
}
|
||
linkClicked(e, router, href, as, replace, shallow, scroll, locale, isAppRouter, prefetchEnabled);
|
||
},
|
||
onMouseEnter (e) {
|
||
if (!legacyBehavior && typeof onMouseEnterProp === 'function') {
|
||
onMouseEnterProp(e);
|
||
}
|
||
if (legacyBehavior && child.props && typeof child.props.onMouseEnter === 'function') {
|
||
child.props.onMouseEnter(e);
|
||
}
|
||
if (!router) {
|
||
return;
|
||
}
|
||
if (!prefetchEnabled && isAppRouter) {
|
||
return;
|
||
}
|
||
prefetch(router, href, as, {
|
||
locale,
|
||
priority: true,
|
||
// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
|
||
bypassPrefetchedCheck: true
|
||
});
|
||
},
|
||
onTouchStart (e) {
|
||
if (!legacyBehavior && typeof onTouchStartProp === 'function') {
|
||
onTouchStartProp(e);
|
||
}
|
||
if (legacyBehavior && child.props && typeof child.props.onTouchStart === 'function') {
|
||
child.props.onTouchStart(e);
|
||
}
|
||
if (!router) {
|
||
return;
|
||
}
|
||
if (!prefetchEnabled && isAppRouter) {
|
||
return;
|
||
}
|
||
prefetch(router, href, as, {
|
||
locale,
|
||
priority: true,
|
||
// @see {https://github.com/vercel/next.js/discussions/40268?sort=top#discussioncomment-3572642}
|
||
bypassPrefetchedCheck: true
|
||
});
|
||
}
|
||
};
|
||
// If child is an <a> tag and doesn't have a href attribute, or if the 'passHref' property is
|
||
// defined, we specify the current 'href', so that repetition is not needed by the user
|
||
if (!legacyBehavior || passHref || child.type === 'a' && !('href' in child.props)) {
|
||
const curLocale = typeof locale !== 'undefined' ? locale : pagesRouter == null ? void 0 : pagesRouter.locale;
|
||
// we only render domain locales if we are currently on a domain locale
|
||
// so that locale links are still visitable in development/preview envs
|
||
const localeDomain = (pagesRouter == null ? void 0 : pagesRouter.isLocaleDomain) && (0, _getDomainLocale).getDomainLocale(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.locales, pagesRouter == null ? void 0 : pagesRouter.domainLocales);
|
||
childProps.href = localeDomain || (0, _addBasePath).addBasePath((0, _addLocale).addLocale(as, curLocale, pagesRouter == null ? void 0 : pagesRouter.defaultLocale));
|
||
}
|
||
return legacyBehavior ? /*#__PURE__*/ _react.default.cloneElement(child, childProps) : /*#__PURE__*/ _react.default.createElement("a", Object.assign({}, restProps, childProps), children);
|
||
});
|
||
var _default = Link;
|
||
exports.default = _default;
|
||
|
||
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
||
Object.defineProperty(exports.default, '__esModule', { value: true });
|
||
Object.assign(exports.default, exports);
|
||
module.exports = exports.default;
|
||
}
|
||
|
||
//# sourceMappingURL=link.js.map
|