# @nx-lang/value-view 中文文档

规范地址：https://npmcn.com/package/%40nx-lang/value-view/

版本：0\.10\.0
npm 元数据更新时间：2026-11-02T01:24:01.156Z
中文译文更新时间：2026-11-02T01:44:59.496Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40nx-lang/value-view
原文对照：https://npmcn.com/package/%40nx-lang/value-view/?lang=original
项目主页：https://nxlang.org/
源码仓库：https://github.com/nx-lang/nx

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

- 包体积（解压后）：114 kB，31 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.0\.0
- 运行依赖：0 个
- peer 依赖：shiki ^4\.0\.0，@nx-lang/language \>=0\.1\.0
- 首次发布：2026-09-29T03:05:41.470Z
- 最新版本发布：2026-11-02T01:24:00.747Z
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

一个自定义元素，它将NX值显示为NX文本：用编辑器的语法突出显示，在较长的地方折叠，并在悬停时解释自己。没有框架。

## 安装

```sh
npm install @nx-lang/value-view
```

也可以使用：`pnpm add @nx-lang/value-view`、`yarn add @nx-lang/value-view`、`bun add @nx-lang/value-view`

## README

# @nx-lang /价值观

一个 `<nx-value>` 自定义元素，以NX写入的方式显示NX值：文本 `nxlang run` 打印，突出显示NX编辑器使用的语法，在它跨越几行时折叠，和 讲解悬停时的每个部分。它不依赖框架，并将其标记和样式保存在 因此，它可以放到一个普通页面，一个React应用程序，一个文档站点或一个VS Code webview中。

