@tanstack/solid-router 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/esm/link.js

@@ -1,344 +1,321 @@
-import { createComponent, mergeProps, template, spread, insert, Dynamic, memo } from "@solidjs/web";
-import * as Solid from "solid-js";
-import { isDangerousProtocol, exactPathTest, removeTrailingSlash, deepEqual, functionalUpdate, preloadWarning } from "@tanstack/router-core";
-import { isServer } from "@tanstack/router-core/isServer";
-import { useRouterState } from "./useRouterState.js";
+import { useHydrated } from "./ClientOnly.js";
 import { useRouter } from "./useRouter.js";
+import { useRouterState } from "./useRouterState.js";
 import { useIntersectionObserver } from "./utils.js";
-import { useHydrated } from "./ClientOnly.js";
+import { deepEqual, exactPathTest, functionalUpdate, isDangerousProtocol, preloadWarning, removeTrailingSlash } from "@tanstack/router-core";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import * as Solid from "solid-js";
+import { isServer } from "@tanstack/router-core/isServer";
+//#region src/link.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<svg><a>`);
 function mergeRefs(...refs) {
-  return (el) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(el);
-      }
-    }
-  };
+	return (el) => {
+		for (const ref of refs) if (typeof ref === "function") ref(el);
+	};
 }
 function splitProps(props, keys) {
-  return [props, Solid.omit(props, ...keys)];
+	return [props, Solid.omit(props, ...keys)];
 }
