Skip to content

Commit 598c223

Browse files
umandaumanda
authored
Merge pull request #49 from reactjs/sync-9967ded3
Sync with react.dev @ 9967ded
2 parents 9f92d43 + 924bf17 commit 598c223

File tree

286 files changed

+15616
-3257
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

286 files changed

+15616
-3257
lines changed

‎.env.development

-1
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
SANDPACK_BARE_COMPONENTS=true

‎.env.production

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
2-
SANDPACK_BARE_COMPONENTS=true
1+
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'

‎.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/ISSUE_TEMPLATE/0-bug.yml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: "🐛 Report a bug"
2+
description: "Report a problem on the website."
3+
title: "[Bug]: "
4+
labels: ["bug: unconfirmed"]
5+
body:
6+
- type: textarea
7+
attributes:
8+
label: Summary
9+
description: |
10+
A clear and concise summary of what the bug is.
11+
placeholder: |
12+
Example bug report:
13+
When I click the "Submit" button on "Feedback", nothing happens.
14+
validations:
15+
required: true
16+
- type: input
17+
attributes:
18+
label: Page
19+
description: |
20+
What page(s) did you encounter this bug on?
21+
placeholder: |
22+
https://react.dev/
23+
validations:
24+
required: true
25+
- type: textarea
26+
attributes:
27+
label: Details
28+
description: |
29+
Please provide any additional details about the bug.
30+
placeholder: |
31+
Example details:
32+
The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
33+
validations:
34+
required: false

‎.github/ISSUE_TEMPLATE/1-typo.yml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: "🤦 Typo or mistake"
2+
description: "Report a typo or mistake in the docs."
3+
title: "[Typo]: "
4+
labels: ["type: typos"]
5+
body:
6+
- type: textarea
7+
attributes:
8+
label: Summary
9+
description: |
10+
A clear and concise summary of what the mistake is.
11+
placeholder: |
12+
Example:
13+
The code example on the "useReducer" page includes an unused variable `nextId`.
14+
validations:
15+
required: true
16+
- type: input
17+
attributes:
18+
label: Page
19+
description: |
20+
What page is the typo on?
21+
placeholder: |
22+
https://react.dev/
23+
validations:
24+
required: true
25+
- type: textarea
26+
attributes:
27+
label: Details
28+
description: |
29+
Please provide a explanation for why this is a mistake.
30+
placeholder: |
31+
Example mistake:
32+
In the "useReducer" section of the "API Reference" page, the code example under "Writing a reducer function" includes an unused variable `nextId` that should be removed.
33+
validations:
34+
required: false

‎.github/ISSUE_TEMPLATE/2-suggestion.yml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: "💡 Suggestions"
2+
description: "Suggest a new page, section, or edit for an existing page."
3+
title: "[Suggestion]: "
4+
labels: ["type: documentation"]
5+
body:
6+
- type: textarea
7+
attributes:
8+
label: Summary
9+
description: |
10+
A clear and concise summary of what we should add.
11+
placeholder: |
12+
Example:
13+
Add a new page for how to use React with TypeScript.
14+
validations:
15+
required: true
16+
- type: input
17+
attributes:
18+
label: Page
19+
description: |
20+
What page is this about?
21+
placeholder: |
22+
https://react.dev/
23+
validations:
24+
required: false
25+
- type: textarea
26+
attributes:
27+
label: Details
28+
description: |
29+
Please provide a explanation for what you're suggesting.
30+
placeholder: |
31+
Example:
32+
I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.
33+
validations:
34+
required: true

‎.github/ISSUE_TEMPLATE/3-framework.yml

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
name: "📄 Suggest new framework"
2+
description: "I am a framework author applying to be included as a recommended framework."
3+
title: "[Framework]: "
4+
labels: ["type: framework"]
5+
body:
6+
- type: markdown
7+
attributes:
8+
value: |
9+
## Apply to be included as a recommended React framework
10+
11+
_This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._
12+
13+
Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.
14+
15+
While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision).
16+
17+
To be included, frameworks must meet the following criteria:
18+
19+
- **Free & open-source**: must be open source and free to use.
20+
- **Well maintained**. must be actively maintained, providing bug fixes and improvements.
21+
- **Active community**: must have a sufficiently large and active community to support users.
22+
- **Clear onboarding**: must have clear install steps to install the React version of the framework.
23+
- **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
24+
- **Self-hosting option**: must support an option to self-host applications without losing access to features.
25+
- **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
26+
- **User experience**. must provide built-in support for common problems like routing and data-fetching.
27+
- **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.
28+
29+
Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.
30+
- type: input
31+
attributes:
32+
label: Name
33+
description: |
34+
What is the name of your framework?
35+
validations:
36+
required: true
37+
- type: input
38+
attributes:
39+
label: Homepage
40+
description: |
41+
What is the URL of your homepage?
42+
validations:
43+
required: true
44+
- type: input
45+
attributes:
46+
label: Install instructions
47+
description: |
48+
What is the URL of your getting started guide?
49+
validations:
50+
required: true
51+
- type: dropdown
52+
attributes:
53+
label: Is your framework open source?
54+
description: |
55+
We only recommend free and open source frameworks.
56+
options:
57+
- 'No'
58+
- 'Yes'
59+
validations:
60+
required: true
61+
- type: textarea
62+
attributes:
63+
label: Well maintained
64+
description: |
65+
Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
66+
validations:
67+
required: true
68+
- type: textarea
69+
attributes:
70+
label: Active community
71+
description: |
72+
Please describe your community. Include the size of your community, and links to community resources.
73+
validations:
74+
required: true
75+
- type: textarea
76+
attributes:
77+
label: Clear onboarding
78+
description: |
79+
Please describe how a user can install your framework with React. Include links to any relevant documentation.
80+
validations:
81+
required: true
82+
- type: textarea
83+
attributes:
84+
label: Ecosystem compatibility
85+
description: |
86+
Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
87+
validations:
88+
required: true
89+
- type: textarea
90+
attributes:
91+
label: Self-hosting option
92+
description: |
93+
Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.
94+
validations:
95+
required: true
96+
- type: textarea
97+
attributes:
98+
label: Developer Experience
99+
description: |
100+
Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
101+
validations:
102+
required: true
103+
- type: textarea
104+
attributes:
105+
label: User Experience
106+
description: |
107+
Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.
108+
validations:
109+
required: true
110+
- type: textarea
111+
attributes:
112+
label: Compatible with our future vision for React
113+
description: |
114+
Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.
115+
validations:
116+
required: true

