fix: import date-number from i18n instance

Author: Sergio

transforms/__testfixtures__/v2-to-v3/changeMacrosToCore.input.js

@@ -1,2 +1,3 @@
 import { React } from "react";
-import { t, date } from "@lingui/macro";
+import { t, date } from "@lingui/macro";
+import { Trans, NumberFormat } from "@lingui/react";

transforms/__testfixtures__/v2-to-v3/changeMacrosToCore.output.js

@@ -1,3 +1,3 @@
 import { React } from "react";
-import { date } from "@lingui/core";
-import { t } from "@lingui/macro";
+import { i18n } from "@lingui/core";
+import { t, Trans } from "@lingui/macro";

transforms/__testfixtures__/v2-to-v3/complete.input.js

@@ -2,7 +2,7 @@ import React from "react";
 import { NumberFormat, DateFormat, Trans, withI18n } from "@lingui/react"
 import { plural } from "@lingui/macro"
 
-const App = ({ i18n }) => {
+const App = () => {
   return (
     <div>
       <div>

transforms/__testfixtures__/v2-to-v3/complete.output.js

@@ -1,16 +1,16 @@
 import React from "react";
-import { number, date } from "@lingui/core";
+import { i18n } from "@lingui/core";
 import { withI18n } from "@lingui/react";
 import { plural, Trans } from "@lingui/macro";
 
-const App = ({ i18n }) => {
+const App = () => {
   return (
     <div>
       <div>
-        {number(1_000_000, { currency: "EUR" })}
+        {i18n.number(1_000_000, { currency: "EUR" })}
       </div>
       <div>
-        {date(new Date(), { hour12: true })}
+        {i18n.date(new Date(), { hour12: true })}
       </div>
       <Trans>Component to replace</Trans>
       {/* TODO: if there isn't any with children we should keep lingui/react  */}

transforms/__testfixtures__/v2-to-v3/jsxTransformMacros.input.js

@@ -2,6 +2,7 @@ import React from "react";
 import { DateFormat, NumberFormat } from "@lingui/react";
 
 const GLOBAL_VALUE = new Date();
+
 const App = () => {
   return (
     <div>
@@ -13,6 +14,26 @@ const App = () => {
         style: "currency",
         maximumFractionDigits: 2
       }} />
+      {true ? (
+        <NumberFormat value={10} format={{
+          style: "currency",
+          maximumFractionDigits: 2
+        }} />
+      ) : false}
     </div>
   );
-}
+}
+
+const formatfValue = (value) => {
+  return (
+    <NumberFormat value={10} format={{ style: "currency", maximumFractionDigits: 2 }} />
+  )
+};
+
+const formatAssetValue = (value) => {
+  if (value !== null) {
+    const formatValue = <NumberFormat value={value} format={{style: "percent", minimumFractionDigits: 2 }} />;
+    return formatValue;
+  }
+  return "-";
+};

transforms/__testfixtures__/v2-to-v3/jsxTransformMacros.output.js

@@ -1,18 +1,37 @@
 import React from "react";
-import { number, date } from "@lingui/core";
+import { i18n } from "@lingui/core";
 
 const GLOBAL_VALUE = new Date();
+
 const App = () => {
   return (
     <div>
-      {date(new Date(), { hour12: true })}
-      {date(new Date())}
-      {date(GLOBAL_VALUE)}
-      {date("10/01/2015")}
-      {number(10, {
+      {i18n.date(new Date(), { hour12: true })}
+      {i18n.date(new Date())}
+      {i18n.date(GLOBAL_VALUE)}
+      {i18n.date("10/01/2015")}
+      {i18n.number(10, {
         style: "currency",
         maximumFractionDigits: 2
       })}
+      {true ? (
+        i18n.number(10, {
+          style: "currency",
+          maximumFractionDigits: 2
+        })
+      ) : false}
     </div>
   );
 }
+
+const formatfValue = (value) => {
+  return (i18n.number(10, { style: "currency", maximumFractionDigits: 2 }));
+};
+
+const formatAssetValue = (value) => {
+  if (value !== null) {
+    const formatValue = i18n.number(value, {style: "percent", minimumFractionDigits: 2 });
+    return formatValue;
+  }
+  return "-";
+};

transforms/v2-to-v3.ts

@@ -25,11 +25,11 @@ function changeJsxToCoreDeprecatedFuncs(root, j: JSCodeshift) {
   [
     {
       component: "DateFormat",
-      macro: "date"
+      macro: "i18n.date"
     },
     {
       component: "NumberFormat",
-      macro: "number"
+      macro: "i18n.number"
     }
   ].forEach(mapper => {
     root
@@ -60,7 +60,17 @@ function changeJsxToCoreDeprecatedFuncs(root, j: JSCodeshift) {
       }
 
       // if someone uses the components inside ternaries we can't add {number()}, must be just number()
-      return path.parentPath.value.type === "ConditionalExpression" ? ast : j.jsxExpressionContainer(ast);
+      if (path.parentPath.value.type === "ConditionalExpression" || path.parentPath.value.type === "VariableDeclarator") {
+        return ast
+      }
+
+      // if is a direct return, just add parenthesis
+      if (path.parentPath.value.type === "ReturnStatement") {
+        return j.parenthesizedExpression(ast);
+      }
+
+      // if not, just add {}
+      return j.jsxExpressionContainer(ast);
     });
   })
 
@@ -80,8 +90,8 @@ function changeReactImportToNewImports(root: Collection  , j: JSCodeshift) {
   });
 
   migrateTo(root, linguiReactImports, j, "Trans", "Trans", "@lingui/macro");
-  migrateTo(root, linguiReactImports, j, "NumberFormat", "number", "@lingui/core");
-  migrateTo(root, linguiReactImports, j, "DateFormat", "date", "@lingui/core");
+  migrateTo(root, linguiReactImports, j, "NumberFormat", "i18n", "@lingui/core");
+  migrateTo(root, linguiReactImports, j, "DateFormat", "i18n", "@lingui/core");
 }
 
 /**
@@ -96,8 +106,8 @@ function changeFromMacroToCore(root: Collection  , j: JSCodeshift) {
   });
 
   migrateTo(root, linguiMacroImports, j, "number", "number", "@lingui/core");
-  migrateTo(root, linguiMacroImports, j, "date", "date", "@lingui/core");
-  migrateTo(root, linguiMacroImports, j, "NumberFormat", "number", "@lingui/core");
+  migrateTo(root, linguiMacroImports, j, "date", "i18n", "@lingui/core");
+  migrateTo(root, linguiMacroImports, j, "NumberFormat", "i18n", "@lingui/core");
 }
 
 /**
@@ -120,8 +130,10 @@ function migrateTo(root, linguiReactImports, j, lookupImport, newLookupImport, n
       value: newPackageName
     }
   });
+
   linguiReactImports.forEach((path) => {
     const node = path.value;
+    if (!node) return;
     const transImportIndex = node.specifiers.findIndex((el) => el.imported.name === lookupImport);
 
     if (transImportIndex !== -1) {