Skip to content

Commit

Permalink
fix(client-components): fix use hook with suspense (#68)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aralroca
aralroca authored Aug 4, 2023
1 parent f97522d commit 3d6a504
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 80 deletions.
192 changes: 120 additions & 72 deletions __tests__/__snapshots__/templateAppDir.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1744,7 +1744,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";

// Some comment before
Expand Down Expand Up @@ -1773,25 +1773,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/about/us/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand All @@ -1805,7 +1813,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";

// Some comment before
Expand Down Expand Up @@ -1834,25 +1842,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand All @@ -1866,7 +1882,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";

// Some comment before
Expand Down Expand Up @@ -1895,25 +1911,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand Down Expand Up @@ -1963,7 +1987,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";
import useTranslation from \\"next-translate/useTranslation\\";
export const dynamic = \\"force-static\\";
Expand All @@ -1987,25 +2011,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/about/us/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand All @@ -2019,7 +2051,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";
import useTranslation from \\"next-translate/useTranslation\\";
export const dynamic = \\"force-static\\";
Expand All @@ -2043,25 +2075,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand All @@ -2075,7 +2115,7 @@ import {
useSearchParams as __useSearchParams,
useParams as __useParams,
} from \\"next/navigation\\";
import { use as __use } from \\"react\\";
import { use as __use, Suspense as __Suspense } from \\"react\\";
import __loadNamespaces from \\"next-translate/loadNamespaces\\";
import useTranslation from \\"next-translate/useTranslation\\";
export const dynamic = \\"force-static\\";
Expand All @@ -2099,25 +2139,33 @@ export default function __Next_Translate_new__88d9831a00__(props) {
pathname: \\"/\\",
};

const { __lang, __namespaces } = __use(
__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})
return (
<__Suspense fallback={null}>
<__Next_Translate__child__88d9831a00__
{...props}
config={config}
promise={__loadNamespaces({
...config,
loadLocaleFrom:
__i18nConfig.loadLocaleFrom ||
((l, n) =>
import(\`@next-translate-root/locales/\${l}/\${n}\`).then(
(m) => m.default
)),
})}
/>
</__Suspense>
);
}

function __Next_Translate__child__88d9831a00__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = {
lang: __lang,
namespaces: { ...oldNamespaces, ...__namespaces },
config,
};

return <Page {...props} />;
}
"
Expand Down
24 changes: 16 additions & 8 deletions src/templateAppDir.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ function templateRCCPage({
import ${INTERNAL_CONFIG_KEY} from '@next-translate-root/i18n'
import AppDirI18nProvider from 'next-translate/AppDirI18nProvider'
import { useSearchParams as __useSearchParams, useParams as __useParams } from 'next/navigation'
import { use as __use } from 'react'
import { use as __use, Suspense as __Suspense } from 'react'
import __loadNamespaces from 'next-translate/loadNamespaces'
${clientCode}
Expand All @@ -178,14 +178,22 @@ function templateRCCPage({
pathname: '${pathname}',
}
const { __lang, __namespaces } = __use(__loadNamespaces({ ...config, ${addLoadLocalesFrom(
existLocalesFolder
)} }));
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {}
globalThis.__NEXT_TRANSLATE__ = { lang: __lang, namespaces: { ...oldNamespaces, ...__namespaces }, config }
return (
<__Suspense fallback={null}>
<__Next_Translate__child__${hash}__
{...props}
config={config}
promise={__loadNamespaces({ ...config, ${addLoadLocalesFrom(existLocalesFolder)} })}
/>
</__Suspense>
)
}
return <${pageVariableName} {...props} />
function __Next_Translate__child__${hash}__({ promise, config, ...props }) {
const { __lang, __namespaces } = __use(promise);
const oldNamespaces = globalThis.__NEXT_TRANSLATE__?.namespaces ?? {};
globalThis.__NEXT_TRANSLATE__ = { lang: __lang, namespaces: { ...oldNamespaces, ...__namespaces }, config };
return <${pageVariableName} {...props} />;
}
`
}

0 comments on commit 3d6a504

Please sign in to comment.