@farm.js/core 0.1.0-beta.22 → 0.1.0-beta.23

package/dist/client.cjs

@@ -52,6 +52,7 @@ __export(client_exports, {
   fetchServerQuery: () => fetchServerQuery,
   getIntegrationAPIManifest: () => getIntegrationAPIManifest,
   getRouter: () => getRouter2,
+  getTheme: () => getTheme,
   installChunkErrorRecovery: () => installChunkErrorRecovery,
   integrationClients: () => integrationClients,
   integrationsClient: () => integrationsClient,
@@ -63,6 +64,8 @@ __export(client_exports, {
   pushState: () => pushState,
   readPageState: () => readPageState,
   replaceState: () => replaceState,
+  setTheme: () => setTheme,
+  toggleTheme: () => toggleTheme,
   useBlocker: () => useBlocker,
   useFetcher: () => useFetcher,
   useMutation: () => useMutation,
@@ -70,7 +73,8 @@ __export(client_exports, {
   usePageState: () => usePageState,
   useRouter: () => useRouter,
   useScrollRestoration: () => useScrollRestoration,
-  useServerQuery: () => useServerQuery
+  useServerQuery: () => useServerQuery,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(client_exports);
 
@@ -2684,12 +2688,12 @@ function useServerQuery(query, input, options = {}) {
   const mountedKeyRef = (0, import_react3.useRef)(void 0);
   inputRef.current = input;
   optionsRef.current = options;
-  const subscribe = (0, import_react3.useCallback)(
+  const subscribe2 = (0, import_react3.useCallback)(
     (listener) => cache.subscribe(key, listener),
     [cache, key]
   );
   const getSnapshot = (0, import_react3.useCallback)(() => cache.get(key), [cache, key]);
-  const entry = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, () => void 0);
+  const entry = (0, import_react3.useSyncExternalStore)(subscribe2, getSnapshot, () => void 0);
   const run = (0, import_react3.useCallback)(
     (force = false) => fetchServerQuery(query, inputRef.current, {
       ...optionsRef.current,
@@ -3214,9 +3218,88 @@ function createStore(initialState, extend) {
 }
 __name(createStore, "createStore");
 
-// src/client/link.tsx
+// src/theme/client.tsx
 var import_react5 = require("react");
 
+// src/theme/bridge.ts
+var FALLBACK_SERVER_SNAPSHOT = Object.freeze({
+  theme: "system",
+  resolvedTheme: void 0,
+  mounted: false
+});
+var FARM_THEME_SERVER_SNAPSHOT_RESOLVER = /* @__PURE__ */ Symbol.for("farm.js.theme.server-snapshot-resolver");
+function getFarmThemeServerSnapshot() {
+  return globalThis[FARM_THEME_SERVER_SNAPSHOT_RESOLVER]?.() ?? FALLBACK_SERVER_SNAPSHOT;
+}
+__name(getFarmThemeServerSnapshot, "getFarmThemeServerSnapshot");
+
+// src/theme/client.tsx
+var FALLBACK_CLIENT_SNAPSHOT = Object.freeze({
+  theme: "system",
+  resolvedTheme: "light",
+  mounted: true
+});
+var cachedClientSnapshot = FALLBACK_CLIENT_SNAPSHOT;
+function snapshotsMatch(left, right) {
+  return left.theme === right.theme && left.resolvedTheme === right.resolvedTheme && left.mounted === right.mounted;
+}
+__name(snapshotsMatch, "snapshotsMatch");
+function getClientSnapshot() {
+  const next = typeof window === "undefined" ? FALLBACK_CLIENT_SNAPSHOT : window.__FARM_THEME__?.snapshot;
+  if (!next) return cachedClientSnapshot;
+  if (!snapshotsMatch(cachedClientSnapshot, next)) cachedClientSnapshot = next;
+  return cachedClientSnapshot;
+}
+__name(getClientSnapshot, "getClientSnapshot");
+function getHydrationSnapshot() {
+  if (typeof window !== "undefined" && window.__FARM_THEME__?.serverSnapshot) {
+    return window.__FARM_THEME__.serverSnapshot;
+  }
+  return getFarmThemeServerSnapshot();
+}
+__name(getHydrationSnapshot, "getHydrationSnapshot");
+function subscribe(listener) {
+  if (typeof window === "undefined") return () => {
+  };
+  const handleThemeChange = /* @__PURE__ */ __name(() => {
+    getClientSnapshot();
+    listener();
+  }, "handleThemeChange");
+  window.addEventListener("farm:themechange", handleThemeChange);
+  return () => window.removeEventListener("farm:themechange", handleThemeChange);
+}
+__name(subscribe, "subscribe");
+function getTheme() {
+  return getClientSnapshot();
+}
+__name(getTheme, "getTheme");
+function setTheme(theme) {
+  const runtime = typeof window === "undefined" ? void 0 : window.__FARM_THEME__;
+  if (!runtime) {
+    throw new Error("The FARMJS theme runtime is not enabled. Add `theme` to farm.config.ts.");
+  }
+  runtime.setTheme(theme);
+}
+__name(setTheme, "setTheme");
+function toggleTheme() {
+  const next = getClientSnapshot().resolvedTheme === "dark" ? "light" : "dark";
+  setTheme(next);
+  return next;
+}
+__name(toggleTheme, "toggleTheme");
+function useTheme() {
+  const snapshot = (0, import_react5.useSyncExternalStore)(subscribe, getClientSnapshot, getHydrationSnapshot);
+  return {
+    ...snapshot,
+    setTheme,
+    toggleTheme
+  };
+}
+__name(useTheme, "useTheme");
+
+// src/client/link.tsx
+var import_react6 = require("react");
+
 // src/router.ts
 function createFarmRouter(routes) {
   const normalizedRoutes = routes.map(normalizeRouteInput).sort(compareRoutes);
@@ -3615,9 +3698,9 @@ function LinkInner({
   onTouchStart,
   ...props
 }, ref) {
-  const elementRef = (0, import_react5.useRef)(null);
-  const intentTimeoutRef = (0, import_react5.useRef)(null);
-  const hasPrefetched = (0, import_react5.useRef)(false);
+  const elementRef = (0, import_react6.useRef)(null);
+  const intentTimeoutRef = (0, import_react6.useRef)(null);
+  const hasPrefetched = (0, import_react6.useRef)(false);
   const { intent, viewport, render } = normalizePrefetch(prefetch2);
   const baseHref = resolveLinkHref(href, params, {
     query,
@@ -3626,17 +3709,17 @@ function LinkInner({
   });
   const resolvedHref = localizeActiveFarmHref(baseHref, locale);
   const isExternal = isExternalUrl(resolvedHref);
-  const doPrefetch = (0, import_react5.useCallback)(() => {
+  const doPrefetch = (0, import_react6.useCallback)(() => {
     if (isExternal || hasPrefetched.current) return;
     const router = getRouter();
     if (!router) return;
     hasPrefetched.current = true;
     router.prefetch(resolvedHref);
   }, [resolvedHref, isExternal]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     hasPrefetched.current = false;
   }, [resolvedHref]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const element = elementRef.current;
     if (!element || isExternal) return;
     const router = getRouter();
@@ -3646,7 +3729,7 @@ function LinkInner({
       return () => router.unobserveForPrefetch(element);
     }
   }, [resolvedHref, viewport, isExternal]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!render || isExternal) return;
     let cancelled = false;
     let timeoutId = null;
@@ -3668,7 +3751,7 @@ function LinkInner({
       }
     };
   }, [render, isExternal, resolvedHref]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (intentTimeoutRef.current) {
         clearTimeout(intentTimeoutRef.current);
@@ -3676,13 +3759,13 @@ function LinkInner({
       }
     };
   }, []);
-  const cancelIntent = (0, import_react5.useCallback)(() => {
+  const cancelIntent = (0, import_react6.useCallback)(() => {
     if (intentTimeoutRef.current) {
       clearTimeout(intentTimeoutRef.current);
       intentTimeoutRef.current = null;
     }
   }, []);
-  const scheduleIntentPrefetch = (0, import_react5.useCallback)(() => {
+  const scheduleIntentPrefetch = (0, import_react6.useCallback)(() => {
     if (isExternal || !intent || hasPrefetched.current) return;
     cancelIntent();
     intentTimeoutRef.current = setTimeout(() => {
@@ -3690,42 +3773,42 @@ function LinkInner({
       doPrefetch();
     }, prefetchDelay);
   }, [intent, isExternal, prefetchDelay, doPrefetch, cancelIntent]);
-  const handleMouseEnter = (0, import_react5.useCallback)(
+  const handleMouseEnter = (0, import_react6.useCallback)(
     (event) => {
       onMouseEnter?.(event);
       scheduleIntentPrefetch();
     },
     [onMouseEnter, scheduleIntentPrefetch]
   );
-  const handleMouseLeave = (0, import_react5.useCallback)(
+  const handleMouseLeave = (0, import_react6.useCallback)(
     (event) => {
       onMouseLeave?.(event);
       cancelIntent();
     },
     [onMouseLeave, cancelIntent]
   );
-  const handleTouchStart = (0, import_react5.useCallback)(
+  const handleTouchStart = (0, import_react6.useCallback)(
     (event) => {
       onTouchStart?.(event);
       scheduleIntentPrefetch();
     },
     [onTouchStart, scheduleIntentPrefetch]
   );
-  const handleFocus = (0, import_react5.useCallback)(
+  const handleFocus = (0, import_react6.useCallback)(
     (event) => {
       onFocus?.(event);
       scheduleIntentPrefetch();
     },
     [onFocus, scheduleIntentPrefetch]
   );
-  const handleBlur = (0, import_react5.useCallback)(
+  const handleBlur = (0, import_react6.useCallback)(
     (event) => {
       onBlur?.(event);
       cancelIntent();
     },
     [onBlur, cancelIntent]
   );
-  const handleClick = (0, import_react5.useCallback)(
+  const handleClick = (0, import_react6.useCallback)(
     (event) => {
       onClick?.(event);
       if (event.defaultPrevented) return;
@@ -3750,7 +3833,7 @@ function LinkInner({
     },
     [resolvedHref, replace, scroll, viewTransition, target, isExternal, onClick]
   );
-  const setRefs = (0, import_react5.useCallback)(
+  const setRefs = (0, import_react6.useCallback)(
     (node) => {
       elementRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -3779,7 +3862,7 @@ function LinkInner({
   );
 }
 __name(LinkInner, "LinkInner");
-var LinkWithRef = (0, import_react5.forwardRef)(LinkInner);
+var LinkWithRef = (0, import_react6.forwardRef)(LinkInner);
 LinkWithRef.displayName = "Link";
 var Link = LinkWithRef;
 function resolveLinkHref(href, params, options) {
@@ -3880,7 +3963,7 @@ function matchManifestRoute(pathname, route2) {
 __name(matchManifestRoute, "matchManifestRoute");
 
 // src/client/router.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/deferred.ts
 var FARM_DEFERRED_CONTENT_TYPE = "application/x-farm-deferred+json";
@@ -4661,14 +4744,14 @@ function useRouter(options = {}) {
   const basePath = options.basePath || "";
   const routes = options.routes;
   const routeKey = routes?.map((route2) => typeof route2 === "string" ? route2 : route2.path).join("\n") || "";
-  const routeMatcher = (0, import_react6.useMemo)(
+  const routeMatcher = (0, import_react7.useMemo)(
     () => routeKey ? createFarmRouter(routeKey.split("\n")) : null,
     [routeKey]
   );
-  const [state, setState] = (0, import_react6.useState)(() => {
+  const [state, setState] = (0, import_react7.useState)(() => {
     return readRouterState(basePath, routeMatcher);
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     const handlePopState = /* @__PURE__ */ __name(() => {
       setState(readRouterState(basePath, routeMatcher));
@@ -4719,8 +4802,8 @@ function useRouter(options = {}) {
 }
 __name(useRouter, "useRouter");
 function usePageState() {
-  const [state, setState] = (0, import_react6.useState)(() => readPageState());
-  (0, import_react6.useEffect)(() => {
+  const [state, setState] = (0, import_react7.useState)(() => readPageState());
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     const handlePopState = /* @__PURE__ */ __name(() => {
       setState(readPageState());
@@ -4733,10 +4816,10 @@ function usePageState() {
 }
 __name(usePageState, "usePageState");
 function useNavigation() {
-  const [state, setState] = (0, import_react6.useState)(
+  const [state, setState] = (0, import_react7.useState)(
     () => getRouter2().getNavigationState()
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     return getRouter2().subscribeNavigation(setState);
   }, []);
@@ -4744,10 +4827,10 @@ function useNavigation() {
 }
 __name(useNavigation, "useNavigation");
 function useBlocker(options) {
-  const optionsRef = (0, import_react6.useRef)(options);
+  const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
   const active = Boolean(options.when);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined" || !active) {
       return;
     }
@@ -4768,8 +4851,8 @@ function useBlocker(options) {
 }
 __name(useBlocker, "useBlocker");
 function useScrollRestoration(key) {
-  const ref = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const ref = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     const element = ref.current;
     if (!element) return;
     return getRouter2().registerScrollElement(key, element);
@@ -5379,6 +5462,7 @@ __name(isObject, "isObject");
   fetchServerQuery,
   getIntegrationAPIManifest,
   getRouter,
+  getTheme,
   installChunkErrorRecovery,
   integrationClients,
   integrationsClient,
@@ -5390,6 +5474,8 @@ __name(isObject, "isObject");
   pushState,
   readPageState,
   replaceState,
+  setTheme,
+  toggleTheme,
   useBlocker,
   useFetcher,
   useMutation,
@@ -5397,6 +5483,7 @@ __name(isObject, "isObject");
   usePageState,
   useRouter,
   useScrollRestoration,
-  useServerQuery
+  useServerQuery,
+  useTheme
 });
 //# sourceMappingURL=client.cjs.map