View
配置 JSX，并在 App 与 Widget 两种 surface 之间选择。
配置 JSX
两种视图 surface 共用同一个自动 JSX runtime，将 jsxImportSource 设为 supernode：
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"jsx": "react-jsx",
"jsxImportSource": "supernode",
"strict": true,
"outDir": "dist"
},
"include": ["*.tsx"]
}在 package.json 中设置 "type": "module"。通过 TypeScript 编译 TSX，再在 SuperNode 中运行生成的 JavaScript，例如 tsc && node dist/main.js。SuperNode 提供 supernode 运行时包；执行该命令需要项目安装 TypeScript 编译器。
选择 surface
SuperNode 有两种视图 surface。App 页面由 Compose 渲染，支持状态、输入和实时走动的时间；桌面小组件由 Glance 转成 RemoteViews 渲染，只开放 Glance 能如实渲染的能力。通过导入路径选择 surface：
| Surface | 导入路径 | 渲染方式 | 参考 |
|---|---|---|---|
| App 页面 | supernode/app（组件、Modifier 与 Hooks） | Compose | 组件、Modifier、Hooks 与 Context |
| Widget 快照 | supernode/widget（组件、Modifier 与 widget） | Glance | 组件、Modifier |
每个路径只导出对应渲染器支持的能力，不支持的用法在类型检查阶段就会报错。widget.show() 还会拒绝从 supernode/app 导入的视图，详见校验与报错。
| 能力 | App | Widget |
|---|---|---|
TextField | ✓ | — |
| Hooks 与 Context | ✓ | —（组件是纯函数） |
fontWeight | 全部九档 | normal、medium、bold |
DateText 格式 | date、time、relative、offset、timer（可见时实时更新） | date、time（每次渲染格式化一次） |
contentScale | 全部七种 | crop、fit、fillBounds |
| 单个容器的子节点 | 不限 | 最多 10 个 |
| 修饰符顺序 | 按调用顺序生效 | 与顺序无关，每个属性只能设置一次 |
| 圆角 | Modifier.clip | Modifier.cornerRadius，Android 12（API 31）及以上 |
| 撑满剩余空间 | Modifier.weight(n)，任意比例 | Modifier.defaultWeight()，只能平分 |
子节点与组件
组件名、prop 名、取值和默认值都与 Jetpack Compose 一致。布局与装饰通过 modifier prop 指定，与 Compose 组件的 modifier 参数一致。
函数组件返回 ViewChild。子节点支持视图、组件、数组、文本、数字、布尔值、null 和 undefined，空节点会被忽略。JSX fragment 用于组合子节点。不支持 <div> 这类字符串标签。列表中的函数组件应使用稳定的 key，以便重排时保留状态。
尺寸与间距的单位为 dp，与 widget.displaySize 一致；文字 fontSize 使用 sp。
颜色取值
所有颜色（background，以及文本和分隔线的 color）都可以传入十六进制字符串，或 { light, dark } 对象分别指定浅色和深色模式的颜色。两种写法都支持 #RRGGBB，也可以用 #AARRGGBB 指定透明度。
<Text color={{ light: "#333333", dark: "#EDEDED" }}>Hello</Text>对齐取值
Box 的 contentAlignment 取值与 Compose Alignment 一致："topStart"、"topCenter"、"topEnd"、"centerStart"、"center"、"centerEnd"、"bottomStart"、"bottomCenter"、"bottomEnd"。Column 的 horizontalAlignment 取 "start"、"center" 或 "end"，Row 的 verticalAlignment 取 "top"、"center" 或 "bottom"。
start 和 end 跟随布局方向，在从右到左的语言中会互换。