Skip to content

Commit

Permalink
chore: consolidate Node releases data (#5365)
Browse files Browse the repository at this point in the history 
* chore: update fields' name

version -> major
fullVersion -> version
initialRelease -> currentStart

* chore: add script to generate Node releases data

* chore: add Node releases data provider and hooks

* chore: add fields from NodeVersionData

* chore: replace NodeVersionData usages

* chore: add files to .prettierignore

* chore: add Node releases data fixture

* refactor: change to inline conditional rendering

* chore: don't fallback to current if LTS is undefined

* chore: remove redundant entries from fixture

* refactor: rename hook to useFetchNodeReleasesData

* refactor: don't store if return immediately

* refactor: remove redundant context in names

* refactor: remove HomeDownloadButtonProps

* refactor: simplify useNodeReleasesData hooks

* refactor: extract getNodeReleaseStatus to util

* chore: add versionWithPrefix to NodeReleaseData

* refactor: move fetch hook call to be inside provider

* refactor: move out __dirname and path

* chore: handle undefined lts and current

* refactor: no need to assign variable

* refactor: move context type to be inside provider

* refactor: introduce NodeReleaseStatus type

* refactor: no need to declare empty props

* chore: do not block when generating node releases data

* refactor: clean up constants.ts

* refactor: remove unnecessary 'Data' suffix

* chore: update nodevu

* chore: remove hack

* refactor: make inline

* chore: specify default value

* refactor: rework how to use useNodeReleases hook

* refactor: reorder providers

* chore: skip duplicate v0.x

* refactor: introduce NodeReleaseSupport type

* refactor: remove excessive spaces

* refactor: fix imports

* chore: no need to ignore _app.mdx

* chore: move out of static/ folder

* refactor: use prettier syntax

* refactor: simplify generateNodeReleasesData

* refactor: introduce WithNodeRelease component

* chore: fix filter

1. nodevu always returns `major.support.phases.dates.start`
unless it doesn't exist in schedule.json.

2. Both dependencies and modules objects are also guaranteed
to be returned by nodevu.

* refactor: introduce NodeReleaseJSON type

* refactor: move getReleaseByStatus function to useNodeReleases hook

* refactor: add empty line

* refactor: rename generateNodeReleasesData

* refactor: add next-data/index.mjs

* chore: change to use useRouter hook

* chore: update nodeReleases fixture

* refactor: rename props to staticProps

* refactor: move WithNodeRelease to providers

* fix: change to use useDownloadLink hook

The missing filename is due to race condition.
In nodejs.org, the link was rendered in Server Side.
So when that function is invoked, the query selector
can detect it and append the filename.

But this is not the case since we are fetching the
Node releases data in Client Side now. The query
selector will be executed first before Node releases
data is fetched.

* refactor: deprecate legacyMain's detect OS

* refactor: rework useDetectOS hook

* refactor: rework downloadUrlByOS util function

* refactor: remove unused constants

* refactor: change file name

* refactor: use inline

* refactor: rework useDetectOS hook

* chore: delete WithNodeRelease file

It will be added back later

* chore: add back withNodeRelease file

---------

Co-authored-by: Wai.Tung <maledong_public@foxmail.com>
Co-authored-by: Claudio Wunder <cwunder@gnome.org>
  • Loading branch information
@HinataKah0 @SEWeiTung @ovflowd
3 people committed Jun 17, 2023
1 parent 5bc3264 commit 7b9e8b1
Show file tree
Hide file tree
Showing 39 changed files with 674 additions and 561 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
20 changes: 0 additions & 20 deletions .storybook/constants.ts
View file

This file was deleted.

7 changes: 3 additions & 4 deletions .storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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>
Expand Down
97 changes: 97 additions & 0 deletions __fixtures__/nodeReleases.tsx
View file
Original file line number Diff line number Diff line change
@@ -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',
},
];
10 changes: 4 additions & 6 deletions components/Downloads/DownloadList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
92 changes: 47 additions & 45 deletions components/Downloads/DownloadReleasesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Loading

2 comments on commit 7b9e8b1

@vercel
Copy link

@vercel vercel bot commented on 7b9e8b1 Jun 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nodejs-org – ./

nodejs-org-git-main-openjs.vercel.app
nodejs-org-openjs.vercel.app
node-js-org.vercel.app
vercel.nodejs.org

@vercel
Copy link

@vercel vercel bot commented on 7b9e8b1 Jun 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nodejs-org-stories – ./

nodejs-org-stories-git-main-openjs.vercel.app
nodejs-org-stories-openjs.vercel.app
nodejs-org-storybook.vercel.app

Please sign in to comment.