Refracto: update more code to ts

CODEOWNERS

@@ -7,7 +7,7 @@
 
 # Framework
 app/site/next.config.mjs @nodejs/web-infra
-app/site/next.dynamic.mjs @nodejs/web-infra
+app/site/next.dynamic.ts @nodejs/web-infra
 
 # Node.js Release Blog Posts
 app/site/pages/en/blog/release @nodejs/releasers

COLLABORATOR_GUIDE.md

@@ -333,7 +333,7 @@ This is to ensure that the Website is always available and that we do not depend
 
 (For example, if we abandon Vercel, our Website should still completely work as standalone as possible)
 
-#### What is `next.dynamic.mjs`?
+#### What is `next.dynamic.ts`?
 
 Our whole Website uses a custom renderer for rendering the pages.
 As you might have seen, within the `apps/site/pages` directory we have [Next.js Dynamic Route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) named `[...path].tsx` that matches against all possible routes of the Website.
@@ -342,7 +342,7 @@ This means that each `.md(x)` file within `apps/site/pages/` is not rendered by
 
 This custom render uses `getStaticPaths` and [Incremental Static Generation](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) to generate the full list of supported pages of the Website.
 For example, this allows us to generate Localized Pages for every page that is not translated, by telling Next.js to create a localised path.
-`next.dynamic.mjs` is responsible for getting a full list of the source pages (`apps/site/pages/en`) and identifying which pages have been translated.
+`next.dynamic.ts` is responsible for getting a full list of the source pages (`apps/site/pages/en`) and identifying which pages have been translated.
 
 Non-translated pages will have their Localized contexts and translated React message-bags (`next-intl`) but the content will be the same as the source page (English).
 Whereas localized pages will have localized context and content.

apps/site/app/[locale]/[[...path]]/page.tsx

@@ -7,14 +7,15 @@ import { setClientContext } from '@/client-context';
 import { MDXRenderer } from '@/components/mdxRenderer';
 import WithLayout from '@/components/withLayout';
 import { ENABLE_STATIC_EXPORT, VERCEL_REVALIDATE } from '@/next.constants.mjs';
-import { PAGE_VIEWPORT, DYNAMIC_ROUTES } from '@/next.dynamic.constants.mjs';
-import { dynamicRouter } from '@/next.dynamic.mjs';
+import { dynamicRouter } from '@/next.dynamic';
+import { PAGE_VIEWPORT, DYNAMIC_ROUTES } from '@/next.dynamic.constants';
 import {
   allLocaleCodes,
   availableLocaleCodes,
   defaultLocale,
 } from '@/next.locales.mjs';
 import { MatterProvider } from '@/providers/matterProvider';
+import type { Layouts } from '@/types';
 
 type DynamicStaticPaths = { path: Array<string>; locale: string };
 type DynamicParams = { params: DynamicStaticPaths };
