From 02a32da46b61a92fb460d9a9f30ece4cf1b7234c Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 15:10:49 +0530 Subject: [PATCH 1/6] Added: i18 packages --- package-lock.json | 80 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++ 2 files changed, 83 insertions(+) diff --git a/package-lock.json b/package-lock.json index d1b4570..65bad3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "i18next": "^21.6.5", + "i18next-browser-languagedetector": "^6.1.2", + "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", @@ -5237,6 +5240,14 @@ "node": ">=10" } }, + "node_modules/cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "dependencies": { + "node-fetch": "2.6.1" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -8006,6 +8017,30 @@ "node": ">=10.17.0" } }, + "node_modules/i18next": { + "version": "21.6.5", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.5.tgz", + "integrity": "sha512-1oimhzFEpkmxpY2yDyghdycyA1bCKrh9zf04qiB2HytKJCqlrA5e8JfL6KyK/oZvZABLP0GohsZ+tvhHmd+OTA==", + "dependencies": { + "@babel/runtime": "^7.12.0" + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz", + "integrity": "sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==", + "dependencies": { + "@babel/runtime": "^7.14.6" + } + }, + "node_modules/i18next-http-backend": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.3.1.tgz", + "integrity": "sha512-o79n4GBBRpl20hByC+ne/S1UaSZ4iGAn59Hu2TEZGjN0WLB72L7WrM39Cshziyrssp6MQfdI8wjToU2Q6kpSvA==", + "dependencies": { + "cross-fetch": "3.1.4" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -10914,6 +10949,14 @@ "tslib": "^2.0.3" } }, + "node_modules/node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", + "engines": { + "node": "4.x || >=6.0.0" + } + }, "node_modules/node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", @@ -19570,6 +19613,14 @@ "yaml": "^1.10.0" } }, + "cross-fetch": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.4.tgz", + "integrity": "sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==", + "requires": { + "node-fetch": "2.6.1" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -21575,6 +21626,30 @@ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz", "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==" }, + "i18next": { + "version": "21.6.5", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.5.tgz", + "integrity": "sha512-1oimhzFEpkmxpY2yDyghdycyA1bCKrh9zf04qiB2HytKJCqlrA5e8JfL6KyK/oZvZABLP0GohsZ+tvhHmd+OTA==", + "requires": { + "@babel/runtime": "^7.12.0" + } + }, + "i18next-browser-languagedetector": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz", + "integrity": "sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==", + "requires": { + "@babel/runtime": "^7.14.6" + } + }, + "i18next-http-backend": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-1.3.1.tgz", + "integrity": "sha512-o79n4GBBRpl20hByC+ne/S1UaSZ4iGAn59Hu2TEZGjN0WLB72L7WrM39Cshziyrssp6MQfdI8wjToU2Q6kpSvA==", + "requires": { + "cross-fetch": "3.1.4" + } + }, "iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -23669,6 +23744,11 @@ "tslib": "^2.0.3" } }, + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + }, "node-forge": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", diff --git a/package.json b/package.json index c8ede3d..d7a5e2c 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", + "i18next": "^21.6.5", + "i18next-browser-languagedetector": "^6.1.2", + "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", From 21cfa84e703e6f5c35810df867517efc464c1f18 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 16:02:12 +0530 Subject: [PATCH 2/6] Removed: testing component --- src/App.test.js | 8 -------- src/reportWebVitals.js | 13 ------------- src/setupTests.js | 5 ----- 3 files changed, 26 deletions(-) delete mode 100644 src/App.test.js delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; From fb3e7cf3bef2d749df164bf9414f2d4aa92dc418 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 16:02:23 +0530 Subject: [PATCH 3/6] Added: suspense loader --- src/index.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index 346f74c..1cee1b8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,19 +1,28 @@ -import React from 'react'; +import React, { Suspense } from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -// import reportWebVitals from './reportWebVitals'; +const loadingScreen = ( +
+

Loading...

