Своя граница: писатель, провод, читатель

// Элемент — обычный объект: тип, ключ и пропсы. Писатель обходит дерево
// и превращает его в то, что можно отправить строкой.
type El = React.ReactElement<Record<string, unknown>>;
type Server = (props: Record<string, unknown>) => unknown;
const isElement = (value: unknown): value is El => React.isValidElement(value);

function write(value: unknown): unknown {
  if (isElement(value)) {
    // серверный компонент писатель вызывает сам: по проводу поедет результат,
    // а не компонент — поэтому его кода в браузере и не оказывается
    if (typeof value.type === "function") return write((value.type as Server)(value.props));
    return ["$", value.type, value.key, write(value.props)];
  }
  if (Array.isArray(value)) return value.map((item) => write(item));
  if (typeof value === "object" && value !== null) {
    const written: Record<string, unknown> = {};
    for (const key of Object.keys(value)) {
      written[key] = write((value as Record<string, unknown>)[key]);
    }
    return written;
  }
  return value;
}

function Price({ amount }: { amount: number }) {
  console.log("Price выполняется на сервере");
  return <p>{amount} ₽</p>;
}

function Product() {
  return (
    <main>
      <h1>Кофеварка X200</h1>
      <Price amount={12490} />
    </main>
  );
}

console.log(JSON.stringify(write(<Product />)));

type El = React.ReactElement<Record<string, unknown>>;
type Server = (props: Record<string, unknown>) => unknown;
const isElement = (value: unknown): value is El => React.isValidElement(value);

// Что оставил сборщик от файла с "use client": не код, а адрес модуля.
// На настоящем сервере из такого импорта и приезжает не функция, а эта запись.
const bundle = new Map<unknown, string>();
const rows: string[] = [];
let nextRow = 1;

function write(value: unknown): unknown {
  if (isElement(value)) {
    const id = bundle.get(value.type);
    if (id !== undefined) {
      // клиентский компонент вызывать нечем: его кода на сервере нет. На место
      // типа едет ссылка на строку, а пропсы записываются как обычные данные
      const row = nextRow++;
      rows.push(row + ":I[\"" + id + "\"]");
      return ["$", "$L" + row, value.key, write(value.props)];
    }
    if (typeof value.type === "function") return write((value.type as Server)(value.props));
    return ["$", value.type, value.key, write(value.props)];
  }
  if (Array.isArray(value)) return value.map((item) => write(item));
  if (typeof value === "object" && value !== null) {
    const written: Record<string, unknown> = {};
    for (const key of Object.keys(value)) written[key] = write((value as Record<string, unknown>)[key]);
    return written;
  }
  return value;
}

function Stats() {
  console.log("Stats выполняется на сервере");
  return <span>Куплено 812 раз</span>;
}

function LikeButton({ initial, children }: { initial: number; children: React.ReactNode }) {
  console.log("LikeButton выполняется");
  return <button>Нравится: {initial} {children}</button>;
}
bundle.set(LikeButton, "./like-button.tsx#LikeButton");

rows.push("0:" + JSON.stringify(write(
  <main>
    <LikeButton initial={5}><Stats /></LikeButton>
  </main>
)));
console.log(rows.join("\n"));

// Лист — значение, которое дальше не разбирается. У каждого вида своя приставка;
// строку, которая сама начинается с доллара, приходится метить удвоением —
// иначе читатель примет её за запись.
function writeLeaf(value: unknown): unknown {
  if (value instanceof Date) return "$D" + value.toISOString();
  if (value instanceof Map) return "$Q" + JSON.stringify([...value]);
  if (value === undefined) return "$undefined";
  if (typeof value === "string" && value.startsWith("$")) return "$" + value;
  return value;
}

function readLeaf(value: unknown): unknown {
  if (typeof value !== "string" || !value.startsWith("$")) return value;
  if (value.startsWith("$D")) return new Date(value.slice(2));
  if (value.startsWith("$Q")) return new Map(JSON.parse(value.slice(2)) as [string, number][]);
  if (value === "$undefined") return undefined;
  if (value.startsWith("$$")) return value.slice(1);
  throw new Error("неизвестный вид записи: " + value);
}

const props = {
  at: new Date("2026-03-01T00:00:00Z"),
  byTag: new Map([["март", 3]]),
  price: "$100",
  note: undefined
};

const wire = JSON.stringify({
  at: writeLeaf(props.at),
  byTag: writeLeaf(props.byTag),
  price: writeLeaf(props.price),
  note: writeLeaf(props.note)
});
console.log(wire);

const back = JSON.parse(wire) as Record<string, unknown>;
console.log(readLeaf(back.at) instanceof Date);
console.log((readLeaf(back.byTag) as Map<string, number>).get("март"));
console.log(readLeaf(back.price));
console.log("note" in back, readLeaf(back.note));
console.log(JSON.stringify(props).includes("note"));

// Писатель ищет функцию вглубь: в массиве, в объекте, в объекте внутри массива.
// Возвращает путь до неё — или null, если записывать можно.
function findFunction(value: unknown, path: string): string | null {
  if (typeof value === "function") return path;
  if (value === null || typeof value !== "object") return null;
  for (const [key, item] of Object.entries(value)) {
    const found = findFunction(item, path + "." + key);
    if (found !== null) return found;
  }
  return null;
}

