react/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js at 3feb3cde40a8ec469caaccc0b6140f1e5bdc2791 · mofeiZ/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
 * This file is compiled to a standalone browser script by rollup and loaded by Fizz
 *  clients. Therefore, it should be fast and not have many external dependencies.
 * @flow
 */
/* eslint-disable dot-notation */

// Imports are resolved statically by the closure compiler in release bundles
// and by rollup in jest unit tests
import {
  clientRenderBoundary,
  completeBoundaryWithStyles,
  completeBoundary,
  completeSegment,
} from './fizz-instruction-set/ReactDOMFizzInstructionSetExternalRuntime';

if (!window.$RC) {
  // TODO: Eventually remove, we currently need to set these globals for
  // compatibility with ReactDOMFizzInstructionSet
  window.$RC = completeBoundary;
  window.$RM = new Map();
}

if (document.readyState === 'loading') {
  if (document.body != null) {
    installFizzInstrObserver(document.body);
  } else {
    // body may not exist yet if the fizz runtime is sent in <head>
    // (e.g. as a preinit resource)
    const domBodyObserver = new MutationObserver(() => {
      // We expect the body node to be stable once parsed / created
      if (document.body) {
        if (document.readyState === 'loading') {
          installFizzInstrObserver(document.body);
        }
        handleExistingNodes();
        domBodyObserver.disconnect();
      }
    });
    // documentElement must already exist at this point
    // $FlowFixMe[incompatible-call]
    domBodyObserver.observe(document.documentElement, {childList: true});
  }
}

handleExistingNodes();

function handleExistingNodes() {
  const existingNodes = document.getElementsByTagName('template');
  for (let i = 0; i < existingNodes.length; i++) {
    handleNode(existingNodes[i]);
  }
}

function installFizzInstrObserver(target /*: Node */) {
  const fizzInstrObserver = new MutationObserver(mutations => {
    for (let i = 0; i < mutations.length; i++) {
      const addedNodes = mutations[i].addedNodes;
      for (let j = 0; j < addedNodes.length; j++) {
        if (addedNodes.item(j).parentNode) {
          handleNode(addedNodes.item(j));
        }
      }
    }
  });
  // We assume that instruction data nodes are eventually appended to the
  // body, even if Fizz is streaming to a shell / subtree.
  fizzInstrObserver.observe(target, {
    childList: true,
  });
  window.addEventListener('DOMContentLoaded', () => {
    fizzInstrObserver.disconnect();
  });
}

function handleNode(node_ /*: Node */) {
  // $FlowFixMe[incompatible-cast]
  if (node_.nodeType !== 1 || !(node_ /*: HTMLElement*/).dataset) {
    return;
  }
  // $FlowFixMe[incompatible-cast]
  const node = (node_ /*: HTMLElement*/);
  const dataset = node.dataset;
  if (dataset['rxi'] != null) {
    clientRenderBoundary(
      dataset['bid'],
      dataset['dgst'],
      dataset['msg'],
      dataset['stck'],
    );
    node.remove();
  } else if (dataset['rri'] != null) {
    // Convert styles here, since its type is Array<Array<string>>
    completeBoundaryWithStyles(
      dataset['bid'],
      dataset['sid'],
      JSON.parse(dataset['sty']),
    );
    node.remove();
  } else if (dataset['rci'] != null) {
    completeBoundary(dataset['bid'], dataset['sid']);
    node.remove();
  } else if (dataset['rsi'] != null) {
    completeSegment(dataset['sid'], dataset['pid']);
    node.remove();
  }
}