react-i18n: Use I18n instances in context #39624

sirreal · 2020-02-24T11:30:16Z

✅ ~~Let's wait on #41207~~

Use instances of @wordpress/i18n to manage reactive i18n: WordPress/gutenberg#20318

TO DO:

We have code that depends on getting the locale. We may need to restore it.

wp-calypso/client/landing/gutenboarding/components/header/index.tsx

Line 37 in d9b9247

const { __, i18nLocale } = useI18n();

wp-calypso/client/landing/gutenboarding/components/header/index.tsx

Line 51 in d9b9247

    
           const allSuggestions = useDomainSuggestions( { searchOverride: siteTitle, locale: i18nLocale } );

Testing

Test with DEMO: Use wp-i18n instances #39627 (instructions there)
Test /new routes and make sure they work as expected.
Confirm that sites are created with the appropriate language from /new! Try different user locales and locales via URL + incognito.

matticbot · 2020-02-24T11:30:20Z

Test live: https://calypso.live/?branch=update/react-i18n-instances

matticbot · 2020-02-24T11:40:17Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~34 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       +116 B  (+0.0%)      +34 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

sirreal · 2020-02-24T14:52:48Z

I've requested review in order to get early feedback as WordPress/gutenberg#20318 seems likely to move ahead with minimal changes.

sirreal · 2020-02-24T14:53:20Z

packages/react-i18n/src/i18n-locale.js

@@ -0,0 +1,157 @@
+/* eslint-disable */


This is duplicated from the upstream PR. It would come from the package and not exist here.

packages/react-i18n/src/index.tsx

sirreal · 2020-02-25T13:23:03Z

I've updated this with changes here removing i18nLocale from the context which seems like a good refinement of the API.

Merged to #39627 for testing.

The typecheck-strict failure can be ignored for now.

packages/react-i18n/README.md

sirreal · 2020-05-22T11:55:08Z

I've updated this and #39627. We know have a version of @wordpress/i18n that provides instances, so they can be used with our react-i18n library.

I'd love to get some feedback on this now, in particular @jsnajdr 🙂

client/landing/gutenboarding/index.tsx

packages/react-i18n/src/index.tsx

sirreal · 2020-05-27T15:26:21Z

packages/react-i18n/src/index.tsx

+		_nx: i18n._nx.bind( i18n ),
+		_x: i18n._x.bind( i18n ),
+		isRTL: i18n.isRTL.bind( i18n ),
+		i18nLocale,


This may be very WordPress.com specific. I had an implementation that doesn't provide i18nLocale, but this property is already used in Gutenboarding.

sirreal · 2020-05-27T16:07:02Z

Switched to use useMemo over memize.

Rebased.

#39627 is also updated.

commit 60dc646 Author: Jon Surrell <jon.surrell@automattic.com> Date: Wed May 27 18:04:53 2020 +0200 Add declarationMap commit b388052 Author: Jon Surrell <jon.surrell@automattic.com> Date: Wed May 27 18:03:21 2020 +0200 Remove memize dep commit df6b9b2 Author: Jon Surrell <jon.surrell@automattic.com> Date: Wed May 27 17:56:32 2020 +0200 Use useMemo over memize commit 68b41e8 Author: Jon Surrell <jon.surrell@automattic.com> Date: Wed May 27 17:50:55 2020 +0200 Add `i18nLocale` to README commit 78df4e5 Author: Jon Surrell <jon.surrell@automattic.com> Date: Tue May 26 13:08:29 2020 +0200 Use localeData over locale commit c4ac3a3 Author: Jon Surrell <jon.surrell@automattic.com> Date: Fri May 22 13:41:08 2020 +0200 Revert tsconfig change commit 9a68361 Author: Jon Surrell <jon.surrell@automattic.com> Date: Fri May 22 13:30:09 2020 +0200 Use i18nLocale property name commit a5c49e3 Author: Jon Surrell <jon.surrell@automattic.com> Date: Fri May 22 12:44:26 2020 +0200 Add localeSlug from i18n data commit 2c16fe6 Author: Jon Surrell <jon.surrell@automattic.com> Date: Thu May 21 17:09:36 2020 +0200 Add isRTL commit 2695e21 Author: Jon Surrell <jon.surrell@automattic.com> Date: Thu May 21 17:07:32 2020 +0200 Replace with packaged i18n commit 548d17e Author: Jon Surrell <jon.surrell@automattic.com> Date: Wed Feb 26 14:13:22 2020 +0100 Add README commit 2622d26 Author: Jon Surrell <jon.surrell@automattic.com> Date: Mon Feb 24 12:28:13 2020 +0100 Use i18n instances commit 476039f Author: Jon Surrell <jon.surrell@automattic.com> Date: Mon Apr 20 15:12:48 2020 +0200 Upgrade @wordpress/i18n

jsnajdr

Looks good, thanks so much for getting this implemented! 👍

sirreal added [Status] In Progress i18n DO NOT MERGE Packages labels Feb 24, 2020

