Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Reconciler removes host-added attributes; cartesian marks lack a documented class hook

オープン
  • 何か問題がありますか？
#196 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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 の本文から書いたものです。

説明

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. Cartesian marks also have no documented class hook.

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: packages/charts-core/test-repro/11-renderer-dom.test.ts (vitest + jsdom)

import { expect, it } from 'vitest'
import { reconcileChartSvg } from '../src/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 (pnpm vitest run packages/charts-core/test-repro/11-renderer-dom.test.ts): 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

  • Polar, sunburst and geo marks document className (polar.md:42); line, area, dot, rule, text and bar marks do not.
  • Their ts-chart__* classes exist in source (line.ts:356, bar.ts:399) but are undocumented.
  • A workaround exists: ChartMark.initialize is public (types.ts:1199), and whenFocused wraps it (focus-mark.ts:33-35). No doc shows this recipe, and it cannot reach axis or focus-guide nodes.

Expected: add className to cartesian mark options (and axis / focus-guide options), matching polar. Alternative: document the wrapper recipe and which ts-chart__* names are stable. A class hook does not replace A for per-node dynamic state.

主要言語
TypeScript
スター
819
フォーク
49
平均マージ
12時間 9分
マージ済み PR（30日）
6

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/charts のほかの issue

TanStack/charts の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。