use-intl 3.0.0-rc.6 → 3.0.1

package/README.md

@@ -1,14 +1,12 @@
 # 🌐 use-intl
 
-![Gzipped size](https://badgen.net/bundlephobia/minzip/use-intl) ![Tree shaking supported](https://badgen.net/bundlephobia/tree-shaking/use-intl) [<img src="https://img.shields.io/npm/dw/use-intl.svg" />](https://www.npmjs.com/package/use-intl)
-
 > Internationalization for React that gets out of your way.
 
 ## Features
 
 Internationalization is an essential part of the user experience. use-intl gives you everything you need to get language subtleties right and has always got your back whenever you need to fine-tune a translation.
 
-- 🌟 **ICU message syntax**: Localize your messages with interpolation, plurals, ordinal pluralization, enum-based label selection and rich text.
+- 🌟 **ICU message syntax**: Localize your messages with interpolation, cardinal & ordinal plurals, enum-based label selection and rich text.
 - 📅 **Dates, times & numbers**: Apply appropriate formatting without worrying about server/client differences like time zones.
 - ✅ **Type-safe**: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
 - 💡 **Hooks-only API**: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
@@ -19,19 +17,17 @@ Internationalization is an essential part of the user experience. use-intl gives
 This library is based on the premise that messages can be grouped by namespaces (typically a component name).
 
 ```jsx
-// UserDetails.tsx
-import {useTranslations, useFormatter} from 'next-intl';
+// UserProfile.tsx
+import {useTranslations} from 'next-intl';
  
-function UserDetails({user}) {
-  const t = useTranslations('UserDetails');
-  const format = useFormatter();
+export default function UserProfile({user}) {
+  const t = useTranslations('UserProfile');
  
   return (
     <section>
-      <h2>{t('title')}</h2>
-      <p>{t('followers', {count: user.followers.length})}</p>
-      <p>{t('lastSeen', {time: format.relativeTime(user.lastSeen)})</p>
-      <Image alt={t('portrait', {username: user.name})} src={user.portrait} />
+      <h1>{t('title', {firstName: user.firstName})}</h1>
+      <p>{t('membership', {memberSince: user.memberSince})}</p>
+      <p>{t('followers', {count: user.numFollowers})}</p>
     </section>
   );
 }
@@ -40,15 +36,14 @@ function UserDetails({user}) {
 ```js
 // en.json
 {
-  "UserDetails": {
-    "title": "User details",
+  "UserProfile": {
+    "title": "{username}'s profile",
+    "membership": "Member since {memberSince, date, short}",
     "followers": "{count, plural, ↵
                     =0 {No followers yet} ↵
                     =1 {One follower} ↵
                     other {# followers} ↵
-                  }",
-    "lastSeen": "Last seen {time}",
-    "portrait": "Portrait of {username}"
+                  }"
   }
 }
 ```

package/dist/development/_IntlProvider.js

@@ -13,14 +13,40 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 function IntlProvider(_ref) {
   let {
     children,
-    ...config
+    defaultTranslationValues,
+    formats,
+    getMessageFallback,
+    locale,
+    messages,
+    now,
+    onError,
+    timeZone
   } = _ref;
   const [messageFormatCache] = React.useState(() => new Map());
+
+  // Memoizing this value helps to avoid triggering a re-render of all
+  // context consumers in case the configuration didn't change. However,
+  // if some of the non-primitive values change, a re-render will still
+  // be triggered. Note that there's no need to put `memo` on `IntlProvider`
+  // itself, because the `children` typically change on every render.
+  // There's some burden on the consumer side if it's important to reduce
+  // re-renders, put that's how React works.
+  // See: https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#context-updates-and-render-optimizations
+  const value = React.useMemo(() => ({
+    ...initializeConfig.initializeConfig({
+      locale,
+      defaultTranslationValues,
+      formats,
+      getMessageFallback,
+      messages,
+      now,
+      onError,
+      timeZone
+    }),
+    messageFormatCache
+  }), [defaultTranslationValues, formats, getMessageFallback, locale, messageFormatCache, messages, now, onError, timeZone]);
   return /*#__PURE__*/React__default.default.createElement(IntlContext.IntlContext.Provider, {
-    value: {
-      ...initializeConfig.initializeConfig(config),
-      messageFormatCache
-    }
+    value: value
   }, children);
 }
 

package/dist/esm/_IntlProvider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./initializeConfig-29e7ba4c.js"),r=require("./IntlContext-381f3ce4.js");function i(e){return e&&e.__esModule?e:{default:e}}var n=i(e);exports.IntlProvider=function(i){let{children:a,...o}=i;const[u]=e.useState((()=>new Map));return n.default.createElement(r.IntlContext.Provider,{value:{...t.initializeConfig(o),messageFormatCache:u}},a)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./initializeConfig-29e7ba4c.js"),a=require("./IntlContext-381f3ce4.js");function r(e){return e&&e.__esModule?e:{default:e}}var n=r(e);exports.IntlProvider=function(r){let{children:o,defaultTranslationValues:s,formats:l,getMessageFallback:i,locale:u,messages:c,now:f,onError:d,timeZone:m}=r;const[g]=e.useState((()=>new Map)),v=e.useMemo((()=>({...t.initializeConfig({locale:u,defaultTranslationValues:s,formats:l,getMessageFallback:i,messages:c,now:f,onError:d,timeZone:m}),messageFormatCache:g})),[s,l,i,u,g,c,f,d,m]);return n.default.createElement(a.IntlContext.Provider,{value:v},o)};

package/dist/production/_IntlProvider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./initializeConfig-984a566d.js"),r=require("./IntlContext-381f3ce4.js");function i(e){return e&&e.__esModule?e:{default:e}}var n=i(e);exports.IntlProvider=function(i){let{children:a,...o}=i;const[u]=e.useState((()=>new Map));return n.default.createElement(r.IntlContext.Provider,{value:{...t.initializeConfig(o),messageFormatCache:u}},a)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./initializeConfig-984a566d.js"),a=require("./IntlContext-381f3ce4.js");function r(e){return e&&e.__esModule?e:{default:e}}var n=r(e);exports.IntlProvider=function(r){let{children:o,defaultTranslationValues:s,formats:l,getMessageFallback:i,locale:u,messages:c,now:f,onError:d,timeZone:m}=r;const[g]=e.useState((()=>new Map)),v=e.useMemo((()=>({...t.initializeConfig({locale:u,defaultTranslationValues:s,formats:l,getMessageFallback:i,messages:c,now:f,onError:d,timeZone:m}),messageFormatCache:g})),[s,l,i,u,g,c,f,d,m]);return n.default.createElement(a.IntlContext.Provider,{value:v},o)};

package/dist/types/src/react/IntlProvider.d.ts

@@ -3,5 +3,5 @@ import IntlConfig from '../core/IntlConfig';
 type Props = IntlConfig & {
     children: ReactNode;
 };
-export default function IntlProvider({ children, ...config }: Props): React.JSX.Element;
+export default function IntlProvider({ children, defaultTranslationValues, formats, getMessageFallback, locale, messages, now, onError, timeZone }: Props): React.JSX.Element;
 export {};

package/dist/types/test/react/IntlProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-intl",
-  "version": "3.0.0-rc.6",
+  "version": "3.0.1",
   "sideEffects": false,
   "author": "Jan Amann <jan@amann.work>",
   "description": "Minimal, but complete solution for managing internationalization in React apps.",
@@ -10,6 +10,13 @@
     "type": "git",
     "url": "https://github.com/amannn/next-intl/tree/main/packages/use-intl"
   },
+  "scripts": {
+    "build": "rm -rf dist && rollup -c",
+    "test": "TZ=Europe/Berlin vitest",
+    "lint": "eslint src test && tsc --noEmit",
+    "prepublishOnly": "CI=true turbo test && turbo lint && turbo build",
+    "size": "size-limit"
+  },
   "main": "./dist/index.js",
   "module": "dist/esm/index.js",
   "typings": "./dist/types/src/index.d.ts",
@@ -73,19 +80,14 @@
     "react-dom": "^18.2.0",
     "rollup": "^3.28.1",
     "size-limit": "^8.2.6",
-    "typescript": "^5.0.0",
+    "typescript": "^5.2.2",
     "vitest": "^0.32.2"
   },
   "size-limit": [
     {
       "path": "dist/production/index.js",
-      "limit": "12.3 kB"
+      "limit": "12.355 kB"
     }
   ],
-  "scripts": {
-    "build": "rm -rf dist && rollup -c",
-    "test": "TZ=Europe/Berlin vitest",
-    "lint": "eslint src test && tsc --noEmit",
-    "size": "size-limit"
-  }
-}
+  "gitHead": "b3297ca0514b9393f1ba091883c47e79a77be130"
+}