diff --git a/beta/.env.development b/beta/.env.development
index e69de29bb..33201592a 100644
--- a/beta/.env.development
+++ b/beta/.env.development
@@ -0,0 +1 @@
+SANDPACK_BARE_COMPONENTS=true
\ No newline at end of file
diff --git a/beta/.env.production b/beta/.env.production
index d25eb7dd4..445c9c4d0 100644
--- a/beta/.env.production
+++ b/beta/.env.production
@@ -1 +1,2 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
+SANDPACK_BARE_COMPONENTS=true
\ No newline at end of file
diff --git a/beta/.eslintrc b/beta/.eslintrc
index 5c336583f..147e54607 100644
--- a/beta/.eslintrc
+++ b/beta/.eslintrc
@@ -1,8 +1,11 @@
{
"root": true,
"extends": "next/core-web-vitals",
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint"],
"rules": {
- "no-unused-vars": "warn"
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "warn"
},
"env": {
"node": true,
diff --git a/beta/.prettierignore b/beta/.prettierignore
index 17908faf4..96f1f96d2 100644
--- a/beta/.prettierignore
+++ b/beta/.prettierignore
@@ -1,2 +1 @@
-src/pages/docs/**/*.md
-src/pages/blog/**/*.md
+src/content/**/*.md
diff --git a/beta/CONTRIBUTING.md b/beta/CONTRIBUTING.md
index f893cab12..dd81c8546 100644
--- a/beta/CONTRIBUTING.md
+++ b/beta/CONTRIBUTING.md
@@ -20,7 +20,7 @@ The documentation is divided into sections to cater to different learning styles
**[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.
-**[API Reference](https://reactjs.org/apis)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
+**[API Reference](https://reactjs.org/apis/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.
**Try to follow your own instructions.**
diff --git a/beta/README.md b/beta/README.md
index 725a2c382..8208938ee 100644
--- a/beta/README.md
+++ b/beta/README.md
@@ -1,6 +1,6 @@
# reactjs.org
-This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).
+This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/).
## Getting started
diff --git a/beta/next.config.js b/beta/next.config.js
index d34686b1c..2ea3e916e 100644
--- a/beta/next.config.js
+++ b/beta/next.config.js
@@ -2,34 +2,21 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/
-const path = require('path');
-const {remarkPlugins} = require('./plugins/markdownToHtml');
-const redirects = require('./src/redirects.json');
-
/**
* @type {import('next').NextConfig}
**/
const nextConfig = {
pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
+ reactStrictMode: true,
experimental: {
plugins: true,
scrollRestoration: true,
legacyBrowsers: false,
browsersListForSwc: true,
},
- async redirects() {
- return redirects.redirects;
+ env: {
+ SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS,
},
- // TODO: this causes extra router.replace() on every page.
- // Let's disable until we figure out what's going on.
- // rewrites() {
- // return [
- // {
- // source: '/feed.xml',
- // destination: '/_next/static/feed.xml',
- // },
- // ];
- // },
webpack: (config, {dev, isServer, ...options}) => {
if (process.env.ANALYZE) {
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
@@ -46,8 +33,20 @@ const nextConfig = {
// Don't bundle the shim unnecessarily.
config.resolve.alias['use-sync-external-store/shim'] = 'react';
- const {IgnorePlugin} = require('webpack');
+ 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')
+ ),
+ new NormalModuleReplacementPlugin(
+ /^process$/,
+ require.resolve('./src/utils/processShim.js')
+ ),
new IgnorePlugin({
checkResource(resource, context) {
if (
@@ -64,22 +63,6 @@ const nextConfig = {
})
);
- // Add our custom markdown loader in order to support frontmatter
- // and layout
- config.module.rules.push({
- test: /.mdx?$/, // load both .md and .mdx files
- use: [
- options.defaultLoaders.babel,
- {
- loader: '@mdx-js/loader',
- options: {
- remarkPlugins,
- },
- },
- path.join(__dirname, './plugins/md-layout-loader'),
- ],
- });
-
return config;
},
};
diff --git a/beta/package.json b/beta/package.json
index d04c74815..acef2acfc 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -5,8 +5,8 @@
"license": "CC",
"scripts": {
"analyze": "ANALYZE=true next build",
- "dev": "next",
- "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js",
+ "dev": "next-remote-watch ./src/content",
+ "build": "next build && node ./scripts/downloadFonts.js",
"lint": "next lint",
"lint:fix": "next lint --fix",
"format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
@@ -22,26 +22,30 @@
"check-all": "npm-run-all prettier lint:fix tsc"
},
"dependencies": {
- "@codesandbox/sandpack-react": "v0.19.8-experimental.4",
+ "@codesandbox/sandpack-react": "1.15.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
- "@headlessui/react": "^1.3.0",
- "@mdx-js/react": "^1.6.16",
+ "@headlessui/react": "^1.7.0",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
- "next": "12.1.7-canary.11",
+ "next": "12.3.2-canary.7",
+ "next-remote-watch": "^1.0.0",
"parse-numeric-range": "^1.2.0",
- "react": "0.0.0-experimental-82c64e1a4-20220520",
- "react-collapsed": "3.1.0",
- "react-dom": "0.0.0-experimental-82c64e1a4-20220520",
- "scroll-into-view-if-needed": "^2.2.25"
+ "react": "0.0.0-experimental-cb5084d1c-20220924",
+ "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1",
+ "react-dom": "0.0.0-experimental-cb5084d1c-20220924",
+ "remark-frontmatter": "^4.0.1",
+ "remark-gfm": "^3.0.1"
},
"devDependencies": {
- "@mdx-js/loader": "^1.6.16",
+ "@babel/core": "^7.12.9",
+ "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+ "@babel/preset-react": "^7.18.6",
+ "@mdx-js/mdx": "^2.1.3",
"@types/body-scroll-lock": "^2.6.1",
"@types/classnames": "^2.2.10",
"@types/debounce": "^1.2.1",
@@ -51,8 +55,8 @@
"@types/parse-numeric-range": "^0.0.1",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.5",
- "@typescript-eslint/eslint-plugin": "2.x",
- "@typescript-eslint/parser": "2.x",
+ "@typescript-eslint/eslint-plugin": "^5.36.2",
+ "@typescript-eslint/parser": "^5.36.2",
"asyncro": "^3.0.0",
"autoprefixer": "^10.4.2",
"babel-eslint": "10.x",
@@ -63,7 +67,7 @@
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
- "eslint-plugin-react-hooks": "2.x",
+ "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
"fs-extra": "^9.0.1",
"globby": "^11.0.1",
"gray-matter": "^4.0.2",
@@ -71,6 +75,7 @@
"is-ci": "^3.0.1",
"lint-staged": ">=10",
"mdast-util-to-string": "^1.1.0",
+ "metro-cache": "0.72.2",
"npm-run-all": "^4.1.5",
"patch-package": "^6.2.2",
"postcss": "^8.4.5",
@@ -80,7 +85,7 @@
"reading-time": "^1.2.0",
"remark": "^12.0.1",
"remark-external-links": "^7.0.0",
- "remark-html": "^13.0.2",
+ "remark-html": "^12.0.0",
"remark-images": "^2.0.0",
"remark-slug": "^7.0.0",
"remark-unwrap-images": "^2.0.0",
diff --git a/beta/patches/@codemirror+lang-javascript+0.19.6.patch b/beta/patches/@codemirror+lang-javascript+0.19.6.patch
new file mode 100644
index 000000000..3436b8e37
--- /dev/null
+++ b/beta/patches/@codemirror+lang-javascript+0.19.6.patch
@@ -0,0 +1,30 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+index 4475e4f..e1255c9 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs
++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({
+ JSXText: highlight.tags.content,
+ "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket,
+ "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName,
+- "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName
++ "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++ "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++ "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName)
+ })
+ ]
+ }),
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+ JSXText: tags.content,
+ "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+ "JSXIdentifier JSXNameSpacedName": tags.tagName,
+- "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++ "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++ "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++ "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+ })
+ ]
+ }),
diff --git a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch
deleted file mode 100644
index 77ad867fc..000000000
--- a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.0.patch
+++ /dev/null
@@ -1,37 +0,0 @@
-diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-index e6e5787..712a70d 100644
---- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
- },
- "/index.js": {
- code: `import React, { StrictMode } from "react";
--import ReactDOM from "react-dom";
-+import { createRoot } from "react-dom/client";
- import "./styles.css";
-
- import App from "./App";
-
--const rootElement = document.getElementById("root");
--ReactDOM.render(
-+const root = createRoot(document.getElementById("root"));
-+root.render(
-
-
-- ,
-- rootElement
-+
- );`
- },
- "/styles.css": {
-@@ -611,8 +610,8 @@ h1 {
- }
- },
- dependencies: {
-- react: "^17.0.0",
-- "react-dom": "^17.0.0",
-+ react: "^18.0.0",
-+ "react-dom": "^18.0.0",
- "react-scripts": "^4.0.0"
- },
- entry: "/index.js",
diff --git a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch b/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
deleted file mode 100644
index 2298cbd1a..000000000
--- a/beta/patches/@codesandbox+sandpack-react+0.19.8-experimental.4.patch
+++ /dev/null
@@ -1,37 +0,0 @@
-diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-index ced9bd3..7e5e366 100644
---- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
-@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
- },
- "/index.js": {
- code: `import React, { StrictMode } from "react";
--import ReactDOM from "react-dom";
-+import { createRoot } from "react-dom/client";
- import "./styles.css";
-
- import App from "./App";
-
--const rootElement = document.getElementById("root");
--ReactDOM.render(
-+const root = createRoot(document.getElementById("root"));
-+root.render(
-
-
-- ,
-- rootElement
-+
- );`
- },
- "/styles.css": {
-@@ -611,8 +610,8 @@ h1 {
- }
- },
- dependencies: {
-- react: "^17.0.0",
-- "react-dom": "^17.0.0",
-+ react: "^18.0.0",
-+ "react-dom": "^18.0.0",
- "react-scripts": "^4.0.0"
- },
- entry: "/index.js",
diff --git a/beta/patches/@codesandbox+sandpack-react+1.15.5.patch b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch
new file mode 100644
index 000000000..6a9a438dc
--- /dev/null
+++ b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch
@@ -0,0 +1,26 @@
+diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+index 6b8518e..86dd663 100644
+--- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
++++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js
+@@ -395,7 +395,7 @@ createApp(App).mount('#app')
+
+