Add build plugins to optimize translated strings for unsupported languages #4838

devongovett · 2023-07-28T01:11:59Z

This adds build plugins for popular build tools including Parcel, webpack, esbuild, vite, etc. to optimize React Aria and React Spectrum so that only translated strings for languages that your app supports are included in your bundle. We support over 30 languages, but not all apps need all of these, so they can add unnecessary bundle size.

I explored many different ways of allowing developers to manually import the localized strings for languages they support, but this was just too complicated. Ensuring that strings are imported in the right places along side every import of a component (so code splitting works), and not imported too early (e.g. all components in the root of the app) would be very complicated and brittle. In addition, our components often depend on other components or hooks with their own translations internally, and developers would also need to import those.

This approach is much simpler. We move all of our compiled translations to separate files in each published package's dist directory, but still import all of them. With no other changes, the behavior would remain the same - all locales are included by default. However, since they are in separate files, we can provide build plugins to automatically detect and remove files for languages that aren't supported by an app.

The RAC tailwind example is ~23% smaller when it includes only en-US, and the rsp-next-ts example is 20% smaller.

See #5084 for followup work that was included with this to allow including only the language requested during SSR.

…uages

devongovett · 2023-07-28T01:13:11Z

patches/@parcel+bundler-default+2.9.1.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@parcel/bundler-default/lib/DefaultBundler.js b/node_modules/@parcel/bundler-default/lib/DefaultBundler.js


These patches will go away once parcel-bundler/parcel#9156 is merged and released.

rspbot · 2023-07-28T18:03:04Z

Build successful! 🎉

rspbot · 2023-07-28T18:08:49Z

Build successful! 🎉

…locales

rspbot · 2023-09-15T18:59:00Z

Build successful! 🎉

rspbot · 2023-09-15T19:05:36Z

Build successful! 🎉

LFDanLu

The approach looks good to me and I verified that the nextJS size dropped as a result of this:

new: https://reactspectrum.blob.core.windows.net/reactspectrum/2a7211d8cb686fe810cb4838c67802dce3aa8eab/verdaccio/publish-stats/next-build-stats.txt

old: https://reactspectrum.blob.core.windows.net/reactspectrum/6855a5328b9349f6b4f8bdb45cbde960586543f5/verdaccio/publish-stats/next-build-stats.txt

will approve after #5084 is merged in and the circle config is reverted. Might be nice to run verdaccio with the SSR injection happening as well just to verify the work done

snowystinger

lgtm

rspbot · 2023-10-19T02:56:34Z

Build successful! 🎉

rspbot · 2023-10-19T03:02:04Z

Build successful! 🎉

rspbot · 2023-10-19T20:36:12Z

Build successful! 🎉

rspbot · 2023-10-19T20:42:03Z

Build successful! 🎉

snowystinger · 2023-10-26T22:00:29Z

.circleci/config.yml

-          filters:
-            branches:
-              only: main
+          # filters:


this should be uncommented?

rspbot · 2023-10-26T22:12:02Z

Build successful! 🎉

rspbot · 2023-10-26T22:19:52Z

Build successful! 🎉

…locales # Conflicts: # packages/@adobe/react-spectrum/package.json # packages/@react-aria/datepicker/src/useDateRangePicker.ts # packages/@react-spectrum/button/src/Button.tsx # packages/@react-spectrum/picker/src/Picker.tsx # packages/react-aria-components/package.json # packages/react-aria/package.json # patches/@parcel+packager-js+2.10.2.patch # yarn.lock

rspbot · 2023-11-27T20:25:56Z

Build successful! 🎉

…locales

rspbot · 2023-11-29T17:00:15Z

Build successful! 🎉

rspbot · 2023-11-29T17:04:51Z

Build successful! 🎉

rspbot · 2023-11-29T17:08:29Z

Build successful! 🎉

rspbot · 2023-11-29T17:12:25Z

