@farm.js/core 0.1.0-beta.0

package/dist/chunk-TU4YJICB.mjs

@@ -0,0 +1,728 @@
+import {
+  _hydrateFarmI18n,
+  getFarmI18nClientState,
+  isFarmLocaleChangeHref
+} from "./chunk-ITN462YM.mjs";
+import {
+  createFarmDeploymentMismatchError,
+  createFarmDeploymentRequestHeaders,
+  isFarmDeploymentMismatchResponse
+} from "./chunk-B232I2GP.mjs";
+import {
+  readDeferredDataResponse
+} from "./chunk-GS6K5OCM.mjs";
+import {
+  stripFarmLocaleFromPathname
+} from "./chunk-44ZCFSKE.mjs";
+import {
+  createFarmRouter
+} from "./chunk-ZBE6MLHL.mjs";
+import {
+  __name
+} from "./chunk-CGILA3WO.mjs";
+
+// src/client/spa-router.ts
+var FARM_PAGE_STATE_KEY = "__farmPageState";
+var IDLE_NAVIGATION_STATE = {
+  state: "idle",
+  pending: false,
+  from: null,
+  to: null,
+  action: null,
+  startedAt: null
+};
+var routerInstance = null;
+var _SPARouter = class _SPARouter {
+  constructor(options = {}) {
+    this.cache = /* @__PURE__ */ new Map();
+    this.prefetchingUrls = /* @__PURE__ */ new Set();
+    this.observers = /* @__PURE__ */ new Map();
+    this.blockers = /* @__PURE__ */ new Set();
+    this.navigationListeners = /* @__PURE__ */ new Set();
+    this.navigationState = IDLE_NAVIGATION_STATE;
+    this.scrollElements = /* @__PURE__ */ new Map();
+    this.options = {
+      prefetchTimeout: options.prefetchTimeout ?? 100,
+      cacheMaxAge: options.cacheMaxAge ?? 3e4,
+      // 30 seconds
+      scrollRestoration: options.scrollRestoration ?? true,
+      shouldUseDocumentNavigation: options.shouldUseDocumentNavigation ?? (() => false),
+      deploymentId: options.deploymentId ?? readBrowserDeploymentId()
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("popstate", this.handlePopState.bind(this));
+      window.addEventListener("beforeunload", (event) => {
+        if (this.blockers.size > 0) {
+          event.preventDefault();
+          event.returnValue = "";
+        }
+        this.saveScrollPosition(window.location.pathname);
+      });
+    }
+  }
+  /**
+   * Set the navigation handler that updates React
+   */
+  setNavigationHandler(handler) {
+    this.onNavigate = handler;
+  }
+  /**
+   * Connect Farm's browser plugin lifecycle to SPA navigation.
+   */
+  setClientPluginManager(manager) {
+    this.clientPlugins = manager;
+  }
+  /**
+   * Navigate to a new URL
+   */
+  async navigate(href, options = {}) {
+    const { replace = false, scroll = true, state, viewTransition = false } = options;
+    const url = new URL(href, window.location.origin);
+    const pathname = url.pathname;
+    const search = url.search;
+    const fullPath = pathname + search;
+    if (isFarmLocaleChangeHref(url.toString()) || this.options.shouldUseDocumentNavigation(pathname)) {
+      if (replace) window.location.replace(url.toString());
+      else window.location.assign(url.toString());
+      return;
+    }
+    if (pathname === window.location.pathname && search === window.location.search) {
+      if (url.hash) {
+        window.location.hash = url.hash;
+      }
+      return;
+    }
+    const from = window.location.pathname + window.location.search;
+    if (await this.shouldBlockNavigation({ from, to: fullPath, action: replace ? "replace" : "push" })) {
+      return;
+    }
+    if (this.options.scrollRestoration) {
+      this.saveScrollPosition(window.location.pathname);
+    }
+    this.startNavigation({
+      from,
+      to: createNavigationLocation(url),
+      action: replace ? "replace" : "push"
+    });
+    let clientNavigation;
+    try {
+      clientNavigation = await this.clientPlugins?.beginNavigation({
+        from,
+        to: url,
+        action: replace ? "replace" : "push"
+      });
+      const pageData = await this.fetchPageData(fullPath);
+      if (clientNavigation) {
+        await this.clientPlugins?.markNavigationLoaded(clientNavigation, pageData);
+      }
+      if (pageData.isClientComponent === false) {
+        this.finishNavigation();
+        window.location.assign(pageData.canonicalPath || fullPath);
+        return;
+      }
+      await this.runViewTransition(
+        viewTransition,
+        () => this.commitNavigation({
+          fullPath,
+          pageData,
+          pathname,
+          replace,
+          scroll,
+          state,
+          url
+        })
+      );
+      if (clientNavigation) {
+        await this.clientPlugins?.resolveNavigation(clientNavigation);
+        void this.clientPlugins?.scheduleNavigationRendered(clientNavigation);
+      }
+      this.finishNavigation();
+    } catch (error) {
+      if (clientNavigation) {
+        await this.clientPlugins?.failNavigation(clientNavigation, error);
+      }
+      this.finishNavigation();
+      console.error("[Farm.js] Navigation error:", error);
+      window.location.href = href;
+    }
+  }
+  /**
+   * Prefetch a URL
+   */
+  async prefetch(href) {
+    if (isFarmLocaleChangeHref(href)) return;
+    const url = new URL(href, window.location.origin);
+    const fullPath = url.pathname + url.search;
+    if (this.prefetchingUrls.has(fullPath)) return;
+    if (this.isCached(fullPath)) return;
+    this.prefetchingUrls.add(fullPath);
+    try {
+      await this.fetchPageData(fullPath, false);
+    } catch (error) {
+      console.warn("[Farm.js] Prefetch failed:", href, error);
+    } finally {
+      this.prefetchingUrls.delete(fullPath);
+    }
+  }
+  /**
+   * Observe an element for viewport intersection (prefetch when visible)
+   */
+  observeForPrefetch(element) {
+    if (typeof IntersectionObserver === "undefined") return;
+    const href = element.getAttribute("href");
+    if (!href || this.isExternalUrl(href)) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setTimeout(() => {
+              this.prefetch(href);
+            }, this.options.prefetchTimeout);
+            observer.unobserve(element);
+            this.observers.delete(element);
+          }
+        }
+      },
+      { rootMargin: "200px" }
+      // Start prefetching when 200px from viewport
+    );
+    observer.observe(element);
+    this.observers.set(element, observer);
+  }
+  /**
+   * Stop observing an element
+   */
+  unobserveForPrefetch(element) {
+    const observer = this.observers.get(element);
+    if (observer) {
+      observer.unobserve(element);
+      this.observers.delete(element);
+    }
+  }
+  addBlocker(blocker) {
+    this.blockers.add(blocker);
+    return () => {
+      this.blockers.delete(blocker);
+    };
+  }
+  getNavigationState() {
+    return this.navigationState;
+  }
+  subscribeNavigation(listener) {
+    this.navigationListeners.add(listener);
+    listener(this.navigationState);
+    return () => {
+      this.navigationListeners.delete(listener);
+    };
+  }
+  registerScrollElement(key, element) {
+    this.scrollElements.set(key, element);
+    this.restoreScrollElement(window.location.pathname, key, element);
+    return () => {
+      if (this.scrollElements.get(key) === element) {
+        this.scrollElements.delete(key);
+      }
+    };
+  }
+  pushState(state, href) {
+    this.writePageState("push", state, href);
+  }
+  replaceState(state, href) {
+    this.writePageState("replace", state, href);
+  }
+  async commitNavigation(options) {
+    const historyPath = options.pageData.canonicalPath || options.fullPath;
+    const historyState = createHistoryState(historyPath, options.state);
+    if (options.replace) {
+      window.history.replaceState(historyState, "", historyPath);
+    } else {
+      window.history.pushState(historyState, "", historyPath);
+    }
+    if (options.pageData.metadata?.title) {
+      document.title = options.pageData.metadata.title;
+    }
+    if (options.pageData.metadata?.description) {
+      let metaDesc = document.querySelector('meta[name="description"]');
+      if (!metaDesc) {
+        metaDesc = document.createElement("meta");
+        metaDesc.setAttribute("name", "description");
+        document.head.appendChild(metaDesc);
+      }
+      metaDesc.setAttribute("content", options.pageData.metadata.description);
+    }
+    _hydrateFarmI18n(options.pageData.i18n);
+    if (this.onNavigate) {
+      await this.onNavigate(options.pageData);
+    }
+    if (options.scroll) {
+      if (options.url.hash) {
+        const element = document.querySelector(options.url.hash);
+        if (element) {
+          element.scrollIntoView();
+        }
+      } else {
+        window.scrollTo(0, 0);
+      }
+    } else if (this.options.scrollRestoration) {
+      this.restoreScrollPosition(options.pathname);
+    }
+  }
+  async runViewTransition(mode, callback) {
+    if (!mode || typeof document === "undefined") {
+      await callback();
+      return;
+    }
+    const startViewTransition = document.startViewTransition;
+    if (typeof startViewTransition !== "function") {
+      await callback();
+      return;
+    }
+    const transition = startViewTransition.call(document, () => callback());
+    const updateDone = transition?.updateCallbackDone || transition?.ready;
+    if (updateDone && typeof updateDone.then === "function") {
+      await updateDone;
+    }
+    transition?.finished?.catch?.(() => void 0);
+  }
+  /**
+   * Fetch page data from cache or server
+   */
+  async fetchPageData(path, recover = true) {
+    const cached = this.cache.get(path);
+    if (cached && Date.now() - cached.timestamp < this.options.cacheMaxAge) {
+      return cached.data;
+    }
+    const response = await fetch(`/__farm/page-data?path=${encodeURIComponent(path)}`, {
+      headers: createFarmDeploymentRequestHeaders(this.options.deploymentId, {
+        Accept: "application/x-farm-deferred+json, application/json",
+        "X-Farm-SPA": "1"
+      })
+    });
+    if (isFarmDeploymentMismatchResponse(response, this.options.deploymentId)) {
+      const error = createFarmDeploymentMismatchError(
+        response,
+        this.options.deploymentId || "unknown"
+      );
+      dispatchDeploymentMismatch(error);
+      if (recover) {
+        window.location.assign(path);
+      }
+      throw error;
+    }
+    if (!response.ok) {
+      throw new Error(`Failed to fetch page data: ${response.status}`);
+    }
+    const data = await readDeferredDataResponse(response);
+    this.cache.set(path, {
+      data,
+      timestamp: Date.now()
+    });
+    return data;
+  }
+  /**
+   * Handle browser back/forward navigation
+   */
+  async handlePopState(event) {
+    if (document.documentElement.dataset.farmDocsRuntime === "true") return;
+    const path = window.location.pathname + window.location.search;
+    if (await this.shouldBlockNavigation({
+      from: event.state?.path || path,
+      to: path,
+      action: "pop"
+    })) {
+      return;
+    }
+    this.startNavigation({
+      from: event.state?.path || path,
+      to: createNavigationLocation(new URL(window.location.href)),
+      action: "pop"
+    });
+    let clientNavigation;
+    try {
+      clientNavigation = await this.clientPlugins?.beginNavigation({
+        from: null,
+        to: window.location.href,
+        action: "pop"
+      });
+      const pageData = await this.fetchPageData(path);
+      if (clientNavigation) {
+        await this.clientPlugins?.markNavigationLoaded(clientNavigation, pageData);
+      }
+      if (pageData.metadata?.title) {
+        document.title = pageData.metadata.title;
+      }
+      _hydrateFarmI18n(pageData.i18n);
+      if (this.onNavigate) {
+        await this.onNavigate(pageData);
+      }
+      if (this.options.scrollRestoration) {
+        this.restoreScrollPosition(window.location.pathname);
+      }
+      if (clientNavigation) {
+        await this.clientPlugins?.resolveNavigation(clientNavigation);
+        void this.clientPlugins?.scheduleNavigationRendered(clientNavigation);
+      }
+      this.finishNavigation();
+    } catch (error) {
+      if (clientNavigation) {
+        await this.clientPlugins?.failNavigation(clientNavigation, error);
+      }
+      this.finishNavigation();
+      console.error("[Farm.js] Popstate navigation error:", error);
+      window.location.reload();
+    }
+  }
+  /**
+   * Check if URL is cached
+   */
+  isCached(path) {
+    const cached = this.cache.get(path);
+    return cached !== void 0 && Date.now() - cached.timestamp < this.options.cacheMaxAge;
+  }
+  /**
+   * Check if URL is external
+   */
+  isExternalUrl(href) {
+    return href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//");
+  }
+  async shouldBlockNavigation(context) {
+    for (const blocker of this.blockers) {
+      if (await blocker(context)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  startNavigation(options) {
+    this.setNavigationState({
+      state: "loading",
+      pending: true,
+      from: options.from,
+      to: options.to,
+      action: options.action,
+      startedAt: Date.now()
+    });
+  }
+  finishNavigation() {
+    this.setNavigationState(IDLE_NAVIGATION_STATE);
+  }
+  setNavigationState(state) {
+    this.navigationState = state;
+    for (const listener of this.navigationListeners) {
+      listener(state);
+    }
+  }
+  writePageState(action, state, href) {
+    if (typeof window === "undefined") return;
+    const url = href ? new URL(href, window.location.origin).toString() : window.location.href;
+    const nextState = createHistoryState(
+      new URL(url).pathname + new URL(url).search,
+      state,
+      window.history.state
+    );
+    if (action === "replace") {
+      window.history.replaceState(nextState, "", url);
+    } else {
+      window.history.pushState(nextState, "", url);
+    }
+    window.dispatchEvent(new PopStateEvent("popstate", { state: nextState }));
+  }
+  /**
+   * Save scroll position for a path
+   */
+  saveScrollPosition(path) {
+    try {
+      sessionStorage.setItem(
+        `farm-scroll-${path}`,
+        JSON.stringify({ x: window.scrollX, y: window.scrollY })
+      );
+      for (const [key, element] of this.scrollElements) {
+        sessionStorage.setItem(
+          getScrollElementStorageKey(path, key),
+          JSON.stringify({ x: element.scrollLeft, y: element.scrollTop })
+        );
+      }
+    } catch {
+    }
+  }
+  /**
+   * Restore scroll position for a path
+   */
+  restoreScrollPosition(path) {
+    try {
+      const saved = sessionStorage.getItem(`farm-scroll-${path}`);
+      if (saved) {
+        const { x, y } = JSON.parse(saved);
+        setTimeout(() => window.scrollTo(x, y), 0);
+      }
+      for (const [key, element] of this.scrollElements) {
+        this.restoreScrollElement(path, key, element);
+      }
+    } catch {
+    }
+  }
+  restoreScrollElement(path, key, element) {
+    try {
+      const saved = sessionStorage.getItem(getScrollElementStorageKey(path, key));
+      if (!saved) return;
+      const { x, y } = JSON.parse(saved);
+      setTimeout(() => {
+        element.scrollLeft = x;
+        element.scrollTop = y;
+      }, 0);
+    } catch {
+    }
+  }
+  /**
+   * Clear the page cache
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+};
+__name(_SPARouter, "SPARouter");
+var SPARouter = _SPARouter;
+function readBrowserDeploymentId() {
+  if (typeof window === "undefined") return void 0;
+  const runtimeId = window.__FARM_DEPLOYMENT_ID__;
+  if (typeof runtimeId === "string" && runtimeId) return runtimeId;
+  return document.querySelector('meta[name="farm-deployment-id"]')?.content;
+}
+__name(readBrowserDeploymentId, "readBrowserDeploymentId");
+function dispatchDeploymentMismatch(error) {
+  if (typeof window === "undefined" || typeof CustomEvent === "undefined") return;
+  window.dispatchEvent(new CustomEvent("farm:deployment-mismatch", { detail: error }));
+}
+__name(dispatchDeploymentMismatch, "dispatchDeploymentMismatch");
+function getRouter() {
+  if (typeof window === "undefined") {
+    return new SPARouter();
+  }
+  const installedRouter = window.__FARM_SPA_ROUTER__;
+  if (installedRouter) {
+    routerInstance = installedRouter;
+    return installedRouter;
+  }
+  if (!routerInstance) {
+    routerInstance = new SPARouter();
+  }
+  return routerInstance;
+}
+__name(getRouter, "getRouter");
+function navigateTo(href, options) {
+  return getRouter().navigate(href, options);
+}
+__name(navigateTo, "navigateTo");
+function prefetch(href) {
+  return getRouter().prefetch(href);
+}
+__name(prefetch, "prefetch");
+function pushState(state, href) {
+  getRouter().pushState(state, href);
+}
+__name(pushState, "pushState");
+function replaceState(state, href) {
+  getRouter().replaceState(state, href);
+}
+__name(replaceState, "replaceState");
+function readPageState() {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  if (!state || typeof state !== "object") return null;
+  return state[FARM_PAGE_STATE_KEY] ?? null;
+}
+__name(readPageState, "readPageState");
+function createHistoryState(path, pageState, currentState) {
+  const base = currentState && typeof currentState === "object" ? { ...currentState } : {};
+  return {
+    ...base,
+    path,
+    [FARM_PAGE_STATE_KEY]: pageState
+  };
+}
+__name(createHistoryState, "createHistoryState");
+function createNavigationLocation(url) {
+  return {
+    href: url.href,
+    pathname: url.pathname,
+    search: url.search,
+    hash: url.hash
+  };
+}
+__name(createNavigationLocation, "createNavigationLocation");
+function getScrollElementStorageKey(path, key) {
+  return `farm-scroll-${path}:${key}`;
+}
+__name(getScrollElementStorageKey, "getScrollElementStorageKey");
+
+// src/client/router.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function useRouter(options = {}) {
+  const basePath = options.basePath || "";
+  const routes = options.routes;
+  const routeKey = routes?.map((route) => typeof route === "string" ? route : route.path).join("\n") || "";
+  const routeMatcher = useMemo(
+    () => routeKey ? createFarmRouter(routeKey.split("\n")) : null,
+    [routeKey]
+  );
+  const [state, setState] = useState(() => {
+    return readRouterState(basePath, routeMatcher);
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handlePopState = /* @__PURE__ */ __name(() => {
+      setState(readRouterState(basePath, routeMatcher));
+    }, "handlePopState");
+    handlePopState();
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [basePath, routeMatcher]);
+  const push = /* @__PURE__ */ __name((href) => {
+    if (typeof window === "undefined") return;
+    const url = href.startsWith("/") ? basePath + href : href;
+    window.history.pushState(null, "", url);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }, "push");
+  const replace = /* @__PURE__ */ __name((href) => {
+    if (typeof window === "undefined") return;
+    const url = href.startsWith("/") ? basePath + href : href;
+    window.history.replaceState(null, "", url);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }, "replace");
+  const pushState2 = /* @__PURE__ */ __name((pageState, href) => {
+    if (typeof window === "undefined") return;
+    getRouter().pushState(pageState, resolveClientHref(href, basePath));
+  }, "pushState");
+  const replaceState2 = /* @__PURE__ */ __name((pageState, href) => {
+    if (typeof window === "undefined") return;
+    getRouter().replaceState(pageState, resolveClientHref(href, basePath));
+  }, "replaceState");
+  const back = /* @__PURE__ */ __name(() => {
+    if (typeof window !== "undefined") {
+      window.history.back();
+    }
+  }, "back");
+  const forward = /* @__PURE__ */ __name(() => {
+    if (typeof window !== "undefined") {
+      window.history.forward();
+    }
+  }, "forward");
+  return {
+    ...state,
+    push,
+    replace,
+    pushState: pushState2,
+    replaceState: replaceState2,
+    back,
+    forward
+  };
+}
+__name(useRouter, "useRouter");
+function usePageState() {
+  const [state, setState] = useState(() => readPageState());
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handlePopState = /* @__PURE__ */ __name(() => {
+      setState(readPageState());
+    }, "handlePopState");
+    handlePopState();
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+  return state;
+}
+__name(usePageState, "usePageState");
+function useNavigation() {
+  const [state, setState] = useState(
+    () => getRouter().getNavigationState()
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    return getRouter().subscribeNavigation(setState);
+  }, []);
+  return state;
+}
+__name(useNavigation, "useNavigation");
+function useBlocker(options) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const active = Boolean(options.when);
+  useEffect(() => {
+    if (typeof window === "undefined" || !active) {
+      return;
+    }
+    return getRouter().addBlocker(async (context) => {
+      const current = optionsRef.current;
+      const when = typeof current.when === "function" ? current.when(context) : current.when;
+      if (!when) return false;
+      if (current.shouldBlock && !await current.shouldBlock(context)) {
+        return false;
+      }
+      if (current.message && typeof window.confirm === "function") {
+        return !window.confirm(current.message);
+      }
+      return true;
+    });
+  }, [active]);
+  return { active };
+}
+__name(useBlocker, "useBlocker");
+function useScrollRestoration(key) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    return getRouter().registerScrollElement(key, element);
+  }, [key]);
+  return ref;
+}
+__name(useScrollRestoration, "useScrollRestoration");
+function readRouterState(basePath, routeMatcher) {
+  if (typeof window === "undefined") {
+    return {
+      pathname: "/",
+      searchParams: new URLSearchParams(),
+      params: {},
+      pageState: null
+    };
+  }
+  const url = new URL(window.location.href);
+  const pathname = normalizeClientPathname(url.pathname, basePath);
+  const i18n = getFarmI18nClientState();
+  const routePathname = i18n ? stripFarmLocaleFromPathname(pathname, i18n) : pathname;
+  return {
+    pathname,
+    searchParams: url.searchParams,
+    params: routeMatcher?.match(routePathname)?.params || {},
+    pageState: readPageState()
+  };
+}
+__name(readRouterState, "readRouterState");
+function normalizeClientPathname(pathname, basePath) {
+  const normalizedBase = basePath.replace(/\/+$/, "");
+  const isUnderBase = normalizedBase && (pathname === normalizedBase || pathname.startsWith(`${normalizedBase}/`));
+  const withoutBase = isUnderBase ? pathname.slice(normalizedBase.length) || "/" : pathname;
+  return withoutBase || "/";
+}
+__name(normalizeClientPathname, "normalizeClientPathname");
+function resolveClientHref(href, basePath) {
+  if (!href) return void 0;
+  return href.startsWith("/") ? basePath + href : href;
+}
+__name(resolveClientHref, "resolveClientHref");
+
+export {
+  SPARouter,
+  getRouter,
+  navigateTo,
+  prefetch,
+  pushState,
+  replaceState,
+  readPageState,
+  useRouter,
+  usePageState,
+  useNavigation,
+  useBlocker,
+  useScrollRestoration
+};
+//# sourceMappingURL=chunk-TU4YJICB.mjs.map