next-intl - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/next-intl.cjs.development.js

@@ -41,2 +41,26 @@ 'use strict';
 }
+
+function prepareTranslationValues(values) {
+  if (!values) return values; // Workaround for https://github.com/formatjs/formatjs/issues/1467
+
+  var transformedValues = {};
+  Object.keys(values).forEach(function (key) {
+    var value = values[key];
+    var transformed;
+
+    if (typeof value === 'function') {
+      transformed = function transformed(children) {
+        var result = value(children);
+        return React.isValidElement(result) ? React.cloneElement(result, {
+          key: result.key || key + String(children)
+        }) : result;
+      };
+    } else {
+      transformed = value;
+    }
+
+    transformedValues[key] = transformed;
+  });
+  return transformedValues;
+}
 /**
@@ -109,3 +133,3 @@ * Translates messages from the given path by using the ICU syntax.
 
-    var formattedMessage = messageFormat.format(values);
+    var formattedMessage = messageFormat.format(prepareTranslationValues(values));
 
@@ -112,0 +136,0 @@ {

dist/next-intl.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),o=e(require("intl-messageformat")),n=require("next/router"),u=r.createContext(void 0);function a(e,r){var t=e;return r.split(".").forEach((function(e){t=t[e]})),t}exports.NextIntlProvider=function(e){return t.createElement(u.Provider,{value:{messages:e.messages,locale:e.locale}},e.children)},exports.useTranslations=function(e){var t=r.useContext(u),s=n.useRouter().locale,i=r.useRef({});if(!t)throw new Error;var l=t.locale||s,c=t.messages,f=r.useMemo((function(){return e?a(c,e):c}),[c,e]);return function(e,r){var t;if(!l)throw new Error;var n,u=i.current;if(null==(t=u[l])?void 0:t[e])n=u[l][e];else{var s=a(f,e);if("object"==typeof s)throw new Error;n=new o(s,l),u[l]||(u[l]={}),u[l][e]=n}return n.format(r)}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=e(require("intl-messageformat")),o=require("next/router"),u=r.createContext(void 0);function i(e,r){var t=e;return r.split(".").forEach((function(e){t=t[e]})),t}exports.NextIntlProvider=function(e){return t.createElement(u.Provider,{value:{messages:e.messages,locale:e.locale}},e.children)},exports.useTranslations=function(e){var t=r.useContext(u),a=o.useRouter().locale,c=r.useRef({});if(!t)throw new Error;var s=t.locale||a,f=t.messages,l=r.useMemo((function(){return e?i(f,e):f}),[f,e]);return function(e,t){var o;if(!s)throw new Error;var u,a=c.current;if(null==(o=a[s])?void 0:o[e])u=a[s][e];else{var f=i(l,e);if("object"==typeof f)throw new Error;u=new n(f,s),a[s]||(a[s]={}),a[s][e]=u}return u.format(function(e){if(!e)return e;var t={};return Object.keys(e).forEach((function(n){var o=e[n];t[n]="function"==typeof o?function(e){var t=o(e);return r.isValidElement(t)?r.cloneElement(t,{key:t.key||n+String(e)}):t}:o})),t}(t))}};
 //# sourceMappingURL=next-intl.cjs.production.min.js.map

dist/next-intl.esm.js

@@ -1,2 +0,2 @@
-import React, { createContext, useContext, useRef, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useMemo, isValidElement, cloneElement } from 'react';
 import IntlMessageFormat from 'intl-messageformat';
@@ -34,2 +34,26 @@ import { useRouter } from 'next/router';
 }
+
+function prepareTranslationValues(values) {
+  if (!values) return values; // Workaround for https://github.com/formatjs/formatjs/issues/1467
+
+  var transformedValues = {};
+  Object.keys(values).forEach(function (key) {
+    var value = values[key];
+    var transformed;
+
+    if (typeof value === 'function') {
+      transformed = function transformed(children) {
+        var result = value(children);
+        return isValidElement(result) ? cloneElement(result, {
+          key: result.key || key + String(children)
+        }) : result;
+      };
+    } else {
+      transformed = value;
+    }
+
+    transformedValues[key] = transformed;
+  });
+  return transformedValues;
+}
 /**
@@ -108,3 +132,3 @@ * Translates messages from the given path by using the ICU syntax.
 
-    var formattedMessage = messageFormat.format(values);
+    var formattedMessage = messageFormat.format(prepareTranslationValues(values));
 
@@ -111,0 +135,0 @@ if (process.env.NODE_ENV !== "production") {

dist/TranslationValues.d.ts

 import { ReactNode } from 'react';
-declare type TranslationValues = Record<string, string | number | boolean | Date | null | undefined | ReactNode>;
+declare type TranslationValues = Record<string, string | number | boolean | Date | null | undefined | ((children: ReactNode) => ReactNode)>;
 export default TranslationValues;

dist/useTranslations.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 /**
@@ -10,2 +10,2 @@ * Translates messages from the given path by using the ICU syntax.
  */
-export default function useTranslations(path?: string): (idPath: string, values?: Record<string, string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | Date | null | undefined> | undefined) => string | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | (string | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal)[];
+export default function useTranslations(path?: string): (idPath: string, values?: Record<string, string | number | boolean | Date | ((children: ReactNode) => ReactNode) | null | undefined> | undefined) => string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | (string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | null)[] | null;

package.json

 {
   "name": "next-intl",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": "Jan Amann <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "Minimal, but complete solution for managing translations in Next.js apps.",

README.md

@@ -107,3 +107,4 @@ # next-intl
     // See https://formatjs.io/docs/core-concepts/icu-syntax/#rich-text-formatting
-    "richText": "This is <important>important</important>",
+    // and https://formatjs.io/docs/intl-messageformat/#rich-text-support
+    "richText": "This is <important><very>very</very> important</important>",
 
@@ -143,3 +144,8 @@ // Messages can be used in attributes
     <p>{t('selectordinal', {year: 1})}</p>
-    <p>{t('richText', important: (children: ReactNode) => <b key="important">{children}</b>)}</p>
+    <p>
+      {t('richText', {
+        important: (children: ReactNode) => <b>{children}</b>,
+        very: (children: ReactNode) => <i>{children}</i>,
+      })}
+    </p>
     // TypeScript note: You have to cast the attribute to a string, since it 
@@ -173,7 +179,5 @@ // can potentially return a `ReactNode`: `String(t('attributeUrl'))`
 
-- get rid of key for rich text?
-- cache format result?
-- separate repo?
+- Cache format result?
 - Pass currency to number? (if currency is sensitive to locale, use the messages)
 - Relative time
 - Check other features of react-intl

No alert changes

Improved metrics

Total package byte prevSize

50130

16.41%

Lines of code

462

20.63%

Number of lines in readme file

181

2.26%

No dependency changes