Solid 快速开始

安装 Solid 以及官方的 Solid adapter：

bun add --exact @gpuix/solid @gpuix/native solid-js

使用 Solid 保留的 JSX

preload 会为 Solid 的通用渲染器编译应用的 .tsx 与 .jsx 文件，并选择响应式的客户端运行时。

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

preload = ["@gpuix/solid/preload"]

import { createSignal } from 'solid-js'
import { render } from '@gpuix/solid'

function App() {
  const [count, setCount] = createSignal(0)
  return (
    <div style={{ padding: 24, backgroundColor: '#1a1a1a', height: '100%' }}>
      <div onClick={() => setCount((value) => value + 1)}>
        <text style={{ color: '#e2e2e2' }}>Count: {count()}</text>
      </div>
    </div>
  )
}

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

直接运行即可。无需包装命令，也无需 Vite 配置。

bun app.tsx
bun --hot app.tsx

生产构建

对于生产环境的 Bun.build，传入导出的插件：

import solidPlugin from '@gpuix/solid/bun-plugin'

await Bun.build({
  entrypoints: ['./app.tsx'],
  target: 'bun',
  outdir: './dist',
  plugins: [solidPlugin],
})

版本范围

@gpuix/solid 面向稳定的 Solid 1.9。其 peer 版本区间为 >=1.9 <2。

完整的 Solid adapter API 见 Solid 指南。

两个框架共享什么

React 与 Solid 共用同一套 ID、mutation 队列、事件路由、测试 API、自动化客户端、观察者以及文本搜索匹配器。它们各自框架相关的调度器与组件上下文则保留在各自的 adapter 包中。详见架构与支持的元素。