renderApp() — react Function Reference

Architecture documentation for the renderApp() function in region.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ renderApp() — react Function Reference

Dependency Diagram

graph TD
  b4795c8d_1c3d_8bd7_7b43_64b3b671a4c4["renderApp()"]
  b3216559_a4bc_a4c6_4246_6887719cfe26["region.js"]
  b4795c8d_1c3d_8bd7_7b43_64b3b671a4c4 -->|defined in| b3216559_a4bc_a4c6_4246_6887719cfe26
  style b4795c8d_1c3d_8bd7_7b43_64b3b671a4c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/server/region.js lines 78–134

async function renderApp(res, returnValue, formState, noCache, debugChannel) {
  const {renderToPipeableStream} = await import(
    'react-server-dom-unbundled/server'
  );
  // const m = require('../src/App.js');
  const m = await import('../src/App.js');

  let moduleMap;
  let mainCSSChunks;
  if (process.env.NODE_ENV === 'development') {
    // Read the module map from the HMR server in development.
    moduleMap = await (
      await fetch('http://localhost:3000/react-client-manifest.json')
    ).json();
    mainCSSChunks = (
      await (
        await fetch('http://localhost:3000/entrypoint-manifest.json')
      ).json()
    ).main.css;
  } else {
    // Read the module map from the static build in production.
    moduleMap = JSON.parse(
      await readFile(
        path.resolve(__dirname, `../build/react-client-manifest.json`),
        'utf8'
      )
    );
    mainCSSChunks = JSON.parse(
      await readFile(
        path.resolve(__dirname, `../build/entrypoint-manifest.json`),
        'utf8'
      )
    ).main.css;
  }
  const App = m.default.default || m.default;
  const root = React.createElement(
    React.Fragment,
    null,
    // Prepend the App's tree with stylesheets required for this entrypoint.
    mainCSSChunks.map(filename =>
      React.createElement('link', {
        rel: 'stylesheet',
        href: filename,
        precedence: 'default',
        key: filename,
      })
    ),
    React.createElement(App, {noCache})
  );
  // For client-invoked server actions we refresh the tree and return a return value.
  const payload = {root, returnValue, formState};
  const {pipe} = renderToPipeableStream(payload, moduleMap, {
    debugChannel,
    filterStackFrame,
  });
  pipe(res);
}