Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/reactjs/react.dev into sync…
Browse files Browse the repository at this point in the history
…-b12743c3
  • Loading branch information
react-translations-bot committed Jun 10, 2024
2 parents 760be6d + b12743c commit ea7a607
Show file tree
Hide file tree
Showing 291 changed files with 16,309 additions and 3,351 deletions.
1 change: 0 additions & 1 deletion .env.development
Original file line number Diff line number Diff line change
@@ -1 +0,0 @@
SANDPACK_BARE_COMPONENTS=true
3 changes: 1 addition & 2 deletions .env.production
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
SANDPACK_BARE_COMPONENTS=true
NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"plugins": ["@typescript-eslint"],
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "warn"
"@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
"react-hooks/exhaustive-deps": "error"
},
"env": {
"node": true,
Expand Down
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/0-bug.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "🐛 Report a bug"
description: "Report a problem on the website."
title: "[Bug]: "
labels: ["bug: unconfirmed"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the bug is.
placeholder: |
Example bug report:
When I click the "Submit" button on "Feedback", nothing happens.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page(s) did you encounter this bug on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide any additional details about the bug.
placeholder: |
Example details:
The "Submit" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.
validations:
required: false
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/1-typo.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "🤦 Typo or mistake"
description: "Report a typo or mistake in the docs."
title: "[Typo]: "
labels: ["type: typos"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what the mistake is.
placeholder: |
Example:
The code example on the "useReducer" page includes an unused variable `nextId`.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is the typo on?
placeholder: |
https://react.dev/
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for why this is a mistake.
placeholder: |
Example mistake:
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.
validations:
required: false
34 changes: 34 additions & 0 deletions .github/ISSUE_TEMPLATE/2-suggestion.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: "💡 Suggestions"
description: "Suggest a new page, section, or edit for an existing page."
title: "[Suggestion]: "
labels: ["type: documentation"]
body:
- type: textarea
attributes:
label: Summary
description: |
A clear and concise summary of what we should add.
placeholder: |
Example:
Add a new page for how to use React with TypeScript.
validations:
required: true
- type: input
attributes:
label: Page
description: |
What page is this about?
placeholder: |
https://react.dev/
validations:
required: false
- type: textarea
attributes:
label: Details
description: |
Please provide a explanation for what you're suggesting.
placeholder: |
Example:
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.
validations:
required: true
116 changes: 116 additions & 0 deletions .github/ISSUE_TEMPLATE/3-framework.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
name: "📄 Suggest new framework"
description: "I am a framework author applying to be included as a recommended framework."
title: "[Framework]: "
labels: ["type: framework"]
body:
- type: markdown
attributes:
value: |
## Apply to be included as a recommended React framework
_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._
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.
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).
To be included, frameworks must meet the following criteria:
- **Free & open-source**: must be open source and free to use.
- **Well maintained**. must be actively maintained, providing bug fixes and improvements.
- **Active community**: must have a sufficiently large and active community to support users.
- **Clear onboarding**: must have clear install steps to install the React version of the framework.
- **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.
- **Self-hosting option**: must support an option to self-host applications without losing access to features.
- **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.
- **User experience**. must provide built-in support for common problems like routing and data-fetching.
- **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.
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.
- type: input
attributes:
label: Name
description: |
What is the name of your framework?
validations:
required: true
- type: input
attributes:
label: Homepage
description: |
What is the URL of your homepage?
validations:
required: true
- type: input
attributes:
label: Install instructions
description: |
What is the URL of your getting started guide?
validations:
required: true
- type: dropdown
attributes:
label: Is your framework open source?
description: |
We only recommend free and open source frameworks.
options:
- 'No'
- 'Yes'
validations:
required: true
- type: textarea
attributes:
label: Well maintained
description: |
Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.
validations:
required: true
- type: textarea
attributes:
label: Active community
description: |
Please describe your community. Include the size of your community, and links to community resources.
validations:
required: true
- type: textarea
attributes:
label: Clear onboarding
description: |
Please describe how a user can install your framework with React. Include links to any relevant documentation.
validations:
required: true
- type: textarea
attributes:
label: Ecosystem compatibility
description: |
Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.
validations:
required: true
- type: textarea
attributes:
label: Self-hosting option
description: |
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.
validations:
required: true
- type: textarea
attributes:
label: Developer Experience
description: |
Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.
validations:
required: true
- type: textarea
attributes:
label: User Experience
description: |
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.
validations:
required: true
- type: textarea
attributes:
label: Compatible with our future vision for React
description: |
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.
validations:
required: true
7 changes: 7 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
contact_links:
- name: 📃 Bugs in React
url: https://github.com/facebook/react/issues/new/choose
about: This issue tracker is not for bugs in React. Please file React issues here.
- name: 🤔 Questions and Help
url: https://reactjs.org/community/support.html
about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
4 changes: 2 additions & 2 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
- name: Set up node
uses: actions/setup-node@v1
with:
node-version: "14.x"
node-version: '20.x'

- name: Install dependencies
uses: bahmutov/[email protected]
Expand All @@ -38,7 +38,7 @@ jobs:
# Here's the first place where next-bundle-analysis' own script is used
# This step pulls the raw bundle stats for the current bundle
- name: Analyze bundle
run: npx -p nextjs-bundle-analysis report
run: npx -p nextjs-bundle-analysis@0.5.0 report

- name: Upload bundle
uses: actions/upload-artifact@v2
Expand Down
27 changes: 5 additions & 22 deletions .github/workflows/analyze_comment.yml
Original file line number Diff line number Diff line change
Expand Up @@ -47,26 +47,9 @@ jobs:
pr_number=$(cat pr_number/pr_number)
echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
- name: Find Comment
uses: peter-evans/find-comment@v1
if: success()
id: fc
with:
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
body-includes: "<!-- __NEXTJS_BUNDLE -->"

- name: Create Comment
uses: peter-evans/[email protected]
if: success() && steps.fc.outputs.comment-id == 0
with:
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
body: ${{ steps.get-comment-body.outputs.body }}

- name: Update Comment
uses: peter-evans/[email protected]
if: success() && steps.fc.outputs.comment-id != 0
- name: Comment
uses: marocchino/sticky-pull-request-comment@v2
with:
issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
body: ${{ steps.get-comment-body.outputs.body }}
comment-id: ${{ steps.fc.outputs.comment-id }}
edit-mode: replace
header: next-bundle-analysis
number: ${{ steps.get-comment-body.outputs.pr-number }}
message: ${{ steps.get-comment-body.outputs.body }}
10 changes: 5 additions & 5 deletions .github/workflows/site_lint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ jobs:
lint:
runs-on: ubuntu-latest

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

steps:
- uses: actions/checkout@v1
- name: Use Node.js 12.x
uses: actions/setup-node@v1
- name: Use Node.js 20.x
uses: actions/setup-node@v3
with:
node-version: 12.x
node-version: 20.x

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

- name: Lint codebase
run: yarn ci-check
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,6 @@ yarn-error.log*

# external fonts
public/fonts/**/Optimistic_*.woff2

# rss
public/rss.xml
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
- Always capitalize React concepts such as Hooks, Effects, and Transitions.

### Highlighting

Expand Down
4 changes: 3 additions & 1 deletion colors.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
tertiary: '#5E687E', // gray-50
'tertiary-dark': '#99A1B3', // gray-30
link: '#087EA4', // blue-50
'link-dark': '#149ECA', // blue-40
'link-dark': '#58C4DC', // blue-40
syntax: '#EBECF0', // gray-10
wash: '#FFFFFF',
'wash-dark': '#23272F', // gray-90
Expand All @@ -23,6 +23,8 @@ module.exports = {
'border-dark': '#343A46', // gray-80
'secondary-button': '#EBECF0', // gray-10
'secondary-button-dark': '#404756', // gray-70
brand: '#087EA4', // blue-40
'brand-dark': '#58C4DC', // blue-40

// Gray
'gray-95': '#16181D',
Expand Down
12 changes: 3 additions & 9 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ const nextConfig = {
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
reactStrictMode: true,
experimental: {
plugins: true,
// TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed
appDir: false,
scrollRestoration: true,
legacyBrowsers: false,
browsersListForSwc: true,
},
env: {
SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
},
env: {},
webpack: (config, {dev, isServer, ...options}) => {
if (process.env.ANALYZE) {
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
Expand All @@ -35,10 +33,6 @@ const nextConfig = {

const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
config.plugins.push(
new NormalModuleReplacementPlugin(
/^@stitches\/core$/,
require.resolve('./src/utils/emptyShim.js')
),
new NormalModuleReplacementPlugin(
/^raf$/,
require.resolve('./src/utils/rafShim.js')
Expand Down
Loading

0 comments on commit ea7a607

Please sign in to comment.