Pingo

Pingoдвижок рендеринга canvas

Ядро на Rust/WASM + оболочка на TypeScript + сменный бэкенд. Спроектирован для высокопроизводительного взаимодействия, нативной виртуальной прокрутки и редактирования текста внутри canvas.

Две тактовые оси — главный поток встал, кадры не теряются

Часы интерфейса и часы рендеринга независимы. Прокрутка, анимация, раскладка и композиция продолжаются внутри Worker, поэтому изображение остаётся непрерывным даже при блокировке главного потока на 200 мс.

Нативная виртуальная прокрутка

Дерево префиксных сумм, прогрев с предсказанием направления и подстановка заглушек живут в ядре. Воспроизведение 20 000 кадров фикстуры на миллион строк даёт P95/P99 меньше микросекунды, а установившаяся прокрутка ни разу не обращается к оболочке.

Нативное редактирование в canvas

Каретку, выделение, выделение перетаскиванием, выбор слова двойным щелчком, композицию IME, положение окна кандидатов, буфер обмена и отмену/повтор реализует движок. Приложению больше не нужно создавать HTML-элементы ради ввода.

Доступность — часть архитектуры

Ядро экспортирует дерево семантики, а хост зеркалит его в теневое DOM-дерево рядом с canvas. Программы чтения с экрана работают, а E2E выбирает элементы по роли и подписи, а не сравнивает пиксели.

Детерминизм и дифференциальные тесты

Версионированные бинарные потоки, внедряемые часы и источник случайности, запись и воспроизведение, а также дифференциальные оракулы между инкрементальным и полным, оптимизированным и наивным, wasm и нативным путями.

Автоматический откат, выход есть всегда

SharedArrayBuffer → postMessage → Canvas2D в главном потоке выбираются автоматически по возможностям среды и функционально эквивалентны. Слой миграции поддерживает постраничное раскатывание и мгновенный возврат.

Начать за 30 секунд

pnpm add @dopejs/pingo

import { createElement, createHostedCanvasRoot } from "@dopejs/pingo";

const root = await createHostedCanvasRoot(document.querySelector("canvas")!);

root.render(
  createElement("virtualList", {
    width: 480,
    height: 640,
    itemCount: 1_000_000,
    estimatedItemHeight: 32,
    renderItem: (index) => createElement("text", { value: `Строка ${index}` }),
  }),
);

Миллион строк никогда не материализуется в оболочке, а прокрутка не вызывает дерево компонентов: расчёт окна и подстановка происходят внутри ядра.

Чего он не делает

doper — это движок рендеринга, а не браузер. Он не покрывает SSR и первую отрисовку HTML, общую совместимость с CSS (блочная модель, каскад, селекторы), слои адаптации к мини-приложениям или нативным платформам, а также прикладную семантику форматированного текста (совместное редактирование, формулы, команды Markdown).

Зато каретка, выделение, IME, буфер обмена, отмена/повтор и примитивы редактируемого текста принадлежат движку. Ничего из этого не возвращается прикладному коду, чтобы тот собирал их из DOM-элементов.

Текущее состояние

v0.1.0. Все инженерные вехи P0–M5 завершены, полная автоматическая цепочка pnpm m5:check проходит.

Производительность на реальных устройствах, реальные методы ввода и матрица программ чтения с экрана относятся к квалификации платформы и отслеживаются отдельно. Визуальная навигация в bidi и включение бэкенда WebGPU по умолчанию — задокументированные отложенные пункты.

Язык инженерных документов

Технический дизайн, план реализации и ADR сейчас существуют только на упрощённом китайском; все языки ссылаются на один и тот же документ.