Build successful! 🎉

…locales

rspbot · 2023-11-29T19:27:34Z

Build successful! 🎉

rspbot · 2023-11-29T19:29:29Z

Build successful! 🎉

rspbot · 2023-11-29T19:34:56Z

Build successful! 🎉

rspbot · 2023-11-30T22:37:04Z

Build successful! 🎉

LFDanLu · 2023-11-30T22:28:24Z

packages/dev/docs/pages/react-aria/ssr.mdx

@@ -48,6 +50,204 @@ function App() {

 See the [internationalization docs](internationalization.html) for more information about i18n in React Aria.



I think a note mentioning this caveat near the beginning of the "Optimizing bundle size" would be helpful section.

LFDanLu · 2023-11-30T22:38:45Z

packages/dev/docs/pages/react-aria/ssr.mdx

+#### Remix
+
+Remix is supported [when using Vite](https://remix.run/docs/en/main/future/vite) for builds. First, install `@react-aria/optimize-locales-plugin` with your package manager. Then, add the following to your `vite.config.ts`:


Mind adding a note here that LocalizedStringProvider isn't used here? Wasn't sure if the first two steps at the beginning of the "optimizing bundle size" were implicitly included here or not

rspbot · 2023-12-02T00:03:05Z

Build successful! 🎉

rspbot · 2023-12-02T00:12:03Z

Build successful! 🎉

rspbot · 2023-12-02T00:12:05Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@internationalized/string

LocalizedStringDictionary

changed by:

LocalizedStringDictionary

 LocalizedStringDictionary<K extends string = string, T extends LocalizedString = string> {
   constructor: (LocalizedStrings<string, LocalizedString>, string) => void
+  getGlobalDictionaryForPackage: (string) => LocalizedStringDictionary<string, LocalizedString> | null
   getStringForLocale: (string, string) => LocalizedString
+  getStringsForLocale: (string) => Record<string, LocalizedString>
 }

it changed:

LocalizedStringDictionary

@react-aria/i18n

useLocalizedStringFormatter

 useLocalizedStringFormatter<K extends string = string, T extends LocalizedString = string> {
   strings: LocalizedStrings<K, T>
+  packageName?: string
   returnVal: undefined
 }

useLocalizedStringDictionary

-
+useLocalizedStringDictionary<K extends string = string, T extends LocalizedString = string> {
+  strings: LocalizedStrings<K, T>
+  packageName?: string
+  returnVal: undefined
+}

Add build plugins to optimize translated strings for unsupported lang…

16af03c

…uages

devongovett commented Jul 28, 2023

View reviewed changes

devongovett added 3 commits July 27, 2023 18:17

move

6e282dc

run verdaccio

a801ca9

Build esm

2a7211d

devongovett added 2 commits September 9, 2023 16:52

Merge branch 'main' of github.com:adobe/react-spectrum into optimize-…

9de7851

…locales

Merge branch 'main' of github.com:adobe/react-spectrum into optimize-…

636a599

…locales

devongovett mentioned this pull request Sep 15, 2023

Add LocalizedStringProvider to inject i18n strings during SSR #5084

Merged

devongovett marked this pull request as ready for review September 21, 2023 19:39

LFDanLu reviewed Sep 22, 2023

View reviewed changes

snowystinger reviewed Sep 22, 2023

View reviewed changes

Merge branch 'main' into optimize-locales

050931a

Merge branch 'main' into optimize-locales

a0f4a82

Add LocalizedStringProvider to inject i18n strings during SSR (#5084)

af9c1b4

snowystinger reviewed Oct 26, 2023

View reviewed changes

.circleci/config.yml Outdated

filters:

branches:

only: main

# filters:

Copy link

Member

snowystinger Oct 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be uncommented?

devongovett added 2 commits November 27, 2023 10:21

centralize some logic

b26aab7

devongovett added 2 commits November 27, 2023 14:09

fix esm build script

db4469e

Merge branch 'main' of github.com:adobe/react-spectrum into optimize-…

df46bc5

…locales

fix intl build

93826d2

devongovett added 8 commits November 29, 2023 09:15

typo

a7b3412

Add a function to create a dictionary with a subset of components

91ea871

Update RSP docs

55c5f48

Merge branch 'main' of github.com:adobe/react-spectrum into optimize-…

18c42cf

…locales

Add Next.js app dir and Remix examples for testing

44bfc28

add a test

1e5dd96

revert circleci changes

47c8aef

delete massive yarn lock

d609e17

Merge branch 'main' into optimize-locales

8a02029

LFDanLu reviewed Nov 30, 2023

View reviewed changes

snowystinger previously approved these changes Nov 30, 2023

View reviewed changes

Merge branch 'main' into optimize-locales

d67c426

devongovett dismissed snowystinger’s stale review via d67c426 December 1, 2023 23:53

minor copy updates

f0d4ed1

LFDanLu approved these changes Dec 2, 2023

View reviewed changes

snowystinger approved these changes Dec 2, 2023

View reviewed changes

devongovett merged commit ee403ec into main Dec 2, 2023
26 checks passed

devongovett deleted the optimize-locales branch December 2, 2023 00:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add build plugins to optimize translated strings for unsupported languages #4838

Add build plugins to optimize translated strings for unsupported languages #4838

devongovett commented Jul 28, 2023 •

edited

Loading

devongovett Jul 28, 2023

rspbot commented Jul 28, 2023

rspbot commented Jul 28, 2023

rspbot commented Sep 15, 2023

rspbot commented Sep 15, 2023

LFDanLu left a comment

snowystinger left a comment

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

snowystinger Oct 26, 2023

rspbot commented Oct 26, 2023

rspbot commented Oct 26, 2023

rspbot commented Nov 27, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 30, 2023

LFDanLu Nov 30, 2023

LFDanLu Nov 30, 2023

rspbot commented Dec 2, 2023

rspbot commented Dec 2, 2023

rspbot commented Dec 2, 2023

		@@ -0,0 +1,13 @@
		diff --git a/node_modules/@parcel/bundler-default/lib/DefaultBundler.js b/node_modules/@parcel/bundler-default/lib/DefaultBundler.js

		@@ -48,6 +50,204 @@ function App() {

		See the [internationalization docs](internationalization.html) for more information about i18n in React Aria.

		#### Remix

		Remix is supported [when using Vite](https://remix.run/docs/en/main/future/vite) for builds. First, install `@react-aria/optimize-locales-plugin` with your package manager. Then, add the following to your `vite.config.ts`:

Add build plugins to optimize translated strings for unsupported languages #4838

Add build plugins to optimize translated strings for unsupported languages #4838

Conversation

devongovett commented Jul 28, 2023 • edited Loading

devongovett Jul 28, 2023

Choose a reason for hiding this comment

rspbot commented Jul 28, 2023

rspbot commented Jul 28, 2023

rspbot commented Sep 15, 2023

rspbot commented Sep 15, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

snowystinger left a comment

Choose a reason for hiding this comment

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

rspbot commented Oct 19, 2023

snowystinger Oct 26, 2023

Choose a reason for hiding this comment

rspbot commented Oct 26, 2023

rspbot commented Oct 26, 2023

rspbot commented Nov 27, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 29, 2023

rspbot commented Nov 30, 2023

LFDanLu Nov 30, 2023

Choose a reason for hiding this comment

LFDanLu Nov 30, 2023

Choose a reason for hiding this comment

rspbot commented Dec 2, 2023

rspbot commented Dec 2, 2023

rspbot commented Dec 2, 2023

@internationalized/string

LocalizedStringDictionary

@react-aria/i18n

useLocalizedStringFormatter

useLocalizedStringDictionary

devongovett commented Jul 28, 2023 •

edited

Loading