intor 2.2.4 → 2.2.6

package/dist/react/index.js

@@ -0,0 +1,622 @@
+import * as React6 from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { logry } from 'logry';
+import Keyv from 'keyv';
+import merge from 'lodash.merge';
+import { Translator } from 'intor-translator';
+
+// src/client/react/contexts/intor-provider/intor-provider.tsx
+var ConfigContext = React6.createContext(void 0);
+function ConfigProvider({
+  value: { config, pathname },
+  children
+}) {
+  const value = React6.useMemo(() => ({ config, pathname }), [config, pathname]);
+  return /* @__PURE__ */ jsx(ConfigContext.Provider, { value, children });
+}
+function useConfig() {
+  const context = React6.useContext(ConfigContext);
+  if (!context) throw new Error("useConfig must be used within ConfigProvider");
+  return context;
+}
+
+// src/config/constants/cache.constants.ts
+var DEFAULT_CACHE_OPTIONS = {
+  enabled: process.env.NODE_ENV === "production",
+  ttl: 60 * 60 * 1e3
+  // 1 hour
+};
+
+// src/server/shared/logger/global-logger-pool.ts
+function getGlobalLoggerPool() {
+  if (!globalThis.__INTOR_LOGGER_POOL__) {
+    globalThis.__INTOR_LOGGER_POOL__ = /* @__PURE__ */ new Map();
+  }
+  return globalThis.__INTOR_LOGGER_POOL__;
+}
+
+// src/server/shared/logger/get-logger.ts
+var DEFAULT_FORMATTER_CONFIG = {
+  node: { meta: { compact: true }, lineBreaksAfter: 1 }
+};
+function getLogger({
+  id = "default",
+  formatterConfig,
+  preset,
+  ...options
+}) {
+  const pool = getGlobalLoggerPool();
+  let logger = pool.get(id);
+  const useDefault = !formatterConfig && !preset;
+  if (!logger) {
+    logger = logry({
+      id,
+      formatterConfig: useDefault ? DEFAULT_FORMATTER_CONFIG : formatterConfig,
+      preset,
+      ...options
+    });
+    pool.set(id, logger);
+    if (pool.size > 1e3) {
+      const keys = [...pool.keys()];
+      for (const key of keys.slice(0, 200)) pool.delete(key);
+    }
+  }
+  return logger;
+}
+
+// src/server/messages/shared/utils/is-valid-messages.ts
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isValidMessages(value) {
+  if (!isPlainObject(value)) return false;
+  const stack = [value];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    for (const v of Object.values(current)) {
+      if (typeof v === "string") continue;
+      if (isPlainObject(v)) {
+        stack.push(v);
+      } else {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function getGlobalMessagesPool() {
+  if (!globalThis.__INTOR_MESSAGES_POOL__) {
+    globalThis.__INTOR_MESSAGES_POOL__ = new Keyv();
+  }
+  return globalThis.__INTOR_MESSAGES_POOL__;
+}
+var mergeMessages = (staticMessages = {}, loadedMessages = {}) => {
+  if (!loadedMessages) return { ...staticMessages };
+  return merge({}, staticMessages, loadedMessages);
+};
+
+// src/shared/utils/normalize-cache-key.ts
+var CACHE_KEY_DELIMITER = "|";
+var sanitize = (k) => k.replaceAll(/[\u200B-\u200D\uFEFF]/g, "").replaceAll(/[\r\n]/g, "").trim();
+var normalizeCacheKey = (key, delimiter = CACHE_KEY_DELIMITER) => {
+  if (key === null || key === void 0) return null;
+  if (Array.isArray(key)) {
+    if (key.length === 0) return null;
+    const normalized = key.map((k) => {
+      if (k === null) return "__null";
+      if (k === void 0) return "__undefined";
+      if (typeof k === "boolean") return k ? "__true" : "__false";
+      return sanitize(String(k));
+    });
+    return normalized.join(delimiter);
+  }
+  if (typeof key === "boolean") return key ? "__true" : "__false";
+  return String(key);
+};
+
+// src/shared/constants/prefix-placeholder.ts
+var PREFIX_PLACEHOLDER = "{locale}";
+
+// src/shared/utils/resolve-namespaces.ts
+var resolveNamespaces = ({
+  config,
+  pathname
+}) => {
+  const { loader } = config;
+  const { routeNamespaces = {}, namespaces } = loader || {};
+  if (Object.keys(routeNamespaces).length === 0 && !namespaces)
+    return void 0;
+  const standardizedPathname = standardizePathname({ config, pathname });
+  const placeholderRemovedPathname = standardizedPathname.replace(
+    `/${PREFIX_PLACEHOLDER}`,
+    ""
+  );
+  const collected = [
+    ...routeNamespaces.default || [],
+    // default
+    ...namespaces || [],
+    // default
+    ...routeNamespaces[standardizedPathname] || [],
+    // exact match
+    ...routeNamespaces[placeholderRemovedPathname] || []
+    // exact match
+  ];
+  const prefixPatterns = Object.keys(routeNamespaces).filter(
+    (pattern) => pattern.endsWith("/*")
+  );
+  for (const pattern of prefixPatterns) {
+    const basePath = pattern.replace(/\/\*$/, "");
+    if (standardizedPathname.startsWith(basePath) || placeholderRemovedPathname.startsWith(basePath)) {
+      collected.push(...routeNamespaces[pattern] || []);
+    }
+  }
+  return [...new Set(collected)];
+};
+
+// src/shared/utils/pathname/normalize-pathname.ts
+var normalizePathname = (rawPathname, options = {}) => {
+  const length = rawPathname.length;
+  let start = 0;
+  let end = length - 1;
+  while (start <= end && (rawPathname.codePointAt(start) ?? 0) <= 32) start++;
+  while (end >= start && (rawPathname.codePointAt(end) ?? 0) <= 32) end--;
+  if (start > end) return "/";
+  let result = "";
+  let hasSlash = false;
+  for (let i = start; i <= end; i++) {
+    const char = rawPathname[i];
+    if (char === "/") {
+      if (!hasSlash) {
+        hasSlash = true;
+      }
+    } else {
+      result += hasSlash || result === "" ? "/" + char : char;
+      hasSlash = false;
+    }
+  }
+  if (options.removeLeadingSlash && result.startsWith("/")) {
+    result = result.slice(1);
+  }
+  return result || "/";
+};
+
+// src/shared/utils/pathname/standardize-pathname.ts
+var standardizePathname = ({
+  config,
+  pathname
+}) => {
+  const { routing } = config;
+  const { basePath } = routing;
+  const parts = [
+    normalizePathname(basePath),
+    PREFIX_PLACEHOLDER,
+    normalizePathname(pathname)
+  ];
+  const standardizedPathname = parts.join("/").replaceAll(/\/{2,}/g, "/");
+  return normalizePathname(standardizedPathname);
+};
+
+// src/server/messages/load-remote-messages/fetch-locale-messages/fetch-locale-messages.ts
+var fetchLocaleMessages = async ({
+  remoteUrl,
+  remoteHeaders,
+  searchParams,
+  locale,
+  extraOptions: { loggerOptions } = {}
+}) => {
+  const baseLogger = getLogger({ ...loggerOptions });
+  const logger = baseLogger.child({ scope: "fetch-locale-messages" });
+  try {
+    const params = new URLSearchParams(searchParams);
+    params.append("locale", locale);
+    const url = `${remoteUrl}?${params.toString()}`;
+    const headers = {
+      "Content-Type": "application/json",
+      ...remoteHeaders
+    };
+    const response = await fetch(url, {
+      method: "GET",
+      headers,
+      cache: "no-store"
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error ${response.status} ${response.statusText}`);
+    }
+    const data = await response.json();
+    if (!isValidMessages(data[locale])) {
+      throw new Error("JSON file does not match NamespaceMessages structure");
+    }
+    return data;
+  } catch (error) {
+    logger.warn("Fetching locale messages failed.", {
+      locale,
+      remoteUrl,
+      searchParams: decodeURIComponent(searchParams.toString()),
+      error
+    });
+    return;
+  }
+};
+
+// src/server/messages/load-remote-messages/fetch-locale-messages/utils/build-search-params.ts
+var buildSearchParams = (params) => {
+  const searchParams = new URLSearchParams();
+  const appendParam = (key, value) => {
+    if (value === void 0 || value === null) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    if (Array.isArray(value)) {
+      value.forEach((v) => v && searchParams.append(key, v));
+    } else {
+      searchParams.append(key, value);
+    }
+  };
+  Object.entries(params).forEach(([key, value]) => {
+    appendParam(key, value);
+  });
+  return searchParams;
+};
+
+// src/server/messages/load-remote-messages/load-remote-messages.ts
+var loadRemoteMessages = async ({
+  pool = getGlobalMessagesPool(),
+  rootDir,
+  remoteUrl,
+  remoteHeaders,
+  locale,
+  fallbackLocales = [],
+  namespaces = [],
+  extraOptions: {
+    cacheOptions = DEFAULT_CACHE_OPTIONS,
+    loggerOptions = { id: "default" }
+  } = {},
+  allowCacheWrite
+}) => {
+  const baseLogger = getLogger({ ...loggerOptions });
+  const logger = baseLogger.child({ scope: "load-remote-messages" });
+  const start = performance.now();
+  logger.debug("Loading remote messages from api.", { remoteUrl });
+  const key = normalizeCacheKey([
+    loggerOptions.id,
+    "loaderType:remote",
+    rootDir,
+    locale,
+    (fallbackLocales ?? []).toSorted().join(","),
+    (namespaces ?? []).toSorted().join(",")
+  ]);
+  if (cacheOptions.enabled && key) {
+    const cached = await pool?.get(key);
+    if (cached) {
+      logger.debug("Messages cache hit.", { key });
+      return cached;
+    }
+  }
+  const searchParams = buildSearchParams({ rootDir, namespaces });
+  const candidateLocales = [locale, ...fallbackLocales || []];
+  let messages;
+  for (const candidateLocale of candidateLocales) {
+    try {
+      const result = await fetchLocaleMessages({
+        remoteUrl,
+        remoteHeaders,
+        searchParams,
+        locale: candidateLocale,
+        extraOptions: { loggerOptions }
+      });
+      if (result && Object.values(result[candidateLocale] || {}).length > 0) {
+        messages = result;
+        break;
+      }
+    } catch (error) {
+      logger.error("Failed to fetch locale messages.", {
+        locale: candidateLocale,
+        error
+      });
+    }
+  }
+  if (allowCacheWrite && cacheOptions.enabled && key && messages) {
+    await pool?.set(key, messages, cacheOptions.ttl);
+  }
+  const end = performance.now();
+  const duration = Math.round(end - start);
+  logger.trace("Finished loading remote messages.", {
+    loadedLocale: messages ? Object.keys(messages)[0] : void 0,
+    duration: `${duration} ms`
+  });
+  return messages;
+};
+
+// src/client/react/contexts/messages/utils/use-refetch-messages.ts
+var useRefetchMessages = ({
+  config,
+  pathname,
+  setLoadedMessages,
+  setIsLoadingMessages
+}) => {
+  const { messages: staticMessages } = config;
+  const namespaces = React6.useMemo(() => {
+    if (!config.loader) return [];
+    return resolveNamespaces({ config, pathname });
+  }, [config, pathname]);
+  const refetchMessages = React6.useCallback(
+    async (newLocale) => {
+      if (config.loader?.type === "remote") {
+        setIsLoadingMessages(true);
+        const loadedMessages = await loadRemoteMessages({
+          rootDir: config.loader.rootDir,
+          remoteUrl: config.loader.remoteUrl,
+          remoteHeaders: config.loader.remoteHeaders,
+          locale: newLocale,
+          fallbackLocales: config.fallbackLocales[newLocale] || [],
+          namespaces,
+          extraOptions: {
+            cacheOptions: config.cache,
+            loggerOptions: { id: config.id }
+          }
+        });
+        const messages = mergeMessages(staticMessages, loadedMessages);
+        setLoadedMessages(messages);
+        setIsLoadingMessages(false);
+      }
+    },
+    [
+      config.loader,
+      config.fallbackLocales,
+      config.id,
+      setIsLoadingMessages,
+      namespaces,
+      staticMessages,
+      setLoadedMessages
+    ]
+  );
+  return { refetchMessages };
+};
+var MessagesContext = React6.createContext(void 0);
+function MessagesProvider({
+  value: { messages = {} },
+  children
+}) {
+  const { config, pathname } = useConfig();
+  const [loadedMessages, setLoadedMessages] = React6.useState(null);
+  const [isLoadingMessages, setIsLoadingMessages] = React6.useState(false);
+  const { refetchMessages } = useRefetchMessages({
+    config,
+    pathname,
+    setLoadedMessages,
+    setIsLoadingMessages
+  });
+  const value = React6.useMemo(
+    () => ({
+      messages: loadedMessages || messages,
+      isLoading: isLoadingMessages,
+      setLoadedMessages,
+      setIsLoadingMessages,
+      refetchMessages
+    }),
+    [loadedMessages, messages, isLoadingMessages, refetchMessages]
+  );
+  return /* @__PURE__ */ jsx(MessagesContext.Provider, { value, children });
+}
+function useMessages() {
+  const context = React6.useContext(MessagesContext);
+  if (!context)
+    throw new Error("useMessages must be used within a MessagesProvider");
+  return context;
+}
+
+// src/client/react/contexts/locale/utils/use-init-lazy-load.ts
+var useInitLazyLoad = ({
+  loaderOptions,
+  currentLocale
+}) => {
+  const { refetchMessages } = useMessages();
+  const lazyLoad = !!loaderOptions?.lazyLoad;
+  const isFirstLoadedRef = React6.useRef(false);
+  React6.useEffect(() => {
+    if (lazyLoad && !isFirstLoadedRef.current) {
+      void refetchMessages(currentLocale);
+      isFirstLoadedRef.current = true;
+    }
+  }, [lazyLoad, currentLocale, refetchMessages, isFirstLoadedRef]);
+};
+
+// src/shared/utils/client/build-cookie-string.ts
+var buildCookieString = (cookie, locale) => {
+  const parts = [`${cookie.name}=${encodeURIComponent(locale)}`];
+  if (cookie.maxAge) {
+    const expires = new Date(Date.now() + cookie.maxAge * 1e3).toUTCString();
+    parts.push(`expires=${expires}`, `max-age=${cookie.maxAge}`);
+  }
+  parts.push(`path=${cookie.path ?? "/"}`);
+  if (cookie.domain) {
+    parts.push(`domain=${cookie.domain}`);
+  }
+  if (cookie.sameSite) {
+    parts.push(
+      `SameSite=${cookie.sameSite[0].toUpperCase()}${cookie.sameSite.slice(1).toLowerCase()}`
+    );
+  }
+  if (cookie.secure !== false) {
+    parts.push(`Secure`);
+  }
+  return parts.join("; ");
+};
+
+// src/shared/utils/client/set-locale-cookie-browser.ts
+var setLocaleCookieBrowser = ({
+  cookie,
+  locale
+}) => {
+  if (globalThis.window === void 0) return;
+  if (cookie.disabled || !cookie.autoSetCookie) return;
+  const cookieString = buildCookieString(cookie, locale);
+  document.cookie = cookieString;
+};
+
+// src/client/react/contexts/locale/utils/use-init-locale-cookie.ts
+var useInitLocaleCookie = ({
+  config,
+  locale
+}) => {
+  React6.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const { cookie, routing } = config;
+    const { firstVisit } = routing;
+    const cookies = document.cookie.split(";").map((c) => c.trim());
+    const isCookieExists = cookies.some((c) => c.startsWith(`${cookie.name}=`));
+    if (isCookieExists) return;
+    if (!firstVisit.redirect) return;
+    if (cookie.disabled || !cookie.autoSetCookie) return;
+    setLocaleCookieBrowser({ cookie, locale });
+  }, []);
+};
+var LocaleContext = React6.createContext(void 0);
+
+// src/client/react/contexts/locale/utils/change-locale.ts
+var changeLocale = ({
+  currentLocale,
+  newLocale,
+  loaderOptions,
+  cookie,
+  setLocale,
+  refetchMessages
+}) => {
+  if (typeof document === "undefined") return;
+  const loaderType = loaderOptions?.type;
+  if (newLocale === currentLocale) return;
+  if (loaderType === "local") {
+    console.warn(
+      `[Intor] You are using dynamic local to switch languages. Please make sure to use the wrapped <Link> component to trigger a page reload, ensuring that the translation data is dynamically updated.`
+    );
+  }
+  setLocale(newLocale);
+  setLocaleCookieBrowser({ cookie, locale: newLocale });
+  document.documentElement.lang = newLocale;
+  if (loaderType === "remote" && refetchMessages) {
+    void refetchMessages(newLocale);
+  }
+};
+function LocaleProvider({
+  value: { initialLocale },
+  children
+}) {
+  const { config } = useConfig();
+  const { refetchMessages } = useMessages();
+  const { loader: loaderOptions, cookie } = config;
+  const [currentLocale, setCurrentLocale] = React6.useState(initialLocale);
+  useInitLazyLoad({ loaderOptions, currentLocale });
+  useInitLocaleCookie({ config, locale: initialLocale });
+  const setLocale = React6.useCallback(
+    (newLocale) => {
+      changeLocale({
+        currentLocale,
+        newLocale,
+        loaderOptions,
+        cookie,
+        setLocale: setCurrentLocale,
+        refetchMessages
+      });
+    },
+    [currentLocale, loaderOptions, cookie, refetchMessages]
+  );
+  const value = React6.useMemo(
+    () => ({
+      locale: currentLocale,
+      setLocale
+    }),
+    [currentLocale, setLocale]
+  );
+  return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
+}
+function useLocale() {
+  const context = React6.useContext(LocaleContext);
+  if (!context)
+    throw new Error("useLocale must be used within a LocaleProvider");
+  return context;
+}
+var TranslateHandlersContext = React6.createContext(void 0);
+var TranslateHandlersProvider = ({
+  children,
+  handlers
+}) => {
+  const value = handlers;
+  return /* @__PURE__ */ jsx(TranslateHandlersContext.Provider, { value, children });
+};
+function useTranslateHandlers() {
+  const context = React6.useContext(TranslateHandlersContext);
+  return context;
+}
+var useInitLoadingState = (config) => {
+  const lazyLoad = !!config.loader?.lazyLoad;
+  const [isCsr, setIsCsr] = React6.useState(false);
+  React6.useEffect(() => {
+    setIsCsr(true);
+  }, []);
+  const isBeforeCSRLoading = lazyLoad && !isCsr;
+  return isBeforeCSRLoading;
+};
+var TranslatorContext = React6.createContext(void 0);
+var EMPTY_OBJECT = Object.freeze({});
+function TranslatorProvider({ children }) {
+  const { config } = useConfig();
+  const { messages, isLoading } = useMessages();
+  const { locale } = useLocale();
+  const translatorHandlers = useTranslateHandlers();
+  const { fallbackLocales, translator: translatorOptions } = config;
+  const isBeforeCSRLoading = useInitLoadingState(config);
+  const value = React6.useMemo(() => {
+    const translator = new Translator({
+      messages: messages || EMPTY_OBJECT,
+      locale,
+      fallbackLocales,
+      loadingMessage: translatorOptions?.loadingMessage,
+      placeholder: translatorOptions?.placeholder,
+      handlers: translatorHandlers
+    });
+    translator.setLoading(isBeforeCSRLoading || isLoading);
+    return { translator };
+  }, [
+    fallbackLocales,
+    isBeforeCSRLoading,
+    isLoading,
+    locale,
+    messages,
+    translatorHandlers,
+    translatorOptions?.loadingMessage,
+    translatorOptions?.placeholder
+  ]);
+  return /* @__PURE__ */ jsx(TranslatorContext.Provider, { value, children });
+}
+function useTranslator() {
+  const context = React6.useContext(TranslatorContext);
+  if (!context)
+    throw new Error(
+      "useTranslator must be used within IntorTranslatorProvider"
+    );
+  return context;
+}
+var IntorProvider = ({
+  value: { config, pathname = "", initialLocale, messages = config.messages },
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ConfigProvider, { value: { config, pathname }, children: /* @__PURE__ */ jsx(MessagesProvider, { value: { messages }, children: /* @__PURE__ */ jsx(LocaleProvider, { value: { initialLocale }, children: /* @__PURE__ */ jsx(TranslatorProvider, { children }) }) }) });
+};
+
+// src/client/react/hooks/use-translator.ts
+function useTranslator2(preKey) {
+  const { translator } = useTranslator();
+  const { setLocale } = useLocale();
+  const props = {
+    messages: translator.messages,
+    locale: translator.locale,
+    isLoading: translator.isLoading,
+    setLocale
+  };
+  const scoped = translator.scoped(preKey);
+  return {
+    ...props,
+    hasKey: preKey ? scoped.hasKey : translator.hasKey,
+    t: preKey ? scoped.t : translator.t
+  };
+}
+
+export { IntorProvider, TranslateHandlersProvider, useTranslator2 as useTranslator };