# @exponential\_app/eui-solid 中文文档

规范地址：https://npmcn.com/package/%40exponential_app/eui-solid/

版本：0\.21\.0
npm 元数据更新时间：2026-11-10T08:34:54.310Z
中文译文更新时间：2026-11-14T05:46:53.489Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40exponential_app/eui-solid
原文对照：https://npmcn.com/package/%40exponential_app/eui-solid/?lang=original
项目主页：https://exponential.at/ui/
源码仓库：https://github.com/Niach/exponential

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.9 MB，137 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：solid-js ^1\.9\.0
- 首次发布：2026-10-30T07:42:46.026Z
- 最新版本发布：2026-11-10T08:34:53.968Z
- 近 30 天下载量：5553（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

solidJS的genUI:平原元素上所绘的核心A2UI目录(floating-ui,aria-hidden),其DOM,被编译的样式表和运行时间主题与React渲染器相同,运行于相容套件和网络平面检查.

## 安装

```sh
npm install @exponential_app/eui-solid
```

也可以使用：`pnpm add @exponential_app/eui-solid`、`yarn add @exponential_app/eui-solid`、`bun add @exponential_app/eui-solid`

## README

# `@exponential_app/eui-solid`: genUI SolidJS 渲染器

GenUI (FEED-128) 的 SolidJS 渲染器:一个 A2UI 在 核心目录( c)`@exponential_app/eui`)用画作 **同样的 DOM** 会 议 日 程 和 议 程 反应渲染器( E)`@exponential_app/eui-react`),使用相同的编译样式表 和运行时间主题。 重叠、菜单、选择、分页、手风琴和窗体 在平原元素上, 在无头层上, 控制涂装 Radix 的 DOM (单位:千美元)`src/behaviors/`),复制了拉迪克斯的机械:定位在 `@floating-ui/dom`,模式 `aria-hidden`它取决于 `@exponential_app/eui` (共享的网络层) `@exponential_app/eui/web`, (中文(简体) ), `solid-js`, (中文(简体) ), `@floating-ui/dom`, (中文(简体) ), `aria-hidden` 财务报告和审定财务报表 `lucide-solid`它进口 反演渲染器和指向软件都没有.

## 变化者

对每一个表面,Solid画家 制作的正是反应颜料:

-   相同的元素和属性集,具有相同的值: `class` 相同顺序的字符串, `data-xui-id`, (中文(简体) ), `data-xui-part`, (中文(简体) ), `data-xui-c`, (中文(简体) ), `data-r-*`编号 :`data-m-*`, (中文(简体) ), `data-xs`, aria- \*; (中文(简体) );
-   同样的 `<style data-xui-style="theme">` (单位:千美元)`BASE_CSS` + 编译 (主题)和 `<style data-xui-style="nodes">`· ;
-   同一个根 (`.xui-surface <scope> xui-s-<id>`, (中文(简体) ), `data-xui-mode`, (中文(简体) ), `dir`, (中文(简体) ), `data-xq`和同样的覆盖,土司和活区层.

`src/test/parity.ts` (单位:千美元)`expectDomParity`使一棵树在两个制作器中 在jsdom中,并比较序列化的DOM(分类属性、生成的ID) 页:1 每一个本土港口都增加了案例 `src/parity.test.ts`A级 浏览器级的网络均等套件还比较了计算过的样式、框架和 零容忍度的像素.

```tsx
import { ExponentialSurface, createSurface } from "@exponential_app/eui-solid"

function Chat(props: { messages: A2uiMessage[] }) {
  const surface = createSurface({ surfaceId: "main" })
  createEffect(() => props.messages.forEach(surface.apply))   // A2UI v0.9 server messages
  return (
    <ExponentialSurface
      surface={surface}
      theme="exponential"                     // or "neutral" | "playful" | "orange" | a theme JSON | a ResolvedTheme
      mode="system"                           // light | dark | system
      locale="de-AT" timeZone="Europe/Vienna"
      host={{ icons, onAction, onInput }}     // the host plugin (lucide-solid icons)
      handleRef={(h) => (handle = h)}         // handle.run({ focus: { id } } | { announce } | { scrollIntoView } | { scrollToIndex })
    />
  )
}
```

道具和React一样 `ExponentialSurfaceProps`,带有这些 差异 :

-   `class`编号 :`style` 以 Solid 为形式(kebab- case 样式键).
-   `handleRef` 是接收 `SurfaceHandle`。 。 。 .
-   反应钩有固体名称: `useSurface` 实值 `createSurface`, (中文(简体) ), `useHostOwnedValue` 实值 `createHostOwnedValue`, (中文(简体) ), `useParts` 实值 `parts`, (中文(简体) ), `useField` 实值 `createField`, (中文(简体) ), `useMediaSource` 实值 `createMediaSource`, (中文(简体) ), `useHostSurface` 实值 `createHostSurface`,以及 `defineReactExtension` 实值 `defineSolidExtension`。 。 。 .
-   反应 `useWriteEpoch(ctx)` 是活的获得者 `ctx.writeEpoch`手边 `createHostOwnedValue` `epoch: () => ctx.writeEpoch` 因此,一个方案 写入( 动作) `set`, (中文(简体) ), `ctx.assignData`)胜于有重点的球场.

