fix: navigate hash urls natively (#4929)

Fixes #4830

Remix incorrectly navigates hashes and clear search params. Here fixed
this by using native `<a>` and tweaked the logic in builder.

Test navigating hashes (when search params are present) in builder and
on published site.

Author: TrySound

apps/builder/app/canvas/interceptor.ts

@@ -37,10 +37,21 @@ const switchPageAndUpdateSystem = (href: string, formData?: FormData) => {
     return;
   }
   // preserve pathname when not specified in href/action
-  if (href === "" || href.startsWith("?") || href.startsWith("#")) {
+  if (href === "" || href.startsWith("?")) {
     const pathname = getSelectedPagePathname();
     if (pathname) {
-      href = pathname + href;
+      href = `${pathname}${href}`;
+    }
+  }
+  // preserve also search params when navigate with hash
+  if (href.startsWith("#")) {
+    const pathname = getSelectedPagePathname();
+    if (pathname) {
+      const system = $currentSystem.get();
+      const searchParams = new URLSearchParams(
+        system.search as Record<string, string>
+      );
+      href = `${pathname}?${searchParams}${href}`;
     }
   }
   const pageHref = new URL(href, "https://any-valid.url");

packages/sdk-components-react-remix/src/link.tsx

@@ -1,4 +1,42 @@
+import { forwardRef, type ComponentPropsWithoutRef, useContext } from "react";
+import { NavLink as RemixLink } from "@remix-run/react";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
 
-export const Link = wrapLinkComponent(BaseLink);
+type Props = Omit<ComponentPropsWithoutRef<typeof BaseLink>, "target"> & {
+  // override (string & {}) in target to generate keywords
+  target?: "_self" | "_blank" | "_parent" | "_top";
+
+  // useful remix props
+  prefetch?: "none" | "intent" | "render" | "viewport";
+  reloadDocument?: boolean;
+  replace?: boolean;
+  preventScrollReset?: boolean;
+};
+
+export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
+  // cast to string when invalid value type is provided with binding
+  const href = String(props.href ?? "");
+
+  // use remix link for self reference and all relative urls
+  // ignore asset paths which can be relative too
+  // urls starting with # should be handled natively to not override search params
+  if (
+    // remix appends ?index in runtime but not in ssr
+    href === "" ||
+    href.startsWith("?") ||
+    (href.startsWith("/") && href.startsWith(assetBaseUrl) === false)
+  ) {
+    // In the future, we will switch to the :local-link pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link). (aria-current="page" is used now)
+    // Therefore, we decided to use end={true} (exact route matching) for all links to facilitate easier migration.
+    return <RemixLink {...props} to={href} ref={ref} end />;
+  }
+
+  const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } =
+    props;
+
+  return <BaseLink {...rest} ref={ref} />;
+});
+
+Link.displayName = BaseLink.displayName;

packages/sdk-components-react-remix/src/rich-text-link.tsx

@@ -1,4 +1 @@
-import { RichTextLink as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
-
-export const RichTextLink = wrapLinkComponent(BaseLink);
+export { Link as RichTextLink } from "./link";

packages/sdk-components-react-remix/src/shared/remix-link.tsx

@@ -1,4 +1,42 @@
+import { type ComponentPropsWithoutRef, forwardRef, useContext } from "react";
+import { NavLink as RemixLink } from "react-router";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
 
-export const Link = wrapLinkComponent(BaseLink);
+type Props = Omit<ComponentPropsWithoutRef<typeof BaseLink>, "target"> & {
+  // override (string & {}) in target to generate keywords
+  target?: "_self" | "_blank" | "_parent" | "_top";
+
+  // useful remix props
+  prefetch?: "none" | "intent" | "render" | "viewport";
+  reloadDocument?: boolean;
+  replace?: boolean;
+  preventScrollReset?: boolean;
+};
+
+export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
+  // cast to string when invalid value type is provided with binding
+  const href = String(props.href ?? "");
+
+  // use remix link for self reference and all relative urls
+  // ignore asset paths which can be relative too
+  // urls starting with # should be handled natively to not override search params
+  if (
+    // remix appends ?index in runtime but not in ssr
+    href === "" ||
+    href.startsWith("?") ||
+    (href.startsWith("/") && href.startsWith(assetBaseUrl) === false)
+  ) {
+    // In the future, we will switch to the :local-link pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link). (aria-current="page" is used now)
+    // Therefore, we decided to use end={true} (exact route matching) for all links to facilitate easier migration.
+    return <RemixLink {...props} to={href} ref={ref} end />;
+  }
+
+  const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } =
+    props;
+
+  return <BaseLink {...rest} ref={ref} />;
+});
+
+Link.displayName = BaseLink.displayName;

packages/sdk-components-react-router/src/link.tsx

@@ -1,4 +1 @@
-import { RichTextLink as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
-
-export const RichTextLink = wrapLinkComponent(BaseLink);
+export { Link as RichTextLink } from "./link";