function show(value: unknown): string {
  if (typeof value === "function") return "function " + (value.name || "anonymous");
  if (typeof value === "object" && value !== null) return Array.isArray(value) ? "[...]" : "{...}";
  return typeof value === "string" ? JSON.stringify(value) : String(value);
}

// Каретка под виноватым пропсом — не украшение: по ней место находится сразу
function point(name: string, props: Record<string, unknown>, bad: string): string {
  let line = "<" + name;
  let caret = " ".repeat(line.length);
  for (const key of Object.keys(props)) {
    const head = " " + key + "=";
    const body = "{" + show(props[key]) + "}";
    line += head + body;
    caret += " ".repeat(head.length) + (key === bad ? "^" : " ").repeat(body.length);
  }
  return line + ">\n" + caret;
}

function writeProps(name: string, props: Record<string, unknown>): string {
  for (const key of Object.keys(props)) {
    const found = findFunction(props[key], key);
    if (found === null) continue;
    return "Функции нельзя передавать клиентскому компоненту.\n" +
      point(name, props, key) + "\nнашлась по пути props." + found;
  }
  return JSON.stringify(props);
}

console.log(writeProps("PriceTag", { amount: 1200, label: "Цена" }));
console.log(writeProps("PriceTag", { amount: 1200, format: (v: number) => v + " ₽" }));
console.log(writeProps("Rows", { items: [{ title: "Хлеб", onPick: () => console.log("клик") }] }));

// сети в песочнице нет, поэтому «медленный запрос» — это таймер
function after<T>(value: T, ms: number): Promise<T> {
  return new Promise<T>((resolve) => {
    setTimeout(() => resolve(value), ms);
  });
}

const started = Date.now();
const at = () => Math.round((Date.now() - started) / 100) * 100;

let nextRow = 1;

// незавершённый промис записать нечем: писатель оставляет на его месте дырку
// с адресом и досылает содержимое отдельным куском, когда оно будет готово
function writePromise(promise: Promise<unknown>): string {
  const row = nextRow++;
  void promise.then((value) => {
    console.log(at() + " мс, кусок:", row + ":" + JSON.stringify(value));
  });
  return "$@" + row;
}

const rating = after({ score: 4.7, count: 812 }, 300);

const shell = "0:" + JSON.stringify({
  title: "Кофеварка X200",
  rating: writePromise(rating)
});
console.log(at() + " мс, оболочка:", shell);

// Ровно то, что приехало по проводу: две строки текста и больше ничего
const wire = [
  "1:I[\"./like-button.tsx#LikeButton\"]",
  "0:[\"$\",\"main\",null,{\"children\":[\"$\",\"$L1\",null,{\"initial\":5,\"children\":[\"$\",\"span\",null,{\"children\":\"Куплено 812 раз\"}]}]}]"
];

// а это уже лежит в браузере: приехало обычным скриптом, вместе с бандлом
function LikeButton({ initial, children }: { initial: number; children?: React.ReactNode }) {
  const [likes, setLikes] = React.useState(initial);
  return <button id="like" onClick={() => setLikes(likes + 1)}>Нравится: {likes} {children}</button>;
}

// манифест сводит адрес модуля с тем, что в бандле уже есть
const manifest: Record<string, React.ElementType> = { "./like-button.tsx#LikeButton": LikeButton };
const modules = new Map<string, string>();

function lookup(row: string): React.ElementType {
  const id = modules.get(row) ?? "";
  if (!(id in manifest)) throw new Error("Модуля \"" + id + "\" нет в манифесте: поток и бандл разошлись");
  return manifest[id];
}

function read(value: unknown): unknown {
  if (Array.isArray(value)) {
    if (value[0] !== "$") return value.map((item) => read(item));
    const [, type, key, raw] = value as [string, string, string | null, Record<string, unknown>];
    const props = read(raw) as Record<string, unknown>;
    // "$L1" на месте типа — не имя тега, а ссылка на строку с адресом модуля
    const component = type.startsWith("$L") ? lookup(type.slice(2)) : type;
    return React.createElement(component, key === null ? props : { ...props, key });
  }
  if (typeof value === "object" && value !== null) {
    const out: Record<string, unknown> = {};
    for (const key of Object.keys(value)) out[key] = read((value as Record<string, unknown>)[key]);
    return out;
  }
  return value;
}

for (const line of wire) {
  const row = line.slice(0, line.indexOf(":"));
  const rest = line.slice(line.indexOf(":") + 1);
  if (rest.startsWith("I")) modules.set(row, (JSON.parse(rest.slice(1)) as string[])[0]);
  else ReactDOM.createRoot(document.getElementById("root")!).render(read(JSON.parse(rest)) as React.ReactNode);
}

const text = () => document.getElementById("like")!.textContent;
setTimeout(() => console.log("до нажатия:", text()), 20);
setTimeout(() => document.getElementById("like")!.click(), 50);
setTimeout(() => console.log("после нажатия:", text()), 100);

// то, что в браузере уже загружено: адрес модуля → кусок бандла с ним
const manifest: Record<string, string> = { "./like-button.tsx#LikeButton": "chunk-4f2.js" };
// а это приехало в потоке: строка 1 с адресом модуля
const modules = new Map<string, string>([["1", "./buttons/like-button.tsx#LikeButton"]]);

function lookup(row: string): string {
  const id = modules.get(row) ?? "";
  if (!(id in manifest)) {
    throw new Error("Модуля \"" + id + "\" нет в манифесте: поток и бандл разошлись");
  }
  return manifest[id];
}

console.log(lookup("1"));