Переходы: Link, префетч и роутер

function Nav() {
  const [count, setCount] = React.useState(0);
  return (
    <nav>
      <button id="inc" onClick={() => setCount(count + 1)}>нажали: {count}</button>
      {" · "}
      <a
        href="/about"
        onClick={(event) => {
          console.log("React отменил переход:", event.defaultPrevented);
        }}
      >
        О проекте
      </a>
    </nav>
  );
}

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

// первая отрисовка случится после этого скрипта, поэтому нажимаем с задержкой
setTimeout(() => document.getElementById("inc")!.click(), 50);

setTimeout(() => {
  console.log("в памяти вкладки:", document.getElementById("inc")!.textContent);
  // кадр учебника никуда уехать не должен, поэтому переход гасим на document —
  // то есть уже ПОСЛЕ того, как отработал обработчик React
  document.addEventListener("click", (event) => event.preventDefault());
  document.querySelector("a")!.click();
}, 100);

type LinkProps = { href: string; go: (href: string) => void; children: React.ReactNode };

// то же, что делает next/link: разметка остаётся ссылкой, клик забирает роутер
function Link({ href, go, children }: LinkProps) {
  return (
    <a
      href={href}
      onClick={(event) => {
        event.preventDefault();
        go(href);
      }}
    >
      {children}
    </a>
  );
}

function App() {
  const [path, setPath] = React.useState("/");
  console.log("рендер, адрес " + path);
  return (
    <div>
      <nav>
        <Link href="/" go={setPath}>Задачи</Link>
        {" · "}
        <Link href="/about" go={setPath}>О проекте</Link>
      </nav>
      <h1>{path === "/" ? "Задачи" : "О проекте"}</h1>
    </div>
  );
}

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

setTimeout(() => document.querySelectorAll("a")[1].click(), 50);

setTimeout(() => {
  console.log(document.querySelector("h1")!.textContent);
  console.log(document.querySelectorAll("a")[1].getAttribute("href"));
}, 100);

type LinkProps = { href: string; go: (href: string) => void; children: React.ReactNode };

function Link({ href, go, children }: LinkProps) {
  return (
    <a
      href={href}
      onClick={(event) => {
        event.preventDefault();
        go(href);
      }}
    >
      {children}
    </a>
  );
}

function App() {
  return (
    <nav>
      <Link href="/about" go={(href) => console.log("роутер увёл текущую вкладку на " + href)}>
        О проекте
      </Link>
    </nav>
  );
}

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

setTimeout(() => {
  // человек держит Ctrl и ждёт новую вкладку
  const ctrl = new MouseEvent("click", { bubbles: true, cancelable: true, ctrlKey: true });
  document.querySelector("a")!.dispatchEvent(ctrl);
  console.log("браузеру дали сделать своё:", !ctrl.defaultPrevented);
}, 50);

// в проекте первой строкой файла стоит import Link from "next/link";
// в песочнице пакетов нет, поэтому Link здесь — заглушка с теми же пропсами
type LinkProps = {
  href: string;
  replace?: boolean;
  scroll?: boolean;
  prefetch?: boolean | "auto" | null;
  children: React.ReactNode;
};

function Link({ href, children }: LinkProps) {
  return <a href={href}>{children}</a>;
}

// app/tasks/page.tsx
function TasksPage() {
  return (
    <ul>
      <li><Link href="/tasks/1">Купить хлеб</Link></li>
      <li><Link href="/tasks/2" prefetch={false}>Архив за 2019 год</Link></li>
      <li><Link href="/login" replace>Войти</Link></li>
      <li><a href="https://developer.mozilla.org">Справочник MDN</a></li>
    </ul>
  );
}

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

setTimeout(() => {
  const hrefs = [...document.querySelectorAll("a")].map((link) => link.getAttribute("href"));
  console.log(hrefs.join(" "));
}, 50);

function Layout({ children }: { children: React.ReactNode }) {
  const [menu, setMenu] = React.useState(0);
  return (
    <div>
      <button id="menu" onClick={() => setMenu(menu + 1)}>меню открывали: {menu}</button>
      {children}
    </div>
  );
}

