react-polyglot-hooks - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-0

CHANGELOG.md

@@ -5,2 +5,20 @@ # Changelog
 
+## [0.3.0-0](https://github.com/pmmmwh/react-polyglot-hooks/compare/v0.2.0...v0.3.0-0) (2019-09-02)
+
+### Bug Fixes
+
+- **t:** add type casting for fallback function return ([8e8e975](https://github.com/pmmmwh/react-polyglot-hooks/commit/8e8e975))
+- **t:** return ReactElement instead of ReactNode ([1eb60ca](https://github.com/pmmmwh/react-polyglot-hooks/commit/1eb60ca))
+- rename t type to PolyglotT ([786ed00](https://github.com/pmmmwh/react-polyglot-hooks/commit/786ed00))
+
+### Features
+
+- **i18n:** remove children.only but only render on polyglot mounted ([6e3eea8](https://github.com/pmmmwh/react-polyglot-hooks/commit/6e3eea8))
+- **t:** add a count prop as a shorthand to use smart_count ([0524125](https://github.com/pmmmwh/react-polyglot-hooks/commit/0524125))
+- **t:** add function overload to aid code auto completion ([a520de4](https://github.com/pmmmwh/react-polyglot-hooks/commit/a520de4))
+- **t:** implement polyglot enhancer to allow component interpolation ([7936f72](https://github.com/pmmmwh/react-polyglot-hooks/commit/7936f72))
+- **t:** update function types to enhanced t ([163a033](https://github.com/pmmmwh/react-polyglot-hooks/commit/163a033))
+- **t:** utilize new enhancer and type in i18n ([f5abaaf](https://github.com/pmmmwh/react-polyglot-hooks/commit/f5abaaf))
+- export PolyglotT type ([e582380](https://github.com/pmmmwh/react-polyglot-hooks/commit/e582380))
+
 ## [0.2.0](https://github.com/pmmmwh/react-polyglot-hooks/compare/v0.1.3...v0.2.0) (2019-08-28)
@@ -7,0 +25,0 @@

dist/I18n.js

@@ -15,2 +15,3 @@ "use strict";
 var node_polyglot_1 = __importDefault(require("node-polyglot"));
+var enhanceT_1 = __importDefault(require("./enhanceT"));
 var i18nContext_1 = __importDefault(require("./i18nContext"));
@@ -31,9 +32,8 @@ var I18n = function (_a) {
     }, [locale, phrases, allowMissing, onMissingKey, interpolation]);
-    var t = React.useCallback(
-    // We use a named function here to aid debugging
-    function t(key, interpolations) {
-        return polyglot.t(key, interpolations);
-    }, [polyglot]);
-    return (React.createElement(i18nContext_1.default.Provider, { value: { locale: polyglot.locale(), t: t } }, React.Children.only(children)));
+    var polyglotContext = React.useMemo(function () { return ({
+        locale: polyglot.locale(),
+        t: enhanceT_1.default(polyglot.t.bind(polyglot)),
+    }); }, [polyglot]);
+    return (React.createElement(i18nContext_1.default.Provider, { value: polyglotContext }, polyglotContext.locale && children));
 };
 exports.default = I18n;

dist/i18nContext.d.ts

 /// <reference types="react" />
-import Polyglot from 'node-polyglot';
-declare const NoOp: (key: string) => string;
+import { tFunction } from './constants';
 export interface I18nContextProps {
-    locale?: string;
-    t: typeof Polyglot.prototype.t | typeof NoOp;
+    locale: string | undefined;
+    t: tFunction;
 }
 declare const I18nContext: import("react").Context<I18nContextProps>;
 export default I18nContext;

dist/i18nContext.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var NoOp = function (key) {
-    console.error('Warning: t is called without Polyglot context. Perhaps you need to wrap the component in <I18n>?');
+var constants_1 = require("./constants");
+function warnWithoutContext() {
+    var _a = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        _a[_i] = arguments[_i];
+    }
+    var key = _a[0];
+    if (process.env.NODE_ENV !== 'production') {
+        console.error(constants_1.NO_POLYGLOT_CONTEXT);
+    }
     return key;
-};
+}
 var I18nContext = react_1.createContext({
-    t: NoOp,
+    locale: undefined,
+    t: warnWithoutContext,
 });
 exports.default = I18nContext;

dist/index.d.ts

@@ -0,1 +1,2 @@
+export { tFunction } from './constants';
 export { default as I18n, I18nProps } from './I18n';
@@ -5,2 +6,2 @@ export { I18nContextProps } from './i18nContext';
 export { default as useLocale } from './useLocale';
-export { default as useTranslate } from './useTranslate';
+export { default as useT } from './useT';

dist/index.js

@@ -9,3 +9,3 @@ "use strict";
 exports.useLocale = useLocale_1.default;
-var useTranslate_1 = require("./useTranslate");
-exports.useTranslate = useTranslate_1.default;
+var useT_1 = require("./useT");
+exports.useT = useT_1.default;

dist/T.d.ts

 import * as React from 'react';
 import { InterpolationOptions } from 'node-polyglot';
 export interface TProps {
+    count?: number;
     fallback?: string;
@@ -5,0 +6,0 @@ interpolations?: number | InterpolationOptions;

dist/T.js

@@ -17,12 +17,20 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var useTranslate_1 = __importDefault(require("./useTranslate"));
+var constants_1 = require("./constants");
+var useT_1 = __importDefault(require("./useT"));
 var T = function (_a) {
-    var fallback = _a.fallback, interpolations = _a.interpolations, phrase = _a.phrase;
-    var t = useTranslate_1.default();
-    var tOptions = __assign({}, (fallback ? { _: fallback } : undefined), (interpolations &&
-        // Handles smart_count from a number
-        // This allows the fallback to be safely assigned
-        (typeof interpolations === 'number'
-            ? { smart_count: interpolations }
-            : interpolations)));
+    var count = _a.count, fallback = _a.fallback, interpolations = _a.interpolations, phrase = _a.phrase;
+    var t = useT_1.default();
+    var cleanInterpolations;
+    if (typeof interpolations !== 'number') {
+        cleanInterpolations = interpolations;
+    }
+    else {
+        // TODO: Deprecate number from interpolations in v0.3.0
+        // Handles number interpolation
+        cleanInterpolations = { smart_count: interpolations };
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(constants_1.NO_NUMBER_INTERPOLATIONS);
+        }
+    }
+    var tOptions = __assign(__assign(__assign({}, (fallback && { _: fallback })), (count && { smart_count: count })), cleanInterpolations);
     // HACK: A workaround for the current limitations of TSX with FC
@@ -29,0 +37,0 @@ // Ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544

package.json

 {
   "name": "react-polyglot-hooks",
-  "version": "0.2.0",
+  "version": "0.3.0-0",
   "description": "Hooks for using Polyglot.js with React.",
@@ -88,3 +88,3 @@ "keywords": [
     "standard-version": "^7.0.0",
-    "typescript": "3.5.3"
+    "typescript": "3.6.2"
   },
@@ -91,0 +91,0 @@ "peerDependencies": {

README.md

@@ -6,7 +6,7 @@ # React Polyglot Hooks
 [![npm Package](https://img.shields.io/npm/v/react-polyglot-hooks/latest.svg)](https://www.npmjs.com/package/react-polyglot-hooks)
-[![CircleCI](https://img.shields.io/circleci/project/github/pmmmwh/react-polyglot-hooks/master.svg)](https://circleci.com/gh/pmmmwh/react-polyglot-hooks/tree/master)
-[![Coverage Status](https://img.shields.io/codecov/c/github/pmmmwh/react-polyglot-hooks/master.svg)](https://codecov.io/gh/pmmmwh/react-polyglot-hooks/branch/master)
 [![Minified Size](https://img.shields.io/bundlephobia/min/react-polyglot-hooks)](https://bundlephobia.com/result?p=react-polyglot-hooks@latest)
 [![Min-zipped Size](https://img.shields.io/bundlephobia/minzip/react-polyglot-hooks)](https://bundlephobia.com/result?p=react-polyglot-hooks@latest)
 
+[![CircleCI](https://img.shields.io/circleci/project/github/pmmmwh/react-polyglot-hooks/master.svg)](https://circleci.com/gh/pmmmwh/react-polyglot-hooks/tree/master)
+[![Coverage Status](https://img.shields.io/codecov/c/github/pmmmwh/react-polyglot-hooks/master.svg)](https://codecov.io/gh/pmmmwh/react-polyglot-hooks/branch/master)
 ![Code Style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier)
@@ -32,7 +32,7 @@ [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 > React is required as a peer dependency.
-> Please install version 16.8.0 or later (minimum requirement for hooks).
+> Please install version 16.8.3 or later (minimum requirement for hooks).
 
 ## Usage
 
-React Polyglot Hooks offers 1 wrapper component: `<I18n>`, 2 hooks: `useLocale` and `useTranslate` and 1 helper component: `<T>`
+React Polyglot Hooks offers 1 wrapper component: `<I18n>`, 2 hooks: `useLocale` and `useT` and 1 helper component: `<T>`.
 The hooks and the helper component have to be wrapped with the `<I18n>` component to work properly.
@@ -126,3 +126,3 @@
 
-### `useTranslate`
+### `useT`
 
@@ -129,0 +129,0 @@ Returns a special function (`t`) which takes in parameters and returns a phrase.

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25893

increased by30.59%

Number of package files

20

increased by25%

Lines of code

250

increased by66.67%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes