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;