Skip to content

Commit edfa3ad

Browse files
lex111lex111
committed
Merge branch 'main' of github.com:reactjs/reactjs.org into lex111/generate-ids-on-hook
2 parents 2f2aed8 + 23c09e0 commit edfa3ad

22 files changed

+1448
-1905
lines changed

‎.github/labeler.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
beta:
2+
- beta/**/*

‎.github/workflows/analyze.yml

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
name: Analyze Bundle
2+
3+
on:
4+
pull_request:
5+
push:
6+
branches:
7+
- main # change this if your default branch is named differently
8+
workflow_dispatch:
9+
10+
jobs:
11+
analyze:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v2
15+
16+
- name: Set up node
17+
uses: actions/setup-node@v1
18+
with:
19+
node-version: "14.x"
20+
21+
- name: Install dependencies
22+
uses: bahmutov/[email protected]
23+
with:
24+
working-directory: 'beta'
25+
26+
- name: Restore next build
27+
uses: actions/cache@v2
28+
id: restore-build-cache
29+
env:
30+
cache-name: cache-next-build
31+
with:
32+
path: beta/.next/cache
33+
# change this if you prefer a more strict cache
34+
key: ${{ runner.os }}-build-${{ env.cache-name }}
35+
36+
- name: Build next.js app
37+
# change this if your site requires a custom build command
38+
run: ./node_modules/.bin/next build
39+
working-directory: beta
40+
41+
# Here's the first place where next-bundle-analysis' own script is used
42+
# This step pulls the raw bundle stats for the current bundle
43+
- name: Analyze bundle
44+
run: npx -p nextjs-bundle-analysis report
45+
working-directory: beta
46+
47+
- name: Upload bundle
48+
uses: actions/upload-artifact@v2
49+
with:
50+
path: beta/.next/analyze/__bundle_analysis.json
51+
name: bundle_analysis.json
52+
53+
- name: Download base branch bundle stats
54+
uses: dawidd6/action-download-artifact@v2
55+
if: success() && github.event.number
56+
with:
57+
workflow: bundle_analysis_upload.yml
58+
branch: ${{ github.event.pull_request.base.ref }}
59+
name: bundle_analysis.json
60+
path: beta/.next/analyze/base/bundle
61+
62+
# And here's the second place - this runs after we have both the current and
63+
# base branch bundle stats, and will compare them to determine what changed.
64+
# There are two configurable arguments that come from package.json:
65+
#
66+
# - budget: optional, set a budget (bytes) against which size changes are measured
67+
# it's set to 350kb here by default, as informed by the following piece:
68+
# https://infrequently.org/2021/03/the-performance-inequality-gap/
69+
#
70+
# - red-status-percentage: sets the percent size increase where you get a red
71+
# status indicator, defaults to 20%
72+
#
73+
# Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
74+
# entry in your package.json file.
75+
- name: Compare with base branch bundle
76+
if: success() && github.event.number
77+
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
78+
working-directory: beta
79+
80+
- name: Upload analysis comment
81+
uses: actions/upload-artifact@v2
82+
with:
83+
name: analysis_comment.txt
84+
path: beta/.next/analyze/__bundle_analysis_comment.txt
85+
86+
- name: Save PR number
87+
run: echo ${{ github.event.number }} > ./pr_number
88+
89+
- name: Upload PR number
90+
uses: actions/upload-artifact@v2
91+
with:
92+
name: pr_number
93+
path: ./pr_number
94+
95+
# The actual commenting happens in the other action, matching the guidance in
96+
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/

‎.github/workflows/analyze_comment.yml

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
name: Analyze Bundle (Comment)
2+
3+
on:
4+
workflow_run:
5+
workflows: ["Analyze Bundle"]
6+
types:
7+
- completed
8+
9+
jobs:
10+
comment:
11+
runs-on: ubuntu-latest
12+
if: >
13+
${{ github.event.workflow_run.event == 'pull_request' &&
14+
github.event.workflow_run.conclusion == 'success' }}
15+
steps:
16+
- name: Download base branch bundle stats
17+
uses: dawidd6/action-download-artifact@v2
18+
with:
19+
workflow: analyze.yml
20+
run_id: ${{ github.event.workflow_run.id }}
21+
name: analysis_comment.txt
22+
path: analysis_comment.txt
23+
24+
- name: Download PR number
25+
uses: dawidd6/action-download-artifact@v2
26+
with:
27+
workflow: analyze.yml
28+
run_id: ${{ github.event.workflow_run.id }}
29+
name: pr_number
30+
path: pr_number
31+
32+
- name: Get comment body
33+
id: get-comment-body
34+
if: success()
35+
run: |
36+
pr_number=$(cat pr_number/pr_number)
37+
body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt)
38+
body="## Size Changes
39+
<details>
40+
41+
${body}
42+
43+
</details>"
44+
body="${body//'%'/'%25'}"
45+
body="${body//$'\n'/'%0A'}"
46+
body="${body//$'\r'/'%0D'}"
47+
echo ::set-output name=body::$body
48+
echo ::set-output name=pr-number::$pr_number
49+
50+
- name: Find Comment
51+
uses: peter-evans/find-comment@v1
52+
if: success()
53+
id: fc
54+
with:
55+
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
56+
body-includes: "<!-- __NEXTJS_BUNDLE -->"
57+
58+
- name: Create Comment
59+
uses: peter-evans/[email protected]
60+
if: success() && steps.fc.outputs.comment-id == 0
61+
with:
62+
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
63+
body: ${{ steps.get-comment-body.outputs.body }}
64+
65+
- name: Update Comment
66+
uses: peter-evans/[email protected]
67+
if: success() && steps.fc.outputs.comment-id != 0
68+
with:
69+
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
70+
body: ${{ steps.get-comment-body.outputs.body }}
71+
comment-id: ${{ steps.fc.outputs.comment-id }}
72+
edit-mode: replace

