四月八日

cube.position.x = 0;
cube.position.set(0, 0, 0);

cube.scale.y = 1;
cube.scale.set(0, 1, 0);

cube.rotate.z = Math.PI / 4;
cube.rotate.set(0, 0, Math.PI / 4);

// 由于物体位置相对于父元素，因此cube在坐标原点
parentCube.add(cube);
parentCube.position.x = -3;
cube.position.x = 3;

window.addEventListener("resize", () => {
  // 更新摄像头宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
});

import * as dat from "dat.gui";

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min";

const gui = new GUI();
const handle = {
  click: () => console.log("click"),
  fullscreen: () => console.log("fullscreen"),
};
// 添加两个按钮，点击和全屏
gui.add(handle, "click").name("点击");
gui.add(handle, "fullscreen").name("全屏");

//修改数值,最小值-10，最大值10，步长1
gui.add(cube.position, "x").name("x轴位置").min(-10).max(10).step(1);

//使用 folder 分组
let folder = gui.addFolder("按钮组");
folder.add(handle, "click").name("点击");
folder.add(handle, "fullscreen").name("全屏");

//事件
gui.add(handle, "click").onChange(noop).onFinishChange(noop);

//颜色
const colors = {
  cubeColor: "#ff0000",
};
gui
  .addColor(colors, "cubeColor")
  .name("颜色")
  .onChange(() => cube.material.color.set(val));

const position = new Float32Array([
  1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0, -1, -1, 0,
]);
const geometry = new THREE.BufferGeometry();

const indices = new Uint16Array();
geometry.setAttribute("position", new THREE.BufferAttribute(position, 3));
const mesh = new THREE.Mesh(geometry, material);

// 去除掉可以公用的顶点，
const position = new Float32Array([1, 1, 0, -1, -1, 0, 1, -1, 0, -1, 1, 0]);

// 使用索引来描述
const indices = new Uint16Array([0, 1, 2, 0, 3, 1]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

geometry.addGroup(0, 3, 0); // 开始位置，数量，材质索引
geometry.addGroup(3, 3, 1);

const mesh = new THREE.Mesh(geometry, [material, material2]);

// 法线辅助器
import { VertexNormalsHelper } from "three/examples/jsm/helpers/VertexNormalsHelper.js";
const geometry = new THREE.BufferGeometry();
// ...
// 自动计算法线
geometry.computeVertexNormals();
// ...
// 添加法线辅助器
const helper = new VertexNormalsHelper(mesh, 0.2, 0x00ff00);
scene.add(helper);

fbxLoader.load(floorFbx, function (group) {
  // 通过名称或ID查找到模型中指定的物体
  const mesh = group.getObjectById(40);
  // const mesh =  group.getObjectByName('a23')

  // 由于物体的父级可能存在几何变化导致与物体的尺寸不同，因此需要更新物体的世界矩阵
  //                    更新父级， 更新子集
  mesh.updateWorldMatrix(true, true);

  // 需要手动调用几何体包围盒计算函数
  const geometry = mesh.geometry;
  geometry.computeBoundingBox();

  // 获取包围盒计算结果
  const box = geometry.boundingBox;

  // 使用世界矩阵更新包围盒
  box.applyMatrix4(mesh.matrixWorld);

  // 创建包围盒辅助器显示包围盒
  const boxHelper = new THREE.Box3Helper(box, 0xff0000);

  // 添加到场景中
  scene.add(boxHelper);
});

const mesh = group.getObjectById(40);
const mesh1 = group.getObjectById(41);
const mesh2 = group.getObjectById(42);

const boxUnion = new THREE.Box3();
[mesh, mesh1, mesh2].forEach((mesh) => {
  mesh.updateWorldMatrix(true, true);
  const geometry = mesh.geometry;
  geometry.computeBoundingBox();
  const box = geometry.boundingBox;
  box.applyMatrix4(mesh.matrixWorld);
  const boxHelper = new THREE.Box3Helper(box, 0xff0000);
  scene.add(boxHelper);

  boxUnion.union(box);
});

const boxHelper = new THREE.Box3Helper(boxUnion, 0xff0000);
scene.add(boxHelper);

const boxUnion = new THREE.Box3();
[mesh, mesh1, mesh2].forEach((mesh) => {
  const box = new THREE.Box3().setFromObject(mesh);
  const boxHelper = new THREE.Box3Helper(box, 0xff0000);
  scene.add(boxHelper);
  boxUnion.union(box);
});

const boxHelper = new THREE.Box3Helper(boxUnion, 0xff0000);
scene.add(boxHelper);

// 会将几何体的中心放到世界中心
geometry.center();

// 但是Mesh对象可能有几何变换，导致物体看上去仍然偏移
// 需要重置Mesh的几何信息
mesh.position.set(0, 0, 0);

// 获取包围盒的中心点
const vec3 = box.getCenter(new THREE.Vector3());

// 通过名称或ID查找到模型中指定的物体
const mesh = group.getObjectById(40);

const geometry = mesh.geometry;

// 创建边缘几何体
const edgeGeometry = new THREE.EdgesGeometry(geometry);

// 创建线框几何体
// const wireGeometry = new THREE.WireframeGeometry(geometry);

// 创建线段材质
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
});

