Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#196 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
typescript
Área
data-visualization

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
819
Forks
49
Merge medio
12 h 9 min
PR fusionados (30 d)
6

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/charts

Todos los issues de TanStack/charts

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.