@lingui/react - npm Package Compare versions

Comparing version 3.0.0-18 to 3.0.0-20

cjs/I18nProvider.d.ts

@@ -1,2 +0,2 @@
-import { FunctionComponent } from "react";
+import React, { FunctionComponent, ComponentType } from "react";
 import { I18n } from "@lingui/core";
@@ -6,3 +6,3 @@ import { TransRenderType } from "./Trans";
     i18n: I18n;
-    defaultRender?: TransRenderType;
+    defaultComponent?: TransRenderType;
 };
@@ -13,4 +13,7 @@ export declare type I18nProviderProps = I18nContext & {
 export declare function useLingui(): I18nContext;
+export declare function withI18n(o?: object): <P extends {
+    i18n: I18n;
+}>(Component: ComponentType<P>) => React.ComponentType<P>;
 export declare const I18nProvider: FunctionComponent<I18nProviderProps>;
 export {};
 //# sourceMappingURL=I18nProvider.d.ts.map

cjs/react.development.js

@@ -29,3 +29,3 @@ 'use strict';
   var i18n = _ref.i18n,
-      defaultRender = _ref.defaultRender,
+      defaultComponent = _ref.defaultComponent,
       _ref$forceRenderOnLoc = _ref.forceRenderOnLocaleChange,
@@ -41,3 +41,3 @@ forceRenderOnLocaleChange = _ref$forceRenderOnLoc === void 0 ? true : _ref$forceRenderOnLoc,
    *
-   * Due to this effect we also pass `defaultRender` in the same context, instead
+   * Due to this effect we also pass `defaultComponent` in the same context, instead
    * of creating a separate Provider/Consumer pair.
@@ -50,3 +50,3 @@ *
       i18n: i18n,
-      defaultRender: defaultRender
+      defaultComponent: defaultComponent
     };
@@ -91,3 +91,23 @@ };
 var tagRe = /<(\d+)>(.*?)<\/\1>|<(\d+)\/>/;
-var nlRe = /(?:\r\n|\r|\n)/g;
+var nlRe = /(?:\r\n|\r|\n)/g; // For HTML, certain tags should omit their close tag. We keep a whitelist for
+// those special-case tags.
+
+var voidElementTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  menuitem: true
+};
 /**
@@ -103,2 +123,3 @@ * `formatElements` - parse string and return tree of react elements
   var elements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var uniqueId = makeCounter(0, '$lingui$');
   var parts = value.replace(nlRe, "").split(tagRe); // no inline elements, return
@@ -122,4 +143,16 @@
       var element = elements[index];
+
+      if (!element || voidElementTags[element.type] && children) {
+        if (!element) {
+          console.error("Can use element at index '".concat(index, "' as it is not declared in the original translation"));
+        } else {
+          console.error("".concat(element.type, " is a void element tag therefore it must have no children"));
+        } // ignore problematic element but push its children and elements after it
+
+
+        element = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment);
+      }
+
       tree.push( /*#__PURE__*/React__default['default'].cloneElement(element, {
-        key: index
+        key: uniqueId()
       }, // format children for pair tags
@@ -167,2 +200,10 @@ // unpaired tags might have children if it's a component passed as a variable
 
+var makeCounter = function makeCounter() {
+  var count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return function () {
+    return "".concat(prefix, "_").concat(count++);
+  };
+};
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -174,6 +215,6 @@
       i18n = _useLingui.i18n,
-      defaultRender = _useLingui.defaultRender;
+      defaultComponent = _useLingui.defaultComponent;
 
-  var _props$render = props.render,
-      render = _props$render === void 0 ? defaultRender : _props$render,
+  var render = props.render,
+      component = props.component,
       id = props.id,
@@ -213,19 +254,28 @@ message = props.message,
   var translation = _translation ? formatElements(_translation, components) : null;
+  var FallbackComponent = defaultComponent || React__default['default'].Fragment; // Validation of `render` and `component` props
 
-  if (render === null || render === undefined) {
-    return translation;
-  } else if (typeof render === "string") {
-    // Built-in element: h1, p
-    return /*#__PURE__*/React__default['default'].createElement(render, {}, translation);
-  } else if ( /*#__PURE__*/React__default['default'].isValidElement(render)) {
-    // Element: <p className="lear' />
-    return /*#__PURE__*/React__default['default'].cloneElement(render, {}, translation);
-  } // Component: (props) => <a title={props.translation}>x</a>
+  if (render && component) {
+    console.error("You can't use both `component` and `render` prop at the same time. `component` is ignored.");
+  } else if (render && typeof render !== "function") {
+    console.error("Invalid value supplied to prop `render`. It must be a function, provided ".concat(render));
+  } else if (component && typeof component !== "function") {
+    // Apparently, both function components and class components are functions
+    // See https://stackoverflow.com/a/41658173/1535540
+    console.error("Invalid value supplied to prop `component`. It must be a React component, provided ".concat(component));
+    return /*#__PURE__*/React__default['default'].createElement(FallbackComponent, null, translation);
+  } // Rendering using a render prop
 
 
-  return /*#__PURE__*/React__default['default'].createElement(render, {
-    id: id,
-    translation: translation,
-    message: message
-  });
+  if (typeof render === "function") {
+    // Component: render={(props) => <a title={props.translation}>x</a>}
+    return render({
+      id: id,
+      translation: translation,
+      message: message
+    });
+  } // `component` prop has a higher precedence over `defaultComponent`
+
+
+  var Component = component || FallbackComponent;
+  return /*#__PURE__*/React__default['default'].createElement(Component, null, translation);
 }