// 创建线段物体
const lineMesh = new THREE.LineSegments(edgeGeometry, lineMaterial);

// 由于新创建的物体丢失了源物体的世界矩阵信息，因此位置大小可能表现不同
// 需要使用源物体的世界矩阵信息重新赋值

// 更新源物体的世界矩阵信息
// mesh.updateWorldMatrix();

// 应用源物体的世界矩阵
lineMesh.matrix.copy(mesh.matrixWorld);

//将矩阵信息解构到物体的变换信息上
lineMesh.matrix.decompose(
  lineMesh.position,
  lineMesh.quaternion,
  lineMesh.scale
);
scene.add(lineMesh);

// 实现玻璃效果，只限于与环境光线相互作用
// 加载环境贴图是必须的，映射模式需要修改为折射
envMap.mapping = THREE.EquirectangularRefractionMapping;
// scene.environment = envMap;
// scene.background = envMap;

const box = new THREE.BoxGeometry(1, 1, 1);
const bujianMatertal = new THREE.MeshPhongMaterial({
  refractionRatio: 0.7, // 空气的折射|反射率
  // 当设置为 THREE.EquirectangularRefractionMapping 值为折射系数
  // 越高越像玻璃
  reflectivity: 0.99,
  envMap: envMap,
});

const boxMesh = new THREE.Mesh(box, bujianMatertal);

// 必须要有环境光，与环境光相互作用
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
window.addEventListener("pointermove", onPointerMove);
function onPointerMove(event) {
  // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function rayTest() {
  raycaster.setFromCamera(pointer, camera);

  const intersects = raycaster.intersectObjects(mesharr);
  if (intersects.length === mesharr.length) return;

  // intersects 是一个按深度排序的数组
  for (let i = 0; i < intersects.length; i++) {}
}

function animate() {
  rayTest();
  //...
}

import { Tween, Easing } from "three/examples/jsm/libs/tween.module.js";

const tween = new Tween(mesh.position);
// 移动到某个位置
tween.to({ x: 2 }, 1000);
// 位置更新时回调
tween.onUpdate(() => {
  // console.log(mesh.position.x);
});
//重复次数
tween.repeat(10);
// 是否往返
tween.yoyo(true);
// 是否延迟
tween.delay(1000);

// 设置缓动
tween.easing(Easing.Bounce.In);
tween.start();

// 动画链
// tween.chain(tween2);
// tween2.chain(tween);

// 更新动画
function animate() {
  tween.update();
}

const fs = require("fs");
const zlib = require("zlib");

// 创建解压流
const inflate = zlib.createInflate();
const readStream = fs.createReadStream(
  "./c6dd0164fe0eb4fde767f9e731a6c8ade0b69f"
);
const writeStream = fs.createWriteStream("bbb.txt");

// 处理数据流
readStream.pipe(inflate).pipe(writeStream);

var containerElement = document.createElement("div");
containerElement.innerHTML = appContent;
var appElement = containerElement.firstChild;
if (strictStyleIsolation) {
  if (supportShadowDOM) {
    var innerHTML = appElement.innerHTML;
    appElement.innerHTML = "";
    var shadow;
    if (appElement.attachShadow) {
      shadow = appElement.attachShadow({
        mode: "open",
      });
    } else {
      shadow = appElement.createShadowRoot();
    }
    shadow.innerHTML = innerHTML;
  }
}

