wip

Author: mofeiZ

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -8,6 +8,7 @@
  */
 
 'use strict';
+import * as fs from 'fs';
 
 let JSDOM;
 let Stream;
@@ -91,17 +92,7 @@ describe('ReactDOMFizzServer', () => {
 
     renderOptions = {};
     if (gate(flags => flags.enableFizzNoScriptExecution)) {
-      window.__init_instruction_observer__ = () => {
-        global.testDocument = document;
-        global.MutationObserver = jsdom.window.MutationObserver;
-        reactInstructionObserver = ReactDOMFizzServer.getReactDOMClientMutationObserver();
-        reactInstructionObserver.observe(container, {
-          childList: true,
-          subtree: true,
-        });
-      };
-
-      renderOptions.bootstrapScriptContent = '__init_instruction_observer__();';
+      renderOptions.bootstrapModules = ['../server/ReactDOMClientInstructionObserver.js'];
       renderOptions.disableInstructionScriptExecution = true;
     }
   });
@@ -138,7 +129,13 @@ describe('ReactDOMFizzServer', () => {
         (CSPnonce === null || inner.getAttribute('nonce') === CSPnonce)
       ) {
         const script = document.createElement('SCRIPT');
-        script.textContent = inner.textContent;
+        const scriptSrc = inner.getAttribute("src");
+        if (scriptSrc) {
+          script.textContent = fs.readFileSync(require.resolve(scriptSrc));
+          console.log("got script src");
+        } else {
+          script.textContent = inner.textContent;
+        }
         node.replaceChild(script, inner);
       } else {
         replaceScripts(inner);
@@ -172,7 +169,12 @@ describe('ReactDOMFizzServer', () => {
         (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
       ) {
         const script = document.createElement('SCRIPT');
-        script.textContent = node.textContent;
+        const scriptSrc = node.getAttribute("src");
+        if (scriptSrc) {
+          script.textContent = fs.readFileSync(require.resolve(scriptSrc));
+        } else {
+          script.textContent = inner.textContent;
+        }
         fakeBody.removeChild(node);
         parent.appendChild(script);
       } else {
@@ -330,13 +332,14 @@ describe('ReactDOMFizzServer', () => {
       const mergedOptions = {...renderOptions};
       Object.entries(options).forEach(([key, value]) => {
         if (mergedOptions[key]) {
-          if (key === 'bootstrapScriptContent') {
-            mergedOptions[key] += value;
+          if (key === 'bootstrapModules') {
+            mergedOptions[key].push(value);
           }
         } else {
           mergedOptions[key] = value;
         }
       });
+      console.log(mergedOptions);
       return ReactDOMFizzServer.renderToPipeableStream(jsx, mergedOptions);
     } else {
       return ReactDOMFizzServer.renderToPipeableStream(jsx, renderOptions);
@@ -1849,7 +1852,6 @@ describe('ReactDOMFizzServer', () => {
     await act(async () => {
       controls = renderToPipeableStream(
         <App isClient={false} />,
-
         {
           onError,
         },

packages/react-dom/src/server/ReactDOMClientInstructionObserver.js

@@ -7,13 +7,22 @@
  * @flow
  */
 
+let __DEV__;
+if (window.__DEV__ != null) {
+  __DEV__ = window.__DEV__;
+} else {
+  __DEV__ = true;
+}
+
+console.log("Client mutation observer");
 const reactInstructionObserver /*: MutationObserver*/ = new MutationObserver(
   mutations => {
     mutations.forEach(mutation => {
       mutation.addedNodes.forEach(node => {
         if (node.nodeType !== 1) {
           return;
         }
+
         // $FlowFixMe[incompatible-cast]
         const attrStr = (node /*: HTMLElement*/)
           .getAttribute('data-react-server-instruction');
@@ -24,14 +33,17 @@ const reactInstructionObserver /*: MutationObserver*/ = new MutationObserver(
         if (!attr) {
           return;
         }
+
         if (__DEV__) {
           if (!(Array.isArray(attr) && attr.length >= 1)) {
             console.error('Bad shape: data attribute');
             return;
           }
         }
+
         const instr = attr[0];
         const args = attr.slice(1);
+        console.log(instr, args);
         switch (instr) {
           case '$RX':
             clientRenderBoundaryImpl(args);
@@ -55,12 +67,6 @@ const reactInstructionObserver /*: MutationObserver*/ = new MutationObserver(
   },
 );
 
-let document;
-if (__DEV__ && global.testDocument) {
-  document = global.testDocument;
-} else {
-  document = global.document;
-}
 
 if (document.body) {
   reactInstructionObserver.observe(document.body, {
@@ -209,6 +215,8 @@ function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
   const contentNode = document.getElementById(contentID);
   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
   // This might also help by not causing recalcing each time we move a child from here to the target.
+  // $FlowFixMe[incompatible-use]
+  // $FlowFixMe[incompatible-call]
   contentNode.parentNode.removeChild(contentNode);
 
   // Find the fallback's first element.
@@ -228,11 +236,14 @@ function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
     // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
     // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
     // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+    // $FlowFixMe[incompatible-use]
     const parentInstance = suspenseNode.parentNode;
+    // $FlowFixMe[incompatible-use]
     let node = suspenseNode.nextSibling;
     let depth = 0;
     do {
       if (node && node.nodeType === COMMENT_NODE) {
+        // $FlowFixMe[prop-missing]
         const data = node.data;
         if (data === SUSPENSE_END_DATA) {
           if (depth === 0) {
@@ -370,4 +381,4 @@ function completeSegmentImpl(args) {
   completeSegment(...args);
 }
 
-export default reactInstructionObserver;
+// export default reactInstructionObserver;