test: Added unittests for Link and NavLink from react-router v6

Author: bfanger

README.md

@@ -94,7 +94,7 @@ The preprocessor that is passed as an option is applied before running the prepr
 Once you've converted a React component to Svelte, you'd want delete that React component, but some if other React components depended on that component you can use `reactify` to use the new Svelte component as a React component.
 
 ```jsx
-import { reactify } from "resvelte-preprocess-react";
+import { reactify } from "svelte-preprocess-react";
 import ButtonSvelte from "../components/Button.svelte";
 
 const Button = reactify(ButtonSvelte);
@@ -111,7 +111,15 @@ function MyComponent() {
 Using multiple frontend frameworks add overhead both in User and Developer experience.
 
 - Increased download size
-- Slower (each framework boundry adds overhead)
+- Slower (each framework boundary adds overhead)
 - Context switching, keeping the intricacies of both Svelte and React in your head slows down development
 
-svelte-preprocess-react is a migraton tool, it can be used to migrate _from_ or _to_ React, it's not a long term solution.
+svelte-preprocess-react is a migration tool, it can be used to migrate _from_ or _to_ React, it's not a long term solution.
+
+# More info
+
+- [reactify()](./docs/reactify.md) Convert a Svelte component into an React component
+- [hooks()](./docs/hooks.md) Using React hooks inside Svelte components
+- [useStore](./docs/useStore.md) Using a Svelte Store in a React components
+- [react-router](./docs/react-router.md) Migrate from react-router to SvelteKit
+- [Architecture](./docs/architecture.md) svelte-preprocess-react's API Design-principles and System architecture

docs/architecture.md

@@ -1,6 +1,6 @@
 # Architecture
 
-This document describes designdecisions and implementation details of the preprocessor.
+This document describes design-decisions and implementation details of the preprocessor.
 
 **Principles:**
 
@@ -55,7 +55,7 @@ This array allows svelte-preprocess-react to inject the slotted content into the
 
 ### Server mode
 
-Based off on how the Svelte component is compiled we can detect SSR and utitilize the renderToString method th generate the html. (limited to leaf nodes a.t.m.)
+Based off on how the Svelte component is compiled we can detect SSR and utilize the renderToString method th generate the html. (limited to leaf nodes a.t.m.)
 
 This detection is done at runtime, so the client will also ship with the renderToStringYou server code.
 For smaller bundle size you can disable this feature by passing `ssr: false` to the preprocess function.

docs/hooks.md

@@ -1,7 +1,7 @@
 # hooks
 
 Using React hooks inside Svelte components.
-Because React doesn't have an synchronous render anymore (by-design), the initial value of the store will be `undefined`.
+Because React doesn't have a synchronous render (by-design), the initial value of the store will be `undefined`.
 
 The `hooks()` function uses Svelte lifecycle functions, so you can only call the function during component initialization.
 

docs/react-router.md

@@ -1,11 +1,28 @@
-# ReactRouter
+# react-router
 
-Using multiple client side routers in an application is not recommended.
-Try to use the router of the framework you're migrating to.
+Using multiple routers in one app is a problem, as they are not built with that use-case in mind.
+To make migrate React components that using react-router to Svelte easier, we created `svelte-preprocess-react/react-router`
 
-svelte-preprocess-react provides limited compatibility ReactRouter.
+This is **not** a drop-in replacement for react-router, as it lacks many features, but it eases the migration process.
 
-This allows you to reuse your React components that use react-router-dom in with minimal changes.
+## What does it do?
+
+It offers Hooks and Components that are used in the leaf nodes of the component tree, like:
+
+- `<Link />`
+- `<NavLink />`
+- useLocation()
+- useHistory()
+- useParams()
+
+This allows the basic things like reading info about the current url, rendering links and programmatic navigation to work.
+
+## What it does NOT do?
+
+Complex things like route matching, rendering routes, data-loading are out of scope.
+This becomes the job of the (svelte) router you're migrating to.
+
+## How to use it?
 
 replace:
 `import { Link } from "react-router-dom"`
@@ -36,3 +53,5 @@ In src/routes/+layout.svelte
   <slot />
 </Router>
 ```
+
+As you can see the `<Router>` is exposing the push & replace actions but the actual navigation and url updates are done by the SvelteKit router.

docs/reactify.md

@@ -23,4 +23,4 @@ const Dialog: React.FC<Props> = ({ onClose }) => (
 );
 ```
 
-React only has props, we we asume that the props starting with "on" followed by a capital letter are event handlers.
+React only has props, we we assume that the props starting with "on" followed by a capital letter are event handlers.

docs/useStore.md

@@ -24,10 +24,10 @@ In React and other regular javascript files this does _not_ work.
 To update the value and trigger an update use the `set` or `update` methods:
 
 ```ts
-// Instead of `$user = { name:'Jane Doe' }`
+// Instead of `$user = { name: "Jane Doe" }`
 user.set({ name: "Jane Doe" });
 