// 给子应用的最外层元素设置一个私有属性，用于添加选择器
// css.QiankunCSSRewriteAttr 默认私有化属性  data-qiankun
// appInstanceId 子应用的 name 属性
appElement.setAttribute(css.QiankunCSSRewriteAttr, appInstanceId);

// 创建私有化的选择器 prefix =>div[data-qiankun="setting"]
var prefix = ""
  .concat(tag, "[")
  .concat(QiankunCSSRewriteAttr, '="')
  .concat(appName, '"]');

// 获取并便利所有的 style 标签
var styleNodes = appElement.querySelectorAll("style") || [];
_forEach(styleNodes, function (stylesheetElement) {
  // 创建新的style标签，并将当前style中的样式复制到新标签中
  var styleNode = document.createElement("style");
  styleNode.appendChild(
    document.createTextNode(stylesheetElement.textContent || "")
  );

  // 获取 CSSStyleSheet 对象，并将 cssRules 转为数组, 遍历并重写规则
  var sheet = styleNode.sheet;
  var rules = arrayify(sheet.cssRules);
  var css = "";
  rules.forEach(function (rule) {
    switch (rule.type) {
      case RuleType.STYLE:
        /**
          1 对于 html body :root 几个根元素
            会直接用 prefix 替换掉，防止对基座应用样式污染

          2 html + body 格式的演示qiankun认为是非标准的样式不做处理

          3 html > body html body 性质的选择器会将 html 替换为空字符串

          4 检查 a,html or *:not(:root) 根元素前插入了其他字符的选择器
            同样需要替换为 a,[prefix] *:not([prefix]) 的形式
          
          5 其他选择器会在选择器前添加前缀 
            [prefix] .text {}
          
          最后拼接字符串
         */

        css += ruleStyle(rule, prefix);
        break;
      case RuleType.MEDIA:
      case RuleType.SUPPORTS:
        /**
           媒体查询 @media screen and (max-width: 300px) {}
           能力检测 @supports (display: grid) {}

           会递归调用重写方法，将中间的选择器重写
         
         */
        css += ruleStyle(rule, prefix);
        break;
    }
  });
});

function iter(win, cb) {
  for (const k in win) {
    if (win.hasOwnProperty(k) || k === "clearInterval") {
      cb(k);
    }
  }
}

class SnapshotSandBox {
  deleteProps = new Set();
  modifyPropsMap = {};
  proxy = window;
  snapshot = {};

  active() {
    this.snapshot = {};
    // 激活时记录当前的window快照，不关心 window 上是否有其他应用的属性。
    // 只关心本次激活和卸载时属性的变化， 就是子应用的属性变化。
    iter(window, (k) => {
      this.snapshot[k] = window[k];
    });

    // 之前卸载时检测出修改或添加的属性，本次激活时要添加回来
    // 虽然添加和修改的属性都是在 window 上，但是应用卸载后可能被其他应用删除或重写
    // 这里使用记录值恢复之前的状态

    Object.keys(this.modifyPropsMap).forEach((k) => {
      window[k] = this.modifyPropsMap[k];
    });

    // 删除卸载时记录的删除值
    // 同样因为其他同框架的子应用可能会添加相同属性

    this.deleteProps.forEach((k) => {
      delete window[k];
    });

    this.sandboxRunning = true;
  }

  inactive() {
    this.deleteProps.clear();
    this.modifyPropsMap = {};

    // 和刚激活应用时的快照对比，检查新增或修改的属性
    iter(window, (k) => {
      if (window[k] !== this.snapshot[k]) {
        this.modifyPropsMap[k] = window[k];
      }
    });

    // 快照中有，但是当前 window 上没有，那么属性被删除

    iter(this.snapshot, (k) => {
      if (!window.hasOwnProperty(k)) {
        this.deleteProps.add(k);
        // 恢复环境， 应用中删除的属性，退出应用是需要还原
        window[k] = this.snapshot[k];
      }
    });
    this.sandboxRunning = false;
  }
}

