Что можно передать через границу

// Пропсы клиентского компонента React записывает в описание страницы —
// примерно так же, как значения записываются в JSON. Что переживёт запись?
const props = {
  title: "Отчёт за март",
  amount: 1200,
  createdAt: new Date("2026-03-01T00:00:00Z"),
  format: (value: number) => value + " ₽"
};

const written = JSON.stringify(props);
console.log(written);
console.log("поле format сохранилось:", written.includes("format"));

class Money {
  amount: number;
  currency: string;

  constructor(amount: number, currency: string) {
    this.amount = amount;
    this.currency = currency;
  }

  toString(): string {
    return this.amount + " " + this.currency;
  }
}

const fromClass = new Money(1200, "RUB");
const fromLiteral = { amount: 1200, currency: "RUB" };

// сначала — что видят typeof и JSON
console.log(typeof fromClass, typeof fromLiteral);
console.log(JSON.stringify(fromClass) === JSON.stringify(fromLiteral));

// а граница смотрит на прототип: плоский объект или экземпляр класса
const isPlain = (value: object): boolean =>
  Object.getPrototypeOf(value) === Object.prototype;

console.log(isPlain(fromClass), isPlain(fromLiteral));

// Символ проедет только один: зарегистрированный в общем реестре под именем.
// Такой символ на другой стороне провода создаётся заново — по этому имени.
const shared = Symbol.for("theme");
const local = Symbol("theme");

console.log(Symbol.keyFor(shared));
console.log(Symbol.keyFor(local));
console.log(shared === Symbol.for("theme"));

const toRubles = (value: number): string => value + " ₽";

interface PriceTagProps {
  amount: number;
  format: (value: number) => string;
}

function PriceTag({ amount, format }: PriceTagProps) {
  console.log("это та же функция:", format === toRubles);
  return <strong>{format(amount)}</strong>;
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <PriceTag amount={1200} format={toRubles} />
);

// ── app/product/price-tag.tsx ── клиентский: у него есть обработчик
"use client";

interface PriceTagProps {
  amount: number;
  format: (value: number) => string;
}

export default function PriceTag({ amount, format }: PriceTagProps) {
  return <button onClick={() => console.log(format(amount))}>{format(amount)}</button>;
}

// ── app/product/page.tsx ── серверный: директивы нет
import PriceTag from "./price-tag";

function formatPrice(value: number): string {
  return value.toLocaleString("ru-RU") + " ₽";
}

export default function ProductPage() {
  // компилятор доволен: тип пропса — функция, функцию и передали
  return <PriceTag amount={1200} format={formatPrice} />;
}

// а отрисовка на этом пропсе останавливается, и говорит с вами уже React, не tsc

// ── app/product/price-tag.tsx ── клиентский: от него нужно только нажатие
"use client";

interface PriceTagProps {
  label: string;
}

export default function PriceTag({ label }: PriceTagProps) {
  return <button onClick={() => console.log("в корзину:", label)}>{label}</button>;
}

// ── app/product/page.tsx ── форматирование осталось на сервере
import PriceTag from "./price-tag";

function formatPrice(value: number): string {
  return value.toLocaleString("ru-RU") + " ₽";
}

export default function ProductPage() {
  // через границу едет строка — то, что функция уже посчитала
  return <PriceTag label={formatPrice(1200)} />;
}

function Content() {
  // сколько раз вызовется эта функция за три нажатия?
  console.log("рендер Content");
  return <p>Этот кусок приехал сверху — готовым элементом</p>;
}

interface PanelProps {
  children: React.ReactNode;
}

function Panel({ children }: PanelProps) {
  const [count, setCount] = React.useState(0);
  console.log("рендер Panel", count);
  return (
    <section>
      <button id="bump" onClick={() => setCount(count + 1)}>
        нажатий: {count}
      </button>
      <div>{children}</div>
    </section>
  );
}

function App() {
  // элемент <Content /> создаётся здесь, в App, и в Panel приезжает готовым
  return (
    <Panel>
      <Content />
    </Panel>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

setTimeout(() => document.getElementById("bump")!.click(), 100);
setTimeout(() => document.getElementById("bump")!.click(), 200);
setTimeout(() => document.getElementById("bump")!.click(), 300);

// ── app/dashboard/panel.tsx ── клиентский: у него состояние и обработчик
"use client";

interface PanelProps {
  title: string;
  children: React.ReactNode;
}

function Panel({ title, children }: PanelProps) {
  const [open, setOpen] = React.useState(true);
  return (
    <section>
      <button id="toggle" onClick={() => setOpen(!open)}>
        {title}
      </button>
      {open ? children : null}
    </section>
  );
}

// ── app/dashboard/stats.tsx ── серверный: здесь был бы запрос в базу
function Stats() {
  const rows = [
    { label: "Задач", value: 42 },
    { label: "Готово", value: 17 }
  ];
  return (
    <ul>
      {rows.map((row) => (
        <li key={row.label}>
          {row.label}: {row.value}
        </li>
      ))}
    </ul>
  );
}

// ── app/dashboard/page.tsx ── серверный: оба элемента создаются здесь
function DashboardPage() {
  return (
    <Panel title="Сводка">
      <Stats />
    </Panel>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(<DashboardPage />);

// Что переживёт границу: примитивы, даты, массивы и плоские объекты из них же.
// Тип рекурсивный — как и сама проверка внутри React.
type Serializable =
  | string
  | number
  | boolean
  | bigint
  | null
  | undefined
  | Date
  | readonly Serializable[]
  | { readonly [key: string]: Serializable };

// пропсы целиком проходят проверку — остаются собой, иначе схлопываются в never
type Crosses<T> = T extends Serializable ? T : never;

type CardProps = { amount: number; createdAt: Date; tags: string[] };
type PanelProps = { amount: number; format: (value: number) => string };

const card: Crosses<CardProps> = { amount: 1200, createdAt: new Date(), tags: ["март"] };
console.log("карточка проходит:", card.tags.join(", "));

const panel: Crosses<PanelProps> = { amount: 1200, format: (value: number) => value + " ₽" };
console.log("а объект всё равно построился:", typeof panel);