‎.github/workflows/label.yml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# This workflow will triage pull requests and apply a label based on the
2+
# paths that are modified in the pull request.
3+
#
4+
# To use this workflow, you will need to set up a .github/labeler.yml
5+
# file with configuration. For more information, see:
6+
# https://github.com/actions/labeler
7+
8+
name: Labeler
9+
on: [pull_request_target]
10+
11+
jobs:
12+
label:
13+
14+
runs-on: ubuntu-latest
15+
permissions:
16+
contents: read
17+
pull-requests: write
18+
19+
steps:
20+
- uses: actions/labeler@v2
21+
with:
22+
repo-token: "${{ secrets.GITHUB_TOKEN }}"

‎.github/workflows/nodejs.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ jobs:
1818
node-version: 12.x
1919

2020
- name: Install deps and build (with cache)
21-
uses: bahmutov/npm-install@v1
21+
uses: bahmutov/npm-install@v1.6.0
2222

2323
- name: Lint codebase
2424
run: yarn ci-check

‎beta/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"postinstall": "is-ci || cd .. && husky install beta/.husky"
2020
},
2121
"dependencies": {
22-
"@codesandbox/sandpack-react": "^0.1.16",
22+
"@codesandbox/sandpack-react": "^0.1.20",
2323
"@docsearch/css": "3.0.0-alpha.41",
2424
"@docsearch/react": "3.0.0-alpha.41",
2525
"@headlessui/react": "^1.3.0",
@@ -92,5 +92,10 @@
9292
},
9393
"engines": {
9494
"node": ">=12.x"
95+
},
96+
"nextBundleAnalysis": {
97+
"budget": null,
98+
"budgetPercentIncreaseRed": 10,
99+
"showDetails": true
95100
}
96-
}
101+
}

