@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.tsA级 浏览器级的网络均等套件还比较了计算过的样式、框架和 零容忍度的像素.

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条,同样 钩为回放:

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没有扫描线.

版式

初级

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

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。 。 。 .

图标

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) (中文(简体) ).