chore(config): update config to load react source

Author: wenzi0github

.gitignore

@@ -21,4 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-react
+src/react

README.md

@@ -1,70 +1,193 @@
-# Getting Started with Create React App
+# 调试 React 源码的框架
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+我们使用 [create-react-app](https://create-react-app.dev) 脚手架来调试 React 源码。
 
-## Available Scripts
+## 1. 初始化项目并弹出配置
 
-In the project directory, you can run:
+首先创建一个项目：
 
-### `yarn start`
+```shell
+$ npx create-react-app debug-react
+```
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+我们需要修改很多 webpack 相关的配置，这里把配置弹出来，修改起来更方便一些。
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+```shell
+yarn eject
+```
 
-### `yarn test`
+## 2. 引入 React 源码
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+建议从官方仓库 [facebook/react](https://github.com/facebook/react) fork 一份到自己的名下，这样修改起来还方便一些。如我自己 fork 出来的仓库地址：[wenzi0github/react](https://github.com/wenzi0github/react)。
 
-### `yarn build`
+在 src 目录中引入 react 源码，大概结构如下：
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+```shell
+src
+  react # react源码
+  App.js
+  index.js
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+进入到 react 源码的目录，安装 react 所需要的 npm 包：
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```shell
+$ npm i
 
-### `yarn eject`
+# or
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+$ yarn install
+```
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+我这里把 debug-react 和 fork 出来的 react 源码放到了两个 Git 仓库中，因此需要在在 debug-react 项目的`.gitignore`文件中，将 src/react 添加到忽略目录中。若您希望都放在一个 Git 仓库中，则可以不修改这里。
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+## 3. 修改 React 中的相关代码
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+react 源码在项目中无法直接使用，这里需要稍微修改下。
 
-## Learn More
+### 3.1 eslint 的修改
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+在`.eslintrc.js`中，
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+1. 把 extends: ['fbjs', 'prettier'] 的数组设置为空；
+2. plugins 中的 react 注释掉；
+3. rules 中的`no-unused-vars`设置为 OFF；
+4. rules 中的`react-internal/no-production-logging` 设置为 OFF；
 
-### Code Splitting
+具体如下：
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+```javascript
+// 我们忽略其他未修改的属性
+module.exports = {
+  extends: [], // ['fbjs', 'prettier'], debug-react中修改
+  plugins: [
+    'jest',
+    'no-for-of-loops',
+    'no-function-declare-after-return',
+    'react',
+    // 'react', // debug-react中修改
+    'react-internal',
+  ],
+  rules: {
+    'no-unused-vars': OFF, // [ERROR, {args: 'none'}], debug-react中修改
+    'react-internal/no-production-logging': OFF, // ERROR, debug-react中修改
+  },
+};
+```
 
-### Analyzing the Bundle Size
+后续在调试的过程，若还有其他 eslint 方面的报错，可以在这个文件里将其对应的规则关闭掉，然后重启即可。
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+### 3.2 源码的修改
 
-### Making a Progressive Web App
+#### 3.2.1 packages/scheduler/index.js
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+新增如下代码：
 
-### Advanced Configuration
+```javascript
+// debug-react调试仓库中添加
+export {
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime,
+  unstable_setDisableYieldValue,
+} from './src/forks/SchedulerMock';
+```
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+#### 3.2.2 packages/react-reconciler/src/ReactFiberHostConfig.js
 
-### Deployment
+注释掉 throw error 的代码，并新增 export 的代码：
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+```javascript
+// throw new Error('This module must be shimmed by a specific renderer.'); // debug-react中备份
+export * from './forks/ReactFiberHostConfig.dom'; // debug-react中修改
+```
 
-### `yarn build` fails to minify
+#### 3.2.3 packages/shared/ReactSharedInternals.js
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+注释掉 import 和 const 声明的代码，重新进行 import 引入：
+
+```javascript
+// import * as React from 'react';
+
+// const ReactSharedInternals =
+//   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+import ReactSharedInternals from '../react/src/ReactSharedInternals'; // debug-react中修改
+
+export default ReactSharedInternals;
+```
+
+#### 3.2.4 packages/react/index.js
+
+设置默认导出，源码中只有 export 的方式，若外部直接使用，需要用`* as React`这种格式导出成全局变量。React 源码中也有解释：
+
+```javascript
+// Export all exports so that they're available in tests.
+// We can't use export * from in Flow for some reason.
+```
+
+在 Flow 语法中，我们无法用 `export *` 的这种方式来导出所有方法。
+
+因此这里我们单独添加一个默认导出。
+
+```javascript
+// 在文件的最底部
+
+// debug-react项目中新增
+import * as React from './src/React';
+export default React;
+// debug-react项目中新增结束
+```
+
+#### 3.2.5 packages/react-dom/client.js
+
+同上面的 react 原因，这里我们修改下 ReactDOM：
+
+```javascript
+// 在文件的最底部
+
+// debug-react项目中新增
+const ReactDOM = { createRoot, hydrateRoot };
+export default ReactDOM;
+// debug-react项目中新增结束
+```
+
+## 4. debug-react 的修改
+
+react 源码中有不少的全局变量，如`__DEV__`等，这里我们需要在`config/env.js`中添加上，否则会提示找不到这个全局变量。
+
+注意，我们回到了最外层的 debug-react 项目了，是修改的用`yarn eject`弹出的配置。我们在变量 stringified 中添加下述变量：
+
+```javascript
+// config/env.js
+
+const stringified = {
+  'process.env': Object.keys(raw).reduce((env, key) => {
+    env[key] = JSON.stringify(raw[key]);
+    return env;
+  }, {}),
+
+  // 新增全局变量
+  __DEV__: true,
+  __PROFILE__: true,
+  __UMD__: true,
+  __EXPERIMENTAL__: true,
+  __VARIANT__: false,
+  // 新增全局变量结束
+};
+```
+
+## 5. 总结
+
+到这里我们基本上就可以改造完毕了，启动项目就可以运行起来。
+
+```shell
+$ npm start
+```
+
+我们需要在 react 源码中调试或者输出一些 log 时，就可以直接修改了。

config/env.js

@@ -96,6 +96,14 @@ function getClientEnvironment(publicUrl) {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {}),
+
+    // 新增全局变量
+    __DEV__: true,
+    __PROFILE__: true,
+    __UMD__: true,
+    __EXPERIMENTAL__: true,
+    __VARIANT__: false,
+    // 新增全局变量结束
   };
 
   return { raw, stringified };

config/webpack.config.js

@@ -319,6 +319,26 @@ module.exports = function (webpackEnv) {
           'scheduler/tracing': 'scheduler/tracing-profiling',
         }),
         ...(modules.webpackAliases || {}),
+        react: path.resolve(__dirname, "../src/react/packages/react"),
+        "react-dom": path.resolve(__dirname, "../src/react/packages/react-dom"),
+        shared: path.resolve(__dirname, "../src/react/packages/shared"),
+        "react-reconciler": path.resolve(
+          __dirname,
+          "../src/react/packages/react-reconciler"
+        ),
+        scheduler: path.resolve(__dirname, "../src/react/packages/scheduler"),
+        "react-devtools-scheduling-profiler": path.resolve(
+          __dirname,
+          "../src/react/packages/react-devtools-scheduling-profiler"
+        ),
+        "react-devtools-shared": path.resolve(
+          __dirname,
+          "../src/react/packages/react-devtools-shared"
+        ),
+        "react-devtools-timeline": path.resolve(
+          __dirname,
+          "../src/react/packages/react-devtools-timeline"
+        ),
       },
       plugins: [
         // Prevents users from importing files from outside of src/ (or node_modules/).

prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  tabWidth: 2,
+  semi: true,
+  arrowParens: 'avoid',
+};

src/App.js

@@ -1,10 +1,24 @@
 import logo from './logo.svg';
 import './App.css';
+import { useEffect } from 'react';
+
+const Count = () => {
+  useEffect(() => {
+    console.log('<Count />', Date.now());
+  }, []);
+
+  return (<p>123</p>);
+};
 
 function App() {
+  useEffect(() => {
+    console.log('<App />', Date.now());
+  }, []);
+
   return (
     <div className="App">
       <header className="App-header">
+        <Count />
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.

src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();