const createFakeWindow = (globalContext, speed) => {
  const fakeWindow = {};
  const propertiesWithGetter = new Map();
  // 获取 window 静态属性
  Object.getOwnPropertyNames(globalContext)
    .filter((p) => {
      // 属性描述符
      // configurable 为假表示不能 修改，不能删除

      const dec = Object.getOwnPropertyDescriptor(globalContext, p);
      return dec?.configurable;
    })
    .forEach((p) => {
      const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
      if (descriptor) {
        const hasGetter = Object.prototype.hasOwnProperty.call(
          descriptor,
          "get"
        );

        // FAQ window 引用属性，为什么需要要修改属性描述符
        if (
          p === "self" ||
          p === "window" ||
          p === "parent" ||
          p === "top" ||
          (speed && p === "document")
        ) {
          descriptor.configurable = true;

          // 属性访问器和， writable 属性描述符不能同时指定
          if (!hasGetter) {
            descriptor.writable = true;
          }
        }

        // 记录所有所有访问器得属性
        if (hasGetter) propertiesWithGetter.set(p, true);

        // FAQ 所有 configurable 为假得属性，就一定是环境级别属性属性么
        Object.defineProperties(fakeWindow, p, Object.freeze(descriptor));
      }
    });
  // Object.keys(window).forEach(k=>{
  //     if( has)
  //     const propDescriptor =   Object.getOwnPropertyDescriptor(window,k);
  //     c
  // })
};

let activeSandboxCount = 0;