‎beta/src/components/Layout/Page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function Page({routeTree, children}: PageProps) {
1818
<MenuProvider>
1919
<SidebarContext.Provider value={routeTree}>
2020
<div className="h-auto lg:h-screen flex flex-row">
21-
<div className="h-auto lg:h-full overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
21+
<div className="no-bg-scrollbar h-auto lg:h-full lg:overflow-y-scroll fixed flex flex-row lg:flex-col py-0 top-0 left-0 right-0 lg:max-w-xs w-full shadow lg:shadow-none z-50">
2222
<Nav />
2323
<Sidebar />
2424
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
7777
role="navigation"
7878
ref={menuRef}
7979
style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
80-
className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-16 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
80+
className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
8181
{isMobileSidebar ? (
8282
<MobileNav />
8383
) : (
8484
<SidebarRouteTree routeTree={routeTree} />
8585
)}
8686
</nav>
87-
<div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden md:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
87+
<div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden lg:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
8888
<Button
8989
className="w-full text-center justify-center"
9090
onClick={handleFeedback}>

‎beta/src/components/MDX/Challenges/Challenges.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
119119
)}>
120120
{isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
121121
</H2>
122-
<Navigation
123-
activeChallenge={activeChallenge}
124-
challenges={challenges}
125-
handleChange={handleChallengeChange}
126-
isRecipes={isRecipes}
127-
/>
122+
{challenges.length > 1 && (
123+
<Navigation
124+
activeChallenge={activeChallenge}
125+
challenges={challenges}
126+
handleChange={handleChallengeChange}
127+
isRecipes={isRecipes}
128+
/>
129+
)}
128130
</div>
129131
<div className="p-5 sm:py-8 sm:px-8">
130132
<div key={activeChallenge}>

‎beta/src/components/MDX/MDXComponents.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ function Illustration({
185185
return (
186186
<div className="my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
187187
<figure className="my-8 flex justify-center">
188-
<img src={src} alt={alt} style={{maxHeight: 300}} />
188+
<img src={src} alt={alt} style={{maxHeight: 300}} className="bg-white rounded-lg" />
189189
{caption ? (
190190
<figcaption className="text-center leading-tight mt-4">
191191
{caption}
@@ -215,7 +215,7 @@ function IllustrationBlock({
215215
);
216216
const images = imageInfos.map((info, index) => (
217217
<figure key={index}>
218-
<div className="flex-1 flex p-0 xl:px-6 justify-center items-center my-4">
218+
<div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
219219
<img src={info.src} alt={info.alt} height={info.height} />
220220
</div>
221221
{info.caption ? (

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

+20-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
*/
44

55
import React from 'react';
6+
// @ts-ignore
7+
import {flushSync} from 'react-dom';
68
import {
79
useSandpack,
810
useActiveCode,
911
SandpackCodeEditor,
1012
SandpackThemeProvider,
1113
} from '@codesandbox/sandpack-react';
14+
import scrollIntoView from 'scroll-into-view-if-needed';
1215

1316
import {IconChevron} from 'components/Icon/IconChevron';
1417
import {NavigationBar} from './NavigationBar';
@@ -23,6 +26,7 @@ export function CustomPreset({
2326
onReset: () => void;
2427
}) {
2528
const lineCountRef = React.useRef<{[key: string]: number}>({});
29+
const containerRef = React.useRef<HTMLDivElement>(null);
2630
const {sandpack} = useSandpack();
2731
const {code} = useActiveCode();
2832
const [isExpanded, setIsExpanded] = React.useState(false);
@@ -43,7 +47,9 @@ export function CustomPreset({
4347

4448
return (
4549
<>
46-
<div className="shadow-lg dark:shadow-lg-dark rounded-lg">
50+
<div
51+
className="shadow-lg dark:shadow-lg-dark rounded-lg"
52+
ref={containerRef}>
4753
<NavigationBar showDownload={isSingleFile} onReset={onReset} />
4854
<SandpackThemeProvider theme={CustomTheme}>
4955
<div
@@ -75,7 +81,19 @@ export function CustomPreset({
7581
<button
7682
translate="yes"
7783
className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
78-
onClick={() => setIsExpanded((prevExpanded) => !prevExpanded)}>
84+
onClick={() => {
85+
const nextIsExpanded = !isExpanded;
86+
flushSync(() => {
87+
setIsExpanded(nextIsExpanded);
88+
});
89+
if (!nextIsExpanded && containerRef.current !== null) {
90+
scrollIntoView(containerRef.current, {
91+
scrollMode: 'if-needed',
92+
block: 'nearest',
93+
inline: 'nearest',
94+
});
95+
}
96+
}}>
7997
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
8098
<IconChevron
8199
className="inline mr-1.5 text-xl"

‎beta/src/components/PageHeading.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function PageHeading({
2525
<div className="px-5 sm:px-12 pt-5">
2626
<div className="max-w-4xl ml-0 2xl:mx-auto">
2727
{tags ? <Breadcrumbs /> : null}
28-
<H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5" id="">
28+
<H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5">
2929
{title}
3030
{status ? <em>—{status}</em> : ''}
3131
</H1>

‎beta/src/components/Search.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ const options = {
4242
appId: siteConfig.algolia.appId,
4343
apiKey: siteConfig.algolia.apiKey,
4444
indexName: siteConfig.algolia.indexName,
45-
rednerModal: true,
4645
};
4746
let DocSearchModal: any = null;
4847
export const Search: React.FC<SearchProps> = ({
@@ -93,7 +92,6 @@ export const Search: React.FC<SearchProps> = ({
9392
<link
9493
rel="preconnect"
9594
href={`https://${options.appId}-dsn.algolia.net`}
96-
crossOrigin="true"
9795
/>
9896
</Head>
9997

@@ -121,6 +119,7 @@ export const Search: React.FC<SearchProps> = ({
121119
createPortal(
122120
<DocSearchModal
123121
{...options}
122+
initialScrollY={window.scrollY}
124123
searchParameters={searchParameters}
125124
onClose={onClose}
126125
navigator={{

‎beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,7 @@ To check that your fix worked, try changing the value of `imageSize` to `'b'`. T
481481
You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
482482
483483
1. `{` opens the JavaScript expression
484-
2. `baseUrl + person.imageId + person.pictureSize + '.jpg'` produces the correct URL string
484+
2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
485485
3. `}` closes the JavaScript expression
486486
487487
<Sandpack>

‎beta/src/pages/learn/managing-state.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ As your application grows, it helps to be more intentional about how your state
1212

1313
* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
1414
* [How to structure state well](/learn/choosing-the-state-structure)
15-
* [How "lift state up" to share it between components](/learn/sharing-state-between-components)
15+
* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
1616
* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
1717
* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
1818
* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)

0 commit comments

Comments
 (0)