跳到主要内容

React DOM server external runtime

一、作用​

二、全局副作用​

备注

引入全局副作用，由 ReactDOmFizzInstructionSetExternalRuntime 提供

// Imports are resolved statically by the closure compiler in release bundles
// and by rollup in jest unit tests
// 导入在发布版本中由 closure 编译器静态解析在 jest 单元测试中由 rollup 解析
import './fizz-instruction-set/_ReactDOMFizzInstructionSetExternalRuntime';

if (document.body != null) {
  if (document.readyState === 'loading') {
    installFizzInstrObserver(document.body);
  }
  handleExistingNodes(document.body as HTMLElement);
} else {
  // Document must be loading -- body may not exist yet if the fizz external
  // runtime is sent in <head> (e.g. as a preinit resource)
  // 文档必须正在加载 -- 如果 fizz 外部运行时在 <head> 中发送（例如，作为预初始化资源），
  // 则 body 可能尚不存在
  const domBodyObserver = new MutationObserver(() => {
    // We expect the body node to be stable once parsed / created
    // 我们期望 body 节点在解析/创建后保持稳定
    if (document.body != null) {
      if (document.readyState === 'loading') {
        installFizzInstrObserver(document.body);
      }
      handleExistingNodes(document.body as HTMLElement);

      // We can call disconnect without takeRecord here,
      // since we only expect a single document.body
      // 我们可以在这里调用 disconnect 而不调用 takeRecord，因为我们只期望有一个
      // document.body
      domBodyObserver.disconnect();
    }
  });
  // documentElement must already exist at this point
  // 到这一点时 documentElement 必须已经存在
  domBodyObserver.observe(document.documentElement, { childList: true });
}

三、工具​

1. 处理现有节点​

function handleExistingNodes(target: HTMLElement) {
  const existingNodes = target.querySelectorAll('template');
  for (let i = 0; i < existingNodes.length; i++) {
    handleNode(existingNodes[i]);
  }
}

2. 安装 FizzInstr 观察器​

function installFizzInstrObserver(target: Node) {
  const handleMutations = (mutations: Array<MutationRecord>) => {
    for (let i = 0; i < mutations.length; i++) {
      const addedNodes = mutations[i].addedNodes;
      for (let j = 0; j < addedNodes.length; j++) {
        if (addedNodes[j].parentNode) {
          handleNode(addedNodes[j]);
        }
      }
    }
  };

  const fizzInstrObserver = new MutationObserver(handleMutations);
  // We assume that instruction data nodes are eventually appended to the
  // body, even if Fizz is streaming to a shell / subtree.
  // 我们假设指令数据节点最终会被添加到 body，即使 Fizz 正在向 shell/子树流式传输。
  fizzInstrObserver.observe(target, {
    childList: true,
  });
  window.addEventListener('DOMContentLoaded', () => {
    handleMutations(fizzInstrObserver.takeRecords());
    fizzInstrObserver.disconnect();
  });
}

3. 处理节点​

function handleNode(node_: Node) {
  if (node_.nodeType !== 1 || !(node_ as HTMLElement).dataset) {
    return;
  }
  const node = node_ as HTMLElement;
  const dataset = node.dataset;
  if (dataset['rxi'] != null) {
    window['$RX'](
      dataset['bid'],
      dataset['dgst'],
      dataset['msg'],
      dataset['stck'],
      dataset['cstck'],
    );
    node.remove();
  } else if (dataset['rri'] != null) {
    // Convert styles here, since its type is Array<Array<string>>
    // 在这里转换样式，因为它的类型是 Array<Array<string>>
    window['$RR'](dataset['bid'], dataset['sid'], JSON.parse(dataset['sty']));
    node.remove();
  } else if (dataset['rci'] != null) {
    window['$RC'](dataset['bid'], dataset['sid']);
    node.remove();
  } else if (dataset['rsi'] != null) {
    window['$RS'](dataset['sid'], dataset['pid']);
    node.remove();
  }
}
最后于 更新