@nx-lang /价值观

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

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

普通页面

<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直接将属性传递给自定义元素，所以不需要包装器：

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的元素：

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">>;
    }
  }
}

属性和属性

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

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

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

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

折叠

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

徘徊

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

(property) done: boolean

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

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

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

进入声明

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

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：

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 得到黑暗的主题。这些自定义属性重新定义了它的样式：

开发

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

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

Host-driven选择

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