Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/app/compat/next/helper.ts

@@ -0,0 +1,33 @@
+/**
+ * Ensures that a URL has a trailing slash while preserving query parameters and fragments
+ * @param url - The URL to process
+ * @returns The URL with a trailing slash added to the pathname (if not already present)
+ */
+export function ensureTrailingSlash(url: string): string {
+  try {
+    // Handle relative URLs by creating a URL object with a dummy base
+    const urlObj = new URL(url, "http://dummy.com");
+
+    // Don't modify root path
+    if (urlObj.pathname === "/") {
+      return url;
+    }
+
+    // Add trailing slash if it doesn't exist
+    if (!urlObj.pathname.endsWith("/")) {
+      urlObj.pathname += "/";
+    }
+
+    // For relative URLs, return just the path + search + hash
+    if (url.startsWith("/")) {
+      return urlObj.pathname + urlObj.search + urlObj.hash;
+    }
+
+    // For absolute URLs, return the full URL
+    return urlObj.toString();
+  } catch (error) {
+    // If URL parsing fails, return the original URL
+    console.warn("Failed to parse URL for trailing slash enforcement:", url, error);
+    return url;
+  }
+}

apps/web/app/compat/next/image.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+
+// Minimal shim so code using next/image compiles under React Router + Vite
+// without changing call sites. It just renders a native img.
+
+type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string;
+  fill?: boolean;
+  priority?: boolean;
+  quality?: number;
+  placeholder?: "blur" | "empty";
+  blurDataURL?: string;
+};
+
+const Image: React.FC<NextImageProps> = ({
+  src,
+  alt = "",
+  fill,
+  priority: _priority,
+  quality: _quality,
+  placeholder: _placeholder,
+  blurDataURL: _blurDataURL,
+  ...rest
+}) => {
+  // If fill is true, apply object-fit styles
+  const style = fill ? { objectFit: "cover" as const, width: "100%", height: "100%" } : rest.style;
+
+  return <img src={src} alt={alt} {...rest} style={style} />;
+};
+
+export default Image;

apps/web/app/compat/next/link.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+import { Link as RRLink } from "react-router";
+import { ensureTrailingSlash } from "./helper";
+
+type NextLinkProps = React.ComponentProps<"a"> & {
+  href: string;
+  replace?: boolean;
+  prefetch?: boolean; // next.js prop, ignored
+  scroll?: boolean; // next.js prop, ignored
+  shallow?: boolean; // next.js prop, ignored
+};
+
+const Link: React.FC<NextLinkProps> = ({
+  href,
+  replace,
+  prefetch: _prefetch,
+  scroll: _scroll,
+  shallow: _shallow,
+  ...rest
+}) => <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+
+export default Link;

apps/web/app/compat/next/navigation.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { useMemo } from "react";
+import { useLocation, useNavigate, useParams as useParamsRR, useSearchParams as useSearchParamsRR } from "react-router";
+import { ensureTrailingSlash } from "./helper";
+
+export function useRouter() {
+  const navigate = useNavigate();
+  return useMemo(
+    () => ({
+      push: (to: string) => {
+        // Defer navigation to avoid state updates during render
+        setTimeout(() => navigate(ensureTrailingSlash(to)), 0);
+      },
+      replace: (to: string) => {
+        // Defer navigation to avoid state updates during render
+        setTimeout(() => navigate(ensureTrailingSlash(to), { replace: true }), 0);
+      },
+      back: () => {
+        setTimeout(() => navigate(-1), 0);
+      },
+      forward: () => {
+        setTimeout(() => navigate(1), 0);
+      },
+      refresh: () => {
+        location.reload();
+      },
+      prefetch: async (_to: string) => {
+        // no-op in this shim
+      },
+    }),
+    [navigate]
+  );
+}
+
+export function usePathname(): string {
+  const { pathname } = useLocation();
+  return pathname;
+}
+
+export function useSearchParams(): URLSearchParams {
+  const [searchParams] = useSearchParamsRR();
+  return searchParams;
+}
+
+export function useParams() {
+  return useParamsRR();
+}

apps/web/app/compat/next/script.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect } from "react";
+
+type ScriptProps = {
+  src?: string;
+  id?: string;
+  strategy?: "beforeInteractive" | "afterInteractive" | "lazyOnload" | "worker";
+  onLoad?: () => void;
+  onError?: () => void;
+  children?: string;
+  defer?: boolean;
+  [key: string]: any;
+};
+
+// Minimal shim for next/script that creates a script tag
+const Script: React.FC<ScriptProps> = ({ src, id, strategy: _strategy, onLoad, onError, children, ...rest }) => {
+  useEffect(() => {
+    if (src) {
+      const script = document.createElement("script");
+      if (id) script.id = id;
+      script.src = src;
+      if (onLoad) script.onload = onLoad;
+      if (onError) script.onerror = onError;
+      Object.keys(rest).forEach((key) => {
+        script.setAttribute(key, rest[key]);
+      });
+      document.body.appendChild(script);
+
+      return () => {
+        if (script.parentNode) {
+          document.body.removeChild(script);
+        }
+      };
+    } else if (children) {
+      const script = document.createElement("script");
+      if (id) script.id = id;
+      script.textContent = children;
+      Object.keys(rest).forEach((key) => {
+        script.setAttribute(key, rest[key]);
+      });
+      document.body.appendChild(script);
+
+      return () => {
+        if (script.parentNode) {
+          document.body.removeChild(script);
+        }
+      };
+    }
+  }, [src, id, children, onLoad, onError, rest]);
+
+  return null;
+};
+
+export default Script;