rwsdk 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/runtime/client/client.d.ts

@@ -1,6 +1,7 @@
 import "./setWebpackRequire";
 export { default as React } from "react";
 export { ClientOnly } from "./ClientOnly.js";
+export { initClientNavigation, navigate } from "./navigation.js";
 import type { HydrationOptions, Transport } from "./types";
 export declare const fetchTransport: Transport;
 export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {

package/dist/runtime/client/client.js

@@ -11,6 +11,7 @@ import { createFromFetch, createFromReadableStream, encodeReply, } from "react-s
 import { rscStream } from "rsc-html-stream/client";
 export { default as React } from "react";
 export { ClientOnly } from "./ClientOnly.js";
+export { initClientNavigation, navigate } from "./navigation.js";
 export const fetchTransport = (transportContext) => {
     const fetchCallServer = async (id, args) => {
         const url = new URL(window.location.href);

package/dist/runtime/client/navigation.d.ts

@@ -4,6 +4,14 @@ export interface ClientNavigationOptions {
     scrollBehavior?: "auto" | "smooth" | "instant";
 }
 export declare function validateClickEvent(event: MouseEvent, target: HTMLElement): boolean;
+export interface NavigateOptions {
+    history?: "push" | "replace";
+    info?: {
+        scrollToTop?: boolean;
+        scrollBehavior?: "auto" | "smooth" | "instant";
+    };
+}
+export declare function navigate(href: string, options?: NavigateOptions): Promise<void>;
 export declare function initClientNavigation(opts?: ClientNavigationOptions): {
     handleResponse: (response: Response) => boolean;
 };

package/dist/runtime/client/navigation.js

@@ -1,10 +1,3 @@
-function saveScrollPosition(x, y) {
-    window.history.replaceState({
-        ...window.history.state,
-        scrollX: x,
-        scrollY: y,
-    }, "", window.location.href);
-}
 export function validateClickEvent(event, target) {
     // should this only work for left click?
     if (event.button !== 0) {
@@ -37,19 +30,43 @@ export function validateClickEvent(event, target) {
     }
     return true;
 }
+let IS_CLIENT_NAVIGATION = false;
+export async function navigate(href, options = { history: "push" }) {
+    if (!IS_CLIENT_NAVIGATION) {
+        window.location.href = href;
+        return;
+    }
+    saveScrollPosition(window.scrollX, window.scrollY);
+    const url = window.location.origin + href;
+    if (options.history === "push") {
+        window.history.pushState({ path: href }, "", url);
+    }
+    else {
+        window.history.replaceState({ path: href }, "", url);
+    }
+    await globalThis.__rsc_callServer;
+    const scrollToTop = options.info?.scrollToTop ?? true;
+    const scrollBehavior = options.info?.scrollBehavior ?? "instant";
+    if (scrollToTop && history.scrollRestoration === "auto") {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: scrollBehavior,
+        });
+        saveScrollPosition(0, 0);
+    }
+}
+function saveScrollPosition(x, y) {
+    window.history.replaceState({
+        ...window.history.state,
+        scrollX: x,
+        scrollY: y,
+    }, "", window.location.href);
+}
 export function initClientNavigation(opts = {}) {
-    const options = {
-        onNavigate: async function onNavigate() {
-            // @ts-expect-error
-            await globalThis.__rsc_callServer();
-        },
-        scrollToTop: true,
-        scrollBehavior: "instant",
-        ...opts,
-    };
+    IS_CLIENT_NAVIGATION = true;
     history.scrollRestoration = "auto";
     document.addEventListener("click", async function handleClickEvent(event) {
-        // Prevent default navigation
         if (!validateClickEvent(event, event.target)) {
             return;
         }
@@ -57,28 +74,18 @@ export function initClientNavigation(opts = {}) {
         const el = event.target;
         const a = el.closest("a");
         const href = a?.getAttribute("href");
-        saveScrollPosition(window.scrollX, window.scrollY);
-        window.history.pushState({ path: href }, "", window.location.origin + href);
-        await options.onNavigate();
-        if (options.scrollToTop && history.scrollRestoration === "auto") {
-            window.scrollTo({
-                top: 0,
-                left: 0,
-                behavior: options.scrollBehavior,
-            });
-            saveScrollPosition(0, 0);
-        }
-        history.scrollRestoration = "auto";
+        navigate(href);
     }, true);
     window.addEventListener("popstate", async function handlePopState() {
-        saveScrollPosition(window.scrollX, window.scrollY);
-        await options.onNavigate();
+        // @ts-expect-error
+        await globalThis.__rsc_callServer();
     });
     // Return a handleResponse function for use with initClient
     return {
         handleResponse: function handleResponse(response) {
             if (!response.ok) {
                 // Redirect to the current page (window.location) to show the error
+                // This means the page that produced the error is called twice.
                 window.location.href = window.location.href;
                 return false;
             }

package/dist/runtime/entries/clientSSR.d.ts

@@ -1,2 +1,3 @@
 import "./types/ssr";
 export * from "../lib/streams/consumeEventStream";
+export declare const navigate: () => void;

package/dist/runtime/entries/clientSSR.js

@@ -1,2 +1,5 @@
 import "./types/ssr";
 export * from "../lib/streams/consumeEventStream";
+export const navigate = () => {
+    /* stub */
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwsdk",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime",
   "type": "module",
   "bin": {