fix(use-i18n)!: move date-fns dynamic import outside of library scope (#145)

This was causing a SIGSEGV for some reason on our tests

BREAKING CHANGE: We now expose loadDateLocale props in the Provider instead of bundling it

Author: chambo-e

packages/use-i18n/README.md

@@ -27,11 +27,11 @@ Use of local `variables` and `namespace` to dynamically load locales.
  ┃ ┗ 📜common.json
 ```
 
-your loader will be:
+your loaders will be:
 
 ```js
-const load = ({ locale, namespace }) =>
-  import(`./locales/${locale}/${namespace}`)
+const load = ({ locale, namespace }) => import(`./locales/${locale}/${namespace}`)
+const loadDateLocale = (locale) => import(`date-fns/locale/${locale}/index`)
 ```
 
 Inside your app you will need to use useTranslation to load namespace locales.
@@ -44,6 +44,7 @@ import defaultTranslations from './locales/en/common'
 
 const App = () => (
   <I18n
+    loadDateLocale={loadDateLocale}
     defaultLocale="en"
     supportedLocales={['en']}
     defaultTranslations={defaultTranslations}

packages/use-i18n/package.json

@@ -33,6 +33,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
+    "date-fns": "2.x",
     "react": "17.x"
   },
   "devDependencies": {

packages/use-i18n/src/__tests__/index.js

@@ -10,6 +10,7 @@ import fr from './locales/fr'
 const LOCALE_ITEM_STORAGE = 'locales'
 
 const wrapper = ({
+  loadDateLocale = async locale => import(`date-fns/locale/${locale}/index`),
   defaultLoad = async ({ locale }) => import(`./locales/${locale}`),
   defaultLocale = 'en',
   defaultTranslations = {},
@@ -19,6 +20,7 @@ const wrapper = ({
   supportedLocales = ['en', 'fr', 'es'],
 } = {}) => ({ children }) => (
   <I18n
+    loadDateLocale={loadDateLocale}
     defaultLoad={defaultLoad}
     defaultLocale={defaultLocale}
     defaultTranslations={defaultTranslations}

packages/use-i18n/src/index.js

@@ -55,12 +55,10 @@ const getNumberFormat = memoizeIntlConstructor(Intl.NumberFormat)
 const getDateTimeFormat = memoizeIntlConstructor(Intl.DateTimeFormat)
 const getListFormat = memoizeIntlConstructor(Intl.ListFormat)
 
-const loadDateFnsLocale = async locale =>
-  import(`date-fns/locale/${locale}/index`)
-
 const I18nContextProvider = ({
   children,
   defaultLoad,
+  loadDateLocale,
   defaultLocale,
   defaultTranslations,
   enableDefaultLocale,
@@ -204,12 +202,12 @@ const I18nContextProvider = ({
   )
 
   useEffect(() => {
-    loadDateFnsLocale(currentLocale === 'en' ? 'en-GB' : currentLocale)
+    loadDateLocale(currentLocale === 'en' ? 'en-GB' : currentLocale)
       .then(setDateFnsLocale)
-      .catch(() => loadDateFnsLocale('en-GB').then(setDateFnsLocale))
+      .catch(() => loadDateLocale('en-GB').then(setDateFnsLocale))
 
     setCurrentLocale(getCurrentLocale())
-  }, [currentLocale, getCurrentLocale])
+  }, [loadDateLocale, currentLocale, getCurrentLocale])
 
   const value = useMemo(
     () => ({
@@ -261,6 +259,7 @@ I18nContextProvider.defaultProps = {
 I18nContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultLoad: PropTypes.func.isRequired,
+  loadDateLocale: PropTypes.func.isRequired,
   defaultLocale: PropTypes.string.isRequired,
   defaultTranslations: PropTypes.shape({}),
   enableDebugKey: PropTypes.bool,