Rust · WASM · TypeScriptv0.4.0

Pingocanvas 渲染引擎

Rust/WASM 核心 + TypeScript 外壳 + 可插拔后端。为高性能交互、原生虚拟滚动与 canvas 内文本编辑而设计，附带基础组件、CSS 样式与 shadcn 对齐的 UI 组件库。

快速开始 Playground GitHub

双时钟，主线程卡死也不掉帧

UI 时钟与渲染时钟相互独立。滚动、动画、布局与合成在 Worker 内闭环推进；主线程被阻塞 200ms 时画面仍然连续。

原生虚拟滚动

前缀和树、方向预测预热与占位补建都在 Core 内。百万行固定 fixture 的 20,000 帧重放 P95/P99 为亚微秒级，滚动稳态完全不回调 Shell。

canvas 原生编辑

caret、选区、拖选、双击选词、IME composition、候选窗定位、剪贴板与撤销重做全部由引擎实现。业务不再为输入能力创建 HTML 控件。

无障碍是架构的一部分

Core 导出语义树，宿主镜像成 canvas 旁的 DOM 影子树。屏幕阅读器可用，E2E 能按 role/label 选中元素，而不是比对像素。

确定性与差分测试

版本化二进制流、可注入时钟与随机源、录制回放，以及增量与全量、优化与朴素、wasm 与 native 的差分 oracle。

自动降级，永远有退路

SharedArrayBuffer → postMessage → 主线程 Canvas2D 按能力自动选择，功能等价。迁移层支持按页面灰度与一键回退。

基础组件开箱即用

View/Text/Image、Input/TextArea、SVG/Path 等引擎级元素直接对应 Scene 节点，文本 shaping、caret 几何与编辑能力来自 Core，不需要 DOM 控件拼凑。

CSS 与 SCSS/Less 支持

Shell 侧解析的版本化 CSS subset：类选择器、交互状态、继承与计算样式都有明确边界；SCSS/Less 在构建期编译校验，预处理器不进入浏览器 bundle。

shadcn 对齐的 UI 组件库

@dopejs/pingo-ui 的组件 API 与皮肤语义对齐 shadcn/ui——Button、Dialog、Table、Calendar 等全部渲染到 canvas，支持明暗主题与样式表覆盖。

30 秒上手

pnpm add @dopejs/pingo

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

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

root.render(
  <View
    style={{ width: 480, height: 640, overflowY: "auto" }}
    virtual={{
      itemCount: 1_000_000,
      estimatedItemSize: 32,
      renderItem: (index) => <Text value={`第 ${index} 行`} />,
    }}
  />,
);

TSX 需要在 tsconfig.json 里把 jsxImportSource 指向 @dopejs/pingo，见快速开始。

一百万行不会在 Shell 侧物化，滚动过程也不回调组件树——窗口计算与补建都发生在 Core 内。

它不做什么

Pingo 是渲染引擎，不是浏览器。不做 SSR/HTML 首屏、通用 CSS 兼容（盒模型、层叠、选择器）、小程序或原生适配层，也不做业务级富文本语义（协同、公式、Markdown 命令）。

引擎确实拥有 caret、选区、IME、剪贴板、撤销重做与可编辑文本原语——这些不会被推回业务层用 DOM 控件拼凑。

真机性能、真实输入法、屏幕阅读器与媒体功耗矩阵属于平台资格采集，单独跟踪； bidi 视觉导航与 WebGPU 后端默认启用仍是已记录的延后项。