@swiftbrowser/react 0.23.0 → 0.26.0

package/dist/index.js

@@ -1,13 +1,13 @@
-import { createContext, useContext, createElement, useSyncExternalStore, useRef, useLayoutEffect, useState, Children, useEffect, isValidElement, Fragment, useId, cloneElement, useCallback } from "react";
+import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { horizontalSizeClassFor } from "@swiftbrowser/web/src/protocol";
 import { BrowserHistory } from "@swiftbrowser/web/src/browserHistory";
 import { watchKeyboard } from "@swiftbrowser/web/src/deviceMode";
 import { browserEnvironment, exportFiles, loadableURL, performHostRequest } from "@swiftbrowser/web/src/hostRequests";
 import { Renderer } from "@swiftbrowser/web/src/renderer";
 import { currentScenePhase, watchScenePhase } from "@swiftbrowser/web/src/scenePhase";
-import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { applyTypeSizeVariables } from "@swiftbrowser/web/src/typography";
 import { configureSignInWithApple } from "@swiftbrowser/web/src/appleSignIn";
 import { fileURL } from "@swiftbrowser/web/src/files";
@@ -207,10 +207,12 @@ function inheritTitleModes(screens, effective) {
   }
 }
 class HostTree {
-  constructor(sink) {
+  constructor(sink, options = {}) {
     this.sink = sink;
+    this.options = options;
   }
   sink;
+  options;
   root = { id: 0, kind: "root", children: [], committedChildren: [] };
   nextId = 1;
   /** Emitted elements by id, for event dispatch. */
@@ -225,6 +227,8 @@ class HostTree {
   completions = /* @__PURE__ */ new Map();
   /** The root's `colorScheme` last sent (`.preferredColorScheme`); undefined while none was. */
   committedColorScheme;
+  /** Remote: the root's props last sent. */
+  committedRootProps = {};
   createInstance(props) {
     return {
       id: this.nextId++,
@@ -273,7 +277,7 @@ class HostTree {
     const visit = (child, sink, ctx) => {
       if (child.hidden) return;
       if (child.kind === PREF_KIND) {
-        const target = child.target === "root" || child.target === void 0 ? this.root : ctx[child.target];
+        const target = child.target === "root" || child.target === void 0 ? this.root : ctx[child.target] ?? (this.options.remote ? this.root : void 0);
         const entry2 = target ? effective.get(target) : void 0;
         if (entry2) Object.assign(entry2.props, child.props);
         return;
@@ -287,8 +291,8 @@ class HostTree {
       const entry = { props: { ...child.props }, children: [], hoisted: [] };
       effective.set(child, entry);
       sink.push(child);
-      const next2 = child.kind === "navscreen" ? { ...ctx, navscreen: child } : child.kind === "sheet" ? { ...ctx, sheet: child } : ctx;
-      for (const grandchild of child.children) visit(grandchild, entry.children, next2);
+      const next = child.kind === "navscreen" ? { ...ctx, navscreen: child } : child.kind === "sheet" ? { ...ctx, sheet: child } : ctx;
+      for (const grandchild of child.children) visit(grandchild, entry.children, next);
     };
     for (const child of this.root.children) visit(child, rootEffective.children, {});
     for (const entry of effective.values()) {
@@ -347,13 +351,23 @@ class HostTree {
     for (const id of this.retired) ops.push({ op: "remove", id });
     this.retired = [];
     this.committedLive = live;
-    const scheme = rootEffective.props["colorScheme"];
-    const next = scheme === void 0 ? this.committedColorScheme === void 0 ? void 0 : null : scheme;
-    if (next !== void 0 && next !== this.committedColorScheme) {
-      ops.push({ op: "update", id: 0, props: { colorScheme: next } });
-      this.committedColorScheme = next === null ? void 0 : next;
+    if (this.options.remote) {
+      if (!deepEqual(rootEffective.props, this.committedRootProps)) {
+        ops.push({ op: "update", id: 0, props: rootEffective.props });
+        this.committedRootProps = rootEffective.props;
+      }
+    } else {
+      const scheme = rootEffective.props["colorScheme"];
+      const next = scheme === void 0 ? this.committedColorScheme === void 0 ? void 0 : null : scheme;
+      if (next !== void 0 && next !== this.committedColorScheme) {
+        ops.push({ op: "update", id: 0, props: { colorScheme: next } });
+        this.committedColorScheme = next === null ? void 0 : next;
+      }
+    }
+    if (ops.length === 0) {
+      if (completion?.whenNothingDrawn) completion.callback();
+      return ops;
     }
-    if (ops.length === 0) return ops;
     const commit = { op: "commit" };
     if (animation) commit.animation = animation;
     if (completion) {
@@ -382,7 +396,7 @@ class HostTree {
     }
     if (!("id" in event)) return;
     const instance = this.live.get(event.id);
-    const handler = instance?.on?.[event.type];
+    const handler = instance?.on?.[event.type] ?? instance?.on?.["*"];
     handler?.(event);
   }
 }
@@ -402,8 +416,9 @@ function deepEqual(a, b) {
 }
 const DEFAULT_ENVIRONMENT = { colorScheme: "light", dynamicTypeSize: "large", horizontalSizeClass: "compact", scenePhase: "active" };
 const roots = /* @__PURE__ */ new Set();
-function createSwiftUIRoot(sink) {
-  const tree = new HostTree(sink);
+const HostTreeContext = createContext(null);
+function createSwiftUIRoot(sink, options = {}) {
+  const tree = new HostTree(sink, options);
   roots.add(tree);
   const container = reconciler.createContainer(
     tree,
@@ -424,7 +439,7 @@ function createSwiftUIRoot(sink) {
   let environment = DEFAULT_ENVIRONMENT;
   let current = null;
   const update = () => {
-    reconciler.updateContainerSync(createElement(EnvironmentProvider, { value: environment }, current), container, null, null);
+    reconciler.updateContainerSync(createElement(HostTreeContext.Provider, { value: tree }, createElement(EnvironmentProvider, { value: environment }, current)), container, null, null);
     reconciler.flushSyncWork();
   };
   return {
@@ -450,6 +465,13 @@ function injectIntoDevTools() {
   return reconciler.injectIntoDevTools() === true;
 }
 let nextCompletionSerial = 1;
+function stampNextCommit(tree, animation, completion) {
+  tree.pendingAnimation = animation;
+  if (!completion) return 0;
+  const serial = nextCompletionSerial++;
+  tree.pendingCompletion = { serial, criteria: completion.criteria, callback: completion.callback, whenNothingDrawn: true };
+  return serial;
+}
 function withAnimation(first, second, third, fourth) {
   const animation = typeof first === "function" ? { type: "default" } : first ?? { type: "default" };
   let body;
@@ -482,6 +504,258 @@ function withAnimation(first, second, third, fourth) {
     if (completion && !committed) completion();
   }
 }
+function createRemoteRoot() {
+  const root = { id: 0, kind: "root", props: {}, children: [], parent: null };
+  const nodes = /* @__PURE__ */ new Map([[0, root]]);
+  const handlers = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let version = 0;
+  let rootProps = {};
+  let eventHandler;
+  let environmentHandler;
+  let lastEnvironment;
+  let hostTree = null;
+  const detach2 = (node) => {
+    if (!node.parent) return;
+    const siblings = node.parent.children;
+    const at = siblings.indexOf(node);
+    if (at >= 0) siblings.splice(at, 1);
+    node.parent = null;
+  };
+  const forget = (node) => {
+    nodes.delete(node.id);
+    handlers.delete(node.id);
+    for (const child of node.children) forget(child);
+  };
+  const notify2 = () => {
+    version += 1;
+    for (const listener of listeners) listener();
+  };
+  const remote = {
+    applyOps(ops) {
+      let commit = null;
+      for (const op of ops) {
+        switch (op.op) {
+          case "create": {
+            if (nodes.has(op.id)) throw new Error(`remote tree: element ${op.id} created twice`);
+            nodes.set(op.id, { id: op.id, kind: op.kind, props: op.props, children: [], parent: null });
+            break;
+          }
+          case "update": {
+            if (op.id === 0) {
+              rootProps = op.props;
+              break;
+            }
+            const node = nodes.get(op.id);
+            if (!node) throw new Error(`remote tree: update of unknown element ${op.id}`);
+            node.props = op.props;
+            break;
+          }
+          case "insert": {
+            const node = nodes.get(op.id);
+            const parent = nodes.get(op.parent);
+            if (!node || !parent) throw new Error(`remote tree: insert of ${op.id} into ${op.parent}: unknown element`);
+            detach2(node);
+            parent.children.splice(op.index, 0, node);
+            node.parent = parent;
+            break;
+          }
+          case "remove": {
+            const node = nodes.get(op.id);
+            if (!node) break;
+            detach2(node);
+            forget(node);
+            break;
+          }
+          case "commit":
+            commit = op;
+            break;
+        }
+      }
+      if (!commit) return;
+      const { animation, completion, completionCriteria } = commit;
+      const answer = completion === void 0 ? void 0 : () => remote.dispatch({ type: "animationcomplete", serial: completion });
+      if (animation && hostTree) {
+        stampNextCommit(hostTree, animation, answer && { criteria: completionCriteria ?? "logicallyComplete", callback: answer });
+        notify2();
+        return;
+      }
+      notify2();
+      answer?.();
+    },
+    node(id) {
+      return nodes.get(id);
+    },
+    onEvent(handler) {
+      eventHandler = handler;
+    },
+    onEnvironment(handler) {
+      environmentHandler = handler;
+      if (lastEnvironment) handler(lastEnvironment);
+    },
+    dispatch(event) {
+      eventHandler?.(event);
+    },
+    setEnvironment(environment) {
+      if (lastEnvironment && lastEnvironment.colorScheme === environment.colorScheme && lastEnvironment.dynamicTypeSize === environment.dynamicTypeSize && lastEnvironment.horizontalSizeClass === environment.horizontalSizeClass && lastEnvironment.scenePhase === environment.scenePhase)
+        return;
+      lastEnvironment = environment;
+      environmentHandler?.(environment);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getVersion: () => version,
+    get root() {
+      return root;
+    },
+    get rootProps() {
+      return rootProps;
+    },
+    attach(tree) {
+      hostTree = tree;
+    },
+    handlersFor(id) {
+      let on = handlers.get(id);
+      if (!on) {
+        on = { "*": (event) => remote.dispatch({ ...event, id }) };
+        handlers.set(id, on);
+      }
+      return on;
+    },
+    dispose() {
+      root.children = [];
+      nodes.clear();
+      nodes.set(0, root);
+      handlers.clear();
+      listeners.clear();
+      eventHandler = void 0;
+      environmentHandler = void 0;
+      hostTree = null;
+    }
+  };
+  return remote;
+}
+function sb(kind, props, on, children, target) {
+  const hostProps = { kind };
+  if (props) hostProps.props = props;
+  if (on) hostProps.on = on;
+  if (target) hostProps.target = target;
+  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
+}
+const NavigationContext = createContext(null);
+const ScreenDepthContext = createContext(0);
+function useScreenDepth() {
+  return useContext(ScreenDepthContext);
+}
+function useNavigation() {
+  return useContext(NavigationContext);
+}
+function RegisterDestination({ destination }) {
+  const navigation = useContext(NavigationContext);
+  navigation?.registerDestination(destination);
+  return null;
+}
+const SCREEN_PROPS = ["title", "displayMode", "toolbarRole", "navigationBarHidden", "bottomBarHidden", "statusBarHidden"];
+function screenPrefs(props, key) {
+  const picked = {};
+  for (const name of SCREEN_PROPS) if (name in props) picked[name] = props[name];
+  if (picked["title"] === "") delete picked["title"];
+  if (picked["displayMode"] === "automatic") delete picked["displayMode"];
+  return Object.keys(picked).length ? createElement(Fragment, { key }, sb(PREF_KIND, picked, void 0, void 0, "navscreen")) : null;
+}
+function findStack(node) {
+  for (const child of node.children) {
+    if (child.kind === "sheet" || child.kind === "alert") continue;
+    if (child.kind === "navstack") return child;
+    const found = findStack(child);
+    if (found) return found;
+  }
+  return null;
+}
+const screensOf = (stack) => stack ? stack.children.filter((child) => child.kind === "navscreen") : [];
+function renderNode(root, node, stack) {
+  if (node.kind === "host") return null;
+  if (node === stack) {
+    const first = screensOf(stack)[0];
+    return createElement(Fragment, { key: node.id }, first ? renderScreen(root, first, stack) : null);
+  }
+  const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack)) : void 0;
+  return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
+}
+function renderScreen(root, screen, stack) {
+  const out = [screenPrefs(screen.props, "$screen")];
+  for (const child of screen.children) {
+    const drawn = renderNode(root, child, stack);
+    if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
+    else out.push(drawn);
+  }
+  return createElement(Fragment, null, ...out);
+}
+function RemoteScreen({ root, id }) {
+  useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
+  const screen = root.node(id);
+  if (!screen?.parent) return null;
+  return renderScreen(root, screen, findStack(root.root));
+}
+function RemoteTree({ root }) {
+  useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
+  const environment = useContext(EnvironmentContext);
+  const tree = useContext(HostTreeContext);
+  const navigation = useNavigation();
+  const depth = useScreenDepth();
+  useLayoutEffect(() => {
+    root.attach(tree);
+    return () => root.attach(null);
+  }, [root, tree]);
+  useLayoutEffect(() => {
+    root.setEnvironment(environment);
+  }, [root, environment]);
+  const stack = navigation ? findStack(root.root) : null;
+  const pushed = screensOf(stack).slice(1);
+  const values = useRef(/* @__PURE__ */ new Map());
+  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const lastPushed = useRef([]);
+  const valueFor = (id) => {
+    let value = values.current.get(id);
+    if (!value) {
+      value = { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id }) };
+      values.current.set(id, value);
+      ours.current.add(value);
+    }
+    return value;
+  };
+  useLayoutEffect(() => {
+    if (!navigation) return;
+    const ids = pushed.map((screen) => screen.id);
+    const wanted = ids.map(valueFor);
+    for (const id of values.current.keys()) if (!ids.includes(id)) values.current.delete(id);
+    const tail = navigation.path.slice(depth);
+    let shown = 0;
+    while (shown < tail.length && typeof tail[shown] === "object" && tail[shown] !== null && ours.current.has(tail[shown])) shown += 1;
+    const childMoved = ids.length !== lastPushed.current.length || ids.some((id, i) => id !== lastPushed.current[i]);
+    lastPushed.current = ids;
+    if (!childMoved && shown < wanted.length && tail.slice(0, shown).every((value, i) => value === wanted[i])) {
+      root.dispatch({ type: "tap", id: pushed[shown].id });
+      return;
+    }
+    if (shown === wanted.length && wanted.every((value, i) => tail[i] === value)) return;
+    navigation.setPath([...navigation.path.slice(0, depth), ...wanted]);
+  });
+  const out = [screenPrefs(root.rootProps, "$root")];
+  if ("colorScheme" in root.rootProps)
+    out.push(createElement(Fragment, { key: "$scheme" }, sb(PREF_KIND, { colorScheme: root.rootProps["colorScheme"] }, void 0, void 0, "root")));
+  for (const child of root.root.children) {
+    const drawn = renderNode(root, child, stack);
+    if (child.kind === "sheet" || child.kind === "alert") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "root")));
+    else if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
+    else out.push(drawn);
+  }
+  return createElement(Fragment, null, ...out);
+}
 const HIERARCHY = { primary: 1, secondary: 2, tertiary: 3, quaternary: 4 };
 function rgb(r2, g, b, a = 1) {
   return { r: r2, g, b, a };
@@ -713,15 +987,6 @@ function mount(screen, element, options = {}) {
   };
   return mounted;
 }
-const NavigationContext = createContext(null);
-function useNavigation() {
-  return useContext(NavigationContext);
-}
-function RegisterDestination({ destination }) {
-  const navigation = useContext(NavigationContext);
-  navigation?.registerDestination(destination);
-  return null;
-}
 const EMPTY = { canUndo: false, canRedo: false, undoActionName: "", redoActionName: "" };
 const defaultSchedule = (close) => {
   if (typeof queueMicrotask === "function") queueMicrotask(close);
@@ -1021,13 +1286,6 @@ function readBinding(value, onChange) {
   return [value, onChange ?? (() => {
   })];
 }
-function sb(kind, props, on, children, target) {
-  const hostProps = { kind };
-  if (props) hostProps.props = props;
-  if (on) hostProps.on = on;
-  if (target) hostProps.target = target;
-  return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
-}
 const CoordinateSpacesContext = createContext({});
 function useCoordinateSpaces() {
   return useContext(CoordinateSpacesContext);
@@ -1782,12 +2040,14 @@ function OwnStack(props) {
   const context = {
     push: (value) => setPath([...path, value]),
     pop: () => setPath(path.slice(0, -1)),
+    path,
+    setPath: (next) => setPath(next),
     registerDestination: (builder) => {
       destination.current = builder;
     }
   };
   const screens = [
-    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, own.children) }, "root")
+    /* @__PURE__ */ jsx(Fragment, { children: sb("navscreen", { title: "", displayMode: "automatic", depth: 0 }, { tap: context.pop }, /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: 0, children: own.children })) }, "root")
   ];
   path.forEach((value, index) => {
     const pop = () => setPath(path.slice(0, index));
@@ -1796,7 +2056,7 @@ function OwnStack(props) {
         "navscreen",
         { title: "", displayMode: "automatic", depth: index + 1 },
         { tap: pop },
-        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) })
+        /* @__PURE__ */ jsx(DismissContext.Provider, { value: pop, children: /* @__PURE__ */ jsx(ScreenDepthContext.Provider, { value: index + 1, children: /* @__PURE__ */ jsx(PathScreen, { value, destination }) }) })
       ) }, index + 1)
     );
   });
@@ -6948,6 +7208,7 @@ export {
   RadialGradient,
   Rectangle,
   RegisteredView,
+  RemoteTree,
   ResponseStream,
   RoundedRectangle,
   Row,
@@ -6993,6 +7254,7 @@ export {
   color,
   configureSignInWithApple,
   createFileManager,
+  createRemoteRoot,
   createSwiftUIRoot,
   exportFile,
   fileManager,