function TasksPage() {
  const [draft, setDraft] = React.useState(0);
  return <button id="draft" onClick={() => setDraft(draft + 1)}>черновик правили: {draft}</button>;
}

function AboutPage() {
  return <p>О проекте</p>;
}

function App() {
  const [path, setPath] = React.useState("/");
  const go = (href: string) => (event: React.MouseEvent) => {
    event.preventDefault();
    setPath(href);
  };
  return (
    <Layout>
      <nav>
        <a href="/" onClick={go("/")}>Задачи</a>
        {" · "}
        <a href="/about" onClick={go("/about")}>О проекте</a>
      </nav>
      {path === "/" ? <TasksPage /> : <AboutPage />}
    </Layout>
  );
}

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

const click = (selector: string) => () => document.querySelector<HTMLElement>(selector)!.click();

const steps = [
  click("#menu"), // открыли меню в раскладке
  click("#draft"), // и поправили черновик на странице
  click("nav a:last-child"), // ушли со страницы задач
  click("nav a:first-child"), // и сразу вернулись
  () => {
    console.log(document.getElementById("menu")!.textContent);
    console.log(document.getElementById("draft")!.textContent);
  }
];

// каждый шаг — в свой тик: React отрисовывает не мгновенно, и два нажатия
// подряд увидели бы одно и то же состояние
steps.forEach((step, i) => setTimeout(step, 50 * (i + 1)));

const cache = new Map<string, string>();

function prefetch(href: string): void {
  if (cache.has(href)) return; // второй раз тянуть нечего — на этом Link и экономит
  cache.set(href, "код страницы " + href);
  console.log("префетч: " + href);
}

function check(): void {
  for (const link of document.querySelectorAll("a")) {
    // запас в 200 пикселей — ровно тот, что стоит в next/link: ссылку
    // считают видимой чуть раньше, чем она доедет до края экрана
    if (link.getBoundingClientRect().top < window.innerHeight + 200) {
      prefetch(link.getAttribute("href")!);
    }
  }
  console.log("в кеше: " + [...cache.keys()].join(", "));
}

function App() {
  return (
    <nav>
      <a href="/tasks">Задачи</a>
      <div style={{ height: 700 }} />
      <a href="/archive">Архив за 2019 год</a>
    </nav>
  );
}

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

setTimeout(() => {
  check();
  window.scrollTo(0, 800);
  check();
}, 50);

// заглушка с типами пропсов настоящего Link
type LinkProps = {
  href: string;
  prefetch?: boolean | "auto" | null;
  children: React.ReactNode;
};

function Link({ href, children }: LinkProps) {
  return <a href={href}>{children}</a>;
}

function Nav() {
  return (
    <nav>
      <Link href="/archive" prefetch="false">Архив за 2019 год</Link>
    </nav>
  );
}

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

setTimeout(() => console.log(document.querySelector("a")!.outerHTML), 50);

// в проекте: первой строкой "use client", затем
// import { useRouter } from "next/navigation";
// здесь useRouter — заглушка: настоящих маршрутов в песочнице нет,
// зато видно, в какой момент и с чем его зовут
function useRouter() {
  return {
    push: (href: string) => console.log("push → " + href),
    replace: (href: string) => console.log("replace → " + href),
    back: () => console.log("back"),
    refresh: () => console.log("refresh")
  };
}

function NewTaskForm() {
  const router = useRouter();
  const [title, setTitle] = React.useState("Купить хлеб");
  return (
    <form
      id="form"
      onSubmit={(event) => {
        event.preventDefault();
        const id = 42; // здесь был бы ответ сервера
        // клика по ссылке не было, а уйти надо — вот он, случай для роутера
        router.push("/tasks/" + id);
      }}
    >
      <input value={title} onChange={(event) => setTitle(event.target.value)} />
      <button type="submit">Создать</button>
    </form>
  );
}

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

setTimeout(() => (document.getElementById("form") as HTMLFormElement).requestSubmit(), 50);