## QurScanner相机(`qrScanner` 主机选项)

相机为主机 (VAPP-162,), `docs/round-5-contract.md` 第7条,同样 钩为回放:

```ts
host={{
  qrScanner: {
    // Render the live feed into `feed` (an empty element filling the
    // viewfinder; append a <video>), decode codes of `formats` (default
    // ["qr"]) and call onValue per decoded string. Return the stop.
    start(feed: HTMLElement, formats: readonly string[], onValue: (value: string) => void): (() => void) | false | void
  },
}}
```

`onValue` 发送 `scanned {value}` 单个值一次(持有代码) 并宣布: 礼貌点 停止运行在卸载,在 `disabled` 何时 `formats` 变化。 没有 `qrScanner`, (中文(简体) ), `start` 返回时 `false` 或投掷 = 占位符( e)`ui-scan` + 键 `Camera unavailable`没有扫描线.

## 版式

| 路径 | 什麽 |
| --- | --- |
| `src/surface.tsx` | `<ExponentialSurface>`:主题分辨率、密度/相接性、所测量的框+断点、两个 `<style>`s,容器,地层,活地,手柄 |
| `src/create-surface.ts` | `createSurface`:作为固态存储器的还原器(树和数据分两个信号) |
| `src/node-view.tsx` | 作为节点备忘录的绑定口令,画家通过查看 `<Dynamic>`, (中文(简体) ), `NodeList` (儿童按id键)和 `TemplateItems` (按 `template.key`, (中文(简体) ), `runNodeAction`,油漆边界 |
| `src/context.ts` | 表面上下文(获取器对象); `deriveContext` 重点字段、范围+实例存取器 |
| `src/natives/` | `shared.tsx` (单位:千美元)`parts()`,移植规则, `bound.ts`画家`overlays.tsx`, (中文(简体) ), `select.tsx`, (中文(简体) ), `dates.tsx`, (中文(简体) ), `nav.tsx`, (中文(简体) ), `inputs.tsx`, (中文(简体) ), `qr.tsx`... `index.ts` (51个键) |
| `src/behaviors/` | 无头的拉迪克斯机械 本地人和 `src/primitives/` 共享,每个模块一个关切: `portal`, (中文(简体) ), `presence`, (中文(简体) ), `dismissable-layer`, (中文(简体) ), `focus-scope`, (中文(简体) ), `focus-guards`, (中文(简体) ), `scroll-lock`, (中文(简体) ), `modal`, (中文(简体) ), `popper`, (中文(简体) ), `menu`, (中文(简体) ), `roving-focus`, (中文(简体) ), `listbox`, (中文(简体) ), `typeahead`, (中文(简体) ), `collapsible`, (中文(简体) ), `picker-popover`, (中文(简体) ), `bubble-input`, (中文(简体) ), `slider`, (中文(简体) ), `grace-area`, (中文(简体) ), `visually-hidden`, (中文(简体) ), `drag-to-dismiss`, (中文(简体) ), `style-writer`, (中文(简体) ), `element-size`, (中文(简体) ), `image-loading-status`, (中文(简体) ), `search-match` (单位:千美元)`index.ts` 命名 Radix 原始的每个复制。 它没有读取表面上下文; 软件包内部 |
| `src/primitives/` | solid上的原始反应集(FEED-131),每个反应单元一个模块,但六个应用特定模块,共享食谱 `@exponential_app/eui/web/primitives` 继续 `src/behaviors/`· ; `index.ts` =: `./primitives`· ; `bun run build:css` → `dist/exponential-ui-solid.css` |
| `src/style.ts` | `css()`: React 的内置式语义(骆驼 Case, px 为数字,无单位列表) |
| `src/icons.tsx` | 背面的胶片在清晰的固态上 被清晰的反射所描绘 `<svg>` 属性 |
| `src/form.tsx`, (中文(简体) ), `list.tsx`, (中文(简体) ), `markdown.tsx`, (中文(简体) ), `media.ts`, (中文(简体) ), `inputs.ts`, (中文(简体) ), `platform.ts`, (中文(简体) ), `extensions.ts`, (中文(简体) ), `host*.ts*` | 反应文件的固态双胞胎 |
| `harness/` | 与 React 套接字相同的页面协议(`dev:harness` 服务于:4182,由Vite +建造 `vite-plugin-solid`(中文(简体) ) |

## 初级

`@exponential_app/eui-solid/primitives` 是坚固的双胞胎 `@exponential_app/eui-react/primitives` 按钮、对话框、选择, 选项卡、表格、命令、土司、日历和其余部分,都有相同的DOM和 课程。 类弦来自一个源, 食谱 `@exponential_app/eui/web/primitives`;两集均不包含类词.

```tsx
import "@exponential_app/eui-solid/styles.css"          // the compiled primitives sheet
import { globalsCss } from "@exponential_app/eui/web"
import { Button, Dialog, DialogContent, DialogTitle, DialogTrigger } from "@exponential_app/eui-solid/primitives"
```

-   `styles.css` 实值 `dist/exponential-ui-solid.css`,由 `bun run build:css` 从反应包 `tailwind.css`: 字节相同 改为 `@exponential_app/eui-react/styles.css` (单位:千美元)`src/primitives/styles.test.ts`) (中文(简体) ).
    
-   在地表里,原始人穿它的主题。 一个外面, `globalsCss(theme)` 将主题写为阴影变量(`:root` + 键 `.dark`) (中文(简体) ).
    
-   名称沿用 Solid : `class` 页:1 `className`, (中文(简体) ), `as` 页:1 `asChild` (单位:千美元) 组件或组件部分油漆如下:, `create*` 联 合 国 `use*` 钩子.
    
-   反应 `SegmentedControl` 没有 `embedded` 双臂:玻璃组行 是指示应用程序的( Y)`@exp/ui`),和它的其他自己的组件一样.
    
