Skip to content

Commit 1b5e886

Browse files
sophiebitssophiebits
authored
Upgrade React and Next (#6011)
* Upgrade React and Next * Fix bug in useNestedScrollLock I guess refs get disconnected before passive effect cleanup runs. useLayoutEffect would also fix it but maybe this is better.
1 parent 5bc25d3 commit 1b5e886

18 files changed

+300
-305
lines changed

‎.github/workflows/analyze.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ jobs:
1616
- name: Set up node
1717
uses: actions/setup-node@v1
1818
with:
19-
node-version: "14.x"
19+
node-version: '20.x'
2020

2121
- name: Install dependencies
2222
uses: bahmutov/[email protected]

‎.github/workflows/site_lint.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ jobs:
1111
lint:
1212
runs-on: ubuntu-latest
1313

14-
name: Lint on node 12.x and ubuntu-latest
14+
name: Lint on node 20.x and ubuntu-latest
1515

1616
steps:
1717
- uses: actions/checkout@v1
18-
- name: Use Node.js 12.x
18+
- name: Use Node.js 20.x
1919
uses: actions/setup-node@v1
2020
with:
21-
node-version: 12.x
21+
node-version: 20.x
2222

2323
- name: Install deps and build (with cache)
2424
uses: bahmutov/[email protected]

‎next.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const nextConfig = {
99
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
1010
reactStrictMode: true,
1111
experimental: {
12-
plugins: true,
12+
// TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
13+
appDir: false,
1314
scrollRestoration: true,
1415
legacyBrowsers: false,
15-
browsersListForSwc: true,
1616
},
1717
env: {
1818
SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@
3232
"debounce": "^1.2.1",
3333
"ga-lite": "^2.1.4",
3434
"github-slugger": "^1.3.0",
35-
"next": "12.3.2-canary.7",
35+
"next": "^13.4.1",
3636
"next-remote-watch": "^1.0.0",
3737
"parse-numeric-range": "^1.2.0",
38-
"react": "0.0.0-experimental-cb5084d1c-20220924",
38+
"react": "^0.0.0-experimental-16d053d59-20230506",
3939
"react-collapsed": "npm:@gaearon/[email protected]",
40-
"react-dom": "0.0.0-experimental-cb5084d1c-20220924",
40+
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
4141
"remark-frontmatter": "^4.0.1",
4242
"remark-gfm": "^3.0.1"
4343
},
@@ -98,7 +98,7 @@
9898
"webpack-bundle-analyzer": "^4.5.0"
9999
},
100100
"engines": {
101-
"node": ">=12.x"
101+
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
102102
},
103103
"nextBundleAnalysis": {
104104
"budget": null,

‎patches/next+12.3.2-canary.7.patch

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎patches/next+13.4.1.patch

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js
2+
index a1f8648..1b3d608 100644
3+
--- a/node_modules/next/dist/server/render.js
4+
+++ b/node_modules/next/dist/server/render.js
5+
@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) {
6+
// Always using react concurrent rendering mode with required react version 18.x
7+
const renderShell = async (EnhancedApp, EnhancedComponent)=>{
8+
const content = renderContent(EnhancedApp, EnhancedComponent);
9+
- return await (0, _nodewebstreamshelper.renderToInitialStream)({
10+
- ReactDOMServer: _serverbrowser.default,
11+
- element: content
12+
+ return new Promise((resolve, reject) => {
13+
+ (0, _nodewebstreamshelper.renderToInitialStream)({
14+
+ ReactDOMServer: _serverbrowser.default,
15+
+ element: content,
16+
+ streamOptions: {
17+
+ onError: reject
18+
+ }
19+
+ }).then(resolve, reject);
20+
});
21+
};
22+
const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{

‎src/components/Breadcrumbs.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
1515
!crumb.skipBreadcrumb && (
1616
<div className="flex mb-3 mt-0.5 items-center" key={i}>
1717
<Fragment key={crumb.path}>
18-
<Link href={crumb.path}>
19-
<a className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
20-
{crumb.title}
21-
</a>
18+
<Link
19+
href={crumb.path}
20+
className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
21+
{crumb.title}
2222
</Link>
2323
<span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
2424
<svg

‎src/components/ButtonLink.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function ButtonLink({
2121
label,
2222
target = '_self',
2323
...props
24-
}: JSX.IntrinsicElements['a'] & ButtonLinkProps) {
24+
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & ButtonLinkProps) {
2525
const classes = cn(
2626
className,
2727
'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
@@ -34,10 +34,13 @@ function ButtonLink({
3434
}
3535
);
3636
return (
37-
<NextLink href={href as string}>
38-
<a className={classes} {...props} aria-label={label} target={target}>
39-
{children}
40-
</a>
37+
<NextLink
38+
href={href as string}
39+
className={classes}
40+
{...props}
41+
aria-label={label}
42+
target={target}>
43+
{children}
4144
</NextLink>
4245
);
4346
}

‎src/components/DocsFooter.tsx

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -66,25 +66,24 @@ function FooterLink({
6666
type: 'Previous' | 'Next';
6767
}) {
6868
return (
69-
<NextLink href={href}>
70-
<a
71-
className={cn(
72-
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
73-
{
74-
'flex-row-reverse justify-self-end text-right': type === 'Next',
75-
}
76-
)}>
77-
<IconNavArrow
78-
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
79-
displayDirection={type === 'Previous' ? 'left' : 'right'}
80-
/>
81-
<span>
82-
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
83-
{type}
84-
</span>
85-
<span className="block text-lg group-hover:underline">{title}</span>
69+
<NextLink
70+
href={href}
71+
className={cn(
72+
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
73+
{
74+
'flex-row-reverse justify-self-end text-right': type === 'Next',
75+
}
76+
)}>
77+
<IconNavArrow
78+
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
79+
displayDirection={type === 'Previous' ? 'left' : 'right'}
80+
/>
81+
<span>
82+
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
83+
{type}
8684
</span>
87-
</a>
85+
<span className="block text-lg group-hover:underline">{title}</span>
86+
</span>
8887
</NextLink>
8988
);
9089
}

‎src/components/Layout/Footer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -388,8 +388,8 @@ function FooterLink({
388388

389389
return (
390390
<div>
391-
<NextLink href={href}>
392-
<a className={classes}>{children}</a>
391+
<NextLink href={href} className={classes}>
392+
{children}
393393
</NextLink>
394394
</div>
395395
);

‎src/components/Layout/HomeContent.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1186,21 +1186,22 @@ async function Talks({ confId }) {
11861186

11871187
function useNestedScrollLock(ref) {
11881188
useEffect(() => {
1189+
let node = ref.current;
11891190
let isLocked = false;
11901191
let lastScroll = performance.now();
11911192

11921193
function handleScroll() {
11931194
if (!isLocked) {
11941195
isLocked = true;
1195-
ref.current.style.pointerEvents = 'none';
1196+
node.style.pointerEvents = 'none';
11961197
}
11971198
lastScroll = performance.now();
11981199
}
11991200

12001201
function updateLock() {
12011202
if (isLocked && performance.now() - lastScroll > 150) {
12021203
isLocked = false;
1203-
ref.current.style.pointerEvents = '';
1204+
node.style.pointerEvents = '';
12041205
}
12051206
}
12061207

‎src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -49,44 +49,43 @@ export function SidebarLink({
4949
target = '_blank';
5050
}
5151
return (
52-
<Link href={href}>
53-
<a
54-
ref={ref}
55-
title={title}
56-
target={target}
57-
aria-current={selected ? 'page' : undefined}
58-
className={cn(
59-
'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
60-
{
61-
'text-sm pl-6': level > 0,
62-
'pl-5': level < 2,
63-
'text-base font-bold': level === 0,
64-
'text-primary dark:text-primary-dark': level === 0 && !selected,
65-
'text-base text-secondary dark:text-secondary-dark':
66-
level > 0 && !selected,
67-
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
68-
selected,
69-
'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
70-
isPending,
71-
}
72-
)}>
73-
{/* This here needs to be refactored ofc */}
52+
<Link
53+
href={href}
54+
ref={ref}
55+
title={title}
56+
target={target}
57+
aria-current={selected ? 'page' : undefined}
58+
className={cn(
59+
'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
60+
{
61+
'text-sm pl-6': level > 0,
62+
'pl-5': level < 2,
63+
'text-base font-bold': level === 0,
64+
'text-primary dark:text-primary-dark': level === 0 && !selected,
65+
'text-base text-secondary dark:text-secondary-dark':
66+
level > 0 && !selected,
67+
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
68+
selected,
69+
'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
70+
isPending,
71+
}
72+
)}>
73+
{/* This here needs to be refactored ofc */}
74+
<span
75+
className={cn({
76+
'text-gray-400 dark:text-gray-500': wip,
77+
})}>
78+
{title}
79+
</span>
80+
{isExpanded != null && !hideArrow && (
7481
<span
75-
className={cn({
76-
'text-gray-400 dark:text-gray-500': wip,
82+
className={cn('pr-1', {
83+
'text-link dark:text-link-dark': isExpanded,
84+
'text-tertiary dark:text-tertiary-dark': !isExpanded,
7785
})}>
78-
{title}
86+
<IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
7987
</span>
80-
{isExpanded != null && !hideArrow && (
81-
<span
82-
className={cn('pr-1', {
83-
'text-link dark:text-link-dark': isExpanded,
84-
'text-tertiary dark:text-tertiary-dark': !isExpanded,
85-
})}>
86-
<IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
87-
</span>
88-
)}
89-
</a>
88+
)}
9089
</Link>
9190
);
9291
}

‎src/components/Layout/TopNav/TopNav.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,17 @@ const githubIcon = (
9090
</svg>
9191
);
9292

93-
function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
93+
function Link({
94+
href,
95+
children,
96+
...props
97+
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
9498
return (
95-
<NextLink href={`${href}`}>
96-
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
97-
<a
98-
className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
99-
{...props}>
100-
{children}
101-
</a>
99+
<NextLink
100+
href={`${href}`}
101+
className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
102+
{...props}>
103+
{children}
102104
</NextLink>
103105
);
104106
}
@@ -247,16 +249,15 @@ export default function TopNav({
247249
{isOpen ? <IconClose /> : <IconHamburger />}
248250
</button>
249251
<div className="3xl:flex-1 flex align-center">
250-
<NextLink href="/">
251-
<a
252-
className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
253-
<Logo
254-
className={cn(
255-
'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
256-
)}
257-
/>
258-
<span className="sr-only 3xl:not-sr-only">React</span>
259-
</a>
252+
<NextLink
253+
href="/"
254+
className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
255+
<Logo
256+
className={cn(
257+
'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
258+
)}
259+
/>
260+
<span className="sr-only 3xl:not-sr-only">React</span>
260261
</NextLink>
261262
</div>
262263
</div>

0 commit comments

Comments
 (0)