feat: add useTolgeeSSR for compatibility with react 18 and next.js 13 (…

…#3173)

e2e/.gitignore

@@ -1,5 +1,6 @@
 cypress/screenshots
 cypress/videos
+cypress/downloads
 node_modules
 testapps/dist
 extension

packages/react/package.json

@@ -45,19 +45,19 @@
     "@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",
+    "@testing-library/react": "^14.0.0",
     "@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,7 +66,6 @@
     "rollup-plugin-terser": "7.0.2",
     "ts-jest": "^27.0.5",
     "tslib": "^2.4.0",
-    "tslint": "~5.15.0",
     "typescript": "^4.7.4"
   },
   "exports": {

packages/react/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';

packages/react/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;
+}

packages/web/package.json

@@ -60,15 +60,15 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.30",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "clsx": "^1.1.1",
     "concurrently": "7.4.0",
     "jest": "^27.2.4",
     "jest-fetch-mock": "^3.0.3",
     "openapi-typescript": "^4.3.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.4.2",
     "react-query": "^3.39.2",
     "rollup": "2.79.0",

packages/web/src/ui/KeyDialog/NewWindow.tsx

@@ -1,10 +1,10 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { useDialogContext, useDialogActions } from './dialogContext';
 
-export const NewWindow: FC = (props) => {
+export const NewWindow = (props: React.PropsWithChildren) => {
   const newWindow = useRef<Window>(null);
   const [popup, setPopup] = useState<Window | null>(null);
   const { setContainer, onClose } = useDialogActions();

packages/web/src/ui/KeyDialog/ScreenshotGallery/ScreenshotDropzone.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { green, red } from '@mui/material/colors';
 import Backup from '@mui/icons-material/Backup';
@@ -62,11 +62,11 @@ const ScInvalidIcon = styled(HighlightOff)`
   color: ${({ theme }) => theme.palette.common.white};
 `;
 
-export const ScreenshotDropzone: FunctionComponent<ScreenshotDropzoneProps> = ({
+export const ScreenshotDropzone = ({
   validateAndUpload,
   enabled,
   ...props
-}) => {
+}: React.PropsWithChildren<ScreenshotDropzoneProps>) => {
   const [dragOver, setDragOver] = useState(null as null | 'valid' | 'invalid');
   const [dragEnterTarget, setDragEnterTarget] = useState(
     null as EventTarget | null

packages/web/src/ui/KeyDialog/Tags/Wrapper.tsx

@@ -45,12 +45,12 @@ type Props = {
   className?: string;
 };
 
-export const Wrapper: React.FC<Props> = ({
+export const Wrapper = ({
   children,
   role,
   onClick,
   className,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   switch (role) {
     case 'add':
       return (

packages/web/src/ui/KeyDialog/TranslationDialogWrapper.tsx

@@ -5,7 +5,9 @@ import { useDialogContext, useDialogActions } from './dialogContext';
 import { NewWindow } from './NewWindow';
 import { DEVTOOLS_Z_INDEX } from '../../constants';
 
-export const TranslationDialogWrapper: React.FC = ({ children }) => {
+export const TranslationDialogWrapper = ({
+  children,
+}: React.PropsWithChildren) => {
   const { onClose } = useDialogActions();
   const useBrowserWindow = useDialogContext((c) => c.useBrowserWindow);
   const open = useDialogContext((c) => c.open);

packages/web/src/ui/KeyDialog/dialogContext/index.ts

@@ -27,6 +27,7 @@ type DialogProps = {
   onClose: () => void;
   uiProps: UiProps;
   ns: string[];
+  children: React.ReactNode;
 };
 
 export const [DialogProvider, useDialogActions, useDialogContext] =

packages/web/src/ui/ThemeProvider.tsx

@@ -54,7 +54,7 @@ theme = createTheme(theme, {
   },
 });
 
-export const ThemeProvider: React.FC = ({ children }) => {
+export const ThemeProvider = ({ children }: React.PropsWithChildren) => {
   const cache = useRef(
     createCache({
       key: 'css',

packages/web/src/ui/client/QueryProvider.tsx

@@ -21,12 +21,12 @@ export const QueryContext = React.createContext({} as GlobalOptions);
 
 type Props = GlobalOptions;
 
-export const QueryProvider: React.FC<Props> = ({
+export const QueryProvider = ({
   children,
   apiUrl,
   apiKey,
   projectId,
-}) => {
+}: React.PropsWithChildren<Props>) => {
   return (
     <QueryContext.Provider value={{ apiUrl, apiKey, projectId }}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

packages/web/src/ui/common/BodyEnd.tsx

@@ -2,7 +2,10 @@ import { DEVTOOLS_ID } from '../../constants';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-export class BodyEnd extends React.PureComponent<{ document?: Document }> {
+export class BodyEnd extends React.PureComponent<{
+  document?: Document;
+  children: React.ReactNode;
+}> {
   _popup = null as HTMLElement | null;
 
   get document() {

packages/web/src/ui/tools/createProvider.tsx

@@ -9,7 +9,10 @@ export const createProvider = <StateType, Actions, ProviderProps>(
   const StateContext = createContext<StateType>(null as any);
   const DispatchContext = React.createContext<Actions>(null as any);
 
-  const Provider: React.FC<ProviderProps> = ({ children, ...props }) => {
+  const Provider = ({
+    children,
+    ...props
+  }: React.PropsWithChildren<ProviderProps>) => {
     const [state, _actions] = controller(props as any);
     const actionsRef = useRef(_actions);