Skip to content

Commit 6f60a22

Browse files
longlholonglho
authoredSep 1, 2020
fix: fix hashing algo and locale value hydration (#16692)
- Fix hashing algo for extraction so it's the same as babel config - Fix locale persistence issue fix #16689
·
@vercel/devlow-bench@0.3.4v9.5.3-canary.26
1 parent f1c4cb8 commit 6f60a22

File tree

6 files changed

+63
-13
lines changed

6 files changed

+63
-13
lines changed
 

‎examples/with-react-intl/lang/en.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"11754": "An example app integrating React Intl with Next.js",
3-
"65a8e": "Hello, World!",
4-
"8cf04": "Home",
5-
"8f7f4": "About",
6-
"9c817": "React Intl Next.js Example"
2+
"AvQcw8": "React Intl Next.js Example",
3+
"N015Sp": "Hello, World!",
4+
"ejEGdx": "Home",
5+
"fnfXnF": "An example app integrating React Intl with Next.js",
6+
"g5pX+a": "About"
77
}

‎examples/with-react-intl/lang/fr.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"11754": "Un exemple d'application intégrant React Intl avec Next.js",
3-
"65a8e": "Bonjour le monde!",
4-
"8cf04": "Accueil",
5-
"8f7f4": "À propos de nous",
6-
"9c817": "React Intl Next.js Exemple"
2+
"AvQcw8": "Un exemple d'application intégrant React Intl avec Next.js",
3+
"N015Sp": "Bonjour le monde!",
4+
"ejEGdx": "Accueil",
5+
"fnfXnF": "À propos de nous",
6+
"g5pX+a": "React Intl Next.js Exemple"
77
}

‎examples/with-react-intl/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"scripts": {
55
"dev": "cross-env NODE_ICU_DATA=node_modules/full-icu ts-node --project tsconfig.server.json server.ts",
66
"build": "npm run extract:i18n && npm run compile:i18n && next build && tsc -p tsconfig.server.json",
7-
"extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --out-file lang/en.json",
7+
"extract:i18n": "formatjs extract '{pages,components}/*.{js,ts,tsx}' --format simple --id-interpolation-pattern '[sha512:contenthash:base64:6]' --out-file lang/en.json",
88
"compile:i18n": "formatjs compile-folder --ast --format simple lang/ compiled-lang/",
99
"start": "cross-env NODE_ENV=production NODE_ICU_DATA=node_modules/full-icu node dist/server"
1010
},

‎examples/with-react-intl/pages/_app.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const getInitialProps: typeof App.getInitialProps = async appContext => {
2727
const {
2828
ctx: {req},
2929
} = appContext;
30-
const locale = (req as any)?.locale ?? 'en';
30+
const locale = (req as any)?.locale || (window as any).LOCALE || 'en';
3131

3232
const [appProps, messages] = await Promise.all([
3333
polyfill(locale),

‎examples/with-react-intl/pages/_document.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Document, {
2+
Html,
3+
Head,
4+
Main,
5+
NextScript,
6+
DocumentContext,
7+
} from 'next/document';
8+
9+
interface Props {
10+
locale: string;
11+
lang: string;
12+
nonce: string;
13+
}
14+
15+
class MyDocument extends Document<Props> {
16+
static async getInitialProps(ctx: DocumentContext) {
17+
const {req} = ctx;
18+
const initialProps = await Document.getInitialProps(ctx);
19+
return {
20+
...initialProps,
21+
locale: (req as any).locale || 'en',
22+
lang: ((req as any).locale || 'en').split('-')[0],
23+
nonce: (req as any).nonce,
24+
};
25+
}
26+
27+
render() {
28+
return (
29+
<Html lang={this.props.lang}>
30+
<Head />
31+
<body>
32+
<script
33+
nonce={this.props.nonce}
34+
dangerouslySetInnerHTML={{
35+
__html: `window.LOCALE="${this.props.locale}"`,
36+
}}
37+
></script>
38+
<Main />
39+
<NextScript />
40+
</body>
41+
</Html>
42+
);
43+
}
44+
}
45+
46+
export default MyDocument;

‎examples/with-react-intl/server.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {createServer} from 'http';
44
import accepts from 'accepts';
55
import next from 'next';
66
import {polyfill} from './polyfills';
7+
import crypto from 'crypto';
78
// Get the supported languages by looking for translations in the `lang/` dir.
89
const supportedLanguages = globSync('./compiled-lang/*.json').map(f =>
910
basename(f, '.json')
@@ -21,7 +22,10 @@ Promise.all([app.prepare(), ...SUPPORTED_LOCALES.map(polyfill)]).then(() => {
2122
const accept = accepts(req);
2223
const locale = accept.language(supportedLanguages) || 'en';
2324
(req as any).locale = locale;
24-
25+
const nonce = crypto.randomBytes(20).toString('hex');
26+
(req as any).nonce = nonce;
27+
// TODO: This will blow up other next inline JS but next.js should prob fix this
28+
// res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}'`);
2529
handle(req, res);
2630
}).listen(port, () => {
2731
console.log(`> Ready on http://localhost:${port}`);

0 commit comments

Comments
 (0)
Please sign in to comment.