-// Instead of `$user.name = 'Jane Doe'`
+// Instead of `$user.name = "Jane Doe"`
 user.update((user) => ({ ...user, name: "Jane Doe" }));
 ```
 

package.json

@@ -51,6 +51,7 @@
     "@sveltejs/adapter-static": "next",
     "@sveltejs/kit": "next",
     "@sveltejs/package": "^1.0.0-next.1",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/svelte": "^3.1.3",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
@@ -68,6 +69,7 @@
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-svelte3": "^4.0.0",
+    "happy-dom": "^7.6.6",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "postcss": "^8.4.16",

src/lib/react-router/Link.ts

@@ -1,25 +1,48 @@
 import * as React from "react";
+import locationToUrl from "./internal/locationToUrl.js";
+import RouterContext from "./internal/RouterContext.js";
+import type { To } from "./types";
 
-type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-  component?: React.ComponentType<any> | undefined;
-  to: string | Location | ((location: Location) => Location);
+export type LinkProps = Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "href"
+> & {
   replace?: boolean;
-  innerRef?: React.Ref<HTMLAnchorElement> | undefined;
+  to: To;
 };
 
-const Link: React.FC<Props> = ({
-  component = "a",
-  to,
-  replace,
-  innerRef,
-  children,
-  ...attrs
-}) => {
-  const href = to ?? attrs.href;
-  return React.createElement(
-    component,
-    { ref: innerRef, ...attrs, href },
-    children
-  );
-};
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function LinkWithRef({ to, replace, children, ...rest }, ref) {
+    const attrs = rest;
+    const context = React.useContext(RouterContext);
+    if (!context) {
+      let pathname = "";
+      if (typeof to === "string") {
+        pathname = to;
+      } else if (typeof to === "object") {
+        pathname = to.pathname;
+      }
+      if (
+        replace ||
+        pathname.startsWith("/") === false ||
+        /^[a+z]+:\/\//.test(pathname) === false
+      ) {
+        // Without context only absolute paths are supported.
+        throw new Error("Link was not wrapped inside a <Router>");
+      }
+    }
+    const href = locationToUrl(to, context?.base).toString();
+    if (replace) {
+      const { onClick } = attrs;
+      attrs.onClick = (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          context?.history.replace(href);
+        }
+      };
+    }
+    return React.createElement("a", { ...attrs, ref, href }, children);
+  }
+);
 export default Link;

src/lib/react-router/NavLink.ts

@@ -1,56 +1,45 @@
 import * as React from "react";
-import Link from "./Link.js";
-import useLocation from "./useLocation.js";
-import type { Location } from "./types";
+import Link, { type LinkProps } from "./Link.js";
+import useRouterContext from "./internal/useRouterContext.js";
+import locationToUrl from "./internal/locationToUrl.js";
+import type { RouteCondition } from "./types.js";
 
-type LinkProps = React.ComponentProps<typeof Link>;
-type Props = Omit<LinkProps, "className" | "style"> & {
-  activeClassName?: string | undefined;
-  activeStyle?: React.CSSProperties | undefined;
-  exact?: boolean | undefined;
-  strict?: boolean | undefined;
-  isActive?(match: unknown, location: Location): boolean;
-  location?: Location | undefined;
-  className?: string | ((isActive: boolean) => string) | undefined;
+export type NavLinkProps = Omit<
+  LinkProps,
+  "className" | "style" | "children"
+> & {
+  children?: React.ReactNode | ((condition: RouteCondition) => React.ReactNode);
+  className?: string | ((condition: RouteCondition) => string | undefined);
   style?:
     | React.CSSProperties
-    | ((isActive: boolean) => React.CSSProperties)
-    | undefined;
-  sensitive?: boolean | undefined;
+    | ((condition: RouteCondition) => React.CSSProperties | undefined);
 };
-
-const NavLink: React.FC<Props> = ({
-  exact,
-  strict,
-  isActive,
-  location,
-  activeStyle,
-  activeClassName,
+const NavLink: React.FC<NavLinkProps> = ({
   className,
   style,
   children,
   ...rest
 }) => {
-  const attrs: LinkProps = { ...rest };
-  if (typeof attrs.to !== "string") {
-    throw new Error("NavLink only supports string locations");
+  const context = useRouterContext();
+  const attrs: LinkProps = rest;
+  const target = locationToUrl(attrs.to, context.base).toString();
+  const current = locationToUrl(context.location, context.base).toString();
+  const isActive = target === current;
+  const condition: RouteCondition = { isActive };
+  if (typeof className === "function") {
+    attrs.className = className(condition);
+  } else if (isActive) {
+    attrs.className = className ? `${className} active` : "active";
+  } else {
+    attrs.className = className;
   }
 
-  const { pathname } = useLocation();
-  const active = exact ? pathname === attrs.to : pathname.startsWith(attrs.to);
+  attrs.style = typeof style === "function" ? style(condition) : style;
 
-  if (active) {
-    if (activeClassName) {
-      attrs.className = attrs.className
-        ? `${attrs.className} ${activeClassName}`
-        : activeClassName;
-    }
-    if (activeStyle) {
-      attrs.style = attrs.style
-        ? { ...attrs.style, ...activeStyle }
-        : activeStyle;
-    }
-  }
-  return React.createElement(Link, attrs, children);
+  return React.createElement(
+    Link,
+    attrs,
+    typeof children === "function" ? children(condition) : children
+  );
 };
 export default NavLink;

src/lib/react-router/Router.svelte

@@ -14,6 +14,10 @@
 
 <react:RouterContextProvider
   value={{
+    base:
+      typeof window === "undefined"
+        ? "http://localhost/"
+        : window.location.href,
     location,
     params,
     history: {