@@ -232,0 +282,0 @@ Trans.defaultProps = {

cjs/react.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),r=require("@babel/runtime/helpers/defineProperty");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),u=n(t),a=n(r),l=u.default.createContext(null);function i(){var e=u.default.useContext(l);return e}function f(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u,a=!0,l=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){l=!0,u=e},f:function(){try{a||null==r.return||r.return()}finally{if(l)throw u}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var s=/<(\d+)>(.*?)<\/\1>|<(\d+)\/>/,d=/(?:\r\n|\r|\n)/g;function p(e){if(!e.length)return[];var t=e.slice(0,4),r=o.default(t,4),n=r[0],u=r[1],a=r[2],l=r[3];return[[parseInt(n||a),u||"",l]].concat(p(e.slice(4,e.length)))}function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){a.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function b(e){var t=i(),r=t.i18n,n=t.defaultRender,a=e.render,l=void 0===a?n:a,c=e.id,y=e.message,b=e.formats,m=v({},e.values),h=v({},e.components);m&&Object.keys(m).forEach((function(e){var t=m[e];if(u.default.isValidElement(t)){var r=Object.keys(h).length;h[r]=t,m[e]="<".concat(r,"/>")}}));var g=r&&"function"==typeof r._?r._(c,m,{message:y,formats:b}):c,O=g?function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.replace(d,"").split(s);if(1===n.length)return t;var a=[],l=n.shift();l&&a.push(l);var i,c=f(p(n));try{for(c.s();!(i=c.n()).done;){var y=o.default(i.value,3),v=y[0],b=y[1],m=y[2],h=r[v];a.push(u.default.cloneElement(h,{key:v},b?e(b,r):h.props.children)),m&&a.push(m)}}catch(e){c.e(e)}finally{c.f()}return a}(g,h):null;return null==l?O:"string"==typeof l?u.default.createElement(l,{},O):u.default.isValidElement(l)?u.default.cloneElement(l,{},O):u.default.createElement(l,{id:c,translation:O,message:y})}b.defaultProps={values:{},components:{}},exports.I18nProvider=function(e){var t=e.i18n,r=e.defaultRender,n=e.forceRenderOnLocaleChange,a=void 0===n||n,i=e.children,f=function(){return{i18n:t,defaultRender:r}},c=u.default.useState(f()),s=o.default(c,2),d=s[0],p=s[1];u.default.useEffect((function(){var e=t.on("change",(function(){return p(f())}));return function(){return e()}}),[]);var y=a&&t.locale;return a&&!y?null:u.default.createElement(l.Provider,{value:d,key:y},i)},exports.Trans=b,exports.useLingui=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),r=require("@babel/runtime/helpers/defineProperty");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),a=n(t),u=n(r),i=a.default.createContext(null);function l(){var e=a.default.useContext(i);return e}function c(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return f(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,u=!0,i=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return u=e.done,e},e:function(e){i=!0,a=e},f:function(){try{u||null==r.return||r.return()}finally{if(i)throw a}}}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var s=/<(\d+)>(.*?)<\/\1>|<(\d+)\/>/,p=/(?:\r\n|\r|\n)/g,d={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0};function m(e){if(!e.length)return[];var t=e.slice(0,4),r=o.default(t,4),n=r[0],a=r[1],u=r[2],i=r[3];return[[parseInt(n||u),a||"",i]].concat(m(e.slice(4,e.length)))}var v=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return function(){return"".concat(t,"_").concat(e++)}};function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){u.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function h(e){var t=l(),r=t.i18n,n=t.defaultComponent,u=e.render,i=e.component,f=e.id,y=e.message,h=e.formats,g=b({},e.values),O=b({},e.components);g&&Object.keys(g).forEach((function(e){var t=g[e];if(a.default.isValidElement(t)){var r=Object.keys(O).length;O[r]=t,g[e]="<".concat(r,"/>")}}));var j=r&&"function"==typeof r._?r._(f,g,{message:y,formats:h}):f,P=j?function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=v(0,"$lingui$"),u=t.replace(p,"").split(s);if(1===u.length)return t;var i=[],l=u.shift();l&&i.push(l);var f,y=c(m(u));try{for(y.s();!(f=y.n()).done;){var b=o.default(f.value,3),h=b[0],g=b[1],O=b[2],j=r[h];(!j||d[j.type]&&g)&&(j?console.error("".concat(j.type," is a void element tag therefore it must have no children")):console.error("Can use element at index '".concat(h,"' as it is not declared in the original translation")),j=a.default.createElement(a.default.Fragment)),i.push(a.default.cloneElement(j,{key:n()},g?e(g,r):j.props.children)),O&&i.push(O)}}catch(e){y.e(e)}finally{y.f()}return i}(j,O):null,w=n||a.default.Fragment;if(u&&i)console.error("You can't use both `component` and `render` prop at the same time. `component` is ignored.");else if(u&&"function"!=typeof u)console.error("Invalid value supplied to prop `render`. It must be a function, provided ".concat(u));else if(i&&"function"!=typeof i)return console.error("Invalid value supplied to prop `component`. It must be a React component, provided ".concat(i)),a.default.createElement(w,null,P);if("function"==typeof u)return u({id:f,translation:P,message:y});var E=i||w;return a.default.createElement(E,null,P)}h.defaultProps={values:{},components:{}},exports.I18nProvider=function(e){var t=e.i18n,r=e.defaultComponent,n=e.forceRenderOnLocaleChange,u=void 0===n||n,l=e.children,c=function(){return{i18n:t,defaultComponent:r}},f=a.default.useState(c()),s=o.default(f,2),p=s[0],d=s[1];a.default.useEffect((function(){var e=t.on("change",(function(){return d(c())}));return function(){return e()}}),[]);var m=u&&t.locale;return u&&!m?null:a.default.createElement(i.Provider,{value:p,key:m},l)},exports.Trans=h,exports.useLingui=l;
 //# sourceMappingURL=react.production.min.js.map

