@volter/world-console 3.0.7 → 3.0.9

package/client/console.tsx

@@ -1752,7 +1752,7 @@ function Thumb({ url, title }: { url: string; title: string }): React.JSX.Elemen
  *  was the moment before the first of them beside how it is now. "Before" is a read-only copy of the World as of then (a
  *  branch the World makes for an hour, removed when this closes), its site read at the copy's own address. */
 function Compare({ name, token, frame, onClose, reads }: { name: string; token: string; frame: BoardFrame; onClose: () => void; /** the board's reads so far: its changes are read again with each */ reads: number }): React.JSX.Element {
-  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string; /** a vendor's page: opened as a page of its own, never framed */ opens?: boolean } | { state: 'none'; why: string }>({ state: 'opening' });
+  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string } | { state: 'none'; why: string }>({ state: 'opening' });
   // its changes, read for this comparison alone
   const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
   useEffect(() => {
@@ -1768,16 +1768,26 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       const b = (await r.json()) as { name: string; origin?: string; readToken?: string };
       made = b.name;
       if (closed) { void door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null); return; }
-      const o = httpOrigin(b.origin);
-      if (!o) { setBefore({ state: 'none', why: 'This World shows sites only at its own local address.' }); return; }
-      // a site at the copy's own address, framed; a vendor's page in the copy is behind the copy's session, which opens
-      // only on the copy's own pages (another site's frame is refused it), so it opens as a page of its own: the copy's
-      // hand-off page (served-world, `session/hand-off`) opens the session from the read token, then goes to the page
-      if ('site' in shown) { const u = new URL(frame.url); setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at }); return; }
-      if (!b.readToken) { setBefore({ state: 'none', why: 'The copy of the World gave no read token to open its pages with.' }); return; }
-      setBefore({ state: 'ok', url: `${o.origin}/-/${b.name}/session/hand-off#${new URLSearchParams({ token: b.readToken, land: `/${b.name}/${frame.vendor}${shown.screen}` }).toString()}`, at, opens: true });
+      // a site at the copy's own address; a vendor's page on the copy's own content plane, opened through this World's
+      // branch door (a one-time read pass): framed beside this World's page, never running on this World's origin
+      if ('site' in shown) {
+        const o = httpOrigin(b.origin);
+        if (!o) { setBefore({ state: 'none', why: 'This World shows sites only at its own local address.' }); return; }
+        const u = new URL(frame.url); setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at }); return;
+      }
+      const beside = `${WORLDS}/-/${name}/branches/${b.name}/pages?${new URLSearchParams({ land: `/${b.name}/${frame.vendor}${shown.screen}` }).toString()}`;
+      // the door answers a navigation with the copy's address; a host that shows no content plane says so instead
+      const asked = await fetch(beside, { credentials: 'same-origin', redirect: 'manual' }).catch(() => null);
+      if (closed) return;
+      if (asked?.type !== 'opaqueredirect') { setBefore({ state: 'none', why: `This World does not show its copy's pages${asked ? `: ${await failure(asked)}` : ''}.` }); return; }
+      setBefore({ state: 'ok', url: beside, at });
     })(), 500);
-    return () => { closed = true; clearTimeout(wait); if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE' }).catch(() => null); };
+    // the copy goes with the comparison, and with the page: a reload or a closed tab runs no cleanup of its own
+    const drop = (): void => { if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE', keepalive: true }).catch(() => null); made = null; };
+    // a page kept for back and forward keeps its copy: it may be shown again
+    const left = (e: PageTransitionEvent): void => { if (!e.persisted) drop(); };
+    window.addEventListener('pagehide', left);
+    return () => { closed = true; clearTimeout(wait); window.removeEventListener('pagehide', left); drop(); };
   }, [name, token, frame.vendor, frame.id, frame.since]);
   const now = frameUrl(name, frame);
   return (
@@ -1790,9 +1800,7 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       <div className="compare-sides">
         <figure>
           <figcaption>Before{before.state === 'ok' ? ` · as of ${when(before.at)}` : ''}</figcaption>
-          {before.state === 'ok' ? (before.opens
-            ? <p className="mode compare-note"><a href={before.url} target="_blank" rel="noopener noreferrer">Open {frame.title} as it was →</a><br />A read-only copy of the World, kept while this comparison is open.</p>
-            : <Thumb url={before.url} title={`${frame.title} before`} />) : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
+          {before.state === 'ok' ? <Thumb url={before.url} title={`${frame.title} before`} /> : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
         </figure>
         <figure>
           <figcaption>Now</figcaption>