Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

[Feature] Reconciler: keep host-added attributes on retained nodes

未关闭
  • 哪里不对？
#196 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
25/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
typescript
领域
data-visualization

调研方向

Start with the failing repro in packages/charts-core/test-repro/11-renderer-dom.test.ts and the syncAttributes removal loop in src/reconcile.ts (around lines 165-167); the animated path is in src/motion.ts (around lines 2204-2214), and focus layers re-render near line 1209. Done means the repro passes on both paths, with the design choice (reserved prefix versus a preserveAttributes option) settled by maintainers first. Part B, the missing className option on cartesian marks, is a separate docs-and-options change.

由索引模型根据 Issue 内容生成。

描述

Version: @tanstack/charts 1.1.0 (57774e1).

An app cannot keep its own per-node state (a data-* marker, a CSS custom property) on renderer nodes, because the reconciler strips it on the next rebuild.

A. Reconciler removes host-added attributes

  • syncAttributes runs for every retained element and removes each attribute the next scene element does not emit, including style, data-* and class: reconcile.ts:165-167.
  • The animated path does the same, exempting only data-ts-motion-role, transform and opacity: motion.ts:2204-2214.
  • Focus layers are re-rendered through the same reconciler on each focus change, so a host write there is lost: motion.ts:1209-1211.
  • The docs mention data-ts-key matching but not host attributes: rendering-and-export.md:130.

Repro: save as packages/charts-core/src/repro.test.ts, run pnpm vitest run packages/charts-core/src/repro.test.ts (vitest + jsdom).

import { expect, it } from 'vitest'
import { reconcileChartSvg } from './reconcile'

const svg = (extra = '') =>
  `<svg xmlns="http://www.w3.org/2000/svg"><circle data-ts-key="a" class="ts-chart__dot" cx="1" cy="1" r="2"${extra}/></svg>`

it('keeps host-added attributes on a retained node across a rebuild', () => {
  const container = document.createElement('div')
  reconcileChartSvg(container, svg())
  const node = container.querySelector('circle')!
  node.setAttribute('data-x-active', '1')
  node.style.setProperty('--x-glow', '1')

  reconcileChartSvg(container, svg(' cx="5"')) // same key, cx changes

  expect(container.querySelector('circle')).toBe(node) // node is retained
  expect(node.getAttribute('data-x-active')).toBe('1')
  expect(node.style.getPropertyValue('--x-glow')).toBe('1')
})

Actual: AssertionError: expected null to be '1' at the data-x-active assertion. The test covers the non-animated reconciler only.

Expected: attributes the scene never emits (a documented prefix such as data-x-*, or custom properties inside style) are left alone on retained nodes. Preferred: skip removal for a reserved prefix in both syncAttributes loops. Alternative: a reconcile.preserveAttributes: string[] host option.

B. Cartesian marks: no documented class hook

Moved to #212 (documenting the renderer's public contracts), together with C and D from this comment (data-ts-motion-role and the group container classes). A class hook does not replace A for per-node dynamic state.

主要语言
TypeScript
星标
842
派生
53
平均合并
3 小时 59 分钟
30 天内合并 PR
19

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

TanStack/charts 的其他 Issue

查看 TanStack/charts 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。