-const timeoutMap = /* @__PURE__ */ new WeakMap();
+var timeoutMap = /* @__PURE__ */ new WeakMap();
 function useLinkProps(options) {
-  const router = useRouter();
-  const [isTransitioning, setIsTransitioning] = Solid.createSignal(false);
-  const shouldHydrateHash = !isServer && !!router.options.ssr;
-  const hasHydrated = useHydrated();
-  let hasRenderFetched = false;
-  const [local, rest] = splitProps(Solid.merge({
-    activeProps: () => ({
-      class: "active"
-    }),
-    inactiveProps: () => ({})
-  }, options), ["activeProps", "inactiveProps", "activeOptions", "to", "preload", "preloadDelay", "hashScrollIntoView", "replace", "startTransition", "resetScroll", "viewTransition", "target", "disabled", "style", "class", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onTouchStart", "ignoreBlocker"]);
-  const [_, propsSafeToSpread] = splitProps(rest, ["params", "search", "hash", "state", "mask", "reloadDocument", "unsafeRelative"]);
-  const currentLocation = useRouterState({
-    select: (s) => s.location
-  });
-  const buildLocationKey = useRouterState({
-    select: (s) => {
-      const leaf = s.matches[s.matches.length - 1];
-      return {
-        search: leaf?.search,
-        hash: s.location.hash,
-        path: leaf?.pathname
-        // path + params
-      };
-    }
-  });
-  const from = options.from;
-  const _options = () => {
-    const result = {
-      ...options,
-      from
-    };
-    return result;
-  };
-  const next = Solid.createMemo(() => {
-    buildLocationKey();
-    return router.buildLocation(_options());
-  });
-  const hrefOption = Solid.createMemo(() => {
-    if (_options().disabled) return void 0;
-    const location = next().maskedLocation ?? next();
-    const publicHref = location.publicHref;
-    const external = location.external;
-    if (external) {
-      return {
-        href: publicHref,
-        external: true
-      };
-    }
-    return {
-      href: router.history.createHref(publicHref) || "/",
-      external: false
-    };
-  });
-  const externalLink = Solid.createMemo(() => {
-    const _href = hrefOption();
-    if (_href?.external) {
-      if (isDangerousProtocol(_href.href, router.protocolAllowlist)) {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(`Blocked Link with dangerous protocol: ${_href.href}`);
-        }
-        return void 0;
-      }
-      return _href.href;
-    }
-    const to = _options().to;
-    const isSafeInternal = typeof to === "string" && to.charCodeAt(0) === 47 && // '/'
-    to.charCodeAt(1) !== 47;
-    if (isSafeInternal) return void 0;
-    try {
-      new URL(to);
-      if (isDangerousProtocol(to, router.protocolAllowlist)) {
-        if (process.env.NODE_ENV !== "production") {
-          console.warn(`Blocked Link with dangerous protocol: ${to}`);
-        }
-        return void 0;
-      }
-      return to;
-    } catch {
-    }
-    return void 0;
-  });
-  const preload = Solid.createMemo(() => {
-    if (_options().reloadDocument || externalLink()) {
-      return false;
-    }
-    return local.preload ?? router.options.defaultPreload;
-  });
-  const preloadDelay = () => local.preloadDelay ?? router.options.defaultPreloadDelay ?? 0;
-  const isActive = Solid.createMemo(() => {
-    if (externalLink()) return false;
-    if (local.activeOptions?.exact) {
-      const testExact = exactPathTest(currentLocation().pathname, next().pathname, router.basepath);
-      if (!testExact) {
-        return false;
-      }
-    } else {
-      const currentPathSplit = removeTrailingSlash(currentLocation().pathname, router.basepath).split("/");
-      const nextPathSplit = removeTrailingSlash(next()?.pathname, router.basepath)?.split("/");
-      const pathIsFuzzyEqual = nextPathSplit?.every((d, i) => d === currentPathSplit[i]);
-      if (!pathIsFuzzyEqual) {
-        return false;
-      }
-    }
-    if (local.activeOptions?.includeSearch ?? true) {
-      const searchTest = deepEqual(currentLocation().search, next().search, {
-        partial: !local.activeOptions?.exact,
-        ignoreUndefined: !local.activeOptions?.explicitUndefined
-      });
-      if (!searchTest) {
-        return false;
-      }
-    }
-    if (local.activeOptions?.includeHash) {
-      const currentHash = shouldHydrateHash && !hasHydrated() ? "" : currentLocation().hash;
-      return currentHash === next().hash;
-    }
-    return true;
-  });
-  const doPreload = () => router.preloadRoute(_options()).catch((err) => {
-    console.warn(err);
-    console.warn(preloadWarning);
-  });
-  const preloadViewportIoCallback = (entry) => {
-    if (entry?.isIntersecting) {
-      doPreload();
-    }
-  };
-  const [ref, setRefSignal] = Solid.createSignal(null);
-  const setRef = (el) => {
-    Solid.runWithOwner(null, () => {
-      setRefSignal(el);
-    });
-  };
-  useIntersectionObserver(ref, preloadViewportIoCallback, {
-    rootMargin: "100px"
-  }, {
-    disabled: !!local.disabled || !(Solid.untrack(preload) === "viewport")
-  });
-  Solid.createEffect(preload, (preloadValue) => {
-    if (hasRenderFetched) {
-      return;
-    }
-    if (!local.disabled && preloadValue === "render") {
-      doPreload();
-      hasRenderFetched = true;
-    }
-  });
-  if (Solid.untrack(externalLink)) {
-    return Solid.merge(propsSafeToSpread, {
-      // ref: mergeRefs(setRef, _options().ref),
-      href: externalLink()
-    }, splitProps(local, ["target", "disabled", "style", "class", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver", "onTouchStart"])[0]);
-  }
-  const handleClick = (e) => {
-    const elementTarget = e.currentTarget.getAttribute("target");
-    const effectiveTarget = local.target !== void 0 ? local.target : elementTarget;
-    if (!local.disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!effectiveTarget || effectiveTarget === "_self") && e.button === 0) {
-      e.preventDefault();
-      setIsTransitioning(true);
-      const unsub = router.subscribe("onResolved", () => {
-        unsub();
-        setIsTransitioning(false);
-      });
-      router.navigate({
-        ..._options(),
-        replace: local.replace,
-        resetScroll: local.resetScroll,
-        hashScrollIntoView: local.hashScrollIntoView,
-        startTransition: local.startTransition,
-        viewTransition: local.viewTransition,
-        ignoreBlocker: local.ignoreBlocker
-      });
-    }
-  };
-  const enqueueIntentPreload = (e) => {
-    if (local.disabled || preload() !== "intent") return;
-    if (!preloadDelay()) {
-      doPreload();
-      return;
-    }
-    const eventTarget = e.currentTarget || e.target;
-    if (!eventTarget || timeoutMap.has(eventTarget)) return;
-    timeoutMap.set(eventTarget, setTimeout(() => {
-      timeoutMap.delete(eventTarget);
-      doPreload();
-    }, preloadDelay()));
-  };
-  const handleTouchStart = (_2) => {
-    if (local.disabled || preload() !== "intent") return;
-    doPreload();
-  };
-  const handleLeave = (e) => {
-    if (local.disabled) return;
-    const eventTarget = e.currentTarget || e.target;
-    if (eventTarget) {
-      const id = timeoutMap.get(eventTarget);
-      clearTimeout(id);
-      timeoutMap.delete(eventTarget);
-    }
-  };
-  function callHandler(event, handler) {
-    if (handler) {
-      if (typeof handler === "function") {
-        handler(event);
-      } else {
-        handler[0](handler[1], event);
-      }
-    }
-    return event.defaultPrevented;
-  }
-  function composeEventHandlers(handlers) {
-    return (event) => {
-      for (const handler of handlers) {
-        callHandler(event, handler);
-      }
-    };
-  }
-  const resolvedActiveProps = () => isActive() ? functionalUpdate(local.activeProps, {}) ?? {} : {};
-  const resolvedInactiveProps = () => isActive() ? {} : functionalUpdate(local.inactiveProps, {});
-  const resolvedClassName = () => [local.class, resolvedActiveProps().class, resolvedInactiveProps().class].filter(Boolean).join(" ");
-  const resolvedStyle = () => ({
-    ...local.style,
-    ...resolvedActiveProps().style,
-    ...resolvedInactiveProps().style
-  });
-  return Solid.merge(propsSafeToSpread, resolvedActiveProps, resolvedInactiveProps, () => {
-    return {
-      href: hrefOption()?.href,
-      ref: mergeRefs(setRef, _options().ref),
-      onClick: composeEventHandlers([local.onClick, handleClick]),
-      onBlur: composeEventHandlers([local.onBlur, handleLeave]),
-      onFocus: composeEventHandlers([local.onFocus, enqueueIntentPreload]),
-      onMouseEnter: composeEventHandlers([local.onMouseEnter, enqueueIntentPreload]),
-      onMouseOver: composeEventHandlers([local.onMouseOver, enqueueIntentPreload]),
-      onMouseLeave: composeEventHandlers([local.onMouseLeave, handleLeave]),
-      onMouseOut: composeEventHandlers([local.onMouseOut, handleLeave]),
-      onTouchStart: composeEventHandlers([local.onTouchStart, handleTouchStart]),
-      disabled: !!local.disabled,
-      target: local.target,
-      ...(() => {
-        const s = resolvedStyle();
-        return Object.keys(s).length ? {
-          style: s
-        } : {};
-      })(),
-      ...(() => {
-        const c = resolvedClassName();
-        return c ? {
-          class: c
-        } : {};
-      })(),
-      ...local.disabled && {
-        role: "link",
-        "aria-disabled": "true"
-      },
-      ...isActive() && {
-        "data-status": "active",
-        "aria-current": "page"
-      },
-      ...isTransitioning() && {
-        "data-transitioning": "transitioning"
-      }
-    };
-  });
+	const router = useRouter();
+	const [isTransitioning, setIsTransitioning] = Solid.createSignal(false);
+	const shouldHydrateHash = !isServer && !!router.options.ssr;
+	const hasHydrated = useHydrated();
+	let hasRenderFetched = false;
+	const [local, rest] = splitProps(Solid.merge({
+		activeProps: () => ({ class: "active" }),
+		inactiveProps: () => ({})
+	}, options), [
+		"activeProps",
+		"inactiveProps",
+		"activeOptions",
+		"to",
+		"preload",
+		"preloadDelay",
+		"hashScrollIntoView",
+		"replace",
+		"startTransition",
+		"resetScroll",
+		"viewTransition",
+		"target",
+		"disabled",
+		"style",
+		"class",
+		"onClick",
+		"onBlur",
+		"onFocus",
+		"onMouseEnter",
+		"onMouseLeave",
+		"onMouseOver",
+		"onMouseOut",
+		"onTouchStart",
+		"ignoreBlocker"
+	]);
+	const [_, propsSafeToSpread] = splitProps(rest, [
+		"params",
+		"search",
+		"hash",
+		"state",
+		"mask",
+		"reloadDocument",
+		"unsafeRelative"
+	]);
+	const currentLocation = useRouterState({ select: (s) => s.location });
+	const buildLocationKey = useRouterState({ select: (s) => {
+		const leaf = s.matches[s.matches.length - 1];
+		return {
+			search: leaf?.search,
+			hash: s.location.hash,
+			path: leaf?.pathname
+		};
+	} });
+	const from = options.from;
+	const _options = () => {
+		return {
+			...options,
+			from
+		};
+	};
+	const next = Solid.createMemo(() => {
+		buildLocationKey();
+		return router.buildLocation(_options());
+	});
+	const hrefOption = Solid.createMemo(() => {
+		if (_options().disabled) return void 0;
+		const location = next().maskedLocation ?? next();
+		const publicHref = location.publicHref;
+		if (location.external) return {
+			href: publicHref,
+			external: true
+		};
+		return {
+			href: router.history.createHref(publicHref) || "/",
+			external: false
+		};
+	});
+	const externalLink = Solid.createMemo(() => {
+		const _href = hrefOption();
+		if (_href?.external) {
+			if (isDangerousProtocol(_href.href, router.protocolAllowlist)) {
+				if (process.env.NODE_ENV !== "production") console.warn(`Blocked Link with dangerous protocol: ${_href.href}`);
+				return;
+			}
+			return _href.href;
+		}
+		const to = _options().to;
+		if (typeof to === "string" && to.charCodeAt(0) === 47 && to.charCodeAt(1) !== 47) return void 0;
+		try {
+			new URL(to);
+			if (isDangerousProtocol(to, router.protocolAllowlist)) {
+				if (process.env.NODE_ENV !== "production") console.warn(`Blocked Link with dangerous protocol: ${to}`);
+				return;
+			}
+			return to;
+		} catch {}
+	});
+	const preload = Solid.createMemo(() => {
+		if (_options().reloadDocument || externalLink()) return false;
+		return local.preload ?? router.options.defaultPreload;
+	});
+	const preloadDelay = () => local.preloadDelay ?? router.options.defaultPreloadDelay ?? 0;
+	const isActive = Solid.createMemo(() => {
+		if (externalLink()) return false;
+		if (local.activeOptions?.exact) {
+			if (!exactPathTest(currentLocation().pathname, next().pathname, router.basepath)) return false;
+		} else {
+			const currentPathSplit = removeTrailingSlash(currentLocation().pathname, router.basepath).split("/");
+			if (!(removeTrailingSlash(next()?.pathname, router.basepath)?.split("/"))?.every((d, i) => d === currentPathSplit[i])) return false;
+		}
+		if (local.activeOptions?.includeSearch ?? true) {
+			if (!deepEqual(currentLocation().search, next().search, {
+				partial: !local.activeOptions?.exact,
+				ignoreUndefined: !local.activeOptions?.explicitUndefined
+			})) return false;
+		}
+		if (local.activeOptions?.includeHash) return (shouldHydrateHash && !hasHydrated() ? "" : currentLocation().hash) === next().hash;
+		return true;
+	});
+	const doPreload = () => router.preloadRoute(_options()).catch((err) => {
+		console.warn(err);
+		console.warn(preloadWarning);
+	});
+	const preloadViewportIoCallback = (entry) => {
+		if (entry?.isIntersecting) doPreload();
+	};
+	const [ref, setRefSignal] = Solid.createSignal(null);
+	const setRef = (el) => {
+		Solid.runWithOwner(null, () => {
+			setRefSignal(el);
+		});
+	};
+	useIntersectionObserver(ref, preloadViewportIoCallback, { rootMargin: "100px" }, { disabled: !!local.disabled || !(Solid.untrack(preload) === "viewport") });
+	Solid.createEffect(preload, (preloadValue) => {
+		if (hasRenderFetched) return;
+		if (!local.disabled && preloadValue === "render") {
+			doPreload();
+			hasRenderFetched = true;
+		}
+	});
+	if (Solid.untrack(externalLink)) return Solid.merge(propsSafeToSpread, { href: externalLink() }, splitProps(local, [
+		"target",
+		"disabled",
+		"style",
+		"class",
+		"onClick",
+		"onBlur",
+		"onFocus",
+		"onMouseEnter",
+		"onMouseLeave",
+		"onMouseOut",
+		"onMouseOver",
+		"onTouchStart"
+	])[0]);
+	const handleClick = (e) => {
+		const elementTarget = e.currentTarget.getAttribute("target");
+		const effectiveTarget = local.target !== void 0 ? local.target : elementTarget;
+		if (!local.disabled && !isCtrlEvent(e) && !e.defaultPrevented && (!effectiveTarget || effectiveTarget === "_self") && e.button === 0) {
+			e.preventDefault();
+			setIsTransitioning(true);
+			const unsub = router.subscribe("onResolved", () => {
+				unsub();
+				setIsTransitioning(false);
+			});
+			router.navigate({
+				..._options(),
+				replace: local.replace,
+				resetScroll: local.resetScroll,
+				hashScrollIntoView: local.hashScrollIntoView,
+				startTransition: local.startTransition,
+				viewTransition: local.viewTransition,
+				ignoreBlocker: local.ignoreBlocker
+			});
+		}
+	};
+	const enqueueIntentPreload = (e) => {
+		if (local.disabled || preload() !== "intent") return;
+		if (!preloadDelay()) {
+			doPreload();
+			return;
+		}
+		const eventTarget = e.currentTarget || e.target;
+		if (!eventTarget || timeoutMap.has(eventTarget)) return;
+		timeoutMap.set(eventTarget, setTimeout(() => {
+			timeoutMap.delete(eventTarget);
+			doPreload();
+		}, preloadDelay()));
+	};
+	const handleTouchStart = (_) => {
+		if (local.disabled || preload() !== "intent") return;
+		doPreload();
+	};
+	const handleLeave = (e) => {
+		if (local.disabled) return;
+		const eventTarget = e.currentTarget || e.target;
+		if (eventTarget) {
+			const id = timeoutMap.get(eventTarget);
+			clearTimeout(id);
+			timeoutMap.delete(eventTarget);
+		}
+	};
+	/** Call a JSX.EventHandlerUnion with the event. */
+	function callHandler(event, handler) {
+		if (handler) if (typeof handler === "function") handler(event);
+		else handler[0](handler[1], event);
+		return event.defaultPrevented;
+	}
+	function composeEventHandlers(handlers) {
+		return (event) => {
+			for (const handler of handlers) callHandler(event, handler);
+		};
+	}
+	const resolvedActiveProps = () => isActive() ? functionalUpdate(local.activeProps, {}) ?? {} : {};
+	const resolvedInactiveProps = () => isActive() ? {} : functionalUpdate(local.inactiveProps, {});
+	const resolvedClassName = () => [
+		local.class,
+		resolvedActiveProps().class,
+		resolvedInactiveProps().class
+	].filter(Boolean).join(" ");
+	const resolvedStyle = () => ({
+		...local.style,
+		...resolvedActiveProps().style,
+		...resolvedInactiveProps().style
+	});
+	return Solid.merge(propsSafeToSpread, resolvedActiveProps, resolvedInactiveProps, () => {
+		return {
+			href: hrefOption()?.href,
+			ref: mergeRefs(setRef, _options().ref),
+			onClick: composeEventHandlers([local.onClick, handleClick]),
+			onBlur: composeEventHandlers([local.onBlur, handleLeave]),
+			onFocus: composeEventHandlers([local.onFocus, enqueueIntentPreload]),
+			onMouseEnter: composeEventHandlers([local.onMouseEnter, enqueueIntentPreload]),
+			onMouseOver: composeEventHandlers([local.onMouseOver, enqueueIntentPreload]),
+			onMouseLeave: composeEventHandlers([local.onMouseLeave, handleLeave]),
+			onMouseOut: composeEventHandlers([local.onMouseOut, handleLeave]),
+			onTouchStart: composeEventHandlers([local.onTouchStart, handleTouchStart]),
+			disabled: !!local.disabled,
+			target: local.target,
+			...(() => {
+				const s = resolvedStyle();
+				return Object.keys(s).length ? { style: s } : {};
+			})(),
+			...(() => {
+				const c = resolvedClassName();
+				return c ? { class: c } : {};
+			})(),
+			...local.disabled && {
+				role: "link",
+				"aria-disabled": "true"
+			},
+			...isActive() && {
+				"data-status": "active",
+				"aria-current": "page"
+			},
+			...isTransitioning() && { "data-transitioning": "transitioning" }
+		};
+	});
 }
 function createLink(Comp) {
-  return (props) => createComponent(Link, mergeProps(props, {
-    _asChild: Comp
-  }));
+	return (props) => createComponent(Link, mergeProps(props, { _asChild: Comp }));
 }
-const Link = (props) => {
-  const [local, rest] = splitProps(props, ["_asChild", "children"]);
-  const [_, linkProps] = splitProps(useLinkProps(rest), ["type"]);
-  const resolvedChildren = Solid.children(() => local.children);
-  const children = () => {
-    const ch = resolvedChildren();
-    if (typeof ch === "function") {
-      return ch({
-        get isActive() {
-          return linkProps["data-status"] === "active";
-        },
-        get isTransitioning() {
-          return linkProps["data-transitioning"] === "transitioning";
-        }
-      });
-    }
-    return ch;
-  };
-  if (local._asChild === "svg") {
-    const [_2, svgLinkProps] = splitProps(linkProps, ["class"]);
-    return (() => {
-      var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-      spread(_el$2, svgLinkProps, false, true);
-      insert(_el$2, children);
-      return _el$;
-    })();
-  }
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return memo(() => !!local._asChild)() ? local._asChild : "a";
-    }
-  }, linkProps, {
-    get children() {
-      return children();
-    }
-  }));
+var Link = (props) => {
+	const [local, rest] = splitProps(props, ["_asChild", "children"]);
+	const [_, linkProps] = splitProps(useLinkProps(rest), ["type"]);
+	const resolvedChildren = Solid.children(() => local.children);
+	const children = () => {
+		const ch = resolvedChildren();
+		if (typeof ch === "function") return ch({
+			get isActive() {
+				return linkProps["data-status"] === "active";
+			},
+			get isTransitioning() {
+				return linkProps["data-transitioning"] === "transitioning";
+			}
+		});
+		return ch;
+	};
+	if (local._asChild === "svg") {
+		const [_, svgLinkProps] = splitProps(linkProps, ["class"]);
+		return (() => {
+			var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+			spread(_el$2, svgLinkProps, false, true);
+			insert(_el$2, children);
+			return _el$;
+		})();
+	}
+	return createComponent(Dynamic, mergeProps({ get component() {
+		return memo(() => !!local._asChild)() ? local._asChild : "a";
+	} }, linkProps, { get children() {
+		return children();
+	} }));
 };
 function isCtrlEvent(e) {
-  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
+	return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
-const linkOptions = (options) => {
-  return options;
-};
-export {
-  Link,
-  createLink,
-  linkOptions,
-  useLinkProps
+var linkOptions = (options) => {
+	return options;
 };
-//# sourceMappingURL=link.js.map
+//#endregion
+export { Link, createLink, linkOptions, useLinkProps };
+
+//# sourceMappingURL=link.js.map