-   网络平等门比对每个标本 `@exponential_app/eui/fixtures/primitive-specimens.json` 反应已经过去了 整个页面正文 : `bun run --filter @exponential_app/eui-solid test:parity:primitives`。 。 。 .
    
-   第6轮(EXP-1495)增加 `Outline`, (中文(简体) ), `Mosaic`, (中文(简体) ), `CarouselCounter` 财务报告和审定财务报表 `CarouselThumbnails` (反应的API与 `class`),标本 `plain/outline`, (中文(简体) ), `plain/mosaic`, (中文(简体) ), `plain/carousel-extras`; 当地人的木马 `counter` + 键 `thumbnails` 是反应的标记( E)`src/round6.test.tsx`, (中文(简体) ), `media.parity`) (中文(简体) ).
    

## 状态属性:移植规则

主题CSS(`STATE_SELECTORS`)针对Radix的属性名称,所以 固体画家在部分本身上写出拉迪克斯命名的属性. 这个 软件包首先被画在 Kobalte 上, 它命名了相同的状态 不同; 依赖性已去, Kobalte 列作为地图保留 用于移植针对 Kobalte 的代码(或任何非Radix 库)。 全数 规则在 `src/natives/shared.tsx`。 。 。 .

| 状态 | Radix (反应,主题 CSS) | 科巴尔特 (历史) | 固体画家写道 |
| --- | --- | --- | --- |
| 检查/ 未选中 | `data-state="checked|unchecked"` | `data-checked` | `data-state` |
| 打开/ 关闭 | `data-state="open|closed"` | `data-expanded`, (中文(简体) ), `data-closed` | `data-state` |
| 选中标签 | `data-state="active|inactive"` | `data-selected` | `data-state` |
| 按下切换 | `data-state="on|off"` | `data-pressed` | `data-state` |
| 安置情况 | `data-side`, (中文(简体) ), `data-align` | (没有,只有风格) | `data-side`, (中文(简体) ), `data-align` |
| 突出项目 | `data-highlighted=""` | `data-highlighted` | `data-highlighted=""` |
| 已禁用 | `data-disabled=""` | `data-disabled` | `data-disabled=""` |

