Skip to content

Commit ff7417c

Browse files
aranardaranard-thetradedeskterales
authored
feat: adding new scopeRangeRegex config to the custom framework (#926)
* Feat: Adding new namespaceMatchRegex config to the custom framework options * Empty commit to trigger CI --------- Co-authored-by: Amanda Ranard <amanda.ranard@thetradedesk.com> Co-authored-by: Alex Terehov <terales@users.noreply.github.com>
1 parent e25e1cd commit ff7417c

12 files changed

Lines changed: 205 additions & 2 deletions

File tree

‎examples/by-features/custom-scope-range/.vscode/i18n-ally-custom-framework.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
languageIds:
2+
- javascript
3+
- typescript
4+
- javascriptreact
5+
- typescriptreact
6+
scopeRangeRegex: "customScopeRangeFn\\(\\s*\\[?\\s*['\"`](.*?)['\"`]"
7+
monopoly: false

‎examples/by-features/custom-scope-range/.vscode/settings.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"i18n-ally.localesPaths": "public/locales",
3+
"i18n-ally.enabledFrameworks": ["react", "i18next", "custom"],
4+
"i18n-ally.namespace": true,
5+
"i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
6+
"i18n-ally.keystyle": "nested"
7+
}

‎examples/by-features/custom-scope-range/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "custom-scope-range",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"i18next": "20.3.0",
7+
"i18next-xhr-backend": "3.2.2",
8+
"react": "17.0.2",
9+
"react-dom": "17.0.2",
10+
"react-i18next": "11.9.0"
11+
}
12+
}

‎examples/by-features/custom-scope-range/public/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<title>React App</title>
8+
</head>
9+
<body>
10+
<noscript>
11+
You need to enable JavaScript to run this app.
12+
</noscript>
13+
<div id="root"></div>
14+
</body>
15+
</html>

‎examples/by-features/custom-scope-range/public/locales/en/pages/home.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"title": "Home"
3+
}

‎examples/by-features/custom-scope-range/public/locales/en/translation.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"title": "hello",
3+
"description": {
4+
"part1": "To get started, edit <1>src/App.js</1> and save to reload.",
5+
"part2": "Switch language between english and german using buttons above."
6+
},
7+
"titlew": "ok",
8+
"foo": {
9+
"bar": "foobar"
10+
}
11+
}

‎examples/by-features/custom-scope-range/src/App.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-header {
6+
background-color: #222;
7+
height: 100px;
8+
padding: 20px;
9+
color: white;
10+
}

‎examples/by-features/custom-scope-range/src/App.jsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/* eslint-disable no-undef */
2+
/* eslint-disable @typescript-eslint/no-unused-vars */
3+
/* eslint-disable no-unused-vars */
4+
// eslint-disable-next-line no-use-before-define
5+
import React from 'react'
6+
import { Trans } from 'react-i18next'
7+
import { customScopeRangeFn } from './customScopeRange'
8+
import './App.css'
9+
10+
// Component using the Trans component
11+
function MyComponent() {
12+
return (
13+
<Trans i18nKey="translation:description.part1">
14+
To get started, edit <code>src/App.js</code> and save to reload.
15+
</Trans>
16+
)
17+
}
18+
19+
// page uses the hook
20+
function Page() {
21+
const { t } = customScopeRangeFn()
22+
23+
return (
24+
<div className="App">
25+
<div className="App-intro">
26+
<MyComponent />
27+
</div>
28+
<div>{t('translation:description.part2')}</div>
29+
{/* plain <Trans>, #423 */}
30+
<Trans i18nKey="translation:description.part2">Fallback text</Trans>
31+
</div>
32+
)
33+
}
34+
35+
// function with scope
36+
function Page2() {
37+
const { t } = customScopeRangeFn(['translation:foo'])
38+
39+
// inside default namespace ("foo.bar")
40+
t('bar')
41+
42+
// explicit namespace
43+
t('pages.home:title')
44+
t('pages/home:title')
45+
}
46+
47+
// function with another scope
48+
function Page3() {
49+
const { t } = customScopeRangeFn('pages/home')
50+
51+
t('title')
52+
53+
// explicit namespace
54+
t('translation:title')
55+
}
56+
57+
// function with scope in options
58+
function Page4() {
59+
const { t } = customScopeRangeFn('pages/home')
60+
61+
t('title')
62+
63+
// explicit namespace
64+
t('title', { ns: 'translation' })
65+
}
66+
67+
// component with scope in props
68+
function Page5() {
69+
const { t } = customScopeRangeFn('pages/home')
70+
71+
return (
72+
<div className="App">
73+
<Trans t={t} i18nKey="title"></Trans>
74+
{/* explicit namespace */}
75+
<Trans t={t} i18nKey="title" ns="translation"></Trans>
76+
</div>
77+
)
78+
}

‎examples/by-features/custom-scope-range/src/customScopeRange.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { useTranslation as customScopeRangeFn } from 'react-i18next'

‎examples/by-features/custom-scope-range/src/i18n.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import React from 'react'
3+
import i18n from 'i18next'
4+
import { initReactI18next } from 'react-i18next'
5+
6+
i18n
7+
.use(Backend)
8+
.use(initReactI18next)
9+
.init({
10+
fallbackLng: 'en',
11+
debug: true,
12+
13+
interpolation: {
14+
escapeValue: false, // not needed for react as it escapes by default
15+
},
16+
})
17+
18+
export default i18n

0 commit comments

Comments
 (0)