@tinacms/bridge 0.2.0 → 0.3.0

package/dist/forms.d.ts

@@ -1,11 +1,9 @@
 import type { DataStore } from './types';
+export declare const FORM_SELECTOR = "[data-tina-form]";
+export declare const FORM_ATTR = "data-tina-form";
+export declare const PRIMARY_FORM_ATTR = "data-tina-primary";
 export declare function initForms(store: DataStore): void;
-/**
- * Re-scan the DOM for form payloads after a soft navigation. Diff
- * against the previous mount and post `close` / `open` for the delta.
- *
- * Safe to call even if the bridge isn't initialised — used for setups
- * that wire `astro:page-load` unconditionally. No-op outside an iframe.
- */
+/** Diff active forms against the DOM and post the deltas. Safe to call
+ *  before init() — no-op then. */
 export declare function refreshForms(): void;
 export declare function reportQuickEdit(): void;

package/dist/forms.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,44 +1,17 @@
-import { refreshForms } from './forms';
 export interface BridgeOptions {
-    /**
-     * Per-island debounce for refetches triggered by subsequent edits.
-     * The first refetch after page load fires immediately so newly-created
-     * docs reach a populated state ASAP. Default 300ms.
-     */
+    /** Debounce for refetches after the first edit. The first refetch
+     *  fires immediately. Default 300ms. */
     debounceMs?: number;
-    /**
-     * Origin(s) of the TinaCMS admin parent. Inbound postMessage events are
-     * accepted only when `event.origin` matches one of these AND
-     * `event.source` is `window.parent`. Outbound posts use the first entry
-     * (or the single string) as `targetOrigin`.
-     *
-     * Defaults to `window.location.origin` — correct when the admin is
-     * mounted at `/admin` on the same host (the common case). Override when
-     * the admin runs on a different origin (cross-domain self-hosted
-     * deployments, Codespaces, Docker setups). Mirrors the role of
-     * `server.allowedOrigins` in `tina.config` for the dev server's CORS,
-     * but applied to the in-iframe postMessage channel instead of HTTP.
-     */
+    /** Allowed origin(s) of the admin parent for in-iframe postMessage.
+     *  Defaults to `window.location.origin` (same-host `/admin`). */
     adminOrigin?: string | string[];
 }
 export declare function init(options?: BridgeOptions): void;
 /**
- * Re-scan the page for `[data-tina-form]` payloads after a soft
- * navigation (Astro view transitions, Turbo, htmx, etc.). Posts `close`
- * for forms that left and `open` for forms that appeared. Safe to call
- * before `init()` — no-op when the bridge isn't running.
- *
- * Astro projects using `@tinacms/astro/integration` get this wired
- * automatically (the middleware splices the bootstrap script that
- * listens for `astro:page-load`). Sites consuming `@tinacms/bridge`
- * directly need:
- *
- * ```ts
- * import { init, refreshForms } from '@tinacms/bridge';
- * init();
- * document.addEventListener('astro:page-load', refreshForms);
- * ```
+ * Re-scan for `[data-tina-form]` payloads after a soft navigation
+ * (Astro view transitions, Turbo, htmx). On a prerendered page with no
+ * server-injected payloads, prime from the island endpoints first.
  */
-export { refreshForms };
+export declare function refreshForms(): void;
 export { tinaField } from './tina-field';
 export type * from './types';

package/dist/index.js

