From 2d7197a407b95fe580456f79262992ae355af177 Mon Sep 17 00:00:00 2001 From: Zack Jackson <25274700+ScriptedAlchemy@users.noreply.github.com> Date: Fri, 19 Sep 2025 23:17:03 -0700 Subject: [PATCH] Fix i18next host toggles for Playwright suite --- .../components/ReactRemoteContent.tsx | 33 +++++++++++++++ .../next-host/i18n/react-remote/en/index.ts | 7 ++++ .../react-remote/en/react-remote-main.json | 5 +++ .../next-host/i18n/react-remote/fr/index.ts | 7 ++++ .../react-remote/fr/react-remote-main.json | 5 +++ .../i18n/useReactRemoteTranslation.ts | 11 +++++ i18next-nextjs-react/next-host/next.config.js | 34 --------------- i18next-nextjs-react/next-host/pages/_app.tsx | 13 ++++++ .../next-host/pages/index.tsx | 41 +++++++++++++++---- i18next-nextjs-react/react-host/src/App.tsx | 27 +++++++++--- .../react-remote/src/Content.tsx | 9 +++- 11 files changed, 141 insertions(+), 51 deletions(-) create mode 100644 i18next-nextjs-react/next-host/components/ReactRemoteContent.tsx create mode 100644 i18next-nextjs-react/next-host/i18n/react-remote/en/index.ts create mode 100644 i18next-nextjs-react/next-host/i18n/react-remote/en/react-remote-main.json create mode 100644 i18next-nextjs-react/next-host/i18n/react-remote/fr/index.ts create mode 100644 i18next-nextjs-react/next-host/i18n/react-remote/fr/react-remote-main.json create mode 100644 i18next-nextjs-react/next-host/i18n/useReactRemoteTranslation.ts delete mode 100644 i18next-nextjs-react/next-host/next.config.js diff --git a/i18next-nextjs-react/next-host/components/ReactRemoteContent.tsx b/i18next-nextjs-react/next-host/components/ReactRemoteContent.tsx new file mode 100644 index 00000000000..744b789b6f7 --- /dev/null +++ b/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) => { + event.stopPropagation(); + switchLanguage(); + }; + + return ( +
+
{t('remoteTitle')}
+ +
{t('remoteContent')}
+
+ ); +}; + +export default ReactRemoteContent; diff --git a/i18next-nextjs-react/next-host/i18n/react-remote/en/index.ts b/i18next-nextjs-react/next-host/i18n/react-remote/en/index.ts new file mode 100644 index 00000000000..76ccabd50d3 --- /dev/null +++ b/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; diff --git a/i18next-nextjs-react/next-host/i18n/react-remote/en/react-remote-main.json b/i18next-nextjs-react/next-host/i18n/react-remote/en/react-remote-main.json new file mode 100644 index 00000000000..28f09e6cd56 --- /dev/null +++ b/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 !" +} diff --git a/i18next-nextjs-react/next-host/i18n/react-remote/fr/index.ts b/i18next-nextjs-react/next-host/i18n/react-remote/fr/index.ts new file mode 100644 index 00000000000..94421e55b97 --- /dev/null +++ b/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; diff --git a/i18next-nextjs-react/next-host/i18n/react-remote/fr/react-remote-main.json b/i18next-nextjs-react/next-host/i18n/react-remote/fr/react-remote-main.json new file mode 100644 index 00000000000..321be176817 --- /dev/null +++ b/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" +} diff --git a/i18next-nextjs-react/next-host/i18n/useReactRemoteTranslation.ts b/i18next-nextjs-react/next-host/i18n/useReactRemoteTranslation.ts new file mode 100644 index 00000000000..435f68f5434 --- /dev/null +++ b/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; diff --git a/i18next-nextjs-react/next-host/next.config.js b/i18next-nextjs-react/next-host/next.config.js deleted file mode 100644 index ecf2b271161..00000000000 --- a/i18next-nextjs-react/next-host/next.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const { NextFederationPlugin } = require('@module-federation/nextjs-mf'); -const deps = require('./package.json').dependencies; - -module.exports = { - webpack(config, options) { - if (!options.isServer) { - config.plugins.push( - new NextFederationPlugin({ - name: 'next-host', - filename: 'static/chunks/remoteEntry.js', - remotes: { - reactRemote: 'reactRemote@http://localhost:3002/remoteEntry.js', - }, - exposes: {}, - shared: { - 'i18next-shared-lib/': { - // BEWARE THE TRAILING "/" !! - singleton: true, - }, - i18next: { - singleton: true, - requiredVersion: deps.i18next, - }, - 'react-i18next': { - singleton: true, - requiredVersion: deps['react-i18next'], - }, - }, - }), - ); - } - return config; - }, -}; diff --git a/i18next-nextjs-react/next-host/pages/_app.tsx b/i18next-nextjs-react/next-host/pages/_app.tsx index f3f962852c8..a8d199eb95f 100644 --- a/i18next-nextjs-react/next-host/pages/_app.tsx +++ b/i18next-nextjs-react/next-host/pages/_app.tsx @@ -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 ; } diff --git a/i18next-nextjs-react/next-host/pages/index.tsx b/i18next-nextjs-react/next-host/pages/index.tsx index c22400c6c85..ded27763ebe 100644 --- a/i18next-nextjs-react/next-host/pages/index.tsx +++ b/i18next-nextjs-react/next-host/pages/index.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) => { + event.stopPropagation(); + switchLanguage(); + }; return (
{

Next Host

{t('mainText')}

- -
-
-

{`${t('remoteChildTitle')} :`}

- + + {isRemoteVisible && ( +
+

{`${t('remoteChildTitle')} :`}

+ +
+ )}
); diff --git a/i18next-nextjs-react/react-host/src/App.tsx b/i18next-nextjs-react/react-host/src/App.tsx index a860cfdef97..e25cf58c994 100644 --- a/i18next-nextjs-react/react-host/src/App.tsx +++ b/i18next-nextjs-react/react-host/src/App.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) => { + event.stopPropagation(); + switchLanguage(); + }; return (
{

React Host

{t('mainText')}

- -
-
-

{`${t('remoteChildTitle')} :`}

- + +
+

{`${t('remoteChildTitle')} :`}

+ +
); diff --git a/i18next-nextjs-react/react-remote/src/Content.tsx b/i18next-nextjs-react/react-remote/src/Content.tsx index 3f44ec0d902..be88cba264b 100644 --- a/i18next-nextjs-react/react-remote/src/Content.tsx +++ b/i18next-nextjs-react/react-remote/src/Content.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type MouseEvent } from 'react'; import useReactRemoteTranslation from './i18n/useReactRemoteTranslation'; import i18nService from 'i18next-shared-lib/lib/i18nService'; @@ -9,6 +9,11 @@ export const Content = () => { i18nService.switchLanguage(); }; + const handleButtonClick = (event: MouseEvent) => { + event.stopPropagation(); + switchLanguage(); + }; + return (
{ >
{t('remoteTitle')}
{t('remoteContent')}