Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0ac9e09

Browse files
gregbergegregberge
committed
feat: add i18n helpers
- New method `formatLangUrl(location, lang)` to format a URL to a specific lang BREAKING CHANGE: - `useLang` is now exported from `smooth/i18n` - `lang`, `history`, `location`, `match` are no longer forwarded to a page, use `useLang` and `useRouter` to get these informations
1 parent 60a67ba commit 0ac9e09

File tree

13 files changed

+58
-57
lines changed

13 files changed

+58
-57
lines changed

‎packages/smooth/page.js renamed to ‎packages/smooth/i18n.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
/* eslint-disable import/no-unresolved */
2-
module.exports = require('./lib/page')
2+
module.exports = require('./lib/i18n')

‎packages/smooth/src/client/ErrorBoundary.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default class ErrorBoundary extends React.Component {
1717
if (error) {
1818
return (
1919
<Status code={error.statusCode || 500}>
20-
<ErrorPage lang={this.props.lang || null} error={error} />
20+
<ErrorPage error={error} />
2121
</Status>
2222
)
2323
}

‎packages/smooth/src/client/Root.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,21 @@ import Routes from './Routes'
44
import ErrorBoundary from './ErrorBoundary'
55
import { useError } from './ErrorContext'
66
import { HiddenHistoryProvider } from '../router/HiddenHistory'
7+
import { I18nContextProvider } from '../i18n/I18nContext'
8+
import { i18nRootPath } from '../i18n/Route'
79

810
export default function Root() {
911
const error = useError()
1012
return (
1113
<HiddenHistoryProvider>
1214
<Route
13-
path="/:lang(.{2})?"
15+
path={i18nRootPath}
1416
render={routeProps => (
15-
<ErrorBoundary lang={routeProps.match.params.lang} error={error}>
16-
<Routes {...routeProps} />
17-
</ErrorBoundary>
17+
<I18nContextProvider lang={routeProps.match.params.lang || null}>
18+
<ErrorBoundary error={error}>
19+
<Routes {...routeProps} />
20+
</ErrorBoundary>
21+
</I18nContextProvider>
1822
)}
1923
/>
2024
</HiddenHistoryProvider>

‎packages/smooth/src/client/Routes.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@ import { HiddenRouter } from '../router/HiddenRouter'
55

66
const pages = getPages()
77

8-
export default function Routes({
9-
match: {
10-
url,
11-
params: { lang = null },
12-
},
13-
}) {
8+
export default function Routes({ match: { url } }) {
149
const routes = (
1510
<Switch>
1611
{pages.map((page, index) => (
@@ -19,7 +14,6 @@ export default function Routes({
1914
path={`${url}${page.routePath}`.replace(/\/\//, '/')}
2015
render={({ history, match, location }) => (
2116
<Page
22-
lang={lang}
2317
indexUrl={`${url}${page.indexPath}`}
2418
page={page}
2519
history={history}

‎packages/smooth/src/content/Query.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import camelcase from 'camelcase'
33
import gql from 'graphql-tag'
44
import { Redirect, useRouter } from '../router'
5-
import { usePageContext } from '../page/PageContext'
5+
import { usePage } from '../page/PageContext'
66
import { HTTPError } from '../router/HTTPError'
77
import { onSelectContentFields } from '../plugin/browserHooks'
88
import { Query as BaseQuery } from '../query/Query'
@@ -52,7 +52,7 @@ function Handler({ children, ...props }) {
5252
}
5353

5454
export function Query({ children }) {
55-
const { page } = usePageContext()
55+
const page = usePage()
5656
const { location } = useRouter()
5757

5858
if (page.slug === 'index') {

‎packages/smooth/src/i18n/I18nContext.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
const I18nContext = React.createContext({ lang: null })
4+
5+
export function I18nContextProvider({ lang, children }) {
6+
const value = React.useMemo(() => ({ lang }), [lang])
7+
return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
8+
}
9+
10+
export function useLang() {
11+
const { lang } = React.useContext(I18nContext)
12+
return lang
13+
}

‎packages/smooth/src/i18n/Route.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const i18nRootPath = '/:lang(.{2})?'
2+
const LANG_REGEXP = new RegExp(`^/.{2}(/.*)`)
3+
4+
function locationToString(location) {
5+
if (typeof location === 'string') return location
6+
const { pathname = '', search = '', hash = '' } = location
7+
return `${pathname}${search}${hash}`
8+
}
9+
10+
export function formatLangUrl(location, lang) {
11+
const url = locationToString(location)
12+
const matches = url.match(LANG_REGEXP)
13+
const prefix = lang ? `/${lang}` : ''
14+
if (!matches) return `${prefix}${url}`
15+
return `${prefix}${matches[1]}`
16+
}

‎packages/smooth/src/i18n/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { useLang } from './I18nContext'
2+
export { formatLangUrl } from './Route'

‎packages/smooth/src/page/Page.js

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,7 @@ function usePageRef(page) {
102102
return useRef({ ...page })
103103
}
104104

105-
export default function Page({
106-
page,
107-
lang,
108-
indexUrl,
109-
history,
110-
match,
111-
location,
112-
}) {
105+
export default function Page({ page, indexUrl, history, match, location }) {
113106
const pageRef = usePageRef(page)
114107
const unpause = usePause()
115108
return (
@@ -124,13 +117,7 @@ export default function Page({
124117
location,
125118
})
126119

127-
const pageContext = {
128-
lang,
129-
page: pageRef.current,
130-
history,
131-
match,
132-
location,
133-
}
120+
const pageContext = { page: pageRef.current }
134121

135122
return (
136123
<PageContextProvider context={pageContext}>

‎packages/smooth/src/page/PageContext.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
import React, { useContext, useMemo } from 'react'
22

3-
const PageContext = React.createContext({
4-
lang: null,
5-
page: null,
6-
history: null,
7-
match: null,
8-
location: null,
9-
})
3+
const PageContext = React.createContext({ page: null })
104

115
export function PageContextProvider({ context, children }) {
126
// eslint-disable-next-line
13-
const value = useMemo(() => context, [context.lang, context.match])
7+
const value = useMemo(() => context, [context.match])
148
return <PageContext.Provider value={value}>{children}</PageContext.Provider>
159
}
1610

1711
export default PageContext
1812

19-
export function usePageContext() {
20-
return useContext(PageContext)
21-
}
22-
23-
export function useLang() {
24-
const { lang } = useContext(PageContext)
25-
return lang
13+
export function usePage() {
14+
const { page } = useContext(PageContext)
15+
return page
2616
}

0 commit comments

Comments
 (0)