cjs/Trans.d.ts

 import React from "react";
 export declare type TransRenderProps = {
-    id: string;
-    translation: React.ReactNode;
-    message: string | null;
+    id?: string;
+    translation?: React.ReactNode;
+    children?: string | any[] | React.ReactNode;
+    message?: string | null;
 };
-export declare type TransRenderType = string | React.ElementType<TransRenderProps> | React.ReactElement;
+export declare type TransRenderType = React.ComponentType<TransRenderProps> | React.ElementType<TransRenderProps>;
 export declare type TransProps = {
@@ -16,5 +17,6 @@ id: string;
     formats?: Object;
-    render?: TransRenderType;
+    component?: TransRenderType;
+    render?: (opts: TransRenderProps) => TransRenderType;
 };
-export declare function Trans(props: TransProps): string | any[] | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function Trans(props: TransProps): "symbol" | "object" | React.ComponentClass<TransRenderProps, any> | React.FunctionComponent<TransRenderProps> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | JSX.Element;
 export declare namespace Trans {
@@ -21,0 +23,0 @@ var defaultProps: {

package.json

 {
   "name": "@lingui/react",
-  "version": "3.0.0-18",
+  "version": "3.0.0-20",
   "description": "React components for translations",
@@ -43,3 +43,3 @@ "main": "index.js",
     "@babel/runtime": "^7.11.2",
-    "@lingui/core": "3.0.0-18"
+    "@lingui/core": "3.0.0-20"
   },
@@ -46,0 +46,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

26766

increased by25.12%

Lines of code

327

increased by20.66%

Dependency changes

• + Added@lingui/core@3.0.0-20(transitive)

• - Removed@lingui/core@3.0.0-18(transitive)

• Updated@lingui/core@3.0.0-20