Idyll 支持哪些 JavaScript 库和图形库?

Idyll 可以配合大多数发布在 npm 上的 JavaScript 库使用，官方文档明确点名兼容 D3 和 P5 这类图形库。前提是你的库能作为 React 组件生态的一部分被引入——因为 Idyll 中每个标签都对应一个 React 组件，组件接收你传入的属性，属性值可以是响应式变量或表达式，Idyll 负责监听变量变化并重新渲染。

机制：标签即组件，属性即数据

Idyll 的交互能力来自一条简单的映射规则：你在文本里写的标签，会被当作 React 组件渲染；标签上的属性，会作为 props 传给该组件。

Lorem ipsum...
[ComponentName property:variableValue onEvent:`variableValue = 5` /]
Lorem ipsum...

这段语法说明三件事：

• 属性可以绑定变量：property:variableValue 把变量值传给组件。
• 属性可以是表达式：用反引号包裹的 `variableValue = 5` 会在事件触发时执行。
• 更新自动生效：变量变化后，Idyll 自动重新渲染相关组件，不需要手写刷新逻辑。

因此，判断一个库能否在 Idyll 里用，关键不是"Idyll 有没有内置它"，而是"它能否被包装成接收 props 的 React 组件"。

图形库：D3 与 P5

官方文档将 D3 和 P5 列为兼容的图形库。这类库的典型用法是：把绘图逻辑封装进一个组件，通过属性把数据、定义域、采样点等参数传进去。

文档给出的内置 Chart 组件示例可以直接说明这种模式：

[Chart equation:`(t) => Math.sin(t)` domain:`[0, 2 * Math.PI]` samplePoints:1000 /]

此时图表是静态的。要让它动起来，就把参数换成变量：

[var name:"func" value:`Math.sin` /]
[var name:"domainStart" value:0 /]
[var name:"domainEnd" value:`2 * Math.PI` /]
[Chart equation:`(t) => func(t)` domain:`[domainStart, domainEnd]` samplePoints:1000 /]

变量再通过按钮或输入控件更新，图表就会随之重绘：

[Button onClick:`func = Math.sin`]sin[/Button]
[Button onClick:`func = Math.cos`]cos[/Button]

同样的变量也可以绑定到标准输入控件上（例如更新定义域的起点和终点），实现滑块调参式的探索体验。这套"变量 → 属性 → 组件重渲染"的链路，对 D3、P5 封装的组件同样适用。

普通 JavaScript 库

文档的表述是"可以支持 npm 上大多数 JavaScript 库"。这是一个范围较宽但带保留的说法，实际可用性取决于库本身的形态：

选择时的判断条件很简单：如果你的库需要一个容器元素并自行管理渲染，就把它包进一个 React 组件，把 Idyll 变量作为 props 传入，在组件内部完成初始化与更新。这样既保留了库的原生用法，又能接入 Idyll 的响应式机制。

能做出什么

按文档描述，Idyll 适合创建可探索的解释性文档、数据驱动的叙事，以及为博客引擎和内容管理系统增加交互性；产物可以是独立网页，也可以嵌入现有页面。样式上可选内置主题或自定义 CSS，官方还提供免费的公共托管服务用于发布作品。

如果你的目标是"用熟悉的 JS 图形库做可交互的图表或可视化叙事"，Idyll 的组件模型能承接；如果某个库无法以组件形式接入，就需要先评估封装成本，再决定是否采用。