@tolgee/react 5.10.1 → 5.10.2-prerelease.4bd654a9.0

package/dist/tolgee-react.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"tolgee-react.umd.min.js","sources":["../src/TolgeeProvider.tsx","../src/GlobalContextPlugin.tsx","../src/useTolgeeContext.ts","../src/hooks.ts","../src/useTranslateInternal.ts","../src/tagsTools.tsx","../src/T.tsx","../src/useTolgee.ts","../src/useTolgeeSSR.ts","../src/useTranslate.ts"],"sourcesContent":["import React, { Suspense, useEffect, useState } from 'react';\nimport { TolgeeInstance } from '@tolgee/web';\nimport { ReactOptions, TolgeeReactContext } from './types';\n\nexport const DEFAULT_REACT_OPTIONS: ReactOptions = {\n  useSuspense: true,\n};\n\nexport const TolgeeProviderContext = React.createContext<\n  TolgeeReactContext | undefined\n>(undefined);\n\nexport interface TolgeeProviderProps {\n  children?: React.ReactNode;\n  tolgee: TolgeeInstance;\n  options?: ReactOptions;\n  fallback?: React.ReactNode;\n}\n\nexport const TolgeeProvider: React.FC<TolgeeProviderProps> = ({\n  tolgee,\n  options,\n  children,\n  fallback,\n}) => {\n  const [loading, setLoading] = useState(!tolgee.isLoaded());\n\n  useEffect(() => {\n    tolgee\n      .run()\n      .catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(e);\n      })\n      .finally(() => {\n        setLoading(false);\n      });\n  }, [tolgee]);\n\n  const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };\n\n  if (optionsWithDefault.useSuspense) {\n    return (\n      <TolgeeProviderContext.Provider\n        value={{ tolgee, options: optionsWithDefault }}\n      >\n        {loading ? (\n          fallback\n        ) : (\n          <Suspense fallback={fallback || null}>{children}</Suspense>\n        )}\n      </TolgeeProviderContext.Provider>\n    );\n  }\n\n  return (\n    <TolgeeProviderContext.Provider\n      value={{ tolgee, options: optionsWithDefault }}\n    >\n      {loading ? fallback : children}\n    </TolgeeProviderContext.Provider>\n  );\n};\n","import type { TolgeePlugin } from '@tolgee/web';\nimport { DEFAULT_REACT_OPTIONS } from './TolgeeProvider';\nimport type { ReactOptions, TolgeeReactContext } from './types';\n\nlet globalContext: TolgeeReactContext | undefined;\n\nexport const GlobalContextPlugin =\n  (options?: Partial<ReactOptions>): TolgeePlugin =>\n  (tolgee) => {\n    globalContext = {\n      tolgee,\n      options: { ...DEFAULT_REACT_OPTIONS, ...options },\n    };\n    return tolgee;\n  };\n\nexport function getGlobalContext() {\n  return globalContext;\n}\n","import { useContext } from 'react';\nimport { getGlobalContext } from './GlobalContextPlugin';\nimport { TolgeeProviderContext } from './TolgeeProvider';\n\nexport const useTolgeeContext = () => {\n  const context = useContext(TolgeeProviderContext) || getGlobalContext();\n  if (!context) {\n    throw new Error(\n      \"Couldn't find tolgee instance, did you forgot to use `TolgeeProvider`?\"\n    );\n  }\n  return context;\n};\n","import { useCallback, useState } from 'react';\n\nexport const useRerender = () => {\n  const [instance, setCounter] = useState(0);\n\n  const rerender = useCallback(() => {\n    setCounter((num) => num + 1);\n  }, [setCounter]);\n  return { instance, rerender };\n};\n","import { useCallback, useEffect, useRef } from 'react';\nimport {\n  SubscriptionSelective,\n  TranslateProps,\n  NsFallback,\n  getFallbackArray,\n  getFallback,\n} from '@tolgee/web';\n\nimport { useTolgeeContext } from './useTolgeeContext';\nimport { ReactOptions } from './types';\nimport { useRerender } from './hooks';\n\nexport const useTranslateInternal = (\n  ns?: NsFallback,\n  options?: ReactOptions\n) => {\n  const { tolgee, options: defaultOptions } = useTolgeeContext();\n  const namespaces = getFallback(ns);\n  const namespacesJoined = getFallbackArray(namespaces).join(':');\n\n  const currentOptions = {\n    ...defaultOptions,\n    ...options,\n  };\n\n  // dummy state to enable re-rendering\n  const { rerender, instance } = useRerender();\n\n  const subscriptionRef = useRef<SubscriptionSelective>();\n\n  const subscriptionQueue = useRef([] as NsFallback[]);\n  subscriptionQueue.current = [];\n\n  const subscribeToNs = (ns: NsFallback) => {\n    subscriptionQueue.current.push(ns);\n    subscriptionRef.current?.subscribeNs(ns);\n  };\n\n  const isLoaded = tolgee.isLoaded(namespaces);\n\n  useEffect(() => {\n    const subscription = tolgee.onNsUpdate(rerender);\n    subscriptionRef.current = subscription;\n    if (!isLoaded) {\n      subscription.subscribeNs(namespaces);\n    }\n    subscriptionQueue.current.forEach((ns) => {\n      subscription!.subscribeNs(ns);\n    });\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [isLoaded, namespacesJoined, tolgee]);\n\n  useEffect(() => {\n    tolgee.addActiveNs(namespaces);\n    return () => tolgee.removeActiveNs(namespaces);\n  }, [namespacesJoined, tolgee]);\n\n  const t = useCallback(\n    (props: TranslateProps<any>) => {\n      const fallbackNs = props.ns ?? namespaces?.[0];\n      subscribeToNs(fallbackNs);\n      return tolgee.t({ ...props, ns: fallbackNs }) as any;\n    },\n    [tolgee, instance]\n  );\n\n  if (currentOptions.useSuspense && !isLoaded) {\n    throw tolgee.addActiveNs(namespaces, true);\n  }\n\n  return { t, isLoading: !isLoaded };\n};\n","import { TranslateParams } from '@tolgee/web';\nimport React from 'react';\n\nimport { ParamsTags } from './types';\n\nexport const wrapTagHandlers = (\n  params: TranslateParams<ParamsTags> | undefined\n) => {\n  if (!params) {\n    return undefined;\n  }\n\n  const result: any = {};\n\n  Object.entries(params || {}).forEach(([key, value]) => {\n    if (typeof value === 'function') {\n      result[key] = (chunk: any) => {\n        return value(addReactKeys(chunk));\n      };\n    } else if (React.isValidElement(value as any)) {\n      const el = value as React.ReactElement;\n      result[key] = (chunk: any) => {\n        return el.props.children === undefined && chunk?.length\n          ? React.cloneElement(el, {}, addReactKeys(chunk))\n          : React.cloneElement(el);\n      };\n    } else {\n      result[key] = value;\n    }\n  });\n\n  return result;\n};\n\nexport const addReactKeys = (\n  val: React.ReactNode | React.ReactNode[] | undefined\n) => {\n  if (Array.isArray(val)) {\n    return React.Children.toArray(val);\n  } else {\n    return val;\n  }\n};\n","import { NsType, TranslateParams, TranslationKey } from '@tolgee/web';\nimport React from 'react';\nimport { addReactKeys, wrapTagHandlers } from './tagsTools';\nimport { ParamsTags } from './types';\n\nimport { useTranslateInternal } from './useTranslateInternal';\n\ninterface PropsBase {\n  params?: TranslateParams<ParamsTags>;\n  noWrap?: boolean;\n  ns?: NsType;\n  defaultValue?: string;\n  language?: string;\n}\n\ninterface PropsWithKeyName extends PropsBase {\n  children?: string;\n  keyName: TranslationKey;\n}\n\ninterface PropsWithoutKeyName extends PropsBase {\n  children: TranslationKey;\n}\n\nexport type TProps = PropsWithKeyName | PropsWithoutKeyName;\n\ninterface TInterface {\n  (props: TProps): JSX.Element;\n}\n\nexport const T: TInterface = (props) => {\n  const key = (props as PropsWithKeyName).keyName || props.children;\n  if (key === undefined) {\n    // eslint-disable-next-line no-console\n    console.error('T component: keyName not defined');\n  }\n  const defaultValue =\n    props.defaultValue ||\n    ((props as PropsWithKeyName).keyName ? props.children : undefined);\n\n  const { t } = useTranslateInternal();\n\n  const translation = addReactKeys(\n    t({\n      key: key!,\n      params: wrapTagHandlers(props.params),\n      defaultValue,\n      noWrap: props.noWrap,\n      ns: props.ns,\n      language: props.language,\n    })\n  );\n\n  return <>{translation}</>;\n};\n","import { TolgeeEvent, TolgeeInstance } from '@tolgee/web';\nimport { useEffect } from 'react';\nimport { useRerender } from './hooks';\nimport { useTolgeeContext } from './useTolgeeContext';\n\nexport const useTolgee = (events?: TolgeeEvent[]): TolgeeInstance => {\n  const { tolgee } = useTolgeeContext();\n\n  const { rerender } = useRerender();\n\n  useEffect(() => {\n    const listeners = events?.map((e) => tolgee.on(e, rerender));\n    return () => {\n      listeners?.forEach((listener) => listener.unsubscribe());\n    };\n  }, [events?.join(':')]);\n\n  return tolgee;\n};\n","import {\n  getTranslateProps,\n  TolgeeInstance,\n  TolgeeStaticData,\n} from '@tolgee/web';\nimport { useEffect, useMemo, useState } from 'react';\n\nfunction getTolgeeWithDeactivatedWrapper(\n  tolgee: TolgeeInstance\n): TolgeeInstance {\n  return {\n    ...tolgee,\n    t(...args) {\n      // @ts-ignore\n      const props = getTranslateProps(...args);\n      return tolgee.t({ ...props, noWrap: true });\n    },\n  };\n}\n\nexport function useTolgeeSSR(\n  tolgeeInstance: TolgeeInstance,\n  locale?: string,\n  staticData?: TolgeeStaticData | undefined\n) {\n  const initialInstance = useMemo(\n    () => getTolgeeWithDeactivatedWrapper(tolgeeInstance),\n    []\n  );\n\n  const [tolgee, setTolgee] = useState(initialInstance);\n\n  useEffect(() => {\n    setTolgee(tolgeeInstance);\n  }, []);\n\n  useMemo(() => {\n    // we have to prepare tolgee before rendering children\n    // so translations are available right away\n    // events emitting must be off, to not trigger re-render while rendering\n    tolgee.setEmitterActive(false);\n    tolgee.addStaticData(staticData);\n    tolgee.changeLanguage(locale!);\n    tolgee.setEmitterActive(true);\n  }, [locale, staticData, tolgee]);\n\n  return tolgee;\n}\n","import { useCallback } from 'react';\nimport {\n  TFnType,\n  getTranslateProps,\n  DefaultParamType,\n  TranslationKey,\n} from '@tolgee/web';\n\nimport { useTranslateInternal } from './useTranslateInternal';\nimport { ReactOptions } from './types';\n\nexport interface UseTranslateResult {\n  t: TFnType<DefaultParamType, string, TranslationKey>;\n  isLoading: boolean;\n}\n\nexport const useTranslate = (\n  ns?: string[] | string,\n  options?: ReactOptions\n): UseTranslateResult => {\n  const { t: tInternal, isLoading } = useTranslateInternal(ns, options);\n\n  const t = useCallback(\n    (...params: any) => {\n      // @ts-ignore\n      const props = getTranslateProps(...params);\n      return tInternal(props);\n    },\n    [tInternal]\n  );\n\n  return { t, isLoading };\n};\n"],"names":["DEFAULT_REACT_OPTIONS","useSuspense","TolgeeProviderContext","React","createContext","undefined","globalContext","useTolgeeContext","context","useContext","Error","useRerender","instance","setCounter","useState","rerender","useCallback","num","useTranslateInternal","ns","options","tolgee","defaultOptions","namespaces","getFallback","namespacesJoined","getFallbackArray","join","currentOptions","Object","assign","subscriptionRef","useRef","subscriptionQueue","current","isLoaded","useEffect","subscription","onNsUpdate","subscribeNs","forEach","unsubscribe","addActiveNs","removeActiveNs","t","props","fallbackNs","_a","push","subscribeToNs","isLoading","wrapTagHandlers","params","result","entries","key","value","chunk","addReactKeys","isValidElement","el","children","length","cloneElement","val","Array","isArray","Children","toArray","keyName","console","error","defaultValue","translation","noWrap","language","createElement","Fragment","fallback","loading","setLoading","run","catch","e","finally","optionsWithDefault","Provider","Suspense","events","listeners","map","on","listener","tolgeeInstance","locale","staticData","initialInstance","useMemo","args","getTranslateProps","getTolgeeWithDeactivatedWrapper","setTolgee","setEmitterActive","addStaticData","changeLanguage","tInternal"],"mappings":"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"}
+{"version":3,"file":"tolgee-react.umd.min.js","sources":["../src/TolgeeProvider.tsx","../src/GlobalContextPlugin.tsx","../src/useTolgeeContext.ts","../src/hooks.ts","../src/useTranslateInternal.ts","../src/tagsTools.tsx","../src/TBase.tsx","../src/T.tsx","../src/useTolgee.ts","../src/useTolgeeSSR.ts","../src/useTranslate.ts"],"sourcesContent":["import React, { Suspense, useEffect, useState } from 'react';\nimport { TolgeeInstance } from '@tolgee/web';\nimport { ReactOptions, TolgeeReactContext } from './types';\n\nexport const DEFAULT_REACT_OPTIONS: ReactOptions = {\n  useSuspense: true,\n};\n\nlet ProviderInstance: React.Context<TolgeeReactContext | undefined>;\n\nexport const getProviderInstance = () => {\n  if (!ProviderInstance) {\n    ProviderInstance = React.createContext<TolgeeReactContext | undefined>(\n      undefined\n    );\n  }\n\n  return ProviderInstance;\n};\n\nexport interface TolgeeProviderProps {\n  children?: React.ReactNode;\n  tolgee: TolgeeInstance;\n  options?: ReactOptions;\n  fallback?: React.ReactNode;\n}\n\nexport const TolgeeProvider: React.FC<TolgeeProviderProps> = ({\n  tolgee,\n  options,\n  children,\n  fallback,\n}) => {\n  const [loading, setLoading] = useState(!tolgee.isLoaded());\n\n  useEffect(() => {\n    tolgee\n      .run()\n      .catch((e) => {\n        // eslint-disable-next-line no-console\n        console.error(e);\n      })\n      .finally(() => {\n        setLoading(false);\n      });\n  }, [tolgee]);\n\n  const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };\n\n  const TolgeeProviderContext = getProviderInstance();\n\n  if (optionsWithDefault.useSuspense) {\n    return (\n      <TolgeeProviderContext.Provider\n        value={{ tolgee, options: optionsWithDefault }}\n      >\n        {loading ? (\n          fallback\n        ) : (\n          <Suspense fallback={fallback || null}>{children}</Suspense>\n        )}\n      </TolgeeProviderContext.Provider>\n    );\n  }\n\n  return (\n    <TolgeeProviderContext.Provider\n      value={{ tolgee, options: optionsWithDefault }}\n    >\n      {loading ? fallback : children}\n    </TolgeeProviderContext.Provider>\n  );\n};\n","import type { TolgeePlugin } from '@tolgee/web';\nimport { DEFAULT_REACT_OPTIONS } from './TolgeeProvider';\nimport type { ReactOptions, TolgeeReactContext } from './types';\n\nlet globalContext: TolgeeReactContext | undefined;\n\nexport const GlobalContextPlugin =\n  (options?: Partial<ReactOptions>): TolgeePlugin =>\n  (tolgee) => {\n    globalContext = {\n      tolgee,\n      options: { ...DEFAULT_REACT_OPTIONS, ...options },\n    };\n    return tolgee;\n  };\n\nexport function getGlobalContext() {\n  return globalContext;\n}\n","import { useContext } from 'react';\nimport { getGlobalContext } from './GlobalContextPlugin';\nimport { getProviderInstance } from './TolgeeProvider';\n\nexport const useTolgeeContext = () => {\n  const TolgeeProviderContext = getProviderInstance();\n  const context = useContext(TolgeeProviderContext) || getGlobalContext();\n  if (!context) {\n    throw new Error(\n      \"Couldn't find tolgee instance, did you forgot to use `TolgeeProvider`?\"\n    );\n  }\n  return context;\n};\n","import { useCallback, useState } from 'react';\n\nexport const useRerender = () => {\n  const [instance, setCounter] = useState(0);\n\n  const rerender = useCallback(() => {\n    setCounter((num) => num + 1);\n  }, [setCounter]);\n  return { instance, rerender };\n};\n","import { useCallback, useEffect, useRef } from 'react';\nimport {\n  SubscriptionSelective,\n  TranslateProps,\n  NsFallback,\n  getFallbackArray,\n  getFallback,\n} from '@tolgee/web';\n\nimport { useTolgeeContext } from './useTolgeeContext';\nimport { ReactOptions } from './types';\nimport { useRerender } from './hooks';\n\nexport const useTranslateInternal = (\n  ns?: NsFallback,\n  options?: ReactOptions\n) => {\n  const { tolgee, options: defaultOptions } = useTolgeeContext();\n  const namespaces = getFallback(ns);\n  const namespacesJoined = getFallbackArray(namespaces).join(':');\n\n  const currentOptions = {\n    ...defaultOptions,\n    ...options,\n  };\n\n  // dummy state to enable re-rendering\n  const { rerender, instance } = useRerender();\n\n  const subscriptionRef = useRef<SubscriptionSelective>();\n\n  const subscriptionQueue = useRef([] as NsFallback[]);\n  subscriptionQueue.current = [];\n\n  const subscribeToNs = (ns: NsFallback) => {\n    subscriptionQueue.current.push(ns);\n    subscriptionRef.current?.subscribeNs(ns);\n  };\n\n  const isLoaded = tolgee.isLoaded(namespaces);\n\n  useEffect(() => {\n    const subscription = tolgee.onNsUpdate(rerender);\n    subscriptionRef.current = subscription;\n    if (!isLoaded) {\n      subscription.subscribeNs(namespaces);\n    }\n    subscriptionQueue.current.forEach((ns) => {\n      subscription!.subscribeNs(ns);\n    });\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [isLoaded, namespacesJoined, tolgee]);\n\n  useEffect(() => {\n    tolgee.addActiveNs(namespaces);\n    return () => tolgee.removeActiveNs(namespaces);\n  }, [namespacesJoined, tolgee]);\n\n  const t = useCallback(\n    (props: TranslateProps<any>) => {\n      const fallbackNs = props.ns ?? namespaces?.[0];\n      subscribeToNs(fallbackNs);\n      return tolgee.t({ ...props, ns: fallbackNs }) as any;\n    },\n    [tolgee, instance]\n  );\n\n  if (currentOptions.useSuspense && !isLoaded) {\n    throw tolgee.addActiveNs(namespaces, true);\n  }\n\n  return { t, isLoading: !isLoaded };\n};\n","import { TranslateParams } from '@tolgee/web';\nimport React from 'react';\n\nimport { ParamsTags } from './types';\n\nexport const wrapTagHandlers = (\n  params: TranslateParams<ParamsTags> | undefined\n) => {\n  if (!params) {\n    return undefined;\n  }\n\n  const result: any = {};\n\n  Object.entries(params || {}).forEach(([key, value]) => {\n    if (typeof value === 'function') {\n      result[key] = (chunk: any) => {\n        return value(addReactKeys(chunk));\n      };\n    } else if (React.isValidElement(value as any)) {\n      const el = value as React.ReactElement;\n      result[key] = (chunk: any) => {\n        return el.props.children === undefined && chunk?.length\n          ? React.cloneElement(el, {}, addReactKeys(chunk))\n          : React.cloneElement(el);\n      };\n    } else {\n      result[key] = value;\n    }\n  });\n\n  return result;\n};\n\nexport const addReactKeys = (\n  val: React.ReactNode | React.ReactNode[] | undefined\n) => {\n  if (Array.isArray(val)) {\n    return React.Children.toArray(val);\n  } else {\n    return val;\n  }\n};\n","import React from 'react';\nimport { addReactKeys, wrapTagHandlers } from './tagsTools';\nimport { PropsWithKeyName, TBaseInterface } from './types';\n\nexport const TBase: TBaseInterface = (props) => {\n  const key = (props as PropsWithKeyName).keyName || props.children;\n  if (key === undefined) {\n    // eslint-disable-next-line no-console\n    console.error('T component: keyName not defined');\n  }\n  const defaultValue =\n    props.defaultValue ||\n    ((props as PropsWithKeyName).keyName ? props.children : undefined);\n\n  const translation = addReactKeys(\n    props.t({\n      key: key!,\n      params: wrapTagHandlers(props.params),\n      defaultValue,\n      noWrap: props.noWrap,\n      ns: props.ns,\n      language: props.language,\n    })\n  );\n\n  return <>{translation}</>;\n};\n","import React from 'react';\nimport { ParamsTags, TProps } from './types';\n\nimport { useTranslateInternal } from './useTranslateInternal';\nimport { TFnType } from '@tolgee/web';\nimport { TBase } from './TBase';\n\ninterface TInterface {\n  (props: TProps): JSX.Element;\n}\n\nexport const T: TInterface = (props) => {\n  const { t } = useTranslateInternal();\n\n  return <TBase t={t as TFnType<ParamsTags>} {...props} />;\n};\n","import { TolgeeEvent, TolgeeInstance } from '@tolgee/web';\nimport { useEffect } from 'react';\nimport { useRerender } from './hooks';\nimport { useTolgeeContext } from './useTolgeeContext';\n\nexport const useTolgee = (events?: TolgeeEvent[]): TolgeeInstance => {\n  const { tolgee } = useTolgeeContext();\n\n  const { rerender } = useRerender();\n\n  useEffect(() => {\n    const listeners = events?.map((e) => tolgee.on(e, rerender));\n    return () => {\n      listeners?.forEach((listener) => listener.unsubscribe());\n    };\n  }, [events?.join(':')]);\n\n  return tolgee;\n};\n","import {\n  getTranslateProps,\n  TolgeeInstance,\n  TolgeeStaticData,\n} from '@tolgee/web';\nimport { useEffect, useMemo, useState } from 'react';\n\nfunction getTolgeeWithDeactivatedWrapper(\n  tolgee: TolgeeInstance\n): TolgeeInstance {\n  return {\n    ...tolgee,\n    t(...args) {\n      // @ts-ignore\n      const props = getTranslateProps(...args);\n      return tolgee.t({ ...props, noWrap: true });\n    },\n  };\n}\n\n/**\n * Updates tolgee static data and language, to be ready right away for the first render\n * and therefore compatible with SSR.\n *\n * It also ensures that the first render is done without wrapping and so it avoids\n * \"client different than server\" issues.\n *\n * @param tolgeeInstance initialized Tolgee instance\n * @param language language that is obtained outside of Tolgee on the server and client\n * @param staticData static data for the language\n */\nexport function useTolgeeSSR(\n  tolgeeInstance: TolgeeInstance,\n  language?: string,\n  staticData?: TolgeeStaticData | undefined\n) {\n  const initialInstance = useMemo(\n    () => getTolgeeWithDeactivatedWrapper(tolgeeInstance),\n    []\n  );\n\n  const [tolgee, setTolgee] = useState(initialInstance);\n\n  useEffect(() => {\n    setTolgee(tolgeeInstance);\n  }, []);\n\n  useMemo(() => {\n    // we have to prepare tolgee before rendering children\n    // so translations are available right away\n    // events emitting must be off, to not trigger re-render while rendering\n    tolgee.setEmitterActive(false);\n    tolgee.addStaticData(staticData);\n    tolgee.changeLanguage(language!);\n    tolgee.setEmitterActive(true);\n  }, [language, staticData, tolgee]);\n\n  return tolgee;\n}\n","import { useCallback } from 'react';\nimport {\n  TFnType,\n  getTranslateProps,\n  DefaultParamType,\n  TranslationKey,\n} from '@tolgee/web';\n\nimport { useTranslateInternal } from './useTranslateInternal';\nimport { ReactOptions } from './types';\n\nexport interface UseTranslateResult {\n  t: TFnType<DefaultParamType, string, TranslationKey>;\n  isLoading: boolean;\n}\n\nexport const useTranslate = (\n  ns?: string[] | string,\n  options?: ReactOptions\n): UseTranslateResult => {\n  const { t: tInternal, isLoading } = useTranslateInternal(ns, options);\n\n  const t = useCallback(\n    (...params: any) => {\n      // @ts-ignore\n      const props = getTranslateProps(...params);\n      return tInternal(props);\n    },\n    [tInternal]\n  );\n\n  return { t, isLoading };\n};\n"],"names":["DEFAULT_REACT_OPTIONS","useSuspense","ProviderInstance","getProviderInstance","React","createContext","undefined","globalContext","useTolgeeContext","TolgeeProviderContext","context","useContext","Error","useRerender","instance","setCounter","useState","rerender","useCallback","num","useTranslateInternal","ns","options","tolgee","defaultOptions","namespaces","getFallback","namespacesJoined","getFallbackArray","join","currentOptions","Object","assign","subscriptionRef","useRef","subscriptionQueue","current","isLoaded","useEffect","subscription","onNsUpdate","subscribeNs","forEach","unsubscribe","addActiveNs","removeActiveNs","t","props","fallbackNs","_a","push","subscribeToNs","isLoading","wrapTagHandlers","params","result","entries","key","value","chunk","addReactKeys","isValidElement","el","children","length","cloneElement","val","Array","isArray","Children","toArray","TBase","keyName","console","error","defaultValue","translation","noWrap","language","createElement","Fragment","fallback","loading","setLoading","run","catch","e","finally","optionsWithDefault","Provider","Suspense","events","listeners","map","on","listener","tolgeeInstance","staticData","initialInstance","useMemo","args","getTranslateProps","getTolgeeWithDeactivatedWrapper","setTolgee","setEmitterActive","addStaticData","changeLanguage","tInternal"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { DefaultParamType, TolgeeInstance } from '@tolgee/web';
 import React from 'react';
+import type { DefaultParamType, NsType, TFnType, TolgeeInstance, TranslateParams, TranslationKey } from '@tolgee/web';
 export type ParamsTags = DefaultParamType | ((value: any) => JSX.Element | React.ReactElement | null) | React.ReactNode;
 export type ReactOptions = {
     useSuspense: boolean;
@@ -8,3 +8,24 @@ export type TolgeeReactContext = {
     tolgee: TolgeeInstance;
     options: ReactOptions;
 };
+interface PropsBase {
+    params?: TranslateParams<ParamsTags>;
+    noWrap?: boolean;
+    ns?: NsType;
+    defaultValue?: string;
+    language?: string;
+}
+export interface PropsWithKeyName extends PropsBase {
+    children?: string;
+    keyName: TranslationKey;
+}
+export interface PropsWithoutKeyName extends PropsBase {
+    children: TranslationKey;
+}
+export type TProps = PropsWithKeyName | PropsWithoutKeyName;
+export interface TBaseInterface {
+    (props: TProps & {
+        t: TFnType<ParamsTags>;
+    }): JSX.Element;
+}
+export {};

package/dist/useTolgeeSSR.d.ts

@@ -1,2 +1,13 @@
 import { TolgeeInstance, TolgeeStaticData } from '@tolgee/web';
-export declare function useTolgeeSSR(tolgeeInstance: TolgeeInstance, locale?: string, staticData?: TolgeeStaticData | undefined): TolgeeInstance;
+/**
+ * Updates tolgee static data and language, to be ready right away for the first render
+ * and therefore compatible with SSR.
+ *
+ * It also ensures that the first render is done without wrapping and so it avoids
+ * "client different than server" issues.
+ *
+ * @param tolgeeInstance initialized Tolgee instance
+ * @param language language that is obtained outside of Tolgee on the server and client
+ * @param staticData static data for the language
+ */
+export declare function useTolgeeSSR(tolgeeInstance: TolgeeInstance, language?: string, staticData?: TolgeeStaticData | undefined): TolgeeInstance;

package/lib/T.d.ts

@@ -1,21 +1,5 @@
 /// <reference types="react" />
-import { NsType, TranslateParams, TranslationKey } from '@tolgee/web';
-import { ParamsTags } from './types';
-interface PropsBase {
-    params?: TranslateParams<ParamsTags>;
-    noWrap?: boolean;
-    ns?: NsType;
-    defaultValue?: string;
-    language?: string;
-}
-interface PropsWithKeyName extends PropsBase {
-    children?: string;
-    keyName: TranslationKey;
-}
-interface PropsWithoutKeyName extends PropsBase {
-    children: TranslationKey;
-}
-export type TProps = PropsWithKeyName | PropsWithoutKeyName;
+import { TProps } from './types';
 interface TInterface {
     (props: TProps): JSX.Element;
 }

package/lib/TBase.d.ts

@@ -0,0 +1,2 @@
+import { TBaseInterface } from './types';
+export declare const TBase: TBaseInterface;

package/lib/TolgeeProvider.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TolgeeInstance } from '@tolgee/web';
 import { ReactOptions, TolgeeReactContext } from './types';
 export declare const DEFAULT_REACT_OPTIONS: ReactOptions;
-export declare const TolgeeProviderContext: React.Context<TolgeeReactContext | undefined>;
+export declare const getProviderInstance: () => React.Context<TolgeeReactContext | undefined>;
 export interface TolgeeProviderProps {
     children?: React.ReactNode;
     tolgee: TolgeeInstance;

package/lib/index.d.ts

@@ -1,8 +1,9 @@
 export { useTranslate, UseTranslateResult } from './useTranslate';
-export { TolgeeProvider, TolgeeProviderProps, TolgeeProviderContext, } from './TolgeeProvider';
-export { T, TProps } from './T';
+export { TolgeeProvider, TolgeeProviderProps, getProviderInstance, } from './TolgeeProvider';
+export { T } from './T';
 export { useTolgee } from './useTolgee';
 export { GlobalContextPlugin } from './GlobalContextPlugin';
 export { useTolgeeSSR } from './useTolgeeSSR';
+export { TBase } from './TBase';
 export * from './types';
 export * from '@tolgee/web';

package/lib/types.d.ts

@@ -1,5 +1,5 @@
-import type { DefaultParamType, TolgeeInstance } from '@tolgee/web';
 import React from 'react';
+import type { DefaultParamType, NsType, TFnType, TolgeeInstance, TranslateParams, TranslationKey } from '@tolgee/web';
 export type ParamsTags = DefaultParamType | ((value: any) => JSX.Element | React.ReactElement | null) | React.ReactNode;
 export type ReactOptions = {
     useSuspense: boolean;
@@ -8,3 +8,24 @@ export type TolgeeReactContext = {
     tolgee: TolgeeInstance;
     options: ReactOptions;
 };
+interface PropsBase {
+    params?: TranslateParams<ParamsTags>;
+    noWrap?: boolean;
+    ns?: NsType;
+    defaultValue?: string;
+    language?: string;
+}
+export interface PropsWithKeyName extends PropsBase {
+    children?: string;
+    keyName: TranslationKey;
+}
+export interface PropsWithoutKeyName extends PropsBase {
+    children: TranslationKey;
+}
+export type TProps = PropsWithKeyName | PropsWithoutKeyName;
+export interface TBaseInterface {
+    (props: TProps & {
+        t: TFnType<ParamsTags>;
+    }): JSX.Element;
+}
+export {};

package/lib/useTolgeeSSR.d.ts

@@ -1,2 +1,13 @@
 import { TolgeeInstance, TolgeeStaticData } from '@tolgee/web';
-export declare function useTolgeeSSR(tolgeeInstance: TolgeeInstance, locale?: string, staticData?: TolgeeStaticData | undefined): TolgeeInstance;
+/**
+ * Updates tolgee static data and language, to be ready right away for the first render
+ * and therefore compatible with SSR.
+ *
+ * It also ensures that the first render is done without wrapping and so it avoids
+ * "client different than server" issues.
+ *
+ * @param tolgeeInstance initialized Tolgee instance
+ * @param language language that is obtained outside of Tolgee on the server and client
+ * @param staticData static data for the language
+ */
+export declare function useTolgeeSSR(tolgeeInstance: TolgeeInstance, language?: string, staticData?: TolgeeStaticData | undefined): TolgeeInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolgee/react",
-  "version": "5.10.1",
+  "version": "5.10.2-prerelease.4bd654a9.0",
   "description": "React implementation for Tolgee localization framework",
   "main": "./dist/tolgee-react.cjs.js",
   "module": "./dist/tolgee-react.esm.js",
@@ -38,7 +38,7 @@
     "react": "^16.14.0 || ^17.0.1 || ^18.1.0"
   },
   "dependencies": {
-    "@tolgee/web": "5.10.1"
+    "@tolgee/web": "5.10.2-prerelease.4bd654a9.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^14.1.0",
@@ -46,8 +46,8 @@
     "@testing-library/dom": "^8.7.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^14.0.0",
-    "@tolgee/format-icu": "5.10.1",
-    "@tolgee/testing": "5.10.1",
+    "@tolgee/format-icu": "5.10.2-prerelease.4bd654a9.0",
+    "@tolgee/testing": "5.10.2-prerelease.4bd654a9.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.8",
     "@types/react": "^18.0.28",
@@ -80,5 +80,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "619a60f30c44c59db1866be0fcbc7f5dc26eb81d"
+  "gitHead": "e69b6cb5dedd1d6bdf46fcb683705cd4100f62fa"
 }

package/src/T.tsx

@@ -1,55 +1,16 @@
-import { NsType, TranslateParams, TranslationKey } from '@tolgee/web';
 import React from 'react';
-import { addReactKeys, wrapTagHandlers } from './tagsTools';
-import { ParamsTags } from './types';
+import { ParamsTags, TProps } from './types';
 
 import { useTranslateInternal } from './useTranslateInternal';
-
-interface PropsBase {
-  params?: TranslateParams<ParamsTags>;
-  noWrap?: boolean;
-  ns?: NsType;
-  defaultValue?: string;
-  language?: string;
-}
-
-interface PropsWithKeyName extends PropsBase {
-  children?: string;
-  keyName: TranslationKey;
-}
-
-interface PropsWithoutKeyName extends PropsBase {
-  children: TranslationKey;
-}
-
-export type TProps = PropsWithKeyName | PropsWithoutKeyName;
+import { TFnType } from '@tolgee/web';
+import { TBase } from './TBase';
 
 interface TInterface {
   (props: TProps): JSX.Element;
 }
 
 export const T: TInterface = (props) => {
-  const key = (props as PropsWithKeyName).keyName || props.children;
-  if (key === undefined) {
-    // eslint-disable-next-line no-console
-    console.error('T component: keyName not defined');
-  }
-  const defaultValue =
-    props.defaultValue ||
-    ((props as PropsWithKeyName).keyName ? props.children : undefined);
-
   const { t } = useTranslateInternal();
 
-  const translation = addReactKeys(
-    t({
-      key: key!,
-      params: wrapTagHandlers(props.params),
-      defaultValue,
-      noWrap: props.noWrap,
-      ns: props.ns,
-      language: props.language,
-    })
-  );
-
-  return <>{translation}</>;
+  return <TBase t={t as TFnType<ParamsTags>} {...props} />;
 };

package/src/TBase.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { addReactKeys, wrapTagHandlers } from './tagsTools';
+import { PropsWithKeyName, TBaseInterface } from './types';
+
+export const TBase: TBaseInterface = (props) => {
+  const key = (props as PropsWithKeyName).keyName || props.children;
+  if (key === undefined) {
+    // eslint-disable-next-line no-console
+    console.error('T component: keyName not defined');
+  }
+  const defaultValue =
+    props.defaultValue ||
+    ((props as PropsWithKeyName).keyName ? props.children : undefined);
+
+  const translation = addReactKeys(
+    props.t({
+      key: key!,
+      params: wrapTagHandlers(props.params),
+      defaultValue,
+      noWrap: props.noWrap,
+      ns: props.ns,
+      language: props.language,
+    })
+  );
+
+  return <>{translation}</>;
+};

package/src/TolgeeProvider.tsx

@@ -6,9 +6,17 @@ export const DEFAULT_REACT_OPTIONS: ReactOptions = {
   useSuspense: true,
 };
 
-export const TolgeeProviderContext = React.createContext<
-  TolgeeReactContext | undefined
->(undefined);
+let ProviderInstance: React.Context<TolgeeReactContext | undefined>;
+
+export const getProviderInstance = () => {
+  if (!ProviderInstance) {
+    ProviderInstance = React.createContext<TolgeeReactContext | undefined>(
+      undefined
+    );
+  }
+
+  return ProviderInstance;
+};
 
 export interface TolgeeProviderProps {
   children?: React.ReactNode;
@@ -39,6 +47,8 @@ export const TolgeeProvider: React.FC<TolgeeProviderProps> = ({
 
   const optionsWithDefault = { ...DEFAULT_REACT_OPTIONS, ...options };
 
+  const TolgeeProviderContext = getProviderInstance();
+
   if (optionsWithDefault.useSuspense) {
     return (
       <TolgeeProviderContext.Provider

package/src/index.ts

@@ -2,12 +2,13 @@ export { useTranslate, UseTranslateResult } from './useTranslate';
 export {
   TolgeeProvider,
   TolgeeProviderProps,
-  TolgeeProviderContext,
+  getProviderInstance,
 } from './TolgeeProvider';
-export { T, TProps } from './T';
+export { T } from './T';
 export { useTolgee } from './useTolgee';
 export { GlobalContextPlugin } from './GlobalContextPlugin';
 export { useTolgeeSSR } from './useTolgeeSSR';
+export { TBase } from './TBase';
 export * from './types';
 
 export * from '@tolgee/web';

package/src/types.ts

@@ -1,5 +1,12 @@
-import type { DefaultParamType, TolgeeInstance } from '@tolgee/web';
 import React from 'react';
+import type {
+  DefaultParamType,
+  NsType,
+  TFnType,
+  TolgeeInstance,
+  TranslateParams,
+  TranslationKey,
+} from '@tolgee/web';
 
 export type ParamsTags =
   | DefaultParamType
@@ -14,3 +21,26 @@ export type TolgeeReactContext = {
   tolgee: TolgeeInstance;
   options: ReactOptions;
 };
+
+interface PropsBase {
+  params?: TranslateParams<ParamsTags>;
+  noWrap?: boolean;
+  ns?: NsType;
+  defaultValue?: string;
+  language?: string;
+}
+
+export interface PropsWithKeyName extends PropsBase {
+  children?: string;
+  keyName: TranslationKey;
+}
+
+export interface PropsWithoutKeyName extends PropsBase {
+  children: TranslationKey;
+}
+
+export type TProps = PropsWithKeyName | PropsWithoutKeyName;
+
+export interface TBaseInterface {
+  (props: TProps & { t: TFnType<ParamsTags> }): JSX.Element;
+}

package/src/useTolgeeContext.ts

@@ -1,8 +1,9 @@
 import { useContext } from 'react';
 import { getGlobalContext } from './GlobalContextPlugin';
-import { TolgeeProviderContext } from './TolgeeProvider';
+import { getProviderInstance } from './TolgeeProvider';
 
 export const useTolgeeContext = () => {
+  const TolgeeProviderContext = getProviderInstance();
   const context = useContext(TolgeeProviderContext) || getGlobalContext();
   if (!context) {
     throw new Error(

package/src/useTolgeeSSR.ts

@@ -18,9 +18,20 @@ function getTolgeeWithDeactivatedWrapper(
   };
 }
 
+/**
+ * Updates tolgee static data and language, to be ready right away for the first render
+ * and therefore compatible with SSR.
+ *
+ * It also ensures that the first render is done without wrapping and so it avoids
+ * "client different than server" issues.
+ *
+ * @param tolgeeInstance initialized Tolgee instance
+ * @param language language that is obtained outside of Tolgee on the server and client
+ * @param staticData static data for the language
+ */
 export function useTolgeeSSR(
   tolgeeInstance: TolgeeInstance,
-  locale?: string,
+  language?: string,
   staticData?: TolgeeStaticData | undefined
 ) {
   const initialInstance = useMemo(
@@ -40,9 +51,9 @@ export function useTolgeeSSR(
     // events emitting must be off, to not trigger re-render while rendering
     tolgee.setEmitterActive(false);
     tolgee.addStaticData(staticData);
-    tolgee.changeLanguage(locale!);
+    tolgee.changeLanguage(language!);
     tolgee.setEmitterActive(true);
-  }, [locale, staticData, tolgee]);
+  }, [language, staticData, tolgee]);
 
   return tolgee;
 }