diff --git a/examples/with-typescript/locales/en/common.json b/examples/with-typescript/locales/en/common.json new file mode 100644 index 0000000..9e26dfe --- /dev/null +++ b/examples/with-typescript/locales/en/common.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/examples/with-typescript/locales/fr/common.json b/examples/with-typescript/locales/fr/common.json new file mode 100644 index 0000000..77c7250 --- /dev/null +++ b/examples/with-typescript/locales/fr/common.json @@ -0,0 +1,3 @@ +{ + "welcome": "Bienvenue" +} \ No newline at end of file diff --git a/examples/with-typescript/next.config.js b/examples/with-typescript/next.config.js index 39a3fe4..36f5b22 100644 --- a/examples/with-typescript/next.config.js +++ b/examples/with-typescript/next.config.js @@ -1,11 +1,13 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ /** @type {import('next').NextConfig} */ + const config = { reactStrictMode: true, swcMinify: true, i18n: { locales: ["en", "fr"], defaultLocale: "en", - } -} + }, +}; -module.exports = config +module.exports = config; diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json index 02386ce..af08078 100644 --- a/examples/with-typescript/package.json +++ b/examples/with-typescript/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@onruntime/next-usetranslation": "^0.1.10", "next": "12.2.5", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx index 010da36..4bb2d7e 100644 --- a/examples/with-typescript/pages/index.tsx +++ b/examples/with-typescript/pages/index.tsx @@ -2,11 +2,10 @@ import type { NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; import styles from "../styles/Home.module.css"; -import useTranslation from "../../../src"; +import useTranslation from "@onruntime/next-usetranslation"; const Home: NextPage = () => { - const { locale } = useTranslation(); - console.log("locale", locale); + const { t } = useTranslation(); return (
@@ -16,9 +15,7 @@ const Home: NextPage = () => {
-

- Welcome to Next.js! -

+

{t("welcome")}

{"Get started by editing "} diff --git a/examples/with-typescript/yarn.lock b/examples/with-typescript/yarn.lock index 620d12c..d862697 100644 --- a/examples/with-typescript/yarn.lock +++ b/examples/with-typescript/yarn.lock @@ -149,6 +149,11 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@onruntime/next-usetranslation@^0.1.10": + version "0.1.10" + resolved "https://registry.yarnpkg.com/@onruntime/next-usetranslation/-/next-usetranslation-0.1.10.tgz#806a1f71dc348ed8e1a954f8aa2074ad33e55057" + integrity sha512-FM6rHl+wEhS8acZ+CHTfl3gV/dswrDjXobaYGG1Pzl1uldZyMORPsy3FJIjgWukTNS5l87SsaxdmsvOiVzngHA== + "@rushstack/eslint-patch@^1.1.3": version "1.1.4" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27" diff --git a/package.json b/package.json index 6b30277..48dc944 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.0", + "version": "0.1.10", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", @@ -60,6 +60,7 @@ "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.30.1", + "eslint-plugin-react-hooks": "^4.6.0", "husky": "^8.0.1", "next": "^12.2.5", "prettier": "^2.7.1", diff --git a/src/hooks/useTranslations.ts b/src/hooks/useTranslations.ts new file mode 100644 index 0000000..11691f9 --- /dev/null +++ b/src/hooks/useTranslations.ts @@ -0,0 +1,77 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +import { useRouter } from "next/router"; + +const useTranslation = (namespace = "common", keySplit = true) => { + const router = useRouter(); + const { locale, locales } = router; + let translation: any; + + if (!translation) { + try { + translation = require(`../../../../locales/${locale}/${namespace}.json`); + } catch (error) { + // An error occurred while loading the translation file without src + } + } + + if (!translation) { + try { + translation = require(`../../../../src/locales/${locale}/${namespace}.json`); + } catch (error) { + // An error occurred while loading the translation file with src + } + } + + // Try to get the fallback translation + + if (!translation) { + try { + translation = require(`../../../../locales/${ + locales && locales.length > 0 ? locales[0] : "en" + }/${namespace}.json`); + } catch (err) { + // An error occurred while loading the fallback translation file without src + } + } + + if (!translation) { + try { + translation = require(`../../../../src/locales/${ + locales && locales.length > 0 ? locales[0] : "en" + }/${namespace}.json`); + } catch (err) { + // An error occurred while loading the fallback translation file with src + } + } + + // If no translation was found, console an error + + if (!translation) { + console.error( + `An error occurred while loading the translation file for namespace ${namespace} and locale ${locale}` + ); + } + + const translate = (key: string, variables: string[] = []) => { + const keyList = keySplit ? key.split(".") : [key]; + let parent = translation; + keyList.forEach((k) => (parent = parent[k] ?? key)); + + /* + * parent can countain %s1, %s2, ... + * variables can contain "value1", "value2", ... + * we replace the %s1, %s2, ... with the corresponding value + */ + if (parent && variables.length > 0) { + parent = parent.replace( + /%s(\d+)/g, + (_: any, index: any) => variables[parseInt(index) - 1] ?? undefined + ); + } + return parent || key; + }; + + return { t: translate, locale }; +}; + +export default useTranslation; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..2a6c479 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,3 @@ +import useTranslation from "./hooks/useTranslations"; + +export default useTranslation; diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 4aa7635..0000000 --- a/src/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useRouter } from "next/router"; - -const useTranslation = () => { - const router = useRouter(); - const { locale } = router; - return { locale }; -}; - -export default useTranslation; diff --git a/yarn.lock b/yarn.lock index 4bd9b9e..b2c03d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3082,7 +3082,7 @@ eslint-plugin-react-hooks@^2.2.0: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz#4ef5930592588ce171abeb26f400c7fbcbc23cd0" integrity sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g== -eslint-plugin-react-hooks@^4.5.0: +eslint-plugin-react-hooks@^4.5.0, eslint-plugin-react-hooks@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==