Skip to content

Commit a4d47da

Browse files
cvijandjcvijandj
authored
Merge pull request #1 from reactjs/main
Updating fork
2 parents cc2745c + 90d9525 commit a4d47da

34 files changed

+227
-102
lines changed

‎.eslintrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"plugins": ["@typescript-eslint"],
66
"rules": {
77
"no-unused-vars": "off",
8-
"@typescript-eslint/no-unused-vars": "warn"
8+
"@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
9+
"react-hooks/exhaustive-deps": "error"
910
},
1011
"env": {
1112
"node": true,

‎.github/workflows/site_lint.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ jobs:
1616
steps:
1717
- uses: actions/checkout@v1
1818
- name: Use Node.js 20.x
19-
uses: actions/setup-node@v1
19+
uses: actions/setup-node@v3
2020
with:
2121
node-version: 20.x
2222

2323
- name: Install deps and build (with cache)
24-
uses: bahmutov/npm-install@v1.7.10
24+
uses: bahmutov/npm-install@v1.8.32
2525

2626
- name: Lint codebase
2727
run: yarn ci-check

‎src/components/Layout/HomeContent.js

+12-20
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,10 @@ import {
88
useState,
99
useContext,
1010
useId,
11-
Fragment,
1211
Suspense,
1312
useEffect,
1413
useRef,
1514
useTransition,
16-
useReducer,
1715
} from 'react';
1816
import cn from 'classnames';
1917
import NextLink from 'next/link';
@@ -26,7 +24,6 @@ import {IconSearch} from 'components/Icon/IconSearch';
2624
import {Logo} from 'components/Logo';
2725
import Link from 'components/MDX/Link';
2826
import CodeBlock from 'components/MDX/CodeBlock';
29-
import {IconNavArrow} from 'components/Icon/IconNavArrow';
3027
import {ExternalLink} from 'components/ExternalLink';
3128
import sidebarBlog from '../../sidebarBlog.json';
3229

@@ -67,14 +64,6 @@ function Para({children}) {
6764
);
6865
}
6966

70-
function Left({children}) {
71-
return (
72-
<div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
73-
{children}
74-
</div>
75-
);
76-
}
77-
7867
function Center({children}) {
7968
return (
8069
<div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -90,19 +79,23 @@ function FullBleed({children}) {
9079
}
9180

9281
function CurrentTime() {
93-
const msPerMinute = 60 * 1000;
94-
const date = new Date();
95-
let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
96-
82+
const [date, setDate] = useState(new Date());
9783
const currentTime = date.toLocaleTimeString([], {
9884
hour: 'numeric',
9985
minute: 'numeric',
10086
});
101-
let [, forceUpdate] = useReducer((n) => n + 1, 0);
10287
useEffect(() => {
103-
const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
88+
const msPerMinute = 60 * 1000;
89+
let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
90+
91+
const timeout = setTimeout(() => {
92+
if (Date.now() > nextMinute) {
93+
setDate(new Date());
94+
}
95+
}, nextMinute - Date.now());
10496
return () => clearTimeout(timeout);
10597
}, [date]);
98+
10699
return <span suppressHydrationWarning>{currentTime}</span>;
107100
}
108101

@@ -831,7 +824,7 @@ function ExampleLayout({
831824
.filter((s) => s !== null);
832825
setOverlayStyles(nextOverlayStyles);
833826
}
834-
}, [activeArea]);
827+
}, [activeArea, hoverTopOffset]);
835828
return (
836829
<div className="lg:pl-10 lg:pr-5 w-full">
837830
<div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
@@ -1211,7 +1204,7 @@ function useNestedScrollLock(ref) {
12111204
window.removeEventListener('scroll', handleScroll);
12121205
clearInterval(interval);
12131206
};
1214-
}, []);
1207+
}, [ref]);
12151208
}
12161209

