feat: Update next-intl to support latest release (#1048)

* feat: Update `next-intl` to support latest release candidate (`getTranslations` & `t.markup`)

* Update examples/by-frameworks/next-intl/package.json

Co-authored-by: Robin Louarn <[email protected]>

* Support object form of `getTranslations` (h/t @ixartz)

---------

Co-authored-by: Robin Louarn <[email protected]>

Author: amannn

examples/by-frameworks/next-intl/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "next": "^13.4.0",
-    "next-intl": "3.0.0-beta.17",
+    "next-intl": "3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/by-frameworks/next-intl/src/app/[locale]/GetTranslationsTest1.tsx

@@ -0,0 +1,6 @@
+import { getTranslations } from 'next-intl/server'
+
+export default async function GetTranslationsTest1() {
+  const t = await getTranslations()
+  return <p>{t('IndexPage.title')}</p>
+}

examples/by-frameworks/next-intl/src/app/[locale]/GetTranslationsTest2.tsx

@@ -0,0 +1,6 @@
+import { getTranslations } from 'next-intl/server'
+
+export default async function GetTranslationsTest2() {
+  const t = await getTranslations('IndexPage')
+  return <p>{t('title')}</p>
+}

examples/by-frameworks/next-intl/src/app/[locale]/GetTranslationsTest3.tsx

@@ -0,0 +1,9 @@
+import { getTranslations } from 'next-intl/server'
+
+export default async function GetTranslationsTest3() {
+  const t = await getTranslations({
+    locale: 'en',
+    namespace: 'IndexPage',
+  })
+  return <p>{t('title')}</p>
+}

examples/by-frameworks/next-intl/src/app/[locale]/UseTranslationsTest1.tsx

@@ -0,0 +1,6 @@
+import { useTranslations } from 'next-intl'
+
+export default function UseTranslationsTest1() {
+  const t = useTranslations('Test')
+  return <p>{t('title')}</p>
+}

examples/by-frameworks/next-intl/src/app/[locale]/UseTranslationsTest2.tsx

@@ -0,0 +1,6 @@
+import { useTranslations } from 'next-intl'
+
+export default function UseTranslationsTest2() {
+  const t = useTranslations()
+  return <p>{t('Test.title')}</p>
+}

examples/by-frameworks/next-intl/src/app/[locale]/page.tsx

@@ -1,9 +1,14 @@
 
 import { useTranslations } from 'next-intl'
-import { getTranslator } from 'next-intl/server'
+import { getTranslations } from 'next-intl/server'
+import UseTranslationsTest1 from './UseTranslationsTest1'
+import UseTranslationsTest2 from './UseTranslationsTest2'
+import GetTranslationsTest1 from './GetTranslationsTest1'
+import GetTranslationsTest2 from './GetTranslationsTest2'
+import GetTranslationsTest3 from './GetTranslationsTest3'
 
 export async function generateMetadata({ params: { locale } }) {
-  const t = await getTranslator(locale, 'Metadata')
+  const t = await getTranslations({ locale, namespace: 'Metadata' })
 
   return {
     title: t('title'),
@@ -15,36 +20,36 @@ export default function IndexPage() {
 
   t('title')
   t.rich('title')
+  t.markup('title')
   t.raw('title')
 
   return (
     <div>
       <h1>{t('title')}</h1>
       <p>{t('description')}</p>
-      <Test1 />
-      <Test2 />
-      <Test3 />
-      <Test4 />
+      <UseTranslationsTest1 />
+      <UseTranslationsTest2 />
+      <GetTranslationsTest1 />
+      <GetTranslationsTest2 />
+      <GetTranslationsTest3 />
+      <InlineTest1 />
+      <InlineTest2 />
+      <InlineTest3 />
     </div>
   )
 }
 
-function Test1() {
+function InlineTest1() {
   const t = useTranslations('Test')
   return <p>{t('title')}</p>
 }
 
-function Test2() {
-  const t = useTranslations()
-  return <p>{t('Test.title')}</p>
-}
-
-function Test3() {
-  const t = useTranslations('Test')
+function InlineTest2() {
+  const t = useTranslations('IndexPage')
   return <p>{t('title')}</p>
 }
 
-function Test4() {
-  const t = useTranslations()
-  return <p>{t('IndexPage.title')}</p>
+async function InlineTest3() {
+  const t = await getTranslations('Test')
+  return <p>{t('title')}</p>
 }

src/frameworks/next-intl.ts

@@ -33,6 +33,9 @@ class NextIntlFramework extends Framework {
     // Rich text
     '[^\\w\\d]t\\s*\.rich\\s*\\(\\s*[\'"`]({key})[\'"`]',
 
+    // Markup text
+    '[^\\w\\d]t\\s*\.markup\\s*\\(\\s*[\'"`]({key})[\'"`]',
+
     // Raw text
     '[^\\w\\d]t\\s*\.raw\\s*\\(\\s*[\'"`]({key})[\'"`]',
   ]
@@ -79,10 +82,11 @@ class NextIntlFramework extends Framework {
     const ranges: ScopeRange[] = []
     const text = document.getText()
 
-    // Find matches of `useTranslations` and `getTranslator`. Later occurences will
+    // Find matches of `useTranslations` and `getTranslations`. Later occurences will
     // override previous ones (this allows for multiple components with different
-    // namespaces in the same file).
-    const regex = /(useTranslations\(\s*|getTranslator\(.*,\s*)(['"`](.*?)['"`])?/g
+    // namespaces in the same file). Note that `getTranslations` can either be called
+    // with a single string argument or an object with a `namespace` key.
+    const regex = /(useTranslations\(\s*|getTranslations\(\s*|namespace:\s+)(['"`](.*?)['"`])?/g
     let prevGlobalScope = false
     for (const match of text.matchAll(regex)) {
       if (typeof match.index !== 'number')