eddev 2.0.0-beta.27 → 2.0.0-beta.28

package/dist/app/lib/routing/components/BackButton.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import { RouteState } from "../types";
+type BackButtonProps = {
+    /**
+     * An optional matching function, which will stop the render button from appearing unless the function returns true.
+     *
+     * The below example will only render a back button if the last route was a project archive.
+     *
+     * eg. `filter={(route) => route.view === 'archive-projects'}`
+     *
+     * @param route The last route in the history stack.
+     */
+    filter?: (route: RouteState) => boolean;
+    /**
+     * An optional href, which will be used if no back route is found.
+     *
+     * When used, the back button will always render.
+     */
+    fallbackHref?: string;
+    /**
+     * A function to render the back button, if one should be rendered.
+     *
+     * Receives a `route` prop to further inspect the route, and an `onClick` function to navigate back.
+     *
+     * @param props
+     * @returns
+     */
+    render: (props: {
+        route: RouteState;
+        onClick: (e?: any) => void;
+    }) => ReactNode;
+};
+/**
+ * Display a back button that will navigate to the previous page in the router's history.
+ *
+ * This will allow you to render a back button on the condition that the back button will not send the user to a different website.
+ */
+export declare function BackButton(props: BackButtonProps): ReactNode;
+export {};

package/dist/app/lib/routing/components/BackButton.js

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useRouter } from "../hooks/useRouter";
+import { useRouterState } from "../hooks/useRouterState";
+import { getLinkHandlerMode } from "../utils";
+import { useRoute } from "../hooks/useRoute";
+/**
+ * Display a back button that will navigate to the previous page in the router's history.
+ *
+ * This will allow you to render a back button on the condition that the back button will not send the user to a different website.
+ */
+export function BackButton(props) {
+    const router = useRouter();
+    const route = useRoute();
+    const prevRoute = useRouterState((state) => state.history[state.history.length - 2]);
+    const backAction = useMemo(() => {
+        if (prevRoute && (!props.filter || props.filter(prevRoute))) {
+            return (e) => {
+                const { mode } = getLinkHandlerMode(e, prevRoute.uri);
+                if (mode === "navigate") {
+                    e.preventDefault();
+                    history.back();
+                    // history.length
+                }
+                else if (mode === "ignore") {
+                    e.preventDefault();
+                }
+            };
+        }
+        else if (props.fallbackHref) {
+            return (e) => {
+                const { mode } = getLinkHandlerMode(e, props.fallbackHref);
+                if (mode === "navigate") {
+                    e.preventDefault();
+                    router.navigate(props.fallbackHref);
+                }
+                else if (mode === "ignore") {
+                    e.preventDefault();
+                }
+            };
+        }
+    }, [route, props.filter, props.fallbackHref]);
+    if (backAction) {
+        return props.render ? props.render({ route: prevRoute, onClick: backAction }) : null;
+    }
+}

package/dist/app/lib/routing/components/BrowserRouter.js

@@ -28,6 +28,7 @@ if (env.client && !env.admin) {
             tags: initialData.meta?.head,
         },
     });
+    history.replaceState(historyStateForRoute(initialRoute), "", document.location.href);
     $routeMetaStore.data = getRouteMeta(initialData);
 }
 function parseHrefPath(url) {
@@ -120,6 +121,7 @@ export function BrowserRouter(props) {
         }
         internals.poppedState = (href, data) => {
             const stack = state.history;
+            console.log("Popped state", stack);
             // Is the route in our history stack? (going back)
             const index = stack.findIndex((item) => item.id === data.id);
             if (index >= 0) {
@@ -330,6 +332,39 @@ export function BrowserRouter(props) {
                 }
             },
             emitEvent,
+            restoreRoute(route) {
+                const stack = state.history;
+                // Is the route in our history stack? (going back)
+                const index = stack.findIndex((item) => item.id === route.id);
+                if (index >= 0) {
+                    return doRouteTransition({
+                        url: route.uri,
+                        route,
+                        goingBack: true,
+                        history: stack.slice(0, index),
+                        restoreState: route.returnState,
+                        shouldPush: false,
+                    });
+                }
+                // Is the route in our history _cache_? (probably going forward)
+                if (historyCache.has(route.id)) {
+                    return doRouteTransition({
+                        url: route.uri,
+                        route,
+                        goingBack: false,
+                        history: stack,
+                        restoreState: route.returnState,
+                        shouldPush: false,
+                    });
+                }
+                return doRouteTransition({
+                    url: route.uri,
+                    goingBack: false,
+                    history: stack,
+                    restoreState: route.returnState,
+                    shouldPush: false,
+                });
+            },
         };
         return {
             api,
@@ -358,6 +393,7 @@ export function BrowserRouter(props) {
         // Handle popState
         // const router = useRouterStore.getState()
         const onPopState = (e) => {
+            console.log("Popped", e.state);
             internals.poppedState?.(document.location.href, e.state ?? {});
         };
         window.addEventListener("popstate", onPopState);

package/dist/app/lib/routing/context.js

@@ -29,6 +29,7 @@ export const RouterContext = createContext({
     getState() {
         return null;
     },
+    restoreRoute(route) { },
 });
 export const RouterStateContext = createContext({
     history: [NOOP_ROUTE],

package/dist/app/lib/routing/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/Link.js";
 export * from "./components/ScrollRestoration.js";
 export * from "./components/RouteRenderer.js";
 export * from "./components/ClientOnly.js";
+export * from "./components/BackButton.js";
 export * from "./hooks/useRoute.js";
 export * from "./hooks/useRouteTransition.js";
 export * from "./hooks/useRouter.js";

package/dist/app/lib/routing/index.js

@@ -3,6 +3,7 @@ export * from "./components/Link.js";
 export * from "./components/ScrollRestoration.js";
 export * from "./components/RouteRenderer.js";
 export * from "./components/ClientOnly.js";
+export * from "./components/BackButton.js";
 export * from "./hooks/useRoute.js";
 export * from "./hooks/useRouteTransition.js";
 export * from "./hooks/useRouter.js";

package/dist/app/lib/routing/types.d.ts

@@ -111,6 +111,8 @@ export type RouterAPI = {
     emitEvent: (event: RouterEvent) => void;
     /** Returns the current RouterState */
     getState: () => RouterAPIState | null;
+    /** Go back to a previous route in the history stack, or push it onto the stack if it isn't currently on the stack. */
+    restoreRoute: (route: RouteState) => void;
 };
 export type TypedRouteState<T, TProps> = {
     /** A unique ID, representing this history item. */

package/dist/node/cli/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.27";
+export declare const VERSION = "2.0.0-beta.28";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.27";
+export const VERSION = "2.0.0-beta.28";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "description": "",
   "main": "index.js",
   "type": "module",