@foxpixel/react 0.2.1 → 0.2.3

package/dist/index.js

@@ -202,7 +202,8 @@ function FoxPixelProvider({ children, config = {}, queryClient }) {
   const value = (0, import_react.useMemo)(() => ({
     client,
     config,
-    queryClient: queryClient ?? null
+    queryClient: queryClient ?? null,
+    locale: config?.locale
   }), [client, config, queryClient]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FoxPixelContext.Provider, { value, children });
 }
@@ -435,6 +436,28 @@ var import_react8 = require("react");
 // src/hooks/useEditMode.ts
 var import_react6 = require("react");
 var SITE_CONTENT_QUERY_KEY = "siteContent";
+var contentKeysOnPage = /* @__PURE__ */ new Set();
+var flushTimer = null;
+function scheduleFlushContentKeys() {
+  if (flushTimer) return;
+  flushTimer = setTimeout(() => {
+    flushTimer = null;
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "FOXPIXEL_READY", payload: { contentKeys: Array.from(contentKeysOnPage) } },
+        "*"
+      );
+    }
+  }, 150);
+}
+function registerContentKey(key) {
+  contentKeysOnPage.add(key);
+  scheduleFlushContentKeys();
+}
+function unregisterContentKey(key) {
+  contentKeysOnPage.delete(key);
+  scheduleFlushContentKeys();
+}
 function useEditMode() {
   const [isEditMode, setIsEditMode] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
@@ -455,19 +478,18 @@ function useEditModeMessaging() {
       if (!queryClient) return;
       const { type, payload } = event.data || {};
       if (type !== "FOXPIXEL_CONTENT_UPDATED" || !payload?.contentKey) return;
-      const { contentKey, newValue } = payload;
+      const { contentKey, newValue, locale } = payload;
+      const cacheKey2 = locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
       if (typeof newValue === "string") {
         queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
+          cacheKey2,
           (prev) => ({
             value: newValue,
             contentType: prev?.contentType ?? "TEXT"
           })
         );
       }
-      queryClient.invalidateQueries({
-        queryKey: [SITE_CONTENT_QUERY_KEY, contentKey]
-      });
+      queryClient.invalidateQueries({ queryKey: cacheKey2 });
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
@@ -477,20 +499,19 @@ function useEditModeMessaging() {
 function useSendEditRequest() {
   const isEditMode = useEditMode();
   return (0, import_react6.useCallback)(
-    (contentKey, currentValue, contentType = "text", section, description) => {
+    (contentKey, currentValue, contentType = "text", section, description, locale) => {
       if (!isEditMode) return;
       if (typeof window !== "undefined" && window.parent !== window) {
+        const payload = {
+          contentKey,
+          currentValue,
+          contentType,
+          section,
+          description
+        };
+        if (locale != null && locale !== "") payload.locale = locale;
         window.parent.postMessage(
-          {
-            type: "FOXPIXEL_EDIT_CONTENT",
-            payload: {
-              contentKey,
-              currentValue,
-              contentType,
-              section,
-              description
-            }
-          },
+          { type: "FOXPIXEL_EDIT_CONTENT", payload },
           "*"
         );
       }
@@ -501,20 +522,23 @@ function useSendEditRequest() {
 
 // src/hooks/useSiteContentQuery.ts
 var import_react7 = require("react");
-function getCached(queryClient, contentKey) {
-  const data = queryClient.getQueryData([
-    SITE_CONTENT_QUERY_KEY,
-    contentKey
-  ]);
+function queryKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
+function getCached(queryClient, contentKey, locale) {
+  const data = queryClient.getQueryData(
+    queryKey(contentKey, locale)
+  );
   if (data == null) return void 0;
   return { value: data.value ?? "", contentType: data.contentType ?? "TEXT" };
 }
 function useSiteContentQuery(contentKey, options) {
-  const { defaultValue } = options;
+  const { defaultValue, locale } = options;
+  const loc = locale != null && locale !== "" ? locale : void 0;
   const { client, queryClient } = useFoxPixelContext();
   const [state, setState] = (0, import_react7.useState)(() => {
     if (queryClient) {
-      const cached = getCached(queryClient, contentKey);
+      const cached = getCached(queryClient, contentKey, loc);
       if (cached) {
         return { value: cached.value, isLoading: false, contentType: cached.contentType };
       }
@@ -523,18 +547,20 @@ function useSiteContentQuery(contentKey, options) {
   });
   const contentKeyRef = (0, import_react7.useRef)(contentKey);
   contentKeyRef.current = contentKey;
+  const localeRef = (0, import_react7.useRef)(loc);
+  localeRef.current = loc;
   (0, import_react7.useEffect)(() => {
     if (!queryClient) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
       return;
     }
     const key = contentKeyRef.current;
-    const queryKey = [SITE_CONTENT_QUERY_KEY, key];
+    const locCurrent = localeRef.current;
+    const qKey = queryKey(key, locCurrent);
     const queryFn = async () => {
       try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(key)}`
-        );
+        const url = `/api/site/content/${encodeURIComponent(key)}` + (locCurrent ? `?locale=${encodeURIComponent(locCurrent)}` : "");
+        const content = await client.get(url);
         if (!content) return null;
         return {
           value: content.value ?? "",
@@ -548,7 +574,7 @@ function useSiteContentQuery(contentKey, options) {
     };
     let cancelled = false;
     queryClient.fetchQuery({
-      queryKey,
+      queryKey: qKey,
       queryFn,
       staleTime: 1e3 * 60 * 5,
       retry: 1
@@ -564,8 +590,11 @@ function useSiteContentQuery(contentKey, options) {
       setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
     });
     const unsub = queryClient.getQueryCache().subscribe((event) => {
-      if (event?.type === "updated" && event?.query?.queryKey[1] === key) {
-        const cached = getCached(queryClient, key);
+      const q = event?.query;
+      const keyMatch = q?.queryKey?.[1] === key;
+      const locMatch = (q?.queryKey?.[2] ?? void 0) === locCurrent;
+      if (event?.type === "updated" && q && keyMatch && locMatch) {
+        const cached = getCached(queryClient, key, locCurrent);
         if (cached && !cancelled) {
           setState({
             value: cached.value,
@@ -579,7 +608,7 @@ function useSiteContentQuery(contentKey, options) {
       cancelled = true;
       unsub();
     };
-  }, [queryClient, contentKey, defaultValue, client]);
+  }, [queryClient, contentKey, defaultValue, client, loc]);
   return state;
 }
 
@@ -657,15 +686,25 @@ function Editable({
   defaultValue,
   as = "span",
   multiline = false,
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading, contentType } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
@@ -675,11 +714,13 @@ function Editable({
           contentKey,
           value,
           contentType?.toLowerCase() || "text",
-          section
+          section,
+          void 0,
+          locale
         );
       }
     },
-    [isEditMode, contentKey, value, contentType, section, sendEditRequest]
+    [isEditMode, contentKey, value, contentType, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return (0, import_react8.createElement)(as, {
@@ -752,24 +793,34 @@ function EditableHTML({
   contentKey,
   defaultValue,
   as = "div",
-  className
+  className,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, value, "html", section);
+        sendEditRequest(contentKey, value, "html", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, value, section, sendEditRequest]
+    [isEditMode, contentKey, value, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return (0, import_react8.createElement)(as, {
@@ -818,24 +869,34 @@ function EditableImage({
   className,
   width,
   height,
-  priority = false
+  priority = false,
+  locale: localeProp
 }) {
   const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
+  const { locale: contextLocale } = useFoxPixelContext();
+  const locale = localeProp ?? contextLocale;
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value: src, isLoading } = useSiteContentQuery(contentKey, {
-    defaultValue
+    defaultValue,
+    locale
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
   const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
         e.stopPropagation();
-        sendEditRequest(contentKey, src, "image", section);
+        sendEditRequest(contentKey, src, "image", section, void 0, locale);
       }
     },
-    [isEditMode, contentKey, src, section, sendEditRequest]
+    [isEditMode, contentKey, src, section, sendEditRequest, locale]
   );
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -981,20 +1042,20 @@ function useContactCapture() {
 // src/hooks/useSiteContent.ts
 var import_react12 = require("react");
 function useSiteContent(contentKey, options = {}) {
-  const { defaultValue = "", fetchOnMount = true } = options;
+  const { defaultValue = "", fetchOnMount = true, locale } = options;
   const { client } = useFoxPixelContext();
   const { user, hasPermission } = useAuth();
   const [data, setData] = (0, import_react12.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react12.useState)(fetchOnMount);
   const [error, setError] = (0, import_react12.useState)(null);
   const canEdit = user !== null && hasPermission("site:content:update");
+  const queryLocale = locale != null && locale !== "" ? locale : void 0;
   const fetchContent = (0, import_react12.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const content = await client.get(
-        `/api/site/content/${encodeURIComponent(contentKey)}`
-      );
+      const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (queryLocale ? `?locale=${encodeURIComponent(queryLocale)}` : "");
+      const content = await client.get(url);
       setData(content);
     } catch (err) {
       if (err?.status === 404) {
@@ -1005,20 +1066,22 @@ function useSiteContent(contentKey, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKey]);
+  }, [client, contentKey, queryLocale]);
   const updateContent = (0, import_react12.useCallback)(async (newValue) => {
     try {
       setError(null);
+      const body = { value: newValue };
+      if (queryLocale) body.locale = queryLocale;
       const updated = await client.put(
         `/api/site/content/${encodeURIComponent(contentKey)}`,
-        { value: newValue }
+        body
       );
       setData(updated);
     } catch (err) {
       setError(err);
       throw err;
     }
-  }, [client, contentKey]);
+  }, [client, contentKey, queryLocale]);
   (0, import_react12.useEffect)(() => {
     if (fetchOnMount) {
       fetchContent();
@@ -1036,11 +1099,12 @@ function useSiteContent(contentKey, options = {}) {
   };
 }
 function useSiteContents(contentKeys, options = {}) {
-  const { defaults = {} } = options;
+  const { defaults = {}, locale } = options;
   const { client } = useFoxPixelContext();
   const [data, setData] = (0, import_react12.useState)({});
   const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
   const [error, setError] = (0, import_react12.useState)(null);
+  const body = locale != null && locale !== "" ? { keys: contentKeys, locale } : contentKeys;
   const fetchContents = (0, import_react12.useCallback)(async () => {
     if (contentKeys.length === 0) {
       setData({});
@@ -1052,7 +1116,7 @@ function useSiteContents(contentKeys, options = {}) {
       setError(null);
       const contents = await client.post(
         "/api/site/content/batch",
-        contentKeys
+        body
       );
       setData(contents);
     } catch (err) {
@@ -1060,7 +1124,7 @@ function useSiteContents(contentKeys, options = {}) {
     } finally {
       setIsLoading(false);
     }
-  }, [client, contentKeys.join(",")]);
+  }, [client, contentKeys.join(","), locale]);
   (0, import_react12.useEffect)(() => {
     fetchContents();
   }, [fetchContents]);
@@ -1079,25 +1143,25 @@ function useSiteContents(contentKeys, options = {}) {
     refetch: fetchContents
   };
 }
-function useSiteContentSection(section) {
+function useSiteContentSection(section, options = {}) {
+  const { locale } = options;
   const { client } = useFoxPixelContext();
   const [contents, setContents] = (0, import_react12.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
   const [error, setError] = (0, import_react12.useState)(null);
+  const url = `/api/site/content/section/${encodeURIComponent(section)}` + (locale != null && locale !== "" ? `?locale=${encodeURIComponent(locale)}` : "");
   const fetchContents = (0, import_react12.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
-      const data = await client.get(
-        `/api/site/content/section/${encodeURIComponent(section)}`
-      );
+      const data = await client.get(url);
       setContents(data);
     } catch (err) {
       setError(err);
     } finally {
       setIsLoading(false);
     }
-  }, [client, section]);
+  }, [client, section, locale]);
   (0, import_react12.useEffect)(() => {
     fetchContents();
   }, [fetchContents]);
@@ -1110,33 +1174,39 @@ function useSiteContentSection(section) {
 }
 
 // src/prefetchSiteContent.ts
+function cacheKey(contentKey, locale) {
+  return locale != null && locale !== "" ? [SITE_CONTENT_QUERY_KEY, contentKey, locale] : [SITE_CONTENT_QUERY_KEY, contentKey];
+}
 async function prefetchSiteContent(queryClient, options) {
-  const { apiUrl, apiKey, tenantId, contentKeys } = options;
+  const { apiUrl, apiKey, tenantId, contentKeys, locale } = options;
   const client = new FoxPixelHttpClient({ apiUrl, apiKey, tenantId });
-  await Promise.all(
-    contentKeys.map(async (contentKey) => {
-      try {
-        const content = await client.get(
-          `/api/site/content/${encodeURIComponent(contentKey)}`
-        );
-        queryClient.setQueryData(
-          [SITE_CONTENT_QUERY_KEY, contentKey],
-          {
-            value: content?.value ?? "",
-            contentType: content?.contentType ?? "TEXT"
+  const locales = locale == null ? [void 0] : Array.isArray(locale) ? locale : [locale];
+  const tasks = [];
+  for (const contentKey of contentKeys) {
+    for (const loc of locales) {
+      tasks.push(
+        (async () => {
+          try {
+            const url = `/api/site/content/${encodeURIComponent(contentKey)}` + (loc != null && loc !== "" ? `?locale=${encodeURIComponent(loc)}` : "");
+            const content = await client.get(url);
+            queryClient.setQueryData(cacheKey(contentKey, loc), {
+              value: content?.value ?? "",
+              contentType: content?.contentType ?? "TEXT"
+            });
+          } catch (err) {
+            const status = err?.response?.status;
+            if (status === 404) {
+              queryClient.setQueryData(cacheKey(contentKey, loc), {
+                value: "",
+                contentType: "TEXT"
+              });
+            }
           }
-        );
-      } catch (err) {
-        const status = err?.response?.status;
-        if (status === 404) {
-          queryClient.setQueryData([SITE_CONTENT_QUERY_KEY, contentKey], {
-            value: "",
-            contentType: "TEXT"
-          });
-        }
-      }
-    })
-  );
+        })()
+      );
+    }
+  }
+  await Promise.all(tasks);
 }
 
 // src/blog/hooks.ts