+
+); ReactDOM.render( - + + + , document.getElementById('root') ); - -// // If you want to start measuring performance in your app, pass a function -// // to log results (for example: reportWebVitals(console.log)) -// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -// reportWebVitals(); From 5b31998c8bd59d6da2f89a55a5013fffb175e11c Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 16:02:55 +0530 Subject: [PATCH 4/6] Added: en translations json --- public/assets/locales/en/translations.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 public/assets/locales/en/translations.json diff --git a/public/assets/locales/en/translations.json b/public/assets/locales/en/translations.json new file mode 100644 index 0000000..81d12c5 --- /dev/null +++ b/public/assets/locales/en/translations.json @@ -0,0 +1,5 @@ +{ + "app_title": "Title", + "language": "Language", + "welcome_message": "Welcome" +} \ No newline at end of file From 65478a1622e3a3eadf6c821d345e7732f380f260 Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 17:42:07 +0530 Subject: [PATCH 5/6] Added: react-i18next --- package-lock.json | 62 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 63 insertions(+) diff --git a/package-lock.json b/package-lock.json index 65bad3d..65c3ffb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-i18next": "^11.15.3", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" } @@ -7891,6 +7892,14 @@ "node": ">=12" } }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "dependencies": { + "void-elements": "3.1.0" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -12993,6 +13002,28 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "node_modules/react-i18next": { + "version": "11.15.3", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz", + "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==", + "dependencies": { + "@babel/runtime": "^7.14.5", + "html-escaper": "^2.0.2", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 19.0.0", + "react": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -14915,6 +14946,14 @@ "node": ">= 0.8" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -21535,6 +21574,14 @@ "terser": "^5.10.0" } }, + "html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "requires": { + "void-elements": "3.1.0" + } + }, "html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -25102,6 +25149,16 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz", "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==" }, + "react-i18next": { + "version": "11.15.3", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.3.tgz", + "integrity": "sha512-RSUEM4So3Tu2JHV0JsZ5Yje+4nz66YViMfPZoywxOy0xyn3L7tE2CHvJ7Y9LUsrTU7vGmZ5bwb8PpjnkatdIxg==", + "requires": { + "@babel/runtime": "^7.14.5", + "html-escaper": "^2.0.2", + "html-parse-stringify": "^3.0.1" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26524,6 +26581,11 @@ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" }, + "void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=" + }, "w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index d7a5e2c..66bd393 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "i18next-http-backend": "^1.3.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-i18next": "^11.15.3", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" }, From 3af4fae1c592bb04f891f78a626698eb18d5adaf Mon Sep 17 00:00:00 2001 From: Llewellyn Dsouza Date: Wed, 5 Jan 2022 17:42:28 +0530 Subject: [PATCH 6/6] Added: i18next logic --- public/assets/locales/en/translation.json | 5 ++++ public/assets/locales/en/translations.json | 5 ---- src/App.js | 29 +++++++++++++++++++--- src/components/Test.js | 11 ++++++++ 4 files changed, 42 insertions(+), 8 deletions(-) create mode 100644 public/assets/locales/en/translation.json delete mode 100644 public/assets/locales/en/translations.json create mode 100644 src/components/Test.js diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json new file mode 100644 index 0000000..d891be5 --- /dev/null +++ b/public/assets/locales/en/translation.json @@ -0,0 +1,5 @@ +{ + "app_title": "Hey there", + "language": "Language", + "welcome_message": "Welcome with translations" +} diff --git a/public/assets/locales/en/translations.json b/public/assets/locales/en/translations.json deleted file mode 100644 index 81d12c5..0000000 --- a/public/assets/locales/en/translations.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "app_title": "Title", - "language": "Language", - "welcome_message": "Welcome" -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 729fff2..8403805 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,32 @@ +import i18next from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import HttpApi from 'i18next-http-backend'; +import LanguageDetector from 'i18next-browser-languagedetector'; +import Test from './components/Test'; + +i18next + .use(HttpApi) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + supportedLngs: ['en' /*, 'fr'*/], + fallbackLng: 'en', + debug: false, + // Options for language detector + detection: { + order: ['localStorage', 'sessionStorage', 'cookie', 'htmlTag'], + caches: ['localStorage'], + }, + // react: { useSuspense: false }, + backend: { + loadPath: '/assets/locales/{{lng}}/translation.json', + }, + }); + function App() { return (
-
- Hey there -
+
); } diff --git a/src/components/Test.js b/src/components/Test.js new file mode 100644 index 0000000..3fbd94e --- /dev/null +++ b/src/components/Test.js @@ -0,0 +1,11 @@ +import { useTranslation } from 'react-i18next'; + +export default function Test() { + const { t } = useTranslation(); + return ( + <> +

{t('app_title')}

+
{t('welcome_message')}
+ + ); +}