@@ -132,6 +132,7 @@ function initDataStore() {
   const listeners = /* @__PURE__ */ new Set();
   return {
     get: (id) => data.get(id),
+    has: (id) => data.has(id),
     seed(id, next) {
       data.set(id, next);
     },
@@ -151,6 +152,7 @@ function initDataStore() {
 }
 const FORM_SELECTOR = "[data-tina-form]";
 const FORM_ATTR = "data-tina-form";
+const PRIMARY_FORM_ATTR = "data-tina-primary";
 const RETRY_INTERVAL_MS = 250;
 const MAX_ATTEMPTS = 40;
 let controller = null;
@@ -163,19 +165,19 @@ function initForms(store) {
     store,
     active: /* @__PURE__ */ new Map(),
     acknowledged: /* @__PURE__ */ new Set(),
+    primaryId: null,
     retryTimer: null,
     attempts: 0
   };
   window.addEventListener("message", onAck);
   window.addEventListener("beforeunload", onBeforeUnload);
-  refreshForms();
 }
-function refreshForms() {
+function refreshForms$1() {
   if (!controller) {
     debug("refreshForms called before initForms; ignoring");
     return;
   }
-  const next = readPayloads();
+  const { payloads: next, primaryId } = readPayloads();
   const nextIds = new Set(next.map((p) => p.id));
   for (const [id] of controller.active) {
     if (nextIds.has(id))
@@ -188,6 +190,7 @@ function refreshForms() {
     controller.store.seed(payload.id, payload.data ?? {});
   }
   controller.active = new Map(next.map((p) => [p.id, p]));
+  controller.primaryId = primaryId && nextIds.has(primaryId) ? primaryId : null;
   if (next.some((p) => !controller.acknowledged.has(p.id))) {
     startAnnounceLoop();
   }
@@ -196,6 +199,7 @@ function refreshForms() {
 function readPayloads() {
   const elements = document.querySelectorAll(FORM_SELECTOR);
   const payloads = [];
+  let primaryId = null;
   for (const el of elements) {
     const raw = el.getAttribute(FORM_ATTR);
     if (!raw)
@@ -205,12 +209,15 @@ function readPayloads() {
       if (!payload.id || !payload.query)
         continue;
       payloads.push(payload);
+      if (primaryId === null && el.hasAttribute(PRIMARY_FORM_ATTR)) {
+        primaryId = payload.id;
+      }
     } catch (error) {
       debug("failed to parse form payload", error);
     }
   }
   debug("discovered", payloads.length, "form(s)");
-  return payloads;
+  return { payloads, primaryId };
 }
 function onAck(event) {
   if (!isFromAdmin(event))
@@ -281,6 +288,12 @@ function announce() {
       getAdminOrigin()
     );
   }
+  if (controller.primaryId && pending.some((p) => p.id === controller.primaryId)) {
+    window.parent.postMessage(
+      { type: "user-select-form", formId: controller.primaryId },
+      getAdminOrigin()
+    );
+  }
   controller.retryTimer = setTimeout(announce, RETRY_INTERVAL_MS);
 }
 function reportQuickEdit() {
@@ -291,8 +304,11 @@ function reportQuickEdit() {
   );
 }
 const PREVIEW_CONTENT_TYPE = "application/x-tina-preview+json";
+const PRIME_HEADER = "X-Tina-Prime";
 const ISLAND_SELECTOR = "[data-tina-island]";
 const ENDPOINT_ATTR = "data-tina-island";
+const PRIMARY_ISLAND_ATTR = "data-tina-island-primary";
+const PRIMED_FORM_ATTR = "data-tina-primed";
 function initIslandRefresh(store, options) {
   let pendingRefresh = null;
   const refreshAll = () => {
@@ -322,6 +338,10 @@ function initIslandRefresh(store, options) {
     if (!message || typeof message !== "object")
       return;
     if (message.type === "updateData" && typeof message.id === "string") {
+      if (!store.has(message.id)) {
+        debug("updateData for unknown id", message.id, "— ignoring");
+        return;
+      }
       debug("updateData received for", message.id);
       store.set(message.id, message.data ?? {});
     }
@@ -350,6 +370,10 @@ async function refreshIsland(island, store) {
       debug("island refetch failed", endpoint, response.status);
       return;
     }
+    if (!isHtmlResponse(response)) {
+      debug("island refetch wrong content-type", endpoint);
+      return;
+    }
     const html = await response.text();
     swapIslandHtml(island, html);
     reportQuickEdit();
@@ -357,11 +381,66 @@ async function refreshIsland(island, store) {
     debug("island refetch error", endpoint, error);
   }
 }
+async function primeIslands() {
+  const islands = document.querySelectorAll(ISLAND_SELECTOR);
+  const results = await Promise.all(Array.from(islands, primeIsland));
+  for (const formEl of results.flat()) {
+    formEl.setAttribute(PRIMED_FORM_ATTR, "");
+    document.body.appendChild(formEl);
+  }
+}
+async function primeIsland(island) {
+  const endpoint = island.getAttribute(ENDPOINT_ATTR);
+  if (!endpoint)
+    return [];
+  const isPrimary = island.hasAttribute(PRIMARY_ISLAND_ATTR);
+  try {
+    debug("priming island", endpoint);
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": PREVIEW_CONTENT_TYPE,
+        [PRIME_HEADER]: "1"
+      },
+      body: "{}",
+      cache: "no-store",
+      credentials: "same-origin"
+    });
+    if (!response.ok) {
+      debug("island prime failed", endpoint, response.status);
+      return [];
+    }
+    if (!isHtmlResponse(response)) {
+      debug("island prime wrong content-type", endpoint);
+      return [];
+    }
+    const template = document.createElement("template");
+    template.innerHTML = (await response.text()).trim();
+    const formEls = Array.from(
+      template.content.querySelectorAll(FORM_SELECTOR)
+    );
+    if (isPrimary && formEls[0]) {
+      formEls[0].setAttribute(PRIMARY_FORM_ATTR, "");
+    }
+    return formEls;
+  } catch (error) {
+    debug("island prime error", endpoint, error);
+    return [];
+  }
+}
+function isHtmlResponse(response) {
+  const contentType = response.headers.get("content-type") ?? "";
+  return contentType.includes("text/html");
+}
+function isAllowedSwapAttribute(name) {
+  if (name === "class" || name === "id")
+    return true;
+  return name.startsWith("data-tina-");
+}
 function swapIslandHtml(island, html) {
   const template = document.createElement("template");
   template.innerHTML = html.trim();
-  const fragment = template.content;
-  const replacement = fragment.firstElementChild;
+  const replacement = template.content.firstElementChild;
   if (replacement) {
     for (const attr of Array.from(island.attributes)) {
       if (attr.name === ENDPOINT_ATTR)
@@ -369,6 +448,8 @@ function swapIslandHtml(island, html) {
       island.removeAttribute(attr.name);
     }
     for (const attr of Array.from(replacement.attributes)) {
+      if (!isAllowedSwapAttribute(attr.name))
+        continue;
       island.setAttribute(attr.name, attr.value);
     }
     island.innerHTML = replacement.innerHTML;
@@ -388,11 +469,10 @@ const tinaField = (object, property, index) => {
   const fullPath = typeof index === "number" ? [...path, property, index] : [...path, property];
   return `${queryId}---${fullPath.join(".")}`;
 };
-let initialized = false;
+let running = false;
 function init(options = {}) {
-  if (initialized)
+  if (running)
     return;
-  initialized = true;
   if (typeof window === "undefined" || window.parent === window) {
     debug("not in an iframe; bridge is a no-op");
     return;
@@ -404,6 +484,43 @@ function init(options = {}) {
   initIslandRefresh(store, { debounceMs });
   initClickToFocus();
   initForms(store);
+  running = true;
+  refreshForms();
+}
+let primingInFlight = null;
+let reprimePending = false;
+function refreshForms() {
+  if (!running) {
+    debug("refreshForms called before init() finished; ignoring");
+    return;
+  }
+  removePrimedForms();
+  const hasServerForms = document.querySelector("[data-tina-form]");
+  if (!hasServerForms && document.querySelector("[data-tina-island]")) {
+    if (primingInFlight) {
+      reprimePending = true;
+      return;
+    }
+    debug("no server-injected forms; priming from island endpoints");
+    primingInFlight = primeIslands().finally(() => {
+      primingInFlight = null;
+    });
+    void primingInFlight.then(() => {
+      if (reprimePending) {
+        reprimePending = false;
+        refreshForms();
+        return;
+      }
+      refreshForms$1();
+    });
+    return;
+  }
+  refreshForms$1();
+}
+function removePrimedForms() {
+  for (const el of document.querySelectorAll(`[${PRIMED_FORM_ATTR}]`)) {
+    el.remove();
+  }
 }
 export {
   init,

package/dist/island-refresh.d.ts

@@ -1,22 +1,22 @@
 import type { DataStore } from './types';
 /**
- * Listens for `{type:'updateData', id, data}` from the admin and re-fetches
- * every `[data-tina-island]` on the page with the unsaved data attached as
- * a JSON POST body. The island endpoint reads the body via `readOverlay()`
- * from `@tinacms/bridge/preview` and renders with overlay data instead of
- * hitting the canonical content store.
- *
- * Why POST: HTTP headers are capped at ~8 KB (server-dependent) — large
- * posts overflow easily — and are restricted to Latin-1 so UTF-8 content
- * needs base64 padding. A POST body has neither limit and round-trips
- * UTF-8 directly.
- *
- * The very first updateData fires immediately so newly-created docs leave
- * the empty-template state ASAP. Subsequent updates collapse into a single
- * debounced refetch — each refresh re-renders every island anyway, so a
- * per-id timer would just fire N redundant times for the same DOM scan.
+ * Listen for admin `updateData` events and re-fetch every island on the
+ * page with the unsaved data POSTed as a JSON body. POST (vs header)
+ * avoids the ~8KB Latin-1 cap. Refetches collapse into one debounced
+ * pass (every refresh re-renders every island).
  */
 export interface IslandRefreshOptions {
     debounceMs: number;
 }
+/** Marks a `[data-tina-form]` div that a prime pass appended (vs. one the
+ *  server injected), so a later re-scan can drop it before re-priming. */
+export declare const PRIMED_FORM_ATTR = "data-tina-primed";
 export declare function initIslandRefresh(store: DataStore, options: IslandRefreshOptions): void;
+/**
+ * Hydrate `[data-tina-form]` payloads for prerendered pages by hitting
+ * each island endpoint with the prime header set; the endpoint prepends
+ * payloads to the region HTML. The caller follows up with refreshForms()
+ * to announce them. Region HTML isn't swapped — canonical data is
+ * already on the page; the first real `updateData` handles updates.
+ */
+export declare function primeIslands(): Promise<void>;

package/dist/island-refresh.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/preview.d.ts

@@ -1,29 +1,16 @@
 /**
- * Shared preview-protocol helpers for both ends of the X-Tina-Preview
- * channel. The bridge POSTs island refetches with a JSON body of shape
- *
- *   { [queryId]: data, ... }
- *
- * Server-side island handlers call `readOverlay(request, queryId)` to
- * fetch the overlay data for their own query without having to know the
- * transport details (POST body vs header, JSON vs base64-encoded JSON).
- *
- * Runs in Node (Astro server endpoints, Hugo plugins, etc.) — no DOM
- * dependencies. The browser-side encoder lives in island-refresh.ts.
+ * Server-side helpers for the X-Tina-Preview channel. The bridge POSTs
+ * island refetches with body `{ [queryId]: data, ... }`; handlers read
+ * their slice via `readOverlay(request, queryId)`.
  */
 export declare const PREVIEW_HEADER = "X-Tina-Preview";
 export declare const PREVIEW_CONTENT_TYPE = "application/x-tina-preview+json";
+/** Set on the one-time prime refetch for prerendered pages; the endpoint
+ *  prepends `<div data-tina-form>` payloads to the region HTML. */
+export declare const PRIME_HEADER = "X-Tina-Prime";
 export interface PreviewEnvelope {
     [queryId: string]: unknown;
 }
-/**
- * Read the overlay envelope for a given query id from an incoming
- * request. Returns `undefined` if no overlay is present (production
- * traffic, or an island refetch with no matching id).
- */
 export declare function readOverlay<T>(request: Request, queryId: string): Promise<T | undefined>;
-/**
- * Read and parse the full overlay envelope (every form on the page),
- * for callers that want to inspect the raw payload.
- */
+/** Read and parse the full overlay envelope (every form on the page). */
 export declare function readEnvelope(request: Request): Promise<PreviewEnvelope | undefined>;

package/dist/preview.js

@@ -1,5 +1,6 @@
 const PREVIEW_HEADER = "X-Tina-Preview";
 const PREVIEW_CONTENT_TYPE = "application/x-tina-preview+json";
+const PRIME_HEADER = "X-Tina-Prime";
 const MAX_ENVELOPE_BYTES = 1e6;
 async function readOverlay(request, queryId) {
   const envelope = await readEnvelope(request);
@@ -8,7 +9,16 @@ async function readOverlay(request, queryId) {
   const value = envelope[queryId];
   return value === void 0 ? void 0 : value;
 }
-async function readEnvelope(request) {
+const envelopeCache = /* @__PURE__ */ new WeakMap();
+function readEnvelope(request) {
+  let cached = envelopeCache.get(request);
+  if (!cached) {
+    cached = parseEnvelope(request);
+    envelopeCache.set(request, cached);
+  }
+  return cached;
+}
+async function parseEnvelope(request) {
   const contentType = request.headers.get("content-type") ?? "";
   if (!contentType.includes(PREVIEW_CONTENT_TYPE))
     return void 0;
@@ -29,6 +39,7 @@ async function readEnvelope(request) {
 export {
   PREVIEW_CONTENT_TYPE,
   PREVIEW_HEADER,
+  PRIME_HEADER,
   readEnvelope,
   readOverlay
 };

package/dist/refresh-forms.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -45,6 +45,8 @@ export interface FormPayload {
 export interface DataStore {
     /** Latest resolved data per form id. */
     get(id: string): object | undefined;
+    /** Whether a form id has been seeded or set. */
+    has(id: string): boolean;
     /** Populate without notifying subscribers (used for the initial seed). */
     seed(id: string, data: object): void;
     /** Replace cached data for a form and notify subscribers. */

package/dist/types.test-d.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/bridge",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",