class ProxySandBox {
  sandboxRunning = true;
  activeSandboxCount = 0;
  document = document;
  constructor(name, globalContext = window, opts) {
    this.name = name;
    this.globalContext = globalContext;
    this.type = "proxy";
    const { updatedValueSet } = this;
    const { speedy } = opts || {};
    const { fakeWindow, propertiesWithGetter } = createFakeWindow(
      globalContext,
      !!speedy
    );

    const proxy = new Proxy(fakeWindow, {
      get(target, p) {
        // this.registerRunningApp()

        // 处理对一些特殊属性值得处理

        //Symbol.unscopables 提供了一种机制，允许对象指定哪些属性在 with 语句中不应该被暴露为局部变量。如果一个属性在对象的 Symbol.unscopables 列表中，它将不会出现在 with 语句的作用域中。
        //   const obj = {
        //     a: 1,
        //     b: 2,
        //     [Symbol.unscopables]: {
        //         b: true // 使 'b' 在 with 语句中不可见
        //     }
        // };

        if (p === Symbol.unscopables) return unscopables;
        if (p === "window" || p === "self" || p === "globalThis") {
          return proxy;
        }

        // 如果获取得上级 window, 允许逃逸
        if (p === "top" || p === "parent") {
          if (globalContext === globalContext.parent) {
            return proxy;
          }
          return globalContext[p];
        }

        if (p === "hasOwnProperty") {
          // proxy.hasOwnProperty.call({a},'a')
          return function hasOwnProperty(key) {
            if (this !== proxy && this !== null && typeof this === "object") {
              return Object.prototype.hasOwnProperty.call(this, key);
            }

            // proxy.hasOwnProperty("a")
            return (
              fakeWindow.hasOwnProperty(key) ||
              globalContext.hasOwnProperty(key)
            );
          };
        }

        if (p === "document") {
          return this.document;
        }

        if (p === "eval") {
          return eval;
        }
        // customProp {configurable:false} => {configurable:true}
        const actualTarget = propertiesWithGetter.has(p)
          ? globalContext
          : p in target
          ? target
          : globalContext;
        const value = actualTarget[p];

        // 校验了是不是frozen的属性， 如果是需要直接返回
        // propertyDescriptor.configurable === false
        // && (propertyDescriptor.writable === false || (propertyDescriptor.get && !propertyDescriptor.set)),
        if (isPropertyFrozen(actualTarget, p)) {
          return value;
        }
        // 非原生全局属性直接返回 addEventListener
        // isNativeGlobalProp 枚举了 所有的全局属性
        // useNativeWindowForBindingsProps 记录所有执行时需要绑定原生window方法 [fetch,true]
        if (!isNativeGlobalProp(p) && !useNativeWindowForBindingsProps.has(p)) {
          return value;
        }

        // 如果不处理 fetch.bind(this) 实际时绑定的proxyWindow 导致报错
        const boundTarget = useNativeWindowForBindingsProps.get(p)
          ? nativeGlobal
          : globalContext;

        // 仅绑定 isCallable && !isBoundedFunction && !isConstructable 的函数对象，如 window.console、window.atob 这类，不然微应用中调用时会抛出 Illegal invocation 异常
        // 目前没有完美的检测方式，这里通过 prototype 中是否还有可枚举的拓展方法的方式来判断
        // @warning 这里不要随意替换成别的判断方式，因为可能触发一些 edge case（比如在 lodash.isFunction 在 iframe 上下文中可能由于调用了 top window 对象触发的安全异常）
        const rebindTarget2Fn = (target, fn) => {
          const isCallable = (fn) =>
            typeof fn === "function" && fn instanceof Function;
          // bind 函数的名称会以 bound开头  "bound fn"
          const isBoundedFunction = (fn) =>
            fn.name.indexOf("bound ") === 0 && !fn.hasOwnProperty("prototype");

          const isConstructable = () => {
            const hasPrototypeMethods =
              fn.prototype &&
              // class有constructor属性
              fn.prototype.constructor === fn &&
              // 构造器需要有原型链
              Object.getOwnPropertyNames(fn.prototype).length > 1;
            if (hasPrototypeMethods) return true;
            // 假设以下视为构造函数
            // 1. 有 prototype 并且 prototype 上有定义一系列非 constructor 属性
            // 2. 函数名大写开头
            // 3. class 函数

            let constructable = hasPrototypeMethods;
            if (!constructable) {
              const fnString = fn.toString();
              const constructableFunctionRegex = /^function\b\s[A-Z].*/;
              const classRegex = /^class\b/;
              constructable =
                constructableFunctionRegex.test(fnString) ||
                classRegex.test(fnString);
            }

            return constructable;
          };

          if (
            isCallable(fn) &&
            !isBoundedFunction(fn) &&
            !isConstructable(fn)
          ) {
            const boundValue = Function.prototype.bind.call(fn, target);

            // 拷贝原有方法的静态属性
            Object.getOwnPropertyNames(fn).forEach((key) => {
              // boundValue might be a proxy, we need to check the key whether exist in it
              if (!boundValue.hasOwnProperty(key)) {
                Object.defineProperty(
                  boundValue,
                  key,
                  Object.getOwnPropertyDescriptor(fn, key)
                );
              }
            });

            // 如果原方法 prototype 属性设置了不可枚举，会导致原型链丢失
            // 赋值的时候不能使用 = 或 Object.assign, 因为赋值操作会向上查询原型链
            // 如果描述符被设 writable =false 或没有 set 属性访问器，会抛出错误
            // Cannot assign to read only property 'prototype' of function
            if (
              fn.hasOwnProperty("prototype") &&
              !boundValue.hasOwnProperty("prototype")
            ) {
              Object.defineProperty(boundValue, "prototype", {
                value: fn.prototype,
                enumerable: false,
                writable: true,
              });
            }

            // 有一些库会使用 /native code/.test(fn.toString()) 检测是不是原生的方法
            // 如果不特殊处理，所有toString 返回的都是 [object fakeWindow] 或 [object Window]]
            if (typeof fn.toString === "function") {
              const valueHasInstanceToString =
                fn.hasOwnProperty("toString") &&
                !boundValue.hasOwnProperty("toString");
              const boundValueHasPrototypeToString =
                boundValue.toString === Function.prototype.toString;

              if (valueHasInstanceToString || boundValueHasPrototypeToString) {
                // valueHasInstanceToString? 有自定义的 toString 使用原方法
                //                         : 使用原生的 toString
                const originToStringDescriptor =
                  Object.getOwnPropertyDescriptor(
                    valueHasInstanceToString ? fn : Function.prototype,
                    "toString"
                  );

                Object.defineProperty(
                  boundValue,
                  "toString",
                  Object.assign(
                    {},
                    originToStringDescriptor,
                    originToStringDescriptor?.get
                      ? null
                      : { value: () => fn.toString() }
                  )
                );
              }
            }
          }
        };
        return rebindTarget2Fn(boundTarget, value);
      },
    });
  }

  active() {
    if (!this.activeSandboxCount) activeSandboxCount += 1;
    this.sandboxRunning = true;
  }
  inActive() {
    this.sandboxRunning = false;
  }
  patchDocument(doc) {
    this.document = doc;
  }
}

