revine 1.3.0 → 1.4.0

package/dist/client.d.ts

@@ -8,5 +8,7 @@ export type { NavLinkProps } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
+export { middlewareResponse } from "./runtime/middleware.js";
+export type { MiddlewareConfig, MiddlewareFn, MiddlewareRequest, MiddlewareResponse } from "./runtime/middleware.js";
 export type { LayoutProps } from "./runtime/types.js";
 //# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACrH,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/client.js

@@ -5,3 +5,4 @@ export { NavLink } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
+export { middlewareResponse } from "./runtime/middleware.js";

package/dist/components/MiddlewareGuard.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { MiddlewareFn } from "../runtime/middleware.js";
+type Props = {
+    middleware: MiddlewareFn;
+    children: React.ReactNode;
+    loadingFallback?: React.ReactNode;
+};
+export declare function MiddlewareGuard({ middleware, children, loadingFallback }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MiddlewareGuard.d.ts.map

package/dist/components/MiddlewareGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddlewareGuard.d.ts","sourceRoot":"","sources":["../../src/components/MiddlewareGuard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,KAAK,KAAK,GAAG;IACT,UAAU,EAAE,YAAY,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,KAAK,2CA4B/E"}

package/dist/components/MiddlewareGuard.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+export function MiddlewareGuard({ middleware, children, loadingFallback }) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [status, setStatus] = useState("pending");
+    useEffect(() => {
+        setStatus("pending");
+        const request = {
+            pathname: location.pathname,
+            searchParams: new URLSearchParams(location.search),
+        };
+        Promise.resolve(middleware(request)).then((response) => {
+            if (response.type === "redirect") {
+                setStatus("redirecting");
+                navigate(response.destination, { replace: true });
+            }
+            else {
+                setStatus("allowed");
+            }
+        });
+    }, [location.pathname]);
+    if (status === "pending" || status === "redirecting") {
+        return _jsx(_Fragment, { children: loadingFallback ?? null });
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/dist/runtime/bundler/revinePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"revinePlugin.d.ts","sourceRoot":"","sources":["../../../src/runtime/bundler/revinePlugin.ts"],"names":[],"mappings":"AA2VA,wBAAgB,YAAY,IAAI,GAAG,CA6IlC"}
+{"version":3,"file":"revinePlugin.d.ts","sourceRoot":"","sources":["../../../src/runtime/bundler/revinePlugin.ts"],"names":[],"mappings":"AA2VA,wBAAgB,YAAY,IAAI,GAAG,CA4LlC"}

package/dist/runtime/bundler/revinePlugin.js

@@ -365,12 +365,51 @@ export function revinePlugin() {
         load(id) {
             if (id === VIRTUAL_ROUTING_ID) {
                 return `
-import { createBrowserRouter, useRouteError } from "react-router-dom";
-import { lazy, Suspense, createElement } from "react";
+import { createBrowserRouter, useRouteError, Outlet } from "react-router-dom";
+import { lazy, Suspense, createElement, useState, useEffect, useRef } from "react";
 import React from "react";
 
+// ── Middleware support ──────────────────────────────────────────────
+const middlewareModules = import.meta.glob("/src/middleware.{ts,tsx}", { eager: true });
+const middlewareMod = Object.values(middlewareModules)[0];
+const userMiddleware = middlewareMod?.default ?? null;
+
 ${errorBoundaryComponent}
 
+// ── MiddlewareGuard ─────────────────────────────────────────────────
+function MiddlewareGuard({ children }) {
+  const [status, setStatus] = React.useState("pending");
+  const lastPathnameRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!userMiddleware) { setStatus("allowed"); return; }
+
+    const run = async (pathname, search) => {
+      if (pathname === lastPathnameRef.current) return;
+      lastPathnameRef.current = pathname;
+
+      setStatus("pending");
+      const req = { pathname, searchParams: new URLSearchParams(search) };
+      const res = await Promise.resolve(userMiddleware(req));
+      if (res.type === "redirect") {
+        router.navigate(res.destination, { replace: true });
+        setStatus("redirecting");
+      } else {
+        setStatus("allowed");
+      }
+    };
+
+    run(window.location.pathname, window.location.search);
+
+    return router.subscribe((state) => {
+      run(state.location.pathname, state.location.search);
+    });
+  }, []);
+
+  if (status === "pending" || status === "redirecting") return null;
+  return React.createElement(React.Fragment, null, children);
+}
+
 const notFoundModules = import.meta.glob("/src/NotFound.tsx", { eager: true });
 const NotFoundComponent = Object.values(notFoundModules)[0]?.default;
 
@@ -430,7 +469,7 @@ const pageEntries = Object.entries(pages).filter(([filePath]) => {
   return !segments.some((s) => s.startsWith("_"));
 });
 
-const routes = pageEntries.map(([filePath, component]) => {
+const innerRoutes = pageEntries.map(([filePath, component]) => {
   const routePath = toRoutePath(filePath);
   const Component = lazy(component);
   const layouts = getLayoutsForPath(filePath);
@@ -453,7 +492,7 @@ const routes = pageEntries.map(([filePath, component]) => {
   };
 });
 
-routes.push({
+innerRoutes.push({
   path: "*",
   element: NotFoundComponent
     ? createElement(NotFoundComponent)
@@ -461,6 +500,14 @@ routes.push({
   errorElement: createElement(RevineErrorDialog),
 });
 
+const routes = [
+  {
+    element: createElement(MiddlewareGuard, null, createElement(Outlet)),
+    children: innerRoutes,
+    errorElement: createElement(RevineErrorDialog),
+  },
+];
+
 export const router = createBrowserRouter(routes, {
   future: {
     v7_startTransition: true,

package/dist/runtime/middleware.d.ts

@@ -0,0 +1,24 @@
+export type MiddlewareRequest = {
+    pathname: string;
+    searchParams: URLSearchParams;
+};
+export type MiddlewareResponse = {
+    type: "next";
+} | {
+    type: "redirect";
+    destination: string;
+};
+export declare const middlewareResponse: {
+    next: () => MiddlewareResponse;
+    redirect: (destination: string) => MiddlewareResponse;
+};
+export type MiddlewareFn = (request: MiddlewareRequest) => MiddlewareResponse | Promise<MiddlewareResponse>;
+export type MiddlewareConfig = {
+    publicPaths?: string[];
+    authPaths?: string[];
+    redirects?: {
+        whenAuthenticated?: string;
+        whenUnauthenticated?: string;
+    };
+};
+//# sourceMappingURL=middleware.d.ts.map

package/dist/runtime/middleware.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"middleware.d.ts","sourceRoot":"","sources":["../../src/runtime/middleware.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,eAAe,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9C,eAAO,MAAM,kBAAkB;gBACnB,kBAAkB;4BACJ,MAAM,KAAG,kBAAkB;CAIpD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CACzB,OAAO,EAAE,iBAAiB,KACvB,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE;QACV,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH,CAAC"}

package/dist/runtime/middleware.js

@@ -0,0 +1,7 @@
+export const middlewareResponse = {
+    next: () => ({ type: "next" }),
+    redirect: (destination) => ({
+        type: "redirect",
+        destination,
+    }),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revine",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A react framework, but better.",
   "license": "MIT",
   "author": "Rachit Bharadwaj",

package/src/client.ts

@@ -15,4 +15,6 @@ export type { NavLinkProps } from "./components/NavLink.js";
 export { useRouter } from "./hooks/useRouter.js";
 export { defineConfig } from "./runtime/defineConfig.js";
 export { env, envAll } from "./runtime/env.js";
+export { middlewareResponse } from "./runtime/middleware.js";
+export type { MiddlewareConfig, MiddlewareFn, MiddlewareRequest, MiddlewareResponse } from "./runtime/middleware.js";
 export type { LayoutProps } from "./runtime/types.js";

package/src/components/MiddlewareGuard.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import type { MiddlewareFn } from "../runtime/middleware.js";
+
+type Props = {
+    middleware: MiddlewareFn;
+    children: React.ReactNode;
+    loadingFallback?: React.ReactNode;
+};
+
+export function MiddlewareGuard({ middleware, children, loadingFallback }: Props) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [status, setStatus] = useState<"pending" | "allowed" | "redirecting">("pending");
+
+    useEffect(() => {
+        setStatus("pending");
+
+        const request = {
+            pathname: location.pathname,
+            searchParams: new URLSearchParams(location.search),
+        };
+
+        Promise.resolve(middleware(request)).then((response) => {
+            if (response.type === "redirect") {
+                setStatus("redirecting");
+                navigate(response.destination, { replace: true });
+            } else {
+                setStatus("allowed");
+            }
+        });
+    }, [location.pathname]);
+
+    if (status === "pending" || status === "redirecting") {
+        return <>{loadingFallback ?? null}</>;
+    }
+
+    return <>{children}</>;
+}

package/src/runtime/bundler/revinePlugin.ts

@@ -380,12 +380,51 @@ export function revinePlugin(): any {
     load(id: string) {
       if (id === VIRTUAL_ROUTING_ID) {
         return `
-import { createBrowserRouter, useRouteError } from "react-router-dom";
-import { lazy, Suspense, createElement } from "react";
+import { createBrowserRouter, useRouteError, Outlet } from "react-router-dom";
+import { lazy, Suspense, createElement, useState, useEffect, useRef } from "react";
 import React from "react";
 
+// ── Middleware support ──────────────────────────────────────────────
+const middlewareModules = import.meta.glob("/src/middleware.{ts,tsx}", { eager: true });
+const middlewareMod = Object.values(middlewareModules)[0];
+const userMiddleware = middlewareMod?.default ?? null;
+
 ${errorBoundaryComponent}
 
+// ── MiddlewareGuard ─────────────────────────────────────────────────
+function MiddlewareGuard({ children }) {
+  const [status, setStatus] = React.useState("pending");
+  const lastPathnameRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!userMiddleware) { setStatus("allowed"); return; }
+
+    const run = async (pathname, search) => {
+      if (pathname === lastPathnameRef.current) return;
+      lastPathnameRef.current = pathname;
+
+      setStatus("pending");
+      const req = { pathname, searchParams: new URLSearchParams(search) };
+      const res = await Promise.resolve(userMiddleware(req));
+      if (res.type === "redirect") {
+        router.navigate(res.destination, { replace: true });
+        setStatus("redirecting");
+      } else {
+        setStatus("allowed");
+      }
+    };
+
+    run(window.location.pathname, window.location.search);
+
+    return router.subscribe((state) => {
+      run(state.location.pathname, state.location.search);
+    });
+  }, []);
+
+  if (status === "pending" || status === "redirecting") return null;
+  return React.createElement(React.Fragment, null, children);
+}
+
 const notFoundModules = import.meta.glob("/src/NotFound.tsx", { eager: true });
 const NotFoundComponent = Object.values(notFoundModules)[0]?.default;
 
@@ -445,7 +484,7 @@ const pageEntries = Object.entries(pages).filter(([filePath]) => {
   return !segments.some((s) => s.startsWith("_"));
 });
 
-const routes = pageEntries.map(([filePath, component]) => {
+const innerRoutes = pageEntries.map(([filePath, component]) => {
   const routePath = toRoutePath(filePath);
   const Component = lazy(component);
   const layouts = getLayoutsForPath(filePath);
@@ -468,7 +507,7 @@ const routes = pageEntries.map(([filePath, component]) => {
   };
 });
 
-routes.push({
+innerRoutes.push({
   path: "*",
   element: NotFoundComponent
     ? createElement(NotFoundComponent)
@@ -476,6 +515,14 @@ routes.push({
   errorElement: createElement(RevineErrorDialog),
 });
 
+const routes = [
+  {
+    element: createElement(MiddlewareGuard, null, createElement(Outlet)),
+    children: innerRoutes,
+    errorElement: createElement(RevineErrorDialog),
+  },
+];
+
 export const router = createBrowserRouter(routes, {
   future: {
     v7_startTransition: true,

package/src/runtime/middleware.ts

@@ -0,0 +1,29 @@
+export type MiddlewareRequest = {
+  pathname: string;
+  searchParams: URLSearchParams;
+};
+
+export type MiddlewareResponse =
+  | { type: "next" }
+  | { type: "redirect"; destination: string };
+
+export const middlewareResponse = {
+  next: (): MiddlewareResponse => ({ type: "next" }),
+  redirect: (destination: string): MiddlewareResponse => ({
+    type: "redirect",
+    destination,
+  }),
+};
+
+export type MiddlewareFn = (
+  request: MiddlewareRequest,
+) => MiddlewareResponse | Promise<MiddlewareResponse>;
+
+export type MiddlewareConfig = {
+  publicPaths?: string[]; // paths accessible WITHOUT login
+  authPaths?: string[];   // paths only for GUESTS (login, register)
+  redirects?: {
+    whenAuthenticated?: string; // redirect auth pages to (default: "/")
+    whenUnauthenticated?: string; // redirect private pages to (default: "/login")
+  };
+};