render.js — react Source File

Architecture documentation for render.js, a javascript file in the react codebase. 5 imports, 0 dependents.

File javascript BabelCompiler Optimization 5 imports 1 functions 1 classes

Entity Profile

BabelCompiler→ Optimization→ render.js — react Source File

Dependency Diagram

graph LR
  da0e9089_1e9e_0728_86ae_6672c71000c6["render.js"]
  0728161c_056a_6e89_5b38_6275d0ed4d04["App.js"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> 0728161c_056a_6e89_5b38_6275d0ed4d04
  4050ffa7_8e88_cc37_b010_0329f3817f99["App"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> 4050ffa7_8e88_cc37_b010_0329f3817f99
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  860fcd5f_4dd1_15af_0c6d_0894e4c5dffb["server"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> 860fcd5f_4dd1_15af_0c6d_0894e4c5dffb
  84cea5a1_779b_9551_2f54_df77f0973a0f["stream"]
  da0e9089_1e9e_0728_86ae_6672c71000c6 --> 84cea5a1_779b_9551_2f54_df77f0973a0f
  style da0e9089_1e9e_0728_86ae_6672c71000c6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React from 'react';
import {renderToPipeableStream} from 'react-dom/server';
import {Writable} from 'stream';

import App from '../src/components/App';

let assets;
if (process.env.NODE_ENV === 'development') {
  // Use the bundle from create-react-app's server in development mode.
  assets = {
    'main.js': '/static/js/bundle.js',
    'main.css': '',
  };
} else {
  assets = require('../build/asset-manifest.json');
}

class ThrottledWritable extends Writable {
  constructor(destination) {
    super();
    this.destination = destination;
    this.delay = 10;
  }

  _write(chunk, encoding, callback) {
    let o = 0;
    const write = () => {
      this.destination.write(chunk.slice(o, o + 100), encoding, x => {
        o += 100;
        if (o < chunk.length) {
          setTimeout(write, this.delay);
        } else {
          callback(x);
        }
      });
    };
    setTimeout(write, this.delay);
  }

  _final(callback) {
    setTimeout(() => {
      this.destination.end(callback);
    }, this.delay);
  }
}

export default function render(url, res) {
  res.socket.on('error', error => {
    // Log fatal errors
    console.error('Fatal', error);
  });
  let didError = false;
  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
    bootstrapScripts: [assets['main.js']],
    progressiveChunkSize: 1024,
    onShellReady() {
      // If something errored before we started streaming, we set the error code appropriately.
      res.statusCode = didError ? 500 : 200;
      res.setHeader('Content-type', 'text/html');
      // To test the actual chunks taking time to load over the network, we throttle
      // the stream a bit.
      const throttledResponse = new ThrottledWritable(res);
      pipe(throttledResponse);
    },
    onShellError(x) {
      // Something errored before we could complete the shell so we emit an alternative shell.
      res.statusCode = 500;
      res.send('<!doctype><p>Error</p>');
    },
    onError(x) {
      didError = true;
      console.error(x);
    },
  });
  // Abandon and switch to client rendering after 5 seconds.
  // Try lowering this to see the client recover.
  setTimeout(abort, 5000);
}