{
  output: {
    // 输出格式改为 systemjs
    libraryTarget: "system",
  },
   devServer: {
      // 任意路径下都返回 spa 应用入口文件
      historyApiFallback: true，
      // 允许对子应用的跨域调用
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
    // 会增加一个入口文件，动态指定 __webpack_public_path__
    // 避免子应用中异步加载的资源请求了主应用的路径
    new SystemJSPublicPathPlugin(
        //...
    ),
    // 处理开发模式下独立启动子应用显示页面
    !isProduction &&
    new StandaloneSingleSpaPlugin({
        //...
    }),
};

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  domElementGetter: () => document.querySelector("#aa"),
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

const opts = {
  /** 接收到的参数*/
};
const SingleSpaContext = opts.React.createContext();

opts.SingleSpaRoot = createSingleSpaRoot(opts);

// 将传入的新组件包装成新的 Root 组件

function createSingleSpaRoot() {
  // 为了支持 React 15 所以 single-spa 并没有使用 useEffect
  // 并且使用 函数 模拟 ES6 class 实现
  function SingleSpaRoot() {}
  SingleSpaRoot.prototype = Object.create(opts.React.Component.prototype);

  // 绑定自定义钩子函数
  SingleSpaRoot.prototype.componentDidMount = function () {
    setTimeout(this.props.mountFinished);
  };

  // 绑定自定义钩子函数
  SingleSpaRoot.prototype.render = function () {
    return this.props.children;
  };

  opts.SingleSpaRoot = createSingleSpaRoot(opts);

  const lifecycles = {
    bootstrap: bootstrap.bind(null, opts),
    mount: mount.bind(null, opts),
    unmount: unmount.bind(null, opts),
  };

  // 暴露接口方法
  return lifecycles;
}

function mount(opts, props) {
  const whenMounted = function () {
    resolve(this);
  };

  const elementToRender = getElementToRender(opts, props, whenMounted);

  // 包装 rootComponent  传入额外的 props
  function getElementToRender(opts, props, mountFinished) {
    const elementToRender = opts.React.createElement(opts.rootComponent, props);

    // 绑定 context
    // ...

    // 绑定 errorBoundary
    // ...

    elementToRender = opts.React.createElement(
      opts.SingleSpaRoot,
      {
        ...props,
        mountFinished,
        updateFinished() {
          //...
        },
        unmountFinished() {
          //...
        },
      },
      elementToRender
    );

    return elementToRender;
  }
  const domElement = opts.domElementGetter();

  if (opts.ReactDOMClient?.createRoot) {
    opts.renderType = "createRoot";
  } else {
    opts.renderType = "render";
  }
  const renderResult = reactDomRender({
    elementToRender,
    domElement: opts.domElementGetter(),
    reactDom: opts.ReactDOMClient || opts.ReactDOM,
    renderType: opts.renderType,
  });

  // 挂载组件
  function reactDomRender({
    reactDom,
    renderType,
    elementToRender,
    domElement,
  }) {
    const renderFn = reactDom[renderType];

    switch (renderType) {
      case "createRoot":
      case "unstable_createRoot":
      case "createBlockingRoot":
      case "unstable_createBlockingRoot": {
        const root = renderFn(domElement);
        root.render(elementToRender);
        return root;
      }
      case "hydrateRoot": {
        const root = renderFn(domElement, elementToRender);
        return root;
      }
      case "hydrate":
      default: {
        renderFn(elementToRender, domElement);
        // The renderRoot function should return a react root, but ReactDOM.hydrate() and ReactDOM.render()
        // do not return a react root. So instead, we return null which indicates that there is no react root
        // that can be used for updates or unmounting
        return null;
      }
    }
  }

  opts.domElements[props.name] = domElement;
  opts.renderResults[props.name] = renderResult;
}

function unmount(opts, props) {
  return new Promise((resolve) => {
    opts.unmountResolves[props.name] = resolve;

    const root = opts.renderResults[props.name];

    if (root && root.unmount) {
      // React >= 18
      const unmountResult = root.unmount();
    } else {
      // React < 18
      (opts.ReactDOMClient || opts.ReactDOM).unmountComponentAtNode(
        opts.domElements[props.name]
      );
    }
    delete opts.domElements[props.name];
    delete opts.renderResults[props.name];
  });
}

function update(opts, props) {
  return new Promise((resolve) => {
    if (!opts.updateResolves[props.name]) {
      opts.updateResolves[props.name] = [];
    }

    opts.updateResolves[props.name].push(resolve);

    const elementToRender = getElementToRender(opts, props, null);
    const renderRoot = opts.renderResults[props.name];
    if (renderRoot && renderRoot.render) {
      // React 18 with ReactDOM.createRoot()
      renderRoot.render(elementToRender);
    } else {
      // React 16 / 17 with ReactDOM.render()
      const domElement = chooseDomElementGetter(opts, props)();
      // This is the old way to update a react application - just call render() again
      getReactDom(opts).render(elementToRender, domElement);
    }
  });
}

const apps = [];

const NOT_LOADED = "NOT_LOADED";
const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE";
const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED";
const BOOTSTRAPPING = "BOOTSTRAPPING";
const NOT_MOUNTED = "NOT_MOUNTED";
const MOUNTING = "MOUNTING";
const MOUNTED = "MOUNTED";
const LOAD_ERROR = "LOAD_ERROR";
const SKIP_BECAUSE_BROKEN = "SKIP_BECAUSE_BROKEN";

// 主应用启动状态
let isStart = false;

function registerApplication(appNameOrConfig) {
  // app 必须是返回 promise 的函数
  // customProps 必须是对象
  appNameOrConfig.customProps = appNameOrConfig.customProps || {};
  // activeWhen 是一个路径匹配函数的数组

  appNameOrConfig.activeWhen = Array.isArray(appNameOrConfig.activeWhen)
    ? appNameOrConfig.activeWhen
    : [appNameOrConfig.activeWhen];
  appNameOrConfig.activeWhen = appNameOrConfig.activeWhen.map((path) =>
    typeof path === "function" ? path : pathToActiveWhen(path)
  );

  apps.push({
    loadErrorTime: null,
    status: NOT_LOADED,
    ...appNameOrConfig,
  });

  reroute();
}

function start() {
  isStart = true;
  patchHistoryApi(opts);
  reroute();
}

let urlRerouteOnly;
let originalReplaceState;
function createPopStateEvent(state, originalMethodName) {
  // https://github.com/single-spa/single-spa/issues/224 and https://github.com/single-spa/single-spa-angular/issues/49
  // We need a popstate event even though the browser doesn't do one by default when you call replaceState, so that
  // all the applications can reroute. We explicitly identify this extraneous event by setting singleSpa=true and
  // singleSpaTrigger=<pushState|replaceState> on the event instance.
  let evt;
  try {
    evt = new PopStateEvent("popstate", { state });
  } catch (err) {
    // IE 11 compatibility https://github.com/single-spa/single-spa/issues/299
    // https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-html5e/bd560f47-b349-4d2c-baa8-f1560fb489dd
    evt = document.createEvent("PopStateEvent");
    evt.initPopStateEvent("popstate", false, false, state);
  }
  evt.singleSpa = true;
  evt.singleSpaTrigger = originalMethodName;
  return evt;
}

function patchedUpdateState(updateState, methodName) {
  return function () {
    const urlBefore = window.location.href;
    const result = updateState.apply(this, arguments);
    const urlAfter = window.location.href;

    if (urlBefore !== urlAfter) {
      // 手动触发 popstate 事件，让不同的子应用可以响应路由的变化。
      window.dispatchEvent(
        createPopStateEvent(window.history.state, methodName)
      );
    }
    return result;
  };
}

function patchHistoryApi() {
  urlRerouteOnly = true;
  originalReplaceState = window.history.replaceState;
  function urlReroute() {
    reroute([], arguments);
  }
  window.addEventListener("hashchange", urlReroute);
  //调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发
  //比如点击后退按钮（或者在 JavaScript 中调用 history.back()  go()方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。
  window.addEventListener("popstate", urlReroute);

  const originalAddEventListener = window.addEventListener;
  const originalRemoveEventListener = window.removeEventListener;

  // history 改变的时候需要主动触发事件
  window.history.pushState = patchedUpdateState(
    window.history.pushState,
    "pushState"
  );
  window.history.replaceState = patchedUpdateState(
    originalReplaceState,
    "replaceState"
  );
}