12171210
function ExamplePanel({
@@ -1220,7 +1213,6 @@ function ExamplePanel({
12201213
noShadow,
12211214
height,
12221215
contentMarginTop,
1223-
activeArea,
12241216
}) {
12251217
return (
12261218
<div

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

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export function SidebarLink({
5454
ref={ref}
5555
title={title}
5656
target={target}
57+
passHref
5758
aria-current={selected ? 'page' : undefined}
5859
className={cn(
5960
'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',

‎src/components/Layout/SidebarNav/SidebarNav.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
import {Suspense} from 'react';
66
import * as React from 'react';
77
import cn from 'classnames';
8-
import {Search} from 'components/Search';
98
import {Feedback} from '../Feedback';
109
import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
1110
import type {RouteItem} from '../getRouteMeta';

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,8 @@ import {IconSearch} from 'components/Icon/IconSearch';
2222
import {Search} from 'components/Search';
2323
import {Logo} from '../../Logo';
2424
import {Feedback} from '../Feedback';
25-
import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
25+
import {SidebarRouteTree} from '../Sidebar';
2626
import type {RouteItem} from '../getRouteMeta';
27-
import {SidebarLink} from '../Sidebar';
2827

2928
declare global {
3029
interface Window {

‎src/components/Layout/getRouteMeta.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
6868
currentIndex: 0,
6969
};
7070
buildRouteMeta(cleanedPath, routeTree, ctx);
71-
const {currentIndex, ...meta} = ctx;
71+
const {currentIndex: _, ...meta} = ctx;
7272
return {
7373
...meta,
7474
breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],

‎src/components/MDX/BlogCard.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
1818
return (
1919
<Link
2020
href={url as string}
21+
passHref
2122
className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
2223
<div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
2324
<div className="flex flex-row gap-3 w-full">

‎src/components/MDX/MDXComponents.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -369,7 +369,8 @@ function YouTubeIframe(props: any) {
369369
}
370370

371371
function Image(props: any) {
372-
return <img className="max-w-[calc(min(700px,100%))]" {...props} />;
372+
const {alt, ...rest} = props;
373+
return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
373374
}
374375

375376
export const MDXComponents = {

‎src/components/MDX/Sandpack/CustomPreset.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export const CustomPreset = memo(function CustomPreset({
5454

5555
const SandboxShell = memo(function SandboxShell({
5656
showDevTools,
57-
onDevToolsLoad,
5857
devToolsLoaded,
5958
providedFiles,
6059
lintErrors,

‎src/components/MDX/Sandpack/NavigationBar.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
9090
} else {
9191
return;
9292
}
93-
}, [isMultiFile]);
93+
94+
// Note: in a real useEvent, onContainerResize would be omitted.
95+
}, [isMultiFile, onContainerResize]);
9496

9597
const handleReset = () => {
9698
/**
9799
* resetAllFiles must come first, otherwise
98-
* the previous content will appears for a second
100+
* the previous content will appear for a second
99101
* when the iframe loads.
100102
*
101-
* Plus, it should only prompts if there's any file changes
103+
* Plus, it should only prompt if there's any file changes
102104
*/
103105
if (
104106
sandpack.editorState === 'dirty' &&

‎src/components/MDX/Sandpack/Preview.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ export function Preview({
4949
errorScreenRegisteredRef,
5050
openInCSBRegisteredRef,
5151
loadingScreenRegisteredRef,
52-
status,
5352
} = sandpack;
5453

5554
if (

‎src/components/MDX/TeamMember.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Image from 'next/image';
77
import {IconTwitter} from '../Icon/IconTwitter';
88
import {IconGitHub} from '../Icon/IconGitHub';
99
import {ExternalLink} from '../ExternalLink';
10-
import {IconNewPage} from 'components/Icon/IconNewPage';
1110
import {H3} from './Heading';
1211
import {IconLink} from 'components/Icon/IconLink';
1312

‎src/components/Search.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@
55
import Head from 'next/head';
66
import Link from 'next/link';
77
import Router from 'next/router';
8-
import {lazy, useCallback, useEffect} from 'react';
8+
import {lazy, useEffect} from 'react';
99
import * as React from 'react';
1010
import {createPortal} from 'react-dom';
1111
import {siteConfig} from 'siteConfig';
12-
import cn from 'classnames';
1312

1413
export interface SearchProps {
1514
appId?: string;

‎src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ To set expectations, this is not a roadmap with clear timelines. Many of these p
2020

2121
## Server Components {/*server-components*/}
2222

23-
We announced an [experimental demo of React Server Components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.
23+
We announced an [experimental demo of React Server Components](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html) (RSC) in December 2020. Since then we’ve been finishing up its dependencies in React 18, and working on changes inspired by experimental feedback.
2424

2525
In particular, we’re abandoning the idea of having forked I/O libraries (eg react-fetch), and instead adopting an async/await model for better compatibility. This doesn’t technically block RSC’s release because you can also use routers for data fetching. Another change is that we’re also moving away from the file extension approach in favor of [annotating boundaries](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278).
2626

‎src/content/community/conferences.md

+41-41
Original file line numberDiff line numberDiff line change
@@ -10,77 +10,77 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### Reactathon 2023 {/*reactathon-2023*/}
14-
May 2 - 3, 2023. San Francisco, CA, USA
15-
16-
[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
13+
### React Rally 2023 🐙 {/*react-rally-2023*/}
14+
August 17 & 18, 2023. Salt Lake City, UT, USA
1715

18-
### RemixConf 2023 {/*remixconf-2023*/}
19-
May, 2023. Salt Lake City, UT
16+
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
2017

21-
[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
18+
### React India 2023 {/*react-india-2023*/}
19+
Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
2220

23-
### App.js Conf 2023 {/*appjs-conf-2023*/}
24-
May 10 - 12, 2023. In-person in Kraków, Poland + remote
21+
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
2522

26-
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
23+
### React Advanced 2023 {/*react-advanced-2023*/}
24+
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
2725

28-
### Chain React 2023 {/*chain-react-2023*/}
29-
May 17 - 19, 2023. Portland, OR, USA
26+
[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
3027

31-
[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
28+
### React Summit US 2023 {/*react-summit-us-2023*/}
29+
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
3230

33-
### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
34-
May 31 - June 2, 2023. Atlanta, GA, USA
31+
[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
3532

36-
[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
33+
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
34+
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
3735

38-
### React Summit 2023 {/*react-summit-2023*/}
39-
June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
36+
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
4037

41-
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
38+
## Past Conferences {/*past-conferences*/}
4239

43-
### React Norway 2023 {/*react-norway-2023*/}
44-
June 16th, 2023. Larvik, Norway
40+
### React Nexus 2023 {/*react-nexus-2023*/}
41+
July 07 & 08, 2023. Bangalore, India (In-person event)
4542

46-
[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
43+
[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
4744

4845
### ReactNext 2023 {/*reactnext-2023*/}
4946
June 27th, 2023. Tel Aviv, Israel
5047

5148
[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
5249

53-
### React Nexus 2023 {/*react-nexus-2023*/}
54-
July 07 & 08, 2023. Bangalore, India (In-person event)
50+
### React Norway 2023 {/*react-norway-2023*/}
51+
June 16th, 2023. Larvik, Norway
5552

56-
[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
53+
[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
5754

58-
### React Rally 2023 🐙 {/*react-rally-2023*/}
59-
August 17 & 18, 2023. Salt Lake City, UT, USA
55+
### React Summit 2023 {/*react-summit-2023*/}
56+
June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
6057

61-
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
58+
[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-2023)
6259

63-
### React India 2023 {/*react-india-2023*/}
64-
Oct 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day
60+
### Render(ATL) 2023 🍑 {/*renderatl-2023-*/}
61+
May 31 - June 2, 2023. Atlanta, GA, USA
6562

66-
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
63+
[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
6764

68-
### React Advanced 2023 {/*react-advanced-2023*/}
69-
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
65+
### Chain React 2023 {/*chain-react-2023*/}
66+
May 17 - 19, 2023. Portland, OR, USA
7067

71-
[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
68+
[Website](https://chainreactconf.com/) - [Twitter](https://twitter.com/ChainReactConf) - [Facebook](https://www.facebook.com/ChainReactConf/) - [Youtube](https://www.youtube.com/channel/UCwpSzVt7QpLDbCnPXqR97-g/playlists)
7269

73-
### React Summit US 2023 {/*react-summit-us-2023*/}
74-
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
70+
### App.js Conf 2023 {/*appjs-conf-2023*/}
71+
May 10 - 12, 2023. In-person in Kraków, Poland + remote
7572

76-
[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023)
73+
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
7774

78-
### React Day Berlin 2023 {/*react-day-berlin-2023*/}
79-
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
75+
### RemixConf 2023 {/*remixconf-2023*/}
76+
May, 2023. Salt Lake City, UT
8077

81-
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
78+
[Website](https://remix.run/conf/2023) - [Twitter](https://twitter.com/remix_run)
8279

83-
## Past Conferences {/*past-conferences*/}
80+
### Reactathon 2023 {/*reactathon-2023*/}
81+
May 2 - 3, 2023. San Francisco, CA, USA
82+
83+
[Website](https://reactathon.com) - [Twitter](https://twitter.com/reactathon) - [YouTube](https://www.youtube.com/realworldreact)
8484

8585
### React Miami 2023 {/*react-miami-2023*/}
8686
April 20 - 21, 2023. Miami, FL, USA

‎src/content/learn/you-might-not-need-an-effect.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1438,7 +1438,7 @@ It would be nice if there was a way to tell React that when `savedContact.id` is
14381438
14391439
<Solution>
14401440
1441-
Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditContact` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
1441+
Split the `EditContact` component in two. Move all the form state into the inner `EditForm` component. Export the outer `EditContact` component, and make it pass `savedContact.id` as the `key` to the inner `EditForm` component. As a result, the inner `EditForm` component resets all of the form state and recreates the DOM whenever you select a different contact.
14421442
14431443
<Sandpack>
14441444

‎src/content/reference/react-dom/client/hydrateRoot.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ Calling `root.unmount` will unmount all the components in the root and "detach"
107107
108108
#### Returns {/*root-unmount-returns*/}
109109
110-
`render` returns `null`.
110+
`root.unmount` returns `undefined`.
111111
112112
#### Caveats {/*root-unmount-caveats*/}
113113

0 commit comments

Comments
 (0)