chore: consolidate Node releases data

.gitignore

@@ -16,6 +16,7 @@ build
 public/robots.txt
 public/sitemap.xml
 public/en/feed/*.xml
+public/node-releases-data.json
 pages/en/blog/year-[0-9][0-9][0-9][0-9].md
 
 # Jest

.prettierignore

@@ -13,6 +13,7 @@ CODEOWNERS
 public/en/user-survey-report
 public/static/documents
 public/static/legacy
+public/node-releases-data.json
 
 # We don't want to lint/prettify the Coverage Results
 coverage

.storybook/preview.tsx

@@ -1,11 +1,10 @@
 import type { Preview } from '@storybook/react';
 import NextImage from 'next/image';
 import { ThemeProvider } from 'next-themes';
-import { NodeDataProvider } from '../providers/nodeDataProvider';
+import { NodeReleasesProvider } from '../providers/nodeReleasesProvider';
 import { LocaleProvider } from '../providers/localeProvider';
 import { openSans } from '../util/nextFonts';
 import BaseApp, { setAppFont } from '../next.app';
-import { pageProps } from './constants';
 
 import '../styles/index.scss';
 
@@ -34,11 +33,11 @@ export const decorators = [
     <BaseApp>
       <ThemeProvider>
         <LocaleProvider>
-          <NodeDataProvider nodeVersionData={pageProps.nodeVersionData}>
+          <NodeReleasesProvider>
             <div data-test-id="story-root">
               <Story />
             </div>
-          </NodeDataProvider>
+          </NodeReleasesProvider>
         </LocaleProvider>
       </ThemeProvider>
     </BaseApp>

__fixtures__/nodeReleases.tsx

@@ -0,0 +1,97 @@
+import type { NodeRelease } from '../types';
+
+export const createNodeReleases = (): NodeRelease[] => [
+  {
+    currentStart: '2023-04-18',
+    ltsStart: '2023-10-24',
+    maintenanceStart: '2024-10-22',
+    endOfLife: '2026-04-30',
+    major: 20,
+    version: '20.2.0',
+    versionWithPrefix: 'v20.2.0',
+    codename: '',
+    isLts: false,
+    status: 'Current',
+    npm: '9.6.6',
+    v8: '11.3.244.8',
+    releaseDate: '2023-05-16',
+    modules: '115',
+  },
+  {
+    currentStart: '2022-10-18',
+    maintenanceStart: '2023-04-01',
+    endOfLife: '2023-06-01',
+    major: 19,
+    version: '19.9.0',
+    versionWithPrefix: 'v19.9.0',
+    codename: '',
+    isLts: false,
+    status: 'End-of-life',
+    npm: '9.6.3',
+    v8: '10.8.168.25',
+    releaseDate: '2023-04-10',
+    modules: '111',
+  },
+  {
+    currentStart: '2022-04-19',
+    ltsStart: '2022-10-25',
+    maintenanceStart: '2023-10-18',
+    endOfLife: '2025-04-30',
+    major: 18,
+    version: '18.16.0',
+    versionWithPrefix: 'v18.16.0',
+    codename: 'Hydrogen',
+    isLts: true,
+    status: 'Active LTS',
+    npm: '9.5.1',
+    v8: '10.2.154.26',
+    releaseDate: '2023-04-12',
+    modules: '108',
+  },
+  {
+    currentStart: '2021-10-19',
+    maintenanceStart: '2022-04-01',
+    endOfLife: '2022-06-01',
+    major: 17,
+    version: '17.9.1',
+    versionWithPrefix: 'v17.9.1',
+    codename: '',
+    isLts: false,
+    status: 'End-of-life',
+    npm: '8.11.0',
+    v8: '9.6.180.15',
+    releaseDate: '2022-06-01',
+    modules: '102',
+  },
+  {
+    currentStart: '2021-04-20',
+    ltsStart: '2021-10-26',
+    maintenanceStart: '2022-10-18',
+    endOfLife: '2023-09-11',
+    major: 16,
+    version: '16.20.0',
+    versionWithPrefix: 'v16.20.0',
+    codename: 'Gallium',
+    isLts: true,
+    status: 'Maintenance LTS',
+    npm: '8.19.4',
+    v8: '9.4.146.26',
+    releaseDate: '2023-03-28',
+    modules: '93',
+  },
+  {
+    currentStart: '2020-10-20',
+    maintenanceStart: '2021-04-01',
+    endOfLife: '2021-06-01',
+    major: 15,
+    version: '15.14.0',
+    versionWithPrefix: 'v15.14.0',
+    codename: '',
+    isLts: false,
+    status: 'End-of-life',
+    npm: '7.7.6',
+    v8: '8.6.395.17',
+    releaseDate: '2021-04-06',
+    modules: '88',
+  },
+];

components/Downloads/DownloadList.tsx

@@ -1,17 +1,15 @@
 import { FormattedMessage } from 'react-intl';
 import LocalizedLink from '../LocalizedLink';
 import { useNavigation } from '../../hooks/useNavigation';
-import type { NodeVersionData } from '../../types';
+import type { NodeRelease } from '../../types';
 import type { FC } from 'react';
 
-type DownloadListProps = Pick<NodeVersionData, 'node'>;
-
-const DownloadList: FC<DownloadListProps> = ({ node }) => {
+const DownloadList: FC<NodeRelease> = ({ versionWithPrefix }) => {
   const { getSideNavigation } = useNavigation();
 
   const [, ...downloadNavigation] = getSideNavigation('download', {
-    shaSums: { nodeVersion: node },
-    allDownloads: { nodeVersion: node },
+    shaSums: { nodeVersion: versionWithPrefix },
+    allDownloads: { nodeVersion: versionWithPrefix },
   });
 
   return (

components/Downloads/DownloadReleasesTable.tsx

@@ -2,55 +2,57 @@ import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import { getNodejsChangelog } from '../../util/getNodeJsChangelog';
 import { getNodeApiLink } from '../../util/getNodeApiLink';
-import type { ExtendedNodeVersionData } from '../../types';
+import { useNodeReleases } from '../../hooks/useNodeReleases';
 import type { FC } from 'react';
 
-type DownloadReleasesTableProps = { releases: ExtendedNodeVersionData[] };
+const DownloadReleasesTable: FC = () => {
+  const { releases } = useNodeReleases();
 
-const DownloadReleasesTable: FC<DownloadReleasesTableProps> = ({
-  releases,
-}) => (
-  <table id="tbVersions" className="download-table full-width">
-    <thead>
-      <tr>
-        <td>Version</td>
-        <td>LTS</td>
-        <td>Date</td>
-        <td>V8</td>
-        <td>npm</td>
-        <td>
-          NODE_MODULE_VERSION<Link href="#ref-1">[1]</Link>
-          <span id="backref-1"></span>
-        </td>
-        <td></td>
-      </tr>
-    </thead>
-    <tbody>
-      {releases.map((release, key) => (
-        <tr key={key}>
-          <td data-label="Version">Node.js {release.nodeNumeric}</td>
-          <td data-label="LTS">{release.ltsName}</td>
-          <td data-label="Date">
-            <time>{release.releaseDate}</time>
-          </td>
-          <td data-label="V8">{release.v8}</td>
-          <td data-label="npm">{release.npm}</td>
-          <td data-label="NODE_MODULE_VERSION">{release.modules}</td>
-          <td className="download-table-last">
-            <a href={`https://nodejs.org/download/release/${release.node}`}>
-              <FormattedMessage id="components.downloadReleasesTable.releases" />
-            </a>
-            <a href={getNodejsChangelog(release.node)}>
-              <FormattedMessage id="components.downloadReleasesTable.changelog" />
-            </a>
-            <a href={getNodeApiLink(release.node)}>
-              <FormattedMessage id="components.downloadReleasesTable.docs" />
-            </a>
+  return (
+    <table id="tbVersions" className="download-table full-width">
+      <thead>
+        <tr>
+          <td>Version</td>
+          <td>LTS</td>
+          <td>Date</td>
+          <td>V8</td>
+          <td>npm</td>
+          <td>
+            NODE_MODULE_VERSION<Link href="#ref-1">[1]</Link>
+            <span id="backref-1"></span>
           </td>
+          <td></td>
         </tr>
-      ))}
-    </tbody>
-  </table>
-);
+      </thead>
+      <tbody>
+        {releases.map(release => (
+          <tr key={release.major}>
+            <td data-label="Version">Node.js {release.version}</td>
+            <td data-label="LTS">{release.codename}</td>
+            <td data-label="Date">
+              <time>{release.releaseDate}</time>
+            </td>
+            <td data-label="V8">{release.v8}</td>
+            <td data-label="npm">{release.npm}</td>
+            <td data-label="NODE_MODULE_VERSION">{release.modules}</td>
+            <td className="download-table-last">
+              <a
+                href={`https://nodejs.org/download/release/${release.versionWithPrefix}`}
+              >
+                <FormattedMessage id="components.downloadReleasesTable.releases" />
+              </a>
+              <a href={getNodejsChangelog(release.versionWithPrefix)}>
+                <FormattedMessage id="components.downloadReleasesTable.changelog" />
+              </a>
+              <a href={getNodeApiLink(release.versionWithPrefix)}>
+                <FormattedMessage id="components.downloadReleasesTable.docs" />
+              </a>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
 
 export default DownloadReleasesTable;