@@ -37,7 +38,7 @@ export const generateMetadata = async ({ params }: DynamicParams) => {
 const mapRoutesForLocale = async (locale: string) => {
   const routesForLanguage = await dynamicRouter.getRoutesByLanguage(locale);
 
-  return routesForLanguage.map(pathname =>
+  return routesForLanguage.map((pathname: string) =>
     dynamicRouter.mapPathToRoute(locale, pathname)
   );
 };
@@ -155,7 +156,7 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
     // within a server-side context
     return (
       <MatterProvider {...sharedContext}>
-        <WithLayout layout={frontmatter.layout}>
+        <WithLayout layout={frontmatter.layout as Layouts}>
           <MDXRenderer Component={MDXContent} />
         </WithLayout>
       </MatterProvider>

apps/site/app/[locale]/next-data/page-data/route.ts

@@ -3,7 +3,7 @@ import { deflateSync } from 'node:zlib';
 import matter from 'gray-matter';
 
 import { VERCEL_REVALIDATE } from '@/next.constants.mjs';
-import { dynamicRouter } from '@/next.dynamic.mjs';
+import { dynamicRouter } from '@/next.dynamic';
 import { defaultLocale } from '@/next.locales.mjs';
 import { parseRichTextIntoPlainText } from '@/util/stringUtils';
 

apps/site/app/sitemap.ts

@@ -5,7 +5,7 @@ import {
   BASE_URL,
   EXTERNAL_LINKS_SITEMAP,
 } from '@/next.constants.mjs';
-import { dynamicRouter } from '@/next.dynamic.mjs';
+import { dynamicRouter } from '@/next.dynamic';
 import { availableLocaleCodes, defaultLocale } from '@/next.locales.mjs';
 
 // This is the combination of the Application Base URL and Base PATH

apps/site/components/Common/ActiveLink/__tests__/index.test.mjs

@@ -5,8 +5,8 @@ import { VERSION_SUPPORT_SHORTCUT } from '@/next.constants.mjs';
 import ActiveLink from '..';
 
 // mock usePathname, but retain all the other imports
-jest.mock('@/navigation.mjs', () => ({
-  ...jest.requireActual('@/navigation.mjs'),
+jest.mock('@/navigation', () => ({
+  ...jest.requireActual('@/navigation'),
   usePathname: jest.fn(),
 }));
 
@@ -48,7 +48,7 @@ describe('ActiveLink', () => {
   });
 
   it('does not set active class when href base does not match', () => {
-    const { usePathname } = require('@/navigation.mjs');
+    const { usePathname } = require('@/navigation');
     usePathname.mockReturnValue('/not-link/sublink');
 
     render(
@@ -66,7 +66,7 @@ describe('ActiveLink', () => {
   });
 
   it('sets active class when href is other than VERSION_SUPPORT_SHORTCUT', () => {
-    const { usePathname } = require('@/navigation.mjs');
+    const { usePathname } = require('@/navigation');
     usePathname.mockReturnValue('/link/sublink');
 
     render(
@@ -87,7 +87,7 @@ describe('ActiveLink', () => {
   });
 
   it('does not set active class when href is VERSION_SUPPORT_SHORTCUT', () => {
-    const { usePathname } = require('@/navigation.mjs');
+    const { usePathname } = require('@/navigation');
     usePathname.mockReturnValue(VERSION_SUPPORT_SHORTCUT);
 
     render(

apps/site/components/Common/ActiveLink/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '@/components/Link';
-import { usePathname } from '@/navigation.mjs';
+import { usePathname } from '@/navigation';
 import { VERSION_SUPPORT_SHORTCUT } from '@/next.constants.mjs';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {

apps/site/components/Common/CodeTabs/index.tsx

@@ -2,7 +2,7 @@ import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import Tabs from '@/components/Common/Tabs';
-import { Link } from '@/navigation.mjs';
+import { Link } from '@/navigation';
 
 import styles from './index.module.css';
 

apps/site/components/Common/FormattedTime.tsx

@@ -2,7 +2,7 @@ import type { DateTimeFormatOptions } from 'next-intl';
 import { useFormatter } from 'next-intl';
 import type { FC } from 'react';
 
-import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
+import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants';
 
 type FormattedTimeProps = {
   date: string | Date;

apps/site/components/Common/Search/States/WithSearchBox.tsx

@@ -16,7 +16,7 @@ import { WithPoweredBy } from '@/components/Common/Search/States/WithPoweredBy';
 import { WithSearchResult } from '@/components/Common/Search/States/WithSearchResult';
 import Tabs from '@/components/Common/Tabs';
 import { useClickOutside, useKeyboardCommands } from '@/hooks/react-client';
-import { useRouter } from '@/navigation.mjs';
+import { useRouter } from '@/navigation';
 import { DEFAULT_ORAMA_QUERY_PARAMS } from '@/next.constants.mjs';
 import { search as oramaSearch, getInitialFacets } from '@/next.orama.mjs';
 import type { SearchDoc } from '@/types';

apps/site/components/Downloads/ChangelogModal/index.stories.tsx

@@ -3,7 +3,7 @@ import { VFile } from 'vfile';
 
 import ChangelogModal from '@/components/Downloads/ChangelogModal';
 import { MDXRenderer } from '@/components/mdxRenderer';
-import { compileMDX } from '@/next.mdx.compiler.mjs';
+import { compileMDX } from '@/next.mdx.compiler';
 import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
 
 type Story = StoryObj<typeof ChangelogModal>;

apps/site/components/Link.tsx

@@ -1,6 +1,6 @@
 import type { FC, ComponentProps } from 'react';
 
-import { Link as LocalizedLink } from '@/navigation.mjs';
+import { Link as LocalizedLink } from '@/navigation';
 
 type LinkProps = Omit<ComponentProps<typeof LocalizedLink>, 'href'> & {
   href?: string;

apps/site/components/MDX/Calendar/UpcomingMeetings.tsx

@@ -3,8 +3,8 @@ import type { FC } from 'react';
 import FormattedTime from '@/components/Common/FormattedTime';
 import Event from '@/components/MDX/Calendar/Event';
 import { getZoomLink, isZoned } from '@/components/MDX/Calendar/utils';
-import { CALENDAR_NODEJS_ID } from '@/next.calendar.constants.mjs';
-import { getCalendarEvents } from '@/next.calendar.mjs';
+import { getCalendarEvents } from '@/next.calendar';
+import { CALENDAR_NODEJS_ID } from '@/next.calendar.constants';
 import type { CalendarEvent } from '@/types';
 
 import styles from './calendar.module.css';

apps/site/components/MDX/CodeBox/index.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import { VFile } from 'vfile';
 
 import { MDXRenderer } from '@/components/mdxRenderer';
-import { compileMDX } from '@/next.mdx.compiler.mjs';
+import { compileMDX } from '@/next.mdx.compiler';
 
 type Props = { children: string };
 

apps/site/components/MDX/CodeTabs/index.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import { VFile } from 'vfile';
 
 import { MDXRenderer } from '@/components/mdxRenderer';
-import { compileMDX } from '@/next.mdx.compiler.mjs';
+import { compileMDX } from '@/next.mdx.compiler';
 
 type Props = { children: string };
 

apps/site/components/mdxRenderer.tsx

@@ -1,8 +1,8 @@
 import type { MDXComponents, MDXContent } from 'mdx/types';
 import type { FC } from 'react';
 
-import { htmlComponents, clientMdxComponents } from '@/next.mdx.use.client.mjs';
-import { mdxComponents } from '@/next.mdx.use.mjs';
+import { mdxComponents } from '@/next.mdx.use';
+import { htmlComponents, clientMdxComponents } from '@/next.mdx.use.client';
 
 // Combine all MDX Components to be used
 const combinedComponents: MDXComponents = {

apps/site/components/withChangelogModal.tsx

@@ -6,8 +6,8 @@ import { VFile } from 'vfile';
 
 import ChangelogModal from '@/components/Downloads/ChangelogModal';
 import changelogData from '@/next-data/changelogData';
-import { compileMDX } from '@/next.mdx.compiler.mjs';
-import { clientMdxComponents, htmlComponents } from '@/next.mdx.use.client.mjs';
+import { compileMDX } from '@/next.mdx.compiler';
+import { clientMdxComponents, htmlComponents } from '@/next.mdx.use.client';
 import type { NodeRelease } from '@/types';
 import {
   getNodeJsChangelogAuthor,

apps/site/components/withMetaBar.tsx

@@ -8,7 +8,7 @@ import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
 import { useClientContext } from '@/hooks/react-client';
 import useMediaQuery from '@/hooks/react-client/useMediaQuery';
-import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants.mjs';
+import { DEFAULT_DATE_FORMAT } from '@/next.calendar.constants';
 import { getGitHubBlobUrl, getGitHubAvatarUrl } from '@/util/gitHubUtils';
 
 const WithMetaBar: FC = () => {

apps/site/components/withNavBar.tsx

@@ -7,7 +7,7 @@ import type { FC } from 'react';
 import NavBar from '@/components/Containers/NavBar';
 import WithBanner from '@/components/withBanner';
 import { useClientContext, useSiteNavigation } from '@/hooks';
-import { useRouter } from '@/navigation.mjs';
+import { useRouter } from '@/navigation';
 import { availableLocales } from '@/next.locales.mjs';
 
 const WithNavBar: FC = () => {

apps/site/components/withRouterSelect.tsx

@@ -3,7 +3,7 @@
 import type { ComponentProps, FC } from 'react';
 
 import Select from '@/components/Common/Select';
-import { useRouter } from '@/navigation.mjs';
+import { useRouter } from '@/navigation';
 
 type WithSidebarSelectProps = Pick<
   ComponentProps<typeof Select>,

apps/site/middleware.ts

@@ -13,7 +13,7 @@ export default createMiddleware({
   localePrefix: 'always',
 
   // We already have our own way of providing alternate links
-  // generated on `next.dynamic.mjs`
+  // generated on `next.dynamic.ts`
   alternateLinks: false,
 });
 

apps/site/navigation.mjs → apps/site/navigation.ts

@@ -1,5 +1,3 @@
-'use strict';
-
 import { createSharedPathnamesNavigation } from 'next-intl/navigation';
 
 import { availableLocaleCodes } from './next.locales.mjs';