从零开始构建

如果你不想要示例应用，可以直接安装这些包：

bun add --exact @gpuix/react @gpuix/native react
bun add -d @types/react typescript

1. 让 TypeScript 指向 GPUIX 的 JSX 类型

jsxImportSource 是必需的。 若缺少它，TypeScript 会使用 DOM 类型，导致 <virtual-list>、<markdown>、<code> 与 style.hover 都无法通过类型检查。

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "@gpuix/react",
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

2. 编写入口文件

文件以 render() 结尾。该调用会创建窗口、挂载 React 并启动帧循环。

import { useState } from 'react'
import { render } from '@gpuix/react'

function App() {
  const [count, setCount] = useState(0)
  return (
    <div style={{ padding: 24, backgroundColor: '#1a1a1a', height: '100%' }}>
      <div
        onClick={() => setCount((c) => c + 1)}
        style={{
          padding: 12,
          borderRadius: 8,
          cursor: 'pointer',
          backgroundColor: '#232323',
          hover: { backgroundColor: '#2c2c2c' },
        }}
      >
        <text style={{ color: '#e2e2e2' }}>Count: {count}</text>
      </div>
    </div>
  )
}

render(<App />, { title: 'My App', width: 800, height: 600 })

3. 运行它

bun --hot app.tsx

使用 bun --hot，而不是普通的 bun。这样保存时会在同一个窗口上重新挂载 React，而非打开第二个窗口。

4. 编译为二进制

bun build --compile app.tsx --outfile dist/app
./dist/app

该二进制自带渲染器，因此运行时无需 Bun，也无需安装 Node。若想让发布体积更小，可以不在 Bun 上运行这个 React 应用，而是改用 hermes-node：那条路径是 12 MB 外加一个 22 MB 的原生 sidecar。完整的打包步骤见 编译为二进制文件 与 打包成带图标的 App。

5. Shell 补全

为 gpuix 命令安装补全：

bun add -g @gpuix/cli
gpuix completions install