#如何调试 React 源码？

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
  entry: "./src/index.jsx",
  resolve: {
    // 将 react 解析定位到源码文件
    alias: {
      react: path.resolve(__dirname, "./react/packages/react"),
      "react-client": path.resolve(__dirname, "./react/packages/react-client"),
      "react-dom": path.resolve(__dirname, "./react/packages/react-dom"),
      "react-dom-bindings": path.resolve(
        __dirname,
        "./react/packages/react-dom-bindings"
      ),
      "react-reconciler": path.resolve(
        __dirname,
        "./react/packages/react-reconciler"
      ),
      scheduler: path.resolve(__dirname, "./react/packages/scheduler"),
      shared: path.resolve(__dirname, "./react/packages/shared")
    }
  },
  module: {
    rules: [
      {
        // 映射 babel 编译的代码的 source map
        enforce: "pre",
        exclude: /@babel(?:\/|\\{1,2})runtime/,
        test: /\.(js|mjs|jsx|css)$/,
        loader: "source-map-loader"
      },
      {
        test: /\.(js|mjs|jsx)$/,
        loader: "babel-loader",
        options: {
          presets: [
            "@babel/preset-env",
            [
              "@babel/preset-react",
              {
                development: true,
                runtime: "automatic"
              }
            ],
            // react 源码使用 flow 语法，需要 flow 插件编译
            ["@babel/preset-flow"]
          ]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        sideEffects: true
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html")
    }),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
      // react 源码中所使用的全局变量
      __DEV__: true, // 用于区分开发环境和生成环境
      __EXPERIMENTAL__: true, // 用于控制实验性功能的开关，实验性功能通常是下一个开发版本的具有破坏性的功能
      __PROFILE__: false // 是 React 源码中用于性能分析的全局标志，主要用于控制与性能分析相关的功能是否启用
    })
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, "public")
    },
    port: 8080,
    hot: false,
    client: {
      progress: true,
      overlay: false
    }
  }
};

// We expect that our Rollup, Jest, and Flow configurations
// always shim this module with the corresponding host config
// (either provided by a renderer, or a generic shim for npm).
//
// We should never resolve to this file, but it exists to make
// sure that if we *do* accidentally break the configuration,
// the failure isn't silent.

// throw new Error('This module must be shimmed by a specific renderer.');

export * from "./forks/ReactFiberConfig.dom";

// this doesn't actually exist on the scheduler, but it *does*
// on scheduler/unstable_mock, which we'll need for internal testing

// export const log = Scheduler.log;
// export const unstable_setDisableYieldValue =
//   Scheduler.unstable_setDisableYieldValue;

export const log = () => {};
export const unstable_setDisableYieldValue = () => {};

// import * as React from 'react';
// const ReactSharedInternals =
// React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;

import ReactSharedInternals from "../react/src/ReactSharedInternalsClient";
export default ReactSharedInternals;

// 将下面这一行的 const 关键字改成 var
// declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;

declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;