refactor: links types are in sync and support router_mode

Author: LiasCode

packages/pranx/FEATURES.md

@@ -19,3 +19,4 @@
 -[ ] Custom Error Pages
 -[ ] Websockets
 -[ ] Graphql
+-[ ] Env out of the box

packages/pranx/src/client/components/link.tsx

@@ -1,40 +1,70 @@
 import { type ComponentProps, forwardRef } from "preact/compat";
+import type { LinkProps } from "types/client";
 import { _useAppContext } from "../app-context";
 
-export type LinkProps = Omit<ComponentProps<"a">, "href"> & {
-  to: string;
-};
-
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, forwardedRef) => {
   if (!props.to) {
     throw new Error("Link element must provide a `to` property");
   }
 
-  if (typeof window !== "undefined" && window.pranx.router_mode === "spa") {
-    const { set } = _useAppContext();
+  if (typeof window === "undefined" || window.pranx.router_mode === "mpa") {
     return (
-      <a
+      <LinkMpa
+        ref={forwardedRef}
+        {...props}
+      />
+    );
+  }
+
+  if (window.pranx.router_mode === "spa") {
+    return (
+      <LinkSPA
         ref={forwardedRef}
         {...props}
-        data-to={props.to}
-        href={props.to}
-        onClick={() => {
-          set("prop_status", "loading");
-        }}
-      >
-        {props.children}
-      </a>
+      />
     );
   }
 
+  return <LinkFallback />;
+});
+
+export const LinkSPA = forwardRef<HTMLAnchorElement, LinkProps>((props, forwardedRef) => {
+  const { set } = _useAppContext();
   return (
     <a
       ref={forwardedRef}
       {...props}
       data-to={props.to}
       href={props.to}
+      onClick={() => {
+        set("prop_status", "loading");
+      }}
     >
       {props.children}
     </a>
   );
 });
+
+export const LinkMpa = forwardRef<HTMLAnchorElement, LinkProps>((props, forwardedRef) => {
+  return (
+    <a
+      ref={forwardedRef}
+      {...props}
+      data-to={props.to}
+      href={props.to}
+    >
+      {props.children}
+    </a>
+  );
+});
+
+export const LinkFallback = forwardRef<HTMLAnchorElement, ComponentProps<"a">>(
+  (props, forwardedRef) => {
+    return (
+      <a
+        ref={forwardedRef}
+        {...props}
+      />
+    );
+  }
+);

packages/pranx/src/client/mount.ts

@@ -1,6 +1,6 @@
-import { hydrate, type VNode } from "preact";
+import { type ComponentChild, hydrate } from "preact";
 
-export function mount(app: VNode<any>, root: Element | DocumentFragment): void {
+export function mount(app: ComponentChild, root: Element | DocumentFragment): void {
   document.addEventListener("DOMContentLoaded", () => {
     hydrate(app, root);
   });

packages/pranx/types/client.d.ts

@@ -1,7 +1,7 @@
-import { ComponentProps, FunctionalComponent, Ref, VNode } from "preact";
+import { ComponentChild, ComponentProps, FunctionalComponent, Ref, VNode } from "preact";
 import { PropsWithChildren } from "preact/compat";
 
-export type LinkProps = ComponentProps<"a"> & {
+export type LinkProps = Omit<ComponentProps<"a">, "href"> & {
   to: string;
 };
 
@@ -16,7 +16,7 @@ export declare const useAppContext: () => {
   props_status: "ready" | "loading" | "error";
 };
 
-export function mount(app: any, root: Element | DocumentFragment): void;
+function mount(app: ComponentChild, root: Element | DocumentFragment): void;
 
 export type PranxRouterProps = PropsWithChildren & {
   /**