react-intl - npm Package Compare versions

Comparing version 7.1.6 to 7.1.7

lib/src/components/createIntl.js

@@ -9,4 +9,3 @@ /*
 import { isFormatXMLElementFn, } from 'intl-messageformat';
-import * as React from 'react';
-import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts } from '../utils';
+import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts, toKeyedReactNodeArray, } from '../utils';
 function assignUniqueKeysToFormatXMLElementFnArgument(values) {
@@ -34,6 +33,3 @@ if (!values) {
         values], rest, false));
-    if (Array.isArray(chunks)) {
-        return React.Children.toArray(chunks);
-    }
-    return chunks;
+    return toKeyedReactNodeArray(chunks);
 };
@@ -40,0 +36,0 @@ /**

lib/src/components/message.js

@@ -25,6 +25,6 @@ /*
     if (typeof children === 'function') {
-        return children(Array.isArray(nodes) ? nodes : [nodes]);
+        return children(nodes);
     }
     if (Component) {
-        return React.createElement(Component, null, React.Children.toArray(nodes));
+        return React.createElement(Component, null, nodes);
     }
@@ -31,0 +31,0 @@ return React.createElement(React.Fragment, null, nodes);

lib/src/utils.d.ts

@@ -9,2 +9,12 @@ import { FormatXMLElementFn } from 'intl-messageformat';
 /**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export declare const toKeyedReactNodeArray: typeof React.Children.toArray;
+/**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
@@ -11,0 +21,0 @@ * argument `parts` through, assigning unique key to each part, to prevent

lib/src/utils.js

@@ -15,3 +15,25 @@ import { __assign } from "tslib";
 export var DEFAULT_INTL_CONFIG = __assign(__assign({}, CORE_DEFAULT_INTL_CONFIG), { textComponent: React.Fragment });
+var arbitraryKeyProps = { key: 42 };
+var toArbitrarilyKeyedReactNode = function (reactNode) {
+    return React.isValidElement(reactNode)
+        ? React.createElement(React.Fragment, arbitraryKeyProps, reactNode)
+        : reactNode;
+};
 /**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export var toKeyedReactNodeArray = function (children) { var _a; 
+/**
+ * Note: {@link React.Children.map} will add its own index-based prefix to
+ * every key anyway, so the auto-injected one doesn't even have to be unique.
+ * This basically just tells React that it's explicit/intentional.
+ */
+return (_a = React.Children.map(children, toArbitrarilyKeyedReactNode)) !== null && _a !== void 0 ? _a : []; };
+/**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
@@ -18,0 +40,0 @@ * argument `parts` through, assigning unique key to each part, to prevent

package.json

 {
   "name": "react-intl",
-  "version": "7.1.6",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
-  "keywords": [
-    "intl",
-    "i18n",
-    "internationalization",
-    "locale",
-    "localization",
-    "globalization",
-    "react",
-    "reactjs",
-    "format",
-    "formatting",
-    "translate",
-    "translation"
+  "version": "7.1.7",
+  "license": "BSD-3-Clause",
+  "author": "Eric Ferraiuolo <[e-mail]>",
+  "sideEffects": false,
+  "types": "index.d.ts",
+  "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/react": "^18.3.12",
+    "hoist-non-react-statics": "^3.3.2",
+    "tslib": "^2.8.0",
+    "@formatjs/ecma402-abstract": "2.3.4",
+    "intl-messageformat": "10.7.16",
+    "@formatjs/intl": "3.1.5",
+    "@formatjs/icu-messageformat-parser": "2.11.2"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "typescript": "5.8.2"
+  },
+  "browserslist": [
+    "ie 11"
   ],
-  "author": "Eric Ferraiuolo <[e-mail]>",
+  "bugs": "https://github.com/formatjs/formatjs/issues",
   "contributors": [
@@ -59,2 +66,3 @@ "Aarni Koskela <[e-mail]>",
     "Joe Lencioni <[e-mail]>",
+    "Johannes Wüller <[e-mail]>",
     "Jonas Antonelli <[e-mail]>",
@@ -118,29 +126,20 @@ "Jose G <[e-mail]>",
   ],
-  "license": "BSD-3-Clause",
+  "gitHead": "773d6ebf881357f6e4c2dd7e8984b1bd0f69b4ca",
   "homepage": "https://formatjs.github.io/docs/react-intl",
-  "bugs": {
-    "url": "https://github.com/formatjs/formatjs/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "[e-mail]:formatjs/formatjs.git"
-  },
+  "keywords": [
+    "format",
+    "formatting",
+    "globalization",
+    "i18n",
+    "internationalization",
+    "intl",
+    "locale",
+    "localization",
+    "react",
+    "reactjs",
+    "translate",
+    "translation"
+  ],
   "main": "index.js",
   "module": "lib/index.js",
-  "types": "index.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "@types/hoist-non-react-statics": "3",
-    "@types/react": "16 || 17 || 18 || 19",
-    "hoist-non-react-statics": "3",
-    "tslib": "2",
-    "@formatjs/ecma402-abstract": "2.3.3",
-    "@formatjs/intl": "3.1.4",
-    "intl-messageformat": "10.7.15",
-    "@formatjs/icu-messageformat-parser": "2.11.1"
-  },
-  "peerDependencies": {
-    "react": "^16.6.0 || 17 || 18 || 19",
-    "typescript": "5"
-  },
   "peerDependenciesMeta": {
@@ -151,6 +150,3 @@ "typescript": {
   },
-  "browserslist": [
-    "ie 11"
-  ],
-  "gitHead": "773d6ebf881357f6e4c2dd7e8984b1bd0f69b4ca"
+  "repository": "[e-mail]:formatjs/formatjs.git"
 }

src/components/createIntl.js

@@ -12,3 +12,2 @@ "use strict";
 var intl_messageformat_1 = require("intl-messageformat");
-var React = tslib_1.__importStar(require("react"));
 var utils_1 = require("../utils");
@@ -37,6 +36,3 @@ function assignUniqueKeysToFormatXMLElementFnArgument(values) {
         values], rest, false));
-    if (Array.isArray(chunks)) {
-        return React.Children.toArray(chunks);
-    }
-    return chunks;
+    return (0, utils_1.toKeyedReactNodeArray)(chunks);
 };
@@ -43,0 +39,0 @@ /**

src/components/message.js

@@ -27,6 +27,6 @@ "use strict";
     if (typeof children === 'function') {
-        return children(Array.isArray(nodes) ? nodes : [nodes]);
+        return children(nodes);
     }
     if (Component) {
-        return React.createElement(Component, null, React.Children.toArray(nodes));
+        return React.createElement(Component, null, nodes);
     }
@@ -33,0 +33,0 @@ return React.createElement(React.Fragment, null, nodes);

src/utils.d.ts

@@ -9,2 +9,12 @@ import { FormatXMLElementFn } from 'intl-messageformat';
 /**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export declare const toKeyedReactNodeArray: typeof React.Children.toArray;
+/**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
@@ -11,0 +21,0 @@ * argument `parts` through, assigning unique key to each part, to prevent

src/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_INTL_CONFIG = void 0;
+exports.toKeyedReactNodeArray = exports.DEFAULT_INTL_CONFIG = void 0;
 exports.invariant = invariant;
@@ -22,3 +22,26 @@ exports.invariantIntlContext = invariantIntlContext;
 exports.DEFAULT_INTL_CONFIG = tslib_1.__assign(tslib_1.__assign({}, intl_1.DEFAULT_INTL_CONFIG), { textComponent: React.Fragment });
+var arbitraryKeyProps = { key: 42 };
+var toArbitrarilyKeyedReactNode = function (reactNode) {
+    return React.isValidElement(reactNode)
+        ? React.createElement(React.Fragment, arbitraryKeyProps, reactNode)
+        : reactNode;
+};
 /**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+var toKeyedReactNodeArray = function (children) { var _a; 
+/**
+ * Note: {@link React.Children.map} will add its own index-based prefix to
+ * every key anyway, so the auto-injected one doesn't even have to be unique.
+ * This basically just tells React that it's explicit/intentional.
+ */
+return (_a = React.Children.map(children, toArbitrarilyKeyedReactNode)) !== null && _a !== void 0 ? _a : []; };
+exports.toKeyedReactNodeArray = toKeyedReactNodeArray;
+/**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
@@ -25,0 +48,0 @@ * argument `parts` through, assigning unique key to each part, to prevent

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

236208

1.43%

Lines of code

6421

1.04%

Worsened metrics

Number of low maintenance alerts

1

Infinity%

Number of low supply chain risk alerts

4

33.33%

Dependency changes

• + Added

  @formatjs/ecma402-abstract@2.3.4
  (transitive)

• + Added

  @formatjs/fast-memoize@2.2.7
  (transitive)

• + Added

  @formatjs/icu-messageformat-parser@2.11.2
  (transitive)

• + Added

  @formatjs/icu-skeleton-parser@1.8.14
  (transitive)

• + Added

  @formatjs/intl@3.1.5
  (transitive)

• + Added

  @formatjs/intl-localematcher@0.6.1
  (transitive)

• + Added

  @types/prop-types@15.7.14
  (transitive)

• + Added

  @types/react@18.3.20
  (transitive)

• + Added

  intl-messageformat@10.7.16
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  react@18.3.1
  (transitive)

• + Added

  typescript@5.8.2
  (transitive)

• - Removed

  @formatjs/ecma402-abstract@2.3.3
  (transitive)

• - Removed

  @formatjs/fast-memoize@2.2.6
  (transitive)

• - Removed

  @formatjs/icu-messageformat-parser@2.11.1
  (transitive)

• - Removed

  @formatjs/icu-skeleton-parser@1.8.13
  (transitive)

• - Removed

  @formatjs/intl@3.1.4
  (transitive)

• - Removed

  @formatjs/intl-localematcher@0.6.0
  (transitive)

• - Removed

  @types/react@19.1.2
  (transitive)

• - Removed

  intl-messageformat@10.7.15
  (transitive)

• - Removed

  react@19.1.0
  (transitive)

• - Removed

  typescript@5.8.3
  (transitive)

• Updated

  @formatjs/ecma402-abstract@2.3.4

• Updated

  @formatjs/icu-messageformat-parser@2.11.2

• Updated

  @formatjs/intl@3.1.5

• Updated

  @types/hoist-non-react-statics@^3.3.1

• Updated

  @types/react@^18.3.12

• Updated

  hoist-non-react-statics@^3.3.2

• Updated

  intl-messageformat@10.7.16

• Updated

  tslib@^2.8.0