它显示的值是带注释的文本 `NxProgramArtifact.formatValue(value)` 回报 [`@nx-lang/sdk-wasm`](https://npmcn.com/package/bindings/wasm/README.md)： `{ text, nodes }`，其中每个节点表示一个 部分文本是（一条记录、一个属性、一个序列、一个大小写、一个标量）及其类型和时间 程序声明它，其中。

## 普通页面

```html
<nx-value id="output"></nx-value>

<script type="module">
  import "@nx-lang/value-view";
  import { evaluateFunction, prepareNxIrProgram } from "@nx-lang/ir-runtime";
  import { createNxHost, compileNxModule } from "@nx-lang/sdk-wasm";
  // With a bundler such as Vite; otherwise, wherever the page serves the package's `nx.wasm`.
  import nxModuleUrl from "@nx-lang/sdk-wasm/nx.wasm?url";

  const host = createNxHost(await compileNxModule(fetch(nxModuleUrl)));
  const artifact = host.buildProgramArtifact(`type User = { id:string name:string }
<User id="1" name="Ada" />`);
  try {
    document.getElementById("output").value = artifact.formatValue(evaluateFunction(prepareNxIrProgram(artifact.generateNxIr()[0].bytes), "root"));
  } finally {
    artifact.dispose();
  }
</script>
```

导入包定义了元素。在没有DOM的地方，如在服务器呈现中，导入 它什么也不做，而且 `defineNxValueElement(registry)` 在您选择的注册表中定义它。

## 反应

React 19直接将属性传递给自定义元素，所以不需要包装器：

```tsx
import "@nx-lang/value-view";
import type { NxValueText } from "@nx-lang/value-view";

export function Output({ value, stale }: { value: NxValueText; stale: boolean }) {
  return <nx-value value={value} stale={stale} />;
}
```

在你的应用程序中声明JSX的元素：

```ts
import type { NxValueElement } from "@nx-lang/value-view";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "nx-value": React.DetailedHTMLProps<React.HTMLAttributes<NxValueElement>, NxValueElement> &
        Partial<Pick<NxValueElement, "value" | "stale" | "truncated" | "describe" | "actions" | "highlighter">>;
    }
  }
}
```

## 属性和属性

| 名字 | 种类 | 意义 |
| --- | --- | --- |
| `value` | 财产 | 这个 `{ text, nodes }` 显示 |
| `truncated` | 属性和属性 | 文字后面的通知说其余部分被剪掉了 |
| `stale` | 属性和属性 | 文字被淡化，并打上了“过时”的标签；悬停和折叠仍然有效 |
| `describe` | 财产 | 节点的主机悬停；见下文 |
| `actions` | 财产 | 节点的主机按钮；见下文 |
| `highlighter` | 财产 | 一个志贵荧光笔分享，与NX语法和两个主题加载 |
| `themes` | 财产 | `{ light, dark }` 志贵主题名称；默认的 `github-light`， `github-dark` |

没有一个 `highlighter`，元素加载了Shiki的核心，oniguruma引擎和两个主题 第一次使用，一次整个页面，并显示值不带颜色，直到他们到达。一页 已经用Shiki着色的人可以用荧光笔代替； `nxShikiLanguage()` 返回语法。 以志贵的方式来建造一个。

大于的值 `MAX_COLORED_CHARACTERS` （20,000）显示为未着色：着色运行在主体上 把整篇文章串起来，这样大小的线每次改动都能撑起整页。它仍然 折叠，悬停和复制。

不要把荧光笔放在摩纳哥编辑器后面。元素的颜色有浅有暗 主题，用于切换荧光笔的当前主题，以及 `@shikijs/monaco` 符和 无论主题是什么，编辑器都会从错误的调色板重新上色。NX操场让 由于这个原因，元素会加载自己的元素。

`setFolded(index, folded)` 和 `isFolded(index)` 折叠并读取节点 `index` 的 `value.nodes`.

## 折叠

文本跨越一行以上的每条记录、属性和序列都会向左切换。 一个折叠的节点显示它的第一行和一个省略号；拨动键或省略号都可以展开它。 一切都开始展开，复制总是复制整个文本。

## 徘徊

指向值的一部分，或使用箭头键将焦点移动到该值，将显示对 最里面的节点。默认情况下，描述仅来自节点，拼写为NX 语言服务拼写悬停：

```nx
(property) done: boolean
```

懂得更多套路的主持人 `describe`。它接收节点、它的索引和值，然后返回 减价或 `undefined` 默认情况下，同步或作为承诺。操场回答 语言服务悬停在节点的声明上，所以悬停 `User` 在输出中显示 在源代码中悬停它的声明显示了什么：

```ts
element.describe = async (node) =>
  node.declaration === undefined ? undefined : await hoverMarkdownAt(node.declaration);
```

元素呈现降价悬停使用：围栏 `nx` 块、高亮显示和段落 内联代码。

## 进入声明

单击带有 `declaration`，或按回车键，即可启动 `nx-value-navigate`． 它的 `detail` 是 `{ node, index, declaration }`,在那里 `declaration` 是程序源中的跨度， 以1为基础的行和列：

```ts
element.addEventListener("nx-value-navigate", (event) => {
  const { declaration } = event.detail;
  editor.revealLine(declaration.startLine);
});
```

## 节点按钮

主机可以在值with上放置按钮 `actions`，一个函数从一个节点，它的索引和值 到一个列表 `{ id, label, title? }`，或者 `undefined` 没有一个。每个按钮位于其 节点的第一行，在节点折叠时保持可见，并触发 `nx-value-action` 与 `{ node, index, id }` 当按下时，通过点击或从键盘。按钮不是 文本，因此复制时会省略它们，而值为 `stale` 他们是残疾人。

playground的预览会在组件输出中的每个动作处理程序上放置一个 记录SDK的类型 `formatValue` 拼写一个处理程序，并通过节点的 `pointer`：

```ts
element.actions = (node) =>
  node.role === "record" && node.type === "ActionHandler"
    ? [{ id: "dispatch", label: "Tapped", title: "Dispatch Button.Tapped" }]
    : undefined;
element.addEventListener("nx-value-action", (event) => {
  session.dispatchHandler(event.detail.node.pointer, { $type: "Button.Tapped" });
});
```

## 样式

元素紧跟页面的元素 `color-scheme`：标记颜色的使用 `light-dark()`，所以一页设置 `color-scheme: dark` 得到黑暗的主题。这些自定义属性重新定义了它的样式：

| 财产 | 默认的 |
| --- | --- |
| `--nx-value-font-family` | 系统单空间堆栈 |
| `--nx-value-font-size` | `13px` |
| `--nx-value-line-height` | `1.5` |
| `--nx-value-foreground` | `CanvasText` |
| `--nx-value-background` | `transparent` |
| `--nx-value-padding` | `8px 12px 8px 24px` |
| `--nx-value-border` | 浅灰色浅灰色或深灰色 |
| `--nx-value-hover-background` | 浅蓝色浅蓝色或深蓝色 |
| `--nx-value-hover-popup-background` | 白色或深灰色 |
| `--nx-value-action-background` | 浅蓝色浅蓝色或深蓝色 |
| `--nx-value-action-foreground` | 深蓝色深蓝色或浅蓝色 |
| `--nx-value-action-border` | 半透明的蓝色 |
| `--nx-value-action-hover-background` | 更深的蓝色 |

## 开发

```bash
pnpm install
pnpm --filter @nx-lang/value-view test
```

测试在jsdom下运行元素 `node --test`.

### Host-driven选择

呼叫 `element.selectNodes(indices)` 突出显示当前的所有匹配节点 `value`． 它 在不触发导航事件的情况下展开它们的祖先并将第一场比赛滚动到视图中。 通过 `false` 作为在不滚动的情况下更新高亮显示的第二个参数。选择生存 重新上色和清除时 `value` 被替换。主机应该将索引范围设置为当前的 输出和源快照；源/来源匹配属于主机的预览适配器。

## 常见问题

### @nx-lang/value-view 是什么？

一个自定义元素，它将NX值显示为NX文本：用编辑器的语法突出显示，在较长的地方折叠，并在悬停时解释自己。没有框架。

### 如何安装 @nx-lang/value-view？

在项目目录运行 npm install @nx-lang/value-view，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：shiki（^4\.0\.0）、@nx-lang/language（\>=0\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @nx-lang/value-view 支持 TypeScript 吗？

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

### @nx-lang/value-view 支持 ESM 还是 CommonJS？

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

### @nx-lang/value-view 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @nx-lang/value-view 可以商用吗？

@nx-lang/value-view 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @nx-lang/value-view 还在维护吗？

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