index.js — react Source File

Source Code

import {use, Suspense, useState, startTransition, Profiler} from 'react';
import ReactDOM from 'react-dom/client';
import {createFromFetch, encodeReply} from 'react-server-dom-webpack/client';

// TODO: This should be a dependency of the App but we haven't implemented CSS in Node yet.
import './style.css';

function findSourceMapURL(fileName) {
  return (
    document.location.origin +
    '/source-maps?name=' +
    encodeURIComponent(fileName)
  );
}

async function createWebSocketStream(url) {
  const ws = new WebSocket(url);
  ws.binaryType = 'arraybuffer';

  await new Promise((resolve, reject) => {
    ws.addEventListener('open', resolve, {once: true});
    ws.addEventListener('error', reject, {once: true});
  });

  const writable = new WritableStream({
    write(chunk) {
      ws.send(chunk);
    },
    close() {
      ws.close();
    },
    abort(reason) {
      ws.close(1000, reason && String(reason));
    },
  });

  const readable = new ReadableStream({
    start(controller) {
      ws.addEventListener('message', event => {
        controller.enqueue(event.data);
      });
      ws.addEventListener('close', () => {
        controller.close();
      });
      ws.addEventListener('error', err => {
        controller.error(err);
      });
    },
  });

  return {readable, writable};
}

let updateRoot;
async function callServer(id, args) {
  let response;
  if (process.env.NODE_ENV === 'development') {
    const requestId = crypto.randomUUID();
    const debugChannel = await createWebSocketStream(
      `ws://localhost:3001/debug-channel?id=${requestId}`
// ... (101 more lines)