Fix loading namespaces when it has a withTranslation hoc (#301)

* Fix loading namespaces when it has a withTranslation hoc

* Add test case

* Fix tests

__tests__/hasHOC.test.js

@@ -18,6 +18,23 @@ describe('hasHOC', () => {
  `)
  ).toBe(true)
  })
+ test('with -> with withTranslation + another hoc', () => {
+ expect(
+ hasHOC(`
+ import withTranslation from 'next-translate/withTranslation'
+ import withWrapper from 'somewhere'
+
+ function Page() {
+ return <div>Hello world</div>
+ }
+
+ const anothervariable = withWrapper(Page);
+ const somevariable = anothervariable;
+ 
+ export default withTranslation(somevariable)
+ `)
+ ).toBe(true)
+ })
  test('with -> export default withWrapper(Page)', () => {
  expect(
  hasHOC(`
@@ -86,6 +103,71 @@ describe('hasHOC', () => {
  `)
  ).toBe(false)
  })
+ test('with -> export default somevariable', () => {
+ expect(
+ hasHOC(`
+ function Page() {
+ return <div>Hello world</div>
+ }
+ 
+ const somevariable = Page;
+ 
+ export default somevariable`)
+ ).toBe(false)
+ })
+ test('with -> export default Page + withFakeHOC', () => {
+ expect(
+ hasHOC(`
+ import useTranslation from 'next-translate/useTranslation'
+
+ const withFakeHOC = (C) => (p) => <C {...p} />
+
+ // Just for tests
+ function PageWithHOC() {
+ const { t } = useTranslation()
+ return <div>{t\`common:title\`}</div>
+ }
+
+ export default PageWithHOC
+ `)
+ ).toBe(false)
+ })
+ test('with -> with withTranslation', () => {
+ expect(
+ hasHOC(`
+ import useTranslation from 'next-translate/useTranslation'
+ import withTranslation from 'next-translate/withTranslation'
+
+ const withHOC = (C) => (p) => <C {...p} />
+
+ // Just for tests
+ function PageWithHOC() {
+ const { t } = useTranslation()
+ return <div>{t\`common:title\`}</div>
+ }
+
+ export default withTranslation(PageWithHOC)
+ `)
+ ).toBe(false)
+ })
+ test('with -> with renamed withTranslation', () => {
+ expect(
+ hasHOC(`
+ import useTranslation from 'next-translate/useTranslation'
+ import justI18nHoc from 'next-translate/withTranslation'
+
+ const withHOC = (C) => (p) => <C {...p} />
+
+ // Just for tests
+ function PageWithHOC() {
+ const { t } = useTranslation()
+ return <div>{t\`common:title\`}</div>
+ }
+
+ export default justI18nHoc(PageWithHOC)
+ `)
+ ).toBe(false)
+ })
  test('with -> it has getStaticProps', () => {
  expect(
  hasHOC(`
@@ -95,12 +177,34 @@ describe('hasHOC', () => {
  return <div>Hello world</div>
  }
 
- export const getStaticProps() {
+ export function getStaticProps() {
+ return {
+ props: {}
+ }
+ }
+
+ export default withWrapper(Page)
+ `)
+ ).toBe(false)
+ })
+
+ test('with -> it has getStaticProps exported as {}', () => {
+ expect(
+ hasHOC(`
+ import withWrapper from 'somewhere'
+
+ function Page() {
+ return <div>Hello world</div>
+ }
+
+ function getStaticProps() {
  return {
  props: {}
  }
  }
 
+ export { getStaticProps }
+
  export default withWrapper(Page)
  `)
  ).toBe(false)

cli/builder.js

@@ -3,6 +3,7 @@ const fs = require('fs')
 const path = require('path')
 const hasHOC = require('../_helpers/hasHOC').default
 const getPageNamespaces = require('../_helpers/getPageNamespaces').default
+const hasExportName = require('../_helpers/hasExportName').default
 
 let configFile = {}
 
@@ -213,17 +214,6 @@ ${exports}
 `
 }
 
-function hasExportName(data, name) {
- return (
- data.match(
- new RegExp(`export (const|var|let|async function|function) ${name}`)
- ) ||
- data.match(
- new RegExp(`export\\s*\\{[^}]*(?<!\\w)${name}(?!\\w)[^}]*\\}`, 'm')
- )
- )
-}
-
 function specialMethod(name, namespaces, prefix, loader = true) {
  if (name === 'getStaticPaths') {
  return `export const ${name} = ctx => _rest.${name}(ctx)`

package.json

@@ -1,6 +1,6 @@
 {
  "name": "next-translate",
- "version": "0.19.2",
+ "version": "0.19.3-canary.1",
  "description": "Next.js utility to translate pages in a easy way.",
  "license": "MIT",
  "keywords": [

src/_helpers/hasExportName.js

@@ -0,0 +1,10 @@
+export default function hasExportName(data, name) {
+ return (
+ data.match(
+ new RegExp(`export (const|var|let|async function|function) ${name}`)
+ ) ||
+ data.match(
+ new RegExp(`export\\s*\\{[^}]*(?<!\\w)${name}(?!\\w)[^}]*\\}`, 'm')
+ )
+ )
+}

src/_helpers/hasHOC.js

@@ -1,22 +1,36 @@
+import hasExportName from './hasExportName'
+
 /**
  * @description This is a helper is to check if the page is wrapped with a HOC or not. It is
  * assumed that "data" param is the code in string, where the comments have been previously
  * cleaned.
  *
  * @param {string} data
  */
-export default function hasHOC(data) {
- const hocRgx = new RegExp('[^\\(|\\| )]*\\([A-Z][^\\(|\\| )]*\\)')
+export default function hasHOC(rawData) {
+ const hocRgx = new RegExp('[^\\(|\\| )]+\\([A-Z][^\\(|\\| )]*\\)')
+ const hasWithTranslationHOC = new RegExp(
+ 'import *(\\w*) *.*from *.*next-translate\\/withTranslation.*'
+ )
 
- if (!data.includes('export default')) return false
+ if (!rawData.includes('export default')) return false
  if (
- new RegExp(
-  `export *(const|var|let|async function|function) *(getStaticProps|getServerSideProps|getStaticPaths)`
- ).test(data)
+ hasExportName(rawData, 'getStaticProps') ||
+ hasExportName(rawData, 'getServerSideProps') ||
+ hasExportName(rawData, 'getStaticPaths')
  ) {
  return false
  }
 
+ // Remove withTranslation hoc, in this case we can ensure that is not using
+ // a getInitialProps on the Page.
+ // Ex: "export default withTranslation(somevariable)" -> export default somevariable
+ const [, withTranslationName] = rawData.match(hasWithTranslationHOC) || []
+ const data = rawData.replace(
+ new RegExp(`${withTranslationName}\\(.*\\)`),
+ (d) => d.replace(new RegExp(`(${withTranslationName}|\\(|\\))`, 'g'), '')
+ )
+
  const exportedNormally = new RegExp(
  `export default (\\(.*\\) *=>|function)`
  ).test(data)