Skip to content

Commit 2e8f403

Browse files
VadorequestVadorequest
committed
WIP not working on /static-i18n page
1 parent 3103cab commit 2e8f403

File tree

11 files changed

+72
-49
lines changed

11 files changed

+72
-49
lines changed

‎src/app/components/MultiversalAppBootstrap.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import { CustomerTheme } from '@/modules/core/data/types/CustomerTheme';
1010
import { SanitizedAirtableDataset } from '@/modules/core/data/types/SanitizedAirtableDataset';
1111
import DefaultErrorLayout from '@/modules/core/errorHandling/DefaultErrorLayout';
1212
import i18nContext from '@/modules/core/i18n/contexts/i18nContext';
13-
import i18nextLocize from '@/modules/core/i18n/i18nextLocize';
13+
import { resolveFallbackLanguage } from '@/modules/core/i18n/i18n';
14+
import {
15+
locizeBackendOptions,
16+
locizeOptions,
17+
} from '@/modules/core/i18n/i18nextLocize';
1418
import { stringifyQueryParameters } from '@/modules/core/i18n/i18nRouter';
1519
import { detectLightHouse } from '@/modules/core/lightHouse/lighthouse';
1620
import { createLogger } from '@/modules/core/logging/logger';
@@ -30,7 +34,7 @@ import { NO_AUTO_PREVIEW_MODE_KEY } from '@/pages/api/preview';
3034
import { ThemeProvider } from '@emotion/react';
3135
import * as Sentry from '@sentry/node';
3236
import { isBrowser } from '@unly/utils';
33-
import { i18n } from 'i18next';
37+
import i18next, { i18n } from 'i18next';
3438
import isEmpty from 'lodash.isempty';
3539
import size from 'lodash.size';
3640
import React, { useState } from 'react';
@@ -310,7 +314,21 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
310314
}
311315
}
312316

313-
const i18nextInstance: i18n = i18nextLocize(lang, i18nTranslations); // Apply i18next configuration with Locize backend
317+
// const i18nextInstance: i18n = i18nextLocize(lang, i18nTranslations); // Apply i18next configuration with Locize backend
318+
const i18nextInstance: i18n = i18next;
319+
i18nextInstance.init({ // XXX See https://www.i18next.com/overview/configuration-options
320+
resources: {en: {}},
321+
lng: 'en', // XXX We don't use the built-in i18next-browser-languageDetector because we have our own way of detecting language
322+
interpolation: {
323+
escapeValue: false, // not needed for react as it escapes by default
324+
},
325+
react: {
326+
bindI18n: 'languageChanged editorSaved',
327+
useSuspense: false, // Not compatible with SSR
328+
},
329+
load: 'languageOnly', // Remove if you want to use localization (en-US, en-GB)
330+
});
331+
314332
const customerTheme: CustomerTheme = initCustomerTheme(customer);
315333

