完成后你会得到什么
五分钟内，一个 Solid + Vite 应用会渲染出可编辑网格，数据与公式计算运行在 Worker 中的 Rust/WASM 工作簿引擎。输入 =1+2，单元格会显示 3。
安装前，先选对路线
正式 UI 绑定Solid这是当前受支持的安装与渲染路径。参考实现React请查看受控投影演示，而不是假想的框架适配器。参考实现Vue请用受控投影演示先厘清宿主边界。接入契约自有后端当工作簿数据与计算已经属于你的产品时，从这里开始。
开始前
- Node.js 22.12 或更高版本。
- 一个 Vite + Solid TypeScript 应用；没有的话可运行
npm create vite@latest my-sheet -- --template solid-ts。 index.html中有<div id="root"></div>。
1. 安装 Solid 集成
npm install @einfach/solid-excel @einfach/core @einfach/solid solid-js后三个包是 peer 依赖。应用依赖图中必须各只有一份；provider 与消费者必须共享同一个 Solid runtime。
2. 粘贴一份可运行的应用
将 src/main.tsx 替换为下面的代码。它使用内置 Worker 后端，是首次接入最稳妥的默认值。
import { render } from 'solid-js/web'
import {
createWorkerWorkbookSpreadsheetBackend,
SpreadsheetGrid,
SpreadsheetUiProvider,
} from '@einfach/solid-excel/vnext'
import { defaultVNextWorkbookWorkerFactory } from '@einfach/solid-excel/vnext-worker-factory'
import '@einfach/solid-excel/vnext-styles.css'
const backend = createWorkerWorkbookSpreadsheetBackend({
workerFactory: defaultVNextWorkbookWorkerFactory,
sheets: [{ id: 'sheet-1', name: 'Sheet1' }],
})
const viewport = {
scrollTop: 0, scrollLeft: 0, viewportHeight: 480, viewportWidth: 960,
rowHeight: 24, colWidth: 96, rowCount: 50, colCount: 12,
overscanRows: 2, overscanCols: 1,
}
const root = document.getElementById('root')
if (!root) throw new Error('Missing #root')
render(() => (
<SpreadsheetUiProvider backend={backend}>
<SpreadsheetGrid sheetId="sheet-1" viewport={viewport} />
</SpreadsheetUiProvider>
), root)3. 验证是否接入成功
- 运行
npm run dev。 - 打开 Vite 给出的 URL，双击 A1 单元格。
- 输入
=1+2后回车；A1 应显示3。
网格正常渲染且公式有结果，说明 UI、provider、Worker 通信与工作簿引擎都已连通。
当前 0.1.0 包在 Vite 开发模式下的说明
Vite 8 是已验证的开发路径。若开发服务器解析包内 message-format 依赖失败，可在vite.config.ts 添加下面的优化；生产构建和 preview 不需要它。
optimizeDeps: {
include: [
'@einfach/solid-excel > @lingui/core',
'@einfach/solid-excel > @lingui/core > @messageformat/parser',
],
}