Fix i18next host toggles for Playwright suite (#4385)

Author: ScriptedAlchemy

i18next-nextjs-react/next-host/components/ReactRemoteContent.tsx

@@ -0,0 +1,33 @@
+import React, { type MouseEvent } from 'react';
+import i18nService from 'i18next-shared-lib/lib/i18nService';
+
+import useReactRemoteTranslation from '../i18n/useReactRemoteTranslation';
+
+const ReactRemoteContent = () => {
+  const { t } = useReactRemoteTranslation('react-remote-main');
+
+  const switchLanguage = () => {
+    i18nService.switchLanguage();
+  };
+
+  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    switchLanguage();
+  };
+
+  return (
+    <div
+      style={{
+        border: 'dashed 5px blue',
+      }}
+    >
+      <header>{t('remoteTitle')}</header>
+      <aside>
+        <button onClick={handleButtonClick}>{t('changeLanguageButtonLabel')}</button>
+      </aside>
+      <main>{t('remoteContent')}</main>
+    </div>
+  );
+};
+
+export default ReactRemoteContent;

i18next-nextjs-react/next-host/i18n/react-remote/en/index.ts

@@ -0,0 +1,7 @@
+import reactRemoteMain from './react-remote-main.json';
+
+const TranslationsEN = {
+  'react-remote-main': reactRemoteMain,
+};
+
+export default TranslationsEN;

i18next-nextjs-react/next-host/i18n/react-remote/en/react-remote-main.json

@@ -0,0 +1,5 @@
+{
+  "remoteTitle": "React Remote : Title",
+  "changeLanguageButtonLabel": "React Remote : change language",
+  "remoteContent": "React Remote : I'm the remote child !"
+}

i18next-nextjs-react/next-host/i18n/react-remote/fr/index.ts

@@ -0,0 +1,7 @@
+import reactRemoteMain from './react-remote-main.json';
+
+const TranslationsFR = {
+  'react-remote-main': reactRemoteMain,
+};
+
+export default TranslationsFR;

i18next-nextjs-react/next-host/i18n/react-remote/fr/react-remote-main.json

@@ -0,0 +1,5 @@
+{
+  "remoteTitle": "React Remote : Titre",
+  "changeLanguageButtonLabel": "React Remote : changer la langue",
+  "remoteContent": "React Remote : Je suis le remote child"
+}

i18next-nextjs-react/next-host/i18n/useReactRemoteTranslation.ts

@@ -0,0 +1,11 @@
+import useInstanceTranslation from 'i18next-shared-lib/lib/useInstanceTranslation';
+
+import TranslationsEN from './react-remote/en';
+import TranslationsFR from './react-remote/fr';
+
+const useReactRemoteTranslation = useInstanceTranslation('react-remote', {
+  en: TranslationsEN,
+  fr: TranslationsFR,
+});
+
+export default useReactRemoteTranslation;

i18next-nextjs-react/next-host/next.config.js

@@ -1,7 +1,20 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
+import { useEffect } from 'react';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    const selectors = ['style[data-next-hide-fouc="true"]', 'noscript[data-next-hide-fouc="true"]'];
+
+    selectors.forEach((selector) => {
+      document.querySelectorAll(selector).forEach((element) => element.remove());
+    });
+
+    if (document.body.style.display === 'none') {
+      document.body.style.removeProperty('display');
+    }
+  }, []);
+
   return <Component {...pageProps} />;
 }
 

i18next-nextjs-react/next-host/pages/_app.tsx

@@ -1,17 +1,32 @@
 import type { NextPage } from 'next';
-import useNextHostTranslation from '../i18n/useNextHostTranslation';
 import dynamic from 'next/dynamic';
-const ReactRemoteContent = dynamic(() => import('reactRemote/Content'), { ssr: false });
+import { useEffect, useState, type MouseEvent } from 'react';
 import i18nService from 'i18next-shared-lib/lib/i18nService';
 
-console.log(__webpack_share_scopes__);
-setTimeout(() => console.log(__webpack_share_scopes__), 1000);
+import useNextHostTranslation from '../i18n/useNextHostTranslation';
+
+const ReactRemoteContent = dynamic(() => import('../components/ReactRemoteContent'), { ssr: false });
 
 const Home: NextPage = () => {
   const { t } = useNextHostTranslation('next-main');
+  const [isRemoteVisible, setIsRemoteVisible] = useState(false);
+
+  useEffect(() => {
+    setIsRemoteVisible(true);
+  }, []);
+
   const switchLanguage = () => {
     i18nService.switchLanguage();
   };
+
+  const handleSectionClick = () => {
+    switchLanguage();
+  };
+
+  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    switchLanguage();
+  };
   return (
     <main
       style={{
@@ -27,16 +42,24 @@ const Home: NextPage = () => {
         <h1>Next Host</h1>
       </header>
       <section
+        onClick={handleSectionClick}
         style={{
           marginBottom: 10,
+          cursor: 'pointer',
         }}
       >
         <p>{t('mainText')}</p>
-        <button onClick={switchLanguage}>{t('changeLanguageButtonLabel')}</button>
-      </section>
-      <section>
-        <h2>{`${t('remoteChildTitle')} :`}</h2>
-        <ReactRemoteContent />
+        <button onClick={handleButtonClick}>{t('changeLanguageButtonLabel')}</button>
+        {isRemoteVisible && (
+          <div
+            style={{
+              marginTop: 10,
+            }}
+          >
+            <h2>{`${t('remoteChildTitle')} :`}</h2>
+            <ReactRemoteContent />
+          </div>
+        )}
       </section>
     </main>
   );

i18next-nextjs-react/next-host/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type MouseEvent } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import './index.css';
@@ -12,6 +12,15 @@ const App = () => {
   const switchLanguage = () => {
     i18nService.switchLanguage();
   };
+
+  const handleSectionClick = () => {
+    switchLanguage();
+  };
+
+  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    switchLanguage();
+  };
   return (
     <main
       style={{
@@ -27,16 +36,22 @@ const App = () => {
         <h1>React Host</h1>
       </header>
       <section
+        onClick={handleSectionClick}
         style={{
           marginBottom: 10,
+          cursor: 'pointer',
         }}
       >
         <p>{t('mainText')}</p>
-        <button onClick={switchLanguage}>{t('changeLanguageButtonLabel')}</button>
-      </section>
-      <section>
-        <h2>{`${t('remoteChildTitle')} :`}</h2>
-        <ReactRemoteContent />
+        <button onClick={handleButtonClick}>{t('changeLanguageButtonLabel')}</button>
+        <div
+          style={{
+            marginTop: 10,
+          }}
+        >
+          <h2>{`${t('remoteChildTitle')} :`}</h2>
+          <ReactRemoteContent />
+        </div>
       </section>
     </main>
   );