@swiftbrowser/react 0.9.2 → 0.9.4

package/README.md

@@ -215,6 +215,20 @@ content and actions render as root-level elements while presented;
 `presentationDetents` inside a sheet sets its detents. `useDismiss()` inside
 a pushed screen or a sheet pops or dismisses it.
 
+Navigation is mirrored in the browser's history by default: pushing a
+screen or presenting a sheet adds an entry, and the browser's back (a
+phone's edge swipe, Android's back gesture, the toolbar button) pops or
+dismisses it exactly as the bar's back button would, through the app's own
+state. The renderer's own swipe back ignores touch meanwhile, so the
+browser's edge swipe is the swipe back (a mouse drag from the edge still
+pops, since no browser navigates on one). The app popping on its own takes the history back
+with it, and forward returns to the entry that matches rather than
+re-pushing. The URL is left alone: an app that maps screens to paths sets
+them with `history.replaceState` on the entry the renderer made (a
+`pushState` of its own would add a second entry for the same screen).
+`<SwiftUIView history={false}>` (or `mount(..., { history: false })`) leaves
+the history untouched, for an island in a page whose own router owns it.
+
 ### Toolbars
 
 `ToolbarItem`'s `placement` takes SwiftUI's names. `secondaryAction` items

package/dist/index.js

@@ -2,6 +2,7 @@ import { createContext, useContext, createElement, useRef, useLayoutEffect, useS
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
+import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
@@ -439,6 +440,8 @@ function mount(screen, element, options = {}) {
   renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize });
   if (options.safeArea !== void 0) renderer.setSafeArea(options.safeArea);
   root.setEnvironment(environment);
+  const browserHistory = (options.history ?? true) && typeof window !== "undefined" ? new BrowserHistory(renderer, screen) : null;
+  browserHistory?.enable();
   const applyScheme = () => {
     const scheme = preferred ?? pageScheme;
     const device = screen.closest(".device");
@@ -472,6 +475,7 @@ function mount(screen, element, options = {}) {
     },
     unmount() {
       observer?.disconnect();
+      browserHistory?.dispose();
       screen.removeEventListener("sb:color-scheme", onPreferredScheme);
       root.unmount();
       renderer?.dispose();
@@ -513,6 +517,7 @@ function SwiftUIView({
   contexts,
   assets,
   safeArea,
+  history = true,
   className,
   style
 }) {
@@ -530,6 +535,7 @@ function SwiftUIView({
       dynamicTypeSize,
       safeArea: insetsOf(safeArea, fit),
       contentHeight: fit === "content",
+      history,
       ...assets ? { assets } : {}
     });
     mounted.current = instance;
@@ -537,7 +543,7 @@ function SwiftUIView({
       mounted.current = null;
       instance.unmount();
     };
-  }, [fit]);
+  }, [fit, history]);
   useLayoutEffect(() => {
     mounted.current?.root.render(tree);
   });