sirreal self-assigned this Feb 24, 2020

sirreal force-pushed the update/react-i18n-instances branch from a20d977 to 19b45ee Compare February 24, 2020 13:53

sirreal mentioned this pull request Feb 24, 2020

DEMO: Use wp-i18n instances #39627

Closed

sirreal requested review from jsnajdr and jameslnewell February 24, 2020 14:51

sirreal commented Feb 24, 2020

View reviewed changes

sirreal requested a review from a team February 24, 2020 16:21

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] In Progress labels Feb 24, 2020

jameslnewell reviewed Feb 24, 2020

View reviewed changes

packages/react-i18n/src/index.tsx Outdated Show resolved Hide resolved

jameslnewell reviewed Feb 24, 2020

View reviewed changes

packages/react-i18n/src/index.tsx Show resolved Hide resolved

sirreal commented Feb 26, 2020

View reviewed changes

packages/react-i18n/README.md Show resolved Hide resolved

sirreal mentioned this pull request Feb 26, 2020

i18n: add support for multiple instances and reactivity to the i18n library WordPress/gutenberg#19210

Closed

sirreal force-pushed the update/react-i18n-instances branch from 5fff854 to 7553179 Compare March 11, 2020 20:20

sirreal force-pushed the update/react-i18n-instances branch from 7553179 to 789f2c5 Compare April 20, 2020 13:17

sirreal requested a review from a team as a code owner April 20, 2020 13:17

sirreal added the [Status] Blocked / Hold label Apr 20, 2020

sirreal mentioned this pull request Apr 20, 2020

fix(deps): update wordpress monorepo #41207

Merged

1 task

sirreal force-pushed the update/react-i18n-instances branch from 789f2c5 to 6982859 Compare May 21, 2020 15:10

sirreal marked this pull request as draft May 22, 2020 10:06

sirreal marked this pull request as ready for review May 22, 2020 11:47

sirreal commented May 22, 2020

View reviewed changes

packages/react-i18n/README.md Show resolved Hide resolved

sirreal force-pushed the update/react-i18n-instances branch from 3c979b8 to cb93751 Compare May 26, 2020 11:08

jsnajdr reviewed May 27, 2020

View reviewed changes

client/landing/gutenboarding/index.tsx Show resolved Hide resolved

packages/react-i18n/src/index.tsx Outdated Show resolved Hide resolved

sirreal commented May 27, 2020

View reviewed changes

sirreal added 13 commits May 27, 2020 17:59

Upgrade @wordpress/i18n

476039f

Use i18n instances

2622d26

Add README

548d17e

Replace with packaged i18n

2695e21

Add isRTL

2c16fe6

Add localeSlug from i18n data

a5c49e3

Use i18nLocale property name

9a68361

Revert tsconfig change

c4ac3a3

Use localeData over locale

78df4e5

Add i18nLocale to README

68b41e8

Use useMemo over memize

df6b9b2

Remove memize dep

b388052

Add declarationMap

60dc646

sirreal force-pushed the update/react-i18n-instances branch from 5ccde36 to 60dc646 Compare May 27, 2020 16:05

jsnajdr approved these changes May 28, 2020

View reviewed changes

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels May 28, 2020

sirreal merged commit a01cadb into master May 28, 2020

sirreal deleted the update/react-i18n-instances branch May 28, 2020 11:30

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 28, 2020

roo2 mentioned this pull request Jun 24, 2020

Fix chunked translations in the /new flow #43609

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-i18n: Use I18n instances in context #39624

react-i18n: Use I18n instances in context #39624

sirreal commented Feb 24, 2020 •

edited

Loading

matticbot commented Feb 24, 2020

matticbot commented Feb 24, 2020 •

edited

Loading

sirreal commented Feb 24, 2020

sirreal Feb 24, 2020

sirreal commented Feb 25, 2020 •

edited

Loading

sirreal commented May 22, 2020

sirreal May 27, 2020

sirreal commented May 27, 2020 •

edited

Loading

jsnajdr left a comment

react-i18n: Use I18n instances in context #39624

react-i18n: Use I18n instances in context #39624

Conversation

sirreal commented Feb 24, 2020 • edited Loading

Testing

matticbot commented Feb 24, 2020

matticbot commented Feb 24, 2020 • edited Loading

sirreal commented Feb 24, 2020

sirreal Feb 24, 2020

Choose a reason for hiding this comment

sirreal commented Feb 25, 2020 • edited Loading

sirreal commented May 22, 2020

sirreal May 27, 2020

Choose a reason for hiding this comment

sirreal commented May 27, 2020 • edited Loading

jsnajdr left a comment

Choose a reason for hiding this comment

sirreal commented Feb 24, 2020 •

edited

Loading

matticbot commented Feb 24, 2020 •

edited

Loading

sirreal commented Feb 25, 2020 •

edited

Loading

sirreal commented May 27, 2020 •

edited

Loading