@tolgee/react 5.4.4-prerelease.d720afd4.0 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolgee/react",
-  "version": "5.4.4-prerelease.d720afd4.0",
+  "version": "5.5.0",
   "description": "React implementation for tolgee localization framework",
   "main": "./dist/tolgee-react.cjs.js",
   "module": "./dist/tolgee-react.esm.js",
@@ -38,26 +38,26 @@
     "react": "^16.14.0 || ^17.0.1 || ^18.1.0"
   },
   "dependencies": {
-    "@tolgee/web": "5.4.4-prerelease.d720afd4.0"
+    "@tolgee/web": "5.5.0"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-typescript": "8.3.4",
     "@testing-library/dom": "^8.7.2",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^12.1.2",
-    "@tolgee/format-icu": "5.4.4-prerelease.d720afd4.0",
-    "@tolgee/testing": "5.4.4-prerelease.d720afd4.0",
+    "@testing-library/react": "^14.0.0",
+    "@tolgee/format-icu": "5.4.4",
+    "@tolgee/testing": "5.4.1",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/testing-library__jest-dom": "^5.14.5",
     "concurrently": "7.2.2",
     "jest": "^27.2.4",
     "jest-fetch-mock": "^3.0.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reflect-metadata": "^0.1.13",
     "regenerator-runtime": "^0.13.3",
     "rollup": "2.78.1",
@@ -66,13 +66,12 @@
     "rollup-plugin-terser": "7.0.2",
     "ts-jest": "^27.0.5",
     "tslib": "^2.4.0",
-    "tslint": "~5.15.0",
     "typescript": "^4.7.4"
   },
   "exports": {
     ".": {
       "require": "./dist/tolgee-react.cjs.js",
-      "import": "./dist/tolgee-react.esm.js"
+      "import": "./dist/tolgee-react.esm.mjs"
     },
     "./package.json": "./package.json"
   },
@@ -80,5 +79,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "3fcb8f471e6fc0c0eeaf0d22cc209c7783e2c164"
+  "gitHead": "6e25215da47412bae6b40a4f3a5ab8c0bc9b5366"
 }

package/src/index.ts

@@ -3,6 +3,7 @@ export { TolgeeProvider, TolgeeProviderContext } from './TolgeeProvider';
 export { T } from './T';
 export { useTolgee } from './useTolgee';
 export { GlobalContextPlugin } from './GlobalContextPlugin';
+export { useTolgeeSSR } from './useTolgeeSSR';
 export * from './types';
 
 export * from '@tolgee/web';

package/src/useTolgeeSSR.ts

@@ -0,0 +1,48 @@
+import {
+  getTranslateProps,
+  TolgeeInstance,
+  TolgeeStaticData,
+} from '@tolgee/web';
+import { useEffect, useMemo, useState } from 'react';
+
+function getTolgeeWithDeactivatedWrapper(
+  tolgee: TolgeeInstance
+): TolgeeInstance {
+  return {
+    ...tolgee,
+    t(...args) {
+      // @ts-ignore
+      const props = getTranslateProps(...args);
+      return tolgee.t({ ...props, noWrap: true });
+    },
+  };
+}
+
+export function useTolgeeSSR(
+  tolgeeInstance: TolgeeInstance,
+  locale?: string,
+  staticData?: TolgeeStaticData | undefined
+) {
+  const initialInstance = useMemo(
+    () => getTolgeeWithDeactivatedWrapper(tolgeeInstance),
+    []
+  );
+
+  const [tolgee, setTolgee] = useState(initialInstance);
+
+  useEffect(() => {
+    setTolgee(tolgeeInstance);
+  }, []);
+
+  useMemo(() => {
+    // we have to prepare tolgee before rendering children
+    // so translations are available right away
+    // events emitting must be off, to not trigger re-render while rendering
+    tolgee.setEmmiterActive(false);
+    tolgee.addStaticData(staticData);
+    tolgee.changeLanguage(locale!);
+    tolgee.setEmmiterActive(true);
+  }, [locale, staticData, tolgee]);
+
+  return tolgee;
+}