## 图标

```bash
bun run --filter @exponential_app/eui-solid typecheck
bun run --filter @exponential_app/eui-solid test          # jsdom: surface, natives × catalog, DOM parity with React
bun run --filter @exponential_app/eui-solid dev:harness   # http://localhost:4182/?view=kitchen-sink&theme=orange
bun run --filter @exponential_app/eui-solid test:conformance  # the shared web runner → .conformance/exponential-ui-solid.json
bun run --filter @exponential_app/eui-solid test:parity       # web parity vs React → .conformance/exponential-ui-parity-react-solid.json
bun run --filter @exponential_app/eui-solid test:parity:primitives  # the primitive specimens only (seconds)
bun run --filter @exponential_app/eui-solid test:browser      # every headless-Chromium suite (overlays, inputs, tables…)
bun run --filter @exponential_app/eui-solid build:css         # dist/exponential-ui-solid.css (after ui-react's build:css)
bun run --filter @exponential_app/eui-solid shots             # the kitchen sink → /tmp/feed128/solid-shots/ (--theme, --mode, --out)
```

## 主机弹出(VAPP-281)

作为反应 : `host.popupHost = { mount(popup), unmount?(popup) }` 主机锁定 地表外的弹道和菜单`docs/round-7-contract.md`) (中文(简体) ).

## 常见问题

### @exponential\_app/eui-solid 是什么？

solidJS的genUI:平原元素上所绘的核心A2UI目录\(floating-ui,aria-hidden\),其DOM,被编译的样式表和运行时间主题与React渲染器相同,运行于相容套件和网络平面检查\.

### 如何安装 @exponential\_app/eui-solid？

在项目目录运行 npm install @exponential\_app/eui-solid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：solid-js（^1\.9\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @exponential\_app/eui-solid 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @exponential\_app/eui-solid 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @exponential\_app/eui-solid 可以商用吗？

@exponential\_app/eui-solid 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @exponential\_app/eui-solid 的下载量有多少？

根据 npm 官方下载统计，@exponential\_app/eui-solid 在 2026/10/14 – 2026/11/12 这 30 天内被下载 5,553 次，日均约 185 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @exponential\_app/eui-solid 还在维护吗？

最新版本 0\.21\.0 发布于 2026/11/10（3 天前）；至今共发布 29 个版本，其中过去 12 个月发布了 29 个；首次发布于 2026/10/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。