‎.github/ISSUE_TEMPLATE/config.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
contact_links:
2+
- name: 📃 Bugs in React
3+
url: https://github.com/facebook/react/issues/new/choose
4+
about: This issue tracker is not for bugs in React. Please file React issues here.
5+
- name: 🤔 Questions and Help
6+
url: https://reactjs.org/community/support.html
7+
about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.

‎.github/workflows/analyze.yml

+1-1
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

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ 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
19-
uses: actions/setup-node@v1
18+
- name: Use Node.js 20.x
19+
uses: actions/setup-node@v3
2020
with:
21-
node-version: 12.x
21+
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

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ yarn-error.log*
3636

3737
# external fonts
3838
public/fonts/**/Optimistic_*.woff2
39+
40+
# rss
41+
public/rss.xml

‎CONTRIBUTING.md

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
7979
- Use semicolons.
8080
- No space between function names and parens (`method() {}` not `method () {}`).
8181
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
82+
- Always capitalize React concepts such as Hooks, Effects, and Transitions.
8283

8384
### Highlighting
8485

‎colors.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ module.exports = {
1111
tertiary: '#5E687E', // gray-50
1212
'tertiary-dark': '#99A1B3', // gray-30
1313
link: '#087EA4', // blue-50
14-
'link-dark': '#149ECA', // blue-40
14+
'link-dark': '#58C4DC', // blue-40
1515
syntax: '#EBECF0', // gray-10
1616
wash: '#FFFFFF',
1717
'wash-dark': '#23272F', // gray-90
@@ -23,6 +23,8 @@ module.exports = {
2323
'border-dark': '#343A46', // gray-80
2424
'secondary-button': '#EBECF0', // gray-10
2525
'secondary-button-dark': '#404756', // gray-70
26+
brand: '#087EA4', // blue-40
27+
'brand-dark': '#58C4DC', // blue-40
2628

2729
// Gray
2830
'gray-95': '#16181D',

‎next.config.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@ 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,
16-
},
17-
env: {
18-
SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
1916
},
17+
env: {},
2018
webpack: (config, {dev, isServer, ...options}) => {
2119
if (process.env.ANALYZE) {
2220
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -35,10 +33,6 @@ const nextConfig = {
3533

3634
const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
3735
config.plugins.push(
38-
new NormalModuleReplacementPlugin(
39-
/^@stitches\/core$/,
40-
require.resolve('./src/utils/emptyShim.js')
41-
),
4236
new NormalModuleReplacementPlugin(
4337
/^raf$/,
4438
require.resolve('./src/utils/rafShim.js')

‎package.json

+10-10
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,29 @@
1515
"prettier:diff": "yarn nit:source",
1616
"lint-heading-ids": "node scripts/headingIdLinter.js",
1717
"fix-headings": "node scripts/headingIdLinter.js --fix",
18-
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids",
18+
"ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
1919
"tsc": "tsc --noEmit",
2020
"start": "next start",
2121
"postinstall": "patch-package && (is-ci || husky install .husky)",
22-
"check-all": "npm-run-all prettier lint:fix tsc"
22+
"check-all": "npm-run-all prettier lint:fix tsc rss",
23+
"rss": "node scripts/generateRss.js"
2324
},
2425
"dependencies": {
25-
"@codesandbox/sandpack-react": "1.15.5",
26+
"@codesandbox/sandpack-react": "2.13.5",
2627
"@docsearch/css": "3.0.0-alpha.41",
2728
"@docsearch/react": "3.0.0-alpha.41",
2829
"@headlessui/react": "^1.7.0",
2930
"body-scroll-lock": "^3.1.3",
3031
"classnames": "^2.2.6",
3132
"date-fns": "^2.16.1",
3233
"debounce": "^1.2.1",
33-
"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",
39-
"react-collapsed": "npm:@gaearon/[email protected]",
40-
"react-dom": "0.0.0-experimental-cb5084d1c-20220924",
38+
"react": "^0.0.0-experimental-16d053d59-20230506",
39+
"react-collapsed": "4.0.4",
40+
"react-dom": "^0.0.0-experimental-16d053d59-20230506",
4141
"remark-frontmatter": "^4.0.1",
4242
"remark-gfm": "^3.0.1"
4343
},
@@ -92,13 +92,13 @@
9292
"retext": "^7.0.1",
9393
"retext-smartypants": "^4.0.0",
9494
"rss": "^1.2.2",
95-
"tailwindcss": "^3.0.22",
95+
"tailwindcss": "^3.4.1",
9696
"typescript": "^4.0.2",
9797
"unist-util-visit": "^2.0.3",
9898
"webpack-bundle-analyzer": "^4.5.0"
9999
},
100100
"engines": {
101-
"node": ">=12.x"
101+
"node": ">=16.8.0"
102102
},
103103
"nextBundleAnalysis": {
104104
"budget": null,

0 commit comments

Comments
 (0)