performance, bundle and standardisation changes (nodejs#5999)

* meta: changed to node.js v20

* meta: removed unnecessary packages

* meta: use only mdast-autolink-literals as we don't really care about gfm

* meta: optimize barrel files

* meta: remove unused languages that have big bundle footprint

* chore: still use v18 for deployment

* fix: forgot to remove remark-gfm

* meta: removed unused remarkrc file

* chore: use jest module-mapper for mocks

* meta: removed unused fixture

* chore: jest env for mocks

* chore: add reasoning why we don't use

* Apply suggestions from code review

Co-authored-by: Brian Muenzenmeyer <[email protected]>
Signed-off-by: Claudio W <[email protected]>

---------

Signed-off-by: Claudio W <[email protected]>
Co-authored-by: Brian Muenzenmeyer <[email protected]>

.eslintrc.json

@@ -10,7 +10,7 @@
       "extends": "plugin:storybook/recommended"
     },
     {
-      "files": ["**/__tests__/*.mjs", "__mocks__/*.mjs"],
+      "files": ["**/{__tests__,__mocks__}/*.mjs"],
       "env": { "jest": true }
     },
     {

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+20

COLLABORATOR_GUIDE.md

@@ -430,6 +430,12 @@ The Node.js Website uses Tailwind as a CSS Framework for crafting our React Comp
 We use `next/fonts` Open Sans as the default font for the Node.js Website.
 The font is configured as a CSS variable and then configured on `tailwind.config.js` as the default font for the Website.
 
+#### Why we use RadixUI?
+
+- It is a minimalistic component library broken down in individual packages for each Component
+- It already handles all WAI-ARIA and Accessibility shortcuts/bindings needed for Interactive Elements
+- It allows us to focus on designing interactive Components without the effort of adding all the surrounding sugar and code needed to make the Component accessibility-friendly.
+
 ### Why MDX?
 
 MDX is an extension on Markdown that allows us to add JSX Components within Markdown.
@@ -476,11 +482,30 @@ Defining a `.vscode` configuration like this also aides browser-only development
 
 The npm ecosystem resolution and installation of `peerDependencies` installation [changed in recent versions](https://nodejs.org/en/blog/npm/peer-dependencies#using-peer-dependencies). The project documents what version of `Node.js` and `npm` to use via the [`.nvmrc` file](https://github.com/nodejs/nodejs.org/blob/main/.nvmrc). Not all contributors have tooling to automatically read this file and adhere to the correct version, however. To ensure all contributors install dependencies the same way, a local `.npmrc` file directly configures peerDependency installation behavior.
 
-### Why we use RadixUI?
+### Why we don't use [`remark-preset-lint-node`](https://github.com/nodejs/remark-preset-lint-node)?
 
-- It is a minimalistic component library broken down in individual packages for each Component
-- It already handles all WAI-ARIA and Accessibility shortcuts/bindings needed for Interactive Elements
-- It allows us to focus on designing interactive Components without the effort of adding all the surrounding sugar and code needed to make the Component accessibility-friendly.
+The Node.js GitHub organisation owns an in-house remark preset (set of rules and plugins) that standardises the contents of Markdown files across the GitHub organisation.
+This package uses `remark` plugins such as `remark-gfm`, and it has rules such as forbidden words, maximum line-length of Markdown content, and many very specific rules.
+
+This preset is used within Node.js Development tooling itself (within `make`) and it used as a one-off script to lint the Markdown files within the `nodejs/node` repository.
+(The same preset is also used within `nodejs/node` CI).
+
+Whilst that preset has a lot of value, it is not suitable for the Node.js Website. One of the main reasons are that it inheritedly conflicts with `prettier` and with `mdx-js`,
+which causes issues from ensuring that Markdown and MDX files are correctly linted, formatted and parsed. Not to mention that these amount of rules, greatly increase the running time of ESLint.
+
+Hence, we decided to not use this preset and instead use a more minimalistic approach to linting Markdown files. Which means that we follow the default recommended `remark-lint`, `mdx-js` and `commonmark`
+linting and formatting rules, plus the formatting rules enforced by prettier.
+
+We also decided to not use `remark-gfm` as we want to support the basic CommonMark standard for Markdown files, and the default MDX standard for MDX files.
+Having that said, there's one exception, as we use [`autolink-literal`](mdast-util-gfm-autolink-literal) for transforming literal links (text) into anchor elements, which is part of the GitHub Flavoured Markdown specification.
+
+Finally, as the Node.js Website grows, we have thousands of Markdown files, meaning the more rules we add, the more time it takes to lint and format the Markdown files. And the greater the chance is
+for the standard adopted on the `nodejs/node` repository to deviate from standard spec-compliant CommonMark. The Node.js Website uses a default recommended configuration that enforces our Markdown files to be spec-compliant.
+
+It's important to mention that this repository is compatible with Markdown files from `nodejs/node` as our formatting is way less strict.
+We also have rules in-place (for example in the release blog post generation) that ensure that Markdown files that are "loaded" from `nodejs/node` are compatible when created.
+
+Also note that our goal is to fully support any Markdown file incoming from `nodejs/node` and that originates from the `remark-preset-lint-node`. Our goal is to support our fellow collaborators and to ensure that the Node.js Website is fully compatible with the Node.js project.
 
 ## Seeking additional clarification
 

components/__mocks__/next-router.mjs

@@ -0,0 +1,4 @@
+export const useRouter = () => ({
+  isReady: true,
+  asPath: '/',
+});

jest.config.mjs

@@ -12,6 +12,9 @@ const customJestConfig = {
   testMatch: ['**/__tests__/*.test.mjs'],
   coverageReporters: ['json', 'json-summary'],
   reporters: ['default', 'jest-junit'],
+  moduleNameMapper: {
+    'next/router': '<rootDir>/components/__mocks__/next-router.mjs',
+  },
 };
 
 export default createJestConfig(customJestConfig);

jest.setup.mjs

@@ -1,2 +1 @@
 import '@testing-library/jest-dom';
-import './__mocks__/nextJsRouter.mjs';

next.config.mjs

@@ -39,6 +39,14 @@ const nextConfig = {
     // since we pass the fully-compiled MDX page from `MDXRemote` through
     // a page's static props.
     largePageDataBytes: 128 * 100000,
+    // A list of packages that Next.js should automatically evaluate and optimise the imports for.
+    // @see https://vercel.com/blog/how-we-optimized-package-imports-in-next-js
+    optimizePackageImports: [
+      '@radix-ui/react-avatar',
+      '@radix-ui/react-select',
+      '@radix-ui/react-toast',
+      'tailwindcss',
+    ],
   },
 };
 

next.dynamic.mjs

@@ -8,14 +8,14 @@ import { serialize } from 'next-mdx-remote/serialize';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
-import remarkGfm from 'remark-gfm';
 import { getHighlighter } from 'shiki';
 import shikiNordTheme from 'shiki/themes/nord.json';
 import { VFile } from 'vfile';
 
 import { DEFAULT_LOCALE_CODE, MD_EXTENSION_REGEX } from './next.constants.mjs';
 import { getMarkdownFiles } from './next.helpers.mjs';
 import { availableLocales } from './next.locales.mjs';
+import { remarkAutoLinkLiteral } from './next.mdast.mjs';
 import { SUPPORTED_LANGUAGES } from './shiki.config.mjs';
 
 // allows us to run a glob to get markdown files based on a language folder
@@ -178,7 +178,7 @@ export const generateStaticProps = async (source = '', filename = '') => {
             },
           ],
         ],
-        remarkPlugins: [remarkHeadings, remarkGfm],
+        remarkPlugins: [remarkHeadings, remarkAutoLinkLiteral],
         format: filename.includes('.mdx') ? 'mdx' : 'md',
       },
     });

next.mdast.mjs

@@ -0,0 +1,25 @@
+'use strict';
+
+/// <reference types="remark-parse" />
+/// <reference types="remark-stringify" />
+
+/**
+ * @typedef {import('mdast').Root} Root
+ * @typedef {import('unified').Processor<Root>} Processor
+ */
+
+import * as autoLinkLiteral from 'mdast-util-gfm-autolink-literal';
+
+// This must be a `function` export for `this` context;
+export function remarkAutoLinkLiteral() {
+  const self = /** @type {Processor} */ (this);
+  const data = self.data();
+
+  const fromMarkdownExtensions =
+    data.fromMarkdownExtensions || (data.fromMarkdownExtensions = []);
+  const toMarkdownExtensions =
+    data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
+
+  fromMarkdownExtensions.push(autoLinkLiteral.gfmAutolinkLiteralFromMarkdown());
+  toMarkdownExtensions.push(autoLinkLiteral.gfmAutolinkLiteralToMarkdown());
+}