316334
/*

‎src/layouts/demo/components/DemoFooter.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ const DemoFooter: React.FunctionComponent<Props> = (props) => {
3131
const {
3232
style,
3333
} = props;
34-
const { t } = useTranslation();
34+
// const { t } = useTranslation();
35+
const t = (key, defaultValue, any?) => defaultValue;
36+
3537
const customer: Customer = useCustomer();
3638
const { availableLanguages } = customer;
3739
const shouldDisplayI18nButton = availableLanguages?.length > 1;

‎src/layouts/demo/components/DemoNav.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ type Props = {};
5555
* XXX Demo component, not meant to be modified. It's a copy of the core implementation, so the demo keeps working even the core implementation changes.
5656
*/
5757
const DemoNav: React.FunctionComponent<Props> = () => {
58-
const { t } = useTranslation();
58+
// const { t } = useTranslation();
59+
const t = (key, defaultValue, any?) => defaultValue;
60+
5961
const router: NextRouter = useRouter();
6062
const theme = useTheme();
6163
const {

‎src/layouts/demo/components/SidebarFooter.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ type Props = {
1010
};
1111

1212
const HomePageLink: React.FunctionComponent = () => {
13-
const { t } = useTranslation();
13+
// const { t } = useTranslation();
14+
const t = (key, defaultValue, any?) => defaultValue;
1415

1516
return (
1617
<I18nLink href={'/'}>

‎src/layouts/quickPreview/components/QuickPreviewBanner.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ const QuickPreviewBanner: React.FunctionComponent<Props> = (props): JSX.Element
4848
secondaryColor,
4949
secondaryColorVariant1,
5050
} = useTheme();
51-
const { t } = useTranslation();
51+
// const { t } = useTranslation();
52+
const t = (key, defaultValue, any?) => defaultValue;
53+
5254
const router: NextRouter = useRouter();
5355
const customer: Customer = useCustomer();
5456
const { availableLanguages } = customer;

‎src/modules/core/i18n/fetchStaticLocizeTranslations.preval.ts‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import { supportedLocales } from '@/modules/core/i18n/i18nConfig';
2-
import {
3-
fetchTranslations,
4-
I18nextResources,
5-
} from '@/modules/core/i18n/i18nextLocize';
6-
import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale';
71
import { LocizeTranslationByLang } from '@/modules/core/i18n/types/LocizeTranslationByLang';
82
import { createLogger } from '@/modules/core/logging/logger';
93
import preval from 'next-plugin-preval';
@@ -25,24 +19,25 @@ const logger = createLogger({
2519
* (lang is simpler)
2620
*/
2721
export const fetchStaticLocizeTranslations = async (): Promise<LocizeTranslationByLang> => {
28-
if (process.env.NODE_ENV !== 'development') {
29-
logger.debug(`Pre-evaluation (prefetching of the static translations at build time) is starting.`);
30-
const translationsByLocale: LocizeTranslationByLang = {};
31-
const promises: Promise<any>[] = [];
32-
33-
supportedLocales.map((supportedLocale: I18nLocale) => {
34-
promises.push(fetchTranslations(supportedLocale?.lang));
35-
});
36-
37-
// Run all promises in parallel and compute results into the dataset
38-
const results: I18nextResources[] = await Promise.all(promises);
39-
results.map((i18nextResources: I18nextResources, index) => translationsByLocale[supportedLocales[index]?.lang] = i18nextResources);
40-
41-
return translationsByLocale;
42-
} else {
43-
logger.debug(`Pre-evaluation (prefetching of the static translations at build time) is disabled in development mode for a better developer experience.`);
44-
return {};
45-
}
22+
// if (process.env.NODE_ENV !== 'development') {
23+
// logger.debug(`Pre-evaluation (prefetching of the static translations at build time) is starting.`);
24+
// const translationsByLocale: LocizeTranslationByLang = {};
25+
// const promises: Promise<any>[] = [];
26+
//
27+
// supportedLocales.map((supportedLocale: I18nLocale) => {
28+
// promises.push(fetchTranslations(supportedLocale?.lang));
29+
// });
30+
//
31+
// // Run all promises in parallel and compute results into the dataset
32+
// const results: I18nextResources[] = await Promise.all(promises);
33+
// results.map((i18nextResources: I18nextResources, index) => translationsByLocale[supportedLocales[index]?.lang] = i18nextResources);
34+
//
35+
// return translationsByLocale;
36+
// } else {
37+
// logger.debug(`Pre-evaluation (prefetching of the static translations at build time) is disabled in development mode for a better developer experience.`);
38+
// return {};
39+
// }
40+
return {};
4641
};
4742

4843
/**

‎src/modules/core/i18n/getLocizeTranslations.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,13 @@ export const getStaticLocizeTranslations = async (lang: string): Promise<I18next
4444
* @param isPreviewMode
4545
*/
4646
export const getLocizeTranslations = async (lang: string, isPreviewMode = false): Promise<I18nextResources> => {
47-
if (isPreviewMode || process.env.NODE_ENV === 'development') {
48-
// When preview mode is enabled or working locally, we want to make real-time API requests to get up-to-date data
49-
// Because using the "next-plugin-preval" plugin worsen developer experience in dev - See https://github.com/UnlyEd/next-right-now/discussions/335#discussioncomment-792821
50-
return await fetchTranslations(lang);
51-
} else {
52-
// Otherwise, we fallback to the app-wide shared/static data (stale)
53-
return await getStaticLocizeTranslations(lang);
54-
}
47+
// if (isPreviewMode || process.env.NODE_ENV === 'development') {
48+
// // When preview mode is enabled or working locally, we want to make real-time API requests to get up-to-date data
49+
// // Because using the "next-plugin-preval" plugin worsen developer experience in dev - See https://github.com/UnlyEd/next-right-now/discussions/335#discussioncomment-792821
50+
// return await fetchTranslations(lang);
51+
// } else {
52+
// // Otherwise, we fallback to the app-wide shared/static data (stale)
53+
// return await getStaticLocizeTranslations(lang);
54+
// }
55+
return {};
5556
};

‎src/modules/core/previewMode/components/PreviewModeBanner.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
5858
const { isPreviewModeEnabled }: PreviewMode = usePreviewMode();
5959
const router: NextRouter = useRouter();
6060
const queryParameters: string = stringifyQueryParameters(router);
61-
const { t } = useTranslation();
61+
// const { t } = useTranslation();
62+
const t = (key, defaultValue, any?) => defaultValue;
63+
6264
const {
6365
secondaryColor,
6466
secondaryColorVariant1,

‎src/pages/404.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ const En404 = (): JSX.Element => {
8686
* @see https://nextjs.org/docs/advanced-features/custom-error-page#404-page
8787
*/
8888
const NotFound404Page: NextPage<Props> = (props): JSX.Element => {
89-
const { t } = useTranslation();
89+
// const { t } = useTranslation();
90+
const t = (key, defaultValue, any?) => defaultValue;
91+
9092
const router: NextRouter = useRouter();
9193
const locale = router?.asPath?.split('/')?.[1] || DEFAULT_LOCALE;
9294
const lang: string = locale.split('-')?.[0];

‎src/pages/[locale]/demo/built-in-features/static-i18n.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,7 @@ import {
2222
} from 'next';
2323
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
2424
import React from 'react';
25-
import {
26-
Trans,
27-
useTranslation,
28-
} from 'react-i18next';
25+
import { Trans } from 'react-i18next';
2926
import {
3027
Alert,
3128
Container,
@@ -64,7 +61,7 @@ export const getStaticProps: GetStaticProps<SSGPageProps, CommonServerSideParams
6461
type Props = {} & SSGPageProps<Partial<OnlyBrowserPageProps>>;
6562

6663
const ExampleStaticI18nPage: NextPage<Props> = (props): JSX.Element => {
67-
const { t } = useTranslation();
64+
const t = (key, defaultValue, any?) => defaultValue;
6865
const { lang }: I18n = useI18n();
6966

7067
return (
@@ -139,7 +136,7 @@ const ExampleStaticI18nPage: NextPage<Props> = (props): JSX.Element => {
139136
</Alert>
140137

141138
<div>
142-
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 1 })}<br />
139+
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel')}<br />
143140
<Code
144141
text={`
145142
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 1 })}
@@ -148,7 +145,7 @@ const ExampleStaticI18nPage: NextPage<Props> = (props): JSX.Element => {
148145
</div>
149146
<br />
150147
<div>
151-
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 2 })}<br />
148+
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel')}<br />
152149
<Code
153150
text={`
154151
{t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 2 })}

0 commit comments

Comments
 (0)